Computer Engineer

İlk ders: Grekli paketlerin kurulumunu yapacağız ES6 kullanmaya çalışacağız. Diğer tarayıcılarda da geçerli olması adına babel kuracağız. Projemizi kurmak için yeni bir klasör açıyorum. ReactRedux klasörümün adı visiaul code ile açıp npm init -y komutlarınını command line 'a giriyorum. Ardından git init yapıyorum github kullanacam, git init ile kodlarımı versiyonluyorum. mkdir server komutları ile server klasörümü oluşturuyorum. Cd server yapıp lokasyonumu servera taşıyorum. Ardından index.js dosyamı oluşturuyorum. Bu benim ana giriş noktam. Bu dosyamı aslında Express server koşturmak için kullanacağım. Bunun için ;  import express from 'express';  yani express kütüphanemi projeme dahil ettim.  Bir sonraki adımım express serverımı bir değişkene atayıp bu değişken route oluşturmak. Bu oluşturduğum route klasik olarak Hello word yazdırmak. Ardından ise local hostumun çalışacağı bir port numarası tayin etmek . import express from 'express' ; con...

article modelim : const mongoose = require ( 'mongoose' ); const { Schema } = mongoose ; const articleSchema = new Schema ({ title: String , subject: String , body: String , metaTag: String , dateSent: Date, _user: { type: Schema . Types . ObjectId , ref: 'members' } }) mongoose . model ( 'articles' , articleSchema ); Buradaki Schema alanlarını dolurmamız gerekiyor. _user prop 'u makaleyi kimin eklediğini bulabilmek için. MongoDb deki members schemada ki id alaraka işlem yapıyor. articleRoutes dosyamda işlemleri yapacağım. const mongoose = require ( 'mongoose' ); const article = require ( '../models/article' ); Mongose ve modelimde işlem yapacağım için öncelikle onları çağırıyorum. article ekleyebilmem için bazı kurallarım vardı bunları çağırıyorum. const requireLogin = require ( '../middlewares/requireLogin' ); const requireAdmin = require ( '../middlewares/r...

  Benim aklımda kalanı ara kontrol methodları. İşlemi gerekli kontrol yapıp , kontrolden sonra kodun kaldığı yerden devam etmesini sağlamak. Login olmak gerekli ve Yetkli olma gerekleri ile ilgili middlewares oluşturalım. Önemli kısımı middlewares içinde en altta next() olur. Ve middlewares çağırarken methoda parametre olarak çağırırız. module . exports = ( req , res , next ) => { if (! req . user ) { return res . status ( 401 ). send ({ error: 'You must log in' }) } next (); }; Eğer requestimin içinde bir user yok ise 401 dönüyorum module . exports = ( req , res , next ) => { if ( req . user . position != 1 ){ return res . status ( 401 ). send ({ error: 'You are wrong area' }) } next (); } position nu 1 olmayan kullanıcıların giremeyeceği alan için middlewares.

   Heroku da github, bitbucked gibi kodlarınızı depolayabileceğiniz external git servisi, herokunun bir diğer güzelliği ise kodlarını derleyebilirsiniz.   Kodlarınızı derleyebilmeniz için bir kaç işlem yapmanız gerekli, benim derleme yapacağım kodlarım. NodeJs kullanarak yazılmış arka taraf ile ReactJs kullanılarak yazılmış öntaraftan oluşan fakat her iki sisteminde aynı yerde kullanılmasından dolayı tek taraflı bir derleme işlemi diyebiliriz.   Kısaca sistemi anlatmak gerekir ise NodeJs ve React kullanarak Blog sitesi kuruyorum. Amacım daha önce öğrendiklerii pekiştirmek öğrendiklerime yenilerini katmak ve güzel bir boilerplate hazırlamak. Sistemimin dizin yapısı Blog/Server/Client Server main klasörüm içinde NodeJs yani back-end tarafım var. Serverın içinde ise Client var. Yani token tutmama gerek kalmıyor. İlk olarak Server ın içinde ki packpage.json na aşağıdaki kodları ekliyorum "engines" : { "node" : "8.1.1" , "npm" ...

Öncelikle bir github hesanızın olması ve giriş yapmış olmanız gerekmekte. Giriş yaptıktan sonra Sol taraftan New seçilir.  Repository name Hangi isim ile tutulacağıdır. Description ise açıklama alanı create repository Dediğimizde yeni bir repository alanı oluşur. Açılan Açılan bu sayfada ki böülüm hangi yol haritasını izlememiz gerektiğini bize söyler; …or create a new repository on the command line echo "# PersonelBlogWithReactAndExpress" >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/abdullahsuhaisk/PersonelBlogWithReactAndExpress.git git push -u origin master commend line kısmına sırası ile şu adımlar izlenir: Benim kullanı git init => projemize .git adında dosya kurar yapılan değişiklikler düzenlenmeleri vs kaydeder. git add . => Canta gibi düşünüyorum ben bunu yapılan değişikliklerimi çantama ekliyorum. git commit -m "Commite isim ver" => Daha...

 Reactın en zevkli konusu Reducer ve Actions kavramlarıdır. Kısaca actions işlemlerin yapıldığı alan reducer ise bu işlemler sonunda verilerin tutulduğu alandır.     Not: Veri tabanına kayıt işlemi yapmak istersek actions kullanılır. Reducer da tarayıcıda gösterilecek veriler tutulur. İlk olarak Type yazılır. Bu type actionda işleme tutulur. İşleme tutulan type da değişiklik olursa Reducer tarafından yakalanır. Ve değişiklikler state ye set edilir. export const FETCH_USER = 'fetch_user' ; actions/types dizini altına yazdım. Şimdi action/index e actions 'umuzu yazacağız. export const fetchUser = () => async dispatch => { const res = await axios . get ( '/api/current_user' ); dispatch ({ type: FETCH_USER , payload:res . data }); } /api/current_user dan sisteme girişi yapmış kullanıcıyı alıyorum app . get ( '/api/current_user' , ( req , res ) => { res . send ( req . user ); //user services/pa...

 localhost:5500 portumda çalışan bir node.js serverım var. Login işlemleri ve bazı diğer işlemler için localhost:3000 de çalışam react server ımın Node serverıma bağlanması proxy ile mümkün yapmam gereken tek işlem react daki packpage.json dosyama aşağıdaki kodları eklemek; "proxy" : { "/auth/google" : { "target" : "http://localhost:5500" }, "/api/*" : { "target" : "http://localhost:5500" } },

Bu blogda back-end imize kullanıcıların google kimlikleri ile girişini işleyecez. Kullanıcılarımız google hesapları ile giriş yapacak ardından onlara session açıp cookie kuracağız ve kullanıcımızı veri tabanımıza kayıt edeceğiz. Kullanıcı tekrar giriş yaparsa veri tabanımızda sorgulayıp daha önce kayıt olmuş ise tekrar kayıt etmeyeceğiz. Gerekli olan kütüphaneleri anadizime indiriyorum; npm i --save passport passport-google-oauth20 https://console.developers.google.com Adresine girip yeni bir proje oluşturun. ENABLE APIS AND SERVİCES seçin. Arama kısmına Goole plus yazın aşağıdakini seçin ve ENABLE yapın. Google+ API Google The Google+ API enables developers to build on top of the Google+ platform. Sol taraftaki menüden Credentials ı seçin ardından Create Credentials ardından Oauth Create Kendi yönlendirme adresinize göre seçin ve Create deyin size verdiği Publish ve secret keyleri kaydedin bunlar çok önemli. Keylerimi ben config altındaki klasörde...

npm install --save mongoose komutu ile projemize mongoose kütüphanesini kuruyoruz. https://mlab.com adresinden yeni bir Database oluşturuyoruz. Projemize config adında yeni bir dosya oluşturup için prod.js, dev.js ve key.js dosyaları oluşturuyoruz. key.js dosyamın içine if ( process . env . NODE_ENV === 'production' ) { module . exports = require ( './prod' ) } else { module . exports = require ( './dev' ) } Eğer projem productionda derleniyorsa prod dosyamı açıyor değilse dev dosyamı açıyor. const keys = require ( './config/key' ); mongoose . connect ( keys . mongoURI ); index.js den de şu şekilde çağırma yaptığım zaman değişikliklerim başarılı oluyor. Mongoose Schema oluşturma ; const mongoose = require ( 'mongoose' ); const { Schema } = mongoose ; const articleSchema = new Schema ({ title: String , subject: String , body: String , metaTag: String , dateSen...

İki tane sunucumuz olduğunu var sayıyoruz. Biri Back-End diğeri Front-end  Klasör dizinim şu şekilde blog/server/client  Back-end tarafım server dizininin içinde  server dizinimin içine npm i --save concurrently komutu ile kütüphanemizi indiriyoruz. server dizinimde ki packpage.json dosyasını açıp; "scripts" : { "test" : "echo \" Error: no test specified \" && exit 1" , "start" : "node index.js" , "server" : "nodemon index.js" , "client" : "npm run start --prefix client" , "dev" : "concurrently \" npm run server \" \" npm run client \" " Şeklinde kodlarımı ekliyorum. Artık npm run dev dediğimde iki sunucumda aktif olacak. Derleme işlemi için ise  "engines" : { "node" : "8.1.1" , "npm" : "5.0.3" }, kodları a...

Yapılacaklar : React kurulum ve Router işlemleri , Materialize.css kütüphanesi ve Header Componentinin tasarlanması. Blog adında bir klasör oluşturun içine Server  klasörü ve : npm create-react-app Client komutlarını yazın.  Server klasörümüzde back - end tarafımız olacak. Client  te ise front-end bölümleri olacak. Component oluşturup bu komponentleri react-router-dom kullanarak app de çağırma işlemi yapacağız. Src nin içine Component klasörü oluşturun. Ve component klasörün içine şimdilik şu 3 tane componentleri oluşturdum.  src/component/Header.js import React , { Component } from 'react' ; class Header extends Component { render (){ return ( < div > Header </ div > ) } } export default Header ; src/component/Landing.js import React , { Component } from 'react' ; class Landing extends Component { render () { return ( < div > AnaSayfa diyelim mi bea </ div > ) } ...