Manual App Inventor

APLICACIÓN UTILIZANDO APP INVENTOR

Instituto Tecnológico de Chilpancingo Sistemas y Computación

Ingeniería en Sistemas Computacionales

CREACION DE APLICACIÓN ANDROID UTILIZANDO APP INVENTOR

Materia: Taller de Computo Móvil Profesor: M. en C. José Mario Martínez Castro Alumnos: Raúl Galindo Hernández Adrián Daniel Muñoz García

Chilpancingo, Guerrero, 10 de Noviembre de 2014.

INSTITUTO TECNOLÓGICO DE CHILPANCINGO

1


Índice 1 Introducción ______________________________________________ 3 1.2 Conceptos Básicos ________________________________ 3 2 Objetivo del Manual ________________________________________10 3 Creación de Aplicación Android ___________________________ 10 4 Referencias _______________________________________________ 17


2


1 INTRODUCCIÓN En el presente documento se pretende mostrar el manual del desarrollo de una aplicación Android, utilizando la herramienta App Inventor.

1.2 Conceptos básicos Google App Inventor es una aplicación de Google Labs para crear aplicaciones de software para el sistema operativo Android. De forma visual y a partir de un conjunto de herramientas básicas, el usuario puede ir enlazando una serie de bloques para crear la aplicación. App inventor no necesita de una instalación 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]

2 OBJETIVO DEL MANUAL El objetivo de este manual es describir los pasos que se siguen para desarrollar una aplicación Android en App Inventor, se mostrará como se desarrolla la interfaz y como se programará en bloques. Esta aplicación utilizará base de datos para relacionar tres tablas, y agregar mediante la programación de bloques las referencias adecuadas.

3 DESARROLLO DE APLICACIÓN ANDROID Diseño de la Aplicación. Interfaz de Pantalla Principal.

Figura 3.1 Interfaz de pantalla principal. INSTITUTO TECNOLÓGICO DE CHILPANCINGO

3


La pantalla principal esta compuesta por una imagen de fondo, la cual será ocupada en todas las ventanas que se utilicen, además una etiqueta con el titulo, una imagen, y cuatro botones . El boton de habitación, huesped y hospedaje direcciona a una diferente pantalla con sus respectivas tablas. El botón salir obviamente realiza la opcion de cerrar todas las ventanas de la aplicación.

Figura 3.2 Interfaz Principal.

Programación por bloques de Pantalla Principal.

Figura 3.3 Programación de bloques. INSTITUTO TECNOLÓGICO DE CHILPANCINGO

4


Interfaz de Habitación. Para realizar la interfaz de la gestión de datos de la tabla habitación, primero se necesita una etiqueta para el titulo con nombre de Gestión, un layout tabla para los botones de la gestión como son agregar, editar y eliminar, también se añade un layout tabla para los campos de texto en los cuales se ingresarán datos. También se agrega un layout para agregar tres botones para realizar la operación de agregado, editado y eliminado, además de que para editar y eliminar se apoyará con el componente list picker para seleccionar la habitación que se quiera eliminar o editar. Y por ultimo se añade una etiqueta para el titulo de Catálogo y otra etiqueta que contendrá todos los valores de cada habitación los cuales serán mostrados. Ya que se utilizará una base de datos, también se agrega y se le pone cualquier nombre que uno desee.

Figura 3.4 Diseño de Pantalla Habitación.


5


Programación por bloques de Pantalla Habitación. Cabe destacar que el layout que contiene los campos de texto y el de los botones de operación se debe de ocultar, ya que solo será visible cuando se presione los botones.

En esta aplicación se hará uso de métodos para que sea mejor el entendimiento del funcionamiento de la programación por bloques. El método ocultarCampos oculta los layout que contienen los campos de texto, el list picker y los botones de operación. Este método fue creado para que cada vez que se realice una operación ya sea de editado, agregado o eliminado, se vuelva a ocultar. Obviamente se desoculta al presionar los botos de agregar, editar y eliminar. El método deshabilitarCampos, deshabilita los campos de texto, ya que este método es utilizado cuando se realiza la operación de editar o eliminar, ya que es obligatorio seleccionar una habitación antes de editar o eliminar. El método vaciarCamposHabitacion

simplemente limpia los campos poniéndolos con

cadena vacía. El método sonValidos valida cada campo, si todos los campos contienen un texto, entonces el método retorna un valor verdadero. También se crean variables que se ocuparan durante la aplicación, dentro de ellas se encuentran:    

indiceHabitacion: Para saber cuantos elementos hay en la tabla Habitación. contadorAuxiliarHabitacion: Para realizar el conteo de elementos en un ciclo. encabezadoHabitacion: Contiene un valor en texto para mostrar en catálogo. catalogoHabitacion: Es un String en el cuál se almacena todo el texto de catálogo.


6


 



 

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 habitación que se agregue. listaNombresHabitacion: Se almacena solamente los nombres de cada habitación, en este caso es el numero de la habitación. idEliminado: Es el valor del id que se quiere eliminar y así poder buscar. idEditado: El valor del id que se desea editar.


7



8


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


9

Manual App Inventor

Recommend Documents