WEBVTT 00:01.060 --> 00:08.800 Okay, now we have all the knowledge we need to build our own mobile application and we'll start doing 00:08.800 --> 00:10.280 that in this section. 00:10.300 --> 00:15.820 So what we need to do first to create a new application, we need to open terminal. 00:17.790 --> 00:25.740 And we can navigate to desktop and then we can create a new application with Expo CLI. 00:26.040 --> 00:35.850 So I'll do expo and then init that will initiate our new application and I will call it movie rater 00:35.940 --> 00:37.340 altogether like this. 00:37.350 --> 00:41.040 This will be the same name as it, as it was for a web app. 00:43.830 --> 00:47.850 And then I can pick which one I would like to do. 00:47.880 --> 00:53.160 As I said before, in the previous section, you have other options, and I would encourage you to play 00:53.160 --> 01:00.210 with this and you can create a few different applications here and see which one is the closest to to 01:00.210 --> 01:01.730 the one you would like to have. 01:01.740 --> 01:08.070 Like if your application will have a tab as a kind of navigation, then maybe you can start with this. 01:08.340 --> 01:14.970 I would also say that starting with a blank, it's usually the easiest if you are not really sure what 01:14.970 --> 01:15.540 is that? 01:15.540 --> 01:21.960 Because if you have too much code starting with a project, you might have a hard to find your way to 01:21.960 --> 01:22.700 change it. 01:22.710 --> 01:24.900 So I will go for a blank here. 01:26.770 --> 01:36.150 And then I will name it movie writer like that and I will use yarn. 01:36.160 --> 01:38.470 It doesn't really matter that much. 01:55.790 --> 01:57.110 Okay, that is done. 01:57.110 --> 02:04.940 I can go to the folder movie writer and inside that folder I can do yarn start. 02:04.940 --> 02:10.970 I can do also Expo start or npm start depend on what you use. 02:10.970 --> 02:12.400 But I will. 02:12.410 --> 02:14.900 I don't want to have the terminal open. 02:14.900 --> 02:18.650 I would like to use the terminal inside my Visual studio code. 02:18.650 --> 02:24.710 So what I can do is I can open that folder in Visual Studio code and the shortcut for that is code and 02:24.710 --> 02:27.140 dot means this current folder. 02:27.140 --> 02:34.010 So I will code it here and this will open Visual Studio code and the project there. 02:34.010 --> 02:42.320 You need to configure that to have the terminal code to open a the current folder in the Visual Studio 02:42.320 --> 02:43.520 code, but that's very handy. 02:43.520 --> 02:53.480 So I can close this here and then I can open terminal here and I have the terminal so I can do expo 02:53.870 --> 02:54.770 start. 03:02.650 --> 03:05.230 And my application is up and running. 03:05.230 --> 03:14.040 So what I can do is I can have that on iOS simulator on Android or this on my own device. 03:14.050 --> 03:20.290 I will have it on iOS or Android, Android depending on uh, on my mood really, because I have two 03:20.290 --> 03:22.390 simulator and emulator installed. 03:22.390 --> 03:24.250 So we'll go maybe for iOS. 03:27.430 --> 03:27.880 Okay. 03:27.920 --> 03:31.270 Application is open in the simulator here. 03:31.300 --> 03:33.430 Only the first thing is taking so long. 03:33.580 --> 03:37.900 And then the next build will be much faster when we change something here. 03:37.900 --> 03:42.910 So Visual Studio code here and we have a few things to set up. 03:42.910 --> 03:52.840 So first I will open up JS and we have that open, that text that is displayed in our application and 03:52.840 --> 03:58.900 we have some styles here so I can close this and to make a little bit more space. 03:58.900 --> 04:03.760 And what I can do is I can prepare my project to be more structured. 04:03.760 --> 04:12.310 So what I will do is I will create a new folder, I will make it component, and then inside I will 04:12.310 --> 04:17.470 create my first component and that component it will be list. 04:17.920 --> 04:22.300 JS So that will be a list for list of movies displayed here. 04:22.300 --> 04:28.550 So what I can do is I can quickly hack it, I will just copy whatever I had in the app.js and paste 04:28.550 --> 04:29.210 it here. 04:29.210 --> 04:34.940 So I don't need to do much of that typing here and then we can say. 04:36.990 --> 04:40.170 This will be a list. 04:40.830 --> 04:42.270 So we have the list. 04:42.270 --> 04:47.670 I will call it movie list like that. 04:47.670 --> 04:50.130 And I will keep it everything else for now. 04:50.130 --> 04:52.470 So we'll have that display on the screen. 04:52.470 --> 05:01.770 And here what I can do is I can actually remove all of the things that I don't need, don't need. 05:01.770 --> 05:06.960 So I will just leave it very bare minimum app. 05:06.960 --> 05:12.960 And then instead of the view, what I can do is I can display movie. 05:14.380 --> 05:18.700 Movie list and it will auto import that from here. 05:18.700 --> 05:21.550 And then I can self-close the tag. 05:21.700 --> 05:23.650 Actually, I can remove that as well. 05:23.650 --> 05:25.420 So if I will save it now. 05:27.220 --> 05:28.470 And this will be our list. 05:28.480 --> 05:29.710 This is what I'm expecting. 05:29.710 --> 05:36.670 So app.js, I will keep it very clean and there is not much happening here. 05:36.670 --> 05:39.340 So we have our movie list here. 05:39.340 --> 05:43.690 And inside that movie list I can code everything there. 05:43.690 --> 05:52.000 So what we need to do, basically that will be our main component when we will display the list of movies. 05:52.000 --> 05:59.860 So we will need to first load the data from our server and this will be very same way as we've done 05:59.860 --> 06:02.980 it with our React web application. 06:02.980 --> 06:09.370 So we'll use Fetch and then we'll display that in our application using a list.