[Appgyver] 바코드 스캐너를 이용한 유통 바코드 조회

식품의약품안전처 제공 API 보다보니 유통바코드 정보가 있어 물류는 잘 몰라 조금 찾아보니 상품 바코드와는 다른 개념인 듯 합니다.

Appgyver의 바코드 스캐너를 이용해 바코드 조회 결과를 보여주는 App을 만들어 보겠습니다.

 

우선 API 구조를 살펴보겠습니다.

아래 링크로 들어가 식약처 URL로 이동한 다음 회원가입하고 신청하면 다음날쯤 API KEY를 줍니다.

 

https://www.data.go.kr/data/15064775/openapi.do

식품의약품안전처_유통바코드

 

 

요청 URL 구조는 아래와 같습니다. 기본 요청 값은 URL Path에 포함되고 추가 옵션은 파라미터로 들어갑니다.

 

요청인자값 중 5번까지는 필수입니다. 그리고 6번부터는 옵션인데 여기서는 바코드정보를 넘겨야하므로 9번 값만 요청인자에 추가하면 됩니다.

필수값 중 serviceId에 대한 값 설명이 없습니다. 어쩔수 없이 위에 있는 샘플에 표시된 I2570값을 쓸 예정입니다.

그리고 요청파일 타입은 json, 요청시작위치와 요청종료위치는 필수값인 1번, 5번을 넣습니다.

 

 

응답값은 아래와 같이 별 내용없습니다. 여기서는 제품명, 바코드번호, 제품명 정도만 보여주겠습니다.

 

 

이제 테스트를 해보겠습니다. 요청 URL은 아래와 같습니다.

{api key} 부분은 발급받은 api key를 넣으면 됩니다. 또한 바코드 번호는 샘플 페이지에 있는 바코드 정보를 넣었습니다.

 

 

응답값에 대한 구조는 서비스명 (I2570) 하위로

RESULT : 결과값

total_count : 검색된 총 수량

row : 검색결과 리스트

총 3부분입니다. 여기서는 바코드 번호로 조회했고 바코드 정보는 Uniqe한 값이기 때문에 하나만 옵니다.

(정말 별 내용 없습니다.)

 

 

이제 composer pro로 들어가 app을 생성하겠습니다.

 

 

대략적인 프로세스는

1. 바코드 Scan 버튼을 클릭

2. 카메라 모드로 변환되어 바코드가 발견되면 정보 전송

3. API로 바코드 정보 조회

4. 조회된 바코드 정보 화면에 표시

로 구성할 예정입니다.

 

화면 구성은 한 페이지로 표시할 정보와 Scan 버튼입니다.

페이지 레이아웃은 아래 PAGE LAYOUT 이미지 참고 하시면 됩니다.

 

 

식약처 API 관련 셋팅을 해야 합니다.

상단 네비게이션 DATA 버튼을 클릭하고 우측 ADD DATA RESOURCE를 클릭한 다음 REST API direct integration을 클릭합니다.

 

 

먼저 BASE 정보를 입력합니다.

ResourceID는 barcodeResource

Resource URL은 https://openapi.foodsafetykorea.go.kr/api 

까지 입력하고 저장합니다.

 

 

다음으로 좌측 메뉴 중 GET COLLECTION (GET)을 클릭합니다. 이 부분은 리스트 형태의 데이터를 정의하는 부분으로 유통바코드 조회는 단일 데이터만 넘어오기 때문에 사용하지 않습니다.

따라서 우측 상단 Method enabled를 체크 해제 합니다.

그리고 POST, PUT, DELETE 모두 사용하지 않기 때문에 GET RECORD (GET)을 제외한 나머지 메뉴 모두 Method enabled를 체크 해제 합니다.

 

 

이제 GET RECORD (GET)으로 들어가 나머지 값을 셋팅해야 합니다. BASE에서 정한 path이후 값은 파라미터 값이 아니기 때문에 URL placeholder에 정의합니다.

key 필드에 입력한 값은 Relative path에 동일하게 입력해야 합니다.

barcode값을 제외한 나머지 모든 값은 고정된 static값입니다.

또한 barcode값은 바코드 스캐너로 값을 전달 받아야 하기 때문에 여기서는 값이 없으므로 default로 하면 안되고 옵션으로 설정해야 합니다.

다음으로 위 셋팅을 테스트 해야합니다. 테스트를 하는 목적은 셋팅값이 잘 되는지 확인도 있지만 응답값으로 스키마를 저장해야해서 꼭 해야합니다.

다시 GET RECORD 메뉴로 들어가 TEST탭을 눌러 테스트 데이터 입력 후 RUN TEST 버튼을 클릭하여 응답값을 확인합니다.

 

 

이제 응답값으로 스키마를 저장합니다. RUN TEST 하단 SET SCHEMA FROM RESPONSE 버튼을 클릭하여 저장된 스키마를 확인하고 저장합니다.

참고로 응답값으로 스키마를 정하지 않고 구조에 맞게 필요한 property만 수동으로 직접 정의할 수 있습니다.

 

 

이제 페이지에서 사용 할 data variable 설정을 하겠습니다. 상단 VARIABLES을 선택하고 우측 DATA VARIABLES를 선택하고 우측 ADD DATA VARIABLE을 선택, 다음으로 resource 이름인 barcodeResource를 선택합니다.

 

 

