# Makecode para la Circuit Playground Express ## ¿Que es MakeCode? ![](https://cdn-learn.adafruit.com/assets/assets/000/048/088/medium800thumb/makecodedragdemo.jpg?1510260958) **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/](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](https://makecode.adafruit.com/browsers) 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](https://maker.makecode.com). ## Partes requeridas ### Circuit Playground Express [Circuit Playground Express](https://www.adafruit.com/product/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 made it even better! Not only did we pack even more sensors in, we also made it even easier to... Out of Stock [Buy Now](https://www.adafruit.com/product/3333) [Related Guides to the Product](https://learn.adafruit.com/products/3333/guides) ![A Black woman's manicured hand holds a round microcontroller with lit up LEDs.](https://cdn-shop.adafruit.com/640x480/3333-05.jpg) ### Circuit Playground Express - Base Kit [Circuit Playground Express - Base Kit](https://www.adafruit.com/product/3517) It's the **Circuit Playground Express Base Kit!**  It provides the few things you'll need to get started with the new [Circuit Playground Express](https://www.adafruit.com/product/3333). This version of Circuit Playground is super powered, and will... In Stock [Buy Now](https://www.adafruit.com/product/3517) [Related Guides to the Product](https://learn.adafruit.com/products/3517/guides) ![Rectangular case for Circuit Playground Express - Base Kit.](https://cdn-shop.adafruit.com/640x480/3517-04.jpg) ### USB cable - USB A to Micro-B [USB cable - USB A to Micro-B](https://www.adafruit.com/product/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 microcontroller Approximately 3 feet / 1 meter long In Stock [Buy Now](https://www.adafruit.com/product/592) [Related Guides to the Product](https://learn.adafruit.com/products/592/guides) ![USB cable - USB A to Micro-B - 3 foot long](https://cdn-shop.adafruit.com/640x480/592-01.jpg) Warning: https://makecode.com/_dJzHC09Xxc1v # Makecode para la Circuit Playground Express ## Editando Bloques 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! - prueba nuestro [tutorial para comenzar](https://makecode.adafruit.com/#tutorial:getting-started) que te ayuda a construir un programa de sirena - [prueba uno de nuestros proyectos](https://makecode.adafruit.com/projects) para aprender sobre las características de la Circuit Playground - nuestra forma preferida de aprender, es viendo la lista de videos de [MakeCode Live con John Park](https://www.youtube.com/playlist?list=PLjF7R1fz_OOVzwViKb2YwYNPHmqJbCJ2q), así como ver el show en vivo, los Martes a las 20:00 GMT en el [canal de Adafruit](https://www.youtube.com/c/adafruit/) - puedes [entrar a revisar la documentación](https://makecode.adafruit.com/docs) https://youtu.be/ByuLe_lMHUU ## ¡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. ![](https://cdn-learn.adafruit.com/assets/assets/000/055/440/medium800/makecode_image.png?1529026261) [¡Realiza click aquí para abrir este proyecto en el editor de MakeCode!](https://makecode.com/_91sUqiKLzL9r) En la siguiente sección, ¡vamos a cargar el código de Blinky hacia la Circuit Playground Express!  # Makecode para la Circuit Playground Express ## Descargando y cargando 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. Info: ![](https://cdn-learn.adafruit.com/assets/assets/000/041/826/medium800thumb/led_strips_3333_giffy1.jpg?1494958971 Push the reset button) 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. https://youtu.be/fYwEmrMg22o 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. ![](https://cdn-learn.adafruit.com/assets/assets/000/042/257/medium800/circuit_playground_compile.png?1496431056) Warning: 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](https://github.com/Microsoft/uf2) es un formato de archivo diseñado para programar microcontroladoras por USB). ![](https://cdn-learn.adafruit.com/assets/assets/000/042/259/medium800/circuit_playground_makecode-download-button.png?1496431515) **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!) Info: https://youtu.be/8rjk5iNQAqw **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. ![](https://cdn-learn.adafruit.com/assets/assets/000/042/260/medium800thumb/circuit_playground_file-transfer-win.jpg?1496432300) **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](https://support.google.com/chrome/answer/95759?co=GENIE.Platform%3DDesktop&hl=en), [Firefox](https://support.mozilla.org/en-US/kb/where-find-and-manage-downloaded-files-firefox?redirectlocale=en-US&redirectslug=Downloads+window), [Safari](https://support.apple.com/kb/PH21464?locale=en_US), u [Opera](http://help.opera.com/Windows/12.10/en/downloads.html)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. # Makecode para la Circuit Playground Express ## Salvando y Compartiendo ¿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 ![](https://cdn-learn.adafruit.com/assets/assets/000/042/337/medium800thumb/circuit_playground_Untitled.jpg?1496605029 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. ![](https://cdn-learn.adafruit.com/assets/assets/000/048/091/medium800/makecode_adafruitsharing.png?1510264577 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. # Makecode para la Circuit Playground Express ## Editando JavaScript 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! * [lea los docs sobre JavaScript](https://makecode.adafruit.com/javascript) ¡Pruébalo! También puedes cambiar entre bloques y JavaScript, haciendo click en el botón de la parte superior. ![](https://cdn-learn.adafruit.com/assets/assets/000/055/442/medium800/makecode_Selection_158.png?1529026614 Botón para editar en código) [¡Click aquí para ver este ejemplo en el editor de MakeCode!](https://makecode.com/_bjY2VdKo7VpJ) # Makecode para la Circuit Playground Express ## Aplicaciones 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](https://www.microsoft.com/en-us/store/p/makecode-for-adafruit/9pgzhwsk0pgd). * **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](https://github.com/microsoft/pxt-adafruit) (de código libre) contiene instrucciones para correr un servidor local con node.js, con programado por HID y monitoreo serial. # Makecode para la Circuit Playground Express ## Cargando con WebUSB ## 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](https://www.google.com/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! [Click aquí para descargar la última versión del gestor de arranque para la Circuit Playground Express](https://github.com/adafruit/uf2-samdx1/releases/latest/update-bootloader-circuitplay_m0*.uf2) 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](https://makecode.adafruit.com/?webusb=1#editor) [MakeCode WebUSB Beta](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. ![makecode_mcode-uf2-setup.gif](https://cdn-learn.adafruit.com/assets/assets/000/058/504/medium640thumb/makecode_mcode-uf2-setup.jpg?1533244849) 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. ![makecode_mcode-pair-device.jpg](https://cdn-learn.adafruit.com/assets/assets/000/058/499/medium640/makecode_mcode-pair-device.jpg?1533241366) ## 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. ![makecode_mcode-pxt-connect.jpg](https://cdn-learn.adafruit.com/assets/assets/000/058/500/medium640/makecode_mcode-pxt-connect.jpg?1533241440) ## ¡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! ![makecode_mcode-connected.jpg](https://cdn-learn.adafruit.com/assets/assets/000/058/501/medium640/makecode_mcode-connected.jpg?1533241552) ## 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. ![makecode_mcode-support.jpg](https://cdn-learn.adafruit.com/assets/assets/000/058/502/medium640/makecode_mcode-support.jpg?1533241925) # Makecode para la Circuit Playground Express ## Otras Bondades 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. # Makecode para la Circuit Playground Express ## Más proyectos con MakeCode ## Featured Products ### Circuit Playground Express [Circuit Playground Express](https://www.adafruit.com/product/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 made it even better! Not only did we pack even more sensors in, we also made it even easier to... Out of Stock [Buy Now](https://www.adafruit.com/product/3333) [Related Guides to the Product](https://learn.adafruit.com/products/3333/guides) ### Circuit Playground Express - Base Kit [Circuit Playground Express - Base Kit](https://www.adafruit.com/product/3517) It's the **Circuit Playground Express Base Kit!**  It provides the few things you'll need to get started with the new [Circuit Playground Express](https://www.adafruit.com/product/3333). This version of Circuit Playground is super powered, and will... In Stock [Buy Now](https://www.adafruit.com/product/3517) [Related Guides to the Product](https://learn.adafruit.com/products/3517/guides) ### USB cable - USB A to Micro-B [USB cable - USB A to Micro-B](https://www.adafruit.com/product/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 microcontroller Approximately 3 feet / 1 meter long In Stock [Buy Now](https://www.adafruit.com/product/592) [Related Guides to the Product](https://learn.adafruit.com/products/592/guides) ## Related Guides - [Adafruit Circuit Playground Express](https://learn.adafruit.com/adafruit-circuit-playground-express.md) - [CPX Mystery Dreidel](https://learn.adafruit.com/cpx-mystery-dreidel.md) - [The MonkMakes Plant Monitor and CircuitPython](https://learn.adafruit.com/monkmakes-plant-monitor-and-circuitpython.md) - [Zelda: Breath of the Wild – 3D Printed Bladesaw](https://learn.adafruit.com/bladesaw.md) - [Make It Change: Potentiometers](https://learn.adafruit.com/make-it-change-potentiometers.md) - [Pearl's Gem Weapon – Steven Universe](https://learn.adafruit.com/pearl-s-spear-steven-universe.md) - [LED Breath Stats Mask](https://learn.adafruit.com/led-breath-stats-mask.md) - [Animatronic Glowing Medusa Headdress](https://learn.adafruit.com/animatronic-glowing-medusa-headdress.md) - [Circuit Playground Quick Draw](https://learn.adafruit.com/circuit-playground-quick-draw.md) - [Crickit Powered Dancin' Snowman!](https://learn.adafruit.com/crickit-powered-dancin-snowman.md) - [Spinning Logo](https://learn.adafruit.com/spinning-logo.md) - [Crickit Controlled Animatronic Eyeball](https://learn.adafruit.com/crickit-controlled-animatronic-eyeball.md) - [Perfect Pitch Machine](https://learn.adafruit.com/perfect-pitch-machine.md) - [Halloween Monsters with CRICKIT and Circuit Playground Express](https://learn.adafruit.com/halloween-monsters-with-crickit.md) - [Techno-Tiki RGB LED Torch](https://learn.adafruit.com/techno-tiki-rgb-led-torch.md) - [Light Up Paper Dragon Wall Sconce](https://learn.adafruit.com/light-up-paper-dragon-wall-sconce.md)