Actividad de apropiación de conocimiento Evidencia de producto

Taller práctico: aplicación móvil

ANALISIS PARA EL DESARROLLO MOVIL CON APP INVENTOR

PRESENTADO POR

Estudiante:

SENA

2020

1
 Contenido

DISEÑO DE INTERFAZ GRAFICA..........................................................................................................3

PASÓ Nº 1 .....................................................................................................................................3
PASÓ Nº 2......................................................................................................................................3
PASÓ Nº 3.........................................................................................................................................3
PASÓ Nº 4......................................................................................................................................4
PASÓ Nº 5.........................................................................................................................................4
PASÓ Nº 6.........................................................................................................................................5
PASÓ Nº 7.........................................................................................................................................5
PASÓ Nº 8......................................................................................................................................6
PASÓ Nº 9.........................................................................................................................................6
PASÓ Nº 10 OTROS COMPONENTES.............................................................................................7
PROGRMACION DE BLOQUES DE LA APP.................................................................................7
PASÓ Nº 11 PANTALLA DE INICIO..........................................................................................7
PASO Nº 12 ELEMENTOS SELECCIONADOS EN LAS LISTAS............................................8
PASÓ Nº 13 NOTIFICACIONES Y VALIDACIONES................................................................8
PASÓ Nº 14 BOTON INICIAR PEDIDO..................................................................................9
PASÓ Nº 15 BOTON VER PEDIDOS......................................................................................10
PASÓ Nº 16 SCREEN PEDIDOS..............................................................................................10
VISUALIZACION DE LA APP..................................................................................................................12
PASÓ Nº 16 VISUALIZACION.........................................................................................12

FUENTES............................................................................................................................................13

2
 DISEÑO DE INTERFAZ GRAFICA

PASÓ Nº 1
 Se debe ingresar a la página web http://appinventor.mit.edu/explore/ e ingresar con el
usuario y contraseña anteriormente creado, a continuación aparece una ventana con la
imagen adjunta, donde se mostrara los proyectos ya creados.

PASÓ Nº 2
 Se debe iniciar un nuevo proyecto, se debe dar clic en la pestaña “Proyectos” se
despliega un listado y se debe dar clic en “ Comenzar un proyecto nuevo” como se
muestra en la imagen

PASÓ Nº 3
 Aparecerá una nueva ventana que solicita el nombre del proyecto que deseas crear,
debes ingresar el nombre.

3
 PASÓ Nº 4
 Primero es quitar los títulos en la parte superior de la APP y se realiza en la parte
inferior donde dice “titlevisible” y “Showstatusbar”.

PASÓ Nº 5

 En la pantalla principal Screen1 agregamos una Disposición Horizontal donde irán todos los
elementos que vamos a utilizar, ajustamos el alto y el ancho al tamaño del contenedor. En
esta disposición colocaremos también la imagen el fondo que va a tener nuestra app, la cual
se llama imagen2.png

4
4
PASÓ Nº 6

 Empezamos a agregar los títulos que vamos a utilizar por medio de Etiquetas, las listas por
medio los SelectorDeLista, los campos de texto por medio de CampoDeTexto y los
botones por medio de Botón. Para acomodar visualmente los elementos mencionados se
realizó mediante disposiciones verticales y horizontales según fueron requeridos
visualmente.

PASÓ Nº 7
 Los botones “Iniciar pedido” y “Ver pedidos” se inhabilitaron al iniciar la app para
no tener inconvenientes lógicos, una vez ingresado los datos correctamente estos
botones se habilitaran por medio de código como lo mostraremos más adelante.

5
 PASÓ Nº 8
 Se modifican los campos de texto según los requerimientos exigidos, se utilizan 3 campos
numéricos y 1 campo de texto multilinea.

PASÓ Nº 9
 Se creó un segundo screen llamado “Pedidos” en el cual se mostrara en forma de tabla los
pedidos que se han realizado y guardado satisfactoriamente, la interfaz se realizó con ayuda
de las disposiciones, se creó una disposición horizontal que sirve como contenedor y dentro
de esta una disposición horizontal más, en la que se agregaron 6 “VisorDeLista” ajustando
el ancho y alto al tamaño de la disposición, se agregó otra disposición horizontal por fuera de
estas la cual contiene otros 6 “VisorDeLista” ajustados al contenedor. Lo 6 primero se
utilizaron para colocar los títulos de las columnas y los otros 6 para mostrar los datos de los
pedidos que se van ingresando. Cada visor de lista fue modificado vislalmente

6
 PASÓ Nº 10 OTROS COMPONENTES
 Finalmente, para terminar la parte grafica de la app se agregaron tres componentes que no
son visuales, pero están dentro de la interfaz. De la interfaz de usuario se agregó el
“Notificador”, de sensores se agregó el “Reloj” y por ultimo de almacenamiento se
agregaron dos “TinyBD” uno para cada screen.

PROGRAMACION DE BLOQUES DE LA APP

PASÓ Nº 11 PANTALA DE INICIO

 El primer bloque que se diseño fue el de la fecha, para la cual se utilizó el bloque del
screen correspondiente, en este caso el “Screen1”, para el cual utilizamos el bloque
que hace referencia a la inicialización del screen, se crea una variable “fecha”
inicializada en 0 a la cual almacenara la fecha del sistema, acá haremos uso de los
bloques del componente “Reloj” que se agregaron anteriormente para obtener los
datos del sistema, una vez almacenado estos datos en la variable “fecha” procedemos
a enviar esta información a la etiqueta correspondiente llamada “Fecha” y finalmente
ya es mostrada la fecha actual en la interfaz.

7
 PASÓ Nº 12 ELEMENTOS SELECCIONADOS EN LAS LISTAS

 Para las listas se diseñaron dos bloques similares en los cuales me permiten mostrar
en pantalla la selección que realiza el usuario, Se utiliza el bloque de la lista que
corresponde a la acción que se ejecuta después de la selección, dentro de este
colocamos orto bloque correspondiente a la lista y colocamos que su atributo texto
sea igual a la selección que hizo el usuario en la lista.

PASÓ Nº 13 NOTIFICACIONES Y VALIDACIONES

 Esta validación se realiza cuando el usuario presiona el botón “Confirmar pedido”

el cual verifica que los campos obligatorios estén diligenciados correctamente, el
usuario recibirá esta notificación en pantalla “Falta llenar campos obligatorios” en
el caso de que los datos sean incompletos o, por lo contrario, se mostrara “Los
datos son correctos ya puede iniciar el pedido” habilitando así el botón “Iniciar
pedido” y guardar la orden.

PASÓ Nº 14 BOTON INICIAR PEDIDO

8
  A presionar este botón los datos que ingrese el usuario serán almacenados en
variables globales inicialmente creadas con listas vacías, para lo cual necesitaremos
crear 6 variable globales que cumplirán esta función, luego de declarar estas
variables nos vamos al bloque del botón “Iniciar pedido” que corresponde a la acción
clic, donde llenaremos las listas con la información ingresada por el usuario, después
de estos se reiniciaran los campos, se habilitara el botón “Ver pedidos” y se
deshabilitara el botón así mismo.

PASÓ Nº 15 BOTON VER PEDIDOS

 Al presionar este botón me almacenara los datos que ingreso el usuario en mi base de
datos anteriormente creada, para estos usamos el mismo bloque anterior pero esta vez
con referencia al botón “Ver pedidos”, en donde al hacer la función clic llamará a la
base de datos “TinyBD1” y almacenará las variables anteriormente obtenidas en las
variables globales asignándole una etiqueta, finalmente se abrirá el otro screen
llamado “Pedidos” donde se mostraran organizadamente los datos ingresados por el
usuario.
 PASÓ Nº 16 SCREEN PEDIDOS

 Al iniciar este screen veremos como muestra organizadamente los datos ingresados
en el “Screen1”, para esto creamos nuevamente las variables globales que vamos a
utilizar, escogemos el bloque que hace referencia a la inicialización del screen, y por
medio de los bloques correspondiente a la base de datos agregada en este screen
procedemos a enviar la información almacenada en ella y las etiquetas
correspondiente, finalmente esto se mostrara en las listas que se crearon en la parte
de la interfaz.

1
0
1
 VISUALIZACION DE LA APP

PASÓ Nº 17 VISUALIZACION
 Al instar el apk se agregará el acceso a la app, una vez dentro de la app la primera
interfaz que nos muestra es para hacer el pedido en el que debemos ingresar la mesa
del pedido, escoger una orden del menú y su cantidad al igual para la bebida,
finalmente tenemos un campo opcional donde se puede ingresar alguna observación
del cliente.


Para el menú comida y el menú bebidas se mostrará un listado donde el usuario podrá
escoger lo que quiera pedir.

17
1 FUENTES
1. https://www.youtube.com/watch?v=7jVN27VrGYk
1