• Author / Uploaded
• Carolina Leal Velandia

Citation preview

Introducción al entorno de desarrollo móvil con App Inventor

1

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

Tabla de contenido 1. Introducción 2. Mapa conceptual 3. Introducción al mundo Android 3.1 Arquitectura de Android 4. Crear aplicaciones con App Inventor 4.1 Primeros pasos 4.1.1 Crear cuenta de Google 4.1.2 Sitio web de MIT App Inventor 2 5. Formas de conexión con App Inventor 5.1 Dispositivo Android conectado mediante Wifi a la misma red de datos 5.2 Utilizar emulador de Android 5.3 Utilizar conexión USB 6. Glosario 7. Referencias bibliográficas Control de documento Créditos Creative commons

2

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

1. Introducción App Inventor impactó el desarrollo de aplicaciones móviles para el sistema operativo Android desde su primera versión, debido a su filosofía de utilizar una interface de controles y programar sus eventos como piezas de puzzle o rompecabezas. Una de las principales ventajas de esta herramienta, es que permite desarrollar aplicaciones para Android sin altos conocimientos de programación. A su vez, App Inventor permite probar sus aplicaciones utilizando dispositivos físicos (tabletas o celulares) en un entorno conectado vía WIFI (como opción recomendada), o en caso de no tener dispositivo físico, por medio del emulador de un celular. Este recurso didáctico pretende brindar al Aprendiz conocimientos sobre App Inventor, teniendo en cuenta su historia y procesos de desarrollo, sus versiones y características, así como las pautas de configuración de la plataforma, para iniciar el desarrollo de aplicaciones con esta interesante herramienta tecnológica. 2. Mapa conceptual

Fuente: SENA

3

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

3. Introducción al mundo Android Android es un sistema operativo y una plataforma software, basado en Linux que puede usarse en teléfonos móviles, tabletas, netbooks, equipos portátiles o de escritorio. En el año 2007 la fundación Open Handset Alliance, (un consorcio de compañías de hardware, software y telecomunicaciones dedicado a avanzar en los estándares abiertos de los dispositivos móviles), presentó el primer móvil con sistema operativo Android, el HTC Dream, que en el año 2008 inició su proceso de comercialización. Android es el sistema operativo de Google y aunque lleva poco tiempo en el mercado, ha mostrado una evolución realmente impresionante, mediante las versiones que periódicamente libera al público en general. El historial de versiones viene desde la versión 1.0 lanzada en el 2008, hasta la versión más reciente de agosto del 2017, denominada OREO. Estas actualizaciones básicamente corrigen fallos de programa y agregan nuevas funcionalidades al sistema operativo. Desde abril de 2009, las versiones de Android adoptan denominaciones en clave asociadas a dulces (en inglés) y sus nombres siguen un orden alfabético: Cupcake, Donut, Eclair, Froyo, Gingerbread, Honeycomb, Ice Cream Sandwich, Jelly Bean, KitKat, Lollipop, Marshmallow, Nougat y el Android Oreo. En la siguiente imagen se muestran las capas que conforman el sistema operativo Android:

Figura 1. Capas del sistema Android. Fuente: Universidad Complutense de Madrid (s.f.)

4

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

