소개

COVID-19 때문에 시간이 남아 있기 때문에, 조금만 지식이 있는 JQuery나 Python등을 사용해 무언가 서비스를 외부 공개할 수 없는지 생각해 보았다.
여러가지 생각해 보았지만, 자신이 사용하고 싶은 것을 만들어 보기로 했다. 그것은 모바일 Suica의 이용 이력을 경비 정산에 쉽게 낼 수 있도록 편집한다는 것이다.
완성품은 이쪽
htps //w w. 모비? rk

필자의 레벨

프로그램을 처음 만진 것은 25년 전에 대학 연구에서 C언어를 이용했을 때

대학 졸업 후에는 전혀 언급하지 않았지만, 10년 정도 전에 조금 Ruby와 Visual Basic을, 2년 정도 전부터 Python으로 REST API를 두드리는 스크립트를 만들기 시작한다(자사 제품의 공부도 포함해)

2020년의 2월 정도부터 사내의 자세한 사람에게 가르침을 청하는 형태로 Javascript+Python+Docker라고 하는 이번 아키텍쳐의 구현 방법을 가르쳐 준다

소위 제품 수준의 것을 만든 경험은 일절 없음

아키텍처

컨테이너, 퍼블릭 클라우드 공부도 하기 위해 다음과 같은 구성으로 했다.

Nginx에서 리버스 프록시

리버스 프록시에는 jwilder/nginx-proxy 사용

인증서를 만들려면 docker-letsencrypt-nginx-proxy-companion. 이것은 위의 것과 세트로 사용하면 편하다는 것을 보았기 때문에 사용하기로 했다.

Flask의 REST API 서버

PDF 파일을 로드하려면 tabula-py로 그대로 CSV로 변환

CSV를 Pandas로 처리

JQuery에서 클라이언트 처리

테이블 표시 · 파일 출력은 datatables

Bootstrap 사용

GCP의 f1-micro/Container-Optimized-OS에서 작동.

사양 작성

외회를 하는 사회인의 분이라면 이해하실 수 있다고 생각하지만, 모바일 Suica의 이용 이력은 사용하기 어렵다.

PDF로만 출력할 수 있음

필터가 날짜 밖에 없기 때문에 경비 정산할 수 없는 편의점에서의 쇼핑 등의 이력을 생략할 수 없다

원래 합계가 없음

이용액이 「차액」이라고 하는 형태로 마이너스가 되어 있다

「출」 「입」 「잔액」등 쓸데없는 항목이 있다

위의 불만을 모두 해결하는 웹 서비스를 만드는 것이 목표이다.
구현할 예정인 기능은 다음과 같습니다.

모바일 Suica 사이트에서 다운로드 한 PDF 파일을 그대로 업로드 할 수 있습니다

모바일 Suica 사이트와 동일한 형식으로 테이블로 브라우저에 표시

체크박스 등으로 자유롭게 항목을 필터링할 수 있도록 한다

필터링된 결과의 총 값 추가

필터링된 결과 파일 출력

다음 번부터는 파이썬으로 서버 측을 구현하는 방법 등을 설명합니다.