Firebase Realtime Database Bir React Uygulamasına Nasıl Bağlanır?

Bu makalede size, klasör yapısı ile birlikte Firebase’i bir React uygulamasına bağlamanın yolunu göstereceğim.

“Dünyanın hayalperestlere ihtiyacı var ve dünyanın yapanlara ihtiyacı var. Ama her şeyden önce, dünyanın yapan hayalperestlere ihtiyacı var.” (Sarah Ban Breathnach)

Size Firebase’de nasıl proje açılacağını veya sıfırdan nasıl React uygulaması oluşturulacağını anlatmıyorum. Ama paniklemeyin, önemli kısımlardan bahsedeceğim.

Hadi başlayalım!

İlk olarak Firebase’i kuracağız, Firebase’e giriş yapıp yeni bir proje ekledikten sonra, bir projeye genel bakış (project overview) sayfası görünecektir. Şimdi yolculuğumuz başlıyor. ‘Project overview’ yazısının yanındaki ayarlar ikonuna, ardından proje ayarlarına (project settings) tıklayın.

Uygulamalarınız (your apps) bölümünü görene kadar sayfayı aşağı kaydırın. </> (web uygulaması) seçeneğini seçin. Bir isim verin ve ‘Register App’ (Uygulamayı Kaydet) butonuna tıklayın. (Firebase Hosting istiyorsanız o seçeneği seçin. Bu bugünkü konumuz değil ama bir gün olacak.)

Firebase sizin için config (yapılandırma) değişkeninizi oluşturacaktır.

React projesine geri dönün ve Firebase SDK’yı projeye yükleyin.

npm install firebase

‘src’ adında yeni bir klasör oluşturun. Bu klasör, klasör yapısını düzenli ve temiz tutmak için ana klasörümüz olacak. Ve src içinde ‘utils’ adında başka bir klasör oluşturun. Bu klasörün içinde, şimdi oluşturmanız gereken ‘firebase.js’ gibi yardımcı fonksiyonlarımızı tutacağız.

Başka bir makalede React klasör yapısından genişçe bahsedeceğim. Yaklaşan makaleleri kaçırmamak için beni takip edin.

Firebase tarafından oluşturulan bu config kodunu kopyalayıp firebase.js dosyasına yapıştırın. Ve import (içe aktarma) bölümüne aşağıdaki satırı ekleyin. Bu satırı ekliyoruz çünkü bu dosyada veritabanını alacağız ve export edeceğiz.

import { getDatabase } from "firebase/database";

O halde bir sonraki hamlemiz; uygulamayı config değişkeni ile başlattıktan sonra, veritabanını başlatmak ve export etmek;

export const db = getDatabase(app);

Tüm bunlardan sonra, firebase dosyanız şuna benzer görünecektir:

Çevre değişkenlerini (environment variables) kullanmanızı ve anahtarlarınızı gizli tutmanızı şiddetle öneririm. Bu linke göz atın.

İşte bu kadar basit. Artık her şey hazır. Şimdi bunu uygulamamızın her yerinde kullanabiliriz!

Veri çekmeniz gereken dosyada, bu yardımcı yapıyı kullanabilirsiniz. Bu util yapısını ve bazı firebase metotlarını import edin, ardından firebase’den gelen reference metodu ile birlikte kullanın;

import { db } from "../../utils/firebase";
import { onValue, ref } from "firebase/database";

Sonuç olarak kodunuz şuna benzer bir şey olacaktır;

Not: Performans değerlendirmeleri nedeniyle key’lerde (anahtarlarda) index kullanmayın. Resmi dokümantasyonu kontrol edin.

Not: useEffect’in cleanup (temizleme) bölümünde onValue metodunu kullanmamızın nedeni, bu metodun bir unsubscribe (abonelikten çıkma) metodu olmasıdır; yani iş bittikten sonra bağlantı kapatılacaktır ve bu sayede uygulamamızda bellek sızıntılarını (memory leaks) önlemiş oluruz.

Umarım keyif almışsınızdır!

Yazar: Mahir Uslu

Tags