NuxtJS ile Temel Firebase Kullanımı

4 min readApr 17, 2021

Selamlar, bu yazıda elimden geldiğince NuxtJS yazarken kullandığımız temel Firebase kullanımlarını örneklerle anlatacağım.

Not: Bu yazıda sadece Auth ve Firestore servisi anlatılmaktadır.

Bölüm 0: Projenin Oluşturulması ve Konfigüre Edilmesi

yarn create nuxt-app nuxtjs-firebase

Projeyi oluşturduktan sonra gerekli firebase paketlerini projemize indiriyoruz.

yarn add firebase
yarn add @nuxtjs/firebase

Gerekli paketleri indirdiğimize göre şimdi Firebase gidebilir ve yeni bir proje oluşturabiliriz.

Eğer önceden giriş yaptıysanız sağ üst kısımdaki Go to console butonuna tıklayın.

Karşınıza projelerinizin olduğu kısım gelecek. Buradan Add project ile yeni bir proje oluşturuyoruz.

Yeni projemizin ismini giriyoruz ve Continue butonuna tıklıyoruz. Sonraki sayfadaki Enable Google Analytics for this project opsiyonunu kapatıyorum. (siz kullanabilirsiniz)

Her şey yüklendikten sonra Firebase Yönetim Paneline ulaşacağız.

Buradan Get started by adding Firebase to your app yazısının altından soldan 3. ikonu (</>) seçiyoruz.

Burada web uygulamamızı kaydetmek için bizden isim istiyor.

Web uygulamamız için gerekli olan Firebase konfigürasyon bize verdi. Bu kodu kopyalayıp projemize dönüyoruz.

Projemizdeki nuxt.config.js dosyasını açıyoruz.

Modules içine kopyaladığımız konfigürasyonu yerleştiriyoruz. Services kısmı ise kullanacağımız servisleri ekliyoruz. Bu yazıda sadece Firestore ve Auth servislerini kullanacağız. Daha fazla servisler icin.

Bölüm 1: Auth Servisinin Kullanımı

Bu bölümde uygulamamıza kayıt ve giriş işlemleri için Auth servisini kullanacağız. Öncelikle Firebase içinde bazı ayarları yapılandırıyoruz.

Get started butonuna tıklayıp ayarlamızı yapıyoruz.

Email/Password kısmını etkinleştiriyoruz. Projemize geçebiliriz.

Pages klasörü içine giris-yap.vue, kayit-ol.vue adında iki dosya oluşturuyoruz.

Kayıt olmak için bu kodu kullanacağız:

async kayıtOl() {
  try { 
    await this.$fire.auth.createUserWithEmailAndPassword(
      'tatarselcuk27@gmail.com', 'asdasdasd')
  } catch (e) { 
    alert(e) 
  }
}

Ben kendi projemde biraz düzenledim ve bu hale getirdim.

Bu sayede her kayıt olduğumda kayıt olan kullanıları Firebasede görebiliyorum.

Giriş yapmak içinse bu kodu kullanıyoruz:

async girisYap() {
  try { 
    await this.$fire.auth.signInWithEmailAndPassword(
      'tatarselcuk27@gmail.com', 'asdasdasd')
  } catch (e) { 
    alert(e) 
  }
}

Ben tekrar biraz değişiklik yaparak bu hale getirdim.

Bölüm 2: Firestore Servisinin Kullanımı

Bu bölümde Firestore servisi kullanarak basit bir mesajımızı firestore collection içine yazdıracağız ve daha sonra bu yazdırdığımız mesajı çağıracağız. Ilk once firestore ayarlarını yapmamız gerekiyor.

Firestore Database bölümünden Create database seçeneğine tıklıyoruz.

Database oluştururken test modu ile oluşturuyorum.

Lokasyonu seçtikten sonra Start Collection seçeneğine basarak collection oluşturuyoruz.

Collection Id’ye isim verdikten sonra field ekliyoruz.

Save butonuna bastıktan sonra artık kodumuzu yazmaya hazırız.

Firestore collection içine data yazdırmak için bu kodu kullanıyoruz:

async firestoreYazdir() {
  const messageRef = this.$fire.firestore.collection('mesajlar').doc('doc-id')
  try {
    await messageRef.set({
      mesaj: 'Selam 👋'
    })
  } catch (e) {
  alert(e)
  return
  }
  alert('Basarılı 🚀')
}

Biraz kodu değiştirdim ve bu hale getirdim:

Firestore collection içine yazdırdığımız mesajı şimdi ekrana yazdıralım.

Bunun için bu kodu kullanıyoruz:

async firestoreOku() {
  const messageRef = this.$fire.firestore.collection(
    'mesajlar').doc('doc-id')
  try {
    const messageDoc = await messageRef.get()
    alert(messageDoc.data().mesaj)
  } catch (e) {
  alert(e)
  return
  }
}

Bende kendi projemde şu şekilde kullandım: