Blog

Archivos

Iniciando en App Inventor

  • Ernest
  • agosto 12th, 2010
  • News
  • 0 Comments

Por segunda semana tenemos a Nicolas Bartolotti para hablarnos de un tema de candente actualidad para los desarolladores de Android. Al final de este tutorial hay tambien un par de enlaces a articulos relacionados con este tema por Israel Ferrer.

En este artículo vamos a trabajar con App Inventor for Android, esta plataforma que provee Google abre la posibilidad de crear soluciones a desarrolladores independientemente de sus conocimientos de programación informática. Para docentes y profesores de las ramas de ingeniería y desarrollo móbil, Inventor se ha convertido en una poderosa herramienta para introducir a los estudiantes al mundo de la programación y ayudarlos a convertirse en creadores de la tecnología y no sólo consumidores de la tecnología. App Inventor entre tantas cosas, nos permite compartir las aplicaciones desarrolladas de una forma muy simple e intuitiva.

Totalmente basado en la web App Inventor se convierte en algo muy atractivo para cualquier persona amante y seguidor de la tecnología.

¿Le damos una visita al escenario de desarrollo?

Actualmente App Inventor se encuentra en fase experimental y por este motivo debemos recibir una invitación para utilizarlo.



Fig.1 Escenario Inicial App Inventor


Como se puede observar en la Fig.1 ingresamos al site y generamos un nuevo proyecto. Así de simple empezamos a desarrollar.


Fig.2 Marco de diseño de la solución Mobile


En la Fig.2 podemos visualizar el marco de diseño que se puede proporcionar a nuestro desarrollo Android, el entorno de diseño se compone de una Palette (caja de controles), un Viewer (visualizador) donde puedo visualizar el diseño sobre la muestra de teléfono Android y una guía de componentes y propiedades de cada uno de los controles que se están manipulando.

Con estas opciones rápidamente sin conocer mucho de la tecnología Android puede diseñar nuestra solución, arrastrando controles por ejemplo un botón, una imagen, cambiar colores y demás.

Ahora la preocupación llega en como codificar el comportamiento de la interfaz, socorro!! Necesito un profesional del software es lo primero que llegaría a sus mentes.

App Inventor propone un entorno de programación por bloques muy simple de manipular por alguien ajeno al software. ¿Lo vemos?


Fig. 3 – Editor de Código Fuente


El editor de código fuente que se muestra en la Fig.3 propone dos opciones que se pueden visualizar en el vértice superior izquierdo, en donde podemos optar por seleccionar los bloques propios (ellos se derivan de los controles diseñados en la interfaz mobile) y los bloques de construcción tradicionales para aplicar comportamiento en general a nuestra solución.

Bien, ahora el requerimiento de prueba sería:

"Necesito que al pulsar sobre un botón en la interfaz de mi solución Android Mobile se cambie el fondo de pantalla a color gris."

Paso 1:

Buscar en los bloques de construcción propios como el control del botón:


Fig.4 – Opciones sobre el control de botón


Como podemos observar en la Fig.4 al seleccionar el botón se nos proponen opciones muy intuitivas,

Paso 2:

Seleccionamos el bloque de "Click". Esta es la operación donde se requiere una acción.


Fig. 5 – Selección del Bloque de Click


Paso 3:

Vamos a arrastrar otro bloque que reaccione con una actividad a este evento de "Click". No debemos preocuparnos mucho porque App Inventor con las figuras de los bloques ya nos guía. Esto quiere decir que según su forma encajarán.


Fig. 6 – Acoplado de Bloques


Como se muestra en la Fig.6 hemos codificado que al hacer Click en el botón cambiamos el fondo de la pantalla a… nos resta definir el color.

Paso 4:

Seleccionamos de los bloques generales que provee App Inventor, un color.


Fig. 7 Selección de un bloque de color.


Listo!!

Nuestra aplicación está completa, y así de simple la podemos realizar

Simple ¿no?

Les dejo un video de implementación.

Hasta la próxima!
Publicado por Ing. Nicolas Bortolotti


Articulos relacionados:

Comments are closed.