Tema 0 Requisitos Previos Introducción MIT App Inventor es una herramienta de programación basada en bloques predefinidos que permite a cualquier persona, incluso aquellas que nunca han programado, empezar a programar y construir app’s completamente funcionales para dispositivos Android. Inicialmente desarrollado por el profesor Hal Abelson y el equipo de Google Education, en la actualidad App Inventor 2 funciona como un servicio web administrado por el personal del MIT’s Center for Mobile Learning que Learning que a su vez forma parte del MIT’s Computer Science and Artifical Intelligence Laboratory y y del MIT Media Lab. Lab. Alrededor de App Inventor existe una comunidad formada por casi dos millones de usuarios de más de 195 países de todo el mundo. Si quieres obtener más información puedes visitar su web oficial en http://appinventor.mit.edu.
Cómo funciona Para poder crear nuestras propias app’s para Android con App Inventor 2 tan sólo es necesario disponer de un navegador web instalado en nuestro ordenador así como de una cuenta de Gmail. Respecto al navegador web, actualmente App Inventor no funciona con Microsoft Internet Explorer, por ello, si usas un equipo con Windows necesitarás disponer de otro navegador diferente. Si eres usuario de Linux o MAC no tendrás ningún problema con el navegador que dichos sistemas traen preinstalado aunque, si lo prefieres, también puedes instalar otro adicional. Para los usuarios de Windows, te recomendamos que utilices Mozilla Firefox, o bien, Google Chrome. Si no tienes aún ninguno de ellos puedes descargarlos e instalarlos de forma totalmente gratuita desde su web oficial: •
Web oficial de Mozilla Firefox.
•
Web oficial de Google Chrome.
Juan Francisco Fuster
s o i v e r p s o t i s i u q e R
1
Respecto a la cuenta de correo electrónico, debes disponer de una cuenta de Gmail para poder acceder a App Inventor 2. Si aún no tienes una, puedes obtener una completamente gratis registrándote en Gmail. Ten presente que puesto que App Inventor 2 es una herramienta de cloud computing también será imprescindible que dispongas de una conexión a Internet cada vez que quieras sentarte a trabajar. En resumen, para crear una app con App Inventor, nos conectaremos con un navegador web a su web (http://ai2.appinventor.edu.mit), iniciaremos sesión con nuestra cuenta de Gmail y ya podremos empezar a programar.
El trabajo se desarrollará únicamente en dos ventanas: •
•
Diseñador: Desde aquí podremos seleccionar los componentes que queremos integrar en nuestra app a partir de una colección de componentes predefinidos bastante amplia y completa. Editor de bloques: Lo usaremos para definir cuál debe ser las acciones que deben realizar cada uno de los componentes incluidos en nuestra app.
Juan Francisco Fuster
s o i v e r p s o t i s i u q e R
2
Para facilitar aún más nuestro trabajo, App Inventor permite comprobar cómo funciona la app a medida que la vamos creando y, para ello, ofrece dos posibilidades distintas: •
•
usar nuestro propio dispositivo Android conectado al ordenador, o bien, usar un emulador, es decir, un programa que se comporta como si se tratase de un móvil Android auténtico.
Tanto en un caso como en otro será necesario realizar algunos ajustes a nuestro ordenador y/o a nuestro dispositivo. Lo explicamos en el punto siguiente.
Configuración Una buena forma de aprender a programar una app es poder comprobar cómo funciona a medida que vamos creándola, y para ello es necesario configurar el dispositivo Android y/o el ordenador. Existen tres alternativas diferentes para conseguirlo que pasamos a explicar a continuación. Escoge aquella que se adapte mejor a tu caso. Opción 1.- Dispongo de un móvil o tableta Android y está conectado vía Wi-Fi a la misma red que el ordenador. Esta es la opción recomendada. Opción 2.- No dispongo de un dispositivo Android y quiero usar el emulador de Android. Opción 3.- Dispongo de un dispositivo Android pero no tengo conexión Wi-Fi. Tendrás que conectar tu dispositivo al ordenador usando su cable USB.
Opción 1.- Conecta tu móvil o tableta con Wi-Fi
Sigue estos pasos para poder probar tus app’s en tu dispositivo Android. Paso 1: Descarga e instala la app MIT AI2 Companion en tu dispositivo.
Juan Francisco Fuster
s o i v e r p s o t i s i u q e R
3
En tu dispositivo, abre la aplicación Play Store y escribe en el cuadro de búsqueda: “MIT AI2 Companion”. Selecciona la app que aparece, descárgala e instálala en tu dispositivo.
Paso 2: Conecta tu dispositivo y tu ordenador a la misma Wi-Fi.
Paso 3: Abre un proyecto de App Inventor.
Cuando estés trabajando en una app, haz clic en “Connect” y después sobre “AI Companion” para poder ver tu app en tu dispositivo. Este proceso puede tardar unos segundos pero te permitirá probar la app en tu dispositivo a medida que la vas creando. Este método de trabajo se conoce como “prueba en vivo” o “live testing” en inglés. Aparecerá en tu pantalla un código QR. En tu dispositivo ejecuta la aplicación MIT AI2Companion como harías con cualquier otra. Después, toca sobre la opción “Scan QR code” en tu dispositivo:
Alternativamente, puedes teclear el código que aparece en pantalla junto al QR (en el caso del ejemplo “dafjjs”) y teclearlo directamente en tu dispositivo en el cuadro llamado “SixDigitCode”. Cuando creemos nuestra primera app en el tema 1 lo podrás comprobar tu mismo.
Juan Francisco Fuster
s o i v e r p s o t i s i u q e R
4
Opción 2.- Instalar y ejecutar el emulador de App Inventor 2 App Inventor dispone de un emulador Android que funciona igual que cualquier dispositivo Android pero que aparece en la pantalla del ordenador. Así pues, puedes comprobar tus app’s en el emulador aunque no tengas ningún dispositivo Android. Para poder usar el emulador el primer paso consiste en instalar un programa en tu ordenador. Existen tres versiones diferentes del mismo: una para Windows, otra para Linux y también una tercera para MAC. Escoge aquella que se corresponda con tu ordenador.
Paso 1.- Instalar el programa aiStarter. En un sistema Windows. El programa funciona en cualquiera de las siguientes versiones de Windows: Windows XP, Windows 7 y Windows 8. Primero descarga el programa: http://appinv.us/aisetup_windows Después instálalo en tu ordenador. Necesitarás hacerlo con una cuenta de usuario con permisos de administrador. Una vez finalizada la instalación, verás en el escritorio de Windows un acceso directo nuevo. Tendrás que ejecutar dicha aplicación cada vez que quieras usar el emulador y no cerrarla durante todo el tiempo que estés trabajando en tu app.
En un sistema Linux. Necesitarás permisos de súper administrador (root) para poder completar el proceso.
Juan Francisco Fuster
s o i v e r p s o t i s i u q e R
5
Nota: El programa de instalación es un programa de 32bits. Si usas una versión de Linux de 64bits tendrás que instalar los paquetes necesarios para poder ejecutar programas de 32bits. Consulta en la ayuda de tu distribución de Linux. Primero, descarga el paquete de instalación. Se trata de un archivo llamado appinventor2-setup_1.1_all.deb. Después, busca el archivo descargado (normalmente estará en la carpeta de Descargas) y ejecútalo con doble clic. Introduce la contraseña de súper administrador cuando tu Linux te pregunte por ella y sigue las instrucciones de instalación. Alternativamente, puedes realizar la instalación manualmente desde una ventana de comandos usando la orden: sudo dpkg --install appinventor2-setup_1.1_all.deb El programa aiStartet se instalará en el directorio /usr/google/appinventor y tendrás que lanzar su ejecución manualmente cuando quieras probar la app en la que estás trabajando en tu dispositivo durante su desarrollo.
En un sistema MAC. Para empezar, descarga el paquete de instalación: http://appinv.us/aisetup_mac Después, haz doble clic sobre el archivo descargado que estará en la carpeta de Descargas.
Sigue las instrucciones de instalación e introduce tu contraseña cuando el sistema te la solicite. A diferencia de Windows y Linux, en MAC el programa aiStarter se ejecutará automáticamente cuando sea necesario para revisar tu app en tu dispositivo Android. Juan Francisco Fuster
s o i v e r p s o t i s i u q e R
6
Paso 2.- Ejecutar el programa aiStarter En Windows y en Linux, antes de poder usar el emulador para probar tu aplicación mientras trabajas en ella, tendrás que ejecutar manualmente el programa aiStarter instalado en el paso 1. Los usuarios de MAC no tienen que hacer nada en este paso. Paso 3.- Abre un proyecto de App Inventor y conéctalo al emulador Abre la web de App Inventor y abre un proyecto. Después, desde el menú “Connect” haz clic en la opción “Emulator”:
Verás una ventana que te indica que el emulador se está conectando. ¡Atención! Poner en funcionamiento el emulador puede necesitar entre 2 y 4 minutos, ¡debes ser paciente!
s o i v e r p
Esta es la secuencia en imágenes del proceso de carga del emulador. Juan Francisco Fuster
s o t i s i u q e R
7
s o i v e r p
¡Atención! Juan Francisco Fuster
s o t i s i u q e R
8
La primera vez que usas el emulador verás en su pantalla un mensaje que te pide actualizarlo. Sigue las instrucciones que aparecerán en pantalla para completar su actualización. Esta operación sólo será necesario realizarla una única vez.
Opción 3.- Conecta tu móvil o tableta con su cable USB.
La conexión USB entre tu ordenador y tu dispositivo Android requiere: 1. Instalar el programa aiStarter en tu ordenador. Existen tres versiones diferentes del mismo programa; una para Windows, otra para Linux y otra para MAC. El proceso de instalación ya fue tratado en la Opción 2 descrita anteriormente. Revísala para conocer cómo debes instalar dicho software. 2. Instalar la app MIT AI2 Companion en tu dispositivo. Este punto ya fue tratado en la Opción 1 descrita anteriormente. Revísala para conocer cómo debes instalar dicha app. 3. Lanzar la aplicación aiStarter (sólo los usuarios de Windows y Linux). Este procedimiento fue explicado en la Opción 2 descrita anteriormente. Revísala para conocer cómo debes ejecutar aiStarter. 4. Configura tu dispositivo Android para habilitar la “depuración”. En tu dispositivo, ve a Ajustes, y activa la casilla correspondiente a “Opciones de desarrollo”, asegúrate también que la opción “Depuración USB” está activada. Si tu dispositivo utiliza Android 3.2 o anterior, podrás encontrar esta opción en Ajustes, Aplicaciones, Desarrollo. Nota: En Android 4.2 o posterior, las “opciones de desarrollo” están ocultas de forma predeterminada. Para hacerlas visibles: a. Ve a Ajustes, Acerca del teléfono. b. Toca entre 5 y 8 veces sobre “Número de compilación”. Verás un mensaje en pantalla cuando las opciones de desarrollo se hayan habilitado. c. Pulsa el botón de volver atrás y las “Opciones de desarrollo” ya estarán disponibles. Juan Francisco Fuster
s o i v e r p s o t i s i u q e R
9
5. Conecta tu dispositivo al ordenador usando el cable USB. Asegúrate que tu dispositivo se conecta como “dispositivo de almacenamiento” y no como “dispositivo multimedia”. En Android 4.2.2 o posteriores, la primera vez tu dispositivo preguntará “¿Permitir depuración USB?” y debes responder que sí. Esto habilita la comunicación entre el dispositivo y el ordenador. Si utilizas distintos ordenadores tendrás que repetir el proceso en cada uno de ellos. 6. Prueba la conexión. Abre la página web de comprobación y verifica si todo funciona correctamente. Abrir la página de comprobación: http://appinventor.mit.edu/test
Para cualquier problema con la configuración consulta estas páginas: Problemas de conexión del dispositivo o el emulador: http://appinventor.mit.edu/explore/ai2/connection-help.html
Problemas generales: http://appinventor.mit.edu/explore/ai2/support/troubleshooting.html
Toda la información descrita en este tema se puede encontrar ampliada en la web oficial de App Inventor (en inglés): http://appinventor.mit.edu/explore/ai2/setup.html
Llegados a este punto, si todo ha ido bien, ya estás preparado o preparada para crear tu primera app para Android con App Inventor 2. ¡Enhorabuena!
s o i v e r p
Juan Francisco Fuster
s o t i s i u q e R
10
