hey everybody it's jesse i know it's
it's been a while it's been uh since new
year's since i did a stream on free code
camp uh so i'm happy to be back
and uh i have a new mic so let me know
how it sounds if anybody can hear me i
actually got the uh
i got a nice upgrade here so this is one
of the
uh yeti
um microphones
uh so i saw a lot of a lot of streamers
using those had good reviews so i
figured
you know i've been doing this for a
while maybe i better upgrade
and i was doing some podcasts lately and
the audio quality is obviously very
important
but today
i want to
program something that's going to work
with
with this little headset
uh this is the let me see if i can get
the logo and plug it to
neurocity uh notion headset and
so once we get it hooked up maybe i'll
try putting it on and 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
doing a little demo of it so if you're
interested in learning more about that
particular headset uh check out my
my youtube channel links in the
description
and uh you can see it was one of like
the last few videos i did you'll see
that one in there
but
today i want to actually code
a an app a react native app that will
run on on mobile
that will sync up with this headset and
allow you to do some stuff so phase one
of this app
is gonna be
uh
just just sync the device up
and
track
your focus and if you start to lose
focus we're gonna do something on the
phone so
i haven't decided for sure yet maybe
vibrate the phone or
make a little noise
something like that
that's gonna be like the mvp phase one
that i'd like to actually get out
on the app store
after that
i think it'd be cool to maybe add more
features uh see if you could
make more things happen uh in terms of
focus i'd love to be able to have it run
on uh like android auto so you could
track your focus while you're driving
and get an alert if you start to lose
focus
so
uh there's some
some cool things you could do
beyond just focus you can also train
gestures so if like i said check out the
video if you want to learn more about it
but basically it's possible with this
device to
think about doing something like moving
your arm
something whatever whatever you want to
think about
and then trigger an action
so any action you can think of uh for
either something on the internet or an
internet of things connected device
so
i'm hoping to do a lot of cool stuff
with this
but first step is we just need to get it
hooked up and working with an app
and
so that's what we're going to start with
so basically all i've done
uh if you haven't seen my my live stream
before the idea is i it's
there's no prep work beforehand
i don't rehearse
or even do that much research beforehand
because i wanted to be
uh as authentic as possible in terms of
uh what a developer would go through
when they're approaching new problems uh
and 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 gonna check the live chat so there's
a lot of activity in the live chat
and i just wanna say hey to everybody in
the chat now
and let you know i'm not ignoring your
questions i'm going to get to all your
questions and comments but i'm just
going to code a little bit first
okay so
i 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
hey 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
my timer
i've lost my timer app
oh well
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
and let's do
let me just get give you the basics of
what i've done here in the code first
all i did was scaffold a project using
expo
uh so
expo is a um a way to use react native
uh
that if you're not familiar with react
native react native is using javascript
to build android and ios and web apps
right expo helps you to do that it makes
react native easier to work with so i
just
used exo expo i'm on this is pretty much
the latest version there might be some
minor versions after this but uh we're
pretty up to date if you hear noise in
the background that's my kids i have
four kids and they're all running around
so uh you may
hear that
[Music]
hey i'm i'm doing a live stream right
now
[Music]
ambrose i'm sorry if nobody wants to go
outside with you buddy can i eat your
cookie
go ahead upstairs you already had ice
cream but i want to have your cookie
dough
no eat your ice cream and be good
want cookie dough bites
gemma
you already had cooked up boys please
take your sister upstairs
here you want to stay with me yeah all
right look why don't you sit over there
and you can watch the live stream okay
you want to do that all right buddy
all right sorry about that my
my five-year-old's very upset
gemma please go upstairs
my father was very upset because no none
of his siblings wanted to go outside
with him so
um
so uh
it's ambrose
all right so
the um
where was i totally on track oh react
native so we're using react native
uh with expo
and
we were just going through the package
json
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
pretty good with that we are using
typescript as well so typescript um
is
something you can use with javascript to
help have uh be like a more strongly
typed uh version of javascript
uh
there's a ton of info about typescript
out there so i'm not going to take a ton
of time to explain it but basically like
the javascript 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
and just show you what i have so far i
just took the boilerplate that expo
gives you that lets you run an app and i
added in
some of this authentication stuff now
let me copy and paste in the starter
um
github repo into the chat
so you all can check out the github repo
that i'm going to be pulling some code
from and i haven't put
my code on github yet but i will and
i'll include that link in the in the
description
so
the
the creators of the nerosity notion
brain computer
have already made a react
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
so that's where i pulled some of this
code from
the the only thing that i think won't
work is so they're using this uh local
storage stuff we don't have local
storage on
um an app right there's different
storage so we're gonna probably not be
able to use that uh otherwise i think we
should be able to reuse a lot of this
code
okay so
i got basically to the point where i
needed to put in some text inputs
and that's where i i kind of stop so
we need the user to
input a little bit of data
from their device so everybody's going
to have a different device id and that
they're going to need to use
everybody who uses the app so we need to
provide them with some some inputs 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
going to let me run as a web app
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 yep there we go
so it didn't list it as an option but if
you hit w you can open it as a a 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
let me pull this over and just 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 so these are our
react hooks
right so um we can keep this in and just
say use state
and instead of device id let's go
let's just give it an empty string for
now
and we have this what is this navigate
thing here um
let's
comment this out for now
and the innovation device id
we don't have a device id so okay this
is covered
and we need to
rid of this
subscription
set user we're set user
okay
all right let's see if we can at least
get it to run
all right cool so we got it to run so
you can see let me make this bigger
so that's the the text that we have
so we actually have this app running now
we're running it
in kind of web mode
so it's not exactly
the same as running it on a mobile
device but it's going to give us a good
idea without having to go through
everything about like running a mobile
simulator it's going to give us a pretty
good idea what our our app is doing
at least to be able to say like does it
even
even work am i getting like crazy errors
so that's a good start
um but we need the user to be able to
put in some data right so
we need
the
device id
that's probably the most important thing
and set users to delay cities
yeah so we definitely need a text input
for device i id so you can see i've
already pulled in text input from react
native
react native comes with um a bunch of
components like by default
so we're going to 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
make your notion the headset is called
the notion headset and let's put in text
input
and
i don't think we need like that
let's look up
what all the props are that go into a
text input right so let's go back to
our our chrome here
and let's look look uh
react native
text
input
and uh in about about 15 minutes i'm
gonna 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
i i don't intend to ignore the comments
there we go this is the react native
documentation and this will give us just
a little example
um
yeah actually let's just copy and paste
this example and that'll give us a good
place to start
hey ambrose can you uh don't dribble
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 the style yet
i'm not that worried about the style uh
this at first we're just gonna 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 text
but in this case
what i want to do here is uh add the
device id so if we look at our hooks up
here
we have set device id as our hook so
we're going to
change this to
set
device id
okay
and now every time a user types in here
it's going to give us
it's going to change the state for this
component the device id state
and for the value we're going to put in
device id
okay 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 component state
so
the value
is the state and when you change the
value of the input it updates state
let's save it and see if it see if it
worked
let's go back here yep and look we have
we have that and if we check so let's
let's inspect this
and see if we can uh see the state
updating
i'll make this a lot bigger
we should be able to see the state
updating
for our
see if we could find our root 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 type
the state changes
so
it's working at least that's that's
working right
now
our uh
let's go back to our code
let's see what we need to send so
we need a user
all right so if we make a to create a
new notion all we need is the device id
so we may be able to test that out
right away
let's talk about our user set user
so we're getting the user from subscribe
here so we don't need to to input the
user
so we may be able to try it out
to see if we can sync this device
yeah let's give that a shot
all right cool
so
we're gonna need to change the code just
a bit though
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
user
then
let's render
a little text
it says
logged in
okay that way we'll know it worked
so what this is doing is it's checking
that state
for user which should be empty let's
double check that
so user is now is set to null at first
but
if we successfully
log login
with our device
then 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 logged in
okay
so if you're not familiar with react or
react native this might be a little bit
confusing to you feel free to ask some
questions i'll try to
explain as much as i can in about 10
minutes i'm gonna take a break and and
look at the questions here
but let's give this a shot now
if i miss something i'm sure it'll throw
an error and we can uh we can fix that
uh but for now
i think we have let me give it a 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 uh react native actually has a
button
well
let me uh import it here so let's import
button
oops dude
and
so you have this button and uh i guess
we could check let's check the
documentation for this
so we'll search for
we're already in here buttons right
there
let's copy and paste the example for
button
there 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 want it to run this
uh
this
use effect so
um what we'll do is
let's just grab this code
yeah
so i'm going to grab this code i'm going
to comment this out because we're going
to want it to behave like this at some
point but for now we just want it to say
let's see
we'll just call it login oops we'll say
login and
we'll make this
an arrow function
and let's
paste in this code
oops
it's not working
let's get rid of that we'll get rid of
that part
okay
notion oh
let's do this let's do closed
notion equals null
and then
that way we can set notion here how
about that
whoops
let
notion
maybe
are we declaring it
oh okay
oh what happened there okay so we
already have notion as a state
let's back up a little bit
why is it giving me this
because i got too many brackets that's
what
there we go
okay so now we have a login function
that should get us what we need here
and we just need to call it on press
there we go
there we go all right
so we're gonna
we saved it let's try it out
oh
loading
i messed something
up
all right where are we at
why is it saying loading if loading
that's why it's saying though all right
let's
let's just set loading to false
for
now there we go
okay
i need to get my device id
so on another screen
i'm going to grab my device id
see if i can
find it i thought i had it up already
but
there we go
and actually let me move this over real
quick i'm not really sure if i'm
supposed to show my device id or not
but i know how to fix that let's do this
i'm gonna set the width
to five
so check this out look
so the width of my text input is five so
when i paste my device id in oh
everybody saw it anyway oh well
i'm not that worried about it
i just want to see what error we're
getting
because we sh if this is not working we
should get an error
i'm getting nothing
am i getting
anything in the network
what's going on
nothing all right
let's throw in some
console logs
so
first thing i want to see is
is our login function
even being called at all
so let's say
console.log
i'm just going to put in
a little string there just to see
what's happening
all right hey there we go we got
something this time
oh nice
so it did run and we got an error so we
got illegal app name from firebase
check our network here
interesting
yeah 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 going to check my timer because
it's got to 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 device id set
notion
oh i know 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 if we're getting an error on this
part
so let's see if the state updated at all
go to our components here and
one of these
hooks is the state that we're looking
for
so let's
paste that in
cool look at that all right awesome
so we got our um
we got our stuff here
we got a response or at least we got
something right
uh so
i believe then 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 are being set here
then
this is running
and we're trying to subscribe and get a
user
right but something's happening there
so
let's take a little break i'm answering
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
neurocity
the 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 to
let me make the text on the chat a
little bigger so i can see
there we go
okay all right for everybody who just
joined uh as well uh 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 uh and then you will be
able to find that that video on the
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 scrolling through the
uh
chat right now looking for questions
a couple questions about what language
you're using this is react native and
the language is javascript uh with
typescript
um
i have a question about for cyber
security what is best um
b
tech in cs uh
or it tell you the truth i don't i don't
really know
if anybody out there is in uh cyber
security uh and can answer that question
uh we're kind of wondering what type of
degree is best
for cyber
security let's 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 wahl says ceh for ethical
hacking is an option okay
that's cool what is that certified
ethical hacker i believe
is the ceh
lonnie said it was too close up so i had
a video on my face at the beginning it's
too close up i will remember that maybe
i will back up a bit uh next time
uh code dragon says learning a lot from
your channel that's awesome that's
awesome there's a lot of good content
here on the free code camp channel
a lot of a lot of really smart people
contributing
so i mean my live streams
it is what it is right uh 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 uh they're really
good
uh rod says it would be great to see
more live coding videos on the free code
camp channel i'm really going to try to
do some more live coding i used to do it
a lot more and i gotten away from it and
uh had a lot of
stuff happening
uh with my job so i'm i'm not able to
work from home as much as i used to be
able to i had some health issues going
on
uh but i think
i got that all worked out now and uh
hopefully and so i'm gonna try to get on
a better schedule so i can um
uh live stream more
jeff says thanks for coding live so we
can all watch this is awesome you're
welcome thanks for watching uh collins
asks what do we use react for exactly
okay so react is a library that helps
you build web apps uh i think it's some
of its strengths at least from my point
of view are uh making state management
uh 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
so 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 let you
apply that to mobile apps
let's see
uh not found says what will uh the back
end be built in uh so
neurosci the company that makes the uh
the brain computer interface has their
own kind of back end for handling like
the the data that's coming from the
headset so we're going to 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 talk about
and think about
but i'm not 100 decided on
what what exactly we would need and what
we would use for that
i see i'm getting to the point in the
chat where all my kids came in and uh so
thanks everybody you're saying the kids
are cute
yeah that's the real uh for a while i
gotta tell you uh i wanted to stream
more but i was a little bit embarrassed
by my setup
and i know it's silly because if you've
watched me before you know i've done a
ton of streams so my setups always been
not that great
but like i'm just i'm in a basement
and
the uh the quality in terms of like
audio is probably not great because my
kids and everything going on um
but then it fi 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 and stream
uh with all the distractions and
everything built in
uh so
hopefully uh everybody kind of
understands that and
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 noise
uh carlos says this is the most
authentic live stream i've ever seen
subscribing now that's awesome
all right
uh
our
rv uh says where can we get that brain
device uh so if you look up neurosci let
me let me give you the link actually let
me give you the link to their website
and you are
double checking i have the right link
and then i'll paste it in
let me paste that link in for you all
this is the website for the neurocity
headset i believe you can join
i think there's like a wait list right
now
but you can join that and see about
getting it
getting the headset
okay
all right so i'm going to
go back to
the code now and do a little bit more
code
and uh
let's see looks like someone in the chat
using some uh
some language
so
i'm gonna
hide that users messages so uh
see
so anyway hopefully you all didn't see
that i think i i think most of the
messages were hidden by the filter but
somebody was
not being nice
so uh
i um
let's see
cool let's 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 try to keep everything
real uh
uh positive
let's see it might be somebody else
all right i think i got all the the
people causing trouble so anyway on my
channel and on the free code camp
channel i try to keep everything
positive so
uh if if you got
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
uh 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 do 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 code here
i probably
let's see
probably maybe go for like another half
an hour or so and then i'm gonna i'll
stop streaming so you know i don't want
to
it is the weekend i want to spend time
with my family so i figured i'd just
take about an hour to do some some code
and then um
you know we you know we won't finish
today on this app but you know i'll uh
i'll give it another shot
uh 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 github uh so i
already put a link to this in the in the
chat if you weren't here i'm gonna link
it again
and
there we go
uh so if you want to check it yourself
that links now in the uh in the live
chat
but i want to go in here and see this is
like the react they call their react
starter right so
uh 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 there app.js and see
if we're missing something important
i assume that we're missing something
important and that's why it's not
working
so i'm gonna make this a little bigger i
just wanna make sure everybody can see
a little bit bigger
that's might be a bit too big but better
to be too big than too small uh in terms
of visibility
uh so somebody may be watching this on
their phone so
uh
now i know like so
we have these right so we have this
we're good uh we did comment this out uh
i see so they're doing some navigation
so
they're navigating to
uh
some other components so that might be
part of the piece that we're missing but
let's see let's keep reading
let's describe the user
so we're trying to try to set the user
okay
okay so they're using react
and they have this login which is
basically what
what we're doing is the login screen for
the most part
and they're passing the login screen
this info
okay
so let's check out and see uh what kind
of logic they have going on in their
login screen
to see if we're missing something
so let's go back to our source
we'll go into
i guess pages
login
oh i see so they're they're saying
they're getting the email password
so it looks like we need a little bit
more
is uh we need to email the password so
they need they're they're prompting
people for the email and password
so we're definitely gonna need to do
that
so here here's what i think is probably
happening with their app and should
happen
is that
the uh
after they do the part that we did
then the user is prompted for more info
uh so
that's the next part that we have to
that we have to do
so i guess
let me make this a little smaller so i
can get kind of a big picture
of what's happening
might be able to just copy and paste
some of this stuff
trying to find what we actually need
here
so we need
so this is notion dot login
okay
all right i think we need to add an
email and uh 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 effect
and we'll 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
all right i think we're good
at least for now get us to the next step
at 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 log the
air
okay
all right so this use effect will only
run if some of this data changes
right so
here's your notion
we may not we may actually not want it
like this uh async function
we may want to change
let's change the name of our function
let's just change it to init for like
initialize
so this button is now going to be
initialize
okay
and
we'll do it like this let's do
let's let's um
make
more text boxes here
that
i don't know how we should do this
yeah you know let's just make some more
text inputs to get all the data we need
so we're going to add two more text
inputs
and
instead of device id it's going to be
set
email
and then we're gonna say
set password
and the value will be password
so this is going to give us three text
inputs
now and they're going to be
linked up
with
our new state so the first text input is
going to be device id
next one will be email and the next one
will be password
all right so we're going to have these
in there now
and let's save it just make sure
we haven't broken anything yet nope we
got all three of these and i got them
real skinny like this just so that it's
not too obvious
what my
password and stuff is
uh
this over
okay now on press me we're not
actually doing anything but let's let's
change that
we're going to change the logic a little
bit here
so currently
on init
we're getting this
new notion right
and we're setting notion
and then this use effect
works and we're trying to set the user
so we're subscribing
and we're trying to set the user here
[Music]
when we get the user
actually what we could do there is email
password
wage
oh do they have their their own
their own version of it user
i'm actually gonna
i'm gonna comment this out for now
because
i think the login let's go back and look
at our
app.js again and see what we had
uh so
if user 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 login page and
then you have to log in so login needs
to happen first
[Music]
so in so the set user is being passed
down as a prop so we're we're good we're
actually good in the 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 only
when we we want it to run
so uh
these effects
i guess
i guess it works as long as we enter
everything in properly i think this
should work
okay i think it should work at least to
get us to the next step
now what i want to do is figure out
what my password is that i'm supposed to
put in here
so let me go back to i'm doing this off
screen just to
hide i guess what it what this is so
oh i know i know now
so the way this works is
i put in my device id and my email
and i should get an email with my
password in it
i think that's how it'll work
let's double check
you know we could do
we could just clone this
have i already forked this maybe i did
let's fork this clone it run it
then we'll know what the flow is
supposed to be from a user perspective
i'm going to clone it
and we'll just go right in here and
clone it from here
i'm doing a git clone
now i should have this available
so let's look at my projects folder and
see
what is it
notion react starter
so let's cd into notion react starter
i'm going to open up a new vs code
window
and then i'm gonna
go back to the right folder here so i
don't
accidentally mess things up confuse them
stay focused
all right now let's go to our other vs
code window and just run this really
quick
we'll do a new terminal
let's run
uh
npe npmi
so that'll install everything
oh that's not i wonder why that package
json was so long i accidentally clicked
the package left json
good so this is
once this installs we'll just run it
there we go
uh
npm
run start
cool
oh i see
all right so they have
see we were 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 it
has this so device id email and password
all in one go
interesting
but how am i supposed to get the
password
let's go back here and
let's see our docs
make it a little bigger
all right
web uh yeah let's see the web app
all right device id
email and password
hmm
maybe it wants the password that i use
yeah i'll give it a shot
i'm i'm thinking it wants the password
that i use for um
like to actually log in to
the notion
so
let's try that
see what we get
so i'm going to grab the device id
and i'm going to turn my device on
and i'm gonna put in my email
and then
i'm gonna copy and paste my password
or at least what i think the password
would be
uh
um
and let's see what happened
wrong password hey cool
like we got
to get farther in the process
all right let me try a new password then
wait did that work
did that really work
i think it did
all right that's cool let's check out
yeah
okay so this
nice
that worked
sweet sweet sweet tweet 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
okay let's
go back to the code here the next step
is
all right so
now
i guess we can say
we need
subscribe
with the user
or do we already have a user i think we
do i think we've set
yeah we've authenticated
we've set the user yet because what's
the second hook the second hook is user
so we we saw that data we have that data
now
so this second hook here we have
cool
so
since we have that
we can look now at kind of like the next
step
uh
so we have our code here
let's see what we do next
that's our calm stage so
doing a subscription
now the subscription that they're doing
here is
this
notion.com subscribe to com we want to
subscribe to
focus
so i think we can just
let's grab
some of this here
yeah let's grab this
and bring it in
let's see
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
focus
all right so we're gonna subscribe to
the focus
and for this
i'm actually gonna
let's see
let me put this on
okay
so you can actually get some real
brainwaves see if i can fit my
headphones on top of it
i actually can that's cool
it's not very comfortable with these big
headphones though
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 use effect will say
yeah if there's no user or no notion
then it's just going to return right but
if we have both of these
then
we're actually going to run this we're
going to get this this focus it's going
to be a number and we want to display
that
so instead of this logged in
i want to display
focus
all right uh in react if i put brackets
in there then i can run javascript
inside so this is gonna give me not the
word focus but the value of
focus in state so let's save that
i'm gonna have to put in all my so like
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 login stuff in again
and
uh what else
password
all right did that work
uh did it did that not save
oh
didn't work this time what did i mess up
first argument was invalid calm set
sitcom
what the heck
i thought we'd get rid of all the calm
stuff
didn't we
we did
why is it still trying to set calm
oh look at that all right so my column
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
focus
yeah cool
so i want to show you let me show you
the screen
so like this is the developer kind of
console thing so you can see this is
focus right it's like tracking
uh 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 could split screen it
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
at 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 neurocity servers
right
and then they're providing this api that
i could subscribe to in my app that's
giving me this this data
so now we're getting real-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 hey
alex who who built
he's the co-founder of uh neurocity is
watching the stream so awesome glad to
have you here
so um
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 to have to log in
every time right
so it'd 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 in the next stream because i
think yeah so i'm over the hour mark and
i only wanted to take an an hour
uh
i don't want to take too much time away
from my family here on on a sunday
so um
on the next stream we'll work on
saving this in whatever version of local
storage we need so on the web it would
be the browser's local storage
but on an
ios or android device that would be
different so we need to make sure we
code it 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
some thresholds and say like all right
let's say if i drop below a point two
then it's going to do something
right vibrate make a noise flash the
screen it's gonna do something to warn
us that our
attention is dropping below the
threshold that we set
so uh i see that's that's probably a
good
a good next step also i think i would
kind of want to um
uh use maybe
uh
like a simulator right to make sure we
can simulate what's happening on a uh on
a mobile device
uh so
i can run it on my mobile phone but it'd
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 so we could do this also
so alex in the chat says you could use
react native async storage library which
uh that's a great a um that's a great
suggestion i actually contributed to the
late the new version of react native
async storage so
uh i don't think it's out yet so if you
use the react native community async
storage uh package
the uh the latest like development
version
has um a bunch of contributions that i
did to get it to work with local storage
in the browser
so i'm actually i'm kind of proud of
that because that was a lot of work and
um
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 i'll leave this as well
um and then
let me go back to the chat
i'm going to get through the chat kind
of quickly because i want to i don't
want to stream too much longer i want to
get back to my kids here
um
but i do want to answer some of your
questions so i'm going to try to stream
to answer your 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 dm on twitter or or
something if you want to
uh if i don't get your question but i'm
going to try to get to as many as i can
the genius marketer says do you
recommend w3schools or what to get some
code um
if you're if you're trying to learn how
to code uh check out free code camp uh
so it's freecodecamp.org they've got an
awesome curriculum
um
people have gone through the free code
camp curriculum and have gotten jobs and
stuff so
i would definitely
definitely check that out
i wonder why my
my focus stops
maybe i move too much i don't know what
i did
uh but
this one's still working though
but yeah definitely check out free code
camp that's that's a great place uh
to go
uh tom
williams says his react native normal
javascript or typescript you can use
react native with normal javascript or
typescript i chose to do it with
typescript
but you definitely could do regular
javascript
i just kind of recently got into
typescript i've been using it at work so
i'm
trying to trying to use it more
just to kind of really learn it well
but you definitely don't have to use it
let's see
i see some of you were trying to um
uh
share your email addresses and it got
blocked by the filter so i just i showed
that so if you scroll back up in the
chat those are visible now so you should
be able to get them get them now
all right there's a lot of cool
discussion about programming languages
in the chat so i'm not going to read it
all out but
i love it whenever there's great
discussion from from you on the chat
no beer says i'm hearing footsteps on
the floor yeah those are my kids playing
upstairs
i actually had a contractor come in and
look
and talk to me about maybe getting a
like a soundproof office to do these
videos in and they're supposed to get
back with me with an estimate
i kind of expected it sooner i don't
know it's taking so long but hopefully i
can get like a legitimate kind of
recording studio
at some point and then
uh
should be a little bit better audio
quality for these videos
hey christa mars is here how's it going
chris
uh chris demars has a cool podcast that
i did an episode on recently it's called
tales from the script so uh check that
out on i think it's it's on spotify i
listen to it through uh google podcasts
um
so yeah check that out i'm sure it's
available in all the different podcast
services
but um
yeah he does a he does a great job
yeah chris i'm doing good i was just
doing a little bit of coding i'm kind of
um
wrapping it up oh yeah that's true and
uh alex
um who was
he he was on the chat he's the
co-founder of neurocity uh was also on
the podcast as well so you can learn
more about nerosity and the brain
computer interface what they're trying
to do
and learn a little bit more about me if
you want if you check out the podcast
um so yeah chris chris just put in the
chat he's on spotify google podcast
apple podcast stitcher so
all the podcast things
um
yeah check check him out
let's see
all right we got a question from big
dodd it says i i got an exam in six
months
high school level and c plus plus for
entering a college do you think i stand
a chance i started learning c plus like
two months ago but is there enough time
uh you definitely have a chance you know
it's hard to say like how long it'll
take anyone but you know kind of depends
on how much time you have to study but i
you know don't don't quit on it i think
you have a chance you know if you study
hard at it
you know especially if it's high school
level i don't i don't really know what
they would expect a high school student
to know
but if you have six months left and
you've already been studying for two
months i think you you got a good chance
of doing well on the test
i don't know i'd like to hear other
people's opinions on this
i i haven't done any c plus plus code
except i took one c plus plus course
a long time ago
maybe like early 2000s
um but i don't remember that much from
it
uh so
probably not the best
to ask about c plus plus but i i
definitely think you could do it
uh omor says sir you are awesome uh
thanks i appreciate that he says thank
you for your wisdom and time i have no
idea how to code but i respect people
who share their knowledge thank you yeah
you're welcome welcome i'm
uh happy to share it and
um
yeah hopefully you all get something out
of this
uh no beer says what's up jesse it's
been a while for streaming how are you
uh i'm doing all right i um
uh i know it's been it's been a while i
um
to tell you the truth like
i've had uh i had some weird health
issues recently that we're kind of just
like keeping me from doing a lot i
i had like some scans done on my lung
and they found some like black uh
like shading like in the scans and turns
out i had like nodules on my lung and i
kept doing all these tests i couldn't
figure out what it was
so i wasn't that worried about it but it
got me thinking like hey if this is
something serious i want to spend as
much time with my kids as i can so i
kind of stopped doing any side projects
or streaming or stuff and uh but it
turns out i just saw a lung specialist
this last week i don't think it's
anything threatening he thinks that i
have like uh allergies and asthma
and um i found out i have sleep apnea so
like
i got a lot of stuff figured out but the
good news is
none of it is life-threatening right
it's all it's all fine so
um
now i'm hoping like
i'm hoping to be able to get back into
streaming more because i really love
doing this and uh i miss you know we we
kind of had like a crew of people that
would watch all the time and
you know i missed that so
anyway thanks for asking and uh
you know i'm gonna try to
i'm gonna try to do my i know i say this
all the time but i'm gonna try to do my
best to stream more
either
either through free code camp or maybe
do some videos on my channel i think i'm
gonna alternate a little bit uh but i
definitely want to do this more
and i'm having a lot of fun with this
brain computer interface thing too this
is kind of really cool
and uh different than what like my
day-to-day uh work
let's see
uh dylan says i don't get what you're
trying to do
uh
basically i'm linking up for right now
for what we did in this in this show i'm
linking up this brain computer interface
that i'm wearing with a react native app
so that we can get data from this device
into the app
we're going to do some cool stuff with
it but for right now we've just
succeeded at getting the data so this
little number we see here
is actual like score
on a a scale of
zero to one of how focused i am right
now
oh cool krista morris says if they did a
blood test and everything came back good
then you were good yeah
i'm not like i said i'm not worried um
pretty much get everything figured out
i'm i got to do some more tests
and um this week
because there was some stuff with my my
liver that the doctor was worried about
but to be honest with you i've been
trying to work out a lot lately and i'm
taking all these supplements and i think
that was throwing off my blood tests
a little bit so this whole week i've
been taking off and just basically not
working out not taking any supplements
and
uh i'm gonna redo the tests and see if
that helps
i'm expecting it will and then at that
point i think basically
everything that
that uh was wrong with me will be at
least explained
um
but uh
yeah i think
uh should be good i feel good
and um
so i figure i i feel good i feel in good
shape the only thing that was weird for
me was i kept getting out of breath
really easily but
it makes sense if i have asthma that
totally explains it so
um
i mean it all like that it all makes
sense and and i feel good so i have like
uh an inhaler now that i could take if i
feel out of breath so i'm gonna test it
out probably
you know maybe next time in the in the
gym i'm gonna take my inhaler with me
and then see if i like get do my normal
workout
and then see if i feel a big difference
i'm expecting i'll probably be able to
breathe a lot better but uh anyway
uh i know some of you probably care
about that and some of you are just here
for the code so i'm not going to talk
about it anymore like you all can ask me
on social media if you want
but anyway yeah i'm going to wrap things
up now and go hang out with the kids a
little bit before before bedtime
and uh
yeah it was really good uh i'd love to
keep going with this project in some
future streams uh let me know what you
all think in the comments if you have
questions
um
you know shoot them in the comments to
me or
twitter or instagram or whatever social
media you like
my dms are open um i'll get back to you
as soon as i can
and yeah so until next time like have a
great rest of your weekend great
beginning to your week uh and uh i'll
see y'all later