本頁面由 Cloud Translation API 翻譯而成。

在 Android 上呼叫 Vision API Product Search 後端

1. 事前準備

你是否看過 Google 智慧鏡頭的示範影片？只要將手機鏡頭對準某個物體，就能找到該物體的線上購買地點。如要瞭解如何在應用程式中加入相同功能，請參閱本程式碼研究室。這是學習路徑的一部分，可教您如何在行動應用程式中建構產品圖片搜尋功能。

在本程式碼研究室中，您將瞭解如何從行動應用程式呼叫以 Vision API Product Search 建構的後端。這個後端可以接收查詢圖片，並從產品目錄中搜尋視覺上相似的產品。

如要瞭解建構視覺化產品搜尋功能的其餘步驟，包括如何使用 ML Kit 物件偵測和追蹤功能偵測查詢圖片中的物件，並讓使用者選擇要搜尋的產品，請參閱學習路徑。

建構項目

在本程式碼研究室中，您會從可偵測輸入圖片中物件的 Android 應用程式開始操作。您將編寫程式碼，擷取使用者選取的物件、傳送至產品搜尋後端，並在畫面上顯示搜尋結果。
最後，您應該會看到類似右側圖片的畫面。

課程內容

如何從 Android 應用程式呼叫及剖析 Vision API Product Search API 的回應

軟硬體需求

最新版 Android Studio (4.1.2 以上版本)
Android Studio 模擬器或實體 Android 裝置
範例程式碼
具備 Kotlin Android 開發作業的基本知識

本程式碼研究室著重於 Vision API Product Search。我們不會探討與本主題無關的概念和程式碼區塊，但會事先準備好這些程式碼區塊，屆時您只要複製及貼上即可。

2. 關於 Vision API Product Search

Vision API Product Search 是 Google Cloud 的一項功能，可讓使用者從產品目錄中搜尋外觀相似的產品。零售商可以建立產品，並為每項產品提供多個視角的參考圖片，以視覺化的方式呈現產品。然後將這些產品加入產品組合 (即產品目錄)。目前 Vision API Product Search 支援下列產品類別：居家用品、服飾、玩具、民生消費用品和一般用品。

使用者以自有圖片查詢產品組合時，Vision API Product Search 會運用機器學習技術，比較使用者用來查詢的圖片與零售商產品的產品組合圖片，然後傳回視覺上和語意上類似的搜尋結果排名清單。

3. 下載並執行範例應用程式

下載程式碼

點選下方連結即可下載這個程式碼研究室的所有程式碼：

將下載的 ZIP 檔案解壓縮。這會解壓縮根資料夾 (odml-pathways-main)，其中包含您需要的所有資源。在本程式碼研究室中，您只需要 product-search/codelab2/android 子目錄中的來源。

odml-pathways 存放區中的 codelab2 子目錄包含兩個目錄：

starter：本程式碼研究室的範例程式碼，您將以這個程式碼為基礎進行建構。
final：完成的範例應用程式程式碼。

這裡的範例應用程式，就是您在「偵測圖片中的物體，建構視覺化產品搜尋功能：Android」程式碼研究室中建構的應用程式。這項功能會使用 ML Kit 物件偵測與追蹤技術，偵測圖片中的物件並顯示在畫面上。

將應用程式匯入 Android Studio

首先，請將範例應用程式匯入 Android Studio。

前往 Android Studio，選取「Import Project (Gradle, Eclipse ADT, etc.)」，然後從先前下載的原始碼中選擇 starter 資料夾。

執行範例應用程式

將專案匯入 Android Studio 後，您就可以首次執行應用程式。透過 USB 將 Android 裝置連線至主機，或啟動 Android Studio 模擬器，然後按一下 Android Studio 工具列中的「Run」 ( )。

(如果這個按鈕已停用，請確認您只匯入 starter/app/build.gradle，而非整個存放區)。

現在 Android 裝置上應該會啟動應用程式。這項功能已具備物件偵測能力，可偵測圖片中的時尚單品，並顯示單品位置。使用預設相片確認。

