1. INTRODUCCIÓN

Cada vez más se utilizan las aplicaciones móviles en lugar de las aplicaciones de ordenador, ya que prácticamente todo el mundo dispone de un teléfono móvil inteligente, cosa que no puede decirse sobre los ordenadores.

En esta unidad vamos a aprender cómo crear aplicaciones para teléfonos móviles mediante la aplicación web de Bitbloq Apps, por su sencillez.

Conectando las aplicaciones creadas con Bitbloq Apps con las placas Zumcore 2 de BQ podemos construir robots controlados por móvil, lo que aumenta enormemente las posibilidades de dichas placas.

Vamos a entrar en la web y nos vamos a registrar con el correo del Instituto para que nos permita guardar nuestro trabajo y poder continuarlo en otras clases.

2. CONTENIDOS DE BQ DIWO

Vamos a seguir los contenidos y vídeos de la web DIWO de BQ.

3. ACTIVIDADES GUIADAS

Diseño

Abre Bitbloq App:

Esta aplicación tiene dos pantallas, una de introducción y otra donde se realizan los cálculos.

En la Pantalla 1 vamos a introducir la dirección url de la siguiente imagen:

Url de la imagen: https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Pythagorean_right_angle.svg/180px-Pythagorean_right_angle.svg.png

También vamos a introducir un botón para entrar en el programa y un texto con el título del programa.

En la Pantalla 2 vamos a introducir una imagen mediate su url:

Url de la Imagen: https://humanidades.com/wp-content/uploads/2018/08/teorema-de-pitagoras-e1576373608278.jpg

(No olvides marcar esta imagen como clicable ☑)

Además, vamos a introducir un texto para introducir las instrucciones de uso y tres componentes de texto así como tres componentes de entrada de texto organizados mediante un contenedor.

Inserta después un botón para realizar los cálculos.

Programación

Para facilitar la programación, vamos a declarar tres variables con los nombres a, b y c, con un valor inicial de 0.

Para la primera pantalla, solo hay que programar que al pulsar el botón, se abra la pantalla 2:

Para la pantalla 2, hay que introducir los siguientes bloques, observa como los bloques verdes de la categoría matemáticas van realizando las fórmulas del teorema de Pitágoras.

Por último, los siguientes bloques hacen que cuando se pulse la imagen de la pizarra, se pongan todas las ventanas de texto a cero, para poder volver a introducir nuevos datos:

Diseño

Abre Bitbloq App:

1. En la pestaña Diseño crear tres pantallas pulsando sobre el + y renombrarlas , por ejemplo, como: Pantalla Inicio, Pantalla Juego y Pantalla Final.

2. En la pantalla de inicio añadir componentes: Texto para crear un título y las instrucciones del juego y Botón para cambiar a la pantalla de juego e iniciarlo.

3. En la Pantalla Juego, pulsar sobre + Añadir recurso y seleccionar los recursos descargados previamente.

4. Seleccionar la imagen Fondo para ponerla como fondo de la pantalla en la propiedad Imagen fondo. Se puede añadir el mismo fondo al resto de pantallas y cambiar el color del texto a blanco.

Imagen de fondo: https://i.pinimg.com/736x/21/3d/0d/213d0dab6266b912eefb6eb6a7b9c323.jpg

5. Añadir cinco componentes Imagen y asignarle, a cada uno, una de las imágenes descargadas desdela propiedad Imagen fondo. Seleccionar en Modo fondo la opción Contenedor.

Objetos espaciales:

6. Añadir un componente Reproducir sonido y seleccionar el audio descargado en la propiedad Origen.

Sonido: http://www.sonidosmp3gratis.com/sounds/scifi002.mp3

7. Incluir un componente Contenedor para organizar cuatro componentes Texto en los que mostrar el número de puntos y el tiempo.

8. En la pantalla final añadir los componentes: Texto para crear un mensaje final con el resultado del juego y Botón para volver a la pantalla de juego e iniciarlo de nuevo.

9. Personalizar el color de fondo de la pantalla con el que  se quiera desde la propiedad Relleno.

Es recomendable renombrar los componentes de nuestras aplicaciones para facilitar su identificación.

Programación

Una vez realizado el diseño, explicamos cómo programar su funcionamiento:

1. En la pestaña Bloques, programar en la Pantalla Inicio que, cuando se haga clic sobre el Botón Comenzar, se abra la Pantalla Juego.

2. En la pestaña Variables y listas, declarar una variable puntos que comience con valor 0 y una variable tiempo que comience con el valor que queramos, por ejemplo, 20.

3. En la Pantalla Juego, programar que cuando se abra la pantalla de juego:

• Se active la cuenta atrás restando uno a la variable tiempo mientras esta sea mayor que 0, de manera que cuando llegue a cero, se abra la Pantalla Final.

• Las variables tiempo y puntos se muestren constantemente en los componentes Texto que se añadieron en esta pantalla.

4. Programar que, cuando se pulse sobre una de las imágenes: 

• Se deje de mostrar la imagen.

• Se reproduzca el sonido añadido.

• Se sume 1 a la variable puntos.

• Cada cierto tiempo la imagen se mueva a una ubicación aleatoria dentro de la pantalla.

• Se muestre de nuevo la imagen.

5. Seguimos estos pasos con todas las imágenes.

6. En la pestaña Pantalla final:

• Programar que cuando se abra aparezca un texto que indique el número de objetos conseguidos utilizando la variable puntos.

• Programar que cuando se pulse el botón para volver a jugar se reinicien las variables puntos y tiempo con los valores que decidimos anteriormente y que se abra la pantalla de juego.

Actividad e imágenes obtenidas de https://bitbloq.cc/actividades/

6. Juego de memoria

A continuación vamos a realizar un sencillo juego de memoria con cartas de pokemon. Descarga las siguientes imágenes:

Diseño Pantalla 1

Programa Pantalla 1

Diseño Pantalla 2

Programa Pantalla 2