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 READS
0 3,023

1 author:

Julio Cesar Sandria-Reynoso

Instituto de robótica de Xalapa
28 PUBLICATIONS   2 CITATIONS   

SEE PROFILE

Some of the authors of this publication are also working on these related projects:

Sistema de Información Académica View project

Mobil robotics with artificial Intelligence / Robótica móvil con inteligencia artificial View project

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.

 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

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.

Julio Sandria Crea tu primera aplicación Android con App Inventor 2

Instituto de Robótica de Xalapa www.irox.mx

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

Julio Sandria Crea tu primera aplicación Android con App Inventor 3

Instituto de Robótica de Xalapa www.irox.mx

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:

Julio Sandria Crea tu primera aplicación Android con App Inventor 4

Instituto de Robótica de Xalapa www.irox.mx

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.

Julio Sandria Crea tu primera aplicación Android con App Inventor 5

Instituto de Robótica de Xalapa www.irox.mx

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

Julio Sandria Crea tu primera aplicación Android con App Inventor 6

Instituto de Robótica de Xalapa www.irox.mx

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.

Julio Sandria Crea tu primera aplicación Android con App Inventor 7

Instituto de Robótica de Xalapa www.irox.mx

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.

Julio Sandria Crea tu primera aplicación Android con App Inventor 8

Instituto de Robótica de Xalapa www.irox.mx

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.

Julio Sandria Crea tu primera aplicación Android con App Inventor 9

Instituto de Robótica de Xalapa www.irox.mx

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:

Julio Sandria Crea tu primera aplicación Android con App Inventor 10

Instituto de Robótica de Xalapa www.irox.mx

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

Julio Sandria Crea tu primera aplicación Android con App Inventor 11

Instituto de Robótica de Xalapa www.irox.mx

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.

Julio Sandria Crea tu primera aplicación Android con App Inventor 12

Instituto de Robótica de Xalapa www.irox.mx

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:

Julio Sandria Crea tu primera aplicación Android con App Inventor 13

Instituto de Robótica de Xalapa www.irox.mx

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.

Julio Sandria Crea tu primera aplicación Android con App Inventor 14

 Instituto de Robótica de Xalapa www.irox.mx

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

Julio Sandria Crea tu primera aplicación Android con App Inventor 15

View publication stats