Code Scanner

안녕하세요. 그린입니다🟢

이번 포스팅에서는 Code Scanner에 대해 배워보려합니다💁🏻

 

요즘 코시국에 참 QR 코드도 많이 사용되죠.

그래서 코드 스캔을 할 수 있도록 코드 스캐너에 대해서 간단히 배워보려해요!

우선 저는 Paul Hudson님이 만드신 라이브러리인 Code Scanner 라이브러리를 사용하려고 합니다🙋🏻

https://github.com/twostraws/CodeScanner

GitHub - twostraws/CodeScanner: A SwiftUI view that is able to scan barcodes, QR codes, and more, and send back what was found.

세부 라이브러리 구현 파해쳐보는건 건너뛰고 우선 이 라이브러리를 어떻게 사용하고 활용할 수 있는지 보겠습니다.

 

아 참고로 SwiftUI에서 프로젝트를 진행하였습니다🙏🏻

 

Code Scanner 라이브러리 사용하기

1. SPM으로 해당 라이브러리 추가

요기 프로젝트 타겟으로와 General > Framework...Libraries...에서 해당 라이브러리 주소를 통해 손쉽게 등록해줍니다.

 

2. Info.plist 파일에서 카메라 접근권한 설정

코드 스캔을 하기 위해서는 카메라를 통해 스캔해야됩니다.

이에 사용자가 해당 앱에서 카메라 기능을 사용할 수 있도록 Info.plist 파일에서 권한 설정을 해주도록 합니다.

해당 Row를 추가하여 Privacy - Camera Usage Description 항목을 추가해줍니다.

카메라 사용 설정을 위해 안내 문구는 원하는데로 지정해줍니다☺️

 

3. 구현하기

메인뷰에서 시트뷰로 해당 코드 스캐너를 띄우는 뷰와 기능을 정의해줍니다.

백문이 불여일견.. 코드로 보시죠!

import SwiftUI
import CodeScanner

struct QRView: View {
  @State private var isShowingScanner = false
  
  var body: some View {
    Button(action: {
      self.isShowingScanner = true
    }) {
      Text("Scan QR Code")
    }
    .sheet(isPresented: $isShowingScanner) {
      CodeScannerView(
        codeTypes: [.qr],
        simulatedData: "Some simulated data",
        completion: self.handleScan
      )
    }
  }
  
  private func handleScan(result: Result<String, CodeScannerView.ScanError>) {
    self.isShowingScanner = false
    
    switch result {
    case .success(let data):
      guard let url = URL(string: data) else { return }
      UIApplication.shared.open(url)
    case .failure(let error):
      print("Failed Scan QR Code because of \(error)")
    }
  }
}

isShowingScanner 상태변수를 통해 코드 스캐너 시트 뷰를 띄울지 말지를 결정해줍니다.

본격적으로 간단히 메인 뷰 바디에 버튼 하나를 넣어 클릭 액션으로 상태변수의 값을 변경해줍니다.

sheet 메서드로 코드 스캐너 뷰의 노출여부를 결정해줍니다.

CodeScannerView는 라이브러리에서 구현되어 있기에 가져다 쓰면 됩니다.

필요한 인자로 codeTypes과 completion을 줍니다.

코드 타입에는 보시면 정말정말 많은 스캐너 타입이 있지만 저는 우선 QR 코드만 지정해줍니다.

어레이 타입임으로 아래 같이 다양한 코드를 스캔할 수 있어요..!

codeTypes: [.qr, .code128, .upce]

그리고 스캔되었을때 어떤 동작을 할지 컴플리션으로 지정해줍니다.

저는 내부 프라이빗 메서드로 handleScan 메서드를 만들었습니다.

Result 타입의 결과를 받습니다.

실패 시 디버그 메시지가 간단히 찍히도록 하였고,

스캔 성공 시 해당 스캔 코드의 URL로 이동하도록 구성해주었습니다.

또한 컴플리션에서 스캐너 뷰를 닫도록 상태변수를 false 시켜줍니다.

 

코드 스캐너 동작 화면

그럼 이제 아주아주 정말 간단히 완성된 코드 스캐너 동작 화면을 보시죠!

참고로 Xcode 시뮬레이터에서는 카메라 기능을 사용할 수 없기에 디바이스 환경에서만 테스트 해볼 수 있습니다.

 

마무리

코드 스캐너 정말 라이브러리로 간단하죠?

대신 커스텀하게 하려면 직접 건드려야될것 같네요!

그래도 재밌는거 하루에 하나씩 해보고 있어서 나름 좋습니다🙌

아 참고로 해당 프로젝트 파일을 아래 제 깃헙 레포에 올려두었으니 호옥시나 필요하신분이 있다면

보시거나 빌드해보시길...!

https://github.com/GREENOVER/playground

GitHub - GREENOVER/playground: 학습을 하며 간단한 예제들을 만들어 보는 작고 소중한 놀이터

 

[참고자료]

https://github.com/twostraws/CodeScanner

GitHub - twostraws/CodeScanner: A SwiftUI view that is able to scan barcodes, QR codes, and more, and send back what was found.