1. Giriş
Hedefler
Bu codelab'de Flutter ve Cloud Firestore tarafından desteklenen çok platformlu bir mobil restoran öneri uygulaması için uygulama içi mesajlaşma denemesini gerçekleştireceksiniz.
Bitirdiğinizde, minimum miktarda kod yazarken herhangi bir iOS veya Android uygulaması için kullanıcı etkileşimini etkili bir şekilde artırmak amacıyla uygulama içi mesajlaşma denemeleri tasarlayıp uygulayabileceksiniz.
Ne öğreneceksin
- Flutter uygulamasında Firebase Uygulama İçi Mesajlaşma (FIAM) nasıl kullanılır?
- Uygulama içi mesajlarınızın görünümünü nasıl özelleştirebilirsiniz?
- Uygulama içi mesajlaşma denemesi nasıl tasarlanır ve uygulamanıza nasıl uygulanır?
- Uygulama içi mesajlaşma denemesinin sonuçları nasıl yorumlanır?
Bu codelab'den ne öğrenmek istersiniz?
Firebase Uygulama İçi Mesajlaşma
Firebase Uygulama İçi Mesajlaşma (FIAM), uygulamanızı aktif olarak kullanan kullanıcılara, onları bir oyun seviyesini geçmek, bir öğe satın almak veya içeriğe abone olmak gibi önemli uygulama içi eylemleri tamamlamaya teşvik eden hedefli ve bağlamsal mesajlar göndererek etkileşim kurmanıza yardımcı olur. .
Firebase A/B Testi
Google Optimize tarafından desteklenen Firebase A/B Testi (ABT), ürün ve pazarlama denemelerini çalıştırmayı, analiz etmeyi ve ölçeklendirmeyi kolaylaştırarak uygulama deneyiminizi optimize etmenize yardımcı olur. Uygulamanızın kullanıcı arayüzünde, özelliklerinde veya etkileşim kampanyalarında yapılan değişiklikleri, bunları geniş çapta kullanıma sunmadan önce, temel ölçümlerinize (gelir ve elde tutma gibi) gerçekten yön verip vermediklerini görmek için test etme gücü verir.
Neye ihtiyacın var
Flutter veya Firestore'a pek aşina değilseniz öncelikle Flutter için Firebase kod laboratuvarını tamamlayın:
Bu codelab'i aşağıdaki cihazlardan herhangi birini kullanarak çalıştırabilirsiniz:
- Bilgisayarınıza bağlı ve geliştirici moduna ayarlanmış fiziksel bir cihaz (Android veya iOS).
- İOS simülatörü. ( Xcode araçlarının yüklenmesini gerektirir).
- Android emülatörü. ( Android Studio'da kurulum gerektirir).
Yukarıdakilere ek olarak şunlara da ihtiyacınız olacak:
- Chrome gibi seçtiğiniz bir tarayıcı.
- Dart ve Flutter eklentileriyle yapılandırılmış Android Studio veya VS Code gibi seçtiğiniz bir IDE veya metin düzenleyici. VS Code'un Flutter ile kullanılması tavsiye edilir.
- Flutter'ın en son kararlı sürümü (veya uçlarda yaşamaktan hoşlanıyorsanız beta).
- Firebase projenizi oluşturmak ve yönetmek için Gmail hesabı gibi bir Google hesabı.
- Codelab'in örnek kodu. Kodun nasıl alınacağını öğrenmek için bir sonraki adıma bakın.
2. Kurulum
Kodu al
GitHub deposunu komut satırından kopyalayın:
git clone https://github.com/FirebaseExtended/codelab-friendlyeats-flutter.git friendlyeats-flutter
Örnek kod friendlyeats-flutter
dizinine kopyalanacaktır. Şu andan itibaren komutları bu dizinden çalıştırdığınızdan emin olun:
cd friendlyeats-flutter
Ardından codelab dizinine geçin ve fiam-abt
şubesine göz atın:
git checkout fiam-abt
Bu dal, done
klasördeki tamamlanmış sürüm de dahil olmak üzere bu codelab için gerekli tüm kodu içerir. Bu depodaki diğer dallar , Çoklu Platform Firestore Flutter kod laboratuvarında gösterildiği gibi, FriendlyEats uygulamasını oluşturmaya yönelik kodu içerir. Bu codelab'in amaçları doğrultusunda bu daldaki web entegrasyonunu kaldırdık.
Başlangıç uygulamasını içe aktar
codelab-fiam-abt
dizinini açın veya tercih ettiğiniz IDE'ye aktarın. Bu dizin, bir restoran öneri uygulamasından oluşan codelab'in başlangıç kodunu içerir. Bu codelab aracılığıyla, bu uygulamanın kullanıcıları için bir uygulama içi mesajlaşma denemesine aracı olacaksınız.
Firebase projesi oluşturma
- Firebase konsolunda Proje ekle'ye tıklayın ve ardından Firebase projesine FriendlyEats adını verin. Firebase projenizin proje kimliğini unutmayın (veya tercih ettiğiniz proje kimliğini ayarlamak için Düzenle simgesini tıklayın).
- Proje için Google Analytics'in etkinleştirildiğinden emin olun ve ardından Devam'ı tıklayın.
- Proje oluştur'u tıklayın.
Tebrikler! Az önce ilk Firebase projenizi oluşturdunuz. Artık konsola girmek için proje adına tıklayabilirsiniz.
Daha sonra, Firebase konsolunu kullanarak gerekli hizmetleri yapılandırma ve etkinleştirme adımlarını izleyeceksiniz.
Anonim Kimlik Doğrulamayı Etkinleştir
Kimlik doğrulama bu codelab'in odak noktası olmasa da uygulamanızda bir tür kimlik doğrulamanın bulunması önemlidir. Anonim oturum açmayı kullanacaksınız; bu, kullanıcının sorulmadan sessizce oturum açması anlamına gelir.
Anonim girişi etkinleştirmek için:
- Firebase konsolunda sol gezinme çubuğunda Kimlik Doğrulamayı bulun.
- Kimlik Doğrulama'yı ve ardından Başlarken'i tıklayıp Oturum açma yöntemi sekmesini seçin (veya doğrudan Firebase konsoluna gidin ).
- Anonim Oturum Açma Sağlayıcısını etkinleştirin ve Kaydet'i tıklayın.
Anonim oturum açmayı etkinleştirmek, uygulamanın kullanıcılarınız uygulamaya eriştiklerinde sessizce oturum açmasına olanak tanır. Daha fazla bilgi edinmek için Android ve iOS'a yönelik anonim kimlik doğrulama belgelerine bakın.
Cloud Firestore'u etkinleştirin
Uygulama, restoran bilgilerini ve derecelendirmelerini kaydetmek ve almak için Cloud Firestore'u kullanıyor.
Cloud Firestore'u etkinleştirmek için:
- Firebase konsolunun sol gezinme çubuğunda Firestore'u tıklayın.
- Cloud Firestore bölmesinde Veritabanı oluştur'a tıklayın.
- Test modunda başlat seçeneğini seçin ve güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuduktan sonra İleri'ye ve ardından Etkinleştir'e tıklayın.
Test modu, geliştirme sırasında veritabanına serbestçe yazabilmenizi sağlar. Bu codelab'de daha sonra veritabanınızı daha güvenli hale getireceksiniz.
3. Mobile özgü Firebase yapılandırması
Firebase desteğini etkinleştirmek için gereken kod değişikliklerinin çoğu, üzerinde çalıştığınız projeye zaten eklenmiştir. Ancak mobil platformlara destek eklemek için şunları yapmanız gerekir:
- İstediğiniz platformu Firebase projesine kaydedin
- Platforma özel yapılandırma dosyasını indirin ve koda ekleyin.
Flutter uygulamanızın üst düzey dizininde ios
ve android
adında alt dizinler bulunmaktadır. Bu dizinler sırasıyla iOS ve Android için platforma özgü yapılandırma dosyalarını içerir.
iOS'u yapılandırın
Firebase konsolunda , sol gezinme çubuğunun üst kısmındaki Proje Ayarları'nı seçin ve Genel sayfasında Uygulamalarınız altında iOS düğmesini tıklayın.
Aşağıdaki iletişim kutusunu görmelisiniz:
- Sağlanması gereken önemli değer iOS paket kimliğidir. Sonraki üç adımı gerçekleştirerek paket kimliğini alırsınız.
- Komut satırı aracında Flutter uygulamanızın üst düzey dizinine gidin.
- Xcode'u açmak için
open ios/Runner.xcworkspace
komutunu çalıştırın.
- Xcode'da, gösterildiği gibi sağ bölmede Genel sekmesini göstermek için sol bölmedeki üst düzey Runner'a tıklayın. Paket Tanımlayıcı değerini kopyalayın.
- Firebase iletişim kutusuna geri dönün, kopyalanan Paket Tanımlayıcısını iOS paket kimliği alanına yapıştırın ve Uygulamayı Kaydet 'i tıklayın.
- Firebase'e devam ederek
GoogleService-Info.plist
yapılandırma dosyasını indirmek için talimatları izleyin. - Xcode'a geri dönün. Runner'ın aynı zamanda Runner adında bir alt klasöre sahip olduğuna dikkat edin (önceki resimde gösterilmiştir).
-
GoogleService-Info.plist
dosyasını (az önce indirdiğiniz) bu Runner alt klasörüne sürükleyin. - Xcode'da görünen iletişim kutusunda Son'u tıklayın.
- Firebase konsoluna geri dönün. Kurulum adımında İleri'ye tıklayın, kalan adımları atlayın ve Firebase konsolunun ana sayfasına geri dönün.
Flutter uygulamanızı iOS için yapılandırmayı tamamladınız!
Android'i yapılandır
- Firebase Konsolu'nda , sol gezinme çubuğunun üst kısmındaki Proje Ayarları'nı seçin ve Genel sayfasında Uygulamalarınız altında Android düğmesini tıklayın.
Aşağıdaki iletişim kutusunu görmelisiniz:
- Sağlanması gereken önemli değer Android paket adıdır . Aşağıdaki iki adımı gerçekleştirdiğinizde paket adını alırsınız:
- Flutter uygulama dizininizde
android/app/src/main/AndroidManifest.xml
dosyasını açın. -
manifest
öğesindepackage
niteliğinin dize değerini bulun. Bu değer Android paket adıdır (com.yourcompany.yourproject
gibi bir şey). Bu değeri kopyalayın. - Firebase iletişim kutusunda kopyalanan paket adını Android paket adı alanına yapıştırın.
- Bu codelab için Hata Ayıklama imzalama sertifikası SHA-1'e ihtiyacınız yoktur. Bunu boş bırakın.
- Uygulamayı Kaydet'i tıklayın.
- Firebase'e devam ederek
google-services.json
yapılandırma dosyasını indirmek için talimatları izleyin. - Flutter uygulama dizininize gidin ve
google-services.json
dosyasını (az önce indirdiğiniz)android/app
dizinine taşıyın. - Firebase konsoluna geri dönün, kalan adımları atlayın ve Firebase konsolunun ana sayfasına geri dönün.
- Tüm Gradle yapılandırması zaten kontrol edilmiştir. Uygulamanız hala çalışıyorsa, gradle'ın bağımlılıkları yüklemesine izin vermek için uygulamayı kapatın ve yeniden oluşturun.
Flutter uygulamanızı Android için yapılandırmayı tamamladınız!
4. Uygulamanızı yerel olarak çalıştırın
Uygulamanız üzerinde çalışmaya gerçekten başlamaya hazırsınız! Öncelikle uygulamayı yerel olarak çalıştırın. Artık uygulamayı yapılandırdığınız (ve bir cihazınızın ve öykünücünüzün bulunduğu) herhangi bir platformda çalıştırabilirsiniz.
Aşağıdaki komutla hangi cihazların mevcut olduğunu keşfedin:
flutter devices
Hangi aygıtların mevcut olduğuna bağlı olarak önceki komutun çıktısı şuna benzer:
Şimdi uygulamayı aşağıdaki komutla yerel olarak çalıştırın:
flutter run
Artık, Firebase projenize bağlı FriendlyEats kopyanızı görmelisiniz.
Uygulama, Firebase projenize otomatik olarak bağlanır ve sessizce anonim kullanıcı olarak oturumunuzu açar.
5. İlk mesajınızı oluşturun ve test edin
Firebase Uygulama İçi Mesajlaşma'yı uygulamanıza entegre edin
Uygulama İçi Mesajlaşmanın temel entegrasyonu tamamen kodsuzdur, tek yapmanız gereken bağımlılığı eklemek ve artık hazırsınız! Aşağıdaki bağımlılığı pubspec.yaml
dosyanıza ekleyin
dependencies:
# ...
firebase_in_app_messaging: ^0.4.0
# ...
Firebase Konsolunda bir mesaj oluşturun
Artık FIAM'ı uygulamanıza eklediğinize göre, uygulamanız ilk açıldığında tetiklenecek bir mesaj oluşturalım.
İlk mesajınızı oluşturmak için:
- Firebase konsolunun Etkileşim bölümünde Uygulama İçi Mesajlaşma'yı tıklayın.
- Uygulama İçi Mesajlaşma bölmesinde İlk kampanyanızı oluşturun'u tıklayın.
Entegrasyonun çalıştığından emin olmak için temel bir Modal mesajı oluşturalım. Mesajı istediğiniz şekilde özelleştirmekten çekinmeyin; resimler, düğmeler ekleyebilir veya renkleri değiştirebilirsiniz.
Hangi entegrasyon yolunu izlediğinize bağlı olarak iOS, Android veya her ikisine birden sahip olabileceğiniz için test etmek istediğiniz uygulamayı hedeflediğinizden emin olun.
Uygulama açıldığında mesajın tetiklendiğinden emin olmak istiyoruz, böylece varsayılan planlama yapılandırması burada çalışacaktır.
Planlama tamamlandıktan sonra mesajı yayınlayabiliriz. "İncele"yi tıkladığınızda aşağıdakine benzer bir şey görmelisiniz
Mesajı uygulamanızda görüntüleyin
Şimdi uygulamanızı kaldırıp yeniden yükleyin; açtığınızda oluşturduğunuz mesajın görüntülendiğini görmelisiniz. Tebrikler, az önce ilk uygulama içi mesajınızı gönderdiniz! Bir sonraki adımda, kullanıcılarınızın uygulamada gerçekleştirdiği işlemlere göre uygulama içi bir mesajı tetiklemek için bir analiz etkinliğinin nasıl ekleneceğini öğreneceksiniz.
6. Gelişmiş mesaj tetikleme için Firebase Analytics'i entegre edin
Firebase Analytics'i uygulamanıza entegre edin
Kullanıcıların uygulamamızla nasıl etkileşim kurduğunu anlamak ve eylemlerine göre uygulama içi bir mesajı tetiklemek için artık bir kullanıcının bir restorana tıklaması için bir Analytics etkinliği ekleyeceğiz.
-
pubspec.yaml
Firebase Analytics bağımlılığını Flutter'a ekleyin
dependencies:
# ...
firebase_analytics: ^1.0.1
# ...
- Analitikleri
home_page.dart
aktarın
import 'package:firebase_analytics/firebase_analytics.dart';
-
home_page.dart
HomePage sınıfına bir Firebase Analytics örneği ekleyin
class HomePage extends StatefulWidget {
static const route = '/';
static FirebaseAnalytics analytics = FirebaseAnalytics();
HomePage({Key key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
- Kullanıcı
home_page.dart
bir restoran kartını tıkladığında bir analiz etkinliği tetikleyin
onRestaurantPressed: (id) async {
await HomePage.analytics.logEvent(name: 'click_restaurant');
Navigator.pushNamed(context,
RestaurantPage.route,
arguments: RestaurantPageArguments(id: id));
})
Analiz etkinliğini tetiklemek için mesajınızı düzenleyin
Artık bir "click_restaurant" etkinliğimiz olduğuna göre, uygulama içi mesajımızı kullanıcının uygulamayı açma zamanı yerine buna göre tetikleyelim.
Firebase Konsolunda Uygulama İçi Mesaj'a geri dönün ve mevcut kampanyanızı düzenleyin
Şimdi yeni etkinlikten gelen mesajı tetiklemek için planlama bölümünü değiştirin
Oradan "incele" butonuna tıklayarak değişikliklerimizi yayınlayabiliriz
Tetikleyicinizi uygulamada test edin
Bu noktada uygulamanızı çalıştırabilmeniz gerekir.
flutter run
Bir restorana tıkladığınızda Uygulama İçi Mesajınızı görmelisiniz
7. FIAM+ABT Kampanyası Oluşturun
Bir hedefle başlayın
Friendlyeats uygulamamız zaten harika görünüyor, ancak kullanışlı olması için bazı incelemelere ihtiyacımız var. Bunlar, Friendlyeats kullanıcılarından temin edilecektir; bu nedenle, kullanıcıları yorum yazmaya teşvik etmenin bir yolunu bulalım.
Öncelikle dönüşüm etkinliğimizi tanımlayalım
Kullanıcıların restoranları inceleyip incelemediğini görmek istediğimizden, bu davranışı ölçmek için bir analiz etkinliği ekleyelim.
- Firebase Analytics'i daha önce olduğu gibi içe aktarın ve Analytics'in bir örneğini
restaurant_page.dart
RestaurantPage'e ekleyin
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);
}
- Şimdi,
restaurant_page.dart
bir incelemeyi kaydettiğimizde_onCreateReviewPressed
bir etkinliği tetikleyelim
if (newReview != null) {
// Log successful review
await RestaurantPage.analytics.logEvent(name: 'review_success');
// Save the review
return data.addReview(restaurantId: _restaurant.id, review: newReview);
}
Firebase Konsolunda A/B Testini Yapılandırma
Artık uygulama içi mesajlaşma kampanyalarının nasıl oluşturulacağını bildiğimize göre, bu kampanyalar aracılığıyla uygulamamızda ne tür davranışları teşvik etmek istediğimizi düşünmenin zamanı geldi. FriendlyEats için daha fazla kişinin yorum bırakmasını istiyoruz, bu da uygulamayı daha kullanışlı hale getirecektir! Uygulama içi mesajları kullanarak bunu teşvik etmenin birkaç yolu var. Bunlardan biri, kullanıcıya, FriendlyEats uygulamasını geliştirmeye yardımcı olması için restorana bir inceleme vermesi gerektiğini söyleyen basit bir uygulama içi mesajdır. Diğer bir yol ise, belirli bir restorana kupon veya indirim kodu gibi bir yorum sağlamak için bir tür teşvik sunmak amacıyla uygulama içi mesaj kullanmaktır.
Her iki yaklaşım da kullanıcıların FriendlyEats'te restoranlar için yorum yapma sıklığını artırabilir ve bu durumda kupon vermenin daha da güçlü bir etkisi olabilir gibi görünüyor. Ancak bu kuponun sağlanması kullanıcıların yorum yazmasına ne kadar yardımcı olur? İlk etapta kuponun maliyetine değer mi? Bunu belirlemek için uygulama içi bir mesajlaşma denemesi gerçekleştireceğiz! Uygulama içi mesajlarımızdan birini kullanıcılara rastgele görüntülemek ve bunun kullanıcı davranışı üzerindeki etkisini bir tür klinik deneme gibi ölçmek için Firebase A/B Testini kullanabiliriz. Hepsinden iyisi, bu işlemin hiçbir kod gerekmeden tamamen Firebase konsolu aracılığıyla yapılabilmesidir!
İlk uygulama içi mesajlaşma denemenizi oluşturmak için:
- Firebase konsolunun Etkileşim bölümünde A/B Testi'ni tıklayın.
- Deneme oluştur'u tıklayın ve Uygulama İçi Mesajlaşma ile deneme yapmak istediğinizi seçin. Bu sizi aşağıda gösterilen deney oluşturucuya götürecektir.
Denemenize bir ad ve isteğe bağlı bir açıklama verin.
- Bir sonraki adım, denemenizdeki kullanıcılara göndereceğiniz farklı uygulama içi mesajları oluşturacağınız yerdir. Oluşturacağımız ilk uygulama içi mesaj "temel" veya denememizin kontrolüdür. Bunu basit "lütfen bir inceleme yapın" mesajımız haline getirebiliriz:
- Artık bir temelimiz olduğuna göre, kullanıcıları yorum yazmaya teşvik edecek bir kupon kodu sunan uygulama içi mesajın bir çeşidini oluşturacağız. Bu, aşağıdaki önizlemede tam olarak görülmemektedir, ancak Mesaj başlığı "Bir kupon alın, bir inceleme bırakın!" ve mesaj gövdesi ise "Burrito Cafe'ye bir dahaki sefere geldiğinizde, şu adreste FRIENDLYEATS-15 kupon kodunu kullanın: Siparişinizde %15 indirim için ödeme yapın. Sonrasında yorum bırakmayı unutmayın!". Bunun bazı kullanıcılara Burrito Cafe'yi ziyaret etmeleri konusunda ilham vereceğini umuyoruz!
Bir sonraki adımda uygulamamızı hedefleyip Pozlamayı ayarlayacağız. Bu, denemedeki mesajlardan birini görecek uygun kullanıcıların (hedefleme/tetikleme koşullarını karşılayanlar) yüzdesidir. Tüm kullanıcıların ya temel çizgiyi ya da kupon varyantımızı görmesini istediğimizden, bu örnek için bunu %100'e ayarlayabiliriz. Hiçbir uygulama içi mesajın gösterilmediği bir kontrol grubuna sahip olmak istiyorsanız bu maruz kalma yüzdesini azaltabilirsiniz.
- Daha sonra deney için bazı hedefler tanımlayacaksınız. Bu, ölçmek istediğimiz deneyin sonucudur. Farklı uygulama içi mesajlarımızın, restoran yorumu bırakan kullanıcılar üzerindeki etkisini görmek istediğimizden, bunu önceki bölümde tanımladığımız
review_success
analiz etkinliği olarak ayarlayacağız. - Planlama için kampanyanın hemen başlamasına izin vereceğiz ve tetikleme koşulu olarak
click_restaurant
ayarlayacağız, böylece kullanıcılar bir restoranı tıkladıklarında iki uygulama içi mesajdan birini görecekler.
- Şimdi geriye kalan tek şey denememizi gözden geçirmek ve Denemeyi başlat düğmesine basmak. Daha sonra arkamıza yaslanıp deneyimizin verilerinin gelmesini bekleyebiliriz!
Veri toplamayı gerçek zamanlı olarak inceleyin
Artık denememize başladığımıza göre, FriendlyEats kullanıcıları bir restorana tıkladıklarında oluşturduğumuz iki uygulama içi mesajdan birini, yani temel mesajı veya değişken mesajı rastgele görecekler. Bu, kullanıcılarımızı gördükleri mesaja göre iki gruba ayıracaktır. Daha sonra her iki grubun canlı analiz verilerini karşılaştırmak için Firebase konsoluna (yine A/B Testi bölümünün altında) bakabiliriz. Kullanıcıların uygulama içi mesajları gerçekten görmesini ve buna göre hareket etmesini beklememiz gerektiğinden, verilerin gelmesi biraz zaman alacaktır. Yeterli verinin ardından sonuçlarınızın nasıl görünebileceği aşağıda açıklanmıştır:
Bu durumda, varyant taban çizgisine göre önemli ölçüde iyileştirildi; bu nedenle, daha sonra kuponu içeren uygulama içi mesajı tüm kullanıcılara sunacak olan varyantı kullanıma sunmayı seçebildik.
8. Tebrikler
Tebrikler, ilk uygulama içi mesajlaşma denemenizi başarıyla oluşturup çalıştırdınız. Artık kendi uygulamanızda bir deneme çalıştırabilir ve sonuçları, uygulama içi mesajlaşma kampanyalarınızı daha etkili hale getirmek için kullanabilirsiniz.
Sıradaki ne?
Bu codelab'lerden bazılarına göz atın...
daha fazla okuma
Firebase Uygulama İçi Mesajlaşma ve Firebase A/B Testi ile neler yapılabileceğinin henüz yüzeyini çizdik. Daha fazlasını öğrenmek istiyorsanız bunlara göz atın...
- A/B Testi ile Mesajlaşma Denemeleri Oluşturun
- A/B Testi ile Uzaktan Yapılandırma Denemeleri Oluşturun
- Firebase Uygulama İçi Mesajlaşmanın Kullanım Durumlarını Keşfedin
- Firebase Uygulama İçi Mesajlaşma mesajlarınızı özelleştirin