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 (la nube!). Para ver tu aplicación en un
dispositivo 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
encarecidamente.
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.
¡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.
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.
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.

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:

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 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.
 Instalar y ejecutar el emulador en AI2

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.

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

Paso 1. En tu computadoraDescarga y ejecuta el programa de instalación del software App Inventor en la

siguiente página http://appinventor.mit.edu/explore/ai2/windows.html

(Esto no es necesario para el método de wifi.)

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.
 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:

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 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:
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

1 2
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 Inventor.)

Hay, sin embargo, algunos entornos donde las conexiones inalámbricas no funcionarán.

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. Lamentablemente, los 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 tu computadora.
(Esto no es necesario para el método de wifi.)

Link de instalación de software para PC http://appinventor.mit.edu/explore/ai2/windows.html

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:

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.
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.

Para iniciar aiStarter en Windows, 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.

Nota: En Android 4.2 y posteriores, las opciones para desarrolladores están ocultas de manera predeterminada. Para que esté
disponible, vete a Ajustes> información del teléfono y pulsa (tap) siete veces sobre Número de compilación. Vuelve a la pantalla
anterior y en opciones de desarrollo, activa "Depuración USB".

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 : http://appinventor.mit.edu/test

(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, como en la imagen de abajo.
No serás capaz de utilizar la App Inventor con el cable USB hasta que resuelvas los problemas de conexión.
Paso 7. Conectar el teléfono por USB y sincronizar con App inventor

Desde el menú de App Inventor, vete al menú Connect y haz clic en la opción USB, si la conexión es exitosa podrás
ver en la pantalla de celular el trabajo realizado en la PC
Para acceder al programa para diseñar la aplicación se tiene que ir al
siguiente link http://ai2.appinventor.mit.edu

Se utilizará una cuenta de google, necesaria para guardar el proyecto

Para desarrollar la primera prueba se tiene que dar clic en el botón “comenzar una nuevo proyecto”
Colocar el nombre al proyecto
Al comenzar un nuevo proyecto nos aparecerá el área de trabajo
Seleccionar un Botón de las herramientas de interfaz de usuario y “arrastrarlo” al área de VISOR
Es posible modificar las propiedades del botón, como por ejemplo, la posición, el color de fondo y letra, tamaño
del botón
En la pestaña componentes seleccionar “Screen1”
En las propiedades de la “Screen1” o pantalla 1 hay que seleccionar el apartado ImagenDeFondo
Para cambiar el fondo de la pantalla.
Fondo de pantalla cambiado en la screen1
Botones para Añadir/eliminar más ventanas o pantallas
Dar Clic en Añadir Ventana y colocar el nombre de la nueva pantalla, para el ejemplo se nombra “Screen2”
Con esté botón podemos cambiar entre ventanas/pantallas
En la Ventana1/screen1 seleccionamos el modo bloques
Seleccionamos y “arrastramos” hacia la derecha el primer bloque que dice “cuando botón1 clic ejecutar”
El cual hace referencia al botón que insertamos y modificamos anteriormente
Aquí se nos muestra el bloque seleccionado
Dar clic en los bloques de “Control”
Seleccionar el bloque “ Abrir otra pantalla Nombre de la pantalla”, y se inserta en el hueco ejecutar
Del Anterior bloque
Dar clic en el bloque de Texto y seleccionar la primera opción que muestra un bloque de sólo comillas, después
Arrastrar dicho bloque e insertarlo en el hueco del bloque anterior

Bloque de comillas Aquí se va insertar

Colocar en el bloque de texto el nombre de la ventana/pantalla 2, es decir “Screen2”
Recuerda tendrás que repetir los pasos
anteriores de la ventana 1, pero ahora en la
ventana 2, para que puedas cambiar entre
pantallas al presionar o dar clic en el botón
que insertaste
En la pestaña PROYECTOS podrás importar el proyecto
a tu computadora en formato .aia
O bien podrás guardar el proyecto en la misma página
Web y cada vez que accedas con tu cuenta de google
Podrás editarlo.
En la pestaña GENERAR podrás descargar el archivo APK para instalar y probar tú aplicación en el celular, en caso de que
No puedas conectar el celular por USB o WIFI, pero también te servirá para enviarle el trabajo al docente.