إضافة إعلانات AdMob إلى تطبيق Flutter

1. مقدمة

ما ستنشئه

يرشدك هذا الدرس التطبيقي حول الترميز إلى كيفية إضافة إعلان بانر وإعلان بيني وإعلان مقابل مكافأة إلى تطبيق يُسمى Awesome Drawing Quiz، وهو عبارة عن لعبة تتيح للاعبين تخمين اسم الرسم.

إذا واجهت أي مشاكل (مثل أخطاء في الرمز أو أخطاء نحوية أو صياغة غير واضحة) أثناء العمل على هذا الدرس العملي، يُرجى الإبلاغ عن المشكلة من خلال النقر على الرابط الإبلاغ عن خطأ في أسفل يمين الدرس العملي.

ما ستتعلمه

  • كيفية إعداد مكوّن Google Mobile Ads الإضافي في AdMob
  • كيفية عرض إعلانات بانر وإعلانات بينية وإعلانات مقابل مكافأة في تطبيق Flutter

المتطلبات

  • الإصدار 4.1 أو إصدار أحدث من "استوديو Android"
  • ‫Xcode 12 أو إصدار أحدث (لتطوير تطبيقات iOS)

ما هو تقييمك لمستوى خبرتك في AdMob؟

مبتدئ متوسط متمكّن

ما هو تقييمك لمستوى خبرتك في Flutter؟

مبتدئ متوسط متقدّم

2. إعداد بيئة تطوير Flutter

تحتاج إلى برنامجَين لإكمال هذا الدرس التطبيقي، وهما حزمة تطوير البرامج (SDK) الخاصة بإطار عمل Flutter ومحرِّر.

يمكنك تشغيل الدرس العملي باستخدام أيّ من الأجهزة التالية:

  • جهاز Android أو iOS فعلي متصل بالكمبيوتر وتم ضبطه على "وضع مطور البرامج"
  • محاكي iOS (يتطلّب تثبيت أدوات Xcode)
  • محاكي Android (يتطلّب الإعداد في "استوديو Android")
  • متصفّح (يجب استخدام Chrome لتصحيح الأخطاء).
  • كتطبيق سطح مكتب على Windows أو Linux أو macOS يجب أن يتم التطوير على النظام الأساسي الذي تخطّط للنشر عليه. لذا، إذا أردت تطوير تطبيق سطح مكتب لنظام التشغيل Windows، يجب أن يتم التطوير على Windows للوصول إلى سلسلة الإنشاء المناسبة. هناك متطلبات خاصة بنظام التشغيل يتم تناولها بالتفصيل على الرابط docs.flutter.dev/desktop.

تنزيل الرمز

بعد تنزيل ملف ZIP، استخرِج محتواه. سيكون لديك مجلد باسم admob-ads-in-flutter-master.

بدلاً من ذلك، يمكنك استنساخ مستودع GitHub من سطر الأوامر:

$ git clone https://github.com/googlecodelabs/admob-ads-in-flutter

يحتوي المستودع على مجلدَين:

  • android_studio_folder.pngstarter: الرمز الأوّلي الذي ستنشئه في هذا الدرس التطبيقي حول الترميز
  • android_studio_folder.pngcomplete: الرمز البرمجي المكتمل لهذا الدرس التطبيقي حول الترميز.

3- إعداد تطبيق يستخدم AdMob والوحدات الإعلانية

بما أنّ Flutter هي حزمة تطوير برامج (SDK) متعددة الأنظمة الأساسية، عليك إضافة تطبيق ووحدات إعلانية لكلّ من Android وiOS في AdMob.

الإعداد على أجهزة Android

لإعداد تطبيق Android، عليك إضافة تطبيق Android وإنشاء وحدات إعلانية.

إضافة تطبيق Android

  1. في وحدة تحكّم AdMob، انقر على إضافة تطبيق من قائمة التطبيقات.
  2. عندما يُطلب منك الإجابة عن السؤال هل نشرت تطبيقك على Google Play أو App Store؟، انقر على لا.
  3. أدخِل Awesome Drawing Quiz في حقل اسم التطبيق، واختَر Android كنظام أساسي.

ddafee37a6f92229.png

  1. ليس من الضروري تفعيل مقاييس المستخدم لإكمال هذا الدرس العملي. ومع ذلك، ننصحك بإجراء ذلك لأنّه يتيح لك فهم سلوك المستخدمين بتفصيل أكبر. انقر على إضافة لإكمال العملية.

b918bf44362813a9.png

إنشاء وحدات إعلانية

لبدء إضافة وحدات إعلانية إلى AdMob، اتّبِع الخطوات التالية:

  1. اختَر اختبار الرسم الرائع من قائمة التطبيقات في وحدة تحكّم AdMob.
  2. انقر على قائمة الوحدات الإعلانية.

البانر

  1. انقر على الزر إضافة وحدة إعلانية.
  2. اختَر بانر كتنسيق.
  3. أدخِل android-adq-banner في حقل اسم الوحدة الإعلانية.
  4. انقر على إنشاء وحدة إعلانية لإكمال العملية.

الإعلانات البينية

  1. انقر على الزر إضافة وحدة إعلانية.
  2. اختَر إعلانًا بينيًا كتنسيق.
  3. أدخِل android-adq-interstitial في حقل اسم الوحدة الإعلانية.
  4. انقر على إنشاء وحدة إعلانية لإكمال العملية.

الإعلانات مقابل مكافأة

  1. انقر على الزر إضافة وحدة إعلانية.
  2. اختَر مقابل مكافأة كتنسيق.
  3. أدخِل android-adq-rewarded في حقل اسم الوحدة الإعلانية.
  4. اترك الإعدادات التلقائية لإعدادات المكافآت.
  5. انقر على إنشاء وحدة إعلانية لإكمال العملية.

عادةً ما يستغرق بدء عرض الإعلانات في وحدة إعلانية جديدة بضع ساعات.

إذا كنت تريد اختبار سلوك الإعلان على الفور، استخدِم رقم تعريف التطبيق الاختباري وأرقام تعريف الوحدات الإعلانية المُدرَجة في جداول رقم تعريف تطبيق Android/رقم تعريف الوحدة الإعلانية ورقم تعريف تطبيق iOS/رقم تعريف الوحدة الإعلانية.

إعداد تطبيق "خرائط Google" على أجهزة iOS

لإعداد نظام التشغيل iOS، عليك إضافة تطبيق iOS وإنشاء وحدات إعلانية.

إضافة تطبيق iOS

  1. في وحدة تحكّم AdMob، انقر على إضافة تطبيق من قائمة التطبيقات.
  2. عندما يُطلب منك الإجابة عن السؤال هل نشرت تطبيقك على Google Play أو App Store؟، انقر على لا.
  3. أدخِل Awesome Drawing Quiz في حقل اسم التطبيق، واختَر iOS كنظام أساسي.

93e7f9f114232402.png

  1. ليس من الضروري تفعيل مقاييس المستخدم لإكمال هذا الدرس العملي. ومع ذلك، ننصحك بإجراء ذلك لأنّه يتيح لك فهم سلوك المستخدمين بتفصيل أكبر. انقر على إضافة لإكمال العملية.

b918bf44362813a9.png

إنشاء وحدات إعلانية

لإضافة وحدات إعلانية، اتّبِع الخطوات التالية:

  1. اختَر تطبيق Awesome Drawing Quiz من قائمة التطبيقات في وحدة تحكّم AdMob.
  2. انقر على قائمة الوحدات الإعلانية.

البانر

  1. انقر على الزر إضافة وحدة إعلانية.
  2. اختَر بانر كتنسيق.
  3. أدخِل ios-adq-banner في حقل اسم الوحدة الإعلانية.
  4. انقر على إنشاء وحدة إعلانية لإكمال العملية.

