Llista de tasques en temps real amb Google Firebase: 12 passos

2025 Autora: John Day | [email protected]. Última modificació: 2025-01-10 13:46

Hola!

Tots fem servir llistes de tasques del dia a dia, ja sigui en línia o fora de línia. Tot i que les llistes fora de línia són susceptibles de perdre’s, les llistes virtuals es poden deixar de situar, esborrar accidentalment o fins i tot oblidar-les. Per tant, vam decidir crear-ne una a Google Firebase, una base de dades en temps real. Per què? Perquè:

1. És genial

2. És el temps real, de manera que els canvis es fan instantàniament.

3. Fàcil d'utilitzar i centralitzat; totes les dades es troben al núvol i són accessibles a través de qualsevol plataforma.

4. Una meravellosa API que ens ajuda molt.

5. Les actualitzacions són fàcils de fer.

Ens centrarem en afegir dades manualment a Firebase en aquest projecte.

Pas 1: començar amb Google Firebase

Visiteu el lloc web de Google Firebase i feu clic al botó "Inicia la sessió" a l'extrem superior esquerre i inicieu la sessió mitjançant el vostre compte de Google.

Després d'iniciar la sessió, feu clic a "Vés a la consola" per accedir a la consola de base de dades de firebase. No us preocupeu, no és res avançat.

Pas 2: fer un "projecte"

A la pantalla nova, feu clic a la gran icona Plus (Afegeix projecte) per crear un projecte nou. Cada projecte només pot tenir una base de dades, de manera que haureu de repetir aquest projecte diverses vegades per si voleu diverses bases de dades en temps real.

Ara, escriviu el nom del projecte i seleccioneu el país d'ús. Feu clic a Crea un projecte per començar a treballar.

Pas 3: Benvingut a Firebase Console

Després de la càrrega, feu clic a continua. Això us portarà a una nova pantalla.

Benvingut a la vostra consola de Google Firebase.

Pas 4: creació de la base de dades

Al menú de l'esquerra, feu clic a "Base de dades". Això us conduirà a una nova pantalla on podeu triar entre Cloud Firestore o Base de dades en temps real. Utilitzarem la base de dades en temps real per a aquest projecte. Feu clic a Comença.

Pas 5: definició de regles de seguretat per a Firebase

Firebase ofereix funcions d'autenticació potents de manera que no hi hagi accés no autoritzat a la vostra base de dades. Tot i això, per simplificar-ho, utilitzarem una base de dades "pública", que pot ser modificada per qualsevol persona que tingui accés a les "credencials" de la vostra base de dades. Més informació sobre les credencials més endavant.

Seleccioneu el "Mode de prova" per a aquest projecte i feu clic a Activa.

Pas 6: Benvingut al vostre Firebase

Així seria la vostra pantalla. Excepte el nom del projecte.

Pas 7: creació de la vostra primera llista de tasques

Crearem llistes de tasques, anomenades "Buckets". Cada dipòsit és una llista de dades imbricada. Tot i que podeu escollir qualsevol forma d’anidament que vulgueu, per a aquest projecte, cada cub representarà una tasca.

Per afegir el primer dipòsit, feu clic a la icona '+' que hi ha davant de null, tal com es mostra.

Pas 8: nom de la llista de tasques

2 Es mostren els atributs. Nom i valor.

L'etiqueta "Nom" s'utilitza per fer referència al nom de la vostra tasca. Per exemple, voldríeu crear una llista d’instructibles que vulgueu veure més endavant. Per tant, fem servir el nom com a instruccions perquè, per què no?

Tingueu en compte que els camps tenen una longitud curta, de manera que la visibilitat de noms més llargs pot ser un problema. Tot i això, assegureu-vos que el nom és exactament el que heu escrit.

Tot i que podríem afegir qualsevol valor per a l’etiqueta Value, ens agradaria afegir una llista d’elements a sota de l’encapçalament. Per crear aquest niu, fem clic a la icona "Més" que hi ha davant de l'etiqueta de valor.

Pas 9: afegir detalls a la llista

Podeu veure que ha aparegut un altre "nivell" de la llista.

Ara assignarem un atribut anomenat "Quan" per indicar el dia en què voleu fer-ho. Escriviu "Quan" a l'etiqueta de nom i, per exemple, "Diumenge" a l'etiqueta de valor.

Ara voldríeu afegir els tipus d’instructibles que voleu veure. Els agruparem sota el nom "Què".

Pas 10: afegir subtasques a la llista

Feu clic a la icona del signe més que hi ha al davant del nom de "Dipòsit", "Tasca" o "Llista". Al nou camp, escriviu "Què" al nom i feu clic a la icona més per fer una llista sota aquest encapçalament. Feu clic a la icona del signe més davant del contingut per afegir un altre camp.

Es pot veure que ha aparegut un altre nivell. Escriviu les tasques a l'etiqueta "Nom" i una descripció a l'etiqueta "Valor". No dubteu a experimentar aquí amb més nidificació.

Feu clic a Afegeix per finalitzar-ho. O bé feu clic a Cancel·la en cas que tingueu en compte la possibilitat d'afegir les dades.

Pas 11: Tada

Veureu que la llista es torna verda i es materialitza fermament a mesura que les dades que definiu. Notareu que Firebase ordena automàticament els "noms" de les llistes i les subllistes alfabèticament.

Si una tasca sembla incompleta, feu-hi clic i desplaceu-vos cap a la dreta per veure-la completament.

Pas 12: completar l'addició de les tasques

Repetiu això per fer la vostra llista.

Un resum breu:

Nous cubs inserint-los a la llista més esquerra amb el nom project-ish del projecte.

Inseriu atributs nous a la tasca.

S'inclouen noves subllistes inserint tasques dins d'una llista.

Podeu veure aquesta llista en qualsevol moment i en qualsevol lloc. Està perfectament sincronitzat. Gaudeix-ne!