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.

2013:7:15 pump


Published on 中文簡易教學

Published in: Technology, Design
  • Be the first to comment

2013:7:15 pump

  1. 1. Pump.io進度報告 partI 2013/7/15 13年7月15⽇日星期⼀一
  2. 2. 目標 概述 目前進度 架設過程 Demo 13年7月15⽇日星期⼀一
  3. 3. 概述:What is is an activity stream server that models a social network REST API 13年7月15⽇日星期⼀一
  4. 4. Activities 記錄發生什麼事情 主詞 - 動詞 - 物件結構 可擴展的結構 13年7月15⽇日星期⼀一
  5. 5. Subject - Verb - Object 原生動作:Like, Post... 也可以自己定義:hate, ate... ex: Evan posted a photo Bill ate a breakfast burrito at Celia's. 13年7月15⽇日星期⼀一
  6. 6. Audience 概念像是follow 只有 audience 可以看到活動 ex: All Laura’s followers People on David’s “Family” list 13年7月15⽇日星期⼀一
  7. 7. Streams 活動的集合 圍繞一個主題舉辦 ex: The activities Bill did The activities about an image 13年7月15⽇日星期⼀一
  8. 8. REST API JSON 回傳 所有的 streams 接可讀 有的可以寫 13年7月15⽇日星期⼀一
  9. 9. Representing Objects Unique ID Object type Other information varies by type { "id": "tag:social.example,2013:user:1481", "objectType": "person", "displayName": "Evan Prodromou", "url": "http://social.example/evanp", "image": { "url": "" } } 13年7月15⽇日星期⼀一
  10. 10. Representing activities Actor(an object) Verb Object(object) Summary { "id": "urn:uuid:85e80e20-cd1b-11e2-82f1-c8f73398600c", "actor": { "id": "tag:social.example,2013:user:1481", "objectType": "person" }, "verb": "create", "object": { "id": "http://social.example/note/13", "objectType": "note", "content": "Hello, World" }, "summary": "Evan created a note." } 13年7月15⽇日星期⼀一
  11. 11. 目前進度 架設完成,差SSL 可以運行第三方活動,但是還無法登入 了解整體架構中 13年7月15⽇日星期⼀一
  12. 12. 架設過程 node.js,其中運用到非常多的套件 Database : mongoDB or redis Database firmware : databank 13年7月15⽇日星期⼀一
  13. 13. git clone -> 下載整個專案 npm install -> 從 package.json 的設定中,安 裝需要的套件 npm install databank-mongodb or databank- redis -> 安裝node.js app 與 database 連結的 firmware 13年7月15⽇日星期⼀一
  14. 14. 整個 的設定檔 需要放到 /etc 這個目錄之下 有許多的 key - value 13年7月15⽇日星期⼀一
  15. 15. 執行 先要把 mongoDB 或是 redis 建立起來 mongoDB -> mongod --dbpath=dbs 將資料放 到dbs這個目錄之下,mongo 啟動 client 端的 管理資料庫介面。 redis -> src/redis-server 啟動資料庫,src/ redis-cli 啟動 client 端的管理資料庫介面 13年7月15⽇日星期⼀一
  16. 16. npm start -> 運行 會建立cluster,每個 instance 都會開啟一個 app 13年7月15⽇日星期⼀一
  17. 17. 結構 npm start 其實是要npm依照package.json的設 定來運行,設定維運行 bin/pump 這個執行 檔。 執行檔中除了將 etc/ 讀入之外, 並建立了複數個cluster,每一個cluster都會去 建立一個node.js app makeApp(config, function(err, app) { if (err) { console.log(err); process.exit(1); } else { {}); } 13年7月15⽇日星期⼀一
  18. 18. app.js 依照 express 套件的架構建立一個 app, express 套件的重點就是有一套完整的 route 規則,相當輕鬆就可以建立REST api。 app.js中除了載入route之外,也設定了像是與 資料庫連線等等。 route 的規則被獨立成幾個file,像是 web.js(web頁面)以及api.js(api功能) 13年7月15⽇日星期⼀一
  19. 19. web.js 輸入url,導到該頁面 ex: url : app.get("/", app.session, principal, addMessages, showMain); 表示此url會觸發這個get的事件,後面的參 數部分是變數,部分是函式 13年7月15⽇日星期⼀一
  20. 20. showMain() showMain函式將前面的參數帶入,並判別目前 使否維登入狀態 已登入 -> 個人頁面,未登入 -> 起始頁面 var showMain = function(req, res, next) { if (req.principalUser) {{msg: "Showing inbox for logged-in user", user: req.principalUser}); showInbox(req, res, next); } else {{msg: "Showing welcome page"}); res.render("main", {page: {title: "Welcome", url: req.originalUrl}}); } }; 13年7月15⽇日星期⼀一
  21. 21. 前端介面 backbone.js utml template 13年7月15⽇日星期⼀一
  22. 22. main.utml <div id="main"> <div class="hero-unit"> <div class="row"> <div class="span6"> <h1><%- %></h1> <p>This site runs <a href=""></a>, the ! high-performance Open Source social engine. It pumps your life ! in and out of your friends, family and colleagues. </p> <p><a class="btn primary large" href="/main/register">Get Started &raquo;</a></p> </div> <div class="span4"> <img src="images/somefriends.jpg" width="340" height="235" class="img-rounded" /> </div> </div> </div> </div> 13年7月15⽇日星期⼀一
  23. 23. 其他的tag咧? (body, head...) 13年7月15⽇日星期⼀一
  24. 24. backbone.js backbone.js的機制,一個固定的模組,並將中 間抽換成utml建立的頁面 還沒有研究很深刻 以上 網址:、 13年7月15⽇日星期⼀一