Guía instalación App Inventor by Ricardo Valdez

Instituto de Cooperación Social - ICOS “Infancia es Destino”

Guía de Instalación Programando aplicaciones para dispositivos móviles Android utilizando App Inventor. Ricardo Valdez

NIVEL DE EDUCACIÓN PRIMARIO

La realización de esta guía estuvo a cargo del siguiente equipo:

Coordinado por: Licda. Karina Melendez Directora Técnico Pedagógica ICOS Edición y diseño Ricardo Vidal Valdez Cutzal Epesista ECYS-USAC Asesoría técnica José Ricardo Morales Prado Ingeniero en Ciencias y Sistemas Asesoría pedagógica

Luis Angel Diego Docente área computación

Colaboración Inga. Sasha Palencia, Angélica Esmeralda Valdez

This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.

Guía Instalación APP Inventor Contenidos:  Requisitos del Sistema  App Inventor en Casa o Con conexión a Internet o Sin conexión a Internet (local)  App Inventor en la Escuela  ¿Cómo probar mi aplicación? o Dispositivo móvil con conexión Wifi o Dispositivo móvil con conexión por cable o Emulador

 Requisitos del sistema Ordenador y el sistema operativo   

Macintosh (con procesador Intel): Mac OS X 10.5 o superior De Windows: Windows XP, Windows Vista, Windows 7 GNU / Linux: Ubuntu 8 o superior, Debian 5 o superior Navegador

   

Mozilla Firefox 3.6 o superior 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

En esta guía se realizarán las configuraciones necesarias para instalar App Inventor en el sistema operativo Windows.

 App Inventor en Casa Con conexión a Internet Si cuentas con una conexión a Internet para trabajar bastará con crear o utilizar una cuenta de Google para empezar. Si necesitas trabajar de forma local sin una conexión a Internet ve a la siguiente sección. Paso 1: Deberás de crear una cuenta de Google (https://accounts.google.com/) siguiendo las instrucciones de la página para crear una nueva cuenta. Si ya dispones de una cuenta no es necesario realizar este paso. Paso 2: Buscamos “App Inventor” en el navegador de Google y hacer clic sobre MIT App Inventor - Massachusetts Institute of Technology.

Paso 3: En la página abierta hacer clic sobre el botón Create apps!

Paso 4: Si no hemos abierto sesión en Google, el navegador nos pedirá que lo hagamos ahora, y luego solicitará permisos para asociar la cuenta.

Al hacer clic sobre Permitir veremos nuestra página en App Inventor.

Paso 5: Cambiar idioma Si el texto de la pantalla anterior está en inglés, se puede cambiar el idioma dando clic en el menú superior de la pantalla, donde se encuentra la palabra English, se desplegará los diferentes idiomas que se puede utilizar App Inventor, seleccionar Español y se recargará la página con el texto de la pantalla en español.

¡Ahora ya pueden empezar a construir tus aplicaciones móviles con App Inventor! Para probar la aplicación ir a ¿Cómo probar mi aplicación?

Sin conexión de Internet Si necesitas trabajar de forma local sin una conexión a Internet deberás de instalar App Inventor 2 Ultimate. Características de App Inventor 2 Ultimate:  Es una aplicación desarrollada por krupong, permite trabajar sin estar conectados a internet, es decir en modo offline.  Una de las buenas características que tiene App inventor 2 Ultimate es que las aplicaciones pueden tener un tamaño superior a 5 MB, es decir el App inventor 2 normal no puede contener aplicaciones mayores de 5 MB, en cambio App inventor 2 Ultimate sí.  Existe una versión Portable, es decir, que no hay que instalarla, simplemente bajamos y descomprimimos el archivo y luego pulsamos en el icono de ejecución.  Deberás de tomar en cuenta que las aplicaciones creadas en tú computadora únicamente se podrán trabajar localmente, pero puedes exportar tú proyecto en formato “.aia” e importarlo en otra computadora o desde el sitio oficial, para seguir trabajando. Paso 1: Para iniciar deberás saber el tipo de sistema el que tienes instalado. Para esto hacer clic en el botón de inicio, seleccionar Panel de control, Sistema y seguridad, y por último en Sistema (Panel de control\Sistema y seguridad\Sistema). Dentro de la información buscar el tipo de sistema, puede que aparezca Sistema Operativo de 32 bits o 64 bits.

Paso 2: Deberás de ingresar a https://sourceforge.net/projects/ai2u/files/, buscar la versión más reciente y descargar el archivo AI2U para el tipo de sistema (32 o 64 bits) de tú computadora.

Paso 3: Hacer doble clic sobre el archivo descargado, seleccionar el idioma ingles y hacer clic en el botón “next”, seguir las instrucciones, puedes dejar las opciones por defecto, hasta finalizar la instalación, esta puede tardar algunos minutos.

Finalizada la instalación se creará una nueva carpeta en el menú de inicio.

Cada vez que se desee usar App Inventor se deberá de realizar los siguientes pasos. Paso 4: En el menú de inicio buscar la carpeta App Inventor 2 Ultimate, hacer clic sobre App Inventor 2 Server.

La primera vez que se ejecute el programa aparecerá una ventana para configurar permisos, hacer clic en “Permitir acceso”.

Aparecerá una pantalla negra (consola), no deberás de cerrarlas, ya que si la cierras se detendrá el servicio de App Inventor.

Paso 5: Para utilizar App Inventor es necesario ingresar desde un navegador. Debemos escribir en la barra de navegación la dirección http://localhost:8888/.

Al hacer clic sobre el botón “Log In” veremos nuestra página en App Inventor.

¡Ahora ya pueden empezar a construir tus aplicaciones móviles con App Inventor! Para probar la aplicación ir a ¿Cómo probar mi aplicación?

 App Inventor en la Escuela Para trabajar App Inventor en un salón de clases hay diferentes opciones. Para realizar las clases te recomendamos ver la guía para docente y la guía para estudiante. Las opciones son las siguientes:

o Con conexión a Internet: Si las computadoras del salón de clase tienen conexión a Internet y no tienen restringido el acceso a la creación de cuentas de Google y al sitio de App Inventor, te recomendamos que cada estudiante utilice una cuenta de Google personal e ingrese al sitio oficial de App Inventor. Esto dará la oportunidad de seguir descubriendo y probando nuevas aplicaciones en el salón de clase y en casa. Ver App Inventor en Casa con conexión a Internet.

o Sin conexión a Internet o Sin red local Si las computadoras del salón de clase no tienen conexión a Internet y no están conectadas a una red local, te recomendamos que en cada computadora se instale App Inventor 2 Ultimate para que puedan trabajar de forma local. Ver App Inventor en Casa sin conexión a Internet. La desventaja será que cada estudiante deberá de iniciar el App Inventor 2 Server en su computadora cada vez que desee trabajar por lo que te recomendamos que agregues un acceso directo en la barra de tareas para agilizar este paso.

o Con red local Si las computadoras del salón de clase no tienen conexión a Internet y están conectadas a una red local, te recomendamos que utilices una computadora como servidor (por ejemplo la computadora del docente) y se instale App Inventor 2 Ultimate para que puedan trabajar los estudiantes a través de la red. Ver App Inventor en Casa sin conexión a Internet. El docente deberá iniciar el App Inventor 2 Server en su computadora cada vez que deseen trabajar. Los estudiantes deberán ingresar desde un navegador al App Inventor del docente por medio de la dirección con el nombre de la computadora (Ejemplo: http://LUIS_ANGEL:8888/) o la ip (Ejemplo: http://192.168.|.|:8888/). La ventaja será que todo lo trabajado se almacenará en el App Inventor del docente, y podrá apoyar al estudiante desde su computadora. Recomendamos que al momento de crear un proyecto, este lleve alguna inicial o código del estudiante, para poder identificarlo, ya que se encontrará en el mismo espacio y con esto se evita confusión o problemas por crear con el mismo nombre.

¡Ahora ya pueden empezar a construir tus aplicaciones móviles con App Inventor! Para probar la aplicación ir a ¿Cómo probar mi aplicación?

Servidor App Inventor PC: LUIS_ANGEL

Clientes App Inventor (http://LUIS_ANGEL:8888/) Emulador App Inventor

Topología de red taller de computación en el Instituto de Cooperación Social – ICOS – Ciudad de Guatemala

 ¿Cómo probar mi aplicación? Para probar una aplicación construida en App Inventor existen diferentes formas de hacerlo, de acuerdo a tus recursos y necesidades. 

Si cuentas con un dispositivo móvil Android y conexión Wifi, recomendamos probar con las tres formas propuestas en esta guía.



Si cuentas con un dispositivo móvil Android y no cuentas con conexión Wifi, te recomendamos probar con la opción 2 y la opción 3.



Si no cuentas con un dispositivo móvil Android puede utilizar el emulador (opción 3).



En un salón de clases podrías utilizar las tres opciones de acuerdo a los recursos con los que dispongas o si los estudiantes llevan su dispositivo móvil.



Puedes generar el archivo APK y transferirlo a tú dispositivo móvil, no es la forma más práctica para probar pero es otra opción.

Opción 1: Utilizando un dispositivo móvil y conexión Wifi

http://appinventor.mit.edu/explore/sites/all/files/SetupAI2/WifiA.png

Paso 1: Descarga e instala App MIT AI2 Companion en tú dispositivo móvil desde la Play Store. Únicamente necesitas instalarla una vez y a partir de ahí ejecutarla cada vez que uses App Inventor.

Paso 2: Conecta tu computadora 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: Ve a App Inventor y abre un proyecto (o crea uno nuevo). Entonces elige "Conectar" 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 el dispositivo. Se irá actualizando a medida que vayas realizando cambios tanto en el diseño como en el comportamiento, 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 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: Utilizando un dispositivo móvil y conexión por medio de un cable de datos.

http://appinventor.mit.edu/explore/sites/all/files/SetupAI2/USB.png

Paso 1: Deberás de ingresar a http://appinventor.mit.edu/explore/ai2/windows.html, buscar el link de descarga para la aplicación App_Inventor_Tools.

Paso 2: Hacer doble clic sobre el archivo descargado, seguir las instrucciones, puedes dejar las opciones por defecto, hasta finalizar la instalación, esta puede tardar algunos minutos.

Paso 3: Descarga e instala App MIT AI2 Companion en tú dispositivo móvil desde la Play Store. Únicamente necesitas instalarla una vez y a partir de ahí ejecutarla cada vez que uses App Inventor.

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

Cada vez que se desee usar App Inventor utilizando un dispositivo móvil conectado por medio de un cable de datos se deberá de realizar los siguientes pasos. Paso 5: En el menú de inicio buscar la carpeta Mit App Inventor Tools, hacer clic sobre aiStarter.

La primera vez que se ejecute el programa aparecerá una ventana para configurar permisos, hacer clic en “Permitir acceso”.

Aparecerá una pantalla negra (consola), no deberás de cerrarlas, ya que si la cierras se detendrá el servicio de aiStarter.

Paso 6: Conecte el ordenador y el dispositivo. Conecte su dispositivo móvil 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. 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 7: 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 tú 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.

Paso 8: Ejecuta App MIT AI2 Companion en tú dispositivo móvil. Ve a App Inventor y abre un proyecto (o crea uno nuevo). Entonces elige "Conectar" y "USB" en el menú principal. Esto deberá de permitir probar la aplicación en tú dispositivo móvil.

Opción 3: Utilizando un emulador

http://appinventor.mit.edu/explore/sites/all/files/SetupAI2/USB.png

Paso 1: Deberás de ingresar a http://appinventor.mit.edu/explore/ai2/windows.html, buscar el link de descarga para la aplicación App_Inventor_Tools.

Sí estas usando MIT App Inventor 2 Ultimate puedes descargar desde https://sourceforge.net/projects/ai2u/files/ buscar la versión más reciente de AI2 Starter y descargar el archivo.

Únicamente deberás de descargar uno de los archivos. Sí no te funciona el emulador, puedes descargar el archivo que no descargaste e instalar para probar.

Paso 2: Hacer doble clic sobre el archivo descargado, seguir las instrucciones, puedes dejar las opciones por defecto, hasta finalizar la instalaciรณn, esta puede tardar algunos minutos.

Cada vez que se desee usar App Inventor utilizando el emulador se deberá de realizar los siguientes pasos. Paso 3: En el menú de inicio buscar la carpeta “Mit App Inventor Tools” o “App Inventor 2 Starter”, hacer clic sobre aiStarter o Ai2 Starter.

La primera vez que se ejecute el programa aparecerá una ventana para configurar permisos, hacer clic en “Permitir acceso”.

Aparecerá una pantalla negra (consola), no deberás de cerrarlas, ya que si la cierras se detendrá el servicio del emulador.

Paso 5: Ve a App Inventor y abre un proyecto (o crea uno nuevo). Entonces elige "Conectar" y "Emulador" en el menú principal. Tardará unos minutos en conectarse al emulador.

En unos emulador. tanto en denomina

minutos, deberías poder ver la app que estás construyendo en el Se irá actualizando a medida que vayas realizando cambios el diseño como en el comportamiento, esta característica se le “live testing” (prueba en directo).

Puedes dejar un acceso directo a AiStarter o Ai2Starter en la barra de tareas para facilitar el inicio del emulador. Esto te facilitará la búsqueda, o en caso de estar trabajando con estudiantes les será más fácil realizar el paso de iniciar el emulador. Para esto deberás de buscar en el menú de inicio y buscar AiStarter o Ai2Stater hacer clic derecho y seleccionar “Anclar a Barra de Tareas”,

Deberá de aparecerte el icono del programa en la barra de tareas.

Fuentes Consultadas 

Instalación App Inventor 2. Ricoy Riego Antonio. https://sites.google.com/site/appinventormegusta/instalacion septiembre de 2015].



Guía

iniciación

App

Inventor

[en línea]. [Consulta:

[en

http://codeweek.eu/resources/spain/guia-iniciacion-app-inventor.pdf [Consulta: septiembre de 2015].

línea].