Ikuti semua informasi yang diumumkan di Firebase Summit, dan pelajari bagaimana Firebase dapat membantu Anda mempercepat pengembangan aplikasi dan menjalankan aplikasi dengan percaya diri. Pelajari Lebih Lanjut

Kenali Tengara dengan Aman dengan Cloud Vision menggunakan Firebase Auth and Functions di Android

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

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

Panduan ini menunjukkan cara menggunakan teknik ini untuk memanggil Cloud Vision API dari aplikasi Anda. Metode ini akan memungkinkan semua pengguna yang diautentikasi untuk mengakses layanan yang ditagih Cloud Vision melalui proyek Cloud Anda, jadi pertimbangkan apakah mekanisme autentikasi ini cukup untuk kasus penggunaan Anda sebelum melanjutkan.

Sebelum kamu memulai

Konfigurasikan proyek Anda

  1. Jika Anda belum melakukannya, tambahkan Firebase ke proyek Android Anda .
  2. Jika Anda belum mengaktifkan API berbasis Cloud untuk proyek Anda, lakukan sekarang:

    1. Buka halaman Firebase ML API dari Firebase console.
    2. Jika Anda belum memutakhirkan proyek Anda ke paket harga Blaze, klik Tingkatkan untuk melakukannya. (Anda akan diminta untuk memutakhirkan hanya jika proyek Anda tidak ada dalam paket Blaze.)

      Hanya project level Blaze yang dapat menggunakan API berbasis Cloud.

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

Terapkan fungsi yang dapat dipanggil

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

Secara default, mengakses Cloud Vision API melalui fungsi ini hanya akan mengizinkan pengguna aplikasi Anda yang diautentikasi untuk mengakses Cloud Vision API. Anda dapat memodifikasi fungsi untuk kebutuhan yang berbeda.

Untuk menerapkan fungsi:

  1. Kloning atau unduh fungsi-sampel repo dan ubah ke direktori vision-annotate-image :
    git clone https://github.com/firebase/functions-samples
    cd vision-annotate-image
    
  2. Instal dependensi:
    cd functions
    npm install
    cd ..
    
  3. Jika Anda tidak memiliki Firebase CLI, instal .
  4. Inisialisasi proyek Firebase di direktori vision-annotate-image . Saat diminta, pilih proyek Anda dalam daftar.
    firebase init
  5. Terapkan fungsi:
    firebase deploy --only functions:annotateImage

Tambahkan Firebase Auth ke aplikasi Anda

Fungsi yang dapat dipanggil yang diterapkan di atas akan menolak permintaan apa pun dari pengguna aplikasi Anda yang tidak diautentikasi. Jika Anda belum melakukannya, Anda perlu menambahkan Firebase Auth ke aplikasi Anda.

