概要
記事概要
今回作ったサービスの紹介をしつつ開発の流れやつまずきポイントを紹介します。
アプリ概要
- Jリーグのチームの勝ち点推移がグラフで見れる
- こちらからサービスに飛べます。
- Jリーグのデータサイトからスクレイピングしてデータをためて、APIとして配信してフロントから表示させています。
アプリ作成理由
- 川崎フロンターレの圧倒的な結果を視覚的にみたくなったから。
全体の構成
フロントのソースコードはGitHubにあげています。
構成図
使用技術
- Python
- AWS(Lambda,APIGateway,DaynamoDB)
- JavaScript(Nuxt.js,Chart.js)
作成の流れ＆つまづきポイント
流れ
- JリーグのデータサイトをAWS LambdaでスクレイピングしてAWS DaynamoDBに蓄積
- AWS DaynamoDBのデータをAPIGateway&LambdaでAPIを作る
- Nuxt.jsでAPIを受け取りChart.jsで表示
- GitHubpagesでデプロイ
流れの詳細
参考にしたサイトなどを紹介しつつ開発の流れを説明します。
1.Lambdaでスクレイピング
スクレイピングはrequestsとbeautifulsoupを使っています。
Lambdaでサードパーティーのライブラリを使うには以下のサイトを参考にしました
LambdaでスクレイピングするならDockerイメージを使おう【Python】
さらにスクレイピングしたデータをDaynamoDBに送るにはPython Boto3という公式のライブラリで操作できます
・参考
公式のドキュメント
AWS LambdaからPython Boto3を使用してDynamoDBを操作してみた
2.Lambda+APIGateway でAPI作成
DaynamoDBからデータをとってくるLambda関数とAPIGatewayを作ります。
かなり簡単です。
DaynamoDBからソートしてデータを取るのが難しかったので、Lambdaでソートし直すことにしました。辞書のリストを並べ替えるのもライブラリで簡単にできます。
・参考
API Gateway + Lambda + DynamoDB
Pythonの辞書のリストを並び替える
3.Nuxt.js ✖️ Chart.js
Nuxtでchart.jsを扱うのは以下を参考にしました。
APIをchart.jsで扱うには公式にサンプルがあるのでそれを参考に！
・参考
Nuxt.jsでvue-chart.jsを使って簡単グラフ作成
公式
感想
感想をだらだらと書きます。
- やっぱりLambda楽しい手軽に開発できて便利〜
- Chart.jsでも簡単にグラフ表示できていいね！
- JS力もUPさせたい！
今後の展望
今後やりたいことをだらだらと列挙していきます。
- セキュリティーの強化（APIkey入れるとか）
- APIテスト
- APIのドキュメント作成
- UIの改善
- CICD