Setup Flutter and Firebase Analytics

ขั้นตอนการเซ็ตอัพโปรเจ็ค Flutter กับ Firebase Analytics

Flutter 2.10.4 | Dart 2.16.2 | DevTools 2.9.2

Setup Flutter and Firebase

1) ใช้โปรเจ็ค flutter_firebase ต่อเนื่องจาก บทความ Setup Flutter and Firebase https://dev.to/codebangkok/setup-flutter-and-firebase-3718

Setup Flutter and Firebase Analytics

1) เปิด Terminal เข้าไปที่ flutter_firebase ไดเร็กทอรี่ แล้วติดตั้ง firebase_analytics package (ดูรายละเอียดได้ที่ https://pub.dev/packages/firebase_analytics)

flutter pub add firebase_analytics

2) ถ้าไปเปิดไฟล์ pubspec.yaml ดูก็จะเห็น firebase_analytics ที่ dependencies

3) สร้างไฟล์ analytics.dart ไว้ใน lib ไดเร็กทอรี่ แล้วสร้างคลาส AnalyticsService แบบ Singleton เก็บไว้ใช้งาน

import 'package:firebase_analytics/firebase_analytics.dart';

class AnalyticsService {
  final _analytics = FirebaseAnalytics.instance;
  AnalyticsService._();
  static final _service = AnalyticsService._();
  factory AnalyticsService() => _service;
  static FirebaseAnalytics get instance => _service._analytics;
  static FirebaseAnalyticsObserver get observer => FirebaseAnalyticsObserver(analytics: _service._analytics);
}

ตัวอย่างการใช้งาน AnalyticsService

1) Log หน้า Screen Name ให้ Firebase Analytics ด้วยคำสั่ง setCurrentScreen

AnalyticsService.observer.analytics.setCurrentScreen(screenName: "main");

2) Log หน้า Event ให้ Firebase Analytics ด้วยคำสั่ง logEvent

AnalyticsService.observer.analytics.logEvent(name: "counter");

iOS App and Firebase Analytics

1) เปิด iOS Emulator ทดลอง iOS App ด้วย flutter run ที่ iOS App กดปุ่ม + 2 ครั้ง

2) เข้าเว็บ Firebase Console https://console.firebase.google.com คลิ้กที่ Realtime ใน Analytics เมนู จะเห็นว่า Log ที่เราส่งมาจาก App ก็จะส่งขึ้นมาที่ Firebase แบบ Near Realtime ทันที

• 1 users
• main screen name
• counter event 2 ครั้ง

Android App and Firebase Analytics

1) เปิด Terminal เข้าไปที่ flutter_firebase ไดเร็กทอรี่ แล้วรันคำสั่ง adb shell setprop ไปที่ applicationId ของ Android App (ดู applicationId ได้จาก android/app/build.gradle)

adb shell setprop debug.firebase.analytics.app com.example.flutter_firebase

2) เข้าเว็บ Firebase Console https://console.firebase.google.com คลิ้กที่ DebugView ใน Analytics เมนู

3) เปิด Android Emulator ทดลอง Android App ด้วย flutter run ที่ Android App กดปุ่ม + 2 ครั้ง แล้วกลับไปดูหน้าเว็บ Firebase Console หน้า DebugView จะเห็นว่า Log ที่เราส่งมาจาก App ก็จะส่งขึ้นมาที่ Firebase แบบ Near Realtime ทันที (เฉพาะ Android ที่ Debug)

4) คลิ้กที่ Realtime จะเห็นข้อมูลรวมทั้งหมด

5) คลิ๊กที่ Dashboard จะเห็นข้อมูลด้วยว่ามี iOS และ Android App version 1.0.0 เข้ามาใช้

ติดตามผลงานได้ที่

• Page: https://fb.com/CodeBangkok​
• Group: https://fb.com/groups/msdevth​
• Blog: https://dev.to/codebangkok
• YouTube: [https://youtube.com/CodeBangkok]