2022 Stack Overflow anketine göre, geliştiricilerin yüzde 21,14’ü Firebase’i kullanarak onu dördüncü en popüler bulut platformu yapıyor. Arka ucu sorunsuz bir şekilde entegre etmek için gelişen bir teknolojidir.

Firebase ile tek bir satır arka uç kodu yazmadan tam yığın bir uygulama geliştirebilirsiniz. React.js uygulamanızı bugün Firebase’e nasıl bağlayacağınızı ve hareket halindeyken nasıl oluşturacağınızı öğrenin.

Firebase Paketini yükleyin

React uygulamanızı oluşturduktan sonra , dizini projenizin kök klasörüne değiştirin ve aşağıdakileri çalıştırarak Firebase paketini yükleyin:

npm install firebase

React Uygulamanızı Firebase Projesine Ekleyin

Bir sonraki adım, bir Firebase projesi oluşturmak ve bunu React uygulamanıza bağlamaktır. Firebase konsoluna gidin :

• Yeni bir Firebase projesi başlatmak için Proje ekle’ye tıklayın .
• Firebase konsol ana sayfası
• Bir proje adı girin ve ardından Devam’ı tıklayın .
• Firebase proje oluşturma adımları
• Sonraki sayfada Devam’ı tıklayın .
• Açılır menüden Firebase hesabınızı seçin veya henüz bir hesabınız yoksa Yeni bir hesap oluştur’u tıklayın.
• Son olarak, Proje oluştur ‘u tıklayın .
• Firebase proje oluşturma adımı finali
• İşlem tamamlandığında Devam’ı tıklayın .
• Ardından, web için Firebase’i kurmak için aşağıdaki sayfanın sol üst kısmına doğru Web simgesini ( </> ) tıklayın.
• Firebase konsolu uygulama web seçeneği ekle
• Sağlanan alana uygulamanız için bir takma ad girin. Ardından Uygulamayı kaydet’i tıklayın .
• Firebase uygulaması kayıt aşaması
• Oluşturulan kodu kopyalayın ve bir sonraki adım için saklayın (bir sonraki bölümde ele alınacaktır).
• Konsola devam et’i tıklayın .
• Aşağıdaki sayfada birçok seçenek var. Bu durumda yalnızca bir veritabanı kurmanız gerektiğinden, aşağı kaydırın ve Cloud Firestore’u seçin.
• Firebase depolama seçenekleri
• Ardından, Veritabanı oluştur’u tıklayın.
• Veritabanı oluşturma sayfası Firestore
• İleri’yi tıklayın . Açılır menüden tercih ettiğiniz Firestore konumunu seçin.
• Ardından , bir Firestore veritabanı oluşturmak için Etkinleştir’e tıklayın.
• Firebase veritabanı oluşturma menüsü

Firebase’i React Uygulamanızda Başlatın

Proje src dizininizin içinde yeni bir klasör oluşturun. Buna firebase_setup diyebilirsiniz. Ardından, bu klasörün içinde bir firebase.js dosyası oluşturun. Ardından, daha önce oluşturulan kodu bu dosyaya yapıştırın.

Şimdilik, yapılandırma nesnesini (firebaseConfig) bir .env dosyası içinde saklayabilirsiniz. Ancak üretimde React sırlarını maskelemek için daha güvenli bir yol kullanmayı düşünün . Bir .env dosyasında sakladığınız veriler, uygulama derlemenize kolayca sızabilir.

.env seçeneğini kullanıyorsanız, .env içindeki her değişken adına “REACT_APP” ekleyin . Aksi takdirde, uygulamanız dizeleri okumaz. Ayrıca, .env dosyasındaki ayrıntıyı her değiştirdiğinizde React sunucunuzu yeniden başlatın .

Örneğin, uygulamanızın Firebase gizli anahtarını .env dosyasına girmek için:

REACT_APP_apiKey = yourFirebaseAccessKey

Böylece, oluşturulan kodu aşağıdaki gibi ince ayar yapabilirsiniz:

import { initializeApp } from “firebase/app”;

import { getFirestore } from “@firebase/firestore”

const firebaseConfig = {

  apiKey: process.env.REACT_APP_apiKey,

  authDomain: process.env.REACT_APP_authDomain,

  projectId: process.env.REACT_APP_projectId,

  storageBucket: process.env.REACT_APP_storageBucket,

  messagingSenderId: process.env.REACT_APP_messagingSenderId,

  appId: process.env.REACT_APP_appId,

  measurementId: process.env.REACT_APP_measurementId

};

const app = initializeApp(firebaseConfig);

export const firestore = getFirestore(app)

Firebase Bağlantınızı Test Edin

Firestore’a yapay veriler göndererek bağlantıyı test edebilirsiniz. Projenizin src dizini içinde bir tanıtıcı klasörü oluşturarak başlayın. Bu dosyanın içinde bir gönderme işleyicisi oluşturun. Örneğin , bu handlesubmit.js’yi arayabilirsiniz :

import { addDoc, collection } from “@firebase/firestore”

import { firestore } from “../firebase_setup/firebase”

const handleSubmit = (testdata) => {

    const ref = collection(firestore, “test_data”)  // Firebase creates this automatically

    let data = {

        testData: testdata

    }

    try {

        addDoc(ref, data)

    } catch(err) {

        console.log(err)

    }

}

export default handleSubmit

Sonra App.js içinde :

import ‘./App.css’;

import handleSubmit from ‘./handles/handlesubmit’;

import { useRef } from ‘react’;

function App() {

  const dataRef = useRef()

  const submithandler = (e) => {

    e.preventDefault()

    handleSubmit(dataRef.current.value)

    dataRef.current.value = “”

  }

  return (

    <div className=”App”>

      <form onSubmit={submithandler}>

        <input type= “text” ref={dataRef} />

        <button type = “submit”>Save</button>

      </form>

    </div>

  );

}

export default App;

React uygulamanızı çalıştırın ve form aracılığıyla veri göndermeyi deneyin. Koleksiyonunuzda gönderilen bilgileri görmek için Firebase veritabanı konsolunu yenileyin. Temel bilgiler hazır olduğunda, Firebase’in en iyi nasıl kullanılacağını görmek için yapabileceği diğer birçok şeyi keşfedebilirsiniz .

Firebase ve React ile Hareket Halinde Oluşturun

Firebase, uygulamanızı etkili bir şekilde ölçeklendirmenize olanak tanıyan çok yönlü bir hizmet olarak arka uç çözümüdür. React uygulamanızı bağladıktan sonra, web sitenizi beğeninize göre oluşturmak için birçok özelliğinden yararlanabilirsiniz.

Örneğin, Firebase kimlik doğrulama araç seti, keşfetmek isteyebileceğiniz özelliklerden biridir.