KSDG Python and MongoDB for web

影像紀錄區pi.isuphoto.org

Python + MongoDB for Web

2012/10/04 KSDGToomore


自我介紹● 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/

http://blog.toomore.net/

http://www.youtube.com/watch?v=AmAseZeaPXc

http://www.youtube.com/watch?v=p1Hnhf0DpCg

http://www.youtube.com/watch?v=IDbnEOA6JoM

http://www.youtube.com/watch?v=EHhWpYmJqvo

3/70


Agenda● 影像紀錄區

– 2008● PHP + MySQL +

Apache

– 2012● Python + MongoDB +

Nginx

● 製作內容– Python– Flask– MongoDB– Twitter-bootstrap– Amazon S3 、 SES

4/70


2008

5/70


當時的版面

6/70


當時的地圖定位

7/70


當時的 Google Earth 定位

8/70


全台灣的地圖作品，很壯觀。

9/70


影像足跡，只有文字定位資訊，分享景點。

10/70


後端：定位介面

11/70


多國語系正體→簡體，英文→日、韓

12/70


使用者管理頁面

13/70


2012

14/70


15/70


● 使用者功能選單– 使用者頭像– 觀看留言– 積分狀況– 設定– 與 Facebook 連結– 與 twitter 連結– 登出

16/70


RSS 資訊（包含 geo location 資訊）

17/70


地圖定位， KML 檔下載

18/70


● EXIF– 讀取圖片資訊– 光圈– 快門– ISO– 拍攝日期– ...

19/70


● 作品授權– C 版權所有– CC 部份授權– CC0 放棄版權

20/70


● 喜愛的作品– 使用者對於其他人的作

品喜愛收藏。

21/70


● 上傳介面– 上傳限制

● Jpg 、 10MBs

– 分類– 作品內容– 自訂標籤 Tag– 作品授權

● C 、 CC 、 CC0

22/70


● 作品分類– 風景：天空 / 大海 / 森林– 人像： Model– 黑白：黑與白– 膠捲：底片 /LOMO– 創作：設計 / 圖文 / 手繪– 文化：人文 / 地方 / 新聞– 動物：貓 / 狗– 植物：花 / 草 / 樹木– 美食：食物 / 擺盤

23/70


● 作品集

25/70


Python

26/70


Python● 初接觸 Python

– 2009 年為了使用 Google AppEngine 學的。– 簡單易學

● 《 Python 學習手冊》

– 程式碼可讀性高● 強制縮排

– Script language● 簡單腳本處理● 實驗小程式

27/70


Python for web● Web Framework

– Django– Flask– … （參考： http://wiki.python.org/moin/WebFrameworks）

● Platform– Google AppEngine– Heroku

28/70


Flask● Flask

– Microframework 輕量級框架– 整合 Werkzeug 、 Jinja2 兩個套件

● Werkzeug （ WSGI utility library ）● Jinja2 （ template engine ）

http://wiki.python.org/moin/WebFrameworks

29/70


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 將被移除。

30/70


Flask● Flask

– 實作 RESTful URL Ref.● POST http://pi.isuphoto.org/post/4

http://flask.pocoo.org/docs/quickstart/#routing

http://zh.wikipedia.org/wiki/REST

31/70


Flask● Flask 其他資源

– Flask extensions [URL]

● 擴充套件● Flask-Cache● Flask-Gravatar

– Flask snippets [URL]

● 使用技巧 tips● SSL for particular views [URL]

● Simple Authorization [URL]

http://flask.pocoo.org/docs/quickstart/#routing

32/70


Flask● Flask 支援 WSGI

– WSGI？● Web伺服器網關介面（ Python Web Server Gateway

Interface ， WSGI ）● Python 定義一個伺服器與網頁框架簡單的溝通介面。● PEP 3333 [URL]

– Werkzeug （ WSGI utility library ）● 範例： python ./app.py

http://flask.pocoo.org/extensions/

http://flask.pocoo.org/snippets/

http://flask.pocoo.org/snippets/93/

http://flask.pocoo.org/snippets/98/

33/70


uWSGI● [uWSGI] [URL]

– 處理與 Nginx 溝通– 效能 [Ref.]

● [uWSGI] Top3

理由很弱，只因為效能好…

http://www.python.org/dev/peps/pep-3333/

34/70


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;}

http://projects.unbit.it/uwsgi/

http://nichol.as/benchmark-of-python-web-servers

35/70


nginx● [nginx] .conf

– 4 核心，讓大家都有事情做：● worker_processes 4;● worker_cpu_affinity 0001 0010 0100 1000;

– Gzip on

36/70


MongoDB

37/70


MongoDB● MongoDB

– NoSQL● 不同於傳統的關係式資料庫

– Memory-mapped● 32bit 2G limit. → 64bit

– Schema free● {'name': 'toomore', 'age': 27}● {'name': 'toomuch', 'loc': 'Taiwan', 'tel': '0800123123'}

38/70


MongoDB

MySQL MongoDB

database database

table collection

row document

MySQL 與 MongoDB 對應名稱

更多參考資料： http://www.mongodb.org/display/DOCS/SQL+to+Mongo+Mapping+Chart

39/70


MongoDB● 選擇 database

– > show dbs– > use test

● 選擇 collection– > db.getCollectionNames()– ['ksdg', 'system.indexes', '...']

● 列出所有資料– > db.ksdg.find()– {...}

40/70


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'})

41/70


MongoDB● ObjectId [Ref.]

– > db.ksdg.find()–

–

● 一組 16 進位的字串– 兩兩一組– >>> from datetime import datetime– >>> datetime.fromtimestamp(int('506c0562', 16))– datetime.datetime(2012, 10, 3, 17, 29, 6)

1349256546python

所以理論上來說，不需要額外設定一欄位存放時間紀錄，可以從 ObjectId解析時間。

42/70


MongoDB Index● .explain() 檢查 find 的運作

由 explain 觀察 scan 資料的行為，未建立 Index 時是掃描所有資料。

http://www.mongodb.org/display/DOCS/Object+IDs

43/70


MongoDB Index● Index [Ref.]: .ensureIndex()

由 explain 觀察 scan 資料的行為，發現以 BtreeCursor 方式 scan 資料。

44/70


MongoDB Index● Index [Ref.]: .stats()

– Stats(1024) ： byte → KB

更多參考資料：http://www.mongodb.org/display/DOCS/Monitoring+and+Diagnostics

http://www.mongodb.org/display/DOCS/Indexes

45/70


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 格式。

http://docs.mongodb.org/manual/reference/collection-statistics/

46/70


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. 讓使用者限時內重新設定密碼。

http://www.mongodb.org/display/DOCS/Geospatial+Indexing

47/70


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

http://docs.mongodb.org/manual/tutorial/expire-data/

48/70


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

49/70


twitter-bootstrap

50/70


twitter-bootstrap

51/70


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

52/70


其他套件

53/70


其他套件● Python

– PIL ：處理圖片縮圖。– pyexiv2 ：解析圖片 EXIF 資訊。– boto ：與 Amazon AWS溝通。

● S3 ：上傳圖片● SES ：傳送郵件通知、電子報發送…。

– Celery ： task排程。– pymongo ：驅動 MongoDB 。– requests ：處理 Facebook 、 twitter API 。– fabric ： SSH / Deploy

來不及詳細介紹，但他們都是默默工作的套件。

54/70


其他套件● 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/

55/70


架構圖

Linode

nginxuWSGI

python

Flask

mongoDB

Amason

SES S3

Master

Slaves tb*

- tb* : twitter-bootstrap

Script ：電子報、郵件通知

Pymongo

Social Network ：Facebook 、 twitter

分享照片

56/70


57/70


影像紀錄區現況與未來

58/70


緣起● 影像紀錄區在義守大學攝影社 (2006) 是一個讓

社員分享作品與切磋攝影技術的平台。● 當時偷偷架在財金系主機，與系網頁共享資源。● 2009 年主機被雷劈，資料有救回來，但偷放在

系上主機的事情也被發現。之後也找不到主機就一直擱置到現在。

● 到 2012 年 5月重新製作上線…

！

59/70


現況● 會員

– 第一批使用者：歷屆攝影社社員。– 開放申請：逐步審核（有攝影作品）– 未來：找攝影團體推薦平台。

● 實際參考數據 (2012/5 ~ 2012/10)– 使用 /註冊： 40 / 59– 作品數： 648– 作品瀏覽人次： 31,434– 網站停留時間： 00:06:16– 跳出率： 51.85%

60/70


實驗功能明信片● 近期實驗功能：印製明信片

61/70


實驗功能明信片● 明信片

– 作品實體輸出的可能模式● 攝影師自己下單印製。● 攝影師設定作品單價，販售明信片。扣除印製成本與抽成，盈餘歸攝影師所有。

● 或是直接與 hypo 、點點印接資訊流，將攝影師導引過去下單製作。

– 小結：獲利空間可能不大，但可成為一個附加服務。

62/70


實驗功能攝影履歷● 近期實驗功能：攝影履歷 [URL.]

63/70


實驗功能攝影履歷● 攝影履歷

– 提供有接案的攝影師一個接洽的頁面。● 拍攝風格● 攝影器材● 作品案例

– 小結：希望扮演媒合的角色，讓有攝影拍攝需求的人到影像紀錄區尋找屬意風格的攝影師。

http://pi.isuphoto.org/toomore/shutter

64/70


實驗功能粉絲專頁● 近期實驗功能：粉絲專頁 [URL.]

65/70


實驗功能粉絲專頁● 粉絲專頁

– 主要作為網站宣傳或與非會員互動的地方。● 非會員：尚未成為影像紀錄區攝影師，但希望持續關注影

像紀錄區。

– 功能需求發現區。● 例如：（右圖）

– 不定時發文● 特色作品介紹● 攝影師介紹● 攝影活動、新聞

https://www.facebook.com/pi.isuphoto.org

66/70


夥伴尋覓● 需要的人員

– CEO ***● 需要一個可以帶領 /指引我們方向或是建議的大大。

– 行銷公關***● 目標客群：攝影團體● 外拍活動、網站說明活動

– 技術人員*● Python...

68/70


大致上是這樣…（突然變謙虛）

69/70


最後再說一個小故事

我也拍過 yumi ， 2008 年攝影作品金牌 [IMG.]

70/70


Thanks~

Technology

KSDG Python and MongoDB for web