Firebase Kullanarak Kendi Yorum Sisteminizi Nasıl Oluşturursunuz

Yayınlanan: 2022-03-10

Kısa özet ↬ Hiç blogunuz için bir yorum bölümü olmasını istediniz, ancak yüksek maliyet ve bakım çözümlerinden bunaldınız mı? Firebase kurtarıcınız olabilir. Bu kılavuzda, Firebase'in temellerini öğrenirken, Firebase ile blogunuza nasıl yorum bölümü ekleyeceğinizi öğreneceğiz.

Yorumlar bölümü, blogunuz için bir topluluk oluşturmanın harika bir yoludur. Son zamanlarda blog yazmaya başladığımda, bir yorum bölümü eklemeyi düşündüm. Ancak, kolay değildi. Disqus ve Commento gibi barındırılan yorum sistemleri kendi sorunlarıyla birlikte gelir:

Verilerinize sahipler.
Onlar özgür değil.
Onları çok fazla özelleştiremezsiniz.

Bu yüzden kendi yorum sistemimi kurmaya karar verdim. Firebase, bir arka uç sunucu çalıştırmak için mükemmel bir barındırma alternatifi gibi görünüyordu.

Her şeyden önce, kendi veritabanınıza sahip olmanın tüm avantajlarından yararlanırsınız: Verileri kontrol edersiniz ve istediğiniz gibi yapılandırabilirsiniz. İkincisi, bir arka uç sunucusu kurmanız gerekmez. Ön uçtan kolayca kontrol edebilirsiniz. Her iki dünyanın da en iyisine sahip olmak gibi: Arka uçla uğraşmadan barındırılan bir sistem.

Bu yazıda, yapacağımız şey bu. Statik bir site oluşturucu olan Gatsby ile Firebase'i nasıl kuracağımızı öğreneceğiz. Ancak ilkeler, herhangi bir statik site oluşturucuya uygulanabilir.

Hadi dalalım!

Firebase Nedir?

Firebase, uygulama geliştiriciler için veritabanı, barındırma, bulut işlevleri, kimlik doğrulama, analitik ve depolama gibi araçlar sunan bir hizmet olarak arka uçtur.

Cloud Firestore (Firebase'in veritabanı), bu proje için kullanacağımız işlevselliktir. Bu bir NoSQL veritabanıdır. Bu, satırlar, sütunlar ve tablolar içeren bir SQL veritabanı gibi yapılandırılmadığı anlamına gelir. Bunu büyük bir JSON ağacı olarak düşünebilirsiniz.

Projeye Giriş

Depoyu GitHub'dan klonlayarak veya indirerek projeyi başlatalım.

Devam ederken değişiklikleri izlemenizi kolaylaştırmak için her adım için (biri başında ve biri sonunda) iki dal oluşturdum.

Aşağıdaki komutu kullanarak projeyi çalıştıralım:

 gatsby develop

Projeyi tarayıcınızda açarsanız, temel bir blogun çıplak kemiklerini göreceksiniz.

Yorum bölümü çalışmıyor. Sadece örnek bir yorum yüklüyor ve yorumun gönderilmesi üzerine ayrıntıları konsola kaydediyor.

Ana görevimiz yorumlar bölümünün çalışmasını sağlamak.

Atlamadan sonra daha fazlası! Aşağıdan okumaya devam edin ↓

Yorumlar Bölümü Nasıl Çalışır?

Herhangi bir şey yapmadan önce, yorumlar bölümünün kodunun nasıl çalıştığını anlayalım.

Dört bileşen yorum bölümlerini yönetiyor:

blog-post.js
Comments.js
CommentForm.js
Comment.js

İlk olarak, bir gönderiye yapılan yorumları tanımlamamız gerekir. Bu, her blog yazısı için benzersiz bir kimlik oluşturarak yapılabilir veya her zaman benzersiz olan slug'u kullanabiliriz.

blog-post.js dosyası, tüm blog gönderileri için düzen bileşenidir. Bir blog gönderisinin bilgisini almak için mükemmel bir giriş noktasıdır. Bu, bir GraphQL sorgusu kullanılarak yapılır.

 export const query = graphql` query($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { html frontmatter { title } fields { slug } } } `

Onu Comments.js bileşenine göndermeden önce, Gatsby'nin sümüklü böcek eklediği sondaki eğik çizgiden ( / ) kurtulmak için substring() yöntemini kullanalım.

 const slug = post.fields.slug.substring(1, post.fields.slug.length - 1) return ( <Layout> <div className="container"> <h1>{post.frontmatter.title}</h1> <div dangerouslySetInnerHTML={{ __html: post.html }} /> <Comments comments={comments} slug={slug} /> </div> </Layout> ) }

