Crea una aplicación que recopila datos del sensor

Sep 12, 2025

Cómo

[dieciséis]

Hoy en día, las plataformas asequibles para desarrollar productos interconectados están disfrutando de disponibilidad generalizada, y hemos visto un impulso para aumentar el soporte de JavaScript en IOT Technologies, con empresas poderosas como IBM, Google, Intel, Microsoft y Cisco abriendo API para sus productos. El resultado es un ecosistema ampliado de micro-controladores, los registradores de datos conectados a los servicios de la nube y las interfaces adaptables que analizan los datos en tiempo real, todos los cuales presentan nuevas oportunidades para diseñadores con habilidades web del lado del cliente.

Las 13 mejores aplicaciones para iPad para los diseñadores PRO

Teniendo eso en cuenta, el objetivo de este tutorial es diseñar y construir algo que no es solo 'limpio', sino que es útil en el mundo real: un producto (o servicio interconectado) que carga los datos meteorológicos de un sensor en un servidor web local y muestra estos datos en una interfaz de usuario adaptable en tiempo real. Este proyecto ilustra cómo podemos separarnos de la manipulación directa en diseño de la interfaz de usuario, y demuestra algunas formas en que los diseñadores pueden tomar sus técnicas de prototipos más allá de los servidores web y los diseños planos.

Echar un vistazo a la archivos fuente Para este tutorial .

Sensores y microcontroladores.

Para este tutorial utilizaremos el microcontrolador Arduino. Esta es una opción popular gracias a un precio barato, un fácil kit de desarrollo y un montón de soporte en línea. Para configurar su microcontrolador en su computadora, descargue el entorno de desarrollo (la opción IDE) aquí . El microcontrolador se conecta a su computadora con un cable USB que también lo alimenta. El código de Arduino se conoce como bocetos, que se escriben en el código basado en C ++ para analizar los datos que vienen de los sensores.

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4)

Como estamos diseñando una aplicación que lee los datos del tiempo, he usado el sensor de temperatura LM35. Esta es una opción buena y asequible, pero al igual que con los microcontroladores, hay mucho para elegir. Configure el sensor LM35, junto con cables de puente y tabla de presa según Estas instrucciones .

El microcontrolador funciona con un archivo de boceto que crea un feed de datos del sensor de temperatura LM35 directamente a su sistema de archivos local. Para configurar esto, primero debe declarar una variable para mantener los datos analógicos del sensor (una variable es una forma de nombrar y almacenar un valor para su uso posterior por el programa, en este caso de un sensor).

Declare una función de configuración () que se comunica con el puerto serie en su computadora portátil. Esto se llama cuando se inicia un boceto arduino, y grabará en la ventana de serie. El puerto serie se utiliza para la comunicación entre la Junta Arduino y su computadora portátil.

A continuación, debemos establecer la tasa de baudios: la velocidad a la que se transfiere la información. Queremos una tasa de 9600, lo que significa que el puerto serie es capaz de transferir un máximo de 9600 bits por segundo de la señal, que se origina en el sensor de temperatura LM35, que viaja a través del cable USB a su computadora portátil. Convierta primero los datos capturados del sensor RAW en formato de temperatura, luego desde enteros a texto a insertar en JSON y se mantienen en la memoria.

Finalmente, bucle la función anterior para que el sensor recaquen los datos de temperatura continuamente. El microcontrolador Arduino se ejecutará ininterrumpido en segundo plano, recopilando datos de temperatura en el puerto serie de su computadora portátil.

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection

Una API basada en la web

Una vez que la lectura de la temperatura se registra en la memoria, debe agregarse una marca de tiempo antes de insertarla en el formato JSON. Para comenzar, debemos establecer la ubicación donde residirá el archivo JSON, y abrirá ese archivo a intervalos cortos para agregar las lecturas.

Es posible lograr esto utilizando la tecnología avanzada del servidor web, pero esto está más allá del alcance de este artículo y nos llevaría a diferentes tangentes. Por el bien de la simplicidad, usaremos el procesamiento para analizar los datos del sensor, pero hay una gran cantidad de tecnologías de programación de servidores de servidor web robustas y próximos, que se pueden utilizar para adquirir los datos del sensor de la memoria del puerto serie en Cualquier servidor web o la nube ( mira aquí ).

El procesamiento utiliza un archivo de boceto para obtener datos enviados por Arduino escuchando los datos en el puerto serie y devolviendo una cadena para mantener las lecturas. También hace uso de una función de dibujo () que ejecuta continuamente las líneas de código contenidas dentro de su bloque, en este caso, tomando los valores del puerto serie, agregando una marca de tiempo y que los imprimen en un archivo de texto que termina en una estructura JSON similar. a ["18:05:53", 43.00].

Finalmente, terminamos con un sistema que incluye solo un sensor de temperatura, microcontrolador y servidor web. Este es un prototipo para un sistema de adquisición de datos más grande compuesto por redes de sensores y la nube, que representa un producto o servicio del mundo real.

Una interfaz adaptativa

En este punto, queremos armar una UI simple con un paquete de inicio de una sola página (SPA) y una herramienta basada en JS como reaccionar o angular. He elegido reaccionar porque hace que sea fácil describir lo que debe prestar el navegador, elimina mucho ruido al construir el DOM en el navegador, y une los datos de cualquier API muy rápido. Además, en lugar de volver a representar todo el DOM, solo actualiza los elementos de la UI que han cambiado, lo que es ideal para la creación de prototipos.

