CRUD en Javascript i Firebase
Aquest article és un tutorial i no pretén aprofundir en la teoria de Javascript o de Firebase. Sols explicarem les coses que necessitem per a l'objectiu.
Les possibilitats quan ens plantegem cóm fer una web amb frontend fet en Javascript i un backend. En aquest article sols anem a tractar una: Frontend fet en Javascript pur a partir de ES6 front a un API REST generat per una base de dades Realtime del servici Firebase. Els avantatges de fer-ho així són:
- Quasi total compatibilitat en qualsevol navegador amb un cost de computació mínim, ja que no necessitem llibreries externes ni frameworks.
- Simplicitat si el projecte és menut.
- Velocitat i alta disponibilitat de les dades gràcies a un servici extern molt fiable.
- Simplicitat al tractar amb una base de dades en JSON.
- Avantatges dels protocols REST.
- No tindre que programar un backend tradicional (PHP o JAVA, MySQL...)
Els desavantatges són:
- No comptar amb els beneficis d'un framework com Angular, Vue o React que simplifiquen la programació de grans projectes.
- Possibilitat de fer-ho mal o insegur al no utilitzar llibreries per comunicar amb el servidor.
- Dependència d'un servici extern.
- No poder programar el backend i comptar sols amb una simple base de dades que s'ha de gestionar en el frontend.
Configuració de Firebase
La documentació de Firebase és molt completa i de gran qualitat, per tant no cal entrar en detalls. Sols cal crear una base de dades Realtime a la que, de moment, li ficarem com a regles de control d'accés que tots puguen llegir i escriure sense autenticar:
{
"rules": {
".read": "now < 1621116000000", // 2021-5-16
".write": "now < 1621116000000", // 2021-5-16
}
}
En l'exemple anterior tenen un límit de data que es pot ampliar si volem.
En quant a les dades de la base de dades, anem a començar en un JSON molt simple de productes i llistes de productes:
{
"listas" : { "Lista1": {
"nombre" : "lista1",
"productos" : [ 1, 2, 3, 4 ]
}, "Lista2": {
"nombre" : "lista2",
"productos" : [ 1, 2, 3, 5 ]
} },
"productos" : { "1" : {
"id" : 1,
"marca" : "Nikon",
"precio" : 649.95,
"referencia" : "D3400"
}, "2": {
"id" : 2,
"marca" : "Nikon",
"precio" : 6499.95,
"referencia" : "D5"
}, "3": {
"id" : 3,
"marca" : "Nikon",
"precio" : 1999.95,
"referencia" : "D500"
}, "4": {
"id" : 4,
"marca" : "Nikon",
"precio" : 1049.95,
"referencia" : "D7200"
}, "5": {
"id" : 5,
"marca" : "Nikon",
"precio" : 1999.95,
"referencia" : "D500"
}, "6": {
"id" : 6,
"marca" : "Canon",
"precio" : 3999.95,
"referencia" : "EOS 5D"
}, "7": {
"id" : 7,
"marca" : "Canon",
"precio" : 1800.95,
"referencia" : "EOS 7D"
}, "8": {
"id" : 8,
"marca" : "Canon",
"precio" : 2645.95,
"referencia" : "EOS 80D"
}, "9": {
"id" : 9,
"marca" : "Canon",
"precio" : 989.95,
"referencia" : "EOS Rebel T6"
}, "10": {
"id" : 10,
"marca" : "Canon",
"precio" : 753.95,
"referencia" : "EOS-1D"
}, "11": {
"id" : 11,
"marca" : "Canon",
"precio" : 457.95,
"referencia" : "EOS 1D X"
} }
}