It's getting late already in Brussels, the sun is shutting down, but we still managed
to find a second tiny go talk somehow.
Daniel has got to tell us everything about visual programming in Go, which I think means
that I no longer have to write codes.
So, run for class.
Can you hear me?
First of all, thank March and the rest of the organization for this beautiful go depth
room today.
Also, the foster.
And I'm Daniel Esteban, also known as Conejo, and I'm going to talk about visually programming
Go.
Probably you will use your eyes to program right now, but I'm talking about visual programming
language, which is like you use graphically element, graphical element instead of text
or code.
Usually, there are two main branches of visual programming language.
One is flow based, and the other is block based.
And today we are going to focus on this block based way of programming Go.
Why? because I like to make crazy things with Go, especially tiny Go, and I wanted to know
if it's possible to make some code graphically and then translate it to Go, because, well,
more seriously, because I think Go is programming is an essential skill for the future.
It's a great way to introduce a non-programmer to programming, especially children.
It's great for simple tasks like home automation or if F-E-R-A-I-F-T-T-T.
Also no code, no code movement are great in popular, and Go has a standard nice library,
some nice package, it's easy to read, and has multiple targets.
You can run Go on Mac Windows, but also on a lot of microcontrollers.
How are we going to visually program Go?
Well, there is blocky, blocky.
Also known as make code or scratch or hard to block, all of them use the same engine,
and we are going to see this in a few moments.
Blockly is a poor JavaScript library, it's 100% client-side, no server-side dependencies,
it's compatible with all major browsers, and it's highly customizable and extensible.
Blockly, unfortunately, does not support Go officially, so I'm here to fix that.
Unfortunately, I have a playground specifically made, but I left the last update at my home.
It's not on the internet, so I cannot run on my laptop right now, but I will show you
some screen shots and we are going to see some demo.
As you can see on the left side, the blockly editor is run on your web browser.
Once we have, it generates the Go code, and then we send it to a server, so it can compile,
it can format the code, and then we can get one file that runs on the web and the browser
again, so we can see the output or we just get the file for our device.
We are using for the server to compile, we are using TinyGo, which is a Go compiler for
microcontroller, but you can use a regular Go.
Let's see Sonet's sample.
This is for example, we can make, and we are going to see different features of Blockly.
The first one is, of course, a Hellover.
So Blockly, we have these different blocks already made, and we just drag and drop them,
we can edit them, we can add, we want, for example, to bring Hellover, and we just go
for a text, we drop here, Hello Foster, and we are going to make this five time, and yeah,
this doesn't work, sorry, but well, we just drop and drop the different element.
The code it will generate, it's pretty simple, and it's just Go code.
So this was our first example, you will need to trust me like this is working, but like
I said, the last version of the playground is not, I couldn't bring it here.
Our next example is like, especially focused to children or non-programming people, I present
you the logo turtle, turtles are educational robots in computer science, yes, because it's
really easy to see, you program the turtle, the robot, and you can see like you tell them
move forward one meter, turn right, or turn left, move forward again, go back, and then
you see the little robot moving, and it's very easy for children to understand the principle
of programming.
So they became popular with the local language and turtle graphic, so we make our own version,
is the goferino, this little one, okay, this is a different robot, the chassis, the brain
is a BBC micro bit, which can go inside, and then the eyes are a ultrasonic distance sensor.
We are going to avoid obstacle, the first example like you can see is we set a variable
called distance, it's a number variable, and then while forever, we just get, we read the
distance from the sensor, and if the distance is less than a value, we just move to the,
we spin to arrive, if not, we are going forward, and then repeat it indefinitely.
The generate go code will take, I mean, Blockly will make the right imports, it will declare
some variable needed for it, and it generates valid, this block will generate a valid code.
So we just run, I will skip the flash bar, because again, it's just wasting time, and
I think we are pretty tired for a long day, but we just can see, wait, maybe, yes, and
when it finds an obstacle, it just spins.
Bye bye goferino.
The next sample is what I call the stream tank problem.
I have a stream tank at home, oh, I need to live in a very specific temperature, and it
turns out like water heater are very cheap, but water cooler are not, instead, you can
just blow air with a fan to the fish tank, and it will lower the temperature.
So I couldn't bring the fish tank here, but I have hopefully a still hot coffee, and hopefully
still cold water, the circuit is very simple, it's an Arduino Nano RP2040, it has a waterproof
temperature sensor here, and instead of blowing a fan, I will just put some RGB LEDs, so you
can see them on the back.
The code is quite similar as before, we just have a variable called temperature, we just
initialize the device, we read the temperature, and if the temperature is higher than 30 degrees,
we just blink red, if it's under 20 degrees Celsius, it will be blue, and if the temperature
is okay, it will be green.
So the temperature is okay, we're going to put the sensor in the coffee, it turns red,
and now in the water it will get hopefully blue.
So we can make this small thing, because with very, very few blocks, we just save us a lot
of money instead of buying a water cooler.
The code again is very simple, I just keep some pa, but it makes just regular code.
Also the next example is more focused on no cold, low cold, and wet assembly, wet assembly
is getting supported by more and more entities, more and more in service, like Fastly, Cloth
Fair, Capsuleware, X-Team, you can have serverless function right now, X-Team is trying to make
what Lua was a couple of years ago, you can have your program and you can include some
extension from the user or the community in wet assembly.
So I just create a once worker, it's a visit counter, in orange you can see the special
block to work with Cloth Fair, we just create a data store with a name counter or the connection,
we get, it's time we visit the main route on the web server, it gets the value of that
data store, it's increment by one and then put it back, just a simple visit counter.
The code generate here is again like HTTP function, you can probably write if you have
done some web server code, this is a bit ugly code, I will explain later, but the race is
let's just convert from string to integer, just add one and then put back again, and
then we search the code, wait, the URL that publishes here, this is right now one,
two, we keep reloading the page, it will contain, and if we go to the back end on Cloth Fair,
we can see the value is there.
So again with very few blocks, we can allow non-programmer people of our team to write
an extension for our main program or whatever tool they are using.
Now let's make the blocks, you need to define the blocks, it's a JSON structure which you
have what type of block, the message to show, if it has some input, the output, the next
statement, even you can add a tooltip, some comment or documentation, and then you just
define what the block does and what the go code that it should write finally.
There is even a block generator, you can add different properties to your block, and now
the feature of the block is they are type checking, there is a little bit of type checking,
you cannot assign a text variable to, I mean a text to a text variable or something like
that, some blocks you can define what type is returning, you also have conditional, of
course, you can edit the own block on life to add more else if or else condition, you
have some list also, you have inline documentation, just wait a little bit and just the tooltip
appear of what does block does, it can be translate, of course, in any language which
makes it really, really easy for people to start, and you can have different colors and
different style for each type of block.
You can also have some image on any part of the block which helps a lot, again, the user
to know that, okay, this block is an LED or a temperature sensor or something like that.
The limitation is currently not everything is yet supported, you need to create a block
for it, it's probably worse for vision impaired people or screen reader user, because I guess
just text file or code file is easier for them, static typing is complicated because
there are a lot of different types, and Blockly was made with JavaScript, Python, and Dart
in mind, like dynamic type in kind of language, you have to make a lot of decision in behalf
of the user, like, for example, on our example of, or at what service, we just assume like
the response writer will be called D and the request is R-E-Q, so you have to have that
in mind when you make other blocks, ugly code is sometimes needed, because, for example,
and just focusing on tiny go, I expect all number variables to be 32, because it is common
in tiny go, so when you have to typecast into I'm 32 or something like that, it gets ugly,
and there is not much documentation right now about how to debug it or how to develop
on Blockly, so it's kind of hard right now.
Here are the links for the different projects, and that's it.
Thank you.
I'll give you some time.