Instalación y Configuración de App Inventor

Instalación y Configuración
de App Inventor 2
alejandroterriza@ieslosangeles.es
Instalación y Configuración de App Inventor
Existen multitud de herramientas para programar y desarrollar aplicaciones
para dispositivos móviles con diferentes sistemas operativos.
Para este curso utilizaremos la última versión de MIT App Inventor 2 para
elaborar y probar aplicaciones basadas en Android.
Las principales ventajas que ofrece esta aplicación son:
Es completamente gratuita, sin publicidad y para aplicaciones
De manejo muy sencillo e intuitivo. No son necesarios conocimientos
previos de ningún lenguaje de
Está asociada a
google, con total compatibilidad con sus distintos
Permite la elaboración de aplicaciones de forma
Se ejecuta online, por lo que podremos acceder a nuestros
proyectos desde cualquier dispositivo conectado a
Para comenzar hemos recopilado en este paquete información sobre la
interfaz del programa, la conexión con el dispositivo móvil (o emulador) y
algún ejemplo sencillo.
App Inventor
App Inventor es un entorno de desarrollo de aplicaciones para dispositivos
Android. Para desarrollar aplicaciones con App Inventor sólo necesitas un
navegador web y un télefono o tablet Android (si no lo tienes podrás probar
tus aplicaciones en un emulador). App Inventor se basa en un servicio web
que te permitirá almacenar tu trabajo y te ayudará a realizar un seguimiento
de sus proyectos.
Se trata de una herramienta de desarrollo visual muy fácil de usar, con la
que incluso los no programadores podrán desarrollar sus aplicaciones.
Para empezar a utilizarlo...
1
Instalación y Configuración de App Inventor
1.
Entra en la web, está en inglés pero es muy intutiva.
http://appinventor.mit.edu/
2.
Pulsa el botón Create para acceder e identificarte con una cuenta
de gmail. (Tienes que permitir el acceso a tu cuenta al lanzar la
aplicación).
Entorno de Trabajo
App Inventor trabaja con Proyectos que puedes crear desde cero,
importar para modificarlos e icluso puedes trabajar de forma colaborativa
sobre el mismo proyecto.
Al construir las aplicaciones para Android trabajarás con dos herramientas:
App Inventor Designer y App Inventor Blocks
.
 En Designer construirás el Interfaz de Usuario, eligiendo y
2
Instalación y Configuración de App Inventor
situando los elementos con los que interactuará el usuario y
componentes que utilizará la
 En
el
Blocks
Editor
definirás
el
comportamiento
de
los
componentes de tu
Mientras creas tu aplicación puedes probar su funcionamiento en tu
dispositivo móvil o en un emulador en tu PC o MAC.
A continuación tienes un esquema de trabajo de App Inventor y una
presentación
donde
se
explican
brevemente
sus
principales
componentes.
Enlace a la presentación App Inventor Primeros Pasos
3
Instalación y Configuración de App Inventor
Configuración de App Inventor 2
Puedes 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
aplicación en un dispositivo
(en la nube). Para ver tu
mientras lo construyes (también llamada
"Probando en vivo"), tendrás que seguir los pasos que se muestran a
continuación.
Tienes tres opciones para configurar las pruebas en vivo, mientras
construyes aplicaciones.
1.
Si estás utilizando un dispositivo Android y tienes una
conexión inalámbrica a Internet (WiFi), puedes comenzar la
creación de aplicaciones sin necesidad de descargar ningún
software en su ordenador. Eso sí, tendrás que instalar la
aplicación Companion App Inventor en tu dispositivo. Elige la
opción uno. Esta opción se recomienda
2.
Si no tienes un dispositivo
Android , tendrás que instalar el
software en su ordenador para que pueda utilizar el emulador
de Android en la pantalla del mismo. Elige la opción dos.
3.
Si no tienes una conexión inalámbrica a Internet (WiFi), tendrás
que instalar el software en tu computadora de modo que puedas
conectar a su dispositivo Android a través de USB. Elige la opción
de tres. La opción de conexión USB puede ser complicada,
especialmente en Windows. Usa esto como un último recurso.
4
Instalación y Configuración de App Inventor
Opción 1. WIFI (Recomendada)
Puedes usar App Inventor sin necesidad de descargar e instalar nada en tu
ordenador. Únicamente instala la app MIT App Inventor Companion en tu
téfono
o tableta
Android.
A continuación
abre tu proyecto
en App
Inventor, abre la app "companion" en tu dispositivo Android, y ya puedes
testar tus apps a medida que las construyes:
Los siguientes pasos te guiarán a traves del proceso.
5
Instalación y Configuración de App Inventor
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.
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.
6
Instalación y Configuración de App Inventor
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 Android
Vete 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:
7
Instalación y Configuración de App Inventor
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 l 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
 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
la
pantalla de
 Tu dispositivo no está conectado a la misma red wifi que tu
computador. Asegúrate de que ambos dispositivos se
en la misma
 Tu escuela u organización tienen protocolos de red que impiden las
