Computer Engineer

 Bu ders için react projenizi kurmuş , Firebase config ayarlarını yapmış olmanız gerekmektedir. Bu gereklilikleri yapmadıysanız blogun önceki konularına bakabilirsiniz. Template olarak : https://themes.3rdwavemedia.com/bootstrap-templates/resume/free-bootstrap4-resume-cv-template-for-developers-pillar/ Bunu kullandım ve bunu reacta göre componentlere ayırdım. Kendi blog sayfamda Cv kısmı olarak kullanmaya karar verdim. Cv kısmını yazacak css bilgim olmadığı için hazır kullandım. MainCv componentimin görünümü : Datalarımın bulunduğu fireStore documenim.    Ne yaptım ? Cv componentimin fireStore ile personelInfo collectionuma bağladım. componentlerime yollayacağım bilgileri doc olarak isimlendirdim.  Sayfanın görünüşünde de görebileceğiniz üzere careerSummery ayrı bir component. Componentlerime data iletimini nasıl yapıyorum. fireStoreconnect ile componentimi firestore 'personelInfo ' collectionuma bağladığımda  state olarak firest...

 Bu işlemler kısacası herkesin server ınızıa bağlanıp kafasına göre bilgileri değiştirip , silmesine vs engel olmak için yapılır. İnit fireStore Securty ekranı İkinci satır kod blogu İlgili database path ı ile ilgilidir. Ucuncu satır 2. satırdaki database nin eşleşenen document ini verir. Dorduncu satırda izinleri gösterir. Örenğimizde herkes erişip okuma ve yazma izinlerine sahiptir. Database 'min görüntüsü Şimdi basit kurallar yazarak konuyu anlayalım. İlk olarak yazacağım kural projects leri sadece giriş yapmış kullanıcıların görmesini istiyorum. service cloud.firestore {   match /databases/{database}/documents {     match /projects/{project} {       allow read, write : if request.auth.uid != null     }   } } {project} bir değişken belirtir. Emilatorumden kontorol ettiğmde kuralım çalışıyor. Bir örnek daha ;   Herkes sistemize üye olabilsin ve üyeliği ile giriş yapanlar üyeli bilgilerini ...

