來開發 Firefox OS 的筆記應用程式
這篇文章將說明筆記 App (就像 Evernote) 從無到有的開發過程,並佈署到 Firefox OS!請先觀看即時展示。
筆記 App 應可讓使用者儲存個人擁有的筆記 (不能任由他人閱讀)。我自己是愛用《Sproute》後端解決方案。Sproute 屬於架設/托管式 (Hosted) 的 Web 框架,可迅速建立動態的 webapps。
首先要用專屬的子網域建立帳號,再從 http://
模型
Sproute 即使用所謂「模型 (Model)」的概念。模型將定義 App 中的動態資料,並透過某些屬性設定來確保資料的完整性 (Data integrity)。這裡先建立新的模型並命名為「notes」,並有下列欄位與屬性:
body:文字、必填欄位、至少需為1sharing:文字,可為「public」與「private」;預設值為private
為「notes」所填寫的模型表格
「body」欄位將儲存筆記內容。「sharing」欄位將指定該筆記是否可讓他人觀看 (將提供直接連結),或僅限擁有者觀看。開發者只需要定義此項資料,其他都由內建欄位所代勞。
列出筆記
接著要為使用者列出可閱讀的筆記。只要透過「頁面 (Page)」就能達到此目的。所謂的「頁面」都是 HTML 搭配嵌入式的樣板標籤 (Template tag),可檢索並處理資料。
開啟 index 頁面。這也是他人檢視你的空間時的首頁。我們會把筆記列於此處。接著添增下列:
{{ get /data/notes?sort=_lastUpdated,desc as notes }}這裡透過 HTTP 介面檢索所有資料,因此 {{ get }} 標籤必須取得一組網址。上述請求將檢索記錄於使用者之中的所有筆記,另將結果儲存在「notes」變數之中。我們會透過查詢參數,將最後修改過的結果排序 (一組底線即代表一個內建的欄位)。
接著在清單中顯示各個筆記:
-
{{ each notes as note }}
- {{ word note.body 0 5 }} {{ / }}
{{ word }} 這個樣板標籤,會擷取主要內容的前五個字出來。我們透過網址 /view/. note 連上未完成的頁面。_id 則為內建的唯一識別碼 (Identifier)。
在「index」頁面中添加上述程式碼
建立筆記
在針對筆記而建立 view 頁面之前,先做一個可建立筆記的新頁面。建立新的頁面並稱之為 create。新增下列 HTML:
真簡單!如上面說過的,現在可透過 HTTP 介面檢索並修改所有資料。也就是說,我們可透過簡單的 HTML 表單建立新的筆記。而 goto 這個查詢參數會把使用者重新導向到該網址。
因為這是新的頁面,所以我們應該建立新的路徑,讓使用者能順利存取此頁面。一組 route 即屬於請求網址的一種格式 (pattern),只要網址的格式符合就隨即描繪頁面。而 index 頁面早已有一組路徑。只要點擊 Routes 就可透過下列方式建立新的路徑:
Route: /create, Page: create.
前往「create」頁面的新路徑
使用者登入與註冊
使用者帳戶均建構至 Sproute 內,但我們仍必須建立「Register and Login」的頁面。還好這裡同樣有簡單 HTML 表單可用,所以就建立一個 users 的新頁面,並新增以下:
Login
只要複製登入表單,並將「action」屬性取代為 /api/register,就能在相同頁面上添增註冊表單。另透過下列建立兩組新路徑:
- Route:
/login, Page:users - Route:
/register, Page:users
檢視並更新筆記
之前是建立一組連結,以利檢視某一筆記。接著要讓使用者修改筆記。先建立新頁面並稱之為 view,添增下列:
{{ get /data/notes/_id/:params.id?single=true admin as note }}
{{ if note.sharing eq private }}
{{ if note._creator neq :session.user._id }}
{{ error This note is private }}
{{ / }}
{{ / }}
針對已傳送進網址 (透過 params 物件) 的筆記,我們再透過請求而取得筆記資料。查詢參數 single=true 只會回傳單一物件,而非包含單一物件的集合。admin 另將根據特定的使用者類型而執行請求。接著要檢查此筆記是否為私人筆記。如果使用者並非建立者,就會丟出錯誤訊息。
更新表單可輕鬆建立表單。只要 _id 符合網址中的筆記,我們只需更改 action 以更新該筆記即可。
此頁面需要較複雜的路徑。我們應於路徑中使用替代字串 (placeholder),讓 /view/anything 仍能符合 view 頁面的路徑格式,並將 anything 儲存於變數之中。
以下可建立路徑:
- Route:
/view/:id, Page:view
現在你可知道 params.id 是從哪來的。param 物件將包含路徑中符合替代字串的所有匹配值。
權限
Sproute 最後一個重要概念就是權限 (Permission)。權限就如同路徑,其中有請求的網誌必須符合格式;而並非指向網頁。權限將檢驗必要的使用者類型。
點擊權限並添增下列:
- Method:
GET, Route:/data/notes, User:Owner - Method:
GET, Route:/data/notes*, User:Owner
如此可確保系統只會列出特定使用者 (如筆記擁有人) 所建立的筆記。基於第二權限,我們必須執行 {{ get }} 請求為 admin;否則即使是公開筆記,也會對所有人 (除了管理人員與筆記建立者) 丟出錯誤訊息。
新增權限以檢索筆記
Firefox OS 支援情形
Sproute 可於 Firefox OS 上輕鬆支援架設/托管式 (Hosted) App。只要用 manifest 檔案的 JSON 資料建立頁面,並設定路徑為 /manifest.webapp 即可。
建立新頁面並稱之為 manifest:
{
"name": "{{self.name}}",
"description": "A persistent notes app",
"launch_path": "/",
"icons": {
"128": "/absolute/path/to/icon"
}
}另以 /manifest.webapp 的格式建立路徑,以指向 manifest 頁面。
這樣就完成了!只要在應用程式管理員 (App Manager) 中使用此 manifest 檔案的連結(http://notes.sproute.io/manifest.webapp),即可進行測試。現已可於 GitHub 上找到開放源碼的《Sproute》,並由 Mozilla Public License v2 授權使用。你可複製整個 repo 供私人架設。
註:你會在「應用程式管理員」看到「manifest」中文翻譯為「安裝資訊檔」。
因行動裝置寬度所呈現的筆記 App
原文連結:Building a persistent Notes app for Firefox OS

























