WEBVTT 00:02.020 --> 00:09.310 Okay, we have our application already and it's kind of up and running, but we had no chance to see 00:09.310 --> 00:09.820 it yet. 00:09.850 --> 00:16.060 If you, as I said, have a mobile device that you can use, you can actually scan this barcode and 00:16.060 --> 00:16.810 you are good to go. 00:16.840 --> 00:23.800 If that's if you are happy with that setup, then you can work your application out from from this setup 00:23.800 --> 00:25.840 and you don't need to do anything else. 00:25.840 --> 00:34.090 But in this tutorial I will try to explain you what will be the steps to to take to have that options 00:34.090 --> 00:34.780 enabled. 00:34.780 --> 00:39.760 And I will enable that and I will use that because it will be more convenient for you to see whatever 00:39.760 --> 00:41.050 I'm doing on the screen. 00:41.050 --> 00:48.790 It will be actually visible on the emulator or simulator and instead of my physical device I have on 00:48.790 --> 00:49.450 my desk. 00:49.480 --> 00:51.820 So I'm not going to test the physical device. 00:51.820 --> 00:57.910 It will be worth experience for this video course, so I'll use the emulator and simulator and actually 00:57.910 --> 01:04.220 I will encourage you to try to set it up at the emulator and simulator because that's actually much 01:04.220 --> 01:05.960 faster, better way to do it. 01:05.960 --> 01:08.960 And you don't need to have millions of different devices. 01:08.960 --> 01:13.010 You can actually simulate the different devices directly on your computer. 01:13.010 --> 01:21.110 So what we need to do is we if we go to getting started, then you can switch to this second tab and 01:21.110 --> 01:29.000 that's actually when you will have to do some steps depending on your operating system. 01:29.000 --> 01:30.800 So you pick your operating system. 01:30.800 --> 01:35.060 At the moment I'm on the Mac OS, but you can also pick Windows and Linux. 01:35.360 --> 01:44.120 So what is happening here is if you want to develop an application on iOS, the only way you can do 01:44.120 --> 01:45.740 it is on the Mac. 01:45.860 --> 01:52.280 So at the moment, Windows and Linux, it's not supported and I don't think it will ever be because 01:52.280 --> 01:54.260 that's the politics of Apple. 01:54.260 --> 02:00.350 And I have to say I absolutely hate it how the Apple treats developers. 02:00.350 --> 02:05.990 They are trying to make a good software for their devices, so they are kind of trying to force you 02:05.990 --> 02:08.450 to buy their own machine. 02:08.450 --> 02:15.470 And if you don't have it, you are out, out of luck and you you can't really develop anything on iOS. 02:16.070 --> 02:21.380 So that's that's a really bad thing and you won't be able to run the simulator. 02:21.380 --> 02:25.190 There are there are a few hacks, but it's not an official. 02:25.190 --> 02:34.130 And I don't think Apple will ever allow their software development options on the other platforms. 02:34.130 --> 02:39.830 So at the moment you are forced to use the Mac OS and that's the reason I have this machine. 02:39.830 --> 02:42.770 Otherwise I will use probably a Linux. 02:42.770 --> 02:46.910 So if you have a mac then you can set up the iOS. 02:46.940 --> 02:53.080 If you have a Windows Linux, then you can set only Android on macOS. 02:53.210 --> 02:57.590 You have no option, you have no problem having both platforms. 02:57.590 --> 03:03.620 So if you want to have both platforms, the MacBook is the only option at the moment, at the moment. 03:03.620 --> 03:11.570 So if you want to install the iOS, that's what you will need to do and you have a list of things that 03:11.570 --> 03:13.580 you will need to have. 03:13.580 --> 03:15.920 And you can see here some. 03:17.090 --> 03:20.510 Some process and that will be different on every single platform. 03:20.510 --> 03:24.890 So if you want to have like on the windows, you would like to have Android, you will have a different 03:24.890 --> 03:26.000 things to install. 03:26.090 --> 03:35.750 I will tell you that the easiest way to install any dependencies for either iOS or Android will be to 03:35.750 --> 03:43.010 install their native application to develop the the, the native mobile apps. 03:43.010 --> 03:46.190 So what is the native tool for iOS? 03:46.190 --> 03:51.380 That's actually Xcode and as I said, Xcode is only available on Mac. 03:51.380 --> 03:56.480 So if you don't have a mac, you won't be able to install Xcode is free program that is available on 03:56.480 --> 03:59.510 the market on an app. 03:59.510 --> 04:01.580 Appstore and you can download this. 04:01.580 --> 04:05.540 I have the dummy project here, my first project open. 04:05.540 --> 04:11.990 It doesn't really matter what kind of project is that because we are never use the Xcode for developing 04:11.990 --> 04:12.440 anything. 04:12.440 --> 04:19.710 We will use the React Native, but when you install this Xcode on your machine that comes with a lot 04:19.710 --> 04:24.060 of different things and you don't need to set up a lot, a lot of things. 04:24.060 --> 04:29.580 And one of the advantages of having Xcode installed is the simulator. 04:29.580 --> 04:36.990 So what I can do is I can go here and coming back here, if I will do run on iOS simulator. 04:40.170 --> 04:45.390 It's actually opened the simulator here, and that simulator comes with a Xcode. 04:45.390 --> 04:49.140 So once you install the Xcode, you will have the simulator here. 04:49.140 --> 04:55.470 What's good about this is you can go to the hardware, you can go to the device, pick your operating 04:55.470 --> 05:00.300 system, and you have a list of different devices that you can test at your application on. 05:00.300 --> 05:07.650 So at the moment I am on iPhone X, iPhone eight, but I could pick any other device here and change 05:07.650 --> 05:07.920 it. 05:07.920 --> 05:13.590 So what you can see here, that's my application loading and you can see building JavaScript bundle 05:13.590 --> 05:14.670 and that's 10%. 05:14.670 --> 05:17.280 You can also see the log here. 05:17.280 --> 05:18.780 So what is happening here? 05:18.780 --> 05:26.970 Once you click that, the JavaScript will compile into the application that in the simulator Expo application 05:26.970 --> 05:32.580 will be installed and it will be able to see your application live in the simulator here. 05:32.910 --> 05:40.530 So I will wait until that will finish and you will see that I can see my application in the simulator. 05:40.530 --> 05:41.130 Okay. 05:41.130 --> 05:44.940 And that's done open an app to start working on your app. 05:44.940 --> 05:49.650 This is actually something that it is a content of our application. 05:49.650 --> 05:53.370 There is not much here because we kind of start with a blank. 05:53.370 --> 05:55.620 So there is not much content here. 05:55.620 --> 06:02.010 But what you can see here is that I started to run the iPhone X, iPhone eight. 06:02.340 --> 06:04.020 This is running on my device. 06:04.020 --> 06:09.300 So if I will have it, my own device, scan it here, I will have a list of different devices. 06:09.300 --> 06:17.850 So if you want to test your application on the simulator, like on an iPad or iPhone, you will need 06:17.850 --> 06:20.490 to have the simulator installed on your machine. 06:20.490 --> 06:24.030 And the easiest way to do it will be with Xcode. 06:24.240 --> 06:31.380 Once you will have that, you will have a different settings here and then you can also add this application 06:31.380 --> 06:34.560 will help you publishing your apps on the App Store. 06:34.560 --> 06:37.290 Without that, it's not really possible. 06:37.290 --> 06:41.620 So Xcode is kind of required for for this setup. 06:41.620 --> 06:49.150 Also, if you will have any problems, you will I will advise you to go to macOS, iOS and go through 06:49.150 --> 06:53.020 that installation here and that should be all sorted. 06:53.020 --> 06:55.210 So that's a simulator. 06:55.240 --> 07:02.500 Another option will be Android, so Android, and then you can with Android, you can go any operating 07:02.500 --> 07:07.480 system so you don't have to be on a mac and then you can install the dependencies. 07:07.510 --> 07:16.930 The easiest option to to do will be to install their IDE for developing a native Android application, 07:16.930 --> 07:20.290 which is Android studio, and that's also a free. 07:20.290 --> 07:23.770 So you can download Android studio from the internet. 07:23.770 --> 07:26.770 And I have a simple test application here. 07:26.770 --> 07:32.650 I'm not going to do anything here, so I don't need to create application and code it anything here. 07:32.650 --> 07:38.050 But once this is installed, it also comes with some tools that I can use. 07:38.050 --> 07:44.650 And if you go to tools here, what's important is two things SDK and Avd. 07:44.920 --> 07:49.990 So let's start with SDK and I will show you what we will need to do here. 07:49.990 --> 07:57.580 So what's the SDK is well, basically that's the things the, the packages that you will need to install 07:57.580 --> 08:01.330 in order to have the your emulator up and running. 08:01.330 --> 08:08.320 So the first SDK platforms is basically you pick a operating system for the Android that you would like 08:08.320 --> 08:09.430 to develop on. 08:09.430 --> 08:15.070 At the moment I have three versions, so I have Android eight, eight, one and nine here. 08:15.070 --> 08:21.370 And once you have that installed, you will be able to create an emulator with that version of Android 08:21.370 --> 08:22.510 on the device. 08:22.540 --> 08:29.860 As you can see here, you can go as far as the Android 2.1, but usually you want to pick something 08:29.860 --> 08:32.440 from the from the newest here. 08:32.440 --> 08:38.200 So basically we have the SDK platform and you need to have at least one of those installed. 08:38.200 --> 08:44.980 So the second thing is the SDK tools and you will need to also have few things installed here. 08:44.980 --> 08:50.920 So we'll you will need to have Android SDK build tools and then you have emulator SDK, platform tools, 08:50.920 --> 08:55.750 SDK tools and then you accelerator for this one. 08:55.750 --> 09:02.080 So that's what I have Sometimes you need to depend on depending on your operating system, you might 09:02.080 --> 09:05.540 have other things installed, but that's like a bare minimum. 09:05.560 --> 09:10.900 What you will need to have in order to have the emulator up and running. 09:10.900 --> 09:16.300 And then you have SDK update sites and then you can also have some updates here. 09:16.300 --> 09:19.840 So once that's a lot of gigabytes to install. 09:19.840 --> 09:23.560 So it might take a while to download that and install. 09:23.560 --> 09:29.560 So the first thing you will after you install the Android studio, you need to make sure that Android 09:29.560 --> 09:35.950 SDK, you at least have one operating system, Android operating system, and you have all that packages 09:35.950 --> 09:37.090 here installed. 09:37.090 --> 09:39.370 So I have that installed so I can. 09:39.440 --> 09:40.130 Close it. 09:40.130 --> 09:46.580 But another very important tool that it is available on Android studio is if you go to the tools, you 09:46.580 --> 09:51.590 have a manager and that's a manager or virtual devices. 09:51.620 --> 09:54.590 Virtual device is basically our emulator. 09:54.590 --> 10:02.540 So what I have here is I have one emulator and that's emulator of the phone, a Nexus five X, and actually 10:02.540 --> 10:08.750 I own this phone, exactly the same phone in the physical device. 10:08.750 --> 10:14.720 So I just wanted to kind of mimic the same device on on the screen. 10:14.720 --> 10:17.990 So what you can do is you can create a virtual device here. 10:17.990 --> 10:23.720 You can pick if that's a phone or maybe a tablet, and then you have a lot of options here. 10:23.720 --> 10:28.820 Once you pick the model you would like to have, then you will have other options. 10:28.820 --> 10:34.670 And this option will actually you can pick what version of Android you would like to have it and so 10:34.670 --> 10:35.060 on. 10:35.060 --> 10:41.660 Once you will have everything set up here, you will have a list of available devices here and you can 10:41.660 --> 10:44.120 actually run a device here. 10:45.430 --> 10:52.270 And you can see here, my device is start to loading and this is the device here. 10:52.270 --> 11:00.580 So once I have this device actually available for me, what I can do is I can go here and I can go back 11:00.580 --> 11:06.510 here and you can see here run on Android device emulator and I can click it here. 11:06.520 --> 11:12.310 So opening an Android device, we actually have that emulator here. 11:12.970 --> 11:18.550 And you can see here, in the same way as we've done it with simulator on iOS, this is now building 11:18.550 --> 11:19.570 an Android. 11:20.380 --> 11:26.920 Okay, Your application is running here on the emulator and this is on the Android. 11:27.340 --> 11:33.880 So we have emulator on Android and you can also create a new virtual devices to test it on. 11:33.880 --> 11:35.890 Then we have another simulator here. 11:35.890 --> 11:40.900 So you can see here I have that on two devices and you can see that devices here. 11:40.900 --> 11:44.110 And so basically it is listed there. 11:44.210 --> 11:47.000 And the third option will be that QR code. 11:47.000 --> 11:50.540 I have another device testing device next to me. 11:50.540 --> 11:52.370 So I have an expo here. 11:52.370 --> 11:58.610 If I will do QR, scan a QR code here and I will scan whatever you see on the screen now. 12:00.420 --> 12:01.750 I already scan it here. 12:01.750 --> 12:06.280 And you can see here it's starting to build another platform for me. 12:06.280 --> 12:11.440 And then you will be able to see here, that's one of the phone I have with me now. 12:11.440 --> 12:17.080 So I have this running here I have on Android and I have on iPhone. 12:17.080 --> 12:21.940 So that will be the virtual devices I have on my computer and that physical devices. 12:21.940 --> 12:29.200 And if you will take a look here, you can actually have three devices, one physical device and two 12:29.200 --> 12:29.960 virtual device. 12:29.960 --> 12:35.260 So on the screen, running up and running on the same application. 12:35.260 --> 12:43.180 So if I will do changes on any in my code in in the file, it will be reflected in there. 12:43.180 --> 12:46.510 So what I will do is I will Visual Studio code here. 12:49.280 --> 12:50.270 Movie mobile. 12:51.200 --> 12:54.590 And I will come back to the files here in a second. 12:54.590 --> 12:55.310 So. 12:57.700 --> 13:00.430 I will do a quickly change here. 13:02.880 --> 13:05.640 Moving up, I will save it. 13:05.640 --> 13:08.340 And you can see both of them are updating. 13:08.340 --> 13:15.420 So I have that available on the simulator here I have on Android and also I have it on my physical device. 13:15.420 --> 13:19.080 So at the moment I have three applications running in the same time. 13:19.080 --> 13:24.330 If I do a change and save it, it will be automatically refreshed and it's ready to go. 13:24.330 --> 13:27.540 So at this point we know how to run it. 13:27.540 --> 13:37.620 And if you will have any problem setting up any of this, I will go here and go with the dependencies 13:37.830 --> 13:41.760 they are asking you to actually install. 13:41.760 --> 13:48.060 And as I said, the best way to go will be the Xcode and Android studio and you should be good. 13:48.060 --> 13:49.530 Good to go with that. 13:49.530 --> 13:52.410 But I have to say it's not very straightforward. 13:52.410 --> 13:58.410 I had a lot of different issues and I won't be able to help you because the setup on your computer might 13:58.410 --> 13:59.430 be completely different. 13:59.430 --> 14:00.930 What I have here. 14:00.930 --> 14:01.570 So. 14:01.570 --> 14:03.970 So just Google is your friend. 14:04.000 --> 14:10.870 Try to find the answer there because it's not very easy to set up the first time. 14:10.870 --> 14:19.390 But once you will have it done, then you can use it with a very easy way having that display. 14:19.390 --> 14:28.030 So from now on I will have only one device open and then we'll start seeing what's actually in the React 14:28.030 --> 14:29.380 Native project.