Einrichtung: Online-Sync und Google Kalender

Alle drei sind für deinen Zweck kostenlos und brauchen keine Kreditkarte. Supabase pausiert ein kostenloses Projekt nach einer Woche ganz ohne Nutzung. Dann einfach im Supabase-Dashboard auf „Restore project“ klicken; deine Geräte arbeiten in der Zwischenzeit normal weiter.

Dein Passwort ist der Schlüssel. Supabase bekommt nur einen daraus abgeleiteten Wert. Beim Anlegen des Kontos zeigt die App einmalig einen Wiederherstellungscode an. Bewahre ihn getrennt vom Passwort auf (ausgedruckt oder im Passwort-Manager). Ohne Passwort und Code kann niemand die Cloud-Daten öffnen, auch du nicht. Die Daten auf deinen Geräten bleiben davon unberührt.

1. Auf supabase.com mit „Start your project“ ein kostenloses Konto anlegen. Merke dir die E-Mail-Adresse; nutze sie später auch in den Apps.
2. New project: Name zum Beispiel viktors-apps, ein Datenbank-Passwort erzeugen und sicher ablegen (wird für die Apps nicht gebraucht), Region Central EU (Frankfurt). Mit „Create new project“ bestätigen und warten, bis das Projekt bereit ist.
3. Links SQL Editor › New query. Den gesamten Inhalt der Datei supabase-sql.txt (aus Supabase.zip, öffnet sich im Editor) einfügen und auf Run klicken. Es erscheint „Success“. Unter Table Editor stehen jetzt vault, records, google_links und google_states.
4. Links Authentication › URL Configuration (erst nach Schritt 2 möglich, dann hierher zurückkehren):
   • Site URL: die Adresse deiner Apps mit Schrägstrich am Ende, z. B. https://viktors-apps.pages.dev/. Die Startseite deiner Apps zeigt sie unter „Deine Adressen für die Einrichtung“ zum Kopieren.
   • Redirect URLs › „Add URL“: dieselbe Adresse mit ** am Ende, z. B. https://viktors-apps.pages.dev/**. Nur falls du die PC-Version mit „… starten.bat“ weiter nutzt, zusätzlich http://127.0.0.1:47811/**, http://127.0.0.1:47812/**, http://127.0.0.1:47813/**.
   • Save klicken.
5. Links Project Settings (Zahnrad):
   • unter Data API die Project URL kopieren, z. B. https://abcdefghijkl.supabase.co. Wird dort …supabase.co/rest/v1/ angezeigt, nimm nur den Teil bis .supabase.co.
   • unter API Keys den Publishable key (sb_publishable_…) kopieren. Ist dort nur „Legacy API keys“ sichtbar, nimm anon public.

   Den secret- bzw. service_role-Schlüssel nie in die Apps eintragen. Er gehört nur in Supabase selbst.

E-Mails (Bestätigung, Passwort vergessen)

Supabase verschickt ohne eigenen Mailserver nur an Mitglieder deines Projekts und höchstens etwa zwei Mails pro Stunde. Melde dich deshalb in den Apps mit derselben E-Mail-Adresse an wie bei Supabase. Kommt keine Bestätigungsmail an, kannst du unter Authentication › Sign In / Providers › Email die Option „Confirm email“ ausschalten.

Nach dem ersten Anmelden in der App

Sobald dein Konto in Schritt 4 angelegt ist: Authentication › Sign In / Providers › „Allow new users to sign up“ ausschalten. Dann kann niemand sonst ein Konto in deinem Projekt anlegen.

1. Web-Apps.zip entpacken. Im entpackten Ordner liegen direkt index.html, config.js und die Ordner ziele, notizen und finanzen. Diesen Ordner lädst du später hoch.
2. In diesem Ordner config.js mit dem Editor öffnen (Rechtsklick › „Öffnen mit“ › Editor) und die beiden Werte aus Schritt 1.5 eintragen. Nur den Text zwischen den Hochkommas ersetzen:

   window.VAPPS_CONFIG = {
     supabaseUrl: 'https://abcdefghijkl.supabase.co',
     supabaseKey: 'sb_publishable_…'
   };

   Mit Strg+S speichern.
