Tutorial Do Projeto Final Do Curso IoT Aplicada a Smart Home Inatel / Novembro 2017

No desenvolvimento desse projeto foi utilizada uma plataforma hibrida, sem a necessidade de acessar os recursos de plataformas nativas do Android ou do IOS. Foi utilizado um computador tipo notebook com windows 10.

Essa plataforma chama-se Ionic, que é um framework ( estrutura de desenvolvimento que facilita o desenvolvimento de software), baseada em outra plataforma chamada Cordova, que utiliza um recurso chamado Webview para renderizar o conteúdo do aplicativo na tela do usuário.

Para auxiliar todo o processo de instalação e utilização do Ionic é preciso instalar o Node.js que pode ser encontrado em (https://nodejs.org/en/). Juntamente com o node é instalado um gerenciador de pacotes chamado NPM (Node package manager) pelo qual são instalados os recursos necessários para utilização do Ionic.

Hardware utilizado:

- placa dragon board 410c e fonte de alimentação

- kit de sensores e atuadores da Linker Mezzanine

- placa linker mezzanine

Software utilizado:

- node.js ionic (framework)

- cordova

- linguagem de programação python

Também foi utilizada uma IDE de desenvovimento chamada Visual Studio Code para facilitar o desenvolvimento deste trabalho que pode ser encontrada em:

https://code.visualstudio.com/

Neste step será mostrado todo o desenvolvimento do código que irá "rodar" na dragon board e sua interface com a "nuvem".

A dragon board utilizada neste projeto deverá estar com o sistema operacional linux linaro pré instalado e com suas entradas/saídas digitais e analógicas pré configuradas, adaptada com mouse e teclado, monitor HDMI, linguagem de programação Python e ainda estar conectada com a internet. Este passo não será demonstrado neste tutorial.

Os sensores utilizados neste projeto serão capazes de ler as informações de luminosidade e temperatura de um ambiente e permitir o acionamento remoto de uma lâmpada e de um ar condicionado, respectivamente.

O relé está conectado na D2 da linker mezzanine.

O led, que representa uma lâmpada, está na D3.

O sensor de luminosidade está na ADC1

O sensor de temperatura está na ADC2

O projeto é dividido em três partes:

Hardware: Dragonboard, Linker Mezzanine Board, sensores e atuadores

Armazenamento na nuvem: O Dweet será usado para receber e fornecer informações provenientes da Dragonboard e do aplicativo.

Aplicativo Mobile: Será usado o framework Ionic para criação do aplicativo e com isso ele poderá ser testado no navegador e em um celular Android.

O software que controlará a placa localmente foi desenvolvido em Python. Este software enviará as informações de luminosidade e de temperatura de 10 em 10 segundos para o site Dweet.io.

Baixar o arquivo projeto_final.py e armazená-lo numa pasta do sistema de arquivos do sistema operacional da dragon board.

Com o terminal aberto na pasta do arquivo baixado digitar:

sudo python projeto_final.py

Este comando iniciará a leitura dos sensores instalados na placa dragon board e a partir desse momento é possivel alterar seus estados através do dweet.

O video anexado neste tutorial explica em detalhes seu funcionamento.

Abrir no seu navegador o site Dweet.io clicar na aba "Play" e em seguida clicar em "create a dweet for a thing".

Após este passo, preencher os campos "thing" e "content" de acordo com as imagens acima que correspondem aos mesmos parâmetros presentes no código em python chamado projeto_final.

Tratam-se dos métodos "post" e "get", respectivamente, utilizados para passar valores de uma página para outra em um site dinâmico.

Isto feito e com o programa em python rodando na placa dragon board, é possível alterar o estado da "Ar" e da "Lâmpada" alterando seus valores para "1" na página do dweet e clicando no botão "Try it".

No próximo step será mostrado o desenvolvimento do aplicativo com o ionic.

Neste step será mostrado o desenvolvimento do aplicativo com o framework Ionic que irá se comunicar com o dweet.io e assim, também, ler e alterar as informações que ocorrem na dragon board.

Será criado um aplicativo em branco digitando o seguinte comando no prompt do windows:

ionic start smart-home-projeto_final blank

Abrir a IDE Visual Studio Code para alterar os códigos que irão comunicar com o dweet.io.

Após abrir o visual studio é necessário abrir a pasta em que o aplicativo em branco foi criado para a alteração dos códigos.

Os dois arquivos que serão alterados inicialmente são o "home.html" e o "home.ts". No "home.html" é que é feita toda a parte visual do aplicativo e no "home.ts" é feita a alteração das propriedades da tela do aplicativo.

Baixar o arquivo home.txt e substituir o conteúdo deste arquivo no arquivo home.html no Visual Studio e salvá-lo.

Baixar também o arquivo home.ts e substituí-lo no Visual Studio salvando-o.

Fazer o mesmo com o arquivo app.module.ts e salvá-lo.

Após isso é necessário criar um arquivo para a comunicação com o dweet. Abrir um prompt no próprio Visual Studio aberto e digitar:

ionic generate provider dweet

Uma vez criado esse arquivo, baixe e substitua o conteúdo do código dweet.ts que está anexo. Isso fará as correções no código para a perfeita comunicação com o dweet.io.

Tudo pronto e agora basta digitar no mesmo prompt do Visual Studio o comando para abrir o aplicativo:

ionic serve.

O aplicativo será aberto no seu navegador e assim, todo o processo de criação do mesmo está completo.

Para visualização através do smart phone basta baixar o aplicativo ionic DevApp no Google Play e iniciá-lo para que este reconheça o aplicativo Ionic rodando na sua rede wifi.