Parse 應用

1. 快速建構MVP的利器 -
Parse, Cloud Code 介紹
Wan-Ting Jheng
2015/5/19

2. Parse 提供以下服務
https://www.parse.com/apps/quickstart

3. 功能一覽
● Data
○ 基本的 CRUD 操作
○ 關聯式資料
○ ACL (Access Control List 安全性配置)
● Push 推送通知
○ iOS, Andorid, Windows, Windows Phone 8
● Analytics
○ Events, 錯誤回報
● Social 使用者相關
○ 註冊、登入、email 驗證、忘記密碼、user session、FB login、Role

4. 功能一覽(續)
● Cloud Code
○ 網頁 前/後端 程式放置平台
○ 提供各平台 SDK
● Hosting
○ 提供 subdomain.parseapp.com
○ 可以自訂網域名稱 連結至 parse app
○ 後台 Log：console.log, console.error, console.warn
○ Background Job 背景排程
● Embedded
○ Arduino Yun, Raspberry pi, RTOS

5. 使用 javascript - 網站示範
● MapPoint
○ http://map-point.parseapp.com/
○ https://github.com/wantingj/MapPoint
○ 自製類似 google map 我的地圖 服務
● 提供以下功能
○ 使用者 登入/註冊/忘記密碼
○ 使用者建立新地圖
○ 地圖上增加地點
○ 待辦：地點呈現在 map 上 (還沒有空接上 google map api …)
● Data Class (可想像成 DB table)
○ User
○ MyMap
○ MapPoint

6. Parse.Object
● Parse 會自動替每一筆資料生成以下三個欄位
○ id
○ createdAt
○ updatedAt
● 上述三個欄位可以直接取
○ Obj.id
○ Obj.createdAt
○ Obj.updateAt
● 其於欄位要透過 getter/setter
○ Obj.get(“name”)
○ Obj.set(“name”, “value”)

7. var MyMap = Parse.Object.extend("MyMap");
var myMap = new MyMap();
var currentUser = Parse.User.current();
myMap.set("name", “value”);
myMap.set("author", currentUser); // 用物件存關聯
var myMapACL = new Parse.ACL(currentUser);
myMapACL.setPublicReadAccess(true);
myMap.setACL(myMapACL);
myMap.save(null, {
success: function(object){
//...
},
error: function(model, error) {
// error = {code: number, message: string}
}
});
建立類別、物件
currentUser 已登入時，為 Parse.
User；未登入時，為 null
設定變數值
author 對應到 Parse.User 物件
資料存取設定
此處示範：只有目前登入使用者可
寫，所有人可讀
存入資料庫
接受 success, error callback
新增地點

8. var MapPoint = Parse.Object.extend("MapPoint")
var mapPoint = new MapPoint();
mapPoint.set("name", “value”);
mapPoint.set("addr", “value”);
mapPoint.set("map", myMap.id); // 用 id 存關聯
var myACL = new Parse.ACL(currentUser);
myACL.setPublicReadAccess(true);
mapPoint.setACL(myACL);
mapPoint.save(null, {
success: function(object){
// ...
},
error: function(model, error) {
// error = {code: number, message: string}
}
});
設定變數值
map 對應到 MyMap 物件 id
資料存取設定
此處示範：只有目前登入使用者可
寫，所有人可讀
存入資料庫
接受 success, error callback
新增地圖

9. // Client
Parse.Cloud.run('initPage', { mapId: mapId }, {
success: function(result) {
// do something
// ex. gMapId = result.targetMapId;
},
error: function(error) {
}
}
前端呼叫後端定義的 api

10. // Cloud code
Parse.Cloud.define("initPage", function(request, response) {
var mapId = request.params.mapId || "xjPDDwHsvK";
console.log("mapid: "+mapId);
var MyMap = Parse.Object.extend("MyMap");
var query = new Parse.Query(MyMap);
query.get(mapId, {
success: function(queryMyMap) { // 查詢 目標地圖 成功
queryMyMap.get("author").fetch({
success: function(user) { // 撈作者成功
var targetMapAuthorName = "";
if(user){
targetMapAuthorName = user.get("username");
response.success({
targetMapId: mapId,
targetMapName: queryMyMap.get("name"),
targetMapAuthorName: targetMapAuthorName,
editable: queryMyMap.getACL().getWriteAccess(currentUser.id)
});
}
}
});
},
error: function(error) {
response.error("查詢失敗; ["+error.code+"] "+error.message);
}
});
}
在 server 端，定義 api
透過 request.params 取得輸入值
log 內容會記錄在 parse app > 上方
ｃcore > 左側 Logs > info
mapId 是 MyMap id
可由 get 直接取得物件
Parse.Query 其它方法，舉例如下
equalTo, notEqualTo,
greaterThan, greaterThanOrEqualTo
limit, skip
ascending, descending
find, first
欲回傳前端的內容以 JSON 包裝
塞進 response 的 success/error
ACL 要透過 get/setACL 才能取得
由於 javascript 的 unblock 特性
多句查詢需要層層嵌套

11. // Cloud code
Parse.Cloud.beforeSave("MapPoint", function(request, response) {
if(request.object.get("addr").length < 5){
response.error("地址太短");
} else {
response.success();
}
});
Parse.Cloud.beforeSave(Parse.User, function(request, response) {
if (request.object.get("username").length < 4) {
response.error("帳號太短，至少四個字元 ");
} else {
response.success();
}
});
第一個參數，要應用在自訂類別的話
填入類別名稱字串
要應用在系統類別，如 Parse.User
直接傳遞該類別
[before/after] x [save/delete]
交叉組成以下四個方法
beforeSave
beforeDelete
afterSave
afterDelete
可應用在許多功能上，例如
beforeSave
伺服器端驗證
截字處理 …
beforeDelete
地圖內還有地點資料，不允許刪除
afterSave
發 push
afterDelete
刪除地圖後也一併刪除相關的地點

12. // 登入
Parse.User.logIn("username", "password", {
success: function(user) { /* ... */ },
error: function(user, error) { /* ... */ }
});
// 註冊
var user = new Parse.User();
user.set("username", name);
user.set("email", email);
user.set("password", pw);
user.signUp(null, {
success: function(user) { /* ... */ },
error: function(user, error) { /* ... */ }
});
// 忘記密碼
Parse.User.requestPasswordReset(email, {
success: function() { /* ... */ },
error: function(error) { /* ... */ }
});
// 登出
Parse.User.logOut();
登入/註冊成功後，會自動快取
不需要每次開頁面都要做 login
可透過 Parse.User.current() 來判斷
Parse 檢查不允許 帳號、email 重覆

13. 忘記密碼
● 發信至註冊信箱
● 點擊信箱裡提供的連結，見到如下畫面，重設密碼
● 連結執行過就失效
● Parse app 可以設定信件內容樣版

14. var Message = Parse.Object.extend("Message");
var groupMessage = new Message();
var groupACL = new Parse.ACL();
// userList 為 Parse.User 物件組合成的 array
for (var i = 0; i < userList.length; i++) {
groupACL.setReadAccess(userList[i], true);
groupACL.setWriteAccess(userList[i], true);
}
groupMessage.setACL(groupACL);
groupMessage.save();
此為官網程式範例
示範一則訊息
允許多個協作者共同擁有讀寫權限
ACL 協作權限示範

15. 建置網站 步驟
● 在 parse 上註冊帳號
● 如果是透過OAuth註冊帳號，需手動設定密碼
○ 右上角 username > Account > click “Update” button > 填入密碼
● 到 parse app (https://www.parse.com/apps) 新增APP
● 在本機要建立工作目錄的地方，執行以下指令，藍字表示依自身情況而變動
$ parse new MyCloudCode
Email: your@gmail.com
Password:
1:MyApp
2:MyOtherApp
Select an App: 1
$ cd MyCloudCode
以上會自動產生工作目錄，有三個資料夾： config, public, cloud
分別存放：設定檔、前端程式、伺服端器程式

16. 建置網站 步驟(續)
● parse app > target app > 上方 Setting > 左側 Keys，取得 key
填到程式裡對應的地方 (根據要開發平台而不同)
○ ex. 開發 javascript 網站 Parse.initialize("Application ID", "Javascript Key");
● parse app > target app > 上方 Setting > 左側 Hosting > 右側 Web Hosting
填入想要的 ParseApp subdomain
● 前後端程式寫好，放進 public, cloud 資料夾
● 執行 $ parse deploy
● 完成，到剛指定的網址上觀看結果 ex. your-subdomain.parseapp.com

17. 結語
讓開發新產品
更快速、容易
使我們得以專注在 產品功能
精進介面設計
以提供更加豐富的產品體驗
缺點是 server 端 debug 有點困難 … XD

18. Reference
Parse 官網 javascript doc - Parse JavaScript SDK & Cloud Code Reference
https://www.parse.com/docs/js/api/symbols/Parse.html
Parse 官網 快速開始 教學
https://www.parse.com/apps/quickstart
Parse 官網 javascript guide
https://www.parse.com/docs/js/guide
Parse 官網 javascript guide 中文翻譯版
https://www.parse.com/docs/tw/js/guide
Node.js and Parse
http://www.slideshare.net/NicholasMcClay/nodejs-and-parse