본문 바로가기

SAP 사용자들의 오픈 커뮤니티

튜토리얼
SAP Business Technology Platform(BTP)

SAP App Gyver Unit3. 모바일 카메라를 활용하여 바코드 스캐너 앱 구성하기

페이지 정보

본문

모바일 카메라를 활용하여 AppGyver 바코드 스캐너 앱 구성하기

 

 

 

목차

 

  1. 버튼에 로직 추가하기
  2. 스캔 QR/바코드 컴포넌트 추가하기
  3. 알람 요소 추가하기
  4. 요소인딩하기
  5. 저장과 미리보기

 

 

1.버튼에 로직 추가하기

 

 

 

앱가이버정에서 초안 어플리케이션을 여세요. 여러분의 바코드 스캐너 앱이 보여집니다.

 

Scan 버튼을 클릭한 Add Logic to BUTTON1 클릭하세요.

 

 

Add logic to button

 

 

 

2.스캔 QR/바코드 컴포넌트 추가하기

 

 

 

로직 패널에서 사용자가 응용프로그램 내에서 버튼을 누를 Event - Component Tap 확인할 있습니다.

 

핵심 로직 컴포넌트를 사용하여 Device - Scan QR / barcode 구성 요소까지 아래로 스크롤 다음, 이를 로직 편집기로 끌어다 놓습니다.

 

이것은 앱가이버 계정 내에서 사용 가능한 많은 하나인 사전 제작된 QR/ barcode 스캐너 구성 요소입니다.

 

 

Add Scan QR logic to logic editor

 

 

기존 Component Tap 연결을 클릭 장치 커넥터에 대한 연결을 수동으로 그립니다. 이 커넥터는 단순히 플로우의 방향을 나타내며, 이 경우에는 버튼이 탭된 다음 카메라 장치가 열리게 됩니다.

 

 

Manually draw a connector between the elements

 

 

3.알람 요소 추가하기

 

 

 

QR/바코드 스캐너가 작동하는지 테스트하기 위해 응용 프로그램에 Alert 구성 요소를 추가하려고 합니다. 이렇게 하면 바코드가 스캔되면 팝업 경보가 표시되고 바코드 번호가 화면에 표시됩니다.

 

이를 위해 코어 로직 옵션으로 돌아가서 경보로 스크롤한 다음 QR/barcode 스캔 로직과 함께 이 옵션을 끌어다 놓으십시오.

 

 

Add an alert logic

 

 

상단 QR / barcode 옵션과 Alert 요소 사이에 플로우 방향을 다시 나타내는 커넥터를 추가합니다.

 

 

Add connector to the alert element

 

 

4.요소인딩하기

 

 

알림이 현재 정적 텍스트 응답만 표시하도록 설정되어 있으므로 여기에 동적 바인딩을 추가하려고 합니다. 이를 통해 앱에 바코드를 스캔하는 대신 어떤 정보를 제공해야 하는지 알려줄 수 있습니다.

 

이렇게 하려면 Alert 요소를 선택하고 속성 패널을 사용하여 Currently bound to : Static text를 클릭하여 바인딩 옵션 화면을 엽니다.

 

 

Currently bound to element

 

 

Output value of another node 클릭하세요.

 

 

Output value of another node

 

 

 

다음에 대한 바인딩을 구성합니다.

 

  • Select logic node – Scan QR/barcode
  • Select node output – Scan QR/barcode / QR barcode content

 

 

Save 버튼을 눌러주세요.

 

Edit binding and then click Save

 

 

 

5.저장과 미리보기

 

 

Save application

 

 

이제 여러분의 기기를 이용하여 AppGyver Preview 앱에서 푸드 상품 바코드로 테스트가 가능합니다.

 

 

 

Open smart phone app

 

Scan 버튼을 클릭하면 이제 자동으로 카메라가 열릴 것입니다.

 

Tap scan button

 

 

아직 이벤트에 대한 추가 정보가 구성되지 않아 바코드를 스캔하면 바코드 번호만 반환됩니다.

 

 

 

예시:

 

View results

 

 

추천1

댓글목록

등록된 댓글이 없습니다.

이용약관
개인정보처리방침