KSDG Python and MongoDB for web

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

影像紀錄區 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/

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

4/70 影像紀錄區 pi.isuphoto.org 2008

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

15/70 影像紀錄區 pi.isuphoto.org ● 使用者功能選單 – 使用者頭像 – 觀看留言 – 積分狀況 – 設定 – 與 Facebook 連結 – 與 twitter 連結 – 登出

Slide 16

Slide 16 text

16/70 影像紀錄區 pi.isuphoto.org RSS 資訊（包含 geo location 資訊）

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

18/70 影像紀錄區 pi.isuphoto.org ● EXIF – 讀取圖片資訊 – 光圈 – 快門 – ISO – 拍攝日期 – ...

Slide 19

Slide 19 text

Slide 20

Slide 20 text

20/70 影像紀錄區 pi.isuphoto.org ● 喜愛的作品 – 使用者對於其他人的作品喜愛收藏。

Slide 21

Slide 21 text

21/70 影像紀錄區 pi.isuphoto.org ● 上傳介面 – 上傳限制 ● Jpg 、 10MBs – 分類 – 作品內容 – 自訂標籤 Tag – 作品授權 ● C 、 CC 、 CC0

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

23/70 影像紀錄區 pi.isuphoto.org ● 作品集

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

26/70 影像紀錄區 pi.isuphoto.org Python ● 初接觸 Python – 2009 年為了使用 Google AppEngine 學的。 – 簡單易學 ● 《 Python 學習手冊》 – 程式碼可讀性高 ● 強制縮排 – Script language ● 簡單腳本處理 ● 實驗小程式

Slide 26

Slide 26 text

27/70 影像紀錄區 pi.isuphoto.org Python for web ● Web Framework – Django – Flask – … （參考： http://wiki.python.org/moin/WebFrameworks） ● Platform – Google AppEngine – Heroku

Slide 27

Slide 27 text

28/70 影像紀錄區 pi.isuphoto.org Flask ● Flask – Microframework 輕量級框架 – 整合 Werkzeug 、 Jinja2 兩個套件 ● Werkzeug （ WSGI utility library ） ● Jinja2 （ template engine ）

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

30/70 影像紀錄區 pi.isuphoto.org Flask ● Flask – 實作 RESTful URL Ref. ● POST http://pi.isuphoto.org/post/4

Slide 30

Slide 30 text

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]

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

33/70 影像紀錄區 pi.isuphoto.org uWSGI ● [uWSGI] [URL] – 處理與 Nginx 溝通 – 效能 [Ref.] ● [uWSGI] Top3 理由很弱，只因為效能好…

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

35/70 影像紀錄區 pi.isuphoto.org nginx ● [nginx] .conf – 4 核心，讓大家都有事情做： ● worker_processes 4; ● worker_cpu_affinity 0001 0010 0100 1000; – Gzip on

Slide 35

Slide 35 text

36/70 影像紀錄區 pi.isuphoto.org MongoDB

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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 解析時間。

Slide 41

Slide 41 text

42/70 影像紀錄區 pi.isuphoto.org MongoDB Index ● .explain() 檢查 find 的運作由 explain 觀察 scan 資料的行為，未建立 Index 時是掃描所有資料。

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

52/70 影像紀錄區 pi.isuphoto.org 其他套件

Slide 52

Slide 52 text

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 來不及詳細介紹，但他們都是默默工作的套件。

Slide 53

Slide 53 text

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/

Slide 54

Slide 54 text

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 分享照片

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

58/70 影像紀錄區 pi.isuphoto.org 緣起 ● 影像紀錄區在義守大學攝影社 (2006) 是一個讓社員分享作品與切磋攝影技術的平台。 ● 當時偷偷架在財金系主機，與系網頁共享資源。 ● 2009 年主機被雷劈，資料有救回來，但偷放在系上主機的事情也被發現。之後也找不到主機就一直擱置到現在。 ● 到 2012 年 5 月重新製作上線… ！

Slide 58

Slide 58 text

59/70 影像紀錄區 pi.isuphoto.org 現況 ● 會員 – 第一批使用者：歷屆攝影社社員。 – 開放申請：逐步審核（有攝影作品） – 未來：找攝影團體推薦平台。 ● 實際參考數據 (2012/5 ~ 2012/10) – 使用 / 註冊： 40 / 59 – 作品數： 648 – 作品瀏覽人次： 31,434 – 網站停留時間： 00:06:16 – 跳出率： 51.85%

Slide 59

Slide 59 text

60/70 影像紀錄區 pi.isuphoto.org 實驗功能明信片 ● 近期實驗功能：印製明信片

Slide 60

Slide 60 text

61/70 影像紀錄區 pi.isuphoto.org 實驗功能明信片 ● 明信片 – 作品實體輸出的可能模式 ● 攝影師自己下單印製。 ● 攝影師設定作品單價，販售明信片。扣除印製成本與抽成，盈餘歸攝影師所有。 ● 或是直接與 hypo 、點點印接資訊流，將攝影師導引過去下單製作。 – 小結：獲利空間可能不大，但可成為一個附加服務。

Slide 61

Slide 61 text

62/70 影像紀錄區 pi.isuphoto.org 實驗功能攝影履歷 ● 近期實驗功能：攝影履歷 [URL.]

Slide 62

Slide 62 text

63/70 影像紀錄區 pi.isuphoto.org 實驗功能攝影履歷 ● 攝影履歷 – 提供有接案的攝影師一個接洽的頁面。 ● 拍攝風格 ● 攝影器材 ● 作品案例 – 小結：希望扮演媒合的角色，讓有攝影拍攝需求的人到影像紀錄區尋找屬意風格的攝影師。

Slide 63

Slide 63 text

64/70 影像紀錄區 pi.isuphoto.org 實驗功能粉絲專頁 ● 近期實驗功能：粉絲專頁 [URL.]

Slide 64

Slide 64 text

65/70 影像紀錄區 pi.isuphoto.org 實驗功能粉絲專頁 ● 粉絲專頁 – 主要作為網站宣傳或與非會員互動的地方。 ● 非會員：尚未成為影像紀錄區攝影師，但希望持續關注影像紀錄區。 – 功能需求發現區。 ● 例如：（右圖） – 不定時發文 ● 特色作品介紹 ● 攝影師介紹 ● 攝影活動、新聞

Slide 65

Slide 65 text

66/70 影像紀錄區 pi.isuphoto.org 夥伴尋覓 ● 需要的人員 – CEO *** ● 需要一個可以帶領 / 指引我們方向或是建議的大大。 – 行銷公關 *** ● 目標客群：攝影團體 ● 外拍活動、網站說明活動 – 技術人員 * ● Python...

Slide 66

Slide 66 text

68/70 影像紀錄區 pi.isuphoto.org 大致上是這樣… （突然變謙虛）

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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