do
ia
. Gu FRASEO
ab
L "Tu próximo proyecto comienza aquí"
Proyecto 3 - Semana 3 - Sesión 2
REQUERIMIENTOS DE
SOFTWARE
ALEJANDRO Y CAMILA SON ASPIRANTES A INGENIEROS
DE SISTEMAS CON IDEAS BRILLANTES Y LA PASIÓN
PARA TRANSFORMARLAS EN REALIDAD. BUSCAN UNA
APP QUE LOS INSPIRE PARA LLEVAR SUS PROYECTOS
AL SIGUIENTE NIVEL.
REQUERIMIENTOS FUNCIONALES
LA APP DEBE MOSTRAR FRASES INSPIRADORAS Y CONSEJOS
PARA NUEVOS INGENIEROS DE SISTEMAS.
LA APP DEBE MOSTRAR DIFERENTES IMÁGENES PARA CADA
FRASE.
LA APP DEBE REPRODUCIR LAS FRASES Y CONSEJOS CON UNA
VOZ NATURAL Y FLUIDA.
LAS FRASES, CONSEJOS E IMÁGENES DEBEN ACTUALIZARSE EN
TIEMPO REAL SIN TENER QUE REINSTALAR O ACTUALIZAR LA APP
REQUERIMIENTOS NO FUNCIONALES
LA APP DEBE FUNCIONAR EN DISPOSITIVOS MÓVILES CON
SISTEMA OPERATIVO ANDROID
LA APP DEBE TENER UN TAMAÑO MÁXIMO DE 10 MB.
LA APP DEBE TENER UNA LATENCIA MÁXIMA DE 0.5 SEGUNDO AL
PASAR ENTRE FRASES Y CONSEJOS.
LA APP DEBE TENER UNA LATENCIA MÁXIMA DE 2 SEGUNDO AL
REPRODUCIR EL TEXTO CON VOZ
DISEÑO DE SOFTWARE
LA APP SE BASA EN UNA ARQUITECTURA
CLIENTE-SERVIDOR:
Servicio de
Lectura
Almacenamiento
en Firebase
App Móvil
LA APP SE COMPONE DE LOS SIGUIENTES
COMPONENTES PRINCIPALES:
1. INTERFAZ DE USUARIO
BOTONES
ETIQUETAS
IMAGEN
2. COMPONENTE DE TEXTO A VOZ
3. COMPONENTE DE BASE DE DATOS FIREBASE
4. COMPONENTE DE NOTIFICACIÓN
CONSTRUCCIÓN DE
SOFTWARE
1. Ve a: https://appinventor.mit.edu/ e inicia sesión
con Google
2. Crea un nuevo proyecto, de nombre “Fraseo”.
3. Vamos a construir nuestra interfaz de acuerdo al
diseño
En la categoría de Disposición (de la ventana Paleta) arrastra 2
Disposiciones Verticales y 1 Disposición Horizontal (en ese
orden)
Ahora inserta 2 etiquetas y 1 botón en la primera disposición. 1
etiqueta y 1 botón en la segunda. Y 1 imagen en la tercera.
Asegúrate se seguir el orden, tal como se muestra en la imagen.
Ahora, modifica el nombre de los componentes que usaremos en
los bloques programación
Luego, modifica las propiedades de los componentes. Guíate por
el nombre del componente.
Esta vez usamos Ancho 96% en las disposiciones
verticales para que el texto de las etiquetas tengan
un poco de margen a los costados.
Para los colores personalizados
puedes usar estos códigos de color
hex:
Naranja: #e1b000c9
Verde: #00aeaea0
¡Aún así, puedes probar tus propios
colores!
Recuerda mantener contraste para
que sea fácil de leer
Finalmente, agrega los componentes no
visibles:
Y modifica sus propiedades:
Hasta ahora te Estos valores lo obtendremos
a continuación...
quedaría así:
4. Antes de pasar a los bloques de programación, vamos a crear
nuestra cuenta de Firebase y obtener el token y URL que
necesitamos.
Ingresa a: https://console.firebase.google.com/
(Ingresa con tu cuenta de Google)
Clic en “Agregar Proyecto”.
(Ponle de nombre “Fraseo”)
Crea una base de datos real-time
Continuamos la creación de la base de datos real-time y la
habilitación de leer y escribir
Aquí obtenemos la URL de nuestra base de datos en Firebase
Pégalo en la propiedad
“URL FIrebase”
Ahora obtendremos el token, que es como el password que
necesitamos para que AppInventor acceda a nuestra Base de Datos
(BD)
Pégalo en la propiedad
“Token FIrebase”
5. Agregaremos nuestros datos a Firebase. En Firebase podemos
guardar todo tipo de datos, desde números, textos, listas...
hasta objetos JSON.
Ingresa a: https://drive.google.com/file/d/10bMRH_8KJWYz42-
atzuopAEVDhQkNVSk/view?usp=sharing
Descarga el archivo, ábrelo en un block de notas y selecciona todo el
contenido.
Copia con Ctrl C...
Ingresa a https://www.jsonblob.com/
Y pega el contenido reemplazando el área de texto (lado izquierdo)
¿Qué es un texto JSON?
Un JSON es, simplemente, la representación en texto de un objeto.
Desglosemos lo que acabamos de copiar:
Fíjate que aparece “frases [10]”. Este objeto JSON representa un array de
10 elementos.
Cada 1 de los 10 elementos, representa a su vez un [3] (array de 3
elementos).
En la imagen, estos elementos (texto JSON y su representación en objetos a
la derecha) aparecen enumerados del 1 al 3 en círculos rojos y naranja.
Y a la vez, el 2do elemento (marcado en círculo rojo), representa un array
de 3 textos.
Los objetos JSON son muy útiles y es un estandar de comunicación en la
web.
Veamos detalladamente como esta compuesto cada elemento de nuestro
array o lista de 10 elementos.
El 1er índice (0) es un texto, representa nuestra frase.
El 2do índice (1) es un array[3], representa 3 consejos relacionados a la frase.
El 3er índice (2) es un texto, representa nuestra imagen subida en Google Drive.
Por cierto, para generar un enlace Solo funciona con archivos
descargable de archivos subidos a Drive compartidos públicamente,
subidas con cuentas
puede usar esta página:
personales
https://www.drivelink.eu.org/
Una vez comprendido el esqueleto de nuestro objeto JSON, es
momento de ponerlo en nuestra base de datos en Firebase.
Importar JSON en Firebase:
Haz clic en los 3 puntitos y luego en “Importar JSON”:
Selecciona el archivo .json y clic en “Importar”:
Verás que en Firebase se muestra algo muy similar a JsonBlob.
¡Enhorabuena por haber llegado hasta aquí, lo que acabas de aprender te
servirá mucho más adelante!
Ahora estamos listos para los bloques de programación.
Pero antes... Vamos a modificar el ícono y color de nuestra app.
5. Ahora, vamos a darle el comportamiento a nuestra app usando
los bloques de programación
Primero usa el bloque “cuando Screen1. Inicializar” para pedir
el valor de la etiqueta “frases” que agregamos como clave en
Firebase. Si el valor no existe, inícialo con una lista vacía.
Los bloques celestes pertenecen a la categoría “Listas”
Luego inicializa 2 variables globales.
“frases” para almacenar todo el JSON, array de 10 elementos.
“frase” para almacenar uno de esos 10 elementos (array de 3
elementos)
Ahora, usaremos los bloques eventos del componente FirebaseDB1.
“cuando DatosCambiados” y “cuando ObtenerValor”
cuando DatosCambiados se
invocará cada vez que haya un
cambio en la db remota de
Firebase.
cuando ObtenerValor se invocará
luego de la petición del bloque
llamar ObtenerValor
Ambos bloques eventos ejecutan lo mismo, por eso hemos usado el
bloque de la categoría procedimiento.
De esta forma evitamos repetir bloques. (Con el ícono de engranaje puedo
agregar esos 2 parámetros “etiqueta” y “valor”) que recibo de los bloques
eventos.
Si la etiqueta de Firebase que recibo es “frases”. Entonces, pongo mi
variable global “frases” con el valor que recibo de Firebase y muestro la
notificación con el bloque “llamar Notifier1. MostrarAlerta”
Ahora, agregaremos el comportamiento al bloque evento “cuando
btnFrase Clic”:
Ponemos la variable global “frase” tomando un elemento al azar de la otra
variable global “frases”. (Las frases serán escogidas de forma aleatoria).
Luego, usaremos el elemento de índice 1 de la variable global “frase”
(Recuerda la estructura del JSON pag. 16), para poner el texto de la frase en
etqFrase.
Finalmente, pondremos la foto de la imagen a empty-image.jpg (no olvides
subir los recursos que se les comparte). Habilitar el botón btnConsejo. Poner
el texto “... ... ...” a la etqConsejo y llamar el bloque Hablar para que lea la
frase.
En AppInventor, los índices del array comienzan en 1. Así que
para obtener el elemento del índice 0 del array, usamos 1. Para
el 1, 2. Y para el 2, usamos el índice 3.
Ahora, este es el comportamiento del btnConsejo:
Ponemos en la etqConsejo, un consejo aleatorio del array de consejos que
está en el índice 1 (2 para AppInventor) (recuerda la estructura de la pag.
16). Dentro del array de 3 elementos, el 2do elemento, es el array de
consejos.
Luego, hacemos que lea el consejo.
Finalmente, este es el comportamiento cuando se hace clic a la imagen:
Ponemos la propiedad Foto de la imagen imgFrase con el tercer
elemento de nuestro array.
Ahora, si editas el contenido de los datos directamente en la página de
FIrebase, se reflejarán automáticamente los cambios en la App. ¡Sin
necesidad de actualizar ni instalar una nueva versión!
Debido a la dificultad que implica editar directamente en
Firebase, se recomienda utilizar otras herramientas como
JsonBlob o https://codebeautify.org/online-json-editor. Y luego
copiar el resultado como lo hicimos (pag. 17)
