7/20/2011

Desarrollar aplicaciones Android con Google App Inventor de forma visual

Mostramos en este artículo cómo desarrollar una aplicación para dispositivos con sistema operativo Android (Smartphones, Tablets, etc.) de forma sencilla sin conocimientos de programación usando Google App Inventor. Se trata de una utilidad web desarrollada por Google que permite realizar aplicaciones para Android sin escribir código Java, todo de forma visual e intuitiva (uniendo piezas de un puzle).



Google App Inventor

Google App Inventor es una aplicación proporcionada por Google que permite a cualquiera crear aplicaciones de software para el sistema operativo Android. Utiliza una interfaz gráfica que permite a los usuarios arrastrar y soltar objetos visuales para crear una aplicación que puede ejecutarse en el sistema Android, que funciona en muchos dispositivos móviles. Todo ello sin usar ni una sola línea de código, de forma intuitiva y gráfica.

La aplicación Google App Inventor se puso a disposición de los usuarios, mediante invitación, el 12 de julio de 2010, el 15 de diciembre de 2010 se puso a disposición de usuarios registrados.

La aplicación está dirigida a personas que no están familiarizadas con la programación de computadoras. La idea de esta utilidad es que cualquier persona pueda desarrollarse sus propias aplicaciones para su dispositivo Android.

Google App Inventor se ejecuta vía web, sólo será necesario ejecutar una pequeña aplicación para mostrar el Editor de Bloques (Block Editor) y el emulador, a partir de ahí todo será vía web, incluso nuestras aplicaciones se guardarán en la web. Por ello podremos acceder a nuestros proyectos desde cualquier equipo conectado a Internet.

Google App Inventor permite conectarse directamente a nuestro equipo Android, aunque en algunos casos no será posible, por ello incluye un emulador para probar las aplicaciones que desarrollemos para Android.

Google App Inventor permite guardar el proyecto en nuestro PC, para enviarlo a otros usuarios o para hacer copia de seguridad y permite también descargar la aplicación .apk compilada para ser instalada en el dispositivo Android. Por ello no necesitaremos ningún tipo de compilador ni nada por el estilo, todo podrá realizarse en el entorno de Google App Inventor.

Alta de usuario en Google, acceso a Google App Inventor

Google App Inventor es una herramienta de Google por lo que para acceder deberemos ser usuarios registrados de Google, podremos usar nuestro usuario y contraseña de GMail o de cualquier otro servicio de Google. Si no disponemos de usuario en Google deberemos darnos de alta desde:

https://www.google.com/accounts/NewAccount

Nos registraremos en Google y dispondremos de todos los servicios de Google gratuitos: GMail, Docs, Picassa, Calendar, Apps, Sites, Reader, Talk, Blogger, Analytics, AdSense, AdWords, ... y ahora también Google App Inventor.

Para acceder a Google App Inventor abriremos un navegador web e iniciaremos sesión en la URL:

http://appinventor.googlelabs.com/about

Introduciremos usuario y contraseña de Google, Google App Inventor detectará que es la primera vez que accedemos, por lo que nos mostrará los términos de licencia, si estamos de acuerdo los aceptaremos para tener acceso a Google App Inventor.

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

Elementos más importantes del entorno de Google App Inventor

Vamos a explicar algunas de las opciones más importantes de Google App Inventor, para ir familiarizándonos con este novedoso entorno de desarrollo de aplicaciones para Android. Una vez iniciada sesión en Google App Inventor, pulsaremos en "My projects" para acceder a la gestión de proyectos Android:

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

En el entorno de Google App Inventor podremos añadir nuevos proyectos Android pulsando en "New", eliminar proyectos existentes seleccionandos en "Projects" y pulsando "Delete", consultar y acceder a los proyectos guardados haciendo click sobre ellos:

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

Y, además, pulsando en "More Actions" podremos descargar el código del proyecto seleccionado, pulsando en "Download Source" o cargar código de algún proyecto existente en nuestro equipo (comprimido en Zip) pulsando en "Upload Source". Google App Inventor permite guardar el código fuente (source code) de cada proyecto en su formato, no genera los ficheros Java contenidos en la aplicación. Por lo tanto los proyectos generados con Google App Inventor sólo podrán ser editados, modificamos y compilados en Google App Inventor:

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

Crear nuevo proyecto Google App Inventor para Android, ventana de diseño de la aplicación, componentes

