1. ก่อนเริ่มต้น
ก่อนหน้านี้ในเส้นทางการเรียนรู้การค้นหารูปภาพผลิตภัณฑ์ คุณได้เรียนรู้วิธีเรียกใช้แบ็กเอนด์การค้นหาผลิตภัณฑ์ที่สร้างด้วย Vision API Product Search สำหรับผลิตภัณฑ์ที่คล้ายกันในแคตตาล็อกผลิตภัณฑ์
ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีสร้างแบ็กเอนด์ที่คล้ายกัน แต่ใช้แคตตาล็อกผลิตภัณฑ์ของคุณ
สิ่งที่คุณจะได้เรียนรู้
- วิธีสร้างแบ็กเอนด์การค้นหาผลิตภัณฑ์ด้วย Vision API Product Search
- วิธีตั้งค่าคีย์ API เพื่อเข้าถึง Vision API จากแอปบนอุปกรณ์เคลื่อนที่
สิ่งที่ต้องมี
- บัญชี Google Cloud ที่เปิดใช้การเรียกเก็บเงิน (อาจเป็นบัญชีทดลองใช้ฟรี)
2. เกี่ยวกับ Vision API Product Search
การค้นหาผลิตภัณฑ์ด้วย Vision API เป็นฟีเจอร์ใน Google Cloud ที่ช่วยให้ผู้ค้าปลีกสร้างผลิตภัณฑ์ได้ โดยแต่ละผลิตภัณฑ์จะมีรูปภาพอ้างอิงที่อธิบายผลิตภัณฑ์ด้วยภาพจากมุมมองต่างๆ จากนั้นผู้ค้าปลีกจะเพิ่มผลิตภัณฑ์เหล่านี้ลงในชุดผลิตภัณฑ์ได้ ปัจจุบัน Vision API Product Search รองรับหมวดหมู่ผลิตภัณฑ์ต่อไปนี้ ของใช้ในบ้าน เครื่องแต่งกาย ของเล่น สินค้าบรรจุภัณฑ์ และทั่วไป
เมื่อผู้ใช้ค้นหาชุดผลิตภัณฑ์ด้วยรูปภาพของตนเอง การค้นหาผลิตภัณฑ์ของ Vision API จะใช้แมชชีนเลิร์นนิงเพื่อเปรียบเทียบผลิตภัณฑ์ในรูปภาพคำค้นหาของผู้ใช้กับรูปภาพในชุดผลิตภัณฑ์ของผู้ค้าปลีก จากนั้นจะแสดงรายการผลลัพธ์ที่คล้ายกันทั้งในด้านภาพและความหมาย
3. สร้างแบ็กเอนด์ด้วย Google Cloud
ก่อนหน้านี้ในเส้นทางการเรียนรู้การค้นหารูปภาพผลิตภัณฑ์ คุณได้ใช้แบ็กเอนด์การค้นหาผลิตภัณฑ์แบบสาธิตที่สร้างขึ้นด้วยการค้นหาผลิตภัณฑ์ของ Vision API สร้างแบ็กเอนด์เดียวกันในบัญชี Google Cloud โดยทำตามบทแนะนำนี้
เมื่อดูบทแนะนำเสร็จแล้ว ให้ทำตามขั้นตอนต่อไปนี้เพื่อตั้งค่าคีย์ API เพื่อเรียกแบ็กเอนด์จากแอปบนอุปกรณ์เคลื่อนที่
4. ตั้งค่าคีย์ API
ในคู่มือเริ่มต้นใช้งานการค้นหาผลิตภัณฑ์ของ Vision API คุณได้สร้างแบ็กเอนด์การค้นหาผลิตภัณฑ์ที่รับรูปภาพคำค้นหาและแสดงผลิตภัณฑ์ที่มีลักษณะคล้ายกันได้ หากต้องการเรียกใช้ Product Search API จากแอปบนอุปกรณ์เคลื่อนที่ คุณจะต้องตั้งค่าคีย์ API แล้วจำกัดการเข้าถึงคีย์ API ให้กับแอปบนอุปกรณ์เคลื่อนที่ของคุณเองเพื่อหลีกเลี่ยงการใช้งานที่ไม่ได้รับอนุญาต
สร้างคีย์ API
- ไปที่ Cloud Console > API และบริการ > ข้อมูลเข้าสู่ระบบ นอกจากนี้ คุณยังคลิก URL นี้ แล้วเลือกโปรเจ็กต์ที่คุณใช้ในคู่มือเริ่มต้นใช้งานการค้นหาผลิตภัณฑ์ฉบับย่อได้ด้วย
- เลือกสร้างข้อมูลเข้าสู่ระบบ > คีย์ API คุณจะเห็นกล่องโต้ตอบนี้หากสร้างคีย์ API สำเร็จ
จดคีย์ API นี้ไว้ คุณจะต้องใช้ในภายหลังใน Codelab นี้
จำกัดการเข้าถึงคีย์ API
เมื่อเห็นข้อความแจ้งด้านบน ให้เลือกจำกัดคีย์
ทำตามวิธีการบนหน้าจอเพื่อใช้ข้อจำกัดต่อไปนี้
- ข้อจำกัดของแอปพลิเคชัน > แอป Android
- ข้อจำกัด API > จำกัดคีย์ > Cloud Vision API
5. ดาวน์โหลดและเรียกใช้แอปบนอุปกรณ์เคลื่อนที่
คุณสามารถดาวน์โหลดแอป Android ที่สร้างก่อนหน้านี้ซึ่งใช้แบ็กเอนด์การค้นหาผลิตภัณฑ์เดโม แล้วเปลี่ยนให้ใช้แบ็กเอนด์ใหม่ที่คุณเพิ่งสร้างได้
ดาวน์โหลดโค้ด
คลิกลิงก์ต่อไปนี้เพื่อดาวน์โหลดโค้ดทั้งหมดสำหรับ Codelab นี้
คลายไฟล์ ZIP ที่ดาวน์โหลด ซึ่งจะแตกโฟลเดอร์รูท (odml-pathway-codelabs) ที่มีทรัพยากรทั้งหมดที่คุณต้องการ สำหรับ Codelab นี้ คุณจะต้องใช้แหล่งข้อมูลในไดเรกทอรีย่อย product-search/codelab2/android/final เท่านั้น
แอปใช้ ML Kit Object Detection and Tracking API และแบ็กเอนด์การค้นหาผลิตภัณฑ์เดโมที่สร้างด้วย Vision API Product Search เพื่อให้ผู้ใช้ถ่ายรูปและค้นหาผลิตภัณฑ์ที่คล้ายกันในแคตตาล็อกผลิตภัณฑ์เดโม
นำเข้าแอปไปยัง Android Studio
เริ่มด้วยการนำเข้าแอปเริ่มต้นไปยัง Android Studio
ไปที่ Android Studio เลือกนำเข้าโปรเจ็กต์ (Gradle, Eclipse ADT ฯลฯ) แล้วเลือกโฟลเดอร์ product-search/codelab2/android/final จากซอร์สโค้ดที่คุณดาวน์โหลดไว้ก่อนหน้านี้
เรียกใช้แอปเริ่มต้น
ตอนนี้คุณได้นำเข้าโปรเจ็กต์ไปยัง Android Studio แล้ว และพร้อมที่จะเรียกใช้แอปเป็นครั้งแรก
เชื่อมต่ออุปกรณ์ Android ผ่าน USB กับโฮสต์หรือเริ่มโปรแกรมจำลอง Android Studio แล้วคลิกเรียกใช้ ( 
) ในแถบเครื่องมือของ Android Studio
(หากปุ่มนี้ปิดอยู่ ให้ตรวจสอบว่าคุณนำเข้าเฉพาะ final/app/build.gradle ไม่ใช่ทั้งที่เก็บ)
ตอนนี้แอปควรจะเปิดขึ้นในอุปกรณ์ Android แล้ว ซึ่งทำงานได้อยู่แล้ว แต่ใช้แบ็กเอนด์การค้นหาผลิตภัณฑ์เดโมที่ Google ได้ติดตั้งใช้งานให้คุณ
จากนั้นคุณจะอัปเดตแอปเพื่อใช้แบ็กเอนด์ที่สร้างไว้ก่อนหน้านี้ใน Codelab นี้
6. อัปเดตปลายทาง API
เปลี่ยนการกำหนดค่า API
ไปที่ProductSearchAPIClient class แล้วคุณจะเห็นการกำหนดค่าของแบ็กเอนด์การค้นหาผลิตภัณฑ์ที่กำหนดไว้แล้ว แสดงความคิดเห็นในการกำหนดค่าของแบ็กเอนด์เดโม
// 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"
จากนั้นแทนที่ด้วยการกำหนดค่าของคุณ
// 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 คือปลายทาง API ของ Cloud Vision API
- VISION_API_KEY คือคีย์ API ที่คุณสร้างไว้ก่อนหน้านี้ใน Codelab นี้
- VISION_API_PROJECT_ID , VISION_API_LOCATION_ID , VISION_API_PRODUCT_SET_ID คือค่าที่คุณใช้ในคู่มือเริ่มต้นใช้งานการค้นหาผลิตภัณฑ์ของ Vision API ก่อนหน้านี้ใน Codelab นี้
เรียกใช้
ตอนนี้คลิกเรียกใช้ ( ) ในแถบเครื่องมือ Android Studio เมื่อแอปโหลดแล้ว ให้แตะรูปภาพที่กำหนดล่วงหน้า เลือกออบเจ็กต์ที่ตรวจพบ แล้วแตะปุ่มค้นหาเพื่อดูผลการค้นหา ตอนนี้แอปใช้แบ็กเอนด์การค้นหาผลิตภัณฑ์ที่คุณเพิ่งสร้างแล้ว
7. ยินดีด้วย
คุณได้เรียนรู้วิธีสร้างแบ็กเอนด์การค้นหาผลิตภัณฑ์โดยใช้การค้นหาผลิตภัณฑ์ของ Vision API แล้ว
เพียงเท่านี้คุณก็พร้อมใช้งานแล้ว
สิ่งที่เราได้พูดถึง
- วิธีสร้างแบ็กเอนด์การค้นหาผลิตภัณฑ์โดยใช้แคตตาล็อกผลิตภัณฑ์และ Vision API Product Search
- วิธีตั้งค่าคีย์ API เพื่อเรียกแบ็กเอนด์การค้นหาผลิตภัณฑ์จากแอปบนอุปกรณ์เคลื่อนที่
- วิธีเรียกใช้แบ็กเอนด์จากแอปบนอุปกรณ์เคลื่อนที่
ขั้นตอนถัดไป
- ดูวิดีโอนี้เกี่ยวกับการใช้การค้นหาผลิตภัณฑ์ด้วย Vision API เพื่อสร้างตู้เสื้อผ้าอัจฉริยะ
- ดูเส้นทางการเรียนรู้ ML ในอุปกรณ์สำหรับการค้นหาผลิตภัณฑ์เพื่อดูขั้นตอนทั้งหมดที่จำเป็นในการสร้างการค้นหาผลิตภัณฑ์
- นำสิ่งที่ได้เรียนรู้ไปใช้กับแอปของคุณเอง