1. הקדמה
מטרות
במעבדת הקוד הזה, תערכו ניסוי הודעות בתוך האפליקציה עבור אפליקציית המלצות למסעדות ניידות מרובות פלטפורמות המופעלות על ידי Flutter ו- Cloud Firestore .
לאחר שתסיים, תוכל לעצב וליישם ניסויי הודעות בתוך האפליקציה כדי להגביר ביעילות את מעורבות המשתמש עבור כל אפליקציית iOS או Android תוך כתיבת כמות מינימלית של קוד.
מה תלמד
- כיצד להשתמש ב-Firebase In-App Messaging (FIAM) באפליקציית Flutter
- כיצד להתאים אישית את המראה של ההודעות שלך בתוך האפליקציה
- כיצד לעצב ניסוי הודעות בתוך האפליקציה ולהטמיע אותו באפליקציה שלך
- כיצד לפרש את התוצאות של ניסוי הודעות בתוך האפליקציה
מה תרצה ללמוד ממעבדת הקוד הזה?
הודעות באפליקציה של Firebase
Firebase In-App Messaging (FIAM) עוזר לך למשוך משתמשים שמשתמשים באפליקציה שלך באופן פעיל על ידי שליחת הודעות ממוקדות והקשריות שדוחפות אותם להשלים פעולות מפתח בתוך האפליקציה - כמו לעלות על רמת משחק, לקנות פריט או להירשם לתוכן .
בדיקת A/B של Firebase
מופעל על ידי Google Optimize, Firebase A/B Testing (ABT) עוזר לך לבצע אופטימיזציה של חוויית האפליקציה שלך על ידי כך שקל להפעיל, לנתח ולהרחיב ניסויי מוצר ושיווק. זה נותן לך את הכוח לבדוק שינויים בממשק המשתמש, בתכונות או במסעות המעורבות של האפליקציה שלך כדי לראות אם הם באמת מזיזים את המחט על המדדים העיקריים שלך (כמו הכנסה ושימור) לפני שאתה מפיץ אותם באופן נרחב.
מה אתה צריך
אם אינך מכיר היטב את Flutter או Firestore, השלם תחילה את מעבדת הקוד של Firebase for Flutter :
אתה יכול להפעיל מעבדת קוד זה באמצעות כל אחד מהמכשירים הבאים:
- מכשיר פיזי (אנדרואיד או iOS) המחובר למחשב שלך ומוגדר למצב מפתח.
- סימולטור iOS. (דורש התקנת כלי Xcode ).
- אמולטור אנדרואיד. (דורש הגדרה ב- Android Studio ).
בנוסף לאמור לעיל, תצטרך גם:
- דפדפן לבחירתך, כגון Chrome.
- עורך IDE או טקסט לבחירתך, כגון Android Studio או VS Code המוגדרים עם התוספים Dart ו-Flutter. VS Code מומלץ לשימוש עם Flutter.
- הגרסה היציבה האחרונה של Flutter (או בטא אם אתה נהנה לחיות על הקצה).
- חשבון Google, כמו חשבון Gmail, ליצירה וניהול של פרויקט Firebase שלך.
- הקוד לדוגמה של מעבדת הקוד. ראה את השלב הבא כיצד להשיג את הקוד.
2. מתחילים להתקין
קבל את הקוד
שכבו את מאגר GitHub משורת הפקודה:
git clone https://github.com/FirebaseExtended/codelab-friendlyeats-flutter.git friendlyeats-flutter
הקוד לדוגמה ישוכפל לתוך ספריית friendlyeats-flutter
. מעתה והלאה, ודא שאתה מפעיל פקודות מהספרייה הזו:
cd friendlyeats-flutter
לאחר מכן עבור לספריית Codelab ובדוק את סניף fiam-abt
:
git checkout fiam-abt
סניף זה מכיל את כל הקוד הדרוש ל-codelab זה, כולל גרסה מלאה בתיקיית done
. הסניפים האחרים במאגר זה מכילים קוד לבניית אפליקציית FriendlyEats, כפי שמוצג במעבדת הקוד מרובת הפלטפורמות Firestore Flutter . למטרות מעבדת קוד זה, הסרנו את שילוב האינטרנט בסניף זה.
ייבא את אפליקציית המתנע
פתח או ייבא את ספריית codelab-fiam-abt
ל-IDE המועדף עליך. ספרייה זו מכילה את קוד ההתחלה של ה-codelab המורכב מאפליקציית המלצות למסעדות. באמצעות מעבדת קוד זה, תערכו ניסוי הודעות בתוך האפליקציה עבור משתמשי האפליקציה הזו.
צור פרויקט Firebase
- במסוף Firebase , לחץ על הוסף פרויקט ולאחר מכן שם לפרויקט Firebase FriendlyEats . זכור את מזהה הפרויקט עבור פרויקט Firebase שלך (או לחץ על סמל העריכה כדי להגדיר את מזהה הפרויקט המועדף עליך).
- ודא ש-Google Analytics מופעל עבור הפרויקט, ולאחר מכן לחץ על המשך.
- לחץ על צור פרויקט .
מזל טוב! זה עתה יצרת את פרויקט Firebase הראשון שלך. כעת, אתה יכול ללחוץ על שם הפרויקט כדי להיכנס למסוף.
לאחר מכן, אתה עובר על הגדרת התצורה והפעלת השירותים הדרושים באמצעות מסוף Firebase.
אפשר אישור אנונימי
למרות שאימות אינו המוקד של מעבדת קוד זה, חשוב שתהיה צורה כלשהי של אימות באפליקציה שלך. אתה תשתמש בכניסה אנונימית - כלומר המשתמש מחובר בשקט מבלי לקבל הנחיה.
כדי לאפשר התחברות אנונימית:
- במסוף Firebase, אתר את האימות בסרגל הניווט השמאלי.
- לחץ על אימות ולאחר מכן לחץ על התחל ובחר בכרטיסייה שיטת כניסה (או עבור ישירות למסוף Firebase ).
- הפעל את ספק הכניסה האנונימית ולחץ על שמור .
הפעלת התחברות אנונימית מאפשרת לאפליקציה להיכנס בשקט למשתמשים שלך כאשר הם ניגשים לאפליקציה. למידע נוסף, עיין בתיעוד האימות האנונימי עבור אנדרואיד ו- iOS .
הפעל את Cloud Firestore
האפליקציה משתמשת ב-Cloud Firestore כדי לשמור ולקבל מידע ודירוגי מסעדות.
כדי להפעיל את Cloud Firestore:
- בסרגל הניווט הימני של מסוף Firebase, לחץ על Firestore .
- לחץ על צור מסד נתונים בחלונית Cloud Firestore.
- בחר באפשרות התחל במצב בדיקה , ולחץ על הבא לאחר קריאת כתב הוויתור לגבי כללי האבטחה, ולאחר מכן הפעל .
מצב בדיקה מבטיח שאתה יכול לכתוב בחופשיות למסד הנתונים במהלך הפיתוח. אתה הופך את מסד הנתונים שלך לאבטח יותר מאוחר יותר במעבדת הקוד הזה.
3. תצורת Firebase ספציפית לנייד
רוב שינויי הקוד הנדרשים כדי להפעיל תמיכה ב-Firebase כבר נבדקו בפרויקט שאתה עובד עליו. עם זאת, על מנת להוסיף תמיכה לפלטפורמות ניידות, עליך:
- רשום את הפלטפורמה הרצויה בפרויקט Firebase
- הורד את קובץ התצורה הספציפי לפלטפורמה, והוסף אותו לקוד.
בספרייה ברמה העליונה של אפליקציית Flutter שלך, ישנן ספריות משנה הנקראות ios
ו- android
. ספריות אלו מכילות את קובצי התצורה הספציפיים לפלטפורמה עבור iOS ו- Android, בהתאמה.
הגדר את iOS
במסוף Firebase , בחר הגדרות פרויקט בחלק העליון של סרגל הניווט הימני, ולחץ על כפתור iOS תחת האפליקציות שלך בדף כללי .
אתה אמור לראות את הדו-שיח הבא:
- הערך החשוב שיש לספק הוא מזהה החבילה של iOS. אתה מקבל את מזהה החבילה על ידי ביצוע שלושת השלבים הבאים.
- בכלי שורת הפקודה, עבור אל הספרייה ברמה העליונה של אפליקציית Flutter שלך.
- הפעל את הפקודה
open ios/Runner.xcworkspace
כדי לפתוח את Xcode.
- ב-Xcode, לחץ על ה- Runner ברמה העליונה בחלונית השמאלית, כדי להציג את הכרטיסייה General בחלונית הימנית, כפי שמוצג. העתק את ערך מזהה החבילה .
- חזור לתיבת הדו-שיח של Firebase, הדבק את מזהה החבילה שהועתק בשדה מזהה החבילה של iOS ולחץ על הרשום אפליקציה .
- המשך ב-Firebase, עקוב אחר ההוראות להורדת קובץ התצורה
GoogleService-Info.plist
. - חזור אל Xcode. שימו לב שלראנר יש תיקיית משנה שנקראת גם Runner (מוצגת בתמונה הקודמת).
- גרור את הקובץ
GoogleService-Info.plist
(שהורדת זה עתה) לתיקיית המשנה של Runner . - בתיבת הדו-שיח שמופיעה ב-Xcode, לחץ על סיום .
- חזור למסוף Firebase. בשלב ההגדרה, לחץ על הבא , דלג על השלבים הנותרים וחזור לדף הראשי של מסוף Firebase.
סיימת להגדיר את אפליקציית Flutter שלך עבור iOS!
הגדר את אנדרואיד
- ב- Firebase Console , בחר הגדרות פרויקט בחלק העליון של סרגל הניווט הימני, ולחץ על כפתור Android תחת האפליקציות שלך בדף כללי .
אתה אמור לראות את הדו-שיח הבא:
- הערך החשוב שיש לספק הוא שם החבילה של Android . אתה מקבל את שם החבילה כאשר אתה מבצע את שני השלבים הבאים:
- בספריית אפליקציית Flutter שלך, פתח את הקובץ
android/app/src/main/AndroidManifest.xml
. - ברכיב
manifest
, מצא את ערך המחרוזת של תכונתpackage
. ערך זה הוא שם החבילה של Android (משהו כמוcom.yourcompany.yourproject
). העתק את הערך הזה. - בתיבת הדו-שיח של Firebase, הדבק את שם החבילה שהועתק בשדה שם החבילה של Android .
- אינך זקוק לאישור חתימת באגים SHA-1 עבור מעבדת קוד זה. השאר את זה ריק.
- לחץ על הרשמה אפליקציה .
- המשך ב-Firebase, עקוב אחר ההוראות להורדת קובץ התצורה
google-services.json
. - עבור אל ספריית אפליקציית Flutter שלך והעבר את הקובץ
google-services.json
(שהורדת זה עתה) אל ספרייתandroid/app
. - בחזרה למסוף Firebase, דלג על השלבים הנותרים וחזור לדף הראשי של מסוף Firebase.
- כל תצורת Gradle כבר נרשמת. אם האפליקציה שלך עדיין פועלת, סגור ובנה אותה מחדש כדי לאפשר ל-gradle להתקין תלות.
סיימת להגדיר את אפליקציית Flutter שלך עבור אנדרואיד!
4. הפעל את האפליקציה שלך באופן מקומי
אתה מוכן להתחיל לעבוד על האפליקציה שלך! ראשית, הפעל את האפליקציה באופן מקומי. כעת תוכלו להפעיל את האפליקציה בכל פלטפורמה שהגדרתם (ושעבורה יש לכם מכשיר ואמולטור זמינים).
גלה אילו מכשירים זמינים עם הפקודה הבאה:
flutter devices
תלוי באילו מכשירים זמינים, הפלט של הפקודה הקודמת נראה בערך כך:
כעת, הפעל את האפליקציה באופן מקומי עם הפקודה הבאה:
flutter run
כעת, אתה אמור לראות את העותק שלך של FriendlyEats, המחובר לפרויקט Firebase שלך.
האפליקציה מתחברת אוטומטית לפרויקט Firebase שלך ומכניסה אותך בשקט כמשתמש אנונימי.
5. צור ובדוק את ההודעה הראשונה שלך
שלב Firebase In-App Messaging באפליקציה שלך
השילוב הבסיסי של העברת הודעות בתוך האפליקציה הוא חסר קוד לחלוטין, כל מה שאתה צריך לעשות הוא להוסיף את התלות ואתה מוכן לצאת לדרך! הוסף את התלות הבאה לקובץ pubspec.yaml
שלך
dependencies:
# ...
firebase_in_app_messaging: ^0.4.0
# ...
כתוב הודעה ב-Firebase Console
כעת, לאחר שהוספת את FIAM לאפליקציה שלך, אפשר לכתוב הודעה שתופעל כאשר האפליקציה שלך תיפתח לראשונה.
כדי לכתוב את ההודעה הראשונה שלך:
- בקטע Engage של מסוף Firebase, לחץ על הודעות בתוך האפליקציה .
- לחץ על צור את מסע הפרסום הראשון שלך בחלונית 'הודעות בתוך האפליקציה'.
בואו נחבר הודעה מודאלית בסיסית כדי לוודא שהשילוב עובד. אל תהסס להתאים אישית את ההודעה בכל דרך שתרצה - אתה יכול להוסיף תמונות, לחצנים או לשנות צבעים.
הקפד למקד לאפליקציה שברצונך לבדוק איתה, בהתאם לנתיב האינטגרציה שאתה עוקב אחריו, ייתכן שיש לך iOS, אנדרואיד או שניהם.
אנו רוצים לוודא שההודעה מופעלת כאשר האפליקציה נפתחת, כך שתצורת ברירת המחדל של תזמון תפעל כאן.
לאחר סיום התזמון נוכל לפרסם את ההודעה. לחץ על "סקירה" ואתה אמור לראות משהו כמו הבא
הצג את ההודעה באפליקציה שלך
כעת, הסר והתקן מחדש את האפליקציה שלך, ואתה אמור לראות את ההודעה שיצרת מוצגת עם הפתיחה. מזל טוב, זה עתה שלחת את ההודעה הראשונה שלך בתוך האפליקציה! בשלב הבא תלמדו כיצד להוסיף אירוע ניתוח, על מנת להפעיל הודעה בתוך האפליקציה על סמך הפעולות שהמשתמשים שלכם מבצעים באפליקציה.
6. שלב את Firebase Analytics להפעלת הודעות מתקדמת
שלב את Firebase Analytics באפליקציה שלך
על מנת להבין כיצד משתמשים מקיימים אינטראקציה עם האפליקציה שלנו, ולהפעיל הודעה בתוך האפליקציה על סמך הפעולות שלהם, נוסיף כעת אירוע Analytics עבור לחיצה על מסעדה.
- הוסף את התלות של Firebase Analytics ל-Flutter ב-
pubspec.yaml
dependencies:
# ...
firebase_analytics: ^1.0.1
# ...
- ייבוא ניתוח נתונים ב-
home_page.dart
import 'package:firebase_analytics/firebase_analytics.dart';
- הוסף מופע של Firebase Analytics למחלקה HomePage ב-
home_page.dart
class HomePage extends StatefulWidget {
static const route = '/';
static FirebaseAnalytics analytics = FirebaseAnalytics();
HomePage({Key key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
- הפעל אירוע ניתוח כאשר המשתמש לוחץ על כרטיס מסעדה ב-
home_page.dart
onRestaurantPressed: (id) async {
await HomePage.analytics.logEvent(name: 'click_restaurant');
Navigator.pushNamed(context,
RestaurantPage.route,
arguments: RestaurantPageArguments(id: id));
})
ערוך את ההודעה שלך כדי להפעיל את אירוע הניתוח
עכשיו, כשיש לנו אירוע "click_restaurant", בואו נפעיל את ההודעה שלנו בתוך האפליקציה על סמך זה ולא כשהמשתמש פותח את האפליקציה.
ב-Firebase Console חזור להודעה בתוך האפליקציה וערוך את הקמפיין הקיים שלך
כעת שנה את קטע התזמון כדי להפעיל את ההודעה מהאירוע החדש
משם נוכל לפרסם את השינויים שלנו על ידי לחיצה על כפתור "סקירה".
בדוק את הטריגר שלך באפליקציה
בשלב זה אתה אמור להיות מסוגל להפעיל את האפליקציה שלך
flutter run
וכאשר אתה לוחץ על מסעדה אתה אמור לראות את ההודעה שלך בתוך האפליקציה
7. צור מסע פרסום של FIAM+ABT
התחל עם מטרה
אפליקציית Friendlyeats שלנו כבר נראית נהדר, אבל כדי שהיא תהיה שימושית אנחנו צריכים כמה ביקורות. אלה יגיעו ממשתמשי Friendlyeats, אז בואו נמצא איזו דרך לעודד משתמשים להשאיר ביקורות.
ראשית בואו נגדיר את אירוע ההמרה שלנו
מכיוון שאנו רוצים לראות אם משתמשים סוקרים מסעדות, אפשר להוסיף אירוע ניתוח כדי למדוד התנהגות זו.
- ייבא את Firebase Analytics בדיוק כמו קודם והוסף מופע של Analytics ל-RestaurantPage ב-
restaurant_page.dart
class RestaurantPage extends StatefulWidget {
static const route = '/restaurant';
static FirebaseAnalytics analytics = FirebaseAnalytics();
final String _restaurantId;
RestaurantPage({Key key, @required String restaurantId})
: _restaurantId = restaurantId,
super(key: key);
@override
_RestaurantPageState createState() =>
_RestaurantPageState(restaurantId: _restaurantId);
}
- כעת מאפשר להפעיל אירוע ב
_onCreateReviewPressed
כאשר אנו שומרים ביקורת ב-restaurant_page.dart
if (newReview != null) {
// Log successful review
await RestaurantPage.analytics.logEvent(name: 'review_success');
// Save the review
return data.addReview(restaurantId: _restaurant.id, review: newReview);
}
הגדר את בדיקת A/B ב-Firebase Console
עכשיו, כשאנחנו יודעים איך ליצור מסעות פרסום בתוך האפליקציה, הגיע הזמן לשקול איזו התנהגות נרצה לעודד באפליקציה שלנו באמצעות מסעות פרסום אלו. עבור FriendlyEats, נרצה שיותר אנשים ישאירו ביקורות, מה שיהפוך את האפליקציה לשימושית יותר! יש כמה דרכים שבהן נוכל לעודד זאת באמצעות הודעות בתוך האפליקציה. האחת היא באמצעות הודעה פשוטה בתוך האפליקציה שרק אומרת למשתמש שעליו לתת ביקורת למסעדה כדי לעזור לשפר את אפליקציית FriendlyEats. דרך נוספת היא להשתמש בהודעה בתוך האפליקציה כדי להציע סוג כלשהו של תמריץ למתן ביקורת, כמו קופון או קוד הנחה למסעדה נתונה.
שתי הגישות יכולות להגדיל את תדירות המשתמשים לספק ביקורות על מסעדות ב-FriendlyEats, ונראה שלמתן קופון עשויה להיות השפעה חזקה עוד יותר במקרה זה. אבל, כמה יותר סביר שמתן קופון זה יגרום למשתמשים לכתוב ביקורת? האם זה שווה את עלות הקופון מלכתחילה? כדי לקבוע זאת, נערוך ניסוי הודעות בתוך האפליקציה! אנחנו יכולים להשתמש ב-Firebase A/B Testing כדי להציג באקראי אחת מההודעות שלנו בתוך האפליקציה למשתמשים, ולמדוד את ההשפעה שיש לזה על התנהגות המשתמש, כמו ניסוי קליני. והכי חשוב, זה יכול להיעשות לחלוטין דרך קונסולת Firebase, ללא צורך בקוד!
כדי ליצור את הניסוי הראשון שלך בהעברת הודעות בתוך האפליקציה:
- בקטע Engage של מסוף Firebase, לחץ על A/B Testing .
- לחץ על צור ניסוי ובחר שברצונך להתנסות בהעברת הודעות בתוך האפליקציה . זה יביא אותך למלחין הניסוי המוצג להלן.
תן לניסוי שלך שם ותיאור אופציונלי.
- השלב הבא הוא המקום שבו תרכיב את ההודעות השונות בתוך האפליקציה שתשלח למשתמשים בניסוי שלך. ההודעה הראשונה בתוך האפליקציה שנחבר היא ה"בסיס", או השליטה של הניסוי שלנו. אנחנו יכולים להפוך את ההודעה הפשוטה שלנו ל"אנא ערוך סקירה":
- כעת, כשיש לנו קו בסיס, כעת נרכיב גרסה, ההודעה בתוך האפליקציה המציעה למשתמשים קוד קופון כדי לעודד אותם להשאיר ביקורת. זה לא גלוי לחלוטין בתצוגה המקדימה למטה, אבל כותרת ההודעה היא "קח קופון, השאירי ביקורת!", וגוף ההודעה הוא "בפעם הבאה שאתה ב-Burrito Cafe, השתמש בקוד הקופון FRIENDLYEATS-15 בכתובת קופה ב-15% הנחה על ההזמנה שלך. וזכור להשאיר ביקורת לאחר!". יש לקוות שזה ייתן השראה למשתמשים מסוימים לבדוק את קפה בוריטו!
בשלב הבא, נכוון את האפליקציה שלנו ונקבע את החשיפה. זהו אחוז המשתמשים הכשירים (אלה העומדים בתנאי המיקוד/ההפעלה) שיראו את אחת ההודעות בניסוי. אנו יכולים פשוט להגדיר זאת ל-100% עבור דוגמה זו, מכיוון שאנו רוצים שכל המשתמשים יראו את קו הבסיס או את גרסת הקופון שלנו. אם אתה רוצה שתהיה קבוצת בקרה שלא מוצגת בה הודעה בתוך האפליקציה בכלל, אתה יכול להפחית את אחוז החשיפה הזה.
- לאחר מכן, תגדיר כמה יעדים עבור הניסוי. זו התוצאה של הניסוי שנרצה למדוד. נגדיר את זה כאירוע הניתוח
review_success
שהגדרנו בסעיף הקודם, מכיוון שהיינו רוצים לראות את ההשפעה שיש להודעות השונות שלנו בתוך האפליקציה על משתמשים שמשאירים ביקורות על מסעדות. - לצורך תזמון, ניתן למסע הפרסום להתחיל מיד, ונגדיר את
click_restaurant
כתנאי ההפעלה, כך שמשתמשים יראו אחת משתי ההודעות בתוך האפליקציה כשהם לוחצים על מסעדה.
- כעת, כל מה שנותר הוא לסקור את הניסוי שלנו, וללחוץ על התחל ניסוי . אז נוכל לשבת לאחור ולחכות שהנתונים מהניסוי שלנו ייכנסו!
בדוק את איסוף הנתונים בזמן אמת
כעת, לאחר שהתחלנו את הניסוי שלנו, משתמשי FriendlyEats יראו באקראי אחת משתי ההודעות בתוך האפליקציה שחיברנו כשהם לוחצים על מסעדה, או הודעת הבסיס או הודעת הגרסה . זה יחלק את המשתמשים שלנו לשתי קבוצות, על סמך ההודעה שהם ראו. לאחר מכן נוכל להסתכל במסוף Firebase (שוב בסעיף בדיקות A/B) כדי להשוות נתוני ניתוח חיים משתי הקבוצות. ייקח קצת זמן עד שהנתונים יגיעו, מכיוון שאנו צריכים לחכות עד שהמשתמשים יראו בפועל את ההודעות בתוך האפליקציה ויפעלו בהתאם. כך עשויות להיראות התוצאות שלך לאחר מספיק נתונים:
במקרה זה, הגרסה השתפרה באופן משמעותי ביחס לקו הבסיס, כך שנוכל לבחור לבחור ב- Roll out variant , אשר לאחר מכן תפיץ את ההודעה בתוך האפליקציה עם הקופון לכל המשתמשים.
8. מזל טוב
מזל טוב, יצרת והרצת בהצלחה את הניסוי הראשון שלך בהעברת הודעות בתוך האפליקציה. עכשיו אתה יכול להפעיל ניסוי באפליקציה שלך, ולהשתמש בתוצאות כדי להפוך את מסעות הפרסום שלך בתוך האפליקציה ליעילים יותר.
מה הלאה?
בדוק כמה ממעבדות הקוד האלה...
לקריאה נוספת
זה עתה שרטנו את פני השטח של מה שניתן לעשות עם Firebase In-App Messaging ו-Firebase A/B Testing. בדוק את אלה אם תרצה ללמוד עוד...
- צור ניסויי הודעות עם בדיקות A/B
- צור ניסויי תצורה מרוחקים עם בדיקת A/B
- חקור מקרי שימוש של הודעות באפליקציה של Firebase
- התאם אישית את הודעות Firebase בתוך האפליקציה שלך