JSFiddle 即可撰寫 Firefox OS Apps 的雛形

隨著 Fiddle 的輕鬆節拍起舞

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

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

 

輕鬆建構 Firefox OS Apps:摘要

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

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

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

 

輕鬆建構 Firefox OS Apps:細節

隨手撰寫程式碼

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

HTML:

CSS:

JavaScript:

則 Fiddle 應該顯示如下:

hello-world-fiddle-small

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

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

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

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

在模擬器中安裝 Apps

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

fiddle-url-large

在輸入完整的 URL 之後,模擬器隨即啟動你的 Apps。

hello-world-alert-large

這裡可以看到,在我們關閉 alert() 之後,就能看到預期中的 (本範例為基本的 HTML 頁面) 單一紅色 h1 標籤。

hello-world-dismissed-large

從 Firefox OS 裝置安裝 Apps

不論是 Firefox OS 裝置或模擬器上的瀏覽器,可於 Fiddle URL 後方加上「/fxos.html」並瀏覽之。同樣以我的 Demo 為例就會是:http://jsfiddle.net/afabbro/vrVAP/fxos.html

點選「Install」,就能在自己的主畫面上找到該 App。

 

小缺點

上述均是 JSFiddle 工具的新用法。我們會持續修改錯誤並提供更多功能。撰寫本篇文章時仍有下列小問題:

  1. 模擬器一次僅限安裝 1 組 JSFiddle App
  2. 尚未支援離線功能

 

感謝

本篇 JSFiddle 文章要獻給 Piotr Zalewa。他本人目前正開發可支援 Firefox OS 的 PhoneGap 版本。如果你有任何寶貴意見,請立刻讓我們知道;如果你已有某些酷炫東西而苦無炫耀的對象,也非常歡迎提供 Fiddle 的 manifest 檔案給我們。

 

原文鏈結:https://hacks.mozilla.org/2013/08/using-jsfiddle-to-prototype-firefox-os-apps/

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *