تحقيق الدخل من تطبيقات Flutter: دليل دمج Google AdMob خطوة بخطوة

إطار عمل Flutter لتطوير تطبيقات الجوال يرسخ مكانته بسرعة كواحد من أبرز أدوات تطوير التطبيقات متعددة المنصات المتوفرة اليوم. يختار العديد من الشركات والمطورين استخدام Flutter لتطوير تطبيقاتهم، ويمكنك رؤية هذه التطبيقات منتشرة في السوق. يوفر Flutter أيضًا العديد من قوالب التطبيقات المخصصة لمساعدتك على البدء. ولكن في هذه الأيام، بمجرد بناء تطبيق، قد ترغب في تحقيق الدخل منه. وما هي أفضل طريقة للقيام بذلك من Google AdMob؟ تُعد AdMob واحدة من أسهل الطرق لتحقيق الدخل من تطبيقك، وسنرى كيف يتم ذلك في هذه المقالة. هنا، سنتعلم كيفية دمج Google AdMob مع بيئة تطوير تطبيق Flutter الخاص بك. الفكرة هي أن نتعلم أولاً كيفية إعداد تطبيق Firebase و AdMob خطوة بخطوة. بعد ذلك، سنقوم بتكوينهما لبيئة Flutter. وأخيرًا، سنعرض إعلان بانر بسيطًا كعرض توضيحي لتتمكن من رؤية كيفية عمل AdMob.

دمج إعدادات Firebase مع مشروع Flutter

سنقوم أولاً بدمج خدمات Firebase مع مشروع Flutter الخاص بنا. ولكن قبل ذلك، نحتاج إلى إنشاء مشروع Firebase. يمكنك العثور على إرشادات الإعداد في وثائق Firebase الرسمية لـ Flutter. لإنشاء مشروع Firebase، نحتاج إلى تسجيل الدخول إلى Firebase والانتقال إلى لوحة تحكم Firebase Console. هناك يمكننا ببساطة النقر على ‘Add a project’ (إضافة مشروع) لبدء مشروعنا. في البداية، ستظهر نافذة تطلب منك إدخال اسم مشروعك. هنا، أبقيت اسم المشروع بسيطًا – FlutterAdmob – كما هو موضح في لقطة الشاشة أدناه:

لنستمر إلى الخطوة التالية حتى يتم إنشاء المشروع. بعد إعداد المشروع، سنحصل على لوحة تحكم للمشروع كما هو موضح في لقطة الشاشة أدناه:

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

الخطوة 1: تسجيل تطبيقك في Firebase لمنصة Android

عملية التسجيل خاصة بالمنصة، لذا سنقوم بالتسجيل لمنصة Android. بعد النقر على أيقونة Android، سيتم توجيهك إلى واجهة تطلب ‘Android package name’ (اسم حزمة Android). لإضافة اسم حزمة مشروع Flutter الخاص بنا، نحتاج إلى تحديد موقعه أولاً. سيكون اسم الحزمة متاحًا في الملف ./android/app/build.gradle لمشروع Flutter الخاص بك. سترى شيئًا كهذا:

com.example.backgroundSolution

نحتاج فقط إلى نسخه ولصقه في حقل إدخال ‘Android package name’ كما هو موضح في لقطة الشاشة أدناه:

بعد ذلك، يمكنك ببساطة النقر على زر ‘Register app’ (تسجيل التطبيق). سيقودنا ذلك إلى الواجهة حيث يمكننا الحصول على ملف google-services.json الذي سيربط تطبيق Flutter الخاص بنا بخدمات Google Firebase. نحتاج إلى تنزيل الملف ونقله إلى الدليل ./android/app لمشروع Flutter الخاص بنا. التعليمات موضحة أيضًا في لقطة الشاشة أدناه:

الخطوة 2: إضافة إعدادات Firebase إلى ملفات Gradle الأصلية في مشروع Flutter

الآن لتمكين خدمات Firebase في تطبيق Android الخاص بنا، نحتاج إلى إضافة المكون الإضافي google-services إلى ملفات Gradle الخاصة بنا. أولاً، في ملف Gradle على مستوى الجذر (مستوى المشروع) android/build.gradle، نحتاج إلى إضافة قواعد لتضمين المكون الإضافي Google Services Gradle. نحتاج إلى التحقق مما إذا كانت التكوينات التالية متاحة أم لا:

buildscript {
    repositories {
        // Check that you have the following line (if not, add it):
        google() // Google's Maven repository
    }
    dependencies {
        ...
        // Add this line
        classpath 'com.google.gms:google-services:4.3.4'
    }
}

allprojects {
    ...
    repositories {
        // Check that you have the following line (if not, add it):
        google() // Google's Maven repository
        ...
    }
}

إذا لم تكن موجودة، نحتاج إلى إضافة التكوينات كما هو موضح في مقتطف الكود أعلاه. الآن في ملف Gradle الخاص بالوحدة (مستوى التطبيق) android/app/build.gradle، نحتاج إلى تطبيق المكون الإضافي Google Services Gradle. لذلك، نحتاج إلى إضافة جزء الكود المميز في مقتطف الكود التالي إلى الملف ./android/app/build.gradle لمشروعنا:

// Add the following line:
apply plugin: 'com.google.gms.google-services'

android {
    // ...
}

الآن، نحتاج إلى تشغيل الأمر التالي حتى تتم بعض التكوينات التلقائية:

flutter packages get

لقد قمنا الآن بدمج تكوينات Firebase بنجاح مع مشروع Flutter الخاص بنا.

كيفية إنشاء حساب AdMob وإعداد تطبيقك

الآن، نحتاج إلى حساب Google AdMob لتغذية الإعلانات في تطبيقنا. لذلك، نحتاج إلى التسجيل وتسجيل الدخول إلى AdMob. ثم، نحتاج إلى الانتقال إلى لوحة تحكم Google AdMob Console كما هو معروض في لقطة الشاشة أدناه:

الآن، نحتاج إلى إعداد تطبيق AdMob الذي سيوفر لنا الوصول إلى الوحدات الإعلانية (Ad units). لذلك، نحتاج إلى النقر على زر ‘ADD YOUR FIRST APP’ (أضف تطبيقك الأول) الموضح في لقطة الشاشة أعلاه. ثم، سيتم توجيهنا إلى الشاشة حيث نقوم بإعداد التطبيق، كما هو موضح في لقطة الشاشة أدناه:

هنا، يسأل عما إذا كان تطبيقنا متاحًا بالفعل في Google Play أو App Store. نظرًا لأننا نقوم بعرض إعلان اختباري، فإن التطبيق غير منشور. لذا ما عليك سوى تحديد ‘NO’ (لا) الذي سيوجهك إلى شاشة أخرى كما هو موضح في لقطة الشاشة أدناه:

هنا، نحتاج إلى إدخال اسم تطبيقنا (App Name) بالإضافة إلى المنصة. يمكنك إعطاء الاسم الذي تختاره. ثم، نظرًا لأننا نعمل مع Flutter لنظام Android، نحتاج إلى اختيار Android ثم النقر على زر ‘ADD’ (إضافة). بعد ذلك، نحتاج إلى العودة إلى لوحة تحكم AdMob. سنحصل على تطبيق AdMob الخاص بنا في لوحة تحكم التطبيقات (Apps console) كما هو موضح في لقطة الشاشة أدناه:

الآن، نحتاج إلى النقر على ‘ADD AD UNIT’ (إضافة وحدة إعلانية) لإنشاء وحدة إعلانية تغذي الإعلان التجريبي. بعد النقر، سترى شاشة تعرض وحدات إعلانية مختلفة كما ترى في لقطة الشاشة أدناه:

هنا، لدينا مجموعة مختارة من الإعلانات المختلفة. للتنفيذ البسيط، سنختار إعلان البانر (Banner Ad). لذا، نحتاج إلى النقر على إعلان ‘Banner’ ثم اختيار اسم الوحدة الإعلانية (Ad unit name) كما هو موضح في لقطة الشاشة أدناه:

أخيرًا، انقر على ‘CREATE AD UNIT’ (إنشاء وحدة إعلانية) ثم ‘DONE’ (تم) لإنشاء وحدة إعلانية بنجاح، كما هو موضح في لقطة الشاشة أدناه:

هنا، لدينا الوحدة الإعلانية (وتذكر أن معرف الوحدة الإعلانية AD Unit ID يمكن أن يكون مفيدًا عند عرض الإعلان الفعلي).

تكوين AdMob في مشروع Flutter

الآن بعد أن أصبح لدينا تطبيق AdMob ووحدة إعلانية لتطبيق AdMob جاهزين، يمكننا إعداد AdMob في مشروع Flutter الخاص بنا. لذلك، نحتاج أولاً إلى تثبيت المكون الإضافي firebase_admob كما هو موضح في مقتطف الكود أدناه:

firebase_admob: ^0.10.2

الآن، نحتاج إلى ربط تطبيق AdMob بالمنصة الأصلية (Native platform). لذلك، نحتاج إلى إضافة بيانات وصفية (meta-data) إلى ملف AndroidManifest.xml كما هو موضح في مقتطف الكود أدناه:

<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="[ADMOB_APP_ID]" />

يمكن العثور على هذا الملف في المسار ./android/app/src/main/AndroidManifest.xml. بدلاً من [ADMOB_APP_ID]، نحتاج إلى إدخال معرف تطبيق AdMob الفعلي. يمكننا الحصول على ذلك من لوحة تحكم ‘App Settings’ (إعدادات التطبيق) في لوحة تحكم AdMob كما هو موضح في لقطة الشاشة أدناه:

نحتاج فقط إلى نسخ معرف التطبيق (App ID) ولصقه في الوسيطة value.

إنشاء وعرض إعلان بانر تجريبي

الآن، أصبح تطبيق AdMob الخاص بنا متصلاً بمشروع Flutter الخاص بنا. هنا، سنقوم بإنشاء إعلان بانر (Banner ad). الفكرة هي إظهار إعلان بانر اختباري في الجزء السفلي من شاشة التطبيق. لاحظ أننا نستخدم نفس مشروع تطبيق Flutter Wallpaper الذي أنشأناه في برنامج تعليمي سابق. عملية إعداد AdMob هي نفسها في كل مشروع. نحن نستخدم هذا المشروع كعرض توضيحي فقط. ولكن أولاً، نحتاج إلى استيراد بعض تبعيات Firebase الضرورية في ملف main.dart كما هو موضح في مقتطف الكود أدناه:

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_admob/firebase_admob.dart';

ثم، نحتاج إلى تهيئة جهاز الاختبار. يمكننا الحصول على معرف جهاز الاختبار (test device ID) من السجلات أيضًا:

const String testDevice = 'Kris';

الآن، سنقوم بإنشاء دالة تُرجع إعلان البانر (Banner Ad). لذلك، سنستخدم مثيل BannerAd الذي توفره مكتبة Firebase AdMob والذي يأخذ معرف الوحدة الإعلانية (Ad Unit ID) والحجم (size) ودالة المستمع (listener function) كمعاملات. يمكننا استخدام معرف وحدة إعلان البانر الذي أنشأناه في تطبيق AdMob سابقًا في الخاصية adUnitId. يتم توفير التنفيذ العام للدالة في مقتطف الكود أدناه:

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  BannerAd createBannerAd() {
    return BannerAd(
      adUnitId: BannerAd.testAdUnitId,
      size: AdSize.banner,
      listener: (MobileAdEvent event) {
        print("BannerAd event $event");
      },
    );
  }
  runApp(MyApp());
}

