系列影片:Firefox OS App 開發入門

Firefox OS 這款作業系統,就是要將 Web 帶入行動裝置所設計。Firefox OS 不是以新技術或新開發環境所建構的全新 OS;而是以行之有年的標準化 Web 技術所打造而成。如果你本身就是 Web 開發者且想建構行動 App,那麼 Firefox OS 就能提供最適合的工具,且不會要求你改變自己以熟悉的工作流程,也不需再重新學習另一套開發環境。此系列短片是由 Mozilla 與 Telenor 在挪威共同錄製而成,將引領你入門 Firefox OS App 的開發作業。

你可透過本系列影片了解:

  • 該如何建構自己的第一個 Firefox OS App
  • 該如何在桌機與實際裝置上測試 App 並除錯
  • 該如何將 App 提交至 Firefox Marketplace
  • 該如何使用 API,以及 Firefox OS 針對 JavaScript 所提供的特殊介面,進而存取智慧型手機中的硬體

注意:每部短片均極為精簡扼要,讓你短暫休息時也能欣賞。一口氣看完整個系列也不會超過一個小時。

程式碼與開發環境

除了短片之外,你也能從 GitHub 下載程式碼範例。如果你想自己測試程式碼範例,就必須先設定簡易的開發環境。必備條件如下:

  • 最新版本的 Firefox (內含現成的開發工具)─ 如果你真的要把玩最新技術,那我們建議可下載 Firefox AuroraNightly 版本
  • 文字編輯器 ─ 短片中使用了 Sublime Text,但其實任何文字編輯器均可。如果你想直接在 Web 上編輯程式,則可嘗試 Adobe Brackets
  • 可供你推播自己 Demo 檔案的伺服器。某些展示用 App 需要 HTTP 連線,而不適用本地伺服器

系列影片介紹

此系列短片是由 Telenor Digital 的 Jan Jongboom (@janjongboom)Sergi Mansilla (@sergimansilla),以及 Mozilla 的 Chris Heilmann (@codepo8) 於 2014 年 2 月所錄製。地點位於挪威首都奧斯陸的 Telenor Digital 辦公室內。

這三位接下來將為大家簡短介紹系列影片:

Section 1:建構並發佈

自己的第一款 Firefox OS App

接下來 5 支短片將說明如何建構 Firefox OS App、如何在電腦和實體裝置上測試 App 並除錯、如何將 App 發佈至 Firefox Marketplace 中。這看起來好像很複雜,但其實只要你已經知道怎麼寫網站,就等於能完成 90% 的 App。

不只是網站

Firefox OS App 就是 HTML5 App;其所使用的技術本質上也與網站技術相同。你可以先寫個網站,再提供 manifest 檔案 (可參閱《App manifest》進一步了解) 即可將網站轉為 App。這個動作就等於告知 Firefox OS 你在撰寫 App,並可讓你:

HTML5 App 其實是透過網站強化其功能,也同樣遵循相同的規則,如:

  • 「Progressive enhancement」,亦即先撰寫可用的配置,再視情況套用適合的版面。
  • 因應當前的執行裝置環境。如透過 media queriesresponsive images 而最佳化 App,已配合不同的螢幕尺寸、解析度、可用網路的速度等。
  • 採用 HTMLCSSJavaScript 作為其核心技術。

若要將網頁轉為絕佳的 App,其中的差異就在於開發者就必須考量到行動裝置使用者。也代表 App 首先必須要能:

  • 離線作業
  • 在讓使用者進行某個作業之餘,也要提供可輕鬆使用的介面
  • 妥善利用有限的電池容量、處理器的速度、可用的螢幕空間而能盡情把玩 App

在大多數的情況下,開發者必須稍微讓網頁「瘦身」並簡化介面。而使用者也確實能因此獲得更好的經驗。

注意:若要進一步設計出絕佳的 HTML5 App,可參閱 MDN 上的《應用程式中心》一文。

App 的 Manifest 檔案

Firefox OS App 的 manifest 檔案 (你會在「應用程式管理員 App Manager」看到中文翻譯為「安裝資訊檔」),屬於簡易的 JSON 檔案,將告知作業系統該 App 的相關訊息;另外也可將網頁轉為 Open Web App。開發者可於 manifest 定義 App 不同語系的名稱,也可要求作業系統存取不同的服務與硬體。當然亦可定義該 App 適合的方向 (直幅或橫幅),亦能依需要而鎖定畫面。

進一步了解 manifest 檔案與相關工具:

應用程式管理員 (App Manager)

要想開始入門 Firefox OS,最簡單的方法就是使用「應用程式管理員 (App Manager)」。應用程式管理員也是桌面版 Firefox 的開發者工具之一,可在電腦上模擬 Firefox OS 裝置。開發者可盡情把玩 Firefox OS,也可像在實際裝置上安裝並測試 App。此外,你也能離線或上線編輯 App,進而體驗 App 並進行除錯,在模擬裝置中即時看到修改之後的結果。

若要進一步了解應用程式管理員:

在實體裝置上測試

在模擬器上測試 App 當然不錯,但畢竟會受限於模擬的環境。如果想測試 App 互動時的效能或畫面呈現方向,就需要實體裝置。實機同樣可搭配既有的開發者工具,以及「應用程式管理員 (App Manager)」。在實機上使用 App 時,可透過上述 2 種工具進一步了解 App 所發生的作業。而且 App 不必更新,也不必解除安裝,即可即時看到 App 的變化。

發佈至 Marketplace

