Conteúdo


Desenvolva um sensor de temperatura pronto para nuvem com o Arduino Uno e o IBM IoT Foundation, Parte 4: Implemente uma GUI de consulta

Nessa última parte do artigo dessa série de tutoriais, você concluirá a implementação da arquitetura conceitual do projeto. Nas Partes 1 e as variáveis do 2, você aprendeu como reunir dados do sensor de temperatura e umidade com o Arduino e enviá-los pelo MQTT para o QuickStart do IBM IoT Foundation. Na Parte 3, você escreveu um serviço da Web que pode ser usado para consultar dados do sensor — recebidos do sensor de temperatura do Arduino — que foram colocados em um banco de dados MongoDB da MongoLab por um aplicativo Node-RED em execução no IBM® Cloud ™. Agora você concluirá seu aplicativo incluindo uma GUI JavaScript simples e fará um rápido ajuste na configuração do Node-RED para que sua GUI possa se comunicar com ele.

O que será necessário para o seu aplicativo

  • O hardware e o software abordados na Parte 1 e as variáveis do Parte 2 dessa série e a conclusão das etapas na Parte 3.
  • Uma conta do IBM Cloud que esteja associada ao seu ID IBM.
  • As ferramentas de linha de comando Cloud Foundry

Execute o aplicativoObtenha o código

Quando testar o aplicativo, procure por datas na primeira semana de agosto de 2014.

A boa notícia é que o Node-RED inclui suporte para CORS, a má notícia é que ele não está ativado por padrão.

Etapa 1: Escreva a GUI

Eu desejava a capacidade de visualizar informações de histórico sobre a temperatura no meu gabinete de fiação, então desenvolvi uma página da Web HTML e JavaScript simples que eu poderia fornecer a partir do servidor da Web nginx em execução no IBM Cloud:

Screenshot of the chart GUI
Screenshot of the chart GUI

Como é possível ver, não é nada assustadoramente inovador, mas apenas uma simples página da Web. Eu desenvolvi a página usando:

  • O pacote de folha de estilo Bootstrap para atribuir uma aparência limpa e moderna a ela
  • O pacote de representação gráfica Chart.js para desenhar os gráficos
  • O pacote Moment.js para formatar as datas
  • jQuery para seus recursos do Ajax e Model View Controller (MVC)

Se você deseja desenvolver essa página para seu próprio projeto, primeiro faça o download do código-fonte para a página index.html principal. (Clique no botão Get the code (botão) no final da seção "O que será necessário para o seu aplicativo" deste artigo. Na página de visão geral do meu projeto DevOps Services, clique em EDIT CODE. Na pasta HTML Files, selecione o arquivo index.html e clique em File > Export. Salve o arquivo ZIP no seu sistema de arquivos local e expanda-o.)

É necessário fazer uma alteração no código JavaScript no index.html para fazê-lo funcionar com seu projeto. Localize a seguinte linha no arquivo:

var url = "http://kbarduinoiot.mybluemix.net/data";

Se você deixar a linha como está, ela realizará o pull dos dados do meu serviço da Web. Isso funcionará bem, mas não exibirá os dados que você se empenhou tanto para colocar na nuvem. Em vez disso, atualize a URL para apontar para o serviço da Web que você desenvolveu na Parte 3 e salve o arquivo.

Em seguida, faça o download de Chart.js e as variáveis do Moment.js.

Crie um diretório no seu PC local contendo os seguintes arquivos:

  • Moment.js: arquivo de origem do Moment.js obtido do download do Moment.js
  • Chart.js, Chart.min.js e gulpfile.js: arquivos de origem do Chart.js obtidos do download do Chart.js
  • index.html: arquivo HTML do download de exemplo

Etapa 2: Implemente a página no nginx

Implementar um website estático simples como esse no IBM Cloud é muito fácil. Nesse caso, você usará o servidor da web nginx. Existe um buildpack para IBM Cloud suportado pela comunidade que o instala. Faça login no IBM Cloud e emita o seguinte comando (substitua sua opção de nome do aplicativo para myappname) de dentro do diretório que você acabou de criar para manter seus arquivos:

cf push -b https://github.com/cloudfoundry-community/nginx-buildpack 
myappname

Esse comando cria ou atualiza o aplicativo especificado. As ferramentas Cloud Foundry e o buildpack são suficientemente inteligentes para saber quais arquivos atualizar ou criar sempre que você emitir um push.

Você verá diversas mensagens no console mostrando o progresso do seu push. Quando finalmente visualizar uma mensagem indicando requested state:started, você saberá que seu aplicativo está funcionando. No entanto, mesmo que o aplicativo esteja funcionando, ainda não é possível usá-lo. O motivo está no problema do Cross-Origin Resource Sharing (CORS).

O problema do CORS

