Firebase CRUD con JS y HTML: Form y Create

#javascript #html #firebase #spanish

Hola! Luego de estar un tiempo ausente, vuelvo con una nueva serie de artículos para el siguiente proyecto: Una página ToDo List en HTML y JS, utilizando Firebase.
Para esto, vamos a estar realizando las funciones básicas para realizar las consultas a la base de datos. La palabra que resume esta oración es CRUD (Create, Read, Update, Delete).
Vamos a usar Bootstrap para adornar un poco y que nos vaya quedando más prolijo todo. Empecemos!

0. ¿Qué vamos a usar?

En resumen, esto: Git, GitHub, VS Code, HTML, JavaScript, Firebase (Firestore y Hosting) y Bootstrap. Este proyecto se puede realizar de cualquier otra forma, el objetivo va a ser el mismo.

1. Creación de repositorio

Hay varias formas de iniciar un proyecto, en mi caso voy a empezar creando el repositorio y luego clonarlo en mi PC.

🟨 Vamos a GitHub y le damos clic en New

🟨 Tipeamos un nombre en Repository name, si quieren pueden agregar una Description y seleccionar si queremos agregar un README, un .gitignore y/o una licencia, esto podemos hacerlo después. Para el ejemplo, le voy a poner "ToDo Javo". Le damos clic en Create repository.

🟨 Una vez creado, vamos a Code, seleccionamos la pestaña HTTPS y copiamos el enlace del repositorio.

🟨 Vamos a algún directorio específico que deseemos para clonar nuestro repositorio y tenerlo de manera local. Esto debemos hacerlo desde la consola (también está la opción de hacerlo desde GitHub Desktop, pero eso lo dejo para otro artículo 😉).
Una vez dentro de la carpeta desde la consola, tipeamos git clone enlace_que_copiamos_antes.
Una vez hecho esto, entramos a la carpeta creada y tipeamos code . si ya tienen VS Code instalado (si no, instalen ahora y luego entran desde VS Code)

2. Creación de formulario

🟨 Una vez clonado el repositorio, hacemos un formulario básico sin estilos. Este va a guardar en Firebase: Nombre de tarea (todo_name), Descripción (todo_description) y URL (todo_url)(opcional). Agregamos algunos id en el form y en el button. Guardamos los cambios y podemos ver esto con la extensión llamada Live Server.

<!-- index.html -->
<form id="todo_form">
    <div>
        <input type="text" id="todo_name" placeholder="Nombre de tarea">
    </div>
    <div>
        <input type="url" id="todo_url" placeholder="URL (opcional)">
    </div>
    <div>
        <textarea rows="4" id="todo_description" placeholder="Descripción"></textarea>
    </div>
    <button id='btn_todo_form'>Guardar</button>
</form>

🟨 Ahora, queremos obtener la información del formulario a modo de testear que todo ande bien antes de pasar a Firebase. Para esto, necesitamos crear un script (lo llamaré getDataForm.js):

// getDataForm.js
const todoForm = document.getElementById('todo_form');

todoForm.addEventListener('submit', e => {
    e.preventDefault();
    const name = todoForm['todo_name'].value;
    const url = todoForm['todo_url'].value;
    const description = todoForm['todo_description'].value;
    console.log(name, url, description);
});

Luego, incluimos este script en nuestro index.html

<!-- index.html -->
    <script src="./getDataForm.js"></script>
</body>

3. Incluimos primeros estilos con Bootstrap

Si seguimos sin estilos, nos vamos a aburrir. Vamos a la página de introducción a Bootstrap y nos copiamos el CDN para obtener la librería en nuestro HTML (dentro del head va):

<!-- index.html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

Aplicamos los cambios y ya deberíamos ver unos cambios en el formato del formulario debido al CDN. Eso es buena señal que nos indica que hicimos todo bien.

Ahora viene la parte divertida (o por lo menos para mí): dar estilos!. Esto lo dejo a criterio de ustedes como lo van a hacer, en mi caso, lo dejo así:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <title>ToDo de Javo</title>
</head>
<body class="container">
    <main class="row justify-content-start">
        <div class="container m-1 col-4 p-4 border border-danger rounded">
            <form id="todo_form">
                <label for="todo_name" class="form-label">Nombre de tarea</label>
                <div class="input-group mb-3">
                    <span class="input-group-text">🏷</span>
                    <input type="text" id="todo_name" placeholder="Nombre de tarea" class="form-control" required>
                </div>

                <label for="todo_url" class="form-label">URL (opcional)</label>
                <div class="input-group mb-3">
                    <span class="input-group-text">🔗</span>
                    <input type="url" id="todo_url" placeholder="URL (opcional)" class="form-control">
                </div>

                <label for="todo_description" class="form-label">Descripción de tarea</label>
                <div class="input-group mb-3">
                    <span class="input-group-text">📝</span>
                    <textarea rows="1" id="todo_description" placeholder="Descripción" class="form-control" required></textarea>
                </div>
                <div class="">
                    <button type="submit" id='btn_todo_form' class="btn btn-danger col-12">Guardar</button>
                </div>
            </form>
        </div>
    </main>

    <script src="./getDataForm.js"></script>
