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"
  } }
}