UNIVERSIDAD UPC

SOLUCIONES MOVILES Y CLOUD

LABORATORIO 1

2024
Tabla de contenidos
OBJETIVO DEL LABORATORIO. ......................................................................................................................... 3
INTRODUCCIÓN A APP INVENTOR. ................................................................................................................... 3
Desarrollo de una aplicación móvil inicial. .............................................................................................................. 18
EJECUCION.............................................................................................................................................................. 40

Información del documento

Nombre del Soluciones móviles y cloud
proyecto
Preparado Versión del documento 0.1
por No:
Título: Manual Laboratorio 1. Fecha de la versión del 01/03/2022
documento:
Revisado Fecha de revisión:
por:

Lista de distribución
De Fecha Teléfono/Fax/Email

Para Acción* Fecha Teléfono/Fax/Email

vencimient
o

* Acciones: Aprobar, Revisar, Informar, Archivar, Acción Requerida, Atendido Reunión,

Otro (por favor especifique)

Historia de versión del documento

Fecha de
Nro. Versión Revisado
versión por Descripción Nombre de archivo
OBJETIVO DEL LABORATORIO.

El objetivo de este laboratorio es el de desarrollar habilidades en el diseño y creación de

aplicaciones móviles usando MIT APP INVENTOR , hacer uso de una solución MBaaS , para
aprender los lineamientos de soluciones móviles en la vida real.

INTRODUCCIÓN A APP INVENTOR.

MIT App Inventor es una plataforma web, cloud computing, con la que es posible desarrollar
aplicaciones para dispositivos android, a través de un entorno visual, de modo muy intuitivo, y
sin necesidad de conocimientos previos de programación.

Usaremos la version :

https://appinventor.mit.edu/

Es un entorno de desarrollo de aplicaciones para dispositivos Android. Se trata de un servicio

basado en la nube por lo que todas las tareas se realizan en un navegador.
Está formado por tres herramientas:
●Gestor de proyectos
●Diseñador
●Editor de bloques

1. Se debe instalar en el movil con androidi App MIT AI2 Companion.

2. El pc o laptop deben conectarse a la misma wifi.
3. Cree o habra un proyecto en app inventor. Y conectelo a su dispositivo. Vaya a App
Inventor y abra un proyecto (o cree uno nuevo; use Proyecto> Iniciar nuevo proyecto y
asigne un nombre a su proyecto). Luego elija "Conectar" y "AI Companion" en el menú
superior del navegador AI2:

Aparecerá un cuadro de diálogo con un código QR en la pantalla de su PC. En su

dispositivo, inicie la aplicación MIT App Companion tal como lo haría con cualquier
aplicación. Luego haga clic en el botón "Escanear código QR" en el Acompañante y
escanee el código en la ventana de App Inventor:

En unos segundos, debería ver la aplicación que está creando en su dispositivo. Se

actualizará a medida que realice cambios en su diseño y bloques, una característica
llamada "prueba en vivo".
 4. Se debe instalar el setup en pc o laptop.
https://appinventor.mit.edu/explore/ai2/update-setup-software

App Inventor, está basado en ciertos elementos:

Bloques: Un bloque, es un elemento del entorno blockly, en el que se pueden ir uniendo

diferentes componentes a modo de puzzle (los bloques, se crean a través del editor Open
Block Java Library), y que posteriormente, App Inventor, compila a bytecode Java, a través del
framework para lenguajes dinámicos Kawa Language Framework.

Eventos: Todas las aplicaciones están realizadas bajo el paradigma de la programación

orientada a eventos. Cuando se produce un evento, que ha sido previamente recogido en la
aplicación, ésta llama al conjunto de instrucciones que está relacionada con dicho suceso o
evento. Las instrucciones, por tanto no se ejecutan en un orden determinado sino queel
programa reacciona en vunción de dichos sucesos del entorno. Los eventos pueden ser
automáticos (por ejemplo, un rebote de una pelota en la pantalla produce un evento de
vibración) o iniciados por el usuario (por ejemplo agitar –shake- el teléfono para que se
produzca el sonido de un látigo).

Figura 1. Eventos
Componentes: Son los elementos básicos disponibles para realizar la aplicación; desde un
botón, hasta un sensor de movimiento (Accelerometersensor). Son los items que aparecen, en
la pantalla de diseño, en la columna Paleta –Palette-.

Propiedades: Son características que poseen los componentes, y que se pueden ajustar para
cambiar el modo en que interactúa el componente con la aplicación.

Mis proyectos:

El diseñador

La herramienta de diseño nos permite seleccionar los componentes de la App y definir el

entorno de usuario de la misma.
El editor de bloques

El comportamiento de la App se programa mediante bloques o piezas en el editor de bloques.

Muchas personas pueden decirle qué es una aplicación desde la perspectiva de un usuario,
pero comprender qué es desde la perspectiva de un programador es más complicado.

Las aplicaciones tienen una estructura interna que debemos entender completamente para
crearlas de manera efectiva.

Una forma de describir el funcionamiento interno de una aplicación es dividirla en dos partes,
sus componentes y sus comportamientos.
Aproximadamente, estos corresponden a las dos ventanas principales que usa en App
Inventor: usa el Diseñador de componentes para especificar los objetos (componentes) de la
aplicación, y usa el Editor de bloques para programar cómo responde la aplicación a los
eventos externos y del usuario (el comportamiento de la aplicación).

La Figura proporciona una descripción general de esta arquitectura de aplicación.

Fig. Arquitectura de una app app inventor.

Componentes

Hay dos tipos principales de componentes en una aplicación: visibles y no visibles. Los
componentes visibles de la aplicación son los que puede ver cuando se inicia la aplicación,
como botones, cuadros de texto y etiquetas. A menudo se les conoce como la interfaz de
usuario de la aplicación. Los componentes no visibles son aquellos que no puede ver, por lo
que no forman parte de la interfaz de usuario.

En cambio, proporcionan acceso a la funcionalidad incorporada del dispositivo; por ejemplo, el

componente de mensajes de texto envía y procesa mensajes de texto SMS, el componente
LocationSensor determina la ubicación del dispositivo y el componente TextToSpeech habla.

Los componentes no visibles son la tecnología dentro del dispositivo: pequeñas personas que
hacen trabajos para su aplicación. Los componentes visibles y no visibles están definidos por
un conjunto de propiedades. Las propiedades son ranuras de memoria para almacenar
información sobre el componente. Los componentes visibles, por ejemplo, tienen propiedades
como Ancho, Altura y Alineación, que juntos definen cómo se ve el componente. Entonces, un
botón que se parece al botón Enviar en la Figura para el usuario final se define en el Diseñador
de componentes con un conjunto de propiedades, incluidas las que se muestran en la Tabla.
Puede pensar en las propiedades como algo así como las celdas que ve en una hoja de
cálculo. Los modifica en el Diseñador de componentes para definir la apariencia inicial de un
componente. Si cambia el número en la ranura Ancho de 50 a 70, el botón aparecerá más
ancho, tanto en el Diseñador como en la aplicación. Tenga en cuenta que el usuario final de la
aplicación no ve los 70; solo ve cambiar el ancho del botón.

Comportamiento

Los componentes de una aplicación son generalmente fáciles de entender: un cuadro de texto
es para ingresar información, un botón es para hacer clic, etc.

El comportamiento de una aplicación, por otro lado, es conceptualmente difícil y a menudo

complejo. El comportamiento define cómo la aplicación debe responder a los eventos, tanto
iniciados por el usuario (por ejemplo, un clic del botón) como externos (por ejemplo, un
mensaje de texto SMS que llega al teléfono). La dificultad de especificar este comportamiento
interactivo es la razón por la cual la programación es tan difícil. Afortunadamente, App Inventor
proporciona un lenguaje visual de "bloques" perfectamente adecuado para especificar
comportamientos. Esta sección proporciona un modelo para entenderlo.

Una aplicación como receta

Tradicionalmente, el software a menudo se ha comparado con una receta. Al igual que una
receta, una aplicación tradicional sigue una secuencia lineal de instrucciones, como las que se
muestran en la Figura siguiente, que la computadora (chef) debe realizar. Una aplicación típica
podría iniciar una transacción bancaria (A), realizar algunos cálculos y modificar la cuenta de un
cliente (B), y luego imprimir el nuevo saldo en la pantalla (C).
Una aplicación como conjunto de controladores de eventos

Sin embargo, la mayoría de las aplicaciones actuales, ya sea para teléfonos móviles, la Web o
computadoras de escritorio, ya no se ajustan al paradigma de la receta. No realizan un montón
de instrucciones en un orden predeterminado; en cambio, reaccionan a los eventos, más
comúnmente, eventos iniciados por el usuario final de la aplicación. Por ejemplo, si el usuario
hace clic en un botón, la aplicación responde realizando alguna operación (por ejemplo,
enviando un mensaje de texto). Para teléfonos y dispositivos con pantalla táctil, el acto de
arrastrar el dedo por la pantalla es otro evento. La aplicación podría responder a ese evento
dibujando una línea desde el punto de su toque original hasta el punto donde levantó el dedo.
Estos tipos de aplicaciones se conceptualizan mejor como un conjunto de componentes que
responden a eventos. Las aplicaciones incluyen "recetas", secuencias de instrucciones, pero
cada receta solo se realiza en respuesta a algún evento, como se muestra en la Figura.

Entonces, a medida que ocurren eventos, la aplicación reacciona llamando a una secuencia de
funciones. Las funciones son cosas que puede hacer con o con un componente: operaciones
como enviar un texto SMS u operaciones de cambio de propiedades, como cambiar el texto en
una etiqueta de la interfaz de usuario. Llamar a una función significa invocarla, hacer que
suceda. Llamamos a un evento y al conjunto de funciones realizadas en respuesta a él un
controlador de eventos. El usuario final inicia muchos eventos, pero otros no. Una aplicación
puede reaccionar a eventos que suceden dentro del teléfono, como cambios en su sensor de
orientación y el reloj (es decir, el paso del tiempo), y eventos creados por cosas fuera del
teléfono, como otros teléfonos o datos que llegan de la Web , como se muestra en la Figura.
Una razón por la que la programación de App Inventor es intuitiva es que se basa directamente
en este paradigma de respuesta a eventos; Los controladores de eventos son "palabras"
primarias en el idioma (en muchos idiomas, este no es el caso). Comienza a definir un
comportamiento arrastrando un bloque de eventos, que tiene la forma, "Cuando <event> do".

Por ejemplo, considere una aplicación, SpeakIt, que responde a los clics de los botones
diciendo el texto que el usuario ha ingresado en voz alta. Esta aplicación podría programarse
con un único controlador de eventos, como se muestra en la Figura.

Estos bloques especifican que cuando el usuario hace clic en el botón llamado SpeakItButton,
el componente TextToSpeech debe pronunciar las palabras que el usuario ha ingresado en el
cuadro de texto llamado TextBox1. La respuesta es la llamada a la función
TextToSpeech1.Speak. El evento es SpeakItButton.Click. El controlador de eventos incluye
todos los bloques en la Figura . Con App Inventor, toda la actividad se produce en respuesta a
un evento. Su aplicación no debe contener bloques fuera del bloque "cuándo hacer" de un
evento. Por ejemplo, los bloques en la Figura no tienen sentido flotando solos.

Tipos de eventos Los eventos que pueden desencadenar actividad se dividen en las categorías
enumeradas en la Tabla.

Eventos iniciados por el usuario

Los eventos iniciados por el usuario son el tipo de evento más común. Con los formularios de
entrada, generalmente es el evento de clic de botón que desencadena una respuesta de la
aplicación. Más aplicaciones gráficas responden a toques y arrastres.

Eventos de inicialización

A veces, su aplicación necesita realizar ciertas funciones justo cuando comienza, no en

respuesta a ninguna actividad del usuario final u otro evento. ¿Cómo encaja esto en el
paradigma de manejo de eventos? Los lenguajes de manejo de eventos como App Inventor
consideran el lanzamiento de la aplicación como un evento. Si desea que se realicen funciones
específicas inmediatamente cuando se abre la aplicación, arrastre un bloque de evento
Screen1.Initialize y coloque algunos bloques de llamadas de función dentro de él. Por ejemplo,
en el juego MoleMash (Capítulo 3), se llama al procedimiento MoveMole al comienzo de la
aplicación para colocar el lunar al azar, como se muestra en la Figura.

Eventos del tiempo

Algunas actividades en una aplicación se activan con el paso del tiempo. Puede pensar en una
animación como un objeto que se mueve cuando se activa por un evento de temporizador. App
Inventor tiene un componente Reloj que se puede usar para activar eventos de temporizador.
Por ejemplo, si desea que una bola en la pantalla se mueva 10 píxeles horizontalmente en un
intervalo de tiempo establecido, sus bloques se verían como en la Figura.

Eventos de animación

La actividad que involucra objetos gráficos (sprites) dentro de los lienzos activará eventos. Por
lo tanto, puede programar juegos y otras animaciones interactivas especificando qué debe
ocurrir cuando dos objetos colisionan o cuando un objeto alcanza el borde del lienzo.
Eventos externos

Cuando su teléfono recibe información de ubicación de los satélites GPS, se activa un evento.
Del mismo modo, cuando su teléfono recibe un mensaje de texto, se activa un evento (Figura ).
Dichas entradas externas al dispositivo se consideran eventos, al igual que el usuario que hace
clic en un botón. Por lo tanto, cada aplicación que cree será un conjunto de controladores de
eventos: uno para inicializar cosas, algunos para responder a la entrada del usuario final,
algunos activados por tiempo y otros por eventos externos. Su trabajo es conceptualizar su
aplicación de esta manera y luego diseñar la respuesta a cada controlador de eventos.

Los controladores de eventos pueden hacer preguntas

Las respuestas a los eventos no siempre son recetas lineales; pueden hacer preguntas y
repetir operaciones. "Hacer preguntas" significa consultar los datos que la aplicación ha
almacenado y determinar su curso (rama) en función de las respuestas. Decimos que tales
aplicaciones tienen ramas condicionales, como se ilustra en la Figura. En el diagrama, cuando
ocurre el evento, la aplicación realiza la operación A y luego verifica una condición. La función
B1 se realiza si la condición es verdadera. Si la condición es falsa, la aplicación realiza B2. En
cualquier caso, la aplicación continúa realizando la función C.
Las pruebas condicionales son preguntas como "¿Ha alcanzado el puntaje 100?" o "¿El texto
que acabo de recibir vino de Joe?" Las pruebas también pueden ser fórmulas más complejas
que incluyen múltiples operadores relacionales (menor que, mayor que, igual a) y operadores
lógicos (y, o, no). Especifica comportamientos condicionales en App Inventor con los bloques if
y ifelse. Por ejemplo, el bloque en la Figura informaría "¡Usted gana!" si el jugador anotó 100
puntos.

Los controladores de eventos pueden repetir bloques

Además de hacer preguntas y ramificar en función de la respuesta, su aplicación también

puede repetir operaciones varias veces. App Inventor proporciona dos bloques para repetir,
foreach y while do. Ambos encierran otros bloques. Todos los bloques dentro de foreach se
realizan una vez para cada elemento de una lista. Por ejemplo, si desea enviar el mismo
mensaje de texto a una lista de números de teléfono, puede usar los bloques en la Figura.

Los bloques dentro del bloque foreach se repiten, en este caso, tres veces, porque la lista
PhoneNumbers tiene tres elementos. Entonces el mensaje "pensando en ti ..." se envía a los
tres números.
Desarrollo de una aplicación móvil inicial.

El objetivo de este laboratorio es desarrolla una aplicacion movil basica para explorar el entorno
de desarrollo.

Se desarrollara una aplicacion que hace uso de un componente grafico , un boton y sonidos.

MIT APP INVENTOR LAB

Conecte su teléfono o tableta a través de WiFi

Se puede usar App Inventor sin descargar nada a la computadora , se desarrolla aplicaciones
en el sitio web: ai2.appinventor.mit.edu.

Para realizar pruebas en vivo en su dispositivo Android, simplemente instale la aplicación MIT
App Inventor Companion en su teléfono o tableta Android.

Una vez instalado Companion, puede abrir proyectos en App Inventor en la web, abrir el
complemento en su dispositivo y puede probar sus aplicaciones a medida que las
construye:Los siguientes pasos lo guiarán a través del proceso.

Paso 1: descargue e instale la aplicación MIT AI2 Companion en su teléfono. Abra el escáner
de códigos QR de su dispositivo y escanee el código QR a la izquierda a continuación para
descargar la aplicación complementaria de Play Store. Si no puede usar Play Store, use el
código QR a la derecha para descargar la aplicación complementaria directamente a su
teléfono.

Play Store
Recommended: Automatic updates
APK File
Manual updates required

Escanee este código QR (o haga clic en este enlace)para obtener la aplicación desde Play
StoreEscanee este código QR (o haga clic en este enlace)para descargar la aplicación
directamenteSi necesita un escáner de código QR, puede obtener uno en Play Store (por
ejemplo, ZXing).
Después de la descarga, sigue las instrucciones para instalar la aplicación Companion en tu
dispositivo. Debes instalar el MIT AI2 Companion solo una vez y luego dejarlo en tu teléfono o
tableta para cuando uses App Inventor.

Nota 1: Si no puede usar el código QR, aún puede instalar MIT AI2 Companion en su teléfono
o tableta. Use el navegador web en su dispositivo para ir a Google Play Store; Busque MIT AI2
Companion en la tienda. Una vez que encuentre Companion, haga clic en el botón INSTALAR
para la aplicación Companion.

Nota 2: Si elige no pasar por Play Store y, en su lugar, carga la aplicación directamente
(también conocida como "carga lateral"), deberá habilitar una opción en la configuración de su
dispositivo para permitir la instalación de aplicaciones de "fuentes desconocidas". esta
configuración en las versiones de Android anteriores a la 4.0, vaya a "Configuración>
Aplicaciones" y luego marque la casilla junto a "Fuentes desconocidas". Para dispositivos con
Android 4.0 o superior, vaya a "Configuración> Seguridad" o "Configuración> Seguridad y
Bloqueo de pantalla "y luego marque la casilla junto a" Fuentes desconocidas "y confirme su
elección.

Paso 2: conecta tu computadora y tu dispositivo a la MISMA red WiFi App Inventor le mostrará
automáticamente la aplicación que está creando, pero solo si su computadora (que ejecuta App
Inventor) y su dispositivo Android (que ejecuta Companion) están conectados a la misma red
WiFi. Vea una explicación más detallada de esto aquí.

¿Cómo se conecta mi dispositivo Android a través de wifi?

Una característica de AppInventor permite a los usuarios conectar un dispositivo a una PC a

través de wifi para probar sus aplicaciones.

A continuación se explica con más detalle cómo funciona este proceso.

Para usar la conexión AppInventor a través de wifi, un usuario debe descargar la aplicación MIT
AI2 Companion a través de Google Play Store (nota: los usuarios de AI1 deben obtener el
complemento v1, no el v2) e instalarlo directamente en su teléfono (tenga en cuenta que
instalar, deberá permitir la instalación de aplicaciones que no sean de mercado en la
configuración del sistema de su dispositivo).

La carga directa de App Inventor de esta manera significa que Play Store no puede actualizar
automáticamente la aplicación.

Cuando haya una actualización de App Inventor, deberá actualizar manualmente la aplicación
complementaria.
El MIT AICompanion permite al usuario establecer una conexión entre el dispositivo Android y
la PC a través del servidor MIT RendezVous.

El dispositivo Android debe estar utilizando Wifi y no la red celular para la conectividad a
Internet.

Cómo funciona el servidor MIT RendezVous1.

Su PC se registra con un código de 6 caracteres generado por el MIT AICompanion2. MIT

RendezVous Server registra la dirección IP de su PC. Su dispositivo Android se registra con un
código de 6 caracteres4. El servidor MIT RendezVous registra la dirección IP de su teléfono5.

El servidor MIT RendezVous le dice al dispositivo y la computadora con el código

correspondiente de 6 caracteres la dirección IP del otro. El dispositivo y la computadora se
comunican directamente mediante IP Idealmente, nuestra situación de red debería verse así:
Conexión por teléfono a través de Wifi Solución de problemas

Pruebe los siguientes pasos para solucionar problemas de su conexión inalámbrica.

1. Intenta llegar a http://rendezvous.appinventor.mit.edu desde tu PC

2. Intenta llegar a http://rendezvous.appinventor.mit.edu desde tu dispositivo Android

3. Si los pasos anteriores funcionan, intente usar el comando "ping" para hacer ping a la
dirección IP del teléfono (que se muestra en el MIT AICompanion en su ventana de inicio). Si
está utilizando Windows, escriba "ping" + * Dirección IP del teléfono * en la ventana cmd.exe,
si está utilizando Mac o Linux, escriba "ping" + * Dirección IP del teléfono * en la ventana del
terminal. Instrucciones detalladas ver http://www.wikihow.com/Ping-an-IP-Address

4. Si todos estos pasos tienen éxito y Wireless App Inventor aún no funciona, entonces puede
haber un firewall entre la computadora y el teléfono que bloquea los puertos 8001 y 9987. Si
tiene un programa "telnet", puede intentar hacer telnet desde la computadora al teléfono en estos
puertos. Si la conexión no se completa, es probable que exista un firewall que bloquee las
conexiones al teléfonoSi no pasa el paso 4, lo más probable es que su red tenga este aspecto.
Muchas redes tienen firewalls configurados que bloquean las conexiones al teléfono. Una forma
de evitar esto es usar su propia computadora o una computadora local como enrutador wifi y
hacer que todas las computadoras y dispositivos que usan AppInventor se conecten a la red
usando el nuevo enrutador. Para obtener instrucciones detalladas sobre cómo configurar una
computadora como enrutador, consulte http://www.wikihow.com/Create-a-Wireless-Network
¿Por qué mi teléfono todavía no se conecta?

Verifique que su dispositivo esté conectado a Wifi y no a la red celular. En algunos dispositivos
y en algunas ubicaciones, incluso con WiFi habilitado, el teléfono continúa usando la red celular.
Si esto le sucede a usted, puede deshabilitar la red móvil (conectividad a Internet basada en un
operador de telefonía celular) desde el menú de configuración de Android de su dispositivo.
Paso 3: abra un proyecto de App Inventor y conéctelo a su dispositivo

Vaya a App Inventor y abra un proyecto (o cree uno nuevo; use Proyecto> Iniciar nuevo
proyecto y asigne un nombre a su proyecto).

Luego elija "Conectar" y "AI Companion" en el menú superior del navegador AI2:

Aparecerá un cuadro de diálogo con un código QR en la pantalla de su PC. En su dispositivo,

inicie la aplicación MIT App Companion tal como lo haría con cualquier aplicación. Luego haga
clic en el botón "Escanear código QR" en el Acompañante y escanee el código en la ventana
de App Inventor:

En unos segundos, debería ver la aplicación que está creando en su dispositivo. Se actualizará
a medida que realice cambios en su diseño y bloques, una característica llamada "prueba en
vivo". Si tiene problemas para escanear el código QR o su dispositivo no tiene un escáner,
escriba el código que se muestra en la computadora en el área de texto del Compañero en su
dispositivo Android exactamente como se muestra.

