Cargando



Desarrollar aplicaciones Android con App Inventor 2

Aprende a desarrollar tus propias aplicaciones android usando App Inventor 2. En este tutorial encontrarás todos los pasos necesarios.


dic 19 2016 17:13
Avanzado
Total de Apartados : 4
dic 19 2016 19:40

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.

 

 

¿Qué nos permite hacer App Inventor 2?
Crear Aplicaciones para los dispositivos que posean sistema Android usando un navegador web y un teléfono o emulador conectado. Los servidores de App Inventor almacenan su trabajo y realizan el seguimiento de sus proyectos.

 

Se trata de una herramienta de desarrollo visual muy fácil de usar, por lo que muchos de los usuarios de esta herramienta no son netamente programadores.

 

¿Con qué construimos nuestras aplicaciones en App Inventor 2?
App Inventor Designer es la aplicación utilizada para seleccionar los componentes para App Inventor, ésta nos ofrece una paleta que contiene un gran número de herramientas con las cuales se puede trabajar con una enorme simplicidad.

 

App Inventor Blocks Editor nos permite enlazar los diferentes tipos de bloques con los cuales podemos definir las funciones de lo que diseñemos en nuestra aplicación. Una de las ventajas es la manera sencilla y visual de mostrar el trabajo que estamos realizando en forma de un rompecabezas.

 

¿Es fácil construir aplicaciones con App Inventor 2?
Las diferentes aplicaciones que aparecen con el paso del tiempo en los dispositivos Android nos han demostrado que hay una abundancia de aplicaciones en las que podemos trabajar ya sean básicas o complicadas. El app Inventor 2 nos permite trabajar con una sencillez que hace que no necesites ser un programador para trabajar en entorno de gran simplicidad, ya sea trabajando con una paleta de herramientas o un conjunto de bloques que podemos manejar prácticamente como si fuera un juego de rompecabezas. Además de todo eso, al finalizar tu proyecto, puedes empaquetar tu aplicación y producir una aplicación independiente para instalar.

 

Otra de las ventajas que te ofrece es que no necesariamente debes tener un teléfono con sistema operativo Android, ya que desde la página de App Inventor puedes descargar un software llamado aiStarter que te permitirá emularlo desde tu PC.

 

¿Cómo acceder a App Inventor 2?
Para acceder, lo primero que debes hacer es registrarte en App Inventor, utilizando tu cuenta Gmail. Es importante saber que este proceso es completamente gratis.

 

Requisitos de los sistemas, dispositivos o navegadores

 

Sistemas operativos

  • Macintosh: Mac OS X 10.5 o superior.
  • Windows: Windows XP, Windows Vista, Windows 7
  • GNU/Linux: Ubuntu 8 o superior, Debian 5 o superior

 

Navegadores

  • Mozilla Firefox 3.6 o superior
  • Apple Safari 5.0 o superior
  • Google Chrome 4.0 o superior
  • Microsoft Internet Explorer no lo soporta

 

Teléfonos y dispositivos Tablet

  • Android Operating System 2.3 ("Gingerbread") o superior

 


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:

 

Opción 1
La más recomendada por la página de appinventor es si tienes un dispositivo que utilice android y tienes una conexión inalámbrica a internet (WiFi), podemos trabajar solo instalando la aplicación de App Inventor en nuestro Dispositivo con android.

 

Opción 2
La segunda opción es la de instalar el software en nuestro ordenador para poder utilizar el emulador de android e ir probando nuestras aplicaciones mientras las vamos construyendo.

 

Opción 3
En esta opción es la más complicada y engorrosa; si nuestro sistema operativo es Windows y tenemos un dispositivo android pero no poseemos una Red inalámbrica (WiFi), podemos instalar el software en nuestro ordenador y conectar nuestro dispositivo Android a través del USB. En la página podemos ver cómo esta opción es utilizada como un último recurso debido a su evidente complejidad.

 

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:

 

Opción 1: Conectando la App Inventor 2 a tu dispositivo Android por conexión inalámbrica (WiFi)

 

Paso 1

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

 

 

 

AppInventor_imagen1.jpg

 

 

 

Fichero APK

 

 

 

AppInventor_imagen2.jpg

 

Nota
Tomemos en cuenta que si lo descargamos desde la PlayStore ésta se actualizará de forma automática y si utilizamos la opción de descargarlo de forma directa, tendremos que actualizarlo de forma manual.

 

Paso 2

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.

 

Paso 3

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.

 

AppInventor_imagen3.jpg

 

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:

 

AppInventor_imagen4.jpg

 

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.

 

