Build a Brain Computer App with React Native (Part 5) - Live Coding with Jesse

freeCodeCamp.org · Beginner ·📰 AI News & Updates ·6y ago

Key Takeaways

Build a brain computer app with React Native and Expo, and submit it to the Google Play store, using the Neurosity Notion brain computer interface.

Full Transcript

hey everybody it's jesse welcome to live coding with jesse and we have a lot to do today i want to get this app submitted to the app store today and i'd love to do it while i'm on the stream uh so i think let's see so if y'all can hear me put something in the chat the um live stream is analytics look a little bit weird uh but let me know uh otherwise i'm gonna get started i see there's a lot of people in the chat saying hello so hey everybody just a quick um a quick intro we've been working on this app for this is the fifth live stream all right cool looks like you can hear me for some reason my um video preview in the um like the stream settings panel is saying the video is private uh which is really odd since obviously you all are in the chat but i've never had it show that before all right so we've been working on this app for five live streams now and um we are using we're connecting a react native app that's built with expo with a brain computer interface called the notion by a startup company called neurocity and we've successfully connected it so that it measures we wear this device it measures our level of focus and when we drop below a certain level the screen changes to red and it makes the device vibrate so just really kind of like bare uh essential functionality and now i want to actually put it out there so we can test it on devices so we got a lot to do before we can put it out there and i've been going over some of the documentation just so that i have some idea of this process this is my very first time actually publishing so i've i've made a few apps that that definitely work and i can run on devices but i've never actually gone through the step of putting it out to the app store and there's a few extra things you need to do to get your app from working to publishable so that's what we're going to do today i'm going to set a a timer and here on one of my other screens and when that timer goes off so it's going to be 25 minutes when that timer goes off i'm going to go over to the live chat i'm going to answer some questions so there's a lot of you in the chat i see you and i'm not going to ignore you forever i'm just going to focus on doing the work for about 25 minutes and then i'm going to go to the chat answer as many questions as i can so feel free to ask as many questions as you want in the chat i will get to them and you know keep it keep it positive and try to keep the spam down uh the last couple of streams it's been a little bit weird we've had a lot of uh people spamming the chat and by that i mean they're just they keep saying the same things over and over again or just typing in a bunch of nonsense over and over again it makes it really hard to read the chat for everybody watching so try to keep that to a minimum uh if i see that you're doing that then i will um stop you from being in the chat so uh i really i won't even mention anything like i'm just gonna stop you from being in the chat so um there's not gonna really be a warning i don't have time for that especially if we get a lot of people in the stream like we have right now so um if it gets too bad i might have a moderator but really it's never been a problem before i mean we've done like literally hundreds of streams and it's only been the last few streams it's been a problem so obviously any type of like bad language or you know saying mean things to each other stuff like that you're gonna be out of the chat so let's keep it all positive okay all right so let's get started if you want to try to follow along this project is on github i believe i put a link in the description to the the code on github so you can check out the code i'm also going to be on [Music] the on expo so their documentation let me put the link to the docs that i'm using in the chat so i got a lot of these windows open for things that we need to do and so i'm going to be jumping around a little bit but this is where i started at the link i just put in the chat so this started this is where i started we're going to start from here so we're starting with um deploying the app right so from deploying the app i believe i went to distributing or deploying yeah this is the distributing so we need to create native builds so to build the app i told you there's gonna be a lot of jumping around here the docs for expo are actually really good but it's there's a lot of steps here so we we've i believe we do have the expo cli installed um already which actually i can let me double check that now make sure i have it installed i know i have installed one of my machines i actually might not have it on this one so we might need to do that whoops let's make some space here because we're going to be in the in the terminal a bit more than normal so i want to see all right it looks like yeah we have this installed otherwise we wouldn't be getting all of this stuff so yeah i believe we have this expo now it says for windows users we need to have um wsl enabled so we need to do that so this step if you're on a mac or if you're on linux you probably won't need to do this step if you're on windows you need to do this step so let's do this um so i have the documentation open already for this we need to install the windows uh subsystem uh for linux so i'll make this a bit bigger i've never done this before let's see let's see if it works so we need to copy this and run it in powershell as an admin so let's try to open windows powershell and let's see if we can run as administrator yes all right so we're running powershell as an admin let's see if i can make it bigger all right i don't know how to make it make the text bigger but i'm just copying and pasting what i just got out of this window on the right hand side and enable windows optional feature cool all right so it looks like it's doing something here let's see do you want to restart the computer to complete operation now oh no i gotta restart i was afraid this was gonna happen ah it does it says restart right there i didn't i was reading through all these documents as fast as i could right before this and i didn't see a restart all right it looks like we're going to have to restart so here's what i'm going to do i'm going to restart which basically the stream is just going to freeze up for like a second the restarts on this machine because it's pretty new are actually very quick so um let's just get it over with now um let's restart i should be back hang in there for maybe like i don't know two minutes at the most and um and we'll do this restart all right cool can you all hear me now am i back it looks like i'm back so uh i'm gonna keep going all right sweet back up yeah actually the the thing that took me the longest that was a really quick restart was that it restarted me and um by default my youtube account is set to my personal account so it tried to log me back into the free code camp um control panel but it wouldn't let me in because i wasn't free code camp so um i switched to my phone for a second just to give you all an update but anyway it's working now so let me turn the stream off on my phone and let's bring to get rid of my vpn and bring up my code sweet actually honestly like uh if you get a good windows system uh restarts are really fast it used to be windows for like super hard to restart sweet um looks like there's a vs code extension for the windows linux subsystem so i'm just going to install it because it seems like cool i'll read about more about that later on um but i guess it's good to have semantic highlighting has been applied sweets all right so now that we have that we can continue on we need to install a linux distribution i think i'm gonna go with uh ubuntu because that's what i'm used to using uh out of out of any linux distro um i don't really know if anybody has any suggestions as to whether to install ubuntu 16.04 or 18.04 let me know in the chat i've used 16 more often um but i don't really know what the difference is in upgrading to 18 so i'm gonna have to make a decision here in like three minutes so just let me know let's go 16 or 18. all right so looks like we got one vote for 18. i'll go with 18. i mean honestly it's obviously the the new the newer version so may as well go with the newer version i'm open this in a new window so i can keep the documentation open and uh let's read the next it looks like we open it up we just get it it installs it and then we initialize which i already have those that documentation open as well so we'll do the initialization it looks like everybody's saying 18. cool gam002 says do debian it's the most stable if i had more time to research maybe i'd think about debian but for right now like it's been a while since i used ubuntu but i'm more familiar with all the commands and stuff so i think i'm just gonna go with ubuntu not i don't really think that we're gonna have to do that much with it i think it just needs to be installed to do the rest of the steps for expo um but let's get that and get it started yeah let's open microsoft store get it install all right it's going pretty quick it doesn't seem like it'll be too too much longer so once we get this we need to initialize so let's look at these steps while we're waiting for the install and um all right so we'll launch it and i need to set up an account update and upgrade the packages hopefully this doesn't take too long and that's it all right that's that's pretty seems pretty easy um we probably can just get that started and then move on to another step and while we're waiting for that to finish this is uh really sweet um uh colors they got look at this they got the weather on here i wonder how they had that all set up anyway that's pretty cool this is kind of cool i'm actually glad i'm getting installed i'm installing this i'm going to probably play around with this after the stream um okay cool so almost done with the uh installation looks like maybe 75 of the way down there so we'll get to that in a second i think we can get rid of this step we can get rid of this step now and what else can we get rid of yay all right so let's launch it so installing this may take a few minutes so not a problem we got other steps that we can do that don't depend on the step yet so there's a guide here to deploying to the app stores and there's a lot of stuff making sure it works on different phones i'm gonna skip over a lot of that because really this for this first mvp launch like it just needs to work on my phone all right that was really fast enter a new username alright i'm just going to enter my name and i'm going to create a password with lastpass [Music] and let's paste that in there see if it lets me paste cool what all right so i guess it's not allowing copy and paste so i'm just gonna have to type in a password all right cool sweet so we're in now we need to do our app get so we're gonna copy this we're gonna do sudo which like lets you run as an admin and then update and uh upgrade all our apps let's paste that why is it not letting me paste anything dang it all right well i'll just type it then sudo apps upgrade oops i messed it up update and upgrade all right cool that's doing its thing oh looks like uh sameep says control shift copy and paste for copy and pasting and linux terminal oh and michael says to all right sweet thank you for that i will definitely be using that in the future all right so we just need to wait for that and one of the next steps we need to have is an app icon and a splash screen so i'm going to go with the um it says we need to provide something that's at least 512 by 512 pixels um but we need uh 1024 by 1024 for ios so eventually we're going to be on ios so i think we're just going to go with 1024x1024 i do you want to continue yes let's continue so i have a free um image editing software called uh so g-i-m-p i'm just gonna use that let's see i think i already started a didn't save i started like right before the stream a template but we can just create it again so i'm just going to create one that's the dimensions we want 10 24 by 1024 so now we have this we have our background and uh let's let's just make a solid color background i don't know what color to do uh let's just got it there we go there's our our paint bucket uh color fill there's a pattern fill well what patterns can we do background background color fill fill whole selection all right what colors right now we have black and red or black and white let's change it to something else um how about just this blue color let's use blue i think our buttons blue in our app so that's like the only color we're using other than like the the red color so let's do that oops why is that not filling um there we go all right so we got our color here let's make a new layer a new layer and let's call this layer text and inside our text layer let's add a text box and i'm just going to type in our text box um s f and the color we're gonna we're gonna make the color white so we can actually see it and let's make the text like i don't know like 100 pixels and let's use um there we go let's use this font i don't know why i can't see it oops because the color got changed there we go you can tell i'm not like i'm not at all very skilled at this kind of work so my icon is just going to be letters and we're just gonna make big letters on a background because i i'm not skilled at anything artistic so eventually it'd be cool to like get a real icon but for right now i just need to get something done actually let me let me check back in on this linux thing cool looks like everything ran all right so i think we're we're good and we're good with linux i'm gonna leave it open just in case there's another step that i forgot about but i think we're good and everything's fine for that step of getting the linux distro running uh so let's see that looks like pretty much in the center i'm not too worried about it so we can export this as so we can do is first first thing we can do is save and let's save this as just sf.xcf so that way we can come in and edit it if we need to and then we're going to export it as a ping so sf.png okay so we have that exported now actually let me check all right i think my 25 minutes is up the timer got reset when i restarted so let me um let me go back to the chat right now for about five minutes i'm gonna go back to the chat i'm gonna answer some questions when we come back we're gonna take this same design here and just change the dimensions and we're gonna make a splash screen and then we should have everything we need to go forward with doing our first like build maybe we might use the android simulator in android studio to do one test run before we actually deploy it but we're getting close to being able to deploy this all right so let's see the chat um there's a lot of people saying hello so hello everybody someone says stay home stay safe corona fact yeah for sure let's see um someone's asking will i learn web development and this i assume they're asking like in this live stream will you learn web development um this one probably not because we're doing a lot of like setup work there's not really a lot of code going on in this stream but in the previous streams we do a lot more code so you might learn a little bit more uh from that uh let's see uh i'm a full stack mern web developer um so that's uh what express react and nginx is that marin i think that's fine um i need or is it not nginx is it node i can't believe i can't remember what mern stacks stands for um is the end in mern node or nginx let me know in the chat because i can't remember uh i need a project please help me actually i worked on upwork but i don't get any job last month uh and then there's your skype so yeah if anybody needs a merge stack developer for a project uh check out the chat at the beginning of the stream for um uh new ruzo has their their skype info in there yeah actually a lot of people are getting laid off um at least in the united states a lot of people are getting fired because of the coronavirus so um that's rough like hang in there everybody um i know that's tough my wife lost their job on on monday uh so i definitely understand um things are rough so if you can help each other out if if you didn't lose your job like you know try to help help out where you can all right someone asked what coding language this is uh the app is built with javascript so with uh react native all right somebody's spam in the chat see let's uh we're gonna hide that so let's see amir asks if there's a playlist of this you know what now that we have uh you know we're up to five streams now uh i think i will make a playlist of this so that'll be coming i'll try to make a playlist at some point today for it someone asks what this app will be able to do um this app will be able to track the level of focus that you currently have on whatever you're doing and then warn you when your level of focus is dropping uh charbelle says what are you using for rendering react native um i'm not i'm not exactly sure what you mean by rendering react native but uh we use um expo uh so that's i don't know if that's exactly what you mean but that let me know if that answers your question uh benson asks if it's morning or night uh it's 12 30 p.m where i'm at right now uh bloody creature says uh don't waste your time self-taught programming takes too long um well it does take a while but uh i don't think it's a waste of time like to be honest with you um teaching myself to program was a huge thing like in terms of being able to provide for my family like if you take like the job i had before i started to teach myself programming and the job i have now i make about five times as much money per year now as i did before and that was just from self-taught programming so it took me a while took me a couple years i didn't get there overnight i had jobs in between um but you know it's it definitely is better like you know i didn't have to spend any money on going to university uh or all that time i was able to make money the whole time so uh i don't think self-taught programming it takes too long or is a waste of time is actually a really good way for me to keep working and keep learning and keep paying the bills and providing for my family without having to go into debt from student loans and stuff and now like uh i'm i'm very lucky i'm i'm able to make more money you know from my family than i ever thought i would be able to so yeah it worked out for me let's see a lot of people are asking like what we're doing for this app so i explained that a couple times already so um i guess if if you're just joining and you didn't hear the explanations you can always rewind it like before beforehand in the uh stream to hear the explanation and then come back to the like what we're doing now um if you're joining a little bit late and want to catch up you can always like rewind the stream to the beginning and then play it on double speed and then you'll you'll get everything that happened and you'll catch up with us uh on the live so i recommend doing that if if you join like in the middle and you're totally lost that's a good option let's see blazing up says never even heard of react native before is it good um i i think it's good i think if you already know javascript uh then it's a really really good way to build native apps [Music] without having to learn different languages for android and ios oh no my timer quit again all right that's it i'm done with this timer this is like three streams in a row now that my timer quit working so i gotta find a new timer that one is just not working for us i thought it had been a long time here all right so i didn't get through all the questions i'm going to stop and get back to the code now uh i'll come back to the questions though all right so we've saved this as our app icon now we need to do a um let's find this we need to do a splash screen which i also have up here actually well let's let's uh upload this while we're waiting so i found this this site which is app icon generator which you upload your icon in 1024 by 1024 pixels and then it'll give you icons in different sizes and files so uh let's let's do that um we're going to name it so let's upload our file which we named what do we name it it should be right here unless it went to a different folder now the default folder to save those files is right here that's really odd let's look in our our folder system then that's weird let me export it again see where it went sf.png oh it went into documents that's weird for some reason the default folder was documents all right so we'll go to documents [Music] sf area and i want to name it the same thing that we have in our app currently just to like save time so it's icon.png generate these i'm not going to worry about the ios stuff for now we'll do um probably like a different stream at some point and do the ios build and everything uh all right so we have our icons and i want to unzip these oops i think i opened this twice yeah i did all right so what did it send me wow send a lot of different files here let's let's see what the heck it said i just want that's crazy all right well let's just extract them all for now so we can take a look at them here see what we want bring this over app icons all right so this one looks like play store that's what we really want uh so i'm just gonna grab that one i think yeah for now i'm just grabbing this one i think we just need one for now i actually think what is the difference with this yeah maybe we didn't need to do that you know what i'm not going to use those i thought we'd we'd get like different ones that would have been that would have worked but i think i'm just going to pull over uh the file that we made so in our documents and so we have this sf and i'm gonna pull that over to our assets and i'm going to delete this icon and i'm going to rename this one there we go so now that'll be our icon and we can move on to our splash screen let's see this is the icon page we could just get rid of this page we don't need that anymore uh splash screen okay add a splash screen i thought i had this open already i guess not all right 1242 by 2436. all right now this is for ios but i i read through this a little bit uh earlier i just kind of skimmed through it and i believe this will also work for android so we're gonna we're gonna try to do that as well so let's go back to our image editor there we go yep and let me [Music] i'm gonna pull this out we don't need the full screen i'm gonna shrink it up a little bit so we can see our instructions as well 12 24 okay so let's take our background and let's see if we can resize it oh i don't think i can from there let's talk about let's see if we can do it here image canvas size yeah all right cool let's change the canvas size to we want width to be 1242 pixels and we're going to be 24 36 pixels tall let's resize that and let's let's put the sf part right in the middle that looks that looks okay all right all right cool so now we have um a different size we have our background here let's see if we can fill in our background with with this color i don't know if we can um color yeah it's not gonna let us what do we need to do here let's scale layer change size resize layer to the size of image see if that'll work sweet that works alright cool all right awesome so we resized our background layer now let's export this and let's just export this i guess we could say we'll go sf splash i'm saying sf because i've i've decided to name the app stay focused i don't really know if there's another app named meta or how that works but that's just the name that i uh thought of yep export all right now let's move this over oops oh there it is let's delete our splash and change this to splash [Music] cool all right so we should have what we need and i think our app.json already is showing what we need so yeah so our splash it's already there uh background color actually so let's change our background color to match what we made the background color for our app we should be able to find that out i think from this what's the current there we go there's a hex color cool let's save that that might be the only code change that we need to do all right cool and i think we're just going to leave everything else for the splash screens as like the defaults and we're going to be done with that step and let's see actually we're done with this as well let's get rid of that deploy all right yeah a lot of this stuff i'm not going to worry about for now okay we need android permissions we might need permissions for that vibrate feature yeah let's let's check out our permissions here okay so we do have vibrate all right let's add that then [Music] whoops forget the comma [Music] android and then [Music] permissions and permissions is an array of strings vibrates okay all right so we should be good there let's get rid of that and comment at projections i'm not going to worry about the ad projections until we uh we get rejected so let's get rid of that all right let's talk about okay so way back to where we started here we're still on step one installed it uh install g expo click okay so i am using yarn let's just go ahead and be 100 sure that we have installed this and we're going to do a global install uh it's just gonna work without let's see if it works without me running this as an admin it might give us an error if i'm not an admin if it does no big deal we'll just reopen uh as an admin all right we've already i believe configured app.json well let's see for android at least looks like we're going to need to have a package name and a version code i don't think we have that yet so um let's try that let's create a package and i guess i'll just use the um your company dot your app name um i don't know what my company name is going to be just name it after myself and your app name stay focused and then version code is going to be one this version one there we go save that all right still fetching packages all right we'll give that another minute if nothing happens then maybe i'll stop it and then do it oh cool just being too impatient there looks like it's still doing its thing um see i'll do i'm going to stop maybe in like 10 minutes and get back to some questions so hang in there if you uh if you're asking some questions i will get to the chat again and and like 10 minutes so about 1 p.m eastern time i'm gonna stop and do questions i went over a little bit on the last question so sweet all right so we're definitely installed now it looks like maybe i didn't have uh this installed globally i think maybe i just had it installed uh locally like on this package so good thing we went through that so that should work and name icon and version are required slug is the url name that you ask javascript is pub just publish to let's see if we have slug right stay focused just double checking to make sure we have what we need it looks good i'm not worried about ios for right now uh sdk version do we have that yeah we do okay let's take out ios from our platforms for right now since we're not targeting ios at the moment we'll just do android and web alright we can start the android build uh okay all right this is interesting let's let's take the time to fig to understand this here uh because we are building for android so we can do a build apk or an android app bundle app bundles are recommended but you have to make sure the google play app signing is enabled for your project you can read more about it here okay it looks like we'll need a key store um that they will generate for us which is sweet because i don't know what that is if you let expo generate a key store for you we strongly recommend that you later fetch the key store and back up your key store all right we'll do that and we'll i'll save it in lastpass we'll need that to update the app all right cool let's just get down wait for it to finish building okay so we can call a web hook that'll let us know when the build is done i'm not going to worry about that and we can test it we'll definitely want to test it and then we'll submit it okay so here's what we're going to do first we're going to test uh we're going to test it before we go through the build because the build seems like it may take a little bit but then test and then we'll run this and uh so let's let's do the test and this is going to be actually let's do let's commit the the changes we made we need to get add git commit we have this message uh and um add icons and update app.json we're gonna push that to github so that's push and now let's run yarn start and let's try to run this on the android emulator all right looks like i'll have to start it first so let's do android android studio this would be a nice test of the power of this computer to see if we can run all this um we need to do abd manager and i already set up a uh a test pixel device so let's start that up hey it was already running the previous version before we did all the uh all the updates here all right so now that that's running we should be able to run this again i'm just pressing the a button as a shortcut to start this up i could come over here and press the emulator button all right so now we should get a connection here at some point it's possible that we might need to refresh the app which we can do let's do a refresh now there we go all right so now it's going to load the new stuff sweet um so now we have the new stuff here uh we can try to link let's try to link our device and actually log in once and see if that just to run through make sure we don't get any crazy errors or anything right so i need to go on my other screen here and grab some of my info so i'm going to grab device id and password oops no let me paste it's not letting me paste no there's gotta be there's gotta be a uh setting on here to let me paste stuff in here um there's some is there a keyboard option no all right there we go well at least i found the found the dark theme uh if i have to actually type out this is gonna it's gonna take five minutes to type everything out that's crazy you know what actually there we go there's the paste all right if i hold in for a second it just hit me like oh maybe i have to pace like i do normally on an android device and that's you just hold in the the button like you're tapping like a long tap and then you get paste so crisis averted i just should like not make my password 70 characters long and then maybe i'd be all right i just listened to too many hacker podcasts and now it's made me paranoid about making my passwords very long but i figure like if we're dealing with data from my own brain i should have long passwords right sweet all right let's see so setting a timer for a long period of time multiple minutes is performance correctness issue on android let's read this what it's saying as it keeps the timer module awake and timers can only be called when the app is in the foreground okay that's fine so set timeout do we have a set timeout in our app oops i don't need that all right so we don't actually have a set timeout in our code so i'm guessing that's in maybe one of the packages we're using so can't really do anything about that so i'm gonna i'm gonna dismiss that all right cool so this looks good we're logged in um i don't actually have the headset on so let me let me turn the headset on just so that we can verify like with with data if if we're gonna get um like if it will work with the data once we do that we can actually do the build another way i could test this is i could link i could hook up my android phone by a usb cable to my computer and we could test like that but if i did that you all wouldn't be able to see it so that's why i'm not testing that way we did that a couple of streams ago and it it did work with the previous version of the app none of the logic has really changed too much so i think it's it's fine it'll still work uh what i don't think we can test is the vibration feature so i don't know if we're going to see anything at all when the app is supposed to vibrate um but the uh this notion device is starting this is the brain computer interface i'll put this on in a second and we should see some real data from this as soon as the operating system on this is started then we'll we'll go forward with it while i'm waiting for that which should only be a few more seconds i'll check the chat all right um i got some questions about what am i building it's a brain computer app that checks your level of focus if you want to know more about it you can check out previous streams or go to like the beginning of this stream and you should be able to get a better explanation while i'm waiting for the device to start too i want to remind everybody that if you're interested in this particular device the the notion from neurocity you can check out my youtube channel the links in the description i did a more in-depth review of this device and showed off some of the stuff that it can do so check that out i also do some coding tutorials i just did one on typescript like an intro to typescript i did a video on uh javascript documentation cool it's online so let me put this on so if if you at all like what i'm doing here please check out my my channel as well and i'm trying to do since everybody's in quarantine i'd like to do some type of content probably like a live stream or a video every day i'm going to try to alternate between live streams on free code camp and a video on my own channel so hopefully it's it's helpful to some people especially if you're quarantined by yourself i'm hoping that maybe this is like you know a little bit of interaction with with other developers you know with me and with the people in the live stream um i know it's it's probably tough uh tough for a lot of people right now so i'm not a doctor i'm not a mental health expert uh but i do know how to code so i'm i'm gonna do that all right this looks like it's working so as i suspected we're not really getting the vibration because it's a simulator so but since i successfully tested the vibration before on on a real device then i'm just going to assume that it works so cool that works all right i'm going to test logging out now oh okay you know what when we log out nothing happens on the screen that's interesting i think maybe we should have something happen on the screen otherwise users would have to like close the app something needs to happen let's fix that before we before we do anything else because i think that's that's a big deal i'm going to take this off just for now so i can put my headphones back up um yeah i think that that's actually a pr that would be a pretty annoying thing if the user had to you know like constantly restart every time they want they logged out so uh let's let's fix that now and let's see how we can do that so when we log out what would change so let's see right now the um the login page is shown if we don't have a user so what is logout do so notion log out let's find our logout function oh we just directly call notion.logout let's see what we could do i think if if we create a function that's a log out function and we add notion.log out then we can also manually clear the user and that should that should fix it so let's add a logout function i'm going to do a log out and it's going to take no parameters and we're going to do a notion.log out and we're also going to set user back to let me see what we have we're going to set it back to null oops set user no okay let's save that and see like a lot of stuff is happening here we should be able to see oops permission denied for what let's dismiss all that let's do a refresh [Music] it looks like all right let me uh copy my password again [Music] okay now when we log out this time it should go back to our other screen okay cool it did oh no but we're automatically getting logged in and we're getting we're getting a warning okay let's i think warnings are okay uh and it won't like crash our app so i'm okay with that for right now if we get any any red colored notifications that are errors then i'll be more worried but i do want to see um so we we had the issue of the auto logging in happening and i want to want to make sure that we're not doing that anymore so we had that happening because of uh i believe it was notion login was it this one was automatically logging in i think it was all right let's see um let's see if this will work i'm i'm thinking that if we take out user and set user as things that we need to track in here that that might solve our our issue because this won't reset let's see all right cool so it didn't log us in let's submit this and let's log out cool all right so now everything was still saved which is actually pretty useful um and it's not it's not doing that so let's try to let's manually refresh just to verify all right and the thing is it's making us log in again we did want to avoid that we wanted to avoid having to log in again so i thought we had it we did have it set up so that if we had the device id we would get a new notion and we would set notion which that's actually kind of weird that our auto login is not working let's test this let's run on a web browser too because we had it working on a web browser can't be reached why not okay looks like it's got to build i wonder if i can run it on web and android at the same time all right so this is automatically linking it has it okay all right all right there is some weirdness going on with um automatically starting but at least like it does seem to be saving so it's it's saving the id which i'm okay with that if the user happens to have a password manager they can save their password so i'm okay with that for now all right oops i went over time i'm gonna go back to the chat now i apologize i totally lost track of time i shoulda i should have checked the chat like 10 minutes ago uh so let me go to the chat now and um take about five minutes here in the chat um hey david uh corbin's here he says hey jesse keep up the great work thanks man good to see you in here i work with david he is like a uh a kubernetes expert um moshiko says how do you manage to stay focused over time um i don't know uh i guess uh when i really need to stay focused like i'm gonna be honest i take um i take like a supplement called g fuel that's a bunch of b vitamins and like other vitamins and caffeine and it does help me stay focused so that's that's what i do when i really need to focus um other than that i i don't know i just like take breaks when i need to um yeah uh boym lol says how many years of experience do you have um i don't know it's been a lot it's been a long time it's been a long time maybe seven i'm trying to think back to when i started um from the time when like i actually started getting paid to do coding like consistently i'm gonna say like somewhere around sevenish years uh as she says uh it's my first live session on free code camp oh congratulations welcome thanks for watching uh gamm002 says how many hours of coding experience would you have approximately oh i i have no idea i'd have to do some serious math and an estimation work on that one i don't know i mean i guess like so if i've been coding for about seven years full time then i mean you figure i wouldn't say that i would have like 40 hours a week of coding because so much time is spent in meetings and things like that like let's just be like very conservative in our estimate and say estimate 20 hours a week coding let's factor in vacations and sick days let's say like 20 hours per week coding and 50 weeks a year for seven years so uh let me get my calculator out because i don't want to make simple math mistakes live on youtube right so let's do this 20 times 50 times seven uh all right we're going to say 7000 coding hours so uh i guess that's a lot of hours right and i mean that's definitely a really big estimation right because there were probably some weeks when i did less than that and some weeks when i did more than that but that's my best estimate of of coding which i probably have done more than that because 20 hours a week is not really that much and there's been times when i've been working full-time coding and then also have an extra part-time project on the side but that's that's a decent estimate i'd say i have at least seven 000 coding hours at this point bart says hey from france hey how's it going uh i ir a ayr how do you pronounce ayr but anyway says what resources did you use to study um free code camp so free cocaine.org has a great curriculum which is i really like it i used that i used udacity has free code or free courses a lot of youtube videos there's a youtube channel called learn code academy that i really liked um there's a youtube channel called devtips that i liked to watch um let's see codecademy uh had some great free content and then of course like documentation um stack overflow uh articles and stuff mozilla developer network so those are all like my main my main resources uh yeah let's see and then actually like building projects is a great resource let's see opinion on types so meep says what's your opinion on typescript will it replace javascript in the next five years uh i don't think it will replace javascript like yeah i i mean i don't really know the numbers i haven't looked into it that much but i doubt that it will replace javascript charbelle says make a new timer yeah i could make a new timer somebody that used to watch the streams a lot his name's harshit um he made a uh a timer for me but i forgot the url so i just need to figure out what the url of it is and um and go to that timer that one always worked really well all right i'm gonna that was about five minutes of um chat so i'm gonna go back now because we we need to build now so the um i guess i should say like keeping the user logged in is not working exactly like we had it working before but it's it's still saving the id so i'm okay with that and then like i said if the user has some sort of password manager they could save their their other credentials in here and i think that would be okay maybe we could potentially give the user an option to stay completely logged in all the time on a future update but i don't want to make that the default so i'm going to leave it off for now plus i just really want to get this bundled up into the app store like i said we are having some error messages come up i shouldn't say air we're having some warnings come up which i'm okay with for now uh as because i don't think it'll crash our app i think we'll be we'll be all right so we're not having any crashes so um i think we're good to keep on on going let's do uh we're gonna have to save the changes that we just made we're gonna do an am flag for our commit and let's do fix because this was a bug um let's see take so i'm committing this and it says it's to take user back to login screen after logging out i'm going to push that if you want to see the code that i'm pushing then check out the github repo the links in the description all right let's go to i'm gonna shut down now our our expo server and close out i have a lot of windows here that are not necessary right now so i don't need this right now we did that um i don't think we need this and bundles i don't think we need this i'll keep it i must open it for a reason so i'm going to keep it up for now now we're going to do a build so let's run the expo build for android and then it looks like we're gonna have to answer some questions for this and let it run for a little bit and while it's running i can answer some more questions so we're gonna do expo build android and i guess we'll have to make a new expo account because i don't think i ever made one just crazy that i never made one because i've been using expo for years but i'm almost positive i do not have an account so let's make a new one it's cool that i don't have one because then we get to go over the whole process live username i'll just say j weigle and password i'm gonna make a password over here with lastpass so i can have lastpass generate secure passwords jay weigle already exists interesting let's see if i have an expo account uh expo dot io see if i can log in uh forgot password email jessie gmail.com all right i'm gonna open my email on another screen here evidently i do have an expo account well maybe i do maybe somebody just used the name jygo for an account well i do have a password so i'm going to reset my password here on this other screen and i'm going to use that new password that i just made and save password and i'm adding this account to lastpass so we'll have it cool let's log into my account [Music] suite i have no builds all right cool so let's try this now and let's pick the right answer log in with existing account uh jay weigl here's the password sweet let expo handle the process definitely build ios bundle i said android set expo debug true in your dev environment to view the stack chase what happened [Music] hmm maybe i hit the wrong did i hit the wrong thing oh okay once i thought it would just automatically pick that uh answer is one gonna work no it said false why did it say false all right what am i doing wrong here everybody let's make this bigger all right so it says let's try this again expo build android just there's a new version of expo cli available like we literally just installed this globally how did we get the older version all right let's do this let's get the new version first of all well let's try to npm install it this time how about that we used yarn before maybe maybe i had installed it with npm originally and for some reason it's using that one instead of the yarn one i mean you all saw me not that long ago install this so while that's going then we will let me double check so start the build expo build android right okay um wow this is taking well we'll see let me go to the chat i'll answer some questions and then if i get through all the questions and we're still not finished with this then we'll we'll handle that if it happens um we have a question that says can can you loop through an array of audio files hello from france hey how's it going um i'm assuming you can loop through an array of anything i'm not sure like how the audio files are like the format or anything like i don't have experience with that but if you have an array like i'm assuming you can loop through it um valentino says what's a brain computer jj says what's a computer this is the brain computer it reads your brain waves and then sends them wherever you want them to go like in terms of to an app or a website or something like that you can learn more about this i did a video review on my youtube channel the links in the description for my channel so you can check out to learn more it's called the notion and it's built by a company called nerosity wizock says react native was fun but flutter was better i haven't i haven't had a chance to use flutter yet i've heard good things about it um still using react native so um yeah can't really comment too much on that but um yeah i've what do you all think about flutter i don't want to start a battle between react david and flutter because i think they're both good um but what a if if any of y'all have used it you know what do you think uh tasha says what database are you using currently i have no database set up for this particular app uh so no no database um i don't know what th the neurosc device is has like its own um operating system and server and they they might have a database running on here and i don't know what it is but um in terms of like what we built for this app i don't have anything uh for a database arif says why why am i here uh obviously because you wanted to watch some code right or it was an accident in which case welcome and feel free to ask any questions if you have them uh lrj says i am human uh excellent so am i dl td says y'all so smart wish i can catch up oh don't worry about it we're not it's this is the fifth stream that we've done so like uh if if you if anybody can like jump right in and understand what's going on at this point then you have to be like very smart and experienced at this so um feel free to ask as many questions as you can or as you want to um and you know go back and you'll watch the previous streams definitely recommend watching them at double speed that'll help you to catch up and i i think the streams are easier to watch in double speed like i i talk kind of slowly i take my time so double speed is better [Music] uh pap stew says can you suggest to me some good channels or websites for android development i don't know too much about specifically android development uh he says using java or kotlin yeah i don't know for sure so um i know the free codecamp youtube channel that i'm on right now does have some videos about different types of development so we probably have something about java and kotlin so i'd check that out other than that though i don't really know too much about resources for that let's see a few people join saying hello so hey how's it going uh xx snooki says do you have any tips for people learning c sharp uh not really what is this telling me let's i'm gonna close this since we can't connect to the server anymore so there we go there we go closing closing a few things i thought it just occurred to me that hey if i close all this other stuff maybe this will install more quickly so actually it did so let's uh let's try to run let's try to run this again see if we're on the right version now and if that makes a difference right because if if we're using the latest instructions it's possible that because i was on an old version that's why it wasn't working i i don't know it's just a thought um i want to see answer so i'm trying to go up and down to see if i can change this like up and down but that's not working so i guess let expo handle the process let's see huh why is it doing this all right we're gonna we're gonna have to go into um go into research mode here for for a minute uh so let's see and one thing i don't understand is why it keeps trying to build the ios bundle when we're trying to just do android let's see what we can get alright cool okay looks like we need to start expo so let's run expo kind of odd i would have thought we didn't want it running when we do the build but i guess that is not the case so we want to and that this makes sense right if it's trying to connect then we definitely want it running alright cool so let's try it again i still i don't like that it automatically put in false for me here because i think i need the keystore so while this is doing its thing i want to look um look this up and see if anybody else is having issues with that hmm this up already all right well i guess when this is all over we'll try to grab our key store see if it exists otherwise we have to figure something out for our key store it seems like as long as we can when we have to upload otherwise feel free to upload your own that's weird oh well all right while that's happening let's let me go back to the chat [Music] all right the last question was uh do you have any tips for people learning c sharp um i don't really know i guess um just similar tips for learning anything try to do a little bit with it every day uh just keep on like try to try to build real projects with it one future says how can i improve redux skill example or project redux is hard i'm a junior front end deaf yeah i guess um for redux try to start out with something very simple because redux is difficult so try to start out with a simple project once you see it all working together on a project it gets a lot easier uh but you know i definitely try to find some sort of tutorial that'll give you a very simple project um you know you can check out like the redux documentation and go through that it's it redux is going to take a while for you to understand it's just kind of difficult at first so uh don't be discouraged if it's if it's taking a while like it's it is complex solo code ninja says hello brother hey how's it going xero says uh you can build ios apps on a pc no i don't think you can i think you could just build um android although expo might let you build like maybe expo like build it on their servers i'm not really sure how that'll work with with expo but i'm um i'm worried about building the android stuff right now i assumed i would have to switch to my my mac to do the ios stuff uh zanik says uh what up can you do html please i don't do much like straight html uh on on my live streams uh mostly i'm doing react native nowadays chinmay says uh how much did it cost oh the i assume you're talking about this spring computer interface i believe it was like a thousand dollars somewhere around there um this was like one of like the first test devices i don't know what the retail price is going to be once they they actually have them available like the finished product available chinmay says flutter is amazing still growing yeah that's what i thought too like i think flutter will be a legitimate like competitor to react native or i don't want to say competitor because that's like the wrong way to look at it i think it'll be a more legitimate option once the community grows right one thing i think react native has that flutter doesn't yet just because it's a lot older is a much bigger ecosystem more packages available and flutter will flutter will get there right as long as it keeps getting growing and more people using it it'll get there it's just it takes time so i think right now the flutter ecosystem is just it's just not quite as big right and i mean that comes with there's good and bad about that like if you want to get in and really have an impact on an ecosystem it's way easier to get in on an early ecosystem like flutter than it is on something like react native but if you just want to get in and build stuff the odds of you finding ready-made a you know examples and libraries to do what you want to do on a younger project are lower than on an older project so it just it really depends on what you want to do chinmace is waiting for webrtc on flutter good so like that's a good example it's just depending on what you want to do it may not be available for a younger project it's not to say it's a bad project it's just it's going to take time for people to start developing all the things that they need let's see let's see mr now now i'm not sure to pronounce your name apologies for that says uh what about algo should i have to learn it before studying programming you mean like algorithms no you definitely don't need to learn that before you start programming um you can start building stuff without that cmo says how to learn spring boots i don't know because i don't really know it a lot of people that i work with use it but i i don't know very much about it at all if anybody else knows more about it please let us know in the chat um mag mala says bruh i just learned drop down menus on html this is definitely out of my range oh well feel free to ask questions and watch if you want to i understand if it's if it's a little out of your range but uh congrats on learning drop down menus and uh that's that's definitely a good skill to have when building websites um but yeah i i really hope that these streams will be good for people at any skill level because i i do my best to explain what's happening and i do take any questions so uh i guess you don't don't try not to feel intimidated if you're just starting out and i'm happy to explain what's going on uh vivec says will you do any machine learning projects on the live stream i might i might we'll just see you know how this goes i think the data from the brain computer interface you could do some really cool machine learning stuff with that so i'm thinking like that's a possibility at some point and there's some other things that i think could be cool with machine learning that i'd like to do so i don't have any plans to do it in the immediate future but you know it is on my mind for some some projects that i've thought of uh brian says love from kenya love coding oh awesome thank you uh adrian says what react redux package is the best easy peasy um i'm not sure what you mean by react redux package if i i guess if i were to start out i would use create react app to uh to get started i believe there's now a react redux starter with create react app where it'll it'll scaffold out a react app with redux already kind of connected i haven't used it yet i just read about it so if i remember correctly i think that that is out there now that would probably be the best way to get started with reactant redux okay i can monitor the progress of the build at the url which i think i already have that open though right [Music] sweet build details building creating key store keystore created successfully key source and sources oh cool so evidently we did get the keystore created somehow although it was not obvious from here so let's let's check out some of the info we're getting from this so we're not really getting great info in the console which is cool they got this this thing here so um let's see so we got the keystore starting the build process icon setup native modules whoa whoa build is finished sweet nice build successful so cool all right let's download it get the apk very nice and it's uploaded now to s3 very cool all right so let's let's go to the next step here um all right so we've built it's finished building let's test it to run it on your android device make sure you have android platform tools installed along with adb and then just run adb install with usb debugging all right i'm gonna plug my device in and then i'm gonna try to install this that we've just made on my android device and uh let's see i need to need to plug it in in the back of my computer so i i forgot to bring i was going to switch this up and have a usbc cable but i forgot to bring it so now i need to find my other cable that is usb on one end and usbc on the other end all right found it i need to unplug something that is in hopefully y'all heard what i was saying i was in front of the mic but okay all right plugging that in [Music] and and i do have a robe on it's cold in my basement so it's not it's not that professional but this is how i i like the streams to be authentic and this is how i often code so it is authentic all right so i have that plugged in now i need to run the adb install sweet so let me move let me get rid of that let's turn that off and i'm just going to go out downloads and let's see what we called it stay focused with all kinds of stuff so let's see adb install and then the file name so let's let's do that i'm pretty sure i had adb working adb huh i thought i ran an adb command not that long ago all right let's see how do i get adb to install the android platform tools let me open up my android studio tools all right let me let me do a little search here what was it called android platform tools she get the latest sdk platform tools for interest us sdk manager all right so android studio has an sdk manager let's see if we can and from the sdk manager we can get to tools see how this goes i should have gotten these when i downloaded i downloaded this so let me see if anybody oh barratt says maybe you installed adb for windows system but not for ubuntu yeah that's possible let's see oh sdk tools android sdk command line tools it said not installed so let's let's try to download this cool that's kind of odd i would think something like that like should have been the default but i guess not all right cool that was fast all right now let's see i might have to restart the terminal yeah or just start a new one let's see if i got see adb hmm try i doubt it would work in my linux subsystem hmm oops that was accident um maybe i'll just try to do it this way see if it works i thought i just did this oh it already exists why didn't it not write in an update that's sweet oh there we go now how do i install that uh cmo says add adb in variable environment um i wonder if i actually have access to any of the android tools that's very weird nothing man it says add to environment path let's see all right add adb all right let's see all right cool let's try this open windows explorer right click my pc properties advanced system settings environment variables we got path double click it okay browse whoops see program files adb fast oh hmm hmm i'm not seeing where to add this hmm oh man just copy the downloaded folder path and add us a new path oh that's right we did download that okay all right that'll add it to windows path oh okay i totally didn't see this first section that seems like the easier one but it looks like we don't have the exes we just have the dlls unless um oh actually fastboot adb application yeah we could copy that to c windows and it should be good to go from the command line actually let's do that let's just copy i'm going to copy those and then windows oops no no no cancel that all right so either way that should work at least for the windows part which is fine because i'll do a command prompt and let's see if we can do it now adb yes it works all right cool so we got a lot of stuff going on here okay oh goodness okay so back to where we need to go for there we go ah no i forget it's this actually let me look here cool i have adb here as well which is sweet so i'm already in the downloads here so let's just rerun this command that we just ran cool so this should perform an install on my phone success all right so how do i actually run this then hmm all right let's verify okay so i have a device oh hmm it says it's installed but i don't i didn't see anything happen on my phone interesting okay let's troubleshoot that then uh okay let's see madness says it's much easier to have a copy of the apk on your phone and then install it manually i could probably do it through uh google drive right you could upload the apk i'll do that on my other screen i'm just uploading the apk oh there we go it works it's in the process of uploading i guess i'll start it on my device in all right cool so it uploaded let's go to google drive i mean i would like to know why it's not working but you know just to get this started we can do the upload here let's see where's my google drive i'm gonna download this downloading it to my device now cool download worked all right i'm installing so we'll say as i'm installing this twice it opened just to give me like security warnings because this three times um it's it said there's security warnings here but it's opening so i don't know if you can see that it is open on my machine so um that's that's pretty cool let's uh i guess i can i'm going to try to run this on my device so i'm going to copy and paste my um my key or my like my device id into google keep so that i can easily copy and paste it into my phone and try it on my phone [Music] let's see cool google keep syncs very quickly it's really good for this kind of stuff all right i pasted that in let's put my email in and uh password i'll go into my lastpass and say nope i need um nerosity all right hopefully this is the right password nice all right cool so it's working so obviously i'm getting it's vibrating i know if you can hear that you can hear that on the mic now it's vibrating and uh i don't have the headset on so obviously like i'm not focused right and it's giving me this red this red message sweet i'm gonna log out now so it stops with all this vibrating oh no i logged out and it's still vibrating in red that's a bug but at least the vibrating only goes on for maybe like 10 seconds at the most maybe less than that uh but all right that's cool all right very cool so it works and uh i believe i have like a stay focused icon now in my phone which is really sweet see if i could find it yeah this so the little sf isn't an icon very cool all right so that works i'm going to go through the next step now of um let's get rid of this and submit it uploading apps so to upload the previously built standalone adapter apps where you simply run expo upload android uh but i thought we have to do we have to create an account download this json private key after that you have to create an app on google click console and upload your app manually at least once all right so we got to go to google play console which cool now i already signed up for an account on here so you would have to do that step let's create an app we're gonna call it stay focused short description alert you when you start to lose focus and the full description is works with the generosity motion q2 there you go current level of focus [Music] nice vibrates all right cool all right graphic assets screenshots all right we gotta add at least one phone screenshot [Music] all right well i guess i'll uh take a screenshot from my phone then and download that all right all right i guess i'll upload the screenshot to um my google drive so that i can get it back down there [Music] all right i know it's been a while since i've gotten to the chat so i'll get back to the chat in just a minute let's try to get this screenshot uploaded all right so the screenshot's being uploaded to google drive i got my drive open on my other windows so i should be able to see when it gets there yep it's there now i'm going to download that screenshot and should be able to there we go uh oh need to resize your screenshot uh okay it's too big feature graphic goodness i need all this stuff to application productivity content rating man there's a lot of stuff to do this all right well let's just keep going then all right uh hi-rez icon let's see if we can use that uh icon that we created dimensions required are 5 12 by 5 12. uh okay so let's take pixlr [Music] all right so if i'm just resizing stuff i like to use pixlr i can figure out how to get logon pixlr editor which one is the i don't remember this is different than what i was looking for maybe open image let's open this one image image size there we go all right hopefully that'll work so this is probably boring i didn't realize uh how much was involved and now this one needs to be minimum length 320. interesting all right at least two screenshots are required oh we need at least two huh all right well i guess i'll take another one then let me do one logged out i guess there we go um okay so let's go into the editor then and uh let's get a new image and i'm gonna upload this image so we got this screenshot uh yeah we want a new size and it needs to be what was it three minimum length for any side 320 max length for any size 3840 so what do what do we have that seems like it fit though didn't it let's try that again because um it's between 320 pixels and 3840 pixels let's try that let's try that again see what it says you need to resize your screenshot max aspect ratio two to one maybe when maybe we're not hitting the aspect ratio let's see image size um let's see if we can google play uh let's see let's see if we got something that will do it for us app screenshot builder i don't want to create an account no no all right let's see uh harish says use bulk resize photos.com okay i'll try that actually what about this one cool see this is cool now what can i do with this if this worked that's going to be that's gonna be sweet all right let's open this and extract to download screenshots okay screenshots all right let's try where are we at is that gonna work nice screenshot too oh sweet nice feature graphic what the heck is a feature graphic 10 24 by 500 um okay let's go back to this is so much more image editing than i am ever used to doing this is crazy oh way to go all right let's take our um let's take this and use the what 10 24 by 500 uh let's see if we can just take this and do i guess we'll have to do the whole canvas canvas size was this 1024 by 500. okay interesting all right let's take this text then and um there we go all right let's export as well they want this as png oops sf um well this is called feature [Music] bear with me everybody this is the first time i've ever done this and i guess this went to documents yes all right what else do we need i don't have a promo video we put that in tags all right tags no i don't want to leave this thing all right let's save draft now i would hate to actually lose anything we've done here all right so so far i think we've got everything that we need up to here i guess we don't need tags content rating what are we gonna do here you must upload an apk before taking the content rating questionnaire okay that looks good that's good then so we'll skip that for now website i don't have a website please provide an email address there we go phone number hey now you all know my phone number um privacy policy if you wish pride policy policy please send it below um i don't have one right now hopefully that won't be an issue uh where can i go where can i upload this apk did i miss it hmm let's do a beta release i'm guessing a beta release would have less restrictions i don't know let me see for production all right let me go back i'm gonna go back to the chat before i do anything else just to see if anybody has anything like to say about this particular process right here let's see oh haru says you could use a policy generator and add the google doc link oh that's a great idea let's do that oh yes i don't have a company name no gotta provide my address for my company is registered i don't have it yes wow [Music] oh my goodness so many questions what ah fine all right what can i do with this platform all right let's just put this in a google doc blank awesome that was a good idea let's let's go to the store listing and now we'll add in a privacy policy save that as a draft okay excellent now i need to i need to figure out i guess i gotta go to the app releases all right for internal testing within minutes i mean how i just wonder which one would be the best to do so did the google lock let me see let me go back to expo and see api access create a service account create new project all right let's do the api access and create a service account pretty i'm not sure if i was allowed to uh have this this looks like the public key so i guess it's fine that's in there um come here baby you want to say hello hey i'm building an app what do you think pretty cool how you doing today good good you say hi to everybody hi all right let's see daddy one of these what are these daddy what are these what are those that's a brain computer you want to wear it yeah it'll read your brain what do you think see you want to see it on the screen yeah all right look all right let's show you brainwash cool let's show this right now look this is uh cordelia my daughter is wearing the headset and this is these are her brainwaves well they were until i moved the screen let's start it again uh did something happen see if the signal quality is okay it's probably too big let me shorten it up for you baby okay there we go all right put your head put your head down there we go okay let's see if we get some better signals here your hair's a lot longer than mine too might be a problem hope it's almost out of batteries i left it on this whole time there you go we got some brainwaves oh we got a little bit got a little bit going on i don't know what the problem is how to refresh [Music] there we go that's crazy your brainwaves look pretty crazy huh what's your brain doing taking food from my belly you want to put this on crooked too i think there we go it's probably going to run out of batteries but that's kind of cool yeah i'll put this on the other screen and you can see you can keep looking at it how about that and they keep looking at your brain what it's doing making all those colors okay so anyway i followed a couple of links and got to this in terms of like the first thing so i guess there's two things to do one is create this account and then that way we don't have to keep manually uploading we can just use the expo command line to do it then we can then we can do the manual upload for the first time so let's do these steps and you know what's going to be crazy is after all of this we're still not going to have the app ready until they actually do the review so it'll take um a while before we get it actually in the uh in the app store i want to close out all these that we're not using now ah let's see [Music] okay okay all right let's see settings api access create service account let's just let's split the screen here so we can follow the instructions i'm gonna take it off now you're done okay good job good job baby okay all right so let's go with there's our settings maybe up here no let me make this bigger google play console i believe this is all right this is google play console there's there we go there's settings [Music] okay um api access create service accounts daddy why do you bring why'd you fill up your water and then bring your water down here daddy daddy that's still getting it's still going yeah because we have it still on okay all right so follow the google api console link in the dialog there was no dialogue just worked daddy it's coming over and over again create service account okay let's do create service account okay he's going again teddy how do we turn these off how do i turn it off you hit the button flip this little button see there you go see it'll turn off now it'll shine on the screen see it's a shutting off you see right there shutting off see now all the lines are oh there we'll stop okay [Music] uh enter a name daddy taking a long time to tell me okay it's taking a long time yeah my wife's doing that we need to all right now here daddy maybe because it's create service account oh goodness service account name daddy maybe because it's old it's not old i just got it a couple months ago all right that's right but you've had it for a long long long time hey no hitting buttons hey what are you doing select a roll users [Music] and we want a json key [Music] all right done here there we go hey you're making this difficult for me little girl what do you think no hey listen hey don't you go upstairs and play nope no you want to play down here you can't hit that keyboard why don't you go play on that computer behind you go play okay we wanted to be able to release manager click on grant access and release manager so role is release manager i guess i'm just going to keep the defaults and add a user all right cool now we can manually upload so let's go to the manual upload instructions so many instructions i definitely need to do this again like very quickly with like make another app because otherwise i will forget so much of this i do have some other apps that i never quite got finished maybe i'll try to finish them and do it what's the matter it won't turn on oh you know what because i i turned off the power strip because the fish tank was being really noisy why don't you go upstairs and play on the chromebook you want to see if you can play on the chromebook no you want to go tell the other kids that i'm i build an app for the phone yeah no oops you want to play something go see if rafael will let you play the switch you'll see if he'll turn it on for you you play mario tell him i told you too all right let's see get your app ready for testing your productions all right so we did the create application take the content rating questionnaire and set up so i believe we created the store listing right so we did all that next steps take the content rating questionnaire so how do we do it all right sign it in place select an app all right let's go into our play console we'll move it over here select an app stay focused hey now on the left menu click store presence content content rating you must upload before taking questions all right well i guess we gotta upload then let's it's very odd to manage apk files [Music] all right well i guess let's let's do the releases then and uh production track you have released it hasn't been rolled out i which one is this the key that we created uh dimitri says you need to do everything that's more called the gray checkbox step requirement if you're using the recommended app publishing format to android bundle yeah i mean i think i'll go with that one then okay on the left hand side oh thank you dimitri so demetrius everything that has this little gray checkbox needs to be done before we can distribute the app thank you that's very helpful all right so let's accept that cool let's browse files and get this apk see what this is all right i wonder if this isn't gonna work because we have a different key we're not using that key we'll see um release notes this is initial release okay view warning message all right so we could use the android app bundle all right let's see which i thought we were we did read about that and i thought we were going to try to do that all right let's let's try this then maybe we didn't build the right one i think we need to start uh let's see whoops oh i forget all right cool let that run for a minute while we take care of some of the other stuff we need to there we go all right so let's get back to that let's see if we could do this yep cool okay app category no no no no no no no cool cool looks like a good rating nice all right let's get that one done have content well let me start that okay about this one it's free and no ads integrate my services with app actions i don't really know what that is do not prove my application all right that looks good okay all right cool eventually i do want to use this with android auto but it's not ready for that yet all right cool that saves let's go back to this cool target audience uh i guess it's not what are your target age groups 18 and older i mean let's just do 18 and older how about that no there we go all right cool and we got the release and expo whoa all right all right cool so looks like we got everything we need right now um this except this build this newer build um where's what part is it at running gradle all right so got through a bunch of steps so basically we got a warning on our on our release um saying that we could have done it basically better if we used a different a different apk so i thought like hey maybe we just do this but it's still building so i guess if the build doesn't succeed very soon i'm just gonna do this just to kind of try it out for our first try and i could always try to upload the other build later on so i think that's probably demetrius says going straight to production not the best idea yeah i wasn't really sure what the uh if i should try production first or not like the app is just uh very basic and there's not going to be a big audience because you need the nerosity device to use it i thought about doing a beta what do y'all think let's let's uh decide here so who thinks we should go straight to production or should we go to beta or even alpha um so basically the options are should we go to should we do beta okay so beta track is public i kind of do want it to be public for everybody that has a nerosity notion device to try it so the options are either beta or production at this point so let me know what you think and i'll check this this is still still working oh okay we've got some all right it's actually pretty close in terms of votes here uh between beta and production it looks like one for one for beta i'm assuming dimitri is leaning towards beta since he's the one that said production isn't a good idea so beta has one two three four votes production all right production only has two so um let's give it just another like few seconds we have a vote for gamma all right again uh harris says for this kind of app i would pick production nothing to risk at all i mean yeah that's i mean i kind of thought like nothing risk how about okay productions making a comeback now i think we're about about even i just wonder what let me i want to see what the difference would be because it seems to me that if everybody if it's still like available then i guess beta would be fine because i would like let the users know to like hey this is the very first like um oh dimitri says one difference between production and beta is an app store there's a text beta in the title yeah i i could see like it's true i don't want people to think this is a completely finished app so maybe beta is the right way to go because there are definitely more features i want to add we didn't really try to make it look amazing um yeah i think i think we can try beta so we definitely want to do open beta maximum number of testers if you set the maximum it needs to be at least a thousand uh all right that's i don't really care how many people use this i don't know how many i'll just put that in uh feedback i guess all right and let's edit release all right so that's enabled let's and i guess one all right so initial release one and then all right so that's still not hey it finished all right cool let's try this one then all right so we're going to try to upload the new one we'll see if this this goes well now technically we didn't test this one so this is definitely the beta all right yeah this is it and this is an aab not an apk so it's the i guess the newer version that's recommended so it's uploading pretty quickly should be ready soon it looks like we completed all the other steps so this might be the last step and this has been quite a long stream how long have we been going for i don't even know what's the time three hours yeah that sounds about right we started at noon yeah a three hour stream crazy i'm like super hungry and actually i was supposed to there's a like an online meetup for this neurocity notion device that i can't remember if it started at two or three either way i think i'm late for it at this point all right it starts at three so i'll be i'll be fashionably late processing uh-oh you need to use a different version code for your apk or your bundle because you already have a version of this code one oops um oh no wait a second different version code is that gonna does that mean if that means i have to rebuild it then i'm definitely not doing that uh where's the code at app json i'm afraid yeah version i i think we had to bump the version so i'm just gonna go back to the old the other one or i could remove it i say at this point i just used the one that we already uploaded that worked with the apk version code one and then because i don't want to go through rebuilding again that took like seven minutes to build that's i don't wait another seven minutes all right we'll try that one all right there we go and review [Music] all right which we know that that was the case so oh cool i can full roll out seconds ago okay dimitri says it's practically impossible to change the key with which you sign your app so be careful not to leak or lose it all right good um good tip thank you for that so do i need to create the release now or what set the next step all right we did that next steps publish your app i guess we do a release now no we just did one so did it did it actually release yeah i'm assuming that like release means it's it still needs to be reviewed and it's not actually available no production releases i understand that okay so we have beta cool so it's pending so they're reviewing the app so basically at this point i think everything we can do has been done uh the app review has to happen before it gets it gets launched so um this could take a while so i think there's other stuff that i want to do for the app i don't know if we'll hold off on that until we get here back from the release or we'll just keep working on it i'll i'll figure it out uh but yeah at this point i'd say we're gonna just gonna finish up the stream so um yeah thank you so much for watching i'm gonna look i've been keeping up with the chat pretty well so i don't know that there's there's too much left in here that i haven't addressed and [Music] just just double checking now also a few years saying that when uh my daughter was down there saying she's adorable a cute child thank you i appreciate it all right cool so um [Music] yeah i'm gonna finish up and thank you all so much for watching i'm gonna try to do another stream in two days so let's say saturday so probably like monday afternoon eastern time will probably be my next stream and i'm not sure what we'll what we'll do in the stream we'll work on it and um yeah oh i'll post it in in twitter so before i stream i always post in twitter in linkedin and on instagram that i'm going to stream i believe it also automatically posts to facebook as well and then if you turn on notifications for free code camp then you'll get notifications as well i do put out videos on my channel so if you would like to get notified about those as well you can check the link in the description and sign up for notifications for my channel too those are the best ways to find out when i'm when i'm going to be streaming or when i'm going to release new videos i'm going to have a new video coming out on my channel tomorrow i still have to create that video and i'm not 100 sure what it's going to be about but i have a list of topics and i'm going to pick one and make a video tonight and release it tomorrow i'm going to try for tomorrow morning as a release eastern time so i will uh hopefully be back then uh in the meantime have a great west rest of your weekend and be safe thanks

