Este tutorial está destinado a mostrarte cómo crear tu propia aplicación personal de Android que sea capaz de mostrar datos de MIT App Inventor en Ubidots.

Enviar horas, minutos y segundos a Ubidots puede no ser un caso de uso típico de IoT, pero sirve como una forma de entender cómo estas dos plataformas pueden trabajar juntas.

Requisitos

NOTA 1: El Paso 2 es muy útil si no tienes conocimientos o experiencia previos de Ubidots. Sin embargo, no se requieren conocimientos ni experiencia para completar con éxito este tutorial.

NOTA 2: El creador del video en el paso 3 nombró sus parámetros temperatura, humedad y flujo de aire, pero no estás tratando con tales parámetros en este tutorial. Nombramos solo un parámetro "tiempo" ya que ese es nuestro enfoque. En cuanto al dispositivo, puedes nombrarlo como desees, es decir, "contador de tiempo".

2. Hacer clic en el ícono "web" bajo "componentes" revelará las "propiedades" del componente.

3. En el cuadro de URL de las "propiedades" de la web, copia y pega la siguiente URL:

4. Reemplaza las palabras "your-device" con el nombre exacto de tu dispositivo que nombraste mientras seguías el video de YouTube anteriormente. Si lo has olvidado, vuelve a tu cuenta de Ubidots y se puede encontrar dentro de los detalles del dispositivo.

5. Reemplaza la palabra "TOKEN" (la última parte de la URL anterior) con tu token de Ubidots. ¿No puedes encontrar tu token? Consulta esta guía sencilla.

2. En la categoría "componentes", haz clic en el ícono de "reloj" para mostrar las "propiedades"

3. Asegúrate de que el "Timerinterval" esté configurado en 1000

4. Desde la categoría "interfaz de usuario" en la paleta, haz clic y arrastra el ícono de "botón" al centro de la pantalla.

5. Haz clic en el ícono del botón "Texto para Button1" en el medio de la pantalla, y aparecerán las "propiedades".

Consejo: aumentar un poco el tamaño de la fuente (20 es un tamaño de fuente decente)
6. En el cuadro etiquetado "Texto", nombra tu botón. Por ejemplo, nómbralo "Decir Hora".
7. Desde la categoría "interfaz de usuario" en la paleta, haz clic y arrastra el ícono de "etiqueta" al centro de la pantalla.

8. En tu pantalla central, haz clic en el ícono de etiqueta "Texto para Label1" y nuevamente aparecerán las "propiedades" a la derecha.

Consejo: aumentar un poco el tamaño de la fuente (20 es un tamaño de fuente decente)
9. Marca la casilla "FontBold"
10. Haz que esta etiqueta sea oculta (bajo "visible").

¡Ahora estamos listos para construir la aplicación de marca de tiempo!
​

3. Haz clic y arrastra el primer bloque de construcción (cuando, Button1, clic, hacer).

4. Bajo "Bloques" haz clic en Label1, y selecciona el bloque de construcción que dice: establecer, Label1, Texto, a, y conéctalo al bloque de construcción anterior así:

5. Bajo "Bloques", haz clic en "Texto", y elige el segundo bloque de construcción ("Unir"), y conéctalo al bloque de construcción anterior:

6. Haz clic en el ícono "Clock1". Necesitamos tres bloques de construcción de aquí: llamar, Clock1, hora, instante... llamar, Clock1, minuto, instante... y llamar, Clock1, segundo, instante.

7. A continuación, haz clic en el símbolo azul ubicado en el bloque de construcción rosa que dice "Unir."

8. Necesitamos que este bloque tenga 6 nodos en lugar de solo 2. Para hacerlo, haz clic y arrastra el único mini bloque de construcción que dice "cadena" y colócalo debajo de los otros mini bloques de construcción.

9. A continuación, conecta estos tres bloques de construcción de reloj al bloque de construcción "Unir", dejando un nodo vacío entre cada bloque de construcción de reloj:

10. Reemplaza esos dos nodos vacíos con el primer bloque de construcción de "Texto":

11. A continuación, haz clic en "Variables", selecciona el bloque de construcción que dice... inicializar, global, nombre, a... y cambia el nombre a lo que sea apropiado. Llamémoslo "timenow"

12. Bajo "Texto", toma el primer bloque de construcción nuevamente, y conéctalo al anterior. En él, escribe "texto"