La estructura del sistema operativo Android se compone de aplicaciones que se ejecutan en un framework Java de aplicaciones orientadas a objetos sobre el núcleo de las bibliotecas de Java, en una máquina virtual Dalvik con compilación en tiempo de ejecución hasta la versión 5.0, luego se cambió al entorno Android Runtime (ART). En lugar de utilizar una tradicional máquina virtual Java (VM), como Java ME (Java Mobile Edition), Android utiliza su propia máquina virtual personalizada, diseñada para asegurarse que la multitarea se ejecute de manera eficiente en un único dispositivo. Las bibliotecas escritas en lenguaje C, incluyen un administrador de interfaz gráfica (surface manager), administrador de superficies, un framework OpenCore, una base de datos relacional SQLite, una Interfaz de programación de API gráfica OpenGL ES 2.0 3D, un motor de renderizado WebKit, un motor gráfico SGL, SSL y una biblioteca estándar de C Libc. Actualmente este sistema operativo reúne a una gran comunidad de desarrolladores que están creando aplicaciones para extender la funcionalidad de los dispositivos. Existen varias tiendas de aplicaciones (gratuitas y pagas) como Google Play, tienda oficial de Google, y otras como Samsung Apps, de Samsung, que también proporcionan aplicaciones sobre Android. 3.1 Arquitectura de Android A continuación, los componentes principales del sistema operativo de Android: Aplicaciones Las aplicaciones base incluyen un cliente de correo electrónico, programa de SMS, calendario, mapas, navegador, contactos y otros. Todas las aplicaciones están escritas en lenguaje de programación Java. Marco de trabajo de aplicaciones Los desarrolladores tienen acceso completo a los mismos APIs del framework usados por las aplicaciones base. La arquitectura está diseñada para simplificar la reutilización de componentes; cualquier aplicación puede publicar sus capacidades y cualquier otra aplicación puede luego hacer uso de esas capacidades. Este mismo mecanismo permite que los componentes sean reemplazados por el usuario. Bibliotecas Android incluye un conjunto de bibliotecas de C/C++ usadas por varios componentes del sistema. Estas características se exponen a los desarrolladores a través del marco de trabajo de aplicaciones de Android; algunas son: System C library (implementación biblioteca C estándar), bibliotecas de medios, bibliotecas de gráficos, 3D y SQLite, entre otras. Runtime de Android (ART)

5

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

Entorno de ejecución que lleva a cabo la transformación de la aplicación en instrucciones de máquina, que luego son ejecutadas por el entorno de ejecución nativo del dispositivo. Desde la versión 5.0 lollipop de Android, reemplazó a Dalvik con las mismas funciones, pero mejoradas. A través de “ahead-of-time” (AOT), compila el código posterior a la instalación de la aplicación. Este archivo es utilizado al abrir la aplicación, con esto se evita que se compile continuamente, cada vez que está siendo ejecutada. Este componente ofrece mejoras de rendimiento, haciendo que el uso del procesador del móvil se reduzca y aumente la duración de la batería. También hace recolección de basura y posee funciones de depuración y perfilado. Mantiene compatibilidad con versiones anteriores, utilizando el mismo código de bytes de entrada que utilizaba Dalvik. Núcleo Linux Android depende de Linux para los servicios base del sistema como seguridad, gestión de memoria, gestión de procesos, pila de red y modelo de controladores. El núcleo también actúa como una capa de abstracción entre el hardware y el resto de la pila de software. 4. Crear aplicaciones con App Inventor App Inventor es una herramienta desarrollada por MIT (Massachusetts Institute of Technology) que permite el desarrollo de aplicaciones para Android, en comparación con la programación tradicional de aplicaciones para esta plataforma. Actualmente se encuentra la versión llamada MIT App Inventor 2 o AI2 con mejoras de la versión anterior. App Inventor se basa en una interface web, en la que se desarrolla la aplicación por medio de programación por bloques y una Companion App, o aplicación compañera, en donde se visualizará en tiempo real las modificaciones que se realicen en la interface web y en donde se podrá probar la aplicación a medida que se desarrolle.

2012 - 2017 Massachusetts Institute of Technology Figura 2. Logo MIT App Inventor. Fuente: MIT App Inventor (2017)

6

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

En la siguiente imagen se ilustran los pasos necesarios para crear una aplicación App Inventor:

Figura 3. Pasos para crear aplicación con App Inventor. Fuente: SENA

Para crear una aplicación en el sitio web MIT App Inventor hay que realizar dos pasos: • El diseño de la aplicación, en la que se seleccionan los componentes para su aplicación. • El editor de bloques, donde se van escogiendo los bloques necesarios según la aplicación a realizar. La aplicación aparecerá paso a paso en la pantalla del teléfono o en el emulador, a medida que se añadan piezas (bloques) a la misma, de modo que se puede ir probando mientras se elabora. Cuando se termine, se puede empaquetar la aplicación y producir una aplicación independiente para instalar. Si no se cuenta con un teléfono Android, es posible construir aplicaciones utilizando el emulador de Android, software que se ejecuta en el computador, e imita el sistema operativo del teléfono. El entorno de desarrollo de App Inventor es compatible con Mac OS X, Windows y Linux, y varios modelos de teléfonos Android populares. Las aplicaciones creadas con App Inventor se pueden instalar en cualquier dispositivo Android. Antes de poder utilizar App Inventor, es necesario configurar el computador e instaurar los archivos de instalación en el equipo. 4.1 Primeros pasos Para comenzar a trabajar con App Inventor se necesita: • Cuenta de Google (por ejemplo, una cuenta de correo de Gmail). • Dispositivo Android (puede ser teléfono o tableta) o en caso de no disponer de un dispositivo físico, se debe de descargar un emulador para ser ejecutado en el computador (este tema se analizará más adelante). • Si se cuenta con dispositivo Android, es necesario descargar la aplicación MIT AI2 Companion en el dispositivo. • Computador conectado a Internet con navegador Firefox o Google Chrome (recomendado) y posicionado en el sitio web de la aplicación MIT AI2.

7

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

Notas: - La manera más sencilla de desarrollar aplicaciones con App Inventor es utilizando un dispositivo Android conectado mediante Wifi a la misma red de datos. - App Inventor NO funciona con Internet Explorer. A continuación, se detallan las actividades a realizar para comenzar a trabajar con App Inventor: 4.1.1 Crear cuenta de Google Para empezar, es necesario crear un usuario de Google, vinculándose a los diferentes servicios como Maps, Play, Calendar, Gmail, Drive, Calendar, entre otros.

Figura 4. Crear cuenta de Google Fuente: Google

8

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

En caso de tener algún inconveniente en la creación de la cuenta de Gmail (por ejemplo, cuenta de correo ya existente) se podrá acceder a la siguiente página de soporte:

Figura 5. Centro de ayuda de Gmail Fuente: Google (2017)

4.1.2 Sitio Web de MIT App Inventor 2 En la siguiente imagen se puede visualizar los pasos en la herramienta:

9

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

Figura 6. Inicio con App Inventor 2. Fuente: MIT App Inventor (2017)

El acceso al entorno de desarrollo para empezar a crear aplicaciones con App Inventor, se puede lograr de dos maneras: • Ir al sitio web http://ai2.appinventor.mit.edu o • Dar clic en el botón naranja Create apps. situado en la parte superior derecha (ver imagen 5). En la página de Bienvenida a App Inventor, se exhibe un mensaje con nuevas versiones. También se presenta la opción de conectarse por medio de teléfono Android (o Tablet) o mediante emulador, si el usuario no posee ninguno de estos dispositivos.

Figura 7. Mensaje de Bienvenida. Fuente: MIT App Inventor (2017)

10

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

5. Formas de conexión con App Inventor Existen tres maneras de probar las aplicaciones desarrolladas App Inventor: • Utilizando un dispositivo físico Android conectado mediante Wifi a la misma red de datos (opción recomendada). • Utilizando un emulador, en este caso es necesario descargar software al computador según el sistema operativo del mismo. • En el caso de NO tener Wifi, es necesario descargar software al computador y conectar el dispositivo físico mediante USB. Esta opción puede ser complicada y se usa como último recurso.

Figura 8. Tipos de conexión. Fuente: MIT App Inventor (2017)

5.1. Dispositivo físico Android conectado mediante Wifi a la misma red de datos Esta es la opción recomendada. Se debe descargar la aplicación MIT AI2 Companion en el dispositivo tableta o celular. Ir a la opción de Google Play, buscar MIT AI2 Companion y dar clic en Instalar, como se ilustra en la siguiente imagen:

Figura 9. Instalar MIT AI2 Companion en el dispositivo. Fuente: Google Play Store (2017)

11

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

De esta manera, se instala el software en el dispositivo y queda listo para la sincronización de la aplicación en el dispositivo con el sitio web, para testear o probar las aplicaciones desarrolladas. Por último, se debe seleccionar el tipo de conexión: en la aplicación web de desarrollo de MIT App Inventor, ir al menú Connect o Conectar y seleccionar la opción AI Companion, de esta manera se define que el tipo de conexión es a través de un dispositivo físico Android y el entorno de desarrollo. 5.2. Utilizar emulador de Android En caso de que no se cuente con un dispositivo Android (celular o tableta), se procede a instalar un emulador en el PC. App Inventor proporciona uno que funciona igual que un dispositivo físico Android, apareciendo en la pantalla del computador y que resulta útil para probar las aplicaciones. Dependiendo del sistema operativo del computador, App Inventor proporciona diferentes tipos de emuladores: • Emulador para Mac OS X: en el siguiente link http://appinventor.mit.edu/explore/ai2/mac.html se encuentra el instructivo para instalarlo.

Figura 10. Instalación de emulador para Mac OS X Fuente: MIT App Inventor (2017)

12

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

• Emulador para Windows: las versiones de Windows compatibles son: Windows XP, Vista, Windows 7, 8.1 y Windows 10. En el siguiente link http://appinventor.mit.edu/explore/ai2/windows.html se encuentra el instructivo para instalar el emulador para Windows:

Figura 11. Instalación de emulador para Windows Fuente: MIT App Inventor (2017)

• Emulador para Linux: esta instalación requiere privilegios de super usuario (root). En el caso de tener alguna versión anterior de App Inventor instalada, esta se debe de remover previamente. En el siguiente link http://appinventor.mit.edu/explore/ai2/linux.html se encuentran las instrucciones para instalar el emulador para Linux.

Figura 12. Instalación de emulador para Linux Fuente: MIT App Inventor (2017)

13

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

• Descargar el instalador del emulador (según el sistema operativo). • Instalar el software (con usuario administrador del equipo), aceptar los términos de licencia y mantener la ruta por defecto de la instalación. • Una vez instalado el emulador, se recomienda reiniciar el equipo, debido a que se instala como un servicio del sistema operativo. • Ejecutar el emulador y mantenerlo en ejecución. • En la aplicación web de desarrollo de MIT App Inventor, ir al menú Connect o Conectar y seleccionar la opción Emulator o Emulador, de esta manera se define que el tipo de conexión es a través de un emulador y el entorno de desarrollo. • Esperar a que el sistema cargue el emulador en la pantalla, la cual tendrá una imagen similar a la siguiente:

Figura 13. Imagen del emulador de Android. Fuente: Aprende Android (2012)

5.3 Utilizar conexión USB En caso de que no se cuente con una red Wifi, pero se disponga de un dispositivo Android, se puede realizar la conexión entre el dispositivo y el computador por medio de un cable USB. Esta opción puede llegar a ser dispendiosa porque el sistema operativo del computador puede necesitar controladores adicionales para la conexión USB y el dispositivo Android.

14

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

App Inventor proporciona un programa de prueba que verifica si su dispositivo conectado a USB puede comunicarse con el computador. Se debe ejecutar esta prueba y resolver cualquier problema de conexión antes de intentar utilizar App Inventor con USB en ese dispositivo.

Figura 14. Prueba de conexión USB Fuente: MIT App Inventor (2017)

