API COVID-19 Data Visualization with React JS (Spanish)

Introducción:

Nos encontramos viviendo un momento complicado en todo el mundo a causa de la pandemia de COVID-19 que cada día crece de manera exponencial.

Como desarrollador soy nuevo en la industria y por fortuna mi trabajo me da la libertad de trabajar desde casa.

Y creo que ante el caos llega la creatividad.

En mis tiempos libres pensé en crear una aplicación en React que consume información de una API sobre los casos actuales de COVID-19 para reforzar y obtener nuevos conocimientos.

De alguna forma dar mi aporte a la comunidad, ya que considero que mantenerse informados es la mejor manera de prevenir el contagio.

Por lo que mi motivación de realizar este proyecto es ser parte de una comunidad, ayudar a los demás y crecer de manera profesional (así como persona).

Tecnologías y herramientas que utilice son las siguientes:

• React: es una biblioteca de JavaScript para construir interfaces de usuario.

• Moment: es una biblioteca para analizar, validar, manipular y mostrar fechas y horas en JavaScript.

• Particles: es una biblioteca ligera de JavaScript para crear partículas, en la cual también existe un componente para utilizar en React.

• Material UI: para varios estilos utilice esta increíble kit de componentes. Si gustas tener más opciones, esta publicación te ayudara mucho 20+ Best React UI Component Libraries / Frameworks for 2020, creado por Chris Fitzgerald.

• gh-pages: usada para hacer un deploy de nuestra aplicación a github pages. Si quieres aprender a hacer un deploy esta publicación te ayudara mucho How to deploy React App to GitHub Pages, creado por Ibrahim Ragab.

API:

Investigué cual sería una buena API para utilizar en mi aplicación, y me encontré con una gran cantidad, entre las cuales se encuentran:

• Coronavirus COVID19 API: proporciona casos actuales y más información sobre COVID-19.

• COVID19-Tracker-REST API: proporciona casos actuales y más información sobre COVID-19.

• Coronavirus Data API (thevirustracker.com): proporciona estadísticas globales, estadísticas de país, cronología completa y cronología de país para el coronavirus.

• Coronavirus Smartable (smartable.ai): La API de estadísticas y noticias de coronavirus ofrece estadísticas e información de noticias COVID-19 más recientes e históricas por país o estado.

• COVID-19 Elsevier Research API: Una API de motor de búsqueda de conjuntos de datos de investigación (indexando conjuntos de datos de más de 60 repositorios de datos científicos en todo el mundo).

Así como muchas más, publicadas en: https://covid-19-apis.postman.com/ la cual puedes utilizar para crear tus proyectos.

Código:

En esta aplicación se utilizo “Coronavirus COVID19 API” ya que para mi es una de las más completas y organizadas, pero conforme la fui probando llegue a tener algunos problemas y la información tarda en ser actualizada. Por estas razones espero en un futuro probar con otra API.

class App extends Component {
  state = {
    data: [],
  };

  stateData = (dataApi) => {
    this.setState({ data: dataApi });
  };

  getData = async () => {
    let response = await fetch("https://api.covid19api.com/summary");
    let data = await response.json();
    this.stateData(data);
  };

  componentDidMount() {
    this.getData();
  }

  render() {
    const { data } = this.state;

    return (
      <>
        <header className="app-header">
          <h1>COVID-19</h1>
        </header>
        <Grid container direction="row" justify="center" alignItems="center">
          <InfoGlobal
            date={data.Date}
            NewConfirmed={data.Global && data.Global.NewConfirmed}
            TotalConfirmed={data.Global && data.Global.TotalConfirmed}
            NewDeaths={data.Global && data.Global.NewDeaths}
            TotalDeaths={data.Global && data.Global.TotalDeaths}
            NewRecovered={data.Global && data.Global.NewRecovered}
            TotalRecovered={data.Global && data.Global.TotalRecovered}
          />
        </Grid>
        <Grid container direction="row" justify="center" alignItems="center">
          <SearchInfo Countries={data.Countries} />
        </Grid>
        <Grid container direction="row" justify="center" alignItems="center">
          <CountryInfo Countries={data.Countries} />
        </Grid>
      </>
    );
  }
}

export default App;

• Pueden ver el proyecto completo en mi repositorio de Github: https://github.com/AlfredoCU/Covid-19

• Y la aplicación funcional en: https://alfredocu.github.io/Covid-19/

APP:

Experiencia:

Fue genial realizar este pequeña aplicación en mi tiempo libre, me siento muy motivado de poder hacer cosas que me gustan, y en un futuro poder crear aplicaciones más complejas y divertidas.

Este es mi primera publicación espero les haya gustado.