Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, "Kendi Web Sitemizi Yapalım" serisinin bir parçası olan bir eğitim içeriğidir. Eğitmen, web sitesinde sayfaya yapılan yorumları listeleme özelliğini adım adım göstermektedir.
- Videoda, dinamik bir site oluşturma sürecinde yorum sistemi oluşturma süreci ele alınmaktadır. İlk olarak Redis'ten yorumları çekmek için bir istek atma fonksiyonu oluşturulur, ardından bu isteği sayfa yüklendiğinde tetikleyecek şekilde düzenlenir. Daha sonra CSS ile yorumların tasarımını düzenleyerek flexbox kullanarak yan yana yerleştirir ve Moment paketinin Lux versiyonunu kullanarak yorumları tarih formatlar.
- Video ayrıca yorumların temizlenmesini ve sayfanın yenilenmesini sağlayan kodları göstermekte, güvenlik açısından API uçlarının kapatılması gerektiği gibi önemli noktalara da değinmektedir.
- 00:12Sayfaya Yorum Listeleme İşlemi
- Sayfaya yapılmış yorumları listeleme kısmına geçiliyor.
- Önceki videoda sayfaya yorum yapılmış ve Redis'ten yorumlar çekilmiş.
- Sayfaya girdikten sonra client tarafından bir istekte bulunulacak ve Redis'ten yorumlar çekilecek.
- 01:00Yorum Alma Yöntemleri
- Yorum alma işlemi iki farklı yöntemle yapılabilir: Next'in sağladığı serverside çözüm veya client tarafından yapılan istekle tetiklenen çözüm.
- Serverside çözüm sayfa yüklenmeden önce Redis'ten veri alıp sayfada yorum kısmını doldurabilir, ancak sayfa yüklendikten sonra yorumların gelmesi SEO açısından önemli değil.
- Client tarafından yapılan istekle tetiklenen çözüm, sayfa derlendikten sonra client tarafından yapılan istekle yorumların getirilmesini sağlayacak.
- 02:06Fetch Comment Metodu
- Fetch comment adında bir metot yazarak yorum alma işlemine başlanıyor.
- Fetch işlemi için URL ve content type (JSON formatında) belirleniyor.
- Fetch işlemi GET metoduyla yapılıyor ve URL'ye query parametresi olarak yorum yapılıyor.
- 05:07Query Parametrelerini İşleme
- Query parametrelerini işlemek için JavaScript'in URL.searchParams sınıfı kullanılıyor.
- URL.searchParams sınıfı, verilen string'i query parametresine çeviriyor.
- URL değiştiğinde tetiklenecek bir useEffect bloğu oluşturuluyor ve URL henüz nullsa işlem yapılmıyor.
- 08:50Redis'ten Veri Çekme
- Redis bağlantısı kurulup, belirli aralıktaki veriler çekiliyor.
- Çekilen veriler pars edilip geri döndürülüyor.
- Çekilen yorumlar bir değişkene set ediliyor ve istenilen yerde kullanılabilir hale getiriliyor.
- 12:07Yorumların HTML'de Gösterilmesi
- Çekilen yorumlar map fonksiyonu ile dolaşılıyor.
- Her yorum için bir div oluşturuluyor ve içinde kullanıcı resmi, adı ve yorum metni gösteriliyor.
- Kullanıcı resmi için width=50 ve class="round" kullanılarak yuvarlak görünüm sağlanıyor.
- 14:44CSS Düzenlemeleri
- En üstteki kapsayıcıya flex ve items center özellikleri verilerek yorumların yan yana gelmesi sağlanıyor.
- Yorumların arasında y ekseninde space ve her yorumun avatarla arasındaki mesafe x ekseninde ayarlanıyor.
- 15:11Tarih Formatlama
- Tarih formatlaması için Moment paketinin modern hali olan Lux kullanılıyor.
- Lux paketi ile created date'i milisaniye cinsinden okuyup, 4 saat önce, 13 saat önce gibi formatlar oluşturulabiliyor.
- 16:34Form İşlemleri
- Yorum gönderildikten sonra formun temizlenmesi ve sayfanın yenilenmesi için gerekli kodlar ekleniyor.
- Formun altındaki text area'nın value'su text olarak ayarlanıyor ve on change olayı ile text güncelleniyor.
- 18:29Tasarım Düzenlemeleri
- Yorumların altındaki kullanıcı adı kısmının tasarımı düzeltiliyor.
- Yorumların rengi text grey 400 olarak ayarlanarak daha sönük görünüyor.
- Yorumların id'leri map ederken verilmeli, aksi takdirde hata alınıyor.
- 19:32Kod Organizasyonu
- Yorumların kodlanması için kosin altında bir comment dosyası oluşturuluyor.
- Comment fonksiyonu sadece commentleri alarak döndürüyor.
- Sayfa temizlenerek form ve yorumlar ayrı bölgelere yerleştiriliyor.
- 21:08Sonuç ve Öneriler
- Proje mükemmel olmasa da dinamik bir siteyi sıfırdan nasıl yapılır kısmını anlatmaya çalışılmış.
- API tarafında güvenlik açısından uçların kapatılması ve gelen-giden kontrolünün yapılması öneriliyor.
- İzleyicilerden like, yorum ve abone olmaları isteniyor.