我的第一支 Firefox OS App - Hello World

來說一下我這個第一支 Firefox OS App 開發過程的經驗學習分享吧 :)

這週二收到 Keon 後先是歷經了「第一次刷磚就上手」（感謝 Eric 等人相救），昨天週六開始認真翻閱入門如何開發 Firefox OS App 的文件和影片，先是從：

<Kickstarting FirefoxOS App Development>, by Shafiul Azam
http://shafiul.github.io/slides/kickstart_fxos.html#/

這個簡報檔起頭，可以很快速地瞭解狀況與觀念 (Web App)，以及簡單實作一個 hello world 程式。從這邊帶領我看了一個影片（6~12 分鐘）：

First Firefox OS App in Six (x2) Minutes!
http://popcorn.webmadecontent.org/9wp

完成之後，可以很順利地在 Simulator 上面跑。先來看一下這個 Firefox OS App 做的事情：是個簡單的 Hello World，並且搭配一個簡單的 JavaScript 動作，當按下 Click Me! 按鈕時，姜文字方塊中的字串，丟給 alert() 吐出來。

Ernest Chiang Photography: Screenshots 201305 &emdash;

完成一個 Hello World 之後，接下來就想說那來安裝到 Keon 上面玩看看，這樣未來完成的 Firefox OS App 都可以安裝上去，帶著跑。

因此翻了一下 Marketplace Developer Hub 和 MDN，幾個常見網址和重點整理如下：

Firefox Marketplace Developer Hub - https://marketplace.firefox.com/developers/
MDN Firefox OS - https://developer.mozilla.org/zh-TW/docs/Mozilla/Firefox_OS
Firefox OS App 有兩種部署方式：Hosted Apps 和 Packaged Apps。以我目前的需求，我想多看看關於 Packaged Apps 的部署方式，所以要來學一下如何打包。
在 MDN 上找到了打包的方式 - https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Testing_packaged_app_installation_(without_Simulator)

在一個可以被存取到的主機空間，準備三個檔案：

install.html: 照著 MDN 上面的做法寫。
package.manifest: 我一開始是照著 MDN 上面的做法寫。
package.zip: 剛才寫好的 Hello World App 從專案根目錄打包起來。這個檔案會被 Firefox OS 下載下來後解壓縮，成為 app://<uuid> 來存取。所以原本專案中的 /index.html 就會變成：「app://<uuid>/index.html」，所以打包的時候請留意目錄層次之間的關聯性。

全部放上 localhost 想說喔耶！下課，貼個分享文吧！沒想到，事情不是這麼簡單 XD

嗯嗯有出現這一頁，代表 /install.html 有讀到，然後有載入 package.manifest 裡頭的資訊（嗯因為我故意放不同的 "name" 在 package.manifest 和 manifest.webapp 中）。

乖乖，繼「第一次變磚就上手」之後，再度演出「第一次裝 App 就 fail」！（驚！有壓韻！）

失敗之後在桌面上會留下一個圖示 (icon)，點選一次會重開剛才那個畫面問你要不要再次重新下載試試看。接下來就一直看到 Download stopped 的訊息。想說，大概三個方向吧：

(1) 該不會 MDN Package 文件中寫的「http://<server-ip>/package.manifest」就一定要用 IP 吧？（想說應該不會這麼扯，等一下可以做個時間就可以知道）。

(2) 我的 package.manifest 格式或內容寫錯？Firefox OS 日新月異，文件更新還沒跟上？（想說應該也不會這樣，Mozilla 更新 MDN 還算認真）

(3) 那再不然難道是 package.manifest 和 package.zip 裡頭的 manifest.webapp 要匹配？

接下來就是作實驗的時間和四處查找問題的時間。

(1) 放到 localhost 後走 IP 方式連線，也不行。開了一台 VPN 不走 local LAN 的 IP 連線方式，也不行。看來跟這個應該沒有關係。（URL 每次都要記得更新在 install.html 和 package.manifest 中）

(2) 格式和內容，我也照著 MDN 上的 manifest 格是多打了一些進去。嗯嗯也不行。偶爾少打了 "," 或多打了 "," 會跑出 "INVALID MANIFEST" 的錯誤，但是跟原本要解決的問題無關。

(3) 網上查找找到這裡，裡頭提到一句「This was a huge hint that my two manifest files (manifest.webapp inside the zip file and package.manifest on the outside) had to “match”. 」哈哈！賓果！（然後我還是不信邪，想說應該重要的幾個資訊從 manifest.webapp 那邊複製過來放在 package.manifest 這邊應該可以吧？結果還是要信一下，到最後真的還是要整個複製，讓兩個檔案一模一樣才過得了關。）

分享一下我這次的 package.manifest 檔案內容：

{
 "name": "Ernest Hello World",
 "description": "Yet another hello world!",
 "package_path": "http://demoapp01.alofthost.com/package.zip",
 "launch_path": "/index.html",
 "type": "web",
 "version": "1.0",
 "size": 1027,
 "icons": {
  "128": "icon.png"
 },
 "developer": {
  "name": "Ernest Chiang",
  "url": "http://talk.ernestchiang.com"
 },
 "default_locale": "en"
}