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

• 목록

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

목차

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

1.버튼에 로직 추가하기

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

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

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

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

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

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

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

3.알람 요소 추가하기

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

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

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

4.요소 바인딩하기

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

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

Output value of another node를 클릭하세요.

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

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

Save 버튼을 눌러주세요.

5.저장과 미리보기

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

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

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

예시: