Uppgiftslista i realtid med Google Firebase: 12 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:46

Hallå där!

Vi använder alla att-göra-listor dagligen, oavsett om det är online eller offline. Även om offline -listor är benägna att gå vilse och virtuella listor kan vara felplacerade, av misstag raderas eller till och med glömma. Så vi bestämde oss för att göra en på Google Firebase, en databas i realtid. Varför? Eftersom:

1. Det är häftigt

2. Det är realtid, så ändringar görs omedelbart.

3. Lätt att använda och centraliserat; all data finns på molnet och är tillgänglig via vilken plattform som helst.

4. Ett underbart API som är mycket stödjande.

5. Uppdateringar är enkla att göra.

Vi kommer att fokusera på att lägga till data manuellt till Firebase i detta projekt!

Steg 1: Börja med Google Firebase

Besök Googles Firebase -webbplats och klicka på knappen "Logga in" i det övre vänstra hörnet och logga in via ditt Google -konto.

När du har loggat in klickar du på "Gå till konsolen" för att komma åt din datorkonsol för firebase. Oroa dig inte, det är inget avancerat.

Steg 2: Gör ett 'projekt'

Klicka på den enorma Plus -ikonen (Lägg till projekt) på din nya skärm för att skapa ett nytt projekt. Varje projekt kan bara ha en databas, så du måste upprepa detta projekt flera gånger om du vill ha flera realtidsdatabaser.

Skriv nu ditt projektnamn och välj användarland. Klicka på Skapa projekt för att komma igång!

Steg 3: Välkommen till Firebase -konsolen

Efter laddningen, klicka på fortsätt. Detta tar dig till en ny skärm.

Välkommen till din Google Firebase -konsol!

Steg 4: Skapa databasen

Klicka på "Databas" i menyn till vänster. Detta leder dig till en ny skärm där du kan välja mellan Cloud Firestore eller Realtime Database. Vi kommer att använda Realtime Database för detta projekt. Klicka på Kom igång!

Steg 5: Definiera säkerhetsregler för din Firebase

Firebase erbjuder kraftfulla autentiseringsfunktioner så att det inte finns någon obehörig åtkomst till din databas. Men för att hålla det enkelt kommer vi att använda en "offentlig" databas, som kan ändras av alla som har tillgång till din databas "referenser". Mer om meriter senare.

Välj "Testläge" för detta projekt och klicka på Aktivera.

Steg 6: Välkommen till din Firebase

Så här skulle din skärm se ut. Förutom namnet på projektet.

Steg 7: Skapa din första uppgiftslista

Vi kommer att skapa uppgiftslistor, kallade "skopor". Varje hink är en kapslad lista med data. Medan du är fri att välja vilken typ av häckning du vill, kommer varje hink för detta projekt att representera en uppgift.

För att lägga till den första hinken, klicka på "+" -ikonen framför null som visas.

Steg 8: Namn på uppgiftslistan

2 attribut dyker upp. Namn och värde.

"Namn" -taggen används för att referera till namnet på din uppgift. Till exempel vill du skapa en lista med instruktioner som du vill se senare. Så vi använder namnet som instruktioner, för varför inte.

Observera att fälten är korta, så synlighet av längre namn kan vara ett problem. Var dock säker på att namnet är exakt det du skrev.

Även om vi kunde sätta upp något värde för värdetiketten, skulle vi istället vilja lägga till en lista med objekt under rubriken. Så för att skapa boet klickar vi på "Plus" -ikonen framför värdetiketten.

Steg 9: Lägga till detaljer i listan

Du kan se en annan "nivå" i listan har dykt upp.

Vi kommer nu att tilldela ett attribut som heter "När" för att ange den dag du vill göra detta. Skriv "När" i namnetiketten och "söndag", till exempel i värdetiketten.

Nu skulle du vilja lägga till de typer av instruktioner du vill se. Vi kommer att gruppera dessa under namnet "Vad".

Steg 10: Lägga till deluppgifter till listan

Klicka på plusikonen framför namnet "Bucket" eller "Task" eller "List". I det nya fältet skriver du "Vad" i namnet och klickar på plusikonen för att göra en lista under denna rubrik. Klicka på plusikonen framför vad du vill lägga till ett annat fält.

Du kan se att en annan nivå har dykt upp. Skriv dina uppgifter i "Namn" -taggen och en beskrivning i "Värde" -taggen. Experimentera gärna här med mer häckning.

Klicka på lägg till för att slutföra detta. Eller klicka på Avbryt om du har andra tankar om att lägga till data.

Steg 11: Tada

Du kommer att se listan lysa grönt och sedan materialiseras den ordentligt som de data du ställer in. Du kommer att märka att Firebase automatiskt sorterar 'Namn' på listorna och underlistorna alfabetiskt.

Om en uppgift ser ofullständig ut, klicka på den och bläddra till höger för att se den helt.

Steg 12: Slutför lägga till dina uppgifter

Upprepa detta för att göra din lista!

En snabb sammanfattning:

Nya skopor genom att infoga i listan längst till vänster med projektprojektets namn.

Nya attribut genom att infoga i uppgiften.

Nya sublistor genom att infoga uppgifter i en lista!

Du kan se den här listan när som helst och var som helst! Det är perfekt synkroniserat. Njut av!