Guía 08

Guía 08

DAWM / Proyecto02

Objetivo general

Proponer código de scripting para el envío de datos a una base de datos alojada en la nube mediante el desarrollo de una landing page funcional y atractiva utilizando una plantilla de Bootstrap para la adecuación a los requerimientos específicos.

Actividades en clases

Firebase - Realtime Database

  1. Acceda a la consola de Firebase, inicie sesión y cree un proyecto, p.e.: landing.
  2. Dentro del proyecto, en el menú de navegación:
    • Seleccione la categoría Build,
    • Escoja la opción Realtime Database,
    • Haga clic en Create Database.
  3. Selecciona la ubicación y selecciona el Modo de prueba para permitir lecturas/escrituras sin restricciones por autenticación (para uso en desarrollo).

  4. Copie la URL para acceder al API REST de Firebase. La URL tiene el siguiente patrón:

     https://<nombre-del-proyecto>.firebaseio.com/<nombre-de-la-coleccion>.json

    Aquí, <nombre-de-la-coleccion> es el nombre de la colección con la que se interactuará.

Preparación de formulario y validación de campos

  1. Modifique su formulario, y los elementos del formulario, con identificadores únicos, p.e.:

     <form id="form" ... >
     ...
     <input id="form_name" type="text" ... >
     ...
     <select id="form_products"> ... </select>
     ...
     <input id="form_option1" type="radio">
 </form>

  2. En el archivo de código externo js/main.js, agregue return; para terminar con la ejecución del código en caso de una validación fallida, p.e.:

     let loaded = ( eventLoaded ) => {

       let myform = document.getElementById('form');
          
       myform.addEventListener('submit', (eventSubmit) => {
           eventSubmit.preventDefault(); 
              
           ...

           if (emailText.length === 0) {
             emailElement.animate( ... )
             emailElement.focus()

             return;

           }
       })

     }

Envío de datos - Fetch POST

  1. Edite el archivo de código externo js/main.js.

    • Agregue la constante databaseURL y la función flecha sendData:
     // Reemplaza con tu URL
 const databaseURL = 'https://<nombre-del-proyecto>.firebaseio.com/<nombre-de-la-coleccion>.json'; 

 let sendData = () => {  }

 let ready = () => { ... }
 let loaded = () => { ... }

 ...
    • Dentro de sendData, obtenga la referencia al formulario mediante el objeto creado a partir del id, p.e.: form.
     const databaseURL = ...; 

 let sendData = ( ) => {  

     // Obtén los datos del formulario
     const formData = new FormData(form);
     const data = Object.fromEntries(formData.entries()); // Convierte FormData a objeto

 }

 let ready = () => { ... }
 let loaded = () => { ... }

 ...
    • Dentro de sendData, agregue la fecha actual al objeto data mediante el Date API de Javascript.
     const databaseURL = ...; 

 let sendData = ( ) => {  

     ...
     const data = ...

     // new Date().toLocaleString( locales, options )
     data['saved'] = new Date().toLocaleString('es-CO', { timeZone: 'America/Guayaquil' })

 }

 let ready = () => { ... }
 let loaded = () => { ... }

 ...
    • Dentro de sendData, agregue una petición asíncrona utilizando fetch para enviar datos de un formulario a la URL databaseURL.
     const databaseURL = ...; 

 let sendData = ( ) => {  

     ...
     data['saved'] = ...

     // Realiza la petición POST con fetch
     fetch(databaseURL, {
         method: 'POST', // Método de la solicitud
         headers: {
             'Content-Type': 'application/json' // Especifica que los datos están en formato JSON
         },
         body: JSON.stringify(data) // Convierte los datos a JSON
     })
     .then(response => {
         if (!response.ok) {
             throw new Error(`Error en la solicitud: ${response.statusText}`);
         }
         return response.json(); // Procesa la respuesta como JSON
     })
     .then(result => {
         alert('Agradeciendo tu preferencia, nos mantenemos actualizados y enfocados en atenderte como mereces'); // Maneja la respuesta con un mensaje
         form.reset()
     })
     .catch(error => {
         alert('Hemos experimentado un error. ¡Vuelve pronto!'); // Maneja el error con un mensaje
     });

 }

 let ready = () => { ... }
 let loaded = () => { ... }

 ...
    • Llame a la función sendData después de la validación de campos del formulario.
    
 const databaseURL = ...; 

 let sendData = ( ) => {  ... }

 let ready = () => { ... }
 let loaded = () => {
    	

 	myform.addEventListener('submit', function (eventSubmit) {
 		...
     	if (emailText.length === 0) {
     		...
     		return;
     	}

     	//Llamada a la función sendData()
     	sendData();

 	});
 }

 ...
  2. Compruebe el envío de datos desde el formulario.
  3. (STOP 1) Acceda a Firebase - Realtime Database para comprobar el resultado.

Documentación

Fundamental

Sincronía

Asincronía

Términos

fetch, sincronía, asíncrona, firebase, json, xml, HTTP - GET

Referencias