Programación a bloques con micro:bit

Como se vio en el post anterior, micro:bit es una tarjeta que nos permite realizar proyectos de electrónica de una manera fácil y rápida, esto gracias a su capacidad en hardware y la compatibilidad con software de código abierto que nos da la posibilidad de crear programas incluso sin saber programar. En este caso vamos a trabajar con MakeCode para micro: bit, que es una de las herramientas de desarrollo más populares para crear aplicaciones de micro:bit. Como muchos otros frameworks o softwares, MakeCode para micro:bit tiene una amplia gama de extensiones (paquetes) para elegir.
De esta manera aprenderemos a usar MakeCode para micro:bit y construir algunas aplicaciones básicas para micro:bit sin necesidad de tener experiencia con algún lenguaje de programación.

Abriendo el entorno MakeCode

Para empezar a construir aplicaciones con el entorno de desarrollo MakeCode no será necesario descargar algún software especial o controladores, solo bastará con tener una computadora conectada a internet y un navegador web. En este caso abra el navegador web de su preferencia y diríjase al siguiente link: https://www.microsoft.com/en-us/makecode donde se verá una landindpage como en la figura 1, y damos clic sobre la imagen de micro:bit.

Fig 1. Landingpage de MakeCode.

Una vez en la página de inicio de MakeCode a la cual también podemos ingresar desde la liga: https://makecode.microbit.org/, en la sección My Projects, haga clic en New Project figura 2.

Fig 2. Landingpage de MakeCode para micro:bit.

De esa manera el editor de MakeCode para micro:bit comenzará en su navegador y lucirá como en la figura 3.

Fig 3. Editor MakeCode para micro:bit.

¿Que es MakeCode?

Microsoft MakeCode es un editor en línea basado en la web que le permite crear programas utilizando bloques con funciones específicas. También se conoce como lenguaje de programación gráfico y es compatible con todos los navegadores y plataformas web modernos.

El sitio web de MakeCode utiliza cookies para análisis, contenido personalizado y anuncios. No necesita una cuenta de usuario para crear y guardar proyectos con MakeCode. Todos los proyectos se guardan en el caché local del navegador.

¿Qué contiene MakeCode?

A continuación presentamos todas las herramientas que nos proporciona el editor MakeCode para desarrollar nuestros proyectos figura 4.

Simulador: Proporciona una salida sin el hardware real mientras que
está construyendo el código. Los siguientes botones pueden usarse para controlar el comportamiento del simulador.

  • Iniciar/detener el simulador: detiene el programa y se reinicia desde el principio.
  • Reiniciar el simulador: reinicia el programa. (salida) desde el principio.
  • Cámara lenta: muestra la salida en cámara lenta.
  • Silenciar audio: silencia el audio cuando está trabajando con música y voz.
  • Iniciar en pantalla completa: muestra el simulador en modo de pantalla completa.

Cuadro de herramientas: proporciona bloques en categorías. También le permite buscar o agregar más extensiones al cuadro de herramientas, si están disponibles.
Área de codificación: área donde se compilará su código a bloques o el código que escriba en JavaScript.

