En este post vamos a aprender cómo hacer una primera aplicación muy sencilla con AppInventor.

AppInventor es una herramienta online por lo que necesitaremos internet para utilizarla y, aunque es gratuita, es necesario registrarse en la página, por lo que este será el primer paso.

Al entrar en la página de AppInventor, podemos ver en la parte superior derecha la opción “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, deberás 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 opción de cambiar de idioma, aunque es recomendable acostumbrarse a utilizarlo en inglés, ya que de esta manera nos será más sencillo compartir ideas con otros usuarios, al ser el inglés el idioma más utilizado en programación.

Nuestro primer proyecto. Hola Mundo.

Es costumbre en programación, 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á también nuestro primer ejemplo.

En la página inicial de AppInventor, podemos pinchar 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 página de diseño.

Si nos fijamos en la parte superior derecha, veremos que estamos en la pestaña Designer, que es donde decidiremos qué elementos tendrá nuestra aplicación y su distribución en la pantalla. La otra opción que utilizaremos en otros ejemplos es la pestaña Blocks, que es donde se hace la programación.

En la parte izquierda tenemos la lista de elementos que se pueden incluir en nuestra aplicación.

Cada elemento tendrá unas propiedades y unas posibilidades de programación diferentes. En este ejemplo utilizaremos el elemento Label o etiqueta, el cual sirve para mostrar un texto en la pantalla. Para incluirlo en nuestra aplicación hacemos clic sobre Label y lo arrastramos hasta la pantalla central, al soltarlo quedará añadido 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 añadido nuestra etiqueta Label1 debajo de Screen1.

Cuando seleccionamos algún 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 opción Text, donde escribimos nuestro Hola mundo.

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

Cómo ver mi aplicación en mi dispositivo móvil.

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 móvil, es tan solo una previsualización, por lo que vamos a ver cómo llevar nuestra aplicación a un móvil.

En la parte superior de la pantalla, tenemos la pestaña Connect, donde al pinchar, vemos tres opciones, AI Companion, Emulator y USB.

• La primera de ellas, AI Companion, nos permite hacer una simulación en nuestro dispositivo móvil utilizando WiFi siempre que estemos conectados a la misma red que el ordenador.
• La opción Emulator, nos permite ver la aplicación en un simulador que instalaríamos en el ordenador.
• La tercera opción, USB, nos permite ver nuestra aplicación conectando el móvil mediante un USB.

La opción más cómoda es la de AI Companion, para utilizarla debemos instalar primero en nuestro móvil la aplicación llamada App Companion, la cual podemos buscar en el Play Store, o utilizar este enlace.

Cuando instalemos la aplicación en nuestro móvil, al abrirla veremos dos opciones: Connect with code y Scan QR code.

En el ordenador pinchamos en la opción AI Companion, se nos abrirá una pequeña pantalla con un código QR y un código de nuestra aplicación, por lo que tenemos dos opciones:

• Una opción es copiar en el móvil el código que se indica en el ordenador en y pulsando en Connect with code.
• La otra opción es pulsar en el móvil en Scan QR code, al hacerlo se nos abrirá la cámara del móvil y podremos capturar el código QR que se nos muestra en el ordenador.

Si estamos conectados a la misma red de internet tanto en el ordenador como en el móvil, se establecerá la conexión entre ambos y podremos ver en nuestro móvil los cambios que hagamos en el ordenador.

Si hemos conseguido que en nuestro móvil aparezca la frase “Hola mundo”, tendremos hecha nuestra primera aplicación, ahora habrá que ir descubriendo poco a poco cómo utilizar todos los elementos que nos proporciona AppInventor y cómo programarlos para conseguir aplicaciones más útiles e interesantes.

Cómo instalar mi aplicación en mi dispositivo móvil.

Cuando tenemos una aplicación terminada, podemos querer dejarla instalada en nuestro móvil de forma definitiva, ya que la simulación que hemos hecho hasta ahora se perderá cuando cerremos la aplicación.

Para instalarla y que podamos acceder a ella en el móvil siempre que queramos, debemos ir a la opción Build, en la parte superior de la pantalla.

Tenemos dos opciones:

• Provide QR code for .apk: Esta será la opción más sencilla, al elegirla, se abrirá una ventana con un código QR. Podemos capturar este código QR desde la aplicación App Companion del mismo modo que hicimos en la simulación, al hacerlo, esta vez nos dará la opción de instalar la aplicación.
• Save .apk to my computer: Esta opción nos descarga un archivo de tipo apk al ordenador. Un archivo apk puede abrirse desde un móvil para instalar una aplicación, por lo que simplemente tendremos que llevar ese archivo al móvil (por ejemplo conectándolo por USB), y abrirla desde allí, al ejecutarlo nos preguntará si queremos instalar la aplicación.

La primera vez que intentamos instalar una aplicación que hayamos creado es posible que nuestro móvil nos informe de que está bloqueada la instalación de aplicaciones de fuentes desconocidas, para poder instalarla tendremos que ir en el móvil a Ajustes, y en las opciones de Seguridad, permitir la instalación de orígenes desconocidos