Para crear un nuevo proyecto Android con Google App Inventor pulsaremos en el botón "New" e introduciremos el nombre del nuevo proyecto en "Project name", por ejemplo "AjpdSoftHolaMundoAndroid":

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

Al crear un nuevo proyecto Android, Google App Inventor nos abrirá la ventana de diseño de la aplicación:

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

A continuación mostramos las partes más importantes de esta ventana de desarrollo de aplicaciones para dispositivos Android:

1. En la parte izquierda tendremos los componentes visuales y no visuales que podremos añadir a nuestra aplicación con tan solo arrastrar y soltar:

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

A continuación mostramos la lista de componentes disponibles en la paleta (Palette) agrupados por tipo. Hay que mencionar que dicha lista puede variar pues Google App Inventor es una versión Beta y será susceptible de modificaciones futuras añadiendo nuevos componentes y mejorando los actuales:

  • Basic: Button, Canvas, CheckBox, Clock, Image, Label, ListPicker, PasswordTextBox, TextBox, TinyDB.
  • Media: Camera, ImagePicker, Player, Sound, VideoPlayer.
  • Animation: Ball, ImageSprite.
  • Social: ContactPicker, EmailPicker, PhoneCall, PhoneNumberPicker, Texting, Twitter.
  • Sensors: AccelerometerSensor, LocationSensor, OrientationSensor.
  • Screen Arrangement: HorizontalArrangement, TableArrangement, VerticalArrangement.
  • LEGO MINDSTORMS: NxtColorSensor, NxtDirectCommands, NxtDrive, NxtLightSensor, NxtSoundSensor, NxtTouchSensor, NxtUltraSonicSensor.
  • Other stuff: ActivityStarter, BarcodeScanner, BluetoothClient, BluetoothServer, Notifier, SpeechRecognizer, texttoSpeech, TinyWebDB, Web.
  • Not ready for prime time: FusiontablesControl, GameClient, SoundRecorder, Voting.
  • Old stuff: .

Como se puede apreciar, hay componentes muy interesantes que nos permitirán utilizar la cámara de fotos, reproducir sonidos, acceder a los contatos, hacer llamadas, enviar SMS, usar el sensor de orientación (brújula), usar el sensor de localización, acceso a páginas web, etc. todo ello sin código Java, de forma visual.

2. En la parte central Google App Inventor nos mostrará la ventana principal de nuestra aplicación (diseñador) para que arrastremos los componentes que queramos añadir y la posición que tendrán en dicha ventana. En esta parte podremos ver tanto los componentes visuales (TextBox, Label, Button, ...) como los no visuales (Camera, Player, LocationSensor, BarcodeScanner, ...):

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

3. En la parte de la derecha tendremos la ventana "Components" donde Google App Inventor nos mostrará los componentes que hemos arrastrado a nuestra aplicación de forma jerárquica y por orden de aparición. Además, desde esta ventana, seleccionando un componente, podremos cambiarle el nombre pulsando en "Rename", eliminarlo pulsando en "Delete" y añadir ficheros de sonido, imágenes, etc. desde "Media" pulsando en "Add":

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

4. En la parte derecha, tras seleccionar un componente en "Components" veremos todas las propiedades del componente seleccionado. Desde aquí podremos modificar propiedades de los componentes tales como tamaño, texto, alineación, colores, imágenes, tipo de letra, etc. Las propiedades variarán en función del componente seleccionado:

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

Desde la ventana del diseñador podremos guardar el proyecto pulsando en "Save", hacerle una copia y guardarlo con otro nombre pulsando en "Save As" o bien generar un punto de control (una copia automática) pulsando en "CheckPoint":

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

Editor de bloques, Blocks Editor en Google App Inventor para Android

Google App Inventor "separa" la parte de diseño de la lógica de la aplicación, por ello siempre tendremos las dos ventanas abiertas, por un lado el diseñador (explicado anteriormente) y por el otro el editor de bloques (Blocks Editor) que nos permitirá establecer la lógica de la aplicación, las acciones que se realizarán con cada componente del diseñador, controlaremos los eventos que se puedan producir, etc. En definitiva, desde esta ventana será donde desarrollemos la aplicación.

Para abrir el Blocks Editor pulsaremos en el botón "Open the Blocks Editor":

Editor de bloques, Blocks Editor en Google App Inventor para Android

En el primer inicio y dependiendo del navegador, puede que nos solicite confirmación para descargar y ejecutar una aplicación Java: AppInventorForAndroidCodeblocks.jnlp pulsaremos en "Aceptar":

Editor de bloques, Blocks Editor en Google App Inventor para Android

Se iniciará la utilidad Java Web Start (si nos pide confirmación la aceptaremos):

Editor de bloques, Blocks Editor en Google App Inventor para Android

Y se abrirá la ventana App Inventor for Android Blocks Editor:

Editor de bloques, Blocks Editor en Google App Inventor para Android

Las partes más importantes de este editor de bloques son:

1. Built-In: desde esta pestaña del editor de bloques podremos definir y crear lo siguiente:

  • Definition: variables y procedimientos propios.
  • Text: usar funciones de texto tales como: definir una cadena de texto, join, make text, text=, text<, text>, length, trim, upcase, downcase, starts at, contains, split at first, split a first of any, split, split at any, split at spaces, segment, replace all.
  • Lists: usar listas y operaciones sobre ellas tales como: make a list, select list item, replace list item, remove list item, insert list item, length of list, append to list, add items to list, is in list?, position in list, pick random item, is list empty?, copy list, is a list? list to csv row, list to csv table, list from csv row, list from csv table.
  • Math: funciones matemáticas: >, <, =, <=, >=, not =, +, -, x, /, sqrt, random fraction, random integer, random set seed, negate, min, max, quotient, remainder, modulo, abs, round. floor, ceiling, expt, exp, log, sin, cos, tan, asin, acos, atan, atan2, convert radians to degrees, convert degrees to radians, format as decimal, is a number?.
  • Logic: funciones lógicas: true, false, not, =, and, or.
  • Control: flujos de control: if, ifelse, choose, foreach, for range, while, get start text, close screen, close screen with result, close application.
  • Colors: none, black, blue, cyan, dark gray, gray, green, light gray, magenta, orange, pink, red, white, yellow .

Editor de bloques, Blocks Editor en Google App Inventor para Android

Con estas opciones podremos definir toda la lógica de la aplicación.

2. My Blocks: desde donde podremos usar todas los eventos, funciones y procedimientos de cada componente que hayamos añadido en el diseñador de nuestra aplicación. Por ejemplo, si hemos añadido un Button y su nombre es "Button1" en My Blocks aparecerá, haciendo clic sobre él nos mostrará (al estilo de piezas de un puzle) los eventos, funciones, procedimientos y propiedades que pueden ser cambiadas en tiempo de ejecución. Para el caso de un Button mostrará: Button1.Click (cuando el usuario pulsa en el botón), Button1.GotFocus (cuando el botón se enfoca), Button1.LongClick (cuando se hace un pulsación "larga" sobre el botón, manteniéndolo pulsado unos segundos), Button1.LostFocus (cuando se pierde el foco), Button1.BackgroundColor (color de fondo del botón), Button1.Enabled (botón activado), Button1.Disabled (botón desactivado), ... Obviamente, dependiendo del tipo de componente seleccionado tendremos unas propiedades, procedimientos y funciones diferentes:

Editor de bloques, Blocks Editor en Google App Inventor para Android

Emulador, sincronización con dispositivo Android conectado al equipo, compilador y empaquetador apk

Google App Inventor permite ejecutar las aplicaciones que desarrollemos para Android en un Emulador, se trata de una aplicación que conectará con nuestro entorno App Inventor y desde donde podremos probar la aplicación sin necesidad de instalarla en un dispositivo Android físico real. Para ello pulsaremos en "New emulator":

Emulador, sincronización con dispositivo Android conectado al equipo

App Inventor nos mostrará una ventana de aviso indicando que el emulador tardará unos minutos en arrancarse y que debemos esperar a que se sincronice con la SD Card virtual que será la que enlace App Inventor con el emulador para enviar e instalar las aplicaciones Android de forma automática:

Emulador, sincronización con dispositivo Android conectado al equipo

Con el texto: Please wait. It can take 2 or 3 minutes for the emulator to become ready — even longer the first time. The emulator will be ready when the phone screen has a picture background as shown in the right image here. If it has a lock screen, as shown in the left, slide the bar with the green lock icon to the right to unlock it.
Even after the picture appears, continue to wait for the emulator to finish preparing the SD card: watch the notification area at the top of the emulator screen. When the emulator is ready, choose it from the Connect to Device menu to connect The Troubleshooting Guide
.