Comments.js bileşeni, her bir yorumu eşler ve verilerini, yanıtlarla birlikte Comment.js . Bu proje için yorum sistemiyle bir seviye daha derine inmeye karar verdim.

Bileşen ayrıca, herhangi bir üst düzey yorumu yakalamak için CommentForm.js yükler.

 const Comments = ({ comments, slug }) => { return ( <div> <h2>Join the discussion</h2> <CommentForm slug={slug} /> <CommentList> {comments.length > 0 && comments .filter(comment => !comment.pId) .map(comment => { let child if (comment.id) { child = comments.find(c => comment.id === c.pId) } return ( <Comment key={comment.id} child={child} comment={comment} slug={slug} /> ) })} </CommentList> </div> ) }

Şimdi CommentForm.js . Bu dosya basittir, bir yorum formu oluşturur ve gönderimini gerçekleştirir. Gönderme yöntemi, ayrıntıları konsola kaydeder.

 const handleCommentSubmission = async e => { e. preventDefault() let comment = { name: name, content: content, pId: parentId ∣∣ null, time: new Date(), } setName("") setContent("") console.log(comment) }

Comment.js dosyasında çok şey oluyor. Daha küçük parçalara ayıralım.

İlk olarak, yorum yapan bir SingleComment bileşeni vardır.

Havalı bir avatar elde etmek için Adorable API kullanıyorum. Moment.js kitaplığı, zamanı insan tarafından okunabilir bir biçimde oluşturmak için kullanılır.

 const SingleComment = ({ comment }) => ( <div> <div className="flex-container"> <div className="flex"> <img src="https://api.adorable.io/avazars/65/[email protected]" alt="Avatar" /> </div> <div className="flex"> <p className="comment-author"> {comment.name} <span>says</span> </p> {comment.time} &&(<time>(moment(comment.time.toDate()).calendar()}</time>)} </div> </div> </p>{comment.content}</p> </div> )

