개요

기사 개요

이번에 만든 서비스의 소개를 하면서 개발의 흐름이나 넘어지는 포인트를 소개합니다.

앱 개요

J 리그 팀의 승점 추이를 그래프로 볼 수 있습니다

여기 에서 서비스로 날 수 있습니다.

J 리그 데이터 사이트에서 스크래핑하여 데이터를 위해 API로 전달하여 전면에서 표시합니다.

앱 작성 이유

가와사키 프론탈레의 압도적인 결과를 시각적으로 보고 싶어졌으니까.

전체 구성

전면 의 소스 코드는 GitHub에 있습니다.

구성도

사용 기술

Python

AWS(Lambda,APIGateway,DaynamoDB)

JavaScript(Nuxt.js,Chart.js)

작성의 흐름 & 손잡이 포인트

흐름

AWS Lambda로 스크래핑하여 AWS DaynamoDB에 축적

AWS DaynamoDB 데이터를 APIGateway & Lambda로 API 만들기

Nuxt.js에서 API를 받고 Chart.js에서 표시

GitHubpages에서 배포

흐름 세부사항

참고로 한 사이트 등을 소개하면서 개발의 흐름을 설명합니다.

1.Lambda에서 스크래핑

스크래핑은 requests와 beautifulsoup를 사용합니다.
Lambda에서 타사 라이브러리를 사용하려면 다음 사이트를 참조했습니다.

J리그 데이터 사이트

더 스크래핑한 데이터를 DaynamoDB로 보내려면 Python Boto3이라는 공식 라이브러리로 조작할 수 있습니다.

・참고
Lambda에서 스크레이핑한다면 Docker 이미지를 사용합시다 [Python]
공식 문서

2.Lambda+APIGateway에서 API 생성

DaynamoDB에서 데이터를 가져오는 Lambda 함수와 APIGateway를 만듭니다.
꽤 쉽습니다.
DaynamoDB에서 정렬하여 데이터를 얻는 것이 어려웠기 때문에 Lambda에서 다시 정렬하기로 결정했습니다. 사전 목록을 정렬하는 것도 라이브러리에서 쉽게 할 수 있습니다.

・참고
AWS Lambda에서 Python Boto3을 사용하여 DynamoDB를 조작해 보았습니다.
API Gateway + Lambda + DynamoDB

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