Інтеграція Google ML Kit для сканування штрих-кодів у додатках Android з Jetpack Compose

текст перекладу

Повний проект:

https://github.com/DUMA042/BarsandQ

QR-коди та штрих-коди є всюди, будь то сканування квитків на заходах, доступ до деталей продукту в супермаркеті чи здійснення безперешкодних платежів. Ці компактні коди стали незамінними інструментами для обміну даними, автентифікації та управління запасами.

Як Android-розробник, інтеграція сканування штрих-кодів та QR-кодів у ваш додаток може відкрити безліч можливостей для ваших користувачів. У цьому блозі ми розглянемо, як побудувати сучасний сканер, використовуючи Kotlin, Jetpack Compose та Google ML Kit. Наприкінці цього посібника ви матимете повністю функціонуючий сканер, який використовує потужність машинного навчання та простоту декларативної розробки UI.

Що ми будемо охоплювати:

1. Налаштування проекту та додавання залежностей.
2. Налаштування дозволу на використання камери
3. Налаштування сканера
4. Запуск додатку та сканування QR чи штрих-коду

1 Налаштування проекту та додавання залежностей

AndroidManifest.xml

Необхідний для дозволу на використання камери

Для того, щоб додаток міг сканувати штрих-коди та QR-коди, ваш додаток має отримати доступ до камери пристрою. Почніть з додавання дозволу CAMERA у файл AndroidManifest.xml. Цей дозвіл потрібен для використання камери при скануванні:

Також, якщо ваш додаток покладається на камеру як на основну функцію (і не працюватиме належним чином без неї), ви повинні оголосити це, використовуючи тег ``. Це гарантує, що ваш додаток буде встановлено тільки на пристроях з камерою:

Якщо камера є опційною для вашого додатку, ви можете встановити android:required="false". Ці кроки забезпечують наявність необхідних дозволів і апаратних вимог для підтримки сканування штрих-кодів. У зразковому додатку встановлено android:required="true", оскільки камера необхідна для сканування штрих-кодів та QR-кодів.

libs.versions.toml

Необхідні залежності для CameraX та MLkit

Файл збірки Gradle для додатка:

Залежності Gradle

2 Налаштування дозволу на використання камери:

Для дозволу ми будемо використовувати бібліотеку accompanist permissions. Залежність уже була налаштована в попередньому блоці, тому можемо одразу переходити до реалізації.

Я створю composable для HomeScreen. Для простоти цієї статті цей composable буде обробляти та зберігати стан дозволу, а також результат від сканованого QR-коду або штрих-коду.

Код для дозволу

3 Налаштування сканера

3.1 Налаштування камери з CameraX:

Для реалізації функціональності камери (яка буде потрібна для сканування штрих-коду) ми будемо використовувати CameraX, сучасну Android-бібліотеку, яка спрощує операції з камерою та забезпечує сумісність на різних пристроях. LifecycleCameraController ініціалізується та використовується для спрощення взаємодії з камерою, прив'язуючи життєвий цикл камери до LifecycleOwner (наприклад: Activity чи Fragment). і прив'язується до lifecycleOwner (наприклад, Activity), забезпечуючи, щоб камера поважала життєвий цикл додатка (наприклад, паузу при переході додатка в фоновий режим). AndroidView composable використовується для інтеграції PreviewView, яка відображає поточний відеофід з камери.

Налаштування камери

В цьому блоці:

LifecycleCameraController керує життєвим циклом камери та спрощує операції з камерою.

AndroidView використовується для вбудовування PreviewView (традиційного Android View) в UI Jetpack Compose.

PreviewView відображає поточний відеофід з камери, а cameraController прив'язується до lifecycleOwner, щоб забезпечити належне управління життєвим циклом.

3.2 Реалізація сканування штрих-кодів за допомогою ML Kit

Налаштування параметрів сканера штрих-кодів:

Перший крок у реалізації сканування штрих-кодів — налаштувати формати штрих-кодів, які сканер повинен виявляти.
текст перекладу
Google ML Kit підтримує широкий спектр форматів штрих-кодів, включаючи QR-коди, UPC-коди та інші. Ми використовуємо BarcodeScannerOptions.Builder(), щоб вказати формати, які ми хочемо підтримувати.