Firefox Marketplace 可供開發者提交 App,並讓消費者能夠接觸到自己的作品。Marketplace 亦可發佈如 Firefox 桌面版與行動版所適用的 App。而消費者只需要簡單的幾個步驟,就能對 App 評分、提出反饋意見、購買自己所需的 App。要發佈自己的 App 真的很簡單:

  • 為 manifest 檔案 (你可能會看到中文翻譯為「安裝資訊檔」) 設定網址
  • 為 App 填寫必要敘述說明 (可讓消費者更快找到自己需要的 App)
  • 提供 App 的截圖或影片
  • 為 App 挑選適合的分類
  • 填寫自己的電子郵件,讓 Mozilla 能聯絡你
  • 如果開發者有自己的隱私權政策與支援服務網站,也應提供給消費者知道
  • 為自己的 App 設定內容分級

App 在提交到 Marketplace 之後,均會由 Mozilla 審查團隊進行審閱,並在幾天內就會通知審查結果。如果 App 有任何問題,在提交期間就會收到相關的檢驗訊息。開發者也有可能收到詳細的問題說明,並獲得修復問題的方法。

Section 2:Firefox OS 進階說明

引言

在前幾支影片中,我們談了 Firefox OS 的基礎概念、打造自己第一個 App 的步驟、在桌機與 Firefox OS 實體裝置上進行 App 除錯,最後把自己的 App 提交到 Marketplace 上。

而接下來的影片會再進一步說明 Firefox OS App 的技術;也會談談存取功能,讓開發者能妥善利用平板電腦與智慧型手機。但這些技術目前僅適用於 Firefox OS,還未能擴及其他平台。Firefox OS 內的所有程式,都是針對標準化與開放源碼的目標所設計。也就是說,我們很快就能在其他裝置或平台上看到 Firefox OS App 的蹤跡。

Web API

智慧型手機具備 GPS、相機、加速規等的多樣高階功能。但問題是 Web 技術並無法碰觸到這些功能技術。如果要存取這些功能,就必須撰寫原生應用程式。為了克服這個問題,Mozilla 與合作夥伴定義了一系列 API,可讓開發者以安全的方式,透過 JavaScript 存取行動裝置所搭載的硬體。這些開放的 API 即所謂的 Web API,同樣也提供給他人建構更多功能。Firefox OS 也是第一個使用 Web API 的平台。開發者不需另外撰寫原生的應用程式,即可存取智慧型手機上所需的功能。

若要進一步了解 Web API:

Web Activities

Web Activities 可視為 Web API 的替代方案,同樣可存取某些特定裝置的硬體。相較於 API 直接與裝置溝通,Web Activities 則是在裝置上建立所有 App 的生態系統,讓 App 彼此相互溝通。舉例來說,App 不會存取相機而是要求圖片,讓使用者可透過自己最愛用的 App 取得圖片。也就是說,App 不要求使用者存取硬體 (偏安全性的考量),而是讓使用者所信賴的 App 去取得圖片。此外,你也可以註冊特定 App 負責處理 OS 中的特定作業。Web Activities 其實就像對桌機裡的檔案按下滑鼠右鍵,你能在右鍵選單中看到有多種 App 可開啟檔案。而使用者可要求 OS 預設特定 App 開啟此一類型的檔案。Web Activities 可讓裝置上的 App 相互溝通,而不需再透過伺服器作為媒介。App 之間傳送的資料均已為最終資料。

進一步了解 Web Actitivies:

推播通知

使用 SimplePush WebAPI 的推播通知 (Push notification) 功能,可在裝置接收到特定訊息時喚醒 App。如此可在省電狀態下讓 App 保持待機,再隨時根據需求喚醒 App;此功能對行動裝置 App 格外重要。用這種方式所傳送的通知也有其優點:這種通知不會攜帶任何資料,Mozilla 不會取得 App 的資訊,而惡意攻擊者也無法監聽。

若要進一步了解 SimplePush 所推播的通知:

離線功能

如果 App 無法離線作業,那可用性就會大大降低。有部分使用者也因為這個理由,比較喜歡安裝 App 之後只要開啟瀏覽器,就能在裝置的瀏覽器上查看所需的內容。其實「Web App」這個詞看起來會有「需要網路連線才能運作」的感覺。但使用者總是有無法上網的時候:飛機上必須關機、地底下收不到訊號,甚或手機內沒留任何資料。開發者應該要確保自己的 App 能離線運作。而 HTML5 即具備幾項離線作業的技術,主要就是 AppCacheDOMStorage

進一步了解離線功能:

深入了解

我們希望這一系列的影片,能夠順利帶領開發者建構出自己的第一款 Open Web App。如果你很感興趣也想了解更多細節,也有許多其他資源與管道可供你利用:

  • MDN 上的「應用程式中心」另提供有關絕佳 Open Web App 的設計訣竅、可供下載的範例程式碼,另有將自己 App 提交到 Marketplace 的詳細說明
  • Hacks 部落格將持續提供 Firefox OS App 的文章 (當然也有像你的第三方開發者所撰寫的心得文),並有說明 WebAPI 等不同技術的進階文章,讓你能提早了解下一版 Firefox 與 Firefox OS 所將具備的特色功能
  • MDN 的 Firefox OS 區塊以及 B2G 的 Wiki 頁面,均有 Firefox OS 的深入資訊
  • 我們很多人都掛在 IRC 上;只要到 irc.mozilla.org 並透過 #devrel、#b2g、#openwebapps、#marketplace 都能找到我們

歡迎大家多多交流

影片錄製人:Chris、Sergi、Jan

文件標籤與貢獻者

 此頁面的貢獻者: chrisdavidmills, maybe, MashKao
 最近更新: chrisdavidmills,