React ve Firebase ile Tam Yığın Uygulama Geliştirme: Kimlik Doğrulama, Firestore, Depolama, Fonksiyonlar ve Vertex AI

React ve Firebase ile Tam Yığın Uygulama Geliştirme: Kimlik Doğrulama, Firestore, Depolama, Fonksiyonlar ve Vertex AI

Merhaba! Bu makalede, React ve Firebase kullanarak tam yığın bir uygulama nasıl geliştirileceğini adım adım ele alacağız. Firebase’in sunduğu güçlü araçlar sayesinde, kimlik doğrulama, veritabanı yönetimi, dosya depolama, sunucu tarafı işlevleri ve hatta makine öğrenmesi gibi özellikleri kolayca entegre edebileceğiz. Bu, uygulamanızı daha hızlı ve etkili bir şekilde oluşturmanıza olanak tanır.

Projenin Kurulumu

Öncelikle, yeni bir React projesi oluşturmamız gerekiyor. Bunun için Create React App aracını kullanacağız. Terminalde aşağıdaki komutu çalıştırarak projemizi başlatabiliriz:

“`bash
npx create-react-app my-app
cd my-app
“`

Proje oluşturulduktan sonra, Firebase projemizi oluşturmamız gerekiyor. Firebase Console üzerinden yeni bir proje başlatabilirsiniz.

Kimlik Doğrulama

Uygulamamıza kullanıcı kimlik doğrulama özelliğini eklemek için Firebase Authentication’ı kullanacağız. Bu sayede, kullanıcıların uygulamanıza giriş yapmalarını ve hesaplarını yönetmelerini sağlayabiliriz. Firebase Authentication dokümantasyonu aracılığıyla daha detaylı bilgi edinebilirsiniz.

Öncelikle, projemizi Firebase’e bağlamamız gerekiyor. Firebase Console’da projeniz seçiliyken, “Web” sekmesini seçin ve daha sonra “Ön Uç Yapılandırma” bölümünden gerekli kod parçacığını kopyalayın. Bu kod parçacığı, React uygulamamızın Firebase ile iletişim kurmasını sağlayacaktır.

Şimdi, kullanıcıların giriş ve çıkış yapabilmeleri için React uygulamamıza gerekli bileşenleri ekleyeceğiz. Firebase Auth’ı kullanarak kullanıcı girişi ve kaydı kolayca entegre edilebilir.

“`javascript
import { initializeApp } from ‘firebase/app’;
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from ‘firebase/auth’;

// Firebase yapılandırma bilgilerini içe aktar
import { firebaseConfig } from ‘./firebaseConfig’;

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const handleSignUp = async (email, password) => {
try {
await createUserWithEmailAndPassword(auth, email, password);
// Başarılı giriş sonrası işlemler
} catch (error) {
// Hata işlemi
}
};

const handleSignIn = async (email, password) => {
try {
await signInWithEmailAndPassword(auth, email, password);
// Başarılı giriş sonrası işlemler
} catch (error) {
// Hata işlemi
}
};

const handleSignOut = async () => {
try {
await signOut(auth);
// Başarılı çıkış sonrası işlemler
} catch (error) {
// Hata işlemi
}
};

// Kullanıcı girişi ve kayıt işlemleri için gerekli UI bileşenlerini ekleyin
// …
“`

Firestore

Firebase Firestore, uygulamamız için gerçek zamanlı bir veritabanı sağlar. Bu sayede, verileri kolayca saklayabilir, güncelleyebilir ve sorgulayabiliriz. Firestore Dokümantasyonu ile daha detaylı bilgi edinebilirsiniz.

Firestore’u kullanmak için öncelikle Firebase projemize Firestore’u etkinleştirmemiz gerekiyor. Firebase Console’da projeniz seçiliyken, “Firestore Database” sekmesini seçin ve “Başlat” düğmesine tıklayın.

Firestore’a verileri eklemek ve okumak için, Firebase Firestore SDK’sını kullanacağız. Örnek olarak, aşağıdaki kod, Firestore’a bir belge eklemeyi göstermektedir:

“`javascript
import { getFirestore, collection, addDoc } from ‘firebase/firestore’;

const db = getFirestore(app);

const addTodo = async (text) => {
try {
const docRef = await addDoc(collection(db, ‘todos’), {
text: text,
completed: false,
});
console.log(‘Belge eklendi:’, docRef.id);
} catch (error) {
console.error(‘Belge ekleme hatası:’, error);
}
};

// Kullanıcı ara yüzünde bir görev eklemek için bir buton ekleyin
// …
“`

Depolama

Firebase Storage, dosya ve medya dosyalarını depolamamız için kullanışlı bir araç sağlar. Bu sayede, kullanıcıların uygulamanıza resim, video veya diğer dosyaları yüklemelerini sağlayabilirsiniz. Firebase Storage Dokümantasyonu ile daha detaylı bilgi edinebilirsiniz.

Firebase Storage’ı kullanmaya başlamak için öncelikle Firebase Console’da Storage’ı etkinleştirmemiz gerekiyor. Projeniz seçiliyken, “Storage” sekmesini seçin ve “Başlat” düğmesine tıklayın.

Firebase Storage’a dosya yüklemek için, Firebase Storage SDK’sını kullanacağız. Aşağıdaki örnek, bir dosyayı Storage’a yüklemeyi göstermektedir:

“`javascript
import { getStorage, ref, uploadBytes } from ‘firebase/storage’;

const storage = getStorage(app);

const uploadFile = async (file) => {
try {
const storageRef = ref(storage, `images/${file.name}`);
await uploadBytes(storageRef, file);
console.log(‘Dosya başarıyla yüklendi!’);
} catch (error) {
console.error(‘Dosya yükleme hatası:’, error);
}
};

// Kullanıcı ara yüzünde bir dosya yükleme butonu ekleyin
// …
“`

Fonksiyonlar

Firebase Functions, sunucu tarafı kodu çalıştırmamız için bize olanak tanır. Bu sayede, verileri işleyebilir, API’lerle etkileşime girebilir ve daha karmaşık işlemleri gerçekleştirebiliriz. Firebase Functions Dokümantasyonu ile daha detaylı bilgi edinebilirsiniz.

Firebase Functions’ı kullanmaya başlamak için, Firebase Console’da Functions’ı etkinleştirmemiz gerekiyor. Projeniz seçiliyken, “Functions” sekmesini seçin ve “Başlat” düğmesine tıklayın.

Firebase Functions’ı kullanarak bir fonksiyon oluşturabiliriz. Örneğin, aşağıdaki kod parçası, bir HTTP isteği aldığında bir mesaj döndüren bir fonksiyonu göstermektedir:

“`javascript
// index.js

const functions = require(‘firebase-functions’);
const admin = require(‘firebase-admin’);
admin.initializeApp();

exports.helloWorld = functions.https.onRequest((request, response) => {
response.send(‘Merhaba, Dünya!’);
});
“`

Bu fonksiyon, “functions:deploy” komutu ile Firebase’e dağıtılabilir.

Vertex AI

Google Cloud’un Vertex AI platformu, makine öğrenimi modelleri oluşturmak, eğitmek ve dağıtmak için güçlü araçlar sunar. Vertex AI Dokümantasyonu ile daha detaylı bilgi edinebilirsiniz.

Vertex AI’yı kullanarak, uygulamanıza akıllı özellikler ekleyebilirsiniz. Örneğin, bir resim sınıflandırma modeli eğiterek, kullanıcıların yükledikleri resimleri otomatik olarak sınıflandırabilirsiniz.

Firebase projenizi Google Cloud projesine bağladıktan sonra, Vertex AI’yı kullanmaya başlayabilirsiniz. Vertex AI başlangıç rehberine göz atabilirsiniz.

Sonuç

Bu makalede, React ve Firebase kullanarak tam yığın bir uygulama geliştirme yolculuğuna çıktık. Firebase’in sunduğu güçlü araçlar sayesinde, kimlik doğrulama, veritabanı yönetimi, dosya depolama, sunucu tarafı işlevleri ve hatta makine öğrenmesi gibi özellikleri kolayca entegre edebildik. Bu, uygulamanızı daha hızlı ve etkili bir şekilde oluşturmanıza olanak tanır.

Firebase, web ve mobil uygulamalar geliştirmek için harika bir platformdur. Fatih Soysal blogumda, Firebase ile ilgili daha fazla makale ve eğitim içerikleri bulabilirsiniz.

#Etiketler

#React #Firebase #Full-Stack #Authentication #Firestore #Storage #Functions #VertexAI #GoogleCloud #WebDevelopment #MobileDevelopment