الإعلانات البينية

  1. انقر على الزر إضافة وحدة إعلانية.
  2. اختَر إعلانًا بينيًا كتنسيق.
  3. أدخِل ios-adq-interstitial في حقل اسم الوحدة الإعلانية.
  4. انقر على إنشاء وحدة إعلانية لإكمال العملية.

الإعلانات مقابل مكافأة

  1. انقر على الزر إضافة وحدة إعلانية.
  2. اختَر مقابل مكافأة كتنسيق.
  3. أدخِل ios-adq-rewarded في حقل اسم الوحدة الإعلانية.
  4. اترك الإعدادات التلقائية لإعدادات المكافآت.
  5. انقر على إنشاء وحدة إعلانية لإكمال العملية.

عادةً ما يستغرق بدء عرض الإعلانات في وحدة إعلانية جديدة بضع ساعات.

إذا أردت اختبار سلوك الإعلان على الفور، استخدِم رقم تعريف التطبيق الاختباري وأرقام تعريف الوحدات الإعلانية المُدرَجة في الجدول التالي.

اختياري: استخدام تطبيق يستخدم AdMob ووحدات إعلانية اختبارية

إذا كنت تريد اتّباع الخطوات الواردة في درس تطبيقي حول الترميز بدلاً من إنشاء تطبيق يستخدم AdMob ووحدات إعلانية جديدة بنفسك، يمكنك استخدام معرّف تطبيق يستخدم AdMob الاختباري ومعرّفات الوحدات الإعلانية المُدرَجة في الجداول التالية.

معرّف تطبيق Android/معرّف الوحدة الإعلانية

السلعة

معرّف التطبيق/معرّف الوحدة الإعلانية

رقم تعريف التطبيق الذي يحقّق الربح عبر AdMob

ca-app-pub-3940256099942544~3347511713

بانر

ca-app-pub-3940256099942544/6300978111

إعلان بيني

ca-app-pub-3940256099942544/1033173712

تمت المكافأة

ca-app-pub-3940256099942544/5224354917

معرّف تطبيق iOS أو معرّف الوحدة الإعلانية

السلعة

معرّف التطبيق/معرّف الوحدة الإعلانية

رقم تعريف التطبيق الذي يحقّق الربح عبر AdMob

ca-app-pub-3940256099942544~1458002511

بانر

ca-app-pub-3940256099942544/2934735716

إعلان بيني

ca-app-pub-3940256099942544/4411468910

تمت المكافأة

ca-app-pub-3940256099942544/1712485313

لمزيد من المعلومات عن الإعلانات الاختبارية، يُرجى الاطّلاع على مستندات المطوّرين الخاصة بالإعلانات الاختبارية على Android والإعلانات الاختبارية على iOS.

4. إضافة مكوّن Flutter الإضافي لـ "إعلانات Google على الأجهزة الجوّالة"

يستخدم Flutter المكوّنات الإضافية لتوفير إمكانية الوصول إلى مجموعة كبيرة من الخدمات الخاصة بكل نظام أساسي. تتيح لك المكوّنات الإضافية الوصول إلى الخدمات وواجهات برمجة التطبيقات على كل منصة.

تتيح الإضافة google_mobile_ads تحميل إعلانات البانر والإعلانات البينية والإعلانات مقابل مكافأة والإعلانات المدمَجة مع المحتوى وعرضها باستخدام واجهة برمجة التطبيقات AdMob API.

بما أنّ Flutter هي حزمة تطوير برامج (SDK) متعددة الأنظمة الأساسية، فإنّ المكوّن الإضافي google_mobile_ads ينطبق على كلّ من iOS وAndroid. لذلك، إذا أضفت المكوّن الإضافي إلى تطبيق Flutter، سيتم استخدامه في كلّ من إصدارَي Android وiOS من تطبيق "الإعلانات المضمّنة" على AdMob.

إضافة المكوّن الإضافي "إعلانات Google على الأجهزة الجوّالة" كعنصر تابع

للوصول إلى واجهات برمجة التطبيقات في AdMob من مشروع الإعلانات المضمّنة في AdMob، أضِف google_mobile_ads كاعتمادية إلى ملف pubspec.yaml الموجود في جذر المشروع.

pubspec.yaml

...
environment:
  # TODO: Update the minimum sdk version to 2.12.0 to support null safety.
  sdk: ">=2.17.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^3.0.1

  # TODO: Add google_mobile_ads as a dependency
  google_mobile_ads: ^1.2.0

...

انقر على Pub get لتثبيت المكوّن الإضافي في مشروع اختبار الرسم الرائع.

9ce73858eedbd8fc.png

تعديل ملف AndroidManifest.xml (نظام التشغيل Android)

  1. افتح ملف android/app/src/main/AndroidManifest.xml في استوديو Android.
  2. أضِف رقم تعريف تطبيقك الذي يستخدم AdMob من خلال إضافة علامة <meta-data> بالاسم com.google.android.gms.ads.APPLICATION_ID. على سبيل المثال، إذا كان رقم تعريف تطبيقك على AdMob هو ca-app-pub-3940256099942544~3347511713، عليك إضافة الأسطر التالية إلى الملف AndroidManifest.xml.

AndroidManifest.xml

<manifest>
    ...
    <application>
       ...
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>
    </application>

</manifest>

تعديل ملف Info.plist (نظام التشغيل iOS)

  1. افتح ملف ios/Runner/Info.plist في استوديو Android.
  2. أضِف مفتاح GADApplicationIdentifier مع قيمة السلسلة لرقم تعريف تطبيقك على AdMob. على سبيل المثال، إذا كان رقم تعريف تطبيقك على AdMob هو ca-app-pub-3940256099942544~1458002511، عليك إضافة الأسطر التالية إلى الملف Info.plist.

ios/Runner/Info.plist

...
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
...

5- إضافة فئة مساعِدة للإعلانات

أنشئ ملفًا جديدًا باسم ad_helper.dart ضمن الدليل lib. بعد ذلك، نفِّذ الفئة AdHelper التي توفّر معرّف تطبيق يستخدم AdMob ومعرّفات وحدات إعلانية على Android وiOS.

تأكَّد من استبدال رقم تعريف تطبيق يستخدم AdMob (ca-app-pub-xxxxxx~yyyyy) ورقم تعريف الوحدة الإعلانية (ca-app-pub-xxxxxxx/yyyyyyyy) بأرقام التعريف التي أنشأتها في الخطوة السابقة.

lib/ad_helper.dart

import 'dart:io';

class AdHelper {

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return '<YOUR_ANDROID_BANNER_AD_UNIT_ID>';
    } else if (Platform.isIOS) {
      return '<YOUR_IOS_BANNER_AD_UNIT_ID>';
    } else {
      throw UnsupportedError('Unsupported platform');
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return '<YOUR_ANDROID_INTERSTITIAL_AD_UNIT_ID>';
    } else if (Platform.isIOS) {
      return '<YOUR_IOS_INTERSTITIAL_AD_UNIT_ID>';
    } else {
      throw UnsupportedError('Unsupported platform');
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return '<YOUR_ANDROID_REWARDED_AD_UNIT_ID>';
    } else if (Platform.isIOS) {
      return '<YOUR_IOS_REWARDED_AD_UNIT_ID>';
    } else {
      throw UnsupportedError('Unsupported platform');
    }
  }
}

استخدِم مقتطف الرمز التالي إذا كنت تريد استخدام رقم تعريف تطبيق يستخدم AdMob الاختباري وأرقام تعريف الوحدات الإعلانية الاختبارية.

lib/ad_helper.dart

import 'dart:io';

