Forem: Kevin

Try the Integration Challenge – run our Android SDK in 10 minutes or less

Kevin — Wed, 17 Jul 2024 14:21:11 +0000

Did you visit Droidcon 2024 in Berlin? If so, you may have noticed our Integration Challenge, for which we asked developers to integrate our Barcode Scanner SDK for Android in less than 10 minutes.

40 people tried to do so. All of them managed it in less than 6 minutes, with the best time clocking in at incredible 1:02! 🤯

Can you top that? Let’s find out – we’ve added the instructions to our Quick Start Guide!

⏱️ If you want to see how fast you can do it, start your clock when you scroll down.

Let’s go through the steps one by one.

Step 1: Clone the template app (or create a project from scratch)

We’ve prepared a template project so you won’t waste any time on building a UI. You can clone or download it from our GitHub repository.

Open the project in Android Studio and you’re good to go.

Step 2: Add the Scanbot SDK dependencies

The Scanbot SDK for Android is distributed through our private Maven repository server (nexus.scanbot.io), which needs to be specified in the settings.gradle.kts file in the root folder of your project:

// settings.gradle.kts in the root of the project:
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()

        // Add Scanbot SDK maven repositories here:
        maven(url = "https://nexus.scanbot.io/nexus/content/repositories/releases/")
        maven(url = "https://nexus.scanbot.io/nexus/content/repositories/snapshots/")
    }
}

Afterward, the dependencies can be added in the dependencies section of your Android application project configuration, usually in the app/build.gradle.kts file:

// app/build.gradle.kts (dependencies section):
implementation("io.scanbot:scanbot-barcode-scanner-sdk:5.2.0")
implementation("io.scanbot:rtu-ui-v2-barcode:5.2.0")

To check out the latest version of the Scanbot SDK, please always refer to the SDK’s changelog.

For more details on the dependencies, please refer to our detailed installation guide.

Step 3: Add the camera permission

The Scanbot Barcode Scanner SDK needs access to the device camera so it can scan from a live camera stream. Therefore, you have to define the camera permission in the AndroidManifest.xml file:

<!-- AndroidManifest.xml: -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android" ...>

    <!-- Add Camera permission here: -->
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-feature android:name="android.hardware.camera" />

    <application ...>

Note how we also added the uses-feature tag for better recognition of your app on the Google Play Store (see the Android documentation).

Our Ready-to-Use UI Components handle the runtime permissions automatically, so there is no need to add anything else in the code.

Step 4: Initialize the SDK

Usually, we recommend initializing the SDK in the Application class of your app (see our detailed setup page). However, in this Quick Start guide, we’ll do it in an Activity class.

First, make sure to add the following imports to the top of the file (e.g., MainActivity.kt):

// Add the following imports in your Activity (for example, MainActivity.kt):
import android.widget.Toast
import androidx.activity.result.ActivityResultLauncher
import io.scanbot.sdk.barcode_scanner.ScanbotBarcodeScannerSDKInitializer
import io.scanbot.sdk.ui_v2.barcode.BarcodeScannerActivity
import io.scanbot.sdk.ui_v2.barcode.configuration.BarcodeScannerConfiguration
import io.scanbot.sdk.ui_v2.common.activity.registerForActivityResultOk

To initialize the SDK, simply use the ScanbotBarcodeScannerSDKInitializer class in the onCreate method of your Activity:

// Adapt your Activity's onCreate method as follows:
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    ...
    // Initialize the SDK here:
    ScanbotBarcodeScannerSDKInitializer()
        // optional: uncomment the next line if you have a license key
        // .license(this.application, LICENSE_KEY)
        .initialize(this.application)
}

💡 You can use the Scanbot Barcode SDK for quick testing or evaluation purposes even without a license key. However, the SDK will only work for 60 seconds per app session and may not be used for production purposes. Want to scan longer than 60 seconds? Get your free trial license key here.

Step 5: Start the Barcode Scanner and process the result

You only need a few lines of code to integrate the Scanbot Barcode Scanner UI (BarcodeScannerActivity) into your application’s workflow. It’s as simple as starting a regular Android Activity.

