El MakeCode de Microsoft para Adafruit es un editor de código basado en web para computación física. Tiene un editor de bloques, similar a Scratch o a Code.org, y también un editor de JavaScript para usuarios avanzados. ¡Pruébalo ahora en https://makecode.adafruit.com/ !

Algunas características claves de MakeCode son:

  • editor basado en web: no hay que instalar nada
  • multi platforma: trabaja en la mayoría de navegadores modernos desde un teléfono pequeño, a una pantalla táctil gigante
  • compilado en el navegador: el compilador corre en tu navegador, es rápido y trabaja sin conexión
  • bloques + JavaScript: arrastra y suelta bloques o escribe JavaScript, MakeCode te permite cambiar fácilmente entre los dos
  • trabaja fuera de línea: una vez que has cargado el editor, se mantiene en el caché de tu navegador
  • ejecución basada en evento: responda fácilmente a presionados de botón, gestos de batido y más

MakeCode por el momento trabaja con la Circuit Playground Express de Adafruit. Para otras tarjetas como las Metro M0 de Adafruit, usa https://maker.makecode.com.

Partes requeridas

Circuit Playground Express

PRODUCT ID: 3333
Circuit Playground Express is the next step towards a perfect introduction to electronics and programming. We've taken the original Circuit Playground Classic and...
$24.95
IN STOCK

Circuit Playground Express - Base Kit

PRODUCT ID: 3517
It's the Circuit Playground Express Base Kit! It provides the few things you'll need to get started with the new
$29.95
IN STOCK

USB cable - USB A to Micro-B

PRODUCT ID: 592
This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your Metro, Feather, Raspberry Pi or other dev-board or...
$2.95
IN STOCK
MakeCode funciona para la versión Express de la Circuit Playground, no para la versión Clásica

El editor de bloques es la forma más sencilla de comenzar con MakeCode. Puedes arrastrar y soltar bloques de la lista de categorías. Cada vez que realizas un cambio a los bloques, el simulador se reinicia automáticamente y ejecuta tu código. ¡Puedes probar tu programa en el browser!

¡Blinky!

Vamos a demostrar como funciona MakeCode, construyendo un simple programa que parpadea los 10 muy interesantes NeoPixeles.

El crear un ejecto de parpadeo ("blink") se hace diciéndole que ponga todos los LEDs del anillo de color rojo, se realiza una pausa ("pause") por un momento, y luego se apagan, se hace otra pequeña pausa, y esto lo repetimos para siempre ("forever")

Vamos a recolectar los bloques que necesitamos para convertir lo que describimos arriba, en Bloques que la Circuit Playground pueda entender y ejecutar:

  • forever ejecuta bloques en un clico, con una pausa de 20ms en cada corrida (similar al loop en Arduino).
  • show ring muestra el color de los 10 neopixeles a la vez
  • pause bloquea al hijo de ejecución actual por 100ms. Si otros eventos o el ciclo de forever están corriendo, tienen chance de correr en este instante

¿Quieres seleccionar o cambiar los colores? El bloque de show ring tiene una herramienta integrada para seleccionar el color. Selecciona el color de la paleta de colores, y luego click a uno de los diez NeoPixeles del anillo, para modificar su color.

¿Como deshabilito un Neopixel? El punto gris en el medio de la paleta de colores, indica que el pixel está apagado. Selecciona el gris de la paleta de colores y realiza un click sobre un Neopixel del anillo. 

Puedes ver el programa Blinky hecho en bloques, trabajando en el editor MakeCode abajo. Puedes ver como los bloques encajan juntos. Si realizas un click sobre los signos de pregunta encima de la caja, te va a aparecer un comentario que explica lo que hace el bloque.

En la siguiente sección, ¡vamos a cargar el código de Blinky hacia la Circuit Playground Express! 

El llevar tu código hacia tu dispositivo usando MakeCode, es muy sencillo. No necesitas instalar ningún software en tu computadora y el proceso lleva solo dos pasos:

  • Paso 1: Conecta tu tarjeta vía USB y entra en modo bootloader (gestor de arranque)
  • Paso 2: Compila y Descarga ("Compile and Download") el archivo .uf2 hacia el disco de tu tarjeta

