En esta actividad vamos a crear una sencilla aplicación (una brújula) para tablets y smartphones utilizando los sensores de orientación y de localización del dispositivo. Diseñando y programando la aplicación aprenderemos a usar los componentes Imagen, Texto y Contenedor, Orientación y Localización de Bitbloq Apps y a programar eventos.
Material necesario
- Ordenador con acceso a Internet.
- Dispositivo Android o iOS con la aplicación Bitbloq Pocket instalada.
Instrucciones
Diseño
Comenzamos pidiendo a nuestro alumnado que se descargue las imágenes que se adjuntan en el apartado Descargables de la actividad, que acceda a la web de Bitbloq y seleccione la herramienta Bitbloq Apps. A continuación, vamos explicando los siguientes pasos:
1. En la pestaña Diseño, pulsar sobre + Añadir recurso y seleccionar las dos imágenes descargadas previamente.
| En Bitbloq Apps podemos seleccionar la resolución que necesitemos para visualizar nuestras aplicaciones de forma óptima en nuestro dispositivo. |
2. Seleccionar y arrastrar un componente Contenedor libre a la parte superior de la pantalla del dispositivo que aparece en el espacio de trabajo.
3. Configurar el contenedor para darle las dimensiones que se quieran y centrarlo.
4. Añadir en Imagen de fondo la imagen correspondiente a los puntos cardinales y seleccionar la opción Contenedor en la propiedad Modo fondo de su panel de propiedades. Para poder ver esta propiedad, hay que cambiar a Modo avanzado.
| La diferencia entre el Modo básico y el Modo avanzado es que en este último se pueden configurar más propiedades de los componentes.. |
5. Seleccionar y arrastrar un componente Imagen en el centro del contenedor. Configurar este componente para centrarlo y añadir en Imagen de fondo la imagen correspondiente al indicador.
6. Seleccionar y arrastrar un componente Contenedor vertical a la parte inferior.
7. Configurar el contenedor para centrarlo y para que ocupe el ancho que se quiera.
8. A continuación, añadir dos componentes Contenedor horizontal en el interior de cada uno de los huecos del contenedor.
9. Seleccionar y arrastrar cuatro componentes Texto en el interior de cada uno de los huecos del contenedor.
10. En los de los huecos superiores, cambiar la propiedad Texto por “Longitud” y “Latitud” respectivamente. En los de los huecos inferiores, borrar los textos.
11. Para finalizar el diseño, seleccionar y arrastrar un componente Orientación y un componente Localización de la categoría Sensores. Estos tipos de componente se añaden como no visibles en el listado de la izquierda de la pantalla.
Programación
Una vez realizado el diseño, explicamos cómo programar su funcionamiento:
12. En la pestaña Bloques, programar que cuando el dispositivo detecte un cambio en la orientación, la imagen del indicador rote los grados correspondientes al Azimuth, el ángulo que el dispositivo se desvía respecto al norte magnético.
| Azimuth es el ángulo de rotación respecto al eje perpendicular a la superficie terrestre, considerándose el norte magnético como cero. |
13. Programar que cuando el dispositivo detecte un cambio en la ubicación, el componente Texto correspondiente muestre el valor de la latitud y el otro el valor de la longitud.
14. Programar que al abrir la aplicación, ya muestre la imagen señando el norte y la latitud y longitud, sin necesidad de que haya un cambio para que se muestre.
Recomendamos a nuestro alumnado ir probando el funcionamiento de la programación cada poco tiempo utilizando el modo En tu dispositivo móvil, siguiendo los pasos que se indican. Para ello, deben tener instalada en su dispositivo la aplicación Bitbloq Pocket, disponible para Android o iOS.
| Es posible que el sensor de orientación de nuestro dispositivo esté descalibrado, por lo que es aconsejable girar el dispositivo varias veces hasta que observemos que se orienta mejor. Generalmente, funciona mejor con el dispositivo en posición horizontal. |
Otras ideas
A continuación, te proponemos algunas ideas de aplicaciones similares para seguir practicando:
- Aplicación que permite conocer el valor de los los ángulos de navegación (Alabeo, Azimuth y Cabeceo) mostrando los valores en tres componentes Texto tras girar el dispositivo.
- Aplicación que muestra información sobre un lugar concreto (como por ejemplo, un museo) cuando detecta que se está en su ubicación (latitud y longitud).
Disfruta de Bitbloq Apps con el Plan Docente
La versión beta de Bitbloq Apps está disponible solo para usuarios del Plan Docente. ¡Suscríbete ya y empieza a disfrutar de todas sus ventajas!
- Sistema de gestión del aula completo e intuitivo para un número ilimitado de alumnos y clases simultáneas.
- Acceso del alumnado a un espacio personal con sus ejercicios mediante códigos, sin descargas ni registros.
- Itinerarios formativos. (Próximamente)
- Funcionalidades exclusivas, add-ons gratis y acceso prioritario a las novedades.
- Acceso gratuito para ti y tus alumnos a programar placas como Arduino UNO.
- Asistencia directa del equipo de Bitbloq.