Dosyada sonraki, Comment bileşenidir. Bu bileşen, kendisine herhangi bir alt yorum geçirilmişse bir alt yorum gösterir. Aksi takdirde, “Yanıtla” düğmesi veya “Yanıtı İptal Et” düğmesi tıklanarak açılıp kapatılabilen bir yanıt kutusu oluşturur.

 const Comment = ({ comment, child, slug }) => { const [showReplyBox, setShowReplyBox] = useState(false) return ( <CommentBox> <SingleComment comment={comment} /> {child && ( <CommentBox child className=comment-reply"> <SingleComment comment={child} /> </CommentBox> )} {!child && ( <div> {showReplyBox ? ( <div> <button className="btn bare" onClick={() => setShowReplyBoy(false)} > Cancel Reply </button> <CommentForm parentId={comment.id} slug={slug} /> </div> ) : ( <button className="btn bare" onClick={() => setShowReplyBox(true)}> Reply </button> )} </div> )} </div> )} </CommentBox>

Artık genel bir bakışa sahip olduğumuza göre, yorum bölümümüzü yapma adımlarından geçelim.

1. Firebase'i ekleyin

Öncelikle projemiz için Firebase'i kuralım.

Kaydolarak başlayın. Firebase'e gidin ve bir Google hesabı için kaydolun. Eğer bir tane yoksa, "Başlayın" ı tıklayın.

Yeni bir proje eklemek için “Proje Ekle”ye tıklayın. Projeniz için bir isim ekleyin ve “Proje oluştur”a tıklayın.

Bir proje oluşturduğumuzda, Cloud Firestore'u kurmamız gerekecek.

Sol taraftaki menüde “Veritabanı” seçeneğine tıklayın. "Cloud Firestore" yazan bir sayfa açıldığında, yeni bir Cloud Firestore veritabanı oluşturmak için "Veritabanı oluştur"a tıklayın.

Açılır pencere göründüğünde, “Test modunda başla” seçeneğini seçin. Ardından, size en yakın Cloud Firestore konumunu seçin.

Böyle bir sayfa gördüğünüzde, Cloud Firestore veritabanınızı başarıyla oluşturmuşsunuz demektir.

Firestore kontrol paneli — (Büyük önizleme)

Uygulamanın mantığını ayarlayarak bitirelim. Uygulamaya geri dönün ve Firebase'i yükleyin:

 yarn add firebase

Kök dizine firebase.js yeni bir dosya ekleyin. Bu içeriği içine yapıştırın:

 import firebase from "firebase/app" import "firebase/firestore" var firebaseConfig = 'yourFirebaseConfig' firebase.initializeApp(firebaseConfig) export const firestore = firebase.firestore() export default firebase

yourFirebaseConfig projeniz için olanla değiştirmeniz gerekecek. Bulmak için Firebase uygulamasında "Projeye Genel Bakış"ın yanındaki dişli simgesini tıklayın.

Bu, ayarlar sayfasını açar. Uygulamanızın alt başlığının altında, şuna benzeyen web simgesini tıklayın:

Bu bir açılır pencere açar. "Uygulama takma adı" alanına herhangi bir ad girin ve "Uygulamayı kaydet"e tıklayın. Bu, firebaseConfig nesnenizi verecektir.

 <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries --> <script> // Your web app's Firebase configuration var firebaseConfig = { ... }; // Initialize Firebase firbase.initializeApp(firebaseConfig); </script>

Yalnızca firebaseConfig nesnesinin içeriğini kopyalayın ve onu firebase.js dosyasına yapıştırın.

Firebase API Anahtarınızı Ortaya Çıkarmak Tamam mı?

Evet. Bir Google mühendisinin belirttiği gibi, API anahtarınızı açığa çıkarmak sorun değil.

API anahtarının tek amacı, projenizi Google'daki veritabanı ile tanımlamaktır. Cloud Firestore için güçlü güvenlik kuralları belirlediyseniz, birinin API anahtarınızı ele geçirmesi durumunda endişelenmenize gerek yoktur.

Son bölümde güvenlik kurallarından bahsedeceğiz.

Şimdilik Firestore'u test modunda çalıştırıyoruz, bu nedenle API anahtarını herkese açıklamamalısınız.

Firestore Nasıl Kullanılır?

Verileri iki türden birinde saklayabilirsiniz:

Toplamak
Bir koleksiyon belgeler içerir. Bir dizi belge gibidir.
belge
Bir belge, bir alan-değer çiftinde veri içerir.

Bir koleksiyonun yalnızca belgeler içerebileceğini ve diğer koleksiyonları içermeyebileceğini unutmayın. Ancak bir belge başka koleksiyonlar içerebilir.

Bu, bir koleksiyonu bir koleksiyon içinde depolamak istiyorsak, koleksiyonu bir belgede saklayacağız ve bu belgeyi aşağıdaki gibi bir koleksiyonda saklayacağız anlamına gelir:

 {collection-1}/{document}/{collection-2}

Veriler Nasıl Yapılandırılır?

Cloud Firestore, doğası gereği hiyerarşiktir, bu nedenle insanlar aşağıdaki gibi verileri depolama eğilimindedir:

 blog/{blog-post-1}/content/comments/{comment-1}

Ancak verileri bu şekilde depolamak genellikle sorunları beraberinde getirir.

Yorum almak istediğinizi söyleyin. Blog koleksiyonunun derinliklerinde saklanan yorumu aramanız gerekecek. Bu, kodunuzu daha fazla hataya açık hale getirecektir. Chris Esplin asla alt koleksiyonları kullanmamanızı önerir.

Verileri düzleştirilmiş bir nesne olarak saklamanızı tavsiye ederim:

 blog-posts/{blog-post-1} comments/{comment-1}

Bu şekilde verileri kolayca alabilir ve gönderebilirsiniz.

Firestore'dan Nasıl Veri Alınır?

Veri almak için Firebase size iki yöntem sunar:

get()
Bu, içeriği bir kez almak içindir.
onSnapshot()
Bu yöntem size veri gönderir ve aboneliğinizi iptal etmediğiniz sürece güncellemeleri göndermeye devam eder.

Firestore'a Nasıl Veri Gönderilir?

Tıpkı veri almada olduğu gibi, Firebase'de veri kaydetmenin iki yöntemi vardır:

set()
Bu, bir belgenin kimliğini belirtmek için kullanılır.
add()
Bu, otomatik kimliklere sahip belgeler oluşturmak için kullanılır.

Biliyorum, bu anlaşılması gereken çok şey oldu. Ama merak etmeyin, projeye ulaştığımızda bu kavramları tekrar gözden geçireceğiz.

2. Örnek Tarih Oluşturun

Bir sonraki adım, sorgulamamız için bazı örnek veriler oluşturmaktır. Bunu Firebase'e giderek yapalım.

Cloud Firestore'a gidin. "Bir koleksiyon başlat" ı tıklayın. “Koleksiyon Kimliği” için comments girin ve ardından “İleri”ye tıklayın.

“Belge Kimliği” için “Otomatik Kimlik”e tıklayın. Aşağıdaki verileri girin ve "Kaydet" e tıklayın.

Veri girerken, "Alanlar" ve "Türler"in yukarıdaki ekran görüntüsüyle eşleştiğinden emin olun. Ardından, "Kaydet" e tıklayın.

Firestore'da manuel olarak bu şekilde yorum eklersiniz. İşlem zahmetli görünüyor, ancak endişelenmeyin: Şu andan itibaren uygulamamız yorum eklemekle ilgilenecek.

Bu noktada veritabanımız şöyle görünür: comments/{comment} .

3. Yorum Verilerini Alın

Örnek verilerimiz sorgulamaya hazır. Blogumuz için verileri alarak başlayalım.

blog-post.js gidin ve Firestore'u yeni oluşturduğumuz Firebase dosyasından içe aktarın.

 import {firestore} from "../../firebase.js"

Sorgulamak için useEffect kancasını kullanacağız. Henüz yapmadıysanız, onu da içe aktaralım.

 useEffect(() => { firestore .collection(`comments`) .onSnapshot(snapshot => { const posts = snapshot.docs .filter(doc => doc.data().slug === slug) .map(doc => { return { id: doc.id, ...doc.data() } }) setComments(posts) }) }, [slug])

Veri almak için kullanılan yöntem onSnapshot . Bunun nedeni, durum değişikliklerini de dinlemek istememizdir. Böylece, kullanıcının tarayıcıyı yenilemesine gerek kalmadan yorumlar güncellenecektir.

Slug'u mevcut slug ile eşleşen yorumları bulmak için filter ve map yöntemlerini kullandık.

Düşünmemiz gereken son bir şey temizlik. onSnapshot güncellemeleri göndermeye devam ettiğinden, bu uygulamamızda bir bellek sızıntısına neden olabilir. Neyse ki, Firebase düzgün bir düzeltme sağlar.

 useEffect(() => { const cleanUp = firestore .doc(`comments/${slug}`) .collection("comments") .onSnapshot(snapshot => { const posts = snapshot.docs.map(doc => { return { id: doc.id, ...doc.data() } }) setComments(posts) }) return () => cleanUp() }, [slug])

İşiniz bittiğinde, değişiklikleri görmek için gatsby develop çalıştırın. Artık Firebase'den veri alan yorumlar bölümümüzü görebiliriz.

Firestore verilerini alma — (Büyük önizleme)

Yorumları depolamaya çalışalım.

4. Yorumları Sakla

Yorumları saklamak için CommentForm.js dosyasına gidin. Firestore'u da bu dosyaya aktaralım.

 import { firestore } from "../../firebase.js"

Firebase'e bir yorumu kaydetmek için add() yöntemini kullanacağız çünkü Firestore'un otomatik kimlikli belgeler oluşturmasını istiyoruz.

Bunu handleCommentSubmission yönteminde yapalım.

 firestore .collection(`comments`) .add(comment) .catch(err => { console.error('error adding comment: ', err) })

İlk olarak, yorum koleksiyonuna referansı alıyoruz ve ardından yorumu ekliyoruz. Ayrıca yorum eklerken herhangi bir hatayı yakalamak için catch yöntemini kullanıyoruz.

Bu noktada bir tarayıcı açarsanız yorumlar bölümünün çalıştığını görebilirsiniz. Yeni yorumların yanı sıra gönderi yanıtları da ekleyebiliriz. Daha da şaşırtıcı olan, her şeyin sayfayı yenilememize gerek kalmadan çalışmasıdır.

Verileri depoladığını görmek için Firestore'u da kontrol edebilirsiniz.

Firestore'da depolanan veriler — (Büyük önizleme)

Son olarak, Firebase'deki çok önemli bir şeyden bahsedelim: güvenlik kuralları.

5. Güvenlik Kurallarını Sıkılaştırın

Şimdiye kadar Cloud Firestore'u test modunda çalıştırıyorduk. Bu, URL'ye erişimi olan herkesin veritabanımıza ekleme yapabileceği ve veritabanımızı okuyabileceği anlamına gelir. Bu korkutucu.

Bununla başa çıkmak için Firebase bize güvenlik kuralları sağlıyor. Cloud Firestore'da bir veritabanı kalıbı oluşturabilir ve belirli etkinlikleri kısıtlayabiliriz.

Firebase, iki temel işleme (okuma ve yazma) ek olarak daha ayrıntılı işlemler sunar: alma, listeleme, oluşturma, güncelleme ve silme.

Bir okuma işlemi şu şekilde bölünebilir:

get
Tek bir belge alın.
list
Belgelerin veya bir koleksiyonun listesini alın.

Bir yazma işlemi şu şekilde bölünebilir:

create
Yeni bir belge oluşturun.
update
Mevcut bir belgeyi güncelleyin.
delete
Bir belgeyi silin.

Uygulamayı güvenceye almak için Cloud Firestore'a geri dönün. "Kurallar" altında şunu girin:

 service cloud.firestore { match /databases/{database}/documents { match /comments/{id=**} { allow read, create; } } }

İlk satırda, bizim durumumuzda Firestore olan hizmeti tanımlıyoruz. Sonraki satırlar, Firebase'e comments koleksiyonundaki her şeyin okunabileceğini ve oluşturulabileceğini söyler.

Bunu kullansaydık:

 allow read, write;

… bu, kullanıcıların istemediğimiz mevcut yorumları güncelleyip silebilecekleri anlamına gelir.

Firebase'in güvenlik kuralları son derece güçlüdür ve belirli verileri, etkinlikleri ve hatta kullanıcıları kısıtlamamıza olanak tanır.

Kendi Yorum Bölümünüzü Oluşturmak İçin

Tebrikler! Firebase'in gücünü gördünüz. Güvenli ve hızlı uygulamalar oluşturmak için mükemmel bir araçtır.

Süper basit bir yorum bölümü oluşturduk. Ancak başka olasılıkları keşfetmekten sizi alıkoyan hiçbir şey yok:

Profil resimleri ekleyin ve bunları Firebase için Cloud Storage'da saklayın;
Kullanıcıların bir hesap oluşturmasına izin vermek için Firebase'i kullanın ve Firebase kimlik doğrulamasını kullanarak kimliklerini doğrulayın;
Satır içi Orta-benzeri yorumlar oluşturmak için Firebase'i kullanın.

Başlamak için harika bir yol, Firestore'un belgelerine gitmek olacaktır.

Son olarak, aşağıdaki yorumlar bölümüne gidelim ve Firebase kullanarak bir yorum bölümü oluşturma deneyiminizi tartışalım.