Guía 09

Guía 09

DAWM / Proyecto02

Objetivo general

Proponer código de scripting para la recuperación de datos de 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 previas

Firebase - Realtime Database

  1. Complete la funcionalidad el envío de datos mediante fetch - HTTP POST.

  2. Verifique el acceso a la colección de datos y compruebe que contenga datos:

     https://<nombre-del-proyecto>.firebaseio.com/<nombre-de-la-coleccion>.json
  3. Identifique una estrategia para el procesamiento de datos utilizando alguna de las estructuras Map y Set de Javascript.

Actividades en clases

Tabla de datos

  1. Agregue al archivo index.html la jerarquía de etiquetas <!-- Suscribers - START --> y <!-- Suscribers - END -->. Tome como referencia el <!-- DIV contenedor del formulario -->

     <section class="newsletter bg-light" style="background: url(images/pattern-bg.png) no-repeat;">
     <div class="container">
         <div class="row justify-content-center">
	        	
         	<!-- DIV contenedor del formulario -->
         	<div class="col-md-8 py-5 my-5">
         		<div class="subscribe-header text-center pb-3">...</div>
         		<form id="form" class="d-flex flex-wrap gap-2">...</form>
         	</div>

                 <!-- Suscribers - START -->
                 <div class="col-md-4 py-5 my-5">
                   <h4 class="element-title text-capitalize my-3">Subscribers per Day</h4>
                   <table class="table table-hover table-light table-borderless">
                     <thead>
                       <tr>
                         <th scope="col">#</th>
                         <th scope="col">Day</th>
                         <th scope="col">Subscribers</th>
                       </tr>
                     </thead>
                     <tbody id="subscribers">
			            
                     </tbody>
                   </table>
                 </div>
                 <!-- Suscribers - END -->

         </div>
     </div>
 </section>

Recuperación de datos - Fetch GET

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

    • Agregue la función flecha getData asíncrona:
     const databaseURL = ... 

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

 let getData = async () => { }

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

 ...
    • Dentro de getData, agregue una petición asíncrona utilizando fetch para recibir los datos de la URL databaseURL.
     const databaseURL = ...; 

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

 let getData = async () => {  

     try {

         // Realiza la petición fetch a la URL de la base de datos
         const response = await fetch(databaseURL, {
         	method: 'GET'
         });

         // Verifica si la respuesta es exitosa
         if (!response.ok) {
           alert('Hemos experimentado un error. ¡Vuelve pronto!'); // Maneja el error con un mensaje
         }

         // Convierte la respuesta en formato JSON
         const data = await response.json();

         if(data != null) {

         	// Cuente el número de suscriptores registrados por fecha a partir del objeto data

         	// END

             // Genere y agregue filas de una tabla HTML para mostrar fechas y cantidades de suscriptores almacenadas 

             // END

         }

       } catch (error) {
         // Muestra cualquier error que ocurra durante la petición
         alert('Hemos experimentado un error. ¡Vuelve pronto!'); // Maneja el error con un mensaje
       }

 }

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

 ...
    • Dentro de getData, itere sobre el objeto data y utilice el mapa countSuscribers para procesar los datos por fecha.
     if(data != null) {

         // Cuente el número de suscriptores registrados por fecha a partir del objeto data

         // END		
 }
    Haga click aquí para ver la solución
     
    
     let countSuscribers = new Map()

     if (Object.keys(data).length > 0) {
         for (let key in data) {

             let { email, saved } = data[key]
                
             let date = saved.split(",")[0]
                
             let count = countSuscribers.get(date) || 0;
             countSuscribers.set(date, count + 1)
         }
     }
    • Dentro de getData, itere sobre el mapa countSuscribers, renderice la plantilla rowTemplate y agregue al cuerpo de la tabla de datoscon el id subscribers.

    Plantilla rowTemplate

     let rowTemplate = `
 <tr>
     <th>${index}</th>
     <td>${date}</td>
     <td>${count}</td>
 </tr>`

     if(data != null) {

     // Cuente el número de suscriptores registrados por fecha a partir del objeto data
     ...
     // END
	   
     // Genere y agregue filas de una tabla HTML para mostrar fechas y cantidades de suscriptores almacenadas

     // END

 }
    Haga click aquí para ver la solución
     
    
     if (countSuscribers.size > 0) {

         subscribers.innerHTML = ''

         let index = 1;
         for (let [date, count] of countSuscribers) {
             let rowTemplate = `
                 <tr>
                     <th>${index}</th>
                     <td>${date}</td>
                     <td>${count}</td>
                 </tr>`
             subscribers.innerHTML += rowTemplate
             index++;
         }
     }
    • Llame a la función getData después de reiniciar el formulario y cuando el DOM esté listo.
    Haga click aquí para ver la solución
     
    
     let sendData = ( ) => { 
	
         fetch( ... )
         .then(response => { ... })
         .then(result => {
             alert('Agradeciendo tu preferencia, nos mantenemos actualizados y enfocados en atenderte como mereces'); // Maneja la respuesta con un mensaje
             form.reset()

             // Recuperación de datos
             getData()
         })
         .catch(error => { ... });

     }
    Haga click aquí para ver la solución
     
    
     let ready = () => { 
	
         console.log('DOM está listo')

         // Recuperación de datos
         getData();
     }

  2. (STOP 1) Compruebe la petición de datos en el navegador.

Documentación

Fundamental

Sincronía

Asincronía

Términos

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

Referencias