React — Coronavirus Map

Tratando de hacer un aporte por parte de Ecudevs en este duro momento por el que pasa el mundo entero, y aprovechando que de seguro estás cumpliendo las disposiciones de las autoridades guardando tu salud desde casa, he decidido hacer este pequeño tutorial en donde explicaré como hacer una pequeña aplicación web con React en donde vamos a conectarnos a un API que nos va a dar información acerca de los paises en los que hay infectados y el número casos que cada uno de ellos enfrenta.

Puedes encontrar el ejemplo funcionando aquí y el fuente aquí.

El API a consultar

He estado siguiendo un API estos úlitmos días que me ha dado un buen feedback acerca de los casos que se suscitan en cada país, lo encotré en una web dedicada a registrar estos servicios llamada RapidAPI, puedes acceder registrándote gratis con tu cuenta de Facebook, Gmail o inclusive Github. En el buscador podemos ingresar la búsqueda “coronavirus” y vamos a elegir la segunda opción.

Automáticamente vamos a acceder a una pantalla en la que la plataforma nos va a dar toda la información acerca de este API, del lado izquierdo por ejemplo tenemos todas las rutas y métodos disponibles para acceder a la diferente información. Para nuestro caso en concreto nosotros vamos a consultar la ruta cases_by_country.

Dentro de esta misma interfaz vamos a poder probar y ver que información nos va a retornar la consulta hacia esta ruta, para probarla vamos a dar click en el botón azul que dice Test Endpoint, luego del lado derecho de la interfaz vamos a poder visualizar los datos que puedo obtener gracias a este API, estos datos van a estar representados en formato JSON y posee dos propiedades en su raíz countries_stat y statistic_taken_at.

En la primera propiedad voy a encontrar un arreglo de objetos con la información de cada país infectado con la siguiente estructura.

Al día de hoy 17 de marzo de 2020, fecha en la que estoy escribiendo este post un muy famoso diario de mi país informa acerca de los 111 casos que tenemos a la fecha los mismos casos que me reporta el API que vamos a usar.

Esta coincidencia nos pueda advertir un poco de la confianza que le podemos dar a esta fuente de datos, de cualquier manera podemos advertir que como Ecudevs no nos reponsabilizamos por los datos erroneos que pudiera proporcionar esta API.

Adicional al API antes mencionada vamos a utilzar otro, el cual nos va a servir puntualmente para 2 cosas: obtener la imagen de la bandera del país y la latitud y longitud para poder ubicarlos en el mapa.

Nuestro Stack

Para el desarrollo de nuestra pequeña aplicación vamos a usar React y Material — ui en nuestro frontend, mientras que para nuestro backend vamos a usar NodeJs con ExpressJs. Para no tener que configurar un proyecto totalmente desde cero vamos a partir de un repositorio subido en mi cuenta personal de Github que contiene un pequeño scaffold en donde vamos a tener configuradas las tecnologías que cité vamos a usar. Para clonar nuestro repositorio vamos a usar Git, abramos una consola dentro del directorio en donde tenemos todos nuestro proyectos y vamos a ingresar los siguientes comandos.

git clone https://github.com/thianlopezz/react-material.git coronavirus-map
cd coronavirus-map
code .

Lo que harán estas instrucciones será, primero clonar el repositorio que vamos a usar dentro de una carpeta llamada coronavirus-map, luego de esto vamos a acceder a este nuevo directorio y por último vamos a abrir este proyecto en una instacia de Visual Studio Code.

El proyecto que acabamos de abrir está construido a partir de una estructura básica de una aplicación de React generada a partir del comando Create React App, al que se le fue añadiendo ciertas configuraciones hasta llegar al stack que hemos mencionado.

Para ejecutar nuestro proyecto primero necesitamos instalar sus respectivas dependencias, para lo cual vamos a abrir una nueva terminal desde Visual Studio Code y vamos a escribir el siguiente comando.

npm install

Luego de haber instalado todas las dependencias podemos nuevamente en la terminal ingresar el siguiente comando.

npm run dev

Comando que automáticamente me va a abrir una nueva pestaña en el navegador con el contenido de mi aplicación.

Manos a la obra

Estamos listos para poder trabajar en nuestra aplicación, lo primero que haremos será crear una carpeta llamada affectedCountry dentro de la carpeta components, en esta carpeta vamos a crear todos los componentes realacionados a la información del país afectado por ejemplo listas, o cartas para representar nuestra información.

InffectedCountryCard.js

El primer componente que voy a crear es un componente de carta el cual servirá para desplegar la información del país afectado con sus respectivos casos.

No voy a ahondar mucho en explicar este componente, ya que solo es un presentational component que va a recibir propiedades para a su vez estas sean renderizadas en un componente Card que importo de Material-Ui, con ciertas configuraciones de estilos en línea.

InffectedCountryList.js

Este componente se trata de otro presentational component pero que en este caso va a renderizar un set de datos que se van a mapear en una lista de componetes de tipo InffectedCountryCard.

Configuración de Google Maps

Antes de acceder a configurar nuestro mapa de Google debemos obtener nuestro token, que nos va a servir como una especie de llave para que nuestro mapa funcione. Para esto vamos a ir a Google Cloud Console, para acceder a esta consola debes tener una cuenta de Google.

Una vez en la consola de Google vas a tener que elegir un proyecto o si no tienes uno vas a tener que crearlo.

En mi caso voy a elgir un proyecto llamado tutoriales en el que la verdad no recuerdo que he configurado pero seguro es algo relacionado a tutoriales como este. Luego accedemos al menú lateral APIs y servicios > Biblioteca.

Y luego elegimos la opción Maps JavaScript API.

Selccionamos la opción habilitar.

Una vez habilitado nuestro API, accedemos al apartado de Credenciales > Credenciales en APIs y servicios.

Luego elegimos la opción Crear credenciales > Clave de API.

Y finalmente copiamos y guardamos nuestro API KEY en un lugar seguro.

Google Map React

Una vez conseguido nuestro API KEY lo siguiente es instalar en nuestro proyecto la dependencia que vamos a usar para nuestro mapas, en esta ocación usaremos Google Map React, que es una librería que nos va a evitar mucho esfuerzo para tener listo nuestro mapa.

Podemos instalar esta dependecia ingresando por consola el siguiente comando:

npm install google-map-react

InffectedCountryMap.js

Tenemos todo listo para proceder a configurar nuestro mapa, para comenzar vamos a crear un nuevo componente.

Nuevamente estamos ante un componente de presetnación al cual le pasamos a través de las propiedades la lista de los países afectados para que se mapeen, no olvides en la línea 13 configurar el API KEY que obtuvimos hace un momento.

Y por último

Vamos ya a concentrarnos en nuestro archivo App.js que es el componente principal de nuestra aplicación y será en el cual accedamos a los APIs para obtener la información del COVID 19.

En este archivo podemos encontrar quizá lo que podemos considerar como la parte más pesada de nuestra aplicación. En este componente vamos a usar la nueva (relativamente) herramienta que nos da React para manejar estados, efectos secundarios y demas, los famosos hooks.

Usaremos tanto el hook useEffect y useState, para manejar los efectos secundarios y los estados respectivamente, dentro de useEffect vamos a realizar las respectivas llamadas asíncronas a los APIs (línea 12).

Luego de ralizar 2 típicas invocaciones de APIs a través de fetch debemos hacer un pequeño mapeo del arreglo final a utilizar, por cada país que tenemos en el arreglo que nos devuelve el API que nos da las estadísticas de los casos de coronoavirus vamos a ir al otro set de datos proporcionado por mi otro API y debemos ir a buscar la información de la bandera del país y la latitud y longitud, como habiamos citado al inicio de este tutorial para a su vez poder configurarlo en el estado de nuestra aplicación (líneas 32–40).

Conclusión

Espero este pequeño aporte pueda contribuir en algo a la gran situación que estamos viviendo. Hemos desarrollado una aplicación bastante simple que seguramente puede mejorar, siéntete libre de hacer fork al repositorio y generar pull requests que puedan mejorarla, aprovecha mientras tienes este tiempo de cuarentena. Que todo mejore pronto! nos vemos!.