3. Auf dash.cloudflare.com ein kostenloses Konto anlegen und die E-Mail bestätigen.
4. Links Workers & Pages › Create application. Die angebotenen Workers-Optionen (GitHub, Hello World, Template, „Upload your static files“) nicht wählen. Ganz unten auf der Seite steht „Looking to deploy Pages? Get started“, darauf klicken. Gibt es oben Reiter „Workers“ und „Pages“, stattdessen den Reiter Pages wählen.
5. Bei „Drag and drop your files“ auf Get started klicken. Projektname, z. B. viktors-apps, dann Create project. Die Adresse wird https://viktors-apps.pages.dev. Ist der Name vergeben, hängt Cloudflare Zeichen an; maßgeblich ist die angezeigte Adresse.
6. Den Ordner aus Punkt 1 in das Feld ziehen (oder „select from computer“ › „Upload folder“). In der Liste müssen Einträge wie ziele/index.html mit Ordnernamen erscheinen, insgesamt rund 45 Dateien. Dann Deploy site.
7. Prüfen: Die Adresse öffnen. Die Startseite zeigt einen grünen Kasten „✓ Alle drei Apps gefunden und die Verbindung zu Supabase ist eingetragen“. Ein roter Kasten sagt genau, was fehlt. Darunter stehen deine Adressen für Schritt 1.4 und 3 B.

Neue Versionen: Projekt öffnen › Create deployment › Umgebung Production › den ganzen Ordner erneut hochladen › Save and Deploy. Die Apps melden sich dann mit „Neue Version bereit“. Deine Daten bleiben dabei unverändert.

Warum Pages und nicht „Upload your static files“? Das legt einen Worker an. Bei dem gehen beim erneuten Hochladen über das Dashboard die Unterordner verloren; die drei Apps überschreiben sich dann gegenseitig. Die Apps erkennen das und zeigen „Upload unvollständig“.

AGoogle-Cloud-Projekt

1. console.cloud.google.com mit deinem Google-Konto öffnen und oben über die Projektauswahl ein neues Projekt anlegen, z. B. „Viktors Apps“.
2. Menü › APIs & Dienste › Bibliothek › „Google Calendar API“ suchen › Aktivieren.
3. Menü › Google Auth Platform. Steht dort „noch nicht konfiguriert“: Erste Schritte. App-Name „Viktors Apps“, deine E-Mail als Support-Adresse › Weiter › Zielgruppe Extern › Weiter › Kontakt-E-Mail › Weiter › den Richtlinien zustimmen › Erstellen. Danach landest du auf einer Übersicht mit „Messwerte“ und „Projektprüfung“.
4. Links Clients › Client erstellen (oder auf der Übersicht „OAuth-Client erstellen“) › Anwendungstyp Webanwendung, Name „Viktors Apps“.
   • Autorisierte JavaScript-Quellen: leer lassen (werden nicht gebraucht; dort sind keine Pfade erlaubt).
   • Autorisierte Weiterleitungs-URIs › „+ URI hinzufügen“: deine Project URL aus Schritt 1.5 plus /functions/v1/gcal/callback:

     https://abcdefghijkl.supabase.co/functions/v1/gcal/callback

   Erstellen. Client-ID und Clientschlüssel kopieren (Clientschlüssel = Client Secret). Später findest du beide unter Clients › Name des Clients.
5. Links Datenzugriff › Bereiche hinzufügen oder entfernen › unten bei „Bereiche manuell hinzufügen“ https://www.googleapis.com/auth/calendar.events.owned eintragen › Zur Tabelle hinzufügen › Aktualisieren › Speichern.
6. Links Zielgruppe › bei Veröffentlichungsstatus „Testen“ auf App veröffentlichen › bestätigen. Danach steht dort „In Produktion“. Im Testmodus dürften sich nur eingetragene Testnutzer anmelden, und die Verbindung liefe nach 7 Tagen ab. Eine Überprüfung durch Google brauchst du für die eigene Nutzung nicht.

BEdge Function in Supabase