範例應用程式的螢幕截圖，可偵測圖片中的物件

接下來，您將擴充應用程式，將偵測到的物件傳送至 Vision API Product Search 後端，並在畫面上顯示搜尋結果。

4. 處理物件選取作業

允許使用者輕觸偵測到的物件來選取

現在，您要加入程式碼，讓使用者從圖片中選取物件並開始搜尋產品。範例應用程式已具備偵測圖片中物件的功能。圖片中可能有多個物件，或是偵測到的物件只占圖片的一小部分。因此，使用者必須輕觸其中一個偵測到的物體，指出要用哪個物體搜尋產品。

從圖片中偵測到的時尚單品螢幕截圖

為簡化程式碼研究室並專注於機器學習，我們已在範例應用程式中導入一些樣板 Android 程式碼，協助您偵測使用者輕觸的物件。在主要活動 (ObjectDetectorActivity) 中顯示圖片的檢視區塊，實際上是擴充 Android OS 預設 ImageView 的自訂檢視區塊 (ImageClickableView)。這個類別會實作一些實用的公用程式方法，包括：

fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit))：這是回呼，用於接收僅包含使用者輕觸物件的裁剪圖片。您會將這張裁剪後的圖片傳送至產品搜尋後端。

新增程式碼，處理使用者輕觸偵測到的物件。

