Placeholder Image

Subtitles section Play video

  • Hey, everybody is Jesse.

  • I know it's been a while.

  • It's been, uh, since new years since I did a stream on free code camp.

  • So I'm happy to be back.

  • And I have a new mike, so let me know how it sounds.

  • Everybody can hear me.

  • I actually get the, uh I got a nice upgrade here.

  • So this is one of the yeti, um, Microphones s o.

  • I saw a lot of lot of streamers using those that good reviews, so I figured, you know, I've been doing this for a while.

  • Maybe I better upgrade.

  • And I was doing some podcast lately, and the audio quality is obviously very important.

  • But today I wantto program something that's gonna work with with this little headset.

  • Uh, this is the See if I can get the Loga own plug it.

  • Uh, no Ross iti notion headset on.

  • So once we get it hooked up, maybe I'll try putting it on, see what we can do with it.

  • But the, uh, I did a video on my channel kind of introducing what this thing could do and knowing a little demo of it.

  • So if you're interested in learning more about that particular headset.

  • Check out my my YouTube channel links in the description and you could see it was one of, like, the last few videos I did.

  • You'll see that one in there.

  • But today I wanna actually code a an app, a react native app that'll run on mobile that will sync up with this headset and allow you to do some stuff.

  • So phase one of this app is going to be Ah, just just sink the device up and track your focus.

  • And if you start to lose focus, we're going to do something on the phone.

  • So I haven't decided for sure yet.

  • Maybe vibrate the phone or, um, make a little noise, something like that.

  • That's gonna be like the M V P.

  • Phase one that I'd like to actually get out on the app store.

  • After that, I think it be cool toe.

  • Maybe add more features, see if he could make more things happen in terms of focus.

  • I'd love to be ableto have it run on like android auto so you could track your focus while you're driving and getting alert.

  • If you start to lose, focus eso position some cool things you could do beyond.

  • Just focus.

  • You can also train gestures.

  • So let's check out the video if you want to learn more about it.

  • But basically it's possible with this device.

  • Thio, think about doing something like moving your arm something, whatever, whatever you want to think about and then trigger and action.

  • So any action you could think of for either something on the Internet or an Internet of things connected device S O.

  • I'm hoping to do a lot of cool stuff with this, but first step is we just need to get it hooked up in working with an app.

  • And, um so that's what we're going to start with.

  • So basically all I've done, if you haven't seen my my lifestream before, the idea is I it's There's no prep work beforehand.

  • I don't rehearse, Uh, or you can do that much research beforehand because I wanted to be as authentic as possible in terms of what a developer would go through when they're approaching new problems in trying to solve things on the fly.

  • So, uh, I'm gonna set a little timer.

  • We're gonna code during the timer when the timer goes off, I'm going to check the live chat.

  • So there's a lot of activity in the live chat, and I just want to say hey to everybody in the chat now and let you know I'm not ignoring your questions.

  • I'm gonna get to all your questions and comments, but I just get a coat a little bit first.

  • Okay.

  • So actually didn't get my timer up beforehand, so let me let me do that.

  • Now.

  • I'm going to do that on another screen.

  • Let me show you my screen while I'm doing this.

  • There we go.

  • Now, you don't have to look at me as much happen in my time I've lost my timer at Oh, uh um I just need a Pomodoro timer.

  • I was using a Pomodoro timer that somebody who used to watch the live streams made and I had it up on my screen, but I close it.

  • Uh huh.

  • And let's do let me just give you the basics of what I've done here in the code.

  • First, all I did was scaffold.

  • A project using Expo eso expo is a, um, a way to use react native, uh, that if you're not familiar with react.

  • Navy, right.

  • Native is using JavaScript to build android and IOS and Web APS.

  • Right.

  • Expo helps you to do that.

  • It makes react native easier to work with.

  • So I just used XO Expo.

  • I'm on.

  • This is pretty much the latest version, and there might be some minor versions after this, but, uh, we're pretty up to date.

  • If you hear a noise in the background.

  • That's my kids.

  • I have four kids, and they're all running around, so, uh, you may may hear that.

  • Wait.

  • And I'm sorry if nobody wants to go side with you, buddy, go ahead upstairs.

  • You already And ice cream.

  • No.

  • Eat your ice cream and be good.

  • No, look, you know, Jember, you already I could do, but please take your sister upstairs, okay?

  • You want to stay with me?

  • Look, why don't you sit over there and you could watch the life Shame.

  • Okay, you do that.

  • All right, buddy.

  • All right.

  • Sorry about that.

  • My five year old's very upset.

  • Please go upstairs.

  • My five year was very upset because no one ever simply for you to go outside with him.

  • So So, uh, damn it All right, so the, um that's really track boat react.

  • Natives were using react native with Expo, and we're just going through the package.

  • Jason, basically, my my point of going through this was I'm pretty sure we're, like, pretty up to date on most of the packages.

  • So, um, we should be doing pretty good with that.

  • We are using tight script as well.

  • So typescript is something you can use with javascript to help Have be, like, a more strongly typed version of javascript.

  • Uh, there's a tiny info about typescript out there, so I'm not gonna take a ton of time to explain it.

  • But basically, like the Java script, you see might have a few things that are different than normal in there.

  • That's probably typescript.

  • Otherwise, it works just like normal JavaScript.

  • All right, so let me slide this over, You show you what I have so far.

  • I just took the boilerplate that expo gives you that lets you run a nap.

  • And I added in some of this authentication stuff.

  • Now let me copy and paste in the starter, get every boat into the chat so you all can check out to get her repo that I'm gonna be pulling some code from And I haven't put my code on get up yet, but I will.

  • And I'll include that link in the in the description.

  • So the creators of the neuropsychology notion brain computer have already made a react, uh, kind of getting started Repo.

  • So it's for react not for react native, but I think we can use it and make it work to authenticate and be able to sync up our device with, um with an app s.

  • So that's where I pulled some of this code from.

  • The only thing that I think work is so they're using this local storage stuff.

  • We don't have local storage on, um, an AP rate.

  • There's different storage, so we're gonna probably not be able to use that.

  • Otherwise, I think we should be able to re use a lot of this code.

  • Eso I got basically to the point where I needed to put in some text inputs, and that's where I kind of stopped.

  • So we need the user, too.

  • Input a little bit of data from their device.

  • So everybody's gonna have a different device idea and that they're gonna need to use everybody who uses the app, so we need to provide them with some input, right?

  • And let's let's actually run a version of this app.

  • Uh, let's see if we can do so.

  • Expo lets you run it.

  • I wonder if it's gonna let me run as a Web.

  • I don't want to run it on my phone because I want you all to be able to see it.

  • So let's see if I can, uh, run this.

  • If I could do, like, w get there we go.

  • So it didn't listed as an option.

  • But if you hit W, you can open it as a ah ah, Web app.

  • So let's see if it'll if it'll run.

  • I may have messed it up when I copied and pasted this stuff.

  • Yeah, and I did so me pull this over to show you.

  • So we're getting an error because of that local storage stuff.

  • So let's take that out.

  • Uh, we can keep this in to these air react hooks, right?

  • So, um, we can keep this in and just say you state And instead of device I d.

  • Let's go.

  • Let's just given empty string for now.

  • And we have this.

  • What is this navigate thing here?

  • Um, let's comment this out for now.

  • And the notion that I said he we don't have a device.

  • Ideas.

  • Uh, Okay, this is covered, and we need to get rid of this description.

  • Set.

  • User were set.

  • Ugo.

  • Okay.

  • All right.

  • Let's say we get at least get it to run.

  • All right?

  • Cool.

  • So we got it to run so you can see me make this bigger.

  • So that's the the text that we have.

  • So we actually have this apple running now we're running it in kind of web mode, so it's not exactly the same is running it on a mobile device, But it's gonna give us a good idea without having to go through everything about running a mobile simulator.

  • It's gonna give us a pretty good idea.

  • What are our APP is doing at least to be able to say, like, doesn't even didn't even work.

  • Am I getting like, crazy errors?

  • So that's a good start, but we need the user to be able to put in some data, right.

  • So we need the device.

  • I d.

  • That's probably most important thing.

  • And so you just do a city's Yeah, So we definitely need a text input for device I d.

  • So you could see I've already pulled in text input from react Native react native comes with a bunch of components, like by default.

  • So we're gonna put in a text input down here.

  • So instead of this text that we just saw let's throw in a text input and we could change this text to say, um, link your notion the headset is called the notion had set and let's put a text input and I don't think we need like that.

  • Let's look up.

  • What?

  • All the props are the go into its ex input, right?

  • Let's go back to our Crume here and let's look, look, react Native takes input.

  • And ah, about about 15 minutes, I'm to go back to the chat and read a bunch of stuff.

  • So if you're if you're in the chat commenting, I will definitely get to those comments.

  • And, um, I don't intend to ignore the comments.

  • There we go.

  • Just the react native documentation, and this will give us just a little example.

  • Um, actually, let's just copy and paste this example, and that'll give us a good place to start.

  • Uh, Ambrose, you, uh, don't dribble a basketball while I'm doing this because I make a lot of noise.

  • Okay, buddy.

  • Thank you.

  • All right.

  • So I'm not gonna mess with style yet.

  • I'm not that worried about the style, Uh, this that first we're just going to try to get this working, and then we can make it look nicer.

  • To be honest, I'm going for kind of a really minimal interface anyway, uh, but we have unchanged texts.

  • But in this case, what I want to do here is ah, add the device I d.

  • So if we look at our hooks up here, we have set device ideas are hook.

  • So we're going to change this to set device I d.

  • And now, every time a user types in here, it's gonna give us It's going to change the state for this component, the device I d ST and for the value we're gonna put in device i d.

  • S.

  • So what this will do for us is this makes this input Now what we call a controlled input or controlled component because the value is now controlled by our components state.

  • So the value is the state.

  • And when you change the value of the input that updates state, let's save it and see if it worked.

  • Let's go back here.

  • Yep.

  • And look, we have Yeah, that And if we check So let's let's inspect this and see if we can see the state updating Make this a lot bigger.

  • We should be able to see the state updating for you could find our route component.

  • Let's get rid of that.

  • Maybe it's app.

  • Yeah, All right, so here we go, Here's our state and we can see as the tape the ST Changes.

  • So it's working.

  • Is that that's working right?

  • No.

  • Are, uh, let's go back to our code.

  • Let's see what we descend.

  • So, user.

  • All right, So if we make a to create a new notion, all we need is the device I d.

  • So you may be able to test that out right away.

  • That's about our users set user.

  • So we're getting the user from subscribe here, so we don't need it to input the user, so we may be able to try it out to see If we can sink this device, well, let's give that a shot.

  • All right.

  • Cool.

  • So we're gonna need to change the code just a bit, though.

  • Um, so if there's a user we set user.

  • I want some type of indication, though, that this is actually working.

  • So let's add in a little bit of text here and say, if a user, then let's render a little text it says Logan.

  • That way we'll know it worked.

  • S So what this is doing is it's checking that state for user, which should be empty.

  • Let's double check that.

  • So users now is said to know at first.

  • But if we successfully log in with our device that we should be able to subscribe and get a user, and then that will set the user, then down here will detect that there is a user and we'll say, Okay, now let's display the text log in.

  • So if you're not familiar with reactor react native, this might be a little bit confusing to you.

  • Feel free to ask some questions.

  • I'll try, Thio explained.

  • As much as I can.

  • In about 10 minutes, I might take a break and look at the questions here.

  • Um, but let's give this a shot.

  • Now, if I miss something, I'm sure it will throw in error.

  • And we can We can fix that.

  • But for now, I think we have Let me give it to save here.

  • Just verify that that's working.

  • Okay.

  • Great.

  • Oh, I know what we need.

  • We need a button.

  • We need some sort of button to submit this.

  • Right.

  • Okay, so let's add in a button and react.

  • Native actually has a button.

  • Well, let me, uh, imported here.

  • So that's import button on.

  • So you have this button, and I guess we could check.

  • Let's check the documentation for this.

  • So we'll search for were already in your buttons right there.

  • Let's copy and paste the example for button.

  • Here we go.

  • So it's going to say, press me, and then it's going to run this alert, but we don't want the alert.

  • What we want is on press.

  • We wanted to run this.

  • Ah, this use effect.

  • So, um, what will do is let's just grab this code.

  • Yeah, I'm gonna grab this code.

  • I'm gonna comment this out because we're gonna want it to behave like this at some point, but for now, we just wanted to say, um, see, we'll just call it log in Le Guin, and we'll make this an arrow function and leads pieced in this good groups.

  • It's not working.

  • Get rid of that.

  • We're rid of that port.

  • Okay, Notion.

  • Uh, let's do this is because notion equals no.

  • And then that way we can set notion here about that hoops.

  • Let notion equal.

  • Baby, we're declaring it.

  • Okay.

  • What happened there?

  • Okay, so he already have notion is a state.

  • Let's back up a little bit.

  • Why is it giving me this?

  • Because I got too many brackets, that's where There we go.

  • Okay.

  • So now we have a log in function that should get us what we need here.

  • We just need to call it on press.

  • There we go.

  • Yeah.

  • Yeah.

  • All right.

  • So we're gonna We saved it.

  • Let's try it out.

  • Uh, loading.

  • I messed something up.

  • Uh, yeah.

  • Why does it say in loading if loading.

  • That's why it's saying that.

  • All right, let's let's just set loading the false for No.

  • There we go.

  • Okay.

  • I need to get my device.

  • I D So on another screen, I'm gonna grab my device.

  • I d see if I can I find it.

  • I thought I had it up already, but there we go.

  • And actually, let me move this over real quick.

  • Not really sure if I was supposed to show Might have.

  • I said you're not, but I know how to fix that.

  • Let's do this.

  • I'm gonna set the with 25 so check this out.

  • So the width of my Texan put us five.

  • So when my pace My device idea in.

  • Ah, everybody saw it anyway.

  • Oh, I'm not that worried about it.

  • I just want to see what era we're getting.

  • If this is not working, we should get in there.

  • I'm getting nothing.

  • Am I getting anything in the network?

  • What's going on?

  • Nothing.

  • All right, let's throw in.

  • Cem.

  • Consul looks.

  • So first thing I want to see is is our log in function even being called at all?

  • So let's say console.

  • Uh, I'm just gonna put in a little string there just to see what's happening.

  • All right, A Here we go.

  • We got something this time.

  • Oh, nice.

  • So it did run and we got an error.

  • So we got illegal at name from fire base.

  • Check our network here.

  • It's just Yes.

  • So it looks like it's trying to do something, so that's a good That's good progress, right?

  • All right.

  • Good progress.

  • I'm also gonna check my timer, because it's gotta be just about time for taking questions here.

  • Yep.

  • About a minute.

  • I'll stop and answer some questions.

  • And at this point, it looks like new notion of a city Said nation.

  • Well, let's check our state.

  • Let's see if we got anything back, Uh, because I wonder if if we're getting an error on this part or for getting an air on this part.

  • So let's see if the state update it all good or components here.

  • And one of these cooks is the state that we're looking for.

  • So let's pace that in cool.

  • Look at that.

  • All right.

  • Awesome.

  • So we got our, um We got our stuff here.

  • We get our response there.

  • At least we got something right.

  • Eso I believe in our error would be in the, uh, in that second part that we saw.

  • Right?

  • So this is happening.

  • We're setting all the data.

  • We get back after we do this, we're being set here.

  • Then this is running, and we're trying to subscribe and get a user.

  • But something's happening there.

  • So let's take a little break.

  • I'm answer some questions, and then we're gonna come back and see if we can figure out what else we need to do here.

  • At this point, it might not be a bad idea to go look at the, uh, the demo react code provided by no, Rossi, the people who make the headset and see what they did.

  • Because I know I didn't copy and paste everything over, uh, and I bet that there's some other stuff happening that we need to do to make that work.

  • All right, so I need a We make the text on the chat a little bigger so I can see.

  • Here we go.

  • Okay.

  • All right.

  • For everybody who just joined a CZ.

  • Well, I'm gonna use this brain computer interface.

  • I did a demo video kind of an intro to this brain computer interface device on my channel.

  • So check the link in the description to go to my channel.

  • Ah, and then you will be able to find that that video on a brain computer interface and get kind of an overview of what this thing is and what it can do.

  • And let's see, I'm kind of just strolling through the, uh, chat right now looking for questions.

  • Ah, a couple questions about what language you're using.

  • This is react native and the languages JavaScript with typescript.

  • Um, I have a question about for cyber security.

  • What is best?

  • Um, b tech in C s.

  • Uh, or I t tell you the truth, I don't I don't really know if anybody out there is in cyber security can answer that question.

  • Uh, kind of were wondering what type of degree is best for cyber security.

  • See?

  • Hi.

  • I'm from the Philippines.

  • It's a great feeling to see you code here.

  • Thanks for sharing.

  • Oh, you're welcome.

  • Thanks for saying that.

  • That's awesome.

  • Uh, Michael Wall says C e h for ethical.

  • Hacking is an option.

  • Okay, that's cool.

  • Is that certified ethical hacker, I believe is the C E h.

  • Lonnie said was to close up.

  • So I had a video of my face in the beginning is to close up.

  • I will remember that maybe I will back up a bit.

  • Uh, next time, Code Dragons is learning a lot from your channel.

  • That's awesome.

  • That's also there's a lot of good content here on the free code camp channel.

  • Um, a lot of lot of really smart people contributing, S O.

  • I mean, my life streams.

  • It is what it is.

  • You're right.

  • Ah, but there's some.

  • Really, Even if you don't care for what I'm doing right now, check out the other videos.

  • They're they're really good.

  • Uh, Rod says it would be great to see more life coating videos on the free code can channel.

  • I'm really gonna try to do some more life coding.

  • I used to do it a lot more and gotten away from it.

  • And, uh, I had a lot of stuff happening with my job.

  • So I'm I'm not able to work from home as much as it used to be able to have some health issues going on, but I think I got that all worked out now and hopefully, and so I'm gonna try to get on a better schedule, so I can, um uh, live stream or Jeff says Thanks for coding.

  • lives, so we can all watch.

  • This is awesome.

  • You're welcome.

  • Thanks for watching Collins as what do we use react for exactly.

  • Okay, so react.

  • It's a library that helps you build Web APS.

  • Uh, I think it's some of its strength, at least from my point of view.

  • Are making state management easy.

  • It's once you kind of learn it.

  • It's it's It's pretty simple to kind of think through the flow of state S O.

  • I like it for that, and there's a lot more to react, but basically it just helps you build Web apps.

  • React Native uses kind of the same concept, the same logic, but then lets you apply that to mobile.

  • APS, I see, not found, says what will the back end be built in?

  • Eso No.

  • Ross ITI, the company that makes the brain computer interface, has their own kind of back end for handling, like the data that's coming from the headset.

  • So we're gonna take advantage of what they're providing, and then we won't, at least in the stage one.

  • We won't need our own back end as we add later functionality.

  • That's something we might need to to talk about and think about, but I'm not 100% decided On what?

  • What exactly we would need in what we would use for that.

  • I see him getting to the point of the chat.

  • Where are my kids Came in and s o thanks.

  • Everybody is saying the kids are cute.

  • Yeah, that's the real for a while.

  • I got to tell you, I wanted to stream or but I was a little bit embarrassed by my set up.

  • Uh, and I know it's silly cause if you washed me before, you know, I've done a ton of streams and my setups always been not that great, but I got just I'm in a basement and the, uh the quality in terms of like, audio is probably not great because kids and everything going on, um, but then it hit.

  • It hit me, and it took me way too long to realize this.

  • But, you know, that's if I want my stream to be authentic in how it really is for me to code.

  • Then I should just leave all that stuff in.

  • So I decided just to go for it and, you know, in stream with all the distractions and everything built in.

  • Uh, so hopefully, uh, everybody kind of understands that, you know, this is not like a professional thing that I'm doing.

  • It's just a little side thing.

  • So, um, there will be distractions.

  • And, uh, and noise.

  • Carlos says this is the most authentic life you have ever seen.

  • Subscribing now, that's awesome.

  • All right.

  • Ah, our RV says, where can we get that brain device s o if you look up?

  • No, Rossi, let me Let me give you the link.

  • Actually, let me give you the link to the website.

  • Double check, and I have the right Lincoln.

  • Then I'll paste it in me pace that Lincoln for you all.

  • This is the website for the generosity had said, I believe you can join.

  • I think there's, like, a wait list right now.

  • Um, but you can join that and see about getting it getting the headset.

  • Okay.

  • All right.

  • So I am going to go back to the code now and do a little bit more code, and ah, let's see.

  • Looks like someone in a chat using some, uh, some language, so I'm gonna hide that user's messages.

  • So, uh, let's see.

  • So anyway, hopefully all didn't see that.

  • I think I think most of the messages were hidden by the filter, but somebody was not being nice.

  • So, uh, I, um cool.

  • See, I'm a double checking that I got everything all right?

  • Cool.

  • Um anyway, sorry.

  • It took me a couple minutes to catch that.

  • I tried to keep everything through.

  • Ah, uh, positive.

  • We'll see.

  • You might be somebody else.

  • I use it.

  • All right.

  • I think I got all the people causing trouble.

  • So anyway, on my channel and on a free code camp channel, I try to keep everything positive.

  • So, uh, if you get if you want to be negative, there's so many places on the internet you can just go and talk trash if you want to.

  • Uh, this is not the place for that.

  • So try to keep everything encouraging.

  • I'm I don't mind if you want to criticize what I'm doing in terms of my coding abilities or my ability to live stream.

  • That's fine.

  • I don't mind that, but I don't want you calling anybody else names in the chat.

  • Uh, so if you d'oh, I'm I'm not gonna make a big deal.

  • Uh, I'm just gonna hide all your messages.

  • So, um Anyway, uh, hopefully that's that's through.

  • And we can get back to some code, so yeah, let me get back to some goat here.

  • Probably.

  • Let's see, right.

  • Maybe go for, like, another half an hour or so.

  • And then I'm gonna I'll stop screaming.

  • So, you know, I don't wanna It is the weekend.

  • I want to spend time with my family.

  • So I figured I'd take about an hour to do some code.

  • And then, um you know, you know, we won't finish today on this app, but, you know, I'll, uh, I'll give it another shot later in the week and see if we can get it.

  • Get it finished.

  • So what I'm gonna do now is we're gonna go to this, uh, this repo let me make it bigger.

  • So this is just on.

  • Get hub s O.

  • I already put a link to this in the in the chat.

  • If you weren't here, I'm gonna link it again.

  • And here you go S o.

  • If you want to check it yourself, that links now in the in the live chat.

  • But I want to go in here and see this is like the react they called their react starter.

  • Right?

  • So we do need to change some things, though, because this is react native.

  • So I'm gonna go in here to the source and let's check out their app Js and see if we're missing something important.

  • I assume that we're missing something important.

  • That's why it's not working.

  • So I'm gonna make this little bigger.

  • I shall make sure everybody can see a little bit bigger.

  • That might be a bit too big, but better to be too big and too small in terms of visibility.

  • Eso Somebody may be watching us on the phone, so Ah, no, I know like so we have these rights.

  • We have this.

  • We're good.

  • We did comment this out.

  • I see.

  • So they're doing some navigation.

  • So they're navigating too, Uh, some other components.

  • So that might be part of the piece that we're missing.

  • But let's see, let's keep reading User to return to try to set the user.

  • Okay.

  • Okay, So they're using react router.

  • And they have this log in, which is basically what what we're doing is the log in screen for the most part, and they're passing the log in screen This info.

  • Okay, so let's check out and see, uh, what kind of logic they have going on in their log in screen.

  • See if we're missing something.

  • Let's go back to our source.

  • We'll go into the pages, log in.

  • Oh, I see.

  • So they're theirs, and they're getting email password.

  • So it looks like we need a little bit more is ah, we need the email in the password.

  • So they need their prompting people for the email on password, so we're definitely gonna need to do that.

  • So here's what I think is probably happening with their happened should happen.

  • Is that the, uh after they do the part that we did, then the user's prompted for more info?

  • Uh, so that's the next part that we have Thio that we have to do.

  • So I guess Let me make this a little smaller so I can get kind of a big picture.

  • What's happening might be able to just copy and paste some of this stuff.

  • Fine.

  • Well, we actually need here, so we need So this is notion dot Log in.

  • Okay.

  • All right.

  • I think we need to add an e mail in a password field, and we need to add in state for email and password as well.

  • So I'm just gonna grab this first, and I'm gonna try to do it all in one in one page for now, in one file just for, like, simplicity down the road, we may end up like breaking it out into different files, different components.

  • And let's grab this use effects.

  • Well, put it down here, and we're gonna have to get rid of some of it.

  • But that should work for now.

  • Um, let me see if I need something else.

  • I think we're good.

  • At least for now.

  • Get us to the next step.

  • But least so we don't need that.

  • I don't need that.

  • And I don't need that.

  • And I'm not going to do this because I'm just gonna console over the air.

  • Okay.

  • All right.

  • So this use effect will only run if some of this data changes.

  • So he's a solution.

  • We may not may actually not want it like this, uh, function.

  • You may want to change.

  • Let's change the name of our function.

  • Um, let's just change it to in it for like, initialized to this button is not gonna be initialize.

  • Okay?

  • And we'll do it like this.

  • Let's do it.

  • Let's Let's, um, make Maur text boxes here.

  • That how we should do this, You know, let's just make some or text inputs to get all the data we need.

  • I had two more text inputs, and instead of device I d.

  • It's going to be set email, email, and then we're going to say, set a password and the value will be password.

  • So this is going to give us three text inputs now, and they're gonna be linked up with our new state.

  • So the first text input is going to be device idea.

  • Next one will be email on the next one will be password.

  • Okay, so we're gonna have these in there.

  • Now on.

  • Let's save it.

  • Just make sure we haven't broken anything yet, But we got all three of these, and I got him real skinny like this just so that it's not too obvious what my password and stuff is.

  • Uh, So, uh, okay, now on press me, we're not actually doing anything, but let's let's change that we're gonna change the logic a little bit here.

  • Eso currently on in it.

  • We're getting this new notion, right?

  • We're setting notion.

  • And then this use effect works were trying to set the users who were subscribing, and we're trying to set the user here.

  • Um, when we get the user, actually, what we could do there is e mail.

  • Wait.

  • Did they have their their own in their own version of it?

  • User, actually gonna I'm gonna call made this out for now because I think the log in let's go back and look at our apthe Js again and see what we had.

  • Uh, so if he's, er else navigate, I see.

  • So we took some of this stuff out.

  • I believe this is what I believe is happening.

  • Um, so if you can't get a user, it navigates you to the log in page, and then you have to Logan.

  • So logging needs to happen first.

  • So the set user is being passed down as a prop.

  • So we're good.

  • We're actually good in a way.

  • We're doing this in that We, um the next step is this step here, and so I just want to make sure this runs on Lee when we we wanted to run.

  • So, uh, these effects, I guess I guess you were.

  • As long as we enter everything in properly, I think this should work.

  • Okay.

  • I think it's you work at least to get us in the next step.

  • Now, what I want to do is figure out what my password is them supposed to put in here.

  • So you go back to I'm doing this off screen.

  • Just thio hide, I guess.

  • What?

  • It But this is so Oh, I know, I know now.

  • So the way this works is I put in my device I d in my email and I should get an email with my password in it.

  • I think that total work Let's double check.

  • You know, we could do We could just clone this already forthis.

  • Maybe I did.

  • Let's forgets clone it, run it.

  • Then we'll know what the flow is supposed to be from a user perspective, but a clone it on.

  • We just go right in here and clone it from here.

  • I'm doing a get clone now.

  • I should have this available.

  • So let's look at my projects.

  • folder and see Oh, does it notion React starter.

  • So that CD into notion react Starter.

  • I'm gonna open up a new V s code window, and then I'm gonna go back to the right folder here so I don't accidentally mess things up.

  • Confusing.

  • Stay focused.

  • All right, Now, let's go toe other V s code window and just run this really quick.

  • Do a new terminal.

  • Let's run.

  • Uh, p p m I So that one stole everything.

  • I wonder why that packing Jason was so long.

  • Actually, click the package left Jason.

  • Good.

  • So this is once this installs would just run it.

  • There we go on PM, Run, start cool.

  • Oh, I see.

  • All right, So they have.

  • See, we weren't We weren't really that far off.

  • This is kind of what our screen has on it.

  • It doesn't look like it, but it has this device I d e mail and pass for it all in one.

  • Go.

  • Interesting.

  • But how am I supposed to get the past to go back here and see Shekhar ducks make it a little bigger?

  • All right.

  • Uh, yeah.

  • Let's see the web.

  • All right, device I D email in passing.

  • Maybe it wants a password that I use.

  • Yeah, give it a shot.

  • Uh, I'm thinking it was the password that I use for, um, liketo actually log in to the notion.

  • So let's try that.

  • See you again.

  • So I'm gonna grab the device, I d.

  • And I'm gonna turn my device on, and I put it in my email and then the copy and paste my password released.

  • What?

  • I think the password would be, uh Let's see what happened.

  • Wrong passer.

  • Hey, cool.

  • Like we get you have four other in the process.

  • All right, let me try a new password than wait.

  • Did that work?

  • They really work.

  • I think it did.

  • All right, It's cool.

  • Let's check out.

  • Yeah.

  • Okay.

  • So this nice that works.

  • Sweet, sweet, sweet, sweet.

  • All right, cool.

  • All right, so that worked.

  • Um, I didn't really expect that to work so quickly.

  • So what's the next step?

  • Let's go back to the code here.

  • Next efforts.

  • Not that.

  • All right, So now I guess we can say we subscribe.

  • What the user do we already have.

  • You know, I think we do.

  • I think we've set.

  • Yeah, we've authenticated.

  • We've set the user yet.

  • What's the second hook?

  • The second hook.

  • His user.

  • So we saw that data.

  • Um, we have that data now to the second hook here we have.

  • Cool.

  • So since we have that, we can look.

  • Now what?

  • Kind of like the next step?

  • Ah, so we have our code here.

  • Let's see what we do next.

  • Uh, that's our comb stage.

  • So doing a subscription.

  • Now, the subscription that they're doing here is this notion dot com subscribed to calm.

  • We want to subscribe to focus.

  • So I think we can just let's grab some of this year.

  • Yeah, let's grab this and bring it in.

  • That's C.

  • All right, so I'm gonna pull this in here.

  • So we should get then is everywhere we say calm.

  • I'm gonna change it to focus.

  • Ah, focus.

  • All right, so we're going to subscribe to the focus, and for this, I'm actually gonna let me put this on, okay?

  • So you can actually get some real brain with, See if I can fit my headphones on top of it.

  • Actually, can.

  • That's cool.

  • It's not very comfortable with these big headphones.

  • Uh, all right.

  • Cool.

  • So what I want to do, I guess, is, um I don't want this to be, actually, yeah, this could be a use effect, so we'll just do it like that.

  • So this year's effect Well, say, yeah, If there's no user or no notion, then it's just gonna return, Right?

  • But if we have both of these, then we're actually gonna run this.

  • We're going to get this this focus, it's gonna be a number, and we want to display that.

  • So instead of this logged in, I want to display focus in react.

  • If I put brackets in there, then I can run Java script inside.

  • So this is gonna get me not the word focus, but the value of focus in state so that save that I'm gonna have to put in all my soul that currently we're not saving any of the data.

  • Uh, so I'm gonna have to log in again, but bear with me for a second while I get all this log in stuff in again on this, uh, at work.

  • Uh, David, did that not save, uh, didn't work this time.

  • What did I mess up?

  • First argument was invalid.

  • Comb set comb.

  • What the heck?

  • I thought we get rid of all the comb stuff, didn't we?

  • We did.

  • Was it still trying to set?

  • Cool.

  • Look at that.

  • All right, so my comb score right now is 0.51 Cool.

  • Let's see if I can.

  • Yeah, there we go.

  • So it's updating.

  • So I lost focus there.

  • Do you see me?

  • I looked over there and lost focus.

  • So this is giving me a real time focus score, Basically, like how focused I am.

  • Um, right now that that is pretty cool.

  • So this is, um let me do.

  • Yeah, cool.

  • So I want to show you.

  • Let me show you the screen.

  • So, like, this is the developer kind of console things you could see.

  • This is focus, right?

  • It's like tracking.

  • Ah, my focus levels.

  • So, like, a higher number means I'm more focused.

  • This is between zero and one.

  • So what we've done here, let me see if I get split screen it.

  • Yeah, there we go.

  • So, like these focus numbers, it's it's right now it's reading the same feed.

  • So I guess like we've we've succeeded now.

  • Ah, successfully connecting this to a react native app.

  • So I'm getting data from this brain computer interface headset.

  • It's going out to the new Rossi servers, right?

  • And then they're providing this, a p I that I could subscribe to in my app.

  • That's giving me this this data.

  • So now we're getting really time data about my level of focus in my brain in this react native app.

  • So that's pretty sweet.

  • The next step, then would be a, uh, Alex, who built.

  • He's the co founder of Generosity, is watching the stream so awesome.

  • Glad to have you here, Thio.

  • So, like right now, essentially like it works, right.

  • We can connect this into react native.

  • The next step would be It's kind of a pain after log in every time, right?

  • So would be nice if we could save this data somewhere locally on a user's machine so that it'll auto log you in.

  • So I'd say that's probably the next step that I'd like to do, because that would really help save time, because it, you know, it just takes a while to keep copy and paste in that every time we do something new and make a change.

  • So that's probably the next step that I'll do in the next dream, cause I think s o I'm over the hour Mark and I only wanted to take in an hour.

  • Ah, I don't want to take too much time away from my family here on on a Sunday.

  • So on the next stream will work on saving this in whatever version of local storage we need.

  • So, on the web, it would be the browsers, local storage, but on an IOS, or android device, that would be different.

  • So we need to make sure we coded so that it'll work on whatever platform we're running on.

  • So it'll save that information so we don't have to log in every time.

  • Then we can try to figure out from thresholds and say like, All right, let's say if I dropped below, uh, 0.2, then it's gonna do something, right?

  • Vibrate making noise, flash the screen.

  • It's gonna do something to warn us that are attention is dropping below the threshold that we set.

  • So, uh, I see that That's probably a good a good next step.

  • Also, I think I would kind of want thio, uh, use maybe, Ah, like a simulator, Right to make sure we can simulate what's happening on a on a mobile device.

  • Uh, so I can run it on my mobile phone, but it be harder for you to see it.

  • I guess I could hold it up to the camera, but I'm gonna see if I can maybe get like, an android simulator running for the next time.

  • We could do this.

  • Also s O Alex.

  • And the chat says you could use react native, a sink storage library, which that's a great A.

  • Um, that's a great suggestion.

  • I actually contributed to the late the new version of React Native A sting stories.

  • So I don't think it's out.

  • It's so if you use the react native community, a sink storage package, the latest like development version has, um, a bunch of contributions that I did to get it to work with local stores and the browser s.

  • So I'm actually I'm kind of proud of that, because that was a lot of work in.

  • I did do some live streams about that, too.

  • So I think I put that on my channel.

  • If anybody's interested in how that works, but, uh, all right, cool.

  • So I'm just gonna leave this up on the screen for now, just to kind of see, like, all the all the data going here.

  • Um, I'll leave.

  • Believe this as well.

  • Um, and then let me go back to the chat.

  • I'm gonna get through the chat kind of quickly as it is.

  • I wanna I don't want to stream too much longer.

  • I'm gonna get back to my kids here.

  • Um, but I do want to answer some of your questions, So I'm gonna try to extremes to answer questions.

  • If I don't get to something, put it in the comments, and I'll try to get to it.

  • You can definitely, like, shoot me a d m on Twitter or something if you want to, uh, if I don't get to your question, but I'm gonna try to get to as many as I can.

  • Uh, the genius marketer says, Do you recommend w three schools or what?

  • To get some code.

  • Um, if you're If you're trying to learn how to code, check out free code camp eso.

  • It's free code camped out or they've got awesome curriculum.

  • Um, people have gone through the free code can't curriculum and have gotten jobs and stuff.

  • So, um, I would definitely definitely check that out.

  • I wonder why my my focus stuff, it would be I move too much.

  • I don't know what I did.

  • Uh, this one still work in the but yeah, definitely.

  • Check out free code, Kim.

  • That's That's a great place.

  • Uh, to go.

  • Tom Williams says his react native normal Java script or typescript.

Hey, everybody is Jesse.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it