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

8 minuto(s)

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 (Bootstrap 4 me pide que instancie jQuery y Popper JS), además 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, asimismo instancio Bootstrap 4 junto con jQuery y Popper JS que son librerías necesarias para que Bootstrap 4 trabaje sin problemas.


Para que las librerías que he llamado funcionen sin problema debo de llamar o instanciar a sus respectivos directorios que se encuentras en el directorio node_modules, para esto abrimos el archivo app.js que se encuentra en el directorio principal del proyecto.


Dentro del archivo app.js llamo o instancio los directorios de Bootstrap 4 y las otras librerías.


Entonces ahora mi archivo app.js debería de verse de la siguiente manera con todo el código creado hasta este punto.


Bueno, 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 index.js y en el escribiré mi código jQuery (JavaScript) con las funciones para la página principal del Dashboard .


Abro el archivo index.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 index.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 index.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í mi archivo llamado index.js se debe de ver de la siguiente manera.


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.