Para comenzar con su UI, primero instale el SPA con uno de los muchos paquetes de inicio disponibles en línea. Una muy conveniente es la placa de calderas de la aplicación web. Kit de reacción . Una vez que se haya familiarizado con la estructura de archivos, deberá configurar un nuevo componente que acceda a la fuente de JSON en el servidor web local o en un servicio de nube y procesa los datos para mostrar.

En REACT, SETSTATE es el método principal utilizado para activar las actualizaciones de la UI. Los cambios se activan por los manipuladores de eventos o las devoluciones de llamadas de llamada de la solicitud del servidor, y luego deben implementarse correctamente para leer el archivo JSON. Finalmente, definimos las lecturas variables para mantener los datos analizados, y la lista de lectores / y GT; Etiqueta en el método Render para representar el componente de la UI que sirve la visualización:

 loadpathsdata () {
  este.setstate ({data: data});
}

TOADINITIALSTATE () {
  Devolver {DATOS: {LECTURAS: []}};
}

componentwillmount () {
  esto.loadpathsdata ();
}

render () {
  regreso (
    & lt; div & gt;
      & lt; listingslist data = {este.state.data} / & gt;
    & lt; / DIV & GT;
  )
}

Defina el componente UI de ListingSlist para mantener las lecturas del archivo JSON creado anteriormente. Agregue una nueva clase (lista de lecturas) directamente sobre la definición de clase. Reacción utiliza el método Render para implementar la representación virtual de un componente DOM nativo (como el & lt; DIV / & GT; abajo) o cualquier otro componente definido. Como resultado, tenemos un componente de UI que muestra las lecturas JSON:

 Var ListingsList = React.Createclass ({
  Render: Función () {
    regreso (
      & lt; div & gt;
      
      & lt; / DIV & GT;
    )
  }
});

Combine las declaraciones dinámicas de CSS con las asignaciones de datos para diseñar las lecturas en el navegador.

Puede forzar: refrescarse en el nivel de componente o navegador a intervalos cortos. Esto se puede hacer utilizando la función de Fuerza de reacción más robusta (que le dice a reaccionar, debe volver a ejecutar Render () arriba al llamar a ForceUpdate), o implementarse en la representación de la plantilla JADE con una función de setinterval básica.

Al relanzar el SPA, todos los componentes vuelven a cargar las lecturas de temperatura en tiempo real, ya que los JS y CSS se combinan dinámicamente en una visualización de dispositivos cruzados. El resultado se muestra en la imagen de abajo.

The final interface shows the temperature readings from the sensor, and updates in real time

¿Que sigue?

Los conceptos básicos de prototipos de IOT ilustrados en este artículo se pueden construir para diseñar productos o servicios interconectados que realicen datos dinámicos útiles y utilizables en UIS Adaptive, ya sean atendidos en un dispositivo móvil, pantalla más pequeña o incluso una pantalla de TV interactiva. Las habilidades básicas de desarrollo web se pueden tomar más allá de los servidores web y las interfaces de pantalla plana a través de tecnologías web abiertas que ya estamos familiarizados.

Los profesionales de la web están empezando a explorar formas prácticas de trabajar con matrices de datos que se originan en sensores y luego tienen una interfaz de usuario diseñada alrededor de ellos. Estas exploraciones ofrecen nuevas formas de pensar sobre los datos y el diseño en productos interconectados, en los cuales CSS no se trata solo de los estilos, sino un vehículo a través del cual crear conexiones significativas entre los humanos y los datos. También hay mucho que experimentar con las nuevas y las próximas tecnologías basadas en CSS que pareja las declaraciones de CSS con elementos de datos para mejorar las experiencias digitales, incluidas las técnicas de representación del navegador.

Los datos están a nuestro alrededor, y tenemos una oportunidad única de usarlo para ver los ganchos invisibles, y escribirlos en CSS a través de JavaScript ... Estamos hablando de reducir la fricción y crear un punto de contacto sin problemas entre los humanos y cualquier producto digital. La adopción de JavaScript en las plataformas de IOT sugiere que CSS seguirá siendo una herramienta de estilo primaria de elección para clientes a base de JavaScript o navegadores web de todos los tamaños por un tiempo.

Este artículo apareció originalmente en revista neta emisión 289; cómpralo aquí !

Artículos relacionados:

El papel del diseño en Internet de las cosas.
¿Por qué deberías abrazar el pensamiento de diseño?
5 recursos esenciales de aprendizaje de Chatbot

Crea una aplicación que recopila datos del sensor

Sensores y microcontroladores.

Una API basada en la web

Una interfaz adaptativa

¿Que sigue?

Cómo - Artículos más populares

Comienza con WebVR

Procreate Tutorial: Cómo pintar como los maestros viejos

Cómo usar texturas en Photoshop

Mantenga el control de la versión perfecta con abstracto

Cómo pintar una escena tradicional de la aldea británica

Cómo mezclar el color de la sombra en la pintura

Crea una sensación de pintura en tu arte digital

Crea texturas tilables impresionantes en Blender

Categorías