APLICACIN UTILIZANDO APP INVENTOR

Instituto Tecnolgico de Chilpancingo

Sistemas y Computacin

Ingeniera en Sistemas Computacionales

CREACION DE APLICACIN ANDROID UTILIZANDO

APP INVENTOR

Materia: Taller de Computo Mvil

Profesor: M. en C. Jos Mario Martnez Castro
Alumnos: Ral Galindo Hernndez
Adrin Daniel Muoz Garca

Chilpancingo, Guerrero, 10 de Noviembre de 2014.

INSTITUTO TECNOLGICO DE CHILPANCINGO

APLICACIN UTILIZANDO APP INVENTOR

ndice

Introduccin ______________________________________________ 3
1.2 Conceptos Bsicos ________________________________ 3
2 Objetivo del Manual ________________________________________10
3 Creacin de Aplicacin Android ___________________________ 10
4

Referencias _______________________________________________ 17

INSTITUTO TECNOLGICO DE CHILPANCINGO

APLICACIN UTILIZANDO APP INVENTOR

INTRODUCCIN

En el presente documento se pretende mostrar el manual del desarrollo de una

aplicacin Android, utilizando la herramienta App Inventor.
1.2 Conceptos bsicos
Google App Inventor es una aplicacin de Google Labs para crear aplicaciones de software
para el sistema operativo Android. De forma visual y a partir de un conjunto de
herramientas bsicas, el usuario puede ir enlazando una serie de bloques para crear la
aplicacin.
App inventor no necesita de una instalacin para poder ser utilizada por los diversos
usuarios que disponen de ella.
App inventor es una herramienta cloud, para poder utilizarla solo es necesario ingresar a la
web y contar con una cuenta de gmail. [1]

OBJETIVO DEL MANUAL

El objetivo de este manual es describir los pasos que se siguen para desarrollar una
aplicacin Android en App Inventor, se mostrar como se desarrolla la interfaz y como se
programar en bloques. Esta aplicacin utilizar base de datos para relacionar tres tablas, y
agregar mediante la programacin de bloques las referencias adecuadas.
3

DESARROLLO DE APLICACIN ANDROID

Diseo de la Aplicacin.

Interfaz de Pantalla Principal.

Figura 3.1 Interfaz de pantalla principal.

INSTITUTO TECNOLGICO DE CHILPANCINGO

APLICACIN UTILIZANDO APP INVENTOR

La pantalla principal esta compuesta por una imagen de fondo, la cual ser ocupada
en todas las ventanas que se utilicen, adems una etiqueta con el titulo, una imagen, y
cuatro botones . El boton de habitacin, huesped y hospedaje direcciona a una diferente
pantalla con sus respectivas tablas.
El botn salir obviamente realiza la opcion de cerrar todas las ventanas de la
aplicacin.

Figura 3.2 Interfaz Principal.

Programacin por bloques de Pantalla Principal.

Figura 3.3 Programacin de bloques.

INSTITUTO TECNOLGICO DE CHILPANCINGO

APLICACIN UTILIZANDO APP INVENTOR

Interfaz de Habitacin.
Para realizar la interfaz de la gestin de datos de la tabla habitacin, primero se
necesita una etiqueta para el titulo con nombre de Gestin, un layout tabla para los botones
de la gestin como son agregar, editar y eliminar, tambin se aade un layout tabla para los
campos de texto en los cuales se ingresarn datos. Tambin se agrega un layout para
agregar tres botones para realizar la operacin de agregado, editado y eliminado, adems de
que para editar y eliminar se apoyar con el componente list picker para seleccionar la
habitacin que se quiera eliminar o editar. Y por ultimo se aade una etiqueta para el titulo
de Catlogo y otra etiqueta que contendr todos los valores de cada habitacin los cuales
sern mostrados. Ya que se utilizar una base de datos, tambin se agrega y se le pone
cualquier nombre que uno desee.

Figura 3.4 Diseo de Pantalla Habitacin.

INSTITUTO TECNOLGICO DE CHILPANCINGO

APLICACIN UTILIZANDO APP INVENTOR

Programacin por bloques de Pantalla Habitacin.

Cabe destacar que el layout que contiene los campos de texto y el de los botones de
operacin se debe de ocultar, ya que solo ser visible cuando se presione los botones.

En esta aplicacin se har uso de mtodos para que sea mejor el entendimiento del
funcionamiento de la programacin por bloques.
El mtodo ocultarCampos oculta los layout que contienen los campos de texto, el list picker
y los botones de operacin. Este mtodo fue creado para que cada vez que se realice una
operacin ya sea de editado, agregado o eliminado, se vuelva a ocultar. Obviamente se
desoculta al presionar los botos de agregar, editar y eliminar.
El mtodo deshabilitarCampos, deshabilita los campos de texto, ya que este mtodo es
utilizado cuando se realiza la operacin de editar o eliminar, ya que es obligatorio
seleccionar una habitacin antes de editar o eliminar.
El mtodo vaciarCamposHabitacion

simplemente limpia los campos ponindolos con

cadena vaca.
El mtodo sonValidos valida cada campo, si todos los campos contienen un texto, entonces
el mtodo retorna un valor verdadero.
Tambin se crean variables que se ocuparan durante la aplicacin, dentro de ellas se
encuentran:

indiceHabitacion: Para saber cuantos elementos hay en la tabla Habitacin.

contadorAuxiliarHabitacion: Para realizar el conteo de elementos en un ciclo.
encabezadoHabitacion: Contiene un valor en texto para mostrar en catlogo.
catalogoHabitacion: Es un String en el cul se almacena todo el texto de catlogo.

INSTITUTO TECNOLGICO DE CHILPANCINGO

APLICACIN UTILIZANDO APP INVENTOR

valorAutoincrementalHabitacion: Se almacena el valor de el id que se incrementa.

listaHabitacion: Es una lista que contiene una lista de con los valores de cada
habitacin que se agregue.
listaNombresHabitacion: Se almacena solamente los nombres de cada habitacin,
en este caso es el numero de la habitacin.
idEliminado: Es el valor del id que se quiere eliminar y as poder buscar.
idEditado: El valor del id que se desea editar.

INSTITUTO TECNOLGICO DE CHILPANCINGO

APLICACIN UTILIZANDO APP INVENTOR

INSTITUTO TECNOLGICO DE CHILPANCINGO

APLICACIN UTILIZANDO APP INVENTOR

REFERENCIAS
[1] App Inventor 2: http://www.appinventor.org/

INSTITUTO TECNOLGICO DE CHILPANCINGO