React ve Firebase ile Tam Y\u0131\u011f\u0131n Uygulama Geli\u015ftirme: Kimlik Do\u011frulama, Firestore, Depolama, Fonksiyonlar ve Vertex AI<\/p>\n
Merhaba! Bu makalede, React ve Firebase kullanarak tam y\u0131\u011f\u0131n bir uygulama nas\u0131l geli\u015ftirilece\u011fini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Firebase’in sundu\u011fu g\u00fc\u00e7l\u00fc ara\u00e7lar sayesinde, kimlik do\u011frulama, veritaban\u0131 y\u00f6netimi, dosya depolama, sunucu taraf\u0131 i\u015flevleri ve hatta makine \u00f6\u011frenmesi gibi \u00f6zellikleri kolayca entegre edebilece\u011fiz. Bu, uygulaman\u0131z\u0131 daha h\u0131zl\u0131 ve etkili bir \u015fekilde olu\u015fturman\u0131za olanak tan\u0131r. <\/p>\n
\u00d6ncelikle, yeni bir React projesi olu\u015fturmam\u0131z gerekiyor. Bunun i\u00e7in Create React App<\/a> arac\u0131n\u0131 kullanaca\u011f\u0131z. Terminalde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak projemizi ba\u015flatabiliriz:<\/p>\n “`bash Proje olu\u015fturulduktan sonra, Firebase projemizi olu\u015fturmam\u0131z gerekiyor. Firebase Console<\/a> \u00fczerinden yeni bir proje ba\u015flatabilirsiniz.<\/p>\n Uygulamam\u0131za kullan\u0131c\u0131 kimlik do\u011frulama \u00f6zelli\u011fini eklemek i\u00e7in Firebase Authentication’\u0131 kullanaca\u011f\u0131z. Bu sayede, kullan\u0131c\u0131lar\u0131n uygulaman\u0131za giri\u015f yapmalar\u0131n\u0131 ve hesaplar\u0131n\u0131 y\u00f6netmelerini sa\u011flayabiliriz. Firebase Authentication<\/a> dok\u00fcmantasyonu arac\u0131l\u0131\u011f\u0131yla daha detayl\u0131 bilgi edinebilirsiniz.<\/p>\n \u00d6ncelikle, projemizi Firebase’e ba\u011flamam\u0131z gerekiyor. Firebase Console’da projeniz se\u00e7iliyken, “Web” sekmesini se\u00e7in ve daha sonra “\u00d6n U\u00e7 Yap\u0131land\u0131rma” b\u00f6l\u00fcm\u00fcnden gerekli kod par\u00e7ac\u0131\u011f\u0131n\u0131 kopyalay\u0131n. Bu kod par\u00e7ac\u0131\u011f\u0131, React uygulamam\u0131z\u0131n Firebase ile ileti\u015fim kurmas\u0131n\u0131 sa\u011flayacakt\u0131r.<\/p>\n \u015eimdi, kullan\u0131c\u0131lar\u0131n giri\u015f ve \u00e7\u0131k\u0131\u015f yapabilmeleri i\u00e7in React uygulamam\u0131za gerekli bile\u015fenleri ekleyece\u011fiz. Firebase Auth’\u0131 kullanarak kullan\u0131c\u0131 giri\u015fi ve kayd\u0131 kolayca entegre edilebilir. <\/p>\n “`javascript \/\/ Firebase yap\u0131land\u0131rma bilgilerini i\u00e7e aktar const app = initializeApp(firebaseConfig); const handleSignUp = async (email, password) => { const handleSignIn = async (email, password) => { const handleSignOut = async () => { \/\/ Kullan\u0131c\u0131 giri\u015fi ve kay\u0131t i\u015flemleri i\u00e7in gerekli UI bile\u015fenlerini ekleyin Firebase Firestore, uygulamam\u0131z i\u00e7in ger\u00e7ek zamanl\u0131 bir veritaban\u0131 sa\u011flar. Bu sayede, verileri kolayca saklayabilir, g\u00fcncelleyebilir ve sorgulayabiliriz. Firestore Dok\u00fcmantasyonu<\/a> ile daha detayl\u0131 bilgi edinebilirsiniz. <\/p>\n Firestore’u kullanmak i\u00e7in \u00f6ncelikle Firebase projemize Firestore’u etkinle\u015ftirmemiz gerekiyor. Firebase Console’da projeniz se\u00e7iliyken, “Firestore Database” sekmesini se\u00e7in ve “Ba\u015flat” d\u00fc\u011fmesine t\u0131klay\u0131n. <\/p>\n Firestore’a verileri eklemek ve okumak i\u00e7in, Firebase Firestore SDK’s\u0131n\u0131<\/a> kullanaca\u011f\u0131z. \u00d6rnek olarak, a\u015fa\u011f\u0131daki kod, Firestore’a bir belge eklemeyi g\u00f6stermektedir:<\/p>\n “`javascript const db = getFirestore(app);<\/p>\n const addTodo = async (text) => { \/\/ Kullan\u0131c\u0131 ara y\u00fcz\u00fcnde bir g\u00f6rev eklemek i\u00e7in bir buton ekleyin Firebase Storage, dosya ve medya dosyalar\u0131n\u0131 depolamam\u0131z i\u00e7in kullan\u0131\u015fl\u0131 bir ara\u00e7 sa\u011flar. Bu sayede, kullan\u0131c\u0131lar\u0131n uygulaman\u0131za resim, video veya di\u011fer dosyalar\u0131 y\u00fcklemelerini sa\u011flayabilirsiniz. Firebase Storage Dok\u00fcmantasyonu<\/a> ile daha detayl\u0131 bilgi edinebilirsiniz.<\/p>\n Firebase Storage’\u0131 kullanmaya ba\u015flamak i\u00e7in \u00f6ncelikle Firebase Console’da Storage’\u0131 etkinle\u015ftirmemiz gerekiyor. Projeniz se\u00e7iliyken, “Storage” sekmesini se\u00e7in ve “Ba\u015flat” d\u00fc\u011fmesine t\u0131klay\u0131n. <\/p>\n Firebase Storage’a dosya y\u00fcklemek i\u00e7in, Firebase Storage SDK’s\u0131n\u0131 kullanaca\u011f\u0131z. A\u015fa\u011f\u0131daki \u00f6rnek, bir dosyay\u0131 Storage’a y\u00fcklemeyi g\u00f6stermektedir:<\/p>\n “`javascript const storage = getStorage(app);<\/p>\n const uploadFile = async (file) => { \/\/ Kullan\u0131c\u0131 ara y\u00fcz\u00fcnde bir dosya y\u00fckleme butonu ekleyin Firebase Functions, sunucu taraf\u0131 kodu \u00e7al\u0131\u015ft\u0131rmam\u0131z i\u00e7in bize olanak tan\u0131r. Bu sayede, verileri i\u015fleyebilir, API’lerle etkile\u015fime girebilir ve daha karma\u015f\u0131k i\u015flemleri ger\u00e7ekle\u015ftirebiliriz. Firebase Functions Dok\u00fcmantasyonu<\/a> ile daha detayl\u0131 bilgi edinebilirsiniz.<\/p>\n Firebase Functions’\u0131 kullanmaya ba\u015flamak i\u00e7in, Firebase Console’da Functions’\u0131 etkinle\u015ftirmemiz gerekiyor. Projeniz se\u00e7iliyken, “Functions” sekmesini se\u00e7in ve “Ba\u015flat” d\u00fc\u011fmesine t\u0131klay\u0131n. <\/p>\n Firebase Functions’\u0131 kullanarak bir fonksiyon olu\u015fturabiliriz. \u00d6rne\u011fin, a\u015fa\u011f\u0131daki kod par\u00e7as\u0131, bir HTTP iste\u011fi ald\u0131\u011f\u0131nda bir mesaj d\u00f6nd\u00fcren bir fonksiyonu g\u00f6stermektedir:<\/p>\n “`javascript const functions = require(‘firebase-functions’); exports.helloWorld = functions.https.onRequest((request, response) => { Bu fonksiyon, “functions:deploy” komutu ile Firebase’e da\u011f\u0131t\u0131labilir.<\/p>\n Google Cloud’un Vertex AI platformu, makine \u00f6\u011frenimi modelleri olu\u015fturmak, e\u011fitmek ve da\u011f\u0131tmak i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. Vertex AI Dok\u00fcmantasyonu<\/a> ile daha detayl\u0131 bilgi edinebilirsiniz.<\/p>\n Vertex AI’y\u0131 kullanarak, uygulaman\u0131za ak\u0131ll\u0131 \u00f6zellikler ekleyebilirsiniz. \u00d6rne\u011fin, bir resim s\u0131n\u0131fland\u0131rma modeli e\u011fiterek, kullan\u0131c\u0131lar\u0131n y\u00fckledikleri resimleri otomatik olarak s\u0131n\u0131fland\u0131rabilirsiniz. <\/p>\n Firebase projenizi Google Cloud projesine ba\u011flad\u0131ktan sonra, Vertex AI’y\u0131 kullanmaya ba\u015flayabilirsiniz. Vertex AI ba\u015flang\u0131\u00e7 rehberine<\/a> g\u00f6z atabilirsiniz.<\/p>\n Bu makalede, React ve Firebase kullanarak tam y\u0131\u011f\u0131n bir uygulama geli\u015ftirme yolculu\u011funa \u00e7\u0131kt\u0131k. Firebase’in sundu\u011fu g\u00fc\u00e7l\u00fc ara\u00e7lar sayesinde, kimlik do\u011frulama, veritaban\u0131 y\u00f6netimi, dosya depolama, sunucu taraf\u0131 i\u015flevleri ve hatta makine \u00f6\u011frenmesi gibi \u00f6zellikleri kolayca entegre edebildik. Bu, uygulaman\u0131z\u0131 daha h\u0131zl\u0131 ve etkili bir \u015fekilde olu\u015fturman\u0131za olanak tan\u0131r. <\/p>\n
\nnpx create-react-app my-app
\ncd my-app
\n“`<\/p>\nKimlik Do\u011frulama<\/h2>\n
\nimport { initializeApp } from ‘firebase\/app’;
\nimport { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from ‘firebase\/auth’;<\/p>\n
\nimport { firebaseConfig } from ‘.\/firebaseConfig’;<\/p>\n
\nconst auth = getAuth(app);<\/p>\n
\n try {
\n await createUserWithEmailAndPassword(auth, email, password);
\n \/\/ Ba\u015far\u0131l\u0131 giri\u015f sonras\u0131 i\u015flemler
\n } catch (error) {
\n \/\/ Hata i\u015flemi
\n }
\n};<\/p>\n
\n try {
\n await signInWithEmailAndPassword(auth, email, password);
\n \/\/ Ba\u015far\u0131l\u0131 giri\u015f sonras\u0131 i\u015flemler
\n } catch (error) {
\n \/\/ Hata i\u015flemi
\n }
\n};<\/p>\n
\n try {
\n await signOut(auth);
\n \/\/ Ba\u015far\u0131l\u0131 \u00e7\u0131k\u0131\u015f sonras\u0131 i\u015flemler
\n } catch (error) {
\n \/\/ Hata i\u015flemi
\n }
\n};<\/p>\n
\n\/\/ …
\n“`<\/p>\nFirestore<\/h2>\n
\nimport { getFirestore, collection, addDoc } from ‘firebase\/firestore’;<\/p>\n
\n try {
\n const docRef = await addDoc(collection(db, ‘todos’), {
\n text: text,
\n completed: false,
\n });
\n console.log(‘Belge eklendi:’, docRef.id);
\n } catch (error) {
\n console.error(‘Belge ekleme hatas\u0131:’, error);
\n }
\n};<\/p>\n
\n\/\/ …
\n“`<\/p>\nDepolama<\/h2>\n
\nimport { getStorage, ref, uploadBytes } from ‘firebase\/storage’;<\/p>\n
\n try {
\n const storageRef = ref(storage, `images\/${file.name}`);
\n await uploadBytes(storageRef, file);
\n console.log(‘Dosya ba\u015far\u0131yla y\u00fcklendi!’);
\n } catch (error) {
\n console.error(‘Dosya y\u00fckleme hatas\u0131:’, error);
\n }
\n};<\/p>\n
\n\/\/ …
\n“`<\/p>\nFonksiyonlar<\/h2>\n
\n\/\/ index.js<\/p>\n
\nconst admin = require(‘firebase-admin’);
\nadmin.initializeApp();<\/p>\n
\n response.send(‘Merhaba, D\u00fcnya!’);
\n});
\n“`<\/p>\nVertex AI<\/h2>\n
Sonu\u00e7<\/h2>\n