Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Parse, cloud code 介紹

3,426 views

Published on

Parse 應用

Published in: Technology

Parse, cloud code 介紹

  1. 1. 快速建構MVP的利器 - Parse, Cloud Code 介紹 Wan-Ting Jheng 2015/5/19
  2. 2. Parse 提供以下服務 https://www.parse.com/apps/quickstart
  3. 3. 功能一覽 ● Data ○ 基本的 CRUD 操作 ○ 關聯式資料 ○ ACL (Access Control List 安全性配置) ● Push 推送通知 ○ iOS, Andorid, Windows, Windows Phone 8 ● Analytics ○ Events, 錯誤回報 ● Social 使用者相關 ○ 註冊、登入、email 驗證、忘記密碼、user session、FB login、Role
  4. 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. 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. 6. Parse.Object ● Parse 會自動替每一筆資料生成以下三個欄位 ○ id ○ createdAt ○ updatedAt ● 上述三個欄位可以直接取 ○ Obj.id ○ Obj.createdAt ○ Obj.updateAt ● 其於欄位要透過 getter/setter ○ Obj.get(“name”) ○ Obj.set(“name”, “value”)
  7. 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. 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. 9. // Client Parse.Cloud.run('initPage', { mapId: mapId }, { success: function(result) { // do something // ex. gMapId = result.targetMapId; }, error: function(error) { } } 前端呼叫後端定義的 api
  10. 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. 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. 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. 13. 忘記密碼 ● 發信至註冊信箱 ● 點擊信箱裡提供的連結,見到如下畫面,重設密碼 ● 連結執行過就失效 ● Parse app 可以設定信件內容樣版
  14. 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. 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. 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. 17. 結語 讓開發新產品 更快速、容易 使我們得以專注在 產品功能 精進介面設計 以提供更加豐富的產品體驗 缺點是 server 端 debug 有點困難 … XD
  18. 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

×