Expo ile Firebase Entegrasyonu

Önceki yazımda React Native tarafında Firebase ile Push Notification gönderiminden bahsetmiştim. Bu yazımda son zamanlarda oldukça ünlenen Expo ile Firebase entegrasyonuna değineceğim.

Öncelikle projemizi oluşturalım:

yarn create expo test-firebase

RnFirebase entegrasyonu Expo Go uygulamasında çalışmayacağı için projeyi dev client olarak build etmemiz gerekiyor.

npx expo run:ios

Burada sizden bundle identifier isteniyor. com.example.myapp gibi set edebilirsiniz. Android için run:android olarak çıktı alabilirsiniz.

Gerekli native bileşenler yüklendikten sonra aşağıdaki dosyalar ekleniyor/değiştiriliyor:

• ios dizini: Native ios dizini ekleniyor
• metro.config.js: Metro yapılandırmaları için konfigürasyon dosyası.
• index.js dosyası: Normalde AppEntry.js ancak metro bundler index.js üzerinden çalıştığı için bir başlangıç dosyası gerekiyor
• app.json: bundleIdentifier ekleniyor
• package.json: expo-splash-screen ekleniyor. scripts kısmındaki start, android, ios komutları run: prefix’i ile değiştiriliyor

Şimdi Firebase app ve crashlytics’i ekleyelim

yarn add @react-native-firebase/app @react-native-firebase/crashlytics

Devamında Firebase console üzerinden Android ve iOS projelerini oluşturup google-services.json ve GoogleService-Info.plist dosyalarını indirelim.

Not: Android için SHA1 key isteyecek. Bunun için aşağıdaki komutla android dizinindeki sha1 key’ini alabilirsiniz.

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android |pcregrep -o1 "SHA1: (.+)"

Daha sonra indirdiğiniz dosyaları şuradaki gibi ana dizine ekleyin:

Şimdi app.json dosyası içine geldikten sonra ios ve android kısımlarına bu dosyaları ekleyelim ve plugins kısmını aşağıdaki gibi oluşturalım

{
  "expo": {
    "android": {
      "googleServicesFile": "./google-services.json"
    },
    "ios": {
      "googleServicesFile": "./GoogleService-Info.plist"
    },
   "plugins": [
      "@react-native-firebase/app",
      "@react-native-firebase/crashlytics",
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ],
  }
}

Şimdi /ios tarafında podfile’ın değiştirilmesi için expo-build-properties plugin’ini ekleyelim

npx expo install expo-build-properties

Şimdi plugin’lerin aktif edilmesi için prebuild komutunu çalıştıralım:

npx expo prebuild --clean

Bu komut, google services dosyalarını android ve ios dizinindeki ilgili yerlere kopyaladıktan sonra Firebase’i projeye otomatik olarak ekleyecektir.

Komut çalıştıktan sonraki değişiklikler aşağıdaki görseldeki gibidir:

Şimdi crashlytics paketinin kullanımına bakalım

Crashlytics entegrasyonu

Crashlytics debug modda kapalı olarak geliyor. Aktif hale getirmek için proje kök dizininde firebase.json adında dosya oluşturup aşağıdaki içeriği ekleyebilirsiniz:

{
  "react-native": {
    "crashlytics_debug_enabled": true
  }
}

Devamında tekrar prebuild edelim:

npx expo prebuild --clean

Şu an crash göndermek için hazırız. App.js dosyasını aşağıdaki gibi değiştirip buton ekleyelim:

import React from "react";
import { Button, SafeAreaView } from "react-native";
import crashlytics from "@react-native-firebase/crashlytics";

export default function App() {
  return (
    <SafeAreaView>
      <Button title="Crash Test" onPress={() => crashlytics.crash()} />
    </SafeAreaView>
  );
}

Şimdi yarn ios komutuyla projeyi ayağa kaldırıp butona basalım ve uygulamayı kapa-aç yapalım. (Crashlytics raporları crash olduktan sonra uygulama ilk açıldığında gönderildiği için bunu yapıyoruz)

Crashlytics sekmesinden kontrol ettiğinizde, hatanın aşağıdaki gibi yansıdığını görebilirsiniz:

Sonuç olarak

Bu yazımızda Expo Firebase entegrasyonu ve Crashlytics örneğine değindik. Expo plugin’ler aracılığıyla native tarafta kodların otomatik olarak eklenmesi oldukça basitleştiriyor (Hiç XCode açmamıza gerek kalmadı). Firebase entegrasyonu da böylece bir kabus olmaktan çıkmıştır diyebiliriz.

Projenin son halini buradan edinebilirsiniz: https://github.com/ozcanzaferayan/expo-firebase-integration

Bu yazımda eksik/hatalı olduğunu düşündüğünüz kısımlar varsa bana ulaşabilirsiniz. Sonraki yazımda tekrar görüşmek üzere…