Se iniciará y abrirá el emulador, en realidad es como si se tratase de un móvil o tablet Android pero en el PC, casi con las mismas funciones:

Emulador, sincronización con dispositivo Android conectado al equipo

Una vez que hayamos desarrollado la aplicación Android (o mientras la vamos desarrollando) podremos ir probándola en el emulador, para ello en el desplegable de "Connect to Device" seleccionaremos el emulador:

Emulador, sincronización con dispositivo Android conectado al equipo

Y la aplicación se instalará y ejecutará de forma automática:

Emulador, sincronización con dispositivo Android conectado al equipo

Además, si disponemos de un móvil o tablet Android compatible con Google App Inventor, conectándolo al equipo, Google App Inventor lo detectará y nos permitirá instalar y ejecutar la aplicación Android de forma automática, desde el diseñador, menúy "Package for Phone" - "Download to Connected Phone":

Emulador, sincronización con dispositivo Android conectado al equipo

La aplicación se compilará y se generará el paquete apk con la aplicación lista para ser instalada en el dispositivo Android. Lo indicará en el botón con el estado "Packaging":

Emulador, sincronización con dispositivo Android conectado al equipo

Tras unos segundos Google App Inventor habrá generado el paquete APK listo para ser instalado con nuestra aplicación, si hemos seleccionado en el menú anterior "Download to this Computer" nos lo guardará en el PC en un fichero .apk que podremos copiar al móvil Android o enviar a otros usuarios:

Emulador, sincronización con dispositivo Android conectado al equipo

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Tras mostrar el entorno de desarrollo y las utilidades de Google App Inventor, vamos ahora a realizar una sencilla aplicación para Android, la típica "Hola Mundo". Crearemos un nuevo proyecto como ya hemos explicado anteriormente, con el nombre "AjpdSoftHolaMundoAndroid", App Inventor abrirá la ventana del diseñador. Arrastaremos un Button de la paleta de componentes "Basic" a la ventana central del diseñador:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Seleccionaremos el Button añadido en y modificaremos la propiedad "Text" a "Hola mundo", este será el texto (caption) del Button (Botón) que se mostrará al usuario en nuestra aplicación Android:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Podremos cambiarle el nombre, por defecto "Button1" seleccionándolo y pulsando en "Rename", por ejemplo por "btHolaMundo". Este será el nombre interno, el que usaremos para identificarlo de otros componentes en el editor de bloques, no se mostrará al usuario:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Cambiaremos el título de nuestra aplicación, para ello pulsaremos seleccionaremos "Screen1" en "Components", en la ventana de "Propierties" modificaremos la propiedad "Title" por "AjpdSoft Hola Mundo Android":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Ahora vamos a añadir un componente no visual que será el encargado de mostrar un mensaje en la pantala de nuestro móvil Android: "Notifier", accederemos a la paleta de componentes "Palete", pulsaremos en el grupo "Other stuff", arrastraremos y soltaremos el componente "Notifier" a nuestra ventana principal:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Como podemos observar en la siguiente imagen, el componente queda fuera de la ventana de la aplicación pues se trata de un componente no visible para el usuario (sólo para uso interno del desarrollador Android):

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Como ya hemos hecho con el Button, cambiaremos el nombre por defecto "Notifier1" por que el que queramos, seleccionándolo y pulsando en "Rename", por ejemplo "compNotificador":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Tras crear el diseño de la aplicación pasaremos ahora a crear la lógica, para ello pulsaremos en el botón "Open the Blocks Editor":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Una vez abierto el editor de bloques, pulsaremos en "My Blocks":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Lo que haremos ahora será definir la acción que se ejecutará cuando el usuario pulse en el botón, lo que haremos será mostrar un mensaje en la pantalla. Para ello seleccionaremos el botón "btHolaMundo", en la parte derecha nos mostrará los procedimientos, eventos y propiedades disponibles seleccionaremos "btHolaMundo.Click":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