13. Bajo "Variables", selecciona el segundo bloque de construcción (el que dice "obtener") y conéctalo al bloque de construcción de reloj "llamar, Clock1, hour, instant"

14. En su menú desplegable, selecciona "global timenow" y luego conecta ese bloque a los otros 2 bloques de construcción de reloj. Haz clic derecho para duplicar y arrastrar:

15. Bajo "Variables", selecciona el tercer bloque de construcción (el que dice "establecer... a") y conéctalo justo debajo del primer bloque de construcción (cuando, Button1, clic, hacer) y en su menú desplegable selecciona "global timenow":

16. Haz clic en el ícono "Clock1", selecciona el bloque de construcción que dice... llamar, Clock1, ahora... y conéctalo al bloque de construcción que acabas de colocar:

17. Haz clic en "Label1", selecciona el bloque de construcción que dice... establecer, Label1, visible, a... y pégalo aquí:

18. Finalmente, selecciona el primer bloque de construcción bajo "Lógica" (el que dice "verdadero") y conéctalo al bloque de construcción anterior que acabas de colocar:

Paso 6: Construir el código que permite la conectividad a Ubidots

¡Felicidades! Has construido la base para decir la hora. Pero, antes de continuar, agreguemos los componentes necesarios a esta base para asegurar la conectividad a Ubidots. El video de YouTube para comenzar este tutorial mostró cómo completar la página de solicitud HTTP, utilizando la página de documentación de Ubidots. Lo que se hizo aquí fue preparar la nube de Ubidots para recibir una solicitud HTTP. Ahora, para recibir una solicitud HTTP, Ubidots necesita un dispositivo (como este convertidor de aplicación MIT) para enviar una.

El formato para enviar solicitudes HTTP está en una sintaxis llamada "diccionario JSON". Estamos enviando una solicitud para 3 variables (horas, minutos, segundos), la sintaxis del diccionario JSON para estas tres variables es la siguiente:

Una vez que hayas agregado los bloques de construcción necesarios para enviar la solicitud HTTP, podrás ver cómo se implementa la sintaxis del diccionario JSON anterior en nuestra base.

Construyendo la Aplicación

2. Haz clic en "Listas", y haz doble clic en el bloque de construcción llamado "Hacer una lista." Conéctalos como se describe a continuación, asegurándote de que el segundo bloque tenga 2 nodos en lugar de solo 1:

3. A continuación, haz clic en "Texto", y haz doble clic en el primer bloque de construcción, y escribe uno de ellos "Content-Type" y el otro "application/json". Conéctalos a los 2 nodos del bloque de construcción "hacer una lista":

4. Haz clic en el ícono "web", y selecciona el bloque de construcción llamado... llamar, Web1, PostText.... y colócalo en la parte inferior de nuestra base.

5. Usando bloques de construcción similares a los que ya has utilizado, el resto de esta base es la siguiente. Asegúrate de escribir los bloques de texto de segundos, minutos y horas exactamente como los ves, para que coincidan exactamente con la sintaxis del diccionario JSON.

Ahora, en lugar de un solo valor numérico para el tiempo, necesitamos asignar algo de estructura para que sea fácilmente legible. Debemos agregar dos puntos para separar las horas, minutos y segundos, y también debemos asegurarnos de que cada uno de estos segmentos--horas, minutos y segundos--siempre tenga dos dígitos. Por ejemplo, si son 5 minutos y 7 segundos después del mediodía, 12:05:07 se ve más agradable a la vista que 12557.

Paso 7: Asignar estructura a tu visualización

NOTA: Moví el bloque de construcción "establecer, label1, visible, a" y su bloque adjunto que dice "verdadero" hacia la parte inferior de la base solo para que se vea un poco más ordenado en la parte superior. Aquí hay dos capturas de pantalla para comparar:

2. Bajo "Bloques" haz clic en "Control", y toma el bloque de construcción que dice si, entonces, de lo contrario, y colócalo encima del primer dos puntos.

3. Bajo "Bloques" haz clic en "Listas" luego elige el bloque de construcción que es está en la lista? cosa, lista y conéctalo al nodo "si" del bloque de construcción que colocaste en el paso anterior.

4. Conecta el bloque de construcción de reloj....llamar, Clock1, hour, instant.... junto con su bloque adjunto "obtener global timenow" al nodo "cosa" del bloque de construcción que colocaste en el paso anterior.

