1 00:00:00,000 --> 00:00:00,210 2 00:00:00,210 --> 00:00:01,300 DAVID MALAN: Thank you, everyone, for coming. 3 00:00:01,300 --> 00:00:02,258 My name is David Malan. 4 00:00:02,258 --> 00:00:04,320 I teach CS50 and work with a whole team here 5 00:00:04,320 --> 00:00:08,790 at CS50 R&D. We're so pleased to have our friends Nick and Charlie from Expo. 6 00:00:08,790 --> 00:00:12,330 And the context here is that this spring semester, I also been teaching a class 7 00:00:12,330 --> 00:00:14,230 called CS164, Software Engineering. 8 00:00:14,230 --> 00:00:16,329 A couple of whose students are here with us today. 9 00:00:16,329 --> 00:00:21,300 And both of my teams ended up choosing mobile software projects for their term 10 00:00:21,300 --> 00:00:22,560 long projects. 11 00:00:22,560 --> 00:00:24,780 And initially they both started using a new an up 12 00:00:24,780 --> 00:00:26,850 and coming framework called React Native, which 13 00:00:26,850 --> 00:00:29,610 is both powerful, but also not necessarily as easy 14 00:00:29,610 --> 00:00:30,990 to use as might be ideal. 15 00:00:30,990 --> 00:00:33,480 And so came into the picture something called Expo, 16 00:00:33,480 --> 00:00:36,240 and that is exactly the software package with React Native 17 00:00:36,240 --> 00:00:39,212 that we're about to hear from our friends here today. 18 00:00:39,212 --> 00:00:40,420 So without further ado, Nick. 19 00:00:40,420 --> 00:00:47,400 20 00:00:47,400 --> 00:00:48,640 NIKHILESH: Hey, everyone. 21 00:00:48,640 --> 00:00:52,520 I'm Nick and I work with Charlie on Expo, 22 00:00:52,520 --> 00:00:56,690 which is a tool that lets you write JavaScript. 23 00:00:56,690 --> 00:01:02,150 Just the same JavaScript code for both iOS and Android app development. 24 00:01:02,150 --> 00:01:07,380 So I'm just going to dive right in and just get you guys as excited as I am. 25 00:01:07,380 --> 00:01:10,520 I just wanted to show you some stuff in the eye candy department. 26 00:01:10,520 --> 00:01:14,540 So on the left, you can see an app made by one of my friends. 27 00:01:14,540 --> 00:01:16,460 His name is Brent. 28 00:01:16,460 --> 00:01:19,580 It's just the list of breweries in Vancouver 29 00:01:19,580 --> 00:01:22,850 and it's just a short video of the app. 30 00:01:22,850 --> 00:01:28,616 You can see it's got smooth scrolling and it's got this cool header 31 00:01:28,616 --> 00:01:29,990 animation when you scroll around. 32 00:01:29,990 --> 00:01:34,330 It's all made in JavaScript, but it doesn't feel like a web app. 33 00:01:34,330 --> 00:01:40,190 It feels native and it's got in line map view, a nice gallery. 34 00:01:40,190 --> 00:01:44,540 You can scroll and zoom around on the map view that's in line with the UI. 35 00:01:44,540 --> 00:01:47,370 And if you wanted to full screen the map, you can do that too. 36 00:01:47,370 --> 00:01:49,670 My internet was a little slow when I recorded this, 37 00:01:49,670 --> 00:01:51,545 so that was just the loading of the map here, 38 00:01:51,545 --> 00:01:55,830 but it's an actual native map view, so you'll get the same behavior. 39 00:01:55,830 --> 00:01:58,040 This other thing on the right, which is super fun, 40 00:01:58,040 --> 00:02:05,570 is a Minecraft clone made by someone on the internet named Evan 41 00:02:05,570 --> 00:02:07,940 that we ran into on Twitter. 42 00:02:07,940 --> 00:02:11,930 And you can walk around, jump around, the usual Minecraft stuff. 43 00:02:11,930 --> 00:02:15,269 And this is on Expo's graphics library and this is something 44 00:02:15,269 --> 00:02:16,560 we're going to play with today. 45 00:02:16,560 --> 00:02:19,970 So you'll get to see how to do 3D graphics on Expo. 46 00:02:19,970 --> 00:02:28,070 And the controls on the bottom left, the d-pad that I'm using to walk around, 47 00:02:28,070 --> 00:02:32,000 the buttons on the d-pad are actual native like iOS buttons. 48 00:02:32,000 --> 00:02:34,790 So you get the best of both worlds. 49 00:02:34,790 --> 00:02:38,510 You get iOS actual native buttons, as well as 50 00:02:38,510 --> 00:02:41,510 the 3D graphics abilities of Web GL. 51 00:02:41,510 --> 00:02:47,090 So this will give you a short overview of what we're going to look at today. 52 00:02:47,090 --> 00:02:49,610 I'll start out with some background on how 53 00:02:49,610 --> 00:02:53,510 apps are made not using React Native, or Expo, and the most common way 54 00:02:53,510 --> 00:02:55,700 to make them, which is either you're doing 55 00:02:55,700 --> 00:03:00,110 native development, which is you code the way the makers of the device 56 00:03:00,110 --> 00:03:00,930 intended. 57 00:03:00,930 --> 00:03:05,000 So on iOS you would be writing Objective C on Android you would be writing Java. 58 00:03:05,000 --> 00:03:11,270 Or you can do the same thing that you would do for desktop web development, 59 00:03:11,270 --> 00:03:14,960 except make it for a small screen, it's a web app. 60 00:03:14,960 --> 00:03:18,200 And you can have that run through Safari or something, 61 00:03:18,200 --> 00:03:21,140 or you can use something like Cordoba. 62 00:03:21,140 --> 00:03:23,750 And just a background on the pros and cons over there. 63 00:03:23,750 --> 00:03:29,010 And then we'll do a basic quick tutorial on very basic UI with Expo. 64 00:03:29,010 --> 00:03:31,860 Just like buttons, text, and we'll just throw in a map 65 00:03:31,860 --> 00:03:33,770 view you there, just for fun. 66 00:03:33,770 --> 00:03:37,940 And then I'll try to do a 3D graphics example. 67 00:03:37,940 --> 00:03:41,420 And after that let's open it up for a Q&A from you guys. 68 00:03:41,420 --> 00:03:45,710 69 00:03:45,710 --> 00:03:49,910 So in the background section, the first part I wanted to get to 70 00:03:49,910 --> 00:03:51,230 was native app development. 71 00:03:51,230 --> 00:03:55,670 So as I said, for iOS you'd be writing Objective C, which 72 00:03:55,670 --> 00:03:59,030 is this language that's backwards compatible with C, 73 00:03:59,030 --> 00:04:04,970 and it's got a bit of like small talky message passing going on. 74 00:04:04,970 --> 00:04:06,710 It looks a little complicated, and noisy, 75 00:04:06,710 --> 00:04:09,560 and you can see that's the Hello World app over there. 76 00:04:09,560 --> 00:04:13,130 That little black background text that I just squeezed in there. 77 00:04:13,130 --> 00:04:15,380 And there's a lot of accidental complexity 78 00:04:15,380 --> 00:04:18,050 compared to just saying Hello World. 79 00:04:18,050 --> 00:04:20,630 And then that goes through this program called Xcode. 80 00:04:20,630 --> 00:04:26,690 It compiles to some blob of binary stuff that you then put on your phone 81 00:04:26,690 --> 00:04:30,320 using a cable that's a physical wired cable that connects 82 00:04:30,320 --> 00:04:32,720 between your computer and your phone. 83 00:04:32,720 --> 00:04:34,820 And you do similar for Android. 84 00:04:34,820 --> 00:04:39,380 You write Java and that gets converted to Java's JVM bytecode 85 00:04:39,380 --> 00:04:42,310 go with Android Studio. 86 00:04:42,310 --> 00:04:44,870 I believe you still need a physical cable. 87 00:04:44,870 --> 00:04:49,040 So you can't just remotely update apps that easily 88 00:04:49,040 --> 00:04:51,470 if you wanted to do it wirelessly, or if someone 89 00:04:51,470 --> 00:04:54,140 was on the other side of the world, or something. 90 00:04:54,140 --> 00:04:58,037 And the code is sort of hard to write compared to stuff like HTML, 91 00:04:58,037 --> 00:04:59,370 and JavaScript, stuff like that. 92 00:04:59,370 --> 00:05:02,319 93 00:05:02,319 --> 00:05:04,610 Most of the apps you use on your phone are native apps. 94 00:05:04,610 --> 00:05:05,651 So why do people do this? 95 00:05:05,651 --> 00:05:12,870 Because you get great feeling and good looking user interfaces that feel good. 96 00:05:12,870 --> 00:05:19,220 Using Facebook's native app rather than their mobile web site feels way better. 97 00:05:19,220 --> 00:05:21,800 And also you've got native APIs, like the ability 98 00:05:21,800 --> 00:05:27,020 to, for example, if you have a messenger app that you want to make, 99 00:05:27,020 --> 00:05:30,470 but you want people to be able to log in with Facebook in that Messenger app, 100 00:05:30,470 --> 00:05:32,390 then it can use Facebook's native log in. 101 00:05:32,390 --> 00:05:33,824 So stuff like that. 102 00:05:33,824 --> 00:05:36,740 And yeah, the distribution model is through the app store and the Play 103 00:05:36,740 --> 00:05:37,520 Store. 104 00:05:37,520 --> 00:05:41,501 Pros and cons there, so I just like put an ambiguous thinking face emoji. 105 00:05:41,501 --> 00:05:42,500 Wasn't sure what to put. 106 00:05:42,500 --> 00:05:46,260 107 00:05:46,260 --> 00:05:51,300 And the other thing is you can use JavaScript, HTML, CSS, the usual stuff 108 00:05:51,300 --> 00:05:57,780 that he would use for desktop websites, but try to fit into a small screen, 109 00:05:57,780 --> 00:06:04,800 and try to emulate the user interfaces of native mobile phone applications. 110 00:06:04,800 --> 00:06:06,705 The coding here is way easier. 111 00:06:06,705 --> 00:06:09,830 You can get to this level of ease by just adding more and more abstractions 112 00:06:09,830 --> 00:06:14,820 on native, but using a live interpreted language, 113 00:06:14,820 --> 00:06:16,830 there's systemic differences there. 114 00:06:16,830 --> 00:06:21,120 So for example, the user interface paradigm is very declarative. 115 00:06:21,120 --> 00:06:22,860 You just say I want this title. 116 00:06:22,860 --> 00:06:24,210 I want to say hello world. 117 00:06:24,210 --> 00:06:30,960 You don't have to say make a button, add this text into it. 118 00:06:30,960 --> 00:06:33,000 That's what you have to do with iOS. 119 00:06:33,000 --> 00:06:35,760 It's like working on a scene graph almost. 120 00:06:35,760 --> 00:06:39,090 But yeah, you just open what you're working on in a browser. 121 00:06:39,090 --> 00:06:42,330 It could be safari on iOS, it could be Android's Chrome, 122 00:06:42,330 --> 00:06:46,260 or you can also test it on desktop. 123 00:06:46,260 --> 00:06:50,580 Feature wise, it's like problematic because the user interface 124 00:06:50,580 --> 00:06:52,750 tends to be sort of laggy. 125 00:06:52,750 --> 00:06:56,010 It doesn't have all the features that you would get with a native map view. 126 00:06:56,010 --> 00:06:59,160 127 00:06:59,160 --> 00:07:01,200 I think it's probably impossible, I'm not sure, 128 00:07:01,200 --> 00:07:05,790 but it's hard to jump into the native Facebook log in from a browser, 129 00:07:05,790 --> 00:07:07,950 and then come back to it. 130 00:07:07,950 --> 00:07:10,620 And there's a lot of native APIs that we want. 131 00:07:10,620 --> 00:07:12,220 Facebook log in is a basic example. 132 00:07:12,220 --> 00:07:15,300 If you wanted something like streaming a live camera 133 00:07:15,300 --> 00:07:18,960 view onto a rotating cube in a video game or something, 134 00:07:18,960 --> 00:07:20,370 I don't know if you can do that. 135 00:07:20,370 --> 00:07:21,911 You can actually do that on Expo now. 136 00:07:21,911 --> 00:07:24,369 137 00:07:24,369 --> 00:07:27,410 The sharing model is super great though, you can just send someone a URL, 138 00:07:27,410 --> 00:07:28,285 and they just see it. 139 00:07:28,285 --> 00:07:31,830 And if they refresh, they get the new code. 140 00:07:31,830 --> 00:07:36,910 And if you change your code in between, they'll get the update. 141 00:07:36,910 --> 00:07:43,380 So just to compare all of that with Expo, I could just 142 00:07:43,380 --> 00:07:46,180 like lay out the differences you in text, but I thought, 143 00:07:46,180 --> 00:07:47,720 why don't we just try it out? 144 00:07:47,720 --> 00:07:51,420 So the first tutorial we're going to work through 145 00:07:51,420 --> 00:07:56,610 is making basic user interfaces on Expo. 146 00:07:56,610 --> 00:08:04,706 And for the first tutorial, we're going to use Expo's web browser ID. 147 00:08:04,706 --> 00:08:07,135 It's just the coded error for one file right now. 148 00:08:07,135 --> 00:08:08,760 But you don't need to install anything. 149 00:08:08,760 --> 00:08:12,560 You can just open this web page and just write your code in there. 150 00:08:12,560 --> 00:08:16,890 And on the phone you need to install this app called 151 00:08:16,890 --> 00:08:21,677 Expo, which is the thing that you use to view your projects. 152 00:08:21,677 --> 00:08:23,260 So you'll get to see how easy that is. 153 00:08:23,260 --> 00:08:25,860 So let's just do it. 154 00:08:25,860 --> 00:08:30,260 So this is a mirror of my phone screen, that I have in hand right now, 155 00:08:30,260 --> 00:08:33,299 using Quick Time. 156 00:08:33,299 --> 00:08:37,740 And so this is our website and the website 157 00:08:37,740 --> 00:08:40,490 that I was talking about on the slide, snack.expo.io. 158 00:08:40,490 --> 00:08:44,100 So let's just go there. 159 00:08:44,100 --> 00:08:49,832 And what you'll get as soon as you go there is this QR code, and in the back, 160 00:08:49,832 --> 00:08:51,540 you can see that there's some code, which 161 00:08:51,540 --> 00:08:56,280 is what we'll get to after we get through this QR code thing. 162 00:08:56,280 --> 00:08:58,340 So the other thing you want to do meanwhile 163 00:08:58,340 --> 00:09:05,970 is on your phone you want to install this application, which 164 00:09:05,970 --> 00:09:07,586 is the Expo app. 165 00:09:07,586 --> 00:09:10,710 You can find that on the app store or you can just find it on our web site. 166 00:09:10,710 --> 00:09:15,780 167 00:09:15,780 --> 00:09:21,600 If you go to expo.io on your phone and just scroll down. 168 00:09:21,600 --> 00:09:24,010 And if you're on Android, you would touch Android, 169 00:09:24,010 --> 00:09:26,830 but I'm on iOS so I'm just going to hit iOS. 170 00:09:26,830 --> 00:09:32,760 And it will take you directly to where Expo is on the app store 171 00:09:32,760 --> 00:09:35,480 and you should be able to do the usual thing, to just install it. 172 00:09:35,480 --> 00:09:42,540 But once you have it, this is what you get. 173 00:09:42,540 --> 00:09:46,350 Just hit scan QR code, and you get a QR code scanner, 174 00:09:46,350 --> 00:09:48,840 and just scan this QR code that you're looking 175 00:09:48,840 --> 00:09:54,270 at on snack, which is our name for the online editor 176 00:09:54,270 --> 00:09:59,460 because it's like a small piece of code before your main meal in Expo, I guess. 177 00:09:59,460 --> 00:10:02,610 178 00:10:02,610 --> 00:10:03,370 Yeah, that's it. 179 00:10:03,370 --> 00:10:05,370 Now you're coding like a native app. 180 00:10:05,370 --> 00:10:10,560 So this is what React Native user interface 181 00:10:10,560 --> 00:10:13,740 code looks like, which is the library that we 182 00:10:13,740 --> 00:10:17,700 use in Expo for user interfaces. 183 00:10:17,700 --> 00:10:20,730 If you use React on the web, it totally just 184 00:10:20,730 --> 00:10:25,710 feels like React, except the user interface that it's making behind it 185 00:10:25,710 --> 00:10:29,190 is not the normal web document object model. 186 00:10:29,190 --> 00:10:33,010 It's actual iOS buttons and stuff. 187 00:10:33,010 --> 00:10:35,220 But over here, the first thing you can do 188 00:10:35,220 --> 00:10:38,640 is literally just change this to something else. 189 00:10:38,640 --> 00:10:42,290 So like hello world. 190 00:10:42,290 --> 00:10:43,800 You'll see it update right away. 191 00:10:43,800 --> 00:10:46,920 So that's how quick it is to just change stuff. 192 00:10:46,920 --> 00:10:51,600 193 00:10:51,600 --> 00:10:53,100 I guess it said device disconnected. 194 00:10:53,100 --> 00:10:56,240 Let me see if it's still on this. 195 00:10:56,240 --> 00:10:57,410 Yeah, OK, not bad. 196 00:10:57,410 --> 00:11:00,870 So let's dive right in. 197 00:11:00,870 --> 00:11:05,310 Let's try adding a background color to this text. 198 00:11:05,310 --> 00:11:09,260 So I'll go back to what I had before. 199 00:11:09,260 --> 00:11:14,870 So what you see over here is there is a view component inside which 200 00:11:14,870 --> 00:11:19,790 the text is, and if you've played with HTML, 201 00:11:19,790 --> 00:11:22,040 it would be familiar with you, the nesting of the UI 202 00:11:22,040 --> 00:11:24,460 that's happening over here. 203 00:11:24,460 --> 00:11:28,700 The style of the view comes from this stylus container thing, 204 00:11:28,700 --> 00:11:32,670 but we could actually just in line a style right there. 205 00:11:32,670 --> 00:11:36,270 I'm going to add a new view. 206 00:11:36,270 --> 00:11:40,649 And so this thing is going to try to keep updating to the latest code 207 00:11:40,649 --> 00:11:41,690 while you're changing it. 208 00:11:41,690 --> 00:11:43,760 So if you have an error, it's going to complain, 209 00:11:43,760 --> 00:11:46,040 but it will fix itself right after. 210 00:11:46,040 --> 00:11:49,550 So don't worry too much about that. 211 00:11:49,550 --> 00:11:59,060 Let's just say background color white and move this text in there. 212 00:11:59,060 --> 00:12:04,990 213 00:12:04,990 --> 00:12:09,100 OK, so it seems like it worked out. 214 00:12:09,100 --> 00:12:13,910 Now you have hello world in white background. 215 00:12:13,910 --> 00:12:20,771 If you've done native coding, you'd have to make an object in Objective C, which 216 00:12:20,771 --> 00:12:23,020 is a background, and then change its color, and stuff, 217 00:12:23,020 --> 00:12:25,000 and figure out what its coordinates are. 218 00:12:25,000 --> 00:12:27,970 I think it's better if you use their visual development tools. 219 00:12:27,970 --> 00:12:30,490 220 00:12:30,490 --> 00:12:32,320 So the next thing we're going to do is try 221 00:12:32,320 --> 00:12:37,150 to make it touchable so it responds to touch when you touch it. 222 00:12:37,150 --> 00:12:39,670 A basic component to do that in React Native 223 00:12:39,670 --> 00:12:44,770 is the touchable opacity component. 224 00:12:44,770 --> 00:12:48,730 What that means is when you touch it, it responds to that 225 00:12:48,730 --> 00:12:52,540 by changing its opacity so that there's some feedback involved. 226 00:12:52,540 --> 00:12:58,150 And we can just change the view to be a touchable opacity instead. 227 00:12:58,150 --> 00:13:10,447 228 00:13:10,447 --> 00:13:12,030 Seems like I made the same typo twice. 229 00:13:12,030 --> 00:13:14,480 That's funny. 230 00:13:14,480 --> 00:13:18,470 And when I touch it now, you can't see my finger on Quick time, 231 00:13:18,470 --> 00:13:21,240 but I'm doing it in real life. 232 00:13:21,240 --> 00:13:25,130 But yeah, you can see that it responds with this thing. 233 00:13:25,130 --> 00:13:31,340 So obviously, you want to actually do something cool when we touch it. 234 00:13:31,340 --> 00:13:37,430 So let's just pull up the logs view, which 235 00:13:37,430 --> 00:13:40,640 is where console.log messages would pop up. 236 00:13:40,640 --> 00:13:46,100 And what we'll do is make it print something when you touch it. 237 00:13:46,100 --> 00:13:51,350 So these things that follow the name of the component 238 00:13:51,350 --> 00:13:54,870 are called props in React. 239 00:13:54,870 --> 00:13:57,690 It's similar to HTML attributes. 240 00:13:57,690 --> 00:14:03,570 We're going to add a prop, which is this a function that 241 00:14:03,570 --> 00:14:07,680 would be what to do when you touch it. 242 00:14:07,680 --> 00:14:11,160 And that prop is called onPress for touchable opacity. 243 00:14:11,160 --> 00:14:15,330 And that function syntax that you see there is a lambda anonymous function 244 00:14:15,330 --> 00:14:19,590 definition in new JavaScript stuff. 245 00:14:19,590 --> 00:14:27,060 But we're just going to say just log touch. 246 00:14:27,060 --> 00:14:30,950 And so when I touch it now, you can see that. 247 00:14:30,950 --> 00:14:34,200 And it says Nicklaus' iPhone because you could have multiple iPhones connected 248 00:14:34,200 --> 00:14:37,770 and you want to disambiguate which log came from which phone. 249 00:14:37,770 --> 00:14:41,280 250 00:14:41,280 --> 00:14:42,030 So there we are. 251 00:14:42,030 --> 00:14:44,550 So we have stuff happening on touch. 252 00:14:44,550 --> 00:14:50,400 So now that we've seen display output paradigms, 253 00:14:50,400 --> 00:14:53,130 and we've seen input paradigms, let's work 254 00:14:53,130 --> 00:14:55,830 with the internal state of your application. 255 00:14:55,830 --> 00:14:59,190 So what we're going to do is turn this into a counter 256 00:14:59,190 --> 00:15:02,040 so that it's showing a number, and when I touch it, 257 00:15:02,040 --> 00:15:05,340 it just keeps incrementing that number. 258 00:15:05,340 --> 00:15:07,800 We'll start off with-- 259 00:15:07,800 --> 00:15:12,600 So the way React works is you have each component. 260 00:15:12,600 --> 00:15:14,730 App itself is a component, actually. 261 00:15:14,730 --> 00:15:19,260 So you can see that it is a class that extends component and these things 262 00:15:19,260 --> 00:15:27,670 that we name in our HTML tag looking things are components. 263 00:15:27,670 --> 00:15:32,277 So this is the name of some class that's included in React Native by default. 264 00:15:32,277 --> 00:15:34,110 There's nothing privileged about this class. 265 00:15:34,110 --> 00:15:36,320 It's the same as this class that we're writing. 266 00:15:36,320 --> 00:15:39,540 267 00:15:39,540 --> 00:15:45,300 What Expo is being told is hey, that app component that we made 268 00:15:45,300 --> 00:15:47,580 should be the root component of the whole application. 269 00:15:47,580 --> 00:15:50,580 So that's the entry point, like the main function, or something, 270 00:15:50,580 --> 00:15:53,670 which is what you say by exporting it. 271 00:15:53,670 --> 00:15:58,050 So components in React can have associated state. 272 00:15:58,050 --> 00:16:04,275 And what we're going to do is start off with a counter at zero. 273 00:16:04,275 --> 00:16:10,860 And the reason for this paradigm is instead of mutating state, 274 00:16:10,860 --> 00:16:13,470 we just update-- 275 00:16:13,470 --> 00:16:15,400 someone tried to get into my application. 276 00:16:15,400 --> 00:16:16,070 Hello there. 277 00:16:16,070 --> 00:16:20,530 278 00:16:20,530 --> 00:16:21,480 What was I saying? 279 00:16:21,480 --> 00:16:22,950 Yeah, so we have parent state. 280 00:16:22,950 --> 00:16:26,100 And render tries to be this pure function 281 00:16:26,100 --> 00:16:31,889 that just maps state to the component hierarchy 282 00:16:31,889 --> 00:16:34,680 that you want to render for that state, and then behind the scenes, 283 00:16:34,680 --> 00:16:37,304 React is like, OK, this is what we're going to do to render it. 284 00:16:37,304 --> 00:16:41,040 So a lot of words there, but let's jump back into doing stuff. 285 00:16:41,040 --> 00:16:43,440 So we have counter at zero. 286 00:16:43,440 --> 00:16:46,290 What we're going to do is like-- 287 00:16:46,290 --> 00:16:51,840 you would think, hey, can we just do counter plus plus? 288 00:16:51,840 --> 00:16:56,610 But because of this model of having explicit state and then having render 289 00:16:56,610 --> 00:17:01,880 depend on that, you actually need to tell React that you're updating state. 290 00:17:01,880 --> 00:17:08,400 291 00:17:08,400 --> 00:17:10,930 Sorry, I was lost in thought for a second. 292 00:17:10,930 --> 00:17:15,078 You want to tell React, hey, I want to set state to this new thing. 293 00:17:15,078 --> 00:17:17,369 It's actually not clobbering state with this new thing. 294 00:17:17,369 --> 00:17:20,079 This is just an object that will merge into the old state. 295 00:17:20,079 --> 00:17:22,162 So if you had other variables, it won't lose them. 296 00:17:22,162 --> 00:17:24,560 297 00:17:24,560 --> 00:17:29,760 But over here, now we can just render that state. 298 00:17:29,760 --> 00:17:33,010 299 00:17:33,010 --> 00:17:34,260 Hopefully, all of this worked. 300 00:17:34,260 --> 00:17:35,480 So let's see. 301 00:17:35,480 --> 00:17:42,950 All right, and if I touch it now, it looks like it probably bugged out. 302 00:17:42,950 --> 00:17:46,760 So I'm going to have to figure out what I did wrong there. 303 00:17:46,760 --> 00:17:47,613 Let's see. 304 00:17:47,613 --> 00:17:52,550 AUDIENCE: [INAUDIBLE] comma after the [INAUDIBLE] 305 00:17:52,550 --> 00:17:53,290 NIKHILESH: Sorry? 306 00:17:53,290 --> 00:17:56,580 AUDIENCE: [INAUDIBLE] I said it's semicolon, not a comma after counter. 307 00:17:56,580 --> 00:17:57,990 [INAUDIBLE] 308 00:17:57,990 --> 00:17:59,730 NIKHILESH: Yeah, actually, also while you 309 00:17:59,730 --> 00:18:02,021 were saying that, someone else pointed out what I think 310 00:18:02,021 --> 00:18:04,620 might be the issue, which is that this needs 311 00:18:04,620 --> 00:18:12,930 to reference counter that's actually in this.state because this name is 312 00:18:12,930 --> 00:18:15,840 undefined at that location. 313 00:18:15,840 --> 00:18:19,710 So what I'm going to use is this.state.counter and hope 314 00:18:19,710 --> 00:18:22,650 that was the issue. 315 00:18:22,650 --> 00:18:24,660 Yeah, so that was it. 316 00:18:24,660 --> 00:18:27,390 Also the comma, to get back to that, you can actually 317 00:18:27,390 --> 00:18:29,730 add additional trailing commas, and it's fine. 318 00:18:29,730 --> 00:18:33,840 And the nice thing about that is you don't 319 00:18:33,840 --> 00:18:36,450 have to worry about whether something is the last line or not. 320 00:18:36,450 --> 00:18:38,325 It's just like all of the lines are the same. 321 00:18:38,325 --> 00:18:40,510 322 00:18:40,510 --> 00:18:43,020 Now that we have that, what else can we do? 323 00:18:43,020 --> 00:18:46,500 Let's actually try to exploit the component paradigm, 324 00:18:46,500 --> 00:18:49,380 and turn this whole thing into one component 325 00:18:49,380 --> 00:18:54,060 that we're going to call counter, and put two counters in our application. 326 00:18:54,060 --> 00:19:00,870 So what I'm going to do is copy this. 327 00:19:00,870 --> 00:19:10,670 As I was saying, app is a component here, and call it class CounterButton, 328 00:19:10,670 --> 00:19:13,400 I guess. 329 00:19:13,400 --> 00:19:18,120 And we're going to keep this outermost view still in app 330 00:19:18,120 --> 00:19:19,370 and make this the inner thing. 331 00:19:19,370 --> 00:19:26,350 332 00:19:26,350 --> 00:19:30,290 This is to show you how you would go about making your own component. 333 00:19:30,290 --> 00:19:35,441 So what we'll do is just turn this into caller CounterButton. 334 00:19:35,441 --> 00:19:45,250 335 00:19:45,250 --> 00:19:48,680 The app is still the same because it's functionally 336 00:19:48,680 --> 00:19:51,750 achieving the same behavior. 337 00:19:51,750 --> 00:19:54,350 It still had that, but what you can do is now 338 00:19:54,350 --> 00:19:57,175 you can just copy and paste this line, and you have two counters. 339 00:19:57,175 --> 00:19:59,750 340 00:19:59,750 --> 00:20:03,080 And they are separate because they each have separate state. 341 00:20:03,080 --> 00:20:05,040 Stuff like that. 342 00:20:05,040 --> 00:20:08,942 So you can see how easy it is to just take 343 00:20:08,942 --> 00:20:11,150 something you want to do, turn that into a component, 344 00:20:11,150 --> 00:20:15,290 and then have that be a reusable thing that you or someone else 345 00:20:15,290 --> 00:20:16,790 can now play with. 346 00:20:16,790 --> 00:20:21,350 So now that we've seen one of these, let's throw in some components 347 00:20:21,350 --> 00:20:25,010 that Expo provides out of the box, and see what they feel like. 348 00:20:25,010 --> 00:20:29,720 So what we'll do is let's just see if I can 349 00:20:29,720 --> 00:20:32,410 get these counters to be next to each other 350 00:20:32,410 --> 00:20:38,126 just to give you a feel for what layout is like, and then we'll add a map view. 351 00:20:38,126 --> 00:20:39,250 So I'm going to put these-- 352 00:20:39,250 --> 00:20:40,460 oops. 353 00:20:40,460 --> 00:20:50,110 I'm going to put these into that view and make that view be a row situation. 354 00:20:50,110 --> 00:20:58,940 355 00:20:58,940 --> 00:21:05,390 So flex is this paradigm of layout that's actually also used in the web 356 00:21:05,390 --> 00:21:10,470 and is something that React native provides out 357 00:21:10,470 --> 00:21:12,880 of the box as a way for layout. 358 00:21:12,880 --> 00:21:15,500 Now you can see that the counters are next to each other 359 00:21:15,500 --> 00:21:19,580 and what we'll do is add a map view right above those counters just 360 00:21:19,580 --> 00:21:20,240 for fun. 361 00:21:20,240 --> 00:21:24,170 So these are some things that are provided out of the box in Expo. 362 00:21:24,170 --> 00:21:30,380 We've got videos, SVGs, and location, stuff like that. 363 00:21:30,380 --> 00:21:31,127 Let's do a map. 364 00:21:31,127 --> 00:21:31,835 People like maps. 365 00:21:31,835 --> 00:21:33,001 So we'll put a map in there. 366 00:21:33,001 --> 00:21:35,640 367 00:21:35,640 --> 00:21:38,090 And this is just a map that you can now use. 368 00:21:38,090 --> 00:21:41,096 369 00:21:41,096 --> 00:21:42,860 It's setting the state the the map region, 370 00:21:42,860 --> 00:21:46,520 but we'll just log the map region for now 371 00:21:46,520 --> 00:21:50,010 and see if we get updates on where stuff is going. 372 00:21:50,010 --> 00:21:53,480 So you can see this is where the map is at the moment, and if I move around, 373 00:21:53,480 --> 00:21:56,780 there's updates on where the map is. 374 00:21:56,780 --> 00:22:02,630 We can also add in a video, and you can just use any URL of a video, 375 00:22:02,630 --> 00:22:04,200 and you'll see it. 376 00:22:04,200 --> 00:22:10,500 So this is some open source 3D movie on the internet. 377 00:22:10,500 --> 00:22:14,000 So that's easy it is to make stuff on Expo. 378 00:22:14,000 --> 00:22:18,110 What we're going to do now is try making a different application which 379 00:22:18,110 --> 00:22:21,470 will involve 3D graphics. 380 00:22:21,470 --> 00:22:26,480 And we're also going to try to not keep all of your code in this web editor 381 00:22:26,480 --> 00:22:30,350 and actually work on code on your computer. 382 00:22:30,350 --> 00:22:37,910 And for that, we will be installing Expo's XTE application, which 383 00:22:37,910 --> 00:22:43,730 is the tool that takes source code that's on your computer, 384 00:22:43,730 --> 00:22:47,420 and serves that in the same way that snack is serving it so that you can 385 00:22:47,420 --> 00:22:50,990 use it as an application on your phone. 386 00:22:50,990 --> 00:22:53,090 And also we have ways for you to say I want 387 00:22:53,090 --> 00:22:54,440 to turn this into an app store application, 388 00:22:54,440 --> 00:22:55,760 and put it on the app store, stuff like that. 389 00:22:55,760 --> 00:22:57,670 No one would know that it was made on Expo. 390 00:22:57,670 --> 00:23:00,010 It's just feels like an app store application. 391 00:23:00,010 --> 00:23:04,140 But on your phone, you're still using the same Expo app as before. 392 00:23:04,140 --> 00:23:07,490 So let's just get XTE. 393 00:23:07,490 --> 00:23:11,330 And also, NVM is Node Version Manager, which 394 00:23:11,330 --> 00:23:16,190 is a way to get NPM, which is a way to get JavaScript packages that you 395 00:23:16,190 --> 00:23:16,940 can depend on. 396 00:23:16,940 --> 00:23:20,936 And we're going to use Three.js, which is a 3D engine, 397 00:23:20,936 --> 00:23:22,560 and we're going to install it from NPM. 398 00:23:22,560 --> 00:23:30,690 So go back to Expo dot-- 399 00:23:30,690 --> 00:23:32,840 let me just kill this application. 400 00:23:32,840 --> 00:23:39,114 OK so now just go back to expo.io on your computer and get the-- 401 00:23:39,114 --> 00:23:41,030 I'm on a Mac, so I'm going to get the Mac one, 402 00:23:41,030 --> 00:23:43,130 but you can also work from Windows and Linux. 403 00:23:43,130 --> 00:23:48,227 And you can make iOS applications from Windows or Linux using XTE. 404 00:23:48,227 --> 00:23:50,810 And you can actually also build them into apps or applications 405 00:23:50,810 --> 00:23:55,690 because it builds it on our server, which is a Mac, 406 00:23:55,690 --> 00:23:58,700 but you don't need a Mac to do it. 407 00:23:58,700 --> 00:24:00,950 Just click this thing and it'll start downloading XTE. 408 00:24:00,950 --> 00:24:04,580 I already have it installed, so I'm just going to use that. 409 00:24:04,580 --> 00:24:07,370 Let me go back to the screen and this is what it will 410 00:24:07,370 --> 00:24:11,090 look like when you first open it up. 411 00:24:11,090 --> 00:24:13,490 And these are some projects that I had open before, 412 00:24:13,490 --> 00:24:17,270 but we'll just make a new project. 413 00:24:17,270 --> 00:24:21,620 Oh yeah, so when you first start it, it's going to ask you to log in. 414 00:24:21,620 --> 00:24:24,980 We have a user account system and going ahead, 415 00:24:24,980 --> 00:24:28,830 we plan on making it so that if you make a project, it's listed under your user, 416 00:24:28,830 --> 00:24:32,880 and that way you don't have to scan a QR code or something. 417 00:24:32,880 --> 00:24:35,450 So just to make things easier for you guys, 418 00:24:35,450 --> 00:24:42,650 but we're going to make a new project under Spring CS50, which 419 00:24:42,650 --> 00:24:45,080 is a directory I made for just today. 420 00:24:45,080 --> 00:24:48,920 But we'll call it 3d-thing I guess. 421 00:24:48,920 --> 00:24:56,120 So it's going to do this extracting project files thing, 422 00:24:56,120 --> 00:25:02,000 and it's going to run a server on your computer, 423 00:25:02,000 --> 00:25:07,490 basically, which when you open this URL that you see over here, 424 00:25:07,490 --> 00:25:09,380 will be the application. 425 00:25:09,380 --> 00:25:13,280 So currently, the mechanism for getting that URL 426 00:25:13,280 --> 00:25:16,280 is to actually send it to yourself, but we're 427 00:25:16,280 --> 00:25:20,110 going to add that QR code view into XD so that it's easier, 428 00:25:20,110 --> 00:25:22,360 but I'll just send it to myself for now. 429 00:25:22,360 --> 00:25:28,270 And I'm not going to open my email while you guys can see it, but let's see. 430 00:25:28,270 --> 00:25:34,270 431 00:25:34,270 --> 00:25:35,230 Oh yeah, I got it. 432 00:25:35,230 --> 00:25:38,880 So here, you can see this particular email. 433 00:25:38,880 --> 00:25:46,722 So this is the link that was over here, and I just sent that to my email, 434 00:25:46,722 --> 00:25:47,930 and we're going to open that. 435 00:25:47,930 --> 00:25:54,870 436 00:25:54,870 --> 00:25:58,600 And it's going to, just for the first, cache 437 00:25:58,600 --> 00:26:04,645 a JavaScript build of your application. 438 00:26:04,645 --> 00:26:07,770 And once all of that is done, you should see your application on the phone. 439 00:26:07,770 --> 00:26:12,090 Let me just get this view actually onto that screen. 440 00:26:12,090 --> 00:26:13,980 Yeah, here we go. 441 00:26:13,980 --> 00:26:15,600 So shuffle things around a little bit. 442 00:26:15,600 --> 00:26:18,579 443 00:26:18,579 --> 00:26:19,079 OK. 444 00:26:19,079 --> 00:26:26,237 445 00:26:26,237 --> 00:26:27,570 Looks I can't make this smaller. 446 00:26:27,570 --> 00:26:32,370 447 00:26:32,370 --> 00:26:36,380 So what you should have in that directory 448 00:26:36,380 --> 00:26:38,747 is just a terminal in that directory. 449 00:26:38,747 --> 00:26:42,230 450 00:26:42,230 --> 00:26:49,400 You should have an assets directory that does have some basic icons and stuff. 451 00:26:49,400 --> 00:26:52,760 And your main.js file is where the source code of it is and the rest of it 452 00:26:52,760 --> 00:26:54,680 is just metadata about your application. 453 00:26:54,680 --> 00:26:56,690 Node modules is just the dependencies. 454 00:26:56,690 --> 00:26:59,240 So I'm going to open at in emacs. 455 00:26:59,240 --> 00:27:01,010 Feel free to use any text editor you want. 456 00:27:01,010 --> 00:27:03,900 457 00:27:03,900 --> 00:27:06,050 And here we are. 458 00:27:06,050 --> 00:27:12,680 So some other stuff, we can change this to hello world, 459 00:27:12,680 --> 00:27:17,130 and that should update on your phone. 460 00:27:17,130 --> 00:27:22,310 Yeah, so we're back to the same high speed editing process. 461 00:27:22,310 --> 00:27:25,370 And we could actually paste in, if you wanted to do that-- 462 00:27:25,370 --> 00:27:27,281 let me see if that works out. 463 00:27:27,281 --> 00:27:29,030 Oh wait, I actually don't have it anymore. 464 00:27:29,030 --> 00:27:30,059 All right, fine. 465 00:27:30,059 --> 00:27:32,600 I was going to paste in the application that we made on snack 466 00:27:32,600 --> 00:27:35,360 and see if it worked here. 467 00:27:35,360 --> 00:27:38,240 But yeah, let's just get to doing 3D things. 468 00:27:38,240 --> 00:27:43,610 So you're going to need NPM, which is this package 469 00:27:43,610 --> 00:27:45,920 manager for JavaScript stuff. 470 00:27:45,920 --> 00:27:48,260 The way to get it is to use this thing called 471 00:27:48,260 --> 00:27:53,000 MVM, which is Node's Version Manager, and MPM is Node's Package Manager. 472 00:27:53,000 --> 00:27:56,390 So it's all about Node. 473 00:27:56,390 --> 00:28:01,940 So just to explain that process again, I just googled MVM, went here, 474 00:28:01,940 --> 00:28:05,740 and then this text should walk you through it. 475 00:28:05,740 --> 00:28:08,242 There's a lot of it, but this is probably the main thing. 476 00:28:08,242 --> 00:28:10,700 I installed it a while ago, so I don't remember what I did, 477 00:28:10,700 --> 00:28:12,230 but I think that's what I did. 478 00:28:12,230 --> 00:28:16,160 And if you do that, you should get MVM. 479 00:28:16,160 --> 00:28:20,360 And then scroll down a lot again, and get to this part, 480 00:28:20,360 --> 00:28:26,025 and this should install Node, which is commonly used. 481 00:28:26,025 --> 00:28:28,400 It's used to make JavaScript servers and stuff like that. 482 00:28:28,400 --> 00:28:33,860 So hopefully that's not too bad and you can find many stack overflow answers 483 00:28:33,860 --> 00:28:35,090 to every question you have. 484 00:28:35,090 --> 00:28:40,190 So going back here, I actually have NPM already. 485 00:28:40,190 --> 00:28:44,840 So we're going to do NPM install. 486 00:28:44,840 --> 00:28:48,329 Save means it's going to remember that in your package JSON 487 00:28:48,329 --> 00:28:50,870 file, which is the meta data about the dependencies you have. 488 00:28:50,870 --> 00:28:56,150 Right now it's just Expo, and React, and React Native, which are the UI stuff. 489 00:28:56,150 --> 00:28:58,939 And we're going to install Three. 490 00:28:58,939 --> 00:29:01,730 So while it's installing, let me tell you a little bit about Three. 491 00:29:01,730 --> 00:29:08,510 So Three.js is this JavaScript 3D engine that 492 00:29:08,510 --> 00:29:13,700 runs on web GL, which is a specification for open GL, 493 00:29:13,700 --> 00:29:20,030 which is an open source GPU graphics specification. 494 00:29:20,030 --> 00:29:23,240 It's a specification for that on JavaScript, 495 00:29:23,240 --> 00:29:25,190 which is the environment that we're in. 496 00:29:25,190 --> 00:29:26,330 So it works out. 497 00:29:26,330 --> 00:29:35,550 And Three.js in Expo, just like runs on WebGL, and makes 3D graphics happen. 498 00:29:35,550 --> 00:29:40,160 So I'm going to open the most basic Three.js example 499 00:29:40,160 --> 00:29:42,230 and we'll try to recreate that in Expo. 500 00:29:42,230 --> 00:29:45,682 501 00:29:45,682 --> 00:29:49,550 So scroll all the way to all of the code. 502 00:29:49,550 --> 00:29:51,770 OK, it's over here. 503 00:29:51,770 --> 00:29:57,670 Going back here, it seems like it lost this network connection. 504 00:29:57,670 --> 00:29:58,760 But it's back. 505 00:29:58,760 --> 00:29:59,750 Cool, OK. 506 00:29:59,750 --> 00:30:04,820 So now that I have Three.js, if you remember, 507 00:30:04,820 --> 00:30:09,050 I installed it using MPM install save over there. 508 00:30:09,050 --> 00:30:11,570 509 00:30:11,570 --> 00:30:13,360 Don't worry about all the other messages. 510 00:30:13,360 --> 00:30:15,080 OK, so oops-- 511 00:30:15,080 --> 00:30:21,920 I accidentally hit Command-P. I'm just going to edit the main file again 512 00:30:21,920 --> 00:30:28,260 and Expo actually has this utility to use 513 00:30:28,260 --> 00:30:31,220 Three.js called createTHREEViewClass. 514 00:30:31,220 --> 00:30:35,300 And I'm going to explain when I use that, 515 00:30:35,300 --> 00:30:37,190 but first let's just import three. 516 00:30:37,190 --> 00:30:40,610 517 00:30:40,610 --> 00:30:45,470 So what we're going to do is createTHREEView, which is a component 518 00:30:45,470 --> 00:30:48,800 class, but it's actually created. 519 00:30:48,800 --> 00:30:52,760 We need to inject like Three.js as a dependency into this thing. 520 00:30:52,760 --> 00:30:56,870 I didn't want to make Expo's built-in library depend on Three.js, 521 00:30:56,870 --> 00:30:58,372 so this was the way to do it. 522 00:30:58,372 --> 00:31:00,080 If you know of a better way, let me know. 523 00:31:00,080 --> 00:31:05,960 But what all of this does is makes you able to use 524 00:31:05,960 --> 00:31:08,540 a component called THREEView that displays 525 00:31:08,540 --> 00:31:11,630 Three.js as a view in your application. 526 00:31:11,630 --> 00:31:16,750 So I'm going to go here and-- 527 00:31:16,750 --> 00:31:21,297 OK, we're going to get to that in a sec, but let me see if all of this 528 00:31:21,297 --> 00:31:22,130 doesn't break on me. 529 00:31:22,130 --> 00:31:26,670 530 00:31:26,670 --> 00:31:29,040 It's going to try to rebuild the JavaScript 531 00:31:29,040 --> 00:31:36,934 stuff because you had a new dependency, which is three.js in our case. 532 00:31:36,934 --> 00:31:38,850 And while that's happening, I'm going to start 533 00:31:38,850 --> 00:31:41,240 writing, actually, the Three.js code. 534 00:31:41,240 --> 00:31:45,930 535 00:31:45,930 --> 00:31:50,880 To make this easier, what I'm going to do is just copy this, not past it 536 00:31:50,880 --> 00:31:58,050 into our thing yet, but OK. 537 00:31:58,050 --> 00:32:00,740 Open the scratch buffer and put it in there. 538 00:32:00,740 --> 00:32:02,850 I know it's sort of weird but-- 539 00:32:02,850 --> 00:32:03,750 OK, cool. 540 00:32:03,750 --> 00:32:07,480 Just to get a reference on what to do. 541 00:32:07,480 --> 00:32:12,420 So componentDidMount is this method that you 542 00:32:12,420 --> 00:32:15,810 can implement in React, which is what happens 543 00:32:15,810 --> 00:32:20,880 when your component is mounted onto the screen, which 544 00:32:20,880 --> 00:32:22,290 is the first time it appears. 545 00:32:22,290 --> 00:32:28,110 So over there we're going to create all of Three.js scene graph stuff, 546 00:32:28,110 --> 00:32:30,780 which is going to be a scene-- 547 00:32:30,780 --> 00:32:34,110 and actually, I think we want to throw that in this 548 00:32:34,110 --> 00:32:39,640 because I want to be able to access it from the other functions. 549 00:32:39,640 --> 00:32:42,510 So I'm just going to use that reference that I had. 550 00:32:42,510 --> 00:32:44,430 Hope you don't mind me looking at a reference. 551 00:32:44,430 --> 00:32:47,280 552 00:32:47,280 --> 00:32:48,890 Hopefully this isn't too confusing. 553 00:32:48,890 --> 00:32:52,890 The bottom half of the window is the Expo application 554 00:32:52,890 --> 00:32:58,410 and the top half is me pacing in the example Three.js 555 00:32:58,410 --> 00:33:01,210 application from the Three.js official documentation. 556 00:33:01,210 --> 00:33:13,340 So we're going to say new THREE.Scene, and this is stuff 557 00:33:13,340 --> 00:33:17,020 to do the aspect ratio, and all that. 558 00:33:17,020 --> 00:33:20,900 But actually, Expo's THREEView will ultimately 559 00:33:20,900 --> 00:33:23,990 set the aspect ratio for you, depending on what the size of the view 560 00:33:23,990 --> 00:33:24,740 is on your screen. 561 00:33:24,740 --> 00:33:28,820 So we can just hard code it to one and it doesn't really matter. 562 00:33:28,820 --> 00:33:32,230 We don't actually have to create a runner because again, that's 563 00:33:32,230 --> 00:33:33,230 what the THREEView does. 564 00:33:33,230 --> 00:33:36,950 It creates the WebGL render that Expo would need. 565 00:33:36,950 --> 00:33:40,040 We do have to create the geometry and stuff. 566 00:33:40,040 --> 00:33:42,560 567 00:33:42,560 --> 00:33:44,780 So what I'm doing here is I'm saying I want 568 00:33:44,780 --> 00:33:48,850 to make a box that's one unit in all dimensions 569 00:33:48,850 --> 00:33:50,810 and I want to make a material for it. 570 00:33:50,810 --> 00:33:55,260 571 00:33:55,260 --> 00:34:00,910 It's just flat and it has red as a color. 572 00:34:00,910 --> 00:34:02,230 Nope, it's actually green. 573 00:34:02,230 --> 00:34:12,243 So this is weird, but it's basically a number that encodes green by having-- 574 00:34:12,243 --> 00:34:15,650 this is red and this is green. 575 00:34:15,650 --> 00:34:17,639 The first two hexadecimal digits are red, 576 00:34:17,639 --> 00:34:19,513 and then the middle two are green, and so on. 577 00:34:19,513 --> 00:34:22,971 578 00:34:22,971 --> 00:34:24,179 And we'll also make the cube. 579 00:34:24,179 --> 00:34:40,139 580 00:34:40,139 --> 00:34:41,580 So far, so good. 581 00:34:41,580 --> 00:34:52,537 And what you need to do is actually instantiate the THREEView 582 00:34:52,537 --> 00:34:53,370 into an application. 583 00:34:53,370 --> 00:34:59,990 So THREEView takes a couple of parameters 584 00:34:59,990 --> 00:35:04,400 and I do actually have an example to use of THREEView that I'm 585 00:35:04,400 --> 00:35:07,440 going to cheat and look at. 586 00:35:07,440 --> 00:35:13,700 But what the parameters are is just the scene, and the camera 587 00:35:13,700 --> 00:35:16,290 that you created, and also a tic function, 588 00:35:16,290 --> 00:35:19,490 if you wanted to make stuff happen every frame. 589 00:35:19,490 --> 00:35:25,760 But let's have it take the scene and the camera that we just created above. 590 00:35:25,760 --> 00:35:31,400 So if you remember, this.scene was the Three.js scene that we made. 591 00:35:31,400 --> 00:35:39,920 And so that's the camera and we also have the same thing with tic. 592 00:35:39,920 --> 00:35:48,430 593 00:35:48,430 --> 00:35:54,910 It's going to add a tic function based on the tic function 594 00:35:54,910 --> 00:35:59,080 that we had in that paste. 595 00:35:59,080 --> 00:36:01,150 So they're just updating the cubes rotation. 596 00:36:01,150 --> 00:36:02,525 We're going to do the same thing. 597 00:36:02,525 --> 00:36:06,360 598 00:36:06,360 --> 00:36:09,290 dt is the delta time since the last frame 599 00:36:09,290 --> 00:36:15,179 and we're going to do dt times 0.1 on the y and times 0.2-- 600 00:36:15,179 --> 00:36:17,720 sorry, that was on the x, and we're going to do 0.2 on the y. 601 00:36:17,720 --> 00:36:19,764 602 00:36:19,764 --> 00:36:22,930 I'm really not sure if this is going to work, but I'm just going to save it. 603 00:36:22,930 --> 00:36:23,960 So, here we go. 604 00:36:23,960 --> 00:36:27,680 605 00:36:27,680 --> 00:36:28,180 Let's see. 606 00:36:28,180 --> 00:36:31,730 So THREE.Mesh is this first issue, but-- 607 00:36:31,730 --> 00:36:35,830 608 00:36:35,830 --> 00:36:37,730 oh yeah, it's three dot mesh, I believe. 609 00:36:37,730 --> 00:36:40,830 Yeah, let's do that instead. 610 00:36:40,830 --> 00:36:51,170 611 00:36:51,170 --> 00:36:56,470 Oh yeah, I also want to I think flex this to the whole screen. 612 00:36:56,470 --> 00:37:10,854 613 00:37:10,854 --> 00:37:15,310 OK, so the THREEView is invisible, but it does tell me 614 00:37:15,310 --> 00:37:17,800 about all of those three warnings. 615 00:37:17,800 --> 00:37:19,430 So I think it's running. 616 00:37:19,430 --> 00:37:32,000 So what I'm going to do is throw in a view with some background color, 617 00:37:32,000 --> 00:37:43,570 and temporarily move this stuff out, and see if I see that view. 618 00:37:43,570 --> 00:37:46,470 So you get to see some live debugging action. 619 00:37:46,470 --> 00:37:50,130 But let's see if this view is visible now. 620 00:37:50,130 --> 00:37:54,190 So that's a red view, and yeah, you want to flex 1 that. 621 00:37:54,190 --> 00:37:57,780 622 00:37:57,780 --> 00:37:59,110 OK, so that is red. 623 00:37:59,110 --> 00:38:04,030 So what we can do maybe is just have this view, 624 00:38:04,030 --> 00:38:13,120 and make the THREEView a child of that, and see 625 00:38:13,120 --> 00:38:17,320 if the red thing is still visible through it, in which case 626 00:38:17,320 --> 00:38:19,382 we would know that it's transparent, basically. 627 00:38:19,382 --> 00:38:22,690 628 00:38:22,690 --> 00:38:27,120 So there's some syntax issues. 629 00:38:27,120 --> 00:38:29,060 Line 26, let's go there. 630 00:38:29,060 --> 00:38:30,430 Yeah, it's not good. 631 00:38:30,430 --> 00:38:44,110 All right, anticipating all of this, I actually 632 00:38:44,110 --> 00:38:47,430 made this project before I came here. 633 00:38:47,430 --> 00:38:53,770 So I'm going to look at that project but it does seem 634 00:38:53,770 --> 00:38:56,450 that that is basically the same thing. 635 00:38:56,450 --> 00:38:58,550 So I'm not sure what the issue is here. 636 00:38:58,550 --> 00:39:02,480 637 00:39:02,480 --> 00:39:03,920 Anyone have thoughts? 638 00:39:03,920 --> 00:39:04,420 Let's see. 639 00:39:04,420 --> 00:39:16,910 640 00:39:16,910 --> 00:39:20,270 I'm just comparing these things. 641 00:39:20,270 --> 00:39:21,450 The THREEView class. 642 00:39:21,450 --> 00:39:27,330 643 00:39:27,330 --> 00:39:31,610 Oh yeah, also one thing we probably want to do with the camera is position 644 00:39:31,610 --> 00:39:34,600 it in front of the object. 645 00:39:34,600 --> 00:39:36,754 So we'll set the z coordinate to five. 646 00:39:36,754 --> 00:39:38,920 I don't think that's actually the issue that we had. 647 00:39:38,920 --> 00:39:42,062 648 00:39:42,062 --> 00:39:47,845 I created a box geometry material and all that. 649 00:39:47,845 --> 00:39:49,812 OK, it looks not bad. 650 00:39:49,812 --> 00:39:51,270 And we still have the tic function. 651 00:39:51,270 --> 00:39:53,820 652 00:39:53,820 --> 00:39:56,350 It's a different speed, but that probably shouldn't matter. 653 00:39:56,350 --> 00:40:05,340 654 00:40:05,340 --> 00:40:08,350 Well, one thing I could do is just open this project that I had before. 655 00:40:08,350 --> 00:40:09,570 So I'm going to do that. 656 00:40:09,570 --> 00:40:18,870 657 00:40:18,870 --> 00:40:22,050 As you can see, the code for the other project is basically the same. 658 00:40:22,050 --> 00:40:24,374 659 00:40:24,374 --> 00:40:26,040 I'm just going to send myself that link. 660 00:40:26,040 --> 00:40:36,492 661 00:40:36,492 --> 00:40:37,950 Let me just get away from my email. 662 00:40:37,950 --> 00:40:54,980 663 00:40:54,980 --> 00:40:56,240 OK, in this case, it did work. 664 00:40:56,240 --> 00:40:58,810 665 00:40:58,810 --> 00:41:01,640 Just to show you like what happens if you change around, 666 00:41:01,640 --> 00:41:04,970 for example, the speeds of rotation, and things like that, 667 00:41:04,970 --> 00:41:06,470 let's just make it only rotate on x. 668 00:41:06,470 --> 00:41:12,163 669 00:41:12,163 --> 00:41:15,770 That was rotation around the x-axis. 670 00:41:15,770 --> 00:41:21,660 So we have 3D graphics, or we almost had it in the new project that I made, 671 00:41:21,660 --> 00:41:28,010 but this project is basically the same as the project that I was creating. 672 00:41:28,010 --> 00:41:30,510 There's some things somewhere that I did differently 673 00:41:30,510 --> 00:41:35,280 that I didn't have time to figure it out in these minutes. 674 00:41:35,280 --> 00:41:39,480 But yeah, there's also the Minecraft example 675 00:41:39,480 --> 00:41:42,600 that I showed you way in the beginning of the presentation, 676 00:41:42,600 --> 00:41:44,700 is open source and online. 677 00:41:44,700 --> 00:41:48,870 So you can try that example. 678 00:41:48,870 --> 00:41:55,080 So I just wanted to leave like 10 minutes towards the end for Q&A 679 00:41:55,080 --> 00:41:55,720 from you guys. 680 00:41:55,720 --> 00:41:59,310 So feel free to just ask me any questions that you have. 681 00:41:59,310 --> 00:42:02,660 I'll go back to the presentation. 682 00:42:02,660 --> 00:42:04,500 Yeah. 683 00:42:04,500 --> 00:42:06,200 All right, anybody have questions? 684 00:42:06,200 --> 00:42:06,280 Yeah? 685 00:42:06,280 --> 00:42:08,738 AUDIENCE: So in terms of deploying applications with stuff, 686 00:42:08,738 --> 00:42:10,778 how would you integrate this with a database 687 00:42:10,778 --> 00:42:12,944 if you're doing a database [? backup ?] application? 688 00:42:12,944 --> 00:42:16,410 How do you get it up so that you can access it? 689 00:42:16,410 --> 00:42:21,720 NIKHILESH: So the application itself is just the client side 690 00:42:21,720 --> 00:42:26,610 and what you'd be doing is you would make your own server talking 691 00:42:26,610 --> 00:42:27,990 to the database that you want. 692 00:42:27,990 --> 00:42:32,350 And you can make HTTP requests to the database. 693 00:42:32,350 --> 00:42:38,940 And there's this API called Fetch, which is like a JavaScript API for HTTP, 694 00:42:38,940 --> 00:42:41,010 and you can make those requests. 695 00:42:41,010 --> 00:42:45,940 We could actually do a quick example of making an HTTP request on snack, 696 00:42:45,940 --> 00:42:47,190 if you wanted to check it out. 697 00:42:47,190 --> 00:42:49,820 698 00:42:49,820 --> 00:42:53,450 But that's how we've done it for applications that we've tried. 699 00:42:53,450 --> 00:42:55,625 AUDIENCE: Build it separate and just make a rest API 700 00:42:55,625 --> 00:42:56,625 and then just access it. 701 00:42:56,625 --> 00:43:00,250 NIKHILESH: Yeah, that's the way that we'd go about it for now. 702 00:43:00,250 --> 00:43:04,592 Yeah, any other questions from folks? 703 00:43:04,592 --> 00:43:07,082 AUDIENCE: What about pushing that to the app store? 704 00:43:07,082 --> 00:43:08,078 Is that a lot to do? 705 00:43:08,078 --> 00:43:10,500 Or maybe you have a certain process for that? 706 00:43:10,500 --> 00:43:14,760 NIKHILESH: So basically, we have this command line 707 00:43:14,760 --> 00:43:18,780 tool called EXP, which is a counterpart to XT, 708 00:43:18,780 --> 00:43:20,670 and it's this one command on EXP. 709 00:43:20,670 --> 00:43:26,520 You can just say build iOS, or build Android, and you'll get for iOS, 710 00:43:26,520 --> 00:43:28,640 it's an IPA for Android, you get an APK, which 711 00:43:28,640 --> 00:43:32,430 are the package files that go into the app store, 712 00:43:32,430 --> 00:43:34,400 and you get those for your application. 713 00:43:34,400 --> 00:43:38,500 But folks have successfully done that from Windows and Linux also. 714 00:43:38,500 --> 00:43:41,430 715 00:43:41,430 --> 00:43:44,190 So the documentation for that is on the website. 716 00:43:44,190 --> 00:43:49,890 So go to our website and then just hit docs and guides. 717 00:43:49,890 --> 00:43:52,590 A lot of stuff on here, but building standalone apps 718 00:43:52,590 --> 00:43:55,740 is what you were asking about, and it's got 719 00:43:55,740 --> 00:43:57,412 all of the info about how to do that. 720 00:43:57,412 --> 00:43:59,370 And there's a bunch of metadata that you end up 721 00:43:59,370 --> 00:44:02,790 having to write like the bundle identifier, and everything like that, 722 00:44:02,790 --> 00:44:06,305 but that's at least as much as you would have to do without Expo. 723 00:44:06,305 --> 00:44:10,870 724 00:44:10,870 --> 00:44:11,810 Any more questions? 725 00:44:11,810 --> 00:44:12,508 Yeah? 726 00:44:12,508 --> 00:44:15,260 AUDIENCE: Are there any limitations as far 727 00:44:15,260 --> 00:44:25,134 as things you can do with a native app such as get latitude and longitude, 728 00:44:25,134 --> 00:44:27,630 or read WiFi signals? 729 00:44:27,630 --> 00:44:30,030 Is that all available as well? 730 00:44:30,030 --> 00:44:33,100 NIKHILESH: Yeah, so for example, the map view that I showed you, 731 00:44:33,100 --> 00:44:36,880 it's something that is a native thing, but it's built into Expo. 732 00:44:36,880 --> 00:44:41,410 And just like that, there's a location API, 733 00:44:41,410 --> 00:44:46,220 which is also built in that you can use to get latitude and longitude. 734 00:44:46,220 --> 00:44:50,270 And in the docs, we actually have a snack for it. 735 00:44:50,270 --> 00:44:56,540 So you can just open that up, and scan the QR code, and we could try it out. 736 00:44:56,540 --> 00:45:01,600 And there's APIs for a lot of the things that you would want to do. 737 00:45:01,600 --> 00:45:06,577 One thing that I added recently was you can have a local SQLite database. 738 00:45:06,577 --> 00:45:08,410 A lot of other stuff, like you can get stuff 739 00:45:08,410 --> 00:45:11,590 from the gyroscope, or the accelerometer, and most of those 740 00:45:11,590 --> 00:45:19,010 are basically one JavaScript function call or two, versus way more stuff 741 00:45:19,010 --> 00:45:22,385 that you'd have to do natively, and also differently for Android and iOS. 742 00:45:22,385 --> 00:45:25,250 743 00:45:25,250 --> 00:45:29,810 And folks have used this location thing successfully in various apps. 744 00:45:29,810 --> 00:45:31,940 AUDIENCE: Can you just talk about [INAUDIBLE] 745 00:45:31,940 --> 00:45:37,910 Yeah, so also, another thing is while we do have a lot out of box, 746 00:45:37,910 --> 00:45:40,062 it is limited, in a sense. 747 00:45:40,062 --> 00:45:42,020 For example, we don't have Bluetooth right now, 748 00:45:42,020 --> 00:45:45,800 and if you wanted to do Bluetooth, what you could do 749 00:45:45,800 --> 00:45:50,930 is we have this thing called ExpoKit. 750 00:45:50,930 --> 00:45:55,430 So what you would be doing is you would eject out 751 00:45:55,430 --> 00:45:58,730 of being a pure JavaScript Expo application, 752 00:45:58,730 --> 00:46:02,900 to being a combination of JavaScript and native code. 753 00:46:02,900 --> 00:46:06,444 And it's just the native runtime that runs that JavaScript 754 00:46:06,444 --> 00:46:08,360 and then you can modify that runtime yourself. 755 00:46:08,360 --> 00:46:12,280 So you can add in your own Bluetooth API that you can call from the JavaScript. 756 00:46:12,280 --> 00:46:16,490 So it enables you to define your own API, 757 00:46:16,490 --> 00:46:18,220 like the location API that we have. 758 00:46:18,220 --> 00:46:21,080 And then I think about that as if you made something that's useful, 759 00:46:21,080 --> 00:46:24,380 and you want folks to use it, you can put it back up as open source, 760 00:46:24,380 --> 00:46:27,349 and if its a good API, we could look into that, 761 00:46:27,349 --> 00:46:28,640 and think about integrating it. 762 00:46:28,640 --> 00:46:29,306 Stuff like that. 763 00:46:29,306 --> 00:46:34,237 764 00:46:34,237 --> 00:46:34,820 Anything else? 765 00:46:34,820 --> 00:46:42,125 766 00:46:42,125 --> 00:46:43,100 Awesome. 767 00:46:43,100 --> 00:46:44,480 All right, thanks a lot. 768 00:46:44,480 --> 00:46:46,930 [APPLAUSE] 769 00:46:46,930 --> 00:46:51,169