Mengenali Tempat Terkenal secara Aman dengan Cloud Vision menggunakan Firebase Auth dan Functions di platform Apple

Firebase ML Vision SDK untuk recognizing well-known landmarks dalam gambar kini sudah tidak digunakan lagi (Lihat dokumentasi lamanya di sini). Halaman ini berisi penjelasan mengenai cara memanggil Cloud Vision API menggunakan Firebase Auth dan Firebase Functions agar hanya pengguna terautentikasi yang diizinkan mengakses API. Cara ini adalah langkah alternatif dari SDK yang sudah tidak digunakan lagi.

Untuk memanggil Google Cloud API dari aplikasi, Anda perlu membuat REST API perantara yang menangani otorisasi dan melindungi nilai rahasia seperti kunci API. Kemudian, Anda perlu menulis kode di aplikasi seluler untuk mengautentikasi ke dan berkomunikasi dengan layanan perantara ini.

Salah satu cara untuk membuat REST API ini adalah dengan menggunakan Firebase Authentication dan Functions, yang memberi Anda gateway serverless dan terkelola ke Google Cloud API yang menangani autentikasi dan dapat dipanggil dari aplikasi seluler Anda dengan SDK yang telah dibangun sebelumnya.

Panduan ini menunjukkan cara menggunakan teknik tersebut untuk memanggil Cloud Vision API dari aplikasi Anda. Metode ini akan mengizinkan semua pengguna terautentikasi untuk mengakses layanan Cloud Vision yang ditagih melalui project Cloud Anda. Jadi, pertimbangkan apakah mekanisme autentikasi ini sudah memadai untuk kasus penggunaan Anda sebelum melanjutkan.

Penggunaan Cloud Vision API diatur dalam Perjanjian Lisensi Google Cloud Platform dan Persyaratan Khusus Layanan, serta dikenai biaya yang sesuai. Untuk mengetahui informasi penagihan, lihat halaman Harga.

Sebelum memulai

Mengonfigurasi project Anda

Jika Anda belum menambahkan Firebase ke aplikasi, lakukan dengan mengikuti langkah-langkahnya di panduan memulai.

Gunakan Swift Package Manager untuk menginstal dan mengelola dependensi Firebase.

Buka panduan penginstalan kami untuk mempelajari berbagai cara menambahkan Firebase SDK ke project Apple, termasuk mengimpor framework secara langsung dan menggunakan CocoaPods.

1. Di Xcode, dengan project aplikasi Anda dalam keadaan terbuka, buka File > Add Packages.
2. Saat diminta, tambahkan repositori SDK platform Apple Firebase:

  https://github.com/firebase/firebase-ios-sdk.git

Catatan: Project baru sebaiknya menggunakan versi SDK default (terbaru), tetapi Anda dapat memilih versi yang lebih lama jika perlu.
3. Pilih library Firebase ML.
4. Tambahkan flag -ObjC ke bagian Other Linker Flags pada setelan build target Anda.
5. Setelah selesai, Xcode akan otomatis mulai me-resolve dan mendownload dependensi Anda di latar belakang.

Berikutnya, lakukan beberapa penyiapan dalam aplikasi:

1. Di aplikasi Anda, impor Firebase:

   Swift

   import FirebaseMLModelDownloader

   Objective-C

   @import FirebaseMLModelDownloader;

Beberapa langkah konfigurasi lagi dan kita akan siap:

1. Jika Anda belum mengaktifkan API berbasis Cloud untuk project Anda, lakukan sekarang:

   1. Buka halaman API di bagian Firebase ML di Firebase console.

   2. Jika Anda belum mengupgrade project ke paket harga Blaze, klik Upgrade untuk melakukannya. (Anda akan diminta untuk mengupgrade hanya jika project tersebut tidak menggunakan paket Blaze.)

      Hanya project tingkat Blaze yang dapat menggunakan API berbasis Cloud.

   3. Jika API berbasis Cloud belum diaktifkan, klik Enable Cloud-based APIs.
2. Konfigurasikan kunci API Firebase yang ada untuk melarang akses ke Cloud Vision API:
   1. Buka halaman Credentials di Konsol Cloud.
   2. Untuk setiap kunci API dalam daftar, buka tampilan edit. Selanjutnya di bagian Pembatasan Kunci, tambahkan semua API yang tersedia ke dalam daftar, kecuali Cloud Vision API.

Men-deploy fungsi callable

Selanjutnya, deploy Cloud Function yang akan Anda gunakan untuk menghubungkan aplikasi dan Cloud Vision API. Repositori functions-samples berisi contoh yang dapat Anda gunakan.

Secara default, mengakses Cloud Vision API melalui fungsi ini akan memberikan akses ke Cloud Vision API hanya kepada pengguna aplikasi yang telah terautentikasi. Anda dapat mengubah fungsi untuk persyaratan yang berbeda.

Untuk men-deploy fungsi tersebut:

1. Clone atau download repo functions-samples dan ubah ke direktori Node-1st-gen/vision-annotate-image:

   git clone https://github.com/firebase/functions-samples
   cd Node-1st-gen/vision-annotate-image
   

2. Instal dependensi:

   cd functions
   npm install
   cd ..

