React, Node.js, Next.js ve MongoDB kullanarak bir cari otomasyon sistemi oluşturmak için adım adım bir rehber hazırlayacağım. Bu süreç boyunca her adımı detaylı olarak açıklayacak ve sonunda her bölüm için bir önizleme sunacağım. Bu proje, dört ana bileşenden oluşacak:
- Frontend (React/Next.js)
- Backend (Node.js/Express)
- Veritabanı (MongoDB)
- API Entegrasyonu
Adım 1: Gerekli Ortamın Kurulumu
1.1. Node.js ve npm Kurulumu
Öncelikle bilgisayarınızda Node.js ve npm (Node Package Manager) kurulu olmalıdır. Node.js ve npm’yi indirip kurmak için Node.js’in resmi web sitesini ziyaret edin ve uygun sürümü indirin.
1.2. Next.js Projesi Oluşturma
Next.js, React tabanlı bir framework’tür ve SSR (Server-Side Rendering) destekler. Yeni bir Next.js projesi oluşturmak için terminali açın ve şu komutları çalıştırın:
bash
npx create-next-app@latest cari-otomasyon
cd cari-otomasyon
Bu komutlar, cari-otomasyon adlı yeni bir Next.js projesi oluşturur ve proje dizinine geçiş yapar.
Adım 2: Backend (Node.js/Express) Kurulumu
2.1. Backend Dizini Oluşturma
Proje dizininde backend adında yeni bir klasör oluşturun ve gerekli bağımlılıkları yükleyin:
bash
mkdir backend
cd backend
npm init -y
npm install express mongoose cors body-parser
2.2. Basit Bir Express Sunucusu Oluşturma
backend dizininde server.js dosyasını oluşturun ve aşağıdaki kodu ekleyin:
javascript
// backend/server.js
const express = require(‘express’);
const mongoose = require(‘mongoose’);
const cors = require(‘cors’);
const bodyParser = require(‘body-parser’);
const app = express();
const port = 5000;
// Middleware
app.use(cors());
app.use(bodyParser.json());
// MongoDB bağlantısı
mongoose.connect(‘mongodb://localhost:27017/cariotomasyon’, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const db = mongoose.connection;
db.on(‘error’, console.error.bind(console, ‘MongoDB connection error:’));
db.once(‘open’, () => {
console.log(‘MongoDB connected successfully’);
});
// Schema ve Model
const customerSchema = new mongoose.Schema({
name: String,
address: String,
phone: String,
});
const Customer = mongoose.model(‘Customer’, customerSchema);
// CRUD İşlemleri
// Create
app.post(‘/customers’, async (req, res) => {
const { name, address, phone } = req.body;
const customer = new Customer({ name, address, phone });
await customer.save();
res.send(customer);
});
// Read
app.get(‘/customers’, async (req, res) => {
const customers = await Customer.find();
res.send(customers);
});
// Update
app.put(‘/customers/:id’, async (req, res) => {
const { id } = req.params;
const { name, address, phone } = req.body;
const customer = await Customer.findByIdAndUpdate(id, { name, address, phone }, { new: true });
res.send(customer);
});
// Delete
app.delete(‘/customers/:id’, async (req, res) => {
const { id } = req.params;
await Customer.findByIdAndDelete(id);
res.send({ message: ‘Customer deleted’ });
});
app.listen(port, () => {
console.log(`Server running on http://localhost:${port}`);
});
2.3. Backend’i Çalıştırma
backend dizinindeyken aşağıdaki komutu çalıştırarak sunucuyu başlatın:
bash
node server.js
Adım 3: Frontend (React/Next.js) Kurulumu ve Kullanımı
3.1. React Bileşenleri Oluşturma
frontend dizininde, bileşenleri oluşturmak için components adlı bir klasör oluşturun. Ardından, müşteri listeleme ve müşteri ekleme bileşenlerini oluşturun.
3.2. Müşteri Listeleme Bileşeni
components dizininde CustomerList.js adlı bir dosya oluşturun:
jsx
// components/CustomerList.js
import React, { useEffect, useState } from ‘react’;
import axios from ‘axios’;
const CustomerList = () => {
const [customers, setCustomers] = useState([]);
useEffect(() => {
fetchCustomers();
}, []);
const fetchCustomers = async () => {
const response = await axios.get(‘http://localhost:5000/customers’);
setCustomers(response.data);
};
return (
<div>
<h1>Customer List</h1>
<ul>
{customers.map(customer => (
<li key={customer._id}>
{customer.name} – {customer.address} – {customer.phone}
</li>
))}
</ul>
</div>
);
};
export default CustomerList;
3.3. Müşteri Ekleme Bileşeni
components dizininde AddCustomer.js adlı bir dosya oluşturun:
jsx
// components/AddCustomer.js
import React, { useState } from ‘react’;
import axios from ‘axios’;
const AddCustomer = () => {
const [form, setForm] = useState({ name: ”, address: ”, phone: ” });
const handleInputChange = (e) => {
const { name, value } = e.target;
setForm({ …form, [name]: value });
};
const handleSubmit = async (e) => {
e.preventDefault();
await axios.post(‘http://localhost:5000/customers’, form);
setForm({ name: ”, address: ”, phone: ” });
};
return (
<div>
<h1>Add Customer</h1>
<form onSubmit={handleSubmit}>
<div>
<label>Name</label>
<input type=“text” name=“name” value={form.name} onChange={handleInputChange} required />
</div>
<div>
<label>Address</label>
<input type=“text” name=“address” value={form.address} onChange={handleInputChange} required />
</div>
<div>
<label>Phone</label>
<input type=“text” name=“phone” value={form.phone} onChange={handleInputChange} required />
</div>
<button type=“submit”>Add Customer</button>
</form>
</div>
);
};
export default AddCustomer;
3.4. Ana Sayfa Bileşeni
pages dizininde index.js dosyasını güncelleyin:
jsx
// pages/index.js
import React from ‘react’;
import CustomerList from ‘../components/CustomerList’;
import AddCustomer from ‘../components/AddCustomer’;
const Home = () => {
return (
<div>
<AddCustomer />
<CustomerList />
</div>
);
};
export default Home;
Adım 4: Projeyi Çalıştırma
4.1. Frontend’i Çalıştırma
frontend dizinindeyken React uygulamasını başlatın:
bash
npm run dev
4.2. Projeyi Tarayıcıda Görüntüleme
Tarayıcınızda http://localhost:3000 adresine gidin. Müşteri ekleme ve listeleme işlemlerini gerçekleştirebileceğiniz bir arayüz göreceksiniz.
Sonuç
Bu adımlarla birlikte, React, Node.js, Next.js ve MongoDB kullanarak basit bir cari otomasyon sistemi oluşturduk. Bu sistem, müşteri ekleme, listeleme, güncelleme ve silme işlemlerini destekler.