A continuación seleccionaremos el componente Nitifier llamado en nuestro caso "compNotificador", seleccionaremos el procedimiento "compNotificador.ShowAlert":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Una vez que tenemos las dos piezas del puzle, el evento "click" del botón y la llamada al notificador, las uniremos como en un puzle:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Ahora sólo nos queda establecer el mensaje (texto) que aparecerá en pantalla, para eso nos vamos a "Built-In", pulsaremos en "Text" y seleccionamos "text" que es una pieza del puzle para establecer un texto cualquiera:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Unimos la pieza "text" del puzle con "notice" del "ShowAlert":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Introducimos en "text" el texto que queramos que muestre el Notifier, por ejemplo "¡¡Hola mundo Android!! por AjpdSoft":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Y ya tendremos nuestra primera aplicación para Android con Google App Inventor sin haber escrito ni una sola línea de código Java. Ahora la probaremos, primero en el emulador, para ello pulsaremos en "New emulator":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Cuando se haya cargado el emulador:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Pulsaremos en el desplegable "Connect to Device" y seleccionaremos el emulador:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Se inicará la sincronización automática, Google App Inventor subirá e instalará la aplicación Android en el emulador:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Si todo es correcto nos la mostrará como si de un móvil real se tratase:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Pulsando en el botón "Hola mundo" nos mostrará el mensaje "¡¡Hola mundo Android!! por AjpdSoft":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Si queremos probar la aplicación en real, en un dispositivo Android real, en la ventana del diseñador pulsaremos en "Package for Phone", en el menú seleccionaremos "Download to this Computer":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

App Inventor compilará y empaquetará la aplicación en un apk, lo guardaremos en el dispositivo móvil o en nuestro PC:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Si tenemos el móvil conectado podemos guardarlo directamente en la SD del móvil:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Ahora instalaremos la aplicación en nuestro móvil Android (en nuestro caso un Samsung Galaxy S), pulsaremos en el fichero apk generado por Google App Inventor:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Nos indicará las posibles acciones de nuestra aplicación, pulsaremos "Instalar":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Se inicará la instalación de la aplicación Android desarrollada:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Nos indicará que la aplicación ha sido instalada, pulsaremos "Abrir" para ejecutarla directamente:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Y ya podremos disfrutar de nuestra primera aplicación Android, desarrollada sin apenas conocimientos de programación:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Conclusiones sobre Google App Inventor

En primer lugar decir que se trata de una versión Beta y que se van añadiendo nuevas funcionalidades cada cierto tiempo.

Hemos de decir que se trata de una curiosa y novedosa forma de "programar", sin duda casi se cumple el objetivo de Google App Inventor: que cada persona pueda realizarse sus propias aplicaciones para su móvil Android.

Es cierto que si bien no se usa código Java sí hacen falta unos conocimientos mínimos de programación para entender la lógica de programación si se quieren realizar aplicaciones profesionales, aunque con práctica y teniendo claro el objetivo del programa Android a desarrollar lo puede hacer cualquier persona sin conocimientos de programación.

Como ventajas podemos destacar:

  • No necesitamos instalar nada en el equipo, por lo que no son necesarios permisos ni conocimientos del sistema operativo.
  • Todos los proyectos quedan guardados en el usuario de Google App Inventor por lo que no tendremos que preocuparnos de hacer copias de seguridad. Siempre los tendremos accesibles desde cualquier equipo con conexión a Internet.
  • Dispone de un emulador para probar las aplicaciones antes de instalarlas en el móvil.
  • Permite conexión directa con el móvil para instalar las aplicaciones de forma automática.
  • No requiere de conocimientos de programación, todo se realiza de forma visual, incluso la lógica de la aplicación.
  • Dispone de muchos componentes (como hemos comentado aquí) para acceso a casi todos los recursos del móvil.
  • Compila y genera el empaquetado listo para ser instalado por lo que no necesitaremos compiladores ni IDEs de desarrollo que a veces son muy complicados y lentos.
  • Quizá sea el IDE de desarrollo de aplicaciones para Android más rápido de entender y de usar gracias a su novedoso método de "piezas de puzle".

Como inconvenientes destacamos:

  • No genera código Java, lo cual es una lástima, Google App Inventor nos podría servir como base para desarrollar aplicaciones profesionales para Android.
  • No dispone de toda la flexibilidad que tienen IDEs como Eclipse, al no tener acceso al código Java generado.
  • Únicamente permite desarrollar aplicaciones para Android.
  • Si no funciona la conexión a Internet no podremos desarrollar.
  • El emulador es menos completo que otros emuladores como los existentes para Eclipse.
  • Faltan algunos componentes, por ejemplo no hay soporte para realizar aplicaciones que usen SQLite (base de datos) en Android.

Artículos relacionados

Créditos

Artículo realizado íntegramente por Alonsojpd miembro fundador del proyecto AjpdSoft.

No hay comentarios: