Currículo: este documento forma parte de los contenidos prácticos del Tema 2 – Desarrollo móvil correspondiente a 1ºESO.
Tabla de contenidos
- 0. La interfaz explicada en vídeo
- 1. Pantalla de proyectos
- 2. Elementos comunes
- 3. Vista de diseño
- 4. Vista de bloques
Dirígete al sitio web de Thunkable e inicia sesión. Si no tienes una cuenta de usuario o no sabes iniciar sesión, revisa este documento.
0. La interfaz explicada en vídeo
Aquí tienes un vídeo donde podrás aprender cómo funcionan todos los elementos de Thunkable para poder empezar a construir tus primeras aplicaciones móviles.
Pero si por el motivo que sea no puedes verlo, a continuación tienes el mismo recorrido en texto para que puedas leerlo.
1. Pantalla de proyectos
Una vez que te hayas identificado en el sistema, te aparecerá esta pantalla:
De esta primera pantalla solo nos interesan las dos áreas marcadas:
- Área verde. Aquí aparecen los proyectos que hay disponibles según el tipo de proyectos seleccionados en el área roja. Como tienes seleccionado «Mis proyectos» y todavía no tienes ninguno, aparece vacío.
- Área roja. Un selector de los tres tipos de proyectos a los que tienes acceso: tus proyectos -los que has creado tú-; proyectos de ejemplo a modo de tutoriales, para que aprendas a usar la herramienta; y galería pública, donde aparecen listados todos los proyectos que han hecho otras personas de todo el mundo. Ten en cuenta que estamos trabajando con una cuenta gratuita, por tanto, todos los proyectos que hagas serán públicos.
Para crear un nuevo proyecto, puedes pulsar sobre cualquiera de los dos botones azules que aparecen etiquetados como «Create New Project».
Aparecerá una ventana para completar algunos datos del proyecto: el nombre, en qué categoría podría encajar -usaremos siempre Education-, dejamos marcada la opción «Public» y también dejamos marcada la opción «Use the Drag and Drop builder».
Inmediatamente después de crear el proyecto, el IDE te dirige a la pantalla en la que vamos a estar trabajando todo el tiempo.
2. Elementos comunes
Como puedes ver, en el centro, aparece un lienzo con la forma de la pantalla de un dispositivo móvil, y alrededor, numerosos elementos que podemos usar para darle forma a nuestra app.
Veamos detenidamente para qué se usa cada uno de ellos.
2.1. Nombre del proyecto
En la parte superior central, aparece el nombre de nuestro proyecto. Si queremos cambiarlo sólo tenemos que pulsar sobre el texto y escribir el nombre que queramos darle:
 |  |
