Your first app

Note: 快速入門這段章節已經取代先前舊的快速入門章節，更新為最新的及更專注於Firefox OS app essentials 文章。我們希望你將發現這份是比舊文更有用和更快學習經驗的文章。

開放式Web應用讓開發人員實現了期盼多年的夙願：通過Firefox OS這一首款開放式Web應用平台，可以僅僅使用HTML、CSS和JavaScript在跨平台的環境中生成可部署的應用。本手冊包含了基本的架構和應用構建指南，你能夠迅速掌握這些內容並開始創造自己的下一個偉大的應用！

如果你想按照本指南開發，你可以下載我們的quick start app template. 或可以藉由參閱我們的Apps template 指南，找到更多有關的內容。

App 結構

打包型 Apps VS. 托管型 Apps

開放網絡應用有兩種類型：打包型和托管型。打包型apps本質上來說就是一個包含各種HTML、CSS、JavaScript、圖像、表單等應用資源的zip文件。托管型apps在一個給定域名的服務器上運行，就像是一個獨立的網站。兩種應用都需要有有效的表單。到了要在火狐市場中列出你的app，你要上傳app zip文件或提供托管app所在的URL。

用Treehouse為製作夥伴: Check them out!

本指南的目的，會讓你將創建一個於本機（localhost）地址上的托管型app。一旦你的app準備好進入火狐市場，你可以選擇把它作為打包app或作為托管app啓動。

App 表單

每一個火狐app都需要一個位於根目錄下的manifest.webapp文件，這個manifest.webapp 文件提供app有關的重要信息，如：版本、名稱、描述、圖標位址、本地字符串、指明app可以從哪兒被安裝等等。只有名稱和描述是必須的。app模板中的簡單表單如下所示：

{
  "version": "0.1",
  "name": "Open Web App",
  "description": "Your new awesome Open Web App",
  "launch_path": "/app-template/index.html",
  "icons": {
    "16": "/app-template/app-icons/icon-16.png",
    "48": "/app-template/app-icons/icon-48.png",
    "128": "/app-template/app-icons/icon-128.png"
  },
  "developer": {
    "name": "Your Name",
    "url": "https://yourawesomeapp.com"
  },
  "locales": {
    "es": {
      "description": "Su nueva aplicación impresionante Open Web",
      "developer": {
        "url": "https://yourawesomeapp.com"
      }
    },
    "it": {
      "description": "La tua nuova fantastica Open Web App",
      "developer": {
        "url": "https://yourawesomeapp.com"
      }
    }
  },
  "default_locale": "en"
}

Made in partnership with Treehouse: Check them out!

一個基本的表單是你所需要最先上手的地方。關於表單的更多細節，見App Manifest.

App 佈局 & 設計

隨著不同設備上屏幕解析度標準的增多，響應式設計已經變得越來越重要。即使你app的主要目標平台是移動平台比如Firefox OS，其他設備很有可能也會訪問它。CSS media queries 使你可以根據設備調整佈局，如下的CSS樣例中所示的結構：

/* The following are examples of different CSS media queries */

/* Basic desktop/screen width sniff */
@media only screen and (min-width : 1224px) {
  /* styles */
}

