Embed Size (px)
DESCRIPTION
Manual
Citation preview
aplicación utilizando APP INVENTOR
Instituto Tecnológico de ChilpancingoSistemas 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
aplicación utilizando APP INVENTOR
Índice
1 Introducción ______________________________________________ 3 1.2 Conceptos Básicos ________________________________ 3
2 Objetivo del Manual ________________________________________103 Creación de Aplicación Android ___________________________ 10
4 Referencias _______________________________________________ 17
instituto tecnológico de chilpancingo 2
aplicación utilizando APP INVENTOR
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.
instituto tecnológico de chilpancingo 3
aplicación utilizando APP INVENTOR
Figura 3.1 Interfaz de pantalla principal.
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.
instituto tecnológico de chilpancingo 4
aplicación utilizando APP INVENTOR
Figura 3.3 Programación de bloques.
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.
instituto tecnológico de chilpancingo 5
aplicación utilizando APP INVENTOR
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.
instituto tecnológico de chilpancingo 6
aplicación utilizando APP INVENTOR
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. 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.
instituto tecnológico de chilpancingo 7
aplicación utilizando APP INVENTOR
instituto tecnológico de chilpancingo 8
aplicación utilizando APP INVENTOR
REFERENCIAS
[1] App Inventor 2: http://www.appinventor.org/
instituto tecnológico de chilpancingo 9
