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

3 minuto(s)

En esta página:

Puede que pertenezcas a una organización de tu localidad o de cualquier lugar del mundo y necesites crear un tablero o dashboard con información personalizada para un determinado objetivo en particular, en este Post quiero ayudar a las personas que necesiten crear este Dashboard con información actualizada de casos diarios de Covid 19, vamos con ello.

Partes

Antes de continuar con este Post 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 1.

Creación de un Nuevo Proyecto en Node JS

Vamos a comenzar creando un nuevo proyecto en Node JS, para esto ejecuto el siguiente comando en la consola de comandos


npm init

npm init

Al ejecutar el comando anterior, Node me va pedir que ingrese determinados datos y al finalizar de definir los datos Node me crea un archivo llamado package.json con los datos que he definido


{
  "name": "covid19-dashboard",
  "version": "1.0.0",
  "description": "Dashboard de casos diarios de covid 19 con Node JS y Bootstrap",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Nube Colectiva",
  "license": "ISC"
}

{

"name": "covid19-dashboard",

"version": "1.0.0",

"description": "Dashboard de casos diarios de covid 19 con Node JS y Bootstrap",

"main": "app.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"author": "Nube Colectiva",

"license": "ISC"

}

Bien con esto, ya tenemos creado el proyecto en Node JS, ahora pasemos con Bootstrap 4.

Bootstrap 4

Ahora vamos a instalar el paquete npm de Bootstrap 4, con el crearemos la vista del Dashboard en donde mostraremos los casos diarios de Covid-19, antes de instalarlos voy a instalar 2 paquetes que son necesarios para que Bootstrap 4 funcione correctamente, estos son:

jQuery
Popper JS

Primero instalaré jQuery, en la consola de comandos ejecuto el siguiente comando:


npm install jquery --save 

+ jquery@3.5.0
added 1 package from 1 contributor and audited 1 package in 3.557s
found 0 vulnerabilities

npm install jquery --save

+ jquery@3.5.0

added 1 package from 1 contributor and audited 1 package in 3.557s

found 0 vulnerabilities

Luego para instalar Popper JS ejecuto el siguiente comando:


npm install popper.js --save 

+ popper.js@1.16.1
added 1 package from 2 contributors and audited 2 packages in 1.465s
found 0 vulnerabilities

npm install popper.js --save

+ popper.js@1.16.1

added 1 package from 2 contributors and audited 2 packages in 1.465s

found 0 vulnerabilities

Listo, ahora podemos instalar Bootstrap 4, ejecutando el siguiente comando:


npm install bootstrap --save 

+ bootstrap@4.4.1
added 1 package from 2 contributors and audited 3 packages in 1.18s
found 0 vulnerabilities

npm install bootstrap --save

+ bootstrap@4.4.1

added 1 package from 2 contributors and audited 3 packages in 1.18s

found 0 vulnerabilities

Bien hasta aquí hemos creado un nuevo proyecto con Node JS y hemos instalado Bootstrap 4 junto con sus dependencias respectivas y más adelante podremos crear la vista HTML del Dashboard sin problemas.

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 trabajaremos en el código y la lectura de datos con casos diarios 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.