Setup Flutter and Firebase Analytics
Tags: flutter, firebase
Published: 2022-03-26 16:34:46

ขั้นตอนการเซ็ตอัพโปรเจ็ค Flutter กับ Firebase Analytics
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhtxuqj412728snht3xu.png)
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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jean1uzg629jnmmurci.jpg)

## Setup Flutter and Firebase Analytics
1) เปิด Terminal เข้าไปที่ **flutter_firebase** ไดเร็กทอรี่ แล้วติดตั้ง **firebase_analytics** package (ดูรายละเอียดได้ที่ https://pub.dev/packages/firebase_analytics)
```
flutter pub add firebase_analytics
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ptok147lb9qo33aor3b.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9mwc04s0yllpnegz1js.png)

3) สร้างไฟล์ **analytics.dart** ไว้ใน **lib** ไดเร็กทอรี่ แล้วสร้างคลาส **AnalyticsService** แบบ Singleton เก็บไว้ใช้งาน
```dart
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);
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/672mfeup0kc8xigb6lwx.png)

## ตัวอย่างการใช้งาน AnalyticsService
1) Log หน้า Screen Name ให้ Firebase Analytics ด้วยคำสั่ง setCurrentScreen
```dart
AnalyticsService.observer.analytics.setCurrentScreen(screenName: "main");
```
2) Log หน้า Event ให้ Firebase Analytics ด้วยคำสั่ง logEvent
```dart
AnalyticsService.observer.analytics.logEvent(name: "counter");
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db7ejru53fko7vb4im76.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08txrb80jiosj3xtlfsj.png) 

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvw0ic1pl8i7ip0a5bvf.png)

## 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** เมนู 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9n2f10mspwm4fc450te.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9i6dr2i6k8to1d2bmlqs.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nj0ez73qvekq9k8dko1w.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l07anjhyit27c4h6tpoo.png)

####ติดตามผลงานได้ที่
* **Page:** [https://fb.com/CodeBangkok​](https://fb.com/CodeBangkok​)
* **Group:** [https://fb.com/groups/msdevth​](https://fb.com/groups/msdevth​)
* **Blog:** [https://dev.to/codebangkok](https://dev.to/codebangkok)
* **YouTube:** [https://youtube.com/CodeBangkok]