class AdHelper {

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/6300978111';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/2934735716';
    } else {
      throw new UnsupportedError('Unsupported platform');
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/1033173712";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/4411468910";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/5224354917";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/1712485313";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

6. إعداد حزمة "SDK لإعلانات Google على الأجهزة الجوّالة"

قبل تحميل الإعلانات، عليك إعداد حزمة "SDK لإعلانات Google على الأجهزة الجوّالة". افتح الملف lib/home_route.dart وعدِّل _initGoogleMobileAds() لبدء إعداد حزمة تطوير البرامج (SDK) قبل تحميل الصفحة الرئيسية.

يُرجى العِلم أنّه عليك تغيير نوع القيمة التي تم إرجاعها لطريقة _initGoogleMobileAds() من Future<dynamic> إلى Future<InitializationStatus> للحصول على نتيجة إعداد حزمة تطوير البرامج (SDK) بعد اكتمالها.

home_route.dart

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

import 'package:flutter/material.dart';

...

class HomeRoute extends StatelessWidget {

  ...

  Future<InitializationStatus> _initGoogleMobileAds() {
    // TODO: Initialize Google Mobile Ads SDK
    return MobileAds.instance.initialize();
  }
}

7. إضافة إعلان بانر

في هذا القسم، ستعرض إعلان بانر في أعلى شاشة اللعبة، كما هو موضّح في لقطة الشاشة التالية.

276b4cfa283ea6c7.png

  1. افتح ملف lib/game_route.dart، واستورِد ad_manager.dart
  2. استورِد ad_helper.dart وgoogle_mobile_ads.dart من خلال إضافة الأسطر التالية:

lib/game_route.dart

...

// TODO: Import ad_helper.dart
import 'package:awesome_drawing_quiz/ad_helper.dart';

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

class GameRoute extends StatefulWidget {
  ...
}
  1. في فئة _GameRouteState، أضِف الأعضاء التاليين لإعلان بانر.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  ...
}
  1. في طريقة initState()، أنشئ BannerAd وحمِّله لبانر بحجم 320×50 (AdSize.banner). يُرجى العِلم أنّه تم ضبط متتبِّع أحداث الإعلانات لتعديل واجهة المستخدِم (setState()) عند تحميل إعلان .

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Load a banner ad
  BannerAd(
    adUnitId: AdHelper.bannerAdUnitId,
    request: AdRequest(),
    size: AdSize.banner,
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        setState(() {
          _bannerAd = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, err) {
        print('Failed to load a banner ad: ${err.message}');
        ad.dispose();
      },
    ),
  ).load();
}
  1. عدِّل طريقة build() لعرض إعلان بانر عند توفّره.

lib/game_route.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: SafeArea(
      child: Stack(
        children: [
          Center(
            ...
          ),
          // TODO: Display a banner when ready
          if (_bannerAd != null)
            Align(
              alignment: Alignment.topCenter,
              child: Container(
                width: _bannerAd!.size.width.toDouble(),
                height: _bannerAd!.size.height.toDouble(),
                child: AdWidget(ad: _bannerAd!),
              ),
            ),
        ],
      ),
    ),
    ...
  );
}
  1. حرِّر المورد المرتبط بالكائن BannerAd من خلال استدعاء الطريقة BannerAd.dispose() في طريقة رد الاتصال dispose().

lib/game_route.dart

@override
void dispose() {
  // TODO: Dispose a BannerAd object
  _bannerAd?.dispose();

  ...

  super.dispose();
}

هذا كل شيء! نفِّذ المشروع وابدأ لعبة جديدة. بعد تحميل الإعلان، سيظهر إعلان بانر في أعلى الشاشة.

276b4cfa283ea6c7.png

8. إضافة إعلان بيني

في هذا القسم، ستعرض إعلانًا بينيًا بعد انتهاء اللعبة (5 مستويات إجمالاً).

  1. افتح ملف lib/game_route.dart
  2. في الفئة _GameRouteState، أضِف الأعضاء والطُرق التالية لعرض إعلان بيني.

يُرجى العِلم أنّه تم إعداد متتبِّع أحداث الإعلان للتحقّق من جاهزية الإعلان (onAdLoaded() وonAdFailedToLoad()) وعرض الشاشة الرئيسية للتطبيق عند إغلاق الإعلان (onAdDismissedFullScreenContent()).

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _interstitialAd
 InterstitialAd? _interstitialAd;

  // TODO: Implement _loadInterstitialAd()
  void _loadInterstitialAd() {
    InterstitialAd.load(
      adUnitId: AdHelper.interstitialAdUnitId,
      request: AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (ad) {
          ad.fullScreenContentCallback = FullScreenContentCallback(
            onAdDismissedFullScreenContent: (ad) {
              _moveToHome();
            },
          );

          setState(() {
            _interstitialAd = ad;
          });
        },
        onAdFailedToLoad: (err) {
          print('Failed to load an interstitial ad: ${err.message}');
        },
      ),
    );
  }

  ...
}
  1. في هذا الدرس العملي، يتم عرض إعلان بيني بعد أن يكمل المستخدم 5 مستويات. للحدّ من طلبات الإعلانات غير الضرورية، اطلب عرض إعلان عندما يصل المستخدم إلى المستوى 3.

في طريقة onNewLevel()، أضِف الأسطر التالية.

lib/game_route.dart

@override
void onNewLevel(int level, Drawing drawing, String clue) {
  ...

  // TODO: Load an Interstitial Ad
  if (level >= 3 && _interstitialAd == null) {
    _loadInterstitialAd();
  }
}
  1. عند انتهاء إحدى المباريات، يظهر مربّع حوار يتضمّن نتيجة المباراة. عندما يغلق المستخدم مربّع الحوار، يتم توجيهه إلى الشاشة الرئيسية في اختبار الرسم الرائع.

بما أنّه يجب عرض الإعلانات البينية بين انتقالات الشاشة، نعرض الإعلان البيني عندما ينقر المستخدم على الزر إغلاق.

عدِّل طريقة onGameOver() على النحو التالي.

lib/game_route.dart

@override
void onGameOver(int correctAnswers) {
  showDialog(
    context: _scaffoldKey.currentContext,
    builder: (context) {
      return AlertDialog(
        title: Text('Game over!'),
        content: Text('Score: $correctAnswers/5'),
        actions: [
          FlatButton(
            child: Text('close'.toUpperCase()),
            onPressed: () {

              // TODO: Display an Interstitial Ad
              if (_interstitialAd != null) {
                _interstitialAd?.show();
              } else {
                _moveToHome();
              }
            },
          ),
        ],
      );
    },
  );
}
  1. حرِّر المورد المرتبط بالكائن InterstitialAd من خلال استدعاء الطريقة InterstitialAd.dispose() في طريقة رد الاتصال dispose().

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Dispose an InterstitialAd object
  _interstitialAd?.dispose();

  ...

  super.dispose();
}

هذا كل شيء! شغِّل المشروع وأكمِل اللعبة. إذا تم تحميل إعلان بيني، سيظهر لك إعلان بيني عند النقر على الزر إغلاق من مربّع حوار النتيجة.

c546e438c405e941.gif

9- إضافة "إعلان مقابل مكافأة"

في هذا القسم، ستضيف إعلانًا مقابل مكافأة يمنح المستخدم تلميحًا إضافيًا كمكافأة.

  1. افتح ملف lib/game_route.dart
  2. في الفئة _GameRouteState، أضِف أعضاءً لعرض إعلان مقابل مكافأة، ونفِّذ الطريقة _loadRewardedAd(). يُرجى العِلم أنّه يتم تحميل إعلان مقابل مكافأة آخر عند إغلاق الإعلان (onAdDismissedFullScreenContent) لتخزين الإعلان مؤقتًا في أقرب وقت ممكن.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _rewardedAd
  RewardedAd? _rewardedAd;

  // TODO: Implement _loadRewardedAd()
  void _loadRewardedAd() {
    RewardedAd.load(
      adUnitId: AdHelper.rewardedAdUnitId,
      request: AdRequest(),
      rewardedAdLoadCallback: RewardedAdLoadCallback(
        onAdLoaded: (ad) {
          ad.fullScreenContentCallback = FullScreenContentCallback(
            onAdDismissedFullScreenContent: (ad) {
              setState(() {
                ad.dispose();
                _rewardedAd = null;
              });
              _loadRewardedAd();
            },
          );

          setState(() {
            _rewardedAd = ad;
          });
        },
        onAdFailedToLoad: (err) {
          print('Failed to load a rewarded ad: ${err.message}');
        },
      ),
    );
  }

  ...
}
  1. استخدِم طريقة _loadRewardedAd() من فئة initState() لطلب عرض إعلان مقابل مكافأة عند بدء اللعبة.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  @override
  void initState() {
    ...

    // COMPLETE: Load a Rewarded Ad
    _loadRewardedAd();
  }


  ...
}
  1. السماح للمستخدمين بمشاهدة إعلان مقابل مكافأة من خلال النقر على زر الإجراء الرئيسي لا يظهر الزر إلا إذا لم يستخدم المستخدم تلميحًا في المستوى الحالي وتم تحميل إعلان مقابل مكافأة.

عدِّل طريقة _buildFloatingActionButton() على النحو التالي لعرض زر الإجراء الرئيسي. يُرجى العِلم أنّ الرجوع null يؤدي إلى إخفاء الزر من الشاشة.

يُرجى العِلم أنّ onUserEarnedReward هو أهم حدث إعلان في "الإعلانات مقابل مكافآت". يتم تشغيله عندما يصبح المستخدم مؤهلاً لتلقّي مكافأة (على سبيل المثال، بعد الانتهاء من مشاهدة فيديو).

في هذا الدرس التطبيقي حول الترميز، يتم استدعاء الطريقة QuizManager.instance.useHint() من دالة معاودة الاتصال، ما يؤدي إلى عرض حرف آخر في سلسلة التلميح. يعيد التطبيق تحميل إعلان بمكافأة في معاودة الاتصال onAdClosed للتأكّد من أنّ الإعلان جاهز في أقرب وقت ممكن.

lib/game_route.dart

Widget? _buildFloatingActionButton() {
  // TODO: Return a FloatingActionButton if a rewarded ad is available
  return (!QuizManager.instance.isHintUsed && _rewardedAd != null)
      ? FloatingActionButton.extended(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text('Need a hint?'),
                  content: Text('Watch an Ad to get a hint!'),
                  actions: [
                    TextButton(
                      child: Text('cancel'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                    TextButton(
                      child: Text('ok'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                        _rewardedAd?.show(
                          onUserEarnedReward: (_, reward) {
                            QuizManager.instance.useHint();
                          },
                        );
                      },
                    ),
                  ],
                );
              },
            );
          },
          label: Text('Hint'),
          icon: Icon(Icons.card_giftcard),
        )
      : null;
}
  1. حرِّر المورد المرتبط بالكائن RewardedAd من خلال استدعاء الطريقة RewardedAd.dispose() في طريقة رد الاتصال dispose().

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Dispose a RewardedAd object
  _rewardedAd?.dispose();

  ...

  super.dispose();
}

هذا كل شيء! شغِّل المشروع والعب اللعبة. بعد تحميل إعلان مقابل مكافأة، سيظهر لك زر تلميح في أسفل الشاشة. انقر على زر تلميح للحصول على تلميح إضافي.

4a114d243ae3e71d.gif

10. أكملت الخطوات بنجاح

لقد أكملت تجربة البرمجة. يمكنك العثور على الرمز البرمجي المكتمل لهذا الدرس التطبيقي حول الترميز في المجلد android_studio_folder.pngcomplete.

للتعرّف على كيفية تنفيذ إعلانات بانر وإعلانات أصلية مضمّنة، يمكنك الاطّلاع على الدرس التطبيقي إضافة إعلانات بانر وإعلانات أصلية مضمّنة من AdMob إلى تطبيق Flutter.

لمزيد من المعلومات، جرِّب دروس Flutter البرمجية الأخرى.