Como você provavelmente sabe, as chamadas do Ajax usam a chamada XmlHttpRequest . O problema é que as políticas de segurança nos navegadores impedem solicitações para qualquer website que não o no qual uma página da Web foi carregada. Portanto, é possível fazer uma solicitação do Ajax para seu próprio nome do host, mas não outros. Isso é um problema na sua solução, pois o website e o aplicativo Node-RED são implementados em nomes de host diferentes.

Embora existam muitas possíveis soluções para esse problema (incluindo JSONP), o CORS padrão resolve esse problema definindo alguns novos cabeçalhos de HTTP e incluindo um requisito de que o navegador emita uma solicitação de duas partes enviando primeiro uma solicitação HTTP OPTIONS antes de enviar a solicitação "real". Agora essa coordenação tem a cooperação do código no navegador e do código no servidor. No navegador, isso já é tratado para você pelo jQuery, que lida com o processamento de solicitação do CORS. Mas ainda é necessário resolver isso no seu servidor REST no Node-RED.

Etapa 3: Modifique a configuração do aplicativo Node-RED

A boa notícia é que o Node-RED inclui suporte para CORS, a má notícia é que ele não está ativado por padrão. Portanto, é necessário fazer uma alteração na configuração do Node-RED — O que requer um breve desvio no IBM DevOps Services.

O DevOps Services é o ambiente totalmente na nuvem da IBM para codificar, desenvolver, estar e implementar aplicativos. Ele é completa e perfeitamente integrado ao IBM Cloud, portanto é fácil se inteirar e começar a usar. Para o propósito desse tutorial, é necessário modificar apenas um arquivo: o arquivo de configuração do Node-RED, chamado bluemix-settings.js. (É possível usar o DevOps Services para cenários de desenvolvimento muito mais complexos, mas esse faz uma introdução boa e simples.) Para fazer essa alteração, é necessário ativar seu aplicativo para usar o IBM DevOps Services.

Acesse a página de visão geral do seu aplicativo a partir do painel do IBM Cloud e procure no canto superior direito da página pelo pequeno botão ADD Git :

Screenshot of the ADD GIT button
Screenshot of the ADD GIT button

Clique no botão. Isso inicializa um conjunto de caixas de diálogo que criam um repositório Git no DevOps Services para seu aplicativo. Primeiro, você verá uma caixa de diálogo de login. Faça o login usando seu ID IBM com o qual fez login no IBM Cloud. Quando visualizar a caixa de diálogo de confirmação solicitando que você confirme a criação de um repositório Git, clique em Continuar. Após o repositório ser criado, clique em Fechar. Seu aplicativo será implementado e reiniciará. Isso pode levar um ou dois minutos, portanto, espere até o monitor de funcionamento no painel do aplicativo mostrar que o aplicativo foi reiniciado.

Agora é possível começar a usar o DevOps Services para o código ou configuração do seu aplicativo. Você acessa as ferramentas do IBM Cloud clicando no botão CODE que substituiu o botão ADD GIT :

Screenshot of the Code button
Screenshot of the Code button

Após clicar no botão CODE , você está em um editor de projeto. Se estiver familiarizado com o Eclipse, verá algumas semelhanças. (Isso é porque você está em uma cópia integrada da plataforma de desenvolvimento Web Eclipse Orion.)

Localize o arquivo bluemix-settings.js no painel à esquerda e clique duas vezes no nome do arquivo para abrir o arquivo no painel à direita. Role para baixo até aproximadamente o meio do arquivo e localize a linha que diz:

httpAdminRoot:'/red',

Para ativar o CORS Para o servidor, insira as linhas a seguir logo após essa linha:

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
    origin: "*",
    methods: "GET,PUT,POST,DELETE"
},

Salve o arquivo (Ctrl+S). Agora procure na parte superior direita do editor pelo botão DEPLOY e clique nele:

Screenshot of the DEPLOY Button
Screenshot of the DEPLOY Button

Na caixa de diálogo que aparece em seguida, clique em Deploy para confirmar que você deseja configurar a implementação do aplicativo. Isso iniciará o processo de reimplementação do seu aplicativo com a configuração recém-alterada. Você terminou a alteração da configuração. Agora é possível prosseguir para testar seu aplicativo de ponta a ponta completo.

Etapa 4: Teste seu aplicativo

Está pronto para ver se ele funciona? Substituindo myappname pelo nome do host escolhido anteriormente para seu aplicativo do nginx, digite essa URL em um navegador:

http://myappname.mybluemix.net

Pronto! Teste seu aplicativo.


Recursos para download


Temas relacionados

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Cloud computing, Software livre
ArticleID=991241
ArticleTitle=Desenvolva um sensor de temperatura pronto para nuvem com o Arduino Uno e o IBM IoT Foundation, Parte 4: Implemente uma GUI de consulta
publish-date=12052014