Data variable name은 getBarcodeData로 정의하겠습니다. 또한 위 예제에서 보았듯이 데이터는 리스트 형태가 아닌 하나의 값만 오는 형태이므로 Single data record를 선택합니다. bacord 변수는 Data resource 정의 시 옵션으로 했기 때문에 지정 안해도 됩니다.

 

 

다음으로 이 DATA VARIABLES 생성에도 logic이 있습니다. Data variable을 선택한 상태에서 하단 Show logic for ~ 를 클릭하면 data record를 불러오는 logic이 자동으로 구현되어 있습니다.

 

 

자동으로 구현된 logic은 data resource를 이용한 fetch 작업에 특화된 logic으로 지금과 같이 바코드 스캐너를 통한 데이터 작업에는 맞지 않는 logic이라고 합니다.

따라서 이 logic은 삭제해야 합니다.

 

* 참고 이 부분은 제가 그런게 아니라 Appgyver Academy 강사의 말입니다. 솔직히 저도 이해가 안갑니다. ㅠㅠ 또, 삭제 안하고 한번 만들어 봤는데 역시 안됩니다. 참고하시기 바랍니다.

 

아무튼...

logic을 삭제하고 저장합니다. 삭제는 컴포넌트 선택 후 delete키 누르면 됩니다.

 

 

이제 VIEW화면으로 돌아와 바코드 Scan 버튼에 대한 logic을 정의해야 합니다. 버튼을 클릭하고 하단 add logic to ~ 를 클릭합니다.

 

 

처음 이벤트는 컴포넌트를 tap했을 때 입니다. 처음 계획대로 바코드 Scan 버튼을 tap하면 바코드를 읽을 수 있는 카메라 모드로 전환해야 합니다.

좌측 컴포넌트 화면에서 Scan QR/barcode 선택하고 우측 logic창으로 끌어옵니다. 다음 두 컴포넌트를 연결해줍니다. 좌에서 우로 점을 클릭해서 끌어서 다음 컴포넌트 점까지 이동하면 됩니다.

 

 

다음은 카메라가 바코드를 인식한 후 다음 logic은 스캐너로 읽은 바코드 값을 Data Resource의 GET RECORD로 넘겨 데이터를 받아와야 합니다.

좌측 컴포넌트 화면에서 Get record를 선택하고 logic창에 끌어 옵니다.

다음으로 Scan 컴포넌트와 Get record를 연결해야 하는데 Scan 컴포넌트 우측에는 3개의 점이 있습니다. 즉, output이 3개라는 이야기입니다. 어떤 점을 연결해야하는지에 대한 정보는 Scan 컴포넌트를 선택하고 우측 상단 OUTPUTS 탭을 클릭합니다.

OUTPUTS AT PORT1, 즉 첫번째 점이 성공 시 출력 값입니다. 따라서 첫번째 점과 Get record를 연결해줍니다.

 

 

다음으로 Get record를 선택하고 우측 화면에서 Resource name과 barcode값을 설정해줘야 합니다. Resource name을 클릭하고 barcodeResource를 선택한 후 SAVE합니다.

다음으로 barcode를 클릭하고 Output value of anther node > Scan QR/barcode > Scan QR/barcode / QR barcode content를 선택한 후 SAVE합니다.

 

 

Get record를 통해 조회한 데이터를 저장할 변수를 정의해야 합니다. 우측 컴포넌트 화면에서 Set data variable을 선택하고 logic창으로 끌어옵니다. 마찬가지로 Get record가 성공 했을 때 output는 첫번째 점으로 두 점을 연결합니다.

 

 

다음으로 Set data variable을 선택하고 우측 화면에서 Data variable name을 선택, getBarcodeData 변수를 선택 후 SAVE합니다.

또, 하단 data를 선택하고 Output value of another node > Get record > Record를 선택 후 SAVE합니다.

 

 

logic창을 닫고 전체 SAVE합니다.

이제 화면에 어떤 값을 표시할지만 정의하면 끝납니다.

제품명인 있는 Paragraph를 선택하고 우측 Content를 선택합니다.

Formula를 선택하고 Formula부분을 클릭하면 값 입력 화면으로 변경됩니다.

여기서 data.getBarcodeData.I2570.row[0].PRDT_NM 값을 입력하고 SAVE합니다.

Data resource에서 정의한 스키마에는 row가 리스트형태이고 그 안에 제품명이 있습니다. 따라서 바코드 조회는 하나의 값만 조회되기 때문에 row[0]으로 사용자 정의하여 값을 설정합니다.

 

 

나머지 제조사, 바코드도 동일한 방법으로 설정합니다.

 

 

모두 끝났습니다.

프로젝트 저장하고 휴대폰으로 확인해봅니다. (저장 잊으면 안됩니다. 휴대폰에 반영 안됩니다.)

 

테스트는 싱크대에 있는 맥심 커피 박스로 했습니다. 일반 상품은 조회가 안됩니다.

App을 실행하면 처음에는 아무것도 없습니다. 바코드 Scan 버튼을 클릭합니다.

 

 

스캐너 카메라가 작동되고 바코드 가까이 화면을 가져갑니다.

 

 

 

바코드가 인식되면 화면이 꺼지고 처음 화면에서 식약처에서 조회한 정보를 표시해줍니다.

 

 

 

금방 끝날 줄 알았는데 의도와는 다르게 게시글이 길어졌습니다.

역시 Appgyver는 어렵습니다.

 

 

유통 바코드 조회 앱은 아래 정보를 참고하여 제작하였습니다.

https://www.youtube.com/watch?v=3TjnZICEf9I