conexiones. Si este es el caso, puedes usar la
del
emulador o de la conexión
Si has conectado correctamente tu dispositivo móvil al programa mediante
esta
puedes pasar directamente al punto Requisitos del
8
Instalación y Configuración de App Inventor
Opción 2. Emulador
Si no tienes un teléfono o tableta Android, igualmente puedes construir
aplicaciones con App Inventor. App Inventor proporciona un emulador de
Android, que funciona igual que un Android, pero aparece en la pantalla tu
ordenador. Así que también puedes probar tus aplicaciones en el emulador
y distribuir tus aplicaciones a los demás, incluso a través de la Play Store.
Algunas escuelas y programas para después de la escuela (actividades
extraescolares) desarrollan las apps principalmente en los emuladores y
proporcionan los dispositivos para la prueba final de las mismas.
Paso 1. Descarga y ejecuta el programa de instalación del software App
Inventor
Para utilizar el emulador, primero tendrás que instalar algún software en el
equipo (esto no es necesario para la solución wifi). Sigue las instrucciones
para tu sistema operativo, y luego vuelve a esta página para pasar a iniciar
el emulador
Instrucciones para Windows
Instrucciones para GNU / Linux
Instrucciones para Mac OS X
9
Instalación y Configuración de App Inventor
Importante: Si está actualizando una instalación anterior del software de
App Inventor, lee cómo actualizar el software de la
Inventor. Puedes
comprobar si el equipo está ejecutando la última versión del software, visita
la página de App Inventor 2 Prueba
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 desees utilizar el emulador con App Inventor,
tendrás 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.
Para Ayuda con aiStarter, consulta Ayuda de Conexión.
El icono
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:
10
Instalación y Configuración de App Inventor
Paso 3. Conecta el emulador
Desde 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:
11
Instalación y Configuración de App Inventor
El emulador inicialmente aparecerá con una pantalla negra. Espera hasta
que el emulador está listo, con un fondo de pantalla en color. 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
tarjeta. Cuando esté conectado,
se prepara la
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, Ayuda de Conexión para obtener
información sobre lo que podría ir mal.
12
Instalación y Configuración de App Inventor
Opción 3. USB
Cuando se utiliza App Inventor con un teléfono o tableta, el dispositivo se
comunica con el software de App Inventor que se ejecuta en el navegador
del ordenador. Esta comunicación se administra a través de la AI2
Companion funcionando en el dispositivo. Las siguientes instrucciones
(paso 2) explican cómo instalar el complemento. AI2 Companion se puede
comunicar con el ordenador mediante una conexión inalámbrica (WiFi).
Este es el método recomendado por el equipo de App Inventor. No
requiere ningún software adicional para ser instalado en su ordenador. (La
Opción 1, en Configuración de App
).
Hay, sin embargo, algunos entornos donde las conexiones inalámbricas no
funcionarán. Estos incluyen algunos hoteles, centros de conferencias, y las
escuelas, que configuran sus redes inalámbricas para prohibir dos
dispositivos de la red se comuniquen entre sí. Ver ¿Cómo funciona mi
dispositivo Android al conectarse a través de Wi-Fi? para una pequeña
explicación sobre el tema. Algunos usuarios han resuelto este problema
mediante la compra de un router inalámbrico y la creación de su propia red
local. (Además, la mayoría de los Macs y algunos PC puede servir como
routers WiFi que pueden manejar un pequeño número de máquinas). Pero
donde incluso esto es imposible, puedes seguir utilizando App Inventor con
un teléfono o tableta conectándolo al ordenador con un cable USB.
La configuración de una conexión USB puede ser difícil, especialmente en
máquinas Windows, que necesitan especial controlador especial (driver)
para conectarse a los dispositivos Android. (Este no es el caso con Mac o
Linux, que no necesitan controladores especiales.) Lamentablemente, los
13
Instalación y Configuración de App Inventor
diferentes dispositivos pueden requerir diferentes controladores, y, fuera
de unos pocos modelos estándar, Microsoft y Google han dejado en
manos de los fabricantes de dispositivos la creación y suministro de sus
propios controladores. Como consecuencia de ello, es posible que tengas
que buscar en la web para encontrar el controlador apropiado para tu
teléfono. App Inventor ofrece un programa de prueba que verifica si el
dispositivo conectado por USB puede comunicarse con el ordenador.
Debes ejecutar esta prueba y resolver los problemas de conexión antes de
intentar usar App Inventor con USB.
Estos son los pasos para comenzar a utilizar la aplicación Inventor con el
cable USB:
Paso 1: Ejecuta el programa de instalación del software App Inventor
Para conectar con USB, es necesario instalar primero el software de
configuración de App Inventor en el equipo. (Esto no es necesario para
el método de wifi.) Sigue las instrucciones correspondientes a tu sistema
operativo, a continuación, vuelve a esta página para el paso 2
Instrucciones para Windows
Instrucciones para GNU / Linux
Instrucciones para Mac OS X
Importante: Si está actualizando una instalación anterior del software de
App Inventor, lee cómo actualizar el software de la
Inventor. Puedes
comprobar si el equipo está ejecutando la última versión del software, visita
la página de App Inventor 2 Prueba
Paso 2: Descargar e instalar la App MIT AI2 Companion en el teléfono.
Abre el escáner de codigos QR de tu dispositivo y escanea uno de los
códigos QR siguientes:
14
Instalación y Configuración de App Inventor
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
aplicaciones
desde
fuentes desconocidas". Para encontrar esta opción en las versiones
de Android anteriores a la 4.0,
"Settings > Applications" y marca la
casilla "Unknown Sources". Para dispositivos Android 4.0 o superior, vete
a "Settings >
or "Settings > Security & Screen Lock", marca la
casilla "Unknown Sources" y confirma la
Paso 3: Inicie aiStarter (Windows y GNU/Linux)
La comunicación entre el ordenador y el teléfono o la tabla requiere un
programa llamado aiStarter . El programa aiStarter se instaló al instalar el
paquete de instalación de App Inventor. Tendrás accesos directos a
aiStarter desde el menú Inicio, en el escritorio, y desde Todos los
programas (Windows solamente). Windows y Linux: Cada vez que
desees utilizar USB con App Inventor, tendrás que poner en marcha
manualmente el aiStarter en su ordenador. Los usuarios de Mac no tienen
que hacer esto: aiStarter se iniciará automáticamente en un Mac, y se
ejecutará de forma transparente en segundo plano.
15
Instalación y Configuración de App Inventor
Para Ayuda con aiStarter, consulta Ayuda de Conexión.
El icono
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 4: Configurar el dispositivo para USB (Poner el dispositivo en modo
depuración USB)
En tu dispositivo Android, vete a a Configuración del sistema, Opciones de
Desarrollador, actívalas, y asegúrate de que está permitido el modo
"Depuración USB".
En la mayoría de los dispositivos con Android 3.2 o mayor, puede
encontrar esta opción en Ajustes> Aplicaciones> Desarrollo. En Android
4.0 y posteriores, se encuentra en Configuración> Opciones para
desarrolladores.
16
Instalación y Configuración de App Inventor
Nota: En Android 4.2 y posteriores, las opciones para desarrolladores
están ocultas de manera predeterminada. Para que
disponible, vete a
Ajustes> información del teléfono y pulsa (tap) siete veces sobre Número
de compilación. Vuelve a la
anterior y en opciones de desarrollo,
activa "Depuración
Paso 5: Conecte el ordenador y el dispositivo, y autentifica si es necesario.
Conecte su dispositivo Android al ordenador mediante el cable USB,
asegúrese de que el dispositivo se conecta como un "dispositivo de
almacenamiento masivo" (no "dispositivo multimedia") y que no se monta
como una unidad en el ordenador. Esto puede significar que usted tiene
que ir al Finder (en Mac) o Mi PC (en Windows) y desconectar cualquier
unidad de disco(s) que se monta cuando se ha conectado el dispositivo
Android.
En Android 4.2.2 y posteriores, en el dispositivo aparecerá una pantalla
con el mensaje ¿permitir la depuración USB? la primera vez que lo
conecte al ordenador nuevo. Pulsa el botón "OK". Esto autentifica el equipo
al dispositivo, lo que permite al ordenador comunicarse con él. Tendrás
que hacer esto para cada equipo que conectes con el dispositivo, pero
sólo una vez por equipo.
Paso 6: Prueba la conexión.
Vete a esta página de
prueba de conexión (se abrirá en una nueva
pestaña de tu navegador) y comprueba si te da confirmación de que tu
equipo puede detectar el dispositivo. Si la prueba falla, vete a Ayuda de
conexión y lee la ayuda sobre USB (Windows o Mac). No serás capaz
de utilizar la App Inventor con el cable USB hasta que resuelvas los
problemas de conexión.
17
Instalación y Configuración de App Inventor
Requisitos del Sistema
Nota: Internet Explorer no es soportado todavía.
Se recomienda Chrome o
Ordenador y Sistema
 Macintosh (con procesador Intel): Mac OS X 10.5 o
 Windows: Windows XP, Windows Vista, Windows
 GNU / Linux: Ubuntu 8 o superior, Debian 5 o
Navegador
 Mozilla Firefox 3.6 o superior
Nota: Si está utilizando Firefox con la extensión NoScript, necesita
dar vuelta a la extensión fuera. Ver página de solución de problemas
 Apple Safari 5.0 o superior
 Google Chrome 4.0 o superior
 Microsoft Internet Explorer no es soportado
Teléfono o la tableta (o utilizar el emulador en pantalla)
 Sistema operativo Android 2.3 ("Gingerbread") o superior
18
Instalación y Configuración de App Inventor
Primer Programa con App Inventor 2
El mítico Hola Mundo …
Este video tutorial explica cómo crear tu primer programa con App Inventor
2 para que puedas comprobar que todo
correctamente y te
familiarices con la interfaz de diseño y bloques. Deberás seguir los pasos
para realizar tu propio
En este ejemplo se usa el emulador para probar la aplicación. Utiliza el
método que elegiste durante la instalación para
tu
Enlace al video tutorial Hola Mundo con App Inventor
19