iOS Tutorial - So integrieren Sie unseren Document Scanner

This article will show you how fast and easy it is to create an app with Scanbot SDK integrated. Let's go...

Erste Schritte

Voraussetzungen

• macOS mit der neuesten Version von Xcode
• iOS-Gerät mit iOS 11 oder höher

Erstellung einer iOS-App

Let's start by creating a new iOS project.

Für dieses Tutorial werden wir ein Swift-Projekt mit Hilfe von Storyboard erstellen.

So beginnen Sie ein neues iOS-Projekt:

•  Gehen Sie in Xcode zu File -> New -> Project...
•  Vergewissern Sie sich, dass Sie den Tab iOS ausgewählt haben, und wählen Sie dann App
•  Benennen Sie das Projekt, z. B MyAwesomeIOSApp
•  Wählen Sie Storyboard als Interface.
•  Wählen Sie Swift als Programmiersprache.

Installation des Scanbot SDK

Sie können das Scanbot SDK über den Swift Package Manager, CocoaPods, Carthage, XCFramework or download and add the Scanbot SDK package manually. In this tutorial, we'll use Swift Package Manager.

So fügen Sie das Scanbot SDK für iOS mit dem Swift Package Manager hinzu:

• Gehen Sie in Xcode zu File -> Swift Packages -> Add Package Dependency...
• Fügen Sie dann die URL des Scanbot SDK für iOS – git@github.com:doo/scanbot-sdk-ios-spm.git – in das entsprechende Feld ein.

Führen Sie einen Testlauf durch

• Passen Sie in Xcode die Einstellungen zum Signing / Developer Account an.
• Schließen Sie ein iOS-Gerät per USB an. 
• Starten Sie die App.

Sie sollten nun einen leeren Bildschirm sehen.

Vorbereitungen

Before implementing any functionalities, we need to prepare our app for Scanbot SDK usage. Let's start by adding support for using the camera API. To do that, you need to add the NSCameraUsageDescription to the Info.plist -Datei hinzu:

• Gehen Sie zur Datei Info.plist.
• press the + button and type "Privacy - Camera Usage Description" then briefly explain why you need access to the camera, e.g. "Camera access is required to scan documents".

Hinweis! Wenn Sie keine Testlizenz haben, überspringen Sie den nächsten Schritt und verwenden Sie das Scanbot SDK im Testmodus. Siehe dazu auch die Hinweise zum Lizenzschlüssel am Ende dieses Tutorials.

So fügen Sie einen Scanbot SDK-Testlizenzschlüssel hinzu:

• Öffnen Sie die Datei AppDelegate.
• Fügen Sie import ScanbotSDK hinzu.
• Kopieren Sie Ihren Testlizenzschlüssel in die Funktion application(_: didFinishLaunchingWithOptions):

import UIKit
import ScanbotSDK

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

	func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
//        Uncomment this line if you have a license.
//        ScanbotSDK.setLicense("See the license key notes below!")
        return true
    }
}

Let's Code!

Let's start by building a UI for our project

• in Main.storyboard, add a UIButton with the title "Scan Document" and a UIImageView for showing the scanned result
• Im ViewController definieren wir eine Variable scannedDocumentImageView und eine Action-Funktion  scanButtonDidTap(_:):

class ViewController: UIViewController {

    @IBOutlet private var scannedDocumentImageView: UIImageView?

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func scanButtonDidTap(_ sender: UIButton) {}
}

• Jetzt verbinden wir sie mit den UI-Komponenten im Main.storyboard:

Hinzufügen des Scanners

• Fügen Sie import ScanbotSDK am oberen Rand des ViewControllers hinzu.
• Definieren Sie eine Variable scannerViewController vom Typ SBSDKUIDocumentScannerViewController innerhalb von ViewController:

import ScanbotSDK

class ViewController: UIViewController, SBSDKUIDocumentScannerViewControllerDelegate {

    @IBOutlet private var scannedDocumentImageView: UIImageView?
    private var scannerViewController: SBSDKUIDocumentScannerViewController?

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func scanButtonDidTap(_ sender: UIButton) {}
}

• Machen Sie ViewController konform mit SBSDKUIDocumentScannerViewControllerDelegate, indem Sie den folgenden Code hinzufügen:

extension ViewController: SBSDKUIDocumentScannerViewControllerDelegate {
    func scanningViewController(_ viewController: SBSDKUIDocumentScannerViewController,
                                didFinishWith document: SBSDKUIDocument) {
    }
}

• Um eine Instanz von SBSDKUIDocumentScannerViewController zu erstellen, fügen Sie diese Zeilen in die Methode viewDidLoad() ein:

override func viewDidLoad() {
    super.viewDidLoad()
    
    let configuration = SBSDKUIDocumentScannerConfiguration.default()
    self.scannerViewController = SBSDKUIDocumentScannerViewController.createNew(with: configuration, andDelegate: self)
}

NOTE! For this project, we're using the default configuration (SBSDKUIDocumentScannerConfiguration.default()), but feel free to customize the UI, text, and behavior to your liking. Take a look at the config properties uiConfiguration, textConfiguration und behaviorConfiguration of the SBSDKUIDocumentScannerConfiguration instance.

• Fügen Sie den Presentation Code zu der Action-Funktion scanButtonDidTap(_:) hinzu, die wir zuvor erstellt haben:

@IBAction func scanButtonDidTap(_ sender: UIButton) {
    if let scannerViewController = self.scannerViewController {
        self.present(scannerViewController, animated: true, completion: nil)
    }
}

• Schließlich müssen wir, um das gescannte Ergebnis anzuzeigen, die Funktion scanningViewController(_:didFinishWith:)  des SBSDKUIDocumentScannerViewControllerDelegate wie folgt überschreiben:

  func scanningViewController(_ viewController: SBSDKUIDocumentScannerViewController,
                                didFinishWith document: SBSDKUIDocument) {
        self.scannedDocumentImageView?.image = document.page(at: 0)?.documentImage()
    }

And that's it. Build and run the project on a real device. You now should be able to start the Scanbot Document Scanner, scan a document, and display the resulting image.

Fazit

Herzlichen Glückwunsch! Sie haben soeben mit nur wenigen Zeilen Code einen voll funktionsfähigen Document Scanner gebaut. 

Die Document Scanner-Komponente, die wir hier gerade integriert haben, ist eine sogenannte Ready-to-Use UI (RTU-UI) SDK-Komponente. Die RTU-UI Komponenten, die im Scanbot SDK enthalten sind, decken alle gängigen Anwendungsfälle des Scannens ab. Sie sind außerdem leicht zu integrieren und anzupassen.

Neben den  RTU-UI- Komponenten bietet das Scanbot SDK auch Classic - Komponenten. Mit diesen können Sie eine vollständig anpassbare Benutzeroberfläche erstellen. Weitere Details finden Sie in unserer Dokumentation.

Diese Beispielanwendung finden Sie hier hier.

Um alle beeindruckenden Funktionen des Scanbot SDKs auszuprobieren, laden Sie das vollständige iOS Beispielprojekt. Dieses integriert alle API-Funktionen, wie z.B. Cropping UI, Image Filtering, PDF und TIFF Rendering, OCR (Texterkennung), Barcode und QR Code Scanning, MRZ Scanning (Machine Readable Zones) und EHIC Scanning (Europäische Krankenversicherungskarte).

Scanbot SDK (Testversion) Lizenzschlüssel

Bitte beachten Sie: Ohne Lizenzschlüssel läuft das Scanbot SDK nur für eine Minute pro Sitzung! Nach Ablauf des Testzeitraums werden alle Funktionen des Scanbot Scanner SDK deaktiviert und die Benutzeroberflächen beendet. 

Sie können eine uneingeschränkte, kostenlose 7-Tage-Testlizenz ohne jegliche Verpflichtungen erhalten oder sich für einen 30-tägigen Proof of Concept entscheiden.

Da Scanbot SDK-Lizenzschlüssel an einen Bundle Identifier gebunden sind, müssen Sie – wie in dieser Tutorial-App – den Standard-Bundle Identifier com.example.MyAwesomeIOSApp verwenden. Alternativ können Sie auch die ID Ihrer eigenen Anwendung angeben, wenn Sie Ihre Testlizenz beantragen. Bitte beachten Sie dabei die Groß- und Kleinschreibung!

Viel Spaß beim Coden!

If you need any assistance, please feel free to contact one of our experts. We'd love to help you out. Let's talk.