Laboratorio de Instrumentación

Electrónica de Sistemas Espaciales

LIESE

Manual App inventor 2 

   

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Registro en MIT AppInventor
Como primer paso es necesario registrarse en la página de MIT App Inventor, para ello se
puede hacer uso del buscador de Google Chrome para encontrar la página; aquí la primer
liga lleva directamente al registro en la página:

Aquí tendremos que registrarnos con una cuenta de google, se puede utilizar una ya
establecida o se puede crear una cuenta nueva (dando clic en “Create Account”).
Si previamente ya se tenía una cuenta, ésta se debe escribir en el recuadro “Email or
phone”.

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Después de escribir nuestro correo, nos pedirá la contraseña de éste y aparecerá un
recuadro con los términos del servicio, para continuar damos clic en “I accept the terms of
service!”

Así concluimos nuestro registro y podemos entonces comenzar a diseñar nuestra

aplicación.

Proyecto nuevo

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Para comenzar con un nuevo proyecto se puede dar clic en “Start new project” o dar clic en
“Projects”, donde se desplegará un menú y seleccionaremos “start new project”.

La página nos pide un nombre para el proyecto, el cual insertamos en “Project name” sin
espacios y a continuación damos clic en “OK”:

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Una vez creado el proyecto, se nos mostrará una pantalla como la que se encuentra a
continuación. En este caso se llamó al proyecto “prueba1”:

En ella encontraremos, en la parte izquierda, en un recuadro con nombre “Palette”, los

elementos necesarios para construir la interfaz de la aplicación a nuestro gusto o
conveniencia, además, en la parte derecha, la página nos muestra un recuadro
(“Components”) donde podremos seguir el orden en que vamos insertando los
componentes o botones, así como sus respectivos nombres. A un lado de Components,
encontramos otro recuadro llamado “Properties”, desde el cual, podremos modificar el
tamaño de los botones, el nombre de éstos, el texto en ellos, color, forma e incluso se
puede añadir alguna imagen para utilizarla como botón (esto se explicará más adelante) .
Todo lo descrito anteriormente se puede ver en la parte central, que simula la manera en
que quedará la aplicación una vez instalada en nuestro teléfono celular.

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Ya que se busca transmitir información vía bluetooth se debe seleccionar la casilla
“Connectivity” y a continuación dar clic en “Bluetooth client”:

Interfaz

Ahora podemos centrar nuestra atención en la interfaz de la aplicación.

A partir de este punto los elementos que se describen son opcionales, es decir, aquí se
tratará de ilustrar la funcionalidad de algunos botones con un ejemplo, sin embargo, el
diseño de la aplicación queda sujeto a las preferencias del usuario.

Se puede nombrar a la pantalla (para poder identificar mejor la funcionalidad de la

aplicación) dando clic en el área blanca y renombrarlo en “Title”:

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Utilizaremos una función para insertar texto en la pantalla, esto en “User Interface” y
“Label” arrastrando con el mouse este apartado hacia la pantalla blanca. En este caso el
texto nos indicará el estado de nuestra conexión (Conectado, Desconectado o Error de
Conexión); el texto inicial , “estado” en este ejemplo, se escribe en “text”, el cómo cambia
de acuerdo a la conexión se modifica más adelante.

A continuación definiremos los espacios de la pantalla para organizar de mejor manera los
botones, pues de lo contrario la página los ordena de manera continua. Con ayuda de
“Layout” encontraremos enlistadas las herramientas necesarias para este punto. Se utilizó
el arreglo horizontal y se definieron sus medidas en “Heigth” y “Width”.

De la misma manera se tiene que definir el espacio “dentro” de estos espacios, esto ayudará
a que la aplicación tenga un buena presentación.

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Agregaremos un botón llamado lipsicker (lo encontramos en “User Interface”), al hacer
clic en este botón se nos muestra una lista de opciones a elegir. En este ejemplo lo
utilizaremos para seleccionar el dispositivo al que nos queremos conectar por bluetooth.
Dicha lista se define más adelante.
Se modificó el color, texto, tipo de fuente y tamaño, así como las medidas de dicho botón.

A un lado de este lipsticker colocaremos un botón para que podamos desconectar el

teléfono del dispositivo al cual está vinculado.

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Utilizaremos para ello la opción de “Button”. Las medidas se modificaron, al igual que el
tipo de letra y color.

Antes de continuar con los botones, insertaremos un recuadro de texto, el cual nos indicará
que los botones siguientes son alusivos a las direcciones de nuestro ejemplo. Con la
herramienta “Label” podremos insertar este recuadro y cambiar el texto a mostrar en él.

