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.