DEV Community

loading...
Cover image for Firebase CRUD con JS y HTML: Form y Create

Firebase CRUD con JS y HTML: Form y Create

javicerodriguez profile image Javier Rodriguez Updated on ・7 min read

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
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.
Repository
🟨 Una vez creado, vamos a Code, seleccionamos la pestaña HTTPS y copiamos el enlace del repositorio.
Code
🟨 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)
PowerShell

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>
Enter fullscreen mode Exit fullscreen mode

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);
});
Enter fullscreen mode Exit fullscreen mode

Luego, incluimos este script en nuestro index.html

<!-- index.html -->
    <script src="./getDataForm.js"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

Test Form

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Form

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.
Firebase Home
🟨 Creamos un nuevo proyecto desde Agregar proyecto
Consola
🟨 Nos pedirá ingresar un nombre, yo lo llamaré todo-crud-javo (offtopic: miren el detalle de la derecha, sobresale el brazo)
Nombre de DB
🟨 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.
DB creada
🟨 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.
Firestore
🟨 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.
Reglas
🟨 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
Config
🟨 Vamos a la sección de Tus Apps y seleccionamos la opción de Web App (3er ícono).
Web App
🟨 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).
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>
Enter fullscreen mode Exit fullscreen mode

🟨 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>
Enter fullscreen mode Exit fullscreen mode

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
});
Enter fullscreen mode Exit fullscreen mode

Y esto lo podemos ver en Firestore:
Coleccion creada


Perfecto! Ya tenemos un formulario que envía estos datos a Firebase. En el próximo artículo veremos como leerlos y mostrarlos. Saludos!

Discussion (2)

pic
Editor guide
Collapse
roro2107 profile image
roro2107

Hola
lo he seguido a pie de la letra y me sale:
podrían ayudarme?

Collapse
javicerodriguez profile image
Javier Rodriguez Author

Actualizo artículo: Había puesto que usaríamos Vercel pero vamos a usar Firebase Hosting :D