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
|
1 2 3 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "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:
|
1 2 3 4 5 6 7 |
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:
|
1 2 3 4 5 6 7 |
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:
|
1 2 3 4 5 6 7 |
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.