Tambahkan dependensi yang diperlukan ke aplikasi Anda

  • Tambahkan dependensi untuk Firebase Functions dan pustaka Android gson ke file Gradle modul Anda (tingkat aplikasi) (biasanya app/build.gradle): l10n
    implementation 'com.google.firebase:firebase-functions:20.2.1'
    implementation 'com.google.code.gson:gson:2.8.6'
    
  • 1. Siapkan gambar input

    Untuk memanggil Cloud Vision, gambar harus diformat sebagai string berenkode base64. Untuk memproses gambar dari URI file yang disimpan:
    1. Dapatkan gambar sebagai objek Bitmap :

      Java

      Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), uri);

      Kotlin+KTX

      var bitmap: Bitmap = MediaStore.Images.Media.getBitmap(contentResolver, uri)
    2. Secara opsional, perkecil gambar untuk menghemat bandwidth. Lihat ukuran gambar yang direkomendasikan Cloud Vision.

      Java

      private Bitmap scaleBitmapDown(Bitmap bitmap, int maxDimension) {
          int originalWidth = bitmap.getWidth();
          int originalHeight = bitmap.getHeight();
          int resizedWidth = maxDimension;
          int resizedHeight = maxDimension;
      
          if (originalHeight > originalWidth) {
              resizedHeight = maxDimension;
              resizedWidth = (int) (resizedHeight * (float) originalWidth / (float) originalHeight);
          } else if (originalWidth > originalHeight) {
              resizedWidth = maxDimension;
              resizedHeight = (int) (resizedWidth * (float) originalHeight / (float) originalWidth);
          } else if (originalHeight == originalWidth) {
              resizedHeight = maxDimension;
              resizedWidth = maxDimension;
          }
          return Bitmap.createScaledBitmap(bitmap, resizedWidth, resizedHeight, false);
      }

      Kotlin+KTX

      private fun scaleBitmapDown(bitmap: Bitmap, maxDimension: Int): Bitmap {
          val originalWidth = bitmap.width
          val originalHeight = bitmap.height
          var resizedWidth = maxDimension
          var resizedHeight = maxDimension
          if (originalHeight > originalWidth) {
              resizedHeight = maxDimension
              resizedWidth =
                      (resizedHeight * originalWidth.toFloat() / originalHeight.toFloat()).toInt()
          } else if (originalWidth > originalHeight) {
              resizedWidth = maxDimension
              resizedHeight =
                      (resizedWidth * originalHeight.toFloat() / originalWidth.toFloat()).toInt()
          } else if (originalHeight == originalWidth) {
              resizedHeight = maxDimension
              resizedWidth = maxDimension
          }
          return Bitmap.createScaledBitmap(bitmap, resizedWidth, resizedHeight, false)
      }

      Java

      // Scale down bitmap size
      bitmap = scaleBitmapDown(bitmap, 640);

      Kotlin+KTX

      // Scale down bitmap size
      bitmap = scaleBitmapDown(bitmap, 640)
    3. Ubah objek bitmap menjadi string yang disandikan base64:

      Java

      // Convert bitmap to base64 encoded string
      ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
      bitmap.compress(Bitmap.CompressFormat.JPEG, 100, byteArrayOutputStream);
      byte[] imageBytes = byteArrayOutputStream.toByteArray();
      String base64encoded = Base64.encodeToString(imageBytes, Base64.NO_WRAP);

      Kotlin+KTX

      // Convert bitmap to base64 encoded string
      val byteArrayOutputStream = ByteArrayOutputStream()
      bitmap.compress(Bitmap.CompressFormat.JPEG, 100, byteArrayOutputStream)
      val imageBytes: ByteArray = byteArrayOutputStream.toByteArray()
      val base64encoded = Base64.encodeToString(imageBytes, Base64.NO_WRAP)
    4. Gambar yang diwakili oleh objek Bitmap harus tegak, tanpa perlu rotasi tambahan.

    2. Aktifkan fungsi yang dapat dipanggil untuk mengenali tengara

    Untuk mengenali bangunan terkenal dalam gambar, aktifkan fungsi yang dapat dipanggil, dengan meneruskan permintaan JSON Cloud Vision .

    1. Pertama, inisialisasi instance Cloud Functions:

      Java

      private FirebaseFunctions mFunctions;
      // ...
      mFunctions = FirebaseFunctions.getInstance();
      

      Kotlin+KTX

      private lateinit var functions: FirebaseFunctions
      // ...
      functions = Firebase.functions
      
    2. Tentukan metode untuk memanggil fungsi:

      Java

      private Task<JsonElement> annotateImage(String requestJson) {
          return mFunctions
                  .getHttpsCallable("annotateImage")
                  .call(requestJson)
                  .continueWith(new Continuation<HttpsCallableResult, JsonElement>() {
                      @Override
                      public JsonElement then(@NonNull Task<HttpsCallableResult> task) {
                          // This continuation runs on either success or failure, but if the task
                          // has failed then getResult() will throw an Exception which will be
                          // propagated down.
                          return JsonParser.parseString(new Gson().toJson(task.getResult().getData()));
                      }
                  });
      }
      

      Kotlin+KTX

      private fun annotateImage(requestJson: String): Task<JsonElement> {
          return functions
                  .getHttpsCallable("annotateImage")
                  .call(requestJson)
                  .continueWith { task ->
                      // This continuation runs on either success or failure, but if the task
                      // has failed then result will throw an Exception which will be
                      // propagated down.
                      val result = task.result?.data
                      JsonParser.parseString(Gson().toJson(result))
                  }
      }
      
    3. Buat permintaan JSON dengan Ketik LANDMARK_DETECTION :

      Java

      // Create json request to cloud vision
      JsonObject request = new JsonObject();
      // Add image to request
      JsonObject image = new JsonObject();
      image.add("content", new JsonPrimitive(base64encoded));
      request.add("image", image);
      //Add features to the request
      JsonObject feature = new JsonObject();
      feature.add("maxResults", new JsonPrimitive(5));
      feature.add("type", new JsonPrimitive("LANDMARK_DETECTION"));
      JsonArray features = new JsonArray();
      features.add(feature);
      request.add("features", features);
      

      Kotlin+KTX

      // Create json request to cloud vision
      val request = JsonObject()
      // Add image to request
      val image = JsonObject()
      image.add("content", JsonPrimitive(base64encoded))
      request.add("image", image)
      //Add features to the request
      val feature = JsonObject()
      feature.add("maxResults", JsonPrimitive(5))
      feature.add("type", JsonPrimitive("LANDMARK_DETECTION"))
      val features = JsonArray()
      features.add(feature)
      request.add("features", features)
      
    4. Akhirnya, panggil fungsi:

      Java

      annotateImage(request.toString())
              .addOnCompleteListener(new OnCompleteListener<JsonElement>() {
                  @Override
                  public void onComplete(@NonNull Task<JsonElement> task) {
                      if (!task.isSuccessful()) {
                          // Task failed with an exception
                          // ...
                      } else {
                          // Task completed successfully
                          // ...
                      }
                  }
              });
      

      Kotlin+KTX

      annotateImage(request.toString())
              .addOnCompleteListener { task ->
                  if (!task.isSuccessful) {
                      // Task failed with an exception
                      // ...
                  } else {
                      // Task completed successfully
                      // ...
                  }
              }
      

    3. Dapatkan informasi tentang landmark yang dikenali

    Jika operasi pengenalan tengara berhasil, respons JSON dari BatchAnnotateImagesResponse akan dikembalikan dalam hasil tugas. Setiap objek dalam larik landmarkAnnotations mewakili tengara yang dikenali dalam gambar. Untuk setiap tengara, Anda bisa mendapatkan koordinat pembatasnya di gambar input, nama tengara, garis lintang dan bujurnya, ID entitas Grafik Pengetahuannya (jika tersedia), dan skor kepercayaan kecocokan. Sebagai contoh:

    Java

    for (JsonElement label : task.getResult().getAsJsonArray().get(0).getAsJsonObject().get("landmarkAnnotations").getAsJsonArray()) {
        JsonObject labelObj = label.getAsJsonObject();
        String landmarkName = labelObj.get("description").getAsString();
        String entityId = labelObj.get("mid").getAsString();
        float score = labelObj.get("score").getAsFloat();
        JsonObject bounds = labelObj.get("boundingPoly").getAsJsonObject();
        // Multiple locations are possible, e.g., the location of the depicted
        // landmark and the location the picture was taken.
        for (JsonElement loc : labelObj.get("locations").getAsJsonArray()) {
            JsonObject latLng = loc.getAsJsonObject().get("latLng").getAsJsonObject();
            double latitude = latLng.get("latitude").getAsDouble();
            double longitude = latLng.get("longitude").getAsDouble();
        }
    }
    

    Kotlin+KTX

    for (label in task.result!!.asJsonArray[0].asJsonObject["landmarkAnnotations"].asJsonArray) {
        val labelObj = label.asJsonObject
        val landmarkName = labelObj["description"]
        val entityId = labelObj["mid"]
        val score = labelObj["score"]
        val bounds = labelObj["boundingPoly"]
        // Multiple locations are possible, e.g., the location of the depicted
        // landmark and the location the picture was taken.
        for(loc in labelObj["locations"].asJsonArray) {
            val latitude = loc.asJsonObject["latLng"].asJsonObject["latitude"]
            val longitude = loc.asJsonObject["latLng"].asJsonObject["longitude"]
        }
    }