Vue.js ve Firebase Entegrasyonu Eğitimi

Eğitim Hakkında

Vue 3 Composition API ile Firebase kimlik doğrulama, Firestore ve dağıtımı uçtan uca kuran eğitim

Vue.js ve Firebase Entegrasyonu Eğitimi, Vue 3 bilen geliştiricilere sunucusuz bir arka uçla tam yığın uygulama kurmayı öğretir. Katılımcılar Firebase projesini kurar, Authentication ile e-posta ve Google girişi ekler, Firestore'da koleksiyon ve belge modelleyip CRUD işlemleri yapar ve onSnapshot ile gerçek zamanlı dinleme kurar. Eğitim Storage ile dosya yükleme, Security Rules ile yetkilendirme, Cloud Functions ve Firebase Hosting ile dağıtımı VueFire yardımıyla kapsar.

Süre ve Format

3 Gün. Her gün dört modül; kimlik doğrulamadan Firestore'a ve dağıtıma kadar gerçek bir görev yönetimi uygulaması adım adım kurulur.

Seviye

Orta Seviye — Vue 3 bilen geliştiricilere Firebase Auth, Firestore, Storage ve Hosting ile tam yığın uygulama kurmayı öğretir

Öğrenme Metodu

Canlı bir görev yönetimi uygulaması üzerinden her modülde yeni bir Firebase servisi Vue bileşenlerine gerçek kodla entegre edilir.

Neden Bu Eğitim?

🎯Sunucusuz arka uç

Ayrı bir sunucu yazmadan kimlik doğrulama, veritabanı ve depolamayı Firebase ile kurar, geliştirme süresini belirgin biçimde kısaltırsınız.

⚡Gerçek zamanlı veri

Firestore onSnapshot dinleyicileriyle veriyi anında arayüze yansıtır, canlı güncellenen ekranları ek altyapı olmadan oluşturursunuz.

🔒Güvenli yetkilendirme

Security Rules ile kullanıcı bazlı erişim tanımlar, verinizi istemci tarafında değil kuralların koruması altında güvende tutarsınız.

Anahtar Konular

vue firebase eğitimifirebase entegrasyonu kursufirestore eğitimivue 3 firebasefirebase authenticationvuefire kullanımıfirebase hosting dağıtımgerçek zamanlı uygulama vuefirebase güvenlik kurallarıvue tam yığın eğitimi

“Firebase, ön yüz geliştiriciye bir arka uç ekibi verir; bu eğitim Vue 3 ile sunucusuz, gerçek zamanlı ve güvenli uygulamayı uçtan uca kurdurur.”

Ön Koşullar

Eğitimden en iyi verimi almak için faydalı bilgi ve hazır geliştirme ortamı

1

Vue 3 temelleri

Bileşen, reaktivite ve Composition API temellerini bilmek Firebase entegrasyonunu takip etmeyi kolaylaştırır.

2

JavaScript ve async

Promise, async/await ve dizi metotlarına aşinalık Firestore çağrılarını ve dinleyicileri anlamayı sağlar.

3

Node.js ve npm

Node ve npm kurulu bir ortam, Firebase CLI ve proje bağımlılıklarını sorunsuz yönetmeyi mümkün kılar.

4

Google hesabı

Firebase konsoluna erişmek ve ücretsiz Spark planında proje açmak için bir Google hesabı gereklidir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Firebase projesini kurar, Vue uygulamasına SDK'yı bağlar, Authentication ile e-posta ve Google girişi ekler ve oturum durumunu Vue reaktivitesiyle yönetmeyi öğrenir.

Modül 1

Firebase Projesi ve SDK Kurulumu

Firebase konsolunda yeni proje ve web uygulaması açma
firebase npm paketini Vue projesine ekleme
initializeApp ile yapılandırma nesnesini başlatma
Ortam değişkenlerinde API anahtarlarını saklama
Firebase CLI kurulumu ve projeyle bağlama
Modüler v9 SDK ile tree-shaking avantajı

Modül 2

Authentication Temelleri

getAuth ile Auth örneğini oluşturma
createUserWithEmailAndPassword ile kayıt
signInWithEmailAndPassword ile oturum açma
signOut ile oturumu güvenle kapatma
Auth hata kodlarını yakalama ve gösterme
E-posta doğrulama bağlantısı gönderme

Modül 3

Sağlayıcılar ve Oturum Yönetimi

GoogleAuthProvider ile tek tıkla Google girişi
signInWithPopup ve redirect akışı farkı
onAuthStateChanged ile oturum durumunu izleme
Oturum durumunu reaktif bir composable'da tutma
Parola sıfırlama e-postası gönderme akışı
currentUser ile aktif kullanıcıya erişme

Modül 4

VueFire ile Entegrasyon

VueFire eklentisini uygulamaya tanıtma
useCurrentUser ile oturumu reaktif okuma
Oturum durumuna göre rota koruması kurma
Vue Router guard ile korumalı sayfalar
Giriş yapmamış kullanıcıyı yönlendirme
Oturum yüklenirken yükleniyor durumu gösterme

Günün hedefiKatılımcı Firestore'da koleksiyon ve belge modeller, CRUD işlemlerini uygular, sorgu ve filtreleme kurar ve onSnapshot ile veriyi arayüze gerçek zamanlı yansıtmayı öğrenir.

Modül 1

Firestore Veri Modeli

Koleksiyon ve belge mantığının kavranması
Belge alan türleri ve iç içe veri yapısı
Alt koleksiyon ile ilişkili veriyi modelleme
Gömülü veri ve referans arasında seçim
Belge kimliği üretme ve otomatik kimlik
NoSQL şema tasarımında okuma odaklı yaklaşım

Modül 2

Firestore CRUD İşlemleri

addDoc ile yeni belge oluşturma
getDoc ve getDocs ile veri okuma
setDoc ve merge ile belge yazma
updateDoc ile alanları güncelleme
deleteDoc ile belge silme işlemi
serverTimestamp ile sunucu zaman damgası

Modül 3

Sorgular ve Filtreleme

where ile koşullu sorgu oluşturma
orderBy ile sonuçları sıralama
limit ve startAfter ile sayfalama
Bileşik sorgular ve dizin gereksinimi
array-contains ile dizi alanında arama
count toplama sorgusu ile belge sayımı

Modül 4

Gerçek Zamanlı Dinleme

onSnapshot ile belgeyi canlı dinleme
Koleksiyon dinleyicisiyle liste güncelleme
Değişiklik türünü docChanges ile ayırma
Dinleyiciyi onUnmounted içinde sonlandırma
useCollection ile VueFire reaktif liste
Çevrimdışı önbellek ve yerel ön güncelleme

Günün hedefiKatılımcı Cloud Storage ile dosya yükler, Security Rules ile erişimi kısıtlar, Cloud Functions tetikleyicisi yazar ve uygulamayı Firebase Hosting ile yayına almayı öğrenir.

Modül 1

Cloud Storage ile Dosya Yönetimi

Storage örneği ve referans oluşturma
uploadBytes ile dosya yükleme işlemi
uploadBytesResumable ile ilerleme takibi
getDownloadURL ile erişim bağlantısı alma
deleteObject ile depodan dosya silme
Yüklenen görseli Firestore belgesine bağlama

Modül 2

Security Rules ile Yetkilendirme

Firestore kurallarının temel söz dizimi
request.auth ile kimliğe göre erişim
Kullanıcının yalnızca kendi verisine erişimi
resource.data ile alan bazlı doğrulama
Storage kurallarıyla dosya erişimini kısıtlama
Emulator Suite ile kuralları yerel test etme

Modül 3

Cloud Functions Temelleri

Functions projesini başlatma ve yapı
onDocumentCreated ile Firestore tetikleyici
HTTP ile çağrılabilir onCall fonksiyonu
Vue istemciden httpsCallable çağırma
Fonksiyon günlükleri ve hata ayıklama
Ortam yapılandırması ve gizli anahtarlar

Modül 4

Firebase Hosting ile Dağıtım

Vue uygulamasını üretim için derleme
firebase init hosting ile yapılandırma
SPA için yeniden yazma kuralları tanımlama
firebase deploy ile yayına alma
Önizleme kanalları ile test dağıtımı
Özel alan adı ve otomatik SSL bağlama

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Firebase kurulumu

Firebase projesini kurar, modüler v9 SDK'yı Vue 3 uygulamasına bağlar ve yapılandırmayı güvenle yönetirsiniz.

✅

Kimlik doğrulama

