Desarrollar aplicaciones Android con App Inventor 2

App Inventor 2 es una plataforma que nos permite desarrollar aplicaciones de software para Android, ésta es una creación de Google Labs, aquí podremos ir visualizando con distintos tipos de herramientas básicas los proyectos en los que estamos trabajando, una de las grandes ventajas que trae el App Inventor 2 es que el usuario puede ir enlazando una serie de bloques para crear la aplicación. Este sistema es totalmente gratuito y se descarga fácilmente desde su propia web. Las aplicaciones que podemos crear en App Inventor están un poco limitadas por su simplicidad, aunque igualmente aquí podemos pasar gran tiempo desarrollando un sinfín de aplicaciones para dispositivos Android básicas.

 

Con Google App Inventor se demostró una gran simplicidad de uso que ha facilitado la aparición de un gran número de nuevas aplicaciones; hoy en día hay una gran cantidad de usuarios que desarrollan aplicaciones en el centro de distribución de aplicaciones para Android gracias a esto.

 

 

 

 

 

 

 

1. Instalación de App Inventor 2

Antes que nada debemos conocer que App inventor 2 te permite diseñar y editar en bloques como ya lo veníamos mencionando y todo esto se ejecuta en tu navegador. Pero para ir probando lo que estamos trabajando (Probarlo en vivo) tenemos tres opciones mientras construimos nuestra aplicación:

 

 

 

 

Una vez que conocemos las diferentes opciones que tenemos a la hora de instalar el App Inventor 2 explicaré paso a paso cómo realizar cada una de estas opciones:

 

 

Descarga e instala la aplicación MIT AI2 Companion en tu dispositivo Android. En esta opción solo tendrías que buscar en tu dispositivo Android la Aplicación “MIT AI2 Companion” desde la PlayStore, descárgala e instálala o también puedes descargarla directamente del fichero APK. Lo más recomendable es descargarla desde la PlayStore ya que si descargamos el fichero APK tendremos que habilitar en la configuración de nuestro dispositivo Android la opción de permitir la instalación de aplicaciones desde fuentes desconocidas. Esta opción la podemos encontrar en las versiones de Android anteriores a la 4.0, para ello vamos a Ajustes > Aplicaciones y marca la casilla " Fuentes desconocidas". Para los dispositivos con Android 4.0 o superior, hay que ir a Ajustes > Seguridad o Ajustes> Seguridad y Bloqueo de pantalla, y seleccionamos la casilla de "Fuentes desconocidas".

 

Aquí dejo los Respectivos códigos QR para descargarla desde la Playstore o directamente como fichero APK, si necesitas un escáner QR podemos buscar uno en la Playstore.

 

PlayStore

 

 

 

 

 

 

Fichero APK

 

 

 

 

 

Conectar tu PC a la misma red WiFi que tu dispositivo Android. App Inventor irá mostrando la aplicación que estés construyendo de forma automática, sólo si en tu ordenador está corriendo App Inventor y si en tu dispositivo Android está corriendo Companion y estos 2 están conectados a la misma red Wifi.

 

Cómo conectar el proyecto en el que estemos trabajando a nuestro dispositivo Android. Vamos a la Página de App Inventor y abrimos el proyecto con el cual vamos a trabajar, elegimos “Conectar” y “Al Companion” en el menú principal.

 

 

Nos mostrará un diálogo con un código QR, buscamos nuestro dispositivo, ejecutamos la aplicación MIT App Companion y a continuación hacemos clic sobre el botón “Scan QR code” y escaneamos el código:

 

 

Después de esperar unos segundos deberíamos poder ver el proyecto en el cual estamos trabajando, y éste se irá actualizando de acuerdo a las modificaciones que le estemos haciendo al mismo.

 

Aquí la instalación es la misma para ambos casos.

 

Primero lo que debemos hacer es descargar el instalador MIT_App_Inventor_Tools_2.3.0_win_setup.exe esto lo podemos hacer accediendo al siguiente enlace. Después de descargar el instalador, lo ejecutamos.

 

 

Nos aparecerá esta ventana, haremos clic en Next >.

 

 

Después aceptaremos el acuerdo de licencia pulsando I Agree.

 

 

Elegimos si queremos instalar el programa solo para un usuario o para todos los usuarios y hacemos clic en Next >.

 

 

