オンラインプログラミング入門コースを初めて5週目
タイトル
APIの振り返りとAWSを使用したWEBサービスローンチ
目的
FlaskやAPIのGET、POSTの振り返り
AWSの環境構築
概要
キーワード:
Python、pip、venv、Flask、Requests、render_template、jsonify、pymongo、dnspython、mongoDB、@app.route、AWS、AWS Elastic Beanstalk、awsebcli
学び
流れを整理すると以下。
サーバーとクライアント接続の確認用コードをpyファイルとhtmlファイルそれぞれに記述
pyファイルでサーバーを作る
htmlおしくはjsファイルのjsにforEachでデータ抽出し、jQueryでappend(POSTのときはFormData)
AWSの環境構築を行う際、「eb create」コマンドを実行するたびに環境を購入することになるため、要注意
疑問
AWS Elastic Beanstalkを使用する際、調べてみるとvenv環境外で使用した方が都合がいいらしい。
今後の課題
引き続き、GET、POSTの処理や処理の流れを覚える。
サービスの制作へ進む
以下流れ:
1. サービス内容と作業スケジュールを考える。(今回は選択した質問項目に回答が返ってくるものを作ってみたい→一旦簡単なものでいい)
→末尾にて済。
2. サービスの設計方法を考える。(今まで作ったものをベースに)
3. フロントページのラフを作る。(figmaなどを使用し、イメージを固める)
4. バックの設計方法を改めてまとめる。
5. 実装作業
6. フロントページのデザインを作る。
7. CSSでデザインGithubとGitの使い方を習得する
今日の課題
制作スケジュールを決める
サービス内容の策定:5/18
既存ページを流用しながら設計方法を考える:5/19
ソースを流用して一旦作る:5/25
◆Webサイトの企画案◆
テーマ
ECサイト運営者向けの知識共有プラットフォーム
もしくはデザインアーカイブ検索サイト追加したい機能
ユーザーがフォームで特定のタグ名を入力したとき、そのタグが登録されている記事もしくはデザインアーカイブがDBから選択されて表示される仕様。
事前にDBに情報を登録しておく
↓
ユーザーが検索を行うためのフォームと、検索結果を表示するエリアをHTMLで作成。
↓
PythonとmongoDBを用いてバックエンドを設定。ここでは、Flaskとflask_pymongoを利用。
▶サーバーが"/search"エンドポイントへのPOSTリクエストを受け取ると、リクエストのJSONデータからタグを取り出し、そのタグを含むすべての記事もしくは画像とURLをmongoDBから検索する仕様。
↓
最後に、フロントエンドとバックエンドを連携させるために、jQueryを利用。
▶ユーザーが検索フォームを送信するとタグをサーバーにPOSTし、サーバーから返された検索結果を表示させる。参考資料
https://sankoudesign.com/
→ここまで綺麗なサイトは厳しいけど目標に…