【スパルタコーディングクラブ】プログラミング入門コース　4週目

◎Flask

• PythonのWebアプリケーションフレームワーク

• 「localhost:5000」自分のPCのローカルホスト

• 「@app.route('/')」'/'以降でURLを分けることができる

app.py

• 基本フォルダ構造👇　※名前は原則変更しない

　pracフォルダ
　　|— venv （実際には見えるけど、見えないもの）
　　|— staticフォルダ(イメージ/cssファイルを入れておきます)
　　|— app.py(サーバー)
　　|— templatesフォルダ(htmlファイルを入れておきます)
　　　　|— index.html(クライアントファイル)

• HTMLファイルの読み込みは「render_template」

app.py

• データのやり取り→リクエスト方式：GET, POST

　GET：データ読み取りを要請するときに多用（データを与える）
　POST：データ生成、変更、削除要請時に多用（データを受け取る）
データのやり取りとコードを作成する順番は逆。
なぜなら、データをあげても、受取口がないと、どこにデータを置いておけばいいかわからないから💦
だから、
「POST方式のコードを書く→GET方式のコードを書く」ようにする。

◎Webアプリの基本作業

• 基本フォルダ構成を作成（必要なフォルダ、ファイル）

• 必要なパッケージをインストールする：flask, pymongo, dnspythonなど

• 骨組みを準備する

　　①app.pyを作成する
　　②index.htmlを作成する
　　③DBへの接続確認をする
　　④printで指定した変数を表示

• POST方式を作成する

　　①クライアントとサーバーを確認する　
「注文する」のボタンを押して、
「POST接続完了！」のアラートが出たら接続OK。

app.py

…..

index.html

　　②サーバーを作成する
DBに接続して、保存するデータ（器）を用意する。

app.py

app.py

　　③クライアントを作る
formDataでデータをDBに送る。

index.html

• GET方式を作成する

　　①クライアントとサーバーを確認する
サイトにアクセスして「GET接続完了！」のアラートが出ればOK。

app.py (サーバーコード）

index.html (クライアントコード）

　　②サーバーを作成する
resultに情報を入れて送る。コンソールタブにリスト型で情報が表示されればOK。

app.py

index.html

　　③クライアントを作成する
リスト型の情報を繰り返し文で必要な情報だけ抽出する。
抽出した情報は「temp_html」に入れてjQueryでappendして表示する。

index.html

◎スクレイピング

• metaタグが便利：metaタグはウェブのプロパティ

metaタグの例👇
・ サムネイルの写真 - og:image
・ サムネイルのタイトル - og:title
・サムネイルの説明 - og:description
💡どのサイトでも統一の情報

◎今週の一言

今週から基本的な開発手順を学んでいく。
今までの学習が盛り込まれつつ、Flaskやmetaデータなど、
新しいことも次々と出てくるので、難しいけれど、
勉強しがいのある1週間だった。
細かく理解するにはまだまだ時間がかかるが、開発の全体像が見え、
いざ形になっていく様を見るのはやはり面白かった。
できる限り知識を得て、自主制作の精度を上げていきたい。
自主制作の内容はこちらの記事から👇

ちなみに筆者が受講中のプログラミングコースの詳細はこちら👇

短期集中プログラミングコース | スパルタコーディングクラブ

トレンド技術を『お得』に『短期間』で学べる、
プログラミング初心者にピッタリのコース✨
3期からなんと渋谷でのオフライン授業開始！！
経験豊富な講師陣に直接質問できるなんて羨ましすぎる～😲

今ならチャンス！☟のコードでもっとお得に受講可能！！
【SPARTA0217】