Guía 09

DAWM / Proyecto02

Actividades previas

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

2. Compruebe el acceso a la colección de datos mediante el patrón de URL:

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

3. Diseñe una estrategia para el procesamiento de datos, p.e.:
   • Utilice las estructuras Map y Set para obtener valores únicos con sus valores correspondientes.

Actividades en clases

Fetch - GET

1. Identifique la sección del documento HTML donde agregará el contenido dinámicamente, p.e.:

    <div id="resultados" class="blog-section">
        <div class="container">
            ...
            <div class="row">
                <div class="p-3 p-lg-5 border bg-white">
                    <table class="table site-block-order-table mb-5">
                        <thead>
                            <th>Categoría</th>
                            <th>Conteo</th>
                        </thead>
                        <tbody id="tablebody">
   
                        <!-- Filas dinámicas -->
   						
                        </tbody>
                    </table>
                </div>
            </div>
            ...
        </div>
    </div>
   

2. Identifique el o los eventos en los que realizará la petición asíncrona de datos, p.e.:

   • Inmediatamente después de cargar el documento HTML.
   • Luego de recibir una respuesta a la petición fetch - POST

3. Utilice las instrucciones de Gemini para realizar un requerimiento asíncrono HTTP - GET, de la colección de datos en firebase, mediante fetch.

   • Aplique la estrategia para el procesamiento de datos.
   • Diseñe una plantilla para rellenar con el contenido dinámico, p.e.:

    let template = `
        <tr>
            <td>${categoria}</td>
            <td>${conteo}</td>
        </tr>
    `
   

4. (STOP 1) Compruebe el resultado en el navegador.
5. Acceda al URL de la colección de firebase para comprobar el resultado.

Documentación

• El API-fetch tiene una explicación clara de la estructura para requerimientos asíncronos cuya respuesta viene en formato JSON o XML.

Fundamental

Sincronía

For comparison here is how synchronous data fetching would work. pic.twitter.com/GTjqmpnz3K

— Yash (@yashguptaz) March 8, 2020

Asincronía

Asynchronous JavaScript Promises Visualized.

Notice how Web APIs are given the task of processing the request and the output is received back by the main thread.

This shows how single-threaded JavaScript can do async operations.

Animation made by me. pic.twitter.com/p5vprPyxzn

— Yash (@yashguptaz) March 8, 2020

Términos

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

Referencias

• Javascript Asíncrono: La guía definitiva — Lemoncode formacion. (2018). Retrieved 15 June 2022, from https://lemoncode.net/lemoncode-blog/2018/1/29/javascript-asincrono
• JavaScript Fetch API Explained By Examples. (2022). Retrieved 15 June 2022, from https://www.javascripttutorial.net/javascript-fetch-api/
• Joubran, J., & Joubran, J. (2022). How to fetch json in JavaScript Code to go. Retrieved 15 June 2022, from https://codetogo.io/how-to-fetch-json-in-javascript/
• Joubran, J., & Joubran, J. (2022). How to fetch XML in JavaScript Code to go. Retrieved 15 June 2022, from https://codetogo.io/how-to-fetch-xml-in-javascript/
• Chart.js. (n.d.). Retrieved from https://www.chartjs.org/