Elegimos los componentes que queremos instalar y pulsamos Next >.

 

 

Elegimos dónde lo vamos a instalar y pulsamos Next >.

 

 

Elegimos la carpeta de inicio y pulsamos Install.

 

 

Esperamos unos segundos a que instale el MIT App Inventor Tools 2.3.0.

 

 

Después de que termine el proceso de instalación, podremos hacer clic en Finish y con esto habremos terminado la instalación.

 

 

Si dejamos seleccionada la opción de Start aiStarter tool now nos debería aparecer una ventana de aiStarter donde nos indicará en la primera línea el sistema operativo en donde estamos trabajando, en la segunda línea dónde está ubicada la carpeta donde está instalada, en la tercera línea el servidor donde está corriendo, en la cuarta línea se encuentra la dirección IP en que se encuentre activa la aplicación. Para cerrar la ejecución del aiStarter, pulsa Ctrl+C.

 

 

 

2. Ejecución de App Inventor 2

En Primer lugar debemos iniciar el aiStarter haciendo clic en el icono que está ubicado en escritorio.

 

 

Esto hará que se inicie la ventana del aiStarter.

 

 

Después de iniciar el aiStarter vamos a la página de appinventory hacemos clic en Create apps!

 

 

Te pedirá que accedas a tu cuenta Gmail. Después de esto nos pedirá los permisos para acceder a nuestra cuenta, aquí seleccionamos Permitir. Nos mostrará luego los términos de Servicios. Aceptamos los términos, y seguidamente nos preguntará si queremos llenar una encuesta, y después nos dará la bienvenida. Hacemos clic en continuar.

 

 

Si queremos, para que todo se nos haga más sencillo, podemos seleccionar el idioma antes de empezar a hacer nuestra primera conexión.

 

 

Ahora vamos a comenzar un nuevo proyecto.

 

 

Le damos un nombre a ese nuevo proyecto, en mi caso le pondré Prueba_1 y aceptamos.

 

 

Automáticamente nos llevará al proyecto que acabamos de crear y nos mostrará las herramientas y lo que vamos a utilizar.

 

 

Ahora como vamos a ejecutar el emulador, solo realizaré una aplicación sencilla que muestre una Etiqueta con el típico “Hola mundo” para ello arrastramos de la paleta una etiqueta y cambiamos el texto que contiene por Hola mundo .

 

 

Vamos a hacer uso del emulador, para ello vamos a Conectar > Emulador.

 

 

Éste irá conectando y nos dirá que esperemos unos segundos, seguimos las instrucciones que nos dará a continuación.

 

 

Como es la primera vez que utilizamos el emulador, nos pedirá que lo actualicemos, y nos mostrará en el emulador si deseamos instalar la actualización.

 

 

Una vez instalada hacemos clic en “done” y reiniciamos la conexión como dicen las instrucciones.

 

 

Una vez que se haya reiniciado la conexión, iniciamos el emulador y ya nos debería mostrar el proyecto en el que estamos trabajando como pueden ver en la siguiente imagen.

 

 

Una vez que hemos realizado todos estos pasos, tendremos actualizado el emulador y todos nuestros proyectos en los que trabajemos se podrán ver en la pantalla del emulador.

 

 

3. Primera aplicación en App Inventor 2

Ahora que ya tenemos todo listo y funcionando podemos empezar a trabajar en el App Inventor, a continuación les voy a enseñar cómo desarrollar algunas aplicaciones sencillas que nos ayudarán a tener una base para desarrollar nuestras propias aplicaciones Android.

 

Empezaremos desarrollando una calculadora básica, la cual nos permita realizar las funciones matemáticas típicas como sumar, restar, multiplicar y dividir.

 

Para ello primero vamos a Proyectos > Mis proyectos. Allí hacemos clic en comenzar un proyecto nuevo, yo nombraré a este proyecto Calculadora_Basica y presionamos el botón Aceptar.

 

 

Esto nos redireccionará al área de diseño en donde trabajaremos con nuestro proyecto, lo primero que vamos a hacer es agregar cuatro botones arrastrándolos de la paleta que se encuentra ubicada a nuestra izquierda.

 

 

