Lectura Rápida 11 (Aplicacion Android con App Inventor)

Vista previa del material en texto

See discussions, stats, and author profiles for this publication at: https://www.researchgate.net/publication/320014500
Crea tu primera aplicación Android con App Inventor
Technical Report · September 2017
DOI: 10.13140/RG.2.2.30688.99841
CITATIONS
0
READS
3,491
1 author:
Some of the authors of this publication are also working on these related projects:
Repositorio Institucional INECOL View project
Sistema de Información Académica View project
Julio Cesar Sandria-Reynoso
Universidad Tecnológica del Sureste de Veracruz
28 PUBLICATIONS   3 CITATIONS   
SEE PROFILE
All content following this page was uploaded by Julio Cesar Sandria-Reynoso on 25 September 2017.
The user has requested enhancement of the downloaded file.
https://www.researchgate.net/publication/320014500_Crea_tu_primera_aplicacion_Android_con_App_Inventor?enrichId=rgreq-9371012ea9c7d03b027f10c5ea063d9f-XXX&enrichSource=Y292ZXJQYWdlOzMyMDAxNDUwMDtBUzo1NDIzMzEzNDg5NDY5NDRAMTUwNjMxMzI3NzI4OQ%3D%3D&el=1_x_2&_esc=publicationCoverPdf
https://www.researchgate.net/publication/320014500_Crea_tu_primera_aplicacion_Android_con_App_Inventor?enrichId=rgreq-9371012ea9c7d03b027f10c5ea063d9f-XXX&enrichSource=Y292ZXJQYWdlOzMyMDAxNDUwMDtBUzo1NDIzMzEzNDg5NDY5NDRAMTUwNjMxMzI3NzI4OQ%3D%3D&el=1_x_3&_esc=publicationCoverPdf
https://www.researchgate.net/project/Repositorio-Institucional-INECOL?enrichId=rgreq-9371012ea9c7d03b027f10c5ea063d9f-XXX&enrichSource=Y292ZXJQYWdlOzMyMDAxNDUwMDtBUzo1NDIzMzEzNDg5NDY5NDRAMTUwNjMxMzI3NzI4OQ%3D%3D&el=1_x_9&_esc=publicationCoverPdf
https://www.researchgate.net/project/Sistema-de-Informacion-Academica?enrichId=rgreq-9371012ea9c7d03b027f10c5ea063d9f-XXX&enrichSource=Y292ZXJQYWdlOzMyMDAxNDUwMDtBUzo1NDIzMzEzNDg5NDY5NDRAMTUwNjMxMzI3NzI4OQ%3D%3D&el=1_x_9&_esc=publicationCoverPdf
https://www.researchgate.net/?enrichId=rgreq-9371012ea9c7d03b027f10c5ea063d9f-XXX&enrichSource=Y292ZXJQYWdlOzMyMDAxNDUwMDtBUzo1NDIzMzEzNDg5NDY5NDRAMTUwNjMxMzI3NzI4OQ%3D%3D&el=1_x_1&_esc=publicationCoverPdf
https://www.researchgate.net/profile/Julio_Sandria-Reynoso?enrichId=rgreq-9371012ea9c7d03b027f10c5ea063d9f-XXX&enrichSource=Y292ZXJQYWdlOzMyMDAxNDUwMDtBUzo1NDIzMzEzNDg5NDY5NDRAMTUwNjMxMzI3NzI4OQ%3D%3D&el=1_x_4&_esc=publicationCoverPdf
https://www.researchgate.net/profile/Julio_Sandria-Reynoso?enrichId=rgreq-9371012ea9c7d03b027f10c5ea063d9f-XXX&enrichSource=Y292ZXJQYWdlOzMyMDAxNDUwMDtBUzo1NDIzMzEzNDg5NDY5NDRAMTUwNjMxMzI3NzI4OQ%3D%3D&el=1_x_5&_esc=publicationCoverPdf
https://www.researchgate.net/profile/Julio_Sandria-Reynoso?enrichId=rgreq-9371012ea9c7d03b027f10c5ea063d9f-XXX&enrichSource=Y292ZXJQYWdlOzMyMDAxNDUwMDtBUzo1NDIzMzEzNDg5NDY5NDRAMTUwNjMxMzI3NzI4OQ%3D%3D&el=1_x_7&_esc=publicationCoverPdf
https://www.researchgate.net/profile/Julio_Sandria-Reynoso?enrichId=rgreq-9371012ea9c7d03b027f10c5ea063d9f-XXX&enrichSource=Y292ZXJQYWdlOzMyMDAxNDUwMDtBUzo1NDIzMzEzNDg5NDY5NDRAMTUwNjMxMzI3NzI4OQ%3D%3D&el=1_x_10&_esc=publicationCoverPdf
Instituto de Robótica de Xalapa A.C. 
Crea tu primera aplicación Android con App Inventor 
Julio César Sandria Reynoso 
Técnico Académico, Instituto de Ecología, A.C., julio.sandria@inecol.mx 
Septiembre 2017 
Contenido 
Resumen ................................................................................................................................. 1 
Introducción ........................................................................................................................... 1 
Aplicaciones para dispositivos móviles .................................................................................. 2 
Sistema operativo Android ..................................................................................................... 3 
App Inventor ........................................................................................................................... 3 
Cuenta de Google ................................................................................................................... 3 
Iniciar App Inventor 2 ............................................................................................................. 4 
Comenzar un nuevo proyecto ................................................................................................ 6 
Agregar una etiqueta .............................................................................................................. 8 
Agregar un botón .................................................................................................................... 9 
Generar aplicación ................................................................................................................ 10 
Descargar e instalar la aplicación en Android ...................................................................... 11 
Programar botón Cerrar ....................................................................................................... 12 
Conclusiones ......................................................................................................................... 15 
 