Controles del Editor

  • Inicio: lo lleva a la pantalla de inicio (https://makecode.microbit.org/), que muestra proyectos recientes y otras actividades.
  • Compartir: muestra la ventana Compartir proyecto que le permite publicar su proyecto en la nube pública e incrustar su proyecto en una página web con diferentes opciones.
  • Bloques o JavaScript: le permite cambiar la vista del código de Bloques a JavaScript o viceversa. Presione uno de los botones de vista en la parte superior central de la ventana.
  • Ayuda: muestra un menú con opciones de ayuda como soporte, referencia, bloques, JavaScript y hardware.
  • Más… (engrane): le permite acceder a la configuración del proyecto, agregar extensiones, eliminar el proyecto actual, eliminar todos los proyectos, elegir un idioma y emparejar micro: bit vía bluetooth con un solo clic.
  • Deshacer y rehacer: le permite deshacer y rehacer los cambios recientes que realice en Bloques o JavaScript con los botones Deshacer y Rehacer en la parte inferior derecha de la ventana del editor.
  • Acercar y Alejar: los botones de enfoque cambian el tamaño de los bloques cuando está trabajando en la vista Bloques. Cuando trabajas con el código en la vista de JavaScript, los botones de enfoque cambian el tamaño del texto.
  • Guardar proyecto: puede escribir un nombre para su proyecto y guardarlo. Escriba un nombre para el proyecto en el cuadro de texto y presione el icono del disco para guardar.
  • Descargar: el botón Download copiará su programa en una unidad de su computadora.
  • Mostrar/Ocultar el simulador: el botón se puede usar para mostrar u ocultar el simulador con un clic.
Fig 4. Áreas y controles importantes en el editor MakeCode.

Ejemplos de programación a bloques

Vamos a mostrar algunos ejemplos de la programación a bloques para visualizar la sencillez con la que podemos realizar ciertos programas en cuestión de minutos.
1.- Hola Mundo: siempre que se inicia un proyecto nuevo en MakeCode vamos a tener dos bloques que son on start y forever:
on start: que nos permite la ejecución de bloques inicio al principio del programa y solo una vez.
forever: que nos permite la ejecución de bloques de manera indeterminada a menos que programemos lo contrario.
Por ejemplo para programar un mensaje que despliegue hola mundo en el display y al presionar un botón A de micro:bit tendríamos algo como en la figura 5.

Fig 5. Programa Hola Mundo! en bloques.

Lo que está realizando el programa es iniciar un conteo por única vez del número 3 al 1 con el bloque on start, posterior a ello se repite de manera indeterminada el mensaje “…” con el bloque forever, a menos que se presione el botón A de micro:bit, generando el mensaje “Hola Mundo!” con ayuda del bloque rosa on button A pressed, para los mas experimentados o usuarios que sepan de programación javascript pueden alternar la vista y generar su propio código o ver que se nos ha generado con la programación a bloques como vemos en la figura 6.

Fig 6. Programa Hola Mundo! en javascript.

Tome en cuenta que los bloques que se requieran para la creación de su programa deberán salir del cuadro de herramientas como se mencionó en la figura 4, más en concreto podemos ver en la figura 7 los elementos básicos para programar y figura 8 con las herramientas de entrada como botones y pines de entrada digitales de la micro:bit.

Fig 7. Herramientas de la categoría Basic.
Fig 8. Herramientas de la categoría Input.

2.- Como vimos en el ejemplo anterior la programación de mensajes crea corrimientos letra por letra y es sencillo verlo en el simulador lamentablemente hay que esperar para ver el mensaje completo, por ello podemos aprovechar toda la matriz led para crear iconos que nos den una idea de lo que ocurre así como se ve en la figura 9.

Fig 9. Creación manual de iconos con la herramienta show leds

Como podemos ver en la figura 9 se han agregado dos bloques rosas on button pressed que ejecutan el icono de una cara feliz si se presiona el botón A o ejecuta una cara triste si se presiona el botón B, las caras o cualquier otro icono se pueden crear de manera manual con la herramienta “show leds” de la categoría Basic solo tiene que hacer clic en la serie de pixeles que desea para crear el icono deseado. En el simulador podrá ver los resultados de presionar A o B como vemos en la figura 10 y 11 correspondientemente.

Fig 10. Se presiono el botón A.
Fig 11. Se presiono el botón B.

3. Para finalizar veremos como variar la intensidad de un led mediante un potenciómetro, recordando que podemos cambiar un led por algún otro componente electrónico como un servomotor, un brazo mecánico entre otros, también hay que tomar en cuenta que el simulador no nos permitirá realizar ese tipo de ejemplos sin embargo tendremos el programa para poder cargarlo e nuestra micro:bit y corroborarlo que funciona como deseamos. El material requerido para este ejemplo son:

Una vez que tengamos este material se procederá a realizar la conexión como se ve en la figura 12.

Fig 12. Conexión básica para dimmear un LED.

El programa será como vemos en la figura 13, el cual lo obtenemos de la herramienta analog write pin y analog read pin – categoría Pins, ya que prácticamente definimos que los valores leídos por el pin 0 que es donde esta conectado el potenciómetro, sean escritos al pin donde conectamos el LED es decir el pin 1 a intervalos de 100ms.

Fig 13. Programa a bloques del dimmeo de un LED

Como vimos la programación a bloques es muy intuitiva, y bastará con un poco de práctica para la creación de programas más complejos. Si te ha gustado esta entrada del blog o tienes alguna duda o pregunta no dudes en comentarla, hasta la próxima.

https://www.facebook.com/AGElectronicaMexico/

https://www.instagram.com/ag_electronica/?hl=es-la

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s