JSFiddle 即可撰寫 Firefox OS Apps 的雛形

作者：news

2013-08-15 10:00:08

315314

隨著 Fiddle 的輕鬆節拍起舞

JSFiddle 是撰寫並檢驗程式碼雛形的絕佳工具，不需動用你現有的工具與編輯器，即可迅速進行單元測試並執行概念性的程式碼。此外，你也可貼上有問題的程式碼，讓其他人協助你檢視並找出問題根源。

除了程式碼片段之外，你更可製作 Firefox OS Apps 的雛形。我們不斷為開發者灌輸一個概念：建立Firefox OS Apps 就如同建立 Web Apps。只要在瀏覽器中以 JSFiddle 測試不同的程式碼，你就能了解Firefox OS Apps 的開發有多麼簡單。

輕鬆建構 Firefox OS Apps：摘要

要以 JSFiddle 測試 Firefox OS Apps 需經下列步驟：

在 JSFiddle 環境中，以自己熟悉的方式撰寫程式碼
於 Fiddle URL 後方加上「/webapp.manifest」，接著將此鏈結貼入 Firefox OS 模擬器 (Firefox OS Simulator)，即可安裝此 App
或同樣可於 Fiddle URL 後方加上「/fxos.html」，即取得典型 Firefox OS 托管式 (Hosted) Apps 的安裝頁面

我在這裡設定了一組 JSFiddle Demo，接著說明相關細節。

輕鬆建構 Firefox OS Apps：細節

隨手撰寫程式碼

先來試試基本的「Hello World!」吧。在你的 Fiddle 中建構下列程式碼：

HTML:

Hello world!

CSS:

h1 {
    color: #f00;
}

JavaScript:

alert(document.getElementsByTagName('h1')[0].innerHTML);

則 Fiddle 應該顯示如下：

接著於 Fiddle URL 後方加上「/manifest.webapp」。以我設計的 Demo 為例，就會是 http://jsfiddle.net/afabbro/vrVAP/manifest.webapp

將此 URL 複製到「剪貼簿」中。根據瀏覽器的不同，則不一定會複製完整的「http://」。請注意，若 URLs 並未明確指定協定，則模擬器一律不會接受。因此需自行補為完整的 URLs。模擬器將以紅色輸入對話框表示 URLs 無效。

如果從瀏覽器的位址列存取 manifest.webapp，就會自動產生 manifest 檔案的副本，以供你下載並仔細檢視。同樣以 Demo 為例，其 manifest 檔案如下：

{
  "version": "0",
  "name": "Hello World Example",
  "description": "jsFiddle example",
  "launch_path": "/afabbro/vrVAP/app.html",
  "icons": {
    "16": "/favicon.png",
    "128": "/img/jsf-circle.png"
  },
  "developer": {
    "name": "afabbro"
  },
  "installs_allowed_from": ["*"],
  "appcache_path": "http://fiddle.jshell.net/afabbro/vrVAP/cache.manifest",
  "default_locale": "en"
}

如果你之前從未寫過 Firefox OS Apps 的 manifest 檔案，則可透過此自動產生的 manifest 檔案而初步了解 Apps 基本建構資訊。

在模擬器中安裝 Apps

將 URL 貼入下圖所示的欄位中。如前述，只要 URL 有任何問題，該欄位就會顯示紅色邊框。