Machine learning ile müşteri churn analizi(part2)

Bir panel yapıp bunu görselleştirmek istediğimi belirtmiştim, bunu da React ile yapmaya karar verdim.

Neden React sorusunun cevabı ise yok Vue.js’da olabilirdi fakat Github’daki starlar üzerinden yapılan versus muhabbetine burada girmeyeceğim. :)

Basit bir react uygulaması için yapılması gerekenlerden bahsedeyim biraz.

create-react-app ile bu işlemi hemen yapabiliyoruz. Bununb için Node >= 6 ve npm >= 5.2 yüklü olması gerekiyor.

npx create-react-app my-app 
cd my-app
npm start

yada yarn ile yapabilirsiniz bunun yarn yüklü olması gerekiyor.

yarn create react-app my-app
cd my-app
yarn start

Bunu yazdıktan sonra aşağıdaki şekilde dosyalar oluşur.

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── registerServiceWorker.js

Şimde de webpack’i projemize dahil edelim.

npm install --save-dev webpack webpack-dev-server webpack-cli

package.json dosyamıza kendimiz ekleyip daha sonradan npm install diyerekte yükleyebilirdik.

touch webpack.config.js

yazarak bir config dosyası oluşturalım.

sonrasında package.json dosyamızda bir değişiklik yapacağız. react-scripts start yazan yeri aşağıdaki ile değiştiriyoruz.

webpack-dev-server --config ./webpack.config.js --mode development

Şimdi ise sırada ES6'yı aktif hale getirmek kaldı. Neden buna ihtiyacımız var diyorsanız hemen kısaca açıklayayım; babel kodumuzu tüm tarayıcıların anlayacağı şekle getirir yani kodu transpile eder. Aşağıdaki şekilde yükleyebilirsiniz.

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-stage-2 babel-preset-react

Şimdi ise babel ayarlarını tutan dosyayı oluşturalım.

touch .babelrc

ve içine aşağıdakileri yazalım.

{
"presets": [
"env",
"react",
"stage-2"
]
}

Tekrar webpack.config.js dosyamıza dönelim.

module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/
public',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './
public'
}
};

Şimdi de public/index.html dosyamızda ufak bir değişikliğimiz var. app id’li div’in altına bu script’i yerleştiriyoruz :

<script src="/bundle.js"></script>

Webpack ayarlarımız bu kadar


App.js dosyamız en son şu şekilde oluyor.

src klasörünün içine Components diye bir klasör açalım ve üç tane dosya oluşturalım

cd src
mkdir Components
touch PredictForm.js
touch NewData.js
touch Result.js

Bu projenin ui tarafını sematic-ui-react ile yaptım o yüzden onu da yükleyelim. Dilerseniz buradan inceleyebilirsiniz.

yarn add semantic-ui-react

public/index.html ‘de <head> tag’inin içine aşağıdaki yazanı ekliyoruz. Böylece projemize sematic-ui-react eklemiş olduk.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css"></link>

Şimdi de yeni kayıt eklemek ve tahmin etmek için olan ana Component’i oluşturalım.

Son olarak da Component’lerimizi oluşturalım.

İlk olarak Classifier.js ile başlayalım. Bu component bizden aldığı verileri python ile yazdığımız server’a ileticek ve ona göre yanıtlarını gösterceğiz.

NewData.js ile devam edelim. Bu Component’i csv dosyamıza yeni kayıt eklemek için kullanacağız.

Son olarakta Result.js i oluşturalım. Bu Component’i sonuçları göstermek için kullanacağız.

Projenin tamamına buradan ulaşabilirsiniz