1. Introducción

App Inventor es un entorno de desarrollo de aplicaciones para los teléfonos Android. Para desarrollar aplicaciones con App Inventor sólo necesitamos un navegador web y un teléfono Android (si no lo tenemos podremos probar nuestras aplicaciones en un emulador). App Inventor se basa en un servicio web que nos permitirá almacenar nuestro trabajo y nos ayudará a realizar un seguimiento de nuestros proyectos.

Se trata de una herramienta de desarrollo visual muy fácil de usar, con lo que incluso los no programadores podrán desarrollar sus aplicaciones.

Al construir las aplicaciones para Android trabajarás con dos herramientas: App Inventor Designer y App Inventor Blocks Editor. En Designer construirás la Interfaz de Usuario, eligiendo y situando los elementos con los que interactuará el usuario y con el Blocks Editor definirás el comportamiento de los componentes de tu aplicación.

App Inventor Designer: se ejecuta en el navegador y lo usaremos para seleccionar los componentes de la aplicación y determinar sus propiedades.

visión general de App Inventor

App Inventor Blocks Editor: se ejecuta en una ventana independiente. Se usa para definir el comportamiento de los componentes.

Editor de Bloques

Si no tenemos un teléfono Android usraremos el emulador integrado en el sistema.

 

Para registrarnos como usuarios de de App Inventor vamos a  appinventor.mit.edu y usamos nuestra cuenta de Google. Pulsamos en Create e iniciamos sesión en nuestra cuenta de Google, a continuación pulsamos en Permitir. A continuación aceptamos los términos del servicio

Configura tu teléfono. Pulsa menú Inicio y a continuación Ajustes…

En el área de notificaciones en la parte superior de la pantalla de tu teléfono aparecerán dos mensajes de estado:
USB conectado significa que el teléfono está conectado a la computadora.
Depuración USB conectada que permitirá a App Inventor comunicarse con el teléfono.

Instalación App Inventor 2 

Configuración de App Inventor 2

Podemos configurar la aplicación Inventor y empezar a crear aplicaciones en cuestión de minutos. El Diseñador y Editor de bloques se ejecutan ahora por completo en el navegador. Para ver nuestra aplicación en un dispositivo mientras la construimos (también llamado «Probando en vivo»), tendremos que seguir los pasos que se muestran a continuación.
Tenemos tres opciones para configurar las pruebas en vivo, mientras construimos las aplicaciones.
1.- Si estamos utilizando un dispositivo Android y tenemos una conexión inalámbrica a Internet (WiFi), podemos comenzar la creación de aplicaciones sin necesidad de descargar ningún software en nuestro ordenador. Eso sí, tendremos que instalar la aplicación Companion App Inventor en nuestro dispositivo. Elige la opción uno. Esta opción se recomienda encarecidamente.
2.- Si no tenemos un dispositivo Android, tendremos que instalar el software en nuestro ordenador para que pueda utilizar el emulador de Android en la pantalla del mismo. Elige la opción dos.
3.- Si no tenemos una conexión inalámbrica a Internet (WiFi), tendremos que instalar el software en nuestra computadora de modo que podamos conectar al dispositivo Android a través de USB. Elegimos la opción tres. La opción de conexión USB puede ser complicada, especialmente en Windows. Usamos esto como un último recurso.
Opción 1 – RECOMENDADO
Construir aplicaciones con un dispositivo Android y conexión WiFi
Si tenemos un ordenador, un dispositivo Android, y una conexión Wi-Fi, esta es la manera más fácil para probar nuestras aplicaciones.
Conectar tu teléfono o tableta sobre WiFi

Conectar nuestro teléfono o tableta sobre WiFi

Podemos usar App Inventor sin necesidad de descargar e instalar nada en tu ordenador. Únicamente instalamos la app MIT App Inventor Companion en nuestro teléfono o tableta Android. A continuación abrimos nuestro proyecto en App Inventor, abrimos la app «Companion» en nuestro dispositivo Android, y ya puedes testar tus apps a medida que las construyes:

Los siguientes pasos te guiarán a traves del proceso.

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

Abre en tu dispositivo Android el escáner de códigos QR y escanea el código QR para descargar e instalar la App Companion desde la Play Store. Si no quieres usar la Play Store, escanea el código QR de la derecha para descargar la App Companion directamente a tu teléfono.

Play Store
Recomendada: Actualizaciones automáticas
 Fichero APK
Requiere actualización manual

Si necesitas un escáner de códigos QR, puedes obtener uno en la Play Store (e.g., ZXing).
Después de descargar la app, sigue las instrucciones para instalarla. Únicamente necesitas instalarla una vez y a partir de ahí ejecutarla cada vez que uses App Inventor.

Nota: Si eliges el segundo método, tienes que habilitar en la configuración de tu teléfono la opción «permitir la instalación de aplicaciones desde fuentes desconocidas». Para encontrar esta opción en las versiones de Android anteriores a la 4.0, vete «Settings > Applications» y marca la casilla «Unknown Sources». Para dispositivos Android 4.0 o superior, vete a «Settings > Security» or «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 sólo si tu ordenador (ejecutando App Inventor) y tu dispositivo Android (ejecutando Companion) están conectados a la misma red WiFi. See a more detailed explanation of this here.
Paso 3: Abre un proyecto App Inventor conéctate a tu dispositivo AndroidVete a App Inventor y abre un proyecto (o crea uno nuevo). Entonces 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 tal como lo harías con cualquier otra app. A continuación click sobre el botón “Scan QR code” y escanea el código:

En unos segundos, deberías 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,a esta característica se e denomina “live testing” (prueba en directo).

Si tienes problemas al escanear el código QR, puedes introducirlo a mano en la caja de texto 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 que la Companion App esté desactualizada. Descarga la última versión.
  • Puede que 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 computador. Asegúrate de que ambos dispositivos se encuentran 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 de la conexión USB.
 Opción 2

¿Todavía no tenemos un dispositivo Android?

Utilizamos el emulador:

Instrucciones

Si no tenemos un teléfono Android o tableta a mano, podemos seguir utilizando la aplicación Inventor.
Instalar y ejecutar el emulador en AI2

 

Instalar y ejecutar el emulador en AI2

Si no tenemos un teléfono o tableta Android, igualmente podemos construir aplicaciones con App Inventor. App Inventor proporciona un emulador de Android, que funciona igual que un Android, pero aparece en la pantalla nuestro ordenador. Así que también podemos probar nuestras aplicaciones en el emulador y distribuir nuestras aplicaciones a los demás, incluso a través de la Play Store.
Para utilizar el emulador, primero tendremos que instalar algún software en el equipo (esto no es necesario para la solución wifi). Seguimos las instrucciones para nuestro sistema operativo, y luego volveremos a esta página para pasar a iniciar el emuladorImportante: Si estamos actualizando una instalación anterior del software de App Inventor, leer cómo actualizar el software de la App Inventor. Podemos comprobar si el equipo está ejecutando la última versión del software, visita la página de App Inventor 2 Prueba de conexión.

Paso 1. Descargar y ejecuta el programa de instalación del software App Inventor
Paso 2. Inicie aiStarter (Windows y Linux solamente)
El emulador requiere el uso de un programa llamado aiStarter. Este programa permite que el navegador se comunique con el emulador. El programa aiStarter se instaló al ejecutar el paquete de instalación de App Inventor. Habrá accesos directos a aiStarter desde el menú Inicio, en el escritorio, y desde Todos los programas (sólo en Windows). Windows y Linux: Cada vez que deseemos utilizar el emulador con App Inventor, tendremos que iniciar manualmente aiStarter. Los usuarios de Mac no tienen que hacer esto. El aiStarter se iniciará automáticamente en un Mac, y se ejecutará de forma transparente en segundo plano.
El icono aiStarter

Para iniciar aiStarter, haz doble clic en el icono (imagen superior). Sabrás que has lanzado con éxito aiStarter cuando veas una ventana como la siguiente:


Paso 3. Conecta el emuladorDesde el menú de App Inventor, vete al menú Connect y haz clic en la opción Emulator.
Se desplegará un dialogo diciendo que nos irá informando sobre la conexión con el emulador. Iniciar el emulador puede tardar un par de minutos. Podrás ver tanto en el diálogo como en el terminal correspondiente a aiStarter como se pone en marcha el emulador:
El emulador inicialmente aparecerá con una pantalla negra(# 1). Espera hasta que el emulador está listo, con un fondo de pantalla en color (# 2). Incluso después de que aparezca el fondo, deberá esperar hasta que el teléfono emulado ha terminado de preparar su tarjeta SD: habrá un aviso en la parte superior de la pantalla del teléfono mientras se prepara la tarjeta. Cuando este conectado, el emulador iniciará y mostrará la aplicación que tenga abierta en App Inventor. Si tienes problemas con aiStarter, o si el emulador no se conecta, vaya a Ayuda de Conexión para obtener información sobre lo que podría ir mal.# 1  # 2  # 3   # 4

Opción 3

¿Sin WiFi? Construir aplicaciones con un dispositivo Android y Cable USB: 

Instrucciones

Algunos servidores de seguridad dentro de las escuelas y las organizaciones no permiten el tipo de conexión Wi-Fi necesario. Si WiFi no funciona , usa la conexión USB.

Conexión a un teléfono o tableta con un cable USB
El primer programa con App Inventor 

Accedemos a App Inventor