DEV Community: Ariel Martin Castro

Dev Snacks: Your First Electronics Project Using a BBC:Microbit

Ariel Martin Castro — Tue, 23 Jun 2020 19:12:50 +0000

Dev Snacks is a series of short reads designed to introduce you to a new tech skill. Some are pulled directly from my Twitter threads with all the grammar and syntax issues that can entail. Have fun!

Y’all wanted more hardware so… today we’re going to play with the BBC micro:bit (https://amzn.to/2Ecs3XU ) We’re going to do some simple projects because ANYONE can do this stuff, even if you don’t know a lick of code.

This is dedicated to @joelatwar because he said I was a poor man’s @shanselman and I want to prove him right

First up, the basics. The BBC micro:bit is the perfect starter for hardware hacking because it is SO DARN EASY. It connects to your computer with a standard micro USB cable.

Writing code to this thing is very newb-friendly because you can do it from a browser without ever actually writing code using what @Microsoft calls “Blocks”. https://makecode.microbit.org/#editor

https://makecode.microbit.org/#editor https://makecode.microbit.org/#editor

The first little project we’re going to do is lighting up some LEDs on the front of this sucker. Lighting up LEDs is like the classic “Hello World” problem of hardware hacking.

In the editor, click “Basic”, grab “show leds”, and drag that son of gun right into the “Forever” slot.

Here’s the editor again: https://makecode.microbit.org/#editor

Dragging Blocks into the “Forever” slot makes any code in the slot run as long as the micro:bit is drawing power. Dragging it into the “On start” slot makes it run when the micro:bit fires up, and until all the instructions are completed.

I made a little design that’s like a rocket ship, or a Christmas tree, or arrow or something IDK. I’m not an artist.

If you click “{ } JavaScript” at the top, it toggles between Blocks and JavaScript code. If you’re already familiar with JS, you will recognize that showLeds() is a prebuilt function that takes a template literal as an argument to send signals to the LED hardware.

What else do we need to do to run this? Not much. The micro:bit just shows up as a USB drive on your computer, so just click “Download” in the editor, find the file in your downloads, and drag it to the MICROBIT drive.

THAT’S LITERALLY IT. We have done a thing. Neato.

Okay I hope you guys see how easy this is for a literal zero-code beginner to do this stuff. The only things you will need is $20 to buy the micro:bit, a computer with a USB slot, a browser, and the ability to follow the most basic of instructions.

YOU GOT THIS.

Zamioculcas zamiifolia

So let’s turn up the volume and do some! More! Interesting! Stuff!

Enter Stage Right one of my office plants. Internet, please meet Juliet, my 3-year old Zamioculcas zamiifolia, native to Eastern Africa and dentist office waiting rooms.

The Zamio… whatever it’s called, needs to be watered approximately every 2 weeks, but because of the dry climate, knowing when to water it is tricky. I am going to write a little program for the BBC micro:bit that checks the water moisture so I can see when to water!

For this little project, we need Juliet, the micro:bit, one of those little black metal binder clips, and two sets of alligator clips.

Pull the handles off the binder clip and just stick ’em right in the dirt. We’re going send a little electricity into these dudes, and the electrical resistance created by the water in the soil will tell us how much moisture is in there.

binder clips in a potted plant

Clip one of the alligator clip ends to the tab labeled “3V” and the other to the tab labeled “0”. Clip the opposite ends of the clips to the binder clip handles in the plant.

When you plug the micro:bit into the computer again, it will still be running the arrow/tree LED light code. It will keep whatever the latest code was in memory. So let’s write the code that makes it test the soil moisture. Back to the editor! https://makecode.microbit.org/#editor

First thing we’ll do is make a variable to hold the moisture data. Click Variables, Make a Variable, and name it something Extremely Creative, like “moisture”.

Grab “Set moisture to 0” and drag it into the “Forever” block.

Then go to “Advanced”, “Pins”, and “analog read pin”. Drag THAT into the “0” in the “Set moisture to 0” block.

In JavaScript, we just declared a variable named “moisture”, and set moisture equal to the return value from a function that takes a reading from Pin 0.

Cool right?

Now go to LED blocks, and choose “plot bar graph of 0 up to 0”, drag it under our variable, then go back to Variable blocks, grab “moisture”, and set it as the input. This will make the LED receive signals from that variable.

Set the “Up to” number to 1023, the highest it will go. Now let’s get some conditional logic in here.

Click Logic blocks and select “If true then” and drop it right under. We’re going to make a button do stuff.

Click Input blocks, and drag “button A is pressed” into the space where “true” was in the conditional block.

Click Basic blocks, grab “show number” and put it as the output block in the conditional logic. Then go to Variables blocks, grab “moisture”, and drop it in where “0” was. We maek butan.

Download the code, drop it in the MICROBIT folder and…..

EXTREMELY MOIST

We did the entire darn thing y'all. We wrote code that sends power through the dirt in a flower pot, testing the resistance of said dirt, storing that resistance as a variable, and printing the output of that variable to LED screens on a microcontroller

Dev Snacks: API basics with Postman

Ariel Martin Castro — Tue, 16 Jun 2020 19:56:25 +0000

A 5 minute beginner-friendly introduction to API basics with Postman

This post is a compilation of some tweets I made as a Postman tutorial. Joel Guerra compiled the tweets into a blog post, and I am putting them on dev.to for more reach.

By the end of this article, you will learn how to send an HTTP request to a live web API and receiving data back using Postman

I am going to use Github’s Noop Challenge — Hexbot to teach y’all about one of biggest tools in my API toolbelt, Postman.

If you’ve never used an API before in your entire life, it’s cool. This is for you bb

Github is doing this programming challenge call NOOP which basically means functions that do nothing. It’s stuff that has no purpose. We are just dorking around for the sake of it. I love it. We are going to use @github’s web-exposed API for their first challenge, Hexbot, to try out Postman.

Here’s the Hexbot NOOP challenge: https://noopschallenge.com/challenges/hexbot

I am not going to explain what an API is, or why you should care, or any of that. You don’t care. I don’t care. Nothing matters, everything is pain.

Let’s just talk to the API, yeah? First let’s download Postman. Postman is free software that lets you test APIs. You can test other people’s public APIs, like we will do today.

You can also use it to test APIs you make, and even to automate the documentation (!!!!!) of your APIs. Okay, download Postman: https://www.postman.com/downloads/

Once you’ve downloaded and installed Postman, if it gives you any tutorial popups, just skip ’em. We are going to do the code equivalent of eating the juicy center of the PB&J and throw away the crust.

I need to create a new Workspace because mine is cluttered. Top center button

Hit “Create New” and name your Workspace. I named it Github NOOP Hexbot so I don’t accidentally use this workspace for real work later.

I chose a really clever description because I just like the word NOOP. NOOP NOOP NOOP NOOP NOOP NOOP NOOP NOOPNOOP NOOP NOOP NOOP NOOP NOOP NOO

Here’s the workspace I created.

There’s a buncha buttons and words we don’t need to care about right now.

The API that Github made for Hexbot is super simple, and here is the documentation for it: https://github.com/noops-challenge/hexbot#-api-basics

here’s only a single API endpoint for it:

An endpoint is the part of the API that receives requests and does stuff with them. We are going to send a request to the Hexbot API endpoint and get some kinda something back. I don’t know what it’s gonna do yet http://api.noopschallenge.com/hexbot

We are going to copy paste what’s between quotes here “”

And paste it into where it says “Enter request URL” right in the center of Postman

Paste it in, hit send, and what do we have? Without any parameters, the API just sends back a random color in hexadecimal form.

I wonder what color “#326688” is

Drop it into this color-hex site and we see it’s some kind of blue. Neat.

The API documentation showed us some parameters. Let’s try them all out.

If we add “?count=” to the end of our API request, we can get more colors at once. The new API request will read: (api.noopschallenge.com/hexbot?count=5)

It sent me back 5 different colors at once. Let’s try the width and height parameters. These parameters require ranges between 10 and 100,000, so I chose width of 69 and height of 420, because I am a child

Nice.

You can also seed the API. The API is not clear what it does with this information. Are we training a world-destroying artificial intelligence? I dunno. But I know based on the Postman GET request output that the API spits out similar-looking hex colors when you seed it this way

That’s it folks. Today we learned: downloading and installing @postmanclient, setting up a workspace, sending a GET request to a public API, reading API documentation, and experimenting with API parameters. This is basically what I do with every API I find!

Check out this incredibly cool Hexbot someone made: (aytekk.github.io/hexbot/)

Polka dot party!