1. In Supabase links Edge Functions › Deploy a new function › Via Editor.
2. Als Namen genau gcal eintragen. Im Editor steht Beispielcode: alles markieren (Strg+A) und löschen. Dann den gesamten Inhalt von gcal-index.txt (aus Supabase.zip, öffnet sich im Editor) einfügen und Deploy function klicken. Bei einer neuen Version: Funktion gcal öffnen › Reiter Code › Inhalt ersetzen › Deploy.
3. Die Funktion öffnen › Reiter Details bzw. Settings › den Schalter zur JWT-Prüfung („Verify JWT“ / „Enforce JWT verification“) ausschalten und speichern. Google ruft die Rückleitung ohne Supabase-Anmeldung auf; alle anderen Wege prüft die Funktion selbst.
4. Edge Functions › Secrets. Oben unter „Add or replace secrets“ je Zeile Name und Value eintragen, mit Add another eine weitere Zeile, am Ende Save:

   Name	Value
   GOOGLE_CLIENT_ID	Client-ID aus A.4 (endet auf .apps.googleusercontent.com)
   GOOGLE_CLIENT_SECRET	Clientschlüssel aus A.4
   ALLOWED_ORIGINS	die Adresse deiner Apps ohne Schrägstrich am Ende, z. B. https://viktors-apps.pages.dev (steht auf der Startseite). Mehrere Adressen mit Komma trennen.

   Ein Secret ändern: dieselbe Zeile mit gleichem Namen und neuem Wert eintragen und Save.
5. Prüfen: https://abcdefghijkl.supabase.co/functions/v1/gcal/callback (mit deiner Project URL) im Browser öffnen. Richtig ist der Text „Dieser Anmeldelink ist abgelaufen …“. Erscheint eine Meldung mit „authorization“ oder „JWT“, ist die JWT-Prüfung noch an. Erscheint „GOOGLE_CLIENT_ID und GOOGLE_CLIENT_SECRET fehlen“, fehlen die Secrets. „Not found“ heißt: Die Funktion heißt nicht genau gcal.

CIn der App verbinden

1. Ziele (oder Notizen) öffnen und beim Online-Sync angemeldet sein (Wolken-Symbol oben).
2. Kalender › Mit Google verbinden › Mit Google verbinden. Es öffnet sich Googles Anmeldefenster.
3. Konto wählen. Google warnt: „Google hat diese App nicht überprüft“. Das ist bei eigenen Apps normal: Erweitert › Zu Viktors Apps wechseln.
4. Den Zugriff auf deine Kalendertermine erlauben (Häkchen setzen) › Weiter. Das Fenster zeigt „Verbunden“ und schließt sich; auf iPhone/iPad oben auf „Fertig“ tippen.

Eine Verbindung genügt für alle Geräte und für beide Apps. In der jeweils anderen App schaltest du den Abgleich im Kalender mit „Abgleich einschalten“ dazu.

Was abgeglichen wird

• Abgeglichen werden Termine, die du in der Kalenderansicht von Ziele oder Notizen anlegst: mit Uhrzeit oder ganztägig, mit Wiederholung, Zeitzone und Erinnerungen. Sie landen in deinem Google-Hauptkalender und sind dort unsichtbar als Ziele- bzw. Notizen-Termin markiert.
• Beidseitig (Standard): Änderungen und Löschungen auf beiden Seiten werden übernommen. Haben sich beide Seiten geändert, gilt die jüngere Änderung.
• Einseitig (App → Google): Die App ist führend. In Google geänderte oder gelöschte App-Termine stellt sie beim nächsten Abgleich wieder her.
• Deine übrigen Google-Termine zeigt die App nur an, verändert sie nie und speichert sie nicht. Einzelne kannst du mit „In Ziele übernehmen“ zu App-Terminen machen.
• Zieldaten der Ziele und Termine der Hefter in Notizen erscheinen im App-Kalender, werden aber nicht nach Google übertragen.
• Erinnerungen siehst du als Mitteilung der Google-Kalender-App bzw. per E-Mail. Wähle in der App „Standard deines Google-Kalenders“ oder eigene Erinnerungen (höchstens fünf).

PC (Windows)

