App Inventor es un entorno de desarrollo de software creado por Google Labs y MIT Media Lab con el fin de proporcionar una herramienta mas didáctica y sencilla para crear aplicaciones para los dispositivos móviles.
En la siguiente figura se puede ver la interfaz donde se comienzan a desarrollar los proyectos.
Figura 1: Interfaz de Diseño de AppInventor
Como se muestra en figura 1, la interfaz se puede dividir en 5 partes. Al comenzar un proyecto nuevo, primero se debe desarrollar la parte del diseño de la aplicación.
En el Área 1, se pueden ver los recursos que se pueden utilizar. Estos elementos se dividen por categorias, 'User Interface', 'Layout', 'Media', 'Drawing and Animation', 'Maps' y más abajo tambien aparecen las siguientes categorias 'Sensors', 'Social', 'Storage', 'Conectivity, 'Experimental' y 'Extension'. Para utilizar alguno de estos elementos solo se arrastran a la area 2.
En el Área 2, se puede ver directamente como se vería la aplicación en un celular, también se puede cambiar para ver como quedaría en una tablet y en el monitor de una computadora. Se debe tener cuidado cuando se manejan los elementos aquí, primero se debe comenzar con el Layout para luego empezar a construir la interfaz de al aplicación agregando los botones, textos, labels, entre otros.
En el Área 3 tenemos 'Media' para poder visualizar todos los elementos que tenemos agregados. En la parte baja de este recuadro se pueden ven dos botones, 'Rename' y 'Delete', estas sirven para editar los nombres y eliminar los elementos. Para mayor organización a la hora de trabajar con bloques, se recomienda ponerles nombres distintivos a los elementos que tenga en mente usar para poder distinguirlos con mayor facilidad.
En el Área 4, tenemos la pestaña de 'Media' donde se pueden cargar los archivos que quieras incluir, como imágenes, vídeos, entre otros. Por ultimo, esta el Área 5, donde se puede ver y editar los elementos que tengas en tu aplicación, opciones como editar texto, ancho, largo, tipo de letra, color de letra, color de fondo, entre otros. Estas opciones varían según el elemento escogido.
Figura 2: Interfaz de Bloques de AppInventor
Como se muestra en la Figura 2, la segunda interfaz de creación en AppInventor es la llamada 'Bloques'. Esta también se puede dividir en 4 secciones. En la Área 1, tenemos la sección de 'Blocks' nuevamente, aquí se puede ver un menú muy amplio de acciones que se pueden realizar dependiendo del elemento que estés seleccionando. Se divide en varias categorias, 'Control', 'Logica', 'Matematica ', 'Texto', 'Listas', 'Diccionarios', 'Colores', 'Variables' y 'Procedimientos', para luego pasar a los componentes que incluimos en la primer interfaz de 'Diseño'. En este caso, no hay componentes, únicamente la pantalla 'Screen1' que viene por default a la hora de comenzar un nuevo proyecto.
En el Area 2, se encuentra nuevamente 'Media', esta pestaña es la misma tanto para 'Bloques' como para 'Diseño'. En el Área 3, tenemos bloques en especifico, como se muestra en la Fig 7 donde esta seleccionada la categoría de 'Control'. Se pueden reconocer funciones como 'if then', 'if then else', asimismo funciones predeterminadas como 'for each item in list', que ayudan a construir nuestro codigo de bloques.
Finalmente, tenemos el Área 4 es básicamente una pantalla vacia donde se agregan los componentes, como tu mesa de trabajo, aquí se unen los bloques para crear tu codigo de bloques. Los iconos de derecha son algunas herramientas de ayuda como 'zoom in', 'zoom out', la 'basura' donde botas los bloques que no necesitas y la mochila donde puedes arrastrar bloques que utilizas frecuentemente para tenerlos a la mano.