큐알코드 리더 앱 개발은 뭘로하면 좋은가요?
농작물을 큐알코드로 관리하고 싶은데 큐알코드 리더가능한 앱을 만들고 싶은데 어떻게 시작해야 할까요?
안드로이드 스튜디오는설치해 봤는데 막상 실전에서는 막히네요. 쉽게 카메라 다룰 수 있는 앱 개발 툴 추천 부탁드립니다.
flutter 로 앱(어플) 만들기
개발 순서
1) New Flutter Project 생성
생성시 중간에 나오는 옵션 Platform channel language
Include Kotlin support for Android Code 옵션 체크
Include Swift support for iOS code 옵션 체크
2) /pubspec.yaml (barcode_scan plugin 사용, http://pub.dev, 사용법 git 정보 확인)
3) /android/app/src/main/AndroidManifest.xml 수정
4) /ios/Runner/Info.plist 수정
5) /android/build.gradle 수정
6) /lib/main.dart 소스 수정
7) 핸드폰 연결 후 테스트
(개발자 옵션 활성화 시키신 후 android USB 디버깅 모드가 켜져 있어야 합니다)
1) android studio 실행 시키신 후
메뉴 File/New/New Flutter Project 클릭해서 실행 합니다.
Flutter Application 선택하셔서 Next 로 진행하시면 중간에 옵션 선택 메뉴가 나옵니다.
아래 그림처럼 Kotlin, Swift 옵션 선택 후 진행합니다.
Include Kotlin support for Android code, Include Swift support for iOS code 선택
*Kotlin 은 google 에서 Android 개발 언어로 java 에서 kotlin 으로 밀고 있는 개발 언어 입니다.
*Swift 또한 apple 에서 ios 개발 언어로 object c 에서 swift 로 변경되고 있는 개발 언입니다.
**Kotlin 옵션은 저희가 이용한인 barcode_scan plugin 이 kotlin 으로 개발되어 있어서 입니다.
***Kotlin 으로 되어진 plugin 이 많고 나중에 가게 되면 native 코드를 건드려야 하는
경우가 많이 생기기 때문에 Kotlin, Swift, Java 등은 조금씩 공부해 놓으시고
프로젝트 생성시 옵션을 kotlin, swift 선택하시면 좋을 것 같습니다.
2) pub.dev 사이트에서 barcode_scan 검색 후 간단한 플러그인 사용법 등을 확인 합니다.
3) 관련 파일 수정
3-1) /pubspec.yaml : barcode_scan: ^1.0.0 추가
3-2) /android/app/src/main/AndroidManifest.xml
다음의 권한 추가
<uses-permission android:name="android.permission.CAMERA" />
3-3) /ios/Runner/Info.plist
다음의 권한 추가
<key>NSCameraUsageDescription</key>
<string>Camera permission is required for barcode scanning.</string>
3-4) /android/build.gradle 수정
ext.kotlin_version = '1.3.20'
classpath 'com.android.tools.build:gradle:3.3.1'
buildscript {
ext.kotlin_version = '1.3.20'
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.3.1'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
kotlin_version 및 classpath 의 gradle 버전을 수정하셔야 합니다. 맞지 않으면 빌드가 제대로 되지 않습니다.
4) /lib/main.dart 수정
import 'dart:async';
import 'package:barcodescan/barcodescan.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatefulWidget {
@override
MyAppState createState() => new MyAppState();
}
class _MyAppState extends State<MyApp> {
String barcode = "";
@override
initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Barcode Scanner Example'),
),
body: new Center(
child: new Column(
children: <Widget>[
new Container(
child: new MaterialButton(
onPressed: scan, child: new Text("Scan")),
padding: const EdgeInsets.all(8.0),
),
new Text(barcode),
],
),
)),
);
}
Future scan() async {
try {
String barcode = await BarcodeScanner.scan();
setState(() => this.barcode = barcode);
} on PlatformException catch (e) {
if (e.code == BarcodeScanner.CameraAccessDenied) {
setState(() {
this.barcode = 'The user did not grant the camera permission!';
});
} else {
setState(() => this.barcode = 'Unknown error: $e');
}
} on FormatException{
setState(() => this.barcode = 'null (User returned using the "back"-button before scanning anything. Result)');
} catch (e) {
setState(() => this.barcode = 'Unknown error: $e');
}
}
}
5) 핸드폰 연결 후 실행 : 상단의 에뮬레이터를 사용하시는 핸드폰으로 변경해 주세요.
큐알코드나 바코드를 찍으면 저장되어 있던 정보가 텍스트로 나타나게 됩니다.
안녕하세요.
Androdi Studio 에서 아래와 같이 한번 따라해 보시면 쉽게 제작이 가능하십니다.
build.gradle ( App 레벨 ) 설정 - SDK 19+
zxing-android-embedded는 QRCode와 관련된 내용들을 사용하기 위해 추가하며, appcompat은 최소 23이상이 필수 입니다.
dependencies { implementation 'com.android.support:appcompat-v7:27.1.1' implementation 'com.journeyapps:zxing-android-embedded:3.6.0' }※buildToolsVersion을 사용한다면 27.0.3 이상 버전을 이용해야합니다, 그렇지 않으면 컴파일 에러가 발생할 수 있습니다.
build.gradle ( project 레벨 ) 설정
repositories { jcenter() }build.gradle ( App 레벨 ) 설정 - SDK 14+ ( 19버전 미만을 타겟으로 하는 앱은 아래와 같은 설정을 해야합니다. )
appcompat는 최소 23이상 버전이 필수 입니다.
dependencies { implementation 'com.google.zxing:core:3.3.0' implementation ('com.journeyapps:zxing-android-embedded:3.6.0') { transitive = false } implementation 'com.android.support:appcompat-v7:27.1.1' }※buildToolsVersion을 사용한다면 27.0.3 이상 버전을 이용해야합니다, 그렇지 않으면 컴파일 에러가 발생할 수 있습니다.
repositories { jcenter() }
build.gradle ( project 레벨 ) 설정AndroidManifest 설정
AndroidManifest.xml에 하드웨어 가속 옵션을 true로 설정합니다. 하드웨어 가속은 텍스처뷰를 사용하기 위해선 추가하는 옵션으로
그래픽 처리를 할때 GPU를 사용하여 그리는 방식입니다.
<application ..... android:hardwareAccelerated="true"바코드 스캔
가장 간단한 방법으로 바코드를 스캔하는 소스 입니다. onCreate부분이나 버튼 클릭이벤트등의 아래 코드를 넣으면 스캔이 시작됩니다.
IntentIntegrator intentIntegrator = new IntentIntegrator(this); intentIntegrator.setBeepEnabled(false);//바코드 인식시 소리 intentIntegrator.initiateScan();setBeepEnabled를 true로 설정할경우 바코드 인식시 '삑' 하는 소리가 납니다.
데이터 추출
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
IntentResult result = IntentIntegrator.parseActivityResult(requestCode, resultCode, data);
if(result != null) {
if(result.getContents() == null) {
Toast.makeText(this, "Cancelled", Toast.LENGTH_LONG).show();
} else {
Toast.makeText(this, "Scanned: " + result.getContents(), Toast.LENGTH_LONG).show();
}
} else {
super.onActivityResult(requestCode, resultCode, data);
}
}
위처럼 간단한 코드로 qr코드를 인식하고, 그 결과값을 추출할 수 있습니다.
말씀처럼 전문적인 안드로이드앱 개발을 위해서는 안드로이드 스튜디오를 많이 사용합니다.
하지만, 취미 또는 개인적인 앱개발을 간단하게 구현하시려면 아래 툴을 추천드립니다.
kodular.io
앱인벤터 기반의 GUI와 이벤트 방식의 네이티브 앱개발 툴인데 블록코딩을 이용하기 때문에 텍스트 코딩은 거의 필요하지 않습니다.
블록코딩으로 유명한 스크래치 언어를 사용했는데 기본적인 알고리즘 응용이 가능하시다면 사용해 보시면 많은 도움이 되리라 생각됩니다.
앞에서 취미라고 말씀드렸지만 사실 상용 앱개발도 가능할 만큼 QR Reader를 포함하여 상당히 많은 라이브러리가 기본적으로 준비되어 있고 게다가 무료로 앱제작이 가능합니다.
생각보다 국내에서는 많이 알려지지 않았는데 해외에서는 고급 난이도급의 앱개발도 진행중이고 전문적으로 앱을 개발하여 활동하시는 분들도 많습니다.
Third party로 라이브러리만 만들어서 무료로 배포하거나 유료(대부분 몇 천원대)로 판매하는 경우도 많기 때문에 라이브러리만 찾아서 이용하거나 또는 라이브러리만 개발의뢰를 하고 나머지는 라이브러리를 활용해 간단하게 추가 작업을 진행하는 경우도 가능합니다.
자세한 사용방법은 아래 사이트에서 보실 수 있습니다. 관련된 유투브도 많기 때문에 참고해 보시면 좋을것 같습니다.
영문 사이트이지만 크롬에서 한글번역으로 쉽게 내용을 보실 수 있습니다.
도움이 되셨기를 바랍니다. ^^
안드로이드에서는 아래 라이브러리를 많이 사용해서 QR코드를 인식했었습니다.
https://github.com/zxing/zxing
최근에도 많이 쓰이는지는 모르겠지만 많은 앱들이 zxing이라는 라이브러리를 가져다가 만들었습니다.
아래 블로그를 따라하면 쉽게 연동이 가능할것 같습니다.
Zxing 를 사용하여 많이 개발 합니다. 블로그나 구글에 많은 자료가 있습니다.
Zxing 는 구글에서 제공하는 오픈소스로 Zebra Crossing의 약자입니다.
QR코드 스캔 어플리케이션의 대다수가 이 어플리케이션을 이용했다고 해도 과언이
아닐정도로 널리 쓰이고 있는 코드입니다.
글에서 제공하는 오픈소스이고
대부분의 QR코드 바코드 스캔 APP들이 사용하고 있는 유명한 라이브러리입니다
동작순서는 아래와 같습니다.
- 카메라를 연 후 프리뷰를 가동한다.
- 카메라로부터 지속적으로 영상을 받아들인다. [2]
- 영상에서 밝기값만 추출[3]하여 이를 기반으로 이진화를 수행한다.[4]
- Detector 클래스를 통해 QR코드 영역을 찾아냈다.
- 찾아낸 영역을 Decoder 클래스를 통해 해석한다.
- 결과 값과 결과 영상을 리턴
- 결과 값을 분석하여 URL일 경우 탭하면 인터넷으로 연결되도록 한다.
- 화면에 결과 영상과 결과 값을 출력한다.