5. Bajo "Bloques" haz clic en "Listas" y elige el bloque de construcción que dice "hacer una lista." Este bloque de construcción necesita tener 10 nodos en lugar de 2, así que usa el símbolo azul para agregar más nodos. Llena cada nodo con el primer bloque de construcción de la categoría "Matemáticas", y numera estos bloques de construcción del 0 al 9:

6. Conecta estos 10 nodos al bloque de construcción "está en la lista? cosa" en el nodo donde dice "lista

7. Bajo "Bloques" haz clic en "Texto" y elige el bloque de construcción que dice "Unir" y conéctalo al nodo "entonces" del bloque "si, entonces, de lo contrario":

8. Bajo "Bloques" haz clic en "Texto" y elige el primer bloque de construcción, conéctalo al primer nodo del bloque "Unir", y escribe un "0" (cero) en él:

9. Toma el bloque de construcción de reloj "llamar, Clock1, hour, instant" junto con su bloque adjunto "obtener global timenow" (haz clic derecho y duplica si es necesario) y conéctalo al otro nodo del bloque "Unir" como se describe a continuación:

10. Toma el bloque de construcción de reloj "llamar, Clock1, hour, instant" junto con su bloque adjunto "obtener global timenow" y conéctalo al nodo "de lo contrario" del bloque "si, entonces, de lo contrario".

11. Los pasos 1-10 deben repetirse exactamente de la misma manera, esta vez reemplazando el bloque "llamar, clock1, hour, instant" con el bloque "llamar, clock1, minutes, instant".

12. Los pasos 1-10 deben repetirse exactamente de la misma manera, esta vez reemplazando el bloque "llamar, clock1, hour, instant" con el bloque "llamar, clock1, second, instant". Recomiendo simplemente hacer clic derecho en el bloque "si, entonces, de lo contrario", duplicarlo y simplemente reemplazar los dos bloques de reloj mencionados. Luego conéctalo al nodo que viene después del segundo dos puntos después de duplicar y reemplazar los bloques de reloj con "llamar, Clock1, second, instant" en lugar de "llamar, Clock1, hour, instant".

y conectándolo después del segundo dos puntos:

Nuestro código está oficialmente terminado y tienes los bloques de construcción completos para tu aplicación de marca de tiempo.
​​
Paso 8: Crea tu aplicación y envía datos a Ubidots

2. De vuelta en el MIT App Inventor, haz clic en "Construir" en la parte superior de la página, y selecciona la primera aplicación del menú desplegable.

3. Aparecerá un código de barras similar al de abajo:

4. En la aplicación de tu teléfono, haz clic en "escanear código QR" y toma una foto del código de barras. Tu teléfono debería automáticamente comenzar a instalar otra aplicación, que es tu aplicación que has creado dentro de este tutorial.

Algunos teléfonos Android te presentan un pequeño problema como este:

5. No hay razón para preocuparse. Haz clic en "configuración", marca la casilla llamada "Fuentes desconocidas" y "Aceptar".

¡Tu teléfono ahora está instalando tu aplicación! Nuestra aplicación se llama "reloj" ya que esta es la etiqueta del dispositivo utilizada al completar la página de solicitud HTTP.

8. Una vez instalado, haz clic en "ABRIR". Tu nueva aplicación se abrirá, y tu botón aparecerá en la pantalla:

(Este teléfono está configurado en hora militar, pero las horas vienen primero, luego los minutos, luego los segundos):

Como puedes ver en este ejemplo, la hora mostrada es 18:23:05, o 18 horas, 23 minutos y 5 segundos (6:23 PM y 5 segundos). Si vas a tu página de Ubidots bajo la pestaña "Dispositivos", verás que cada vez que presiones el botón en tu aplicación, las variables en Ubidots (horas, minutos, segundos) se actualizan inmediatamente.

La mente creativa solo puede llegar tan lejos sin la ayuda del conocimiento técnico, pero el inventor de aplicaciones amplía los límites de lo que podemos lograr. Decir la hora es solo un ejemplo simple y pequeño de lo que puedes hacer con el inventor de aplicaciones, pero cuando se combina con Ubidots, uno es capaz de un desarrollo rápido.

Hay un cliché que dice que "la tecnología hace nuestras vidas más fáciles", y esto también es cierto con el Internet de las Cosas. Solo que la diferencia es que IoT hace la vida de un individuo más fácil. El IoT permite a los usuarios explorar su propio nicho y mejorar sus propios entornos. Para comenzar tu innovación y desarrollo de IoT, crea una cuenta gratuita de Ubidots hoy y comienza tu mejora.