Flutter’da Firebase Performance Monitoring

Merhaba değerli okurlar, bu yazımda sizlere Flutter’da Firebase Performance Monitoring konusundan bahsediyor olacağım.

Uygulama geliştiricileri olarak, uygulamaların “hızlı” ve “sorunsuz” çalışması herkesin ortak derdi. Flutter tarafında debug kısmında Developer Tools ile çeşitli ölçümler yapıp uygulama performansına dair çıktılar alabilsek bile production yani üretimde, yayında olan bir uygulamanın performansını ölçmek için monitoring uygulamalarına ihtiyacımız oluyor.

Neden Sadece DevTools Yetmez? Production Monitoring’in Önemi

Flutter geliştiricileri olarak Flutter DevTools’a aşinayız. CPU, bellek ve render performansını geliştirme aşamasında analiz etmek için muhteşem bir araçtır. Ancak DevTools, buzdağının sadece görünen kısmıdır.

• Geliştirme Ortamı vs. Gerçek Dünya: Sizin son model telefonunuz ve hızlı Wi-Fi ağınız, kullanıcılarınızın tamamını temsil etmez. Kullanıcılarınız farklı marka/model cihazlar, işletim sistemi sürümleri ve ağ koşullarına sahiptir.
• Sorunların Tespiti: Bir performans sorunu yalnızca belirli bir ülke veya belirli bir cihaz modelinde ortaya çıkıyor olabilir. Bunu kendi başınıza tespit etmeniz neredeyse imkansızdır.

İşte burada Firebase Performance Monitoring devreye girer. Uygulamanız canlıya çıktıktan sonra, kullanıcı cihazlarından anonim performans verileri toplayarak size geniş bir perspektif sunar.

Firebase Performance Monitoring Neleri İzler?

1. Otomatik İzler (Automatic Traces):

• Uygulama Başlatma Süresi: Kullanıcının uygulama ikonuna dokunmasından itibaren kullanılabilir hale gelene kadar geçen süre.
• Ekran Render Süreleri: Otomatik olarak ekranları izler ve yavaş render edilen kareleri (slow frames) ve donan kareleri (frozen frames) raporlar. Bu, UI takılmalarını (“jank”) tespit etmek için kritiktir.
• Ağ İstekleri: http veya dio gibi popüler paketlerle yapılan tüm ağ isteklerinin yanıt süresini, başarı oranını ve veri boyutunu otomatik olarak kaydeder.

2. Özel İzler (Custom Traces):

• Kodunuzdaki belirli bir bloğun (örneğin bir resim işleme, veritabanı sorgusu veya karmaşık bir algoritma) ne kadar sürede tamamlandığını ölçmenizi sağlar.

Bu temel bilgilerden sonra örnek bir uygulama yapıp, Flutter tarafında nasıl kullanabileceğimizi görelim.

Proje Kurulumu ve Firebase Entegrasyonu

Adım 1: Flutter Projesi ve Firebase Kurulumu

Öncelikle yeni bir Flutter projesi oluşturun ve Firebase projenize bağlayın. En kolay yöntem FlutterFire CLI kullanmaktır. Firebase CLI hakkında daha fazla bilgi almak için ilgili makalemi buradan okuyabilirsiniz

# Henüz kurmadıysanız FlutterFire CLI'ı kurun
dart pub global activate flutterfire_cli

# Yeni bir Flutter projesi oluşturun
flutter create firebase_perf_ornek
cd firebase_perf_ornek

# FlutterFire ile projenizi Firebase'e bağlayın
# Bu komut sizi yönlendirecek ve gerekli konfigürasyon dosyalarını oluşturacaktır.
flutterfire configure

Adım 2: Gerekli Paketlerin Eklenmesi

pubspec.yaml dosyanıza firebase_performance paketini ekleyin veya terminalden şu komutu çalıştırın:

flutter pub add firebase_core
flutter pub add firebase_performance

Adım 3: Firebase’i Başlatma

lib/main.dart dosyanızda, main fonksiyonunu async yaparak Firebase’i uygulamanız başlatılırken initialize edin.

// lib/main.dart
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart'; // flutterfire configure tarafından oluşturuldu

Future<void> main() async {
  // Flutter binding'lerinin hazır olduğundan emin ol
  WidgetsFlutterBinding.ensureInitialized();
  // Firebase'i başlat
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

// Geri kalan MyApp ve diğer widget'lar...

Artık projemiz Firebase’den performans verisi almaya hazır hale geldi ama neyin verisini alacak dediğinizi duyar gibiyim. Hemen örnek bir yapı kuruyorum sizler için.

Bu yapıda bilerek yavaş çalışan bir özellik var. Uygulamamız internetten bir grup fotoğraf çekecek ve her birine “ağır” bir filtre uygulayacak. Bu filtre işleminin ne kadar sürdüğünü ölçeceğiz. lib/main.dart dosyasınza aşağıdaki kodu yapıştırıp sizlerde deneyebilirsiniz.

// lib/main.dart
import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_performance/firebase_performance.dart'; // Paketi import et
import 'firebase_options.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Performans Test Uygulaması',
      theme: ThemeData(primarySwatch: Colors.indigo),
      home: const SlowGalleryPage(),
    );
  }
}

