# T.3.1.1 Desarrollo de aplicaciones móviles usando MIT App Inventor

[MIT App Inventor](https://appinventor.mit.edu/) es un entorno de programación visual e intuitivo que permite a todos, incluso a los niños, crear aplicaciones completamente funcionales para teléfonos inteligentes y tabletas con Android e iOS. Aquellos que son nuevos en MIT App Inventor pueden tener una primera aplicación simple en funcionamiento en menos de 30 minutos. El proyecto MIT App Inventor busca democratizar el desarrollo de software al empoderar a todas las personas, especialmente a los jóvenes, para pasar del consumo de tecnología a la creación de tecnología.

Los programas de codificación basados en bloques inspiran el empoderamiento intelectual y creativo. El sistema es gratuito y se puede descargar fácilmente de la web. Las aplicaciones creadas con App Inventor están limitadas por su simplicidad, aunque permiten cubrir un gran número de necesidades básicas en un dispositivo móvil.


A continuación se describe dos ejemplos básicos de inicialización usando la herramienta siguiente. Más detalles se indicará en clases.

---
## Pasos para ejecutar MIT App Inventor

MIT App Inventor presenta cuatro opciones para configurar y compilar sus aplicaciones en un smartphone o mediante un emulador. En el siguiente links se encuentran estas opciones
[Configuración MIT App Inventor](https://appinventor.mit.edu/explore/ai2/setup)


Para las pruebas y validación escoja la [primera opción](https://appinventor.mit.edu/explore/ai2/setup-device-wifi) que consiste en descargar la App en tu móvil e instalarla. Proceda a descargar en instalar la aplicación MIT AI2 Companion App en su dispositivo Smartphone.


Esta opción nos permite que una vez desarrollado nuestra aplicación se pueda ejecutar mediante un código que debe escribir en el smartphone o mediante un código QR. Tal como se muestra en la figura siguiente.


## Ejemplo hola mundo

1. En la figura siguiente se muestra el entorno de desarrollo para nuestro primer programa. En la imagen se muestra un botón y una etiqueta que va cambiar cuando el mismo sea presionado.


2. En la figura siguiente se observa el diagrama de bloque en donde al presionar el botón (método clic) la etiqueta "lblResutado" recibe el mensaje "Hola mundo".


3. En la siguiente figura se observa el lugar donde se debe hacer presionar para que la aplicación se compile y ejecute. Existen varias opciones. En particular usaremos la primera opción que nos permite ejecutar la apliación directamente hacia nuestro teléfono. Cabe recordar que para realizar dicha acción primeramente se debió descargar MIT AI2 Companion App que se describió anteriormente. Además, su computador y el smartphone deben estar en el mismo segmento de red. Una vez pre


4. Seguidamente le aparece un codigo (valores alfanúmericos y QR) lo mismo que mediante la App MIT AI2 Companion se debe proceder digitar o scanear. Esto permite compilar y ejecutar el aplicativo desarrollado en su smartphone


5. Una vez, realizado lo anterior el programa empieza a compilarse y transmitirse a su teléfono.


6. En la figura siguiente se observa la ejecución del programa desde un teléfono smartphone.


7. Para finalizar, otra manera de ejecutar un programa es mediante el emulador pero para dicha opción se necesita seguir la opción número 3 de instalación. En la figura siguiente se muestra la opción mediante el uso de el emulador. Es notable que al hacer click sobre el botón la etiqueta ha cambia por "Hola mundo".

## Ejemplo Suma de dos numeros

1. En el siguiente ejemplo se va a crear el programa de suma de dos números. En la siguiente figura se observa los objetos usados para dicho propósito.


2. El la siguiente figura se observa el diagrama de bloques. A diferencia del anterior ejemplo aqui se agrega un bloque matemático que permite leer los datos númericos y sumarlos


3. Realice el proceso descrito en el ejemplo anterior para ejecutar el programa respectivo en su smartphone. En la figura siguiente se muestra la ejecución en el emulador.


:::info
:bulb: **Tarea**: Se le solicita que realice lo siguiente:
1. Reto mostrar datos con MQTT
:::

### Bibliografía:

By Willian Zamora Mero.