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.