ESP32 / atPlatform Step 8 - Sending & Receiving Data with a Flutter App (ESP32 & Flutter)

hello So today we're gonna be uh developing an app that will be communicating with the esp32 um except for this time we'll be using flutter and it'll be communicating with an esp32 engine encrypted so um here I have the esp32 already kind of set up for you I've uploaded my keys through the data folder already I've set up my constants I've included all of the necessary libraries and packages as well as uh successfully pcam authenticated I've also added all the library dependencies necessary for this to work to get this set up all you really need to do is head over to GitHub or GitHub at sign Foundation and head over to the readme here and then follow pretty much steps one to five so over here to the table of contents step one would be the prerequisites which is get an ad sign and esp32 then setting up your project then uploading your keys then building and uploading your project and then this is the important one pcam authentication so if you don't have a similar output to what I have here on your esp32 then I'd recommend following those steps before you move on so uh this is kind of like the plan for today will be uh here will be first sending some data to the esp32 from flutter so flutter will send some data to esp32 and we'll do the same for the esp32 to the flutter app um the reason why we're doing this is so that the shared key will be initialized first because the esp32 as of right now April 26 2023 cannot initialize uh any of the keys for that's happened so it's really important that the flutter device sends the data to the esp32 first so let's just go ahead and get started here I have a BS code open I'm going to open a random folder so I'm just going to go here and just name it EF underscore flutter and that's just an arbitrary folder Name by the way you can name it anything you want as long as it's empty um then we're going to go ahead and use at app so I'm going to show you how to first get at app if you have Dart downloaded which I assume you do and if you don't have dart on your PC then you can get Dart by installing flutter Dart comes with flutter so once you have that you can run this command Dart pub globalactivate at underscore app just let me go and do not disturb and once you do that you should have add app and then you can do at app create and then you specify directory in this case I want us I want to create an at app in the empty folder that I'm currently in so I'm just going to put a dot and it's going to create your ad app project for you and while that's happening I'm going to open my iOS simulator so we can get app development going sooner all right and that's our at app created so I'm gonna go over here to the Iowa simulator and go to device I think this device it was window and stay on top so that when I focus on vs code my iOS simulator still stays on top of all my windows which is really useful then I'm going to type in flutter run here and then it'll run the app our template app for us on the simulator so that we can check that everything is working just fine um while that's running one thing I forgot to mention is that you'll need to add signs for this which I think is pretty obvious so you can get an at sign from my.atsline.com go and you can onboard them with either with our CLI tools or just through one of our apps like the like atmosphere Pro or at wavy that you can download either on your phone or on the Microsoft store if you're on Windows or the App Store if you're on Mac um but once you have that you should have two keys so here what my keys look like I have a lot of at signs but the two we'll be using are Jeremy underscore zero and tasteless banana okay and it looks like our flutter app successfully booted up so we're gonna onboard an ad sign here so I'm just going to press this onboard and then upload backup key file and I already have my keys uploaded to the simulator so if you don't have this you can go ahead and drag your key file into the simulator like this and then I'll give you the option to save here I'll just say replace and there you go your keys are uploaded to the simulator you can go back to the app now and select those keys and then when I open them you'll see that the app proceeds and onboard successfully there you go we've successfully onboarded our at sign Jeremy underscore zero so um back to my diagram here on our esp32 we're going to have tasteless banana and on our flutter app we're going to have Jeremy underscore zero the first step is to have flutter write some data to the esp32's ad server so we're going to go ahead and start writing some Dart code so this is the current screen we're looking at here this is what the code looks like so you can see here current at sign is at client.getcurrent at sign sorry I had to use there we're going to add a button and on pressed we're just going to pass in an async anonymous function and as for the child we're just going to have it be a text widget um with some text that says do thing so if I press R here in the console it's going to reload my uh simulator and I should see the button pop up just like that so if I press it it's not going to do anything because we haven't written anything in the function for it to do anything so now that's our next step um first thing I want to do is head up here um and just so I keep things kind of like simple for everyone actually I'm not going to do that sorry just keep things simple I'm going to work up here for all the things that we don't really need to run every single time that we click the button so I'm going to change this to final it's because I don't plan to change it later on I'm going to say constring um esp32 is equal to tasteless banana so we're gonna have some const at sign strings here so this is the USB 32 zat sign and I'm going to have another at sign um I'm going to name it final string flutter is equal to at client manager I'll say at client I get current ad sign like that and I'm gonna have the add client object here upload as well through the acline manager select that and we'll we're getting an error because string here is not uh is is nullable so I'm just gonna explicitly say it's not null and this would be something like at J or underscore zero and we'll also need to specify namespace so flutter our Dart SDK forces name spaces so here in namespace I'm just going to say soccer zero traditionally namespaces are are at signs so you need kind of need a third at sign but at the end of the day is just a string and then I'm going to build two at keys that we're gonna work with so the first at Key is right here it's shared by flutter it's shared with esp32 the key name is num and the namespace is soccer zero so I'm going to copy this and I'm going to bring it over to my code here and write a comment and I'm going to construct this at key so I'm going to name this name it final at Key I'm going to name it shared with ESP esp32 is equal to at Key new Accu object it's going to be shared by the flutter at sign so flutter it's going to be shared with the esp32 add sign just like that and then it's the namespace is going to be soccer zero and then the key name is going to be num I guess I should have said this in order so shared with is USB 32 the key name is num and the namespace is soccer zero and then the shared buy is flutter and then we end it with the semicolon and then um now we have to build the other key so that this app will get it but we can skip that step for now we're just going to focus on the first step which is writing to the esp32's ad server so now that we've built this key we can go ahead and just write some data it's as simple as at client.puts and then we pass in the shared with esp32 at key that we've created and some value like in its and then we see that here that put returns a Bool and it's a future Bool so we're gonna have to use a weight here to get the Bool and then this is a success so I'm going to say write success and then we'll value success so let's go ahead and reload this and press the button and see that oh the right success was true um maybe you're not a firm believer of it yet but we're just going to take that word and say that the right was successful okay um so let's go ahead and write the esp32 code now so the next step is for the esp32 to not receive the value just yet but to write some value to the flutter app so here I have my esp32 plugged in and C plus plus code open after PCM authenticate we're going to write some data so here I'm going to say const Auto key is equal to new or maybe I should name it Accu I'll name it shared with flutter is equal to new at Key the shared buy ads or the key name is the first parameter here if I look at the Constructor here the first one is the key so we said the key was num the shared buy at sign um we haven't specified those ad signs yet this is esp32 and we also have water and the flutter at sign was at JM underscore zero so the shared buy at sign would be shared by esp32 and shared with letter I believe that's correct they want pointers so that looks good to me we just need to change our variable name here as well before we forget um we gotta change this one as well so now we have this at Key which is just which is essentially just an object specifying this this uh string here um we did forget one thing which is the namespace so so with the namespace we do shared with underscore flutter dot namespace string or the arrow function because it's a pointer equals soccer zero like that and this was originally a constant variable so if you run into an error with this what you need to do is go over to platform io.ne and update your client to 0.2.4 and then you shouldn't get an error anymore hopefully um right now I'm getting an error because I made this const so we're just gonna have it be Auto there we go um now our next step is just to write the value which is as simple as at client put at Key shared with flutter and we're going to have a value of init and it wants a value not a pointer so we're going to pass in the value so now I'll hit upload and monitor and then I'm going to put my esp32 in download mode by holding down Boot and enable then I'm going to let go of the enable button while still holding down the boot Button and that'll put it into download mode where the esp32 will then upload the code all right I successfully uploaded and it is connected to my internet it's connected to the app server cam authentication was a success now we'll see how the writing goes all right it looks like we got a response of 98 which is the commit ID so that is a very good sign which means that we have uh uploaded the value so now let's move on to the next steps so the whole goal of my app here which I guess I should have explained in the beginning is for the flutter app to send the data esp33 receives the data increments it by one and then sends that back to the flutter app and then the flutter app increments it by one then sends it back to the esp32 so here's what's hap yes that's pretty much what's happening flutter sends a zero the esp32 receives a zero adds one then sends it out to flutter then flutter adds one and then flutter sends the two to esp32 adds one it becomes a three and then flutter receives the three which is what we're going to program now so we can start with step one which is esp32 receives the value and increments one so here we have the this key is primarily used for sending but we also need a keys primarily for receiving which is going to look something like this esp32 num.0 at flutter so this is a key shared by flutter shared with the esp32 so let's construct with this key it's shared with us that's going to be a new ad key named num it's shared by esp32 I know it's shared by letter and shared with esp32 then we also have to edit the namespace to soccer zero select before then we have to get the value so that's as simple as at client get at Key and then we pass in the key just like so and we can use string to end to convert that number and then we can store that number here num like that and then uh even 32 underscore T like that then let's get a new number new number or new num Z equals to num plus one let's print out these values so current num is let's do a new line new num you know um before we print that out though um we would want to write the new value so I'm going to put that after here and instead of putting a knit we're going to put in the new num which we would have the two string first like so so just to recap what just happened so here we have to construct a key for sending or forgetting sorry The Next Step once we have the number we get the new number that's uh pretty self-explanatory code then we construct a key for pudding and then we put it um and yeah so um the problem with this right now though is that if we get the value which we've previously wrote over here on this side that was sent to the esp32 it'll just get the word init and it'll cause an error because we're trying to convert this to an ins which is not what we want so let's go back to the flutter code and let's uh let's send an actual value so instead of sending an init let's send a zero and then let's let's do uh let's do a hot restart so I'm going to do shift R in the console which will do a hot restarts then we'll have to onboard again and then let's press the button looks like the right success was true so that's a good sign and now let's run the ESP code so I'm going to upload and monitor but my esp32 into download mode and if all goes well it'll get this number this will return zero and then it'll convert it to an inch and then we can add increments it and then send that data back to flutter which should be a one because we incremented the zero with one okay all right it looks like we got an error so um usually this happens when if it just like interrupts itself randomly it's probably a Wi-Fi issue so if you have like a spotty connection it just likes to stop that's not a good sign we'll let it run one more time and then maybe I'll try upload and monitor again oh there we go you can encrypt the data and there you go um we got the current number from flutter so this is the zero that flutter sent and then we sent it looks like we successfully sent the one so now let's write some uh let's write some Dart code to receive that one so I'm going to go ahead and comment comment out this put in code so this is put code this is step two technically so we're gonna be running step one again or step one in flutter so now let's write some get code first when I construct the key so this is the this is the the put key let's write the get key which is um the get key is shared with us so at flutter key name num soccer zero at esp32 shared with us it's pretty much the C plus code but you kind of have to switch your perspective around because now you're in the respect of the flutter and you're saving it from Dart so it's shared with flutter which is us because it's get current at sign and then it's shared by the esp32 and then the namespace is Locker zero and the key is no because we've constructed that all we have to do is do add oh wait at client.get share it let me just pass in an app key just like that and you'll see here add value returns or get returns an add value so all I want is the value so I'll just type in dot value here at the end so this is an add value object and then calling dot value will give you the string so what I want here is an INT so I'll say num is equal to this but then we want to parse it like that so dot value returns a string and then we parse it within.parse so then we get an integer and then we'll say new num legal to num plus one and then Let's uh print current num here's our num and new num is unum let's do a hot restart all on board and we'll press the button and you'll see that we get the one this is the one from the esp32 and the new num that we want to set which will be in the put code here so instead of zero here we'll put in new num dot two string and select that I think we should be good I'll put this code after just stay consistent just like uh in our USP code so now that we've set the tube back to the esp32 now it's the esp32's turn to take that number and increment so I'm just going to go ahead and press the enable button which is the same thing as reset on the esp32 so there you go it you'll see here that it says power on reset so that's what kind of caused this quote-unquote error message and it'll start running the code again which which is just running the setup uh block again on the ESP so hopefully we don't run into some errors hopefully my Wi-Fi holds up all right and uh that is not what I wanted to see if it received a zero hmm okay well that was weird Let's uh let's run the flutter code and see what happens so current num is one new num is two it should be getting this it should be getting two now and sending out three so let's let's upload and monitor again just in case okay um I think I know what's happening so after we do the put we didn't do a sync so it's been writing to the local secondary this entire time so to fix this um I think you'll have to do at client.syncserver.sync let's do a hot reload hot restart sorry so when uh exp 32 cents a one so the flutter will receive the one and then make it two and then send that two to the esp32 and then we'll have the esp32 receive that too and then increments it to three I think that's what's going wrong all right there we go um so I guess that was the problem here uh esp32 received that too that the flutter did send then incremented it into three and then sent that three over to flutter so now if I press this button here flutter should receive the three and then increments to four and then send the four to either esp32 so press the button here and here you go we do receive the three and now we sent the four and just to show you that I'm not lying we'll receive the four here and then send the five it's a flutter there we go the the code is working so just go just going back to the design here we had um the flutter is sending a number to the ESP the ESP increments the number then sends that new number to the flutter and then flutter increments that number send it to the ESP and and it goes on so the way you do this is you have two shared Keys involved so one shared key lives on the esp's ad server the other one lives on uh flutter apps at server and then this key here um the reason why it's kind of like like that is because on whatever value this key has in here it's specifically encrypted for the uh the at sign that it's shared with so in this case vsp32 is sharing data with the flutter so that therefore um the encryption key the encryption that's happening in the background um this is this value 0 or whatever values in there is specifically encrypted only for the flutter app and same with flutter the zero is specifically encrypted only for the esp32 that's why there are two shared Keys involved in Sharing data between those two I also edited a little bit of code kind of off camera um so I just took the keys that we had up here in our build function and just put them inside of the on pressed function so this uh get key here I pretty much just moved it here same with this put key I just pretty much moved it here and uh yeah that really ends our tutorial um I know some students were struggling with uh flutter and ESP so hopefully this helps and also um doing gets and puts at the same time on both the app side and the ESP so I think for that issue you'd really want to make sure that you're not mixing up your shared buy and shared with um if you want to edit Keys the shared buy at sign should always be the same at sign as the ad server or the client

Channel: Atsign

Views: 17,378

Keywords:

Id: L24F-SwRC_s

Length: 27min 49sec (1669 seconds)

Published: Fri Apr 28 2023