Modern web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli de\u011fi\u015fen teknolojileri ve karma\u015f\u0131k yap\u0131lar\u0131yla adeta bir labirent. Peki, OSD600 Lab 5 gibi bir deneyim, bu labirentte yolunuzu bulman\u0131z ve ger\u00e7ek d\u00fcnya projeleri geli\u015ftirmek i\u00e7in gerekli yetkinlikleri kazanman\u0131z i\u00e7in size nas\u0131l bir f\u0131rsat sunuyor? Bu makale, OSD600 Lab 5’in kap\u0131lar\u0131n\u0131 aral\u0131yor, temel kavramlardan ileri d\u00fczey da\u011f\u0131t\u0131m stratejilerine kadar modern web uygulamas\u0131 geli\u015ftirmenin t\u00fcm a\u015famalar\u0131n\u0131 ad\u0131m ad\u0131m inceliyor. Haz\u0131rlan\u0131n, \u00e7\u00fcnk\u00fc bu laboratuvar sadece kod yazmaktan \u00e7ok daha fazlas\u0131n\u0131 vaat ediyor: sorun \u00e7\u00f6zme, entegrasyon ve bir b\u00fct\u00fcn olarak \u00e7al\u0131\u015fan sistemler kurma sanat\u0131n\u0131 \u00f6\u011freneceksiniz.<\/p>\n
OSD600, genellikle A\u00e7\u0131k Kaynak Geli\u015ftirme (Open Source Development) prensiplerini ve pratiklerini \u00f6\u011freten ileri seviye bir dersin par\u00e7as\u0131d\u0131r. Bu ba\u011flamda, “Lab 5” ise dersin en kritik, genellikle t\u00fcm \u00f6\u011frenilen bilgilerin bir araya getirildi\u011fi ve ger\u00e7ek bir uygulama projesine d\u00f6n\u00fc\u015ft\u00fcr\u00fcld\u00fc\u011f\u00fc bir k\u00f6\u015fe ta\u015f\u0131 g\u00f6revini \u00fcstlenir. Bu laboratuvar, \u00f6\u011frencilerin bireysel bile\u015fenler (frontend, backend, veritaban\u0131) hakk\u0131nda edindikleri bilgileri entegre etmelerini, birbiriyle uyumlu \u00e7al\u0131\u015fan bir sistem in\u015fa etmelerini ve bu sistemi canl\u0131ya alma s\u00fcre\u00e7lerini deneyimlemelerini hedefler. Dolay\u0131s\u0131yla, OSD600 Lab 5 sadece teknik bir egzersiz olman\u0131n \u00f6tesinde, bir b\u00fct\u00fcn olarak yaz\u0131l\u0131m ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc anlamak ve pratik uygulamalar geli\u015ftirmek i\u00e7in benzersiz bir f\u0131rsat sunar.<\/p>\n
Bu lab\u0131n \u00f6nemi, g\u00fcn\u00fcm\u00fcz\u00fcn h\u0131zla de\u011fi\u015fen teknoloji ekosisteminde aran\u0131lan “full-stack” yetkinlikleri kazand\u0131rmas\u0131ndan ileri gelir. Bir yaz\u0131l\u0131m projesi, sadece kullan\u0131c\u0131 aray\u00fcz\u00fcnden ya da veritaban\u0131 y\u00f6netiminden ibaret de\u011fildir; bunlar aras\u0131ndaki kusursuz ileti\u015fimi, g\u00fcvenli\u011fi, performans\u0131 ve s\u00fcrd\u00fcr\u00fclebilirli\u011fi sa\u011flamak \u00e7ok daha karma\u015f\u0131k bir i\u015ftir. OSD600 Lab 5, \u00f6\u011frencilere bu \u00e7ok katmanl\u0131 yap\u0131y\u0131 ba\u015ftan sona tasarlama, geli\u015ftirme ve da\u011f\u0131tma \u015fans\u0131 vererek, sadece teorik bilgiyi de\u011fil, ayn\u0131 zamanda pratik problem \u00e7\u00f6zme becerilerini de geli\u015ftirir. \u00d6rne\u011fin, bir e-ticaret uygulamas\u0131n\u0131n kullan\u0131c\u0131lar\u0131n \u00fcr\u00fcnleri listeleyebildi\u011fi, sepete ekleyebildi\u011fi ve \u00f6deme yapabildi\u011fi bir senaryoyu ele alal\u0131m. Bu laboratuvar, sadece React ile bir aray\u00fcz tasarlamay\u0131 de\u011fil, ayn\u0131 zamanda Node.js ile g\u00fcvenli bir API olu\u015fturmay\u0131, MongoDB gibi bir veritaban\u0131nda \u00fcr\u00fcn ve kullan\u0131c\u0131 verilerini saklamay\u0131 ve t\u00fcm bu bile\u015fenleri Docker kullanarak bir araya getirip bulutta canl\u0131ya almay\u0131 kapsar. Bu b\u00fct\u00fcnsel yakla\u015f\u0131m, \u00f6\u011frencilerin mezun olduklar\u0131nda sekt\u00f6r\u00fcn beklentilerini kar\u015f\u0131layacak donan\u0131ma sahip olmalar\u0131n\u0131 sa\u011flar.<\/p>\n
Ayr\u0131ca, bu t\u00fcr bir laboratuvar, ekip \u00e7al\u0131\u015fmas\u0131 ve a\u00e7\u0131k kaynak k\u00fclt\u00fcr\u00fcyle i\u00e7 i\u00e7e oldu\u011fu i\u00e7in i\u015fbirli\u011fi becerilerini de peki\u015ftirir. Genellikle, Lab 5 projeleri bireysel olmas\u0131na ra\u011fmen, sorun giderme ve \u00e7\u00f6z\u00fcm aray\u0131\u015f\u0131nda akranlarla etkile\u015fim ka\u00e7\u0131n\u0131lmazd\u0131r. Bu da modern yaz\u0131l\u0131m geli\u015ftirme metodolojilerinde temel bir beceri olan bilgi payla\u015f\u0131m\u0131n\u0131 ve topluluk deste\u011fini deneyimlemeye olanak tan\u0131r. K\u0131sacas\u0131, OSD600 Lab 5, sadece kod yazma becerilerinizi de\u011fil, ayn\u0131 zamanda m\u00fchendislik d\u00fc\u015f\u00fcnce yap\u0131n\u0131z\u0131, problem \u00e7\u00f6zme yetene\u011finizi ve i\u015fbirli\u011fi ruhunuzu geli\u015ftiren kapsaml\u0131 bir \u00f6\u011frenme s\u00fcrecidir. Bu nedenle, bu laboratuvara ayr\u0131lan zaman ve \u00e7aba, kariyeriniz i\u00e7in yapaca\u011f\u0131n\u0131z en de\u011ferli yat\u0131r\u0131mlardan biri olacakt\u0131r. \u015eimdi gelin, bu kapsaml\u0131 projenin temel ta\u015flar\u0131n\u0131 nas\u0131l d\u00f6\u015feyece\u011fimize dair detaylara inelim.<\/p>\n
Her b\u00fcy\u00fck projenin temelinde sa\u011flam bir ba\u015flang\u0131\u00e7 yatar. OSD600 Lab 5 gibi karma\u015f\u0131k bir uygulaman\u0131n geli\u015ftirme ortam\u0131n\u0131 do\u011fru bir \u015fekilde kurmak, projenin geri kalan\u0131n\u0131n sorunsuz ilerlemesi i\u00e7in kritik \u00f6neme sahiptir. Bu ad\u0131m, hem frontend hem de backend bile\u015fenleri i\u00e7in gerekli olan ara\u00e7lar\u0131, k\u00fct\u00fcphaneleri ve yap\u0131land\u0131rmalar\u0131 i\u00e7erir. \u0130lk olarak, modern JavaScript tabanl\u0131 uygulamalar i\u00e7in vazge\u00e7ilmez olan Node.js ve paket y\u00f6neticisi (npm veya yarn) sisteminizde kurulu olmal\u0131d\u0131r. Bu ara\u00e7lar, React, Vue veya Angular gibi frontend \u00e7er\u00e7evelerini ve Express gibi backend \u00e7er\u00e7evelerini \u00e7al\u0131\u015ft\u0131rmak i\u00e7in gereklidir.<\/p>\n
Frontend taraf\u0131nda, genellikle bir CLI (Komut Sat\u0131r\u0131 Aray\u00fcz\u00fc) arac\u0131 kullan\u0131l\u0131r. \u00d6rne\u011fin, React i\u00e7in:<\/p>\n
\n npx create-react-app my-osd600-lab5-frontend\n cd my-osd600-lab5-frontend\n npm start\n <\/pre>\n<\/code><\/p>\n
Bu komutlar, projenizin temel React yap\u0131s\u0131n\u0131 olu\u015fturacak ve geli\u015ftirme sunucusunu ba\u015flatacakt\u0131r. Backend i\u00e7in ise, Node.js ve Express kullanarak basit bir sunucu kurmakla ba\u015flar\u0131z. Proje k\u00f6k dizininizde ayr\u0131 bir klas\u00f6r olu\u015fturmak ve orada Express uygulamas\u0131n\u0131 ba\u015flatmak iyi bir uygulamad\u0131r:<\/p>\n
\n mkdir my-osd600-lab5-backend\n cd my-osd600-lab5-backend\n npm init -y\n npm install express mongoose dotenv cors\n <\/pre>\n<\/code><\/p>\n
Ard\u0131ndan, temel bir Express sunucusu (server.js<\/code> veya app.js<\/code>):<\/p>\n\n require('dotenv').config(); \/\/ Ortam de\u011fi\u015fkenlerini y\u00fckle\n const express = require('express');\n const cors = require('cors'); \/\/ CORS politikalar\u0131 i\u00e7in\n const app = express();\n const PORT = process.env.PORT || 5000;\n\n app.use(cors());\n app.use(express.json()); \/\/ Body parser middleware\n\n app.get('\/', (req, res) => {\n res.send('OSD600 Lab 5 Backend \u00c7al\u0131\u015f\u0131yor!');\n });\n\n app.listen(PORT, () => {\n console.log(Sunucu ${PORT} portunda \u00e7al\u0131\u015f\u0131yor.<\/code>);\n });\n <\/pre>\n<\/code><\/p>\n
Veritaban\u0131 olarak MongoDB kullanmay\u0131 planl\u0131yorsan\u0131z, yerel geli\u015ftirme ortam\u0131n\u0131z i\u00e7in Docker Compose ideal bir \u00e7\u00f6z\u00fcmd\u00fcr. Bu, veritaban\u0131n\u0131 izole bir ortamda \u00e7al\u0131\u015ft\u0131rman\u0131za ve kurulum karma\u015fas\u0131ndan kurtulman\u0131za olanak tan\u0131r. Proje k\u00f6k dizininizde bir docker-compose.yml<\/code> dosyas\u0131 olu\u015fturarak ba\u015flay\u0131n:<\/p>\n\n version: '3.8'\n services:\n mongodb:\n image: mongo:latest\n container_name: osd600-lab5-mongodb\n ports:\n - \"27017:27017\"\n volumes:\n - mongo-data:\/data\/db\n environment:\n MONGO_INITDB_ROOT_USERNAME: ${MONGO_INITDB_ROOT_USERNAME}\n MONGO_INITDB_ROOT_PASSWORD: ${MONGO_INITDB_ROOT_PASSWORD}\n volumes:\n mongo-data:\n <\/pre>\n<\/code><\/p>\n
Bu yap\u0131land\u0131rma ile MongoDB'yi tek bir komutla ba\u015flatabilirsiniz:<\/p>\n
\n docker-compose up -d\n <\/pre>\n<\/code><\/p>\n
Ortam de\u011fi\u015fkenlerini y\u00f6netmek i\u00e7in .env<\/code> dosyalar\u0131n\u0131 kullanmak, hassas bilgilerin (API anahtarlar\u0131, veritaban\u0131 ba\u011flant\u0131 dizeleri) kod taban\u0131na dahil edilmesini \u00f6nler ve farkl\u0131 ortamlarda (geli\u015ftirme, test, \u00fcretim) kolayca yap\u0131land\u0131rma yapman\u0131z\u0131 sa\u011flar. Backend klas\u00f6r\u00fcn\u00fczde bir .env<\/code> dosyas\u0131 olu\u015fturun:<\/p>\n\n PORT=5000\n MONGODB_URI=mongodb:\/\/localhost:27017\/osd600db\n MONGO_INITDB_ROOT_USERNAME=user\n MONGO_INITDB_ROOT_PASSWORD=password\n JWT_SECRET=supersecretkey\n <\/pre>\n<\/code><\/p>\n
T\u00fcm bu ad\u0131mlar, OSD600 Lab 5 projeniz i\u00e7in sa\u011flam, \u00f6l\u00e7eklenebilir ve y\u00f6netilebilir bir temel olu\u015fturur. Do\u011fru ara\u00e7lar\u0131 se\u00e7mek ve bunlar\u0131 etkili bir \u015fekilde yap\u0131land\u0131rmak, geli\u015ftirme s\u00fcrecindeki olas\u0131 engelleri en aza indirerek, uygulaman\u0131z\u0131n temel mant\u0131\u011f\u0131na odaklanman\u0131z\u0131 sa\u011flar. Unutmay\u0131n, iyi kurulmu\u015f bir ortam, ba\u015far\u0131l\u0131 bir projenin ilk ve en \u00f6nemli ad\u0131m\u0131d\u0131r.<\/p>\n
\n Uzman \u0130pucu: Projenizin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 ve komutlar\u0131n\u0131 tek bir yerden y\u00f6netmek i\u00e7in projenizin k\u00f6k dizininde ayr\u0131 bir package.json<\/code> dosyas\u0131 olu\u015fturarak \"mono-repo\" benzeri bir yap\u0131 kurabilirsiniz. \u00d6rne\u011fin, t\u00fcm uygulamay\u0131 ba\u015flatmak i\u00e7in npm run dev<\/code> gibi bir komut tan\u0131mlayabilirsiniz.\n <\/div>\nAPI Geli\u015ftirme ve Frontend Entegrasyonu: \u0130leti\u015fimin Kalbi<\/h2>\n
Modern web uygulamalar\u0131n\u0131n temelini, genellikle bir Frontend (kullan\u0131c\u0131 aray\u00fcz\u00fc) ve bir Backend (veri ve i\u015f mant\u0131\u011f\u0131) aras\u0131ndaki kusursuz ileti\u015fim olu\u015fturur. Bu ileti\u015fim, \u00e7o\u011funlukla RESTful API'ler arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015fir. OSD600 Lab 5 projenizde, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n etkile\u015fimde bulunaca\u011f\u0131 aray\u00fcz ile uygulaman\u0131z\u0131n verilerini ve mant\u0131\u011f\u0131n\u0131 bar\u0131nd\u0131ran sunucu taraf\u0131 aras\u0131nda bir k\u00f6pr\u00fc kurman\u0131z gerekecek. Bu b\u00f6l\u00fcmde, hem API geli\u015ftirmenin temel prensiplerini hem de bu API'yi frontend uygulaman\u0131zla nas\u0131l entegre edece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n
RESTful API Nedir ve Nas\u0131l Geli\u015ftirilir?<\/h3>\n
REST (Representational State Transfer), web servisleri tasarlamak i\u00e7in bir mimari stili ve prensipler b\u00fct\u00fcn\u00fcd\u00fcr. En \u00f6nemli prensiplerinden biri, kaynaklar\u0131n (\u00f6rne\u011fin, kullan\u0131c\u0131lar<\/code>, \u00fcr\u00fcnler<\/code>) URL'ler arac\u0131l\u0131\u011f\u0131yla tan\u0131mlanmas\u0131 ve bu kaynaklar \u00fczerinde HTTP metotlar\u0131 (GET, POST, PUT, DELETE) kullan\u0131larak i\u015flemler yap\u0131lmas\u0131d\u0131r. Backend (Node.js\/Express) taraf\u0131nda bir API geli\u015ftirmek, temelde bu kaynaklar i\u00e7in uygun rota tan\u0131mlamalar\u0131 ve bu rotalar\u0131 i\u015fleyecek kontrolc\u00fc fonksiyonlar\u0131 yazmak anlam\u0131na gelir.<\/p>\n\u00d6rne\u011fin, bir \u00fcr\u00fcn listesi sunan ve yeni \u00fcr\u00fcn eklemeye olanak tan\u0131yan bir API i\u00e7in rotalar \u015fu \u015fekilde tan\u0131mlanabilir:<\/p>\n
\n \/\/ my-osd600-lab5-backend\/routes\/productRoutes.js\n const express = require('express');\n const router = express.Router();\n const Product = require('..\/models\/Product'); \/\/ Mongoose modeliniz\n\n \/\/ T\u00fcm \u00fcr\u00fcnleri getir (GET \/api\/products)\n router.get('\/', async (req, res) => {\n try {\n const products = await Product.find();\n res.json(products);\n } catch (err) {\n res.status(500).json({ message: err.message });\n }\n });\n\n \/\/ Yeni \u00fcr\u00fcn ekle (POST \/api\/products)\n router.post('\/', async (req, res) => {\n const product = new Product({\n name: req.body.name,\n price: req.body.price,\n description: req.body.description\n });\n try {\n const newProduct = await product.save();\n res.status(201).json(newProduct);\n } catch (err) {\n res.status(400).json({ message: err.message });\n }\n });\n\n module.exports = router;\n <\/pre>\n<\/code><\/p>\n
Ana app.js<\/code> dosyan\u0131zda bu rotay\u0131 kullanmak i\u00e7in:<\/p>\n\n \/\/ my-osd600-lab5-backend\/app.js\n \/\/ ... di\u011fer require'lar ve app.use'lar ...\n const productRoutes = require('.\/routes\/productRoutes');\n app.use('\/api\/products', productRoutes);\n \/\/ ... sunucu ba\u015flatma kodu ...\n <\/pre>\n<\/code><\/p>\n
Bu yap\u0131, kodunuzu d\u00fczenli tutman\u0131za ve API'nizi \u00f6l\u00e7eklendirmenize yard\u0131mc\u0131 olur. Her rota tan\u0131m\u0131nda, gelen iste\u011fi i\u015fleyen (veritaban\u0131ndan veri \u00e7ekme, yeni veri kaydetme vb.) ve uygun bir yan\u0131t d\u00f6nd\u00fcren bir kontrolc\u00fc fonksiyonu bulunur. Hata y\u00f6netimi (\u00f6rne\u011fin, try-catch<\/code> bloklar\u0131) bu a\u015famada hayati \u00f6nem ta\u015f\u0131r; \u00e7\u00fcnk\u00fc kullan\u0131c\u0131ya anlaml\u0131 hata mesajlar\u0131 d\u00f6nd\u00fcrmek, uygulaman\u0131n sa\u011flaml\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/p>\nFrontend Uygulamas\u0131yla API Nas\u0131l Entegre Edilir?<\/h3>\n
Frontend (React) uygulaman\u0131zda, backend API'nizle etkile\u015fim kurmak i\u00e7in HTTP istekleri yapman\u0131z gerekir. Bu istekler i\u00e7in taray\u0131c\u0131n\u0131n yerle\u015fik fetch<\/code> API'sini veya pop\u00fcler bir k\u00fct\u00fcphane olan Axios'u kullanabilirsiniz. Axios, daha geli\u015fmi\u015f hata y\u00f6netimi, istek ve yan\u0131t interceptor'lar\u0131 gibi \u00f6zellikler sundu\u011fu i\u00e7in genellikle tercih edilir.<\/p>\n\u00d6rnek bir React bile\u015feni i\u00e7erisinde \u00fcr\u00fcnleri API'den \u00e7ekme:<\/p>\n
\n \/\/ my-osd600-lab5-frontend\/src\/components\/ProductList.js\n import React, { useState, useEffect } from 'react';\n import axios from 'axios'; \/\/ npm install axios\n\n function ProductList() {\n const [products, setProducts] = useState([]);\n const [error, setError] = useState(null);\n const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || 'http:\/\/localhost:5000\/api';\n\n useEffect(() => {\n const fetchProducts = async () => {\n try {\n const response = await axios.get(${API_BASE_URL}\/products<\/code>);\n setProducts(response.data);\n } catch (err) {\n setError('\u00dcr\u00fcnler y\u00fcklenirken bir hata olu\u015ftu: ' + err.message);\n console.error(err);\n }\n };\n fetchProducts();\n }, []); \/\/ Bo\u015f dizi, component y\u00fcklendi\u011finde bir kez \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar\n\n if (error) {\n return {error}<\/div>;\n }\n\n return (\n \n \u00dcr\u00fcn Listesi<\/h2>\n \n {products.map(product => (\n - {product.name} - ${product.price}<\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default ProductList;\n <\/pre>\n
<\/code><\/p>\n
Bu \u00f6rnekte, useEffect<\/code> kancas\u0131 bile\u015fen y\u00fcklendi\u011finde bir kez \u00e7al\u0131\u015farak fetchProducts<\/code> fonksiyonunu \u00e7a\u011f\u0131r\u0131r. axios.get<\/code> ile API'ye bir GET iste\u011fi yap\u0131l\u0131r ve gelen veriler products<\/code> state'ine kaydedilir. Hata durumlar\u0131 da try-catch<\/code> blo\u011fu ile yakalanarak kullan\u0131c\u0131ya bilgilendirici bir mesaj g\u00f6sterilir. Ayr\u0131ca, process.env.REACT_APP_API_BASE_URL<\/code> gibi ortam de\u011fi\u015fkenleri kullanmak, API URL'sini farkl\u0131 ortamlarda kolayca de\u011fi\u015ftirebilmenizi sa\u011flar. Frontend projenizin k\u00f6k dizininde .env<\/code> dosyas\u0131 olu\u015fturarak bu de\u011fi\u015fkeni tan\u0131mlayabilirsiniz (\u00f6rne\u011fin: REACT_APP_API_BASE_URL=http:\/\/localhost:5000\/api<\/code>).<\/p>\nAPI geli\u015ftirme ve frontend entegrasyonu, OSD600 Lab 5 projenizin can damar\u0131d\u0131r. Bu iki bile\u015fenin sorunsuz bir \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak, uygulaman\u0131z\u0131n genel performans\u0131 ve kullan\u0131c\u0131 deneyimi i\u00e7in hayati \u00f6neme sahiptir. CORS (Cross-Origin Resource Sharing) politikalar\u0131n\u0131 do\u011fru yap\u0131land\u0131rmak, kimlik do\u011frulama (authentication) ve yetkilendirme (authorization) mekanizmalar\u0131n\u0131 entegre etmek de bu a\u015famada g\u00f6z \u00f6n\u00fcnde bulundurulmas\u0131 gereken \u00f6nemli g\u00fcvenlik konular\u0131d\u0131r. Bu ad\u0131mlar\u0131 titizlikle takip ederek, uygulaman\u0131z\u0131n temel ileti\u015fim altyap\u0131s\u0131n\u0131 ba\u015far\u0131yla kurabilirsiniz.<\/p>\n
Veritaban\u0131 Y\u00f6netimi ve Kal\u0131c\u0131l\u0131k: Verilerin G\u00fcc\u00fc<\/h2>\n
Her dinamik web uygulamas\u0131n\u0131n arkas\u0131nda, bilgiyi depolayan, y\u00f6neten ve eri\u015filebilir k\u0131lan bir veritaban\u0131 yatar. OSD600 Lab 5 projenizde, kullan\u0131c\u0131lar, \u00fcr\u00fcnler, sipari\u015fler veya herhangi bir uygulaman\u0131za \u00f6zg\u00fc veriyi kal\u0131c\u0131 olarak saklamak i\u00e7in sa\u011flam bir veritaban\u0131 stratejisi olu\u015fturman\u0131z gerekecek. Veritaban\u0131 se\u00e7imi, modeli, schema tasar\u0131m\u0131 ve CRUD (Create, Read, Update, Delete) operasyonlar\u0131n\u0131n etkin bir \u015fekilde uygulanmas\u0131, uygulaman\u0131z\u0131n bel kemi\u011fini olu\u015fturur ve veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc sa\u011flar.<\/p>\n
Veritaban\u0131 Se\u00e7imi: SQL mi, NoSQL mi?<\/h3>\n
Modern web geli\u015ftirmede en yayg\u0131n iki veritaban\u0131 kategorisi SQL (\u0130li\u015fkisel) ve NoSQL (\u0130li\u015fkisel Olmayan) veritabanlar\u0131d\u0131r. Se\u00e7iminiz, uygulaman\u0131z\u0131n veri yap\u0131s\u0131na ve gereksinimlerine ba\u011fl\u0131d\u0131r:<\/p>\n
\n- SQL Veritabanlar\u0131 (\u00f6rn: PostgreSQL, MySQL):<\/strong> Tablolar, sat\u0131rlar ve s\u00fctunlardan olu\u015fan yap\u0131land\u0131r\u0131lm\u0131\u015f verilere uygun. Veriler aras\u0131nda g\u00fc\u00e7l\u00fc ili\u015fkiler (bir kullan\u0131c\u0131 birden fazla sipari\u015fe sahip olabilir) varsa ve veri b\u00fct\u00fcnl\u00fc\u011f\u00fc kritikse tercih edilir.<\/li>\n
- NoSQL Veritabanlar\u0131 (\u00f6rn: MongoDB, Cassandra):<\/strong> Esnek, \u015femas\u0131z veya dinamik \u015femal\u0131 verilere uygun. Y\u00fcksek \u00f6l\u00e7eklenebilirlik ve h\u0131zl\u0131 iterasyon gerektiren, de\u011fi\u015fen veri yap\u0131lar\u0131na sahip uygulamalar i\u00e7in idealdir. OSD600 gibi bir laboratuvar ortam\u0131nda, genellikle Node.js ile iyi entegre olan MongoDB tercih edilir.<\/li>\n<\/ul>\n
Bu makalede MongoDB ve Mongoose ODM (Object Data Modeling) kullanarak bir \u00f6rnek \u00fczerinden ilerleyece\u011fiz, zira Node.js ekosistemiyle uyumu ve geli\u015ftirme kolayl\u0131\u011f\u0131yla \u00f6ne \u00e7\u0131kar. Mongoose, MongoDB ile etkile\u015fim kurmay\u0131 basitle\u015ftiren \u015fema tabanl\u0131 bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n
Schema Tasar\u0131m\u0131 ve Mongoose Modelleri<\/h3>\n
MongoDB \u015femas\u0131z olmas\u0131na ra\u011fmen, Mongoose kullanarak bir \u015fema tan\u0131mlamak, veri modelinizin tutarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flaman\u0131za yard\u0131mc\u0131 olur ve verileri daha g\u00fcvenli bir \u015fekilde y\u00f6netmenizi sa\u011flar. Bir \"Kullan\u0131c\u0131\" modeli i\u00e7in \u00f6rnek bir \u015fema:<\/p>\n
\n \/\/ my-osd600-lab5-backend\/models\/User.js\n const mongoose = require('mongoose');\n const bcrypt = require('bcryptjs'); \/\/ \u015eifre hashleme i\u00e7in\n\n const userSchema = new mongoose.Schema({\n username: {\n type: String,\n required: true,\n unique: true,\n trim: true\n },\n email: {\n type: String,\n required: true,\n unique: true,\n trim: true,\n lowercase: true,\n match: [\/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$\/, 'L\u00fctfen ge\u00e7erli bir e-posta adresi girin']\n },\n password: {\n type: String,\n required: true,\n minlength: 6\n },\n createdAt: {\n type: Date,\n default: Date.now\n }\n });\n\n \/\/ \u015eifreyi kaydetmeden \u00f6nce hash'le\n userSchema.pre('save', async function(next) {\n if (!this.isModified('password')) return next();\n const salt = await bcrypt.genSalt(10);\n this.password = await bcrypt.hash(this.password, salt);\n next();\n });\n\n \/\/ \u015eifre kar\u015f\u0131la\u015ft\u0131rma metodu\n userSchema.methods.comparePassword = async function(candidatePassword) {\n return await bcrypt.compare(candidatePassword, this.password);\n };\n\n module.exports = mongoose.model('User', userSchema);\n <\/pre>\n<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte, bir User<\/code> \u015femas\u0131 tan\u0131mlanm\u0131\u015ft\u0131r. required<\/code>, unique<\/code>, trim<\/code>, lowercase<\/code>, match<\/code> gibi \u00f6zellikler veri do\u011frulamas\u0131 i\u00e7in kullan\u0131l\u0131rken, pre('save')<\/code> middleware'i \u015fifreleri veritaban\u0131na kaydetmeden \u00f6nce hash'lemek i\u00e7in bcryptjs<\/code> k\u00fct\u00fcphanesini kullan\u0131r. Bu, g\u00fcvenlik i\u00e7in kritik bir ad\u0131md\u0131r.<\/p>\nCRUD Operasyonlar\u0131: Verilerle Etkile\u015fim<\/h3>\n
Mongoose modellerini tan\u0131mlad\u0131ktan sonra, bu modeller arac\u0131l\u0131\u011f\u0131yla veritaban\u0131nda Create, Read, Update ve Delete operasyonlar\u0131n\u0131 ger\u00e7ekle\u015ftirmek olduk\u00e7a basittir. Backend kontrolc\u00fclerinizde bu operasyonlar\u0131 kullanarak API endpoint'lerinizi olu\u015fturabilirsiniz:<\/p>\n
\n \/\/ my-osd600-lab5-backend\/controllers\/userController.js\n const User = require('..\/models\/User');\n\n \/\/ Yeni kullan\u0131c\u0131 kayd\u0131 (Create)\n exports.registerUser = async (req, res) => {\n const { username, email, password } = req.body;\n try {\n const newUser = new User({ username, email, password });\n await newUser.save();\n res.status(201).json({ message: 'Kullan\u0131c\u0131 ba\u015far\u0131yla kaydedildi' });\n } catch (err) {\n res.status(400).json({ message: err.message });\n }\n };\n\n \/\/ T\u00fcm kullan\u0131c\u0131lar\u0131 getir (Read)\n exports.getAllUsers = async (req, res) => {\n try {\n const users = await User.find().select('-password'); \/\/ \u015eifreleri g\u00f6sterme\n res.json(users);\n } catch (err) {\n res.status(500).json({ message: err.message });\n }\n };\n\n \/\/ Kullan\u0131c\u0131y\u0131 ID'ye g\u00f6re g\u00fcncelle (Update)\n exports.updateUser = async (req, res) => {\n try {\n const user = await User.findById(req.params.id);\n if (!user) return res.status(404).json({ message: 'Kullan\u0131c\u0131 bulunamad\u0131' });\n\n user.username = req.body.username || user.username;\n user.email = req.body.email || user.email;\n if (req.body.password) {\n user.password = req.body.password; \/\/ pre-save middleware hash'leyecek\n }\n await user.save();\n res.json({ message: 'Kullan\u0131c\u0131 ba\u015far\u0131yla g\u00fcncellendi', user: user.select('-password') });\n } catch (err) {\n res.status(400).json({ message: err.message });\n }\n };\n\n \/\/ Kullan\u0131c\u0131y\u0131 ID'ye g\u00f6re sil (Delete)\n exports.deleteUser = async (req, res) => {\n try {\n const user = await User.findByIdAndDelete(req.params.id);\n if (!user) return res.status(404).json({ message: 'Kullan\u0131c\u0131 bulunamad\u0131' });\n res.json({ message: 'Kullan\u0131c\u0131 ba\u015far\u0131yla silindi' });\n } catch (err) {\n res.status(500).json({ message: err.message });\n }\n };\n <\/pre>\n<\/code><\/p>\n
Bu kontrolc\u00fcler, Express rotalar\u0131n\u0131zda kullan\u0131lacakt\u0131r. \u00d6rne\u011fin, \/api\/users<\/code> i\u00e7in bir POST<\/code> iste\u011fi registerUser<\/code> metodunu \u00e7a\u011f\u0131r\u0131rken, \/api\/users\/:id<\/code> i\u00e7in bir PUT<\/code> iste\u011fi updateUser<\/code> metodunu tetikleyecektir. Veritaban\u0131 y\u00f6netiminde, ba\u011flant\u0131 havuzlar\u0131n\u0131 kullanmak, indeksler olu\u015fturmak ve sorgular\u0131 optimize etmek gibi konular da uygulaman\u0131z\u0131n performans\u0131 i\u00e7in \u00f6nemlidir. OSD600 Lab 5, bu temel veritaban\u0131 etkile\u015fimlerini anlamak ve uygulamak i\u00e7in harika bir platform sunar. Uygulaman\u0131z\u0131n kalbindeki verileri do\u011fru bir \u015fekilde y\u00f6netmek, uzun vadeli ba\u015far\u0131s\u0131n\u0131n anahtar\u0131d\u0131r.<\/p>\nTest Stratejileri ve Kalite G\u00fcvencesi: G\u00fcvenilir Kod Nas\u0131l Yaz\u0131l\u0131r?<\/h2>\n
Yaz\u0131l\u0131m geli\u015ftirme s\u00fcrecinde sadece \u00e7al\u0131\u015fan bir kod yazmak yeterli de\u011fildir; ayn\u0131 zamanda bu kodun do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan, beklentileri kar\u015f\u0131lad\u0131\u011f\u0131ndan ve gelecekteki de\u011fi\u015fikliklere dayan\u0131kl\u0131 oldu\u011fundan emin olmak gerekir. OSD600 Lab 5 gibi projelerde, test stratejileri ve kalite g\u00fcvencesi (QA) s\u00fcre\u00e7leri, uygulaman\u0131z\u0131n sa\u011flaml\u0131\u011f\u0131n\u0131 ve g\u00fcvenilirli\u011fini sa\u011flamak i\u00e7in vazge\u00e7ilmezdir. Testler, hatalar\u0131 erken a\u015famada yakalaman\u0131za, regression'lar\u0131 (yeni eklenen \u00f6zelliklerin eskileri bozmas\u0131) \u00f6nlemenize ve geli\u015ftiricilere kodlar\u0131n\u0131n g\u00fcvenli bir \u015fekilde refactor edebilmeleri i\u00e7in bir g\u00fcvence sa\u011flaman\u0131za olanak tan\u0131r.<\/p>\n
Test T\u00fcrleri ve Uygulama Yakla\u015f\u0131mlar\u0131<\/h3>\n
Genellikle bir uygulamada \u00fc\u00e7 ana test seviyesi bulunur:<\/p>\n
\n- Birim Testleri (Unit Tests):<\/strong> Bir uygulaman\u0131n en k\u00fc\u00e7\u00fck, izole edilmi\u015f birimlerini (fonksiyonlar, metotlar, s\u0131n\u0131flar) test eder. Ama\u00e7, her bir birimin kendi ba\u015f\u0131na do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 do\u011frulamakt\u0131r. Node.js backend'i i\u00e7in Jest, Mocha gibi k\u00fct\u00fcphaneler pop\u00fclerdir.<\/li>\n
- Entegrasyon Testleri (Integration Tests):<\/strong> Birden fazla birimin veya mod\u00fcl\u00fcn birbiriyle birlikte nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 test eder. \u00d6rne\u011fin, bir API endpoint'inin bir veritaban\u0131 ile nas\u0131l etkile\u015fim kurdu\u011funu test edebilir. Backend i\u00e7in Supertest, frontend i\u00e7in React Testing Library ve Jest kullan\u0131l\u0131r.<\/li>\n
- U\u00e7tan Uca Testler (End-to-End Tests - E2E):<\/strong> Uygulaman\u0131n tamam\u0131n\u0131, bir kullan\u0131c\u0131n\u0131n ger\u00e7ekte yapaca\u011f\u0131 \u015fekilde test eder. Taray\u0131c\u0131da bir kullan\u0131c\u0131n\u0131n ad\u0131mlar\u0131n\u0131 sim\u00fcle eder (giri\u015f yapma, \u00fcr\u00fcn ekleme, \u00f6deme yapma). Cypress, Playwright, Selenium gibi ara\u00e7lar bu t\u00fcr testler i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ol>\n
OSD600 Lab 5 projenizde, bu test t\u00fcrlerinin her birinden faydalanmak, uygulaman\u0131z\u0131n farkl\u0131 katmanlar\u0131n\u0131n g\u00fcvenilirli\u011fini art\u0131racakt\u0131r. \u00d6zellikle backend taraf\u0131nda, API endpoint'lerinizin do\u011fru yan\u0131t verdi\u011finden ve veritaban\u0131 ile etkile\u015fimlerinin hatas\u0131z oldu\u011fundan emin olmak i\u00e7in entegrasyon testleri \u00e7ok \u00f6nemlidir.<\/p>\n
Backend Birim ve Entegrasyon Testleri (Jest & Supertest)<\/h3>\n
\u00d6rnek olarak, bir Product<\/code> modelini test edelim ve ard\u0131ndan bir API endpoint'ini Supertest ile test edelim. \u00d6ncelikle, Jest ve Supertest'i y\u00fckleyin:<\/p>\n\n npm install --save-dev jest supertest\n <\/pre>\n<\/code><\/p>\n
Birim Testi \u00d6rne\u011fi (model validation):<\/strong><\/p>\n\n \/\/ my-osd600-lab5-backend\/__tests__\/product.test.js\n const mongoose = require('mongoose');\n const Product = require('..\/models\/Product');\n const app = require('..\/app'); \/\/ Uygulama ana dosyan\u0131z\n\n \/\/ Test veritaban\u0131na ba\u011flan\n beforeAll(async () => {\n await mongoose.connect(process.env.TEST_MONGODB_URI, {\n useNewUrlParser: true,\n useUnifiedTopology: true,\n });\n });\n\n \/\/ Her testten sonra veritaban\u0131n\u0131 temizle\n afterEach(async () => {\n await Product.deleteMany({});\n });\n\n \/\/ T\u00fcm testlerden sonra ba\u011flant\u0131y\u0131 kapat\n afterAll(async () => {\n await mongoose.connection.close();\n });\n\n describe('Product Model Unit Tests', () => {\n it('bir \u00fcr\u00fcn ba\u015far\u0131yla olu\u015fturulmal\u0131', async () => {\n const product = new Product({ name: 'Test \u00dcr\u00fcn', price: 19.99, description: 'Bir test \u00fcr\u00fcn\u00fc' });\n const savedProduct = await product.save();\n expect(savedProduct._id).toBeDefined();\n expect(savedProduct.name).toBe('Test \u00dcr\u00fcn');\n });\n\n it('isim alan\u0131 olmadan \u00fcr\u00fcn olu\u015fturulmamal\u0131', async () => {\n const product = new Product({ price: 19.99, description: 'Bir test \u00fcr\u00fcn\u00fc' });\n await expect(product.save()).rejects.toThrow();\n });\n });\n <\/pre>\n<\/code><\/p>\n
Entegrasyon Testi \u00d6rne\u011fi (API endpoint):<\/strong><\/p>\n\n \/\/ my-osd600-lab5-backend\/__tests__\/productApi.test.js\n const request = require('supertest');\n const app = require('..\/app'); \/\/ Express uygulaman\u0131z\u0131n ana dosyas\u0131\n\n describe('Product API Integration Tests', () => {\n it('GET \/api\/products t\u00fcm \u00fcr\u00fcnleri d\u00f6nmeli', async () => {\n \/\/ \u00d6nce veritaban\u0131na birka\u00e7 \u00fcr\u00fcn ekleyelim\n await request(app).post('\/api\/products').send({ name: '\u00dcr\u00fcn 1', price: 10 });\n await request(app).post('\/api\/products').send({ name: '\u00dcr\u00fcn 2', price: 20 });\n\n const response = await request(app).get('\/api\/products');\n expect(response.statusCode).toBe(200);\n expect(response.body.length).toBe(2);\n expect(response.body[0].name).toBe('\u00dcr\u00fcn 1');\n });\n\n it('POST \/api\/products yeni bir \u00fcr\u00fcn olu\u015fturmal\u0131', async () => {\n const newProduct = { name: 'Yeni \u00dcr\u00fcn', price: 29.99, description: 'Harika bir \u00fcr\u00fcn' };\n const response = await request(app).post('\/api\/products').send(newProduct);\n expect(response.statusCode).toBe(201);\n expect(response.body.name).toBe(newProduct.name);\n });\n });\n <\/pre>\n<\/code><\/p>\n
Testlerinizi \u00e7al\u0131\u015ft\u0131rmak i\u00e7in package.json<\/code> dosyan\u0131za bir script ekleyebilirsiniz:<\/p>\n\n \/\/ package.json\n {\n \"scripts\": {\n \"test\": \"jest\"\n }\n }\n <\/pre>\n<\/code><\/p>\n
Ard\u0131ndan terminalde npm test<\/code> komutunu \u00e7al\u0131\u015ft\u0131rarak testleri \u00e7al\u0131\u015ft\u0131rabilirsiniz. Frontend taraf\u0131nda ise, React Testing Library ile bile\u015fenlerinizi kullan\u0131c\u0131 davran\u0131\u015flar\u0131na g\u00f6re test edebilirsiniz. \u00d6rne\u011fin, bir form g\u00f6nderimini sim\u00fcle etmek veya bir d\u00fc\u011fmenin t\u0131klanmas\u0131n\u0131 test etmek. Bu yakla\u015f\u0131m, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcz\u00fcn do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan ve beklenen etkile\u015fimleri sa\u011flad\u0131\u011f\u0131ndan emin olman\u0131z\u0131 sa\u011flar.<\/p>\nOSD600 Lab 5 projesinde test yazmak, sadece not almak i\u00e7in bir g\u00f6rev de\u011fildir; ayn\u0131 zamanda g\u00fcvenilir, bak\u0131m\u0131 kolay ve \u00f6l\u00e7eklenebilir bir uygulama geli\u015ftirmenin temel bir par\u00e7as\u0131d\u0131r. \u0130yi yaz\u0131lm\u0131\u015f testler, geli\u015ftirme h\u0131z\u0131n\u0131z\u0131 art\u0131r\u0131r, hatalar\u0131 azalt\u0131r ve uygulaman\u0131z\u0131n genel kalitesini \u00f6nemli \u00f6l\u00e7\u00fcde y\u00fckseltir. Unutmay\u0131n, \"\u00e7al\u0131\u015fan kod\" sadece do\u011fru \u00e7\u0131kt\u0131 veren kod de\u011fildir; ayn\u0131 zamanda beklenen girdilere do\u011fru tepki veren ve beklenmedik durumlarda bile stabil kalan koddur.<\/p>\n
Da\u011f\u0131t\u0131m (Deployment) ve DevOps Yakla\u015f\u0131mlar\u0131: Uygulamay\u0131 Canl\u0131ya Almak<\/h2>\n
Bir web uygulamas\u0131n\u0131 ba\u015far\u0131yla geli\u015ftirmi\u015f olmak, projenin sadece yar\u0131s\u0131d\u0131r. Geli\u015ftirdi\u011finiz uygulaman\u0131n d\u00fcnyan\u0131n eri\u015fimine a\u00e7\u0131lmas\u0131, yani canl\u0131ya al\u0131nmas\u0131 (deployment), OSD600 Lab 5'in en heyecan verici ve \u00f6\u011fretici a\u015famalar\u0131ndan biridir. Bu s\u00fcre\u00e7, sadece kodunuzu bir sunucuya kopyalamaktan \u00e7ok daha fazlas\u0131n\u0131 i\u00e7erir; ayn\u0131 zamanda uygulaman\u0131n sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak, performans\u0131n\u0131 optimize etmek ve s\u00fcrekli g\u00fcncellemeler i\u00e7in otomatik s\u00fcre\u00e7ler olu\u015fturmak gibi DevOps prensiplerini de kapsar.<\/p>\n
Containerization ile Docker: \u0130zole ve Ta\u015f\u0131nabilir Ortamlar<\/h3>\n
Uygulaman\u0131z\u0131 canl\u0131ya alman\u0131n en modern ve yayg\u0131n yollar\u0131ndan biri, Docker kullanarak container'la\u015ft\u0131rmakt\u0131r. Docker, uygulaman\u0131z\u0131 t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 ve ayarlar\u0131yla birlikte izole, ta\u015f\u0131nabilir \"konteynerler\" i\u00e7inde paketlemenizi sa\u011flar. Bu, uygulaman\u0131z\u0131n geli\u015ftirme ortam\u0131n\u0131zda nas\u0131l \u00e7al\u0131\u015f\u0131yorsa, \u00fcretim ortam\u0131nda da ayn\u0131 \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 garanti eder.<\/p>\n
OSD600 Lab 5 projeniz i\u00e7in hem frontend hem de backend uygulaman\u0131z\u0131 Dockerize etmek i\u00e7in ayr\u0131 Dockerfile<\/code>'lar olu\u015fturabilirsiniz:<\/p>\n\n # my-osd600-lab5-backend\/Dockerfile\n FROM node:18-alpine\n WORKDIR \/app\n COPY package*.json .\/\n RUN npm install\n COPY . .\n EXPOSE 5000\n CMD [\"npm\", \"start\"]\n <\/pre>\n<\/code><\/p>\n
\n # my-osd600-lab5-frontend\/Dockerfile\n FROM node:18-alpine as build\n WORKDIR \/app\n COPY package*.json .\/\n RUN npm install\n COPY . .\n RUN npm run build\n\n FROM nginx:alpine\n COPY --from=build \/app\/build \/usr\/share\/nginx\/html\n EXPOSE 80\n CMD [\"nginx\", \"-g\", \"daemon off;\"]\n <\/pre>\n<\/code><\/p>\n
Ard\u0131ndan, t\u00fcm servislernizi (backend, frontend, veritaban\u0131) tek bir komutla aya\u011fa kald\u0131rmak i\u00e7in projenizin k\u00f6k dizininde docker-compose.yml<\/code> kullanabilirsiniz:<\/p>\n\n # docker-compose.yml\n version: '3.8'\n services:\n backend:\n build: .\/my-osd600-lab5-backend\n ports:\n - \"5000:5000\"\n environment:\n MONGODB_URI: mongodb:\/\/mongodb:27017\/osd600db\n # Di\u011fer ortam de\u011fi\u015fkenleri\n depends_on:\n - mongodb\n frontend:\n build: .\/my-osd600-lab5-frontend\n ports:\n - \"80:80\"\n depends_on:\n - backend\n mongodb:\n image: mongo:latest\n container_name: osd600-lab5-mongodb\n ports:\n - \"27017:27017\"\n volumes:\n - mongo-data:\/data\/db\n volumes:\n mongo-data:\n <\/pre>\n<\/code><\/p>\n
Bu yap\u0131land\u0131rma ile projenizi sadece docker-compose up -d<\/code> komutuyla tamamen canl\u0131ya alabilirsiniz. Bu, \u00f6zellikle yerel geli\u015ftirme ortam\u0131n\u0131z\u0131n \u00fcretim ortam\u0131na m\u00fcmk\u00fcn oldu\u011funca yak\u0131n olmas\u0131n\u0131 sa\u011flamak i\u00e7in \u00e7ok \u00f6nemlidir.<\/p>\nCI\/CD (Continuous Integration\/Continuous Deployment) ile Otomasyon<\/h3>\n
Manuel da\u011f\u0131t\u0131m s\u00fcre\u00e7leri zaman al\u0131c\u0131, hataya a\u00e7\u0131k ve \u00f6l\u00e7eklenemezdir. Bu nedenle, OSD600 Lab 5 gibi projelerde CI\/CD boru hatlar\u0131 (pipelines) kullanmak, kodu s\u00fcrekli olarak entegre etmenize, test etmenize ve da\u011f\u0131tman\u0131za olanak tan\u0131r. GitHub Actions, Jenkins, GitLab CI gibi ara\u00e7lar bu otomasyonu sa\u011flar. \u0130\u015fte GitHub Actions ile basit bir CI\/CD \u00f6rne\u011fi:<\/p>\n
\n # .github\/workflows\/main.yml\n name: CI\/CD Pipeline\n\n on:\n push:\n branches:\n - main\n pull_request:\n branches:\n - main\n\n jobs:\n build-and-test:\n runs-on: ubuntu-latest\n steps:\n - uses: actions\/checkout@v3\n - name: Set up Node.js\n uses: actions\/setup-node@v3\n with:\n node-version: '18'\n - name: Install dependencies (Backend)\n run: npm install\n working-directory: .\/my-osd600-lab5-backend\n - name: Run Backend Tests\n run: npm test\n working-directory: .\/my-osd600-lab5-backend\n - name: Install dependencies (Frontend)\n run: npm install\n working-directory: .\/my-osd600-lab5-frontend\n - name: Build Frontend\n run: npm run build\n working-directory: .\/my-osd600-lab5-frontend\n # - name: Deploy to Production (\u00f6rne\u011fin Docker Hub veya Cloud sa\u011flay\u0131c\u0131ya)\n # if: github.ref == 'refs\/heads\/main'\n # run: |\n # docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}\n # docker build -t myusername\/osd600-backend:latest .\/my-osd600-lab5-backend\n # docker push myusername\/osd600-backend:latest\n # # Benzer \u015fekilde frontend imaj\u0131n\u0131 da olu\u015fturup push edebilirsiniz.\n <\/pre>\n<\/code><\/p>\n
Bu i\u015f ak\u0131\u015f\u0131, her main<\/code> branch'ine yap\u0131lan push veya pull request'te otomatik olarak ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckler, testleri \u00e7al\u0131\u015ft\u0131r\u0131r ve frontend uygulamas\u0131n\u0131 build eder. \"Deploy to Production\" k\u0131sm\u0131 yorum sat\u0131r\u0131nda b\u0131rak\u0131lm\u0131\u015ft\u0131r, \u00e7\u00fcnk\u00fc ger\u00e7ek bir da\u011f\u0131t\u0131m senaryosu bir bulut sa\u011flay\u0131c\u0131s\u0131na (AWS, Azure, Google Cloud, Heroku, Vercel) veya kendi sunucunuza spesifik entegrasyonlar gerektirir. \u00d6rne\u011fin, Vercel veya Netlify gibi platformlar React uygulamalar\u0131 i\u00e7in kolay bir \"git push\" da\u011f\u0131t\u0131m\u0131 sunarken, daha karma\u015f\u0131k backend'ler i\u00e7in AWS EC2, Fargate veya DigitalOcean Droplets tercih edilebilir.<\/p>\nMobil Uyumlu HTML ve CSS (Media Query \u00d6rne\u011fi):<\/strong><\/p>\nDa\u011f\u0131t\u0131m yaparken, uygulaman\u0131z\u0131n farkl\u0131 ekran boyutlar\u0131nda iyi g\u00f6r\u00fcnmesi de kritik \u00f6neme sahiptir. Duyarl\u0131 (responsive) tasar\u0131m i\u00e7in CSS medya sorgular\u0131 kullanabilirsiniz. Bu, OSD600 Lab 5'in kullan\u0131c\u0131 deneyimi oda\u011f\u0131n\u0131n \u00f6nemli bir par\u00e7as\u0131d\u0131r.<\/p>\n
\n \/* my-osd600-lab5-frontend\/src\/index.css *\/\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .container {\n width: 90%;\n margin: 0 auto;\n padding: 20px;\n }\n\n \/* K\u00fc\u00e7\u00fck ekranlar i\u00e7in (\u00f6rn: mobil cihazlar) *\/\n @media (max-width: 768px) {\n .container {\n width: 95%;\n padding: 10px;\n }\n h2 {\n font-size: 1.5em;\n }\n }\n\n \/* Orta boy ekranlar i\u00e7in (\u00f6rn: tabletler) *\/\n @media (min-width: 769px) and (max-width: 1024px) {\n .container {\n width: 80%;\n padding: 15px;\n }\n }\n <\/pre>\n<\/code><\/p>\n
Da\u011f\u0131t\u0131m ve DevOps yakla\u015f\u0131mlar\u0131, geli\u015ftirme s\u00fcrecinin son fakat en \u00f6nemli ad\u0131mlar\u0131ndan biridir. OSD600 Lab 5, \u00f6\u011frencilere bu karma\u015f\u0131k s\u00fcreci ba\u015ftan sona deneyimleme ve modern da\u011f\u0131t\u0131m pratiklerini anlama f\u0131rsat\u0131 sunar. Do\u011fru stratejilerle, uygulaman\u0131z\u0131 g\u00fcvenle ve otomasyonla canl\u0131ya alabilir, d\u00fcnya \u00e7ap\u0131nda kullan\u0131c\u0131lara ula\u015ft\u0131rabilirsiniz.<\/p>\n
Performans Optimizasyonu ve G\u00fcvenlik \u0130pu\u00e7lar\u0131: Uygulaman\u0131z\u0131 Korumak<\/h2>\n
Bir web uygulamas\u0131n\u0131 geli\u015ftirirken sadece i\u015flevselli\u011fe odaklanmak yeterli de\u011fildir. Kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen performans ve uygulaman\u0131n hassas verilerini ve kullan\u0131c\u0131lar\u0131n\u0131 koruyan g\u00fcvenlik, OSD600 Lab 5 projenizin uzun vadeli ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir. Bu iki alan, geli\u015ftirme s\u00fcrecinin her a\u015famas\u0131nda d\u00fc\u015f\u00fcn\u00fclmesi gereken, s\u00fcrekli iyile\u015ftirme gerektiren konulard\u0131r.<\/p>\n
Performans Optimizasyonu: H\u0131zl\u0131 ve Ak\u0131c\u0131 Bir Deneyim \u0130\u00e7in<\/h3>\n
Yava\u015f y\u00fcklenen veya tak\u0131lan bir uygulama, kullan\u0131c\u0131lar\u0131n h\u0131zla ba\u015fka alternatiflere y\u00f6nelmesine neden olabilir. Uygulaman\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak i\u00e7in hem frontend hem de backend taraf\u0131nda dikkat etmeniz gereken baz\u0131 temel noktalar \u015funlard\u0131r:<\/p>\n
\n- Frontend Optimizasyonlar\u0131:<\/strong>\n
\n- Bundle Boyutunu K\u00fc\u00e7\u00fcltme:<\/strong> Webpack gibi ara\u00e7larla kod b\u00f6lme (code splitting) yaparak, kullan\u0131c\u0131n\u0131n sadece ihtiyac\u0131 olan JS\/CSS\/HTML'i y\u00fcklemesini sa\u011flay\u0131n. Gerekli olmayan k\u00fct\u00fcphaneleri kald\u0131rmak veya daha hafif alternatiflerini kullanmak da \u00f6nemlidir.<\/li>\n
- Resim Optimizasyonu:<\/strong> WebP gibi modern formatlar kullanarak resim boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fclt\u00fcn. Duyarl\u0131 resimler (
srcset<\/code> \u00f6zniteli\u011fi veya <\/code> etiketi) ve tembel y\u00fckleme (lazy loading) uygulay\u0131n.<\/li>\n- Caching (\u00d6nbellekleme):<\/strong> Taray\u0131c\u0131 \u00f6nbelle\u011fini kullanarak statik dosyalar\u0131n (CSS, JS, resimler) tekrar indirilmesini engelleyin. Service worker'lar ile daha geli\u015fmi\u015f \u00f6nbellekleme stratejileri uygulayabilirsiniz.<\/li>\n
- CDN Kullan\u0131m\u0131:<\/strong> Statik varl\u0131klar\u0131 (resimler, k\u00fct\u00fcphaneler) CDN (\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) \u00fczerinden sunarak kullan\u0131c\u0131ya en yak\u0131n sunucudan teslim edilmesini sa\u011flay\u0131n, bu da y\u00fckleme s\u00fcrelerini azalt\u0131r.<\/li>\n<\/ul>\n<\/li>\n
- Backend ve Veritaban\u0131 Optimizasyonlar\u0131:<\/strong>\n
\n- Veritaban\u0131 \u0130ndeksleme:<\/strong> S\u0131k\u00e7a sorgulanan alanlara indeksler ekleyerek veritaban\u0131 sorgular\u0131n\u0131n performans\u0131n\u0131 art\u0131r\u0131n. \u00d6rne\u011fin, MongoDB'de
db.users.createIndex({ email: 1 })<\/code>.<\/li>\n- Sorgu Optimizasyonu:<\/strong> Gereksiz veri \u00e7ekmekten ka\u00e7\u0131n\u0131n. Sadece ihtiyac\u0131n\u0131z olan alanlar\u0131 se\u00e7in (
.select()<\/code>). \u0130li\u015fkisel veritabanlar\u0131nda JOIN<\/code> operasyonlar\u0131n\u0131 dikkatli kullan\u0131n.<\/li>\n- API Yan\u0131tlar\u0131n\u0131 \u00d6nbellekleme:<\/strong> S\u0131k\u00e7a istenen ancak nadiren de\u011fi\u015fen API yan\u0131tlar\u0131n\u0131 (\u00f6rne\u011fin, \u00fcr\u00fcn kategorileri listesi) Redis gibi bir \u00f6nbellek katman\u0131nda saklayarak veritaban\u0131na olan y\u00fck\u00fc azalt\u0131n.<\/li>\n
- Asenkron \u0130\u015flemler:<\/strong> Uzun s\u00fcreli veya zaman al\u0131c\u0131 i\u015flemleri (e-posta g\u00f6nderme, resim i\u015fleme) arka planda asenkron olarak \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kuyruk sistemleri (\u00f6rne\u011fin, RabbitMQ, Kafka) kullan\u0131n, b\u00f6ylece ana uygulama i\u015f par\u00e7ac\u0131\u011f\u0131 bloke olmaz.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
G\u00fcvenlik \u0130pu\u00e7lar\u0131: Uygulaman\u0131z\u0131 Tehditlerden Korumak<\/h3>\n
Siber sald\u0131r\u0131lar ve veri ihlalleri giderek yayg\u0131nla\u015f\u0131yor. OSD600 Lab 5 projenizde temel g\u00fcvenlik prensiplerini uygulamak hayati \u00f6nem ta\u015f\u0131r:<\/p>\n
\n- Girdi Do\u011frulamas\u0131 (Input Validation):<\/strong> Kullan\u0131c\u0131dan gelen t\u00fcm girdileri (form verileri, URL parametreleri) sunucu taraf\u0131nda mutlaka do\u011frulay\u0131n. Bu, SQL Injection, XSS (Cross-Site Scripting) ve di\u011fer injection sald\u0131r\u0131lar\u0131n\u0131 \u00f6nlemenin ilk ad\u0131m\u0131d\u0131r.<\/li>\n
- Kimlik Do\u011frulama (Authentication) ve Yetkilendirme (Authorization):<\/strong>\n
\n- \u015eifre Saklama:<\/strong> \u015eifreleri asla d\u00fcz metin olarak saklamay\u0131n.
bcrypt<\/code> gibi g\u00fcvenli hash algoritmalar\u0131 kullanarak hash'leyin ve tuzlay\u0131n (salt).<\/li>\n- JWT (JSON Web Tokens):<\/strong> Kullan\u0131c\u0131 oturumlar\u0131n\u0131 y\u00f6netmek i\u00e7in JWT kullan\u0131n. Token'lar\u0131 HTTP Only \u00e7erezlerinde saklayarak XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 koruma sa\u011flay\u0131n.<\/li>\n
- Rol Tabanl\u0131 Eri\u015fim Kontrol\u00fc (RBAC):<\/strong> Farkl\u0131 kullan\u0131c\u0131 rollerine (y\u00f6netici, kullan\u0131c\u0131) g\u00f6re belirli kaynaklara eri\u015fimi k\u0131s\u0131tlay\u0131n.<\/li>\n<\/ul>\n<\/li>\n
- CORS Politikalar\u0131:<\/strong> Cross-Origin Resource Sharing (CORS) ayarlar\u0131n\u0131z\u0131 do\u011fru bir \u015fekilde yap\u0131land\u0131r\u0131n. Yaln\u0131zca belirli g\u00fcvenilir domain'lerin API'nize eri\u015fmesine izin verin. Geli\u015ftirme a\u015famas\u0131nda ge\u00e7ici olarak t\u00fcm kaynaklara izin verseniz bile, \u00fcretimde s\u0131k\u0131 kurallar uygulay\u0131n.<\/li>\n
- \u00c7evre De\u011fi\u015fkenleri:<\/strong> Hassas bilgileri (veritaban\u0131 kimlik bilgileri, API anahtarlar\u0131, JWT secret'lar) kod i\u00e7inde saklamak yerine
.env<\/code> dosyalar\u0131 veya sunucu ortam de\u011fi\u015fkenleri arac\u0131l\u0131\u011f\u0131yla y\u00f6netin. Bu dosyalar\u0131 versiyon kontrol sistemlerine (.gitignore<\/code>) eklememeye \u00f6zen g\u00f6sterin.<\/li>\n- Ba\u011f\u0131ml\u0131l\u0131k G\u00fcvenli\u011fi:<\/strong> Projenizde kulland\u0131\u011f\u0131n\u0131z t\u00fcm \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphanelerin ve paketlerin bilinen g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 d\u00fczenli olarak kontrol edin (
npm audit<\/code>). G\u00fcvenlik g\u00fcncellemelerini takip edin ve uygulay\u0131n.<\/li>\n- HTTPS Kullan\u0131m\u0131:<\/strong> T\u00fcm ileti\u015fimi HTTPS \u00fczerinden \u015fifreleyin. Bu, \u00f6zellikle kimlik bilgileri gibi hassas verilerin iletiminde man-in-the-middle sald\u0131r\u0131lar\u0131n\u0131 \u00f6nler. Let's Encrypt gibi hizmetlerle \u00fccretsiz SSL sertifikalar\u0131 alabilirsiniz.<\/li>\n
- Hata Mesajlar\u0131n\u0131 Gizleme:<\/strong> \u00dcretim ortam\u0131nda ayr\u0131nt\u0131l\u0131 hata mesajlar\u0131n\u0131 kullan\u0131c\u0131ya g\u00f6stermek yerine, genel hata mesajlar\u0131 kullan\u0131n. Detayl\u0131 hata mesajlar\u0131, sald\u0131rganlara sisteminiz hakk\u0131nda ipu\u00e7lar\u0131 verebilir.<\/li>\n<\/ul>\n\n Uzman \u0130pucu: G\u00fcvenlik, tek seferlik bir i\u015flem de\u011fildir; s\u00fcrekli bir s\u00fcre\u00e7tir. Uygulaman\u0131z\u0131n g\u00fcvenlik durumunu d\u00fczenli olarak g\u00f6zden ge\u00e7irin, yeni g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 takip edin ve projenizi buna g\u00f6re g\u00fcncelleyin. \u00d6zellikle OSD600 Lab 5 gibi kapsaml\u0131 projelerde, g\u00fcvenlik taray\u0131c\u0131lar\u0131 ve otomatize edilmi\u015f g\u00fcvenlik testleri (SAST\/DAST) kullanmay\u0131 de\u011ferlendirebilirsiniz.\n <\/div>\n
OSD600 Lab 5 projeniz, sadece kod yazma yeteneklerinizi de\u011fil, ayn\u0131 zamanda sa\u011flam, performansl\u0131 ve g\u00fcvenli uygulamalar geli\u015ftirme yetene\u011finizi de test eder. Bu ipu\u00e7lar\u0131n\u0131 uygulayarak, projenizin hem teknik kalitesini hem de kullan\u0131c\u0131lar\u0131n ona olan g\u00fcvenini art\u0131rabilirsiniz. Performans ve g\u00fcvenlik, modern web geli\u015ftiricilerinin ay\u0131rt edici \u00f6zellikleridir ve bu lab, bu becerileri peki\u015ftirmek i\u00e7in m\u00fckemmel bir zemin sunar.<\/p>\n
Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n
OSD600 Lab 5, modern web geli\u015ftirmenin \u00e7ok katmanl\u0131 d\u00fcnyas\u0131nda ger\u00e7ek bir meydan okuma ve ayn\u0131 zamanda e\u015fsiz bir \u00f6\u011frenme f\u0131rsat\u0131d\u0131r. Bu makalede ele ald\u0131\u011f\u0131m\u0131z gibi, bu laboratuvar sadece ayr\u0131 ayr\u0131 frontend ve backend teknolojilerini \u00f6\u011frenmekten \u00e7ok daha fazlas\u0131n\u0131 gerektirir; ayn\u0131 zamanda bu bile\u015fenleri bir araya getirme, aralar\u0131ndaki ileti\u015fimi sa\u011flama, verileri kal\u0131c\u0131 k\u0131lma, uygulaman\u0131n kalitesini testlerle g\u00fcvence alt\u0131na alma, onu canl\u0131ya alma ve son olarak performans ile g\u00fcvenlik gibi kritik y\u00f6nleri optimize etme becerisini kazand\u0131r\u0131r. Bir problemden yola \u00e7\u0131karak, ad\u0131m ad\u0131m bir geli\u015ftirme ortam\u0131 kurmaktan, API'ler in\u015fa etmeye, veritabanlar\u0131n\u0131 y\u00f6netmeye, kapsaml\u0131 testler yazmaya ve son olarak DevOps yakla\u015f\u0131mlar\u0131yla uygulamay\u0131 da\u011f\u0131tmaya kadar uzanan bu yolculuk, sizi sadece bir kod yazar\u0131 olmaktan \u00e7\u0131kar\u0131p, b\u00fct\u00fcnsel bir yaz\u0131l\u0131m m\u00fchendisine d\u00f6n\u00fc\u015ft\u00fcrmeyi hedefler. Ger\u00e7ek d\u00fcnya senaryolar\u0131yla zenginle\u015ftirilmi\u015f bu pratik deneyim, kariyerinizde sizi bir ad\u0131m \u00f6ne ta\u015f\u0131yacak donan\u0131m\u0131 sunar. Unutmay\u0131n, bu labda \u00f6\u011frendi\u011finiz her \u015fey, gelecekte kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z her t\u00fcrl\u00fc yaz\u0131l\u0131m projesinin temelini olu\u015fturacakt\u0131r.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
1. OSD600 Lab 5 projesinde hangi teknolojileri kullanmal\u0131y\u0131m?<\/strong><\/p>\nGenellikle modern JavaScript ekosistemi tercih edilir. Frontend i\u00e7in React, Vue veya Angular; backend i\u00e7in Node.js ve Express; veritaban\u0131 olarak ise MongoDB (Mongoose ile) veya PostgreSQL (Sequelize ile) s\u0131k\u00e7a kullan\u0131l\u0131r. Ancak, dersin spesifik gereksinimlerine g\u00f6re bu se\u00e7imler de\u011fi\u015fiklik g\u00f6sterebilir. \u00d6nemli olan, se\u00e7ti\u011finiz teknolojileri anlamak ve bunlar\u0131 etkili bir \u015fekilde bir araya getirebilmektir.<\/p>\n
2. Lab 5 projesini geli\u015ftirirken s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan zorluklar nelerdir?<\/strong><\/p>\nEn s\u0131k kar\u015f\u0131la\u015f\u0131lan zorluklar aras\u0131nda frontend-backend entegrasyonu (CORS hatalar\u0131, API ileti\u015fim sorunlar\u0131), veritaban\u0131 \u015fema tasar\u0131m\u0131 ve ba\u011flant\u0131 sorunlar\u0131, ortam de\u011fi\u015fkenlerinin do\u011fru y\u00f6netimi, ve Docker ile da\u011f\u0131t\u0131m s\u00fcre\u00e7lerinin karma\u015f\u0131kl\u0131\u011f\u0131 bulunur. Hata ay\u0131klama (debugging) becerilerinizi geli\u015ftirmek ve stack overflow gibi kaynaklar\u0131 etkin kullanmak bu zorluklar\u0131n \u00fcstesinden gelmede yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n
3. OSD600 Lab 5 i\u00e7in test yazmak neden bu kadar \u00f6nemli?<\/strong><\/p>\nTestler, kodunuzun g\u00fcvenilirli\u011fini, do\u011frulu\u011funu ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini sa\u011flar. Hatalar\u0131 erken a\u015famada yakalar, regression'lar\u0131 \u00f6nler ve gelecekteki de\u011fi\u015fiklikler i\u00e7in bir g\u00fcvenlik a\u011f\u0131 olu\u015fturur. Ayr\u0131ca, iyi test edilmi\u015f bir proje, hem ders asistanlar\u0131 hem de potansiyel i\u015fverenler i\u00e7in kod kalitenizin bir g\u00f6stergesidir.<\/p>\n
4. Da\u011f\u0131t\u0131m a\u015famas\u0131nda dikkat etmem gereken en \u00f6nemli nokta nedir?<\/strong><\/p>\nDa\u011f\u0131t\u0131m a\u015famas\u0131nda en \u00f6nemli nokta, geli\u015ftirme ortam\u0131n\u0131z ile \u00fcretim ortam\u0131n\u0131z aras\u0131nda tutarl\u0131l\u0131k sa\u011flamakt\u0131r. Docker ve Docker Compose kullanarak bu tutarl\u0131l\u0131\u011f\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde sa\u011flayabilirsiniz. Ayr\u0131ca, ortam de\u011fi\u015fkenlerini g\u00fcvenli bir \u015fekilde y\u00f6netmek ve HTTPS gibi temel g\u00fcvenlik protokollerini uygulamak da hayati \u00f6neme sahiptir. CI\/CD boru hatlar\u0131, da\u011f\u0131t\u0131m s\u00fcre\u00e7lerini otomatize ederek insan hatalar\u0131n\u0131 azalt\u0131r ve s\u00fcrekli entegrasyonu te\u015fvik eder.<\/p>\n
5. Performans ve g\u00fcvenlik optimizasyonlar\u0131n\u0131 ne zaman yapmal\u0131y\u0131m?<\/strong><\/p>\nPerformans ve g\u00fcvenlik, geli\u015ftirme s\u00fcrecinin ba\u015f\u0131ndan itibaren d\u00fc\u015f\u00fcn\u00fclmesi gereken konulard\u0131r. Temel g\u00fcvenlik uygulamalar\u0131 (girdi do\u011frulamas\u0131, \u015fifre hash'leme) ilk kod yaz\u0131m\u0131ndan itibaren entegre edilmelidir. Performans optimizasyonlar\u0131 (indeksleme, \u00f6nbellekleme) ise uygulaman\u0131n ana i\u015flevleri tamamland\u0131ktan sonra, ancak da\u011f\u0131t\u0131mdan \u00f6nce yap\u0131lmal\u0131d\u0131r. Unutmay\u0131n, bu konular \"sonradan d\u00fczeltilecek\" \u015feyler de\u011fil, uygulaman\u0131n \u00e7ekirdek \u00f6zellikleridir.<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Modern web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli de\u011fi\u015fen teknolojileri ve karma\u015f\u0131k yap\u0131lar\u0131yla adeta bir labirent. Peki, OSD600 Lab 5 gibi…","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":[1],"tags":[],"class_list":{"0":"post-31545","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
OSD600 Lab 5: Modern Web Geli\u015ftirmede Uzmanla\u015fma Rehberi<\/title>\n<meta name=\"description\" content=\"Modern web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli de\u011fi\u015fen teknolojileri ve karma\u015f\u0131k yap\u0131lar\u0131yla adeta bir labirent. Peki, OSD600 Lab 5 gibi bir deneyim, bu labirentte yolunuzu bulman\u0131z ve ger\u00e7ek d\u00fcnya projeleri geli\u015ftirmek i\u00e7in gerekli yetkinlikleri kazanman\u0131z i\u00e7in size nas\u0131l bir f\u0131rsat sunuyor? Bu makale, OSD600 Lab 5'in kap\u0131lar\u0131n\u0131 aral\u0131yor, temel kavramlardan ileri d\u00fczey da\u011f\u0131t\u0131m stratejilerine kadar modern web uygulamas\u0131 geli\u015ftirmenin t\u00fcm a\u015famalar\u0131n\u0131 ad\u0131m ad\u0131m inceliyor. Haz\u0131rlan\u0131n, \u00e7\u00fcnk\u00fc bu laboratuvar sadece kod yazmaktan \u00e7ok daha fazlas\u0131n\u0131 vaat ediyor: sorun \u00e7\u00f6zme, entegrasyon ve bir b\u00fct\u00fcn olarak \u00e7al\u0131\u015fan sistemler kurma sanat\u0131n\u0131 \u00f6\u011freneceksiniz.\" \/>\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\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"OSD600 Lab 5: Modern Web Geli\u015ftirmede Uzmanla\u015fma Rehberi\" \/>\n<meta property=\"og:description\" content=\"Modern web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli de\u011fi\u015fen teknolojileri ve karma\u015f\u0131k yap\u0131lar\u0131yla adeta bir labirent. Peki, OSD600 Lab 5 gibi bir deneyim, bu labirentte yolunuzu bulman\u0131z ve ger\u00e7ek d\u00fcnya projeleri geli\u015ftirmek i\u00e7in gerekli yetkinlikleri kazanman\u0131z i\u00e7in size nas\u0131l bir f\u0131rsat sunuyor? Bu makale, OSD600 Lab 5'in kap\u0131lar\u0131n\u0131 aral\u0131yor, temel kavramlardan ileri d\u00fczey da\u011f\u0131t\u0131m stratejilerine kadar modern web uygulamas\u0131 geli\u015ftirmenin t\u00fcm a\u015famalar\u0131n\u0131 ad\u0131m ad\u0131m inceliyor. Haz\u0131rlan\u0131n, \u00e7\u00fcnk\u00fc bu laboratuvar sadece kod yazmaktan \u00e7ok daha fazlas\u0131n\u0131 vaat ediyor: sorun \u00e7\u00f6zme, entegrasyon ve bir b\u00fct\u00fcn olarak \u00e7al\u0131\u015fan sistemler kurma sanat\u0131n\u0131 \u00f6\u011freneceksiniz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-11T01:31:25+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=\"31 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"OSD600 Lab 5: Modern Web Geli\u015ftirmede Uzmanla\u015fma Rehberi\",\"datePublished\":\"2025-10-11T01:31:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/\"},\"wordCount\":4787,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/\",\"name\":\"OSD600 Lab 5: Modern Web Geli\u015ftirmede Uzmanla\u015fma Rehberi\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-11T01:31:25+00:00\",\"description\":\"Modern web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli de\u011fi\u015fen teknolojileri ve karma\u015f\u0131k yap\u0131lar\u0131yla adeta bir labirent. Peki, OSD600 Lab 5 gibi bir deneyim, bu labirentte yolunuzu bulman\u0131z ve ger\u00e7ek d\u00fcnya projeleri geli\u015ftirmek i\u00e7in gerekli yetkinlikleri kazanman\u0131z i\u00e7in size nas\u0131l bir f\u0131rsat sunuyor? Bu makale, OSD600 Lab 5'in kap\u0131lar\u0131n\u0131 aral\u0131yor, temel kavramlardan ileri d\u00fczey da\u011f\u0131t\u0131m stratejilerine kadar modern web uygulamas\u0131 geli\u015ftirmenin t\u00fcm a\u015famalar\u0131n\u0131 ad\u0131m ad\u0131m inceliyor. Haz\u0131rlan\u0131n, \u00e7\u00fcnk\u00fc bu laboratuvar sadece kod yazmaktan \u00e7ok daha fazlas\u0131n\u0131 vaat ediyor: sorun \u00e7\u00f6zme, entegrasyon ve bir b\u00fct\u00fcn olarak \u00e7al\u0131\u015fan sistemler kurma sanat\u0131n\u0131 \u00f6\u011freneceksiniz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"OSD600 Lab 5: Modern Web Geli\u015ftirmede Uzmanla\u015fma 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":"OSD600 Lab 5: Modern Web Geli\u015ftirmede Uzmanla\u015fma Rehberi","description":"Modern web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli de\u011fi\u015fen teknolojileri ve karma\u015f\u0131k yap\u0131lar\u0131yla adeta bir labirent. Peki, OSD600 Lab 5 gibi bir deneyim, bu labirentte yolunuzu bulman\u0131z ve ger\u00e7ek d\u00fcnya projeleri geli\u015ftirmek i\u00e7in gerekli yetkinlikleri kazanman\u0131z i\u00e7in size nas\u0131l bir f\u0131rsat sunuyor? Bu makale, OSD600 Lab 5'in kap\u0131lar\u0131n\u0131 aral\u0131yor, temel kavramlardan ileri d\u00fczey da\u011f\u0131t\u0131m stratejilerine kadar modern web uygulamas\u0131 geli\u015ftirmenin t\u00fcm a\u015famalar\u0131n\u0131 ad\u0131m ad\u0131m inceliyor. Haz\u0131rlan\u0131n, \u00e7\u00fcnk\u00fc bu laboratuvar sadece kod yazmaktan \u00e7ok daha fazlas\u0131n\u0131 vaat ediyor: sorun \u00e7\u00f6zme, entegrasyon ve bir b\u00fct\u00fcn olarak \u00e7al\u0131\u015fan sistemler kurma sanat\u0131n\u0131 \u00f6\u011freneceksiniz.","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\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"OSD600 Lab 5: Modern Web Geli\u015ftirmede Uzmanla\u015fma Rehberi","og_description":"Modern web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli de\u011fi\u015fen teknolojileri ve karma\u015f\u0131k yap\u0131lar\u0131yla adeta bir labirent. Peki, OSD600 Lab 5 gibi bir deneyim, bu labirentte yolunuzu bulman\u0131z ve ger\u00e7ek d\u00fcnya projeleri geli\u015ftirmek i\u00e7in gerekli yetkinlikleri kazanman\u0131z i\u00e7in size nas\u0131l bir f\u0131rsat sunuyor? Bu makale, OSD600 Lab 5'in kap\u0131lar\u0131n\u0131 aral\u0131yor, temel kavramlardan ileri d\u00fczey da\u011f\u0131t\u0131m stratejilerine kadar modern web uygulamas\u0131 geli\u015ftirmenin t\u00fcm a\u015famalar\u0131n\u0131 ad\u0131m ad\u0131m inceliyor. Haz\u0131rlan\u0131n, \u00e7\u00fcnk\u00fc bu laboratuvar sadece kod yazmaktan \u00e7ok daha fazlas\u0131n\u0131 vaat ediyor: sorun \u00e7\u00f6zme, entegrasyon ve bir b\u00fct\u00fcn olarak \u00e7al\u0131\u015fan sistemler kurma sanat\u0131n\u0131 \u00f6\u011freneceksiniz.","og_url":"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-11T01:31:25+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"31 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"OSD600 Lab 5: Modern Web Geli\u015ftirmede Uzmanla\u015fma Rehberi","datePublished":"2025-10-11T01:31:25+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/"},"wordCount":4787,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/","name":"OSD600 Lab 5: Modern Web Geli\u015ftirmede Uzmanla\u015fma Rehberi","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-11T01:31:25+00:00","description":"Modern web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli de\u011fi\u015fen teknolojileri ve karma\u015f\u0131k yap\u0131lar\u0131yla adeta bir labirent. Peki, OSD600 Lab 5 gibi bir deneyim, bu labirentte yolunuzu bulman\u0131z ve ger\u00e7ek d\u00fcnya projeleri geli\u015ftirmek i\u00e7in gerekli yetkinlikleri kazanman\u0131z i\u00e7in size nas\u0131l bir f\u0131rsat sunuyor? Bu makale, OSD600 Lab 5'in kap\u0131lar\u0131n\u0131 aral\u0131yor, temel kavramlardan ileri d\u00fczey da\u011f\u0131t\u0131m stratejilerine kadar modern web uygulamas\u0131 geli\u015ftirmenin t\u00fcm a\u015famalar\u0131n\u0131 ad\u0131m ad\u0131m inceliyor. Haz\u0131rlan\u0131n, \u00e7\u00fcnk\u00fc bu laboratuvar sadece kod yazmaktan \u00e7ok daha fazlas\u0131n\u0131 vaat ediyor: sorun \u00e7\u00f6zme, entegrasyon ve bir b\u00fct\u00fcn olarak \u00e7al\u0131\u015fan sistemler kurma sanat\u0131n\u0131 \u00f6\u011freneceksiniz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/osd600-lab-5-modern-web-gelistirmede-uzmanlasma-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"OSD600 Lab 5: Modern Web Geli\u015ftirmede Uzmanla\u015fma 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\/31545","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=31545"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31545\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}