E-posta ve Google girişini ekler, onAuthStateChanged ile oturumu reaktif izler ve korumalı rotalar kurarsınız.

✅

Firestore modelleme

Koleksiyon, belge ve alt koleksiyonlarla NoSQL veri modeller, okuma odaklı şema tasarımını uygularsınız.

✅

CRUD ve sorgular

addDoc, updateDoc ve where sorgularıyla veri işler, orderBy ve limit ile sayfalama kurarsınız.

✅

Gerçek zamanlılık

onSnapshot dinleyicileriyle veriyi arayüze canlı yansıtır, dinleyici yaşam döngüsünü doğru yönetirsiniz.

✅

Dosya depolama

Cloud Storage ile dosya yükler, ilerleme takibi yapar ve indirme bağlantısını Firestore ile ilişkilendirirsiniz.

✅

Güvenlik kuralları

Security Rules ile kullanıcı bazlı erişim tanımlar, verinizi kurallarla koruyup emülatörle test edersiniz.

✅

Yayına alma

Cloud Functions tetikleyicisi yazar ve uygulamayı Firebase Hosting ile SPA kurallarıyla yayına alırsınız.

Kimler İçin Uygundur?

Vue 3 temellerini bilen ve ayrı bir arka uç yazmadan kimlik doğrulama
veritabanı ve dosya depolama isteyen geliştiriciler
hızlı MVP çıkaran girişimler
gerçek zamanlı uygulama kurmak isteyen ön yüz ekipleri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Vue 3 temellerini bilen ve ayrı bir arka uç yazmadan kimlik doğrulama, veritabanı ile dosya depolama isteyen geliştiriciler için uygundur. Hızlı MVP çıkaran girişimler ve gerçek zamanlı uygulama kurmak isteyen ön yüz ekipleri de hedeflenir. JavaScript ve async/await aşinalığı beklenir.

Firebase'in ücretsiz planı eğitim için yeterli mi?

Evet. Eğitim boyunca kurulan görev yönetimi uygulaması Firebase'in ücretsiz Spark planıyla rahatça geliştirilebilir. Authentication, Firestore, Storage ve Hosting temel kullanım kotaları eğitim senaryoları için yeterlidir; Cloud Functions bazı bölgelerde ödeme planı gerektirebilir ve bu durum eğitimde belirtilir.

Gerçek zamanlı veri senkronizasyonu öğretiliyor mu?

Evet, bu eğitimin merkezindedir. onSnapshot ile belge ve koleksiyon dinleyicileri kurmayı, değişiklik türlerini docChanges ile ayırmayı ve dinleyici yaşam döngüsünü Vue bileşeninde doğru yönetmeyi uygulamalı işleriz. VueFire'ın useCollection ile reaktif liste sağlaması da gösterilir.

Güvenlik kuralları ve yetkilendirme kapsanıyor mu?

Evet. Firestore ve Storage Security Rules yazmayı, request.auth ile kullanıcı bazlı erişim kısıtlamayı ve alan doğrulamayı uygulamalı ele alırız. Kuralların Firebase Emulator Suite ile yerel ortamda test edilmesi de gösterilerek güvenli bir yetkilendirme modeli kurulur.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve üç gün boyunca kurulan tam yığın Vue-Firebase uygulamasını belgeler; eğitim yüz yüze veya online verilebilir ve kurumsal gruplara özel uyarlanabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

VUE.JS VE FIREBASE ENTEGRASYONU EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Firebase Projesi ve SDK Kurulumu

Authentication Temelleri

Sağlayıcılar ve Oturum Yönetimi

VueFire ile Entegrasyon

Firestore Veri Modeli

Firestore CRUD İşlemleri

Sorgular ve Filtreleme

Gerçek Zamanlı Dinleme

Cloud Storage ile Dosya Yönetimi

Security Rules ile Yetkilendirme

Cloud Functions Temelleri

Firebase Hosting ile Dağıtım

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Vue.js ile İnteraktif Web Uygulamaları Eğitimi

Vue.js Öğrenmeye Başlangıç Eğitimi

Gelişmiş Vue.js Eğitimi

Gelişmiş Vue.js: Ölçeklenebilir Uygulamalar ve Optimizasyon Eğitimi

Javascript ve Vue.js için Başlangıç Seviye Kursu Eğitimi

Micro-Frontendleri Vue.js ile Oluşturma Eğitimi