Instalación y Configuración de App Inventor 2

Transcripción

1 Instalación y Configuración de App Inventor 2 alejandroterriza@ieslosangeles.es

2 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 elaborar y probar aplicaciones basadas en Android. MIT App Inventor 2 para 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

3 1. Entra en la web, está en inglés pero es muy intutiva 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

4 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

5 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 (en 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 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

6 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

7 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

8 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

9 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 le 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

10 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

11 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

12 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

13 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 se prepara la tarjeta. Cuando esté 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, Ayuda de Conexión para obtener información sobre lo que podría ir mal. 12

14 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

15 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

16 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

17 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

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

19 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

20 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