نظرًا لأننا سنعرض إعلان بانر اختباريًا هنا، فإننا سنستخدم فقط testAdUnitId الذي يوفره مثيل BannerAd. ولكن يمكننا لصق معرف الوحدة الإعلانية الفعلي الذي أنشأناه سابقًا هنا. الآن، نحتاج إلى تشغيل دالة إعلان البانر في دالتنا main. ولكن أولاً، نحتاج إلى تشغيل مثيل Firebase. ثم، نحتاج إلى تهيئة مثيل FirebaseAdMob بمعرف التطبيق (App ID) الذي حصلنا عليه من لوحة تحكم ‘App Settings’ في لوحة تحكم AdMob. أخيرًا، نحتاج إلى استدعاء الدالة createBannerAd ثم تحميل الإعلان (load) وعرضه (show) أيضًا. يتم توفير التنفيذ العام في مقتطف الكود أدناه:

Future<void> main() async {
  . . .
  await Firebase.initializeApp();
  FirebaseAdMob.instance.initialize(appId: FirebaseAdMob.testAppId);
  createBannerAd()
    ..load()
    ..show();
  runApp(MyApp());
}

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

كما ترى، يوجد إعلان بانر اختباري في الجزء السفلي من شاشة المحاكي. تهانينا – لقد قمت بإعداد AdMob بنجاح في تطبيق Flutter! لاحظ أنه إذا استخدمنا معرف التطبيق الفعلي (App ID) ومعرف الوحدة الإعلانية (Ad Unit ID)، فسنتمكن من الحصول على تغذية الإعلانات الفعلية في البانر.

الخاتمة

Flutter هو إطار عمل متنامٍ لتطوير تطبيقات الجوال متعددة المنصات وقد جذب انتباه العديد من المطورين والشركات. لذلك من المهم التعرف على بعض من أهم ميزاته المفيدة. في هذه المقالة، قمنا بدمج AdMob في مشروع Flutter. كانت العملية طويلة بعض الشيء ولكنها مباشرة. تُعد AdMob واحدة من أفضل الطرق لتحقيق الدخل من تطبيقاتك – ولكن لتحقيق أقصى استفادة منها، تحتاج إلى معرفة كيفية دمجها بشكل صحيح على الشاشة. كان الهدف الرئيسي من هذا البرنامج التعليمي هو إظهار كيفية تكوين AdMob في مشروع Flutter الخاص بك ثم عرض إعلان بانر بسيط. العملية هي نفسها لأي تطبيق Flutter. الآن، التحدي هو عرض أنواع أخرى من الوحدات الإعلانية مثل الإعلانات البينية (Interstitial ads)، والإعلانات الأصلية (Native ads)، والإعلانات بمكافأة (Rewarded Ads)، وما إلى ذلك، والتي تحظى بشعبية في الوقت الحاضر. يمكننا استخدام معرف تطبيق AdMob الفعلي بالإضافة إلى معرف الوحدة الإعلانية لعرض تغذية الإعلانات الحقيقية بدلاً من الإعلانات التجريبية.

الخلاصة التقنية

يُعد دمج Google AdMob في تطبيقات Flutter خطوة حاسمة للمطورين الذين يسعون لتحقيق الدخل من جهودهم. على الرغم من أن العملية قد تبدو متعددة الخطوات، إلا أنها تتبع مسارًا منطقيًا يبدأ بإعداد Firebase، مرورًا بتكوين AdMob، وصولاً إلى عرض الوحدات الإعلانية. من الأهمية بمكان الالتزام بالخطوات الموضحة، وخاصة فيما يتعلق بملفات Gradle و AndroidManifest.xml، لضمان عمل التكامل بسلاسة. استخدام معرفات الاختبار (test IDs) خلال مرحلة التطوير أمر ضروري لتجنب النقرات غير الصالحة والحفاظ على سلامة حساب AdMob. مع التطور المستمر لإطار عمل Flutter ومكتبات AdMob، يُنصح دائمًا بالرجوع إلى الوثائق الرسمية للحصول على أحدث الممارسات وأكثرها فعالية، مع الأخذ في الاعتبار أن المكونات الإضافية قد تتغير أو تتطور بمرور الوقت لتقديم تجربة أفضل وأكثر أمانًا.