React Native — Expo Firebase Kurulumu

Herkese Selamlar 👨‍💻

Bu yazımda, Expo’yu Firebase ile birlikte nasıl kullanabiliriz konusunu inceleyeceğiz. İlk olarak Firebase üzerinden proje oluşturmayı ve ardından da projemize firebase bağlantısını nasıl yaparız konularını anlatmaya çalışacağım. Şimdiden keyifli okumalar 🙂

İlk olarak Firebase üzerinden projemizi oluşturalım. Firebase sign up / login oluyoruz ve ardından console ekranını açıyoruz. Açılan ekranda bulunan Add Project yazan alana tıklıyoruz. Açılan pencerede bizden proje ismi girmemizi istiyor, kendimiz için uygun olan proje ismini giriyoruz. Proje ismimizi girdikten sonra Continue butonuna tıklıyoruz. İkinci adımda bize, projemize Google Analytics’i bağlayıp bağlamak istemediğinizi soruyor, istediğimiz seçeneği seçebiliriz. Eğer eklemek istersek bizden üçüncü adımda Google Analytics account’u oluşturmamızı istiyor, eğer seçmezsek projemizi oluşturuyor.

Projemizi oluşturduktan sonra, uygulamamız için Firebase ekliyoruz.

Web’i seçerek (ok ile gösterdiğim) ilerliyoruz. İlk adımda, app için bir isim giriyoruz, “Also set up Firebase Hosting for this app.” yazan alanı tikliyoruz ve Register app butonuna basıyoruz.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "xxxxx",
  projectId: "mobileexample",
  storageBucket: "mobileexample.appspot.com",
  messagingSenderId: "xxxxxxxxx",
  appId: "xxxxxxxxx:web:c5e8b0fed9cfd7bf10c8ef",
  measurementId: "G-XXXXXXX"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

İkinci adımda, yukarıda örneğini verdiğim gibi, config bilgilerimizi veriyor. “firebaseConfig” bilgilerimizi kopyalayalım, projemize Firebase bağlantı ayarlarımızı yaparken lazım olacak. Diğer adımları Next diyerek ilerletebiliriz.

Şimdi de projemize Firebase kurulumunu yapalım. Projemize, npm install firebase ya da yarn add firebase komutlarını çalıştırarak firebase’i kuruyoruz.

Proje dosyamızın içerisine firebase.tsx (sizin yazdığınız dosya tipi neyse .tsx yerine onu kullanın ) diye bir dosya oluşturuyoruz.

import * as firebase from "firebase/app";
import * as firebaseAuth from "firebase/auth";
import { getFirestore,setLogLevel } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: "xxxxx",
  projectId: "mobileexample",
  storageBucket: "mobileexample.appspot.com",
  messagingSenderId: "xxxxxxxxx",
  appId: "xxxxxxxxx:web:c5e8b0fed9cfd7bf10c8ef",
  measurementId: "G-XXXXXXX"
};

// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
const auth = firebaseAuth.getAuth();
const firestore = getFirestore();
const storage = getStorage();

export { auth, firestore, storage };

Yukarıda verdiğim örnekteki gibi firebase.tsx’in içini dolduruyoruz. Ben örnek projemde Authentication, Storage ve Firestore Database’i kullananıyorum. Bundan dolayı, firebase, auth, firestore ve storage’ı config dosyama import ediyorum. Daha önce kopyaladığım `firebaseConfig` bilgilerimi yapıştırıyorum ve ardından firebase’e initializeApp yöntemi ile config’imi ekliyorum ve bağlantımı sağlamış oluyorum. Ardından da projemde kullanmak istediğim auth, firestore ve storage’ı export ediyorum. En son olarak exportlarımı yapıyorum.

import { collection, getDocs, getFirestore } from "firebase/firestore";

async function getUsers() {
    const firestore = getFirestore();
    const usersRef = collection(firestore, "users");
    const querySnapshot = await getDocs(usersRef);

    querySnapshot.forEach((doc) => {
      console.log("User => ", doc.data());
    });
  }

import { collection, getDocs } from "firebase/firestore";
import { firestore } from "../../firebase";

async function getUsers() {
    const usersRef = collection(firestore, "users");
    const querySnapshot = await getDocs(usersRef);

    querySnapshot.forEach((doc) => {
      console.log("User => ", doc.data());
    });
  }

Yukarıda users storage getAll işlemi için iki farklı firestore import örneği verdim. Firebase yapılarını (auth, firestore, storage vb.) kullanmak için ben kendi setting dosyamdan export edip, kullanmak istediğim yerlerde import edip kullandım. İstersek initializeApp yaptıktan sonra herhangi bir export yapmadan, kullanmak istediğimiz yerde Firebase’den import edip kullanabiliriz.

Yazımı okuduğunuz için teşekkür ederim, umarım sizin için yararlı olmuştur 🙂

İyi günler, iyi çalışmalar 🤖