APP INVENTOR

App inventor es una aplicación de Google Labs que nos permite crear aplicaciones de software para el SO Android. De forma visual y a partir de un conjunto de herramientas básicas en forma de puzles, el usuario puede ir enlazando una serie de piezas para crear la aplicación.

Como ejemplo para la explicación voy a utilizar una aplicación que he creado con dicho programa llamada paletadecolores que puedes descargar aquí.

Antes de explicar como diseñar dicha aplicación veamos el entorno de trabajo de App Inventor:

El entorno de trabajo consta de cuatro partes principales:

Paleta: Se encuentra a la izquierda y está compuesta por todos los objetos interactivos que podemos añadir para cumplir las funciones de nuestra aplicación.

Viewer: Es el visor de la pantalla donde se muestra la apariencia que tendrá la aplicación en el móvil.

Components: En este apartado aparecen reflejados los componentes que hemos añadido en nuestra aplicación.

Properties: Muestra las propiedades que podemos modificar del componente que hayamos seleccionado previamente.

¿CÓMO CREAR UNA APLICACIÓN?

Lo primero que debemos hacer para empezar a crear una aplicación es abrir un nuevo proyecto y elegir un nombre.

App Inventor se divide en dos partes, una de ellas es la parte visual (designer) donde van a ir apareciendo los componentes que añadimos y con los que podremos interaccionar gracias a la segunda parte (blocks) que va a ser la encargada de dar las órdenes o programar.

TUTORIAL: PARTE DESIGNER

Para explicar como crear la paletadecolores vamos a empezar por la crear la parte visual, el diseño. Sólo vamos a necesitar una screen para esta aplicación en la cual lo primero que debemos introducir es una tabla dirigiéndonos a layout - tablearragement y seleccionar que tenga 3 columnas y 2 filas como se muestra en la imagen:

En dicha tabla dejaremos unos huecos encima de los tres colores RGB (rojo, verde, azul) donde aparecerán posteriormente los valores correspondientes de estos colores. Dentro de dicha tabla para designar un nombre a cada hueco utilizamos una textbox y para escribir los nombres se utiliza un label, ambos componentes están en palette - user interface.

Debajo de la tabla que acabamos de crear vamos a añadir de nuevo otra tabla en la que vamos a introducir tres sliders, cada uno correspondiente a un label con el nombre de los tres colores tal y como se muestra en la imagen. Los labels se utilizarán posteriormente para activar más o menos el valor de cada color.

Por último vamos a crear el cuadro en el cual va a estar reflejado la mezcla de los colores. Para ello vamos a añadir una textbox grande que se encuentra en paletta - user interface. Y para finalizar añadimos un reloj que está situado en el mismo apartado. Una vez terminada la parte visual, el apartado de componentes debe quedar así:

*Cada una de las tablas y las cajas de texto pueden tener el tamaño que cada uno desee.

TUTORIAL: PARTE BLOCKS

Para hacer funcionar nuestra aplicación vamos a crear el apartado de programación, es decir, las órdenes. Para ello clicamos arriba a la derecha donde dice Blocks.

En la primera parte lo que vamos a hacer es decirle a la aplicación que cuando nosotros deslicemos el  slider arriba se muestre el valor correspondiente del 0 al 255 y abajo quede reflejado el color. Debes copiar las órdenes tal y como se muestra en la imagen.

Cada orden o mejor dicho sentencia se escoge de la lista que aparece a la izquierda. Para entender mejor el significado de cada sentencia aquí dejo un enlace a un tutorial donde lo explican con más detalle: sentencias

En la siguiente imagen se muestra la ampliación a esta aplicación que consiste en que aparezca escrito el valor predominante de los tres colores junto con el color resultante en la textbox de abajo. O por el contrario que aparezca escrito si no predomina ningún color sobre otro. Aquí están las órdenes que se han utilizado para dicha ampliación:

Una vez que hayamos terminado nuestra aplicación podemos guardarla en .apk dirigiéndonos a build - save .apk to my computer: