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 producto final
- 2. Pantalla de inicio
- 3. Origen de datos
- 4. Pantalla del detalle de un equipo
- 5. Programación
- 6. ¿Qué debes hacer?
1. Descripción del producto final
Esto es lo que vamos a construir:
Como ves, la aplicación está formada por dos pantallas:
- La pantalla de inicio que muestra una lista de equipos para que el usuario pulse sobre uno de ellos.
- La pantalla que muestra el detalle de un equipo -el que ha pulsado el usuario-.
La complejidad de esta app radica en dos momentos:
- Conecta la app a un origen de datos externo.
- Enviar de la primera pantalla a la segunda, los datos del equipo pulsado por el usuario.
Desde aquí puedes acceder a los dos recursos que necesitarás para desarrollar esta app:
2. Pantalla de inicio
Empecemos dirigiéndonos a nuestra vista de diseño.
La pantalla que aparece por defecto la renombramos como pantallaPrincipal:
Nos vamos al panel de Assets y subimos la imagen que funcionará como logo de la app -la tienes en classroom-:
Una vez que esté subida, volvemos al panel Designer.
Ahora añadimos un Label llamado labelMiliga, y también un componente de Image llamado imagenLogoApp.
Cambia las opciones de visualización del Label para ajustarlo a tu gusto. En mi caso he dejado la fuente por defecto, he aumentado el tamaño a 40 y le he cambiado el color a azul.
 |  |  |
Ahora queremos añadir un componente que visualice de una manera atractiva nuestra lista de equipos. Para ello, cogemos este componente y lo arrastramos a la pantalla.
Lo renombramos a dataViewerListaEquipos y le cambiamos el tamaño hasta que ocupe todo el espacio que nos interese:
En este componente tenemos varias opciones de visualización, así que vamos a pulsar aquí:
Y a seleccionar el estilo que más nos guste. En mi caso elegiré la 4ª opción:
Bueno, tenemos nuestra pantalla preparada para mostrar la lista de los equipos, pero ¿dónde están esos datos? ¿Tenemos que meterlos a mano?
No, eso sería una pérdida de tiempo enorme.
3. Origen de datos
Para estos casos, tenemos la interesante opción de seleccionar un origen de datos. Thunkable, nos da la posibilidad de que le digamos dónde están los datos y nos permitirá configurar cómo mostrarlos.
Nuestro origen de datos será una hoja de cálculo de Google Sheets.
Para crearla, entra en tu Drive, crea una nueva hoja de cálculo y rellénala con los datos de los equipos. Esta es la que he elaborado yo -tienes el enlace en classroom-:
Para que Thunkable sea capaz de leer este origen de datos, debes crear un ENLACE PÚBLICO CON PERMISOS DE EDICIÓN -esto lo puedes configurar en el menú Compartir de Google Sheets-:
Ahora que tenemos un enlace de un origen de datos, vamos a configurar nuestra aplicación para que consiga leerlos.
Nos vamos a las propiedades de nuestro dataViewerListaEquipos y pulsamos sobre:
Luego pulsamos sobre el botón azul Create New y elegimos Google Sheets.
Nos va a pedir que le demos cierta información como el nombre del origen de datos, qué fila contiene el nombre de cada columna, y en qué fila comienzan los datos:
En esa misma ventana pulsamos sobre Select a Sheet para proporcionarle el enlace a nuestra hoja de cálculo. La seleccionamos y finalmente cerramos esa ventana pulsando en el botón azul Create.
Finalmente, necesitamos decirle a nuestro dateViewerListaEquipos, qué columnas de nuestra hoja de cálculo contiene la foto, el título y el subtítulo de cada elemento de la lista:
Nuestra pantalla principal, está terminada.
Vamos a por la segunda pantalla.
4. Pantalla del detalle de un equipo
La segunda pantalla se abrirá cuando el usuario pulse sobre uno de los equipos, para ver toda la información de ese equipo.
Así que vamos a diseñar el aspecto que tendrá esa segunda pantalla.
Para empezar, debemos crear la segunda pantalla. Yo la llamaré pantallaDetalleEquipo:
Ahora, añade todos los componentes que necesites para lograr esta distribución de componentes:
Se han utilizado Labels para todos los emplazamientos de texto, un componente Image para el escudo y un Button para volver a la pantalla principal.
Bien, la interfaz de nuestra aplicación está completamente terminada.
Pero, nuestra aplicación no hace nada, debemos programarla, así que vamos a nuestra vista de bloques.
5. Programación
Vamos a empezar programando nuestra pantallaPrincipal. Así que pulsa sobre ella:
El usuario, cuando use la aplicación, verá la lista de equipos y pulsará sobre uno de ellos, para ver sus detalles.
Ese equipo donde ha pulsado se corresponde con una fila de nuestro origen de datos: esa fila contiene toda la información del equipo que queremos mostrar en la segunda pantalla.
Así que, lo primero que necesitamos es crear una variable para almacenar esa fila de nuestro origen de datos.
Pulsa sobre Variables y selecciona este bloque:
Luego pulsa sobre Objects y acopla este bloque:
Después dale un nombre a la variable -yo la llamaré filaDetalleEquipo:
Con esto conseguimos crear una variable que no contiene simplemente un valor, sino una fila completa de nuestro origen de datos -la hoja de cálculo-.
Seguidamente, necesitamos decirle desde dónde debe tomar los datos.
Pulsa sobre el componente dateViewerListaEquipos y selecciona este bloque:
Si te fijas, ya trae acoplado un bloque verde llamado row id. Eso hace referencia a la fila de nuestro origen de datos que ha pulsado el usuario, fundamental para saber qué equipo queremos enviar a la segunda pantalla.
Ahora tenemos que rellenar esa variable con los datos del equipo que queremos enviar a la segunda pantalla, así que tenemos que añadir el bloque de Variables:
Ya tenemos preparada la variable para recibir los datos de un equipo.
¿Qué bloque me permite sacar los datos de un equipo?
Ve a Data Sources y selecciona este bloque:
Como ves, ese bloque extrae una fila completa de un origen de datos, que debemos hacer coincidir con la fila que ha pulsado el usuario. Así:
Ya tenemos nuestra variable cargada con los datos del equipo que ha pulsado el usuario, sólo nos queda enviarlo a la segunda pantalla.
Así que pulsa sobre los bloques control y selecciona este bloque:
Acóplalo a nuestro gestor de eventos y cámbiale la pantalla de destino:
Estupendo, ya nuestra aplicación sabe que cuando el usuario pulse sobre un equipo, tiene que seleccionar una fila de nuestro origen de datos, rellenar una variable y enviársela a la segunda pantalla.
Nuestro trabajo con la pantalla principal ha acabado.
Lo que nos queda por hacer es que la segunda pantalla, reciba nuestra variable, coja los datos que contiene y los muestre en cada uno de los lugares que reservamos en nuestro diseño de la segunda pantalla.
Así que pulsa en la segunda pantalla, para trabajar en ella:
Lo más sencillo de programar es el funcionamiento del botón.
Así que pulsa sobre el botón y selecciona el bloque necesario para que vaya a la pantalla inicial cuando se pulse en él:
¿Cuándo queremos que se carguen los datos en la segunda pantalla? Pues, tan pronto como se abra.
Así que, pulsa sobre el componente pantallaDetalleEquipo y usa este bloque:
¿Qué debemos hacer cuando se abra esta pantalla? Pues por ejemplo, que aparezca el nombre del equipo en su label correspondiente:
¿Cómo sacamos el nombre del equipo para meterlo en ese label? Usando los bloques Objects:
¿Cuál es el nombre de la propiedad que queremos leer del objeto? El nombre del equipo.
¿Qué columna de nuestro origen de datos contiene el nombre del equipo? Este:
Pues exactamente eso es lo que debemos colocar en «property name»:
¿De qué objeto queremos extraer ese dato? Del objeto que creamos al principio, nuestra variable filaDetalleEquipo -lo encontrarás en los bloques Variables-:
Todo eso, lo hemos hecho solo para que se muestre en la segunda pantalla el nombre del equipo sobre el que pulsó el usuario. Pero, podemos proceder exactamente de la misma manera, para rellenar todos los datos: ciudad, escudo, presidente, socios y estadio:
Ya tendríamos terminada también nuestra segunda pantalla.
Sólo nos restaría probar la aplicación, ver qué tal funciona y ajustar aquellos detalles estéticos que consideremos que la mejora.
6. ¿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.
Isabel Benavides
Fabuloso el proyecto, voy a utilizarlo en mi clase pero con datos de países, población, idioma y banderas. En Excel puedes añadir los datos de los países de forma automática, incluso la bandera, si escribes en los nombres de los países y seleccionándolos pinchas en datos información se ponen automáticamente, pero luego tengo problemas para pegar esas imágenes a la base de datos de thunkable, no se copian las imágenes, el resto de datos si, no se si podrías ayudarme con eso.
Muchas gracias por compartir tus proyectos.
Yo suelo hacer también una app con thunkable de calculadora que suele gustar mucho a los estudiantes cuando ven que algo que han programado ellos funciona.
Un saludo
Lope
Hola Isabel,
en primer lugar muchas gracias por tus comentarios, siempre es un placer compartir con l@s compañeros.
No sé cómo insertas las imágenes, pero en la BD de Thunkable debes usar URL directas a las imágenes. Si pinchas en una de esas URL y puedes ver la imagen sola directamente en el navegador, funcionará en Thunkable. A veces metemos URL que son páginas HTML enteras donde aparece la imagen pero no la imagen sola, entonces el componente image de Thunkable no es capaz de mostrarla. También ocurre cuando el formato de imagen no es JPG o PNG. Si te aseguras de esas dos cosas, no creo que tengas problemas.
Llevas razón, este tipo de proyectos les motivan mucho, ojalá tuviéramos más tiempo para este tema.
Ya me cuentas, saludos.