AsyncAPI Let's talk about contributing, 24 Nov 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Let's talk about contributing - AsyncAPI & MQTT Part 2

Description

AsyncAPI and MQTT
https://github.com/AceTheCreator/Virtual-houses

A

B

I hope I'm streaming on the right, Channel.

B

Which am I.

A

Yeah hi everyone, um I'm Haze and in today's video in today's live stream, I will be oh wow. Why am I acting let's see if I'm doing a different live stream so to this live stream? Is it Con? Is a continuation of the previous um live stream? I did last week, which is um using the Sync, API and mqtt to power, my virtual building?

A

um So if you didn't watch the first, the first part of this live stream. I would um advise you to you, know, watch the first part of this live stream. Well, take the second part before I get started um going to like give you a summary of what the first part of this live stream is not about, but I eventually covered in this first in the first part of the live stream and yeah. The second part of this live stream would be me eventually. You know completing um what.

C

I'm building like.

A

Power in my virtual buildings, so let's get started um so. Firstly um Let me. Let me give you a quick summary of what I eventually like did in the first um part of this live stream right. The first thing in the first part of this live stream. I eventually was writing how my Escape, by document, where I, was writing out whatever it is, I needed for my server right, so I'm.

D

A

Share my screen and I'm gonna show you what my HTTP document looks like and working through that what you guys through every single aspect of the documents sharing my screen, I hope the restroom. Doesn't you know.

C

C

um I hope you guys.

A

Can see my screen I'm gonna zoom in the little bits.

B

I hope it's better this way, but it's more visible.

C

One more time.

A

Okay, so, as you can see, I have my AC API document, uh where um basically just writing out what I want my.

C

A

Should be so, firstly, you can see I have the escape by version I'm using I'm, using the version. 2.4.0 um and I have this the subject here that says info, which is basically uh the information about my.

A

Are you kidding?

A

Okay, so I have my info objects, which is basically which basically holds all the information about application, which is, it says, which have a title of leading mptp, which is that so I have them in the description. I.

C

Have the license, of course, and.

A

Yeah and the servers actually has another section, which is development, because right now this is a virtually a development server and has a.

D

A

Which is test the mosquito test URL, because we are using mqtt as our protocol, but you can see it is specified here now we are using mqtt as a protocol. We hold up the description um which the description, which eventually says mosquito program for development. It could be anything we have also the variables not going to go in depth. um Yeah. We have the next section, which is channels so uh so we have the first channel, which is um you need balance requester, which, basically, from the description you can see.

A

This topic publishes an event demanding building units balance um so which is which takes a a subscribe. So first thing, I think in my previous, in the first part of the section, I got confused a lot about. um If this is published, this is subscribed when they use publish energy subscribe, so I'm, currently working on I I'm, currently working on the yeah, so I'm, currently working on this short video um to eventually explain the old concept of publish And subscribe, yeah in this kpi and yeah. So we have. We have And subscribe.

A

So when you are writing using API documents- and you are kind of confused, uh should this be published, should this be subscribed?

A

um So basically, you should be looking from the um from the view of the the application or- let me just say it should be looking from the view of the client. So whoever will be communicating with your application. You should be looking from that perspective to determine if your application is subscribed or it is published right.

A

So I have subscribed here in this unit balance requester, simply because my application right, my clients or my buildings will eventually subscribe to this channel right to receive the message or to receive an event that says uh I'm requesting for your balance right. So that is why we have subscribed so in the previous video I was putting publish in which I eventually like correct, so I was put in public, because I felt okay, my application should be publishing right but yeah, because my server is publishing a message all right.

A

That says you need to balance requester, but it should be subscribed because whoever is reading. My document has to subscribe to this particular channel to receive the message that says: oh, you need to give me your um balance right. So it is that that's why we have subscribed and you can see in the summary it says this triggers a request action for each building about the balance right. uh So we have the operation ID. We have the message message and you can see. The message is actually a reference to this component object.

A

We have yet in which I have the messages, like balance, request, a message, name and and different um summary of of what we're trying to like achieve. We have two messages. Actually we have like balance requester and we have a light. Measured, um not gonna, go in depth, so at the end of this stream, I'm going to like share a link to the um source code. So if you want to like go through the source code later uh yeah, so that's basically uh the unit balance request.

A

I'll have another Channel um balance responder and you can see this is a publish. This is a published. This is the publish right instead of a subscribe, like we have subscribed here. We have a publish here simply because the our client would have to like publish the message to this application because from the from the name it says you need balance responder, which you might feel or should that be a subscribe. Eventually, it should be a published because we want our application or sorry.

A

We want our clients to eventually like publish a message whenever they receive a request, whatever they receive um a message from the unit balance requester. So whatever application requires a balance, uh our client is subscribed to this particular Channel called you need balance requester. We also want them to give us the remaining balance. They have right, which means each video not like publish the message with the remaining balance right.

A

um We also have another Channel called unique balance of data, which basically means once our application receives the remaining balance from each buildings. Right. We do some logic behind the scene, which eventually updates the the remaining balance of of each building right so, which is, is subscribe right so once the application does the whole Magic behind the scene and updates the current balance of each building right.

A

It has to like publish it also sends the remaining balance back to each building, which eventually means each building has to be subscribed to this particular channel so that we have the Subscribe um stuff here.

A

So basically, one more time once you're confused about when you use publish And subscribe, you should be looking at it from the angle of the client right. So just like the way, just like an open API. When we have um your schema written out and we have get request, we have post requests. We have put on another kind of HTTP request when we have when you have a get requests right. You are not basically telling um you're not basically saying your server is between the get request.

A

Right, you're, basically saying your decline, who would be consuming um the information from your server would have to make a get request to this particular endpoint, so that same thing goes with Json kpi. So whenever you see is subscribe, um whenever you see a subscribe, um a subscribe action right in the in the specification you already know, oh, when I haven't subscribed, which basically means to my client, would have to like subscribe to.

A

My application, so you have to start looking at it from the angle of whoever is come zoom in or whoever is interacting with your application.

A

Balance responder. We also have the unit balance of data right, which is this as I said earlier, so that is, that is the three channels we have for our application and yeah. We have a couple of components which have gone through uh messages to Webster messages. We have like balance requester, we have lunch but like measured right and you can see each also has um some payload right. You can see for the live balance requester. We will have a string as a type of payload. We are you know using.

A

uh We have on the light, measured um message components you can see. We have not just a string, we have an object, which means we are expecting an object, and this object has some properties right, which is a building ID, um an integer, a description then also, so we have a repeating ID as a facility, and we have a unit, a second property so, depending how the type is an integer I think it should be an integer, not a number, so foreign of an integer so yeah.

A

So we add those two properties for the light measured. So, in order to make this much more fun, so I'm gonna copy the code of these. um This document and.

D

I'm gonna use.

A

One of the amazing tools eating API has and its ecosystem, which is the escape AI Studio, which which gives you so much capability right from previewing your code documents in real time. You know interacting with it and saying um what your code looks like. Your specification looks like in a preview format in real time, so also like generating um your code right, generating code for from using API document, also in real time, which makes so much sense.

A

So, but we are not going to be generating our code from the studio, but we are going to be using the studio to see what our skpi document looks like so I'm gonna, open up Studio foreign.

