카페 주문으로 항상 초조해 React 앱을 만들어 해결했다

앱 개요

스타 버나 도톨 등의 주요 카페 체인의 음료 푸드 메뉴를 가게 마다 일람할 수 있는 앱을 만들었습니다.

상품명과 각 사이즈의 가격이 표시되고 행을 탭하면 공식 상세 페이지로 날아갑니다.

왜 만들었는가

이른바 '찻집'이라면 자리에 대해서부터 천천히 메뉴를 볼 수 있습니다만, 스타바 따위라면 금전 등록기의 눈앞에서 즉단하지 않으면 안 되는 일도 있습니다.

뒤에 사람이 늘어서 있고, 눈앞에는 점원도 있다···.

이 상황에서는 메뉴를 전혀 볼 수 없고, 결국 전과 같은 무난한 주문을 하기 쉽습니다.

줄지어 있는 동안에 천천히 음미할 수 있으면 좋겠다고 생각했기 때문에 만들었습니다.

URL

앱은 여기

리포지토리는 이쪽

기술

모두 AWS에서 구성했습니다.

(화살표는 사용자가 요구하는 데이터의 흐름입니다)

프런트 엔드

React의 SPA로 S3에 호스팅했습니다.

S3의 정적 사이트 호스팅 기능도 충분하다고 생각하지만 https를 지원하기 위해 Cloudfront를 통해 있습니다.

UI 프레임워크에는 Material-UI 을 사용하게 했습니다.

백엔드

React에서 API Gateway -> Lambda 함수를 통해 S3에 저장된 메뉴 데이터를 json을 반환합니다.

그 데이터는 각 카페 체인의 공식 사이트에서 매일 한 번만 스크래핑 시켜줍니다.

스크래핑

언어는 Python이며 requests-html이라는 라이브러리를 사용했습니다.

Python이라고 하면 requests나 Beautiful soup등이 유명합니다만, requests-html은 그 근처의 라이브러리를 정리해 사용하기 쉽게 한 것 같습니다.

실제로 꽤 직관적으로 사용할 수 있으므로 추천합니다.

도전

React에 아직 익숙하지 않은

처음 만든 React 앱이므로 여러가지 당황하는 일도 많았습니다.

각 컴포넌트의 의존성과 책임 범위 등은 redux를 포함하여 더 공부하고 싶습니다.

제품으로서의 가치

적당한 이상을 내세우면 web서비스는 얼마든지 데치 올릴 수 있지만, 많은 사람에게 사용할 수 있는 제품은 드뭅니다.

이 앱은 '쇼보라든지, 다사해도, 확실히 누군가의 요구를 충족시키는 것'을 목표로 아이디어를 반죽한 결과 태어났습니다.

다만, 아무리 생각해도 확실한 아이디어는 나오지 않는 것은 어쩔 수 없다고 생각합니다.

어쨌든 풋워크를 가볍게 하고, 작은 검증을 쌓아 몇 가지입니다.