Introducción a appinventor2.7. En la ventana de diálogo colocamos el nombre: Pitagoras, luego damos clic izquierdo en el botón Aceptar. Figura 4. Creación de nuevo proyecto. 8

Interfaces y Periféricos. Guía 7. 1

Introducción a appinventor2.

Desarrollar aplicaciones para dispositivos móviles Android por medio de AppInventor2.

Conocer el entorno de desarrollo de AppInventor2.

Utilizar AppInventor2 para desarrollar una aplicación Android.

1 Computadora con sistema operativo Linux o Windows y con acceso a Internet.

1 Teléfono móvil o tablet con sistema operativo Android (propiedad del estudiante).

1 Cable USB (tipo A hacia tipo micro USB).

1 Access Point (1 dispositivo para todo el laboratorio).

1 Microcontrolador Photon de Particle.

1 tarjeta I/O.

1 Breadboard.

1 Pinza punta plana.

1 Cortadora (pinza de corte diagonal).

10 jumpers o cable UTP.

MIT App Inventor es un entorno de programación visual intuitivo que permite a todos,

incluso a los niños, crear aplicaciones totalmente funcionales para teléfonos inteligentes y

tabletas. Se puede desarrollar una primera aplicación, simple en funcionamiento en menos

de 30 minutos. La herramienta está basada en bloques lo que facilita la creación de

aplicaciones complejas y de alto impacto en mucho menos tiempo que los entornos de

programación tradicionales. El proyecto MIT App Inventor busca democratizar el

desarrollo de software al permitir que todas las personas, especialmente los jóvenes, pasen

del consumo de tecnología a la creación de tecnología.

Un pequeño equipo de personas y estudiantes de CSAIL, dirigido por el profesor Hal

Abelson, forma el núcleo de un movimiento internacional de inventores. Además de liderar

la divulgación educativa entorno a MIT App Inventor y realizar investigaciones sobre sus

impactos, este equipo central mantiene el entorno de desarrollo de aplicaciones en línea

gratuito que sirve a más de 6 millones de usuarios registrados.

Objetivos Específicos.

Materiales y equipos.

Facultad: Ingeniería

Escuela: Electrónica

Asignatura: Interfaces y Periféricos (IYP111).

Lugar de Ejecución: Microprocesadores (3.23).

Introducción Teórica.

Objetivo general.

2 Interfaces y Periféricos. Guía 7.

Los programas de codificación basados en bloques inspiran el empoderamiento intelectual

y creativo. MIT App Inventor va más allá de esto para proporcionar un poder real para que

los usuarios, logren un impacto social de valor incalculable para sus comunidades.

Figura 1. Triangulo rectángulo con el teorema de Pitágoras.

Parte I: Desarrollo de aplicación que calcula la hipotenusa de triangulo rectángulo. 1. Encienda la computadora.

2. Cuando cargue el sistema operativo utilice las siguientes credenciales:

Usuario: usuario0

Contraseña: usuario

3. Abra el navegador (de preferencia Mozilla Firefox o Google Chrome).

4. Ingrese a la dirección: http://ai2.appinventor.mit.edu

5. Deberá ingresar con sus credenciales de una cuenta personal de gmail, con lo cual se desplegará

la ventana de la figura 2. Sino posee cuenta entonces cree una.

Figura 2. Entorno de trabajo de MIT App Inventor 2 Beta.

6. Se procederá a crear el proyecto, para ello dé clic izquierdo en: Proyectos / Comenzar un

proyecto nuevo...

Figura 3. Entorno de trabajo de MIT App Inventor 2 Beta.

Procedimiento.


7. En la ventana de diálogo colocamos el nombre: Pitagoras, luego damos clic izquierdo en el

botón Aceptar.

Figura 4. Creación de nuevo proyecto.

8. Se desplegará la ventana de la figura 5.

En la región izquierda, Paleta están los controles (Botones, imágenes, etiquetas,...) que

podemos agregar a la pantalla de nuestro móvil.

En la región central (Visor) aparece Screen1 es la pantalla de nuestro móvil y el diseño de

la aplicación en desarrollo.

En la región derecha aparecen los Componentes que forman parte de nuestra aplicación y

más a la derecha aparecen las Propiedades de cada componente seleccionado.

Figura 5. Ventana de diseño del proyecto.

9. Desde la paleta, arrastre los componentes a la pantalla Screen1 de tal manera que se vean como

en la figura 5.

Una Imagen (Imagen1).

Tres Etiquetas (Etiqueta1, Etiqueta2 y Etiqueta3), texto no editable por el usuario de la

aplicación.

Dos Campos de texto (CampoDeTexto1 y CampoDeTexto2).

Un Botón (Botón1).

12



10. Modifique las propiedades de los componentes en la pantalla Screen1 de acuerdo a la tabla 1.

Componente Propiedad Valor Ejemplo

CampoDeTexto1

– TextBox1

Tamaño de letra 20

Ancho Ajustar al contenedor

Texto

Solo Números Marcado

Posición del texto Centro

Etiqueta1 – Label1

Tamaño de letra 20

Texto Cateto a=



Tamaño de letra 20

Texto Cateto b=



Tamaño de letra 20

Texto Hipotenusa c=


CampoDeTexto2

– TextBox2

Tamaño de letra 20


Texto

Solo Números Marcado


Imagen1

Alto Ajustar al contenedor


Foto Busque la imagen Proporcionada

Botón1

Tamaño de letra 20


Texto Calcular


Screen1

Título Pitágoras

Orientación de la pantalla Vertical

DispHorizontal Centro

DispVertical Centro

Tabla 1. Edición de las propiedades de los componentes en la aplicación a desarrollar.


11. La disposición visual debería observarse como en la figura 7.


12. Dé clic izquierdo en Proyecto / Guardar proyecto, para guardar los cambios que vayas

realizando...

Figura 8. Guardando el avance del proyecto.

13. Seleccione el modo Bloques (Ver figura 5).

Para agregar controles pulsamos Diseñador.

Para dar funcionalidad a los controles pulsamos Bloques (Código que ejecutará la

aplicación).

14. En la parte izquierda tenemos los Bloques para poner códigos y los controles que hemos puesto

en la pantalla Screen1, ver figura 9.

15. Las variables que vayamos a utilizar deben declararse previamente. Se utilizarán 3 variables

numéricas: cateto (a), cateto (b), hipotenusa (c). Seleccione el bloque Built-in >> Variables

>> Inicializar global nombre como.

16. Cambie la palabra nombre por la letra a. Repita el procedimiento anterior para crear las

variables b y c.

Nota:

Se pueden utilizar las funciones copiar y pegar bloques (Ctrl-C y Ctrl V) y luego modificar los

valores.


Figura 9. Selección de Bloques >> Variables.

17. Seleccione: Built-in >> Matemáticas >> . Acerque el elemento cero a la derecha del

bloque de inicialización global de a.

18. Repita el procedimiento dos veces más para las variables b y c. El resultado debería observarse

como en la figura 10.

Figura 10. Inicializando variables en 0.

Función del botón 1: cuando se dé clic en el Botón 1, se realizará el procedimiento del teorema de

Pitágoras.

19. Seleccione: Screen1 >> Botón1 >> cuando Botón1.clic.

20. Seleccione: Built-in >> Variables >> poner a. Agréguelo dentro de la región Botón1.clic,

adicionalmente en el espacio con una flecha hacia abajo seleccione global a.

21. Repita el procedimiento dos veces más para las variables b y c. El resultado debería observarse

como en la figura 11.

Figura 11. Asignación de valores cuando se dé el evento clic.

22. Seleccione: Screen1 >> CampoDeTexto1 >> CampoDeTexto1.Texto y adiciónelo a la parte

derecha poner global a a.

23. Repita el procedimiento anterior con global b y CampoDeTexto2 su resultado debería ser

similar al de la figura 12.

24. De Built-in >> Matemáticas, agregamos cuadrado (^), suma, raíz cuadrada y .