Moment kütüphanesi ile Date Düzenleme moment kütüphanesi date düzenlemenin bence en kolay yolu aynı zamanda blog u mu oluşturmaya devam ediyorum. Blog yazılarının tarihlerini almıştık. Şimdi onları moment ile düzenleyeceğiz aynı zamanda Commentlerimide moment ile düzenleyeceğim. Daha detaylı bilgi için : https://momentjs.com/docs/ npm i moment Komutu ile projeme dahil ediyorum. Moment 'i kullanacağım yerde import etmem gerekecek. import moment from 'moment' ; { moment ( blog .date. toDate ()). calendar ()   Methodu ile şuanki tarihimden o anki tarih arasındaki şekilde yayınlama yaptım < p className = "blog-post-meta" > { moment ( blog .date. toDate ()). calendar () } < a href = "/" > { blog .author } </ a ></ p >

  Bu ders için react projenizi kurmuş , Firebase config ayarlarını yapmış olmanız gerekmektedir. Bu gereklilikleri yapmadıysanız blogun önceki konularına bakabilirsiniz.    Bu blog sayfasının tamamını kaynak kodlarını gitHub adresinden görebilirsiniz: https://github.com/abdullahsuhaisk/ReactReduxFirebaseBlogApp Öncelikle best practise olmadı aslında bu yaptığım. Normal bir db mantığı oldu farklı bir collection tuttum bu collectionda blogId sını tuttum daha sonra bu blogId sine göre ekranda gösterdim. Asıl yapmam gereken Blog collectionun içinde subcollection olarak Comments collectionun tutmam olurdu. Başka bir ilişkisel veri tabanında da sub collection ları kullanmaya çalışırız. Documentasyonu okuyacağım belki ceviririm bile buradan paylaşırım. Şimdi öncelikle neler yaptım. blogActions da bir CommentAdd methodu oluşturdum. Ardından Reducer 'a tetikleme yaptım. Bu işlemlerde aslında Reducer 'a tetiklemeye pek ihtiyaç yok aslında. Bu reducer kullanımına daha de...

   Bu ders için react projenizi kurmuş , Firebase config ayarlarını yapmış olmanız gerekmektedir. Bu gereklilikleri yapmadıysanız blogun önceki konularına bakabilirsiniz.    Bu blog sayfasının tamamını kaynak kodlarını gitHub adresinden görebilirsiniz: https://github.com/abdullahsuhaisk/ReactReduxFirebaseBlogApp Önce ki blog yazılarını takip ettiyseniz yada daha önceden de biliyordu iseniz. Firebase auth işlemlerinde sadece auth.uid gelir. Auth.uid nin yanında firebase den profile bilgilerinide getirme işlemlerini yapacağız. İndex.js de const store = createStore ( rootReducer , compose ( applyMiddleware ( thunk . withExtraArgument ({ getFirebase , getFirestore })), reactReduxFirebase ( fbConfig ,{ useFirestoreForProfile : true , userProfile : 'users' , attachAuthIsReady : true }), // redux binding for firebase reduxFirestore ( fbConfig ) ) reactReduxFirebase 'e profil bilgilerine erişmek için   { useFirestoreForProfile : true , userPro...

   Bu ders için react projenizi kurmuş , Firebase config ayarlarını yapmış olmanız gerekmektedir. Bu gereklilikleri yapmadıysanız blogun önceki konularına bakabilirsiniz.    Firebase ile authentication işlemleri gerçekten çok kolay. Normalde bu işlemleri yapmak bir yığın iş yükü alabiliyor. Firebase.auth() kütüphanesi ile gelen createUserWithEmailAndPassword(newUser) ile yeni bir kullanıcı oluşturmak gerçekten çok kolay. Token falanda tutmaya gerek yok kontrol yapmayada. Fakat sadece email ve password verilerini kaydede biliyoruz. Bunun çözüm yoluda gayet basit , yeniKullanıcı başarılı şekilde oluştu ise promise dönüyoruz. Promise başarılı ise Firestore 'a  bir collectiona bağlanıyoruz. Bu collectionada  Yeni kullanıcı kaydından gelen id ile collection oluştrurup içine set ediyoruz. Yani ; KullanıcıKaydı başarılı ise "users"collectionuna yenikullanıcının id sini kaydet. Yeni kullanıcının id sine ise kullanıcının isim, soyisim gibi kişisel bilgilerini...

Gerekli kütüphane:  react-ckeditor-component Documantasyona göre Example uygulaması yapıldığında  this .onChange = this .onChange. bind ( this ); Satırı eksik olduğu olduğu için hata çıkmakta.Satırını constructer 'a eklediğinizde düzelecektir. Componentin görünümü Ben bu componentimi AddBlog componentimde kullağım. Şimdi burada Redux ında çözüm bulduğu propblem ile karşılaştık. Bu problem Addblog componentimin state lerini child component olan ckEditor componentimde güncelleyebilirim problemidir. Benim aklıma gelen 3 tane çözüm yolu var. Biri Redux yapısı ; İlk olarak Addblog componentimde datamı oluşturur doc olarak firestore me kaydedirim. Ardından ckEditor componentimde de Update yapabilirim. İkinci yöntem en best practise olanı ve benim bu blogta uygulayacam. ckEditor diye ayrı bir component oluşturma Addblog componentimin içinde oluştur ve kullan. Üçüncü yol ise Redux kullanarak çözülecek. Böyle gerçek bir problem üzerind...

 Sadece fireStore react ile içerik ekleyen bir component yazacağız. Proje oluşturma firebase config ayarları için blogdaki önceki yazıları okumanızı öneriyorum. Öncelikle bir method base component oluşturuyorum. Basit bir şekilde componentimi yazdım. App.Js den de yolunu tanımladım. Excact yaptım ki sadece bu componentim çalışsın. Componentimin görünüşüde bu şekilde oldu gayet basit.  Şimdi onChange ve onClick listenerlarımı handle edeceğim. Methodlarımı yazdım yazmış olduğum methodlarımı onClick ve onChange ekledim.   Denememi yaptığımda başarı bir şekil de state  set ettiğimi görebiliyorum. Şimdi yapmam gereken componentime action ve reducer lerini yazmak. İstersem firestoreyı componentime bağlatım handleClick metdoumu düzenleyip te firesore 'me ekleme işlemide yapabilirdim fakat actions ve reducer kullanacağm. İlk olarak blogAction yazacağım parametre olarakta blog objesi alacak. Bu obje ile fireStore mdeki collectionu ma add...