Title: App Inventor: empecemos
Course: Mobilitzem la informàtica 4t ESO (en castellano) - Curs 2020/21 > Section: Tema 3. Primer contacto con App Inventor

El entorno de App Inventor

Cuando vamos a http://appinventor.mit.edu llegamos a una página con esta cabecera:

Podemos navegar por la web de App Inventor, ver la documentación y los recursos que hay y, finalmente, si queremos entrar en el entorno de programación, tenemos que hacer clic en el botón Create apps! Para acceder, tenemos que validarnos con una cuenta de Google.

Una vez validados, accedemos a una pantalla donde estarán todos los proyectos que hemos ido creando. Para empezar a trabajar creamos un nuevo proyecto con el botón Start new project y le damos un nombre:

De esta manera accederemos a nuestro espacio de trabajo, que tiene este aspecto:

En este entorno de trabajo podemos distinguir distintas zonas, que en esta imagen están marcadas en distintos colores:

·         Rojo: Los distintos componentes que podemos usar en nuestra App, agrupados por categorías.

·         Azul oscuro: Espacio, que quiere representar la pantalla del dispositivo móvil, donde hay que colocar los distintos componentes a utilizar

·         Rosa: Zona con la lista de todos los componentes utilizados, desde donde se les puede cambiar el nombre o eliminarlos.

·         Naranja. Espacio donde podemos ver y modificar las propiedades del componente que esté seleccionado

·         Amarillo: Espacio desde donde subir ficheros multimedia (imágenes, sonidos...) a nuestra App.

·         Azul claro: Botones para definir distintas pantallas en nuestra App

·         Morado: Botones para alternar entre el modo de diseño y el modo de programación

·         Verde oscuro y verde claro: Zona de menús del programa

2. Modos de trabajo

App Inventor tiene tres modos de trabajo distintos. Los botones de la zona de color morado nos permiten alternar entre el modo de diseño (Designer), donde dibujamos cómo será la pantalla de nuestra App, y el modo de programación (Blocks), donde podremos programar el comportamiento de los distintos componentes:

 Modo Designer (Diseño)

Este modo nos permite añadir componentes arrastrándolos directamente a la parte central y observar cómo se visualizaría en el aparato. Los elementos a añadir están situados en la parte izquierda, y los elementos añadidos, en el recuadro «Componentes» de la derecha. Debajo de los componentes, en el otro recuadro, podemos ver que existe la posibilidad de subir ficheros multimedia para usarlos en nuestras aplicaciones (sonidos, fotografías, vídeos)

Modo Blocks (Programación)

En este modo podemos ver todos los componentes que hemos añadido a nuestro proyecto en la pantalla ! (Screen 1), y al seleccionar cada uno de ellos, vemos todas las instrucciones que podemos utilizar con este componente. En la parte superior izquierda tenemos toda la serie de bloques predeterminados (Built-in) que siempre podremos utilizar en nuestros proyectos, independientemente de los componentes que haya.

En la parte superior derecha encontraremos el dibujo de una mochila. En su interior podemos desplazar y guardar trozos de programa de forma que podamos reaprovecharlo en otras pantallas del mismo proyecto o de otros proyectos que tengamos empezados. La imagen de la papelera en la parte inferior indica a dónde arrastraremos los trozos de programa que queramos eliminar.

Modo Ejecución

Finalmente, el tercer modo de trabajo es el modo ejecución, donde podemos ver en funcionamiento el programa que hemos creado. Hay tres formas de ver este modo:

·         Conectar el ordenador y el dispositivo móvil a una misma wifi (AI Companion)

·         Usar el emulador de dispositivo móvil desde el mismo ordenador

·         Conectar el dispositivo móvil al ordenador mediante un cable USB

La opción que mejor funciona, la que da menos problemas de comunicación, y la más recomendada, es la primera: conectar ambos dispositivos a una misma wifi.

Conexión con el dispositivo móvil

El modo de trabajo de ejecución permite ver en funcionamiento el programa que hemos creado. Hay tres formas de ver este modo:

·         Conectar el ordenador y el dispositivo móvil a una misma wifi (AI Companion)

·         Usar el emulador de dispositivo móvil desde el mismo ordenador

·         Conectar el dispositivo móvil al ordenador mediante un cable USB

Para ver tu aplicación en un dispositivo mientras la construyes («en vivo»), tendrás que seguir uno de los pasos que se muestran a continuación. Tienes tres opciones:

Opción 1: Si estás usando un dispositivo Android y tienes una conexión inalámbrica a Internet (WiFi)

Puedes empezar a crear aplicaciones sin necesidad de descargar ningún software al ordenador, pero tendrás que instalar la aplicación Companion App Inventor en tu dispositivo.

Esta opción es la más recomendada

Opción 2: Si no tienes dispositivo Android

Tendrás que instalar el software en tu ordenador para que pueda usar el emulador de Android en su pantalla.

No funciona correctamente con todas las Apps

Opción 3: Si no tienes conexión inalámbrica a Internet (WiFi)

Tendrás que instalar el software en tu ordenador para poder conectar tu dispositivo Android a través del USB

Las instrucciones para la opción recomendada son:

Opción 1: Si estás usando un dispositivo Android y tienes una conexión inalámbrica a Internet (WiFi)

Paso 1: Descarga e instala la App MIT AI2 Companion en el teléfono o la tableta.

Enlace a la Play Store

Después de descargar la App tienes que seguir las instrucciones para instalarla.

Solo tienes que instalarla una vez, y a partir de aquí ejecutarla cada vez que uses App Inventor.

Nota: Tendrás que habilitar en la configuración de tu teléfono la opción «Permitir la instalación de aplicaciones de origen desconocido».

Para encontrar esta opción en las versiones de Android anteriores a la 4.0, ve a «Settings > Applications» y marca la casilla «Unknown Sources».

Para dispositivos Android 4.0 o superior, ve a «Settings > Security» o «Settings > Security & Screen Lock», marca la casilla «Unknown Sources» y confirma la elección.

Paso 2: Conecta tu ordenador y tu dispositivo a la misma red WiFi

App Inventor te mostrará automáticamente la App que estés construyendo, pero solo si tu ordenador (el que está ejecutando App Inventor) y tu dispositivo Android (el que está ejecutando Companion) están conectados a la misma red WiFi.

Paso 3: Abre un proyecto App Inventor y conéctate a tu dispositivo Android

Ve a App Inventor y abre un proyecto (o crea uno nuevo). A continuación, elige «Connect» y «AI Companion» en el menú principal:

Aparecerá un diálogo con un código QR. En tu dispositivo, ejecuta la App MIT APP Companion como harías con cualquier otra App. A continuación, haz clic sobre el botón «Scan QR code» y escanea el código que te aparece en la pantalla. El código se parecerá a este:

En unos segundos deberías de poder ver la App que estás construyendo en tu dispositivo. Se irá actualizando a medida que vayas realizando cambios tanto en el diseño como en el comportamiento; esta información se llama «live testing» (prueba en directo).

Si tienes problemas para escanear el código QR, puedes introducir el código que te aparece a la derecha de este, en el recuadro de la App Companion, y a continuación pulsar «Connect with code».

Solución de problemas:

Si la App que estás construyendo no aparece en tu dispositivo, los problemas más comunes son:

·         Puede ser que la Companion App esté desactualizada. Descarga la última versión.

·         Quizás tu dispositivo no está conectado a la red wifi. Asegúrate de que puedes ver una dirección IP en la parte inferior de la pantalla de AICompanion.

·         Tu dispositivo no está conectado a la misma red wifi que tu ordenador. Asegúrate de que ambos dispositivos se encuentren en la misma red.

·         Tu escuela u organización tienen protocolos de red que impiden las conexiones. Si este es el caso, puedes usar la alternativa del emulador o la conexión USB.

·         Si necesitas más información, puedes encontrarla en la página de App Inventor.