1. ভূমিকা
আপনি কি নির্মাণ করবেন
এই কোডল্যাবটি আপনাকে একটি ব্যানার, ইন্টারস্টিশিয়াল এবং একটি পুরস্কৃত বিজ্ঞাপন যোগ করার মাধ্যমে গাইড করে, যাকে বলা হয় একটি অ্যাপে Awesome Drawing Quiz , একটি গেম যা খেলোয়াড়দের অঙ্কনের নাম অনুমান করতে দেয়৷
|
|
এই কোডল্যাবের মাধ্যমে কাজ করার সময় আপনি যদি কোনো সমস্যা (কোড বাগ, ব্যাকরণগত ত্রুটি, অস্পষ্ট শব্দ) এর সম্মুখীন হন, তাহলে কোডল্যাবের নিচের, বাম কোণে একটি ভুল প্রতিবেদন করুন লিঙ্কে ক্লিক করে অনুগ্রহ করে সমস্যাটি রিপোর্ট করুন।
আপনি কি শিখবেন
- কিভাবে Google Mobile Ads AdMob প্লাগইন কনফিগার করবেন
- একটি ফ্লাটার অ্যাপে একটি ব্যানার, ইন্টারস্টিশিয়াল এবং পুরস্কৃত বিজ্ঞাপন কীভাবে প্রয়োগ করবেন
আপনি কি প্রয়োজন হবে
- অ্যান্ড্রয়েড স্টুডিও 4.1 বা তার পরে
- Xcode 12 বা তার পরে (iOS বিকাশের জন্য)
AdMob-এর সাথে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে রেট করবেন?
আপনি ফ্লটারের সাথে আপনার অভিজ্ঞতার স্তরকে কীভাবে মূল্যায়ন করবেন?
2. আপনার ফ্লটার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করুন
এই ল্যাবটি সম্পূর্ণ করার জন্য আপনার দুটি টুকরো সফ্টওয়্যার প্রয়োজন - ফ্লাটার SDK এবং একটি সম্পাদক ৷
আপনি এই ডিভাইসগুলির যেকোনো একটি ব্যবহার করে কোডল্যাব চালাতে পারেন:
- আপনার কম্পিউটারের সাথে সংযুক্ত এবং বিকাশকারী মোডে সেট করা একটি শারীরিক Android বা iOS ডিভাইস৷
- আইওএস সিমুলেটর (এক্সকোড সরঞ্জাম ইনস্টল করা প্রয়োজন)।
- অ্যান্ড্রয়েড এমুলেটর (অ্যান্ড্রয়েড স্টুডিওতে সেটআপ প্রয়োজন)।
- একটি ব্রাউজার (ডিবাগিংয়ের জন্য Chrome প্রয়োজন)।
- একটি Windows , Linux , বা macOS ডেস্কটপ অ্যাপ্লিকেশন হিসাবে। আপনি যে প্ল্যাটফর্মে স্থাপন করার পরিকল্পনা করছেন সেখানে আপনাকে অবশ্যই বিকাশ করতে হবে। সুতরাং, আপনি যদি একটি উইন্ডোজ ডেস্কটপ অ্যাপ বিকাশ করতে চান, তাহলে যথাযথ বিল্ড চেইন অ্যাক্সেস করতে আপনাকে অবশ্যই উইন্ডোজে বিকাশ করতে হবে। অপারেটিং সিস্টেম-নির্দিষ্ট প্রয়োজনীয়তা রয়েছে যা docs.flutter.dev/desktop- এ বিস্তারিতভাবে কভার করা হয়েছে।
কোডটি ডাউনলোড করুন
আপনি জিপ ফাইলটি ডাউনলোড করার পরে, এর বিষয়বস্তু বের করুন। আপনার admob-ads-in-flutter-master নামে একটি ফোল্ডার থাকবে।
বিকল্পভাবে, আপনি কমান্ড লাইন থেকে GitHub সংগ্রহস্থল ক্লোন করতে পারেন:
$ git clone https://github.com/googlecodelabs/admob-ads-in-flutter
সংগ্রহস্থলে দুটি ফোল্ডার রয়েছে:
starter — শুরু করার কোড যা আপনি এই কোডল্যাবে তৈরি করবেন। - সম্পূর্ণ — এই কোডল্যাবের জন্য সম্পূর্ণ কোড।
3. AdMob অ্যাপ এবং বিজ্ঞাপন ইউনিট সেট আপ করুন৷
যেহেতু Flutter একটি মাল্টি-প্ল্যাটফর্ম SDK, তাই আপনাকে AdMob-এ Android এবং iOS উভয়ের জন্য একটি অ্যাপ এবং বিজ্ঞাপন ইউনিট যোগ করতে হবে।
Android এর জন্য সেট আপ করুন
Android এর জন্য সেট আপ করতে, আপনাকে একটি Android অ্যাপ যোগ করতে হবে এবং বিজ্ঞাপন ইউনিট তৈরি করতে হবে।
একটি অ্যান্ড্রয়েড অ্যাপ যোগ করুন
- AdMob কনসোলে , Apps মেনু থেকে ADD APP এ ক্লিক করুন।
- যখন আপনাকে জিজ্ঞাসা করা হয় আপনি কি আপনার অ্যাপটি গুগল প্লে বা অ্যাপ স্টোরে প্রকাশ করেছেন? , NO তে ক্লিক করুন।
- অ্যাপের নামের ক্ষেত্রে
Awesome Drawing Quizএ প্রবেশ করুন এবং প্ল্যাটফর্ম হিসাবে Android নির্বাচন করুন।
- এই কোডল্যাবটি সম্পূর্ণ করার জন্য ব্যবহারকারীর মেট্রিক্স সক্ষম করার প্রয়োজন নেই। যাইহোক, আমরা আপনাকে এটি করার পরামর্শ দিই কারণ এটি আপনাকে ব্যবহারকারীর আচরণকে আরও বিশদে বুঝতে দেয়। প্রক্রিয়াটি সম্পূর্ণ করতে ADD এ ক্লিক করুন।
বিজ্ঞাপন ইউনিট তৈরি করুন
AdMob-এ বিজ্ঞাপন ইউনিট যোগ করা শুরু করতে:
- AdMob কনসোলে Apps মেনু থেকে Awesome Drawing Quiz নির্বাচন করুন।
- বিজ্ঞাপন ইউনিট মেনু ক্লিক করুন.
ব্যানার
|
|
ইন্টারস্টিশিয়াল
|
|
পুরস্কৃত
|
|
একটি নতুন বিজ্ঞাপন ইউনিট বিজ্ঞাপন পরিবেশন করতে সক্ষম হতে সাধারণত কয়েক ঘন্টা সময় লাগে।
আপনি যদি অবিলম্বে বিজ্ঞাপনের আচরণ পরীক্ষা করতে চান, তাহলে Android অ্যাপ আইডি/বিজ্ঞাপন ইউনিট আইডি এবং iOS অ্যাপ আইডি/বিজ্ঞাপন ইউনিট আইডি টেবিলে তালিকাভুক্ত পরীক্ষার অ্যাপ আইডি এবং বিজ্ঞাপন ইউনিট আইডি ব্যবহার করুন।
iOS এর জন্য সেট আপ করুন
iOS এর জন্য সেট আপ করতে, আপনাকে একটি iOS অ্যাপ যোগ করতে হবে এবং বিজ্ঞাপন ইউনিট তৈরি করতে হবে।
একটি iOS অ্যাপ যোগ করুন
- AdMob কনসোলে , Apps মেনু থেকে ADD APP এ ক্লিক করুন।
- যখন আপনাকে জিজ্ঞাসা করা হয় আপনি কি আপনার অ্যাপটি গুগল প্লে বা অ্যাপ স্টোরে প্রকাশ করেছেন? , NO তে ক্লিক করুন।
- অ্যাপ্লিকেশান নামের ক্ষেত্রে
Awesome Drawing Quizলিখুন এবং প্ল্যাটফর্ম হিসাবে iOS নির্বাচন করুন৷
- এই কোডল্যাবটি সম্পূর্ণ করার জন্য ব্যবহারকারীর মেট্রিক্স সক্ষম করার প্রয়োজন নেই। যাইহোক, আমরা আপনাকে এটি করার পরামর্শ দিই কারণ এটি আপনাকে ব্যবহারকারীর আচরণকে আরও বিশদে বুঝতে দেয়। প্রক্রিয়াটি সম্পূর্ণ করতে ADD এ ক্লিক করুন।
বিজ্ঞাপন ইউনিট তৈরি করুন
বিজ্ঞাপন ইউনিট যোগ করতে:
- AdMob কনসোলে Apps মেনু থেকে Awesome Drawing Quiz অ্যাপ নির্বাচন করুন।
- বিজ্ঞাপন ইউনিট মেনু ক্লিক করুন.
ব্যানার
|
|
ইন্টারস্টিশিয়াল
|
|
পুরস্কৃত
|
|
একটি নতুন বিজ্ঞাপন ইউনিট বিজ্ঞাপন পরিবেশন করতে সক্ষম হতে সাধারণত কয়েক ঘন্টা সময় লাগে।
আপনি যদি অবিলম্বে বিজ্ঞাপনের আচরণ পরীক্ষা করতে চান, তাহলে নিম্নলিখিত টেবিলে তালিকাভুক্ত পরীক্ষা অ্যাপ আইডি এবং বিজ্ঞাপন ইউনিট আইডি ব্যবহার করুন।
ঐচ্ছিক: পরীক্ষা AdMob অ্যাপ এবং বিজ্ঞাপন ইউনিট ব্যবহার করুন
আপনি নিজে থেকে একটি নতুন অ্যাপ্লিকেশন এবং বিজ্ঞাপন ইউনিট তৈরি করার পরিবর্তে কোডল্যাব অনুসরণ করতে চাইলে, আপনি নিম্নলিখিত টেবিলে তালিকাভুক্ত AdMob অ্যাপ আইডি এবং বিজ্ঞাপন ইউনিট আইডি ব্যবহার করতে পারেন।
অ্যান্ড্রয়েড অ্যাপ আইডি/বিজ্ঞাপন ইউনিট আইডি
আইটেম | অ্যাপ আইডি/বিজ্ঞাপন ইউনিট আইডি |
AdMob অ্যাপ আইডি | |
ব্যানার | |
ইন্টারস্টিশিয়াল | |
পুরস্কৃত | |
iOS অ্যাপ আইডি/বিজ্ঞাপন ইউনিট আইডি
আইটেম | অ্যাপ আইডি/বিজ্ঞাপন ইউনিট আইডি |
AdMob অ্যাপ আইডি | |
ব্যানার | |
ইন্টারস্টিশিয়াল | |
পুরস্কৃত | |
পরীক্ষার বিজ্ঞাপনগুলি সম্পর্কে আরও তথ্যের জন্য, Android পরীক্ষার বিজ্ঞাপন এবং iOS পরীক্ষার বিজ্ঞাপন বিকাশকারী ডকুমেন্টেশন দেখুন৷
4. Google মোবাইল বিজ্ঞাপন ফ্লাটার প্লাগইন যোগ করুন
ফ্লাটার প্ল্যাটফর্ম-নির্দিষ্ট পরিষেবার বিস্তৃত পরিসরে অ্যাক্সেস প্রদান করতে প্লাগইন ব্যবহার করে। প্লাগইনগুলি আপনাকে প্রতিটি প্ল্যাটফর্মে পরিষেবা এবং API অ্যাক্সেস করতে সক্ষম করে।
google_mobile_ads প্লাগইন AdMob API ব্যবহার করে ব্যানার, ইন্টারস্টিশিয়াল, পুরস্কৃত এবং নেটিভ বিজ্ঞাপন লোড এবং প্রদর্শন সমর্থন করে।
যেহেতু Flutter একটি মাল্টি-প্ল্যাটফর্ম SDK, google_mobile_ads প্লাগইন iOS এবং Android উভয়ের জন্যই প্রযোজ্য। সুতরাং, আপনি যদি আপনার Flutter অ্যাপে প্লাগইন যোগ করেন, তাহলে এটি AdMob ইনলাইন বিজ্ঞাপন অ্যাপের Android এবং iOS উভয় সংস্করণেই ব্যবহার করা হবে।
নির্ভরতা হিসাবে Google মোবাইল বিজ্ঞাপন প্লাগইন যোগ করুন
AdMob ইনলাইন বিজ্ঞাপন প্রকল্প থেকে AdMob API অ্যাক্সেস করতে, প্রকল্পের মূলে অবস্থিত pubspec.yaml ফাইলে নির্ভরতা হিসেবে google_mobile_ads যোগ করুন।
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
...
Awesome Drawing Quiz প্রকল্পে প্লাগইন ইনস্টল করতে Pub get এ ক্লিক করুন।
AndroidManifest.xml (Android) আপডেট করুন
- অ্যান্ড্রয়েড স্টুডিওতে
android/app/src/main/AndroidManifest.xmlফাইলটি খুলুন। -
com.google.android.gms.ads.APPLICATION_IDনামের সাথে একটি<meta-data>ট্যাগ যোগ করে আপনার AdMob অ্যাপ আইডি যোগ করুন। উদাহরণস্বরূপ, যদি আপনার 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) আপডেট করুন
- অ্যান্ড্রয়েড স্টুডিওতে
ios/Runner/Info.plistফাইলটি খুলুন। - আপনার AdMob অ্যাপ আইডির স্ট্রিং মান সহ একটি
GADApplicationIdentifierকী যোগ করুন। উদাহরণস্বরূপ, যদি আপনার AdMob অ্যাপ আইডিca-app-pub-3940256099942544~1458002511হয়, তাহলে আপনাকেInfo.plistফাইলে নিম্নলিখিত লাইনগুলি যোগ করতে হবে।
ios/Runner/Info.plist
...
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
...
5. বিজ্ঞাপনের জন্য একটি সহায়ক শ্রেণী যোগ করুন
lib ডিরেক্টরির অধীনে ad_helper.dart নামে একটি নতুন ফাইল তৈরি করুন। তারপরে, AdHelper ক্লাস বাস্তবায়ন করুন, যা Android এবং iOS-এর জন্য একটি AdMob অ্যাপ আইডি এবং বিজ্ঞাপন ইউনিট আইডি প্রদান করে।
নিশ্চিত করুন যে আপনি 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. Google মোবাইল বিজ্ঞাপন SDK শুরু করুন৷
বিজ্ঞাপন লোড করার আগে, আপনাকে Google মোবাইল বিজ্ঞাপন SDK শুরু করতে হবে। lib/home_route.dart ফাইলটি খুলুন, এবং হোম পেজ লোড হওয়ার আগে SDK শুরু করতে _initGoogleMobileAds() পরিবর্তন করুন।
মনে রাখবেন যে আপনাকে _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. একটি ব্যানার বিজ্ঞাপন যোগ করুন
এই বিভাগে, আপনি নিচের স্ক্রিনশটে দেখানো হিসাবে, গেম স্ক্রিনের শীর্ষে একটি ব্যানার বিজ্ঞাপন প্রদর্শন করেন।
-
lib/game_route.dartফাইলটি খুলুন এবংad_manager.dartআমদানি করুন - নিম্নলিখিত লাইন যোগ করে
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 {
...
}
-
_GameRouteStateক্লাসে, একটি ব্যানার বিজ্ঞাপনের জন্য নিম্নলিখিত সদস্যদের যোগ করুন।
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
// TODO: Add _bannerAd
BannerAd? _bannerAd;
...
}
-
initState()পদ্ধতিতে, 320x50 ব্যানারের জন্য একটিBannerAdতৈরি করুন এবং লোড করুন (AdSize.banner)। মনে রাখবেন যে একটি বিজ্ঞাপন ইভেন্ট শ্রোতা যখন একটি বিজ্ঞাপন লোড হয় তখন UI (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();
}
- যখন উপলব্ধ একটি ব্যানার বিজ্ঞাপন প্রদর্শন করতে
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!),
),
),
],
),
),
...
);
}
-
BannerAdঅবজেক্টের সাথে যুক্ত রিসোর্সটি ডিসপোজdispose()কলব্যাক পদ্ধতিতেBannerAd.dispose()পদ্ধতিতে কল করে রিলিজ করুন।
lib/game_route.dart
@override
void dispose() {
// TODO: Dispose a BannerAd object
_bannerAd?.dispose();
...
super.dispose();
}
তাই তো! প্রকল্প চালান, এবং একটি নতুন খেলা শুরু করুন. একটি বিজ্ঞাপন লোড হওয়ার পরে, আপনি পর্দার শীর্ষে একটি ব্যানার বিজ্ঞাপন দেখতে পাবেন৷
8. একটি ইন্টারস্টিশিয়াল বিজ্ঞাপন যোগ করুন
এই বিভাগে, আপনি খেলা শেষ হওয়ার পরে একটি ইন্টারস্টিশিয়াল বিজ্ঞাপন প্রদর্শন করেন (মোট 5 স্তর)।
-
lib/game_route.dartফাইলটি খুলুন -
_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}');
},
),
);
}
...
}
- এই কোডল্যাবে, একজন ব্যবহারকারী 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();
}
}
- একটি খেলা শেষ হলে, গেম স্কোর ডায়ালগ প্রদর্শিত হয়। যখন একজন ব্যবহারকারী ডায়ালগটি বন্ধ করে দেয়, তখন এটি একজন ব্যবহারকারীকে অসাধারণ অঙ্কন কুইজের হোম স্ক্রিনে নিয়ে যায়।
যেহেতু ইন্টারস্টিশিয়াল বিজ্ঞাপনগুলি স্ক্রিন ট্রানজিশনের মধ্যে প্রদর্শিত হওয়া উচিত, একজন ব্যবহারকারী যখন CLOSE বোতামে ক্লিক করে তখন আমরা ইন্টারস্টিশিয়াল বিজ্ঞাপন দেখাই।
নিচের মত 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();
}
},
),
],
);
},
);
}
-
InterstitialAdঅবজেক্টের সাথে যুক্ত রিসোর্সটিdispose()কলব্যাক পদ্ধতিতেInterstitialAd.dispose()পদ্ধতিতে কল করে রিলিজ করুন।
lib/game_route.dart
@override
void dispose() {
...
// TODO: Dispose an InterstitialAd object
_interstitialAd?.dispose();
...
super.dispose();
}
তাই তো! প্রকল্পটি চালান এবং গেমটি সম্পূর্ণ করুন। যদি একটি ইন্টারস্টিশিয়াল বিজ্ঞাপন লোড করা হয়, আপনি একবার স্কোর ডায়ালগ থেকে CLOSE বোতামে ক্লিক করলে আপনি একটি ইন্টারস্টিশিয়াল বিজ্ঞাপন দেখতে পাবেন।
9. একটি পুরস্কৃত বিজ্ঞাপন যোগ করুন
এই বিভাগে, আপনি একটি পুরস্কৃত বিজ্ঞাপন যোগ করুন যা একজন ব্যবহারকারীকে পুরস্কার হিসাবে একটি অতিরিক্ত ইঙ্গিত দেয়।
-
lib/game_route.dartফাইলটি খুলুন -
_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}');
},
),
);
}
...
}
- গেম শুরু হলে একটি পুরস্কৃত বিজ্ঞাপনের অনুরোধ করতে
initState()পদ্ধতি থেকে_loadRewardedAd()কল করুন।
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
@override
void initState() {
...
// COMPLETE: Load a Rewarded Ad
_loadRewardedAd();
}
...
}
- ফ্লোটিং অ্যাকশন বোতামে ক্লিক করে ব্যবহারকারীদের একটি পুরস্কৃত বিজ্ঞাপন দেখার অনুমতি দিন। বোতামটি শুধুমাত্র তখনই দেখায় যখন কোনো ব্যবহারকারী বর্তমান লেভেলে কোনো ইঙ্গিত ব্যবহার না করে থাকে এবং একটি পুরস্কৃত বিজ্ঞাপন লোড হয়।
_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;
}
-
RewardedAdঅবজেক্টের সাথে যুক্ত রিসোর্সটিdispose()কলব্যাক পদ্ধতিতেRewardedAd.dispose()পদ্ধতিতে কল করে রিলিজ করুন।
lib/game_route.dart
@override
void dispose() {
...
// TODO: Dispose a RewardedAd object
_rewardedAd?.dispose();
...
super.dispose();
}
তাই তো! প্রকল্পটি চালান এবং গেমটি খেলুন। একটি পুরস্কৃত বিজ্ঞাপন লোড হয়ে গেলে, আপনি স্ক্রিনের নীচে একটি ইঙ্গিত বোতাম দেখতে পাবেন। একটি অতিরিক্ত ইঙ্গিত পেতে ইঙ্গিত বোতাম ক্লিক করুন.
10. সব সম্পন্ন!
আপনি কোডল্যাব সম্পূর্ণ করেছেন। আপনি এই কোডল্যাবের জন্য সম্পূর্ণ কোড খুঁজে পেতে পারেন সম্পূর্ণ ফোল্ডার।
একটি ব্যানার এবং নেটিভ ইনলাইন বিজ্ঞাপনগুলি কীভাবে প্রয়োগ করতে হয় তা শিখতে, একটি Flutter অ্যাপ কোডল্যাবে একটি AdMob ব্যানার এবং নেটিভ ইনলাইন বিজ্ঞাপন যুক্ত করা দেখুন৷
আরও জানতে, অন্যান্য ফ্লটার কোডল্যাব ব্যবহার করে দেখুন।