/* Traditional iPhone width */
@media
  only screen and (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (min-device-pixel-ratio : 1.5) {
  /* styles */
}

/* Device settings at different orientations */
@media screen and (orientation:portrait) {
  /* styles */
}
@media screen and (orientation:landscape) {
  /* styles */
}

有許多JavaScript和CSS的框架可以用於協助響應式設計和移動app發展（Bootstrap等），選擇最適合你的app和開發樣式的框架即可。

Web APIs

JavaScript APIs正隨著設備快速開發，同時地被創造和增強。Mozilla的WebAPI 致力於為JavaScript APIs引入成打的標準移動端特性。設備支援和狀況列表可以在WebAPI 頁面中查看。在下面這個例子中，JavaScript 特徵偵測仍然是最好的例子：

// If this device supports the vibrate API...
if('vibrate' in navigator) {
    // ... vibrate for a second
    navigator.vibrate(1000);
}

在下面這個例子中，<div>的顯示樣式會根據設備的電池狀態的改變而改變：

// Create the battery indicator listeners
(function() {
  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
      indicator, indicatorPercentage;

  if(battery) {
    indicator = document.getElementById('indicator'),
    indicatorPercentage = document.getElementById('indicator-percentage');

    // Set listeners for changes
    battery.addEventListener('chargingchange', updateBattery);
    battery.addEventListener('levelchange', updateBattery);

    // Update immediately
    updateBattery();
  }

  function updateBattery() {
    // Update percentage width and text
    var level = (battery.level * 100) + '%';
    indicatorPercentage.style.width = level;
    indicatorPercentage.innerHTML = 'Battery: ' + level;
    // Update charging status
    indicator.className = battery.charging ? 'charging' : '';
  }
})();

在上面的示例代碼中，一旦你確定設備支持Battery API，你就可以為chargingchange 和 levelchange添加 event listeners 來更新元素的樣式。試試添加下面的指令到快速入門模板，你會看到你的工作效果。

時常檢查WebAPI 頁面以確保更新設備API的狀態。

Install API 功能

在我們的快速入門應用模板範例中，我們已經實現了一個安裝按鈕，可以在你把應用當作一個標準網頁來瀏覽時可以單擊它來把那個網站當作一個應用安裝在Firefox OS上。按鈕標籤並沒有什麼特別的：

<button id="install-btn">Install app</button>

按鈕的功能由Install API實現（見install.js）：

var manifest_url = location.href + 'manifest.webapp';

function install(ev) {
  ev.preventDefault();
  // define the manifest URL
  // install the app
  var installLocFind = navigator.mozApps.install(manifest_url);
  installLocFind.onsuccess = function(data) {
    // App is installed, do something
  };
  installLocFind.onerror = function() {
    // App wasn't installed, info is in
    // installapp.error.name
    alert(installLocFind.error.name);
  };
};

// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button.
var button = document.getElementById('install-btn');

var installCheck = navigator.mozApps.checkInstalled(manifest_url);

installCheck.onsuccess = function() {
  if(installCheck.result) {
    button.style.display = "none";
  } else {
    button.addEventListener('click', install, false);
  };
};

我們來簡要的看一下發生了什麼：

1. 我們得到一個安裝按鈕的引用並把它儲存在button變量中。
2. 我們使用navigator.mozApps.checkInstalled 來檢查這個由https://people.mozilla.com /~cmills/location-finder/manifest.webapp 這個表單來定義的應用是否已經安裝在設備上。這個測試結果被儲存在installCheck這個變量中。
3. 當測試被成功完成時，它的成功會完成事件被觸發，因此installCheck.onsuccess = function() { ... }會被執行。
4. 然後我們用一個if語句判斷installCheck.result是否存在？如果存在，以為著app已經被安裝了，我們就隱藏安裝按鈕。在應用已經被安裝的情況下不需要安裝按鈕。
5. 如果app沒有被安裝，為按鈕添加一個單擊事件監聽器。所以在按鈕被單擊的時候，install()函數會被執行。
6. 當單擊按鈕並且install()函數執行時，我們把表單檔案位置保存在一個叫manifest_url的變量中，然後利用navigator.mozApps.install(manifest_url)來安裝app，用一個installLocFind變量來儲存對那個安裝的app參考資訊。你會注意到安裝也會觸發success和error事件，所以你可以根據應用是否成功安裝來執行不同的動作。

第一次遇到可安裝web apps時，你可能想要覈實implementation state of the API 的執行狀態。

注意：可安裝開放web apps有一個「每個來源（origin，感覺就是URL的意思）就是一個app」的安全策略；基本上，你不可以在一個來源上托管多個可安裝apps。這會讓檢測變得有一點複雜，但是仍有很多辦法解決這個問題，比如為應用創建多個子域名、用Firefox OS模擬器測試應用、或者在Firefox Aurora/Nightly上安裝測試功能，通過這種方式你可以在桌面環境上安裝開發web app。關於來源的跟多信息詳見FAQs about apps manifests。

WebRT APIs (基於權限的 APIs)

有些WebAPI雖然可以使用但是需要特定的功能開啓才具有使用的權限。應用可能會像下面這樣在manifest.webapp中記錄權限請求：

// New key in the manifest: "permissions"
// Request access to any number of APIs
// Here we request permissions to the systemXHR API
"permissions": {
    "systemXHR": {}
}

權限分為下面三個等級:

一般權限——不需要任何特定訪問權限的API。
特殊權限——只要開發者在app表單文件中設置了訪問權限就可以在應用中利用並通過可信任來源進行分發的API。
認證權限——控制力設備上關鍵功能的API，比如打電話和發短信的服務。這些一般不允許第三方開發者使用。

關於應用權限等級的更多信息，請閱讀Types of packaged apps。你可以在應用權限中找到更多關於API要求權限和需要什麼樣的App permissions.。

有一點需要注意的很重要就是不是所有的Web API都可以在Firefox OS模擬器中執行。

工具 & 測試

測試在對移動應用的支持中是至關重要的。測試可安裝的開放web app有多種方式。

WebIDE 和 Firefox OS 模擬器

安裝和使用Firefox OS模擬器是啓動和運行你的應用最簡單的方式。在你安裝模擬器之後，可以通過工具->web開發者->Firefox OS模擬器菜單來啓動。模擬器啓動時會有一個Javascript控制台，這樣你就可以在模擬器中調試你的應用。

測試工具的新寵兒被稱為app管理器WebIDE。這個工具允許你通過USB鏈接桌面火狐瀏覽器和一個可兼容性設備（或者一個Firefox OS模擬器），直接將app推送到設備上，驗證app並且像運行在設備上一樣的調試。

單元測試

當在測試不同設備和版本時，單元測試就會非常有價值。jQuery的QUnit 是一個流行的客戶端測試工具，當然你也可以使用任何你喜歡的測試工具。

在設備上安裝Firefox OS

既然Firefox OS是一個開源平台，代碼和工具都可以用於在你自己的設備上構建和安裝Firefox OS。構建和安裝指南以及什麼設備可以安裝的注意事項可以在MDN上發現。

特定的Firefox OS開發者預覽版設備可以在Developer preview phone page找到更多信息。
應用。

App 提交和分發

一旦你的app完成，你可以像標準網站或app一樣托管它（更多信息請閱讀Self-publishing apps ），或者可以submitted到Firefox Marketplace。你的app表單將被驗證並且你可以選擇你的應用將支持的設備（比如：Firefox OS、桌面版火狐瀏覽器、移動版火狐瀏覽器、平板火狐瀏覽器）。一旦驗證通過，你可以為你的app添加更多細節（截屏、描述、價格等）並且正式在火狐市場中提交app列表。提交成功後，你的應用可以被任何人購買和安裝。