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

Node JS Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

En la parte anterior llamada Como Crear un COVID-19 Dashboard con información Actualizada de Casos Diarios con Node JS 13.13 y Bootstrap 4 – Parte 1 creamos un nuevo proyecto con Node JS y desplegamos Bootstrap 4 con sus respectivas dependencias, en esta Parte 2 continuaremos con la creación del Dashboard, vamos con ello.

Partes

Antes de continuar, te invito a leer los siguientes artículos para que estés familiarizado con este tutorial:

Asimismo te invito a escuchar el Podcast: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos):

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 2.

Haremos un par de tareas, primero vamos a configurar el servidor en Node JS y después prepararé los datos de casos Covid-19 que usaré para mi Dashboard.

Configurando el servidor en Node JS

En el directorio principal de mi proyecto, abro mi consola de comandos (Yo uso GitBash, tu puedes usar la que desees), voy a usar el paquete express, entonces ejecuto el siguiente comando para instalarlo:

Siempre es bueno verificar si se instalo un paquete, esto lo puedo ver en el archivo package.json que se encuentra en el directorio principal de mi proyecto.

Para hacer solicitudes HTTP de manera sencilla, voy a instalar el paquete request.

Bien ahora voy a crear mi servidor, en el directorio principal de mi proyecto, creo un archivo llamado app.js

Abro el archivo app.js e instancio en primer lugar express, el paquete que acabo de instalar y lo coloco en una variable llamada app, paso seguido le paso la variable app y configuro el puerto 3000 para mi servidor.

Si ejecuto el comando anterior solo me arrojará un mensaje en la consola, pero como necesito mostrar un Dashboard, pues debo usar una página HTML que use elementos de Bootstrap 4, para mantener un orden creo un directorio llamado public y dentro de el creo un archivo llamado index.html

Abro el archivo index.html y agrego el texto Hola Nube Colectiva, solo para probar si esta bien configurado mi servidor Node JS.

En mi archivo app.js cargo el archivo index.html que he creado en la carpeta public

Y para probar si mi servidor esta funcionando, inicio el servidor de Node JS

Si me dirijo a http://localhost:3000/ en el navegador me aparece el texto Hola Nube Colectiva:

Con esto verifico que mi servidor de Node JS está operativo. Más adelante crearé en el archivo index.html el Dashboard utilizando Bootstrap 4.

Preparando los Datos con Casos de Covid-19

Ya que necesito mostrar datos actualizados con casos diarios de Covid-19 usaré los datos del Center for Systems Science and Engineering (CSSE) de la Universidad Johns Hopkins (USA), estos datos han sido convertidos a formato JSON en el siguiente repositorio GitHub y podemos acceder directamente al archivo JSON en este enlace.

Bueno voy a preparar y dejar listo los datos, en mi archivo app.js llamo a la url con los datos actualizados de casos de Covid-19, luego habilito CORS, paso seguido obtengo un objeto JSON con los datos actualizados y por último envió los datos mediante la creación de una ruta llamada /datos

Mi archivo app.js ahora se debe de ver de la siguiente manera:

Ahora voy a verificar si estoy recibiendo datos, para esto voy a mi archivo index.html y como instale jQuery para poder usar Bootstrap 4, puedo hacer uso de jQuery Ajax para llamar y recibir los datos que envió desde mi servidor Node JS a la vista HTML (index.html)

Puedes ver en el código que estoy usando console.log(json); para verificar en el navegador si es que estoy recibiendo datos, entonces voy a localhost:3000 y actualizo la página, entonces en la consola del navegador puedo ver los arrays de datos que utilizaré para mi Dashboard.

Genial, entonces con esto verifico que ya estoy pasando datos desde mi servidor Node JS a mi vista HTML, estos datos los colocaré en mi Dashboard.

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 crearemos la vista del Dashboard con Bootstrap 4 en donde mostraremos los datos de casos de Covid-19.
  • 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
4 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
Omar
Omar
2 meses atrás

Hola equipo de Nube Colectiva!   Estoy siguiendo este tutorial y si abro la consola de Firefox en el archivo Index no aparece la información que traigo desde la URL /datos además muestra un mensaje en rojo: ReferenceError: $ is not defined y si doy clic despliega esto <anonymous> http://localhost:3003/:15   La línea 15 del Index corresponde a $.ajax({   Desde un principio Node.js en su consola arrojaba esto:   C:\nube-colectiva\app.js:39 request(url, function (error, response, body) { ^ ReferenceError: request is not defined   Y lo solucione instalando request: 2.88.2 e importándolo al archivo app.js:   const request = require(‘request’)… Leer más »

Omar
Omar
2 meses atrás

Hola!  Ya pude solucionarlo.   Conserve la biblioteca de request y la función anónima pero la estructuré e importé manualmente jQuery y Popper.js   Me quedó así:   HTML <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script>     $.ajax({         type: "GET",         url:"http://localhost:3003/datos",         dataType: "json",         success: function(json) {         console.log(json);         },         error: function(e) {         console.log(e);         }     }) </script> 1234567891011121314151617 <script src="https://code.jquery.com/jquery-3.5.1.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script>    $.ajax({        type: "GET",        url:"http://localhost:3003/datos",        dataType: "json",        success: function(json) {        console.log(json);        },         error: function(e) {        console.log(e);      … Leer más »

Nube Colectiva - Dashboard COVID-19.png