狠狠撸
Submit Search
Parse, cloud code 介紹
?
11 likes
?
3,644 views
W
wantingj
Follow
Parse 應用
Read less
Read more
1 of 18
Download now
Downloaded 25 times
More Related Content
Parse, cloud code 介紹
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 > 上方 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 重覆
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
Download