Ось код:

Конфігурація для штрих-коду

Чому це важливо: Вказуючи формати, ви гарантуєте, що сканер шукає лише відповідні штрих-коди, що покращує ефективність і зменшує кількість хибних спрацьовувань.

Налаштування: Ви можете додавати або видаляти формати залежно від вимог вашого додатку.

Ініціалізація сканера штрих-кодів:

//всередині вашого файлу ScanCode.kts  
val barcodeScanner = BarcodeScanning.getClient(options)

Що це робить: barcodeScanner — це основний компонент, який аналізує кадри з камери та виявляє штрих-коди.

Продуктивність: Сканер штрих-кодів ML Kit оптимізований для реального часу та працює офлайн, що робить його ідеальним для мобільних додатків.

3.3 Налаштування аналізатора зображень з CameraX:

Щоб обробити кадри з камери, ми використовуємо API ImageAnalysis від CameraX. Це API дозволяє нам аналізувати кожен кадр в реальному часі та передавати його для сканування штрих-кодів. MlKitAnalyzer — це утиліта, надана CameraX, щоб інтегрувати ML Kit з аналізом зображень.

Ось код:

Налаштування аналізатора зображень

Основні компоненти:

ContextCompat.getMainExecutor(ctx): Забезпечує виконання аналізу в основному потоці.

ImageAnalysis.COORDINATE_SYSTEM_VIEW_REFERENCED: Вирівнює координати штрих-коду з попереднім переглядом камери.

MlKitAnalyzer: Пов’язує CameraX і ML Kit, спрощуючи інтеграцію.

3.4 Обробка результатів сканування штрих-кодів:

Коли штрих-код виявлений, MlKitAnalyzer повертає список об’єктів Barcode. Кожен Barcode містить інформацію, таку як сировинне значення, формат і межі. Ми витягуємо цю інформацію та оновлюємо стан UI.

Ось код:

Обробка результатів штрих-коду

Основні компоненти:

barcodeResults.first().rawValue: Витягує сировинне значення виявленого штрих-коду (наприклад, URL чи текст).

boundingRect: Зберігає межі штрих-коду, які використовуються для малювання прямокутника навколо нього в UI.

qrCodeDetected: Логічний стан, який ініціює подальші дії (наприклад, виклик зворотного виклику).

Що ми охопили до цього часу:

1. Налаштування форматів штрих-кодів: Вказати типи штрих-кодів, які сканер повинен виявляти.
2. Ініціалізація сканера: Створити клієнт BarcodeScanning з налаштованими параметрами.
3. Налаштування аналізу зображень: Використовувати API ImageAnalysis від CameraX для обробки кадрів з камери.
4. Обробка результатів: Витягувати значення штрих-коду та межі з виявленого штрих-коду.
5. Оновлення стану UI: Зберігати значення штрих-коду та межі для подальшої обробки та відображення.

Приклад коду для всієї логіки сканування штрих-кодів:

Повна реалізація Mlkit

3.5 Обробка виявлених штрих-кодів

Параметр onQrCodeDetected є функцією зворотного виклику (callback), яка дозволяє батьківському composable обробляти значення виявленого штрих-коду. Це поширена схема в Jetpack Compose для передачі даних або подій вгору по ієрархії UI. Коли штрих-код виявлено, стан qrCodeDetected встановлюється на true, що ініціює LaunchedEffect.

Затримка LaunchedEffect для завершення малювання прямокутника

У цьому блоці:

onQrCodeDetected — це лямбда-функція, яка приймає значення виявленого штрих-коду як параметр. Це дозволяє батьківському composable обробляти результат (наприклад, переходити на новий екран або відображати дані штрих-коду).

LaunchedEffect використовується для виконання побічного ефекту (виклик зворотного виклику) контрольованим чином. Це гарантує, що зворотний виклик буде виконано лише один раз, коли qrCodeDetected змінюється на true.

