Informtica 6 ao B

APP INVENTOR
AppInventor es una herramienta online por lo que necesitaremos internet para utilizarla y,
aunque es gratuita, es necesario registrarse en la pgina, por lo que este ser el primer
paso.
Al entrar en la pgina de AppInventor, podemos ver en la parte superior derecha la opcin
Create Apps, al entrar en ella nos pedir una cuenta de gmail, si ya tenemos una
podemos utilizarla, pero si no la tenemos, deberemos crearnos una cuenta nueva, en
caso de ser menor de edad, debers pedirle a tus padres que te creen una.
Cuando ya hemos entrado con nuestra cuenta, llegaremos a la siguiente pantalla:

En la esquina superior derecha tenemos la opcin de cambiar de idioma, aunque es

recomendable acostumbrarse a utilizarlo en ingls, ya que de esta manera nos ser ms
sencillo compartir ideas con otros usuarios, al ser el ingls el idioma ms utilizado en
programacin.

Nuestro primer proyecto. Hola Mundo.

Es costumbre en programacin, que el primer programa que se haga, sea que se muestre
en la pantalla la frase Hola mundo, algo que en AppInventor ser muy sencillo, por lo
que ser tambin nuestro primer ejemplo.

Informtica 6 ao B
En la pgina inicial de AppInventor, podemos clickear en Start new project, al hacerlo nos
pedir el nombre del nuevo proyecto.

El nombre que indroduzcamos no puede tener espacios ni caracteres especiales (tildes,

parentesis, etc), nosotros llamaremos a nuestro proyecto Hola_mundo, utilizando la
barra baja para separar palabras.
Cuando hayamos introducido el nombre, nos llevar a la pgina de diseo.

Si nos fijamos en la parte superior derecha, veremos que estamos en la pestaa Designer,
que es donde decidiremos qu elementos tendr nuestra aplicacin y su distribucin en la
pantalla. La otra opcin que utilizaremos en otros ejemplos es la pestaa Blocks, que es
donde se hace la programacin.
En la parte izquierda tenemos la lista de elementos que se pueden incluir en nuestra
aplicacin.
2

Informtica 6 ao B

Informtica 6 ao B
Cada elemento tendr unas propiedades y unas posibilidades de programacin diferentes.
En este ejemplo utilizaremos el elemento Label o etiqueta, el cual sirve para mostrar un
texto en la pantalla. Para incluirlo en nuestra aplicacin hacemos clic sobreLabel y lo
arrastramos hasta la pantalla central, al soltarlo quedar aadido con el texto Text for
Label1.

Si ahora nos fijamos en el lado derecho de la pantalla, veremos que en el

recuadro Components se ha aadido nuestra etiqueta Label1 debajo de Screen1.

Informtica 6 ao B

Cuando seleccionamos algn componente de este recuadro (de momento solo

tenemos Screen1 y Label1) , veremos que cambian las opciones de Properties (el recuadro
a la derecha de la pantalla), donde se muestran las propiedades de cada elemento. Por
ahora solo vamos a ver las propiedades del Label1.
Podemos ver que entre las propiedades del Label1 tenemos opciones como cambiar el
color de fondo (BackgroundColor), cambiar el tipo de fuente etc., pero ahora solo nos
interesa cambiar el texto de la opcin Text, donde escribimos nuestro Hola mundo.

Al hacerlo cambiar el texto que se muestra en la pantalla.

Cmo ver mi aplicacin en mi dispositivo mvil.

Es muy importante tener en cuenta que lo que se muestra en la pantalla del ordenador no
es exactamente como se ver en el dispositivo mvil, es tan solo una previsualizacin, por
lo que vamos a ver cmo llevar nuestra aplicacin a un mvil.
En la parte superior de la pantalla, tenemos la pestaa Connect, donde al clickear, vemos
tres opciones, AI Companion, Emulator yUSB.

Informtica 6 ao B

La primera de ellas, AI Companion, nos permite hacer una simulacin en nuestro

dispositivo mvil utilizando WiFi siempre que estemos conectados a la misma red que
el ordenador.
La opcin Emulator, nos permite ver la aplicacin en un simulador que instalaramos en
el ordenador.
La tercera opcin, USB, nos permite ver nuestra aplicacin conectando el mvil
mediante un USB.
La opcin ms cmoda es la de AI Companion, para utilizarla debemos instalar primero en
nuestro mvil la aplicacin llamada App Companion, la cual podemos buscar en el Play
Store, o utilizar este enlace
(https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3).
Cuando instalemos la aplicacin en nuestro mvil, al abrirla veremos dos
opciones: Connect with code y Scan QR code.
En el ordenador hacemos click en la opcin AI Companion, se nos abrir una pequea
pantalla con un cdigo QR y un cdigo de nuestra aplicacin, por lo que tenemos dos
opciones:
Una opcin es copiar en el mvil el cdigo que se indica en el ordenador en y pulsando

en Connect with code.

La otra opcin es pulsar en el mvil en Scan QR code, al hacerlo se nos abrir la cmara
del mvil y podremos capturar el cdigo QR que se nos muestra en el ordenador.
Si estamos conectados a la misma red de internet tanto en el ordenador como en el mvil,
se establecer la conexin entre ambos y podremos ver en nuestro mvil los cambios que
hagamos en el ordenador.
Si hemos conseguido que en nuestro mvil aparezca la frase Hola mundo, tendremos
hecha nuestra primera aplicacin, ahora habr que ir descubriendo poco a poco cmo

Informtica 6 ao B
utilizar todos los elementos que nos proporciona AppInventor y cmo programarlos para
conseguir aplicaciones ms tiles e interesantes.

Cmo instalar mi aplicacin en mi dispositivo mvil.

Cuando tenemos una aplicacin terminada, podemos querer dejarla instalada en nuestro
mvil de forma definitiva, ya que la simulacin que hemos hecho hasta ahora se perder
cuando cerremos la aplicacin.
Para instalarla y que podamos acceder a ella en el mvil siempre que queramos,
debemos ir a la opcin Build, en la parte superior de la pantalla.

Tenemos dos opciones:

Provide QR code for .apk: Esta ser la opcin ms sencilla, al elegirla, se abrir una

ventana con un cdigo QR. Podemos capturar este cdigo QR desde la aplicacin App
Companion del mismo modo que hicimos en la simulacin, al hacerlo, esta vez nos
dar la opcin de instalar la aplicacin.
Save .apk to my computer: Esta opcin nos descarga un archivo de tipo apk al ordenador.
Un archivo apk puede abrirse desde un mvil para instalar una aplicacin, por lo que
simplemente tendremos que llevar ese archivo al mvil (por ejemplo conectndolo por
USB), y abrirla desde all, al ejecutarlo nos preguntar si queremos instalar la
aplicacin. (ESTA ES LA OPCION QUE DEBEN USAR PARA DESCARGAR LA
APP DE LOS TRABAJOS PRCTICOS PARA ENVIARLO POR EDMODO)
La primera vez que intentamos instalar una aplicacin que hayamos creado es posible
que nuestro mvil nos informe de que est bloqueada la instalacin de aplicaciones de
fuentes desconocidas, para poder instalarla tendremos que ir en el mvil a Ajustes, y en
las opciones de Seguridad, permitir la instalacin de orgenes desconocidos

Informtica 6 ao B