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

1週間で学んだこと

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

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

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コード

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コード

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コード

index.html

fetch("/test").then(res => res.json()).then(data => {
		console.log(data)
})

POSTリクエスト確認Fetchコード

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なのか)
　　　・クライアントからサーバに残したい情報は何か
　　　・サーバからクライアントには何を表示させるか
　　　(登録完了とか表示させる必要があるものを確認する)

　　②クライアントとサーバーの接続を確認する
サーバーコード

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接続完了!'})

クライアントコード

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

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

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

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

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を開き情報を取得したデータが正常に保存できているか確認する
　　

来週の目標

来週は6月に比べて時間に余裕がありそうなので、復習を交えながら5週目の講義を進めていきたい。あとは、作成したいWebサイトの企画書をそろそろ作成したい。