A

Okay, I'm gonna share this. My screen for the studio.

C

Okay, let's bring this out.

A

Why am I having.

A

Okay, okay, so I'm sharing my screen for Studio.

C

How do I stop sharing okay.

A

Now I have my studio um brought up, so this is Jason by Studio. Okay, I need to make this bigger.

A

So this is the Sync API studio and now I would have to. You know, replace this with my Sync API document. As you can see immediately I pasted this um document in the studio uh you can see. I have a real-time preview of what's. My document is all about right and you can see we have the title.

A

We have the description, we have the servers and you can see I, it doesn't say the URL variables which I can expand and you can see all all the things have like spoken about when I was explaining the document for you guys I can see, we have the operations we have the subscript subscribe of population operation, which means.

A

Eventually tells you subscribe, so if you want to use our application to have access to this particular operation, you have to subscribe and you can say it hasn't it well documented we to preview our specification um yeah. So that's basically one of the things um Studio can do for you makes so much sense and yeah so I'm going to like stop sharing um the studio and go back to vs code, where we'd have to like generate the code from our Singapore document, using the sync repair code, generator.

A

A

um Okay, I need to share my don't you share my screen. Okay, I. Don't know why I can share multiple screens.

C

On on rostering I think, that's the thing right, no shame at the prescribes, so you.

A

C

Just like switch from one screen to motor.

A

So what we have to do now is to um generate our code using the code generator so we'll be generating a node.js code so and we'll be, oh, so sorry uh we'll be using this in kpi generator to generate our node.js code and in order to do that, uh I'll be using the Escape Pi generator which firstly before you can use it. You have to like install it.

A

I already have it installed, um so I'll just start go ahead and just generate the code right, so I've just paste the code and what you guys should so we have is called AG, which is give a generator um I already. Have it installed. You don't have installed. You have to install it using the npm Excel Global at the global package.

A

um Av and I have to like specify the parts to writing API file, which is eventually in.

B

My current folder.

A

uh Yeah so I'm specifying I want to use the executive band node.js template here on code and server. So we have. Our server is development.

A

We have, we don't have, as you can see here, we don't have um a production server where we developed my server, um the output. So what you want the code.

B

To see in the server folder.

A

And also we already have the code that will eventually generate our node.js code from this executive specification, so I'm going to click on editor and I hope. This works.

A

Okay, so I have to commit changes I'm going to open on visual for this right.

C

So that's uh because if.

A

You don't commit your changes. She would eventually get an error.

B

C

B

C

B

C

A

So why we wait for this right, um I feel like I'm, confident to eventually do more of live streams like this, which eventually just will be me. You know jogging some pretty examples using a sec API and whatever protocol I feel like using from Kafka to Rabbit and kill to what sort of protocols out there you know just doing a live stream, I'm having fun and eventually. Maybe, if I see someone down to join me in the live stream, we could eventually do it together. Right phone like.

C

Learning and making mistakes.

A

On this live stream.

C

I thought it's shitty.

A

So it's taking much more time as expected.

A

D

And that reminds me I.

A

Have to you know: open I I already opened an issue right, so maybe I could open a pro request for that. Also myself, because when you're generating your code, I feel there should be an activity loader that tells you your code is generating, instead of just looking at the dummy screen, I'm wondering.

D

If my internet is.

A

Shitty up- and you can say we- it was successful. We see we have this done some couple of stars. That says our shining project has been generated. As you can see, we have a new folder called server, which is yeah right. So what we are going to do is um change um the directory to server and install the packages.

B

Yeah install just to install um the necessary packages for our application.

A

Thank you. uh So we have.

A

Yeah, so we have these packages so we're gonna run um we're.

D

A

The server to ensure everything you know box, as you can see, we have a package Json that says we just have to like do npm start to get our cassava like running right, uh foreign.

A

Running right because, as you can see, okay, let's make this bigger.

A

Yeah, so we have our server running as you can see, we have um um some some messages so which the first one says the publicist or subscribe, publish on.

D

Now I'm going off.

A

Something it did right so because, if you look at the AI um channels, like this device specification, the document you wrote right for our server, you can see you need to balance requester. We we said subscribe right when we generated our code and we started the server you need balance. Requester is publish, isn't, isn't that confusing right? Why should it be published in the console and in the in the in the in the specifications document? It is subscribe right.

A

What changed so like the way I explained to you guys earlier that the document is basically a reference in which it is the document that we tell whoever is consuming your your. uh Whoever is communicating with your with your server what they would have to do to like, communicate with the server successfully right, which means what I said before Universal question is actually publishing, like it's publishing a message but from the server, but that doesn't mean the clients should be publishing right.

A

So whenever our server is publishing a message, it means our client would have like subscribed to receive the message- and this is what's happening here. So in the documents we asked saying, whoever will be communicating with our um application right or our server we'd have to subscribe to receive.

A

Whatever message is coming to this universe, so which eventually means to our server we are publishing, which is that we have publishing why the document, the sigma document is just going to be what the client or whether I'll be introduction to application, will be reading to give them a sense of understanding how to communicate with your application. So don't get confused. We have publisher, we have subscribed here.

A

This is basically just telling without we consuming your application or whether we're communicating with your application would I feel like subscribe to receive this message, but in your server we are publishing right, so I'm going to create a short video on how you know. I said earlier, our Pub sub boxing fcpi to clear some hair, because even me sometimes I get confused and you can see this is our building implicity API version, one is ready and MPT adapter is connected, so which means we are going into the right direction right.

A

The phrase button is working, so the second thing I'm gonna do is also like start Decline, and so, if you haven't watched the first part of this live stream, so you wouldn't see our batch I'll begin. So I'm gonna split this console this terminal um yeah, so um kind of go back to the clients.

B

So we select a client.

A

And I can do like npm at a few yeah I'm.

D

Gonna start the.

A

Clients so I for.

B

Some reason I've, like changed my.

B

A

So I'm, starting in server again.

C

A

Ass, let's really started server, so I'm gonna show you how the virtual Building looks like what we are trying to like achieve.

C

A

So, eventually, this is what we are trying to like achieve right. This is our virtual building, as you can see in our building. We don't have any like. Where is dark, uh what we're trying to do is just to power these buildings right and we already have our server up and running, and what we have to do now is to start communicating with our server right in order to like power, this building, so I'm gonna stop rain and um yeah. So I'm gonna go to the share.

A

The code go back to vs code right and we start doing some magic.

D

So what is your stock.

A

Toying some matchup vs code right, um the first thing we have to do in order to communicate with our server, because our service eventually like using mqtt and as far as I know, you can't like use mqtt on on the browser except you, you know, serve your MPT over websocket, which is what we'll be doing.

A

So, in order to do that, um let's close a couple of tabs okay. So we are. We are now like trying to like work on the on the clients yeah, so just ignore these codes. This is also um reactory stuff that I use for the battery store for the client for the buildings. So what we are trying to do actually is to power the buildings right, so I feel.

B

D

A

Have to do is to install um a package called um react: power mqtt, which is a really nice, um even like a really nice library. To like help you use mqtt of a websocket right. So we are going to do that.

A

I'm going to stop my server right and my clients right now so, but I have to do just uh npm.

B

Installer apps.

C

B

