التعرّف على المعالم بشكل آمن من خلال Cloud Vision باستخدام مصادقة Firebase ووظائفها على أنظمة Apple الأساسية

لاستدعاء إحدى واجهات Google Cloud API من تطبيقك، عليك إنشاء واجهة REST API وسيطة تتولّى عملية منح الإذن وتحمي القيم السرية، مثل مفاتيح واجهة برمجة التطبيقات. بعد ذلك، عليك كتابة رمز في تطبيقك على الأجهزة الجوّالة للمصادقة على هذه الخدمة الوسيطة والتواصل معها.

إحدى طرق إنشاء واجهة REST API هذه هي استخدام Firebase Authentication وFunctions، ما يمنحك بوابة مُدارة وبدون خادم إلى واجهات برمجة التطبيقات من Google Cloud التي تتعامل مع المصادقة ويمكن طلبها من تطبيقك على الأجهزة الجوّالة باستخدام حِزم SDK مُنشأة مسبقًا.

يوضّح هذا الدليل كيفية استخدام هذه الطريقة لاستدعاء Cloud Vision API من تطبيقك. ستسمح هذه الطريقة لجميع المستخدمين الذين تمّت مصادقتهم بالوصول إلى الخدمات المدفوعة في Cloud Vision من خلال مشروعك على السحابة الإلكترونية، لذا ننصحك بالتفكير مليًا في ما إذا كانت آلية المصادقة هذه كافية لحالة الاستخدام قبل المتابعة.

قبل البدء

إعداد مشروعك

إذا لم يسبق لك إضافة Firebase إلى تطبيقك، يمكنك إجراء ذلك باتّباع الخطوات الواردة في دليل بدء الاستخدام.

استخدِم أداة Swift Package Manager لتثبيت الملحقات التابعة لـ Firebase وإدارتها.

  1. في Xcode، بعد فتح مشروع تطبيقك، انتقِل إلى ملف (File) > إضافة حِزم (Add Packages).
  2. عندما يُطلب منك ذلك، أضِف مستودع حزمة تطوير البرامج (SDK) لمنصة Firebase على أجهزة Apple:
  3.   https://github.com/firebase/firebase-ios-sdk.git
  4. اختَر مكتبة Firebase ML.
  5. أضِف العلامة -ObjC إلى قسم علامات الرابط الأخرى في إعدادات الإصدار الخاص بالكائن المستهدف.
  6. بعد الانتهاء، سيبدأ Xcode تلقائيًا في حلّ التبعيات وتنزيلها في الخلفية.

بعد ذلك، عليك إجراء بعض خطوات الإعداد داخل التطبيق:

  1. في تطبيقك، استورِد Firebase:

    Swift

    import FirebaseMLModelDownloader

    Objective-C

    @import FirebaseMLModelDownloader;

تتبقى بضع خطوات أخرى لإعداد حسابك، وسنكون جاهزين:

  1. إذا لم يسبق لك تفعيل واجهات برمجة التطبيقات المستنِدة إلى السحابة الإلكترونية لمشروعك، عليك إجراء ذلك الآن:

    1. افتح Firebase ML صفحة واجهات برمجة التطبيقات في وحدة تحكّم Firebase.
    2. إذا لم يسبق لك ترقية مشروعك إلى خطة أسعار Blaze بنظام الدفع حسب الاستخدام، انقر على ترقية لإجراء ذلك. (لن يُطلب منك الترقية إلا إذا لم يكن مشروعك مشتركًا في خطة أسعار Blaze).

      يمكن للمشاريع التي تستخدم خطة التسعير Blaze فقط استخدام واجهات برمجة التطبيقات المستندة إلى السحابة الإلكترونية.

    3. إذا لم تكن واجهات برمجة التطبيقات المستندة إلى السحابة الإلكترونية مفعّلة، انقر على تفعيل واجهات برمجة التطبيقات المستندة إلى السحابة الإلكترونية.
  2. اضبط مفاتيح واجهة برمجة التطبيقات الحالية في Firebase لمنع الوصول إلى Cloud Vision API:
    1. افتح صفحة بيانات الاعتماد في Cloud Console.
    2. لكل مفتاح واجهة برمجة تطبيقات في القائمة، افتح عرض التعديل، وفي قسم "قيود المفتاح" (Key Restrictions)، أضِف جميع واجهات برمجة التطبيقات المتاحة باستثناء Cloud Vision API إلى القائمة.

نشر الدالة القابلة للاستدعاء

بعد ذلك، يمكنك نشر Cloud Function التي ستستخدمها لربط تطبيقك بواجهة Cloud Vision API. يحتوي مستودع functions-samples على مثال يمكنك استخدامه.

بشكلٍ تلقائي، سيسمح الوصول إلى Cloud Vision API من خلال هذه الدالة للمستخدمين الذين تمّت مصادقتهم في تطبيقك فقط بالوصول إلى Cloud Vision API. يمكنك تعديل الدالة لتلبية متطلبات مختلفة.

لنشر الدالة، اتّبِع الخطوات التالية:

  1. استنسِخ مستودع نماذج الدوال أو نزِّله وانتقِل إلى الدليل Node-1st-gen/vision-annotate-image:
    git clone https://github.com/firebase/functions-samples
    cd Node-1st-gen/vision-annotate-image
    
  2. ثبِّت التبعيّات:
    cd functions
    npm install
    cd ..
  3. إذا لم يكن لديك Firebase CLI، ثبِّته.
  4. ابدأ مشروع Firebase في الدليل vision-annotate-image. عندما يُطلب منك ذلك، اختَر مشروعك من القائمة.
    firebase init
  5. انشر الدالة:
    firebase deploy --only functions:annotateImage

إضافة خدمة "مصادقة Firebase" إلى تطبيقك

سترفض الدالة القابلة للاستدعاء التي تم نشرها أعلاه أي طلب من مستخدمين غير مصادق عليهم في تطبيقك. إذا لم يسبق لك إجراء ذلك، عليك إضافة Firebase Auth إلى تطبيقك.

إضافة التبعيات اللازمة إلى تطبيقك

استخدِم أداة Swift Package Manager لتثبيت مكتبة "وظائف Firebase السحابية".

1. إعداد الصورة المصدر

لاستدعاء Cloud Vision، يجب تنسيق الصورة كسلسلة مرمّزة بترميز base64. لمعالجة 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. استدعاء الدالة القابلة للاستدعاء للتعرّف على المعالم

للتعرّف على المعالم في صورة، استدعِ الدالة القابلة للاستدعاء مع تمرير طلب JSON Cloud Vision.

  1. أولاً، عليك إنشاء مثيل من Cloud Functions:

    Swift

    lazy var functions = Functions.functions()
    

    Objective-C

    @property(strong, nonatomic) FIRFunctions *functions;
    
  2. أنشئ طلبًا مع ضبط النوع على 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. أخيرًا، استدعِ الدالة:

    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- الحصول على معلومات حول المعالم المعروفة

في حال نجاح عملية التعرّف على المعالم، سيتم عرض استجابة JSON من BatchAnnotateImagesResponse في نتيجة المهمة. يمثّل كل عنصر في مصفوفة landmarkAnnotations معلمًا تم التعرّف عليه في الصورة. لكل معلم بارز، يمكنك الحصول على إحداثيات المربّع المحيط في الصورة المدخلة، واسم المعلم البارز، وخطوط الطول والعرض، ومعرّف الكيان في "الرسم البياني المعرفي" (إذا كان متاحًا)، ونسبة صحة المطابقة. على سبيل المثال:

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"];
  }
}