tronto198 / foodpass

3인 팀프로젝트 푸드트럭 예약 웹 앱

FoodPass

푸드트럭과 고객을 이어주는 웹앱

• 사용자는 푸드트럭을 운영하는 운영자와 푸드트럭을 이용하는 고객으로 분류된다.

• 고객은 특정한 위치를 중심으로 주변의 푸드트럭을 검색하여 검색된 푸드트럭의 정보들을 확인할 수 있다.
  이때 자신의 위치를 기준으로도 검색가능하다.

• 푸드트럭의 정보에는 이름, 설명, 사진 등의 필수 정보와
  위치, 대기 인원수, 예상 대기 시간 등의 영업중 정보가 있다.

• 고객은 검색된 푸드트럭에서 자신이 원하는 메뉴와 옵션을 선택하여 주문을 할 수 있다.

• 고객의 주문 요청은 서버를 거쳐 운영자에게 전달된다.

• 운영자는 주문 정보를 보고 메뉴를 준비한 뒤, 고객을 호출한다.

• 고객은 호출 알림을 푸시알림을 통해 전달받고, 해당 푸드트럭에서 주문을 수령한 뒤 주문 수령 버튼을 통해 주문 과정을 마친다.

• 운영자는 자신의 푸드트럭에 대한 정보와 메뉴들을 앱을 통해 등록한다.

• 운영을 시작하면 위치를 앱을 통해 인식하여 서버에 저장된다.
  이 위치정보는 이후 고객의 푸드트럭 검색에 활용된다.

주로 앱의 동작을 구현하고, 전체적인 구조와 데이터를 설계하였다.

개발 환경

• angular Framework (ionic) - HTML, css, typescript
• 서버는 express.js, DB는 PostgreSQL 사용
• aws ec2, aws rds, fcm 사용
• kakao map api
• 현재 진행중

개발 동기 등

푸드트럭 앞에서 서있는 시간을 줄이기 위한 목적으로 진행하고 있는 프로젝트이다. 처음에는 안드로이드 앱으로 개발하려 했으나 사용자의 접근성을 높이기 위해 웹 앱으로 급히 바꾸어 진행했다. 따라서 빠르게 개발 환경을 다시 정리해야 했었는데, 이 과정에서 다음의 이유로 Ionic을 선택하게 되었다.

• angular 기반으로 typescript를 사용하기 때문에 js와 다르게 타입을 명확하게 지정할 수 있다.
• ajax를 통해 새로고침 하나없는 앱 개발이 쉽다.
• 웹 개발에 익숙하지 않기에 ionic의 기능으로 html, css를 최소화하여 빠르게 UI를 구성할 수 있다.
• 컴포넌트 기반으로 개발하기 때문에 각각을 모듈화하여 이후 수정하기 편하다.
• 의존성 주입이라는 angular의 특성 역시 이후 수정하기 편하게 해준다.
• 하나의 코드로 웹, 안드로이드, ios 앱을 지원한다.

자신의 위치를 기준으로 주변 푸드트럭을 빠르게 살펴보고 주문하여 기다리지 않고 메뉴를 받아만 가는 것이 목표이다.

구현

먼저 데이터의 설계부터 시작하여 이후 이루어지는 모든 개발에 혼란이 없도록 하였다.

• 필요한 데이터와 그들을 정리하고 구별하여 모든 과정에서 통일된 데이터 구조를 가지게 하였다.
• 이를 통해 데이터베이스를 설계하고 서버와의 통신 또한 여기에서 설계된 데이터 단위를 사용한다.

레이아웃은 노트에 직접 그려가며 설계하였다.

• 팀원들이 생각하고 있는 레이아웃을 통일하고, 각각을 컴포넌트로 분리하여 구현한다.
• 컴포넌트별로 분리하여 구현하므로 이후 레이아웃의 수정을 반영하기 쉽다.

필요한 기능은 직접 적용하기 전에 프로토타입을 통해 동작을 이해하고 적용한다.

• ionic 또한 개발 환경을 설정하고 있을때 직접 테스트해서 제안하였다.
• 서버와의 통신과정은 필요한 부분만 node.js로 구현한 뒤, 로컬 서버를 통해 테스트한다.

데이터베이스는 aws RDS에 PostgreSQL을 사용하여 구현하였다.

• 구현할 기능 중 위치 정보를 활용하는 기능이 있어 PostGIS를 설치하여 운영한다.

구현 규칙

유저에게 보여지는 UI와 그 뒤에서 이루어지는 동작을
Component와 Service로 구분하여 구현하였다.

• Component에 Service를 주입하여 사용하며, 여러 Component에 주입하면 이들이 데이터를 공유할 수 있다.
• Component는 사용자의 입력을 Service의 동작으로 연결하거나 Service의 데이터를 출력하는 역할만 수행한다.
• 동작의 수정을 위해서는 Service만 수정하면 되고, UI의 수정을 위해서는 Component만 수정하면 된다.

명확하고 일관성있는 모듈을 구현하기 위해 인터페이스를 적극적으로 활용하였다.

• 서버에 요청하기 위해 필요한 파라미터와 받는 데이터를 먼저 정의하고 인터페이스로 설계하여 서버 개발에 혼란이 없도록 한다.

foodpass's Issues

Tab1 메인화면 만들기

Tab1에 대한 UI 및 모듈 구현하기