Figura 12. Asignación de valores cuando se dé el evento clic.

25. Cambie al valor a 2.

26. Seleccione: Built-in >> Variables >> tomar, asignamos la variable global a.

27. Unimos los bloques cuadrado (^), tomar global a y 2, tal como se muestra en la figura 13.

Figura 13. Asignación de operaciones.

28. Copie y pegue todo el bloque derecho de la figura 13. Luego modifique la variable a global b.

29. Unimos con suma ambos procesos. Ver figura 14.


30. Aplicamos la operación raíz cuadrada, uniendo los bloques de la figura 14 y los agregamos a

la derecha de poner global c a. El resultado actual debería verse como en la figura 15.


31. Agregamos: Screen1 >> Etiqueta3 >> poner Etiqueta3.Texto como.

32. Agregamos: Built-in >> Texto >> Unir.

33. Unimos los bloques de los dos puntos anteriores y los colocamos debajo de poner global c a.

34. Agregamos: Built-in >> Texto >> .

35. Dentro de las comillas dobles agregamos el texto: Hipotenusa c =.

36. Seleccione: Built-in >> Variables >> tomar, asignamos la variable global c.

37. Agregamos los bloques a Unir el resultado debería verse como en la figura 16.



Parte II: Simulación del funcionamiento (esto significa virtualizar una segunda

computadora = móvil). 38. Iniciar aiStarter en la PC. Se necesita previamente haber instalado el simulador.

Figura 17. Iniciando el emulador.

39. Dentro de App Inventor 2 (Navegador web), presione el menú Conectar >> Emulador.


40. Se iniciará el emulador, solicitando la actualización del móvil.

41. Se solicitará en un cuadro dialogo la actualización de la aplicación MIT App Inventor 2

Companion.


42. Inicie la aplicación MIT App Inventor 2 Companion dentro del móvil simulado.

Parte III: Verificando el funcionamiento en un dispositivo móvil. Primera forma de proceder a instalar la aplicación en el móvil:

43. La primera de ellas es correr un archivo con extensión apk en el celular, para lo cual dé clic

izquierdo en Build >> App (sabe .apk to my computer), ver figura 20.


Figura 20. Generando archivo apk.

44. Tardará unos minutos en generar el archivo, podrá seguir el progreso por medio de barras de

desempeño, ver figura 21.

Figura 21. Generando archivo apk.

45. Guarde el archivo en una ubicación de su elección.

46. Transfiera el archivo apk a su teléfono móvil.

47. Con el explorador de archivos de su teléfono móvil, ejecute el archivo apk transferido a su

celular.

48. Ejecute la aplicación instalada.

Segunda forma de proceder a instalar la aplicación en el móvil:

49. Desde PlayStore de Google, instale la aplicación MIT AI2 Companion.

Figura 22. Instalando MIT AI2 Companion.

50. Dentro de App Inventor 2 (Navegador web), dé clic en Generar >> App (generar código QR

para el archivo .apk).


Figura 23. Generando archivo instalador.

51. Al igual que en el otro proceso se tardará unos minutos en generar el instalador.

52. Se generará un código QR, que debe ser leído desde la aplicación MIT AI2 Companion,

seleccione en la aplicación la opción scan QR code y coloque la cámara del celular frente a la

computadora.

53. Una vez leído el código generará una dirección web con la cual acceder al archivo creado,

presione en la aplicación del celular la opción connect with code. Procederá a instalar la

aplicación en el móvil via Wifi.

(a) (b)

Figura 24. Generando archivo instalador, (a) código QR en la PC

(b) Aplicación MIT AI2 Companion en el móvil.

Parte IV: Emulación en el móvil. 54. Emular el funcionamiento de la aplicación en tú móvil mediante WiFi y la aplicación MIT AI2

Companion App.

55. Conecta tu móvil a la misma red WiFi que tenga la PC dónde creaste la aplicación.

56. Instala en tu móvil MIT AI2 Companion: http://appinventor.mit.edu/explore/ai2/setup-device-

wifi

57. Inicia el programa MIT AI2 Companion que has instalado en tu móvil.

58. En la computadora, presiona el menú Conectar >> AI Companion.

59. Se desplegará un código QR y un código alfanumérico.


60. En tu móvil se cargará la aplicación sin instalar.

61. A medida que se modifique el código en la PC se modificará el comportamiento en la

aplicación dentro de tu celular.

Figura 25. Encontrando funciones.

Ejercicios matemáticos: Ejercicio 1: Modifique el ejemplo, para calcular cualquiera de los catetos o la hipotenusa.

Figura 26. Código de bloques para el ejercicio 1.


Figura 27. Visualización de la aplicación para el ejercicio 1.

Ejercicio 2: Elaborar una aplicación para el cálculo del volumen de un cilindro.

Figura 28. Expresión para calcular el volumen de un cilindro.

62. Apague la computadora, incluyendo el monitor.

63. Deje en orden su puesto de trabajo.

Parte V: Programa de lectura y escritura de pines digitales en un Photon. 64. Elabore la conexión del dispositivo IoT de acuerdo al siguiente esquema.

Figura 29. Circuito de ejemplo.


65. Ingrese al WEB IDE de Particle y programe el dispositivo IoT con el código mostrado a

continuación:

int i=0;

int ix=0;

int iy=1;

int conteo=15;

int vel=1000;

int Valorbit=0;

unsigned char temp=0;

int entradas[4] = {D0,D1,D2,D3};

int salidas[4] = {D4,D5,D6,D7};

void setup() {

for (ix=0;ix<4;ix++){

pinMode(entradas[ix],INPUT);

pinMode(salidas[ix],OUTPUT);

digitalWrite(salidas[ix],LOW);

}

Particle.variable("i", &i, INT); //Publica el valor decimal de las 4 entradas

Particle.variable("conteo", &conteo, INT);

Particle.function("Asc_Desc", Cambiar_conteo);

}

void loop() {

temp=conteo;

for(ix=0;ix<8;ix++){

Valorbit=temp%2;

temp=temp/2;

if(Valorbit==0){

digitalWrite(salidas[ix],LOW);

}

else{

digitalWrite(salidas[ix],HIGH);

}

}

delay(vel);

if(iy==1){

conteo++;

if (conteo>255){

conteo=15;

}

}

else{

conteo--;

if (conteo<16){

conteo=255;

}

}

i=digitalRead(entradas[0]);

i=i+(2*digitalRead(entradas[1]));



}

int Cambiar_conteo(String command){

if(command == "Ascendente"){

iy = 1;

return 1;

}

else if(command == "Descendente"){

iy = 0;

return 2;


}

else {

return -1;

}

}

Código 1. Archivo commappinv.ino.

Sintaxis del formato de petición:

https://api.particle.io/v1/devices/device_ID/variable?access_token=number_access_token

Ejemplos de solicitud que generan la imagen de la figura 30:

https://api.particle.io/v1/devices/0123456789abcdef/i?access_token=123412341234

Figura 30. Respuesta del navegador web ante una solicitud.

La misma solicitud haciendo uso de html y java se muestra como, este detalle es importante

puesto que se realizará la aplicación móvil con esta sintaxis:

requestURL = "https://api.particle.io/v1/devices/" + deviceID + "/" + i +

"/?access_token=" + accessToken;

$.getJSON(requestURL, function(json) {

if(json.result == "1")

{

v1= "<br>Ventana 1 activada"

}

else

{

v1 = " ";

}

});

Código 2. Sección de una archivo html + java.

Los siguientes bloques realizan la función de hacer una petición POST cada vez que se presiona

el Boton1 (Button1). Lo que implica un envío de datos de la nube al dispositivo IoT.


Figura 31. Bloques para formar eventos POST.

En App Inventor 2 algunas funciones matemáticas están un poco escondidas, el redondeo,

logaritmo y e^, están en Built-in >> Matemáticas >> neg:


El acos, asen, atan... se encuentran pulsando en la flecha del bloque (Built-in >> Matemáticas

>> cos).


El separador decimal, en algunos programas a veces es el punto y otras veces la coma (ponga

cuidado en los CamposDeTexto). En el código siempre es el punto: por ejemplo pi = 3.1416.

Para agregar opciones a un control de lista desplegable, lo más recomendable es crear la lista y

luego agregarla a todos sus elementos.

Para crear llamados a funciones, inicialmente no aparece el bloque call en la sección

procedimientos, por lo que primero hay que agregar el procedimiento que no devuelva valores o

el procedimiento que produce un resultado; luego que se ha pegado ese bloque, aparece el

bloque call.


Figura 34. Agregando menús a la lista desplegable.

Figura 35. Agregando llamados a funciones.

En ciertas ocasiones necesitaremos agregar parámetros para poder llamar la función, para ello

hay que dar clic izquierdo en el botón azul con forma de engrane del procedimiento y arrastrar

la entrada con variable X por defecto, dentro del recuadro hacia la sección entradas al lado

derecho, luego la variable puede renombrarse al antojo del usuario. Este proceso también

modificará los bloques call.

Figura 36. Agregando llamados a funciones con parámetros de entrada.

Figura 37. Agregando llamados a funciones con parámetros de entrada.

El botón configuración (engrane con fondo azul), permite modificar la cantidad de entradas de

un bloque, por ejemplo el bloque concatenar texto (join) tiene dos bloques por defecto.


Figura 38. Modificando bloques.

66. Desde la paleta, arrastre los componentes a la pantalla Screen1 de tal manera que se vean como

en la figura 39.

Una Imagen (Imagen1 – Image1).

Cuatro Etiquetas (Etiqueta1, Etiqueta2… o Label1, Label2,…), texto no editable por el

usuario de la aplicación.

Un ordenador de componentes horizontales (HorizontalArrangement1).

Cuatro CheckBox.

Un menú desplegable (Spinner1).

Un Botón (Botón1 – Button1).

Un Reloj (Palette >> Sensors >> Clock).

Tres controles Web (Palette >> Connectivity >> Web), uno para cada petición (i, conteo y

envío POST para la función Ascendente / Descendente).

Un notificador (Palette >> User Interface >> Notifier), este control no es necesario ya que

solo se utilizará para generar mensajes al momento de depurar la aplicación, luego no se

utilizará.



67. Modifique las propiedades de los componentes en la pantalla Screen1 de acuerdo a la siguiente

tabla.

Componente Propiedad Valor Ejemplo

Etiqueta1

Label1

Tamaño de letra 20

Texto Dato de Entrada (Switches):

Posición del texto 1 - Centrado


Etiqueta3

Label3

Tamaño de letra 20

Texto Dato de Salida (Led’s):



Etiqueta4

Label4

Tamaño de letra 20

Texto Conteo =



Etiqueta5

Label5

Tamaño de letra 20

Texto i =



Imagen1

Image1

Autoajustar la imagen Habilitado

Alto 40 por ciento


Foto Busque la imagen Proporcionada

Botón1

Button1

Tamaño de letra 20

Forma Redondeada

Ancho - Width 60 Percent

Texto Enviar


Screen1

Título Tx_Rx

Orientación de la pantalla Vertical - Portrait


DispVertical Centro

Clock1 TimerInterval 500

Timer Enabled Marcado

Horizontal

Arrangement1

Altura Ajustar al contenedor



DispVertical Centro

CheckBox1

Tamaño de letra 20


Texto D0

CheckBox2

Tamaño de letra 20


Texto D1

CheckBox3

Tamaño de letra 20


Texto D2

CheckBox4

Tamaño de letra 20


Texto D3

Spinner1 Sin modificación

Web1 Sin modificación



Notifier1 Sin modificación

Tabla 2. Edición de las propiedades de los componentes en la aplicación a desarrollar.


68. Agregue los bloques que den la funcionalidad a la aplicación.



69. Verifique el funcionamiento del circuito de la figura 29, con la aplicación Android desarrollada.

70. Cambie la posición de los interruptores y vea el resultado en la aplicación Android.

71. En la aplicación Android cambie la función de la lista desplegable (Spinner, ComboBox, etc.) y

luego presione el botón Enviar, verifique tanto en el circuito como en la aplicación cuál fue el

resultado.

Ejercicio 3: Elaborar una aplicación que permita por medio de una barra de desplazamiento

modificar el nivel de intensidad de una señal PWM conectada a un led (atenuar las luces de una

habitación por ejemplo), adicionalmente lea tres entradas analógicas que definan el color de

fondo de un componente (ver figura 40).

Figura 40. Ejemplo de creación de color.

72. Desconecte el Photon de la computadora.

73. Desarme el circuito y haga entrega del equipo que se le proporcionó a su docente de laboratorio.

74. Cierre las cuentas de Particle y Appinventor2.

75. Cierre las aplicaciones de la computadora (navegador web, etc.).

76. Apague la computadora, incluyendo el monitor.

77. Deje en orden su puesto de trabajo.


Desafíos cortos:

1. Elaborar una aplicación que permita controlar el vibrador del móvil, si el valor

analógico de una entrada del PHOTON supera los 2.7Vdc.

2. Elaborar una aplicación para controlar la cámara frontal del móvil.

1. Qué otros software permiten desarrollar aplicaciones para móviles Android.

2. Que software podría ocupar para realizar las mismas aplicaciones desarrolladas en la

práctica para móviles Apple.

Aplicación WEB:

http://ai2.appinventor.mit.edu

Información de bloques:

http://codigo21.educacion.navarra.es/autoaprendizaje/descripcion-de-los-bloques-integrados-

de-app-inventor-2/

Simulador:

http://appinventor.mit.edu/explore/ai2/setup-emulator.html

Proceso de diseño video-tutorado:

https://www.youtube.com/watch?v=sQ2EmGNp2U4

https://www.youtube.com/watch?v=iAaiVAPFf8E

https://www.youtube.com/watch?v=sFb_TXKtJIo

Cursos en EDX:

https://www.edx.org/es/course/mobile-computing-app-inventor-cs-trinityx-t007x

https://www.edx.org/es/course/mobile-computing-app-inventor-cs-trinityx-t008x

Ejemplos desarrollados:

http://kio4.com/appinventor/

http://kio4.com/appinventor/#inicio

Investigación complementaria.

Bibliografía.

Análisis de Resultados.


EVALUACION

% 1-4 5-7 8-10 Nota

CONOCIMIENTO

25%

Conocimiento

deficiente de los

fundamentos

teóricos

Conocimiento y

explicación

incompleta de

los fundamentos

teóricos

Conocimiento

completo y

explicación clara

de los

fundamentos

teóricos

APLICACIÓN

DEL

CONOCIMIENTO

70%

No Terminó

completamente

el programa y

comentó mal el

código (30%)

No realizó el

circuito

correctamente

(40%)

Terminó

completamente

el programa

pero los

comentarios no

estaban del todo

correctos

El circuito

funcionó

Terminó

completamente el

programa con sus

comentarios

correctos

El circuito

funcionó

ACTITUD 2.5%

Es un

observador

pasivo.

Participa

ocasionalmente

o lo hace

constantemente

pero sin

coordinarse con

su compañero.

Participa

propositiva e

integralmente en

toda la práctica.

2.5%

Es ordenado;

pero no hace un

uso adecuado de

los recursos

Hace un uso

adecuado de los

recursos, respeta

las pautas de

seguridad; pero

es desordenado.

Hace un manejo

responsable y

adecuado de los

recursos

conforme a pautas

de seguridad e

higiene.

TOTAL 100%

Hoja de cotejo: 1

Guía 7: Introducción a appinventor2.

Alumno:

Docente:

Maquina N°:

GL: Fecha:

Documents

Introducción a appinventor2.7. En la ventana de diálogo colocamos el nombre: Pitagoras, luego damos clic izquierdo en el botón Aceptar. Figura 4. Creación de nuevo proyecto. 8