Criar um aplicativo que coleta dados do sensor

Sep 12, 2025

Como

Hoje, as plataformas acessíveis para o desenvolvimento de produtos interconectados estão desfrutando de disponibilidade generalizada, e vimos um impulso para o aumento do suporte de JavaScript em tecnologias IOT, com empresas poderosas como a IBM, Google, Intel, Microsoft e Cisco abrindo as APIs para seus produtos. O resultado é um ecossistema expandido de micro-controladores, loggers de dados conectados a serviços de nuvem e interfaces adaptáveis que analisam dados em tempo real, todos os quais apresentam novas oportunidades para designers com habilidades da Web do lado do cliente.

Os 13 melhores aplicativos iPad para projetistas pro

Com isso em mente, o objetivo deste tutorial é projetar e construir algo que não é apenas "limpo", mas é útil no mundo real: um produto interconectado (ou serviço) que carrega dados meteorológicos em um servidor da Web local e exibe esses dados em uma interface de usuário adaptativa em tempo real. Este projeto ilustra como podemos nos separar da manipulação direta no projeto da interface do usuário e demonstra algumas maneiras pelas quais os designers podem levar suas técnicas de prototipagem além dos servidores da Web e projetos lisos.

Dê uma olhada no Arquivos Fonte Para este tutorial .

Sensores e microcontroladores

Para este tutorial, usaremos o microcontrolador Arduino. Esta é uma escolha popular graças a um preço barato, fácil kit de desenvolvimento e muito apoio on-line. Para configurar seu microcontrolador no seu computador, baixe o ambiente de desenvolvimento (a opção IDE) aqui . O microcontrolador conecta ao seu computador com um cabo USB que também aciona isso. O código Arduino é conhecido como esboços, que são escritos no código baseado em C ++ para analisar os dados provenientes de sensores.

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4) — Nosso aplicativo de amostra é composto por um sensor (1), microcontrolador (2), API da Web (3) e uma UI adaptativa (4)

Como estamos projetando um aplicativo que lê os dados meteorológicos, usei o sensor de temperatura LM35. Esta é uma opção boa e acessível, mas assim como com microcontroladores há muita coisa para escolher. Configurar o sensor LM35, juntamente com fios de jumper e tábua de pão conforme estas instruções .

O microcontrolador funciona com um arquivo de esboço que cria um feed de dados do sensor de temperatura LM35 diretamente no sistema de arquivos local. Para configurar isso, primeiro você precisa declarar uma variável para manter dados analógicos do sensor (uma variável é uma maneira de nomear e armazenar um valor para uso posterior pelo programa - nesse caso, dados de um sensor).

Declare uma função de configuração () que se comunica com a porta serial em seu laptop. Isso é chamado quando um esboço Arduino é iniciado, e ele registrará para a janela serial. A porta serial é usada para comunicação entre a placa Arduino e o seu laptop.

Em seguida, precisamos definir a taxa de transmissão - a taxa em que a informação é transferida. Queremos uma taxa de 9600, o que significa que a porta serial é capaz de transferir um máximo de 9600 bits por segundo do sinal, originando o sensor de temperatura LM35, viajando pelo cabo USB no seu laptop. Converta os dados capturados do sensor RAW primeiro no formato de temperatura e, em seguida, do inteiro ao texto a ser inserido em JSON e mantido na memória.

Finalmente, laço a função acima para que o sensor coleta dados de temperatura continuamente. O microcontrolador Arduino será ininterrupto em segundo plano, coletando dados de temperatura na porta serial do seu laptop.

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection — Uma configuração típica do Arduino, consistindo de cabos, fios, pinos, sensores e uma conexão de laptop USB

Uma API baseada na Web

Uma vez que a leitura de temperatura for gravada na memória, um registro de data e hora precisará ser adicionado antes de inseri-lo no formato JSON. Para começar, precisamos estabelecer o local onde o arquivo JSON reside e abrir esse arquivo em intervalos curtos para anexar as leituras.

É possível conseguir isso usando a tecnologia avançada do Web Server, mas isso está além do escopo deste artigo e nos levaria para diferentes tangentes. Por uma questão de simplicidade, usaremos o processamento para analisar os dados do sensor, mas há muitas tecnologias de programação de servidor da Web baseadas em JS, robusta, que podem ser usadas para adquirir os dados do sensor da memória da porta serial em qualquer servidor da Web ou a nuvem ( Veja aqui ).

O processamento usa um arquivo de esboço para obter dados enviados pelo Arduino ouvindo dados na porta serial e retornando uma string para segurar as leituras. Ele também faz uso de uma função Draw (), que executa continuamente as linhas de código contidas dentro de seu bloco - neste caso, levando os valores da porta serial, adicionando um registro de data e hora e imprimi-los em um arquivo de texto que termine em uma estrutura JSON similar para ["18:05:53", 43,00].

Eventualmente, acabamos com um sistema que inclui apenas um sensor de temperatura, microcontrolador e servidor da Web. Este é um protótipo para um sistema maior de aquisição de dados composto por redes sensores e a nuvem, representando um produto ou serviço do mundo real.

Uma interface adaptativa

