To-Do-Liste in Echtzeit mit Google Firebase - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:20

Sie da!

Wir alle verwenden täglich To-Do-Listen, sei es online oder offline. Während Offline-Listen dazu neigen, verloren zu gehen, können virtuelle Listen verlegt, versehentlich gelöscht oder sogar vergessen werden. Also haben wir uns entschieden, eine auf Google Firebase zu erstellen, eine Echtzeit-Datenbank. Wieso den? Weil:

1. Es ist cool

2. Es handelt sich um Echtzeit, sodass Änderungen sofort vorgenommen werden.

3. Einfach zu bedienen und zentralisiert; Alle Daten befinden sich in der Cloud und sind über jede Plattform zugänglich.

4. Eine wunderbare API, die sehr unterstützend ist.

5. Updates sind einfach durchzuführen.

In diesem Projekt konzentrieren wir uns darauf, Daten manuell zu Firebase hinzuzufügen!

Schritt 1: Beginnen mit Google Firebase

Besuchen Sie die Google Firebase-Website, klicken Sie oben links auf die Schaltfläche "Anmelden" und melden Sie sich über Ihr Google-Konto an.

Klicken Sie nach der Anmeldung auf „Gehe zur Konsole“, um auf Ihre Firebase-Datenbankkonsole zuzugreifen. Keine Sorge, es ist nichts fortgeschrittenes.

Schritt 2: Erstellen eines 'Projekts'

Klicken Sie auf Ihrem neuen Bildschirm auf das riesige Plus-Symbol (Projekt hinzufügen), um ein neues Projekt zu erstellen. Jedes Projekt kann nur eine Datenbank haben, daher müssen Sie dieses Projekt mehrmals wiederholen, falls Sie mehrere Echtzeitdatenbanken wünschen.

Geben Sie nun Ihren Projektnamen ein und wählen Sie das Land der Verwendung aus. Klicken Sie auf Projekt erstellen, um mit der Arbeit zu beginnen!

Schritt 3: Willkommen bei der Firebase-Konsole

Klicken Sie nach dem Laden auf Weiter. Dadurch gelangen Sie zu einem neuen Bildschirm.

Willkommen bei Ihrer Google Firebase-Konsole!

Schritt 4: Erstellen der Datenbank

Klicken Sie im linken Menü auf 'Datenbank'. Dies führt Sie zu einem neuen Bildschirm, in dem Sie zwischen Cloud Firestore oder Realtime Database wählen können. Wir werden für dieses Projekt Realtime Database verwenden. Klicken Sie auf Loslegen!

Schritt 5: Definieren von Sicherheitsregeln für Ihre Firebase

Firebase bietet leistungsstarke Authentifizierungsfunktionen, damit kein unbefugter Zugriff auf Ihre Datenbank erfolgt. Der Einfachheit halber verwenden wir jedoch eine "öffentliche" Datenbank, die von jedem geändert werden kann, der Zugriff auf Ihre Datenbank-"Anmeldeinformationen" hat. Zu den Anmeldeinformationen später mehr.

Wählen Sie den 'Testmodus' für dieses Projekt und klicken Sie auf Aktivieren.

Schritt 6: Willkommen bei Ihrer Firebase

So würde Ihr Bildschirm aussehen. Außer dem Namen des Projekts.

Schritt 7: Erstellen Sie Ihre erste Aufgabenliste

Wir werden Aufgabenlisten erstellen, die als "Buckets" bezeichnet werden. Jeder Bucket ist eine verschachtelte Liste von Daten. Sie können frei wählen, welche Verschachtelungsformen Sie möchten, aber für dieses Projekt repräsentiert jeder Bucket eine Aufgabe.

Um den ersten Bucket hinzuzufügen, klicken Sie wie gezeigt auf das '+'-Symbol vor Null.

Schritt 8: Name der Aufgabenliste

2 Attribute werden angezeigt. Name und Wert.

Das Tag 'Name' wird verwendet, um auf den Namen Ihrer Aufgabe zu verweisen. Zum Beispiel möchten Sie eine Liste von Instructables erstellen, die Sie später sehen möchten. Also verwenden wir den Namen als Instructables, denn warum nicht.

Beachten Sie, dass die Felder kurz sind, sodass die Sichtbarkeit längerer Namen ein Problem sein kann. Seien Sie jedoch versichert, dass der Name genau dem entspricht, was Sie eingegeben haben.

Wir könnten zwar einen beliebigen Wert für das Value-Tag angeben, möchten jedoch stattdessen eine Liste mit Elementen unter der Überschrift hinzufügen. Um dieses Nest zu erstellen, klicken wir auf das Plus-Symbol vor dem Wert-Tag.

Schritt 9: Details zur Liste hinzufügen

Sie können sehen, dass eine andere 'Ebene' der Liste erschienen ist.

Wir weisen nun ein Attribut namens 'Wann' zu, um den Tag anzugeben, an dem Sie dies tun möchten. Geben Sie „Wann“in das Namens-Tag ein und „Sonntag“beispielsweise in das Wert-Tag.

Jetzt möchten Sie die Arten von Instructables hinzufügen, die Sie sehen möchten. Diese werden wir unter dem Namen „Was“zusammenfassen.

Schritt 10: Hinzufügen von Unteraufgaben zur Liste

Klicken Sie auf das Plus-Symbol vor Ihrem „Bucket“- oder „Task“- oder „List“-Namen. Geben Sie in das neue Feld „Was“im Namen ein und klicken Sie auf das Plus-Symbol, um eine Liste unter dieser Überschrift zu erstellen. Klicken Sie auf das Plus-Symbol vor dem, was ein weiteres Feld hinzufügen soll.

Sie können sehen, dass eine andere Ebene erschienen ist. Geben Sie Ihre Aufgaben in das Tag „Name“und eine Beschreibung in das Tag „Wert“ein. Fühlen Sie sich frei, hier mit mehr Verschachtelung zu experimentieren.

Klicken Sie auf Hinzufügen, um dies abzuschließen. Oder klicken Sie auf Abbrechen, falls Sie Bedenken haben, die Daten hinzuzufügen.

Schritt 11: Tada

Sie werden sehen, dass die Liste grün leuchtet und sich dann fest als die von Ihnen eingestellten Daten materialisiert. Sie werden feststellen, dass Firebase die 'Namen' der Listen und der Unterlisten automatisch alphabetisch sortiert.

Wenn eine Aufgabe unvollständig aussieht, klicken Sie darauf und scrollen Sie nach rechts, um sie vollständig anzuzeigen.

Schritt 12: Schließen Sie das Hinzufügen Ihrer Aufgaben ab

Wiederholen Sie dies, um Ihre Liste zu erstellen!

Eine kurze Zusammenfassung:

Neue Buckets durch Einfügen in die Liste ganz links mit einem projektprojektartigen Namen.

Neue Attribute durch Einfügen auf Aufgabe.

Neue Unterlisten durch Einfügen von Aufgaben innerhalb einer Liste!

Sie können diese Liste jederzeit und überall einsehen! Es ist perfekt synchronisiert. Genießen!