Integración de Arduino con ReactJS a través de un API en ExpressJS

En esta ocasión vamos a utilizar nuestra API (del artículo anterior) para mandar peticiones a través de una sencilla aplicación en ReactJS

Anteriormente ya hemos hecho algunas aplicaciones con React, puedes checar los tutoriales al respecto.

Crea un sitio web en menos de 5 minutos con GatsbyJS y ReactJS

Crea presentaciones impactantes con ReactJS

Creando una aplicación de reconocimiento de voz con Watson, React y Express

Desarrollo de una aplicación de ChatBot con React Native y DialogFlow

Integrando glamorous con ReactJS, Sass y Material Design

Instalación

En ésta ocasión vamos a instalar nuestras dependencias (usaremos create-react-app) y como en todos los proyectos que realizamos es importante que tengamos instalada la versión correcta de nodejs.

Y como en tutoriales anteriores lo he marcado, una de las mejores herramientas para controlar nuestras versiones es nvm.

creationix/nvm

Es importante que tengamos instalada para este caso la versión 8.15.0 de nodejs.

$ node --version
v8.15.0

Vamos a instalar create-react-app

$ npm i -g create-react-app 

Creación del proyecto

Para poder crear nuestro proyecto con create-react-app seguimos los siguientes pasos:

$ npx create-react-app arduino-react-express
$ cd arduino-react-express
$ npm start

Al instalar tendremos esta pantalla

Al iniciar el servidor saldrá esta pantalla

Ahora tendremos una App basada en React corriendo en localhost:3000 lista para integrarla con nuestra API.

Es importante que revisemos el tutorial anterior, para saber cómo está desarrollada la API y así evitemos la mayor cantidad de errores.

Integración de Arduino con un API en Express

Implementación

Ahora vamos a hacer la parte más divertida, abriremos el archivo src/App.js y lo modificaremos de la siguiente forma.

import React, { Component } from 'react';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <p>
            Aquí editaremos el código
          </p>
        </header>
      </div>
    );
  }
}
export default App;

Abrimos nuestro navegador y veremos la siguiente pantalla:

Para consumir nuestra API primero tenemos que correr nuestro servidor en express que realizamos en el tutorial pasado, recordemos que estará en: localhost:8080

Perfecto, nuestros servidores están corriendo.

En este caso utilizaremos fetch para hacer la petición.

Vamos a intentar hacer algo con el state para controlar el encendido y apagado de nuestro LED

constructor() {
  super();
  this.state = { isPower: false };
}

Ahora añadiremos una función que nos permita hacer la petición de acuerdo al estado de nuestro LED con la constante action podremos hacer la petición correctamente, utilizando el endpoint de nuestra API: localhost:8080/led?power=${action}

togglePower() {
  const action = !this.state.isPower ? 'on' : 'off';
  fetch(`http://localhost:8080/led?power=${action}`)
    .then(_res => {
      console.log(_res);
      this.setState(prevState => ({
        isPower: !prevState.isPower,
      }));
    });
}

Ahora modificaremos nuestro método render.

render() {
  return (
    <div className="App">
       <header className="App-header">
        <p
          onClick={this.togglePower.bind(this)}
        >
          Prender o apagar
        </p>
      </header>
    </div>
  );
}

Vamos a optimizar nuestro código:

// En nuestro constructor
constructor() {
    super();
    this.state = { isPower: false };
    this.togglePower = this.togglePower.bind(this);
  }
// En nuestro método render
render() {
    return (
      <div className="App">
        <header className="App-header">
          <p
            onClick={this.togglePower.bind(this)}
          >
            {this.state.isPower ? 'Apagar' : 'Encender' } LED
          </p>
        </header>
      </div>
    );
  }

Ahora vamos a probar nuestra mini aplicación.

Puedes checar el código fuente de la aplicación en el siguiente repositorio.

onimenotsuki/arduino-react-express

Conclusión

Perfecto, hemos concluido, todo salió de maravilla, si te gustan mis artículos, no se te olvide seguirme en mis redes sociales.