3. Jika Anda tidak memiliki Firebase CLI, instal sekarang.
4. Lakukan inisialisasi project Firebase di direktori vision-annotate-image. Saat diminta, pilih project Anda dari daftar.

   firebase init

5. Deploy fungsi tersebut:

   firebase deploy --only functions:annotateImage

Menambahkan Firebase Auth ke aplikasi Anda

Fungsi callable yang di-deploy di atas akan menolak permintaan apa pun dari pengguna aplikasi yang tidak terautentikasi. Jika belum melakukannya, Anda harus menambahkan Firebase Auth ke aplikasi Anda.

Menambahkan dependensi yang diperlukan ke aplikasi Anda

Gunakan Swift Package Manager untuk menginstal library Cloud Functions for Firebase.

1. Siapkan gambar input

Untuk memanggil Cloud Vision, gambar harus diformat sebagai string berenkode base64. Untuk memproses UIImage:

Swift

guard let imageData = uiImage.jpegData(compressionQuality: 1.0) else { return }
let base64encodedImage = imageData.base64EncodedString()

Objective-C

NSData *imageData = UIImageJPEGRepresentation(uiImage, 1.0f);
NSString *base64encodedImage =
  [imageData base64EncodedStringWithOptions:NSDataBase64Encoding76CharacterLineLength];

2. Panggil fungsi callable untuk mengenali tempat terkenal

Untuk mengenali tempat terkenal dalam gambar, panggil fungsi callable dengan meneruskan permintaan JSON Cloud Vision.

1. Pertama, lakukan inisialisasi instance Cloud Functions:

   Swift

   lazy var functions = Functions.functions()
   

   Objective-C

   @property(strong, nonatomic) FIRFunctions *functions;
   

2. Buat permintaan dengan Type yang ditetapkan ke LANDMARK_DETECTION:

   Swift

   let requestData = [
     "image": ["content": base64encodedImage],
     "features": ["maxResults": 5, "type": "LANDMARK_DETECTION"]
   ]
   

   Objective-C

   NSDictionary *requestData = @{
     @"image": @{@"content": base64encodedImage},
     @"features": @{@"maxResults": @5, @"type": @"LANDMARK_DETECTION"}
   };
   

3. Terakhir, panggil fungsi tersebut:

   Swift

   do {
     let result = try await functions.httpsCallable("annotateImage").call(requestData)
     print(result)
   } catch {
     if let error = error as NSError? {
       if error.domain == FunctionsErrorDomain {
         let code = FunctionsErrorCode(rawValue: error.code)
         let message = error.localizedDescription
         let details = error.userInfo[FunctionsErrorDetailsKey]
       }
       // ...
     }
   }
   

   Objective-C

   [[_functions HTTPSCallableWithName:@"annotateImage"]
                             callWithObject:requestData
                                 completion:^(FIRHTTPSCallableResult * _Nullable result, NSError * _Nullable error) {
           if (error) {
             if ([error.domain isEqualToString:@"com.firebase.functions"]) {
               FIRFunctionsErrorCode code = error.code;
               NSString *message = error.localizedDescription;
               NSObject *details = error.userInfo[@"details"];
             }
             // ...
           }
           // Function completed succesfully
           // Get information about labeled objects
   
         }];
   

3. Dapatkan informasi tentang tempat terkenal yang dikenali

Jika operasi pengenalan tempat terkenal berhasil, respons JSON BatchAnnotateImagesResponse akan ditampilkan di hasil tugas. Setiap objek dalam array landmarkAnnotations mewakili tempat terkenal yang teridentifikasi dalam gambar. Untuk setiap tempat terkenal, Anda bisa mendapatkan koordinat pembatasnya di gambar input, nama tempat terkenal tersebut, garis lintang dan bujurnya, ID entitas Pustaka Pengetahuannya (jika ada), dan skor keyakinan kecocokannya. Contoh:

Swift

if let labelArray = (result?.data as? [String: Any])?["landmarkAnnotations"] as? [[String:Any]] {
  for labelObj in labelArray {
    let landmarkName = labelObj["description"]
    let entityId = labelObj["mid"]
    let score = labelObj["score"]
    let bounds = labelObj["boundingPoly"]
    // Multiple locations are possible, e.g., the location of the depicted
    // landmark and the location the picture was taken.
    guard let locations = labelObj["locations"] as? [[String: [String: Any]]] else { continue }
    for location in locations {
      let latitude = location["latLng"]?["latitude"]
      let longitude = location["latLng"]?["longitude"]
    }
  }
}

Objective-C

NSArray *labelArray = result.data[@"landmarkAnnotations"];
for (NSDictionary *labelObj in labelArray) {
  NSString *landmarkName = labelObj[@"description"];
  NSString *entityId = labelObj[@"mid"];
  NSNumber *score = labelObj[@"score"];
  NSArray *bounds = labelObj[@"boundingPoly"];
  // Multiple locations are possible, e.g., the location of the depicted
  // landmark and the location the picture was taken.
  NSArray *locations = labelObj[@"locations"];
  for (NSDictionary *location in locations) {
    NSNumber *latitude = location[@"latLng"][@"latitude"];
    NSNumber *longitude = location[@"latLng"][@"longitude"];
  }
}