El código está directamente debajo de donde la pantalla de su PC muestra "Su código es" y
consta de seis caracteres. Escriba los seis caracteres y elija la naranja "Conectar con código".
No escriba un Enter o retorno de carro: escriba solo los seis caracteres seguidos presionando
el botón naranja.

Solución de problemas:

Si su aplicación no aparece en su dispositivo, los problemas más probables son:

Es posible que tenga una versión desactualizada de la aplicación App Inventor Companion.

Descargue la última aplicación complementaria para App Inventor 2 desde arriba.Es posible
que su dispositivo no esté conectado a wifi. Asegúrese de ver una dirección IP en la parte
inferior de la pantalla de la aplicación AICompanion en su teléfono o tableta.

Es posible que su dispositivo no esté conectado a la misma red wifi que su computadora.
Asegúrese de que ambos dispositivos estén conectados al mismo nombre de red wifi.

Su organización puede tener protocolos de red establecidos de modo que no se permita la

conexión wifi. Si este es el caso, aún puede usar App Inventor con el emulador o puede usar un
cable USB para conectar su dispositivo. Regrese a la página de configuración principal para ver
estas opciones.

HACER LA PRIMERA APLICACIÓN

Se mostrara la siguente ventana , cierrela.

Creando tu primera aplicación:

HelloPurr. Ahora que ha configurado su computadora y dispositivo, y ha aprendido cómo

funcionan el Diseñador y el Editor de bloques, está listo para crear la aplicación HelloPurr. En
este punto, debe tener el Diseñador o el Editor de bloques abierto en su navegador, y un
dispositivo Android o un emulador de Android conectado al Editor de bloques. (Consulte las
instrucciones de configuración de App Inventor 2 si no tiene estas cosas ejecutándose). Cree
un proyecto con el nombre : HelloPurr.
Se muestra la sigiente pantalla:

HelloPurr es una aplicación simple que puedes construir en muy poco tiempo. Usted crea un
botón que tiene una imagen de un gato y luego programa el botón de modo que cuando se hace
clic suene un "miau".

Para construir HelloPurr, necesitará un archivo de imagen de un gato y un archivo de audio con
un sonido "miau". Descargue estos archivos en su computadora haciendo clic en los siguientes
enlaces. Para descargar: después de hacer clic en un enlace, haga clic con el botón derecho en la
imagen o la barra de sonido y seleccione "Guardar como". Guarde ambos archivos en su
escritorio o carpeta de descargas, o en cualquier lugar que pueda encontrar fácilmente más tarde.

● Kitty picture: kitty.png (Right-click and Save)

● Meow sound: meow.mp3 (Right-click and Save)

Seleccione componentes para diseñar su aplicación

