Vamos a utlizar una API para obtener datos sobre la situación del Covid19 en el mundo. Vamos a usar uno de los endpoint que nos ofrecen en esta Web
Un objetivo añadido es usar un componente para crear tablas de Bootstrap para poder volcar los datos en una tabla, sin tener que nosotros codificar casi nada.
El verdadero reto de esta práctica es entender la documentación de una herramienta que puede hacernos ahorrar mucho trabajo si aprendemos a utilizarla.
- Explora los diferentes endpoints que nos ofrecen en esta Web. Busca aquel que nos permite recuperar información sobre la pandemia para un conjunto de países. Úsala en el mismo navegador para asegurarte que sabes como invocarla.
Pista
Este endpoing parece adecuado. Los paises sobre los que quieres obtener los datos se añaden al final de la URL, separados por comas (https://corona.lmao.ninja/docs/#/COVID-19%3A%20Worldometers/get_v3_covid_19_countries)- Crea la cabecera adecuada para la tabla. Concretamente queremos mapear: - Nombre país - Población - Casos activos por millón de habitantes - Últimza actualización de los datos
Pista
Crea un **thead** con la información necesaria para cada una de las columnas: (https://www.w3schools.com/tags/tag_thead.asp)- Establece el atributo adecuado en el tag table para que la biblioteca haga una llamada al endpoint y recupere información para un conjunto de paises. Por ejemplo, para los mismos que se muestran en la demo (Span, Italy, etc.)
Pista
Fíjate en el atributo **data-url** y en los atributos **data-field**: (https://examples.bootstrap-table.com/#welcomes/from-url.html#view-source)- Haz posible que, al hacer clic en la columna de "casos activos por millón de habitantes"; esta pueda ser ordenada creciente o decrecientemente. Tan solo tienes que añadir un atributo en el tag adecuado.
Pista
Mira como usar el atributo **data-sortable**: (https://examples.bootstrap-table.com/index.html#column-options/sortable.html)- En la parte superior derecha de la Demo, aparece un botón gris que permite exportar todos los datos a diferentes formatos. La mayoría de componentes que podemos encontrar por Internet, como esta tabla de Bootstrap, permite expandir sus funcionalidades mediante la inclusión de plugins. Busca uno de ellos que te permita hacer esto. Pre-pista: busca "export" en la documentación de Bootstrap table.
Pista
Mira como usar este plugin: https://examples.bootstrap-table.com/index.html#issues/188.html#view-source- Seguramente la fecha de actualización de tu table aparece en formato timestamp. Podrías recorrer todas las celdas y cambiar el formato usando JavaScript. PERO para este proyecto, te animo a usar las herramientas que Boostrap Table ofrece. Busca como "maquetar" los datos que recuperas de la llamada AJAX para la columna de fecha de actualización.
Pista
El atributo data-formatter: https://examples.bootstrap-table.com/#column-options/formatter.html- Queremos llamar la atención del usuario de manera que, si los casos activos por millón de habitantes superan los 10000; muestra la celda de color amarillo. Puedes utilizar un atributo de Bootstrap Table para cambiar el estilo de la celda en función del valor de la misma.
Pista
Usa cellStyle: https://examples.bootstrap-table.com/index.html?bootstrap5#column-options/cell-style.html- Finalmente, permite que el usuario pueda añadir nuevos paises a la búsqueda mediante, por ejemplo, un cuadro de texto. Fíjate como funciona en la demo.