</body>
</html>

4. Configuración de Firebase.

Llegó el momento de la estrella: Firebase. Vamos a configurar primero la base de datos y luego modificaremos el script para que se adquiera la info y la guarde.

🟨 Vamos a Firebase (si es la primera vez que entran, deben usar una cuenta de Gmail). Ingresamos a Ir a la consola para empezar a crear una DB en línea.

🟨 Creamos un nuevo proyecto desde Agregar proyecto

🟨 Nos pedirá ingresar un nombre, yo lo llamaré todo-crud-javo (offtopic: miren el detalle de la derecha, sobresale el brazo)

🟨 Luego nos mostrarán las opciones de agregar analíticas, deseleccionamos eso (no nos interesa ahora implementarlas) y luego le damos a Crear proyecto. Esperamos un momento a que termine de crearse y apretamos en Continuar.

🟨 Esto nos redirecciona a la página de inicio de nuestro proyecto creado. Vamos al menú de la izquierda, seleccionamos Firestore Database y luego apretamos en Crear base de datos.

🟨 En el modal que aparece, nos pide configurar las reglas de la DB. En resumen, con esto indicamos de que manera uno puede realizar las consultas a la DB de Firebase, con que permisos y etc. Por ahora, seleccionamos en Comenzar en modo de prueba para tener más libertad en las consultas y luego apretamos en Siguiente.

🟨 Luego nos pide elegir la ubicación de Firestore. Puede ser cualquiera en nuestro caso. Elegimos y luego apretamos en Habilitar. Listo! Tenemos creado Firestore.
🟨 Para obtener las credenciales, hacemos clic en un el engranaje y seleccionamos Configuración del proyecto

🟨 Vamos a la sección de Tus Apps y seleccionamos la opción de Web App (3er ícono).

🟨 Nos pedirán registrar al app: ingresamos un nombre que puede ser la misma que usamos antes para el proyecto. Luego hacemos clic en Registrar App.
🟨 Vamos a obtener un script con las credenciales. Por ahora lo copiamos y lo pegamos en nuestro HTML (antes del script que colocamos para le Form). Queremos asegurarnos de que funcione la comunicación (no compartas estas credenciales).

🟨 Si miramos con atención, en los comentarios nos da una url con las librerías disponibles para Firebase. Nosotros queremos usar uno de los servicios que creamos anteriormente (Firestore). Por lo tanto, vamos a tener que importar la librería correspondiente.
Entramos al enlace que nos dan y veremos varias listas desplegables, abrimos la que dice SDK de Firebase JS disponibles (de las URL de Hosting reservadas) y vemos el script para completar:

<script src="/__/firebase/8.2.10/firebase-firestore.js"></script>

🟨 Vamos a nuestro HTML, copiamos el script que importa la librería firebase-app.js y simplemente le cambiamos por la librería que vamos a importar. Nos quedaría así:

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.3.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/8.3.1/firebase-firestore.js"></script>

<script>
// Your web app's Firebase configuration
    var firebaseConfig = {
        apiKey: "sarasa",
        authDomain: "sarasa",
        projectId: "sarasa",
        storageBucket: "sarasa",
        messagingSenderId: "sarasa",
        appId: "sarasa"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
</script>

5. Crear datos

🟨 Modifiquemos un "poco" nuestro script getDataForm.js para poder enviar los datos capturados del Form a Firestore. Antes explico un poco lo que haremos: la idea del ToDo es guardar tareas por hacer en Firestore de alguna forma. Si desearamos ingresar otro tipo de información en la misma DB, debemos usar colecciones (o collections). Las colecciones las podemos pensar como si fuesen carpetas que van a contener documentos con un Id que identificará la información almacenada.
Para nuestro caso, vamos a crear una colección llamada tasks.

// getDataForm.js
const db = firebase.firestore();

const todoForm = document.getElementById('todo_form');

const create = (name, url, description) => {
    db.collection('tasks').doc().set({
        name,
        url,
        description
    })
}

todoForm.addEventListener('submit', async e => {
    e.preventDefault();
    const name = todoForm['todo_name'].value;
    const url = todoForm['todo_url'].value;
    const description = todoForm['todo_description'].value;

    await create(name, url, description); // Llamo a mi función create

    todoForm.reset(); // Reseteamos los campos
});