 Hello there! In this screencast, we're going to look at how you can develop applications for Gaia. Gaia is the HTML5 front-end that powers Firefox OS, which is Mozilla's operating system for mobile devices. Sometimes referred to as Boot2Gecko or B2G, Firefox is comprised of three high-level components, Gunk, Gecko, and Gaia. Today, we'll be focusing on Gaia. Before we get started, I want to make a minor caveat. It's that Gaia is under heavy development, so these processes may change in the future. If you yourself are in the future, maybe living in some sort of Jetson home way out in the sky, just be aware that what I'm documenting here today may be different than what's actually true in your time. The best thing that you can do is check out Mozilla's Wiki for this information. It's at wiki.mozilla.org slash Gaia. This and other links will be in the screencast notes, but Mozilla's documentation will have the latest information that's more likely to be correct in your crazy future world. Even in that case, I hope this screencast will be useful for people that are interested in Gaia and want to know what it looks like to develop applications for Gaia. This is what Gaia looks like running on my machine, which is Ubuntu Linux. It's running in Ubuntu Gecko desktop, so it's running in this window that's emulating a phone. I can move around, look at different applications, open up SMS if I wanted to. I can turn the phone off and turn it back on. You'll see that there's a lock screen, so I have to click this and lock it. If we want to make a change to this, it really is just HTML, JavaScript and CSS. I can show you that by making a quick change here. This is all hosted in my Gaia directory. We'll look at the applications. What we'll change is the home screen, I think. Look at the JavaScript and landing. You can see here that we're getting clock element numbers. Later on in the file, we're updating the UI periodically to have the latest time. This is too complicated, I like to keep it simple. We'll just say it's mic time, and we don't have to update that because it's always mic time. We'll change the meridian just to be something excited because it's mic time. From here, we'll restart Gaia, loading it up. You can see that it's now mic time. That was really simple, and for web developers, really familiar. Great. If that convinces you, you'll want to actually get this running locally on your machine, and that's what I'll go into now. Let's close out of this. The first thing you'll need is the latest Boutiqueco desktop binaries. Again, sourcing from that wiki, we will look at Gaia hacking and BTG desktop. You can see here there's a link to the Aurora builds. These are updated semi-frequently, and you'll want to get the build for your system and unpack that archive. From there, you'll want to get the latest version of Gaia from GitHub. Here it is here. You'll copy the Git URL, and just do git clone like that. I've already done that, and now I have Gaia in here. Next up, we're going to actually make Gaia. I'm going to change into the Gaia directory. If you don't have make installed, you can check which make first. If that comes up empty, and you're on a Debian system, it's easy as doing sudo apt-get install build essential. I already have installed, so I'm not going to go through with that. Next up, you'll want to modify your host file. I got this from the wiki, but you'll just want to grab from the wiki this information about redirecting these IPs. That's about all for setup. You'll just want to make it. You're going to set an environment variable for debug, and then do debug make. For you, this will be a little bit faster. I'm sorry, a little bit slower, because you'll have to fetch a few more dependencies, but it won't be too bad. Finally, we're ready to go. The way that you're going to invocate it is B2G, B2G bin, and it accepts you'll pass it one flag, and that's profile. Here, we're going to pass it the path to our profile in Gaia. That's Gaia slash profile. That profile directory was created when we ran the make command. You'll notice as well that I'm specifying print working directory so that the path expands to the full directory. Currently, B2G bin expects an absolute path, so that's why that's kind of necessary. We're starting up, and here we are. Now, Gaia's behaving as though we just bought this phone, and that's because we just built the profile again fresh. We'll step through this kind of introductory things, welcome to your phone, tell us about your network capabilities and that stuff, and we'll skip all this, and here you are, back at the home screen. So not bad. Now, you have the hardware buttons on the device you don't have in B2G desktop, but they're simulated with the keyboard. For instance, if you're in an application and you want to jump back home, just press the home button, and if you want to simulate pressing the power button, you can press the N key, so that's going to shut off the screen. I can press it again, and now I'm back here, and I can unlock it. If I hold down the power button, the N button, it says if I held down the power button on the phone. From here, if you're interested and you have a compatible device, you can flash B2G Echo onto your device and develop from there. That will require that you actually build B2G Echo yourself, and all that is covered inside of the Mozilla documentation, but it's a bit outside the scope of this screencast. So I'm going to brush past that and talk about kind of another way to run Gaia, which is from Firefox nightly. So this is really neat. What we can do is we can use Firefox nightly to run our Gaia applications. So the first thing I'm going to do is make sure I have the latest. First, throwing a CD into Gaia. Okay, so I just got some code, so I'm going to debug equals one, make. And now the invocation for this is going to be very similar, except instead of using B2G desktop, we're going to use Firefox nightly. And here we're going to pass the profile just as we did with B2G desktop. The last part of this is that we're going to run an application directly. And so because Firefox is loading this custom profile, it's going to redirect requests to certain URLs to those applications that are running from the Gaia repository. So for instance, if we want to run SMS, we'll just type SMS GaiaMobile.org, port 8080. So Firefox is starting up here. Oh, this is running out of... So it gets a little tricky when you're running multiple instances of Firefox. Let me shut that down and rerun it. Okay. Too big, too big. Make it a little smaller. Okay. But you can see here we're running the SMS application from within Firefox nightly. So this is really neat. What this gets you is this gets you the debugging tools directly in the context. So you can see that we have the web console all squished together. It's a little cramped, sorry about that. But we can also inspect the DOM in a way that you're used to from developing normal web pages with Firefox. So it's really cool and a really powerful way to inspect your application and to debug them. And so at this point, if you're interested in making your own custom apps for Gaia, then you're good to go. But if you're interested in contributing back to Mozilla and really who isn't, then what you'll want to do is maybe fix some bugs or add some features to the Gaia base applications, the ones that it ships with. So we kind of got a glimpse of that earlier. But if you look in the apps directory, you'll see there's just different directories for all these applications. So you can feel free to learn from the source code there and maybe you'll find a way that you can improve them or fix a bug. But when you do that, an important thing to do as well is to run Gaia's unit tests to make sure that you haven't broken other code written by other developers that they expect to work. Now doing this is actually pretty simple. Again, I'm getting this information from the wiki, but what you'll do is use a new make target, which is test agent server. Now, this is going to actually spawn a server with Node. If you don't have Node.js installed, then go to Node.js.org and install that first. But we're going to use the ampersand to background that process. I think. Oh, excuse me, I'm already running one in the background. So we'll kill that. Run it again. Okay, so we're running the server now. Cool. And what we'll do next is run Firefox Nightly. Except this time, instead of running the SMS application, we're going to run the test agent application. So this is, this application isn't really intended to be run from the phone, but it's here to facilitate running the tests. So you see all the unit tests for Gaia are listed out here. And we'll use one last make target in the separate terminal to initiate those. It's going to be make test agent test. Oh, it would help if I were in the guide directory wouldn't it? Okay, make test agent test. And they're off. So it's fetching resources and running those tests sequentially. And this takes a little bit of time, but it's an important step to take before you submit a patch to make sure, like I said, you haven't caused any regressions or anything like that. So is that about does it for this screencast? I hope this has been helpful for you to see what it looks like to get involved with Gaia, and maybe you have some good ideas for how you can make it even better. So have fun.