WEBVTT 1 00:00:00.000 --> 00:00:02.390 [♪ Music ♪] [Treehouse presents] 2 00:00:02.390 --> 00:00:04.320 [Quick Tips] [The Firefox OS Simulator with Jim Hoskins] 3 00:00:04.320 --> 00:00:06.250 [In association with Mozilla] 4 00:00:06.250 --> 00:00:09.080 Because web apps use web technology, much of the development 5 00:00:09.080 --> 00:00:11.440 can be done in a normal web browser. 6 00:00:11.440 --> 00:00:13.740 Eventually, you'll want to test on a physical device, 7 00:00:13.740 --> 00:00:17.270 but in development, a simulator can be a great tool. 8 00:00:17.270 --> 00:00:19.630 It allows you to see what your app will behave like 9 00:00:19.630 --> 00:00:23.660 on your computer without the need to load it onto a real device. 10 00:00:23.660 --> 00:00:27.850 Let's see how to get started with the Firefox OS Simulator. 11 00:00:27.850 --> 00:00:31.760 In order to test out our apps as they would appear on a Firefox OS device, 12 00:00:31.760 --> 00:00:34.860 we can use the Firefox OS Simulator, 13 00:00:34.860 --> 00:00:39.090 which can be installed as an add-on to Firefox on the desktop. 14 00:00:39.090 --> 00:00:43.580 The first thing you'll need to do is install it by simply going to the add-on page here 15 00:00:43.580 --> 00:00:45.580 and clicking "Add to Firefox." 16 00:00:45.580 --> 00:00:48.190 It will take a short while to download, but after we do that, 17 00:00:48.190 --> 00:00:50.880 we'll go through the normal steps of installing it. 18 00:00:50.880 --> 00:00:54.920 Now that the download has completed, we can click "Install now," 19 00:00:54.920 --> 00:00:57.760 and it's gone ahead and installed itself, 20 00:00:57.760 --> 00:01:01.380 and this is the Firefox OS Simulator dashboard here. 21 00:01:01.380 --> 00:01:04.360 To return to it, we can go to Web Developer 22 00:01:04.360 --> 00:01:08.110 under the Tools menu and open the Firefox OS Simulator, 23 00:01:08.110 --> 00:01:11.290 which will reopen this page in the future. 24 00:01:11.290 --> 00:01:15.370 Right now it's stopped, but all we have to do is click on this slider right here, 25 00:01:15.370 --> 00:01:19.850 and it will open up a Firefox OS device. 26 00:01:19.850 --> 00:01:24.820 We can go ahead and interact with it just like any old device. 27 00:01:24.820 --> 00:01:27.030 It comes with some demo applications, 28 00:01:27.030 --> 00:01:33.080 and we can go in there and try a few of them out. 29 00:01:33.080 --> 00:01:38.080 For instance, we can see 3D video effects are working, 30 00:01:38.080 --> 00:01:41.160 and you can try out some other things here. 31 00:01:41.160 --> 00:01:44.660 Also from this dashboard, we can do a couple of other interesting things. 32 00:01:44.660 --> 00:01:47.510 For instance, if we want the console to appear, 33 00:01:47.510 --> 00:01:50.360 we'll have to click that, and if we restart it, 34 00:01:50.360 --> 00:01:52.960 we'll now get the Firefox Error Console, 35 00:01:52.960 --> 00:01:55.550 so we can get any information about errors or messages 36 00:01:55.550 --> 00:01:58.960 right here in the console to debug our apps. 37 00:01:58.960 --> 00:02:01.440 From this page, we can also add our own apps. 38 00:02:01.440 --> 00:02:04.410 We can either add the URL to our online web apps 39 00:02:04.410 --> 00:02:09.840 by pasting in the URL of our app or the URL to our manifest.webapp, 40 00:02:09.840 --> 00:02:14.920 or if we're developing locally, we can click "Add Directory." 41 00:02:14.920 --> 00:02:17.350 I'm going to open up our offline demo, 42 00:02:17.350 --> 00:02:20.970 where I've created a manifest.webapp, which we can see right here. 43 00:02:20.970 --> 00:02:24.980 This has some simple information like our online/offline name, 44 00:02:24.980 --> 00:02:29.950 the description, our launch path, which is index.html for our app, 45 00:02:29.950 --> 00:02:33.320 as well as an icon and some information about myself. 46 00:02:33.320 --> 00:02:36.050 I haven't used any other permissions or any other advanced things, 47 00:02:36.050 --> 00:02:39.780 but this is a very simple manifest.webapp, 48 00:02:39.780 --> 00:02:43.030 and we also have our icon in the image directory 49 00:02:43.030 --> 00:02:46.920 as we specified it under the icons property. 50 00:02:46.920 --> 00:02:51.400 By simply clicking on the manifest.webapp and clicking open, 51 00:02:51.400 --> 00:02:55.620 it's added it to our dashboard and restarted our application here, 52 00:02:55.620 --> 00:02:58.090 and it's started it right up. 53 00:02:58.090 --> 00:03:00.340 We can see that it's also added it to our homepage, 54 00:03:00.340 --> 00:03:03.490 although it's all the way at the end here, and this is the icon we've used, 55 00:03:03.490 --> 00:03:07.780 so we can go ahead and use this here. 56 00:03:07.780 --> 00:03:10.200 If you have any updates, you're always free to update, 57 00:03:10.200 --> 00:03:14.380 and it will reinstall and check for any updates to the source code 58 00:03:14.380 --> 00:03:17.520 as well as you can easily remove it here. 59 00:03:17.520 --> 00:03:19.450 If you click on the Help section, there is some information 60 00:03:19.450 --> 00:03:22.120 about the keyboard keys you can use to simulate 61 00:03:22.120 --> 00:03:24.190 the hardware keys on the device, for instance, 62 00:03:24.190 --> 00:03:27.420 the home button, power button, and volume buttons. 63 00:03:27.420 --> 00:03:30.790 Anytime you want to check out how your web app looks on the Firefox OS devices, 64 00:03:30.790 --> 00:03:34.380 be sure to check out the simulator for Firefox OS.