Why do I have to force it or something? The dinosaur reacts.

A

Okay, I feel like frozen so.

B

Hey, of course,.

A

D

A

Have this Library installed now, once we have our library installed? um No, we have to like start choose in the library and the first thing um we're gonna do, let's just start using this library is to import it right. Of course, we have to like import the library so.

B

I'm gonna say um Imports.

B

B

A

Nxtc so I'm going to share a link to this library because in case um you want to give it a try.

C

Let me see if we can go to the link.

B

C

A

This is gonna, be the link and yeah I'm sharing the.

C

A

So this is the name of the package I'm using just in case. You want to give it a try. um It's called rap battle yeah, so we have our package imported right. So the first thing we have to do, according to the documentation of um of the library, is to start importing it right so statues on it. Rather.

C

um So the first thing I want.

A

To do is like initialize the package itself, so I'm just going to.

B

Create say, let's say, cons um units is going to be a function right, so we initialize package.

C

um How do we have these of the suggests.

A

So now we have this function. So how do we like initialize this um package? So we do this by saying the.

B

Credit variable code: let's say: what can we call it.

A

Let's just call it I'm terrible as limit, so let's close.

B

Let's just call it C right comes, C is equals.

C

Oh I missed something.

A

So, let's say currency is equal to MPT, not connect right.

B

But sometimes I connect uh to mqtt broker.

A

um So from the library we have to like first pass the URL, please, as you can see, we actually test a mosquito URL. So just.

B

D

A

The next thing we.

B

Have to do is specify the parts. um Well, let's just say, is important h81 just from the documentation.

B

A

The ID, the negative identifier of I'm, using so let's just say npt.

A

This is basically what the dog say. So if you are wondering what I'm doing you can totally dogs um react power? Dogs for your friends um yeah, so we are taught like pass two additional functions which is.

B

And collect on connection lost connection lost and, um as it arrive.

A

Right so we already have this, so this is basically what we are trying to do, but now we have to trigger this right, so I'm.

C

Gonna create some.

A

Oh, what am I? Oh no power is out.

A

A

A

Yeah so that um so sorry guys um there was a power outage and yeah I got a backup of processor code um yeah, so without further Ado. um Let me continue sharing my screen.

A

Yeah so, as I was doing earlier before, the power went out.

A

C

Was putting these.

A

In the wrong place should be inside our app.

B

B

So you're correcting my mistake. Sorry guys.

A

Yeah, so we put it in the right place and what we have to do next is actually let's discuss, so all you have to do next, um based on documentation, is actually uh try to trigger uh no, firstly, we have these functions right connection, loss or connection all right that we haven't created these functions, so we have to put these functions and see what they actually do so based.

C

On the documentation.

A

um Risk or collection losses when clients lost connection right, so we have to like create.

B

These constant.

D

On connections.

A

Arrow function, um so it says it takes a response, objects. The.

B

Response argument.

B

Objects and arguments.

B

uh Then we have some code says if um response: okay, it's got error code.

B

This is not equals to zero and let's just do some console clock right so.

C

A

This will have to show the error.

C

A

So this is strictly from the documentation right, so I think in order to make this fast.

C

On Instagram copy, most of the codes.

A

For the docs um I think yeah, so we have this on collection loss function, so we have to create another one for whenever the message all right right, um then you have to also create another functions because.

B

On messenger right.

C

B

C

A

An argument of message.

C

A

H yeah, so the first thing we want to do is try because each there are different topics right, so we have to like. You know when uh a message is coming, so we have like no, which topic. uh The message is coming from right uh so because, based on our specification.

C

uh Which is here.

A

So we are going to be expecting a message from unit balance requester because we are subscribing and um data so which means we are going to like have I want to be expecting we're going to be expecting two messages from um two topics: right so top two channels so which is what we are going to do. We have to like specify that so not to do that, let's just create an array to like um hold the topics right. So, let's just say: let's create a.

B

New constants, um which is going to be called, let's, say, profit so from.

A

The topic we have the first one where we'll be explaining a message from which is called unit, balance requester and copy. This.

B

uh Yeah so we're gonna.

A

Get the second one also, um which is called Unit balance of data.

A

That's how we have these two topics already like defined and what we're gonna do now is, so we can so we can use those topics here on message arrive. So whenever a message arrives, we already know which topic each a particular message is coming from right. So the first thing we want to do is also say: if ah so, we have this Auto suggestions, I think we're just gonna use it.

C

uh Oh okay, sorry, foreign.

A

um So, let's console this log, so we have to like we haven't initialized this yet so we have to like initialize it immediately. Our uploads, so I'm gonna be using the use effects, function.

B

This do you see flat hooks um these effects.

B

uh So I'm just gonna try.

B

A

So we should, we could work like this I feel so we're going to let's save our application um and let's try to like publish a message from server. So we have our server up and running already right and let's go to the server.

A

So we have this code generated for us from the server and what I want to do is.

C

A

Api index.js in the API file so, and the creative part about today is is, as you can see in in my server I, wasn't I wasn't setting up um a mosquito like I, wasn't like connecting to a mosquito broker. I, wasn't doing all sorts of things related to mqtt right because I don't even need to know so much about mktc. In order to like use the MTC broker right, which is something which is really really fun and that's one of the powerful things is kpi offers, like the generator it generates.

A

The old code for you or you just have to like focus on is a business logic right. This is not fun. That's like really fun right and what I'm gonna do now um is to send a message from my broker right and in order to do that, um I'm going to um send a message right and let's send a message for my broker: I have to what can I do? What can I like trigger.

B

The first first message.

A

Okay, let's, let's send a message like we're: gonna, send a message um every few seconds right to see if you receive the message in our client. So what I'm gonna do here is um do.

B

A second bubble from my API.

A

So I'm already set in Turbo I I want to send message every few seconds.

B

So we're gonna say so: let's see every Team every sponge.

B

A

Second, um we won't like send a message.

B

B

Foreign random.

B

Let's just select a random number.

A

Then I'm gonna do after send I'm not design, so it takes three argument right because it's you can also use this um Ms. So if you haven't used um mhjs before uh you should check out the library to say how it works, so what I'm gonna do now is to because the abduction everything like takes to your argument, so the the first one has to be the request ID, which is what I did here and I'm gonna just pass. The request. Id.

B

You should say: requests.

A

Another idea is, it's gonna, be the question of the ID and this is going to be an empty, um so this particular second argument is going to the second data has to be the um add us right, so we don't have any of us for now so I could either use on the fire and I'll just pass an empty object. Then the the next thing you want to do is they um chant or the topic right. So yeah I want to publish a message to because specification we can.

A

We are publishing through unit balance, requester and then balance of data right. So you can see it here, publish and publish so, but right now we are going to like use the unit balance requester on.

B

B

C

Yeah so I'm having fun so far.

A

So you might be wondering why am I doing this searching about right, because what I'm trying to do is I'm trying to get this our um application as easy as possible to like to build and what I was trying to do is I want our server to eventually publish a message like to a publish a message every few seconds right to request for the current balance right so for every few seconds, our application or our server, like request for the current balance of the of each buildings right once the each building sends their balance.

A

