In this blog, we will discuss how to use ML Search in app using Bagisto Native through the Dynamic Button component.
Introduction
Bagisto Native provides ready-to-use bridge components for Android and iOS applications. These components connect the web layer with native features.
For ML Search, we use the Dynamic Button component to show an ML Search icon on the app toolbar or action bar. When the user taps this icon, the native ML Search flow opens.
You can also explore our blog on building mobile applications using Next.js.
How to Create Mobile App using Next.js
What is ML Search in Bagisto Native
ML Search in Bagisto Native allows users to search products using image detection or text recognition. It uses native machine learning APIs inside the mobile app.
In our flow, ML Search is not triggered as a separate component. It is opened from the Dynamic Button component.
What is Dynamic Button Component
The Dynamic Button component is a Hotwire bridge component used to show native action icons on the toolbar. These icons can perform actions like cart, scanner, theme change, and ML Search.
For ML Search, the Dynamic Button component shows an image search icon. On click, it opens the camera and detects objects and reads text from the captured image.
Prerequisites
- Integrate Hotwire Native into your application. You can follow our Hotwire integration guide here:
How to Build a Mobile App with Hotwire - Add Bagisto Native to your project.
- Register the bridge components properly.
- Configure your application with Hotwire.
How to Add Bagisto Native in Your Project
Android Setup
First, you need to add the JitPack repository in your project-level Gradle file.
|
1 2 3 4 5 6 7 |
dependencyResolutionManagement { repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS) repositories { mavenCentral() maven { url 'https://jitpack.io' } } } |
After that, add the Bagisto Native dependency in your app-level Gradle file.
|
1 2 3 |
dependencies { implementation 'com.github.SocialMobikul:BagistoNative_Android:Tag' } |
Replace Tag with the latest version.
Now sync your project, and Bagisto Native will be added successfully.
For more details, explore our Bagisto Native Android Package.
iOS Setup
For iOS, you need to use Swift Package Manager.
Open your project in Xcode and go to: File → Add Package Dependencies.
Then enter the repository URL.
|
1 |
https://github.com/SocialMobikul/BagistoNative_iOS |
After adding the package, it will be available in your project.
For more information explore our Bagisto Native iOS Package
Register Bridge Components
Android
Register the bridge components inside your Application class.
|
1 2 3 |
Hotwire.registerBridgeComponents( *CustomBridgeComponents.all ) |
iOS
Register bridge components in AppDelegate.
|
1 |
Hotwire.registerBridgeComponents(BagistoNative.coreComponents) |
How ML Search in Bagisto Native Works
The ML Search functionality is triggered through the Dynamic Button component. The web layer sends an event to show the ML Search icon on the toolbar.
When the user taps the icon, the Dynamic Button component handles the camera permission automatically. The native layer then opens the camera for image capture.
After the image is captured, ML Kit detects objects and reads text from the image simultaneously. Both results are processed and returned to the web layer.
After processing, The component sends the selected value back to the web layer using the bridge reply. This value can then be used for product search.
Android Implementation of ML Search in Bagisto Native
After setup, the ML Search works through the Dynamic Button component.
When the ML Search icon is tapped, Android opens the camera and detects objects and reads text from the captured image.
The selected value is returned to the web layer using the bridge reply.
Android ML Search Flow
When the user taps the ML Search icon, the native flow opens, processes the image, and sends the result back to the web layer.
iOS Implementation of ML Search in Bagisto Native
In iOS, the ML Search works similarly after setup.
When triggered, it opens the native iOS ML search interface.
No additional native code is required.
iOS ML Search Flow
When the user taps the ML Search icon, the native flow opens, processes the image, and sends the result back to the web layer.
Benefits of ML Search in Bagisto Native
- Easy to integrate
- Works for both Android and iOS
- Detects objects and reads text from a single image capture
- Dynamic Button handles camera permission automatically
- No need to write complex ML logic in the web layer
Conclusion
The ML Search in Bagisto Native helps you easily add native machine learning-based search functionality to your application.
You only need to configure the Dynamic Button component once, and it will work seamlessly with your web layer.
You can also check other blogs on Hotwire Native implementation in WordPress to learn more.
To learn more about how Hotwire works, you can check the Hotwire overview and how it workflow guide
Be the first to comment.