プログラミング入門コース　4週目


<h2>1週間で学んだこと</h2>
サーバを構築しAPIを使用したデータの取得及び取得したデータをサーバに保存を行うことや
保存したデータを取得しWebサイトに表示させる部分を学んだ。主にGETとPOSTの使い方や取得したデータをWebサイトに表示させるまでの工程を学んだ。

- Flaskを使用した仮想環境の設置及び実行方法
　・Flask:サーバーを稼働させる楽なコード集
　・仮想環境にFlaskライブラリーをインストールすることで使用可能
　・Flask開始コードを使用し実行後Webページ上で`http://localhost:5000`
　　を指定することで対象のWebページをローカル上で表示することができる
　・`@app.route('/') `の部分を修正しURLを分けることも可能
　
`Flask開始する際に記載するコード`

```Python:app.py
from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)
```

- GET/POST(API)を使用したデータ取得方法
　・GET:データ読み取り（Read）を要請する際に多く使用する
　・POST:データ生成(Create)、変更(Update)、削除(Delete)要請時に多く使用する

`GETリクエストAPIコード`

```Python:app.py
@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': 'これはGETリクエスト'})
```
`POSTリクエストAPIコード`
```Python:app.py
@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': 'これはPOSTリクエスト'})
```
`GETリクエスト確認Fetchコード`

```javascript:index.html
fetch("/test").then(res => res.json()).then(data => {
		console.log(data)
})
```
`POSTリクエスト確認Fetchコード`
```javascript:index.html
let formData = new FormData();
formData.append("title_give", "ブラックパンサー");

fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
    console.log(data)
})
```

- GET/POST(API)を使用し取得したデータをデータベースに保存後Webサイトに表示させる方法
  ・GET/POSTも工程の手順は同じだが、GETとPOSTの方式によってクライアントと
　　サーバの作成方法が異なる作業工程は以下の通り

　　①データ明細を確認する
　　　・リクエスト情報は何か確認する
　　　・リクエスト方式は何か確認する(GETかPOSTなのか)
　　　・クライアントからサーバに残したい情報は何か
　　　・サーバからクライアントには何を表示させるか
　　　(登録完了とか表示させる必要があるものを確認する)

　　②クライアントとサーバーの接続を確認する
`サーバーコード`
```Python:app.py

#POST
@app.route("/movie", methods=["POST"])
def movie_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg':'POST接続完了!'})

#GET
@app.route("/movie", methods=["GET"])
def movie_get():
    return jsonify({'msg':'GET接続完了!'})

```

`クライアントコード`
```javascript:index.html

//POST
function posting() {
    fetch('/movie', {method: "POST",body: formData,}).then((res) => res.json()).then((data) => {
            console.log(data);
            alert(data["msg"]);
          });
}


//GET
$(document).ready(function(){
	  listing();
});

function listing() {
    fetch('/movie').then((res) => res.json()).then((data) => {
            console.log(data)
            alert(data['msg'])
          })
}

```

　　③サーバ側のコードを作成する
・POST:データを保存したいデータに変数をつけ`request.form`で情報を保存する

`POST`
```Python:app.py
import requests
from bs4 import BeautifulSoup

    url_receive = request.form['url_give']
    comment_receive = request.form['comment_give']


    headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
    data = requests.get(url_receive, headers=headers)
    soup = BeautifulSoup(data.text, 'html.parser')

    ogtitle = soup.select_one('meta[property="og:title"]')['content']
    ogdesc = soup.select_one('meta[property="og:description"]')['content']
	ogimage = soup.select_one('meta[property="og:image"]')['content']

#metaの個所はmetaタグの情報を元にデータを取得している
#metaタグ:metaタグは目に見えないウェブのプロパティを説明してくれるタグのこと
#metaタグは全世界で共通のタグのためどのサイトからも取得可能
#.split('開始文字を指定')[0(0は表示させない)]を使用することで取得したい部分の調整が可能

```

・GET:何も受け取らず変数に情報を入れて送る

`GET`
```Python:app.py
@app.route("/movie", methods=["GET"])
def movie_get():
    all_movies = list(db.movies.find({},{'_id':False}))
    return jsonify({'result':all_movies})
```

　　④クライアント側のコードを作成する
　・POST:サーバ側で取得した情報をWebサイト側に情報を送る
`POST`
```javascript:index.html
function posting() {
            let url = $('#url').val()
            let comment = $('#comment').val()

            let formData = new FormData()
            formData.append("url_give", url)
            formData.append("comment_give", comment)

            fetch('/movie', {method: "POST",body: formData}).then(res => res.json()).then(data => {
                    alert(data['msg'])
                    window.location.reload()
                })
        }

//window.location.reload()は自然に見せるためにリロードするコード
```
　・GET:リスト形式でデータ情報を1つずつ抽出し`append`で表示させる
`GET`
```javascript:index.html
function listing() {
            fetch('/movie').then(res => res.json()).then(data => {
                    let rows = data['result']
				            $('#cards-box').empty()
                    rows.forEach((a) => {
												let title = a['title']
                        let desc = a['desc']
                        let image = a['image']
                        let comment = a['comment']

                        let temp_html = `<div class="col">
                                            <div class="card h-100">
                                                <img src="${image}"
                                                     class="card-img-top">
                                                <div class="card-body">
                                                    <h5 class="card-title">${title}</h5>
                                                    <p class="card-text">${desc}</p>
												    <p>⭐⭐⭐</p>
                                                    <p class="mycomment">${comment}</p>
                                                </div>
                                            </div>
                                        </div>`

                        $('#cards-box').append(temp_html)
                    })
                })
        }

//jQueryのappendを使用し情報をWebサイト側に表示

```
　　⑤完成したか確認する
　　　・DBを開き情報を取得したデータが正常に保存できているか確認する
　　
<h2>来週の目標</h2>
来週は6月に比べて時間に余裕がありそうなので、復習を交えながら5週目の講義を進めていきたい。あとは、作成したいWebサイトの企画書をそろそろ作成したい。