前往 ObjectDetectorActivity 類別中的 initViews 方法，並在方法結尾新增下列程式碼行：(Android Studio 會告知您找不到 startProductImageSearch 方法。請放心，您稍後會實作這項功能。

// Callback received when the user taps on any of the detected objects.
ivPreview.setOnObjectClickListener { objectImage ->
    startProductImageSearch(objectImage)
}

使用者輕觸畫面上偵測到的任何物件時，系統都會呼叫 onObjectClickListener。並接收僅包含所選物件的裁剪圖片。舉例來說，如果使用者輕觸右側穿著洋裝的人，系統會觸發接聽程式，並傳回 objectImage，如下所示。

傳遞至 onObjectClickListener 的裁剪圖片示例

將裁剪後的圖片傳送至產品搜尋活動

現在，您將實作邏輯，在獨立活動 (ProductSearchActivity) 中將查詢圖片傳送至 Vision API Product Search 後端。

所有 UI 元件都已預先實作，因此您可以專心編寫程式碼，與產品搜尋後端通訊。

ProductSearchActivity 上的 UI 元件螢幕截圖

新增程式碼，將使用者選取的物件圖片傳送至 ProductSearchActivity。

返回 Android Studio，然後將這個 startProductImageSearch 方法新增至 ObjectDetectorActivity 類別：

private fun startProductImageSearch(objectImage: Bitmap) {
    try {
        // Create file based Bitmap. We use PNG to preserve the image quality
        val savedFile = createImageFile(ProductSearchActivity.CROPPED_IMAGE_FILE_NAME)
        objectImage.compress(Bitmap.CompressFormat.PNG, 100, FileOutputStream(savedFile))

        // Start the product search activity (using Vision Product Search API.).
        startActivity(
            Intent(
                    this,
                    ProductSearchActivity::class.java
            ).apply {
                // As the size limit of a bundle is 1MB, we need to save the bitmap to a file
                // and reload it in the other activity to support large query images.
                putExtra(
                    ProductSearchActivity.REQUEST_TARGET_IMAGE_PATH,
                    savedFile.absolutePath
                )
            })
    } catch (e: Exception) {
        // IO Exception, Out Of memory ....
        Toast.makeText(this, e.message, Toast.LENGTH_SHORT).show()
        Log.e(TAG, "Error starting the product image search activity.", e)
    }
}

這段程式碼片段會執行 3 項作業：

擷取裁剪後的圖片，並序列化為 PNG 檔案。
啟動 ProductSearchActivity，執行產品搜尋序列。
在啟動活動意圖中加入裁剪後的圖片 URI，以便 ProductSearchActivity 稍後擷取該 URI，做為查詢圖片。

請留意下列事項：

為方便瞭解程式碼研究室，偵測物件和查詢後端的邏輯已分成 2 項活動。您可以自行決定如何在應用程式中導入這些功能。
您需要將查詢圖片寫入檔案，並在活動之間傳遞圖片 URI，因為查詢圖片可能大於 Android Intent 的 1 MB 大小限制。
查詢圖片可以儲存為 PNG 格式，因為這是無損格式。

在產品搜尋活動中擷取查詢圖片

在 ProductSearchActivity 中，擷取查詢圖片並顯示在螢幕上的程式碼已在入門應用程式中實作。

前往 onCreate 方法，確認該處已顯示以下程式碼：

// Receive the query image and show it on the screen
intent.getStringExtra(REQUEST_TARGET_IMAGE_PATH)?.let { absolutePath ->
    viewBinding.ivQueryImage.setImageBitmap(BitmapFactory.decodeFile(absolutePath))
}

執行應用程式

現在請按一下 Android Studio 工具列中的「Run」 ( )。

應用程式載入後，輕觸任一預設圖片，然後選取偵測到的物件。

確認 ProductSearchActivity 顯示您輕觸的圖片。「Search」按鈕目前還沒有任何作用，但我們會在後續實作。

輕觸偵測到的其中一個物體後，畫面應會顯示類似下方的訊息。

5. 探索產品搜尋後端

建構產品圖片搜尋後端

本程式碼研究室需要使用 Vision API Product Search 建構產品搜尋後端。您可以透過下列兩種方式達成此目的：

方法 1：使用為您部署的示範後端

您可以使用 Google 已為您部署的產品搜尋後端，繼續進行這個程式碼研究室。如要複製示範後端，請按照 Vision API Product Search 快速入門導覽課程操作。

方法 2：按照 Vision API Product Search 快速入門導覽課程，自行建立後端

建議您選取這個選項，深入瞭解如何建構產品搜尋後端，以便日後為自己的產品目錄建構後端。您必須具備以下項目：

已啟用計費功能的 Google Cloud 帳戶。(可以是免費試用帳戶)。
具備 Google Cloud 概念的相關知識，包括專案、服務帳戶等。

您可以在學習路徑中瞭解如何執行這項操作。

瞭解重要概念

與產品搜尋後端互動時，您會遇到以下概念：

產品集：產品集是產品群組的簡單容器。產品目錄可以表示為產品組合及其產品。
產品：建立產品集後，即可建立產品並加入產品集。
產品的參考圖片：這些圖片包含產品的各種視角。參考圖片可用於搜尋外觀相似的產品。
搜尋產品：建立產品集並完成索引作業後，即可使用 Cloud Vision API 查詢產品集。

瞭解預設產品目錄

本程式碼研究室使用的產品搜尋示範後端，是透過 Vision API Product Search 和約一百張鞋類和洋裝圖片的產品目錄建立而成。以下是目錄中的一些圖片：

預設產品目錄中的範例

呼叫產品搜尋示範後端

您可以設定 Google Cloud API 金鑰，並將 API 金鑰的存取權限制為僅限您的應用程式，直接從行動應用程式呼叫 Vision API Product Search。

為簡化本程式碼研究室，我們已設定 Proxy 端點，讓您存取示範後端，不必擔心 API 金鑰和驗證問題。這個服務會接收來自行動應用程式的 HTTP 要求、附加 API 金鑰，然後將要求轉送至 Vision API Product Search 後端。接著，Proxy 會收到後端的回應，並將其傳回行動應用程式。

Proxy 端點：https://us-central1-odml-codelabs.cloudfunctions.net/productSearch
Proxy 行為：附加適當的驗證標頭，並將 API 要求轉送至 Vision API Product Search 後端。舉例來說，對 https://us-central1-odml-codelabs.cloudfunctions.net/productSearch/images:annotate 的 API 呼叫會轉送至 https://vision.googleapis.com/v1/images:annotate

在本程式碼研究室中，您將使用 Vision API Product Search 的兩項 API：

projects.locations.images.annotate：將查詢圖片傳送至伺服器，並從預設產品目錄接收與查詢圖片相似的產品清單。
projects.locations.products.referenceImages.get：取得上述 API 呼叫傳回的產品圖片 URI，向使用者顯示。

6. 實作 API 用戶端

瞭解產品搜尋工作流程

按照這個工作流程，透過後端執行產品搜尋：

將查詢圖片編碼為 Base64 字串
使用查詢圖片呼叫 projects.locations.images.annotate 端點
從上一個 API 呼叫接收產品圖片 ID，然後傳送至 projects.locations.products.referenceImages.get 端點，取得搜尋結果中產品圖片的 URI。

實作 API 用戶端類別

現在，您將在名為 ProductSearchAPIClient 的專屬類別中，導入呼叫產品搜尋後端的程式碼。範例應用程式已為您實作部分樣板程式碼：

class ProductSearchAPIClient：這個類別目前大多是空白，但其中包含一些方法，您將在本程式碼研究室稍後實作這些方法。
fun convertBitmapToBase64(bitmap: Bitmap)：將 Bitmap 例項轉換為 Base64 表示法，然後傳送至產品搜尋後端
fun annotateImage(image: Bitmap): Task<List<ProductSearchResult>>：呼叫 projects.locations.images.annotate API 並剖析回應。
fun fetchReferenceImage(searchResult: ProductSearchResult): Task<ProductSearchResult>：呼叫 projects.locations.products.referenceImages.get API 並剖析回應。
SearchResult.kt：這個檔案包含多個資料類別，代表 Vision API Product Search 後端傳回的型別。

指定 API 設定

前往 ProductSearchAPIClient 類別，您會看到已定義的產品搜尋後端設定：

// 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"

VISION_API_URL 是 Cloud Vision API 的 API 端點。繼續使用示範後端時，請將此值設為 Proxy 端點。不過，如果您部署自己的後端，則需要將其變更為 Cloud Vision API 端點。https://vision.googleapis.com/v1。
VISION_API_KEY 是 Cloud 專案的 API 金鑰。由於 Proxy 已處理驗證，您可以將此欄位留空。
VISION_API_PROJECT_ID 是 Cloud 專案 ID。odml-codelabs 是部署示範後端的 Cloud 專案。
VISION_API_LOCATION_ID 是部署產品搜尋後端的 Cloud 位置。us-east1 是我們部署示範後端的所在位置。
VISION_API_PRODUCT_SET_ID 是產品目錄的 ID (在 Vision API 中又稱為「產品集」)，您要在其中搜尋視覺上類似的產品。一個 Cloud 專案可以有多個目錄。product_set0 是示範後端的預設產品目錄。

7. 呼叫產品搜尋 API

探索 API 要求和回應格式

如要尋找與指定圖片類似的產品，請將圖片的 Google Cloud Storage URI、網頁網址或 base64 編碼字串傳送至 Vision API Product Search。在本程式碼研究室中，您將使用 base64 編碼字串選項，因為查詢圖片只存在於使用者的裝置中。

您需要將 POST 要求傳送至 projects.locations.images.annotate 端點，並附上這個要求 JSON 主體：

{
  "requests": [
    {
      "image": {
        "content": {base64-encoded-image}
      },
      "features": [
        {
          "type": "PRODUCT_SEARCH",
          "maxResults": 5
        }
      ],
      "imageContext": {
        "productSearchParams": {
          "productSet": "projects/{project-id}/locations/{location-id}/productSets/{product-set-id}",
          "productCategories": [
               "apparel-v2"
          ],
        }
      }
    }
  ]
}

您需要指定一些參數：

base64-encoded-image：查詢圖片二進位資料的 Base64 表示法 (ASCII 字串)。
project-id：您的 GCP 專案 ID。
location-id：有效的地點 ID。
product-set-id：要對其執行作業的產品組合 ID。

由於產品目錄只包含鞋子和洋裝圖片，請將 productCategories 指定為 apparel-v2。v2 代表我們使用的是第 2 版服飾產品搜尋機器學習模型。

如果要求成功，伺服器會傳回 200 OK HTTP 狀態碼與 JSON 格式的回應。回應 JSON 包含下列兩種結果類型：

productSearchResults - 包含整張圖片的相符產品清單。
productGroupedResults - 包含圖片中識別到的每個產品的定界框座標和相符項目。

由於產品已從原始圖片裁剪下來，您會在 productSearchResults 清單中剖析結果。

以下是產品搜尋結果物件中的幾個重要欄位：

product.name：產品的專屬 ID，格式為 projects/{project-id}/locations/{location-id}/products/{product_id}
product.score：值，表示搜尋結果與查詢圖片的相似程度。值越大表示越相似。
product.image：產品參考圖片的專屬 ID，格式為 projects/{project-id}/locations/{location-id}/products/{product_id}/referenceImages/{image_id}。您需要向 projects.locations.products.referenceImages.get 發出另一個 API 要求，取得這張參考圖片的網址，以便顯示在畫面上。
product.labels：產品的預先定義標記清單。如果只想在搜尋結果中顯示特定類別的服飾 (例如洋裝)，這個功能就非常實用。

將查詢圖片轉換為 base64

您需要將查詢圖片轉換為 Base64 字串表示法，並將該字串附加至要求主體中的 JSON 物件。

前往 ProductSearchAPIClient 類別，找出空白的 convertBitmapToBase64 方法，並替換為以下實作內容：

private fun convertBitmapToBase64(bitmap: Bitmap): String {
    val byteArrayOutputStream = ByteArrayOutputStream()
    bitmap.compress(Bitmap.CompressFormat.PNG, 100, byteArrayOutputStream)
    val byteArray: ByteArray = byteArrayOutputStream.toByteArray()
    return Base64.encodeToString(byteArray, Base64.DEFAULT)
}

實作 API 呼叫

接著，製作產品搜尋 API 要求並傳送至後端。您將使用 Volley 提出 API 要求，並使用 Task API 回傳結果。

返回 ProductSearchAPIClient 類別，找出空白的 annotateImage 方法，並替換為下列實作內容：

fun annotateImage(image: Bitmap): Task<List<ProductSearchResult>> {
    // Initialization to use the Task API
    val apiSource = TaskCompletionSource<List<ProductSearchResult>>()
    val apiTask = apiSource.task

    // Convert the query image to its Base64 representation to call the Product Search API.
    val base64: String = convertBitmapToBase64(image)

    // Craft the request body JSON.
    val requestJson = """
        {
          "requests": [
            {
              "image": {
                "content": """".trimIndent() + base64 + """"
              },
              "features": [
                {
                  "type": "PRODUCT_SEARCH",
                  "maxResults": $VISION_API_PRODUCT_MAX_RESULT
                }
              ],
              "imageContext": {
                "productSearchParams": {
                  "productSet": "projects/${VISION_API_PROJECT_ID}/locations/${VISION_API_LOCATION_ID}/productSets/${VISION_API_PRODUCT_SET_ID}",
                  "productCategories": [
                       "apparel-v2"
                     ]
                }
              }
            }
          ]
        }
    """.trimIndent()

    // Add a new request to the queue
    requestQueue.add(object :
        JsonObjectRequest(
            Method.POST,
            "$VISION_API_URL/images:annotate?key=$VISION_API_KEY",
            JSONObject(requestJson),
            { response ->
                // Parse the API JSON response to a list of ProductSearchResult object/
                val productList = apiResponseToObject(response)

                // Return the list.
                apiSource.setResult(productList)
            },
            // Return the error
            { error -> apiSource.setException(error) }
        ) {
        override fun getBodyContentType() = "application/json"
    }.apply {
        setShouldCache(false)
    })

    return apiTask
}

在 UI 上顯示搜尋結果

現在 ProductSearchAPIClient 中的 API 程式碼已準備就緒。返回活動 ProductSearchActivity，實作 UI 程式碼。

活動已有一些樣板程式碼，會觸發 searchByImage(queryImage: Bitmap) 方法。將程式碼新增至這個目前空白的方法，呼叫後端並在 UI 上顯示結果。

apiClient.annotateImage(queryImage)
    .addOnSuccessListener { showSearchResult(it) }
    .addOnFailureListener { error ->
        Log.e(TAG, "Error calling Vision API Product Search.", error)
        showErrorResponse(error.localizedMessage)
    }

showSearchResult 方法包含一些樣板程式碼，可剖析 API 回應並顯示在畫面上。

開始執行

現在請按一下 Android Studio 工具列中的「Run」圖示 ( )。應用程式載入後，輕觸任一預設圖片，選取偵測到的物件，然後輕觸「搜尋」按鈕，即可查看後端傳回的搜尋結果。您將看見類似下方的內容：

產品搜尋結果畫面螢幕截圖

後端已從預設產品目錄傳回外觀相似的產品清單。不過，您會發現產品圖片仍為空白。這是因為 projects.locations.images.annotate 端點只會傳回產品圖片 ID，例如 projects/odml-codelabs/locations/us-east1/products/product_id77/referenceImages/image77。您需要再次呼叫 projects.locations.products.referenceImages.get 端點，並取得這張參考圖片的網址，才能在畫面上顯示。

8. 取得產品參考圖片

探索 API 要求和回應格式

您會將空白要求主體的 GET HTTP 要求傳送至 projects.locations.products.referenceImages.get 端點，以取得產品搜尋端點傳回的產品圖片 URI。

HTTP 要求如下所示：

GET $VISION_API_URL/projects/odml-codelabs/locations/us-east1/products/product_id77/referenceImages/image77?key=$VISION_API_KEY

如果要求成功，伺服器會傳回 200 OK HTTP 狀態碼與 JSON 格式的回應，如下所示：

{
  "name":"projects/odml-codelabs/locations/us-east1/products/product_id77/referenceImages/image77",
  "uri":"gs://cloud-ai-vision-data/product-search-tutorial/images/46991e7370ba11e8a1bbd20059124800.jpg"
}

name：參考圖片 ID
uri：Google Cloud Storage (GCS) 中的圖片 URI。

試用版產品搜尋後端的參考圖片已設定為具有 public-read 權限。因此，您可以輕鬆將 GCS URI 轉換為 HTTP 網址，並顯示在應用程式 UI 中。您只需要將 gs:// 前置字串替換為 https://storage.googleapis.com/。

實作 API 呼叫

接著，製作產品搜尋 API 要求並傳送至後端。您會使用 Volley 和 Task API，方式與產品搜尋 API 呼叫類似。

返回 ProductSearchAPIClient 類別，找出空白的 fetchReferenceImage 方法，並替換為下列實作內容：

private fun fetchReferenceImage(searchResult: ProductSearchResult): Task<ProductSearchResult> {
    // Initialization to use the Task API
    val apiSource = TaskCompletionSource<ProductSearchResult>()
    val apiTask = apiSource.task

    // Craft the API request to get details about the reference image of the product
    val stringRequest = object : StringRequest(
        Method.GET,
        "$VISION_API_URL/${searchResult.imageId}?key=$VISION_API_KEY",
        { response ->
            val responseJson = JSONObject(response)
            val gcsUri = responseJson.getString("uri")

            // Convert the GCS URL to its HTTPS representation
            val httpUri = gcsUri.replace("gs://", "https://storage.googleapis.com/")

            // Save the HTTPS URL to the search result object
            searchResult.imageUri = httpUri

            // Invoke the listener to continue with processing the API response (eg. show on UI)
            apiSource.setResult(searchResult)
        },
        { error -> apiSource.setException(error) }
    ) {

        override fun getBodyContentType(): String {
            return "application/json; charset=utf-8"
        }
    }
    Log.d(ProductSearchActivity.TAG, "Sending API request.")

    // Add the request to the RequestQueue.
    requestQueue.add(stringRequest)

    return apiTask
}

這個方法會採用產品搜尋端點傳回的 searchResult: ProductSearchResult 物件，然後執行下列步驟：

呼叫參照圖片端點，取得參照圖片的 GCS URI。
將 GCS URI 轉換為 HTTP 網址。
使用這個 HTTP 網址更新 searchResult 物件的 httpUri 屬性。

連結這兩項 API 要求

返回 annotateImage 並進行修改，取得所有參照圖片的 HTTP 網址，然後將 ProductSearchResult 清單傳回給呼叫端。

尋找以下這行程式碼：

// Return the list.
apiSource.setResult(productList)

然後替換為下列實作項目：

// Loop through the product list and create tasks to load reference images.
// We will call the projects.locations.products.referenceImages.get endpoint
// for each product.
val fetchReferenceImageTasks = productList.map { fetchReferenceImage(it) }

// When all reference image fetches have completed,
// return the ProductSearchResult list
Tasks.whenAllComplete(fetchReferenceImageTasks)
    // Return the list of ProductSearchResult with product images' HTTP URLs.
    .addOnSuccessListener { apiSource.setResult(productList) }
    // An error occurred so returns it to the caller.
    .addOnFailureListener { apiSource.setException(it) }

我們已在 ProductSearchAdapter 類別中為您實作樣板程式碼，在畫面上顯示參考圖片，因此您可以繼續重新執行應用程式。

開始執行

現在請按一下 Android Studio 工具列中的「Run」圖示 ( )。應用程式載入後，輕觸任一預設圖片，選取偵測到的物件，然後輕觸「搜尋」按鈕，即可查看搜尋結果，這次會顯示產品圖片。

你覺得產品搜尋結果合理嗎？

9. 恭喜！

您已學會如何呼叫 Vision API Product Search 後端，為 Android 應用程式新增產品圖片搜尋功能。您只需要這些知識，就能讓應用程式正常運作！

繼續操作時，您可能會想使用產品目錄建立自己的後端。請參閱產品圖片搜尋學習路徑中的下一個程式碼研究室，瞭解如何建構自己的後端，以及設定 API 金鑰，以便從行動應用程式呼叫後端。

涵蓋內容

如何從 Android 應用程式呼叫 Vision API Product Search 後端

後續步驟

如要瞭解如何建構自己的後端，請參閱「使用 Vision API Product Search 建構產品圖片搜尋後端」程式碼研究室。
在裝置端機器學習網站上查看其他學習路徑
在自己的 Android 應用程式中建構產品搜尋功能

瞭解詳情

https://cloud.google.com/vision/product-search/docs

在 Android 上呼叫 Vision API Product Search 後端 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

1. 事前準備

建構項目

課程內容

軟硬體需求

2. 關於 Vision API Product Search

3. 下載並執行範例應用程式

下載程式碼

將應用程式匯入 Android Studio

執行範例應用程式

4. 處理物件選取作業

允許使用者輕觸偵測到的物件來選取

將裁剪後的圖片傳送至產品搜尋活動

在產品搜尋活動中擷取查詢圖片

執行應用程式

5. 探索產品搜尋後端

建構產品圖片搜尋後端

方法 1：使用為您部署的示範後端

方法 2：按照 Vision API Product Search 快速入門導覽課程，自行建立後端

瞭解重要概念

瞭解預設產品目錄

呼叫產品搜尋示範後端

6. 實作 API 用戶端

瞭解產品搜尋工作流程

實作 API 用戶端類別

指定 API 設定

7. 呼叫產品搜尋 API

探索 API 要求和回應格式

將查詢圖片轉換為 base64

實作 API 呼叫

在 UI 上顯示搜尋結果

開始執行

8. 取得產品參考圖片

探索 API 要求和回應格式

實作 API 呼叫

連結這兩項 API 要求

開始執行

9. 恭喜！

涵蓋內容

後續步驟

瞭解詳情

在 Android 上呼叫 Vision API Product Search 後端