Додається коротка затримка, щоб дозволити UI переписати перед викликом зворотного виклику. Це запобігає потенційним умовам гонки та забезпечує плавний досвід користувача.

3.6 Малювання прямокутника навколо штрих-коду

Щоб надати візуальний зворотний зв’язок, малюється прямокутник навколо виявленого штрих-коду за допомогою API Canvas від Jetpack Compose.
текст перекладу
Компонент DrawRectangle конвертує Android Rect в Compose-сумісний Rect і малює його на екрані.

Ось код:

Малювання прямокутника в Compose

У цьому блоці:

Об'єкт Rect з ML Kit конвертується в сумісний з Compose Rect.

Компонент Canvas використовується для малювання червоного прямокутника навколо виявленого штрих-коду, що надає візуальний зворотний зв'язок користувачеві.

LaunchedEffect є ключовою частиною обробки побічних ефектів у Jetpack Compose. Він гарантує, що зворотний виклик (onQrCodeDetected) буде виконано лише один раз, коли стан qrCodeDetected зміниться. delay забезпечує достатньо часу для переписування UI перед виконанням зворотного виклику, запобігаючи можливим візуальним глюкам або невідповідностям. Цей підхід відповідає реактивній моделі програмування Compose, де побічні ефекти обробляються явно для підтримки передбачуваного та ефективного UI.

Повна реалізація ScanCode:

Код для повної реалізації ScanCode.kts

Запуск додатку та сканування QR-коду або штрих-коду:

Запустіть ваш код і ви отримаєте результат, схожий на цей:

Екран після надання дозволу

Коли кнопка натиснута і камера направлена на QR-код

Після отримання результату сканування

Висновок

Створення сканера штрих-кодів та QR-кодів для Android стало простішим завдяки потужній комбінації Jetpack Compose, CameraX і Google ML Kit. У цій статті ми дослідили, як створити безперешкодний досвід сканування, інтегруючи ці сучасні інструменти. Від налаштування камери та конфігурації виявлення штрих-кодів ML Kit до обробки сканованих результатів і малювання меж, ми охопили всі основні кроки, щоб допомогти вам почати.

Основні моменти цієї реалізації:

• CameraX для надійних операцій з камерою, що враховують життєвий цикл.
• ML Kit для швидкого та точного виявлення штрих-кодів та QR-кодів, навіть офлайн.
• Jetpack Compose для створення динамічного та чуйного UI з мінімальним обсягом шаблонного коду.
• Використання onQrCodeDetected та LaunchedEffect для ефективної обробки сканованих результатів і забезпечення плавного користувацького досвіду.

Ця реалізація є високонастроюваною та може бути адаптована до різних випадків використання, таких як платіжні системи, управління запасами або продаж квитків на події. Дотримуючись цього посібника, ви тепер маєте надійну основу для подальшого розвитку вашого додатку з такими функціями, як підтримка багатосканування, налаштування власних накладок UI або інтеграція з хмарними сервісами.

Сподіваюся, ця стаття дала вам знання та інструменти для впровадження сканування штрих-кодів і QR-кодів у вашому Android-додатку. Не бійтеся експериментувати, вдосконалювати та піднімати ваш додаток на новий рівень. Щасливого кодування!

Джерела:

[

Посібник - Accompanist

Набір бібліотек для допомоги у створенні додатків на Jetpack Compose.

google.github.io

](https://google.github.io/accompanist/permissions/?source=post_page-----5deda28377c9--------------------------------)

[

Сканування штрих-кодів за допомогою ML Kit для Android | Google для розробників

Ви можете використовувати ML Kit для розпізнавання та декодування штрих-кодів. Цей API доступний за допомогою неупакованої бібліотеки, яку потрібно…

developers.google.com

](https://developers.google.com/ml-kit/vision/barcode-scanning/android?source=post_page-----5deda28377c9--------------------------------)

Повний проект:

https://github.com/DUMA042/BarsandQ

Перекладено з: Integrating Google ML Kit for Barcode Scanning in Jetpack Compose Android Apps