Resumen 
En este documento se muestra cómo usar MIT App Inventor para crear una sencilla 
aplicación Android que muestre el texto ¡Hola Mundo! en la pantalla de un dispositivo 
móvil, y cómo usar bloques de programación para que la aplicación realice algo al oprimir 
un botón de la misma. Esto con la finalidad de mostrar qué tan fácil puede ser iniciarse en 
el mundo de la programación de Apps Android. 
Introducción 
El interés por crear esta guía de programación, nació por la necesidad de documentar parte 
del trabajo que se hace en el Instituto de Robótica de Xalapa A.C. (en Xalapa, Veracruz, 
Instituto de Robótica de Xalapa www.irox.mx 
Julio Sandria Crea tu primera aplicación Android con App Inventor 2 
México), en los cursos y talleres de robótica para niños, jóvenes y adultos. Y para ofrecer 
una guía en español para nuestras nuevas generaciones de niños y jóvenes ávidos por 
aprender cosas nuevas. 
Este documento está dirigido a las personas que quieren aprender a crear aplicaciones para 
dispositivos móviles, ya sea teléfonos celulares o tabletas, con el sistema operativo Android. 
Se usa el ambiente de programación visual MIT App Inventor, que es muy fácil de usar y 
está disponible en línea sin costo alguno. Se ejemplifica el uso de App Inventor para crear 
una sencilla aplicación que mostrará en la pantalla del móvil la frase ¡Hola Mundo!, con la 
cual se empieza en muchos cursos de programación de computadoras, en diversos 
lenguajes de programación, especialmente el lenguaje C. 
Aplicaciones para dispositivos móviles 
Las aplicaciones o Apps (abreviación en inglés de Applications) para dispositivos móviles son 
programas creados especialmente para funcionar en teléfonos celulares o tabletas. 
Actualmente existen principalmente dos grandes empresas de tecnología que acaparan la 
atracción para desarrollarlas, Google y Apple. 
Google es la empresa que desarrolla el sistema operativo Android, el cual funciona en 
teléfonos celulares y tabletas de muchas marcas comerciales. Google permite a los 
desarrolladores de aplicaciones móviles que las suban a su tienda Play Store 
(http://play.google.com), de donde cualquier usuario las puede descargar. Muchas 
aplicaciones son totalmente gratis, otras son gratis en su versión reducida, y tienen un costo 
en versiones más completas. 
Apple es la empresa que desarrolla el sistema operativo iOS, que únicamente funciona en 
teléfonos celulares iPhone y dispositivos iPad. Apple también permite a los desarrolladores 
de aplicaciones móviles que las suban a su tienda App Store (http://itunes.apple.com), 
donde la mayoría de las aplicaciones tienen un costo. 
Por esto, la mayoría de las empresas que desarrollan aplicaciones móviles las crean para 
Android e iOS. 
 
http://www.irox.mx/
http://play.google.com)/
http://itunes.apple.com)/
Instituto de Robótica de Xalapa www.irox.mx 
Julio Sandria Crea tu primera aplicación Android con App Inventor 3Sistema operativo Android 
En 2007, Google estableció Android como una 
plataforma de código abierto para que todos los 
usuarios lo pudieran descargar, modificar e instalar 
en cualquier dispositivo de forma gratuita. Esto 
permitió que algunos fabricantes de teléfonos celulares 
como HTC y Samsung pudieran empezar a personalizar el 
diseño de sus teléfonos inteligentes (smart phones). En 2010 
Android se utilizaba en 34 tipos de dispositivos móviles en 49 
países, permitiendo a los usuarios la opción de elegir entre 
varios dispositivos. En 2016, cerca de 1300 marcas habían 
desarrollado más de 24,000 dispositivos Android. Esto ha 
permitido que existan decenas de tiendas de aplicaciones 
Android a nivel mundial. Fuente: Android es para todos 
(https://www.android.com/intl/es_es/everyone/). 
Consultado el 23-Sep-2017. 
App Inventor 
MIT App Inventor es un ambiente de 
programación visual intuitivo que permite 
desarrollar aplicaciones para dispositivos 
móviles con el sistema operativo Android. 
Es una herramienta basada en bloques que 
facilita la creación de aplicaciones 
complejas de alto impacto en mucho menos tiempo que los entornos de programación 
tradicionales. El proyecto MIT App Inventor busca democratizar el desarrollo de software al 
permitir que todas las personas, especialmente los jóvenes, pasen del consumo de 
tecnología a la creación de tecnología. La página oficial de App Inventor es 
http://appinventor.mit.edu, esta herramienta es desarrollada por el MIT (Massachusetts 
Institute of Technology). 
Cuenta de Google 
Para poder usar App Inventor se debe tener una cuenta de Google, la cual puede ser tu 
cuenta de Gmail. Si no tienes una, inicia en crear tu cuenta de Google donde se mostrará 
un formulario como el siguiente. Llena el formulario con tus datos para generar tu cuenta y 
poder usar App Inventor. 
http://www.irox.mx/
https://www.android.com/intl/es_es/everyone/
http://appinventor.mit.edu/
http://web.mit.edu/
http://web.mit.edu/
http://www.gmail.com/
https://accounts.google.com/SignUpWithoutGmail?hl=es
Instituto de Robótica de Xalapa www.irox.mx 
Julio Sandria Crea tu primera aplicación Android con App Inventor 4 
 
Iniciar App Inventor 2 
Una vez que tengas una cuenta de Google, puedes abrir la dirección de App Inventor 
http://appinventor.mit.edu, lo cual mostrará una página similar a la siguiente figura: 
 
http://www.irox.mx/
http://appinventor.mit.edu/
Instituto de Robótica de Xalapa www.irox.mx 
Julio Sandria Crea tu primera aplicación Android con App Inventor 5 
Para empezar a crear una aplicación oprime el botón Create apps!, con lo cual se abrirá la 
página que pide usuario y contraseña de Gmail (Google) y a continuación la página principal 
de App Inventor con un mensaje de bienvenida en inglés pidiendo llenar un cuestionario: 
 
Oprime el botón Take Survey Later para contestar el cuestionario en otra ocasión. Con esto 
se abrirá un cuadro de diálogo en donde puedes seleccionar si quieres configurar un 
dispositivo Android o un emulador de Android. 
 
Oprime el botón Continue para continuar a la siguiente página. Esto abrirá el siguiente 
cuadro de diálogo indicando que no tienes ningún proyecto en App Inventor 2. 
 
Un proyecto son los bloques de programación y configuración que se usan para crear una 
aplicación. Oprime el botón izquierdo del ratón sobre cualquier parte de la página de App 
Inventor para que se quite ese cuadro de diálogo y se muestre la página principal de App 
Inventor como en la siguiente imagen. 
http://www.irox.mx/
Instituto de Robótica de Xalapa www.irox.mx 
Julio Sandria Crea tu primera aplicación Android con App Inventor 6 
 
 
Si ya lo notaste, App Inventor está en inglés, puedes cambiarlo a idioma español 
seleccionando la opción del menú principal English y seleccionando Español en el menú que 
se despliega. Cambia al idioma español para seguir los pasos de esta guía. 
Comenzar un nuevo proyecto 
Para crear una aplicación, selecciona del menú principal la opción Proyectos y del menú que 
se despliega la opción Comenzar un proyecto nuevo… como se muestra en la siguiente 
imagen: 
 
Esto abrirá el cuadro de diálogo Crear un nuevo proyecto de App Inventor, donde hay que 
escribir el nombre del proyecto que se desea crear. Como en este caso vamos a crear una 
sencilla aplicación que muestre en la pantalla del dispositivo móvil la frase ¡Hola Mundo!, 
vamos a llamar al proyecto HolaMundo (sin espacio). 
http://www.irox.mx/
Instituto de Robótica de Xalapa www.irox.mx 
Julio Sandria Crea tu primera aplicación Android con App Inventor 7 
 
Escribe el nombre de proyecto HolaMundo y oprime el botón Aceptar. Después de oprimir 
el botón Aceptar se mostrarán varios paneles en la ventana Diseñador de App Inventor, 
como se muestra a continuación: 
 
La ventana Diseñador permite eso precisamente, diseñar la aplicación móvil colocando y 
configurando objetos en la pantalla de la misma. 
El panel Paleta tiene los diferentes componentes u objetos que se pueden colocar en la 
aplicación. 
El panel Visor muestra una imagen de cómo se vería la aplicación en la pantalla del 
dispositivo móvil. 
El panel Componentes tiene los diferentes objetos seleccionados del panel Paleta y 
colocados en la pantalla de la aplicación. 
http://www.irox.mx/
Instituto de Robótica de Xalapa www.irox.mx 
Julio Sandria Crea tu primera aplicación Android con App Inventor 8 
El panel Propiedades muestra la configuración del objeto seleccionado en el panel 
Componentes. 
Agregar una etiqueta 
Un componente Etiqueta sirve para escribir un texto en la pantalla de la aplicación, y dado 
que vamos a escribir el texto ¡Hola Mundo! en la pantalla, necesitamos arrastrar una 
etiqueta y soltarla en la parte superior izquierda de la pantalla, como se señala con una 
flecha roja en la figura siguiente: 
 
Observa que después de colocar la etiqueta la pantalla de la aplicación (en el Visor), en el 
panel Componentes se agrega el componente Etiqueta1 abajo del componente Screen1 
(pantalla1) que se colocó por omisión al crear el proyecto. 
En el Visor, la etiqueta que acabas de colocar tiene el texto Texto para Etiqueta1, el cual 
debes cambiarlo en el campo Texto del panel Propiedades por el texto ¡Hola Mundo!, como 
se muestra en la imagen siguiente. Nota que el componente Etiqueta1 debe estar 
seleccionado en el panel Componentes, para que en el panel Propiedades puedas editar las 
propiedades de dicha etiqueta. 
http://www.irox.mx/
Instituto de Robótica de Xalapa www.irox.mx 
Julio Sandria Crea tu primera aplicación Android con App Inventor 9 
 
Agregar un botón 
En el Visor, debajo de ¡Hola Mundo!, coloca un Botón, al cual deberás cambiarle en la 
propiedad Texto, el texto Texto para Botón1 por el texto Cerrar, ya que será el botón para 
cerrar la aplicación. Adicionalmente, del panel Componentes usa el botón Cambiar 
nombre, para cambiarle el nombre Botón1 por BotonCerrar (sin acento). En la imagen 
siguiente se muestra cómo debe verse la aplicación y dónde se hacen los cambios. 
 
 
 
 
http://www.irox.mx/
Instituto de Robótica de Xalapa www.irox.mx 
Julio Sandria Crea tu primera aplicación Android con App Inventor 10 
 
Generar aplicación 
Una vez diseñada la aplicación, podemos generar el archivo de instalación para descargarlo 
e instalarlo en un dispositivo Android. Para esto, selecciona la opción Generar del menú 
principal y después la opción App (generar código QR para el archivo .apk) del menú 
desplegable como se muestra en la siguiente imagen. 
 
Al hacer esto, App Inventor genera el archivo HolaMundo.apk, el cual es el formato de 
archivo utilizado para la instalación de software en el sistema operativo Android. Después 
de unos segundos, App Inventor mostrará el cuadro de diálogo Enlace de código para 
HolaMundo con un código QR como se muestra en la siguiente figura: 
http://www.irox.mx/
Instituto de Robótica de Xalapawww.irox.mx 
Julio Sandria Crea tu primera aplicación Android con App Inventor 11 
Un código QR (Quick Response, respuesta rápida) es la 
evolución del código de barras, creado para almacenar 
información en un código de dos dimensiones. 
En App Inventor, la información contenida en el código QR es 
la dirección de internet en la que se guarda el archivo .apk de 
la aplicación recién generada. 
Para este documento, se descargó de Play Store 
y se instaló la aplicación Lightning QR, que es 
gratuita y permite leer códigos QR. 
Descargar e instalar la aplicación en Android 
En tu dispositivo móvil abre la aplicación para leer códigos QR (indica scan o leer código si 
es necesario) y dirige la cámara del dispositivo hacia la pantalla de la computadora, 
apuntando directamente al código QR que generó App Inventor para la aplicación 
HolaMundo que diseñaste. En la siguiente imagen se muestra el código QR centrado 
correctamente en la imagen de video de la aplicación Lightning QR, la cual, después de unos 
segudos, obtiene la dirección de internet desde donde se descargará la aplicación que 
acabas de diseñar. 
 
Asegúrate de tener conexión a internet en tu dispositivo móvil. Oprime el botón Abrir 
enlace, con lo cual, se descarga tu aplicación HolaMundo.apk. Si Android pregunta si deseas 
instalar la aplicación, selecciona si instalar. Si no pregunta, busca en el Gestor de archivos 
http://www.irox.mx/
Instituto de Robótica de Xalapa www.irox.mx 
Julio Sandria Crea tu primera aplicación Android con App Inventor 12 
de Android dónde quedó guardado el archivo HolaMundo.apk, selecciónalo e indica 
instalar. 
Al terminar la instalación de HolaMundo.apk oprime el botón Abrir o busca el icono de tu 
aplicación HolaMundo y presiónalo una vez. Con lo cual deberás ver en la pantalla del 
dispositivo móvil tu aplicación HolaMundo ejecutándose como en la siguiente figura de la 
derecha: 
 
¡Y allí tienes! Tu primera App Android ¡Hola Mundo! 
¿Qué ocurre cuando oprimes el botón Cerrar? ¿Nada? ¡Obviamente! Porque hasta este 
momento, solamente has diseñado la aplicación. Es decir, solo colocaste en la pantalla de 
la aplicación, la etiqueta que muestra el texto ¡Hola Mundo! y el botón Cerrar. Pero, no has 
programado la aplicación. Esto lo haremos a continuación. 
Programar botón Cerrar 
Para programar en App Inventor debes oprimir el botón Bloques ubicado en la esquina 
superior derecha (marcado en un rectángulo rojo en la imagen siguiente). Este botón 
cambia al modo de programación mostrando el panel Bloques y el panel Visor. 
 
http://www.irox.mx/
Instituto de Robótica de Xalapa www.irox.mx 
Julio Sandria Crea tu primera aplicación Android con App Inventor 13 
 
El panel Bloques muestra los bloques de programación que están disponibles en App 
Inventor, clasificados en bloques Integrados, bloques de los componentes usados en el 
Diseño de tu aplicación y cualquier componente. 
El panel Visor muestra los bloques que estás usando en el área de programación o los 
bloques disponibles para cualquiera de los objetos seleccionados en el panel Bloques. Por 
ejemplo, en la imagen anterior está seleccionado BotonCentrar en el panel Bloques, por 
esto, en el Visor se muestran los bloques de programación disponibles para un botón. 
Debido a que nos falta hacer que cuando se presione BotonCerrar se cierre la aplicación, 
selecciona el bloque cuando BotonCerrar .Clic ejecutar y arrástralo al área de 
programación. Debe quedar parecido a la imagen siguiente: 
 
http://www.irox.mx/
Instituto de Robótica de Xalapa www.irox.mx 
Julio Sandria Crea tu primera aplicación Android con App Inventor 14 
Este bloque significa literalmente que: cuando en el BotonCerrar se hace clic se debe 
ejecutar otro bloque. 
Ese otro bloque que se deberá ejecutar es cerrar la aplicación, el cual está señalado en rojo 
en la imagen siguiente. 
 
Arrastra ese bloque al área de programación y colócalo dentro del bloque anterior, de modo 
que ambos bloques queden como en la imagen siguiente: 
 
Esta imagen muestra todo el programa que necesitamos para la aplicación HolaMundo. Este 
programa dice: 
cuando en el BotonCerrar se hace clic se debe ejecutar cerrar la aplicación 
Vuelve a generar la aplicación con la opción Generar del menú principal y después la opción 
App (generar código QR para el archivo .apk) del menú desplegable. Cuando se muestre el 
código QR, coloca tu dispositivo móvil frente al código, ejecuta tu aplicación para leer 
códigos QR y lee el código QR. Descarga la aplicación HolaMundo.apk, instálala y ábrela. 
Una vez abierta tu aplicación HolaMundo, oprime el botón Cerrar para probar que 
realmente funciona cerrando la aplicación. 
http://www.irox.mx/
Instituto de Robótica de Xalapa www.irox.mx 
Julio Sandria Crea tu primera aplicación Android con App Inventor 15 
¿Ya se cierra tu aplicación HolaMundo oprimiendo el botón Cerrar? Si no se cierra, revisa 
que hayas colocado correctamente ambos bloques en App Inventor y repite el proceso de 
generación, descarga e instalación. 
Finalmente, modifica la aplicación HolaMundo para que en lugar de verse como título de la 
pantalla la palabra Screen1, se vea Hola Mundo con MIT App Inventor, como en la imagen 
siguiente: 
 
Conclusiones 
El desarrollo de aplicaciones para dispositivos móviles se ha incrementado mucho en los 
últimos años. La posibilidad de usar una herramienta de forma gratuita para que cualquier 
persona pueda aprender y crear aplicaciones, permite que haya más desarrolladores de 
aplicaciones para diversos fines. El objetivo de este documento fue mostrar cómo entrar en 
el mundo de desarrollo de Apps Android. 
View publication statsView publication stats
http://www.irox.mx/
https://www.researchgate.net/publication/320014500