앱 인벤터 QR 코드 스캐너 만들기

안녕하세요. 코딩하는 맹꽁이입니다.

 

이번 글에서는 앱 인벤터로 QR 코드를 스캔하여 결과를 나타내주는 QR 코드 스캐너를 만들어보겠습니다.

이번에 만들 앱은 꽤 간단하니 잘 따라해보세요!

 

1. 컴포넌트 불러오기 및 디자인

가장 중요한 바코드스캐너, 액티비티스타터, 공유, 알림 컴포넌트를 추가해주세요.

버튼 배치, 색, 스타일은 마음대로 해주세요!

저는 이렇게 간단하게 만들었어요.

여러분은 더 예쁘게 꾸며보세요 :)

 

그리고 중요한 부분!

바코드스캐너 속성에서 외부스캐너사용 항목을 체크해제해주세요.

안그러면 기기에 설치된 스캐너를 불러와 스캔하게 되는데 기기에 스캐너가 설치되어있지 않으면

경고가 뜨거든요.

이미지 처럼 체크 해제

 

2. 코딩하기

이제 코딩할 차례입니다.

간단하지만 다양한 내용이 포함되어있으니 잘 봐주세요!

 

먼저 스크린이 초기화(시작)되었을 때 실행하는 블록입니다.

위에 디자인에서는 너비를 부모 요소에 맞췄지만 그렇게 하면 부자연스럽기 때문에 스크린의 너비보다 더 작게 설정했습니다.

디자인에서만 설정하면 원하는 모양이 안 나오거나 짤리거나 너무 작을 수 있습니다.

그래서 블록 화면에서 디자인 해주는 것도 좋은 방법이에요.

원하는 대로 설정해보세요.

 

그리고 카메라 권한을 요청합니다. 이 블록은 스크린에 있어요. 

없어도 자동으로 요청하지만 구글 플레이에 업로드 할 때 필요하기 때문에 넣어줍니다.

그리고 스캔을 시작합니다.

 

이 블록도 중요합니다. 아까 카메라 권한을 요청했었는데 만약 그 권한을 거부한다면?

알림을 내보내고 앱을 종료시킵니다.

 

이 블록은 스캔 후에 실행하는 블록입니다.

결과를 표시할 레이블의 텍스트와 결과 URL로 이동할 액티비티스타터(주로 지정된 URL을 기기에 설치된 브라우저로 이동시키는 역할로 쓰입니다.)의 데이터URL을 스캔한 결과로 지정합니다.

그리고 액티비티스타터의 동작 값도 요상한 문자로 지정해줬는데 동작을 이렇게 입력시켜주면 데이터 URL을 브라우저로 이동시키도록 지정하게 됩니다.

 

버튼 열기, 공유하기, 스캔하기를 클릭했을 때 실행하는 블록입니다.

열기 버튼을 클릭하면 아까 지정한 액티비티스타터를 시작해서 웹을 열고,

공유 버튼을 클릭하면 결과를 공유하고,

스캔 버튼을 클릭하면 다시 스캔을 시작합니다.

이건 이해하기 쉽죠?

 

3. 앱 기본 설정

이제 앱 기본 설정을 해줍니다.

앱 이름, 아이콘을 지정해주겠습니다.

Screen1 속성에서 앱 이름과 아이콘을 지정해줍니다.

앱 인벤터는 앱의 모든 설정을 Screen1 속성에서 진행합니다.

아이콘을 만들기 어렵다면 이 이미지를 퍼가세요. 제가 만들었습니다.

 

4. 앱 빌드 및 기기에 설치

이제 여러분 핸드폰에 여러분이 만든 앱을 설치해볼 차례입니다.

두근두근 기대됩니다!!!

상단 메뉴의 빌드>Android App (.apk) 를 클릭하여 빌드를 시작합니다.

로딩이 시작되고 있습니다!

이제 기다려주세요.

로딩이 끝나면 이미지와 같이 다운로드 버튼, QR 코드가 나올거에요.

핸드폰에 바로 설치하러면 QR 코드를 스캔해서 다운로드 받습니다.

기본 카메라로 스캔할 수 있고 안된다면 QR 코드 스캐너 앱을 다운받아주세요.

하지만 우리는 QR 코드 스캐너 앱이 필요 없습니다.

지금 만들었기 때문이죠!

잘 완성되었네요.

저는 이걸 응용하여 더 멋진 QR 코드 스캐너 앱을 만들었어요.

QR 코드 스캐너 - Google Play 앱

QR 코드 스캐너 - Google Play 앱

바로 이 앱이죠!

기본 기능 뿐만 아니라 스캔 결과 기록, 클립보드 복사, 외부 스캐너로 스캔 기능까지 있어요.

앱 인벤터로 만든 앱 주제에 70명이나 다운로드했고 배너광고도 나와서 1500원이나 벌었어요!

물론 창출은 못하지만...

 

다음 글에서는 이 앱을 조금 더 손볼 예정입니다.

스캔 내용의 QR 코드 생성, 클립보드 복사, 배너 광고를 넣을 예정입니다.

기대해주시고 공감 눌러주세요!