Computer Engineer

FireStore 'de hazırlamış olduğumuz blogda navbardaki kategorilere göre aynı kategori isminin taşıyan blog sayfalarının gösterilmesini yapacağız. Navbar kategoriler görünümü Kod görünümü category adında collectionum var. Bu collectionda ki documanlarda sadece kategori adı yazıyor. Ayrı bir blog collectionuumda var documanlarda property olarak category var. ilk iş olarak navbarımda ki kategorilerin veri tabanından gelmesini, ardından seçilen kategorinin blog col. category proppertisi ile eşleşip sayfamda render edilmesini istiyorum. Componentimi compose ile firestorem' e bağlayıp category collectionuna ulaşacağım. gerekli kütüphaneleri import ettim firestore bağlanıp vermi dizi şeklinde category adıyla props olarak set ettim Proplarımı karşıladım Propslarımın ekran görüntüsü. Bu ana kadar herşey tamam. Şimdi sırada category props umu map ile açıp show etmem var. Başarılı bir şekilde category parçaladık. Secilen ka...

 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 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...