5. Veri Kayd\u0131:<\/strong> Backend, gelen veriyi i\u015fler, do\u011frular ve MongoDB’ye yeni bir form g\u00f6nderimi belgesi olarak kaydeder.<\/li>\n<\/ul>\nAd\u0131m Ad\u0131m Frontend Geli\u015ftirme (React & SurveyJS)<\/h2>\n
Frontend uygulamam\u0131z\u0131 React ve SurveyJS kullanarak geli\u015ftirece\u011fiz. Bu b\u00f6l\u00fcmde, projenin kurulumundan formun render edilmesine ve backend ile ileti\u015fime kadar olan ad\u0131mlar\u0131 ele alaca\u011f\u0131z.<\/p>\n
Proje Kurulumu ve Gerekli Paketler<\/h3>\n
\u0130lk olarak, yeni bir React projesi olu\u015ftural\u0131m ve SurveyJS k\u00fct\u00fcphanesini kural\u0131m.<\/p>\n
\nnpx create-react-app dynamic-forms-frontend\ncd dynamic-forms-frontend\nnpm install survey-react-ui survey-core axios\n<\/pre>\n<\/code>
\naxios<\/code> paketini backend ile HTTP istekleri yapmak i\u00e7in kullanaca\u011f\u0131z.<\/p>\nForm \u015eemas\u0131n\u0131 Tan\u0131mlama (JSON)<\/h3>\n
SurveyJS, form yap\u0131lar\u0131n\u0131 JSON format\u0131nda tan\u0131mlar. Bu JSON, backend'de saklanacak ve frontend taraf\u0131ndan \u00e7ekilerek form olu\u015fturulacakt\u0131r. \u0130\u015fte basit bir anket formu i\u00e7in \u00f6rnek bir JSON \u015femas\u0131:<\/p>\n
\n{\n \"title\": \"M\u00fc\u015fteri Geri Bildirim Formu\",\n \"description\": \"Hizmetlerimiz hakk\u0131ndaki g\u00f6r\u00fc\u015flerinizi bizimle payla\u015f\u0131n.\",\n \"pages\": [\n {\n \"name\": \"sayfa1\",\n \"elements\": [\n {\n \"type\": \"text\",\n \"name\": \"adSoyad\",\n \"title\": \"Ad\u0131n\u0131z Soyad\u0131n\u0131z:\",\n \"isRequired\": true\n },\n {\n \"type\": \"radiogroup\",\n \"name\": \"hizmetMemnuniyet\",\n \"title\": \"Hizmetimizden genel olarak ne kadar memnunsunuz?\",\n \"choices\": [\n { \"value\": \"5\", \"text\": \"\u00c7ok Memnunum\" },\n { \"value\": \"4\", \"text\": \"Memnunum\" },\n { \"value\": \"3\", \"text\": \"Orta\" },\n { \"value\": \"2\", \"text\": \"Memnun De\u011filim\" },\n { \"value\": \"1\", \"text\": \"Hi\u00e7 Memnun De\u011filim\" }\n ],\n \"isRequired\": true\n },\n {\n \"type\": \"comment\",\n \"name\": \"ekYorum\",\n \"title\": \"Ek yorumlar\u0131n\u0131z var m\u0131?\",\n \"visibleIf\": \"{hizmetMemnuniyet} < 3\"\n }\n ]\n }\n ]\n}\n<\/pre>\n<\/code>
\nYukar\u0131daki \u00f6rnekte, ekYorum<\/code> alan\u0131 hizmetMemnuniyet<\/code> de\u011feri 3'ten k\u00fc\u00e7\u00fckse g\u00f6r\u00fcn\u00fcr hale gelir. Bu, SurveyJS'in dinamik form yeteneklerine basit bir \u00f6rnektir.<\/p>\nFormu Render Etme ve Kullan\u0131c\u0131 Giri\u015flerini Yakalama<\/h3>\n
App.js<\/code> veya ayr\u0131 bir bile\u015fen i\u00e7inde SurveyJS formunu render edelim.<\/p>\n\n\/\/ src\/components\/DynamicForm.js\nimport React, { useState, useEffect } from 'react';\nimport { Survey } from 'survey-react-ui';\nimport { StylesManager, Model } from 'survey-core';\nimport 'survey-core\/defaultV2.min.css';\nimport axios from 'axios';\n\nStylesManager.applyTheme(\"defaultV2\"); \/\/ Tema uygulay\u0131n\n\nconst DynamicForm = ({ formId }) => {\n const [surveyModel, setSurveyModel] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const backendUrl = process.env.REACT_APP_BACKEND_URL || 'http:\/\/localhost:5000';\n\n useEffect(() => {\n const fetchFormSchema = async () => {\n try {\n const response = await axios.get(${backendUrl}\/api\/forms\/${formId}<\/code>);\n const surveyJson = response.data.schema;\n const model = new Model(surveyJson);\n setSurveyModel(model);\n } catch (err) {\n console.error(\"Form \u015femas\u0131 \u00e7ekilirken hata olu\u015ftu:\", err);\n setError(\"Form y\u00fcklenirken bir hata olu\u015ftu.\");\n } finally {\n setLoading(false);\n }\n };\n\n fetchFormSchema();\n }, [formId, backendUrl]);\n\n const onComplete = async (sender) => {\n const formData = sender.data;\n console.log(\"Form g\u00f6nderildi:\", formData);\n try {\n await axios.post(${backendUrl}\/api\/forms\/${formId}\/submit<\/code>, formData);\n alert(\"Form ba\u015far\u0131yla g\u00f6nderildi!\");\n \/\/ \u0130ste\u011fe ba\u011fl\u0131: Formu s\u0131f\u0131rla veya kullan\u0131c\u0131y\u0131 ba\u015fka bir sayfaya y\u00f6nlendir\n } catch (err) {\n console.error(\"Form g\u00f6nderilirken hata olu\u015ftu:\", err);\n alert(\"Form g\u00f6nderilirken bir hata olu\u015ftu.\");\n }\n };\n\n if (loading) return Form y\u00fckleniyor...<\/div>;\n if (error) return
{error}<\/div>;\n if (!surveyModel) return
Form bulunamad\u0131.<\/div>;\n\n return
;\n};\n\nexport default DynamicForm;\n<\/pre>\n
<\/code>
\nApp.js<\/code> i\u00e7inde kullan\u0131m\u0131:<\/p>\n\n\/\/ src\/App.js\nimport React from 'react';\nimport DynamicForm from '.\/components\/DynamicForm';\nimport '.\/App.css';\n\nfunction App() {\n \/\/ \u00d6rnek olarak bir form ID'si tan\u0131mlayal\u0131m.\n \/\/ Ger\u00e7ek uygulamada bu ID URL'den veya ba\u015fka bir yerden gelebilir.\n const exampleFormId = '654321098765432109876543'; \/\/ MongoDB ObjectId format\u0131nda bir ID\n\n return (\n \n
\n Dinamik Form Uygulamas\u0131<\/h2>\n <\/header>\n \n \n <\/main>\n <\/div>\n );\n}\n\nexport default App;\n<\/pre>\n<\/code><\/p>\n
Backend ile \u0130leti\u015fim<\/h3>\n
Yukar\u0131daki kodda axios.get<\/code> ile form \u015femas\u0131n\u0131 backend'den \u00e7ekiyor ve axios.post<\/code> ile doldurulan form verilerini backend'e g\u00f6nderiyoruz. formId<\/code> parametresi, hangi formun y\u00fcklenece\u011fini veya hangi forma ait verilerin g\u00f6nderilece\u011fini belirlemek i\u00e7in kullan\u0131l\u0131r.<\/p>\nAd\u0131m Ad\u0131m Backend Geli\u015ftirme (Node.js & MongoDB)<\/h2>\n
Backend'imiz Node.js ve Express.js ile olu\u015fturulacak, veritaban\u0131 olarak da MongoDB kullanaca\u011f\u0131z. Bu b\u00f6l\u00fcm, backend projesinin kurulumundan API u\u00e7 noktalar\u0131n\u0131n olu\u015fturulmas\u0131na kadar olan s\u00fcre\u00e7leri kapsar.<\/p>\n
Proje Kurulumu ve Gerekli Paketler<\/h3>\n
Yeni bir Node.js projesi olu\u015ftural\u0131m ve gerekli paketleri kural\u0131m:<\/p>\n
\nmkdir dynamic-forms-backend\ncd dynamic-forms-backend\nnpm init -y\nnpm install express mongoose cors dotenv\n<\/pre>\n<\/code>
\n* express<\/code>: Web sunucusu ve API olu\u015fturmak i\u00e7in.
\n* mongoose<\/code>: MongoDB ile etkile\u015fim kurmak i\u00e7in ODM (Object Data Modeling) k\u00fct\u00fcphanesi.
\n* cors<\/code>: \u00c7apraz kaynak isteklerini (Cross-Origin Resource Sharing) y\u00f6netmek i\u00e7in.
\n* dotenv<\/code>: Ortam de\u011fi\u015fkenlerini .env<\/code> dosyas\u0131ndan y\u00fcklemek i\u00e7in.<\/p>\nProje dizininde bir .env<\/code> dosyas\u0131 olu\u015ftural\u0131m ve MongoDB ba\u011flant\u0131 URI'mizi ekleyelim:<\/p>\n\nMONGO_URI=mongodb:\/\/localhost:27017\/dynamicformsdb\nPORT=5000\n<\/pre>\n<\/code><\/p>\n
MongoDB Ba\u011flant\u0131s\u0131 ve Veri Modeli<\/h3>\n
server.js<\/code> dosyam\u0131z\u0131 olu\u015ftural\u0131m ve MongoDB ba\u011flant\u0131s\u0131n\u0131 kural\u0131m:<\/p>\n\n\/\/ server.js\nrequire('dotenv').config();\nconst express = require('express');\nconst mongoose = require('mongoose');\nconst cors = require('cors');\n\nconst app = express();\nconst PORT = process.env.PORT || 5000;\nconst MONGO_URI = process.env.MONGO_URI;\n\n\/\/ Middleware'ler\napp.use(cors());\napp.use(express.json()); \/\/ JSON body'leri parse etmek i\u00e7in\n\n\/\/ MongoDB ba\u011flant\u0131s\u0131\nmongoose.connect(MONGO_URI)\n .then(() => console.log('MongoDB ba\u015far\u0131yla ba\u011fland\u0131.'))\n .catch(err => console.error('MongoDB ba\u011flant\u0131 hatas\u0131:', err));\n\n\/\/ Veri Modelleri\nconst formSchema = new mongoose.Schema({\n name: { type: String, required: true, unique: true },\n schema: { type: Object, required: true } \/\/ SurveyJS JSON \u015femas\u0131\n}, { timestamps: true });\n\nconst Form = mongoose.model('Form', formSchema);\n\nconst submissionSchema = new mongoose.Schema({\n formId: { type: mongoose.Schema.Types.ObjectId, ref: 'Form', required: true },\n formData: { type: Object, required: true } \/\/ Doldurulan form verileri\n}, { timestamps: true });\n\nconst Submission = mongoose.model('Submission', submissionSchema);\n\n\/\/ API U\u00e7 Noktalar\u0131 (a\u015fa\u011f\u0131da detayland\u0131r\u0131lacak)\n\/\/ ...\n\napp.listen(PORT, () => {\n console.log(Sunucu ${PORT} portunda \u00e7al\u0131\u015f\u0131yor.<\/code>);\n});\n<\/pre>\n<\/code>
\nYukar\u0131daki kodda iki adet Mongoose modeli tan\u0131mlad\u0131k:
\n* Form<\/code>: Dinamik formlar\u0131n JSON \u015femalar\u0131n\u0131 saklamak i\u00e7in. name<\/code> alan\u0131 formun benzersiz ad\u0131n\u0131, schema<\/code> alan\u0131 ise SurveyJS JSON'unu tutar.
\n* Submission<\/code>: Kullan\u0131c\u0131lar\u0131n doldurdu\u011fu form verilerini saklamak i\u00e7in. formId<\/code> alan\u0131 hangi forma ait oldu\u011funu belirtir, formData<\/code> ise doldurulan verileri i\u00e7erir.<\/p>\nAPI U\u00e7 Noktalar\u0131 Olu\u015fturma<\/h3>\n
\u015eimdi server.js<\/code> dosyam\u0131za API rotalar\u0131n\u0131 ekleyelim:<\/p>\n\n\/\/ server.js (API U\u00e7 Noktalar\u0131 k\u0131sm\u0131)\n\n\/\/ Yeni bir form \u015femas\u0131 ekleme\napp.post('\/api\/forms', async (req, res) => {\n try {\n const { name, schema } = req.body;\n if (!name || !schema) {\n return res.status(400).json({ message: 'Form ad\u0131 ve \u015femas\u0131 zorunludur.' });\n }\n const newForm = new Form({ name, schema });\n await newForm.save();\n res.status(201).json(newForm);\n } catch (error) {\n if (error.code === 11000) { \/\/ Duplicate key error\n return res.status(409).json({ message: 'Bu isimde bir form zaten mevcut.' });\n }\n console.error('Form eklenirken hata:', error);\n res.status(500).json({ message: 'Sunucu hatas\u0131.' });\n }\n});\n\n\/\/ Belirli bir form \u015femas\u0131n\u0131 ID'ye g\u00f6re getirme\napp.get('\/api\/forms\/:id', async (req, res) => {\n try {\n const form = await Form.findById(req.params.id);\n if (!form) {\n return res.status(404).json({ message: 'Form bulunamad\u0131.' });\n }\n res.status(200).json(form);\n } catch (error) {\n console.error('Form \u00e7ekilirken hata:', error);\n res.status(500).json({ message: 'Sunucu hatas\u0131.' });\n }\n});\n\n\/\/ Belirli bir forma ait g\u00f6nderimleri listeleme (iste\u011fe ba\u011fl\u0131)\napp.get('\/api\/forms\/:id\/submissions', async (req, res) => {\n try {\n const submissions = await Submission.find({ formId: req.params.id });\n res.status(200).json(submissions);\n } catch (error) {\n console.error('G\u00f6nderimler \u00e7ekilirken hata:', error);\n res.status(500).json({ message: 'Sunucu hatas\u0131.' });\n }\n});\n\n\/\/ Form g\u00f6nderimlerini kaydetme\napp.post('\/api\/forms\/:id\/submit', async (req, res) => {\n try {\n const formId = req.params.id;\n const formData = req.body;\n\n \/\/ Formun ger\u00e7ekten var olup olmad\u0131\u011f\u0131n\u0131 kontrol edebiliriz\n const existingForm = await Form.findById(formId);\n if (!existingForm) {\n return res.status(404).json({ message: 'G\u00f6nderim yap\u0131lacak form bulunamad\u0131.' });\n }\n\n const newSubmission = new Submission({ formId, formData });\n await newSubmission.save();\n res.status(201).json(newSubmission);\n } catch (error) {\n console.error('Form g\u00f6nderimi kaydedilirken hata:', error);\n res.status(500).json({ message: 'Sunucu hatas\u0131.' });\n }\n});\n\n\/\/ ... (app.listen kodu)\n<\/pre>\n<\/code>
\nBu API u\u00e7 noktalar\u0131 \u015funlar\u0131 sa\u011flar:
\n* POST \/api\/forms<\/code>: Yeni bir form \u015femas\u0131 eklemek i\u00e7in kullan\u0131l\u0131r. Genellikle bir y\u00f6netici paneli taraf\u0131ndan \u00e7a\u011fr\u0131l\u0131r.
\n* GET \/api\/forms\/:id<\/code>: Belirli bir formun JSON \u015femas\u0131n\u0131 frontend'e g\u00f6ndermek i\u00e7in kullan\u0131l\u0131r.
\n* POST \/api\/forms\/:id\/submit<\/code>: Kullan\u0131c\u0131n\u0131n doldurdu\u011fu form verilerini kaydetmek i\u00e7in kullan\u0131l\u0131r.<\/p>\nForm \u015eemalar\u0131n\u0131 ve G\u00f6nderimleri Y\u00f6netme<\/h3>\n
Form \u015femalar\u0131n\u0131 ve g\u00f6nderimleri y\u00f6netmek i\u00e7in basit bir admin paneli olu\u015fturabilir veya Postman\/Insomnia gibi ara\u00e7lar\u0131 kullanabilirsiniz.
\n\u00d6rne\u011fin, Postman ile yeni bir form eklemek i\u00e7in:
\n* Method: POST<\/code>
\n* URL: http:\/\/localhost:5000\/api\/forms<\/code>
\n* Headers: Content-Type: application\/json<\/code>
\n* Body (raw JSON):<\/p>\n\n {\n \"name\": \"MusteriAnketi\",\n \"schema\": {\n \"title\": \"M\u00fc\u015fteri Geri Bildirim Formu\",\n \"description\": \"Hizmetlerimiz hakk\u0131ndaki g\u00f6r\u00fc\u015flerinizi bizimle payla\u015f\u0131n.\",\n \"pages\": [\n {\n \"name\": \"sayfa1\",\n \"elements\": [\n {\n \"type\": \"text\",\n \"name\": \"adSoyad\",\n \"title\": \"Ad\u0131n\u0131z Soyad\u0131n\u0131z:\",\n \"isRequired\": true\n },\n {\n \"type\": \"radiogroup\",\n \"name\": \"hizmetMemnuniyet\",\n \"title\": \"Hizmetimizden genel olarak ne kadar memnunsunuz?\",\n \"choices\": [\n { \"value\": \"5\", \"text\": \"\u00c7ok Memnunum\" },\n { \"value\": \"4\", \"text\": \"Memnunum\" },\n { \"value\": \"3\", \"text\": \"Orta\" },\n { \"value\": \"2\", \"text\": \"Memnun De\u011filim\" },\n { \"value\": \"1\", \"text\": \"Hi\u00e7 Memnun De\u011filim\" }\n ],\n \"isRequired\": true\n }\n ]\n }\n ]\n }\n }\n <\/pre>\n<\/code>
\nBu i\u015flem sonucunda MongoDB'ye bir form belgesi eklenecek ve d\u00f6nd\u00fcr\u00fclen _id<\/code> de\u011ferini frontend'deki exampleFormId<\/code> de\u011fi\u015fkenine atayabilirsiniz.<\/p>\nUygulaman\u0131n Test Edilmesi ve Da\u011f\u0131t\u0131m\u0131<\/h2>\n
Uygulamay\u0131 geli\u015ftirdikten sonra, her iki katman\u0131n da beklendi\u011fi gibi \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olmak i\u00e7in test etmek ve ard\u0131ndan canl\u0131ya almak \u00f6nemlidir.<\/p>\n
Geli\u015ftirme Ortam\u0131nda Test<\/h3>\n
* Backend'i Ba\u015flat\u0131n:<\/strong> dynamic-forms-backend<\/code> dizininde node server.js<\/code> veya nodemon server.js<\/code> (nodemon kuruluysa) komutunu \u00e7al\u0131\u015ft\u0131r\u0131n. Konsolda \"MongoDB ba\u015far\u0131yla ba\u011fland\u0131\" ve \"Sunucu 5000 portunda \u00e7al\u0131\u015f\u0131yor\" mesajlar\u0131n\u0131 g\u00f6rmelisiniz.
\n* Frontend'i Ba\u015flat\u0131n:<\/strong> dynamic-forms-frontend<\/code> dizininde npm start<\/code> komutunu \u00e7al\u0131\u015ft\u0131r\u0131n. Bu, taray\u0131c\u0131n\u0131zda React uygulamas\u0131n\u0131 a\u00e7acakt\u0131r (genellikle http:\/\/localhost:3000<\/code>).
\n* Form Olu\u015fturma ve G\u00f6nderme:<\/strong> Frontend'de g\u00f6rd\u00fc\u011f\u00fcn\u00fcz formu doldurun ve g\u00f6nderin. Backend konsolunda form g\u00f6nderimiyle ilgili loglar\u0131 g\u00f6rmeli, MongoDB'de yeni bir Submission<\/code> belgesinin olu\u015ftu\u011funu do\u011frulamal\u0131s\u0131n\u0131z.<\/p>\nG\u00fcvenlik ve Performans \u0130pu\u00e7lar\u0131<\/h3>\n
* Veri Do\u011frulama:<\/strong> Hem frontend'de (SurveyJS'in yerle\u015fik do\u011frulama kurallar\u0131) hem de backend'de (Express middleware veya Mongoose \u015femalar\u0131 ile) veri do\u011frulama uygulay\u0131n. Bu, hatal\u0131 veya k\u00f6t\u00fc niyetli verilerin veritaban\u0131na kaydedilmesini \u00f6nler.
\n* Kimlik Do\u011frulama ve Yetkilendirme:<\/strong> Form \u015femalar\u0131n\u0131 olu\u015fturma, g\u00fcncelleme veya silme gibi hassas i\u015flemler i\u00e7in kimlik do\u011frulama (\u00f6rne\u011fin JWT) ve yetkilendirme mekanizmalar\u0131 uygulay\u0131n. Herkesin form \u015femalar\u0131n\u0131 de\u011fi\u015ftirememesi gerekir.
\n* CORS Politikalar\u0131:<\/strong> cors<\/code> middleware'ini kullan\u0131rken, \u00fcretim ortam\u0131nda belirli domainlere izin veren daha k\u0131s\u0131tl\u0131 bir politika uygulay\u0131n. app.use(cors({ origin: 'http:\/\/yourfrontenddomain.com' }));<\/code> gibi.
\n* Hata Y\u00f6netimi:<\/strong> Uygulaman\u0131z\u0131n her katman\u0131nda kapsaml\u0131 hata y\u00f6netimi uygulay\u0131n. Kullan\u0131c\u0131ya dost\u00e7a hata mesajlar\u0131 g\u00f6sterirken, sunucu taraf\u0131nda detayl\u0131 loglama yap\u0131n.
\n* Performans Optimizasyonu:<\/strong> B\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar i\u00e7in veritaban\u0131 indekslemesi, sorgu optimizasyonu ve \u00f6nbellekleme stratejilerini d\u00fc\u015f\u00fcn\u00fcn.<\/p>\nDa\u011f\u0131t\u0131m Stratejileri<\/h3>\n
* Frontend Da\u011f\u0131t\u0131m\u0131:<\/strong> React uygulaman\u0131z\u0131 Vercel, Netlify, AWS S3 + CloudFront gibi statik site bar\u0131nd\u0131rma hizmetlerine da\u011f\u0131tabilirsiniz. npm run build<\/code> komutuyla \u00fcretim i\u00e7in optimize edilmi\u015f bir yap\u0131 olu\u015fturulur.
\n* Backend Da\u011f\u0131t\u0131m\u0131:<\/strong> Node.js backend'inizi Heroku, AWS EC2\/Lambda, Google Cloud Run, DigitalOcean Droplets gibi platformlara da\u011f\u0131tabilirsiniz. Bir Process Manager (PM2 gibi) kullanarak uygulaman\u0131z\u0131n s\u00fcrekli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak ve yeniden ba\u015flatmalar\u0131 y\u00f6netmek faydal\u0131 olacakt\u0131r.
\n* Veritaban\u0131 Da\u011f\u0131t\u0131m\u0131:<\/strong> MongoDB'yi MongoDB Atlas gibi bulut tabanl\u0131 bir hizmette bar\u0131nd\u0131rmak veya kendi sunucunuzda kurmak m\u00fcmk\u00fcnd\u00fcr.<\/p>\nSonu\u00e7<\/h2>\n
Bu makalede, React, Survey<\/p>\n","protected":false},"excerpt":{"rendered":"A\u015fa\u011f\u0131daki basit liste, veri ak\u0131\u015f\u0131n\u0131 \u00f6zetlemektedir:","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[676],"tags":[],"class_list":{"0":"post-36942","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-mongodb","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
Dinamik Formlar\u0131 React, SurveyJS, Node.js ve MongoDB ile Olu\u015fturma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dinamik Formlar\u0131 React, SurveyJS, Node.js ve MongoDB ile Olu\u015fturma Rehberi\" \/>\n<meta property=\"og:description\" content=\"A\u015fa\u011f\u0131daki basit liste, veri ak\u0131\u015f\u0131n\u0131 \u00f6zetlemektedir:\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-25T05:00:43+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Dinamik Formlar\u0131 React, SurveyJS, Node.js ve MongoDB ile Olu\u015fturma Rehberi\",\"datePublished\":\"2025-12-25T05:00:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/\"},\"wordCount\":2206,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"MongoDB\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/\",\"name\":\"Dinamik Formlar\u0131 React, SurveyJS, Node.js ve MongoDB ile Olu\u015fturma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-25T05:00:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dinamik Formlar\u0131 React, SurveyJS, Node.js ve MongoDB ile Olu\u015fturma Rehberi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Dinamik Formlar\u0131 React, SurveyJS, Node.js ve MongoDB ile Olu\u015fturma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"Dinamik Formlar\u0131 React, SurveyJS, Node.js ve MongoDB ile Olu\u015fturma Rehberi","og_description":"A\u015fa\u011f\u0131daki basit liste, veri ak\u0131\u015f\u0131n\u0131 \u00f6zetlemektedir:","og_url":"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-25T05:00:43+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Dinamik Formlar\u0131 React, SurveyJS, Node.js ve MongoDB ile Olu\u015fturma Rehberi","datePublished":"2025-12-25T05:00:43+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/"},"wordCount":2206,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["MongoDB"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/","name":"Dinamik Formlar\u0131 React, SurveyJS, Node.js ve MongoDB ile Olu\u015fturma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-25T05:00:43+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/dinamik-formlari-react-surveyjs-node-js-ve-mongodb-ile-olusturma-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Dinamik Formlar\u0131 React, SurveyJS, Node.js ve MongoDB ile Olu\u015fturma Rehberi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=36942"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36942\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=36942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=36942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=36942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}