Original Description

Today we are going to build and submit our app to the Google Play store! This is part of a series of live streams where we are building a React Native app using Expo that links up with the Neurosity Notion brain computer to send and use data from the brain! See a professional software engineer at work. Unscripted. Mistakes included. GitHub Repo: https://github.com/JesseRWeigel/stay-focused Twitter: https://twitter.com/JesseRWeigel Youtube: https://www.youtube.com/c/JesseWeigel29 Instagram: https://www.instagram.com/jesse.weigel/ Code Editor: Visual Studio Code VS Code Theme: Seti - Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from freeCodeCamp.org · freeCodeCamp.org · 0 of 60

← Previous Next →
1 React: Production Server Setup Part 2 - Live Coding with Jesse
React: Production Server Setup Part 2 - Live Coding with Jesse
freeCodeCamp.org
2 cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
freeCodeCamp.org
3 Browser history tutorial - Beau teaches JavaScript
Browser history tutorial - Beau teaches JavaScript
freeCodeCamp.org
4 Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
freeCodeCamp.org
5 React: Parameterized Routing with Next.js - Live Coding with Jesse
React: Parameterized Routing with Next.js - Live Coding with Jesse
freeCodeCamp.org
6 React: Dealing with jQuery Issues - Live Coding with Jesse
React: Dealing with jQuery Issues - Live Coding with Jesse
freeCodeCamp.org
7 setInterval and setTimeout: timing events - Beau teaches JavaScript
setInterval and setTimeout: timing events - Beau teaches JavaScript
freeCodeCamp.org
8 Browser and Device Testing - Live Coding with Jesse
Browser and Device Testing - Live Coding with Jesse
freeCodeCamp.org
9 Last Minute Updates - Live Coding with Jesse
Last Minute Updates - Live Coding with Jesse
freeCodeCamp.org
10 Post Launch Updates - Live Coding with Jesse
Post Launch Updates - Live Coding with Jesse
freeCodeCamp.org
11 React: Setting Up Google Analytics - Live Coding with Jesse
React: Setting Up Google Analytics - Live Coding with Jesse
freeCodeCamp.org
12 React: Masonry Layout - Live Coding with Jesse
React: Masonry Layout - Live Coding with Jesse
freeCodeCamp.org
13 Load Balancing Digital Ocean Droplets - Live Coding with Jesse
Load Balancing Digital Ocean Droplets - Live Coding with Jesse
freeCodeCamp.org
14 try, catch, finally, throw - error handling in JavaScript
try, catch, finally, throw - error handling in JavaScript
freeCodeCamp.org
15 Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
freeCodeCamp.org
16 Graphs: breadth-first search - Beau teaches JavaScript
Graphs: breadth-first search - Beau teaches JavaScript
freeCodeCamp.org
17 React: Masonry Layout Part 2 - Live Coding with Jesse
React: Masonry Layout Part 2 - Live Coding with Jesse
freeCodeCamp.org
18 React: WordPress API Live Search - Live Coding with Jesse
React: WordPress API Live Search - Live Coding with Jesse
freeCodeCamp.org
19 Creating WordPress Custom Post Types - Live Coding With Jesse
Creating WordPress Custom Post Types - Live Coding With Jesse
freeCodeCamp.org
20 Dates - Beau teaches JavaScript
Dates - Beau teaches JavaScript
freeCodeCamp.org
21 Miscellaneous Front End Updates - Live Coding with Jesse
Miscellaneous Front End Updates - Live Coding with Jesse
freeCodeCamp.org
22 Merging a Pull Request from GitHub - Live Coding with Jesse
Merging a Pull Request from GitHub - Live Coding with Jesse
freeCodeCamp.org
23 React + Prettier + Standard JS - Live Coding with Jesse
React + Prettier + Standard JS - Live Coding with Jesse
freeCodeCamp.org
24 React: Sortable Responsive Table - Live Coding with Jesse
React: Sortable Responsive Table - Live Coding with Jesse
freeCodeCamp.org
25 Geolocation Sorting by Distance - Live Coding with Jesse
Geolocation Sorting by Distance - Live Coding with Jesse
freeCodeCamp.org
26 Tradeoff Matrix - Agile Software Development
Tradeoff Matrix - Agile Software Development
freeCodeCamp.org
27 The Definition of Ready - Agile Software Development
The Definition of Ready - Agile Software Development
freeCodeCamp.org
28 Getting first React job without experience - Ask Preethi
Getting first React job without experience - Ask Preethi
freeCodeCamp.org
29 React: Google Analytics Click Tracking - Live Coding with Jesse
React: Google Analytics Click Tracking - Live Coding with Jesse
freeCodeCamp.org
30 Submitting a PR to an Open Source Project - Live Coding with Jesse
Submitting a PR to an Open Source Project - Live Coding with Jesse
freeCodeCamp.org
31 Should I go back to school to get CS degree? - Ask Preethi
Should I go back to school to get CS degree? - Ask Preethi
freeCodeCamp.org
32 Hero Section CSS Changes - Live Coding with Jesse
Hero Section CSS Changes - Live Coding with Jesse
freeCodeCamp.org
33 Working Agreement - Agile Software Development
Working Agreement - Agile Software Development
freeCodeCamp.org
34 A day at Pennybox with Co-Founder Reji Eapen
A day at Pennybox with Co-Founder Reji Eapen
freeCodeCamp.org
35 React: Sorting and Filtering Data - Live Coding with Jesse
React: Sorting and Filtering Data - Live Coding with Jesse
freeCodeCamp.org
36 React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
freeCodeCamp.org
37 React: Building a New UI - Live Coding with Jesse
React: Building a New UI - Live Coding with Jesse
freeCodeCamp.org
38 Definition of Done - Agile Software Development
Definition of Done - Agile Software Development
freeCodeCamp.org
39 Getting started with jQuery (tutorial) - Beau teaches JavaScript
Getting started with jQuery (tutorial) - Beau teaches JavaScript
freeCodeCamp.org
40 Making a React Blog with WordPress Content - Live Coding with Jesse
Making a React Blog with WordPress Content - Live Coding with Jesse
freeCodeCamp.org
41 React, NextJS, CSS - Live Coding with Jesse
React, NextJS, CSS - Live Coding with Jesse
freeCodeCamp.org
42 jQuery events - Beau teaches JavaScript
jQuery events - Beau teaches JavaScript
freeCodeCamp.org
43 React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
freeCodeCamp.org
44 React: Working with API Data - Live Coding with Jesse
React: Working with API Data - Live Coding with Jesse
freeCodeCamp.org
45 React: Refactoring Components - Live Streaming with Jesse
React: Refactoring Components - Live Streaming with Jesse
freeCodeCamp.org
46 jQuery effects - Beau teaches JavaScript
jQuery effects - Beau teaches JavaScript
freeCodeCamp.org
47 More React Refactoring - Live Coding with Jesse
More React Refactoring - Live Coding with Jesse
freeCodeCamp.org
48 animate in jQuery - Beau teaches JavaScript
animate in jQuery - Beau teaches JavaScript
freeCodeCamp.org
49 "Finishing" My React Site - Live Coding with Jesse
"Finishing" My React Site - Live Coding with Jesse
freeCodeCamp.org
50 Starting a New React Project (P2D1) - Live Coding with Jesse
Starting a New React Project (P2D1) - Live Coding with Jesse
freeCodeCamp.org
51 React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
freeCodeCamp.org
52 The Agile Manifesto - Agile Software Development
The Agile Manifesto - Agile Software Development
freeCodeCamp.org
53 jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
freeCodeCamp.org
54 React Project 2 Day 3 - Live Coding with Jesse
React Project 2 Day 3 - Live Coding with Jesse
freeCodeCamp.org
55 The INVEST approach to product backlog items
The INVEST approach to product backlog items
freeCodeCamp.org
56 React Project 2 Day 4 - Live Coding with Jesse
React Project 2 Day 4 - Live Coding with Jesse
freeCodeCamp.org
57 Chickens and Pigs - Agile Software Development
Chickens and Pigs - Agile Software Development
freeCodeCamp.org
58 React Project 2 Day 5 - Live Coding with Jesse
React Project 2 Day 5 - Live Coding with Jesse
freeCodeCamp.org
59 jQuery: add and remove DOM elements - Beau teaches JavaScript
jQuery: add and remove DOM elements - Beau teaches JavaScript
freeCodeCamp.org
60 React Project 2 Day 6 - Live Coding with Jesse
React Project 2 Day 6 - Live Coding with Jesse
freeCodeCamp.org

Learn how to build and submit a brain computer app to the Google Play store using React Native and Expo. This live coding session covers the development process and provides hands-on experience.

Key Takeaways
  1. Set up a new React Native project with Expo
  2. Install necessary dependencies
  3. Configure the Neurosity Notion brain computer interface
  4. Develop the app's user interface and functionality
  5. Test the app on a physical device
  6. Prepare the app for submission to the Google Play store
  7. Submit the app to the Google Play store
💡 Using Expo simplifies the development process and allows for easy submission to the Google Play store.

Related Reads

Up next
CLARITY ACT DEAD SEPT 15TH = XRP $100!??!
Crypto Sensei
Watch →