Los componentes de App Inventor se encuentran en el lado izquierdo de la ventana del diseñador
debajo del título Paleta. Los componentes son los elementos básicos que utiliza para crear
aplicaciones en el teléfono Android. Son como los ingredientes en una receta. Algunos
componentes son muy simples, como un componente de Etiqueta, que solo muestra texto en la
pantalla, o un componente de Botón (# 1 a la izquierda) que toca para iniciar una acción.

Otros componentes son más elaborados: un lienzo de dibujo que puede contener imágenes fijas o
animaciones, un sensor de acelerómetro que funciona como un controlador Wii y detecta cuando
mueve o sacude el teléfono, componentes que envían mensajes de texto, componentes que
reproducen música y video, componentes que obtienen información de sitios web, etc.Para usar
un componente en su aplicación, debe hacer clic y arrastrarlo al visor en el medio del Diseñador.
Cuando agrega un componente al Visor (# 1 a continuación), también aparecerá en la lista de
componentes en el lado derecho del Visor.

Los componentes (# 2 a continuación) tienen propiedades que se pueden ajustar para cambiar la
forma en que el componente aparece o se comporta dentro de la aplicación. Para ver y cambiar
las propiedades de un componente (# 3 a continuación), primero debe seleccionar el componente
deseado en su lista de componentes.

Pasos para seleccionar componentes y establecer propiedades. HelloPurr tendrá un

componente Button que muestra la imagen del gatito que descargaste
anteriormente. Para lograr esto:

Paso 1a Desde la paleta Interfaz de usuario, arrastre y suelte el componente Botón a Pantalla1 (#
1).Paso 1b.
Para que el botón tenga una imagen de un gato, en el panel Propiedades, en Imagen, haga clic en
el texto "Ninguno ..." y haga clic en "Cargar nuevo" (# 2).
Aparecerá una ventana para permitirle elegir el archivo de imagen. Haga clic en "Examinar" y
luego navegue hasta la ubicación del archivo kitty.png que descargó anteriormente (# 3).
Haga clic en el archivo kitty.png, haga clic en "Abrir" y luego haga clic en "Aceptar".
Paso 2. Cambie la propiedad de Texto del botón: elimine "Texto para el Botón1", dejando la
propiedad de texto del Botón en blanco para que no se escriba sobre la cara del gatito.
Su diseñador debería verse así:Si no se muestra la imagen completa del gatito, puede
solucionarlo configurando las propiedades Altura y Ancho del botón en "Rellenar padre".

Para hacer esto, haga clic en el componente Botón, vaya al panel de Propiedades de la derecha,
desplácese hacia abajo hasta donde dice Ancho y haga clic en la palabra "Automático ..." para
activar la lista desplegable. Elija "Rellenar padre". Haga lo mismo para la propiedad Altura.
Paso 3. Desde la paleta Interfaz de usuario, arrastre y suelte el componente Etiqueta al Visor (#
1), colocándolo debajo de la imagen del gatito. Aparecerá en su lista de componentes como
Label1.
Debajo del panel Propiedades, cambie la propiedad Text de Label1 para leer "Pet the Kitty" (#
2). Verá el cambio de texto en el Diseñador y en su dispositivo. Cambie el tamaño de fuente de
Label1 a 30 (# 3).
Cambie el Color de fondo de Label1 haciendo clic en el cuadro (# 4): puede cambiarlo al color
que desee.
Cambie el Color de texto de Label1 (# 5) a cualquier color que desee. Aquí, el color de fondo se
establece en azul y el color del texto se establece en amarillo.
Paso 4. En Paleta, haz clic en el cajón de Medios y arrastra un componente de Sonido y colócalo
en el Visor (# 1).
Donde sea que lo suelte, aparecerá en el área en la parte inferior del Visor marcado como
Componentes no visibles.
En el panel de Medios, haga clic en Cargar nuevo ... (# 2) Busque la ubicación del archivo
meow.mp3 que descargó anteriormente y cárguelo en este proyecto (# 3).
En el panel Propiedades, vea que la propiedad Fuente actualmente dice Ninguno ... Haga clic en
la palabra Ninguno ... para cambiar el Origen del componente Sound1 a meow.mp3 (# 4).
Programación con el editor de bloques
Hasta ahora, ha estado organizando la pantalla y los componentes de su aplicación
en el Diseñador, que se encuentra en una ventana del navegador web.
Para comenzar a programar el comportamiento de la aplicación, debe ir al Editor
de bloques. Haga clic en el botón Bloques para ir al Editor de bloques.

Una vez que tenga el Editor de bloques frente a usted, continúe con el siguiente paso para
comenzar a programar su aplicación con bloques.

Hacer que suene el sonidoPaso

1. En el lado izquierdo del Editor de bloques, haga clic en el cajón Button1 para abrirlo. Arrastre
y suelte el botón 1. Haga clic en el bloque en el área de trabajo (el área abierta a la derecha).
Esos bloques de color amarillo mostaza se llaman bloques de controlador de eventos. El
controlador de eventos bloquea específicamente cómo debe responder el teléfono a ciertos
eventos: se ha presionado un botón, se está sacudiendo el teléfono, el usuario arrastra su dedo
sobre un lienzo, etc. Los bloques del controlador de eventos son de color amarillo mostaza y
usan el palabra cuando. Por ejemplo, cuando Button1.Click es un controlador de eventos
.
Paso 2. Haz clic en el cajón Sound1 y arrastra el bloque Sound1.Play y conéctalo a la sección
"hacer" del bloque When Button1.Click. Los bloques se conectan entre sí como piezas de
rompecabezas y puedes escuchar un clic cuando se conectan.
Los bloques morados se denominan bloques de comando, que se colocan en el cuerpo de los
controladores de eventos. Cuando se ejecuta un controlador de eventos, ejecuta la secuencia de
comandos en su cuerpo. Un comando es un bloque que especifica una acción a realizar (por
ejemplo, reproducir sonido) cuando se activa el evento (por ejemplo, presionar el Botón 1).Tus
bloques deberían verse así en este punto:

Ahora puede ver que el bloque de comandos está en el controlador de eventos.

Este conjunto de bloques significa; "cuando se hace clic en Button1, se reproducirá Sound1".
El controlador de eventos es como una categoría de acción (por ejemplo, se hace clic en un
botón), y el comando especifica el tipo de acción y los detalles de la acción (por ejemplo,
reproducir un sonido con un sonido específico).
Puede leer más sobre los bloques y cómo funcionan aquí: Comprensión de los bloques en App
Inventor 2.¡Intentalo! Cuando haces clic en el botón, debes escuchar el gatito maullar.
¡Felicitaciones, su primera aplicación se está ejecutando!

Nota: hay un problema conocido con el componente de sonido en algunos

dispositivos. Si ve un "Error de sistema operativo" y el sonido no se
reproduce, o se retrasa mucho en la reproducción, vuelva al Diseñador e
intente usar un componente Reproductor (que se encuentra en Medios) en
lugar del componente Sonido.

Empaquetando su aplicación

Mientras su dispositivo (emulador o teléfono / tableta) se ha conectado a App

Inventor, su aplicación se ha estado ejecutando en tiempo real en su dispositivo.
Si desconecta el emulador / teléfono / tableta del Editor de bloques, la aplicación
desaparecerá.
Siempre puede hacer que regrese volviendo a conectar el dispositivo.
Para que una aplicación se ejecute sin estar conectada a App Inventor, debe
"empaquetar" la aplicación para producir un paquete de aplicación (archivo apk).
Para "empaquetar" la aplicación en su teléfono o enviarla a otra persona, haga clic
en la pestaña Crear en la parte superior de la pantalla. En Construir, aquí hay dos
opciones disponibles para que elija:

Aplicación (proporcione el código QR): puede generar un código de barras (un código QR), que
puede usar para instalar la aplicación en un teléfono o tableta que tenga una cámara, con la ayuda
de un escáner de código de barras, como el código de barras ZXing escáner (disponible
gratuitamente en Google Play).
1. Nota: este código de barras funciona solo para su propio dispositivo porque está asociado con
su cuenta de Google. Si desea compartir su aplicación con otras personas a través de un
código de barras, deberá descargar el archivo .apk a su computadora y utilizar un software de
terceros para convertir el archivo en un código de barras. Más información se puede
encontrar aquí. here.

2. Aplicación (guardar en mi computadora): puede descargar la aplicación en su computadora

como un archivo apk, que puede distribuir y compartir a su gusto instalándolo manualmente
en otros dispositivos. (a veces llamado "carga lateral".

3. ¡Desafío! Haz ronronear al gatoEl desafío es hacer que el gato ronronee cuando se hace clic
en el botón.

4. Vaya al Editor de bloques y abra el cajón Sound1 y arrastre el bloque Sound1.Vibrate y

colóquelo debajo del bloque Sound1.Play.

El bloque Sound1.Vibrate tiene una ranura abierta, lo que significa que necesita conectar algo
para especificar más sobre cómo debería funcionar el comportamiento.
Aquí, queremos especificar la longitud de la vibración.
Los números se calculan en milésimas de segundo (milisegundos): para que el teléfono vibre
durante medio segundo, necesitamos conectar un valor de 500 milisegundos.
En la paleta integrada, vaya al cajón matemático, arrastre el bloque de números y colóquelo en el
zócalo de Sound1.Vibrate.

Después de colocar el bloque de número, haga clic en el número "0". Destaca el número en
negro: escriba "500" con su teclado.

¡Hecho!
Ahora conecta tu teléfono y toca la imagen del gato en el teléfono. El teléfono debe vibrar y
maullar al mismo tiempo. Si empaquetó su aplicación en su teléfono, esto puede no suceder.
Aunque parezca que su teléfono está conectado, es posible que no lo esté en tiempo real. Para
volver a conectar su teléfono, haga clic en el botón Conectar en la parte superior de la pantalla y
seleccione Restablecer conexión. Si esto no funciona, cierre la aplicación en su teléfono y
reinicie la conexión.

Revisión

Aquí están las ideas clave cubiertas hasta ahora:

● Construye aplicaciones seleccionando componentes (ingredientes) y luego diciéndoles qué

hacer y cuándo hacerlo.

● Utiliza el Diseñador para seleccionar componentes y establecer las propiedades de cada

componente. Algunos componentes son visibles y otros no.

● Puede agregar medios (sonidos e imágenes) a las aplicaciones cargándolos desde su

computadora.

● Utiliza el Editor de bloques para ensamblar bloques que definen el comportamiento de los
componentes.

● los bloques when ... do ... definen controladores de eventos, que le dicen a los componentes
qué hacer cuando sucede algo.

● llamar ... los bloques le dicen a los componentes que hagan cosas.Escanee la aplicación de
muestra a su teléfonoEscanee el siguiente código de barras en su teléfono para instalar y ejecutar
la aplicación de muestra.
O descarga el apkDescargar código fuenteSi desea trabajar con este ejemplo en App Inventor,
descargue el código fuente en su computadora, luego abra App Inventor, haga clic en Proyectos,
elija Importar proyecto (.aia) desde mi computadora ... y seleccione el código fuente que desee.
Acabo de descargar.

EJECUCION.

Conectar->AIcompanion

Se muestra un codigo QR que debe leer desde su celular.

Desde el celular entre al icon de MIT Aicompanion
Se da click o se presiona la imagen y debe producirse el sonido del gato.