Ahora vamos a cambiar el texto de cada uno de los botones seleccionando uno por uno en componentes y modificamos el texto en sus propiedades. Como podemos darnos cuenta, allí están las propiedades por defecto que tiene el botón que seleccionemos, aquí podremos modificar cómo queremos que nos vaya quedando el botón. Por el momento solo me limitaré a cambiar el texto.

 

 

Después de modificar el texto, de una vez deberías notar los cambios en el botón que estamos modificando en el visor.

 

 

Ahora, por cuestiones de estética voy a utilizar una disposición horizontal para organizar los botones que anteriormente hemos modificado. Esto lo encontraremos en la paleta haciendo clic en disposición y arrastramos disposición horizontal hacia el visor.

 

 

Ahora agregaremos nuestros botones uno por uno hacia nuestra disposición horizontal. Nos debería quedar algo como esto:

 

 

Luego agregamos 2 cajas de texto que es en donde introduciremos los números necesarios para realizar nuestras operaciones básicas de suma, resta, multiplicación y división. Además de esto, también agregaremos una etiqueta para mostrar el resultado de nuestras operaciones. La etiqueta y los campos de texto los encontraremos en la paleta haciendo clic en interfaz del usuario. Al finalizar nos debería quedar algo similar a la siguiente imagen:

 

 

Vamos a “Bloques” para empezar a configurar las funciones de nuestros botones. Para ir solo debes hacer clic en bloques, del lado derecho de la pantalla al lado del botón Diseñador.

 

 

Nos deberá dirigir al visor de bloques en donde podremos ver los diferentes tipos de bloques que podremos utilizar para nuestras aplicaciones. Por ahora solo necesitaremos utilizar de los integrados, los botones para definir cuál es la función que cumplen al pulsar cada uno de ellos.

 

 

Para ir definiendo la acción que cumple cada botón, primero empezaremos por el botón1 que en mi caso le cambié el texto por el signo más (+) y quiero definir que cada vez que se pulse sume las cantidades que hay en el campo de texto 1 y el campo de texto 2, para ello comenzamos haciendo clic en botón1, luego seleccionamos “cuando boton1 clic ejecutar” y lo arrastramos a nuestro visor, debería quedar así:

 

 

Después agregamos Etiqueta1, hacemos clic en Etiqueta1 y arrastramos “poner Etiqueta1 texto como” al visor y lo enlazamos a “ejecutar”. Nos debería quedar de esta forma.

 

 

Ahora agreguemos la función de sumar, para ello hacemos clic en Matemáticas y arrastramos devolver la suma de dos números y lo enlazamos al bloque de etiqueta.

 

Luego agregaremos los campos de texto seleccionando CampoDeTexto1, buscamos “CampoDeTexto1 Texto” y lo arrastramos para enlazarlo con el bloque de suma. El primer espacio para el campo de texto1 y para el segundo espacio el campo de texto2. Haciendo el mismo proceso debería quedarnos algo como la imagen siguiente:

 

 

Ahora repetimos los procesos que hemos realizado con cada botón solo cambiando las operaciones matemáticas a cada uno, al final deberíamos tener algo así:

 

 

Y por fin es el momento de probar nuestra aplicación, en mi caso lo probaré en el emulador para PC. Verificamos cómo nos quedó nuestra aplicación, podemos ir probando si funciona cada uno de los botones y si cumplen las funciones asignadas. En la siguiente imagen se podrá observar una división.

 

 

Con esto concluimos nuestra primera aplicación móvil sencilla con operaciones matemáticas.

 

 

4. Segunda aplicación en App Inventor 2

Ahora vamos a realizar una aplicación que nos permita guardar y ver datos de una base de datos tyniDB. TyniDB es una base de datos documental de peso ligero .Está escrito en Python puro y no tiene dependencias externas.

 

Lo primero que haremos es crear un nuevo proyecto, a éste lo llamaremos Lista_BD:

 

 

En él vamos a agregar dos disposiciones horizontales; en la primera de ellas agregamos una etiqueta y un campo de texto, en la segunda agregamos dos botones, nos debería quedar algo como esto:

 

 

Vamos a seleccionar cada una de las disposiciones, en propiedades modificamos el ancho para que se ajuste al contenedor. Además de esto, seleccionamos etiqueta y cambiamos el texto por ingrese dato y en los botones llamaremos a uno “Nuevo Registro” y al segundo “guardar” debería ir quedando así:

 

 