Básicamente los pasos para configurar la conexión USB son: - Según el sistema operativo, descargar e instalar el software de App Inventor 2: Mac OS X, Windows o Linux. • Descargar e instalar MIT App Inventor 2 Companion en el dispositivo desde la tienda Play Store. • Ejecutar el programa aiStarter, este programa es el ayudante que permite que el navegador se comunique con el emulador o el cable USB. El programa aiStarter se instala cuando se instaló el paquete de instalación de App Inventor. (No se necesita aiStarter si se está utilizando el dispositivo y la red Wifi). • Activar la depuración por USB: En el dispositivo Android, ir a Configuración del sistema, Opciones de desarrollador, activar y asegúrese de que está permitido “Depuración USB”. - En Android 4.0 y versiones posteriores, está en Configuración> Opciones de desarrollador. - En Android 4.2 y versiones posteriores, las opciones de desarrollador están ocultas de forma predeterminada. Para que estén disponibles, vaya a Configuración> Acerca del teléfono y toque Número de compilación siete veces. Regrese a la pantalla anterior para encontrar las opciones de desarrollador, incluido “Depuración USB”. • Conectar el dispositivo Android al computador con el cable USB: Se debe asegurar que el dispositivo se conecte como un “dispositivo de almacenamiento masivo” (no “dispositivo multimedia”) y que no esté montado como un disco en su computadora.

15

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

En Android 4.2.2 y versiones posteriores, el dispositivo aparecerá en pantalla con el mensaje “Permitir depuración USB?” La primera vez que se conecta al computador. Presionar “OK”. Esto permite que el computador se comunique con el dispositivo. • Por último, se debe testear la conexión en el siguiente link: http://appinventor.mit.edu/test/

Figura 15. Test de conexión MIT App Inventor Fuente: MIT App Inventor (2017)

- Esta es la página de prueba de conexión (se abre en una nueva pestaña en el navegador) y verifica si se obtiene una confirmación de que el computador puede detectar el dispositivo. Si la prueba falla, vaya a la “Ayuda” de conexión general (Get aiStarter Help). No se podrá usar App Inventor con el cable USB hasta que se resuelvan los problemas de conexión. Una vez la prueba de conexión sea satisfactoria, se puede empezar a utilizar App Inventor con el dispositivo Android a través de una conexión USB. 6. Glosario API: Application Programming Interface, conjunto de funciones, subrutinas y procedimientos que pueden ser reutilizados por el desarrollador. Emulador: en informática, es un software o hardware que permite el uso de un dispositivo o programa como si fuese otro. App Inventor permite probar sus aplicaciones por medio de un emulador, si no se cuenta con dispositivos físicos.

16

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

Máquina virtual: software que emula un computador como si fuese uno real. Se ejecuta en una ventana dentro del sistema operativo actual como cualquier otro programa. Memoria: dispositivo que retiene, almacena y recupera datos. Es uno de los componentes principales de un sistema informático. MIT: Massachusetts Institute of Technology, Universidad privada estadounidense, que desarrolló la herramienta App Inventor, la cual permite el desarrollo de aplicaciones para Android. USB: Universal Serial Bus (Bus Universal en Serie) tecnología estándar que define los cables, conectores y protocolos usados para conectar, comunicar y suministrar corriente eléctrica entre computadoras y dispositivos electrónicos. WIFI: tecnología de comunicación inalámbrica que permite conectar dispositivos electrónicos, mediante el uso de radiofrecuencias o infrarrojos para la trasmisión de la información. 7. Referencias bibliográficas AndroidZone (2013, mayo 21). Historia de Android: La evolución a lo largo de sus versiones. [Web log post]. Recuperado de https://androidzone.org/2013/05/historia-de-android-evolucion-versiones/ MIT App Inventor (2017). Tutorials for App Inventor. Recuperado de http://azinventor.mit.edu Moreno Parra, R. (2016). Desarrollo de aplicaciones para Android usando MIT App Inventor 2. Recuperado de http://www.bolanosdj.com.ar/MOVIL/LENGUAJES/Usando-MIT-App-Inventor-2.pdf Universidad de Castilla La Mancha. (2015). Curso de App Inventor. Escuela Superior de Informática. Recuperado de http://webpub.esi.uclm.es/img/upload/plugin/ESI-TechLab-AppInventor2-2015beta.pdf Control de documento

17

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

18

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje