React on an ESP32

i guess uh that's the belt we'll get started okay guys it's really good to see all of you here it's been a while since uh i've seen such a large crowd and especially for something technical which is pretty phenomenal and fantastic so thank you all for being here and uh yeah it's uh it's good to be back in the limelight honestly um a little bit about me so my name is mayor sword and i am a full stack developer but uh one thing that uh may not be apparent is the fact that i'm also an embedded engineer so i'm an embedded developer there's no such word for that somebody is a full stack engineer plus embedded i don't think there is such a thing like that um i work for a company called hack hunter and uh i forgot to bring my little device that we're actually sort of currently producing um i've got a colleague in the audience over here so you know we work together and we do some really good react work okay um yeah so today what i'm going to be discussing is i'm going to be discussing a little bit about actually putting an uh react application on one of these devices that you see over here is concluding two okay uh it's it's pretty remarkable now what's interesting is that uh according to gartner right there's gonna be seven billion products connected to the wi-fi by the year 2025. so this is definitely an interesting space to watch out for all right so when we create a react application okay when we deploy it it really winds up in a place like aws or azure or some place like that and it looks in a data center like this you know so you've got some sort of sense of you know like a lamb like land uh lodging network large storage devices or you know hundreds of cpus probably gigabytes of ram and these things take up office floors they're huge and your react application sits on you know just a slight sliver or essentially disposed amongst multiple devices multiple machines like that today we're not going to be doing that we're not going to deploy what we're going to be doing is we're going to put it on a device that's essentially the same size as the 5 cent piece and you might ask why on earth would you want to do that well the first answer is because it's cool okay it's just why not it's phenomenal that you can do that but more importantly what it does right is it actually gives you as react developers right an interface and a mechanism to directly control the chip which basically means you as a react developer can now start interacting with the universe which is quite cool okay and if you want to know the architecture as to how we do this it's quite simple right these esp32s all these little controllers have the capability of having a web server so what we have at the bottom is we've essentially got some some c code which basically lives in an essentially flash flash think about it like a hard drive and then we've got the react code which is essentially a static bundled site and then we've got uh essentially a application layer on top of that which does some http routing you know so we've got some page routes which basically serve the static bundle and we've got some api routes that basically directly interact with some peripherals such as light bulbs and stuff like that but in terms of this particular web server architecture you kind of look at that and kind of say hey that's not new well yeah it isn't we're doing exactly the same thing but the only difference is now we're doing it on a very small device so this is the introduction to the particular microcontroller that i'm using this is an esp32 it is one of my favorite microcontrollers this this sort of thing that you see on top over here is actually a can it's a metal sort of fixture that sits on top of it and if you take that off i'll put some devices here which you wouldn't be able to see from up here you've got two chips underneath there you've got essentially the esp-32 which is the actual brains of the thing think of that like the cpu and you've got this thing which is flashing your react application is going to sit inside that little sort of trip over there now i'm going to basically just go through some stats and i'm going to compare them to my machine so my machine is a four core machine eight virtual cpus this has got dual cores it's actually got two cpus all right uh my machine's got wifi built in and you'll notice that they've got this little sort of squiggly line at the top over here it's a bit hard to see in this light but there's this little sort of squiggy line at the top there you can see that over there as well that's actually an on-board antenna that's an on-board antenna and that basically means that this thing has native capabilities to connect to the internet which gives us some interesting use cases all right uh this is where it gets really interesting mine's a 16 gigabyte machine this has got 320 kilowatts usable ram so not a lot of ram so you've got to be very careful how you manage the memory i've got a little terabyte of hard drive space this thing's got four megabytes of flash okay so four megabytes that's your limit okay uh but one thing that this thing does have is lots of peripherals right um so this is the can that you see over there right and then essentially you've got these sort of pins that basically fall out to these other pins over here these external ones and over there you can put motors and you can put lights and you can put sensors and you can basically control the weather you can do whatever you want okay and as i said underneath that thing is essentially these two chips over here which you can probably not see at the back they're very very small first one being the esp32 brains of the operation the second one being the flash which is essentially where we store everything these things also very very low power and as you can see over here i've got one running on a little 3.3 volt battery so um yeah they basically can last for a long time of a battery so this is 32 there's the flash so one of some of the use cases that we would want to actually put a react application on one of these microcontrollers why would we want to do that well it gives us direct interaction for remote controls so here we can basically go ahead and actually create a user interface for a drone or robot arms or you know some toys or something like that that's one particular use case another use case is active monitoring if you're trying to monitor something that is constantly online like uh some power you know power plant or um something that is critical and you want to basically make sure it's active monitoring active alerting these chips can basically have the sensors in place to be able to monitor it and then you can essentially log into this thing into the react application and actually monitor it in real time and then the other thing that these particular chips are very very good at is essentially low power and activity in other words what we do is we actually make them sleep for the majority of the time we wake them up periodically like once a day or once every couple of hours and then we send a burst of information saying you know this is the temperature this is how much water was consumed this is the level of fluid there is or whatever it is we're trying to measure and then the thing goes back to sleep now obviously while it's asleep it's not a very good web server you can't get to it okay but in setting up the the actual device how often should it communicate what are the thresholds and so on and so forth you can create a react application and you can essentially create all the configuration that you want to forward and that is another good use case for creating a react application on an esp32 so i'll give you a quick demo over here hopefully the demo guides are kind today all right so um what you're actually looking at is you if you have a look at that url then we can see that it says p32.local so that's actually me going over the network okay directly to my esp32 and i'm using my phone as a hotspot this thing actually can act as both the station and as well as an access point so if i don't have a hotspot available i could actually set this thing up to be an access point and i can dial into it directly with my pc as in you know go to networks and find me the the hotspot or find me the network of course if i do that i don't have internet access because obviously you know my sp 32 doesn't round to the internet right but in this case because i'm using hotspot i can write the internet okay but i don't really need to in this particular case but anyway this is actually linked directly into the chuck minus p 32. local and you can see it's returned something it says basically hello world all right we'll have a look at the code in just a bit now i'll just go through to the next one over here so on that little chip over there can you guys can you guys see that okay all right on that chip there's a tiny little light there's an led if you can't find it i'll switch it on for you over here and actually go on so you know so then you can essentially switch it off you can switch on you can see the speed is not too bad okay and that's using http requests okay all right this is also using http request by the way right then i've got this push button which is going to be a little bit tricky because i have to get my hand around here so the problem with http requests obviously is that this client being my local machine has to basically initiate the communication has to go out and basically invoke it and say hey you know what what's the term you know what's the you know what's the deal but if the chip wants to communicate to the browser how does it do that okay it's a bit more tricky you can use something like polling but in this particular case we're using websockets because the sp32 has built-in websocket capability so if i go ahead and press this button which is falling out that's not going to work i'll have to basically ah here it is my magnet okay so the sv32 has a built-in magnetrometer i'll basically see if i can fix that thing just now so um this can be used as essentially location so if i got close here nothing happens the reason being is because it's actually polarized so i have to turn the magnet around okay so you can see here basically if i get very close to it it gives me sort of a value like that and then if i move it away it goes further away so it gives you some sort of proximity alerts okay and the next one i want to basically just quickly show you is a server this is essentially quite cool uh this is also using some web sockets so i've got this little motor over here okay and you can see it's pointing in that direction and as i basically slide this you can see it's pretty quick yeah that's also using web sockets so um yeah too bad about the button maybe i'll flash it a bit later with another onboard button that might be easier so i thought i'd give just a quick interruption over here and just give you the demo up front because if you are watching this on youtube there's no way that you would have been able to see it so the first one was the home one which is basically just getting the hello world um very straightforward nothing particularly interesting about that let's go through to the led and what will happen is if i actually press this button then the little on-board led comes on very straightforward and you can essentially see the time as to how long that takes it's a couple of milliseconds next is the press button and as you can see i found my little button over here so what will actually happen here is if i actually go ahead and press it it tells me that it's pressed and it counts up and if i release it it releases it and tells me that it's count another one and i can press it multiple times and you can see it counts pretty quickly it doesn't actually lose any of them and that's all working on web sockets and that's why the chip is able to originate compute communication from here to the computer or through to the browser because it's working on a websocket um and then there's the magnetometer or otherwise known as a hall effect sensor so i have this magnet over here and i'm just going to basically go close and nothing happens because it's polarized i turn it around and then i can see a line coming here i'm just going to move this a little out the way just do it like this so effectively if i come close to the tip of the magnet you'll start seeing some some values as i get closer it effectively goes higher uh i'm touching it now and it's essentially at about you know 200 250 range and as i basically move away it starts to drop off so right now i'm about half a centimeter away and now i'm about a centimeter away and now i'm about one and a half centimeter two centimeters away and then as soon as i basically go too high it basically falls out of range and then uh disappears so this can be used as uh some sort of sort of proximity to uh see if there is something present that has a magnet on it and then the servo um the servo motor i've got this little sort of line over here and as i basically change this line it changes the directionality of the actual motor and i can sort of very quickly change it around so yeah this was the demo done live and now you've seen it up close but let's get back to the slides because i don't want to run out of time so if you want to know how to program the esp32 and you're interested in that obviously you need to know the c code uh but i got you covered there because i've actually written a course and it's an online course and you can go to it and yes i'm floating around you know yes i'm advertising my course but you can go ahead and learn all about the esp32 there it's got like 20 hours worth of video content and it's uh it's very well liked and very well loved throughout the community so go and check it out if you want to learn a bit about microcontrollers okay but let's have a look at the recipe as to how to get the sp32 or react application onto this thing okay so first thing you've got to plan you basically got to figure out what it is you want to build you want to build a robot you want to build a drone all of these things are completely possible with this tech okay then you go prototype you basically get a board like this you plug in a couple of sensors you plug in a couple of different things you go on online you find a couple of articles as to how to use this stuff it's not hard it really isn't difficult to wire this stuff up and there's plenty of examples out there all right then you configure the chip and you look at my course in terms of how to do that but essentially what you need to do is you need to allocate enough space to put the react application on there right then you program the chip which basically means connecting it to the wi-fi making sure that you've got a good way to basically credentialize it there is basic security built in if you guys want to go tls if you guys want to go and use dynamic dns yeah totally fine you can go ahead and do all that stuff okay but you basically got to connect the internet or connect to the wi-fi you then basically set up set up some endpoints okay and i'll show that to you in a moment then you create your react application okay and we've all done that i'm sure at least once and then you flash your chip and you're done [Music] okay so plan plan in accordance with the use cases prototype prototype with a little basic circuit right then configure chip and one of the more important things is essentially you've got to partition the chip to basically make sure that you can actually allocate space for your react application then you code your chip you connect to the wi-fi create server to your endpoints create a wildcard endpoints react server okay so here's some c code so here i'm pretty audacious basically sitting in front of a bunch of javascript guys and giving them some c-code however i must say right that essentially if you look at this if you've never done c before right you'll be very much harmed because javascript is based off c syntax so it's very very similar all right so you know what a function is you can see the end of you know you can see what the declaration is and so on and so forth but the thing i want to basically put your attention on is this thing over here this little structure okay structure's pretty much like an object in javascript it holds some data and it's got some properties and you can see over here that essentially it's got a uri which is basically api hello world it's got a method http get and it's got a handler which is essentially a callback doesn't matter whether you come from ruby it doesn't matter whether you come from django or express from node.js or dotnet nbc this is pretty much universal you know you always basically have these same parameters and you basically if you understand https you can basically program this chip to be able to do the same thing and then you uh create your handler and over here we can basically see that we get a request object that's a big surprise and it can you know from there you can basically see what the content type is you can see what the length of the content type is you can see what the method was and so on and so forth and then you can generate a response and that's exactly what we're doing here of course we can also basically say is web such a true and then we've got websockets which is pretty cool all right then of course you create your application all right and uh if you've done any sort of react application this is no stranger this is going to be the easiest post one of the cool things that you can do though is you can actually use proxy so i know byte of it sorry picture it's pronounced peter peter and create reactor both basically have proxies built in and basically what that means is that uh when you basically try to get through to the back end which in this case is the reaction right you use a local forward slash api blubber block and the framework takes care of actually binding that to your chip which basically means that you have that whole sort of instant um gratification as a developer as you make changes to your act up it immediately basically updates and shows obviously if you make direct changes to your back end your chip you need to flash that oops so when you're actually considering doing this right you might want to consider some some building frameworks that are out there now you've got four megabytes of flash of which you want to basically give at least one megabytes to your c code so you've got let's say three megabytes left but honestly you want to try and keep it within a megabyte okay so uh this is because you might want to do things like oh there are updates and so on and so forth you want to keep that space for other things so you want to basically try and maintain the application into one megabyte and i find this quite interesting because this is essentially a little sort of thing that i had to go through and people don't really talk about this a lot right so sometimes it's not only about the size that you actually see when you're looking at the actual page that gets downloaded but it's about the size that gets bundled and specifically for this use case we care about what size the bundle of that application is so here we've got a couple of them gatsby is a very popular static framework it produces a hello world basics and no extra you know things at 1.1 megabytes next gs which is my favorite framework to use unfortunately i can't use that at 6.34 megabytes however what's interesting right is that if you have a look at uh spelt kit which is kind of on a similar sort of basis using spelt that produces a 60 kilobyte package so that's useful but that's interesting right create direct app is actually phenomenally large for what it does it's half a megabyte okay and it's quite slow in comparison to the next one which is vita vita is phenomenal if you haven't tried it i highly recommend you go and play with it it's really really good okay um [Music] it basically is a command line utility that will allow you to basically choose which framework you want you can choose felt view react whatever and you know it really works very well it's incredibly fast in terms of development speed and you can choose whether you want typescript or whatever and it basically just gives you everything you want right then and there all right uh if you basically choose react it gives you a bundle size of 136 kilobytes so you're well within the limit and essentially got plenty of space to produce your own application with it however you can go one step further you can also use preact have anybody ever used pre-act before yeah a couple of guys preact is a very small lightweight version of react it's very similar it's got the same apis built by a couple of other guys who kind of thought they could do it better and they bundled the size down tremendously so that is another option okay so that application that i just showed you just now and i'll see if i can actually flash it for the button as well uh that's basically using preact all right the only disadvantage oh sorry the only disadvantage of using preact is that the uh doesn't play nicely with all um packages out there so um you saw the the graph that i used was one that does play nicely you can actually get a lot of things do are compatible but you gotta be careful because some of them just don't work well okay so uh let's have a look at some react code because that's why we're here okay so i want to basically show this to you so if you can imagine right we had a look at the the c code and all that was basically was basically showing us an http server so this is the react code this is the hello world can you guys see that at the back yeah okay or should i zoom in or is it okay maybe you can get the lights maybe possible yeah now i can't remember how to zoom in let's see control plus no it'll be f and control plus in this case nah how about we just do f1 you can go into the presentation uh i'll just go zoom in there we go how's that cool all right so have a look at this really really complex guys hello world's basically got a used state it's basically got a use effect it's fetching hello world it's basically getting the text out and it's displaying that text now what is interesting yeah when is it really really complicated i was kidding okay um what is interesting is you'll notice that this is not looking like normal react code because it's got some funnies in there it's got things like alert look success blah blah blah and that's because i've also bundled in top of this a button and tailwind and i've also bundled in daisy ui so you can basically as part of this whole stack you're not limited in terms of frameworks or dependencies that you want to basically use you can use anything you want have you guys seen daisy ui no daisy away is pretty cool so by the way uh whoever here has basically been introduced to tailwind yeah a couple of guys okay so tailwind is essentially a css framework the problem with tailwind is even though it's fantastic is the problem with it is that it's very verbose right and it basically produces very large uh you know segments of html so daisy ui is essentially a component library that sits on top of tailwind and it basically gives you things like buttons and it gives you you know the dropdowns and everything else that you require but it's essentially a tailwind-based library so something to check out it's very cool so yes so inside this inside this react application the cytostatic bundle i've got a charting library i've got daisy ui i've got react and it's all sitting inside that tiny little uh four megabytes or tiny little one megabytes of flash okay and as you can see very very straightforward if you know how to basically do use standard fetches and standard pushes and posts you're there it's very easy of course um when it comes to web sockets it's a little bit of a more challenging arena but not that difficult okay so let me just show you that quickly so here is the push button one which i'll see if i can get fixed and you can basically see that we create a websocket i'll just collapse this over here you create a websocket okay then essentially you can do an on open and you can send something through to the server okay and then essentially you've got this on message and that basically means that when the back end post something to you you get the event you can basically pass that to json and you're pretty much all good you can do whatever you want from there okay and there's your react code very simple okay um yeah so that's basically that okay so uh there's something that i've been thinking about i just want to sort of you know just gauge this guy with you as well so there's you know potential um space here for community to basically um jump onto a project whereby um we could have essentially have module hardware that comes with an api so if you guys are not interested in in basically writing your own api endpoints um you know we could effectively just say all right well here's here's a couple of leds or here's a couple of buttons or here's essentially a drone or here's a toy and you go ahead and basically figure out um how you want to present it i'll basically give you the documentation the end points the apis and everything else like that that you need to say here's your video feed for your drone here's your roll pitch your up down left right and go ahead and basically produce the react application of your dreams so something to think about there of course this would have to be modulated we have to basically consider things like package managing and and so on and so forth a common api format you want all basically sort of standardized and of course you would have to have excellent documentation because community projects don't work unless they have good documentation and then i also am a firm believer in open source and freeware okay and i do believe that people should essentially put stuff out there for free but i'm also a believer that people who work hard should be rewarded and i don't believe that guys that uh you know slave over you know two three hours a day should never ever get enumerated so you definitely want to put in some sort of marketplace or some sort of mechanism for developers who are actually putting an effort to actually get remunerated so that's kind of what i'm thinking with about now i haven't really sort of fully sort of thought it through but there's i think there's good potential in this space so [Music] yeah that's uh that's it okay uh thank you very much i hope you enjoyed it yes questions firstly thank you i've never had a clear understanding of micro front ends and this is this is great i now understand with a micro front end not quite the same thing but i mean it sounds interesting if i wanted to start playing with any chip yes what's a good retailer to go through how do you recommend buying a car good question so i just would say so that the guys over the microphone can well the guys that aren't listening to this audience can hear it the question was how do i basically get one of these esp32s where can i source them from how much they cost you know and so on and so forth the answer to that is very simple you buy them on aliexpress for under ten dollars okay they're like literally their cheapest chips literally okay uh you buy them on aliexpress for i mean these most of the trips that i've got here are essentially five dollars each okay you can buy them very very cheap and um sometimes you get box sales sometimes you get deals etc etc the only problem is of course you have to wait because it's aliexpress but you can also get them on ebay but they're a bit more pricey you can get them from amazon but of course you're spending about fifteen dollars a chip there um so if you're willing to wait aliexpress is definitely the way to go and then once you've got them there's lots of different frameworks you can program them into you can program them in the arduino framework you can program them in something called um something that i'm basically basically looking at the moment it's called zephyr which is quite an interesting it's essentially a cross-platform application platform for microcontrollers programs stm32 esp32 blah blah blah blah blah blah a whole bunch uh but i'm using something called the idf which is the iot development framework the internet of things development framework and that's essentially the s official framework from espresso and if you want to learn how to do it have a look at my course i'll go through it with you in detail so yeah any other questions yes if you had memory limitations with anything with the c server or tls or something like that so no so there's actually an embedded tls server built into the chip and you can basically activate it okay and so yes and you can basically embed uh certificates in there no problem so you can secure it absolutely um i have i basically last year i basically well during lockdown i spent about a year creating a product it took me a year to fill up uh one and a half megabytes of memory in c code okay and that was a very very i mean a lot of stuff on a full full graphics application and everything else like that um yeah well i'm thinking about it and while i'm answering questions i'm going to turn this beast on here and actually see something okay yes any other questions yes once more here you need a frenchie to to say say it's called wheat wheat my apologies i get that wrong every time we taste the new one okay okay thank you for the direction that's all good um and second thing um have you tried playing with russ victor yes yes i have and how supported it is oh man i was trying to lose the willingness to live honestly i'm trying to get a little sort of blinking light to work with pain in the butt um it's not impossible but it is on the way but it's very rudimentary at the moment i think it's going to get better yeah but yeah to that question um expressive systems have made a fork of llvm for rust and they've got their own stuff that hasn't been integrated into my mind but you can't play with it you can actually do experimental work with it i have done some work with it uh but my rusty my rest is rusty and then going into an embedded system like this it's quite a jump it's like wow yeah i mean you know considering i've got a lot of other things to do in my life yeah so i guess any other questions yes over something more broad across the device well yeah so uh that is a good question so i would basically say that this is very good use case for one-to-one sort of applications like controlling a drone uh those are the sort of frameworks where you've got the sort of the cloud solution with mqtt and if you guys don't know what i'm talking about message queueing blah blah something it's essentially a very simple sort of communications framework and it basically allows you to talk to multiple chips the thing is with those particular platforms is usually you're running a host of chips or you're basically controlling a fleet of chips you know um whereas this would be sort of more one-to-one sort of direct communication with the chips so yeah it doesn't mean that you can't have both actually because um you know think about it like if you're in if you're installing let's say for example solo system a solo a solar panel cell something on somebody's roof okay um you want the option to be able to a set the wi-fi b basically set some basic parameters uh you know and do a whole bunch of stuff and you can use the esp as a as a web server for that point of perspective and then once that's done then essentially you can send messages uplines to the other cloud services after that that answer your question cool now i just want to show you something quickly guys so this is the device that i've actually been producing so what you're actually looking at is a react application okay and it's touch screen okay and uh what this actually is is it's getting a list of all the wi-fi devices that are actually in the area this is actually a list of all the access points and uh it's going to be difficult for me to show you from this end because i have to turn myself around but i can effectively sort of pick on one let's go ahead and say i'm looking at uh let's say i'll actually just press one so basically as i move around that that graph starts to basically decline or increase and with that line i can basically determine where it is so it's over there somewhere yeah this device also basically checks it to see if anybody's trying to hack the network it'll basically pick up wi-fi pineapples and basically you know de-authors and it can actually track them as well so if somebody's trying to deal with the network that can actually find them cool any other questions is that it all right good well i appreciate your attention thank you i hope it was at least interesting i'll take the button and then i'll i'll just play it over there if you want to see the button being messed with

Channel: Mair Swartz

Views: 9,328

Keywords:

Id: R9n32nxrzug

Length: 34min 10sec (2050 seconds)

Published: Thu Apr 28 2022