Neste ponto, queremos montar uma simples interface do usuário com um pacote de inicialização de uma página única (SPA) e uma ferramenta baseada em JS, como reagir ou angular. Eu escolhi reagir porque torna mais fácil descrever o que o navegador deve render, remove um monte de ruído ao criar o DOM no navegador e vincula dados de qualquer API muito rápido. Além disso, em vez de re-renderizar todo o DOM, ele só atualiza os elementos da interface do usuário que foram alterados, o que é ótimo para prototipagem.

Para começar sua interface do usuário, primeiro instale o spa usando um dos muitos pacotes de partida disponíveis on-line. Um muito conveniente é a rede de boiler da Web App Reagir kit . Depois de se familiarizar com a estrutura do arquivo, você precisará configurar um novo componente que acessa o feed JSON no servidor da Web local ou em um serviço de nuvem e processa os dados para exibição.

Em reagir, a Setstate é o método principal usado para acionar as atualizações da interface do usuário. As alterações são acionadas por manipuladores de eventos ou retornos de chamada de solicitação do servidor e, em seguida, precisam ser implementadas corretamente para ler o arquivo JSON. Finalmente, definimos as leituras variáveis para realizar os dados analisados e o & lt; LeiturasList / & gt; tag no método Render para representar o componente da interface do usuário que serve a visualização:

 loadpathsdata () {
  este.setTate ({Dados: Data});
}

loadinitialstate () {
  return {Dados: {leituras: []}};
}

componentewillmount () {
  this.loadpathsdata ();
}

render () {
  Retorna (
    & lt; div & gt;
      & lt; leituraList dados = {this.state.data} / & gt;
    & lt; / div & gt;
  );
}

Defina o componente LeiturasList UI para manter as leituras do arquivo JSON anteriormente criado. Adicione uma nova classe (lista de leituras) diretamente acima da definição de classe. Reagir usa o método Render para implementar a representação virtual de um componente Dom nativo (como o & lt; div / & gt; abaixo) ou qualquer outro componente definido. Como resultado, temos um componente UI que exibe as leituras JSON:

 Var LeiturasList = react.createClass ({
  Render: Função () {
    Retorna (
      & lt; div & gt;
      
      & lt; / div & gt;
    )
  }
});

Combine declarações de CSS dinâmicas com mapeamentos de dados para estilizar as leituras no navegador.

Você pode forçar-se atualizar no nível do componente ou do navegador em intervalos curtos. Isso pode ser feito usando a função mais robusta do ForceUpDate do ForceUpDate (que contenha que ele tenha necessidade de executar renderização () acima, ligando para o ForceUpdate) ou implementada na renderização do modelo Jade com uma função básica do SetInterval.

Ao relançar o spa, todos os componentes recarrega as leituras de temperatura em tempo real, pois o JS e CSS são combinados dinamicamente em uma visualização entre dispositivos cruzados. O resultado é mostrado na imagem abaixo.

The final interface shows the temperature readings from the sensor, and updates in real time — A interface final mostra as leituras de temperatura do sensor e atualizações em tempo real

Qual é o próximo?

Os conceitos básicos de prototipagem IOT ilustrados neste artigo podem ser construídos, a fim de projetar produtos ou serviços interconectados que tornem dados dinâmicos úteis e utilizáveis na UIS adaptável, sejam estes servidos em um dispositivo móvel, exibição menor ou até mesmo uma tela de TV interativa. As habilidades básicas de desenvolvimento da Web podem ser tiradas além dos servidores da Web e interfaces de tela plana através de tecnologias abertas da Web, já estamos familiarizados.

Os profissionais da Web estão começando a explorar maneiras práticas de trabalhar com matrizes de dados que se originam em sensores e, em seguida, possuem uma interface de usuário projetada em torno delas. Essas explorações oferecem novas formas de pensar em dados e projetos em produtos interconectados, nos quais o CSS não é apenas sobre estilos, mas um veículo através do qual criar conexões significativas entre humanos e dados. Há também muito a experimentar em novas e futuras tecnologias baseadas em CSS que acumula as declarações CSS com elementos de dados para melhorar as experiências digitais, incluindo técnicas de renderização do navegador.

Os dados estão ao nosso redor, e temos uma oportunidade única de usá-lo para ver os ganchos invisíveis e escrever para ele no CSS através de JavaScript ... Estamos falando sobre a fricção diminuindo e criando um ponto de contato sem costura entre os humanos e qualquer produto digital. A adoção de JavaScript em plataformas IOT sugere que o CSS ainda será uma ferramenta de estilo primário de escolha para clientes baseados em JavaScript ou navegadores da Web de todos os tamanhos por um tempo.

Este artigo originalmente apareceu em Revista Net. Edição 289; compre aqui !

Artigos relacionados:

O papel do desenho na Internet das coisas
Por que você deve abraçar o pensamento do design
5 recursos essenciais de aprendizagem de chatbot

Criar um aplicativo que coleta dados do sensor

Sensores e microcontroladores

Uma API baseada na Web

Uma interface adaptativa

Qual é o próximo?

Como - Artigos mais populares

Retrato Fotografia: Como tomar retratos perfeitos

Como Comprimir Imagens: Um Guia do Web Designer

Um guia para a visão de nuvem do Google

Use a bolsa de ferramentas do marmoset para apresentar modelos em VR

Designer de afinidade: Como usar grades

15 Dicas de retrato de fantasia

Como desenhar uma paisagem com pastéis

O guia Pro para criar texturas 3D

Categorias