Gaia 开发快速入门

文本正在翻译中!我们很缺人手,所以翻译进度有点慢,赶紧加入进来一起翻译吧!

本指南提供了关于Gaia apps调试和开发的快速入门步骤,内容包括在桌面版Firefox中运行Gaia和Firefox OS App Manager中运行Gaia。 在阅读指南之前,您需要具备如下条件: 了解HTML5技术,熟悉MVC设计模式并且对Firefox OS 有着强烈的兴趣。在学习完成本指南后,您能够掌握如下知识: Gaia app的基本架构,修改Gaia apps的基本工作流程以及如何对apps进行测试。

您需要什么?

有两种方式对Gaia/B2G的开发环境进行配置,分别是配置本地的环境或者使用 FoxBox 编译环境. 下面就让我们分别通过这两种方式来运行Gaia吧!

配置本地环境

  1. 首先,您要完成对Git的安装.如果您更喜欢在可视化环境下工作,可以考虑安装下Github客户端 (GitHub for Mac / GitHub for Windows).Git可以更新代码,对更改进行提示以及观察其他开发者的工作,因此十分有必要来熟练掌握它。
  2. 然后就是在本地机器上要获得一份Moziila Gaia的仓库: https://github.com/mozilla-b2g/gaia. 最好的方式就是fork这份仓库,并且通过使用命令git clone https://github.com/<your github name>/gaia.git.将您fork的仓库clone到本机的电脑上。由于仓库相当大,大约在700M左右,可能需要花费一些时间。
  3. 完成上面的步骤,您就可以在终端中进入仓库 (cd gaia) 并且运行 DEBUG=1 make 命令编译以及配置调试模式下的Gaia仓库。命令运行中会下载 XULRunner -- 我们可以使用它对Mozilla运行时的包进行安装,更新和卸载,还可以使用它执行所需的编译步骤。
    Note:如果您想要了解更多,可参考Gaia Make options
  4. 在完成工作区的配置后, 就需要来安装Firefox Nightly 版本
  5. 在Nightly版本中, 可以选择是使用火狐仿真器扩展插件还是App Manager插件,这主要取决于您到底喜欢哪种工作流程.如果身边没有可用的物理设备,但选择使用APP Manager的方式,虽然 The App Manager 扩展插件已经预安装在nightly 版本中,但是您仍然需要安装 Firefox OS simulator
  6. 安装 ADB helper 来调试手机等远程设备。
  7. 您可能想要获得一部 Firefox OS 手机. 在手机上可以获取到诸如应用程序的启动事件,帧速率等各种使用信息。同样,一旦能够在设备上运行真实的操作系统,您也可以轻松的对所有支持的设备APIs进行测试。

配置FoxBox虚拟环境

FoxBox是指包含在VM(虚拟机)中的Firefox OS编译环境,由 Vagrant 和 VirtualBox提供。它有许多优点,最主要的就是在可以为您完成大量的配置工作,从而使您能够专心的进行开发工作。要了解它的完整的内容,可以阅读  FoxBox GitHub repo README.

现在您已经完成了基本工作区的配置,让我们下面一起向应用进发吧!

Firefox OS  原生应用

Gaia 源码中提供的原生的HTML5应用如下所示:

  • Bluetooth
  • Browser
  • Calendar
  • Camera
  • Clock
  • Contacts
  • Cost Control
  • Dialer
  • FL
  • FM
  • Gallery
  • Homescreen
  • Keyboard
  • Music
  • PDF.js
  • Ringtones
  • Search
  • Setringtone
  • Settings
  • SMS
  • System
  • Video
  • Wallpaper
  • WAPPush

当手机开机时,第一个启动的应用是系统应用(System app)。该应用主要是负责打开和管理主屏幕。在主屏幕界面则可以启动其他的应用以执行以执行各种功能。例如,当用户点击手机图标时,则会从主屏幕启动拨号盘应用 。当用户在拨号时想要查看联系人列表时,又可以启动联系人应用。

一起来探索下一些应用的结构

原生应用都存放在 gaia/apps/ 文件夹下. 每个 Gaia 应用的文件夹下都包含下面的组件:

  • manifest.webapp文件: 存放关于应用的元数据。
  • style文件夹: 存放CSS文件。
  • js 文件夹: 存放 JavaScript 文件。
  • locales 文件夹:  存放翻译成不同语言的字符串
  •  一个HTML 文件: 通常是 (但不限于) index.html.

有一些应用还可能有下面的组件:

  • elements文件夹: 存放其他视图的HTML文件
  • test 文件夹: 运行关于应用的测试代码。
  • resources 文件夹:存放诸如电影,声音等其他的资源.
  • build 文件夹.

重要: 除了上面列举的文件外,还可能会存在一些额外的文件,比如LazyLoaders以及定制的模板引擎和其他一些关于应用的优化。你也可能会注意到,在不同的应用或者 .js 文件中使用的模式也不尽相同。 记住,这是一个开源的app/OS, 它是由很多人编码而成的,因此这些应用也是使用不同的模式和编程风格而完成的。

注意:本节是对Gaia应用总体布局的介绍。您自己在创建web应用时,当前必须要创建的文件只有  manifest.webapp文件;其他的文件都是可选的。

我相信,如果您有关于web开发的经验,就会尽其所能的对一些app进行修改,从而使它们不断得到完善。

我们一起来启动一些应用吧

