hey everybody welcome to live coding
with jesse i'm jesse and today we're
going to keep working on our brain
computer app
we have
all of our
phase one functionality working
but it doesn't look very good so we need
to
style it a little bit just make it look
a little bit nicer it doesn't have to be
like amazing right
but uh we want to look a little bit
better and if we get through that today
then we're gonna do
whatever else we need to do to get it
ready to actually go to
the google play store we're gonna launch
this first as an android app later on on
ios i happen to have an android phone so
that's why i'm doing android first
and i'm on a pc
so
i i do have a mac that i can use to
launch this as an ios app as well but
it's not as good for streaming so we're
going to try this first
as an android app since the last time we
streamed i did install
uh android studio so we can simulate
the android app
right now i'm just going to stay in the
the web mode
because it's easier to work with when
we're styling but at some point when we
need to we can also check out the
the simulator
in android studio okay so see there's a
lot of you here and a lot of you been
waiting for a long time i noticed a few
you uh are in time zones to where it's
like
i don't know 2 am 3 a.m something like
that i apologize for that
i um
i used to be able to stream earlier in
the day to accommodate time zones
especially time zones like if you're in
india or or you know time zones in that
area uh but unfortunately i have to work
during that time period now so
uh it's kind of hard for me to
accommodate i guess if i waited till
even later like towards night time here
in my time zone uh i it would be maybe
morning
there's just not really a time that i
can stream that would accommodate all
time zones so
uh let me know if this is a very awkward
time for you and i'll keep that in mind
uh but
um i guess probably the best thing for
me to do maybe is just try to
do different times when i can
so that you can always watch the
recording
but
you know maybe sometimes you can catch
it live if i switch up the times one
other thing i wanted to
to tell you all before we get started
with the code
you may have noticed that part two is no
longer available so this is part four of
a streaming series part two is not
available
uh so
after trying to figure out what happened
to part two my best guess as to what
happened is that i accidentally deleted
it
so i'm very sorry about that
i'm not
i don't really remember deleting it for
sure but what i do remember is that
before the last stream like right before
the last stream i was trying to set the
stream up and i accidentally created the
stream
with
basically like no scheduled start time
which means the stream would be
scheduled to start immediately
and then i quickly realized my mistake
and started a new stream
uh tried to start a new stream with the
same name that would have the correct
start time
and i wanted to quit that old stream
basically delete the old stream so i
wouldn't confuse people who were
thinking that it would start immediately
and um
what i think happened is that i thought
i was deleting that that stream that
should have never been created but in
reality i maybe deleted the wrong stream
and i deleted the second one
that's what i think happened
and the reason i think that is because
after i finished that stream which is
stream three i went back and saw that
the duplicative stream three was still
there
and it had never been deleted
and um so i'm thinking maybe that's what
happened
i tried to contact youtube through the
feedback
like their feedback modal on um
like creator studio is like the youtube
um kind of like admin panel for um for
creators
i tried sending a message there
i don't really know if they'll get
around
i don't know if they even
would
um
put
like recreate that video i know it's
possible i've read online that it
happened sometimes that they will
recreate the video
uh but i'm not 100 sure like free
codecamp doesn't monetize so i don't
know
i don't know how google would view that
if it would you know i've heard that
they do it for large channels this is
kind of a large channel but
i don't know so we'll see i'm kind of
expecting that that video will never
come back so i really apologize for that
um
i mean i like
i i tried to read everything i could and
do whatever i could to try to get it
back but
it's i think it's out of my hands at
this time so
anyway
uh that's what happened to number two i
did have a few people ask about it so i
figured i'd just you know let everybody
know
so let's go ahead and uh and get started
and
like i said we're gonna do some styling
we may also add in
maybe clean up the code a little bit if
i notice somewhere where we could clean
it up
it's still very simple though we've
managed to do everything all in one file
but we do have some places where you
know for instance
we still have some commented out code
you know this if statement is kind of
pointless right since we're not doing
anything else so
a few places where we could clean things
up
you know i'd rather not ship unnecessary
code if i don't have to so we'll be on
the lookout for that
but for now we want to do some styling
which we basically did you know very
very little styling
you know up it to this point i don't
even know if we have an object for
styles no we don't
okay
let's do that first let's make that so
in react native
let me set my timer as well so
i'm gonna set a timer for 25 minutes
and
i'll do code for 25 minutes
and then
when the timer goes off i'll go back to
the live chat i'll answer some questions
as many as i can get to and in a five
minute time period and then we'll do a
little bit more code
all right so
okay we we did import style sheets so
maybe we have it somewhere i just don't
know where are we using style sheets
there we go
i'm just gonna mix in there with
everything else
so
when you're doing react native it's uh
it's a good idea to use
this stylesheet.create and to put your
styles in here
it helps
as far as i know
with what react native does behind the
scenes it helps with performance
so let's let's move our styles into
our
stylesheet.create
object
and
then we'll we'll go from there
so that'll clean things up a little bit
get our styles all
in the same spot
so
if i take this so this would be our
our inputs it looks like all our inputs
have the same
the same styling
so i should be able to select all of
them yep
and let's get rid of them and
let's say
style equals styles
dot
input
and then up here in our style object
let's create a key called input
whoa
didn't not mean for that to happen all
right
input
and then let's paste oops
i wondered if that was gonna happen
since i i cut all of them but let's
paste our styles into here okay now
what we should get is
our
and let's log out so we can actually see
this
let's see if it'll there we go
so see these now have the same styles
and we cleaned up
a decent amount of code here
because we just move this into styles
this works just like a normal style
sheet with a few differences so
a normal style sheet
uses css syntax right this is javascript
object syntax so you notice we don't
have
hyphenated uh properties here they're
camel case so if you take your normal
css properties and camel case them then
they'll work
and
also we have no uh values
in react native so there's no pixels at
the end it's just straight numbers
okay anything else is a string
and we can also throw javascript in here
which is is a pretty cool feature
and then by default everything is in
flexbox in react native and the flex
direction by default is column
whereas uh normally in on the web the
default flex direction is row
those are the main differences
now
react native uses a subset of css
which means that
you can't use all of what's available in
css in react native but most of it's
still available
so if you if you try to do something
that's not available you'll get a
message in
you know in your browser depending on
what you're using
uh whether a browser or
uh an emulator or testing on a device at
some point you'll get some warning to
say that you know this one doesn't work
at the very least you'll see on the
screen that it doesn't work right so
for now
uh i think everything we're trying to do
will definitely work okay so let's look
through the rest of our app just to make
sure we didn't miss anything no we
didn't miss anything so
right now let's add some styling to our
our links here or i'm sorry our inputs
here
um the inputs are
really close together
which looks kind of weird so let's add a
little little space between these so
i'm gonna add uh
let's add some
margin
and i'm gonna do margin vertical this is
a little different you don't see this
too often in css
but in in react native with our style
sheet we can say margin vertical and
let's just give it an 8
and see how that looks
now what this will do is
margin vertical will add a margin on the
top and the bottom at the same time
so
we end up with
in between inputs here we end up with
actually 16 pixels
or
16 units right of
uh margin
and then at the bottom here we have
eight so i don't
sorry if it uh
there's a little bit of a delay on the
stream my computer's been doing this
weird thing
lately where every once in a while like
i can hear my music like slows down
and if i'm recording a video or
streaming it just like stops
for a second or two uh i haven't been
able to figure out what's doing it yet
um
hopefully i can just maybe try restart
and that'll fix the problem
all right so i don't really like that
much
that much padding and to be honest with
you let's uh
let's give this a little mobile mobile
view here so
let's try to imitate a mobile view
and
see if we can get a
right now it's showing this i wonder
at device type
all right cool so we can kind of see you
know how this would look
on a mobile device
it's actually looks super small i think
we can definitely make this stuff bigger
wonder why why did it look so small uh
did we have it on
oh because i had it zoomed in a lot
that's why
so uh i definitely gonna take the zoom
off of that
at least on the on the desktop or the uh
web version
i don't know and my uh my timer stopped
that's interesting
i wonder if my
stream freezing and my timer stopping or
have anything to do with each other
i guess i'll have to keep an eye on the
clock now
at about 5 30 eastern time or about a
half hour into the stream
i'm gonna take a break
and go to the uh go to the chat
all right so let's uh let's make these a
little bit bigger
well i want to make
let's make the text bigger as well
uh which i don't think we have any
styles on the on the text so
let's make
[Music]
style equals and let's say
styles dot
whoops
heading
i've been typing on a different keyboard
all day for work so now i'm
uh
keep mistyping everything
so we're gonna do for our our text
we're gonna have the styles.heading oops
nope
[Music]
and let's give this a font size
of i don't know let's say 24 let's just
see what that how that looks
right all right a little bit bigger not
too bad
and um
i kind of you know i want this to be
kind of stand out a little bit more so
let's do
margin
bottom
uh we'll we'll give this a 16 for margin
bottom oops forgot my
comma see what that looks like
okay a little bit better
all right not bad
and actually with more space there the
spacing on these inputs doesn't look
quite as bad
uh also our inputs are
you know i think they could definitely
be wider like right now you can't even
see
uh all the content i wonder what would
happen if we just comment out
the width
would it go full width
okay
it's it looks like maybe it's it's
defaulting to some sort of you know
preset width
i guess i'm okay with that to be honest
with you though i mean i think we could
go
like there's quite a bit of white space
here
we may want to you know go a little bit
wider
uh especially because the device id is
is so large
uh there may not really be a way to fit
it in there but yeah actually if we went
just a little bit wider i think it would
it would work
uh so
let's figure out why it's getting this
width
and i'm gonna
we don't need much space for the preview
all right and i'm going to look over
here
let me make this just a bit smaller
sorry if it makes it harder to see
but
i want to see what kind of styles we're
getting here
and if we go over to computed so if we
look here
and inspect
the input right we're so we're on the
input
and
if we go to computed we could scroll
down it's in alphabetical order and we
can go to with
and see like all right actually when
it's grayed out like this this doesn't
mean that there
so i want to make sure you can see it
yeah you can see it i was afraid my my
face was covering it up
when it's grayed out like this
it means that there's no width directly
applied to that so i'm i'm guessing that
this is just taking up the full space of
its container
so let's check the container
[Music]
maybe not
[Music]
so where
[Music]
it's
interesting maybe
maybe we'll get lucky and just find it
in here
[Music]
i'm not sure it's just it's an odd
number to default to right what was it
defaulting to 152.
yeah so that is odd and we can see
there's not really
it's not like the container is
forcing it
to be there this is the container
right so
the container is much bigger
let's see
let's see what we can do
uh let's see if we can do some flexbox
stuff here so if we do flex
1
flex 1 should stretch this out
i was afraid it would do that
um so
it stretched it out the wrong way
uh probably because we have it set
um
flex direction row
that's why
[Music]
all right let's get rid of the flex
all right um
let's see
all right youtube's telling me
that the stream is
not getting enough data
let me
check my
connection
[Music]
that's weird
connection seems all right let me know
if uh if anybody's having trouble seeing
this
i'm gonna um
oh yeah connection looks good
maybe in about five minutes i'm gonna
answer some questions so uh if you're in
the chat right now asking questions and
stuff hang in there for about five more
minutes and then uh
we'll uh we'll answer some questions
here let's see
i don't remember if you can do this in
react native 100
i'm pretty sure
it's not going to give us what we want
but it's worth a shot
hey it worked
now it works now on the web
i'm not 100 sure it would work on mobile
but
that definitely made
things larger and i don't want it i
don't want it to be that big so what we
can do though is we can say with 100
but then we can also set a max
width
and
we could see like you know what would we
really want it to be like how wide is it
right now
318
uh what if we said you know we really
never want it to be more than
i don't know 280. let's just see 280 see
how it looks
[Music]
okay um
we could probably go a little bit
smaller
since we have our device
id there let's see if we can get away
with like
260.
okay
260.
that gives us
enough space
for our number now the reason that these
little icons are showing up is because i
have lastpass and so it's showing up
there these won't normally show up
unless somebody had lastpass
but in case they do we'll have a little
space for them
so we got enough space for the device id
and certainly enough space for the email
and password doesn't matter because
it doesn't really show up anyway
and
let's see
[Music]
oops
i really
don't like that these are right up next
to the edge of this uh
so i wonder if we could do something
about that
let's see if there is
let's let's go to our documentation
for our text input and see if there's
some way to get a little bit of padding
in between um this uh maybe we could
let's just see if padding will work
that's worth a shot and then we won't
have to go to the documentation let's
just say padding
uh
horizontal
and let's give it a four for padding
horizontal let's see what it does
[Music]
cool all right that gave us a little bit
of padding okay
awesome all right so that works
um
it's looking a little bit better
uh this button
says press me
that's not what we wanted to say um
[Music]
so let's change what the button says
so
we wanted to say uh maybe
submit
see how that looks
submit looks good
uh also
you know maybe we could
do something with the way the button
looks
and i think there's probably some
built-in
styling options for this button so we
definitely could look that that up
so let's check out react native button
and
let's see this reference here
[Music]
oh cool we have accessibility label we
should probably add that
accessibility label and this takes a
string
and we can just say
submit
i think that's pretty straightforward
but what you know submit with me
okay we could color the colors for the
color of the text in ios or the
background color in android
i'm not gonna worry about that now i'll
just leave it as the default i mean
just for uh
otherwise i'm gonna take a long time to
figure out what color i want it to be so
i don't wanna
um
i don't wanna do that we're not working
on end end tests yet so i'm gonna leave
the test id out
and let's see
what else we have
okay it looks like there's nothing else
built in
in terms of
uh styling just let's see uh it's not
gonna show us i was hoping we'd get a
preview of what it would look on
different devices but
it doesn't show
all right so what we can do is add style
on here
so and this will be the last thing we do
before i go to the questions
our styles.button and we have another
button actually so
let's make sure we uh
we add this button and why is it saying
style
can we not give a style to this button
hmm
maybe we can
[Music]
maybe that's it maybe we're stuck with
this this style which is fine
i want to keep this very simple and
for the for the first release
you can always uh add
um
add in better better styles you know
later on
all right so here we go so we have our
inputs and our submit button
slightly better look to it a little bit
more space here
and
now let me go to
the
chat let's set a timer here and you know
this this timer that i've been using
it's the tomatotimer.com
it's been
just stopping out of nowhere
the last couple of days i might switch
it up and
go back i used to have a different timer
that i used but i forgot the url for it
but
may have to switch it up all right so
i'm going to try to answer as many
questions as i can
if i accidentally skip your question you
know just like ask it again or put it
down in the comments and i'll try to get
to it
[Music]
right so um
i have some questions people a few
people asking uh what is a brain
computer app so brain computer app is
just an app that reads your brain waves
uh well i should say this it's a
device
it's a combination of a device and an
app so
this is the device i'm using
it is called the notion
brain computer it's built by a company
called neurocity it's a startup company
and
inside of this is the same tech you'd
find in a cell phone
uh and or like an internet of things
device you put it on your head it reads
your brain waves and then you can send
those brainwaves to
wherever you want
in this case we're sending it to our app
and for this app we're keeping it very
simple and we're just tracking the level
of focus i believe it's the gamma waves
in your brain give you a good indication
of how focused you are so we're tracking
the level of focus and if the focus
drops below a certain level we're
changing the color of the screen and
we're making the device vibrate
and so that's what a brain computer app
is for this project i hope to do some
projects in the future where we do other
things with the data coming out of the
brain
but this is kind of a proof of concept
just to show that we can reliably get
data to a mobile device through a react
native app i'm using react native and
expo
so this is kind of phase one project one
of
you know working with brainwaves and uh
react native
uh alex asks if this is gonna be posted
on the channel after the live stream
ends yes it will and
i will not delete it this time
[Music]
see
uh
rudra asks what is a variable in
programming um a variable is
a little piece of data
right that you can assign well it's it's
something that you can assign data to
okay
uh so let me give you a
i gotta have a variable in here
somewhere right
where's here we go so
we have const notion is a type of
variable called a constant
that means that we can't change it after
we
assign it a value and we've named your
variable notion and that notion notion
holds the value of a new notion that
we've instantiated with a particular
device id all right so a variable could
be a lot of different kinds of data
could be just a string which would be
like a word
uh or a number
right it could be an object it could be
an array so there's a variable could be
a lot of different things but at its
most basic thing it's just
something that you use to hold a value
[Music]
hey everybody everybody saying hello
from different parts of the world how's
it going
uh arnav asked what my time zone is i am
in uh eastern standard time so it's the
east coast of the united states
is uh my time zone so same time zone as
new york city
um
that's probably the biggest city i think
in this time zone
[Music]
let's see
uh my tommy says did you really delete
it i unfortunately i really did delete
the
second part of this this stream uh the
second part of this series so
uh very upset about that like i was
honestly like i felt sick when i
realized uh what had happened
so
i mean there's still some small hope
that somebody on youtube will get my
feedback message and uh and have mercy
on on my mistake and and bring the video
back up but i just
um from what i read online i don't think
they do that i think at some point in
the past they used to do that kind of
thing but i don't i don't think they do
it anymore so
um
we'll see
[Music]
all right
[Music]
okay
[Music]
all right so i'm just looking through
trying to find uh questions just still a
lot of people saying hello
so
um
all right someone says hello from brazil
hey how's it going
um
someone uh pranav says how much money
can we earn in react native
depends on where you get a job from here
in the united states a react native
developer could most certainly get a job
making um over 100 thousand dollars a
year
it's it's definitely not
uncommon for that to happen
um different parts of the world are
obviously very different um and it
you know different companies pay
differently but
it's it's certainly
certainly possible
to make to make that much
which unless you're in like a very big
city that's that's an excellent salary
like from where i'm from
there's not very many people that that
make that much money so
um
react native can can make you a lot of
money
i was born in one of the
poorest states in the united states
which the united states is a pretty
wealthy country so i guess it's you know
it's not super poor but it's just
you know i
don't really know that many people that
made
that much money uh when i was growing up
all right awesome i actually got through
most of the questions
uh so we'll go back and do some more
code
um
the last another question just came in
right when i said that and it was a
react native versus flutter who wins in
your opinion
uh i um
i really can't comment on that because i
haven't actually built anything with
flutter
so i feel like i'm not in a good place
to comment i really like react native it
can do a lot of things i've heard good
things about flutter
but like i said i can't i think you
could build awesome things with react
native or flutter
obviously if i had to choose something
to build a project with
right now i'd choose react native
because that's what i use every day and
i i know it um but if i didn't know
either one
you know i would definitely take a look
at flutter and see
you know maybe i would maybe i would use
it
all right so let's go back i'm going to
try setting my timer again see if it
works this time
and uh
let's go back in here and i want to
submit and see what our styling looks
like on the
once we're like logged in
in the logged in view
and also i don't want to forget so i'm
going to tell you all right now so you
can remind me
um
the uh
um
red flash so we we put in a style where
like the screen would flash red
if your focus got below a certain level
that when you first start up the app
that red
is like the default color so we don't
want that to happen so i think i'd like
to
try to get rid of that as the default
color so we'll take a look at our styles
and see how we can do that
but otherwise let's
let's login
[Music]
and
let's see let me grab my password
cool
all right so
one thing i'm i'm seeing here is the
focus text is quite small
and it's very close to this log out
button so i think
what i'd like to do here is make this
text a bit bigger and add a little space
here between focus and log out
and that's probably about it in terms of
styling right so i said we're not it's
not going to look very
like really pretty
uh but
i want it to look like it's not broken
or anything like that
and uh
let's see
where's our style i keep losing my uh
styles object
well i guess we don't really
we want to put a separate style on our
focus text
so
because i don't want it to be quite as
big as the heading so
style equals
and let's just
i'm just going to call it focus
focus text
probably not the best name especially if
we reuse this style if we end up reusing
it we'll rename it to something a little
bit more generic
but for now i think that'll that'll work
so let's say
focus text
[Music]
and
let's make the font size
let's give it 18.
okay that'll be nice nice and big for
readability uh but then also
not definitely uh like noticeably
smaller than the than the heading
and then
let's give it uh let's say eight eight
pixels
on the bottom
between the button and the focus text so
we're gonna do a margin
bottom
of
eight
i keep saying pixels but
when i i say pixels out of habit but i
really just mean like units right
whatever that translates to on a
particular device okay
all right that's that's better a little
bit of separation there
we can see what the focus is
and um
yeah let's see
that looks good the only other thing i
want to do is uh
what do you think about this focus
um
right now the focus is a number between
0 and 1. do you think it would be easier
for the user if they saw that as a
percentage so instead of 0.23 if they
saw 23 percent
do you think that would be easier
let me know what you all think uh in the
chat uh
it wouldn't be too hard to you know make
that display as a percentage
um and then it might be a little bit
more obvious to say like oh i'm 100
focused i'm only 20 focus
uh
yeah let me know what you think
looks like i got one yes for that
nice okay
um
okay we got a couple of yeses
cool let's let's do it
all right so
right now we are showing the focus here
is just the raw data of focus
um but
what we could do is we could say
like focus
and we could multiply that by 100
and then we can add in a percentage sign
and let's see
see how that looks
cool 23
see not not too hard
um
i don't know why 23 keeps coming up as
the default like
i have no idea maybe that's just the
baseline that comes through maybe that's
the last value that came through before
i turned my device off last time i don't
know
um
cool now you notice we still are seeing
that flash of red every time we we
restart
so let's look at our styles and see how
we have that set up
uh so it looks like
we're saying
uh
the background color
we're saying if the focus is less than
0.2 or 20
and
we have a user
then display red otherwise display white
now i don't know if this will work but
it's it's possible
that if we just switch these around
maybe it would read the white first
and we should be able to do that
if we just say
if the focus is
greater we'll just flip around these
values
greater than 0.2 and we don't have a
user
then let's display
white otherwise red
i don't know if this is going to solve
our problem
but if there's some sort of solution
that might work and it's very easy to
try
i'm always up for trying it
and no that did not work at all
that that is in fact the opposite of
what we wanted how did i get the
opposite
um
let's see
and uh
let's see sorry i gotta somebody's
trying to say
not nice stuff so
um
just gonna hide the
messages
okay
all right so that definitely didn't work
and uh
let's see
let's
look so you guys somebody else is
spamming a lot of messages so
um
there we go all right that'll clean up
the chat a little bit sorry about that
okay
all right what the heck did i do here
well let's go
let's just go back because that's not
what we wanted
there we go
there we go all right
so that's better
hmm
oh let me see i'm gonna check the chat
as well to see if any of you realize
what my mistake was
see
aj
says
hey aj how's it going uh aj's one of the
um
uh co-founders of neurocity and uh who
made this
uh this device so
the uh
notion headset
um
aj says last value
is that what i
[Music]
i don't know if he was referring to what
i was doing here or commenting on
somebody else
okay
um
all right let's let me think for a
second on how we could make that work
i'd rather try to avoid the flash of red
if we could
but it's not like uh
absolutely have to have
let's see so
[Music]
actually if i reverse these
colors and we get a flash
flash of white
maybe it would be
[Music]
oh now i know why i did that right
because i said if we
don't have a user
[Music]
now i confuse myself
all right
let's go back to what i did before so i
know for sure i want focus if focus is
greater
than point two i want it to be white
for sure
there we go
focus is greater than point two i want
it to be white
let's get rid of this for a second
right
[Music]
and
could we switch it
yeah let's which is so folks greater
than point you want to do white and then
if
user
[Music]
red
all right this is
a slightly more complicated thing but
let's see if it works
ah we still got the flash
let's see if it'll happen if i save
again will this happen oops
if we save
all right actually didn't happen let me
actually change something and then we'll
see
all right we're still getting that
flasher red
i guess it doesn't matter
uh now what this does is i just kind of
split it up and added two kind of like
two turn areas so
um it's saying like if the focus is
greater than
0.2 then we just make it
white but if it's not then we go to the
the right side
of our ternary and then we check and see
is there a user
if there is no user
us if there's no user
then we do nothing
which would make the default color
um
i guess nothing it would be whatever the
default normally is
which i'm assuming is just white
or
would it be red
hmm
i wonder if we even need to add white
like what's our default without it
let's um
save that
all right cool yeah so we don't really
even need white so i'm thinking we could
we could get rid of
the white altogether because we don't
need it
and
instead
[Music]
we could do these ends
we'll switch the focus back to
if focus is less than two
all right we're still getting our um our
flash
of red that i don't want but we're able
to get rid of our our white we don't
need it
uh two we do have
what we could try to do
instead is
let's try this out
well first i'm going to look at the chat
and see if anybody has an idea
all right it looks like no
but uh here's what i'm thinking
y'all can let me know what you think
about this idea what if we take out
all of this logic from here and instead
in this use effect which we're already
using to turn on and off the vibration
we use this to change the color
and
we can set the color as part of state
[Music]
i don't know i think it's worth a try
uh in which case
let's go up here
if we get any more state we might have
to
clean this up a little bit but for now i
think this will be
this would be fine and we can
yeah let's clean this up here
and let's say
um let's say b
g color
set background color
and we're going to go use state
and the default background color is
going to be white
ffff
and let's see
let's use some typestrip stuff here i
think we can say
i'm using typescript but as somebody
pointed out to me in the comments it's a
typescript project but i'm not actually
using types so let's see if we can
uh
use types here
so what this is doing let's see if it
actually is doing this yep so right now
we're basically using typescript to say
x can only be white or red
we could add more if we wanted but for
right now this can only be white or red
and it's going to give us some cool
autocomplete stuff which
let's check it out down here so
we can set the
background set
set bg color
and
oops
now we're going to say we can either do
white or red those are options so let's
throw in the option of red
and then
we gotta set it back the other way right
so
if we're not if we are focused if we
regain a certain level of focus let's
reset this to
white
cool now down here
we can just set our background color to
bg color
so
if this works let's see if it works
first if it does i think i kind of like
that better because all the actions that
happen
when terms of a shift in focus are all
located in one place
and then
we keep logic out of our styles
so it looks a little bit cleaner
and i totally forgot to look to see if
this even changed did anything
let's see
sweet we got rid of that flash now we
just have to see like did it actually
work
so i'm gonna turn on the headset
and
i gotta
give it a second to turn on and connect
right it's starting up
it takes just a couple seconds to start
up once it starts up i'm going to put it
on
and um
see if we can get that focus down lower
actually if it's stuck at 23 we can
probably change it
let's just
let's cheat and just change it right
here
hey cool
so we get red
and if this was a mobile device it would
be vibrating
now let's switch it back
and we get white
cool
so now the color
is set all right and then the notion
is uh it's starting up so i can see on
my other screen i've got a dashboard up
it's uh starting the operating system on
the uh on the headset so it should be
starting pretty soon
and there's a lot going on in the chat
so
uh i'm gonna get back to that in a few
minutes here
yeah about five minutes i'm gonna get
back to the chat
all right
that's cool
um let's clean this up a little bit so
if the user sell set user else
um
let's get rid of this
else since we're not doing anything
there
and
see if
i think that was the only spot where we
had unused code
all right cool so we are connected now
i'll put this on for a little bit so we
can get some real data
okay cool
so we should be getting real data here
uh i've got a
an okay signal coming in
oh goodness
all right i just noticed something i
don't know if you caught that on the
screen but we we got a ton of decimal
places out here so
i don't want all those decimal places so
let's let's make sure that we don't
uh we don't have that
and um actually that was kind of weird
that that even came on the screen
because we do have this two fixed two
that's odd
so set focus the number we're putting
into focus is actually already with with
two fixed so
yeah we came up again
very weird
which i kind of don't want to show a
bunch of decimal places anyway
so let's just go ahead and uh
add
where are we at
this focus
um
let's go dot
two fixed uh you know maybe when we're
multiplying it's it's messing it up and
let's just see can we do two fig zero
is that going to mess it up number not
too fake
returns a string representing a number
interesting
let's see if we can
oops not on the end
put that in the wrong spot
there we go
two fixed
see if that works
all right now
we may or may not see that that number
pop up but i'm thinking that since we're
doing this after any calculation takes
place then we'll actually get two fixed
zero which means we will have no decimal
places
so
that was cool i'm glad i put the headset
on to see that
that particular bug
the auto formatting on that is a little
weird but
cool
[Music]
all right so
am i
i only got like another minute before i
wanted to stop and go back to the
channel
what i wanted to do next if i had time
was start to get this ready to to go to
the app store
so
what i'm going to do is just kind of go
through what we need
so let's go to
expo
and
let's see
get started
pre-project
documentation that's what i want
so
i'm using expo to help us build this uh
react native app
so
we they have documentation for
so some of the stuff that we haven't
done yet is like the splash screen
so
it's just something that'll show up
in the app
and so we could add this into our app an
app icon
so we got to think about what we want to
do for the app icon i'm i'm not really
any good with any type of like photo or
image editing stuff so i'll probably
just find something online
that like automatically creates all the
icon sizes that we need
um that'll be uh
let's see walk through
i know there's
there was some documentation that
talked about actually releasing stuff to
the app store
i don't know where it went
there we go publish your app
this will publish
all right so there's a couple options we
could do with publish
um
we could publish through uh through expo
or could publish um like on my own
server so i haven't decided what i want
to do
so that would be the first step
and then we would actually deploy so i'm
gonna skip the apple store for now and
we're gonna go to android in the google
play store and uh this is the next step
of what we need to do
[Music]
so
we basically are gonna run
an expo command
and
it's going to bundle everything for us
so we just need to make sure that we
have our our app.json file
sorted out
and it has the right info in there
and then
i already have an account for the google
play store
so we should submit it like if we get
the bundle right then we can submit it
and um
it says we can do it manually
um and then we can actually just upload
it straight from the command line which
is pretty sweet once we do it manually
the first time and i'll try to do as
much as possible with this on a live
stream i don't know if i'll do it today
because i've been streaming already for
you know over an hour
but the next stream this is what we're
going to be working on
uh
i don't know how long it will take to
get approved
but you know i'll let everybody know
once it gets gets approved but basically
that's these are the next steps that
we're going to do
and um
really i think the hardest part at this
point is just making sure that our
app.json is looking good and
figuring out what i want my app icon to
be because i really have no idea
um but i'll show you right now what our
app.json looks like so
right now
it's just whatever was the default which
it takes the name from
with the name i put in when i started
the project
right so
um
i believe the icon is like the default
expo icon in the same way with the
splash so we can see like
this icon is just the default that comes
with the project it's blank same thing
with the splash
you know rather not have
nothing there
uh but
at least like there's something there
right it wouldn't it wouldn't throw an
error saying it's nothing there
um
so yeah that's
that's about it not really not much else
left to do uh to actually deploy this so
now
having said that the only people that
are really going to be able to use this
or you know anybody that has one of
these headsets
i mean anybody could download it but
they're not going to be able to get the
brain data right so
um
it'll be a very very limited audience
and
after that there's other features i'd
like to add to this
uh and i'd like to have it a web version
and an ios version so
those are the next steps for now i'm
gonna go back to the chat and answer the
rest of the questions and uh
let's see
i guess so
i'm gonna keep keep tracking my focus
here while we
while i answer questions
right let's see
let me figure out where i i left off at
uh let's see um
finding you says can you tell me the
prerequisite of this course
um
i don't really know like what the uh
um
prerequisites would be like it would
definitely help if you know a little bit
about
um
react native
uh
i guess other than that
you know you don't really need to know
much uh in terms of like the brain
computer interface like
it's
uh it just it has a javascript api so
you don't need to know a lot about the
internal workings of what's happening
see
[Music]
let's see
uh a question that says do you have a
cat i do not have a cat no i don't i
have
i have four children and uh no cat i
have the only pets that i have right now
are two goldfish they're behind me
[Music]
oh
[Music]
let's see
so there's a lot going on in the chat
but not a lot of questions so i'm
uh trying to find the questions
all right so there's some some questions
and comments based on the uh that red
screen that kept uh coming up
when we didn't want it to so thank you
for all the the advice on there
[Music]
i mean uh so what's the app's purpose
the purpose is to uh let
let the user know when their focus is
dropped below a certain level
it's crazy you can see uh how much
like trying to
go through the questions and like move
back and forth lowers my focus
normally if i'm just coding my focus is
a lot higher than this like more
consistently
but but trying to talk and read the chat
uh
really
like
i guess like diverts my my attention
[Music]
there's a ton of uh comments about
hacking in here
uh
i don't know how he had on the topic of
hacking in here but there's a
i just keep scrolling and it's all this
talk of hacking
i'm trying to sift through all this uh
chat to find uh any
all questions
here's a question are you using c-sharp
i'm not using c-sharp in this uh and
this application no
this is all uh javascript well
typescript technically
and uh so it's typescript
which uh actually i just recorded a
typescript tutorial video last night i
think i'm going to
um
put it on my youtube channel tomorrow so
maybe tomorrow morning at some point
tomorrow and uh so if you're interested
in learning more about typescript check
that out
yesterday i released a video about
documentation for javascript
and it's not that long i think it's like
less than less than 15 minutes or 20
minutes or so but if you're interested
in that check out my youtube channel the
uh the links in the description of this
video
and the typescript one i think the
typestrip one will be pretty helpful
i was thinking about re-recording it
because i
i made it when i was tired and i look
really tired and i keep saying uh and um
a lot
so
if i don't re-record it and i just
release it which i might just release it
because i don't have a lot of time and i
really don't want to spend a ton of time
going over the videos because then
i have less time for my family and i
just overall put out less content
but i recommend watching it at double
speed
because then it's not quite so annoying
did i say uh and um
i'm gonna try to work on that more maybe
i just need to not record videos when
i'm really tired because i tend to do it
more when i'm tired
but that video will come out
it be recorded or in its current state
it'll come out tomorrow on my youtube
channel and i actually think it'll be
pretty helpful
based on
what would have been helpful to me when
i started with typescript that i tried
to make the video in a way that i would
have found helpful so
if anybody's interested check it out
uh i mean says what's the machine you're
using uh i'm i'm using a pc
so it's
i i don't even know what brand pc it is
but it's like windows 10 pc and
where did i get it from
i don't remember
i don't think i got it from amazon i
think i got it from like new egg or
tiger direct or something like that
oh okay i mean clarified i think i mean
uh meant to say like what what device is
in like this this headset device so this
this is the neurocity notion headset
and in the description i i
spell it out too as well so you can
check it out but
this is
a spring computer
it is a brain computer or brain computer
interface
and
inside of it
are
the same parts you'd find inside your
cell
phone and it can connect to wi-fi
and
it takes all your
your data from your brain and then
provides a javascript api so that you
can link it up
to your
to your app or your website or whatever
whatever you want to link it up to
[Music]
oh i mean also asked how much does it
cost
i
i'm not sure what the cost is right now
because i think they're working on
another model this is it's kind of like
a um like a testing device this is
um
i i don't know what you want to call it
but this is like the first version just
for developers to work on and it was a
thousand dollars i don't know what the
price is currently or what it will be
when they start making more of these
kevin says configuring a splashing
screen in react native is as dangerous
as eating the hottest pepper in the
world why i hope i can do it
sergey says in 2004 i created a
calculator in basic i thought i'd become
a superstar in the programming world but
i only got older and i still make
calculators
actually in 2004 i made a calculator in
c plus
and
then i didn't code for a long time after
that but i did i do remember i don't
really remember anything else that i
coded in that class but i remember a
calculator
[Music]
kevin says is python or java better
i don't i don't really know in terms of
better it depends on the application
it seems like python has way more
momentum right now
whoa
somebody's spamming the channel let's uh
should we let me keep saying should we
make app using pythons um let me get rid
of
[Music]
let me hide these messages yeah please
don't spam the channel
[Music]
the question is that was being spammed
by
at least two people that i see is
maybe three people was should we make an
app using python
and um
yeah if you want to that's
uh it's
it's entirely up to you python's a good
language
so
if if you feel like that would be good
then
you'll go go ahead with it
[Music]
someone asked if they could be moderator
uh i would mute people or spamming i was
actually just thinking that it might be
good to be to have a moderator it seems
like the last few streams we've had more
people spamming than than normal
so um i'm going to think about it thank
you for offering i'm going to see if if
the next stream is is this bad
with spam again then i think we'll
definitely need to
uh to have a moderator because it makes
it really hard to for everybody and for
me to
read the chat
and there's no need to spam you know i
get to the questions
eventually all right
let's see
i can't pronounce this name
but it says can you learn a language in
two weeks
i don't know i mean if you already knew
a few programming languages
then
maybe you could learn enough about
another one to code but if you were
starting from scratch and you had no
idea how to code
then i don't i don't know that you could
really learn a coding language in two
weeks
uh amin says why did you start youtube
um i i started doing youtube
uh because i
i wanted to share my work i was working
at a university and i wanted to share my
work with some of the computer science
students there and see if they'd be
interested in
and helping out
with with some of the work
and
i ended up
getting a larger audience outside of the
university and started you know catering
my streaming towards them
and then beau carnes from free code camp
saw my live stream and invited me to
stream on the free code camp channel and
so that's that's why i got started
and basically i keep doing it because i
just hope that
you know my streams would be helpful to
someone else
and um
yeah so i don't
i don't get any money from this this is
all volunteer even on my own youtube
channel i don't monetize
you know if i at some point in future
like maybe i think about monetizing like
if i really wanted to produce a ton of
content and do it as kind of like a
part-time job i would think about it but
for now it's all just volunteer and i
just i like
sharing information and helping people
learn
[Music]
uh inside out says can you measure pre
and post stimulant using this app for
scientific proof
actually that's kind of interesting i've
never thought about knowing that before
but
that would be kind of cool to
measure your level of focus at doing a
certain task
depending on what stimulants you would
take like to see maybe if you had a lot
of caffeine does that help your focus or
does it hurt your focus that would be
kind of cool to do um
so i i would imagine you know you could
probably get some good data on that
you'd have to
really make sure that
you controlled all the other variables
like noise and like time of day level of
sleep like there'd be a lot of other
variables that
could kind of mess it up but if you did
it consistently then i think it could be
um
yeah that would be kind of a cool
experiment
[Music]
uh i mean as my inspiration my favorite
go-to resources
yeah
my inspiration uh for coding is like i
just like coding and um
i
i love uh
like when i hear that some a video that
i've done
has helped somebody
like that's that's inspiration right
i'm not gonna lie at first my
inspiration to get into coding was i had
a couple kids and a wife and i needed to
pay the bills and this was a way to make
money
all right i mean i did like to do it but
it was definitely like
it was how i could get a good job to be
able to provide for my family uh but now
like
in terms of keeping going with the
youtube stuff is you know whenever it
helps somebody that's
that's provides me with more inspiration
to actually do
uh more content
i know there's probably a lot of noise
there's my kids playing upstairs so i'm
probably i'm gonna try to end the live
stream here in a couple minutes so i can
go hang out with my kids before it's
time time for them to go to bed
um
and there was i think there's a part two
to that question oh your favorite go-to
resources uh when i was starting out i
used free code camp a lot and did a lot
of youtube videos and stuff like watched
a lot of youtube videos
now though i'd say like my favorite
resources are just the documentation for
what i'm using
and stack overflow and mozilla developer
network mdn
i have a question how many programming
language do you know slash understand um
i mainly code in javascript and
typescript
i can understand
coding in c sharp
and i've i've worked with in the past
java
c-sharp
python
c plus plus
i think what else
see
like
i it's been so long since i've used
those languages i don't really know
if i could jump in and code anything in
them right now
but i could probably look at
uh like a simple application and tell
what was going on
uh but i i wouldn't
i don't know that i would say that like
i know them you know
but if i had to use them and had a
little bit of time to get
um
kind of like
get acquainted with him again i could
probably code something
i mean says do you already have a job
yes i do i have a job i'm a senior
software engineer
uh at a company called dick sporting
goods
[Music]
mh08 says this is only my second live
chat with free code camp i learn stuff
thank you for doing it
oh you're welcome thank you so much for
watching
[Music]
uh sergey has to go see you later sergey
thanks for watching
[Music]
all right
um
all right i'm gonna i got through all
the questions i think if i miss your
question please put it in the
uh comments below on this video
i'm gonna wrap things up now and go go
hang out with the kids for a little bit
um
if you uh if you liked the video you
know please join us again for another
live stream i'm gonna try to do this
maybe uh saturday maybe i'll try to do
another stream
and uh check out my youtube channel the
links in the description i just put out
a new video yesterday and i got another
one coming out tomorrow
a tutorial on documentation for
javascript and another tutorial on
typescript
and um
feel free to follow me on social media
links are in the description you can ask
me whatever you want and i'll do my best
to get back to you
i mean coding related stuff is probably
the best you could certainly ask me
whatever you want but i don't know how
helpful i'll be in other areas of life
but anyway thanks so much for for all
everyone's help all the the nice
questions in the chat in the in the live
chat i'm getting really excited about
this project i can't wait to release it
to the app store and that's going to be
the goal for this weekend is actually
get it submitted
to the uh the google play store
and uh
that'll this will actually be my first
app that i'm submitting
to the store
so that'll be
that'll be exciting and i'm excited to
actually do it live for everybody to see
and uh hopefully then that will help you
out if if you want to do your own apps
but
uh until then
uh have a great day uh thank you so much
and stay safe