We do some business logic, we update it, so we we reduce the current balance by by one right, so we send the updated version. So every few seconds we want to like receive the current balance, make a tiny update and send the remaining balance to them so, which is what I'm doing here so I'm I'm going to be I, wonder what's about to like request for the balance every few seconds. So, let's make it every two seconds so one second, so I cannot say this and see if we receive something from the client.

A

So so I have this saved I'm gonna start the.

B

B

C

B

Was this saying, reacts power.

A

Countries of react, power, immunity did I, say.

C

Power and kitty too.

A

D

B

A

An arrow something's, going on a c.

A

Kind of find Moodle, pow, mqtt.

B

What how does that mean.

C

It's just installed. It.

C

Let's see we haven't installed right.

C

What's happening.

A

Yeah we have our first big error, um trying to see what we are doing wrong.

C

C

Isn't it as a reference right, so we import.

C

B

C

We have this initialized receipts.

C

A

Oh I think we have to like um do this because we haven't like initialized these um we haven't called so we have these um initialize. So we're also like create this constant, which does this mp3.connect. So we have like um all these states of whatever we are having right. So what I'm going to do is create this page I'm, sorry about a client, um I'm gonna do set.

B

Client I believe that's the issue.

B

um No right now, yeah.

A

So what I'm gonna do here is to set client.

B

That's the data yeah.

C

And yeah once we do that.

B

C

B

C

Supposed to work right right out of the box, but let's hope.

A

A

Oh okay, we're missing one more thing from the docks which is another function to actually trigger, so we're gonna.

B

Do these const and connect.

A

So so, whenever the client is connected successfully.

B

Clients dot comment.

A

A

So on success we have a function, um so, let's just copy what we have from the docs, which is a loop.

B

Basically, six.

A

Format: it's it's a it's a for Loop right says: if you have a talk, we already have a topic like double dot length, so we are going to like subscribe to each topic.

A

So if that was what I was missing and if I didn't like do this particular path, I'm virtually sure how am I going to receive messages right so no way, I'm gonna receive messages, so the athletic figure is on connect function which basically does which basically connect the client and subscribe to each topic we provided here, which is the unit balance, requester and unique balance of data right and now we have to like trigger this. Client.Com connects.

A

So what I'm gonna do is I could use this same use effect right, I, don't have to create another one. Okay, now, okay, I have to put another one, because whenever the clients change I want to build something.

B

B

A

You want to like trigger this on connect right, even if, if there is clients.

A

This client can call this unconnect.

A

Oh, we have this initially I, just like this one that I've ever done like three years things mtcc broker, which is this this function here, so we also have this mqtt.connect, which um is gonna, hold the clients. The the client eventually holds the data from this constant here, but now once we have the whole uh the whole um broker connected right. uh We also want to like check from for some like some external stuff right, some additional stuff, which is this on connect right.

A

If we have this, if we, if the state of the um client, if the client has some data- or it has a state change, so I'm pretty sure I'm pretty sure, the client has some extra argument, which one of them is this dot connect right. So once it connects um start to reconnect for some reasons, so unsuccess. So if the collection is successful, we want to subscribe to all the list of topics we have here, which is the unit balance request, balance of data, so I'm gonna save these and I hope it works.

A

Oh God, I'm surprised, I'm, so praying I hope it works.

C

B

um I'm gonna say this and.

C

B

C

Please walk, oh no. Why.

A

Am I having this Arrow.

A

Modus Rock power- okay, now we have to Google I, have no idea why this is failing.

A

Hi I have this I. Have it installed.

C

C

How everything I was told.

A

To do that, message arrived and connection lost. ah We we have our Facebook error right. uh No, this has something to do something to do with the library.

C

C

Topics, topics.

C

Topics or topic?

C

Okay, not that's, not the you know, hmm we are stock. We are stock.

A

We are stuck why. Why always talk right? It's crazy.

B

Okay uh still to make called a bit larger.

C

Okay, is it big enough.

A

Oh, we stuck so we say so we're gonna google to see. What's the.

C

C

C

C

B

Can't resolve power.

C

C

A

Hi, it wasn't installed.

C

The tickets- let's see.

A

What this this is crazy, guys, um so I'm using this uh um Library called react, power and PGT, which is using the power mqtt right and in the package of Json. It isn't there isn't that weird.

C

Geez this this is.

A

C

A

A

So I need to install power18 to see if we would be lucky enough to.

C

B

uh Np installed and you can see.

A

Why should we install power implicity, it's not supposed to be pre-installed with the library we are using.

B

So, let's, let's, let's try our clock and again, let's start.

C

Please don't break, please walk.

A

ah It works, oh amazing, all right so for some reason, because I didn't install power and qtt, which is weird right. If, if we are using um react, powerful mqtt, which is I feel, is basically based on the power mqtt Library, it's not supposed to like be pre-installed. Why do we have to like install react from electricity? Then install power mqtt?

A

That's that's weird.

A

Yes, it works. So, let's see.

C

A

What I'm supposed to do.

C

Okay, I'm gonna.

A

Close the stops because I don't need them.

A

So we have disconnected.

C

Right but it will connect.

A

It so, let's see if we have some errors in the browser.

C

Works good connection to Etc MTC failed. Why.

C

C

How did it fail.

B

C

Let's, let's restart.

B

Our Starbucks foreign.

A

Adapter is connected right and we are sending. We are publishing messages right. We already publishing messages. It is working every few seconds, just publish a message and now we're trying to see if our clients can actually receive the message.

A

C

Really hope so.

A

Topic is not defined.

C

Okay, let's see.

A

What's happening come on.

C

Okay, uh oh he's talking again, we have um another issue.

A

And connection we lost what you mean topic is not defined. We Define a topic.

A

ah I see topics not topic: okay, I.

C

A

Okay, now we have a bigger Arrow.

A

ah Finally, it works so I'm going to share. Oh my screen.

C

I have multiple browsers: okay,.

A

I'm gonna share my browser, so we can see we are actually like receiving messages in our clients right so.

A

Virtual houses.

A

As you can see in our console, let's log in our browser, we are receiving the messages that has been published from the server, which is great like amazing, and you can see every every two seconds, a new messages. A new message has been received and you can open the message and you can say it has a lot of payload. It has destination, name duplicates, so we have topic. So it is amazing. So this is what we are actually expecting right.

A

The first big thing, which is oh, the second big team, which is receive the messages uh so I really wish um restroom can make me you know, switch from one without closing it. Now we have this. We have similar messages right in our browser, which is amazing, so you can close it so since we are receiving messages in our browser. So what we are now is I'll start some passing power to this virtual building. So let's go back to vs code.

C

I'm going to vs code.

C

A

So we are back in vs code I'll ask so we have like store power, client, our server for publishing messages. So what we want to do now is um this, so we have all these connections working perfectly um on message arrive. So that was how we got those messages in the console.

A

Right we say on message, arrive, console.log the message, so we have the message right, but now what I want to do now is to being able to like separate these messages right so because we have to, as you can see, we we have to um topics. We are subscribed to the unit balance requester and the unit balance of data.

A

So since we have these two topics, um what we want to do is now to separate these messages, so we can know which topic so we can know which topics which message belongs to so what I do now? Is they sell we're going to remove this console right and we're gonna say if message if, let's say the destination name for the destination right, equal copy at index zero? So what I'm trying to say is if this message or destination name is equal to this topic right unit balance requester, we are going to console.log.