Opción 2 y 3: Instalar App Inventor en nuestro ordenador con sistema operativo Windows

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

 

Paso 1

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.

 

AppInventor_imagen5.jpg

 

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

 

AppInventor_imagen6.jpg

 

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

 

AppInventor_imagen7.jpg

 

Paso 2

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

 

AppInventor_imagen8.jpg

 

Elegimos los componentes que queremos instalar y pulsamos Next >.

 

AppInventor_imagen9.jpg

 

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

 

AppInventor_imagen10.jpg

 

Paso 3

Elegimos la carpeta de inicio y pulsamos Install.

 

AppInventor_imagen11.jpg

 

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

 

AppInventor_imagen12.jpg

 

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

 

AppInventor_imagen13.jpg

 

Paso 4

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.

 

AppInventor_imagen14.jpg

 

Nota
El aiStarter debe ser corrido siempre que vayamos a trabajar con el App Inventor 2 si no estamos utilizando la conexión por red inalámbrica WiFi, el icono de aiStarter deberá aparecer en el escritorio después de la instalación.

 

AppInventor_imagen16.jpg

 

 


2. Ejecución de App Inventor 2


Primer paso

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

 

AppInventor_imagen16.jpg

 

Esto hará que se inicie la ventana del aiStarter.

 

AppInventor_imagen17.jpg

 

Segundo paso

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

 

AppInventor_imagen18.jpg

 

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.

 

AppInventor_imagen23.jpg

 

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

 

AppInventor_imagen24.jpg

 

Tercer paso

Ahora vamos a comenzar un nuevo proyecto.

 

AppInventor_imagen25.jpg

 

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

 

AppInventor_imagen26.jpg

 

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

 

AppInventor_imagen27.jpg

 

Cuarto paso

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 .

 

AppInventor_imagen28.jpg

 

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

 

AppInventor_imagen29.jpg

 

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

 

AppInventor_imagen30.jpg

 

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.

 

AppInventor_imagen31.jpg

 

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

 

AppInventor_imagen32.jpg

 

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.

 

AppInventor_imagen33.jpg

 

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.

 

Nota
Recomiendo que antes de iniciar cualquier proyecto estemos seguros de haber iniciado el aiStarter para no tener ningún problema a la hora de probar nuestras aplicaciones y es necesario que esté corriendo antes de ejecutar el emulador en la página.

 


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.

 

Paso 1

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.

 

AppInventor_imagen34.jpg

 

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.

 

AppInventor_imagen35.jpg

 

Paso 2

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.

 

AppInventor_imagen36.jpg

 

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

 

AppInventor_imagen37.jpg

 

Paso 3

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.

 

AppInventor_imagen38.jpg

 

Paso 4

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

 

AppInventor_imagen39.jpg

 

Paso 5

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:

 

AppInventor_imagen40.jpg

 

Paso 6

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.

 

AppInventor_imagen41.jpg

 

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.

 

AppInventor_imagen42.jpg

 

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í:

 

AppInventor_imagen43.jpg

 

Paso 7

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.

 

AppInventor_imagen44.jpg

 

Paso 8

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:

 

AppInventor_imagen45.jpg

 

Paso 9

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í:

 

AppInventor_imagen46.jpg

 

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.

 

AppInventor_imagen50.jpg

 

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.

 

Paso 1

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

 

AppInventor_imagen51.jpg

 

Paso 2

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:

 

AppInventor_imagen52.jpg

 

Paso 3

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í:

 

AppInventor_imagen53.jpg

 

Paso 4

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í:

 

AppInventor_imagen54.jpg

 

Paso 5

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

 

AppInventor_imagen55.jpg

 

Paso 6

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

 

AppInventor_imagen56.jpg

 

Paso 7

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:

 

AppInventor_imagen57.jpg

 

Paso 8

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í:

 

AppInventor_imagen58.jpg

 

Paso 9

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.

 

AppInventor_imagen59.jpg

 

Paso 10

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í:

 

AppInventor_imagen60.jpg

 

Paso 11

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.

 

AppInventor_imagen61.jpg

 

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.

 

AppInventor_imagen62.jpg

 

Nota
Si te da algún error, solo te recomiendo revisar los Bloques, en caso de no existir algún error en los Bloques, reiniciar elemulador.

 


¿Te ayudó este Tutorial?


3 Comentarios


Cesar Ortiz
jun 03 2016 18:08

Como para no votar un 10. Genial manual para empezar a entender el desarrollo de apps Android con esta herramienta.


Siro Martinez
jun 03 2016 18:28

Me he logado para poder dar gracias.

Muy util. os escribo para deciros que sigais así. da gusto ver esto. saludos

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X