Membuat backend penelusuran gambar produk dengan Vision API Product Search

1. Sebelum memulai

25939f5a13eeb3c3.png

Sebelumnya pada jalur pembelajaran penelusuran gambar produk, Anda telah mempelajari cara memanggil backend penelusuran produk yang dibuat dengan Product Search Vision API untuk produk yang mirip secara visual dari katalog produk.

Dalam codelab ini, Anda akan mempelajari cara membuat backend serupa tetapi dengan katalog produk Anda.

Yang akan Anda pelajari

  • Cara membuat backend penelusuran produk dengan Vision API Product Search
  • Cara menyiapkan kunci API untuk mengakses Vision API dari aplikasi seluler

Yang Anda butuhkan

  • Akun Google Cloud dengan penagihan diaktifkan (Dapat berupa akun uji coba gratis)

2. Tentang Vision API Product Search

Vision API Product Search adalah fitur di Google Cloud yang memungkinkan retailer membuat produk, masing-masing berisi gambar referensi yang secara visual menjelaskan produk dari serangkaian sudut pandang. Kemudian, retailer dapat menambahkan produk ini ke kumpulan produk. Saat ini Vision API Product Search mendukung kategori produk berikut: perlengkapan rumah, pakaian, mainan, barang yang dikemas, dan produk umum.

Saat pengguna mengkueri kumpulan produk dengan gambarnya sendiri, Penelusuran Produk Vision API akan menerapkan machine learning untuk membandingkan produk dalam gambar kueri pengguna dengan gambar di kumpulan produk retailer, lalu menampilkan daftar hasil yang serupa secara visual dan semantik.

3 Membuat backend dengan Google Cloud

Sebelumnya dalam jalur pembelajaran penelusuran gambar produk, Anda telah menggunakan backend penelusuran produk demo yang dibuat dengan Product Search Vision API. Buat backend yang sama di akun Google Cloud Anda dengan mengikuti tutorial ini:

Setelah menyelesaikan tutorial, lanjutkan ke langkah-langkah berikut untuk menyiapkan kunci API untuk memanggil backend dari aplikasi seluler Anda.

4. Siapkan kunci API

Dalam panduan memulai Product Search Vision API, Anda telah membuat backend penelusuran produk yang dapat mengambil gambar kueri dan menampilkan produk yang mirip secara visual. Untuk memanggil API penelusuran produk dari aplikasi seluler, Anda perlu menyiapkan kunci API dan kemudian membatasi akses kunci API ke aplikasi seluler Anda sendiri, untuk menghindari penggunaan yang tidak sah.

Membuat Kunci API

  1. Buka Cloud Console > API & Layanan > Kredensial. Anda juga dapat mengklik URL ini dan memilih project yang telah Anda gunakan di panduan memulai Penelusuran Produk.
  2. Pilih Buat Kredensial > Kunci API. Anda akan melihat dialog ini jika kunci API berhasil dibuat:

d0bc04782a41a698.png

Catat kunci API ini. Anda akan menggunakannya nanti dalam codelab ini.

Membatasi akses ke kunci API

Saat melihat permintaan di atas, pilih Batasi kunci.

Ikuti petunjuk di layar untuk menerapkan pembatasan ini:

  • Pembatasan aplikasi > aplikasi Android
  • Pembatasan API > Batasi kunci > Cloud Vision API

5. Mendownload dan menjalankan aplikasi seluler

Anda dapat mendownload aplikasi Android yang Anda buat sebelumnya yang menggunakan backend penelusuran produk demo, dan mengubahnya untuk menggunakan backend baru yang baru saja Anda buat.

Download Kode

Klik link berikut untuk mendownload semua kode untuk codelab ini:

Mengekstrak file zip yang didownload. Tindakan ini akan mengekstrak folder root (odml-pathway-codelabs) beserta semua resource yang akan Anda butuhkan. Untuk codelab ini, Anda hanya memerlukan sumber di subdirektori product-search/codelab2/android/final.

Aplikasi ini menggunakan ML Kit Object Detection and Tracking API, dan backend penelusuran produk demo yang dibuat dengan Vision API Product Search untuk memungkinkan pengguna melakukan foto dan telusuri produk yang mirip secara visual dalam katalog produk demo.

Mengimpor aplikasi ke Android Studio

Mulailah dengan mengimpor aplikasi starter ke Android Studio.

Buka Android Studio, pilih Import Project (Gradle, Eclipse ADT, etc.) lalu pilih folder product-search/codelab2/android/final dari kode sumber yang Anda download sebelumnya.

7c0f27882a2698ac.png

Menjalankan aplikasi awal

Setelah mengimpor project ke Android Studio, Anda siap menjalankan aplikasi untuk pertama kalinya.

Hubungkan perangkat Android melalui USB ke host atau Start emulator Android Studio, dan klik Run ( execute.png) di toolbar Android Studio.

(Jika tombol ini dinonaktifkan, pastikan Anda hanya mengimpor final/app/build.gradle, bukan seluruh repositori.)

Sekarang aplikasi seharusnya sudah diluncurkan di perangkat Android Anda. Fitur ini sudah berfungsi, tetapi menggunakan backend penelusuran produk demo yang telah di-deploy oleh Google untuk Anda.

Selanjutnya, Anda akan mengupdate aplikasi untuk menggunakan backend yang dibuat sebelumnya di codelab ini.

6. Mengupdate endpoint API

Mengubah konfigurasi API

Buka class ProductSearchAPIClient dan Anda akan melihat konfigurasi backend penelusuran produk yang sudah ditentukan. Komentari konfigurasi backend demo:

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

Kemudian ganti dengan konfigurasi Anda:

// 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 adalah endpoint API Cloud Vision API.
  • VISION_API_KEY adalah kunci API yang Anda buat sebelumnya di codelab ini.
  • VISION_API_PROJECT_ID , VISION_API_LOCATION_ID , VISION_API_PRODUCT_SET_ID adalah nilai yang Anda gunakan di panduan memulai Penelusuran Produk Vision API sebelumnya dalam codelab ini.

Menjalankan aplikasi

Sekarang klik Run ( execute.png) di toolbar Android Studio. Setelah aplikasi dimuat, ketuk gambar preset, pilih objek yang terdeteksi, ketuk tombol Telusuri untuk melihat hasil penelusuran. Aplikasi sekarang menggunakan backend penelusuran produk yang baru saja Anda buat.

25939f5a13eeb3c3.png

7. Selamat!

Anda telah mempelajari cara membuat backend penelusuran produk menggunakan Vision API Product Search.

Hanya itu yang Anda perlukan untuk mengaktifkan dan menjalankan!

Yang telah kita bahas

  • Cara membuat backend penelusuran produk menggunakan katalog produk dan Product Search Vision API
  • Cara menyiapkan kunci API untuk memanggil backend penelusuran produk dari aplikasi seluler
  • Cara memanggil backend dari aplikasi seluler

Langkah Berikutnya

  • Tonton video ini tentang menggunakan Vision API Product Search untuk membuat lemari smart
  • Lihat jalur pembelajaran ML Penelusuran Produk di perangkat untuk mempelajari semua langkah yang diperlukan untuk membuat penelusuran produk
  • Terapkan hal-hal yang telah Anda pelajari di aplikasi Anda sendiri

Pelajari Lebih Lanjut