2014/03/14

My first Firefox OS App

Firefox OS是一個蠻新的Mobile OS,來開發這塊也是因為想練練HTML5的功力XD
觀望了一年,不知道現在動手會不會太遲XDD

先安裝Firefox模擬器,安裝前要確認有安裝Firefox瀏覽器才能使用,我安裝的是1.2穩定版


安裝完成後,在瀏覽器的工具列選Firefox/Web Developer/App Manager就可以看到模擬器的設定畫面




先建立資料夾,在資料夾內建立一個html檔案,你可以隨意輸入標籤或是程式碼在該html檔案內,我是直接使用『透過YQL取得高雄紅橘線捷運車站並繪製到Google Map』裡面的程式碼XD

接著在資料夾內建立『manifest.webapp』
{
  "version": "0.1",
  "name": "My First App",
  "description": "Test",
  "launch_path": "/index.html",
  "icons": {
    "128": "/panda.png"
  },
  "developer": {
    "name": "ChengYouFang",
    "url": "http://writecodepeople.blogspot.tw/"
  }
}

manifest.webapp是讓手機以及使用者知道App需要什麼權限、主畫面、圖示以及開發者名稱和目的等等的資訊

接著將需要用到的檔案都放到資料夾內,並回到模擬器點選Add Package App,選擇到建立的資料夾


模擬器的工具檢查到manifest.webapp就會將該App載入,但不會新增至模擬器

點擊Start Simulator

點擊Firefox OS 1.2

Firefox OS Simulator的初始畫面


往右邊滑會看到目前安裝的App

我們在跳回工具在App的圖示旁點選UPDATE就會安裝到Simulator


安裝完成可以在Simulator看到提示


點擊自己寫好得App就可以看到畫面啦XD




參考資料:
https://developer.mozilla.org/en-US/Firefox_OS
https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager
https://developer.mozilla.org/en-US/Apps/Quickstart/Build/Your_first_app
https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/