USING WIFI:BIT WITH THE OFFICIAL MAKECODE EXTENSION (PXT-WIFIBIT)

In this tutorial we will show you how to simply use WiFi:bit via MakeCode platform. So, let’s go! Official WiFi:bit extension for MakeCode is available on GitHub. On the home page of the project on GitHub there are all available commands, with their descriptions and an example of use. You can add the extension to the project so to click More… (icon next to the gear) and then select Extensions. Search https://github.com/bosnivan/pxt-wifibit and then click on the offered:

Shortly you will be returned to the main editor window. The group WiFi:bit will be located among the command groups, somewhere around the middle.

It contains all of the extension commands. Using them, you can communicate with the Internet in various ways. If you have not already, for better understanding of the following chapters, the recommendation is to study the earlier mentioned project home page.

The centre part of the extension is the execute HTTP method command. Using it, you will send and receive data. In this chapter, you will be introduced to the most important HTTP methods and their use.
Let’s say you have saved the link to some news of your favorite portal in your web browser: http://www.portal.hr/vijesti/22261803. When you click on the link, the web browser will execute the GET method. It serves for data retrieval. If you want to translate it into the execute HTTP method command, this is how it would look like:

The initial part of the link (http://), tells you the type of protocol (HTTP). What is following is the name of the server (www.portal.hr) and the path within the server (/vijesti/22261803). The port within URL is not specified, so use the standard HTTP protocol port (90). An example of URL with the specified port is: http://www.portal.hr:8080/vijesti/22261803 . Port value follows the name of the server, and they are separated with a colon. In that case, we would put the number 8080 to the port’s position.

After you have read the news, you have decided to leave a comment. Before posting comments, you have filled out all fields and clicked on the button Send Comment. The browser will most likely execute the POST method:

The command, along with previously seen server, port and path fields, this time also contains optional fields such as the header and body of the message. The body contains the data we send, and the header some accompanying information. In this case, it is a content format of the message body. It is about JSON, a format that is currently most commonly used to structure data within HTTP methods.

After your comment has appeard below the page, you have noticed a mistake. Fortunately, there is an option to edit comments. The PATCH method is used to partially change data:

The path indicates which data it is about (a comment whose ID is 33, and it is related to the news whose ID is 22261803), while the body contains the part that changes. For data changes we also use the PUT method. With it, we usually send the whole content of data that is being changed. You have previously seen that the comment contains the author and comment values. After it is created, the server has certainly added an ID and the time it was created. With the PUT method, we would send all of this data back. It is unnecessary in this case. There would be more traffic and the processing would be slowed down.

The comment is now nicely put. However, you are feeling guilty that you have even commented on something like that. It is your “guilty pleasure”, no one should know about. You have decided to delete the comment:

DELETE method, like the GET method, does not require the header or the message body. The path, along with the ID, is sufficient. In short, these are the most commonly used HTTP methods. The others are used less and there is a small possibility that you will even encounter them. Which method is necessary for what, and how to execute it, you will usually find out on the pages of the service you are using. Mostly, you will have an API available, a set of methods for accessing some system data. The most common name of this type of API is REST API, and you will find names such as WEB API, HTTP API and so on. For example, API description of the Blynk application is available on Blynk HTTP RESTful API. Another example of the method is:

Using the GET method, the value of the pin changes. In accordance with the previously read information, we can expect the PATCH or PUT method, but this is a good illustration that methods are not always used as intended. CroatiaTownAPI is a local API for working with cities, districts and counties. The Postman program and the REST test test… page are examples of tools for work with APIs. They are very helpful when making the program.

After this small diversion, the following chapters deal with extending, i.e. creating various types of programs using extensions and everything you have learned so far.

After you have physically connected micro:bit and WiFi:bit, you will probably want to connect to a WiFi network immediately. Connection should be done only once, and WiFi:bit is later connected automatically. That is why it is best to perform it as a separate program. You will make the connection by clicking the button A:

Therefore, it is necessary to fill in the network name (SSID) and the password (KEY). Add the tracking of what the WiFi:bit, when processing commands, responds to micro:bit and show it on the micro:bit display:

At the beginning of the program execution, connect micro:bit and WiFi:bit. You will also execute an AT command which commands the WiFi:bit to, while sending feedback, not repeat what is said, i.e. the content of the commands sent to it:

This will provide quicker rotation of the feedback on your display. It can also be done without this command, the only thing is that the printing will take much longer and it will be harder for you to follow. This is the whole code for connection to a WiFi network. Switch it to micro:bit and follow what happens.

At the beginning of the execution, the program will print out some content. It is important to notice that it ends with ATE0 OK. After that, you can click the button A. If you have entered the name and password of the network correctly, WIFI CONNECTED WIFI GOT IP OK will be printed. This is a sign that you have successfully connected to a WiFi network.

Find the execution file here pxt-wifibit-povezivanje.hex. You can open it in MakeCode, see the code and adjust it according to your needs.

The next program you will make is sending data to ThingSpeak. It is about an example from the previous Thingspeak document, only this time you will execute it using the official extension.

Rolling the dice is a classic example of working with micro:bit:

What is left for you to do, is to compose the code of sending values of the dice roll to ThingSpeak. On the ThingSpeak project page, in the place where you have previously downloaded the API key, a list of methods for sending data is also available:

You need the first method, Update a Channel Feed. The type of method is GET, the name of the server is api.thingspeak.com, and the path /update?api_key=8L7CCVB7ENMT5R5S&field1=0. In the path, instead of 0 in the end, put the value of the dice roll. Port of the HTTP protocol is 443. Since working with HTTPS is much more complicated than working with HTTP, you will use HTTP and its port 80. If you try out this method, you will see that the HTTP is supported too. When you translate all of it into the execute HTTP method command, this is what you will get:

The command is preceded by cleaning the content of the screen, and after the execution, a tick appears. You can check the delivery success on the project page on ThingSpeak.

Pxt-wifibit-slanje.hex file is attached to this document. You can open it in MakeCode, see the code and adjust it according to your needs. 

Unlike sending data, which is reduced to a couple of commands, receiving data is somewhat more complex to do. In fact, the process itself and the extraction of important parts is sometimes problematic. There are many reasons to it. The main reason is the micro:bit memory limit. The answers with the execution of HTTP methods are often comprehensive and they easily exceed the available memory. Serial communication buffers are also quite limited. The third reason is the lack of finer data processing. Working with the text is quite limiting. Until the development environment enriches with new features, much is already under preparation, what remains is to research, try out various approaches and play until you get what you want.
In this chapter, you will retrieve the information from the Blynk server, stored there using the mobile application. Below is a method that you will use. A good exercise is to determine the name of the server, port, and path.

You will use some possibilities that are not directly available in blocks, therefore, your example will be written directly in the code. You will attach data retrieval to the button A. At the beginning you will clean the display and, in order for the feedback to be as short as possible, execute the AT command ATE0:

Prepare a variable for saving the response and tell the system to track what returns, and whenever it comes accros the transition to a new line, to add the received data to the previously created variable:

Furthermore, using HTTP method GET, retrieve the desired value:

Within the package of WiFi:bit commands, two of them are related to Blynk service. It is about writing and reading the value of one of the pins. Blynk is quite popular and the purpose of these commands is to expand its application. They are also a good example of how you can use the existing commands and create your own set of commands related to what you are doing. These two commands contain only previously known commands. The program of the preceding example is identical to the code reading command of the pins. Later you will make a simple example of using these commands.

First, you need to create a project related to the Generic Board (Wi-Fi) in the Blynk mobile application and insert two blocks (widgets) into it. The first is Text Input and serves to enter the command that is saved in pin V0. Set the name of the block and pin in the settings. You reach them by clicking the block you want to edit. The second block is Gauge and it displays the value of the V1 pin. It will contain the current value of the counter. Then, in the project settings, request an authorization token for access outside the application (AUTH TOKENS option, Email all icon). You will use it in the commands for micro:bit program. The content of the Blynk interface is shown below:

If you are not able to use the mobile application, a collection for the Postman pxt-wifibit-blynk.postman_collection is attached to this file. It contains call log entries commands and readings of the counter. In addition to being able to replace a mobile application, it is also useful when it comes to making it, and checking if everything works as you have imagined.

The program for micro:bit will first connect the boards, and then execute an infinite loop in which it will read the value of the command. If it is COUNT, the counter value is increased by 1 and the current value is sent to pin V1. If the RESET command is entered, the counter is reset to 0. This is the whole program content:

You will replace the specified token with your own. In a mobile application, you can enter commands and monitor counter changes. You can also use the attached Postman collection.
The above example is completely simplified. Try to expand it. The RESET command, as long as it is active, returns the counter to 0. That does not make sense actually. Change its behavior by resetting a counter once, and then change the command to COUNT and continue counting from the beginning. Try adding a new command, STOP, etc. Those of you who are more advanced can set the default value or for how much should the counter be increased. You can also speed up the performance using one command that is mentioned on the main page of the extension. If you have a motion sensor, try to arrange some kind of entry control into the room, etc. Opportunities are sparse and inexhaustible.

The execution file pxt-wifibit-blynk.hex is attached to this document. You can open it in MakeCode, see the code and adjust it according to your needs.