狠狠撸

狠狠撸Share a Scribd company logo
快速建構MVP的利器 -
Parse, Cloud Code 介紹
Wan-Ting Jheng
2015/5/19
Parse 提供以下服務
https://www.parse.com/apps/quickstart
功能一覽
● Data
○ 基本的 CRUD 操作
○ 關聯式資料
○ ACL (Access Control List 安全性配置)
● Push 推送通知
○ iOS, Andorid, Windows, Windows Phone 8
● Analytics
○ Events, 錯誤回報
● Social 使用者相關
○ 註冊、登入、email 驗證、忘記密碼、user session、FB login、Role
功能一覽(續)
● Cloud Code
○ 網頁 前/後端 程式放置平台
○ 提供各平台 SDK
● Hosting
○ 提供 subdomain.parseapp.com
○ 可以自訂網域名稱 連結至 parse app
○ 後台 Log:console.log, console.error, console.warn
○ Background Job 背景排程
● Embedded
○ Arduino Yun, Raspberry pi, RTOS
使用 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
Parse.Object
● Parse 會自動替每一筆資料生成以下三個欄位
○ id
○ createdAt
○ updatedAt
● 上述三個欄位可以直接取
○ Obj.id
○ Obj.createdAt
○ Obj.updateAt
● 其於欄位要透過 getter/setter
○ Obj.get(“name”)
○ Obj.set(“name”, “value”)
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
新增地點
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
新增地圖
// Client
Parse.Cloud.run('initPage', { mapId: mapId }, {
success: function(result) {
// do something
// ex. gMapId = result.targetMapId;
},
error: function(error) {
}
}
前端呼叫後端定義的 api
// 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 > 上方
ccore > 左側 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 特性
多句查詢需要層層嵌套
// 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
刪除地圖後也一併刪除相關的地點
// 登入
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 重覆
忘記密碼
● 發信至註冊信箱
● 點擊信箱裡提供的連結,見到如下畫面,重設密碼
● 連結執行過就失效
● Parse app 可以設定信件內容樣版
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 協作權限示範
建置網站 步驟
● 在 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
分別存放:設定檔、前端程式、伺服端器程式
建置網站 步驟(續)
● 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
結語
讓開發新產品
更快速、容易
使我們得以專注在 產品功能
精進介面設計
以提供更加豐富的產品體驗
缺點是 server 端 debug 有點困難 … XD
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

More Related Content

Parse, cloud code 介紹

  • 1. 快速建構MVP的利器 - Parse, Cloud Code 介紹 Wan-Ting Jheng 2015/5/19
  • 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 > 上方 ccore > 左側 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 重覆
  • 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
  • 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