A

The message right so we're going to do consider cell message, dot, payload.

B

A

Now I mean the object right um so and also we're going to copy this on great state, but this time, if it is the second message which is the unit balance of data, we are going to like also like console.log the message right, but now I'm pretty sure if we start the server again and um and uh go to the browser, yeah eventually going to see the message that is related to the first channel, because we are correctly just listening to this.

A

We are only publishing message to this particular Channel, which is you need to launch requester right, so we're gonna. Do this we're gonna, say this right. We already know how it works, so I'm gonna.

B

I'm not going to like repeat on myself and bring back your brother again.

A

So now we have this message: unseparated right. What we have to do now is.

A

What we have to do now, Now search the request like we have like, take it one by one right. The first message is the first tunnel we are listening to is a minute balanced, requester right now we have to create a state right that holds all these data right on, so we have to create a state that holds these um requests, but you have to create a state that what this balance requester right balance request. Rather so, let's.

B

Say, um let's just say: college requester and it says, search requester.

A

uh I'm gonna say use States.

B

We'll use your state, um that's your innocent! Now, because we are not we're.

A

Not skipping anything at the point, so what I want to do now is we have this? um So we're gonna also go for the second Channel, which is a beta.

B

You can uh set of data.

B

You don't know.

A

Thank you, I'm out of water.

A

Oh boy, so now we have these two states, which is the one for the balance requester addon for the balance of data. So what we're going to do now is set this stage right. So whatever message we receive from this particular Channel or this topic we want to, we want to keep it right. I want to. So we want to say, set um requester to.

B

Message: dot, Taylor string.

A

And this other one um is going to be set of data.

A

To message, but for now this this wouldn't be- um this wouldn't be a pillow string, in my opinion, okay, it's still.

C

Going to be a pill essential, let's just keep the pillow string so.

B

We have these two stop.

A

But now we have to now we have these two states.

A

So how do we use those States, like just data with cap right, so the first one you have to do is, as you can see, we have three houses right with different, which is just three houses, but what I want to do now is because each house is has to have its particular balance right default by default, so we have to like have these default units for each balance, so, let's just for each out, rather so, let's say units if these particular first house has 100 units left by default.

A

The second house would have, let's say, 80 units left by defaults, and the third house would have.

A

Let's say 50 units left by defaults right and we have these three houses with different units and, as you can see in his part in this place, where we do the houses, so we have each house is mapped so that that was how we have like three houses right. So what we're gonna do now is um go to each houses and start like doing the magic day right. So the first thing you want to do because.

B

um Requester is past this other props.

B

um Requester would be.

C

B

And um a big stuff.

A

Of data, we are passing these props this here. This state here at this stage here, are the props to each building right, so they can have access to that. So what we're going to do now is one more thing. So right now we are going to like we, we already like receiving the messages right, but we don't have the capacity to like send messages right.

A

So we are not going to be sending the message right. I'm gonna send a message, so, let's just say how we can use the balance requester method you are receiving first right, so we're gonna go to the save these and go to each building.

C

So each building.

A

Oh so I I think I missed one thing, which is um just a quick one. It's just a mesh because um I have to like pass light to eight hours.

C

A

Don't think it's there already, so so what I want to do now is go to each house. This HRS components.

A

Oh God I need I need water.

A

Let's give me a few seconds: I need to grab water so just hold on.

A

Yeah I'm back so I I got out of water and I was dehydrated. As you know, open source is life as water is to life. Also, so I hope you got that so what I'm doing now is after I go to each building because I already like pass um each requester. So whenever there's a request for the balance, each hours already has access to it right. So I'm gonna go to the house components.

A

um Necessary house complaints now it's now now this is the house component, ignore the existing code that is related to the 3Gs. Let's just focus on the important aspect, which is the um units and the.

D

A

A

Did I pass units.

A

Oh just map mesh for each house is used units unit of experience, I'm, sorry.

B

Also, as a props I'll put it.

A

Now it's a house has its own. So what why sorry? Why I did? This is eventually because I don't want to like um copy and paste. Each house is um correct, like create three houses, a different positions, so that was I just act like he was um a single house component and just like add numbers to just make it more than one right. So we helped the house component has access to units so we're going to save this and um in the house.

A

C

D

C

House, the.

A

House components right, which is which has a couple of props right, have the units at the props units without the requester.

A

As a requests are- and it also has- oh- it has a request shot and it also has an updater. So, as you can see just to confirm it has the requester. Does the units requester unit and updater as props right now, which is fine. So what I want to do now is see. Let's control the flow, the units just to ensure house has its units.

A

So, let's say from the browser.

A

um So let me confirm if it's receiving, if it is consoling yeah, it's consoling, so it's working fine. So what I'm gonna do now is this so since we have this, and so since we have this, we have, it should get started so.

B

A

A building like requests for whenever eight hours it receives the request message which says it didn't balance, request message: we want to do something which is we want to do something. So what I want to do is this? So what about dividend receives the request message?

A

We are expecting the building to send the current balance of each I'm. Sorry, we are expecting the each house is to send the current units they have left right, so which means the client with the house is now have like publish a message so, which is what we're going to do now?

A

Is we have to like specify so when we use a use effect right.

B

Let's go down here.

A

What I want to do now is this I'm gonna say: let's just comment: it sounds like.

B

You believe you see the the so the.

C

B

Receive a balanced request.

A

That so, let's say this effect.

A

So and request that that's what I'm saying whenever we, we noticed a space change in the requester right, so we're gonna say: if, if there is a requester, do something, so you want to do something. So what I want to do is whenever there's a requester. We want to send a message, so we want to publish a message on in the message. The message you are trying to like publish is the current balance. Each building has left right.

A

So what you have to do is just say um in order to reflect, publish a message right, so we don't. We don't have that. Yet we don't have a capability like publish a message which is weird right, so, which means we have to like be able to like publish a message. So what I'm going to do now is create a publish message function also so, which is especially like saying, send payload right.

A

So in order to do that, we need to go back to our app.js and um create it here. So let's say: um let's go to the function called column scores. Let's say.

B

A

And payload: oh that's envelope. We have selects equals to argument which is the channel right, the channel. You are sending a pillow too right and um the the message, the pillow. They are sending right. So Channel.

B

Beta well I'll just say: yeah you'll, say payload.

B

So the messages right.

A

um Yeah, so what I'm trying to do now? We have it functional now, but we have to like, say: let's just call this message and make sure you're standing and now what we are doing now is just say: um constant, called payload and we have to because.

A

Yeah, so we have this guns called payload. Now we have to use advertising the we already have the MCC package that we are using entity.pass payload, as you can see. So if you don't know what I'm doing here or how I'm doing it, it's eventually just you can just check out the um react. Our power amputity um documentation uh just for reference right, so we're going to send a message. We have to like specify a few things right so which is um mtc.

A

payload and the first argument, as you can see here, is we have to specify the channel then the message: now we have our payload right. So what we want to do now, then we have to do client dot, send payload.

A

Payload, so if you might be wondering where this client coming from don't forget, we have this uh client States here, which is basically just holding the whole um data from the mptc. So it means we have access to the dot, send um function, inequity right, so we can do just to find the same.

A

So we are doing client to send the payload right now. What we are going to do next is um eventually because we want each. We want each building to have access to this send function here. So we're going to laugh like we have to pass it. We are going to pass it as a as a props right to each building. So we're going to add an additional approach, which is.

B

Saying um payload.

A

Simply load, then we're gonna, say Central, ladies because.

A

Now we already have these path as a props now window. Each building already has access to these props. Now we're just going to like bring it in and say, send payload right, so we have feed broken already now. What I want to do is this, so whenever each building or each house receives a request message, just like we saw the other time, um we want to send the data like we want to send the payload.

A

We want to send the remaining data we have left, so you want to send you a million units we have less. So what we're going to do? What we're going to do now is to just do exactly what you're saying. So, if Jason, if there's a new request, um message right, and so we want to send the payload we're going to say, um send pillow, because we already have access to the what we are sending right, um the channel we are sending it to from the the Sync API file. It's gonna be a document.

A

As you can see, the movie The publish from our channels is unit balance responder. As you can see, it has a publish action which, which means we can publish to this place, so we are going to be publishing there. um Let's just copy the name of the channel.

C

A

And just put it there, so that's the movie channel right. The next argument is just the message right. The message you're trying to send, but now, if you notice this right in the message components of unit balance responder like measured, you see, we are not sending a string. We are sending an object from the payload right, so the message payload type, is an object. So we as an object which consists of the building ID and the unitary meaning. So we have to do just that right.

A

Thank you. So we haven't done objects which is yeah. We we are selling an object. Building ID.

A

Entity ID: are we correct, yeah, building ID of each begin, ID on the units left, which is unit of code because we have access to it now this is what we are sending so I believe we are basically done, so we should be able to like test what we have so far right.

A

C

A

Say this ah I didn't go down to this.

A

Okay, let me see if uh message on the channel charts so yeah your man, can you make Cody larger? Yes, I did uh mukash and we have another person that says 100 True. What did this passion start?

A

um I have no idea what you're talking about well yeah I feel something cool yeah. So what you have to do now is we have our code saved? We want to test out to make sure like what we have is working so far. So let me start with the server and the clients.

A

So before I start the server on the client, since we are sending a message from the client to house. Oh sorry, since you are sending a message from the client to the server so, which eventually means we are sending a message to unit balanced responder, we have published invested there, so we have to see from the server. Maybe we are receiving the message right. So we have to go to the server.

A

Then we go to andalus, you need to balance responder.

A

um Let's consult our message so see.

B

If we receive a message.

B

A

So we're gonna start the server.

A

And we're gonna start this client also, so let's open everything works. So we can see this server is publishing a message.

A

On the client just broke, what happened Arrow so, let's see what happened idea of undefined, so we have um an arrow. Id is not defined.

A

Oh yeah ID wasn't defined so I didn't pass ID as a props.

A

I did. Oh I didn't import it.

A

So ID is missing. Yeah. Let's save it and try it again.

A

So, let's start the server one more time and hope everything works.

A

An error code Jesus.

A

Why can't he just go well. So let's see what the error is um valid arguments.

A

Okay, so it seems I can't send an objects here, so I'm gonna do um stringify these objects right.

C

I hope it works like I, really hope.

A

Yeah, so let's try the game.

B

See, let's see I'm opening, please.

A

Walk yeah, it works, it works. You can say it works amazing, because now we are receiving the message right. So I'm gonna stop this summer.

A

Wow I, look so excited to say it well all right now that was always go wrong, but this we gonna finish it we're making sure it works. So we have received a message in the terminal, as you cannot see, because we control the message. So we have some hammers message right. This is amazing, so what we're gonna do is we are going to like. um So we have this terms of message. We don't need what we eventually need from this message object.

A

Is this payload, as you can see this payload, so I'm gonna control, those log, the payload message, dot, Prelude.

A

B

A

So, let's start our server one more time.

A

Yeah, it's working, it's working, amazing, so, which means immediately we um publish a message from our server to the client that says: um request I request you to give me your current unit balance. Then the client also responds by sending the unit balance to the server. As you can say, this is the response we get. Building zero has hundred beating one as 80 and beating 2 at 50, which.

B

A

Exactly what we are going for, that's what we are looking for, so we we already have what we are looking for. So what we have to do now is, since we are receiving the messages right, we request for the we need balance the union dance was sent to us. What we want to do now is do some business logic, and this is amazing, because I, as you can see, with the help of a generator I, wasn't doing so much on the server side right, because I have the code generator to me.

A

What I was just saying was just handling the business logic right so because what I'm handling is a business logic. What I'm going to do now is, whenever I receive a balance from the clients. What did I want to do right?

A

What I basically want to do is just you know, reduce the the balance right, just reduce it somehow, so in order to reduce the balance, like my business logic, eventually, what I'm going to do is this I'm going to reduce one anytime I receive something so what I'm going to do is I'm going to say what.

B

Are the cons it's called New.

A

Message because I want to manipulates the message, right so let's say numer technical method.

A

Right, so what I want to do is if there is a new message and definitely there would be.

A

If there is a new message right, no I think it would eventually be a new message. If new message does units right is greater than zero, it means, if, if that particular building still has some units left trying to do is reduce the equivalence unit right, and so what I'm going to do is new message. Dot units.

B

It equals to new message.

A

Yeah, because the new message, units kind.

B

Of fun, foreign.

A

Then I want to remove one, that's basically what I'm doing right so I'm going to console the slot with no message to see what.

C

A

uh So, let's, let's save this and see what we're saying uh so our client is running. So we just more concerned about the server starts.

A

Yeah, it's working right, so this is it as you can see the initial message the initial unit was 180 from the president is 100 from the second building is 80 from the start. Building is 50, but now once this once when they, um when the client or sorry when the clients actually like, sends a message to the server saying. Oh, this is my new balance right.

A

The business logic has been triggered, which you can see here that the building the first building unit went from 100 to 99. The second went from 80 to 79, the third one from 50 to 49, which means it's working right. Our business logic is working, but one more thing we want to do is this, so whatever we do the manipulation of the data of the unit.

A

So what we want to do is publish the message pack, we want to send the message back and, as you can see from the channels, we have a channel called Unit balance of data, so this is Chinese Channel. We are going to be publishing the new message of the new unit balance too, so we are going to be doing that so, which means in the universe responder. So sorry.

A

So, which means what we're going to do now?

A

Is you send a message back right? What I'm going to do is do messages reply, so I would advise you if you want to like learn more about all these um logical reasoning, message of reply. This is the message. Reply comes with. The message updates the message of data. The message object, I'm receiving right. So let's just reply which is basically the same thing. That's what I was doing here, which I'll put send right. So let me just reply: I send a new message. First, new message.

A

And the channel I'm publishing the message to so what time am I put in the message to I'm publishing the message to generate balance of data.

A

Oh now I'm publishing the message it should work. So let me save this and um see if I receive the message.

A

Okay, so let me save this, um let me start okay in order for me to know, if I eventually received this message, don't forget in our app.js. We did something here right. We have this logic here that says on message arrive. So whenever my message arrives, we want to do something right, so we also have like one message to destination. Name is equal to unit balance of data, which is this topic here. We want to see. Let's say if you receive a message, let's console.com.

B

Let's consider.com: let's see what destination.

A

So we are, we've saved these and we're going to study server to see if we receive a message from the updater channel npm wrong start.

A

Okay, we have, they started foreign.

A

Seems to be sending some message, but we are not receiving it. um Okay, no I know where this issue is coming from, um so what basically happens is.

A

In this hour right we have an antler in the server for updater right. You need balance of data, so no not in the outline in the midwest right.

A

Sorry in the routes, not middleware, so we have the route for unit balance of data, which basically I think is delaying the message to like for us to receive the message, which is weird.

A

um So, if you're not interested in the message, because.

B

A

Where are we okay yeah? So we because we are doing the business logic here in the unit balance responder. So we are not getting the message in client because of this route. um Let balance responder route, which has this next Midway right.

A

The reason why we have to like we're not receiving the messages, because the moment this triggers the um you need balance responder right, which basically triggers the universe responder antler. There is an asynchronous action going on under the hood in this message was replied, so our service isn't waiting for it to finish before it sends the message right before it goes to the next thing, so, which means it has already moved on before we send the message to the client so we're going to disable this next and you should work.

A

So I'm gonna I think I'm gonna extend the documentation just for the sake of this I'm, going to put an issue for that, so that others can also like see. So now we can see we are receiving a message in the client so I'm going to share my screen to the client um to the for the browser and it did.

C

A

Sorry, okay, um sharing.

A

Yeah, so, as you can see from the browser we are receiving these messages, which means we are successfully receiving the unit balance of data with newly balanced um units right, so we can say 49 49, which means it has been updated and we are saving it.

A

But now one more thing, one more last thing to do- is to um update the units balance and keep it as a stage right, so that we can so that the next time they balance um so that the next time we are requested to send the balance, we will be sending the updated balance, so I'm gonna solve this server.

A

So let me share my vs code, but this stream is getting longer but I like it. It's interesting, um so I'm gonna share my vs code, um yeah.

A

Yeah, so we have the vs code and what we are going to do now is close out. Some tops.

C

A

Going about the app.js, the client, so we can say we are receiving this message in the console and we are keeping this message uh in the states of data which they, um which the house has access to um of data here as a props. So let's go to the house components right.

A

So what we want to do now is hold the state of the new units right. So what I'm going to do is create a const, a.

B

State right called.

B

You it's not different building. It's.

B

A

B

B

A

And it's right by default, if you want to have these units as a default state.

A

So what we're gonna do now is this: um why do I have this okay? So what we want to do now is update the units.

C

C

A

C

D

A

Look at his life, guys Okay, so so what I want to do now is update these units with the newly updated units right. So we are going to like come down here and do something for I.

D

A

D

For the sake of Simplicity,.

A

I'm going to create another user effect.

B

A

B

Is John's gonna keep track of this test change of.

A

A

Of data, which means whatever we have um whenever a new message has been published, the updater. So we want to do something right. So we're going to say if updater.

B

A

Id right, it's equals to the current building ID. We have here right, so the current building ID we have here, which is ID.

A

What I'm trying to do here is, if there's an updater in the message like we don't want to like just update data. We want to update the units balance for every for each specific building, that's related to the particular ID. So if there's an updater and operator.bidden ID is equal to the current region we are in, so we are going to like update the new unit. So what I'm going to do now is set new.

B

B

To update that, that's.

C

B

A

I think that's that's basically, so we already set the new unit right, but what we're gonna do now is this in this particular place right we are sending units, that's the unit we are receiving as a prompt. We are not going to be doing this. We are going to be sending.

B

A

Right because really Unity would hold the current state of your remaining units for each building right, so new units. So now what I want to do is go back here and console.log message payload one more time.

B

B

Your strength right so.

D

C

C

C

A

Okay, you still didn't be fine.

A

So we're gonna start this hour again and we are gonna see from the console what we are receiving.

C

A

It isn't changing, we have an error, so let's see what the error is, we are supposed to be receiving new state changes, but we.

B

C

A

Go to the house and see if we are updating the if days of data.

B

B

A

Okay, we aren't getting to this place, which means.

B

Something is missing, you have to bring something wrong.

B

So let's pick it up a bit.

B

Let's try again.

C

A

If we get up data- oh no, no so, which means we are not getting what we are expecting to get right so, which means this shouldn't be not. Why are we getting known? Let's see.

A

We say set of data to the.

B

Message.Pillar strain.

C

A

To be missing this pillow string because we are getting it then what's same setup, data.

C

A

C

A

D

C

B

D

C

This is it's not a string.

B

Let's see this dude just someone's pass.

B

Because we are standing restraint and.

C

Say again: uh okay,.

C

A

Okay, then, let's keep it as just not.

C

Passed of a string.

A

Oh, it's working exactly so I think. The reason why we weren't getting these before was because, if we go to the house, I was sending a string like because the addition update has been stringified from this place so from the server. So I was trying to like do this, so what I was saying is forbid on an operator.id which doesn't exist because it is a string, so it wasn't working, but when I turn it back to an object, it eventually works. So let me share my browser, so you can see what we are receiving.

C

C

A

Okay, so I'm gonna show my browser.

A

Okay, so, as you can see, Let me refresh um the moment: I start this server, we're gonna, see any console nice. As you can see the console it is changing from 99 to 98 to 97 to 96, so it just keeps going down, keeps going down, keeps going down, keeps going down, which eventually shows you. The whole functionality from the client to the server is working as they expect it right. So now we have this working Masterpiece. uh So what I want to do now is to see this like this data.

A

We are getting this functionality. We want to like passage to this virtual building, to power our house right now. What we're going to do now is stop the server and um go back to vs code, eventually.

C

Chevy escort vs code, yes, code,.

A

Yeah, so going back to vs code, what we want to do now is do some magic about light intensity. So, in order to do this, um we have to like create a new state called license density, so by default the whole building has power, but now, based on the amount of units you have left to determine how much current you get at the power supply. So what we're going to do now is go to the house components.

B

A

B

And create accounts for writing density.

B

Okay, set slide intensity right.

B

A

Gonna have to do this. I default. We have to like have a default light identity, so we're gonna say I default. It is five you're gonna say five. So what I want to do now is do some magic right behind the scene, but before we do the magic, let's see what happens before we start searching the light intensity. We need to like pass in this latching density here.

A

Oh sorry, where are my points? Lights points, lights, points yeah. So this point light stuff here. So we can say the industry is zero. So let's just pass the.

B

Density objective.

A

And save it right if we go back to the browser intensity is not defined, it is.

A

Oh light intensity.

B

So let's call this slides entity and look at our browser.

A

Yeah it's working so I'm gonna show you guys. My browser share my screen. Another time I'm, showing my browser.

B

A

Yeah, so, as you can see, um my deputies already have life right, because I had a large intensity, which means it wouldn't have light, but what I want to do now is based on the data payload like because of the payload or based on the remaining units. Each building has left I want to reduce the intensity of the lights right. So what I'm going to do now is, um as you can see like we can have. We have the license between is nice, so going back to vs code.

A

Going back to vs code.

C

A

Sharon vs code.

A

Yeah, so we're back to vs code, and what we want to do now is this is used days functionality we have to control the lights right for each building. So what we're going to do now is we have this stage called light intensity right and we have to like set it based on what we get right.

