[00:00.000 --> 00:14.240] It's getting late already in Brussels, the sun is shutting down, but we still managed [00:14.240 --> 00:17.280] to find a second tiny go talk somehow. [00:17.280 --> 00:22.920] Daniel has got to tell us everything about visual programming in Go, which I think means [00:22.920 --> 00:24.680] that I no longer have to write codes. [00:24.680 --> 00:26.680] So, run for class. [00:26.680 --> 00:32.000] Can you hear me? [00:32.000 --> 00:36.920] First of all, thank March and the rest of the organization for this beautiful go depth [00:36.920 --> 00:37.920] room today. [00:37.920 --> 00:41.600] Also, the foster. [00:41.600 --> 00:47.320] And I'm Daniel Esteban, also known as Conejo, and I'm going to talk about visually programming [00:47.320 --> 00:48.320] Go. [00:48.320 --> 00:54.520] Probably you will use your eyes to program right now, but I'm talking about visual programming [00:54.520 --> 01:01.760] language, which is like you use graphically element, graphical element instead of text [01:01.760 --> 01:02.760] or code. [01:02.760 --> 01:09.000] Usually, there are two main branches of visual programming language. [01:09.000 --> 01:13.600] One is flow based, and the other is block based. [01:13.600 --> 01:20.240] And today we are going to focus on this block based way of programming Go. [01:20.240 --> 01:29.320] Why? because I like to make crazy things with Go, especially tiny Go, and I wanted to know [01:29.320 --> 01:40.560] if it's possible to make some code graphically and then translate it to Go, because, well, [01:40.560 --> 01:48.120] more seriously, because I think Go is programming is an essential skill for the future. [01:48.120 --> 01:58.280] It's a great way to introduce a non-programmer to programming, especially children. [01:58.280 --> 02:07.160] It's great for simple tasks like home automation or if F-E-R-A-I-F-T-T-T. [02:07.160 --> 02:14.600] Also no code, no code movement are great in popular, and Go has a standard nice library, [02:14.600 --> 02:20.320] some nice package, it's easy to read, and has multiple targets. [02:20.320 --> 02:28.360] You can run Go on Mac Windows, but also on a lot of microcontrollers. [02:28.360 --> 02:34.920] How are we going to visually program Go? [02:34.920 --> 02:40.600] Well, there is blocky, blocky. [02:40.600 --> 02:49.240] Also known as make code or scratch or hard to block, all of them use the same engine, [02:49.240 --> 02:52.840] and we are going to see this in a few moments. [02:52.840 --> 03:00.040] Blockly is a poor JavaScript library, it's 100% client-side, no server-side dependencies, [03:00.040 --> 03:07.080] it's compatible with all major browsers, and it's highly customizable and extensible. [03:07.080 --> 03:15.600] Blockly, unfortunately, does not support Go officially, so I'm here to fix that. [03:15.600 --> 03:25.600] Unfortunately, I have a playground specifically made, but I left the last update at my home. [03:25.600 --> 03:30.680] It's not on the internet, so I cannot run on my laptop right now, but I will show you [03:30.680 --> 03:36.040] some screen shots and we are going to see some demo. [03:36.040 --> 03:45.520] As you can see on the left side, the blockly editor is run on your web browser. [03:45.520 --> 03:53.040] Once we have, it generates the Go code, and then we send it to a server, so it can compile, [03:53.040 --> 04:07.440] it can format the code, and then we can get one file that runs on the web and the browser [04:07.440 --> 04:13.840] again, so we can see the output or we just get the file for our device. [04:13.840 --> 04:19.600] We are using for the server to compile, we are using TinyGo, which is a Go compiler for [04:19.600 --> 04:27.200] microcontroller, but you can use a regular Go. [04:27.200 --> 04:29.360] Let's see Sonet's sample. [04:29.360 --> 04:41.480] This is for example, we can make, and we are going to see different features of Blockly. [04:41.480 --> 04:48.360] The first one is, of course, a Hellover. [04:48.360 --> 05:02.520] So Blockly, we have these different blocks already made, and we just drag and drop them, [05:02.520 --> 05:14.560] we can edit them, we can add, we want, for example, to bring Hellover, and we just go [05:14.560 --> 05:33.920] for a text, we drop here, Hello Foster, and we are going to make this five time, and yeah, [05:33.920 --> 05:43.480] this doesn't work, sorry, but well, we just drop and drop the different element. [05:43.480 --> 06:01.640] The code it will generate, it's pretty simple, and it's just Go code. [06:01.640 --> 06:07.080] So this was our first example, you will need to trust me like this is working, but like [06:07.080 --> 06:18.360] I said, the last version of the playground is not, I couldn't bring it here. [06:18.360 --> 06:26.440] Our next example is like, especially focused to children or non-programming people, I present [06:26.440 --> 06:35.920] you the logo turtle, turtles are educational robots in computer science, yes, because it's [06:35.920 --> 06:45.520] really easy to see, you program the turtle, the robot, and you can see like you tell them [06:45.520 --> 06:51.960] move forward one meter, turn right, or turn left, move forward again, go back, and then [06:51.960 --> 06:57.240] you see the little robot moving, and it's very easy for children to understand the principle [06:57.240 --> 06:58.600] of programming. [06:58.600 --> 07:08.720] So they became popular with the local language and turtle graphic, so we make our own version, [07:08.720 --> 07:31.400] is the goferino, this little one, okay, this is a different robot, the chassis, the brain [07:31.400 --> 07:46.880] is a BBC micro bit, which can go inside, and then the eyes are a ultrasonic distance sensor. [07:46.880 --> 07:56.720] We are going to avoid obstacle, the first example like you can see is we set a variable [07:56.720 --> 08:07.360] called distance, it's a number variable, and then while forever, we just get, we read the [08:07.360 --> 08:15.680] distance from the sensor, and if the distance is less than a value, we just move to the, [08:15.680 --> 08:22.520] we spin to arrive, if not, we are going forward, and then repeat it indefinitely. [08:22.520 --> 08:35.960] The generate go code will take, I mean, Blockly will make the right imports, it will declare [08:35.960 --> 08:46.080] some variable needed for it, and it generates valid, this block will generate a valid code. [08:46.080 --> 08:55.120] So we just run, I will skip the flash bar, because again, it's just wasting time, and [08:55.120 --> 09:13.040] I think we are pretty tired for a long day, but we just can see, wait, maybe, yes, and [09:13.040 --> 09:28.040] when it finds an obstacle, it just spins. [09:28.040 --> 09:36.520] Bye bye goferino. [09:36.520 --> 09:41.440] The next sample is what I call the stream tank problem. [09:41.440 --> 09:55.320] I have a stream tank at home, oh, I need to live in a very specific temperature, and it [09:55.320 --> 10:06.480] turns out like water heater are very cheap, but water cooler are not, instead, you can [10:06.480 --> 10:17.800] just blow air with a fan to the fish tank, and it will lower the temperature. [10:17.800 --> 10:28.000] So I couldn't bring the fish tank here, but I have hopefully a still hot coffee, and hopefully [10:28.000 --> 10:38.720] still cold water, the circuit is very simple, it's an Arduino Nano RP2040, it has a waterproof [10:38.720 --> 10:50.480] temperature sensor here, and instead of blowing a fan, I will just put some RGB LEDs, so you [10:50.480 --> 10:58.200] can see them on the back. [10:58.200 --> 11:06.160] The code is quite similar as before, we just have a variable called temperature, we just [11:06.160 --> 11:14.320] initialize the device, we read the temperature, and if the temperature is higher than 30 degrees, [11:14.320 --> 11:24.160] we just blink red, if it's under 20 degrees Celsius, it will be blue, and if the temperature [11:24.160 --> 11:47.440] is okay, it will be green. [11:47.440 --> 12:07.320] So the temperature is okay, we're going to put the sensor in the coffee, it turns red, [12:07.320 --> 12:17.920] and now in the water it will get hopefully blue. [12:17.920 --> 12:27.240] So we can make this small thing, because with very, very few blocks, we just save us a lot [12:27.240 --> 12:30.760] of money instead of buying a water cooler. [12:30.760 --> 12:43.280] The code again is very simple, I just keep some pa, but it makes just regular code. [12:43.280 --> 12:52.640] Also the next example is more focused on no cold, low cold, and wet assembly, wet assembly [12:52.640 --> 12:57.640] is getting supported by more and more entities, more and more in service, like Fastly, Cloth [12:57.640 --> 13:12.480] Fair, Capsuleware, X-Team, you can have serverless function right now, X-Team is trying to make [13:12.480 --> 13:21.400] what Lua was a couple of years ago, you can have your program and you can include some [13:21.400 --> 13:28.160] extension from the user or the community in wet assembly. [13:28.160 --> 13:40.520] So I just create a once worker, it's a visit counter, in orange you can see the special [13:40.520 --> 13:48.880] block to work with Cloth Fair, we just create a data store with a name counter or the connection, [13:48.880 --> 14:00.320] we get, it's time we visit the main route on the web server, it gets the value of that [14:00.320 --> 14:10.920] data store, it's increment by one and then put it back, just a simple visit counter. [14:10.920 --> 14:22.440] The code generate here is again like HTTP function, you can probably write if you have [14:22.440 --> 14:34.160] done some web server code, this is a bit ugly code, I will explain later, but the race is [14:34.160 --> 14:42.160] let's just convert from string to integer, just add one and then put back again, and [14:42.160 --> 15:11.840] then we search the code, wait, the URL that publishes here, this is right now one, [15:11.840 --> 15:32.400] two, we keep reloading the page, it will contain, and if we go to the back end on Cloth Fair, [15:32.400 --> 15:35.880] we can see the value is there. [15:35.880 --> 15:52.240] So again with very few blocks, we can allow non-programmer people of our team to write [15:52.240 --> 15:58.960] an extension for our main program or whatever tool they are using. [15:58.960 --> 16:11.640] Now let's make the blocks, you need to define the blocks, it's a JSON structure which you [16:11.640 --> 16:21.800] have what type of block, the message to show, if it has some input, the output, the next [16:21.800 --> 16:33.840] statement, even you can add a tooltip, some comment or documentation, and then you just [16:33.840 --> 16:45.000] define what the block does and what the go code that it should write finally. [16:45.000 --> 16:56.080] There is even a block generator, you can add different properties to your block, and now [16:56.080 --> 17:04.680] the feature of the block is they are type checking, there is a little bit of type checking, [17:04.680 --> 17:11.080] you cannot assign a text variable to, I mean a text to a text variable or something like [17:11.080 --> 17:24.120] that, some blocks you can define what type is returning, you also have conditional, of [17:24.120 --> 17:33.400] course, you can edit the own block on life to add more else if or else condition, you [17:33.400 --> 17:44.520] have some list also, you have inline documentation, just wait a little bit and just the tooltip [17:44.520 --> 17:53.480] appear of what does block does, it can be translate, of course, in any language which [17:53.480 --> 18:01.960] makes it really, really easy for people to start, and you can have different colors and [18:01.960 --> 18:08.920] different style for each type of block. [18:08.920 --> 18:17.080] You can also have some image on any part of the block which helps a lot, again, the user [18:17.080 --> 18:26.880] to know that, okay, this block is an LED or a temperature sensor or something like that. [18:26.880 --> 18:32.200] The limitation is currently not everything is yet supported, you need to create a block [18:32.200 --> 18:40.280] for it, it's probably worse for vision impaired people or screen reader user, because I guess [18:40.280 --> 18:48.200] just text file or code file is easier for them, static typing is complicated because [18:48.200 --> 18:57.000] there are a lot of different types, and Blockly was made with JavaScript, Python, and Dart [18:57.000 --> 19:03.920] in mind, like dynamic type in kind of language, you have to make a lot of decision in behalf [19:03.920 --> 19:14.320] of the user, like, for example, on our example of, or at what service, we just assume like [19:14.320 --> 19:22.480] the response writer will be called D and the request is R-E-Q, so you have to have that [19:22.480 --> 19:34.840] in mind when you make other blocks, ugly code is sometimes needed, because, for example, [19:34.840 --> 19:43.400] and just focusing on tiny go, I expect all number variables to be 32, because it is common [19:43.400 --> 19:53.600] in tiny go, so when you have to typecast into I'm 32 or something like that, it gets ugly, [19:53.600 --> 20:00.040] and there is not much documentation right now about how to debug it or how to develop [20:00.040 --> 20:04.520] on Blockly, so it's kind of hard right now. [20:04.520 --> 20:10.240] Here are the links for the different projects, and that's it. [20:10.240 --> 20:17.240] Thank you. [20:17.240 --> 20:44.240] I'll give you some time.