bottleで始めるWEBアプリの最初の一歩
•
21 likes•16,134 views
(2017/09 追記)http://www.denzow.me/archive/category/Bottle でまとめ直し始めました PythonのWAFの中でもとりわけ軽量・シンプルなBottleを使って アプリケーション作成の第一歩を踏み出すお手伝いをします。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to bottleで始めるWEBアプリの最初の一歩
Similar to bottleで始めるWEBアプリの最初の一歩 (20)
More from Satoshi Yamada
More from Satoshi Yamada (13)
Recently uploaded
Recently uploaded (11)
bottleで始めるWEBアプリの最初の一歩
- 2. 2 # whoami •名前 • 山田 聡(@denzowill) •仕事 • DBエンジニア(○racle,PostgreSQL) • チョットだけWebLogicエンジニア • Pythonは趣味 •スキル • 統計もわかりません • 機械学習もわかりません • ちょっとWEBアプリわかります
- 8. 8 今回は？
- 11. 11 WEBアプリに必要なもの ビジネスロジック → あなたがやりたいこと 普通の処理 def view_list(): connect = db.connect() cur = connect.cursor() cur.execute("select id,name from items order by id") item_list = [] for row in cur.fetchall(): item_list.append({ "id":row[0], "item_name": row[1] }) return item_list DBから商品一覧を 取得したい etc
- 12. 12 WEBアプリに必要なもの HTMLの表示 → ビジネスロジックの結果を画面に <h1>アイテム一覧</h1> <table border="1"> %for item in item_list: <tr> <td>{{item.id}}</td> <td>{{item.name}}</td> </tr> %end </table>
- 14. 14 フレームワークとハードル •WEBアプリケーションフレームワーク(WAF)？ あるルールに従って作成すると、簡単にWEBアプリケー ションが作成できるようにしたライブラリの集合のよう なもの。
- 15. 15 フレームワークのよくある機能 •ルーティング • URLに応じて処理先を割り当て •テンプレート • HTMLを簡単に動的に組み立て •ORM • RDBMS等をオブジェクトとして透過的に操作
- 16. 16 フレームワークのよくある機能 •ルーティング • URLに応じて処理先を割り当て •テンプレート • HTMLを簡単に動的に組み立て •ORM • RDBMS等をオブジェクトとして透過的に操作 フレームワークによっては 他のORMライブラリを 組み込むケースも
- 20. 20 このあたりから 途端に辛い
- 21. 21 なんでつらい？ •MVCとかMTVとかいろいろある •フレームワーク毎に解釈が違ったりする •フレームワークの作法に従えばなんとなくは できる •でも、それはそのフレームワークに縛られる
- 31. 31 Bottleセットアップ $ mkdir <適当なディレクトリ> $ cd <作ったディレクトリ> $ wget https://github.com/bottlepy/bottle/raw/master/bottle.py bottle.pyを持ってくれば終わり
- 32. 32 Bottleの動作確認 from bottle import route, run # / にアクセスしたら index関数が呼ばれる @route("/") def index(): # 画面に表示されて欲しいHTMLを戻す return "<h1>WELCOME STAPY!</h1>" # サーバを起動(localhost:9999で起動する設定) run(reloader=True, port=9999) app.py
- 34. 34 アイテム一覧見たい # アイテム一覧を戻す関数 @route("/list") def view_list(): # ダミーデータ(あとでDBから取得するようにする) item_list = [ {"id": 1, "name": "りんご"}, {"id": 2, "name": "ばなな"}, {"id": 3, "name": "すいか"}, ] # 表示用のHTMLを組み立てる display_html = "<table border='1'>" for item in item_list: display_html += "<tr>" display_html += "<td>{}</td>".format(item["id"]) display_html += "<td>{}</td>".format(item["name"]) display_html += "</tr>" display_html += "</table>" return display_html app.py
- 37. 37 テンプレート使う <h1>アイテム一覧</h1> <table border="1"> %for item in item_list: <tr> <td>{{item["id"]}}</td> <td>{{item["name"]}}</td> </tr> %end </table> list_tmpl.tpl ほぼHTML % や{{ }}のなかだけ Pythonのように処理される item_listは 使うときにapp.pyから ディクショナリを渡す
- 38. 38 テンプレート使う from bottle import route, run, template ： ： # アイテム一覧を戻す関数 @route("/list") def view_list(): # ダミーデータ(あとでDBから取得するようにする) item_list = [ {"id": 1, "name": "りんご"}, {"id": 2, "name": "ばなな"}, {"id": 3, "name": "すいか"}, ] # 表示はテンプレートを戻すだけ return template("list_tmpl", item_list=item_list) app.py
- 41. 41 初期データの準備 import sqlite3 # items.dbとつなぐ(なければ作られる) conn = sqlite3.connect('items.db') c = conn.cursor() # テーブル作成 c.execute("create table items(id, name)") # 3行投入 c.execute("insert into items values(1,'りんご')") c.execute("insert into items values(2,'ばなな')") c.execute("insert into items values(3,'すいか')") # 確定 conn.commit() # バイバイ conn.close() pythonを対話型で起動して実行
- 42. 42 DBからitem_listを取得するように変更 import sqlite3 from bottle import route, run, template ： ： @route("/list") def view_list(): # items.dbとつなぐ conn = sqlite3.connect('items.db') c = conn.cursor() c.execute("select id,name from items order by id") item_list = [] for row in c.fetchall(): item_list.append({ "id": row[0], "name": row[1] }) conn.close() # 表示はテンプレートを戻すだけ return template("list_tmpl", item_list=item_list) app.py
- 43. 43 登録処理作る
- 44. 44 登録用のフォームのテンプレート作る <h1>アイテム登録</h1> <form action='' method='POST'> <input type='text' name='item_name' placeholder='アイテム名'/> <input type='submit' value='登録' /> </form> add_tmpl.tpl
- 45. 45 ルーティングとメソッド作成 @route("/add", method=["GET","POST"]) def add_item(): return template("add_tmpl") app.py GETとPOST 両方でアクセス できるようにする
- 47. 47 ルーティングとメソッド作成 @route("/add", method=["GET","POST"]) def add_item(): if request.method == "POST": # POSTアクセスならDBに登録する # フォームから入力されたアイテム名の取得(Python2ならrequest.POST.getunicodeを使う) item_name = request.POST.getunicode("item_name") conn = sqlite3.connect('items.db') c = conn.cursor() # 現在の最大ID取得(fetchoneの戻り値はタプル) new_id = c.execute("select max(id) + 1 from items").fetchone()[0] c.execute("insert into items values(?,?)", (new_id, item_name)) conn.commit() conn.close() return "SUCCESS" else: # GETアクセスならフォーム表示 return template("add_tmpl") app.py POST/GETで分岐 GETはフォーム出すだけ formからPOSTされた データを取得
- 49. 49 削除処理作る
- 50. 50 一覧画面のテンプレート変更し削除リンク追加 <h1>アイテム一覧</h1> <a href='/add' >新規作成</a> <table border="1"> %for item in item_list: <tr> <td>{{item["id"]}}</td> <td>{{item["name"]}}</td> <td><a href="/del/{{item['id']}}">削除</a></td> </tr> %end </table> list_tmpl.tpl ついでに新規作成つけとく 削除リンク /del/1や/del/2といった URLへリンクする
- 51. 51 削除処理を追加、URLから削除対象のID取得 # /del/100 -> item_id = 100 # /del/one -> HTTPError 404 @route("/del/<item_id:int>") def del_item(item_id): conn = sqlite3.connect('items.db') c = conn.cursor() # 指定されたitem_idを元にDBデータを削除 c.execute("delete from items where id=?", (item_id,)) conn.commit() conn.close() # 処理終了後に一覧画面に戻す return redirect("/list") app.py delの後ろに数字がくると 関数の引数として取れる 後はそれで delete文するだけ
- 55. 55 次の一歩に向けて •参照・登録・削除ができればアプリは作れる •見た目はCSSやJavascriptを覚える • 参考:Bootstrap http://getbootstrap.com/ •アプリが大きくなると各所で辛さが出る • SQLの管理 • ルーティングの管理 •辛くなったらもっと高機能なWAFを覚えて見る