1. Bisherige Daten sichern. Jede bisherige App wie gewohnt starten (Startmenü bzw. „… starten.bat“) und eine Sicherungsdatei exportieren: Ziele › Datenbank-Symbol oben rechts („Daten und Sicherung“) › Sicherung exportieren; Notizen › „Einstellungen und Daten“ (Zahnrad links) › Exportieren; Finanzen › „Einstellungen & Daten“ (links) › Exportieren. Die Dateien landen im Ordner Downloads.
2. In Edge oder Chrome die Adresse deiner Apps öffnen, z. B. https://viktors-apps.pages.dev/, und auf Ziele klicken. In der Adressleiste auf „App verfügbar · Installieren“ klicken. Genauso für Notizen und Finanzen, jeweils aus dem normalen Browserfenster über die Startseite.
3. In Ziele oben auf das Wolken-Symbol („Nicht angemeldet“) › mit E-Mail und Passwort Anmelden. Hast du noch kein Konto: Neues Konto, Passwort mit mindestens 10 Zeichen, den Wiederherstellungscode speichern oder ausdrucken und bestätigen. Auf dem PC sind Notizen und Finanzen danach automatisch mit angemeldet.
4. Erst jetzt importieren, damit die Daten gleich in die Cloud gehen: Ziele › Datenbank-Symbol › Sicherung importieren › Datei wählen › „Übernehmen“ (vorausgewählt; sind in der App schon Ziele, die bleiben sollen: „Nur fehlende Ziele hinzufügen“) › Importieren. Notizen › Einstellungen und Daten › Importieren › Übernehmen. Finanzen › Einstellungen & Daten › Importieren › Übernehmen.
5. Das Wolken-Symbol zeigt danach „Synchron“. Die alten Apps bleiben unverändert auf dem PC; du kannst sie später deinstallieren.

Alternative (nicht nötig): Die bisherige PC-Installation (Ordner mit „… starten.bat“) lässt sich auch weiterverwenden. Ersetze dafür die Dateien im Ordner durch das neue Paket (z. B. Ziele.zip), trage in app/config.js deine Supabase-Werte ein, starte „… starten.bat“ und klicke auf „Jetzt aktualisieren“. Deine Daten bleiben erhalten und werden nach der Anmeldung hochgeladen. Dann musst du aber jede neue Version wieder selbst in den Ordner kopieren und die Adressen http://127.0.0.1:4781x bei Supabase und in ALLOWED_ORIGINS eintragen.

iPhone und iPad

1. In Safari https://viktors-apps.pages.dev/ öffnen und eine App antippen.
2. Auf das Teilen-Symbol tippen (Quadrat mit Pfeil; ab iOS 26 über die Taste „…“) › „Zum Home-Bildschirm“ › „Als Web-App öffnen“ eingeschaltet lassen › Hinzufügen.
3. Die App über das neue Symbol starten (nicht in Safari weiterarbeiten – die Home-Bildschirm-App hat einen eigenen Speicher).
4. Wolken-Symbol › Anmelden mit E-Mail und Passwort. Die Daten werden geladen.
5. Für die anderen beiden Apps wiederholen. Auf iPhone und iPad meldest du dich in jeder App einmal an.

Warum nicht einfach in Safari? Safari löscht die Daten einer Website, die sieben Tage lang nicht geöffnet wurde. Apps auf dem Home-Bildschirm sind davon ausgenommen, und deine Daten liegen zusätzlich verschlüsselt in der Cloud.

Notizen auf dem iPad: Sobald du mit dem Apple Pencil zeichnest, blättert der Finger nur noch und zeichnet nicht mehr. Umschalten unter „Einstellungen und Daten“ › „Nur mit dem Stift zeichnen“.

• Status oben im Wolken-Symbol: „Synchron“, „Gleicht ab …“, „Offline · 3“ (drei Änderungen warten), „Sync-Fehler“. Antippen zeigt Details und „Jetzt abgleichen“.
• Ohne Internet arbeitest du normal weiter. Änderungen werden hochgeladen, sobald das Gerät wieder online ist.
• Gleichzeitige Änderungen: Unterschiedliche Felder werden zusammengeführt. Am selben Feld gilt die jüngere Änderung. Hast du in Notizen dieselbe Seite auf zwei Geräten beschrieben, liegt die ältere Fassung als „Konfliktkopie“ daneben; Zeichnungen werden strichweise zusammengeführt. Was auf einem Gerät gelöscht und auf einem anderen geändert wurde, bleibt erhalten.
• Erster Abgleich auf einem Gerät, das schon eigene Daten hat: Die App fragt, ob zusammengeführt oder der Cloud-Stand übernommen werden soll, und legt vorher eine automatische Kopie an.
• Passwort ändern: Wolken-Symbol › „Passwort ändern“. Es gilt für alle drei Apps; angemeldete Geräte bleiben angemeldet.
• Passwort vergessen: Wolken-Symbol › „Passwort vergessen?“ › Link aus der E-Mail öffnen (am besten am PC) › Wiederherstellungscode und neues Passwort eingeben.
• Sicherungsdateien bleiben sinnvoll. Exportiere ab und zu und bewahre die Datei außerhalb des Browsers auf.