Bugün, Node.js, Express ve React'in heyecan verici dünyasına dalıyoruz. İster deneyimli bir programcı olun, ister yeni başlıyor olun, bu blog yazısı sizi bu popüler teknolojileri kullanarak güçlü bir API oluşturma konusunda yönlendirecektir. Temel bilgileri ele alacak, ortamınızı kurma sürecini inceleyecek ve bu araçların nasıl birlikte çalıştığını keşfedeceğiz. Ayrıca, Apidog'un hayatınızı nasıl kolaylaştırabileceğini göstereceğiz. Öyleyse, en sevdiğiniz kodlama atıştırmalığınızı alın ve başlayalım!
Neden Node.js, Express ve React?
İşe koyulmadan önce, Node.js, Express ve React'i neden umursamanız gerektiği hakkında konuşalım.
Node.js
Node.js, JavaScript'i sunucu tarafında çalıştırmanıza olanak tanıyan bir çalışma zamanı ortamıdır. Chrome'un V8 JavaScript motoru üzerine kurulmuştur, bu da onu hızlı ve verimli hale getirir. Node.js ile ölçeklenebilir ağ uygulamaları oluşturabilir, aynı anda birden fazla isteği işleyebilir ve hem istemci hem de sunucu tarafı geliştirme için tek bir programlama dili (JavaScript) kullanabilirsiniz.
Express
Express , minimal ve esnek bir Node.js web uygulaması çerçevesidir. Web ve mobil uygulamalar oluşturmak için sağlam bir özellik seti sağlar. Express ile kolayca bir sunucu kurabilir, rotaları yönetebilir ve HTTP isteklerini ve yanıtlarını işleyebilirsiniz. Birçok Node.js uygulamasının temelini oluşturur ve React ile mükemmel bir şekilde eşleşir.
React
React, kullanıcı arayüzleri oluşturmak için bir JavaScript kütüphanesidir. Facebook ve bir topluluk geliştiricisi ve şirket tarafından sürdürülmektedir. React, yeniden kullanılabilir UI bileşenleri oluşturmanıza ve uygulamanızın durumunu verimli bir şekilde yönetmenize olanak tanır. Node.js ve Express ile birleştirildiğinde, kolaylıkla dinamik, duyarlı web uygulamaları oluşturabilirsiniz.
Geliştirme Ortamınızı Kurma
Başlamak için, geliştirme ortamınızı kurmanız gerekir. İşte adım adım bir rehber:
Node.js'i Yükleyin: Node.js web sitesine gidin ve en son sürümü indirin. İşletim sisteminiz için yükleme talimatlarını izleyin.
npm'i Yükleyin: npm (Node Package Manager) Node.js ile birlikte gelir. Terminalinizde npm -v komutunu çalıştırarak yüklü olup olmadığını kontrol edebilirsiniz.
Yeni Bir Proje Kurun: Projeniz için yeni bir dizin oluşturun ve terminalinizde bu dizine gidin. npm init komutunu çalıştırarak yeni bir Node.js projesi başlatın. package.json dosyası oluşturmak için istemleri izleyin.
Express'i Yükleyin: Express'i yüklemek için npm install express komutunu çalıştırın.
React'i Yükleyin: Yeni bir React projesi kurmak için Create React App'i kullanacaksınız. client dizininde yeni bir React uygulaması oluşturmak için npx create-react-app client komutunu çalıştırın.
Apidog'u Yükleyin: API geliştirmeyi ve test etmeyi kolaylaştırmak için Apidog'u kullanacağız. Apidog web sitesinden ücretsiz olarak indirebilirsiniz.
Node.js ve Express ile API'nizi Oluşturma
Artık ortamınız kurulduğuna göre, Node.js ve Express kullanarak basit bir API oluşturalım.
Adım 1: Express Sunucusu Kurulumu
Projenizin kök dizininde server.js adında yeni bir dosya oluşturun. Temel bir Express sunucusu kurmak için aşağıdaki kodu ekleyin:
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
Terminalinizde node server.js komutunu çalıştırın. "http://localhost:3000 adresinde çalışan sunucu" ifadesini görmelisiniz. Tarayıcınızı açın ve "Hello World!" ifadesini görmek için http://localhost:3000 adresine gidin.
Adım 2: API Rotaları Oluşturma
Şimdi, bazı API rotaları oluşturalım. server.js dosyanızda, bir kullanıcı listesi döndüren basit bir API oluşturmak için aşağıdaki kodu ekleyin:
const users = [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' },
{ id: 3, name: 'Sam Smith' }
];
app.get('/api/users', (req, res) => {
res.json(users);
});
Şimdi, http://localhost:3000/api/users adresine gittiğinizde, kullanıcı listesini içeren bir JSON yanıtı göreceksiniz.
Adım 3: Bir Veritabanına Bağlanma
API'mizi daha dinamik hale getirmek için, bir veritabanına bağlanalım. Bu örnek için MongoDB kullanacağız. İlk olarak, npm install mongoose komutunu çalıştırarak mongoose'u yüklemeniz gerekir.
db.js adında yeni bir dosya oluşturun ve MongoDB'ye bağlanmak için aşağıdaki kodu ekleyin:
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/mydatabase', {
useNewUrlParser: true,
useUnifiedTopology: true
});
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
console.log('Connected to MongoDB');
});
module.exports = db;
server.js dosyanızda, veritabanına bağlanmak için db.js dosyasını dahil edin:
const db = require('./db');
Şimdi, kullanıcılarımız için bir Mongoose modeli oluşturalım. user.js adında yeni bir dosya oluşturun ve aşağıdaki kodu ekleyin:
const mongoose = require('mongoose');
const userSchema = new mongoose.Schema({
name: String
});
const User = mongoose.model('User', userSchema);
module.exports = User;
server.js dosyanızda, kullanıcıları veritabanından getirmek için /api/users rotasını güncelleyin:
const User = require('./user');
app.get('/api/users', async (req, res) => {
const users = await User.find();
res.json(users);
});
Artık MongoDB veritabanınızdan kullanıcı ekleyebilir, güncelleyebilir ve silebilirsiniz ve API'niz bu değişiklikleri dinamik olarak yansıtacaktır.
React'i Node.js ve Express ile Entegre Etme
Artık API'miz kurulduğuna göre, onu bir React ön ucu ile entegre edelim.
Adım 1: Proxy Kurulumu
React ön ucundan API'mize istek göndermek için bir proxy kuracağız. client/package.json dosyasını açın ve aşağıdaki satırı ekleyin:
"proxy": "http://localhost:3000"
Adım 2: API'den Veri Çekme
React uygulamanızda, API'den veri çeken ve görüntüleyen bir bileşen oluşturalım. client/src/App.js dosyasını açın ve içeriğini aşağıdaki kodla değiştirin:
import React, { useEffect, useState } from 'react';
import './App.css';
function App() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch('/api/users')
.then(response => response.json())
.then(data => setUsers(data));
}, []);
return (
<div className="App">
<h1>Users</h1>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
export default App;
React geliştirme sunucusunu başlatmak için client dizininde npm start komutunu çalıştırın. Sayfada API'nizden çekilen bir kullanıcı listesi görüntülenmelidir.
API'nizi Apidog ile Test Etme
Artık çalışan bir API'niz ve bir React ön ucunuz olduğuna göre, API'nizi test etme zamanı. Apidog bunun için harika bir araçtır.
Adım 1: Apidog'u açın ve yeni bir istek oluşturun.
Adım 2: Test düzenleyicisinde, API uç noktanızın URL'sini girin, HTTP yöntemini seçin ve ihtiyacınız olan tüm başlıkları, parametreleri veya gövde verilerini ekleyin. Örneğin, daha önce oluşturduğumuz basit bir mesaj döndüren rotayı test edebilirsiniz:
Adım 3: Gönder düğmesine tıklayın ve testinizin sonucunu görün. Durum kodunu, yanıt süresini ve API'nizin yanıt gövdesini görmelisiniz. Örneğin, şuna benzer bir şey görmelisiniz:
Apidog, web hizmetlerinizin kalitesini, güvenilirliğini ve performansını sağlamanıza yardımcı olduğundan, API'lerinizi test etmek için harika bir araçtır. Ayrıca, API'lerinizi test etmek için herhangi bir kod yazmanıza veya herhangi bir yazılım yüklemenize gerek olmadığından, size zaman ve çaba tasarrufu sağlar. Sadece tarayıcınızı kullanabilir ve Apidog'un kullanıcı dostu arayüzünün ve özelliklerinin tadını çıkarabilirsiniz.
Sonuç
Tebrikler! Node.js, Express ve React kullanarak güçlü bir API oluşturmayı başardınız. Geliştirme ortamınızı nasıl kuracağınızı, API rotaları oluşturmayı, bir veritabanına bağlanmayı ve React'i arka ucunuzla nasıl entegre edeceğinizi öğrendiniz. Ayrıca, Apidog'un API'nizi test etmeyi nasıl basitleştirebileceğini keşfettiniz.
Unutmayın, bu sadece başlangıç. Uygulamanızı genişletmenin ve geliştirmenin sayısız yolu var. Kimlik doğrulama ekleyebilir, daha karmaşık rotalar uygulayabilir ve ön ucunuzu ek özelliklerle geliştirebilirsiniz.
