Kayıtlar

firebase etiketine sahip yayınlar gösteriliyor

React&Redux&Firebase Cv Sayfası yapma

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

React&Redux Firebase Yorum Componeneti tasarımı

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

React&Redux Firebase userProfile Aktif etme

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

React&Redux Firebase Login Componenti Yapımı

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

React Ck editor kullanımı

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

React&Redux Firebase Authetication işlemleri React

Resim
Firebase oturumu oluşturun. Ardından Authentication seçeneğini seçin Oturum açma yöntemi olarak eposta ve şifre işlemlerini aktifleştirin. İşlemleri  https://github.com/abdullahsuhaisk/ReactReduxFirebaseBlogApp Reposundan da görebilirsiniz. Sırada İndex.js den. FireStore ve FirebaseRedux kütüphanelerini aktifleştirip firebase 'e auth u set etmemiz gerekiyor. İndex.js deki işlemlerim. Sırada Reducerimi oluştrurmak var.. RootReducerım firebase 'e artık bağlandı. Firebase den gelen durumlara state den ulaşabileceğim.Firebase' den neler geliyormuş. Log olarak bir bakalım... Benim Main componentim bu projede dashboard oradan bakacağım. State leri props a gönderip props'u ekranda gösterdik. Consolumuzda gelenler ; Görüldüğü üzere firebase 'in içinde auth olarak geldi. isLoaded:false ve isEmpty:true herhangibi bir oturum açmadığını bize söylüyor. Şimdi firebase consoluma gidip bir tane test user 'i oluşturacağım. Ardından sitem...