class SlowGalleryPage extends StatefulWidget {
  const SlowGalleryPage({super.key});

  @override
  State<SlowGalleryPage> createState() => _SlowGalleryPageState();
}

class _SlowGalleryPageState extends State<SlowGalleryPage> {
  final List<String> _imageUrls = List.generate(
      20, (index) => 'https://picsum.photos/seed/${index + 1}/300/300');

  // Performans takibi için Firebase Performance instance'ı oluşturalım
  final FirebasePerformance _performance = FirebasePerformance.instance;

  Future<void> _loadImageWithSlowFilter(String url) async {
    // 1. Özel bir "Trace" (İz) başlatıyoruz.
    // Bu, Firebase konsolunda görünecek olan isimdir.
    final Trace trace = _performance.newTrace('image_load_and_filter');
    await trace.start();

    // Simüle edilmiş ağır bir işlem
    // Rastgele 500ms ile 1500ms arası bir gecikme ekleyelim
    final processingTime = Random().nextInt(1000) + 2500;
    await Future.delayed(Duration(milliseconds: processingTime));

    // 2. Özel bir "Metric" (Metrik) ekleyebiliriz.
    // Bu, trace içindeki belirli bir sayıyı takip etmemizi sağlar.
    // Örneğin, filtreleme süresini kaydedelim.
    trace.setMetric('processing_time_ms', processingTime.toDouble());

    // 3. İz'i durduruyoruz.
    // Bu, başlangıç ile bitiş arasındaki süreyi Firebase'e gönderir.
    await trace.stop();

    // Not: Bu örnekte gerçek bir ağ isteği yapmıyoruz,
    // sadece yavaş işlemi simüle ediyoruz.
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Ağır Filtreli Galeri'),
      ),
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 4,
          mainAxisSpacing: 4,
        ),
        itemCount: _imageUrls.length,
        itemBuilder: (context, index) {
          return FutureBuilder(
            // Her bir resim için yavaş işlemi başlatalım
            future: _loadImageWithSlowFilter(_imageUrls[index]),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const Center(child: CircularProgressIndicator());
              }
              if (snapshot.hasError) {
                return const Icon(Icons.error);
              }
              // İşlem bitince resmi göster
              return Image.network(_imageUrls[index], fit: BoxFit.cover);
            },
          );
        },
      ),
    );
  }
}

Kodlarda ne yaptığımızıda şöyle izah edeyim;
FirebasePerformance Instance: Takip yapabilmek için FirebasePerformance.instance’ı oluşturduk.

• _loadImageWithSlowFilter Fonksiyonu: Asıl sihrin gerçekleştiği yer burası.
• _performance.newTrace(‘image_load_and_filter’): Firebase’e “image_load_and_filter” adında yeni bir ölçüm başlatacağımızı söylüyoruz. Bu isim, Firebase konsolunda görünecek anahtar kelimedir.
• trace.start(): Kronometreyi başlatır.
• Future.delayed(…): Gerçek bir resim filtresi gibi davranması için kodun çalışmasını bilerek yavaşlatıyoruz. Bu bizim performans “darboğazımız”.
• trace.setMetric(…): Bu çok güçlü bir özelliktir. Trace’in içine sayısal bir veri (metrik) eklememizi sağlar. Burada, simüle ettiğimiz işlem süresini kaydediyoruz. Böylece “Bu işlem ortalama ne kadar sürüyor?” sorusunun yanında “İşlem süresi dağılımı nasıl?” sorusunu da yanıtlayabiliriz.
• trace.stop(): Kronometreyi durdurur ve toplanan veriyi (süre, metrikler) Firebase’e gönderilmek üzere sıraya alır.

Flutter tarafındaki işimiz bu kadar. Uygulamayı çalıştırıp kapatıp tekrar açıp işlemler yapın. Bir kaç kez derleyin.

Verileri Firebase Konsolunda Analiz Etme

Uygulamayı derleyip birkaç kez çalıştırdıktan sonra (farklı ekranlara girip çıkın, uygulamayı açıp kapatın), verilerin Firebase konsoluna yansımasını bekleme zamanı.

Önemli Not: Performans verilerinin konsolda görünmesi birkaç saat sürebilir. Sabırlı olun.

1. Firebase projenizi açın.
2. Sol menüden Run > Performance bölümüne gidin.
3. Dashboard (Kontrol Paneli) ekranı sizi karşılayacaktır. Biraz aşağı kaydırarak Custom traces (Özel izler) tablosunu bulun.

Bu tabloda, kodda tanımladığımız image_load_and_filter adlı izimizi göreceksiniz. Yanında ortalama süresi (Duration) gibi özet bilgiler yer alır. Üzerine tıklayarak daha fazla detaylı bilgi alabilirsiniz.

Değerli arkadaşlar bir makalenin daha sonuna geldik. Umarım bu makale ilgilisi ve meraklısı için faydalı olmuştur. Sonraki makalelerde görüşmek üzere..

Github: www.github.com/abdullah017
Linkedin: www.linkedin.com/in/abdullahtas
Stackoverflow: https://stackoverflow.com/users/13807726/abdullah-t