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

1. مقدمة

ما الذي ستنشئه

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

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

المعلومات التي ستطّلع عليها

  • كيفية ضبط مكوّن AdMob الإضافي لإعلانات Google على الأجهزة الجوّالة
  • كيفية تنفيذ إعلانات البانر والإعلانات البينية والإعلانات التي تضم مكافأة في تطبيق Flutter

المتطلبات

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

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

حديث متوسط بارع

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

حديث متوسط بارع

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

لإكمال هذا التمرين، تحتاج إلى برنامجَين، وهما Flutter SDK ومحرِّر.

يمكنك تشغيل الدرس التطبيقي حول الترميز باستخدام أي من الأجهزة التالية:

  • جهاز 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.pngالمبتدئ: جارٍ بدء الرمز الذي ستنشئه في هذا الدرس التطبيقي حول الترميز.
  • android_studio_folder.pngcomplete - رمز مكتمل لهذا الدرس التطبيقي حول الترميز.

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

بما أنّ Flutter هي حزمة تطوير برامج (SDK) متعدّدة الأنظمة الأساسية، عليك إضافة تطبيق ووحدات إعلانية في 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.

الإعداد على جهاز iOS

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

إضافة تطبيق iOS

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

93e7f9f114232402.png

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

b918bf44362813a9.png

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

لإضافة وحدات إعلانية:

  1. اختَر تطبيق اختبار رسم رائع من قائمة التطبيقات في وحدة تحكُّم 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 وأرقام تعريف الوحدات الإعلانية التجريبية المُدرَجة في الجداول التالية.

رقم تعريف تطبيق 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.

بما أنّ 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 (الحصول على النشر) لتثبيت المكوِّن الإضافي في مشروع Awesome Drawing Quiz.

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.