Computer Engineer

   Geçen derste yaptığımız yerde çalışan view laravel in kendi view iydi. Şimdi view yerine React çalıştıralım. welcome.blade.php dosyam. Laravel çalıştığında açılan view. Şimdi peki React neydi ? Kardeşlik sevgi vs değildi. React bir javaScript kütüphanesiydi. Yani Dom ları manipule ederdi. Yani html elamanları bir başka html elemanları ile değiştirirdi. React Componentimin görünümü. Şimdi bu react elementimin çalışabilmesi için example id sine sahip bir elementimin olması gerekiyor. View imde öyle bir elementim yok. Şimdi silme kırpma işlemlerini gerçekleştireceğim. Ve View dosyama css yolunuda belirtmem lazım. php artisan serve komutumla localhostmuzu çalıştıralım. Görüldüğü gibi react sayfamız çalıştı. Tamam şimdi veriTabanı oluşturalım. MySQL adminime tıklıyorum Veritabanı oluştura veritabanı ismimi yazıyorum. Şimdi laravelde config ayarlarımı yapacağım. .env giriyorum ve oluşturduğum db mi tanımlıyorum. Veritabanını bağladığıma gö...

    Bu seride back-end tarafında php Laravel kullanan Front-End tarafın da ise React kullanan bir uygulama geliştireceğiz.   Öncelikle php kullanabilmemiz için yani php kodlarını local bilgisayarımızın derleyebilmesi için php server kurmamız gerekiyor. Bunun için Xamp kullanabiliriz. Xamp Adresi:  https://www.apachefriends.org/tr/download_success.html  JavaScript tarafında bu işlemi Node Js ile yapıyorduk. Burada Xamp İle yapacağız. Xampı kurarken kurduğunuz diskte anadizini seçmeyi unutmayın.  Daha sonra composer yüklememiz gerekiyor. Bu paket yükleyicisi tıpkı bizim JavaScripte kullandığımızı npm(node packed manager) gibi. Composer yüklemek için : https://getcomposer.org/download/ Composer 'ı kurarken kurulum yaptığınız yerin xampın içindeki php olmasına dikkat edin. Composer'i kurduktan sonra artık Command Line 'ımıza Composer komutları yazabileceğiz. Şimdi cmd imizi açalım ve bilgisayarımıza global Laravel 'i yükleyelim. Komutlarım : ...

Collection larımın görünümü service cloud.firestore {   match /databases/{database}/documents {     match /{document=**} {       allow read, write;     }       match /users/{userId}{     allow create       allow read : if request.auth.uid != null       allow write : if request.auth.uid == userId     }     match /Comments/{commentsId}{     allow create: if request.auth.uid !=null     allow read     allow write: if request.auth.uid == userId     }   } } kurallarım şimdilik bunlar.     match /personelInfo/{personelinfo}     allow read     allow write : if request.auth.uid == 'QaNm4J6XFR'     allow update: if request.auth.uid == 'QaNm4J6XFR'   } Mesela personelInfo alanım özel bir alan ve admin haricinde kimsenin değişikli yapamam...

Cloud Function Nedir ? Neden Kullanılır ?  Server- Side tarafında kod çalıştırmamız gerekirse  FireStore Cloud Functions kullanırız. Özellikle security rules ile kapattığımız dataların editlenmesi , Kimsenin okumak haricinde erişemediği collections ların editlenmesi gibi. Cloud Function Kurulum   FireStore functionsları kullanabilmek için öncelikle projemize set up etmeliyiz. npm i -g firebase-tools sonra firebase login firebase şifreniz ile terminalde giriş yapacaksınız. firebase init firebase deploy komutlarını çalıştırmamız gerekmektedir. Size hangi hizmetleri kullanmak isteiğiniz soracaktır Functions ve Hosting i seçin. Size hangi projenin olduğunuzu soracaktır. Projenizi seçin. Hangi script language yi kullanacağınızı soracak. JavaScript. Npm depency leri soracak yes cevabını verin. Public directroy yi seçtiğinde eğer react kullanıyorsanız. Cevabınız dist olmalı. Single page app sorusu cevabı react için yes Kurulum aşaması bu kadardı. ...

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

 React ve Firebase kullanarak bir blog uygulaması geliştiriyorum. Buradaki yazılarımıda blog uygulama daha sonra koyabilmek için yazıyorum. Bu blog uygulamam için Contact Me sayfasını tasarlarken bana yazılan içeriğin e-posta olarak mail adresime gelmesine karar verdim. Bunun için Email Js kullanacağım. Orjinal documentasyona buradan ulaşabilirsiniz. http://www.emailjs.com/docs/tutorial/overview/ Add serviceden istediğiniz e posta sağlayıcısnı ekleyin. Burda e postaların nereden gönderileceğini yapıyoruz. Ben   Personal email services den  gmail  yaptım. Gmail için işlemler çok kolay sadece izin verme işlemleri yapıyoruz. Şimdi bir email template oluşturuyoruz. {{text}} {{user_name}} ({{user_email}}) Email templatemizde değişkenlerimizi {{ }}} kırcal parantezler arasına yazıyoruz. Kırcal parantez içindeki değerleri state lerimde form alanlarımdan alacağım. Bu değerler e-posta da state den değerler olarak gelecek Form Alanıma uygun bir template ...

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