First, you need to register the ActivityResultLauncher in your Activity class and save it as a variable:

// Add the following variable in your Activity:
private val barcodeScreenLauncher: ActivityResultLauncher<BarcodeScannerConfiguration> =
    registerForActivityResultOk(BarcodeScannerActivity.ResultContract()) { resultEntity ->
        // Barcode Scanner result callback:
        // Get the first scanned barcode from the result object...
        val barcodeItem = resultEntity.result?.items?.first()
        // ... and process the result as needed, for example, display as a Toast:
        Toast.makeText(
            this,
            "Scanned: ${barcodeItem?.text} (${barcodeItem?.type})",
            Toast.LENGTH_LONG
        ).show()
    }

The result of the Barcode Scanner UI will be delivered to the callback you just defined.

Now, to launch the Barcode Scanner UI, you just call the barcodeScreenLauncher where needed. For example, in the setOnClickListener of your button:

// Launch the barcode scanner in your Activity:
barcodeScreenLauncher.launch(BarcodeScannerConfiguration())

🚀 That’s it! 🚀 You have successfully integrated a full-featured barcode scanner as an RTU UI Activity into your app. If you’d like, let us know what your time was!

💡 Customization: In this Quick Start guide, we have used the default configuration for the scanner UI. Feel free to explore the configs and customize the UI and the behavior according to your needs via the BarcodeScannerConfiguration class. For more details, please refer to the Ready-to-Use UI page.

Integrating a barcode scanner into your iOS app – the easy way

Kevin — Fri, 28 Jun 2024 11:25:46 +0000

Want to integrate barcode scanning functionalities into your iOS app? With our Ready-to-Use UI, this only takes you a few minutes. We’ll show you how it works!

Introduction

Setting up a simple app that can scan any 1D or 2D barcode is very straightforward – all we need are the following steps:

Create a project
Install the SDK
Set up the main screen
Implement the scanning modes
Build, run, and scan!

After that, you will be scanning barcodes with lightning speed! ⚡

Requirements

All you need for this project is the following:

macOS with Xcode 14.0 or higher
A test device, since we’ll need to use the camera (minimum deployment target: iOS 13.0)
Basic knowledge of how to build an iOS app

💡 Our iOS Barcode Scanner SDK supports both Swift and Objective-C, but we’ll stick to Swift for this tutorial.

Preparing the project

First, we’re going to create a new Swift project with the Storyboard interface.

To create the project:

Open Xcode and click on Create New Project… (or go to File -> New -> Project…)
Make sure you have the iOS tab selected, then choose App.
Give it a name, e.g., MyBarcodeScanningApp.
Choose Storyboard as the interface.
Select Swift as the programming language.

Next, we’ll install the Barcode Scanner SDK package.

Installing the SDK

For this tutorial, we will use the Swift Package Manager to install the Barcode Scanner SDK.

In Xcode, go to File -> Add Package Dependencies…
Paste the following package URL into the search bar: https://github.com/doo/scanbot-barcode-scanner-sdk-ios-spm.git
Select the package and click Add Package.
In the pop-up that appears after verification, for “Add to Target”, choose your project.
Click Add Package again.

💡 Without a license key, our SDK only runs for 60 seconds per session. This is more than enough for the purposes of our tutorial, but if you like, you can generate a license key here.

For more information about where to put the license key in your code, please refer to SDK Initialization in our docs.

We’ll need access to the device camera to scan barcodes, so let’s set the corresponding privacy property now.

In the project navigator, select your project, then select your app under “TARGETS”. Open the tab Info, add the target property Privacy – Camera Usage Description, and type in a meaningful value, e.g., “Grant access to your camera to start scanning”.

Integrating the scanning functionalities

Now that the project is set up, integrating barcode scanning into your app is very straightforward.

In fact, it’s so straightforward that we’ll implement not just one, but three different scanning modes in our project:

Single-barcode scanning: Read and show the value of a single barcode.
Multi-barcode scanning: Read as many barcodes as you like and display their values in a list.
AR overlay: Display the values of the barcodes in the viewfinder on the screen in real time.

Here’s how we’re going to achieve that:

Step 1: Set up the main screen (create three buttons and connect them to our View Controller)
Step 2: Implement the scanning modes (copy and paste the code for the three scanning modes into the @IBAction functions)
Step 2.5 (optional): Customize the scanning UI
Step 3: Start scanning 🤳

Let’s dive right in!

Step 1: Setting up the main screen

How exactly you approach this is up to you, but for the sake of this tutorial, we will just add three UIButton elements (“Single-Barcode Scanning”, “Multi-Barcode Scanning”, and “AR Overlay”) onto the View Controller Scene in Main.storyboard. Then, we connect them as an Action to ViewController.swift by dragging them while holding the control key.

For our purposes, let’s call the resulting @IBAction functions “startSingleScanning”, “startMultiScanning”, and “startAROverlay”.

We also need to import the ScanbotBarcodeScannerSDK package like so:

import ScanbotBarcodeScannerSDK

In the next step, we’ll add the code to get our scanning interface up and running into those functions.

Step 2: Implementing the scanning modes

Thanks to our RTU UI components, integrating our Barcode Scanner SDK’s features into your app is a breeze!

In fact, you can just copy and paste the code from our documentation 🦥

Here’s the code to put in each function for your convenience:

For single-barcode scanning:

...
    @IBAction func startSingleScanning(_ sender: Any) {
        // Create the default configuration object.
        // Create the default configuration object.
        let configuration = SBSDKUI2BarcodeScannerConfiguration()

        // Initialize the single-scan use case.
        let singleUsecase = SBSDKUI2SingleScanningMode()

        // Enable and configure the confirmation sheet.
        singleUsecase.confirmationSheetEnabled = true
        singleUsecase.sheetColor = SBSDKUI2Color(colorString: "#FFFFFF")

        // Hide/unhide the barcode image of the confirmation sheet.
        singleUsecase.barcodeImageVisible = true

        // Configure the barcode title of the confirmation sheet.
        singleUsecase.barcodeTitle.visible = true
        singleUsecase.barcodeTitle.color = SBSDKUI2Color(colorString: "#000000")

        // Configure the barcode subtitle of the confirmation sheet.
        singleUsecase.barcodeSubtitle.visible = true
        singleUsecase.barcodeSubtitle.color = SBSDKUI2Color(colorString: "#000000")

        // Configure the cancel button of the confirmation sheet.
        singleUsecase.cancelButton.text = "Close"
        singleUsecase.cancelButton.foreground.color = SBSDKUI2Color(colorString: "#C8193C")
        singleUsecase.cancelButton.background.fillColor = SBSDKUI2Color(colorString: "#00000000")

        // Configure the submit button of the confirmation sheet.
        singleUsecase.submitButton.text = "Submit"
        singleUsecase.submitButton.foreground.color = SBSDKUI2Color(colorString: "#FFFFFF")
        singleUsecase.submitButton.background.fillColor = SBSDKUI2Color(colorString: "#C8193C")

        // Set the configured use case.
        configuration.useCase = singleUsecase

        // Create and set an array of accepted barcode formats.
        configuration.recognizerConfiguration.barcodeFormats = SBSDKUI2BarcodeFormat.twoDFormats

        // Present the recognizer view controller modally on this view controller.
        SBSDKUI2BarcodeScannerViewController.present(on: self,
                                                     configuration: configuration) { controller, cancelled, error, result in

            // Completion handler to process the result.
            // The `cancelled` parameter indicates whether the cancel button was tapped.

            controller.presentingViewController?.dismiss(animated: true)
        }
...

For multi-barcode scanning:

...
    @IBAction func startMultiScanning(_ sender: Any) {
        // Create the default configuration object.
        let configuration = SBSDKUI2BarcodeScannerConfiguration()

        // Initialize the multi-scan use case.
        let multiUsecase = SBSDKUI2MultipleScanningMode()

        // Set the counting repeat delay.
        multiUsecase.countingRepeatDelay = 1000

        // Set the counting mode.
        multiUsecase.mode = .counting

        // Set the sheet mode of the barcodes preview.
        multiUsecase.sheet.mode = .collapsedSheet

        // Set the height of the collapsed sheet.
        multiUsecase.sheet.collapsedVisibleHeight = .large

        // Enable manual count change.
        multiUsecase.sheetContent.manualCountChangeEnabled = true

        // Configure the submit button.
        multiUsecase.sheetContent.submitButton.text = "Submit"
        multiUsecase.sheetContent.submitButton.foreground.color = SBSDKUI2Color(colorString: "#000000")

        // Set the configured use case.
        configuration.useCase = multiUsecase

        // Create and set an array of accepted barcode formats.
        configuration.recognizerConfiguration.barcodeFormats = SBSDKUI2BarcodeFormat.twoDFormats

        // Present the recognizer view controller modally on this view controller.
        SBSDKUI2BarcodeScannerViewController.present(on: self,
                                                     configuration: configuration) { controller, cancelled, error, result in

            // Completion handler to process the result.
            // The `cancelled` parameter indicates whether the cancel button was tapped.

            controller.presentingViewController?.dismiss(animated: true)
        }
...

For the AR overlay:

...
    @IBAction func startAROverlay(_ sender: Any) {
        // Create the default configuration ject.
        let configuration = SBSDKUI2BarcodeScannerConfiguration()

        // Configure the usecase.
        let usecase = SBSDKUI2MultipleScanningMode()
        usecase.mode = .unique
        usecase.sheet.mode = .collapsedSheet
        usecase.sheet.collapsedVisibleHeight = .small

        // Configure AR Overlay.
        usecase.arOverlay.visible = true
        usecase.arOverlay.automaticSelectionEnabled = false

        // Set the configured usecase.
        configuration.useCase = usecase

        // Create and set an array of accepted barcode formats.
        configuration.recognizerConfiguration.barcodeFormats = SBSDKUI2BarcodeFormat.twoDFormats

        // Present the recognizer view controller modally on this view controller.
        SBSDKUI2BarcodeScannerViewController.present(on: self,
                                                     configuration: configuration) { controller, cancelled, error, result in

            // Completion handler to process the result.
            // The `cancelled` parameter indicates whether the cancel button was tapped.

            controller.presentingViewController?.dismiss(animated: true)
        }
    }
}

There’s one tiny thing we’ll change here right away, though: We want to be able to scan both 1D and 2D barcode formats.

For this, let’s go to configuration.recognizerConfiguration.barcodeFormats in each @IBAction function and change SBSDKUI2BarcodeFormat.twoDFormats to SBSDKUI2BarcodeFormat.commonFormats.

Let’s now explore some of the other customization options.

Step 2.5 (optional): Customizing the scanning UI

Our RTU UI not only makes it very easy to integrate our SDK’s scanning functionalities, but also to style the UI elements in any way you like 🎨

(Well, maybe not in ANY way. Sorry, Bob.)

The comments already give you a hint about what’s possible to change:

Hide or show specific UI elements
Configure the active and inactive states of some UI elements
Change colors
Change titles and subtitles
Change the accepted barcode formats
Control the barcode sheet behavior for multi-scanning
… and more

As an example, let’s take a closer look at some of the configuration options of our multi-barcode scanning feature:

// Set the counting mode.
multiUsecase.mode = .counting

Here, we can change .counting to .unique. This will prevent the SDK from scanning multiple barcodes with the same value, which is helpful if you only want to count the number of unique barcodes.

// Set the sheet mode of the barcodes preview.
multiUsecase.sheet.mode = .collapsedSheet

Change .collapsedSheet to .button to not show the upper part of the barcode results sheet at the bottom of the screen and display a button that calls up the sheet instead.

💡 You can change the entire RTU UI’s color scheme using the palette feature.

Once you’ve made your changes, build and run your app.

Step 3: Scanning some barcodes!

Now you can go ahead and scan 1D and 2D barcodes – one after the other, many at the same time, and even with an AR overlay that lets you preview their values!

If you’re in need of some barcodes, we’ve got you covered:

If this tutorial has piqued your interest in integrating barcode scanning functionalities into your iOS app, make sure to take a look at our SDK’s other features in our documentation.

Happy coding!