TypeScript: brincando com Arduino

Para quem acompanha os meus artigos, já deve ter notado que eu estou focando em TypeScript há algum tempo. Tive a oportunidade de publicar alguns projetos nesse último ano, utilizando ele na criação de APIs com Node.js e em admins e sites/portais com Angular.

Bom, pensando em ir um pouco mais a fundo com TS e sair um pouco dos meus temas tradicionais, resolvi demonstrar algo com Arduino nesse artigo. Tendo isso em mente, o objetivo será criar um projeto Angular que acenda e apague um LED conectado no meu Arduino.

O primeiro passo será criar uma API que interaja com o Arduino. Para isso, eu irei utilizar o template de um projeto que eu desenvolvi em um artigo anterior. Caso tenha interesse em clonar ele, segue o seu link no GitHub:

• ts-standard.

Esse projeto está com os seguintes pacotes:

• body-parser: para interagir com JSON
• express: para criação das rotas
• nodemon: para auxiliar no desenvolvimento

Caso tenha clonado o projeto do link acima, execute o comando npm i para baixar os pacotes do arquivo package.json.

O próximo passo será instalar o pacote que irá interagir com o Arduino. Existem muitos, mas para esse artigo eu irei utilizar o pacote johnny-five. Para obter ele, execute o comando abaixo no terminal do seu projeto:

npm i <a href="http://twitter.com/types/johnny-five">@types/johnny-five</a> johnny-five — save

Agora, para testar o projeto, execute os comandos abaixo no seu terminal:

npm run compile
npm start

Os comandos acima irão criar um diretório chamado dist com os seus arquivos .js e executar o projeto na porta 3000. Agora abra o endereço http://localhost:3000/ no seu navegador. Você pode ver o resultado desse passo na imagem abaixo:

O próximo passo será adicionar a refêrencia johnny-five no seu projeto. Para isso, atualize o seu arquivo app.ts com o seguinte trecho de código:

import * as express from "express";
import * as bodyParser from "body-parser";
import * as five from "johnny-five";

class App {
  public app: express.Application;
  private bodyParser;
  public board: any;
  public led: any;
  public status: boolean = true;

  constructor() {
    this.app = express();
    this.middleware();
    this.routes();
    this.managerLed();
  }

  middleware() {
    this.app.use(bodyParser.json());
    this.app.use(bodyParser.urlencoded({ extended: false }));
  }

  managerLed() {
    this.board = new five.Board();
    this.board.on("ready", function() {
      this.led = new five.Led(13);
    });
  }

  routes() {
    this.app.route("/led").get((req, res) => {
      let _model = req.query.turn;

      if (this.board.isReady) {
        if (_model == "on") {
          this.board.led.on();
        } else {
          this.board.led.off();
        }
      }
      res.send({ result: _model });
    });

    this.app.route("/").get((req, res) => {
      res.send({ result: this.status });
    });
  }
}

export default new App();

Analisando o código acima, nós temos:

• 03: referência do pacote johnny-five
• 24 a 28: instância do pacote five.board. Ele irá procurar a porta que o seu Arduino está conectado no seu computador. Assim que ele encontrar, passará a referência do led para variável led
• 32 a 43: criação da rota /led, ela irá receber um parâmetro chamado turn que irá ligar e desligar o LED do meu board

Antes de executar o código, conecte um LED no seu board conforme a imagem abaixo, e em seguida, conecte o Arduino no seu computador.

Execute os comandos abaixo novamente no seu terminal e abra a url: http://localhost:3000/led?turn=on no seu navegador.

npm run compile
npm start

Caso o código tenha executado sem erros e seu Arduino esteja conectado corretamente, o LED irá acender. Para apagar ele basta abrir a url http://localhost:3000/led?turn=off no seu navegador.

Abaixo tem um vídeo desmontrando este passo:

Bom, a primeira parte esta OK, mas não seria legal algo visual para interagir com o LED? Caso a sua resposta seja sim, eu criei um projeto com o Angular para interagir com essa API. Segue o link no GitHub:

• ng-arduino.

Esse código tem um serviço que faz uma requisição a API desenvolvida no passo anterior, para testar ele basta seguir os passos abaixo:

1. Conecte o seu Arduino com o LED no seu computador
2. Execute a sua API desenvolvida nesse artigo
3. Execute o comando ng serve para subir o seu projeto Angular

Com os passos anteriores funcionando corretamente, você terá uma tela com um botão e um label. Para ligar e desligar o seu LED, basta clicar nesse botão. A seguir, um vídeo demonstrando este passo:

Bem simples, né? O objetivo desse artigo não foi desenvolver algo complexo com Arduino, foi demonstrar como podemos avançar com TypeScript também na parte de IoT.

Caso você tenha interesse em baixar a API desenvolvida nesse artigo, segue o link no GitHub:

• ts-arduino.