A

uh So what we're doing now is this: we have to create a new use effect right anytime, with the new units we want to like we want to like do something to the light for each buildings right. So what we're gonna do is one last use effect.

B

This is just one single year, in fact, what's your for the sake of Simplicity I'm gonna, do it like this okay um little facts this and they do this new units.

A

And then there's a new, and that is a change in the units, but you want to do something right. So let's say: if you need, if new units, if new units is greater than 50 and oh okay, we don't need to be sick, we really need to say greater than 50. No, let's just say if new units is like less than 50.

A

less than 50., we want to reduce the lightest density, so set light intensity.

A

B

Oh, that's a trick. You can see, you can say a.

A

Real difference, then we can then copy and just um do something else, even just leave it up. If then, do this do a couple and see if new units is less than let's say 30 .

A

if no unit is less than 20 will do one. If unit is lesser, then we'll do 0.5.

A

And if Community is greater than a zero I'm, sorry, if near end, is greater than or equal to, zero is less than or equal to zero, it's less than or equals to equals. To zero, then set like intensity to be zero right.

A

We have this stop breaking up. So every time is in States change in the new units. We want to update the life intensity. We want to control the light intensity based on the remaining units left right, so we're gonna, save this go to the browser.

A

Okay, I'm gonna show my browser to see what we have now um going.

C

Back to the browser.

C

Share my window.

A

Yeah now I'm showing I'm sharing the browser. Now you can see we have this light here. So what I want to do now is start the server so immediately. I start this hour. You're gonna see how the light he's been controlled right, so I'm going to study server somebody's running.

A

You can see the blight intensity of each building, which starts reducing so we're gonna, see um just hold on and let's just keep track of them. I think I'm, saying the last building Yeah by my right has less uh light density than the rest. So let's just keep looking what happens.

D

A

This building is power which desawar right with mpcc and with the help of a second API we, it was working perfectly. So you can say just keep. Introducing the other left is going to run out of power soon.

A

So, let's see, let's see, let's where you can see if it turns out of power.

A

ah Almost out of power right and the one at the left at the middle and the one at the left still has enough power right. So, let's see till the boats run out of power right.

A

Oh no, the one on the left is out of power. As you can see, then the rest of them are also going out of power because the average seconds we update the remaining units left.

A

This is, this is awesome. This is awesome, um so it just you can see you can say now. The one on the left is almost out of power. The one at the middle still has enough power to go so before you know it's the one that they left. You eventually also run a power, then the remaining building, which power left will be the one at the center till eventually it doesn't runs out of power.

A

Let's see, oh almost almost out of power, almost almost out of power, almost it will eventually run out of power, and the remaining business would have left standing is the one at the center.

A

And now it's a lot of power you can see the building has no power anymore. The only one with power is the one at the center, which is also running out of power gradually, so we establish server now, which is which is amazing. You can say we we've basically like accomplished what we the purpose of this live stream, which is to power our building and control it with a Sync API, which is awesome. Isn't that awesome like this is of like this?

A

The inspiration from this Upstream actually came from the street light example of a Sync API right and now, let's do let's add one more additional functionality or additional feature which will be. um Let me check my vs code. um Okay,.

A

Yeah, so we're gonna do just one more thing, which is keeping track of the remaining units left. So what we're going to do now is this. So just a giveaway for the sake of this live stream is to do one more thing. So, when I install a package in the client rest of the clients.

A

When I say about it in a client called um I, don't know Troika, so we got three which basically enables me to like add some text to my 3D environment right, I'm, gonna, import, it. Okay, sorry, npm, install.

B

B

A

B

A

Have it installed.

B

A

Right what I want to do now is hard remaining balance as a text so that it can be visible for us, so what I'm gonna do is so I'm going to import it. The no package that was installed.

B

um They put, it protects us Trader.

A

Now what I'm going to do is so if you haven't, if you are not familiar with the 3D environment, so if you want to learn more, you should check out directly um projects. It's an amazing project is um newly installed package. After doing something like this extend text and yeah, so one more thing I have to do is based on the documentation I just.

B

Have to I'm just going to copy it just to make it fast um just copy this and paste it here is also.

A

A

So um one more thing, the last thing I have to do is just add the texts.

A

We're gonna copy I'm, just copying the.

B

A

For it and pretty sure which is back so what I'm going to do is so it has a text perhaps which is just going to like display the remaining units we have left, which is just I'm, just passing the existing units, the new unit um State and put it there and what so, let's just save it and start the clients.

A

Okay, we have an arrow, let's see, what's happening.

A

Oh extend is not defined, so we need one more thing. According to Docs um wise extend, okay, we didn't impulse extent.

C

A

Oh not from react.

B

To the fighter.

A

So we have to one more thing we have to do is to import the font so I'm just gonna copy. Just this is not really necessary for the sake of the live stream and.

C

Just like doing it just like do some faster stuff, so look.

A

A

Okay, we have some errors, says.

B

C

A

We are using fonts.

A

ah We almost done, we are stuck okay, let's see, font isn't defined. What do you mean.

A

Oh, we just see what is happening: okay, yeah, we didn't import fonts.

B

I don't know what I was saying: font cylinder fine, so.

A

We're gonna import font.

A

To be good to go now.

A

D

A

I'm gonna I added some extra fast stuff, um so we going to like I'm gonna share my brows on now.

C

A

So, as you can see in my browser, we have some additional stuff, which is uh identifier for each building, that each building has the number of what's left, which I've been calling unit sense. The number of units left the number of Watts left in each building.

A

So if I start my server right now that we built we're going to see how we can also like keep track of how much we have left and payment starts, I said this hour and you can see it is amazing, like it keeps reducing and the more it reduces the lesser the light intensity gets.

A

um This is this is this is amazing and um we're gonna see, let's just keep watching before we end this live stream, let's enjoy our little homes with power supply been control with async API an mqtt see this. This has been a lovely lesson. I would love to do more of this live stream. uh You know just having fun.

A

So we have these live stream. Coming to one hand, um we have our project up and running functionally. We have like everything is working as expected. um Yeah. So, as you can say, we just skip I I, can't I mean let's just watch it for a few minutes. Then.

A

A

A

A

Boom out of power so be uh I'm. Gonna stop the server now and yeah so step.

B

In the server I'm going back to West, train.

A

And yeah, so this has been, you know, a lovely live stream uh and we've got to like make so much arrows, but at the end of the day we eventually got these buildings. You know up and running with electricity with power which, which is amazing and um learn so much in your business. This project and I would be like I'll be doing. You know this kind of live streams um where I'll be using the Sync API for perfect examples using different protocols, different Technologies to like do something amazing and I'm, pretty sure my live stream.

A

The next live stream I'll be doing would be eventually delete, which is one of them like one of the my I would I wouldn't say: okay, I would say one of my favorite products in the Eastern Cape ecosystem, basically and yeah I would be reading um uh projects in Glee I think the tic-tac-toe projects is in Glee and websockets and yeah. So we're gonna see how that also goes. So thank you guys for joining this live stream.

A

If you find this helpful, if you have any comment, um feel free to, let me know and don't forget to like this video. If you find it helpful and also subscribe to our YouTube channel and yeah, so that would be all for today, guys um see you guys later peace.