1 00:00:00,870 --> 00:00:06,240 In the last section we generated our first re-act native project at the command line using the re-act 2 00:00:06,240 --> 00:00:09,910 native CLID tools at the end of that installation process. 3 00:00:09,930 --> 00:00:11,890 You should have seen some instructions like this. 4 00:00:11,910 --> 00:00:16,430 In other words how to run our app on iOS and how to run it on Android. 5 00:00:16,440 --> 00:00:21,790 Now let me be very clear here that the Riak need a team as being almost sadistic. 6 00:00:21,870 --> 00:00:27,240 I would say to Yazzie almost sadistic my making it sound like this is as easy as it as it is to get 7 00:00:27,240 --> 00:00:28,090 started with the android. 8 00:00:28,090 --> 00:00:33,870 No there is certainly without a doubt a lot more installation has to go on outside of just running a 9 00:00:33,870 --> 00:00:35,220 simple little command here. 10 00:00:35,220 --> 00:00:40,910 So in this section we're going to get at some that additional set up that kind of gets glossed over. 11 00:00:41,160 --> 00:00:42,970 All right so let's go ahead and get started. 12 00:00:42,990 --> 00:00:46,270 The first thing I'm going to do is open up the Android studio. 13 00:00:46,320 --> 00:00:50,250 So we just finished installing that in the next section or last section excuse me. 14 00:00:50,760 --> 00:00:58,690 I'm going to go ahead and pop open and then once it's open I'm going to open an existing Android studio 15 00:00:58,700 --> 00:00:59,410 project. 16 00:00:59,420 --> 00:01:06,140 So believe it or not when we created our re-act native project and the last section that gave us a starting 17 00:01:06,170 --> 00:01:07,270 Android project. 18 00:01:07,310 --> 00:01:13,790 So I'm going to open up an existing project and I'm going to navigate to the folder where I placed that 19 00:01:13,790 --> 00:01:14,840 project. 20 00:01:14,840 --> 00:01:22,520 So for me I placed it on my drive inside of the folder called Riak native that generated a project called 21 00:01:22,580 --> 00:01:26,880 albums and inside of there is a folder called Android. 22 00:01:26,900 --> 00:01:28,900 And this is our Android project right here. 23 00:01:28,910 --> 00:01:30,560 So I'm going go ahead and open it up 24 00:01:35,130 --> 00:01:39,710 and this is going to take just a moment to pop open. 25 00:01:40,380 --> 00:01:42,050 All right there we go. 26 00:01:42,570 --> 00:01:47,990 So when we first opened this up I get a nice big error message here. 27 00:01:48,030 --> 00:01:51,840 You might get a little bit of a different message you might see something that says like I don't know 28 00:01:52,130 --> 00:01:56,200 pay compiling gradiently or something like that down at the bottom. 29 00:01:56,340 --> 00:01:59,760 So if you see that message that is totally fine just let it do its thing. 30 00:01:59,760 --> 00:02:04,550 After a couple of seconds like 20 or 30 you'll see a tab pop up on the bottom. 31 00:02:04,560 --> 00:02:06,160 So says messages. 32 00:02:06,360 --> 00:02:10,450 So click on messages and you should see the message I see right here. 33 00:02:10,740 --> 00:02:16,560 Now I know that the text is a little bit smaller here but what it says is cause fail to find target 34 00:02:16,560 --> 00:02:18,960 with mastering Android 23. 35 00:02:19,260 --> 00:02:25,140 And then beneath that is a nice little link that says Install missing platforms and sync project this 36 00:02:25,230 --> 00:02:26,960 little button right here at this link. 37 00:02:27,000 --> 00:02:28,090 Oh you have no idea. 38 00:02:28,140 --> 00:02:33,170 No idea how much pain this thing is saving us from. 39 00:02:33,210 --> 00:02:35,670 It is saving us from a lot of hassle and a lot of trouble. 40 00:02:35,670 --> 00:02:37,690 So we're going to click this link right here. 41 00:02:37,960 --> 00:02:39,240 And thank goodness. 42 00:02:39,240 --> 00:02:40,040 Thank goodness. 43 00:02:40,080 --> 00:02:45,900 Android studio is going to automatically install download and install a little bit of software for us. 44 00:02:45,960 --> 00:02:48,720 So we're going to click accept on the license agreement. 45 00:02:48,720 --> 00:02:54,540 Next we'll download the SDK. 46 00:02:54,540 --> 00:03:01,480 It will unzip it for us and go through the installation. 47 00:03:01,480 --> 00:03:05,350 Now I certainly could puzzle video here but you know again it only takes a moment to finish up. 48 00:03:05,350 --> 00:03:07,890 So all done there a click Finish. 49 00:03:08,020 --> 00:03:13,990 And now again I get another error message pop up right away saying hey I've failed to find build tools 50 00:03:14,110 --> 00:03:15,750 revision 23. 51 00:03:15,800 --> 00:03:18,350 Again we will click on the very helpful link right here. 52 00:03:18,370 --> 00:03:25,190 Install build tools 23 and sync project and boom are good to go again. 53 00:03:25,380 --> 00:03:26,520 Give would you would. 54 00:03:26,550 --> 00:03:29,550 Oh man you won't believe how much trouble that does save for us. 55 00:03:29,550 --> 00:03:31,500 That just saved us a lot of trouble. 56 00:03:31,710 --> 00:03:35,370 By the way if you get a great old plug in pop up we are going to hit. 57 00:03:35,370 --> 00:03:37,940 Don't remind me again to this project and. 58 00:03:38,010 --> 00:03:38,550 OK. 59 00:03:38,700 --> 00:03:40,180 We're good to go. 60 00:03:41,070 --> 00:03:41,330 OK. 61 00:03:41,340 --> 00:03:43,990 So we still have a little bit of work to do here. 62 00:03:44,100 --> 00:03:49,890 What we just installed were some tools to set up an android emulator something something that can run 63 00:03:49,890 --> 00:03:55,080 our re-act native application on the desktop that we can debug against on the fly. 64 00:03:55,410 --> 00:03:57,770 So we still have a little bit of setup to do though. 65 00:03:57,870 --> 00:04:03,090 The next thing you want to do is create an android emulator that we can actually use for a debugging 66 00:04:03,090 --> 00:04:04,440 process. 67 00:04:04,440 --> 00:04:12,810 So at the very top I don't click on Tools Android and then HDD manager once they click on that we get 68 00:04:12,810 --> 00:04:16,060 a nice big pop up something about your virtual devices. 69 00:04:16,230 --> 00:04:18,920 So a virtual device is an android emulator. 70 00:04:18,930 --> 00:04:24,020 It has a window that lets us run the Android operating system inside of Windows. 71 00:04:24,270 --> 00:04:29,190 So we will create a virtual device by default. 72 00:04:29,210 --> 00:04:31,250 I have Nexus 5 selected. 73 00:04:31,250 --> 00:04:34,260 If you see another default selection that's totally fine. 74 00:04:34,280 --> 00:04:37,610 Just make sure that you get a screen size right around 5 inches. 75 00:04:37,730 --> 00:04:39,960 So the nexus 5 is 4.9 5. 76 00:04:39,980 --> 00:04:41,350 That's good enough for me. 77 00:04:41,720 --> 00:04:43,000 I'll click next. 78 00:04:43,340 --> 00:04:46,300 And then here is the next little troublesome bit. 79 00:04:46,310 --> 00:04:53,570 I guess you could say by default it tries to create a emulator with version 24 of Android. 80 00:04:53,780 --> 00:04:57,950 Right now re-act native is making use of re-act native version 23. 81 00:04:57,950 --> 00:05:04,430 So instead of going to select marshmallow download and go through the download process again 82 00:05:09,090 --> 00:05:12,610 so just like the others it's going to take a moment to get started. 83 00:05:12,890 --> 00:05:19,560 We'll go through the download the unzipping and installation. 84 00:05:19,700 --> 00:05:20,870 You know I had considered. 85 00:05:21,080 --> 00:05:26,420 I knew that there were some pauses here for downloading and unzipping and I'm kicking myself because 86 00:05:26,420 --> 00:05:29,140 I really wanted to like put together some jokes. 87 00:05:29,180 --> 00:05:34,500 You know I could tell you while the installation was going but I just completely forgot it. 88 00:05:34,520 --> 00:05:38,070 Maybe next time we'll do we'll do some funny jokes anyways. 89 00:05:38,350 --> 00:05:39,390 All right let's get finished. 90 00:05:39,400 --> 00:05:47,810 Download is all finished and now we can select that API level 23 then click next. 91 00:05:48,890 --> 00:05:52,050 This is some information about the device we're about to build. 92 00:05:52,050 --> 00:05:53,890 We don't have to configure anything else here. 93 00:05:53,910 --> 00:05:55,050 I'll just click next. 94 00:05:55,110 --> 00:05:59,390 Or in this case finish excuse me. 95 00:05:59,790 --> 00:06:02,970 And then finally I can find Nexus 5. 96 00:06:02,970 --> 00:06:04,350 This is now my emulator. 97 00:06:04,350 --> 00:06:07,750 This is my virtual device that I can launch on my desktop. 98 00:06:07,750 --> 00:06:12,440 So on the far right hand side is a play button underneath actions or click it. 99 00:06:12,510 --> 00:06:15,960 And this is going to start up our Android emulator. 100 00:06:15,960 --> 00:06:17,750 So I get spinner and wow. 101 00:06:17,760 --> 00:06:20,360 Yeah it really looks like an actual phone. 102 00:06:21,810 --> 00:06:26,280 So this is going to take a little bit of time to boot up initially but we still have a little bit of 103 00:06:26,280 --> 00:06:27,300 setup left to do. 104 00:06:27,300 --> 00:06:30,020 And this last little bit is certainly let me tell you. 105 00:06:30,060 --> 00:06:31,690 It is definitely the painful part. 106 00:06:31,700 --> 00:06:37,830 This is the part where you definitely made the right decision by checking on my course because otherwise 107 00:06:37,830 --> 00:06:42,210 there are not a lot of solutions online for troubleshooting this last little bit. 108 00:06:42,420 --> 00:06:47,490 So I'm not going to tell you exactly what the problem is we are just going to jump to the solution and 109 00:06:47,580 --> 00:06:51,190 what a solution it is at my start menu. 110 00:06:51,240 --> 00:07:00,630 You can open it up and then I'm going to search for system settings and the result I should get here 111 00:07:00,630 --> 00:07:02,510 is view advanced system settings. 112 00:07:02,520 --> 00:07:07,060 Go ahead and click it and then I get my system properties window right here. 113 00:07:07,200 --> 00:07:10,900 This my little bit familiar if ever you know mess around with Windows that much. 114 00:07:10,920 --> 00:07:16,060 I've got tabs like computer name hardware and advanced Zonday advanced window. 115 00:07:16,080 --> 00:07:18,390 I want to click on environment variables. 116 00:07:18,420 --> 00:07:23,790 So we're going to add to environment variables to Windows. 117 00:07:23,850 --> 00:07:27,090 The first one that we're going to add a click on new. 118 00:07:27,660 --> 00:07:32,820 And then I'm going to enter a name of Java home. 119 00:07:32,970 --> 00:07:38,460 So by default the react native package or the thing that kind of like builds or application expects 120 00:07:38,460 --> 00:07:43,770 to have access to this environment variable called Java home but by default it doesn't actually exist 121 00:07:43,950 --> 00:07:46,020 on a brand new operating system. 122 00:07:46,020 --> 00:07:50,730 One thing I want to mention is that if you already have a variable of Java home you do not need to add 123 00:07:50,730 --> 00:07:51,290 this one in. 124 00:07:51,300 --> 00:07:56,670 So if you scan over this list you'll see one that says Java home you don't need to go to this process. 125 00:07:56,850 --> 00:08:01,110 But if you do not see each other home go ahead and click on that new button and add the variable name 126 00:08:01,110 --> 00:08:02,350 of Java home. 127 00:08:02,700 --> 00:08:10,440 Then for a variable value we will click on browse directory and the window that pops up I'll click on 128 00:08:10,530 --> 00:08:14,410 this PC I'll click on the C-Drive. 129 00:08:14,880 --> 00:08:24,380 I click on program files all expand Java and finally I will select the JDK that we just installed. 130 00:08:24,390 --> 00:08:31,360 So JDK 1.8 and I'll click OK and then ok again. 131 00:08:31,440 --> 00:08:38,850 So now I have a environment variable of Java underscore home and the value of Seberg and philes Java 132 00:08:39,120 --> 00:08:40,750 JDK blah blah blah. 133 00:08:41,260 --> 00:08:41,510 All right. 134 00:08:41,520 --> 00:08:42,880 One other thing that we need to do. 135 00:08:42,900 --> 00:08:47,310 We also need to add in a nother directory to our path variable. 136 00:08:47,340 --> 00:08:53,830 So on this list of different environment variables you should already have one listed here called Path. 137 00:08:53,850 --> 00:08:55,220 So definitely scroll up and down. 138 00:08:55,240 --> 00:09:03,750 I guarantee you you have it I'll click on it because I want to edit my path and then I will click on 139 00:09:03,870 --> 00:09:09,570 new on the right hand side top right hand side and you can see right here we can enter in a path. 140 00:09:09,570 --> 00:09:16,380 So if you recall when we were going through the Android studio setup I said hey check out your user 141 00:09:16,380 --> 00:09:17,400 name right there right. 142 00:09:17,450 --> 00:09:20,870 And for me it was computer for you was whatever your username is. 143 00:09:20,940 --> 00:09:22,280 This is where that is relevant. 144 00:09:22,300 --> 00:09:25,040 OK so this is where we're going to make use of that. 145 00:09:25,050 --> 00:09:28,530 So I like to enter in my path. 146 00:09:28,530 --> 00:09:34,260 So I'll put in see a user's computer. 147 00:09:34,260 --> 00:09:40,350 So again for me it is computer for you is what it is whatever of your logon username is. 148 00:09:40,350 --> 00:09:43,140 For me it's computer for you it will be something different. 149 00:09:43,620 --> 00:09:46,530 And then we're going to point it to app data 150 00:09:49,480 --> 00:09:49,990 local 151 00:09:53,860 --> 00:10:03,160 Android SDK platform Dowst tools like so as a quick little check just to make sure that I have the right 152 00:10:03,160 --> 00:10:03,870 link. 153 00:10:04,120 --> 00:10:08,080 I'm going to copy this link so I select everything I'm going to copy it. 154 00:10:08,320 --> 00:10:14,850 I'm going to then open up windows explorer paste the link and just verify. 155 00:10:14,860 --> 00:10:16,420 Yes this directory exists here. 156 00:10:16,450 --> 00:10:18,370 So again just go ahead. 157 00:10:18,370 --> 00:10:22,450 Copy that link paste into Windows Explorer verify that it exists. 158 00:10:22,510 --> 00:10:26,860 If you get an error message popping up that says like hey the directory doesn't exist chances are you 159 00:10:26,860 --> 00:10:28,820 entered in the incorrect username. 160 00:10:28,960 --> 00:10:34,100 So make sure that you've got the correct use made for your log in on your particular machine. 161 00:10:34,270 --> 00:10:34,650 OK. 162 00:10:34,700 --> 00:10:42,940 Now that this is all done click OK I'll click OK click OK and the last Im going to do is restart my 163 00:10:42,940 --> 00:10:44,180 command prompt now. 164 00:10:44,430 --> 00:10:47,440 So I'm going to close the command prompt. 165 00:10:47,440 --> 00:10:51,110 I will open it back up by searching for Command. 166 00:10:51,400 --> 00:10:54,560 Right click on it run as an illustrator. 167 00:10:56,500 --> 00:11:01,750 And now we are finally ready to actually test our application inside of the emulator. 168 00:11:01,930 --> 00:11:07,990 So I'm going to change back to my project directory which for me is on my drive. 169 00:11:11,890 --> 00:11:14,610 So I'm now inside of my project directory. 170 00:11:14,740 --> 00:11:19,060 It'll be whatever your working directory is and wherever you put your projects for me I'm calling it 171 00:11:19,060 --> 00:11:19,950 Riak native. 172 00:11:20,260 --> 00:11:23,920 And then the name of the project that we just generated which is albums. 173 00:11:24,130 --> 00:11:26,200 So the very last step inside of your. 174 00:11:26,230 --> 00:11:32,980 I will write out re-act dash native run dash Android. 175 00:11:33,570 --> 00:11:37,450 This is all very telling us with you this is the absolute moment of truth right here. 176 00:11:37,720 --> 00:11:43,330 As to whether or not this is going to work when I run that command you'll see another window pop up. 177 00:11:43,330 --> 00:11:44,970 This is the re-act native packager. 178 00:11:44,980 --> 00:11:50,890 This is what takes all of our javascript code compresses it all down into a single javascript file and 179 00:11:50,890 --> 00:11:55,510 then makes it available to the device and then over here back to the original window. 180 00:11:55,510 --> 00:12:01,180 Our application is building for the Android device and it's then going to automatically install and 181 00:12:01,240 --> 00:12:02,560 open it on the device 182 00:12:08,180 --> 00:12:08,870 and there we go. 183 00:12:08,870 --> 00:12:15,110 So installing JPK on app debugger OK and then we can see everything pop up over your on the right hand 184 00:12:15,110 --> 00:12:16,200 side. 185 00:12:16,640 --> 00:12:21,280 Fetching javascript bundled that means that it is pulling that all the starter code and then eventually 186 00:12:21,290 --> 00:12:22,400 Yup there we go. 187 00:12:22,400 --> 00:12:23,920 Welcome to react native. 188 00:12:24,170 --> 00:12:25,260 So by default. 189 00:12:25,400 --> 00:12:26,630 To refresh any code. 190 00:12:26,660 --> 00:12:30,260 I know that I'm going to give you a little bit of instructions right now that are very particular to 191 00:12:30,260 --> 00:12:34,490 Android and I know they might not make a ton of sense until we start writing some code. 192 00:12:34,490 --> 00:12:36,440 I just want to mention them very quickly. 193 00:12:36,440 --> 00:12:38,080 First off by default. 194 00:12:38,090 --> 00:12:44,810 To refresh our simulator or to get any changes to our Kobasew we've made we can follow the directions 195 00:12:44,810 --> 00:12:45,320 right on here. 196 00:12:45,320 --> 00:12:52,520 So just double tap r to refresh and as you can see it makes another request for a javascript Lundell. 197 00:12:52,520 --> 00:12:57,230 The other thing I want to mention is shake or press menu button for dev menu. 198 00:12:57,500 --> 00:12:58,620 So looking down here. 199 00:12:58,650 --> 00:13:04,760 OK I don't really see any menu menu button like it makes reference to look in the right side. 200 00:13:04,760 --> 00:13:05,890 I also don't see any. 201 00:13:06,080 --> 00:13:11,630 So here's a little trick to open up this Desmond knew that it's talking about we can press control in 202 00:13:12,130 --> 00:13:14,750 and that opens up the development menu. 203 00:13:14,990 --> 00:13:20,660 So as I worked through the course I will be using the Iowas simulator bible many times say OK I'm going 204 00:13:20,660 --> 00:13:24,110 to open up my development menu right here. 205 00:13:24,200 --> 00:13:31,730 We are on Android do that by pressing control in and again just to be clear whenever I refer to refresh 206 00:13:31,730 --> 00:13:32,600 on the application. 207 00:13:32,630 --> 00:13:36,240 We will double tap our to refresh our simulator. 208 00:13:36,620 --> 00:13:37,540 OK so that's it. 209 00:13:37,580 --> 00:13:42,710 We got our Android emulator up and worked on the last thing I want to mention to you is hey we went 210 00:13:42,710 --> 00:13:44,850 through all this process just to get to your. 211 00:13:44,990 --> 00:13:46,570 What happens when I close everything. 212 00:13:46,570 --> 00:13:48,630 How do I get everything started back up. 213 00:13:48,740 --> 00:13:53,270 So once you close everything you know let's say you shut down your computer for the night or whatever 214 00:13:53,270 --> 00:13:54,120 it might be. 215 00:13:54,170 --> 00:14:00,910 You can get started again by opening up your Android studio again. 216 00:14:00,920 --> 00:14:04,020 You can open up your re-act native project again. 217 00:14:04,130 --> 00:14:06,620 You'll go back up to the tools menu. 218 00:14:06,860 --> 00:14:13,550 Android HDD manager and then click the play button on the right that will start up the emulator and 219 00:14:13,550 --> 00:14:19,550 then inside of our command line at the command prompt We will change into our project directory and 220 00:14:19,610 --> 00:14:23,960 run the same command again re-act dashed native run dashin Android. 221 00:14:24,020 --> 00:14:26,520 So those are the two steps for getting started back up. 222 00:14:26,540 --> 00:14:30,860 If you ever decide to take a break or shut down your computer for the night or whatever it might be 223 00:14:31,340 --> 00:14:33,230 Riak native running Android. 224 00:14:33,350 --> 00:14:35,000 And don't forget to start up the emulators. 225 00:14:35,010 --> 00:14:35,640 Well. 226 00:14:36,360 --> 00:14:43,670 OK so I hope this didn't seem that bad because trust me I spent a tremendous amount of time poring over 227 00:14:43,700 --> 00:14:48,740 Android's set up getting it down to like just the bare essentials of what you need to install to get 228 00:14:48,740 --> 00:14:49,520 started. 229 00:14:49,850 --> 00:14:51,570 So hopefully everything is working out. 230 00:14:51,590 --> 00:14:55,760 Let's continue and start working on our first application in the next section.