Upgrade to Pro — share decks privately, control downloads, hide ads and more …

KSDG Python and MongoDB for web

KSDG Python and MongoDB for web

KSDG Python and MongoDB for web

4b0cdd9418513546c11c12f181f51c0f?s=128

Toomore Chiang

October 04, 2012
Tweet

Transcript

  1. 影像紀錄區 pi.isuphoto.org Python + MongoDB for Web 2012/10/04 KSDG Toomore

  2. 影像紀錄區 pi.isuphoto.org 自我介紹 • Toomore [to•mor] [Blog.] – 義守大學財務金融系 研究所肄業

    – Python (2009~) – 社群 • MozTW[YouTube] / COSCUP2012 行政組 [YouTube] – 作品 • goristock (2009) - goristock 台灣股市分析機器人 [YouTube] – Python + Google AppEngine http://goristock.appspot.com/ • grs (2012) – 台灣上市股票價格擷取含即時盤 [YouTube] – grs PyPI http://pypi.python.org/pypi/grs – grs web http://grs.toomore.net/
  3. 3/70 影像紀錄區 pi.isuphoto.org Agenda • 影像紀錄區 – 2008 • PHP

    + MySQL + Apache – 2012 • Python + MongoDB + Nginx • 製作內容 – Python – Flask – MongoDB – Twitter-bootstrap – Amazon S3 、 SES
  4. 4/70 影像紀錄區 pi.isuphoto.org 2008

  5. 5/70 影像紀錄區 pi.isuphoto.org 當時的版面

  6. 6/70 影像紀錄區 pi.isuphoto.org 當時的地圖定位

  7. 7/70 影像紀錄區 pi.isuphoto.org 當時的 Google Earth 定位

  8. 8/70 影像紀錄區 pi.isuphoto.org 全台灣的地圖作品,很壯觀。

  9. 9/70 影像紀錄區 pi.isuphoto.org 影像足跡,只有文字定位資訊,分享景點。

  10. 10/70 影像紀錄區 pi.isuphoto.org 後端:定位介面

  11. 11/70 影像紀錄區 pi.isuphoto.org 多國語系 正體→簡體,英文→日、韓

  12. 12/70 影像紀錄區 pi.isuphoto.org 使用者管理頁面

  13. 13/70 影像紀錄區 pi.isuphoto.org 2012

  14. 14/70 影像紀錄區 pi.isuphoto.org

  15. 15/70 影像紀錄區 pi.isuphoto.org • 使用者功能選單 – 使用者頭像 – 觀看留言 –

    積分狀況 – 設定 – 與 Facebook 連結 – 與 twitter 連結 – 登出
  16. 16/70 影像紀錄區 pi.isuphoto.org RSS 資訊(包含 geo location 資訊)

  17. 17/70 影像紀錄區 pi.isuphoto.org 地圖定位, KML 檔下載

  18. 18/70 影像紀錄區 pi.isuphoto.org • EXIF – 讀取圖片資訊 – 光圈 –

    快門 – ISO – 拍攝日期 – ...
  19. 19/70 影像紀錄區 pi.isuphoto.org • 作品授權 – C 版權所有 – CC

    部份授權 – CC0 放棄版權
  20. 20/70 影像紀錄區 pi.isuphoto.org • 喜愛的作品 – 使用者對於其他人的作 品喜愛收藏。

  21. 21/70 影像紀錄區 pi.isuphoto.org • 上傳介面 – 上傳限制 • Jpg 、

    10MBs – 分類 – 作品內容 – 自訂標籤 Tag – 作品授權 • C 、 CC 、 CC0
  22. 22/70 影像紀錄區 pi.isuphoto.org • 作品分類 – 風景:天空 / 大海 /

    森林 – 人像: Model – 黑白:黑與白 – 膠捲:底片 /LOMO – 創作:設計 / 圖文 / 手繪 – 文化:人文 / 地方 / 新聞 – 動物:貓 / 狗 – 植物:花 / 草 / 樹木 – 美食:食物 / 擺盤
  23. 23/70 影像紀錄區 pi.isuphoto.org • 作品集

  24. 25/70 影像紀錄區 pi.isuphoto.org Python

  25. 26/70 影像紀錄區 pi.isuphoto.org Python • 初接觸 Python – 2009 年為了使用

    Google AppEngine 學的。 – 簡單易學 • 《 Python 學習手冊》 – 程式碼可讀性高 • 強制縮排 – Script language • 簡單腳本處理 • 實驗小程式
  26. 27/70 影像紀錄區 pi.isuphoto.org Python for web • Web Framework –

    Django – Flask – … (參考: http://wiki.python.org/moin/WebFrameworks) • Platform – Google AppEngine – Heroku
  27. 28/70 影像紀錄區 pi.isuphoto.org Flask • Flask – Microframework 輕量級框架 –

    整合 Werkzeug 、 Jinja2 兩個套件 • Werkzeug ( WSGI utility library ) • Jinja2 ( template engine )
  28. 29/70 影像紀錄區 pi.isuphoto.org Flask • Flask – 實作 RESTful URL

    Ref. • REST : Roy Fielding 2000 提出的一個架構風格。 – 『設計良好的網路應用表現為一系列的網頁,這些網頁可以看作 的虛擬的狀態機,用戶選擇這些連結導致下一網頁傳輸到用戶端 展現給使用的人,而這正代表了狀態的轉變。』 - Ref. • RESTful : – GET http://pi.isuphoto.org/post/4 – GET http://pi.isuphoto.org/post/4/exif – POST http://pi.isuphoto.org/post/4/delete – GET http://pi.isuphoto.org/toomore – GET http://pi.isuphoto.org/toomore/shutter • PUT/DELETE 在 HTML5 將被移除。
  29. 30/70 影像紀錄區 pi.isuphoto.org Flask • Flask – 實作 RESTful URL

    Ref. • POST http://pi.isuphoto.org/post/4
  30. 31/70 影像紀錄區 pi.isuphoto.org Flask • Flask 其他資源 – Flask extensions

    [URL] • 擴充套件 • Flask-Cache • Flask-Gravatar – Flask snippets [URL] • 使用技巧 tips • SSL for particular views [URL] • Simple Authorization [URL]
  31. 32/70 影像紀錄區 pi.isuphoto.org Flask • Flask 支援 WSGI – WSGI

    ? • Web 伺服器網關介面( Python Web Server Gateway Interface , WSGI ) • Python 定義一個伺服器與網頁框架簡單的溝通介面。 • PEP 3333 [URL] – Werkzeug ( WSGI utility library ) • 範例: python ./app.py
  32. 33/70 影像紀錄區 pi.isuphoto.org uWSGI • [uWSGI] [URL] – 處理與 Nginx

    溝通 – 效能 [Ref.] • [uWSGI] Top3 理由很弱,只因為效能好…
  33. 34/70 影像紀錄區 pi.isuphoto.org uWSGI→nginx • [uWSGI] – uwsgi -s /Xweb/pi/pi.sock

    -d /var/log/uwsgi_pi.log --pythonpath /web/pi -w app:app • [nginx] – server{ – listen 80; – server_name pi.isuphoto.org; – location / { – Include uwsgi_params; uwsgi_pass unix: /Xweb/pi/pi.sock;}
  34. 35/70 影像紀錄區 pi.isuphoto.org nginx • [nginx] .conf – 4 核心,讓大家都有事情做:

    • worker_processes 4; • worker_cpu_affinity 0001 0010 0100 1000; – Gzip on
  35. 36/70 影像紀錄區 pi.isuphoto.org MongoDB

  36. 37/70 影像紀錄區 pi.isuphoto.org MongoDB • MongoDB – NoSQL • 不同於傳統的關係式資料庫

    – Memory-mapped • 32bit 2G limit. → 64bit – Schema free • {'name': 'toomore', 'age': 27} • {'name': 'toomuch', 'loc': 'Taiwan', 'tel': '0800123123'}
  37. 38/70 影像紀錄區 pi.isuphoto.org MongoDB MySQL MongoDB database database table collection

    row document MySQL 與 MongoDB 對應名稱 更多參考資料: http://www.mongodb.org/display/DOCS/SQL+to+Mongo+Mapping+Chart
  38. 39/70 影像紀錄區 pi.isuphoto.org MongoDB • 選擇 database – > show

    dbs – > use test • 選擇 collection – > db.getCollectionNames() – ['ksdg', 'system.indexes', '...'] • 列出所有資料 – > db.ksdg.find() – {...}
  39. 40/70 影像紀錄區 pi.isuphoto.org MongoDB • > u = {'name': 'toomore',

    'loc': 'kaohsiung'} • 新增 – > db.ksdg.save(u) • 修改 / 更新 – > db.ksdg.update(u, {'$set': {'loc': 'TW'}}) • 刪除 – > db.ksdg.remove({'name': 'toomore'}) • 尋找 – > db.ksdg.find({'name': 'toomore'})
  40. 41/70 影像紀錄區 pi.isuphoto.org MongoDB • ObjectId [Ref.] – > db.ksdg.find()

    – – • 一組 16 進位的字串 – 兩兩一組 – >>> from datetime import datetime – >>> datetime.fromtimestamp(int('506c0562', 16)) – datetime.datetime(2012, 10, 3, 17, 29, 6) 1349256546 python 所以理論上來說,不需要額外設定一欄位存放時間 紀錄,可以從 ObjectId 解析時間。
  41. 42/70 影像紀錄區 pi.isuphoto.org MongoDB Index • .explain() 檢查 find 的運作

    由 explain 觀察 scan 資料的行為,未建 立 Index 時是掃描所有資料。
  42. 43/70 影像紀錄區 pi.isuphoto.org MongoDB Index • Index [Ref.] : .ensureIndex()

    由 explain 觀察 scan 資料的行為,發現 以 BtreeCursor 方式 scan 資料。
  43. 44/70 影像紀錄區 pi.isuphoto.org MongoDB Index • Index [Ref.] : .stats()

    – Stats(1024) : byte → KB 更多參考資料: http://www.mongodb.org/display/DOCS/Moni toring+and+Diagnostics
  44. 45/70 影像紀錄區 pi.isuphoto.org MongoDB GeoIndex • Geospatial Indexing [Ref.] :

    – 地理座標索引 • { loc : [ 50 , 30 ] } //SUGGESTED OPTION • { loc : { lon : 40.739037, lat: 73.992964 } } – 建立索引 • db.places.ensureIndex( { loc : "2d" } ) – 搜尋 • db.places.find( { loc : [50,50] } ) • db.places.find( { loc : { $near : [50,50] } } ) • db.places.find( { loc : { $near : [50,50],$maxDistance : 5}}) 影像紀錄區 用在 作品定位 欄位的資料為 GeoIndex 格式。
  45. 46/70 影像紀錄區 pi.isuphoto.org MongoDB TTL • TTL ( Time to

    live ) [URL.] – 2.2 新功能 – 在 ensureIndex 新增 expireAfterSeconds 參數 – 每分鐘 mongod 檢查一次,指定的欄位必須為時間 屬性的 BSON 資料格式。 • 範例: 1800 秒後刪除 – db.ksdg.ensureIndex({'date': 1}, {expireAfterSeconds: 1800}) – db.ksdg.save({'user': 'toomore', 'date': New Date()}) 影像紀錄區 用在 忘記密碼 時取得有時效性 的 Token. 讓使用者限時內重新設定密碼。
  46. 47/70 影像紀錄區 pi.isuphoto.org MongoDB Master-Slaves • 主從式架構 – 設定請參考 •

    http://www.mongodb.org/display/DOCS/Master+Slave • 影像紀錄區 – 使用 1 Master (R/W) + 2 Slaves (R) – 有時 M/S 會來不及同步,重要的資料會強制指向 Master 存 / 取資料。 Master Slaves Slaves MongoDB
  47. 48/70 影像紀錄區 pi.isuphoto.org MongoDB 參考資料 • TechTalk@TW: 專訪 Episode 4

    – MongoDB: – FlipTop 採用 MongoDB 的經驗、 Amazon EC2 、 sharding 。 – http://www.techtalk.tw/2012/02/episode-4- mongodb.html • MyNoSQL – 關於 NoSQL 的文章蒐集 – http://nosql.mypopescu.com/tagged/mongodb
  48. 49/70 影像紀錄區 pi.isuphoto.org twitter-bootstrap

  49. 50/70 影像紀錄區 pi.isuphoto.org twitter-bootstrap

  50. 51/70 影像紀錄區 pi.isuphoto.org twitter-bootstrap • Front-end framework – 方便快速建立前端網頁樣式。 –

    Responsive layout – twitter 風格的 CSS 、 javascript • 缺點:如果不客製化調整,會到處撞衫。 – 建立客製化的 LESS 檔,再用 Node.js 編譯新的 twitter- bootstrap – LESS 設定參考: http://twitter.github.com/bootstrap/extend.html – 或 線上自訂樣式: http://twitter.github.com/bootstrap/customize.html
  51. 52/70 影像紀錄區 pi.isuphoto.org 其他套件

  52. 53/70 影像紀錄區 pi.isuphoto.org 其他套件 • Python – PIL :處理圖片縮圖。 –

    pyexiv2 :解析圖片 EXIF 資訊。 – boto :與 Amazon AWS 溝通。 • S3 :上傳圖片 • SES :傳送郵件通知、電子報發送…。 – Celery : task 排程。 – pymongo :驅動 MongoDB 。 – requests :處理 Facebook 、 twitter API 。 – fabric : SSH / Deploy 來不及詳細介紹,但他們都是默默工 作的套件。
  53. 54/70 影像紀錄區 pi.isuphoto.org 其他套件 • Front-end web – YUI •

    compress both JavaScript and CSS files • http://yuilibrary.com/download/yuicompressor/ – Font Awesome • iconic font 字型圖示,放大縮小不會變形 • http://fortawesome.github.com/Font-Awesome/
  54. 55/70 影像紀錄區 pi.isuphoto.org 架構圖 Linode nginx uWSGI python Flask mongoDB

    Amason SES S3 Master Slaves tb* - tb* : twitter-bootstrap Script : 電子報、郵件通知 Pymongo Social Network : Facebook 、 twitter 分享照片
  55. 56/70 影像紀錄區 pi.isuphoto.org

  56. 57/70 影像紀錄區 pi.isuphoto.org 影像紀錄區 現況與未來

  57. 58/70 影像紀錄區 pi.isuphoto.org 緣起 • 影像紀錄區 在 義守大學攝影社 (2006) 是一個讓

    社員分享作品與切磋攝影技術的平台。 • 當時偷偷架在財金系主機,與系網頁共享資源。 • 2009 年主機被雷劈,資料有救回來,但偷放在 系上主機的事情也被發現。之後也找不到主機就 一直擱置到現在。 • 到 2012 年 5 月重新製作上線… !
  58. 59/70 影像紀錄區 pi.isuphoto.org 現況 • 會員 – 第一批使用者:歷屆攝影社社員。 – 開放申請:逐步審核(有

    攝影作品) – 未來:找攝影團體推薦平台。 • 實際參考數據 (2012/5 ~ 2012/10) – 使用 / 註冊: 40 / 59 – 作品數: 648 – 作品瀏覽人次: 31,434 – 網站停留時間: 00:06:16 – 跳出率: 51.85%
  59. 60/70 影像紀錄區 pi.isuphoto.org 實驗功能 明信片 • 近期實驗功能:印製明信片

  60. 61/70 影像紀錄區 pi.isuphoto.org 實驗功能 明信片 • 明信片 – 作品實體輸出的可能模式 •

    攝影師自己下單印製。 • 攝影師設定作品單價,販售明信片。扣除印製成本與抽 成,盈餘歸攝影師所有。 • 或是直接與 hypo 、點點印 接資訊流,將攝影師導引過去 下單製作。 – 小結:獲利空間可能不大,但可成為一個附加服務。
  61. 62/70 影像紀錄區 pi.isuphoto.org 實驗功能 攝影履歷 • 近期實驗功能:攝影履歷 [URL.]

  62. 63/70 影像紀錄區 pi.isuphoto.org 實驗功能 攝影履歷 • 攝影履歷 – 提供有接案的攝影師一個接洽的頁面。 •

    拍攝風格 • 攝影器材 • 作品案例 – 小結:希望扮演媒合的角色,讓有攝影拍攝需求的人 到 影像紀錄區 尋找屬意風格的攝影師。
  63. 64/70 影像紀錄區 pi.isuphoto.org 實驗功能 粉絲專頁 • 近期實驗功能:粉絲專頁 [URL.]

  64. 65/70 影像紀錄區 pi.isuphoto.org 實驗功能 粉絲專頁 • 粉絲專頁 – 主要作為網站宣傳 或

    與非會員互動的地方。 • 非會員:尚未成為影像紀錄區攝影師,但希望持續關注影 像紀錄區。 – 功能需求發現區。 • 例如:(右圖) – 不定時發文 • 特色作品介紹 • 攝影師介紹 • 攝影活動、新聞
  65. 66/70 影像紀錄區 pi.isuphoto.org 夥伴尋覓 • 需要的人員 – CEO *** •

    需要一個可以帶領 / 指引我們方向或是建議的大大。 – 行銷公關 *** • 目標客群:攝影團體 • 外拍活動、網站說明活動 – 技術人員 * • Python...
  66. 68/70 影像紀錄區 pi.isuphoto.org 大致上是這樣… (突然變謙虛)

  67. 69/70 影像紀錄區 pi.isuphoto.org 最後再說一個小故事 我也拍過 yumi , 2008 年攝影作品金牌 [IMG.]

  68. 70/70 影像紀錄區 pi.isuphoto.org Thanks~