Como Crear un COVID-19 Dashboard con información Actualizada de Casos Diarios con Node JS 13.13 y Bootstrap 4 – Parte 3

Node JS Tutoriales |

En el capitulo anterior llamado Como Crear un COVID-19 Dashboard con información Actualizada de Casos Diarios con Node JS 13.13 y Bootstrap 4 – Parte 2 configuramos el servidor con Node JS, desplegamos la librería express y preparamos los datos que usaremos para el Dashboard, en esta Parte 3 crearemos la vista principal del Dashboard con sus elementos correspondientes.

Partes

Antes de continuar, te invito a escuchar el Podcast: “Herramientas Online Para El Trabajo En Equipo”:

Spotify:Sound Cloud:

Bien ahora continuemos con el Post: Como Crear un COVID-19 Dashboard con información Actualizada de Casos Diarios con Node JS 13.13 y Bootstrap 4 – Parte 3. 

Las vistas del Dashboard las voy a crear usando Bootstrap 4, ademas usaré la librería Chart JS para las líneas de los gráficos de casos Covid-19 y para los iconos usaré Feather icons.

En todas las vistas antes de la etiqueta de cierre </body> instancio la librería Feather icons y Chart JS.

Al Sistema le añadiré otras vistas aparte de la vista principal (Dashboard), para mantener el orden comenzaré creando la vista principal y sus respectivos elementos.

Creando la Vista Principal (Dashboard)

En la Parte 2 de este tutorial había creado un archivo llamado index.html, en donde mostraba el mensaje Hola Nube Colectiva, borro este mensaje y agrego un header o cabecera, luego al lado izquierdo de la vista principal colocare un sidebar con 3 opciones que son Dashboard, Reportes e Imprimir.

Si voy al navegador debería ver las opciones que acabo de agregar.

Debajo colocaré un listado de países que el usuario podrá seleccionar para ver los casos confirmados, muertes y personas recuperadas de ese país que selecciono, al elemento ul le añado el nombre de clase paises

En la Parte 2 de este tutorial envié los datos  en formato JSON con casos Covid-19 desde mi servidor Node JS al archivo index.html, en este conjunto de datos se encuentran todos los nombres de los países que presentan casos.

Para mantener un orden crearé dentro de la carpeta public un directorio con el nombre js y dentro de este directorio creo un archivo llamado funciones.js y en el escribiré mi código jQuery (JavaScript) con las funciones para el Dashboard .

Abro el archivo funciones.js y en el voy hacer uso de jQuery Ajax para recibir los datos y luego con el método each() de jQuery selecciono los nombres de los Países y los envío al elemento ul al cual le puse el nombre de clase paises anteriormente.

También puedes ver que a cada nombre de País le coloco al lado izquierdo un elemento radio, los usuarios podrá seleccionar el País mediante este elemento.

Con esto estoy listando los Países dinámicamente, si en el archivo de datos JSON que estoy recibiendo, se le quita o agrega un País, automáticamente la lista de Países se actualizará.

Luego al lado derecho colocaré un gráfico con una línea que mostrará como esta la curva de casos Covid-19.

En mi archivo funciones.js agrego la siguiente función JavaScript para mostrar datos temporales en el gráfico.

Más adelante colocaré en el gráfico los datos reales con casos Covid-19, entonces si abro la vista en el navegador debo de ver el gráfico.

Y por último, debajo del gráfico colocaré los últimos casos de Covid-19 acontecidos en todos los Países del mundo, uso una tabla HTML (Bootstrap 4) para mostrar los datos, a esta tabla le coloco el nombre de id casos

Abro el archivo funciones.js y envió los últimos Casos de Covid-19 a la tabla con nombre de id casos, pero antes a los días y meses de la fecha les añado cero 0, ya que algunas fechas no lo tienen y formateo la fecha para darle un mejor aspecto.

Entonce si voy al navegador y actualizo la vista, debería ver una tabla con los últimos Casos de Covid-19 debajo del gráfico.

Hasta aquí hemos terminado de crear la vista principal del Dashboard, hemos listado los Países dinámicamente y en una tabla debajo del gráfico  mostramos los últimos casos de Covid-19 acontecidos en el mundo y otros elementos más.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.  

Nota (s)

  • En la siguiente Parte mostraremos datos reales en el gráfico y trabajaremos en los datos por Países.
  • El código usado en este Tutorial puede quedar obsoleto, seguir vigente o ser modificado, esto no depende de mi, si no de los Desarrolladores que dan soporte a Node JS (Junto con sus dependencias) y Bootstrap 4 junto con sus dependencias jQuery y Popper.js
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments