Phoneosk

폰오스크 : https://github.com/tnpdlzi/Phoneosk

폰오스크M (점주어플) : https://github.com/tnpdlzi/PhonoskM

폰오스크 JSP : https://github.com/tnpdlzi/PhoneoskJSP

폰오스크 제안서 : https://docs.google.com/document/d/19pcQ1jEzGUDAxSC8q8OjwoYJb2cGWYGvqtNH9KwbkRw/edit

폰오스크 설계서 : https://docs.google.com/document/d/16yB5AGOmpYUH0m8JvX75ScUIgCreVREy9NssbDT0Y7Q/edit

폰오스크 최종 보고서 : https://docs.google.com/document/d/1zcvsctMj3EHM2IqwG3JBGfbkuNKn2maQ2yxDn7vXtFc/edit

프로젝트 개요

1.1 제안 배경

최근 음식점의 문을 열고 들어가면 보이는 것은 손님을 맞는 점원이 아닌, 키오스크(KIOSK)라 불리는 기계이다. 키오스크는 화면에 나타나는 음식의 그림과 가격을 보고 수량을 선택하여 카드를 통해 결제하면 주문이 점주에게 넘어가는 방식인데, 나날이 오르는 인건비에 대응하여 점주가 선택한 해결방안이다. 이 방식은 인건비 절감뿐만 아니라 점원의 실수에 의한 잘못된 주문, 점원과 손님 간의 갈등 등의 문제도 해결할 수 있다는 장점이 있다. 그렇다면 이 키오스크를 어플화하여 스마트폰에 넣으면 어떨까 생각을 하게 되었다. 어플리케이션을 통해 가게의 원하는 자리에 앉아 해당 자리에 있는 QR코드를 스캔하고 가게의 메뉴와 개수를 선택한다. 그럼 해당하는 주문 정보와 테이블 정보가 카운터로 들어가게 되고, 점주가 주문 정보를 확인하면 주문이 완료되는 것이다.

1.2 기능 개요(시스템 구성도)

기능은 크게 메뉴 종류 및 개수 선택, QR코드 스캔을 통한 주문으로 이루어져 있으며, QR코드 스캔 시 주문 정보가 전송될 점주용 어플로 구성했다. 제품 관점에서의 소프트웨어 동작 및 주 기능은 음식에 대한 주문을 메뉴판을 받아서 하는 것이 아닌, 스마트폰을 통해 하는 것이다. 그것을 위해 필요한 것은 가게에 대한 정보, 가게의 메뉴와 가격에 대한 정보, 그리고 주문에 대한 정보, 테이블에 대한 정보가 필요하며, 해당 정보를 점주로 하여금 알게 한다. 세부적 요구사항으로 우선 외부 인터페이스 요구사항부터 될 것이다. 메인 페이지에는 QR코드 화면을 띄울 수 있는 버튼이 있다. QR코드 스캔시, 해당하는 지점에 대한 id를 서버로 보내고, 서버에서 해당하는 id를 데이터베이스에서 검색, 선택하여 다시 어플리케이션으로 반환하여준다. 이 때 서버로 전송하는 값은 가게의 id 뿐이며, 서버는 id를 통해 해당 가게의 이름과 메뉴 목록을 불러오도록 한다. JSON 형식을 통해 전달된 가게 이름과 메뉴, 그리고 가격을 어플리케이션에선 다음 activity로 넘어가 ListView에 item으로 구현하게 된다. 해당 activity에서는 ListView의 item별로 메뉴의 이름과 가격이 적혀있으며 버튼을 통해 음식의 개수를 조절할 수 있게 한다. 원하는 음식의 개수를 선택한 다음 주문하기 버튼을 누르면 해당 값들을 다음 activity로 넘겨주며 다시 확인을 받고, 요청사항을 기입할 수 있도록 한다. 이 때, 음식의 삭제 혹은 더 주문하기 버튼으로 추가주문이나 주문 삭제가 가능하도록 한다. 요청사항 기입이 완료되고 주문하기 버튼을 누르면 QR코드를 인식할 수 있는 화면이 띄워지고, 테이블 정보가 담긴 QR코드를 인식하게되면 마지막으로 주문이 완료되었다는 화면을 띄워주게 된다. 이 때, QR코드의 인식과 동시에 주문 정보와 테이블에 대한 정보가 서버를 통해 점주에게 전송되게 된다. 이를 통해 주문이 완료되게 된다.

1.3 기대 효과

이 서비스의 기대효과 첫 번째로 어플리케이션을 통한 쉬운 접근성에 있다. 어플리케이션 하나만 설치되어있다면 다른 도구가 필요 없이 주문을 쉽게 할 수 있는데, 그렇다면 비싼 키오스크를 구매할 필요도 없고, 점원을 고용하는데 돈을 쓸 필요도 없다. 두 번째 장점은 시간 단축이다. 가게에 두 대밖에 없는 키오스크에 줄을 서며 기다리거나, 점원이 오길 기다릴 필요가 없다. 다른 일을 하느라 바쁜 점원이 메뉴판을 들고 오길 기다릴 필요도 없고 메뉴판을 받은 후에야 메뉴를 볼 수 있는 불편함도 없다. 그저 길을 걸으며 어플리케이션을 켜고 메뉴를 선택하며 자리에 앉아 곧바로 주문하면 되는 것이다. 세 번째 장점은 손쉬운 등록이다. 음식점 메뉴를 데이터베이스에 넣기만 하면 나의 가게 어플이 완성된다. 프랜차이즈 음식점이 아니더라도 자신의 가게 어플을 출시하고 싶은 사람이 있다면 이 오픈 소스를 이용하여 자기 가게만의 특별한 어플을 손쉽게 만들 수 있을 것이다. 이 어플리케이션이 오픈 소스로써 공개가 된다면 많은 다양화가 이루어 질 수 있을 것이다. 제작에 있어서는 음식점을 위주로 만들 것이지만 최근의 피시방, 편의점은 자동화 기기를 통해 직원을 줄이고 있으니 조금만 수정한다면 편의점, 피시방 등 다른 서비스나 물건을 판매하는 곳에서도 유용하게 쓰일 수 있을 것이다. 간단하게 말해서 키오스크가 사용되는 곳이라면 어디든 사용할 수 있는 오픈 소스가 될 것으로 기대하고 있다.

시스템 아키텍처

우리가 만드는 ‘폰오스크’는 시스템 architecture로 MVC모델을 채택하고 있으며, 다음을 각각 뷰, 컨트롤러, 모델로 생각하고 구현한다. 모델 : Java 클래스파일과 Java 클래스파일을 통해 연결되는 jsp 서버 및 데이터베이스를 포함하고 있다. 뷰 : XML형태의 커다란 틀의 역할로, 내부의 액티비티를 담을 수 있는 그릇이 되며 사용자가 보는 화면이다. 컨트롤러 : 핸드폰 어플의 특성상 뷰 레벨에서 제공하는 기능의 제약으로 인해, 컨트롤러인 액티비티가 대부분의 역할을 수행하게 된다. 뷰 내부의 액티비티를 컨트롤러로 생각한다.

주요 기술

본 프로젝트에서 사용한 주요기술은 크게 Android Studio와 JSP, Apache Tomcat, MariaDB, Firebase가 있다. Android Studio는 본 어플리케이션의 기본 구조를 이루고 있으며 내부 설계에 사용한 언어는 XML과 JAVA가 있다. UI는 XML로 구현하였고 내부 기능은 JAVA를 이용하여 구현하였다. 어플리케이션 내의 QR코드 인식 기술은 journeyapps에서 제공하는 zxing이라는 모듈을 사용하여 구현하였다. 화면의 목록 구성은 listview와 item에 대한 adapter를 이용하여 구현하였다. 서버와의 통신을 위해서 AsyncTask라는 함수를 이용해 http 통신을 하였다. 이를 이용해 JSP 서버 통신이 가능했다. 서버를 통한 데이터베이스와의 통신은 JSP 파일을 cafe24라는 호스팅 사이트에 올려 항상 구동 가능하도록 하였고 데이터베이스는 MariaDB를 사용하였다. 서버의 shut down과 start up은 putty를 이용하여 제어하였고 JSP 파일을 호스팅 사이트에 올리는 과정에는 filezilla를 이용하였다. 점주 어플리케이션과의 데이터 통신은 실시간으로 이루어져야하기 때문에 Firebase의 Realtime Database를 이용하여 구현하였다. Firebase를 import하여 realtime DB의 함수들을 가져다 사용할 수 있었다. 코드 관리는 Github을 이용하여 실시하였다. Github을 이용해 코드를 커밋, 풀, 푸쉬, 브랜치 생성 및 머지하는 과정을 실시하였다.

사용자 가이드

● 기능적 요구사항

이 시스템은 고객 사용자가 가게에 대한 정보(메뉴,가격)를 얻을 수 있어야 한다.
이 시스템은 고객 사용자가 메뉴를 확인 및 선택할 수 있어야 한다.
이 시스템은 고객 사용자가 메뉴 수량을 선택할 수 있어야 한다.
이 시스템은 고객 사용자가 버튼을 통해 추가 주문과 삭제가 가능해야 한다.
이 시스템은 고객 사용자가 요청사항을 적을 수 있어야 한다.
이 시스템은 고객 사용자가 영수증을 확인할 수 있어야 한다.
이 시스템은 QR코드를 인식할 수 있어야 한다.
이 시스템은 점주 사용자가 주문 사항을 확인할 수 있어야 한다.
이 시스템은 점주 사용자가 요청 사항을 확인할 수 있어야 한다.
이 시스템은 점주 사용자가 테이블에 대한 정보를 확인할 수 있어야 한다.
이 시스템은 점주 사용자가 주문 정보를 확인할 수 있어야 한다.

● 비기능 요구사항

이 시스템은 모바일 디바이스에서 실행 될 수 있어야 한다.
이 시스템은 자바 언어를 이용해 개발하고, CDB 개발 방법론을 적용해야한다.
이 시스템은 허가 받은 점주만 접근할 수 있어야 한다.
이 시스템은 어플을 사용하는 모두가 편리하게 사용할 수 있어야 한다.
이 시스템은 사용자가 원하는 정보를 빠르게 보여줄 수 있는 성능을 가져야 한다.
이 시스템은 원하는 가게의 정보를 명확하게 제시해 주어야 한다.
이 시스템은 사용자 인터페이스를 일관성있게 만들어 사용자가 메뉴를 손쉽게 쓸 수 있게 해야한다.

위의 내용이 사용자가 사용할 수 있는 기능들이다.

개발자 가이드

개발 언어는 JAVA를 사용하였다.

기본적으로 자바독(Javadoc)의 표준 코멘트를 따른다.
메소드 중 가게 정보에 관한 것은 Store를 붙여 명명하고 메뉴에 관한 것은 Menu를 붙여 명명한다. QR코드에 관한 것은 QR을 붙인다.
액티비티 xml 파일의 이름 앞에는 ‘activity_’를 붙여 명명한다.
아이템에 관한 xml파일은 ‘사용하는 뷰의 종류_item_’을 붙여 명명한다.
xml에서 id를 명명 할 때에는 두 단어의 앞글자를 따서 소문자로, 그리고 원하는 이름의 첫 글자를 대문자로 명명한다. (ex. tvStore : 텍스트 뷰 스토어, imgMenu : 이미지 메뉴 등)
자바 클래스 파일은 연동되어 있는 액티비티와 같은 이름을 갖되, activity_를 빼고 명명하도록 한다.

다음은 소스코드에 대한 간단한 설명이다. 각 클래스별로 UI 구성을 제외한 중요한 구현 코드만 간단한 설명을 작성하였다.

MainActivity.java

메서드 qr과 onActivityResult는 qr코드를 실행하고 해당 qr코드로부터 얻은 값을 받아오는 함수 onActivityResult이다. onActivityResult의 경우 IntentResult result = IntentIntegrator.parseActivityResult(requestCode, resultCode, intent); 다음과 같이 result의 변수에 QR코드로부터 인식된 값을 저장하였고 그 값이 null이 아닐 때 storeID로 저장하였다. 그리고 그 값을 key로써 넣어 HttpAsyncTask 통신을 실시하였다. HttpAsyncTask의 경우 서버로 사용되는 URL과 key값을 넣은 ContentValues가 들어가 서버를 통해 원하는 값을 가져오게 된다. 이 때 doInBackground 메서드의 RequestHttpURLConnection이 사용되며 해당 클래스를 통해 서버로부터 값을 받는다. 그 이후 onPostExecute에서 doInBackground의 리턴값을 파라미터 s로 받아 json형식의 s를 receiveArray 메서드를 통해 풀어 MenuNameParsed와 MenuPriceParsed로 나누어 StringArrayList로 바꾸고 intent를 통해 값을 파싱하게 된다.

MenuActivity.java

MenuActivity에서는 넘어온 MenuNameParsed와 MenuPriceParsed를 intent를 통해 받아오고 각각의 데이터를 adapter를 이용해 item에 넣어준다. 사용자로부터 선택된 MenuName과 MenuPrice, MenuCount를 ArrayList에 담아 다음 화면으로 넘겨준다. 또한 본 화면에서는 MainActivity.java와 같이 HttpAsyncTask 통신을 통해 가게의 정보를 받아왔다.

MenuCartActivity.java

MenuActivity.java로부터 받은 값을 아이템으로 나타내준다. qr 메서드를 다시 호출해 테이블 정보를 인식하고, 해당 값을 받아 onActivityResult의 내에서 firebase를 이용한 점주 어플과의 통신을 실시한다. 위에서 선언한 FirebaseDatabase와 DatabaseReference의 인스턴스를 이용해 통신을 실시한다. 345번째 줄의 databaseReference를 통해 입력받은 가게에 방금 qr코드로 찍은 테이블 정보와 주문 정보를 넘겨줄 수 있다.

FinalActivity.java

FinalActivity에선 사용자가 주문한 내역과 요청사항 등을 출력하는 것으로 끝나게 된다.

데이터베이스는 table 이름으로 Store 와 Menu 의 두 가지가 있다.

Store의 컬럼으로는 storeID, name, address, phone, open, close 가 있고 Menu의 컬럼으로는 storeID, menuID, menuName, price 가 있다.

해당 부분의 데이터를 읽어오는 것은 JSP를 이용한 서버에서 실행되고 있다.

JSP는 자바7, apache tomcat 8.5 버전을 사용중이며 데이터베이스는 mariaDB를 사용한다.

JSP 서버에 관한 자세한 사항은 https://github.com/tnpdlzi/PhoneoskJSP 다음의 링크를 참고한다.

현재 데이터베이스에는 StoreID 1 과 2 만 존재하므로 테스트를 원할 경우에는 QR코드 생성 사이트를 통해 텍스트 1 과 2 만 만들어 테스트해 보면 된다. 1은 서가앤쿡, 2는 맘스터치이다.