Ahora vamos a agregar un visor de listas en la parte inferior, al cual en propiedades seleccionaremos en la opción ancho que se ajuste al contenedor y en alto vamos a poner 300px, nos quedará algo así:

 

 

Agreguemos nuestra base de datos TinyDB que se encuentra en paleta>almacenamiento y arrastramos TinyBD a nuestro visor de listas, así:

 

 

Ahora nos vamos a bloques y lo primero que vamos a hacer es agregar una variable global que sea de tipo texto. Para ello primero vamos a bloques>integrados>variables y de allí arrastramos “inicializar global como” y después nos vamos a texto en bloques>integrados>texto, arrastramos la cadena de texto y la enlazamos con “inicializar global”.

 

 

Vamos a configurar qué acción va a realizar el botón al cual llamamos nuevo registro que va a cumplir la función de poner nuestra caja de texto en blanco, para ello vamos a bloques > DisposiciónHorizontal2 > Boton1 y arrastramos cuando Boton1 clic a nuestro visor de bloques, luego nos vamos a bloques > DisposiciónHorizontal1> CampoDeTexto1, arrastramos poner CampoDeTexto1.Texto como, enlazándolo con cuandoBoton1.Clic y por último buscamos una cadena de texto y lo enlazamos con el “CampoDeTexto1.Texto como”, dando como resultado la siguiente imagen:

 

 

Ahora vamos a configurar nuestro botón Guardar para que añada datos a nuestra lista, para ello buscamos nuestro botón 2 y lo arrastramos a nuestro visor. Luego, nos vamos a Bloques >Lista> añadir elemento a la lista y en donde dice lista, enlazamos con un tomar que se encuentra en Bloques > Variables > Tomar y lo enlazamos haciendo clic para seleccionar los datos de global Lista. Por último, en donde aparece el ítem en nuestro bloque de añadir elemento a la lista, le colocamos un bloque de nuestra CajaDeTexto1.Texto, debería quedar algo así:

 

 

Ahora vamos a agregar los valores a nuestra base de datos, para ello lo primero que debemos hacer es buscar en Bloques > Screen1 > TinyBD, arrastramos llamar TinyBD1.GuardarValor y lo enlazamos con nuestro bloque de Botón2, seguido de esto, en etiqueta, colocamos lo que vamos a guardar, en este caso guardaremos nombres solamente, para ello buscamos un bloque de texto, lo enlazamos en etiqueta y le colocamos Nombre, después de esto colocamos el valor a guardar para que lo tome de la lista global como lo hicimos en el bloque de añadir elementos.

 

 

Solo nos falta que lo muestre en el visor de lista, para ello lo enlazamos con Botón2, vamos a Bloques > Screen1 > VisordeLista1 y arrastramos poner VisordeLista1.Elementos como le enlazamos tomar global Lista, mostrando algo así:

 

 

Como podemos recordar, lo mejor de tener una base de datos es que puedes cerrar tu aplicación y los datos que hayas guardado allí quedarán almacenados, disponibles para cuando inicies una nueva sesión. Para ello vamos a hacer que cuando el Screen1 inicie, la base de datos se vuelva a agregar a una lista y ésta vuelva a aparecer en el visor de listas.

 

Para hacer esto solo debemos ir a Bloques > Screen1 y arrastrar el bloque “cuándo Screen1.inicializar ejecutar” en nuestro visor de bloques y a éste le vamos a enlazar la variable “poner” que se encuentra en Bloques > Integrados > Variables, arrastramos “poner” y en ese bloque seleccionamos global Lista a éste le vamos a enlazar de TinyBD1 “llamar TinyBD1. ObtenerValor”, en etiqueta le agregaremos el bloque texto al cual le pondremos Nombre y en Valor si etiqueta no existe creamos una lista vacía que se encuentra en Bloques > Lista > Crear una nueva lista vacía. Con esto lo que conseguimos es que todos los datos se guarden en una nueva lista.

 

Para que nos muestre los datos en el visor de lista lo que debemos hacer enlazar “cuando Screen1.inicializar” con “Poner VisorDeLista1.Elementos como” que a su vez está enlazado con “Tomar global Lista” como hicimos en el anterior bloque.

 

 

Con esto finalizamos la parte de bloques. Ahora solo nos queda probar usando nuestro emulador. He aquí una captura de pantalla de los datos ya guardados.