在对这些应用进行修改后,如果想立刻看到修改后带来的变化,可以通过下面的几种方式来实现:在  Firefox Nightly中运行,将应用推送到物理设备端,或者通过Firefox OS 应用管理器(可以在模拟器上或者真实设备上)运行。

运行在Firefox Nightly中

要在Firefox Nightly中运行Gaia以及查看应用 , 需要使用下面的结构来运行命令:

/path/to/firefoxnightly -profile /path/to/B2G/gaia/profile-debug -no-remote

例如在Mac OS X中,可以运行下面的命令:

/Applications/FirefoxNightly.app/Contents/MacOS/firefox -profile /Users/bob/git/gaia/profile-debug -no-remote

Note: -no-remote 是用来阻止使用已存在的Firefox实例,从而创建一个新的Firfox应用来运行定制的Gaia配置文件。 profile-debug 是指运行Gaia调试模式下的配置文件,该文件是使用之前步骤中的 DEBUG=1  make command 命令生成。

在启动时会耗费一些时间,但是最终Gaia实例以及许多控制选项会在一个新的浏览器窗口中运行。

A UI screen showing the Gaia user interface running in Firefox nightly: a phone screen and number of tool bar controls.

另外如果您只想在浏览器中运行一个应用,一个更加快速的方法就是在浏览器中通过file://URL的格式简单的输入应用的根HTML文件(例如在浏览器中打开index.html)。然后可以使用 Responsive Design View 工具观察在小屏幕分辨率的效果. 如果想要做一些快速UI开发/调试的工作,这是一个非常有用的方法,而且在实例装载方面也有许多优势。此时,火狐开发者工具也是十分有用的,例如测试CSS调整的效果。

注意: 由于该方法并不能对硬件设备进行访问,因此有许多功能都无法工作,再加上你无法看到app启动的过程,在主屏幕看到图标等弊端,比较而言,运行在物理设备上还是最好的办法,这在下面章节中有介绍。

运行在物理设备上

要将更改后的Gaia推送到物理Firefox OS 设备,您需要:

  1. 已完成对 adb 的安装或者安装了前面描述的l ADB helper .
  2. 在终端中输入adb devices命令来检查您的手机是否和电脑通过 adb 命令建立了成功的连接。
  3. 在Gaia目录下输入make reset-gaia 命令从而通adb推送到手机

这种方式会耗费些时间,如果使用App manager则会更快一些。

在 App Manager中运行

只要您的Firefox 版本在1.2以上,就可以在App Manager中运行更改后的app,在下节会对该部分内容进行介绍。

使用 App Manager来调试

在完成对应用的更改后(或者创建新的应用 ),就可以在App Manager来调试它们。

在调试之前,需要具备下面的条件: App Manager和设备之间能够正常通信,如果没有物理设备可以使用 Firefox OS 仿真器。这些条件在使用App Manager 有详细阐述。

下面就是选择想要调试的应用了 — 在 App Manager中添加包应用控制,并选择要调试的应用的文件夹。首次操作应用时,需要点击“Start”按钮将应用安装在 设备端/模拟器端并启动它。之后就可以点击“Update”按钮将更新推送到设备/模拟器端,而且使用Mozilla的开发工具在设备端对应用直接调试。

例如,下面就是在App Manager中运行 Contacts 应用的图示。

A card showing details of the Gaia contacts app: a simple contacts application.

同时也可以去尝试下调试的一些功能,例如,运行一些终端命令或者对更改CSS特性。

A screenshot of the Mozilla App Manager

为项目贡献代码

只要您对自己在Gaia仓库中的更改感到满意,就可以向GitHub上的代码库提交pull请求。如果您不知道怎么做,可以去参考GitHub 帮助页面的 Using Pull Requests

实际上,您的pull请求如果没有经过Gaia开发团队的讨论和认可是不会被接受的。 您可以在 dev-gaia@lists.mozilla.org 邮件列表, 或者是在 Mozilla IRC.的 #gaia IRC 通道与Gaia 开发团队进行联系。

另外一个课程就是如何在Mozilla Bugzilla 系统中提交Bug。在提交Bug时,要使用  Firefox OS project bug form (选择 Gai或者一个合适的子集作为component). 但在提交Bug前,首先要在Bugzilla 中搜寻下问题是否已经被其他人提过。 如果没有,就需要考虑下面两点:

  • 如果您的bug所指的是一个明显的错误— 也就是说是一个真正意义上的bug — 那接下来就直接填写就可以了.
  • 如果您的bug是请求实现的一个新功能,那最好先在邮件列表/IRC中讨论后再决定。

注意:如果您不知道到底该怎么提bug,就是想要寻找一些相关的bug进行处理, 可以寻求 Josh Matthews' Bugs Ahoy 应用来帮忙。

常见问题

下面的内容是对在桌面上使用Gaia调试应用的一些常见问题的答案。

Note: 多参考 Hacking gaia 中关于可以设置的make选项对调试Gaia是非常有帮助的。

我能够在火狐桌面版浏览器中对高分辨率的设备进行仿真吗?

必须的!

  1. 首先可以运行下面命令来确保在qHD和WVGA设备上图片是不失真的
    GAIA_DEV_PIXELS_PER_PX=1.5 DEBUG=1 make
  2. 然后,在火狐中打开 about:config页面,通过将layout.css.devPixelsPerPx 标志位变为1.5来更改浏览器的密度。
  3. 最后,可以使用 Responsive Design View 变为320 x 533 px (这种设置与设备上 CSS  480 x 800 像素的效果是等价的 .)

文档标签和贡献者

 最后编辑者: chrisdavidmills,