Currículo: este documento forma parte de los contenidos prácticos del Tema 2 – Desarrollo móvil correspondiente a 1ºESO.
Tabla de contenidos
- 1. Descripción del proyecto
- 2. Pantalla de bienvenida
- 3. Pantalla de traducción
- 4. Pantalla de elección de idioma
- 5. Pantalla de historial
- 6. Programación
- 7. ¿Qué debes hacer?
1. Descripción del proyecto
Esto es lo que vamos a construir:
Como ves, se trata de una app cuya funcionalidad es la traducción entre varios idiomas. Pero tiene algunas otras utilidades más:
- Lleva un historial de las traducciones realizadas.
- Reproduce en voz, la traducción que elija el usuario.
Si te fijas la app está formada por 4 pantallas:
- Pantalla de bienvenida.
- Pantalla de traducción.
- Pantalla para elegir el idioma.
- Pantalla con el historial de traducciones.
Pues esas son las 4 pantallas que debemos diseñar y programar.
Comencemos.
1.1. Assets
Lo primero que vamos a hacer es subir a nuestro IDE todos los archivos que vamos a necesitar para decorar la parte gráfica de la app: imágenes de fondo, iconos, etc.
Así que, nos vamos a la sección de Assets y subimos todos los archivos:
- Fondo de la pantalla principal. [ Descargar ↓ ]
- Fondo del resto de pantallas. [ Descargar ↓ ]
- Icono del historial. [ Descargar ↓ ]
- Icono de cambio de idioma. [ Descargar ↓ ]
1.2. Pantallas
Vamos a crear las 4 pantallas, y luego realizaremos el diseño de cada una de ellas.
Como el programa se inicia con una pantalla por defecto, la renombramos y la llamamos pantallaInicio.
Creamos otras tres y les llamamos respectivamente: pantallaTraducción, pantallaIdioma y pantallaHistorial.
Hecho esto, ya podemos empezar a diseñar cada una de nuestras pantallas.
2. Pantalla de bienvenida
Necesitamos poner una imagen de fondo para que nuestra app se vea bonita nada más abrirse.
Para ello, nos vamos a las propiedades de la pantalla, nos vamos a Background, luego Image y seleccionamos la imagen fondoinicio.jpg:
Lo único que quedaría del diseño de esta pantalla sería el botón. Esto ya sabemos hacerlo, así que añadimos un Button llamado botonEmpezar y le cambiamos las propiedades para que se muestre con las estética que buscamos:
Hemos terminado con nuestra pantalla de bienvenida
3. Pantalla de traducción
Igual que hicimos en la pantallaInicio, lo primero que debemos hacer es poner una imagen de fondo que mantenga la misma estética de la pantalla anterior.
Pulsa sobre pantallaTraducción y en las propiedades, selecciona fondolimpio.jpg como Background.
Teniendo esto resuelto, necesitamos tres componentes más: el título de esta pantalla, un campo de texto que le permita al usuario escribir el texto que quiere traducir, y otro espacio donde aparecerá el texto traducido.
El título será un Label que llamaremos labelTitulo, la entrada de texto será un Input que llamaremos inputTextoEntrada, y la salida de texto será un Label que llamaremos labelTextoSalida.
Los creamos, los colocamos y les modificamos las propiedades para que luzcan así:
Además, para que se realice la traducción, necesitamos poner un botón para que el usuario lo pulse cuando quiera que se haga la acción de traducir. Para ello, podemos duplicar el botón que usamos en la pantalla de inicio -así mantenemos la estética intacta-, lo llamaremos botonTraducir y lo colocaremos a la misma altura que estaba en la pantalla de inicio:
Como habíamos dicho, esta pantalla tiene otras dos opciones más: un botón para elegir el idioma y otro botón para ver el historial de traducciones.
Así que vamos a añadir esos dos botones. Para ello, duplicamos el botón que tenemos en pantalla y lo modificamos para ajustarlo al espacio que va a ocupar:
4. Pantalla de elección de idioma
Bueno, pues comencemos por colocar el fondo y añadir el título de la pantalla. Esto lo haremos duplicando el título de la pantalla anterior, y así nos aseguramos que tiene exactamente las mismas propiedades estéticas. Este será nuestro labelSelecciónIdioma:
Para que el usuario pueda elegir un idioma, debemos mostrarle una lista de idiomas disponibles. Esto lo hacemos añadiendo un componente llamado Simple List:
Lo arrastramos a nuestra pantalla, lo renombramos a simpleListListaIdiomas y le cambiamos las propiedades para que sea coherente con nuestro diseño:
Como puedes ver, en la entrada de texto a la que apunta la flecha roja, es donde debes ir escribiendo el nombre de los idiomas que quieres que estén disponibles en la lista.
5. Pantalla de historial
Vamos con la última pantalla de nuestra app.
En este caso, se trata de diseñar la pantalla que nos va a permitir ver todas las traducciones que hemos hecho con la app, y también poder escucharlas. Por tanto, vamos a tener que almacenar todas las traducciones en un origen de datos.
Empecemos, como siempre, poniendo la imagen de fondo de la pantallaHistorial:
Seguidamente, vamos a añadir un Data Viewer List al que vamos a llamar dataViewerListHistorial:
Y le vamos a dar al botón azul para conectarla con un orígen de datos.
Nos va a enseñar cuáles son nuestros orígenes de datos guardados, pero ese corresponde con un proyecto anterior, así que vamos a crear uno nuevo pulsando sobre Create New.
En este caso, no vamos a usar un servicio externo como Google Sheets, sino que vamos a crear nuestro origen de datos local.
Le ponemos un nombre y pulsamos en Create. Renombramos las columnas, añadimos una más, y eliminamos las filas hasta dejar una de ejemplo:
Ahora, cerramos esa ventana y configuramos nuestro dataViewerListHistorial para que tome correctamente cada columna:
Completamos nuestra pantalla con el título -arriba- y un botón -abajo- para volver a la pantalla anterior.
6. Programación
Para programar, ya sabes que debes cambiar al modo bloques:
Si nos vamos a nuestra primera pantalla, lo único que tenemos que programar es que cuando se pulse el botón, la app nos lleve a la segunda pantalla.
Así que pulsa en pantallaInicio, selecciona el botonEmpezar y programa el evento click para que nos lleve a la pantallaTraducción:
Primera pantalla lista.
Turno para programar la pantallaTraducción.
La activamos pulsando sobre ella.
Todo el funcionamiento de esta pantalla está basado en lo que ocurre cuando el usuario pulsa sobre el botonTraducir para que se traduzca el texto que ha introducido.
Pulsa sobre el botonTraducir y empecemos a programar su gestor del evento click:
¿Qué debe hacer la app cuando se pulsa en ese botón? Rellenar con texto el labelTextoSalida:
Pero ese texto, es justamente el texto que tenía que aparecer traducido, así que de la App Feature llamada Speech, vamos a seleccionar y colocar:
Pero no es “Hello” el texto que tenemos que traducir, sino el que escribió el usuario en inputTextoEntrada, así que:
Además, para que el usuario pueda introducir otro texto sin necesidad de borrar lo que metió anteriormente, podemos añadir un bloque que «limpie» el inputTextoEntrada:
Listo.
Vayamos a programar la pantallaIdioma. Recuerda, aquí es donde el usuario podrá elegir el idioma al que quiere traducir su texto. Si recuerdas, contiene un componente lista llamada simpleListListaIdiomas. Ese es el que vamos a programar:
El bloque item contiene el idioma en el que el usuario ha pulsado, y el bloque index, el índice del idioma, es decir, la posición que ocupa ese idioma en la lista: 1, 2, 3, 4…
Sabiendo esto, vamos a necesitar una variable que guarde el idioma que el usuario ha seleccionado, para así poderlo usar en otras pantallas. Así que, del panel Variables, seleccionamos el bloque necesario, y del panel Text seleccionamos el valor inicial que vamos a darle a esa variable:
¿Por qué inicializamos nuestra variable idioma a “en”? Por que, si recuerdas, nuestra aplicación por defecto hace traducciones del Spanish (es) al English (en):
Puedes recordar este bloque pulsando sobre la pantallaTraducción.
Eso que aparece entre paréntesis es el código internacional de cada idioma.
Ahora lo que debemos hacer es guardar en nuestra variable idioma, el idioma que ha seleccionado el usuario. Como ese valor viene de una lista, debemos ir al panel de Lists y encontrar el bloque que mejor se ajuste a nuestras necesidades:
Ahora en esa lista tenemos que poner la lista de los idiomas disponibles en nuestra app (sólo los códigos internacionales). Quedaría así:
También, necesitamos decirle que después de hacer todo esto, redirija al usuario a la pantalla anterior:
Ahora tenemos una variable que controla el idioma de salida de las traducciones, así que ya no tiene sentido que dejemos este bloque de pantallaTraducción así:
Vamos a modificarlo para que tenga en cuenta la elección del usuario:
Y ya que estamos aquí, vamos a hacer algo que dejamos pendiente: que cuando se pulse el botonIdiomas, se redirija al usuario a la pantallaIdioma:
Perfecto, ya sólo nos queda una pantalla, la pantallaHistorial.
Lo que debe hacer esta pantalla nada más abrirse es cargar los datos almacenados con las traducciones que hemos ido guardando:
Y también, podemos programar el funcionamiento del botonVolver:
Tenemos listadas todas las traducciones listadas, pero ahora queremos que cuando el usuario pulse una de ellas, las pueda escuchar.
Así programamos el click en una de ellas:
¿Cómo hacemos para que se reproduzca en forma de audio? Recurrimos al Speech de las App Features:
Seleccionamos el bloque correspondiente y lo encajamos en su sitio:
Ahora donde dice “Hello” tenemos que meter la columna Salida de nuestro origen de datos y en el idioma, tenemos que meter la columna Idioma también de nuestro origen de datos.
¿Cómo accedemos a esas columnas de nuestro origen de datos? Usando la App Feature llamada Data Sources:
Lo abrimos y seleccionamos el primer bloque. Ese mismo bloque es el que usaremos dos veces en nuestro programa, una vez para obtener la traducción y otra para obtener el idioma de la traducción:
Un pequeño detalle que quedó pendiente, es conectar el botón del historial de traducciones que aparecía en la pantallaTraducción a la pantallaHistorial.
Así que, activamos la pantallaTraducción, y programamos el evento click para que lleve al usuario a la pantalla del historial:
Un último tema importante que debemos considerar es, ¿cómo estamos guardando en nuestro origen de datos cada una de las traducciones que está haciendo el usuario? De ninguna manera, porque es algo que no hemos hecho aún.
Aprovechando que estamos en esta pantalla, vamos a modificar el bloque que hace las traducciones para que las almacene tan pronto como se haga cada traducción.
Usando los bloques de Data Sources:
Nuestra app está terminada.
7. ¿Qué debes hacer?
Tu trabajo es diseñar en Thunkable esta aplicación siguiendo los pasos anteriores. Cuando la tengas, dirígete a classroom y allí veras una modificación que debes hacerle a este proyecto.
Entrega en classroom, antes de la fecha límite, un enlace a tu proyecto tal y como se explicó cuando hicimos el repaso de la interfaz de usuario de Thunkable.