1. Before you begin
Earlier in the product image search learning pathway, you learned how to call a product search backend built with Vision API Product Search for visually similar products from a product catalog.
In this codelab, you'll learn how to build a similar backend but with your product catalog.
What you'll learn
- How to build a product search backend with Vision API Product Search
- How to set up API key to access Vision API from mobile apps
What you'll need
- A Google Cloud account with billing enabled (It can be a free trial account)
2. About Vision API Product Search
Vision API Product Search is a feature in Google Cloud that allows retailers to create products, each containing reference images that visually describe the product from a set of viewpoints. Retailers can then add these products to product sets. Currently Vision API Product Search supports the following product categories: homegoods, apparel, toys, packaged goods, and general.
When users query the product set with their own images, Vision API Product Search applies machine learning to compare the product in the user's query image with the images in the retailer's product set, and then returns a ranked list of visually and semantically similar results.
3. Build the backend with Google Cloud
Earlier in the product image search learning pathway, you used a demo product search backend built with Vision API Product Search. Build the same backend on your Google Cloud account by following this tutorial:
Once you have completed the tutorial, continue to the following steps to set up an API key to call the backend from your mobile apps.
4. Setup API key
In the Vision API Product Search quickstart, you have built a product search backend that can take a query image and return visually similar products. In order to call the product search API from a mobile app, you will need to setup an API key and then restrict access of the API key to your own mobile apps, in order to avoid unauthorized use.
Create an API key
- Go to Cloud Console > APIs & Services > Credentials. You can also click on this URL and select the project that you have used in the Product Search quickstart.
- Select Create Credentials > API key. You will see this dialog if your API key has been created successfully:
Take note of this API key. You will use it later in this codelab.
Restrict access to the API key
When seeing the prompt above, select Restrict key.
Follow the instructions on the screen to apply these restrictions:
- Application restrictions > Android apps
- API restrictions > Restrict key > Cloud Vision API
5. Download and run the mobile app
You can download the Android app you built earlier that used the demo product search backend, and change it to use the new backend that you have just built.
Download the Code
Click the following link to download all the code for this codelab:
Unpack the downloaded zip file. This will unpack a root folder (odml-pathway-codelabs) with all of the resources you will need. For this codelab, you will only need the sources in the product-search/codelab2/android/final subdirectory.
The app uses the ML Kit Object Detection and Tracking API, and a demo product search backend built with Vision API Product Search to let users take a photo and search for visually similar products in the demo product catalog.
Import the app into Android Studio
Start by importing the starter app into the Android Studio.
Go to Android Studio, select Import Project (Gradle, Eclipse ADT, etc.) and choose the product-search/codelab2/android/final folder from the source code you downloaded earlier.
Run the starter app
Now that you have imported the project into Android Studio, you are ready to run the app for the first time.
Connect your Android device via USB to your host or Start the Android Studio emulator, and click Run ( 
) in the Android Studio toolbar.
(If this button is disabled, make sure you import only final/app/build.gradle, not the entire repository.)
Now the app should have launched on your Android device. It is already functioning, but it uses the demo product search backend that Google has deployed for you.
Next, you'll update the app to use the backend you built earlier in this codelab.
6. Update the API endpoints
Change the API configurations
Go to the ProductSearchAPIClient class and you will see the configs of the product search backend already defined. Comment out the configs of the demo backend:
// Define the product search backend
// Option 1: Use the demo project that we have already deployed for you
// const val VISION_API_URL =
"https://us-central1-odml-codelabs.cloudfunctions.net/productSearch"
// const val VISION_API_KEY = ""
// const val VISION_API_PROJECT_ID = "odml-codelabs"
// const val VISION_API_LOCATION_ID = "us-east1"
// const val VISION_API_PRODUCT_SET_ID = "product_set0"
Then replace them with your config:
// Option 2: Go through the Vision API Product Search quickstart and deploy to your project.
// Fill in the const below with your project info.
const val VISION_API_URL = "https://vision.googleapis.com/v1"
const val VISION_API_KEY = "YOUR_API_KEY"
const val VISION_API_PROJECT_ID = "YOUR_PROJECT_ID"
const val VISION_API_LOCATION_ID = "YOUR_LOCATION_ID"
const val VISION_API_PRODUCT_SET_ID = "YOUR_PRODUCT_SET_ID"
- VISION_API_URL is the API endpoint of Cloud Vision API.
- VISION_API_KEY is the API key that you created earlier in this codelab.
- VISION_API_PROJECT_ID , VISION_API_LOCATION_ID , VISION_API_PRODUCT_SET_ID is the value you used in the Vision API Product Search quickstart earlier in this codelab.
Run it
Now click Run ( ) in the Android Studio toolbar. Once the app loads, tap any preset images, select an detected object, tap the Search button to see the search results. The app is now using the product search backend that you have just created!
7. Congratulations!
You have learned how to build a product search backend using the Vision API Product Search.
That is all you need to get it up and running!
What we've covered
- How to create product search backend using your product catalog and Vision API Product Search
- How to set up API key to call the product search backend from a mobile app
- How to call the backend from a mobile app
Next Steps
- Watch this video about using Vision API Product Search to build a smart closet
- Check out the Product Search on-device ML learning pathway to learn all the steps required to build a product search
- Apply what you have learnt in your own app