En el artículo, Introducción a Firebase, se proporcionó una descripción general de Firebase. ¡Se le mostró cómo configurar una cuenta de Firebase y crear un proyecto de Firebase sin costo alguno! En este artículo, se basa en lo que aprendió configurando una base de datos basada en la nube NoSQL y luego creando una página web muy simple para agregarle elementos. La base de datos simplemente almacenará juegos de palabras junto con una categoría e identificador. La Figura 1 muestra la página web que se usará para agregar los elementos.
Figura 1: Una página web que escribe en una base de datos NoSQL de Firestore.
Configuración de la base de datos de Cloud Firestore en Firebase
Para comenzar, regrese a Firebase y cree un nuevo proyecto. Puede acceder a Firebase yendo a https://console.firebase.google.com/. Esta página le dará la opción de agregar un nuevo proyecto, como se muestra en la Figura 2. Puede encontrar más información sobre cómo crear el proyecto en el artículo anterior.
Figura 2: Agregar un nuevo proyecto de Firebase.
He llamado a mi proyecto "The Pun Project". Una vez que haya creado un nuevo proyecto, accederá a Firebase Console, como se muestra en la Figura 3.
Figura 3: La consola de Firebase
En la Consola, podrá crear la base de datos que utilizará la página web. El primer paso para hacer esto es hacer clic en la opción Base de datos en el menú de navegación izquierdo. Esto abrirá una pantalla como se muestra en la Figura 4 que le permitirá crear un Cloud Firestore, que será su base de datos NoSQL.
Figura 4: La pantalla de inicio para crear un Cloud Firestore
Al hacer clic en el botón Crear base de datos, comenzará el proceso de recorrer los pasos para crear la base de datos. La primera decisión que debe tomarse, como se muestra en la Figura 5, es si la base de datos se iniciará en modo de producción o de prueba. Para mantener este artículo simple y enfocado en agregar datos, se seleccionará el modo de prueba. Cuando se crea una base de datos lista para producción, querrá agregarle más seguridad que la que se proporciona en el modo de prueba.
Figura 5: Selección del modo para su base de datos de Firestore
Con el modo seleccionado, el siguiente paso es indicar la ubicación donde desea crear la base de datos. Está creando su base de datos en la nube, por lo que puede elegir las ubicaciones en cuanto a los servidores que desea utilizar. Al hacer clic en el menú desplegable de ubicación de Cloud Firestore que se muestra en la Figura 6, podrá elegir una ubicación multirregional o regional. Le sugiero que si se encuentra en América del Norte, seleccione la ubicación nam5 (centro de EE. UU.). Si se encuentra en otro lugar, elija la región más cercana a su ubicación.
Figura 6: Selección de una región para su base de datos de Firestore
Con su región seleccionada, haga clic en el botón Listo y Firebase aprovisionará su base de datos de Cloud Firestore. Una vez que se realiza el aprovisionamiento, estará listo para ir a la página de la consola de la base de datos, como se muestra en la Figura 7, donde puede comenzar a usar su base de datos en línea.
Figura 7: La consola de base de datos en Firebase
Colecciones y Documentos en NoSQL
Si ha seguido, entonces en este punto ha creado una base de datos basada en la nube NoSQL en Cloud Firestore de Firebase. Está más allá del alcance de este artículo entrar en los detalles de NoSQL, pero proporcionaré lo más destacado de lo que necesita saber para hacer la adición de datos de muestra que se prometió en este artículo.
Una base de datos NoSQL se compone de colecciones que contienen documentos . Básicamente, un documento contiene los campos que planea almacenar. Por ejemplo, en este artículo, se está creando una colección de juegos de palabras. La colección Puns contendrá documentos. Cada documento será un juego de palabras diferente.
En Firebase, puede hacer clic en el enlace "+ Iniciar colección" que se muestra en la Figura 7 para abrir un cuadro de diálogo que le permitirá crear la colección Puns. Se le solicitará, como se muestra en la Figura 8, que agregue una ID de colección. En este caso, llamaremos a la colección "Juegos de palabras".
Figura 8: Crear una colección de Cloud Firestore
Una vez que se crea la colección, podrá crear documentos dentro de la colección como se muestra en la Figura 9. Una vez más, un documento es básicamente un registro dentro de su base de datos NoSQL. Debido a que se trata de NoSQL, no existen reglas estrictas que lo obliguen a asegurarse de que cada campo esté en cada documento (registro) o que cada documento dentro de una colección coincida. Esto te lo dejamos a ti.
Figura 9: Añadir un documento a una colección
Cada documento que cree deberá tener una ID de documento. Puede ingresar este ID o dejarlo en blanco y se generará automáticamente un ID. Para mantener las cosas más legibles en el ejemplo usando juegos de palabras, le daré al primer documento una ID de Pun0001.
Al usar la consola para agregar documentos, para cada documento, debe especificar no solo los valores de los datos, sino también el nombre de los campos y los tipos. Un menú desplegable le permite seleccionar el tipo de datos que desea agregar.
En la figura 10, se agregaron dos campos de cadena que se usarán para el ejemplo de Pun. Estas son una Categoría y el texto del juego de palabras (PunText ).
Figura 10: Configuración de un documento de juego de palabras.
Cuando se hace clic en el botón Guardar en el cuadro de diálogo que se muestra en la Figura 10, el documento (que es básicamente un registro) se creará como se muestra en la Figura 11. En este punto, se ha creado una base de datos de Cloud Firestore en la Nube y un registro ( documento) ha sido añadido! Más exactamente, se ha creado una colección llamada "Puns" que tiene un documento llamado "Pun0001" que contiene campos llamados Category y PunText.
Figura 11: ¡La base de datos de Cloud Firestore con un documento agregado!
Tenga en cuenta que en este punto, si desea agregar registros adicionales usando la consola, debe hacer clic en el enlace "+ Agregar documento" que se muestra en el medio de la Figura 11. Luego, puede agregar juegos de palabras adicionales con ID, categorías y texto de juego de palabras. Debe tener cuidado para asegurarse de que cada vez que agregue un nuevo juego de palabras use los mismos nombres de campo.
Si bien puede pensar que es tedioso tener que volver a ingresar los nombres de los campos, esto se debe a la flexibilidad de NoSQL. ¡Una forma de evitar esto es crear una aplicación web que haga esa parte del trabajo por usted!
Nota:Notará en la Figura 11 que hay un par de lugares donde puede comenzar nuevas colecciones. Está más allá del alcance de este artículo profundizar en la estructura de las colecciones y documentos NoSQL.
Creación de una aplicación web para acceder a Cloud Firestore
Con su configuración de Cloud Firestore, ahora puede agregar datos desde fuera del sitio de Firebase. Para hacer esto, primero deberá obtener información de Firebase que le permitirá asociar su aplicación web al proyecto de Firebase que ha creado.
Comience haciendo clic en el enlace Resumen del proyecto en la parte superior izquierda del menú de navegación. Esto lo llevará a una página de descripción general de su proyecto, como se muestra en la Figura 12.
Figura 12: La página de descripción general del Proyecto Firebase
En esta página, verá que hay íconos para cuatro tipos de proyectos que se pueden seleccionar. Estos son para iOS, Android, web y Unity. Haga clic en el icono para indicar que se está realizando una aplicación web. Esto mostrará el cuadro de diálogo que se muestra en la Figura 13 que le pedirá un nombre para la aplicación. El nombre que se crea se usa para coordinar la aplicación web que crea con el proyecto de Firebase y las funciones dentro del proyecto de Firebase. Para esta demostración, uso el nombre "My Punny Web App" y hago clic en el botón Registrar aplicación.
Una vez que haga clic, se le presentará una pantalla que incluye código HTML que agregará a su aplicación web. Este código HTML es lo que vincula a Firebase con su aplicación.
Figura 13: El código de Firebase para la aplicación web.
Deberá copiar este código para pegarlo en la página HTML que crearemos más adelante en los próximos pasos de este artículo. Si sale de la página que se muestra en la Figura 13, siempre puede volver al código de esta aplicación desde la consola de Firebase. Simplemente haga clic en el engranaje junto al enlace Resumen del proyecto en la esquina superior derecha y seleccione Configuración del proyecto. La página resultante incluirá información sobre su proyecto
Creación de la página web/aplicación para acceder a Firestore
Con todo configurado en el lado de Firebase, es hora de crear la página web que permitirá agregar datos. El Listado 1 contiene HTML básico para mostrar la página que se mostró en la Figura 1 anterior.
Listado 1: HTML básico para la página de Punny.
<html>
<head>
<title>Punny or Not</title>
</head>
<body>
<div class="main-form">
<h1 id="punTimes">Punny or Not!</h1>
Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br />
Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br />
Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br />
<br /><br />
<button id="saveButton" onclick="storeData()" >Submit</button>
</div>
<script src="./pun.js"></script>
</body>
</html>
El Listado 1 es HTML básico. Se están configurando tres campos para permitir que el usuario ingrese datos. Cada uno recibe una identificación que será necesaria para asociar los datos ingresados a un documento que se agregará a Firestore. también se incluye un botón con un evento para almacenar los datos. Actualmente, esa función no se ha escrito; ¡Ese es el objetivo de este artículo! También he incluido un enlace a un archivo JavaScript externo llamado pun.js. Inicialmente, ese archivo está vacío, ¡pero eso se cambiará en breve!
Es dentro del Listado 1 donde querrá pegar el código que se copió anteriormente de Firebase. El código que se muestra en la Figura 13 debe pegarse cerca del final de la etiqueta del cuerpo, en este caso justo antes de la inclusión del script puns.js. Pegué el código de mi aplicación de juegos de palabras en el Listado 2.
Listado 2: La página html con el código de Firestore agregado.
<html>
<head>
<title>Punny or Not</title>
</head>
<body>
<div class="main-form">
<h1 id="punTimes">Punny or Not!</h1>
Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br />
Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br />
Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br />
<br /><br />
<button id="saveButton" onclick="storeData()" >Submit</button>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyAJUQUXm_oYXAo2M1yukGT8lnTKeuMd53o",
authDomain: "the-pun-project.firebaseapp.com",
databaseURL: "https://the-pun-project.firebaseio.com",
projectId: "the-pun-project",
storageBucket: "the-pun-project.appspot.com",
messagingSenderId: "354041199852",
appId: "1:354041199852:web:4f9a613485174688f0f9c9",
measurementId: "G-4672MVCRK2"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="./pun.js"></script>
</body>
</html>
Con la adición de la secuencia de comandos a su HTML, ha conectado su aplicación para acceder a Firebase. Sin embargo, debe agregar una línea más de código. Si bien el código generado proporcionará las conexiones a Firebase, debe agregar un enlace adicional para obtener el código que accederá a la base de datos de Cloud Firestore dentro de Firebase. Querrá agregar la siguiente línea de fuente de secuencia de comandos a las listas:
Esto se puede agregar justo después de la llamada a:
El siguiente paso es agregar la lógica que asociará los campos ingresados por el usuario con los campos que se agregarán a la base de datos de Firestore. Esto se hará en el archivo puns.js para mantener limpio el código.
El proceso consiste en crear primero una variable de base de datos que se vinculará a la base de datos de Firebase Cloud Firestore. Luego, será necesario crear variables que se puedan completar con los valores que el usuario ingresó en nuestra página. Esto se hará con llamadas estándar a document.getElementById(). Finalmente, la variable que aparece en la página web debe agregarse a la base de datos de Cloud Firestore como campos dentro de un documento dentro de la colección Puns. El Listado 3 muestra el JavaScript que puede lograr todo esto.
Listado 3: El archivo JavaScript pun.js
var db = firebase.firestore();
function storeData() {
var inputPun = document.getElementById("PunID").value;
var inputCategory = document.getElementById("Category").value;
var inputText = document.getElementById("PunText").value;
db.collection("Puns").doc(inputPun).set({
Category: inputCategory,
PunText: inputText
})
.then(function() {
console.log("Doc successful");
})
.catch(function(error) {
console.error("Error writing doc", error);
});
}
Tenga en cuenta que en el Listado 3, la base de datos se creó con la variable llamada db. Luego, esta variable se usa para crear el nuevo documento (registro) especificando el nombre de la colección que se denominó Puns en el proceso que se muestra en la Figura 8. A esto le sigue el nombre del documento, que en este caso es nuestro ID de puns recopilado de el usuario y poner en la variable, inputPun. Dentro del documento, se agregan dos campos, lo que se hace dentro del conjunto. Para agregar los campos, se lista el nombre del campo, luego dos puntos y finalmente el valor de la cadena que se agregará. En este caso, inputCategory se agrega al campo Categoría y inputText se agrega al campo PunText.
La lista también incluye algunas pruebas y lógica de error para registrar un mensaje en la consola. Si abre la consola de desarrollador de su navegador, verá el mensaje "Documento exitoso" cuando se agregue un documento a su Cloud Firestore, como se muestra en la Figura 14.
Figura 14: Un documento agregado con éxito.
Se puede confirmar que el documento se agregó volviendo al proyecto en la consola de Firebase y observando la base de datos (haciendo clic en Base de datos en el menú de navegación de la izquierda). La Figura 15 muestra que la adición del nuevo juego de palabras fue exitosa.
Figura 15: La colección Puns con el nuevo documento pun002
Envolviéndolo
En este artículo se cubrió mucho sobre cómo agregar documentos a una base de datos NoSQL de Firebase Cloud Firestore. Aprendió a hacer esto desde la consola y desde una aplicación web simple. Esto es solo un comienzo para mostrar lo fácil que puede ser agregar. Habiendo dicho eso, agregar solo un paso en un sistema CRUD. ¡Aún hay más por aprender! Ah, y si te gustan los juegos de palabras, echa un vistazo a mi libro, Punny or Not Book of Puns, ¡disponible en Amazon!
###
