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.