TypeScript: brincando com Arduino

TypeScript com Arduino

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

Bom, pensando em ir um pouco mais 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 @types/johnny-five 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 referencia johnny-five no seu projeto. Para isso, atualize o seu arquivo app.ts com o seguinte trecho de código:

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, irá 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

Agora antes de executar o código, conecte um led no seu board conforme a imagem abaixo, em seguida, conecte o Arduino no seu computador.

Agora 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 esse 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 seu 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ê irá ter uma tela com um botão e um label, para ligar e desligar o seu led, basta clicar nesse botão. Abaixo tem um vídeo demonstrando esse 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 seu link no GitHub: ts-arduino.