Vamos a revisar estos pasos en detalle.

Paso 1: Modo Gestor de Arranque (Bootloader)

Conecte su tarjeta a su computadora por medio de un cable USB. Presione el botón de reiniciado una vez para poner tu tarjeta en modo de gestor de arranque.

Si es la primera vez que corres MakeCode, o si has instalado anteriormente Arduino o CircuitPython, es posible que tengas que presionar dos veces el botón de reiniciado de tu tarjeta para entrar en modo de gestor de arranque.
Presiona el botón de reiniciado

Cuando la Circuit Playground Express está en modo de gestor de arranque, todos los LEDs se van a prender en rojo brevemente y luego verde. Verifica que tu LED rojo de estado también está parpadeando. Tu computadora ahora debería estar viendo la unidad externa de disco llamada "CPLAYBOOT".

Si todos los LEDs están rojos: Es posible que tu computadora todavía esté instalando controladores (Favor esperar un minutor, Windows toma algo de tiempo para instalar actualizaciones), o tienes una mala conexión USB. Si todavía tienes LEDs rojos, trata con un cable USB nuevo (y asegurarte que no sea un cable para solo cargar, necesita poder transferir datos) o en un puerto USB diferente.

circuit_playground_drives.png

circuit_playground_drivesmac.png

Una vez que todos los LEDs estén en verde, vas a poder ver a la unidad de disco CPLAYBOOT aparecer en la lista de unidades de tu navegador de archivos.

¡Ya estamos listos para compilar nuestro código de blinkly, y subirlo a nuestra tarjeta!

Paso 2: Compilar y Descargar

Primero vamos a verificar que nuestro código compila apropiadamente en MakeCode.

MakeCode tiene un simulador integrado que re-cargue y re-ejecuta el código cuando se reinicia. Esta es una forma sencilla de asegurarte que tu código compile y para simularlo antes de pasarlo a la tarjeta. El botón de "refresh" re-carga el simulador con la última versión de nuestro código.

Si recibes un error de "we could no run this project", favor busca errores en tu código.

Si tu tarjeta funciona bien en el simulador, ¡es hora de descargarlo a tu tarjeta real! Presiona el botón de "Download". Va a generar un archivo de tipo .uf2 y a descargarlo a tu computadora. (UF2 es un formato de archivo diseñado para programar microcontroladoras por USB).

Pasos para copiar tu programa (no específicos para sistemas operativos)

  1. Asegúrate que tu tarjeta esté en modo de gestor de arranque.
  2. Encuentra el archivo .uf2 que fue generado por MakeCode con tu navegador de archivos. Cópialo hacia la unidad de disco "CPLAYBOOT"
  3. El LED de estado de la tarjeta va a parpadear mientras transfiere el archivo. Una vez que termine de transferir tu archivo, la tarjeta se va a reiniciar y comenzar a ejecutar tu código (¡Al igual que en el simulador!)
En una Mac, puedes ignorar sin problemas, la notificación de "Disk Not Ejected Properly" que puede aparecer luego de copiar tu archivo .uf2

En Windows: Abra el Windows Explorer (tecla Windows + tecla E) y busque el archivo "blinky.uf2" que generaste. ¡Probablemente está en tu carpeta de Descargas!

Puedes copiar y pegar el archivo hacia tu unidad de disco CPLAYBOOT o lo puedes arrastrar y soltar como en el GIF a continuación.

En macOS: Abres el Finder y buscas el archivo "blinky.uf2". Puedes copiar y pegar el archivo hacia la unidad de disco CPLAYBOOT o arrastrar y soltarlo en la misma ventana del Finder.

Si deseas omitir el proceso de copia: Puedes cargar los programas directamente a tu tarjeta. Para realizar esto, cambia la ubicación donde se descarga el archivo en Chrome, Firefox, Safari, u Opera para que caigan en la raíz de la unidad de disco "CPLAYBOOT".

Corriendo el MakeCode que ya está Cargado

Si desconectas tu tarjeta y luego la reconectas a tu computadora, puede que no ejecute automáticamente el programa de nuevo. Si a su vez lo que muestra son todos los NeoPixeles en verde, solo presiona el botón de reset y tu programa va a comenzar a correr.

¿Quieres cambiar el programa de Blinky para que pueda mostrar diferentes colores o para que haga sonidos? ¡Editar el programa en tu Circuit Playground es muy sencillo!

Sacando tu código de la Circuit Playground

El archivo .uf2 contiene el programa y el código fuente

El archivo .u2 (CURRENT.UF2) que has creado al hacer click al botón de "Compile", ¡también contiene el código fuente de tu programa!

Puedes abrir este archivo en MakeCode al arrastrarlo y soltarlo en la ventana del navegador para editarlo.

makecode_adafruitsharing.png
Compartiendo el proyecto

Compartiendo

Puedes compartir tu código realizando click al botón de share. Luego de confirmación, MakeCode va a crear un URL único y corto para tu código. Cualquiera con dicho URL va a poder cargar tu código.

¡Los URLs también se pueden utilizar para empotrar el editor en tu blog o páginas web! Solo copia y pega el URL en tu editor de texto (si tiene soporte para oEmbed) y esto lo va a cargar automáticamente en tu página.

Si ya tienes algo de experiencia programando y sientes que estás listo para tomar el próximo paso, ¡MakeCode tiene un editor completo para JavaScript en el navegador!

¡Pruébalo!

También puedes cambiar entre bloques y JavaScript, haciendo click en el botón de la parte superior.

makecode_Selection_158.png
Botón para editar en código

MakeCode también tiene aplicaciones que proveen funcionalidad adicional, no disponible para todos los navegadores.

Tienda de Windows

La aplicación en la Tienda de Windows con MakeCode para Adafruit.

  • Programado super rápido badado-en-HID: ya no hace falta más arrastrar y soltar.

  • Leyendo mensajes de depuración y mostrándolos en el editor (estos mensajes de depuración se envían por medio de HID, no por CDC Uart/Serial)

Node.JS

El repositorio de GitHub (de código libre) contiene instrucciones para correr un servidor local con node.js, con programado por HID y monitoreo serial.

Programado de Un-Click

¿Ya te cansaste de arrastrar y soltar tus archivos UF2 una y otra vez? ¡Pues el programado por WebUSB es para ti! Con WebUSB, puedes subir el código directamente a tu tarjeta sin necesidad de salvar el archivo UF2 y luego tener que soltarlo hacia tu volumen de disco. Solo mantén el cable USB conectado a tu computador y ¡puedes subir el código cuantas veces necesites!

¡Requerimientos!

Vas a necesitar hacer un par de cosas antes de poder usar WebUSB

  • Necesitas descargar la última versión del navegador Google Chrome. Firefox, Safari, Opera, Edge, etc todavía no tienen capacidades de WebUSB. Solo Chrome, ¡En versiones 68 o posteriores!
  • Corra Windows 10, o las últimas versiones de Mac OS X de Linux. ¡Windows 7 u 8 no van a funcionar!

Actualice el Gestor de Arranque

También vas a necesitar la última versión del firmware para tu Circuit Playground Express (esto solo lo debes hacer una vez). Nosotros empacamos las Circuit Playground Express con la última versión del gestor de arranque, desde Julio del 2018, pero en caso que tengas una anterior a esta fecha, ¡no le hace malo!

Actualizando el gestor de arranque es tan sencillo como lo es subir aplicaciones en MakeCode. Simplemente entras al modo de gestor de arranque presionando el botón de Reset una vez (o dos) para que te muestre un anillo de NeoPixeles. Una unidad de disco llamada CPLAYBOOT va a ser mostrada en el navegador de archivos de tu sistema operativo. Arrastra el archivo de actualización de gestor de arranque en formato UF2 que has descargado al hacer click en el botón verde, hacia la unidad de disco CPLAYBOOT. Este uf2 contiene un programa que va a permitirte abrir la sección de gestor de arranque, actualizarlo y cerrarla de nuevo. Esto le va a caer encima a cualquier código de CircuitPython o Arduino, así que ¡asegúrate de tener todo respaldado!

URL Especial para MakeCode

Una vez que ya la tienes arriba y corriendo, vas a necesitar ir a un enlace especial de MakeCode el cual tiene WebUSB activado. Utiliza el botón verde que sigue a continuación o realiza una copia y pegado del URL completo hacia tu navegador: https://makecode.adafruit.com/?webusb=1#editor

Proyectos y Extensiones

Tus proyectos existentes van a quedar en el sitio de MakeCode por lo que no necesitas copiar nada. Sin embargo, si tienes extensiones instaladas, vas a tener que reinstalarlas. Esto se hace con un click en el menú de extensiones y seleccionando la extensión.

 

Configuración de Primera Vez

Una vez que tienes a Chrome abierto con el URL de MakeCode Beta abiertos, vas a necesitar descargar una aplicación en blanco para programar la Circuit Playground Express. Con el área de programación en blanco y sin bloques, realiza una descarga del proyecto. Salva el archivo UF2 a tu disco duro. Coloca la Circuit Playground Express en modo de gestor de arranque, presionando el botón de Reset una vez (o dos) para que aparezca el anillo de luces en color verde. Copia tu archivo UF2 de tu disco duro hacia la unidad de disco CPLAYBOT que aparece en la lista de unidades de tu navegador de archivos. Cuando el archivo UF2 es copiado, la tarjeta se reinicia sola.

Esto es necesario para poder acceder a la funcionalidad de WebUSB desde tu Google Chrome. Solo necesitas realizar esto una vez, ¡la primera vez!. Luego de copiar este archivo UF2, ¡ojalá sea la última vez que necesitas arrastrar y solar uno hacia tu dispositivo!

Emparejando el Dispositivo

Una vez que el UF2 inicial ha sido copiado hacia la unidad de disco, realiza un click en el ícono de engranaje, en la esquina superior derecha, a la par del logo de Microsoft.

Encuentra el enlace de Pair Device y realiza click sobre él.

Conectando a Dispositivo PXT

Una vez que has hecho click en Pair device (o "Emparejar Dispositivo"), una ventana va a aparecer abajo de donde se escribe el URL en el navegador. Realiza un click al botón azul de "connect" para establecer una conexión entre tu dispositivo PXT y el navegador.

¡Dispositivo Emparejado!

Vas a recibir una bonita notificación cerca de la parte inferior de la ventana, indicándote que tu dispositivo se ha emparejado de forma correcta. ¡Pruébala haciendo click en el botón grande de descargas para subir tu código directamente!

Notas & Thoughts

No es necesario que re-emparejes el dispositivo cada vez que desconectes el cable USB. Sin embargo, si notas que el botón de subida deja de funcionar o se queda pegado, puedes probar emparejando tu dispositivo de nuevo, utilizando el mismo método. Si todavía no puedes establecer una conexión, trata con un cable USB direfente. DEBE ser un cable usb para datos. Si todavía tienes problemas, utiliza el enlace de support que se encuentra a la par de el ícono de engranaje en la parte superior derecha.

Esta guía está pensada para que sea una forma de iniciar, pero es importante hablar de otra característica importante de MakeCode...

Paquetes de GitHub

Bloques adicionales o controladores pueden ser empaquetados en un repositorio de Github, y cargados al editor con el diálogo de Add Package. Los paquetes pueden contener JavaScript, C++, ¡y sí, también ensamblador!
https://makecode.adafruit.com/packages

Somos Código Libre en GitHub

Revisa https://makecode.com/about para más información sobre los diferentes repositorios.

Tenemos traducciones comunitarias

Ya sea que deseas programar en Klingon o en un lenguaje diferente a inglés, MakeCode utiliza traducciones comunitarias en https://makecode.adafruit.com/translate.

This guide was first published on Jul 21, 2020. It was last updated on Jul 21, 2020.