iOS Tutorial - So integrieren Sie unseren Document Scanner

Erste Schritte

Voraussetzungen

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

Erstellung einer iOS-App

Erstellung einer iOS-App

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 integrieren.

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

Bevor wir die Scan-Funktionen implementieren, müssen wir unsere App für die Verwendung des Scanbot SDK vorbereiten. Beginnen wir damit, die Unterstützung für die Verwendung der Kamera-API hinzuzufügen. Dazu müssen Sie den Key NSCameraUsageDescription wie folgt in die Datei Info.plist einfügen:

• Gehen Sie zur Datei Info.plist.
• Drücken Sie auf die Schaltfläche + und geben Sie "Privacy - Camera Usage Description" ein. Hinterlegen Sie hierbei eine kurze Beschreibung, warum die App Zugriff auf die Kamera benötigt, z. B. "Kamerazugriff ist erforderlich, um Dokumente zu scannen".

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
    }
}

Los gehts mit dem Coden!

Erstellung einer Benutzeroberfläche für unser Projekt

• In Main.storyboard, fügen Sie einen UIButton mit dem Titel "Scan Document" und eine UIImageView zur Anzeige des gescannten Ergebnisses hinzu
• 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)
}

HINWEIS! Für dieses Projekt verwenden wir die Standardkonfiguration (SBSDKUIDocumentScannerConfiguration.default()) Sie können die Benutzeroberfläche, den Text und das Verhalten aber auch ganz nach Wunsch anpassen. Schauen Sie sich dazu die Konfigurationseigenschaften uiConfiguration, textConfiguration, und behaviorConfiguration der SBSDKUIDocumentScannerConfiguration-Instanz an:

• 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()
    }

Und das war’s! Erstellen Sie nun ihre App und führen Sie sie auf einem echten Gerät aus. Sie können jetzt den Scanbot Document Scanner starten, ein Dokument scannen und sich das resultierende Bild anzeigen lassen.

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.

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!