React ile birlikte Firebase Kullanımı
Merhaba, bu yazıda sana React ile birlikte nasıl Firebase kullanabileceğinden bahsedeceğim ve bunu basit bir uygulama üzerinden anlatacağım.
Öncelikle Firebase nedir yada neden Firebase kullanmalısın sorularına cevap vermek gerekir.
Firebase, backend bilmeden backend oluşturmana olanak sağlayabilen Google tarafından mobil ve web uygulamaları oluşturmak için geliştirilmiş bir platformdur.
Eğer ki bir frontend developer isen yada bu yolda ilerleyen bir yazılımcıysan api bulmanın ne kadar zor olduğunu biliyorsundur. İşte bu noktada yardımımıza Firebase yetişiyor.
Projeyi oluşturmaya başlayalım öyleyse. Proje ihtiyaçları:
- Node (v20.11.0)
- npm (v10.2.4)
$ npm create vite@latestBu komut sonrası aşağıdaki gibi bir görüntü ile karşılacaksın. Proje ismi seçtikten sonra framework tercihimizi React’den yana kullandık ve variant olarak TypeScript seçtik ama istersen sen JavaScript seçebilirsin.
Sonra ilgili dizine gidip npm install ardından npm run dev diyelim. Artık React projemiz http://localhost:5173/ adresinde ayakta.
Firebase için henüz üyeliğin yoksa ücretsiz bir şekilde üyelik oluşturabilirsin bu adresten. Üyelik işlemlerini tamamladıktan sonra Go to console butonuna tıklamalısın.
Açılan ekranda Add project kısmına tıklamalısın.
Sonrasında ise projene bir isim verip Continue butonuna tıklamalısın.
İkinci adımda analytics isteyip istemediğimizi soruyor, ben şuanda istemediğim için disable ettim, devamında Create project butonuna basalım.
Projemiz oluşturuluyor biraz bekleyelim.
Projemiz oluştu, Continue butonuna basalım.
Önümüze bu şekilde bir ekran çıkacak, burada biz bir web uygulaması oluşturmak istediğimiz için web butonuna tıklayalım.
Uygulaman için bir nickname vermeni istiyor ve hoisting için kullanmak ister misin diye soruyor ben şuan için istemiyorum ve Register app butonuna tıklıyorum.
Sonrasında seni aşağıdaki gibi bir görüntü karşılayacak. İlk başta bizden firebase’i bağlımlılıklara eklememizi istiyor. `npm i firebase` diyelim komut satırında.
Ardından src dizini altında lib adı altında bir klasör oluşturalım ve içerisine firebase.ts dosyası oluşturalım ve içerisine bize vermiş olduğu kodu olduğu gibi kopyalayıp yapıştıralım ve önceki ekran görüntüsünde gördüğümüz Continue to console butonuna basalım.
Not: normalde apiKey gibi değerler gizli olmalı ve bunları .env dosyası üzerinden yönetmelisin ama ben sana doğrudan anlatabilmek için bu şekilde yaptım.
Buraya kadar yaptıklarınla React projesi oluşturdun vite ile ve firebase’i projene başarılı bir şekilde ekledin. Şimdi sırada Authentication ve Cloud Firestore ürünlerini projemize eklemek kaldı. İlk adım Authentication ilgili card bileşenine tıklayalım.
Karşımıza çıkan ekrandan Get started butonuna basalım.
Karşına çıkacak ekranda authentication için seçenekler göreceksin. İster email/password, istersen Google yada hepsini seçebilirsin ama şuanda biz Google ile devam edeceğiz, Google’a tıklayalım.
Sonrasında açılan ekrandan Save butonuna basalım.
Başarılı bir şekilde Google aktifleştirildi, şimdi React projemize entegre etmeliyiz.
Öncelikle src/lib/firebase.ts dosyasından auth’u ve provider’ı export edelim.
Şimdi de src dizini altında context diye bir klasör oluşturalım ve içerisine AuthContext.ts dosyası oluşturalım.
Yeri gelmişken src/lib/local-storage.ts dosyasını da paylaşmış olayım.
Şimdi bu kodları auth-card.tsx componentinde kullanmaya başlayalım. Stillendirme için mui kullandım ben sen tailwind yada herhangi bir ui kütüphanesi kullanabilirsin yada vanilla CSS yazabilirsin.
Burada öncelikle kullanıcı girişi yapılıp yapılmadığını kontrol ediyoruz. Giriş yaptıysa daha önce ana sayfaya yönlendiriyoruz Navigate yardımıyla, eğer giriş yapmadıysa ilgili componentleri gösteriyoruz.
Şuan için müthiş bir ui oluşturmaktansa konuya odaklanıp sade bir iş çıkardık. Aynı zamanda routing işlemleri için react-router-dom kütüphanesini kullanacağız. İlgili kütüphaneyi yüklemek için terminaline aşağıdaki satırı yazıp enter tuşuna basmalısın.
$ npm i react-router-domŞimdilik src/main.tsx, src/App.tsx ve src/router.tsx dosyalarımız aşağıdaki şekilde görünmekte.
Unutmadan protected-layout.tsx dosyası ise aşağıdaki gibidir.
Şimdi login butonuna bastığında herşeyi başarılı bir şekilde yaptıysan eğer bir pop-up çıkacak, istediğin google hesabını seçip login işlemini gerçekleştir.
Seçimi yaptıktan sonra seni ana sayfaya yönlendirecek, artık kullanıcı girişlerini yönetebiliyorsun 🥳
Yine istersen logout butonu ile çıkış yapabilirsin.
Giriş çıkış işlemlerini tamamladığımıza göre artık todo ekleme, silme, değiştirme gibi işlemlere hazırlanalım. Firebase console ekranına gidelim ve Cloud Firestore ürününe tıklayalım.
Ardından aşağıda görmüş olduğun ekran çıkacak karşına buradan da Create database butonuna tıklamalısın.
Sonrasında ekranında bir pop-up belirecek burada location olarak sana en yakın adresi seçtikten sonra Next butonuna tıklamalısın.
Sonrasında karşına güvenlik ile ilgili sorular gelecek ilk adımda test mode seçip Create butonuna basalım.
Biraz geçtikten sonra kullanıma hazır, artık kod alanından devam edebiliriz.
İlk adım olarak lib/firebase.ts dosyasından db’yi export edelim.
Şimdilik aşağıdaki şekilde basit bir ui oluşturdum. Şimdi arayüze firestore’u entegre edeceğiz.
todo-page.tsx dosyamız aşağıdaki gibidir. Öncelikle localstorage üzerinde tutmuş olduğumuz user bilgilerini aldık satır 27'de.
Satır 33'de ise bir adet firestore referansı oluşturduk, buradaki amacımız todos koleksiyonlarına referans verebilmek.
Ardından useEffect içerisinde satır 36'de bir query oluşturduk, query’ye ilk argüman olarak referansı verdik ikinci argüman ise sadece aktif kullanıcıların todolarını getirmek istediğimiz için bir where sorgusu aslında.
Query hazır olduğuna göre artık todoları çekmeye hazırız, satır 40'da birden fazla dökümanı almak istediğimiz için getDocs fonksiyonunu kullandık ve argüman olarak query’yi verdik. Bu bize bir adet snapshot döndü. Satır 41'de boş bir array oluşturduk ve hemen altında querySnapshot dizisini forEach ile loop’a aldık. Type safe bir yapı istediğimiz için (en azından ben istiyorum sen JavaScript ile ileryeceksen todoSchema’ya ihtiyacın yok) doc.data() parse ediyoruz zod yardımıyla. Daha sonra ise oluşturmuş olduğumuz boş arrayi doldurup setTodos ile güncelliyoruz state değerimizi.
Todo tipi ve todoSchema ise aşağıdaki gibidir.
Artık todo eklemeye hazırız, todo ekleyebilmek için setDoc fonksiyonunu kullanacağız. Satır 50'de de görebileceğin üzere her todo bir doc demek bizim için, setDoc fonksiyonuna ilk argüman olarak doc dizinini belirtiyoruz. Biz todo’ları todos koleksiyonu altında olmasını istediğimiz için `doc(db, “todos”, id)` olarak tanımladık. İkincü argüman ise dökümanın datası olması gerekiyor bu yüzden newTodo değerini geçtik.
İşlem bu kadardı, gerçekleştiğini görmek için bir ekran kaydı aldım.
Listeleme ve ekleme işlemlerini yaptık şimdi sırada ise düzenleme ve silme işlemleri. İlk olarak düzenleme işleminden başlayalım.
Satır 22'de ilgili dökümanın referansını tanımlayalım. Satır 60'da gördüğün üzere bir dökümanı güncellemek için updateDoc fonksiyonunu kullanıyoruz. Bu fonksiyona ilk argüman olarak dökümanın referansını verirken, ikinci argüman olarak güncellenmiş datayı vereceğiz.
Şimdi sırada silme işlemi, silme işlemi için deleteDoc fonksiyonunu kullanacağız. Satır 64'de görebileceğiz üzere tek bir argüman alıyor o da dökümanın referansı.
Özet geçecek olursak eğer; döküman eklemek için setDoc, dökümanları listelemek için getDocs, editlemek için updateDoc ve son olarak silmek için deleteDoc fonksiyonlarını kullandık.
Yazının içeriği burada son buluyor, anlamadığın bir yer varsa yada bir sorun varsa eğer bana twitter’dan ulaşabilirsin.
Kodlara ise buradan erişebilirsin.
Yazıyı beğendiysen eğer en az 50 clap bekliyorum, sonraki yazıda görüşmek üzere 👋