2.2. Pestañas principales
En la esquina superior izquierda, veremos las dos pestañas principales de nuestra herramienta. Como estamos desarrollando aplicaciones móviles, una parte de nuestro trabajo será diseñar la apariencia de la aplicación -pestaña Design– y otra parte programar el comportamiento de cada componente -pestaña Blocks-:
2.3. Botones de despliegue y control del proyecto
Desplegar una aplicación es una acción que nos permite presentar o hacer pública por primera vez una aplicación a través de determinadas herramientas. Esto lo haremos cada vez que queramos ver el resultado de nuestro trabajo.
Podemos desplegar la aplicación en el simulador para ver cómo se comporta; podemos empaquetarla en formato Android o iOS para llevarla a un dispositivo, o también podemos ejecutarla directamente en nuestro móvil para ver cómo funciona sin necesidad de instalar la propia aplicación cada vez.
Estas opciones las encontrarás en la parte superior derecha:
El primer botón, nos permite ver el historial de versiones de nuestra aplicación, nosotros no lo usaremos.
El segundo botón es el que nos permite previsualizar nuestra aplicación en el simulador integrado de Thunkable. Este será el que más usemos para probar el resultado de nuestro trabajo:
Cuando pulsas sobre él, se nos ofrecen dos opciones:
«Preview on Web» lanza el simulador integrado para probar nuestra app sin salir de Thunkable. Esta es la opción que más utilizaremos.
«Test on Device» envía el resultado de nuestro trabajo directamente a nuestro móvil por medio de la aplicación móvil de Thunkable. Es una opción muy interesante, porque nos permite ver cómo se comporta nuestra recién creada app en un dispositivo real. Para usarla debes instalar en tu móvil esta aplicación: Thunkable Live.
Su funcionamiento es muy sencillo, cuando la instales, te identificas con el mismo correo electrónico que usas Thunkable, y siempre que en nuestra herramienta web, selecciones «Test on Device», vas a tu móvil y aparecerá la app que estás programando para que puedas probarla.
El tercer botón, nos permite descargar el archivo que contiene nuestra aplicación para poder probarla en un dispositivo Android e iOS. Nosotros no lo haremos porque ya contamos con una opción más rápida que explicamos en el párrafo anterior.
El cuarto botón es el que nos permite compartir nuestro proyecto para que otros lo vean e incluso colaboren.
De las dos opciones que aparecen, nosotros usaremos la segunda, «Project Details Page», que es un enlace público al resultado de nuestro trabajo y que se puede probar sin necesidad de descargar la aplicación. Cuando seleccionas esa opción, se abre una nueva pestaña en el navegador, que nos permitirá copiar un enlace al proyecto:
Los tres últimos botones nos permiten respectivamente: acceder a recursos de aprendizaje de la herramienta, duplicar y eliminar el proyecto, y configurar nuestra cuenta de usuario y cerrar sesión.
Hasta aquí hemos visto los elementos comunes que tendremos siempre en pantalla. A partir de ahora, describiremos la interfaz del programa en función de la fase de desarrollo de la aplicación en la que nos encontremos: diseño o programación.
3. Vista de diseño
Como ya avanzamos en el punto 2.2, se accede a ella siempre que pulsemos sobre esta pestaña principal:
La primera zona de esta vista que necesitamos repasar es la que se encuentra en el margen superior izquierdo:
Aquí encontramos por orden 4 iconos que representan de arriba a abajo: «Designer», «Data», «Assets» y «Settings».
- Designer: nuestro espacio principal de trabajo, donde diseñaremos nuestra aplicación seleccionando y colocando los componentes de la interfaz gráfica de nuestra aplicación.
- Data: nos permite añadir fuentes de datos externos a nuestra aplicación.
- Assets: lo usaremos para añadir recursos externos como imágenes, vídeos o audios.
- Settings: las opciones para publicar nuestra aplicación en las tiendas de aplicaciones.
Salvo casos excepcionales, que veremos en su momento, siempre debemos tener activado el modo Designer.
3.1. Pantallas
Las distintas pantallas que forman parte de nuestra aplicación aparecerán listadas en la parte central. Cada pantalla tendrá su nombre:
De momento, sólo tenemos una pantalla, la principal que se llama Screen1. Si queremos añadir más pantallas, solo tenemos que pulsar sobre el +.
3.2. Árbol de componentes
Aquí aparecerán organizados de forma jerárquica todos los componentes que forman parte de nuestra aplicación:
Con un golpe de vista nos permite ver a qué pantalla pertenece cada uno de los componentes que forman parte de nuestra app.
3.3. Componentes
Se listan todos los componentes disponibles que podemos añadir a nuestra aplicación, clasificados por categorías:
Si te fijas, cuando pasas el ratón por encima de ellos, aparece un icono de ? que nos muestra información rápida sobre la utilidad de ese componente.
Para usar un componente, pulsamos sobre él y lo arrastramos a nuestro lienzo de diseño.
3.4. Opciones de visualización
En la parte superior derecha, junto a nuestro lienzo de diseño, verás 5 iconos que nos permitirán modificar las opciones de visualización del lienzo:
El primero -que usaremos con más frecuencia-, es el modo por defecto, y nos permite mover libremente los componentes por el lienzo.
El segundo -la manita- nos permite mover todo el lienzo por el espacio de trabajo. A veces es útil para situar la pantalla del lienzo a un lado u otro.
El tercero y cuarto, nos permite modificar la cantidad de zoom sobre un área del lienzo.
El último -llamado Focus– nos permite volver a la vista por defecto con el lienzo de diseño centrado y visible entero en el centro de nuestra pantalla.
3.5. Opciones del componente
Se trata del espacio de diseño más importante, y con más opciones. Su finalidad es modificar la posición exacta, la apariencia y el comportamiento, del componente que esté seleccionado en cada momento. Por tanto, es tremendamente importante que nos familiaricemos con él, ya que la mayor parte de nuestro trabajo se realizará aquí.
Como podrás imaginar, las opciones que aparecen aquí, serán completamente distintas dependiendo del componente que esté seleccionado en cada momento.
Por último, cuando queremos renombrar, duplicar o eliminar un componente, podemos hacerlo desde aquí, pulsando en los tres puntitos que aparecen junto al nombre del componente:
4. Vista de bloques
Al igual que hicimos para acceder a la vista de diseños, podemos acceder a la vista de bloques siempre que pulsemos sobre esta pestaña principal:
Esta vista, en cuanto a complejidad, es mucho más sencilla y tiene muchas menos opciones, aunque es la vista que nos permitirá darle vida funcional a nuestra aplicación.
Aquí es donde vamos a programar cada componente para que «haga algo».
Esta vista está dividida en dos áreas muy bien definidas, el margen izquierdo y el resto de la pantalla.
4.1. Bloques
El margen izquierdo, es el área reservada para listar todos los elementos programables de nuestra aplicación y todos los bloques disponibles que podemos usar para programar componentes y otros elementos de los dispositivos móviles.
Tiene 4 partes, de arriba a abajo: «UI Components», «Core», «App Features» y «Advanced».
4.1.1. Componentes de la interfaz de usuario
Aquí aparecerán listados de manera jerárquica todos los componentes que añadimos en la vista de diseño, para que podamos programarlos:
Cuando pulsamos sobre un componente, se desplegarán todos los bloques disponibles que podemos usar para programar ese componente:
4.1.2. Núcleo
Aquí aparecerán listados por categorías, todos los bloques comunes que podemos usar en nuestra aplicación y que no dependan de las características particulares de un componente concreto.
Si pulsamos sobre una de las categorías, podemos ver los bloques disponibles:
4.1.3. Características de la app
Aquí se listan otros bloques que dependen del dispositivo físico en el que se esté ejecutando la aplicación, como por ejemplo la cámara, el altavoz, el sistema de archivos o sensores como el GPS:
4.1.4. Avanzado
Este último conjunto de bloques, está reservado para funcionalidades más avanzadas de nuestra aplicación como: conectarla con otras aplicaciones, comunicarnos por bluetooth, compras en la aplicación y otros servicios externos:
4.2. Programa
Ahora que ya tienes en mente cómo se añaden componentes a nuestra aplicación, y dónde están los bloques que controlan cada componente, ha llegado la hora de programarlos.
Programar un componente es tan sencillo como ir pinchando en los bloques que nos interesen e irlos encajando unos dentro de otros para que nuestra aplicación se comporte como deseamos:
La última parte de la interfaz de programación que nos queda por detallar, es la que aparece en el margen inferior derecho del espacio de programación:
El primer icono, centra a pantalla completa el contenido de nuestro programa.
El segundo icono, coloca todo nuestro programa en el centro de la pantalla.
Los dos siguientes iconos, nos permiten acercarnos o alejarnos de los bloques que deseemos.
El último es hacia donde tenemos que arrastrar un bloque para eliminarlo.