Para proceder a agregar los botones de las direcciones, acomodaremos los espacios con la
herramienta ya mencionada “Layout”. Esta vez utilizamos 3 recuadros , todos con altura
de 32 pixeles y con largo de toda la pantalla.

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Con la misma herramienta colocaremos recuadros dentro de los que pusimos hace un
momento, esto con el fin de que esos espacios queden en blanco y los botones queden de
una manera mejor distribuida. Estos pequeños recuadros se pusieron al 33% del largo de
la pantalla y con una altura de acuerdo a los anteriores (Fill parent).

Para finalizar la interfaz colocaremos los botones de las direcciones, a un lado de los
espacios que dejamos iremos poniendo cada botón, dejándolos con un largo de 33%.

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Programación de bloques
Para asignar las funciones a los botones, debemos ensamblar los bloques ya predispuestos
por la página, los comandos en los bloques son similares a otros lenguajes, pues
encontramos las funciones ‘when-do’, ‘if-then’, entre otras.
En la parte superior derecha de la pantalla, encontraremos el apartado “Blocks”, damos clic
y enseguida nos llevará a otra pantalla en blanco, del lado izquierdo están los tipos de
bloques, facilitando para el usuario encontrar la instrucción que desea dependiendo de la
acción que asignará.

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Al dar clic en “screen1” se despliega una lista de bloques donde están los comandos que se
le pueden asignar a Screen, en este caso estamos diciendo que al abrir la aplicación, el
botón label1 esté con el texto “estado”. Cada color de bloque nos indica con qué tipo de
botón estamos trabajando, tendremos que estar corroborando en nuestro diseño el
seleccionar el número de botón correcto. Para la acción de Label1, se hace clic en este
botón y se elige el que despliega un texto. Para el texto se hace clic en el botón rosa de
“text” y se inserta la palabra “Estado”.

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Lo siguiente es para indicar que en nuestro Lipsticker (botón Conectar) se guarden las
direcciones de Bluetooth.

(En esta imagen simplemente se corrobora que el botón “Conectar” ea el Lipsicker1.)

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
En el siguiente bloque se indicará que al dar clic en el Lipsicker (Conectar) se despliegue la
lista y se conecte al dispositivo seleccionado.
Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Así queda la parte de conexión en nuestra aplicación; lo siguiente es asignarles a los
botones la información a enviar, en este caso se enviarán bytes.

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
(En esta imagen sólo se corrobora que el botón “arriba” sea el button 2)

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Este proceso se repite con los demás botones a excepción del de Desconectar.
Los números que se envían son a preferencia del usuario.

Por último, el botón desconectar se configura de la siguiente manera:

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Con esto se finaliza la creación de la aplicación.

Pasos para instalar una aplicación de App Inventor 2

1. El archivo se debe transferir de una computadora al teléfono por medio de un cable
USB. El documento es un archivo .APK
2. Para instalar la aplicación es necesario que en el teléfono se active el “permiso para
instalar aplicaciones desconocidas”. Esto se debe hacer desde las configuraciones
del equipo, en algunos casos varía dónde se encuentra esta opción; puede ser en
seguridad o en el apartado de aplicaciones.
Si no se realiza este paso, el teléfono no permitirá la instalación de la aplicación.
3. Se busca el archivo .APK en la carpeta que se haya guardado, se abre y aparecerá
un mensaje de aviso, para proceder con la instalación se dará clic en “continuar”.
De igual manera el teléfono preguntará nuevamente si deseamos instalar la
aplicación ya que es de un desarrollador ‘desconocido’, para continuar daremos clic
en “Instalar de todas formas”
4. Una vez finalizada la instalación, el teléfono nos dará la opción de abrirla o de salir.
5. El ícono de la aplicación que acabamos de instalar aparecerá automáticamente en el
menú de nuestras aplicaciones desde donde se podrá abrir normalmente.

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE
Uso de la aplicación
1. Previamente se debe encender el Bluetooth del teléfono y vincular el dispositivo al
que se quiere conectar para el uso de la aplicación. Esto debe hacerse directamente
del télefono, NO en la aplicación.
2. Al abrir la aplicación veremos dos botones (Conectar y Desconectar), al dar clic en
conectar aparece un listado con los dispositivos Bluetooth a los que se ha vinculado
el teléfono (si el paso 1 no se hizo entonces el dispositivo al cual nos queremos
conectar no aparecerá en esta lista), para conectarse con el dispositivo deseado sólo
se debe dar clic en él.
3. En este momento arriba del botón “Conectar” se nos dirá el estado de la conexión,
es decir, Conectado o Error de conexión; en caso de oprimir el botón “Desconectar”
el estado cambiará a Desconectado.
4. Una vez corroborada la conexión se puede usar la aplicación, los botones tienen el
nombre de la dirección para este ejemplo.
5. Para finalizar se da clic en Desconectar y se cierra la aplicación tan sólo saliendo de
ella.

Coordinado por: Dr. Saúl de la Rosa ®​VIVADO es una marca registrada por Xilinx
Diseñado por Valeria Real ​ ©LIESE