Dinamik Formları React, SurveyJS, Node.js ve MongoDB ile Oluşturma Rehberi
Günümüz web uygulamalarında kullanıcı ihtiyaçlarına hızlıca adapte olabilen, esnek yapılar büyük önem taşımaktadır. Özellikle anketler, geri bildirim formları, başvuru formları gibi veri toplama süreçlerinde, formların statik olması yerine dinamik olarak oluşturulabilmesi, hem geliştiricilere hem de son kullanıcılara büyük avantajlar sunar. Bu teknik makalede, React frontend’i, SurveyJS kütüphanesi, Node.js tabanlı bir backend ve MongoDB veritabanını kullanarak nasıl dinamik formlar oluşturabileceğinizi adım adım inceleyeceğiz. Bu güçlü teknoloji yığını ile, formlarınızı kod yazmadan, veritabanından gelen tanımlamalarla anında şekillendirebilirsiniz.
Dinamik Formlar Neden Önemli?
Dinamik formlar, işletmelerin ve geliştiricilerin değişen ihtiyaçlara hızla yanıt vermesini sağlayan kritik bir yetenektir. Statik formların aksine, dinamik formlar, kodda değişiklik yapmaya gerek kalmadan form yapısını, alanlarını ve doğrulama kurallarını anında güncelleyebilme esnekliği sunar.
Esneklik ve Uyarlanabilirlik
İş süreçleri ve kullanıcı gereksinimleri sürekli değişebilir. Dinamik formlar sayesinde, yeni bir anket başlatmak, mevcut bir başvuru formuna yeni bir alan eklemek veya bir geri bildirim formunun yapısını değiştirmek için aylarca süren geliştirme döngülerine girmek zorunda kalmazsınız. Form şemalarını veritabanında saklayarak, bu değişiklikleri anında devreye alabilirsiniz. Bu, özellikle hızlı prototipleme ve A/B testi gibi senaryolarda paha biçilmez bir avantaj sağlar.
Kullanıcı Deneyimi ve Verimlilik
Dinamik formlar, kullanıcıların yalnızca ilgili alanları görmesini sağlayarak daha iyi bir kullanıcı deneyimi sunar. Örneğin, bir önceki cevaba göre sonraki soruların görünürlüğünü değiştirebilirsiniz. Bu, formların daha kısa, daha anlaşılır ve doldurulması daha kolay olmasını sağlar, böylece kullanıcıların form doldurma oranını artırır ve veri toplama verimliliğini yükseltir. Ayrıca, karmaşık form mantıklarını (koşullu alanlar, atlama mantığı) kolayca uygulayabilirsiniz.
Bakım Kolaylığı ve Maliyet Tasarrufu
Geliştirme sürecinde esneklik, uzun vadede bakım maliyetlerini de düşürür. Her form değişikliği için kod tabanını güncellemek, test etmek ve yeniden dağıtmak yerine, yalnızca veritabanındaki form tanımını düzenlemek yeterlidir. Bu, geliştirici zamanından tasarruf sağlar ve hata yapma olasılığını azaltır. Daha az kod, daha az hata ve daha hızlı güncellemeler anlamına gelir, bu da toplam sahip olma maliyetini önemli ölçüde düşürür.
Kullanılacak Teknolojilere Yakından Bakış
Dinamik form çözümümüzü oluştururken, her biri kendi alanında güçlü ve yaygın olarak kullanılan teknolojileri bir araya getireceğiz. Bu kombinasyon, hem geliştirme sürecini kolaylaştıracak hem de ortaya çıkan uygulamanın performanslı ve ölçeklenebilir olmasını sağlayacaktır.
React: Modern Arayüzler İçin
React, Facebook tarafından geliştirilen ve kullanıcı arayüzleri oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. Bileşen tabanlı yapısı sayesinde, karmaşık UI’ları yönetilebilir ve yeniden kullanılabilir parçalara bölerek geliştirme sürecini hızlandırır. Sanal DOM kullanımı, performansı artırırken, geniş ekosistemi ve topluluk desteği sayesinde her türlü frontend ihtiyacına çözüm bulmak mümkündür. Dinamik formlarımızın frontend’ini oluşturmak için React’in esnekliğinden faydalanacağız.
SurveyJS: Form Oluşturmanın Güçlü Aracı
SurveyJS, dinamik formlar ve anketler oluşturmak için tasarlanmış kapsamlı bir JavaScript kütüphanesidir. Formları JSON tabanlı şemalarla tanımlamanıza olanak tanır ve bu şemaları farklı frontend çerçevelerinde (React, Angular, Vue vb.) kolayca render edebilir. Sürükle-bırak form tasarımcısı, koşullu mantık, veri doğrulama, farklı soru tipleri ve tema desteği gibi zengin özelliklere sahiptir. SurveyJS, formların görselleştirilmesi ve kullanıcı etkileşimini yönetme konusunda bize büyük kolaylık sağlayacaktır.
Node.js: Esnek ve Ölçeklenebilir Backend
Node.js, JavaScript’i sunucu tarafında çalıştırmamızı sağlayan bir çalışma zamanı ortamıdır. Olay tabanlı, asenkron yapısı sayesinde yüksek performanslı ve ölçeklenebilir backend servisleri geliştirmek için idealdir. Express.js gibi framework’lerle birleştiğinde, RESTful API’ler oluşturmak, veritabanı etkileşimlerini yönetmek ve iş mantığını uygulamak çok daha kolay hale gelir. Form şemalarını ve kullanıcı gönderimlerini yönetmek için Node.js ve Express.js’i kullanacağız.
MongoDB: NoSQL Veritabanı Seçimi
MongoDB, esnek, belge tabanlı (document-oriented) bir NoSQL veritabanıdır. JSON benzeri BSON formatında verileri depolar, bu da form şemalarını ve kullanıcı gönderimlerini doğrudan ve doğal bir şekilde saklamak için mükemmel bir seçimdir. Şemasız yapısı (schemaless), formların yapısı değiştiğinde veritabanı şemasını güncelleme ihtiyacını ortadan kaldırır, bu da dinamik formların doğasına çok uygun bir özelliktir. Ölçeklenebilirlik ve yüksek performans sunması da cabasıdır.
Mimari ve Genel Bakış
Uygulamamız, modern web geliştirme pratiklerine uygun olarak üç katmanlı bir mimariye sahip olacaktır: Frontend, Backend ve Veritabanı. Bu katmanlar, birbirleriyle belirli arayüzler üzerinden iletişim kurarak sorumlulukların net bir şekilde ayrılmasını sağlar.
Frontend (React & SurveyJS)
Frontend, kullanıcının etkileşimde bulunduğu arayüzü temsil eder. React ile oluşturulan bu katman, SurveyJS kütüphanesini kullanarak dinamik formları render eder. Kullanıcı bir formu doldurup gönderdiğinde, bu veriler HTTP istekleri (genellikle POST) aracılığıyla backend’e iletilir. Ayrıca, formun hangi şemaya göre oluşturulacağını belirlemek için de backend’den form şemalarını (JSON formatında) çeker.
Backend (Node.js & Express)
Backend, uygulamanın sunucu tarafındaki mantığını barındırır. Node.js ve Express.js ile geliştirilen bu katman, RESTful API uç noktaları sağlar. Frontend’den gelen form gönderme isteklerini alır, bu verileri işler ve MongoDB’ye kaydeder. Aynı zamanda, frontend’in talep ettiği form şemalarını MongoDB’den alıp JSON formatında geri döndürmekle de sorumludur. Güvenlik, veri doğrulama ve iş mantığı da bu katmanda uygulanır.
Veritabanı (MongoDB)
Veritabanı, uygulamanın tüm kalıcı verilerini saklar. MongoDB, esnek yapısı sayesinde form şemalarını (JSON belgeleri olarak) ve kullanıcıların doldurduğu form gönderimlerini (yine JSON belgeleri olarak) saklamak için idealdir. Her form şeması ayrı bir belge olarak, her form gönderimi de başka bir belge olarak depolanabilir. Bu sayede, formların yapısı değiştiğinde veritabanı şemasını güncelleme ihtiyacı ortadan kalkar.
Aşağıdaki basit liste, veri akışını özetlemektedir:
- 1. Form Talebi: Frontend, belirli bir formun şemasını backend’den ister (GET /api/forms/:id).
- 2. Şema Gönderimi: Backend, MongoDB’den ilgili form şemasını çeker ve frontend’e JSON olarak gönderir.
- 3. Form Render: Frontend (React & SurveyJS), gelen JSON şemasına göre formu dinamik olarak oluşturur ve kullanıcıya sunar.
- 4. Form Gönderimi: Kullanıcı formu doldurur ve gönderir. Frontend, doldurulan veriyi backend’e POST isteği ile iletir (POST /api/forms/:id/submit).
- 5. Veri Kaydı: Backend, gelen veriyi işler, doğrular ve MongoDB’ye yeni bir form gönderimi belgesi olarak kaydeder.
Adım Adım Frontend Geliştirme (React & SurveyJS)
Frontend uygulamamızı React ve SurveyJS kullanarak geliştireceğiz. Bu bölümde, projenin kurulumundan formun render edilmesine ve backend ile iletişime kadar olan adımları ele alacağız.
Proje Kurulumu ve Gerekli Paketler
İlk olarak, yeni bir React projesi oluşturalım ve SurveyJS kütüphanesini kuralım.
npx create-react-app dynamic-forms-frontend
cd dynamic-forms-frontend
npm install survey-react-ui survey-core axios
axios paketini backend ile HTTP istekleri yapmak için kullanacağız.
Form Şemasını Tanımlama (JSON)
SurveyJS, form yapılarını JSON formatında tanımlar. Bu JSON, backend'de saklanacak ve frontend tarafından çekilerek form oluşturulacaktır. İşte basit bir anket formu için örnek bir JSON şeması:
{
"title": "Müşteri Geri Bildirim Formu",
"description": "Hizmetlerimiz hakkındaki görüşlerinizi bizimle paylaşın.",
"pages": [
{
"name": "sayfa1",
"elements": [
{
"type": "text",
"name": "adSoyad",
"title": "Adınız Soyadınız:",
"isRequired": true
},
{
"type": "radiogroup",
"name": "hizmetMemnuniyet",
"title": "Hizmetimizden genel olarak ne kadar memnunsunuz?",
"choices": [
{ "value": "5", "text": "Çok Memnunum" },
{ "value": "4", "text": "Memnunum" },
{ "value": "3", "text": "Orta" },
{ "value": "2", "text": "Memnun Değilim" },
{ "value": "1", "text": "Hiç Memnun Değilim" }
],
"isRequired": true
},
{
"type": "comment",
"name": "ekYorum",
"title": "Ek yorumlarınız var mı?",
"visibleIf": "{hizmetMemnuniyet} < 3"
}
]
}
]
}
Yukarıdaki örnekte, ekYorum alanı hizmetMemnuniyet değeri 3'ten küçükse görünür hale gelir. Bu, SurveyJS'in dinamik form yeteneklerine basit bir örnektir.
Formu Render Etme ve Kullanıcı Girişlerini Yakalama
App.js veya ayrı bir bileşen içinde SurveyJS formunu render edelim.
// src/components/DynamicForm.js
import React, { useState, useEffect } from 'react';
import { Survey } from 'survey-react-ui';
import { StylesManager, Model } from 'survey-core';
import 'survey-core/defaultV2.min.css';
import axios from 'axios';
StylesManager.applyTheme("defaultV2"); // Tema uygulayın
const DynamicForm = ({ formId }) => {
const [surveyModel, setSurveyModel] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const backendUrl = process.env.REACT_APP_BACKEND_URL || 'http://localhost:5000';
useEffect(() => {
const fetchFormSchema = async () => {
try {
const response = await axios.get(${backendUrl}/api/forms/${formId});
const surveyJson = response.data.schema;
const model = new Model(surveyJson);
setSurveyModel(model);
} catch (err) {
console.error("Form şeması çekilirken hata oluştu:", err);
setError("Form yüklenirken bir hata oluştu.");
} finally {
setLoading(false);
}
};
fetchFormSchema();
}, [formId, backendUrl]);
const onComplete = async (sender) => {
const formData = sender.data;
console.log("Form gönderildi:", formData);
try {
await axios.post(${backendUrl}/api/forms/${formId}/submit, formData);
alert("Form başarıyla gönderildi!");
// İsteğe bağlı: Formu sıfırla veya kullanıcıyı başka bir sayfaya yönlendir
} catch (err) {
console.error("Form gönderilirken hata oluştu:", err);
alert("Form gönderilirken bir hata oluştu.");
}
};
if (loading) return Form yükleniyor...;
if (error) return {error};
if (!surveyModel) return Form bulunamadı.;
return ;
};
export default DynamicForm;
App.js içinde kullanımı:
// src/App.js
import React from 'react';
import DynamicForm from './components/DynamicForm';
import './App.css';
function App() {
// Örnek olarak bir form ID'si tanımlayalım.
// Gerçek uygulamada bu ID URL'den veya başka bir yerden gelebilir.
const exampleFormId = '654321098765432109876543'; // MongoDB ObjectId formatında bir ID
return (
Dinamik Form Uygulaması
);
}
export default App;
Backend ile İletişim
Yukarıdaki kodda axios.get ile form şemasını backend'den çekiyor ve axios.post ile doldurulan form verilerini backend'e gönderiyoruz. formId parametresi, hangi formun yükleneceğini veya hangi forma ait verilerin gönderileceğini belirlemek için kullanılır.
Adım Adım Backend Geliştirme (Node.js & MongoDB)
Backend'imiz Node.js ve Express.js ile oluşturulacak, veritabanı olarak da MongoDB kullanacağız. Bu bölüm, backend projesinin kurulumundan API uç noktalarının oluşturulmasına kadar olan süreçleri kapsar.
Proje Kurulumu ve Gerekli Paketler
Yeni bir Node.js projesi oluşturalım ve gerekli paketleri kuralım:
mkdir dynamic-forms-backend
cd dynamic-forms-backend
npm init -y
npm install express mongoose cors dotenv
* express: Web sunucusu ve API oluşturmak için.
* mongoose: MongoDB ile etkileşim kurmak için ODM (Object Data Modeling) kütüphanesi.
* cors: Çapraz kaynak isteklerini (Cross-Origin Resource Sharing) yönetmek için.
* dotenv: Ortam değişkenlerini .env dosyasından yüklemek için.
Proje dizininde bir .env dosyası oluşturalım ve MongoDB bağlantı URI'mizi ekleyelim:
MONGO_URI=mongodb://localhost:27017/dynamicformsdb
PORT=5000
MongoDB Bağlantısı ve Veri Modeli
server.js dosyamızı oluşturalım ve MongoDB bağlantısını kuralım:
// server.js
require('dotenv').config();
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();
const PORT = process.env.PORT || 5000;
const MONGO_URI = process.env.MONGO_URI;
// Middleware'ler
app.use(cors());
app.use(express.json()); // JSON body'leri parse etmek için
// MongoDB bağlantısı
mongoose.connect(MONGO_URI)
.then(() => console.log('MongoDB başarıyla bağlandı.'))
.catch(err => console.error('MongoDB bağlantı hatası:', err));
// Veri Modelleri
const formSchema = new mongoose.Schema({
name: { type: String, required: true, unique: true },
schema: { type: Object, required: true } // SurveyJS JSON şeması
}, { timestamps: true });
const Form = mongoose.model('Form', formSchema);
const submissionSchema = new mongoose.Schema({
formId: { type: mongoose.Schema.Types.ObjectId, ref: 'Form', required: true },
formData: { type: Object, required: true } // Doldurulan form verileri
}, { timestamps: true });
const Submission = mongoose.model('Submission', submissionSchema);
// API Uç Noktaları (aşağıda detaylandırılacak)
// ...
app.listen(PORT, () => {
console.log(Sunucu ${PORT} portunda çalışıyor.);
});
Yukarıdaki kodda iki adet Mongoose modeli tanımladık:
* Form: Dinamik formların JSON şemalarını saklamak için. name alanı formun benzersiz adını, schema alanı ise SurveyJS JSON'unu tutar.
* Submission: Kullanıcıların doldurduğu form verilerini saklamak için. formId alanı hangi forma ait olduğunu belirtir, formData ise doldurulan verileri içerir.
API Uç Noktaları Oluşturma
Şimdi server.js dosyamıza API rotalarını ekleyelim:
// server.js (API Uç Noktaları kısmı)
// Yeni bir form şeması ekleme
app.post('/api/forms', async (req, res) => {
try {
const { name, schema } = req.body;
if (!name || !schema) {
return res.status(400).json({ message: 'Form adı ve şeması zorunludur.' });
}
const newForm = new Form({ name, schema });
await newForm.save();
res.status(201).json(newForm);
} catch (error) {
if (error.code === 11000) { // Duplicate key error
return res.status(409).json({ message: 'Bu isimde bir form zaten mevcut.' });
}
console.error('Form eklenirken hata:', error);
res.status(500).json({ message: 'Sunucu hatası.' });
}
});
// Belirli bir form şemasını ID'ye göre getirme
app.get('/api/forms/:id', async (req, res) => {
try {
const form = await Form.findById(req.params.id);
if (!form) {
return res.status(404).json({ message: 'Form bulunamadı.' });
}
res.status(200).json(form);
} catch (error) {
console.error('Form çekilirken hata:', error);
res.status(500).json({ message: 'Sunucu hatası.' });
}
});
// Belirli bir forma ait gönderimleri listeleme (isteğe bağlı)
app.get('/api/forms/:id/submissions', async (req, res) => {
try {
const submissions = await Submission.find({ formId: req.params.id });
res.status(200).json(submissions);
} catch (error) {
console.error('Gönderimler çekilirken hata:', error);
res.status(500).json({ message: 'Sunucu hatası.' });
}
});
// Form gönderimlerini kaydetme
app.post('/api/forms/:id/submit', async (req, res) => {
try {
const formId = req.params.id;
const formData = req.body;
// Formun gerçekten var olup olmadığını kontrol edebiliriz
const existingForm = await Form.findById(formId);
if (!existingForm) {
return res.status(404).json({ message: 'Gönderim yapılacak form bulunamadı.' });
}
const newSubmission = new Submission({ formId, formData });
await newSubmission.save();
res.status(201).json(newSubmission);
} catch (error) {
console.error('Form gönderimi kaydedilirken hata:', error);
res.status(500).json({ message: 'Sunucu hatası.' });
}
});
// ... (app.listen kodu)
Bu API uç noktaları şunları sağlar:
* POST /api/forms: Yeni bir form şeması eklemek için kullanılır. Genellikle bir yönetici paneli tarafından çağrılır.
* GET /api/forms/:id: Belirli bir formun JSON şemasını frontend'e göndermek için kullanılır.
* POST /api/forms/:id/submit: Kullanıcının doldurduğu form verilerini kaydetmek için kullanılır.
Form Şemalarını ve Gönderimleri Yönetme
Form şemalarını ve gönderimleri yönetmek için basit bir admin paneli oluşturabilir veya Postman/Insomnia gibi araçları kullanabilirsiniz.
Örneğin, Postman ile yeni bir form eklemek için:
* Method: POST
* URL: http://localhost:5000/api/forms
* Headers: Content-Type: application/json
* Body (raw JSON):
{
"name": "MusteriAnketi",
"schema": {
"title": "Müşteri Geri Bildirim Formu",
"description": "Hizmetlerimiz hakkındaki görüşlerinizi bizimle paylaşın.",
"pages": [
{
"name": "sayfa1",
"elements": [
{
"type": "text",
"name": "adSoyad",
"title": "Adınız Soyadınız:",
"isRequired": true
},
{
"type": "radiogroup",
"name": "hizmetMemnuniyet",
"title": "Hizmetimizden genel olarak ne kadar memnunsunuz?",
"choices": [
{ "value": "5", "text": "Çok Memnunum" },
{ "value": "4", "text": "Memnunum" },
{ "value": "3", "text": "Orta" },
{ "value": "2", "text": "Memnun Değilim" },
{ "value": "1", "text": "Hiç Memnun Değilim" }
],
"isRequired": true
}
]
}
]
}
}
Bu işlem sonucunda MongoDB'ye bir form belgesi eklenecek ve döndürülen _id değerini frontend'deki exampleFormId değişkenine atayabilirsiniz.
Uygulamanın Test Edilmesi ve Dağıtımı
Uygulamayı geliştirdikten sonra, her iki katmanın da beklendiği gibi çalıştığından emin olmak için test etmek ve ardından canlıya almak önemlidir.
Geliştirme Ortamında Test
* Backend'i Başlatın: dynamic-forms-backend dizininde node server.js veya nodemon server.js (nodemon kuruluysa) komutunu çalıştırın. Konsolda "MongoDB başarıyla bağlandı" ve "Sunucu 5000 portunda çalışıyor" mesajlarını görmelisiniz.
* Frontend'i Başlatın: dynamic-forms-frontend dizininde npm start komutunu çalıştırın. Bu, tarayıcınızda React uygulamasını açacaktır (genellikle http://localhost:3000).
* Form Oluşturma ve Gönderme: Frontend'de gördüğünüz formu doldurun ve gönderin. Backend konsolunda form gönderimiyle ilgili logları görmeli, MongoDB'de yeni bir Submission belgesinin oluştuğunu doğrulamalısınız.
Güvenlik ve Performans İpuçları
* Veri Doğrulama: Hem frontend'de (SurveyJS'in yerleşik doğrulama kuralları) hem de backend'de (Express middleware veya Mongoose şemaları ile) veri doğrulama uygulayın. Bu, hatalı veya kötü niyetli verilerin veritabanına kaydedilmesini önler.
* Kimlik Doğrulama ve Yetkilendirme: Form şemalarını oluşturma, güncelleme veya silme gibi hassas işlemler için kimlik doğrulama (örneğin JWT) ve yetkilendirme mekanizmaları uygulayın. Herkesin form şemalarını değiştirememesi gerekir.
* CORS Politikaları: cors middleware'ini kullanırken, üretim ortamında belirli domainlere izin veren daha kısıtlı bir politika uygulayın. app.use(cors({ origin: 'http://yourfrontenddomain.com' })); gibi.
* Hata Yönetimi: Uygulamanızın her katmanında kapsamlı hata yönetimi uygulayın. Kullanıcıya dostça hata mesajları gösterirken, sunucu tarafında detaylı loglama yapın.
* Performans Optimizasyonu: Büyük ölçekli uygulamalar için veritabanı indekslemesi, sorgu optimizasyonu ve önbellekleme stratejilerini düşünün.
Dağıtım Stratejileri
* Frontend Dağıtımı: React uygulamanızı Vercel, Netlify, AWS S3 + CloudFront gibi statik site barındırma hizmetlerine dağıtabilirsiniz. npm run build komutuyla üretim için optimize edilmiş bir yapı oluşturulur.
* Backend Dağıtımı: Node.js backend'inizi Heroku, AWS EC2/Lambda, Google Cloud Run, DigitalOcean Droplets gibi platformlara dağıtabilirsiniz. Bir Process Manager (PM2 gibi) kullanarak uygulamanızın sürekli çalışmasını sağlamak ve yeniden başlatmaları yönetmek faydalı olacaktır.
* Veritabanı Dağıtımı: MongoDB'yi MongoDB Atlas gibi bulut tabanlı bir hizmette barındırmak veya kendi sunucunuzda kurmak mümkündür.
Sonuç
Bu makalede, React, Survey