fetch<\/code> veya axios<\/code> gibi k\u00fct\u00fcphaneler kullanabiliriz. A\u015fa\u011f\u0131da, basit bir oyun kart\u0131 component’inin \u00f6rnek kodu bulunmaktad\u0131r:<\/p>\nimport React from 'react';\n\nconst OyunKart\u0131 = ({ oyun }) => {\n return (\n \n 
\n {oyun.ad}<\/h3>\n
{oyun.aciklama}<\/p>\n <\/div>\n );\n};\n\nexport default OyunKart\u0131;<\/pre>\n
<\/code><\/p>\n
Bu \u00f6rnekte, oyun<\/code> prop'u olarak oyun bilgilerini al\u0131p, ilgili bilgileri g\u00f6steren bir component olu\u015fturduk. Stilleme i\u00e7in CSS veya Styled-Components gibi k\u00fct\u00fcphaneler kullanabiliriz. Daha karma\u015f\u0131k aray\u00fczler i\u00e7in React'in state y\u00f6netimi \u00e7\u00f6z\u00fcmlerinden (\u00f6rne\u011fin, Context API veya Redux) faydalanabiliriz. Uygulamam\u0131z b\u00fcy\u00fcd\u00fck\u00e7e, componentleri organize etmek ve tekrar kullan\u0131labilirli\u011fi art\u0131rmak i\u00e7in bir component k\u00fct\u00fcphanesi olu\u015fturmak iyi bir fikir olabilir. Bunu yaparken, her bir component'in tek bir sorumlulu\u011fa sahip oldu\u011fundan emin olmak \u00f6nemlidir.<\/p>\nFastAPI Backend'inin Tasar\u0131m\u0131 ve Geli\u015ftirilmesi<\/h2>\n
FastAPI ile backend'i olu\u015ftururken, \u00f6ncelikle API u\u00e7 noktalar\u0131n\u0131 (endpoints) tan\u0131mlar\u0131z. Her bir u\u00e7 nokta, belirli bir i\u015flevi yerine getirir (\u00f6rne\u011fin, oyun listesini getirme, oyun ekleme, oyun g\u00fcncelleme). FastAPI'nin type hinting \u00f6zelli\u011fi, API'nin g\u00fcvenilirli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131r\u0131r. A\u015fa\u011f\u0131da, basit bir oyun listesini d\u00f6nd\u00fcren bir u\u00e7 noktan\u0131n \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n
from fastapi import FastAPI\nfrom typing import List\n\napp = FastAPI()\n\noyunlar = [\n {\"id\": 1, \"ad\": \"Oyun 1\", \"aciklama\": \"Oyun 1 A\u00e7\u0131klamas\u0131\"},\n {\"id\": 2, \"ad\": \"Oyun 2\", \"aciklama\": \"Oyun 2 A\u00e7\u0131klamas\u0131\"},\n]\n\n@app.get(\"\/oyunlar\")\nasync def oyun_listesi():\n return oyunlar<\/pre>\n<\/code><\/p>\n
Bu \u00f6rnekte, oyunlar<\/code> listesinde bulunan oyunlar\u0131 d\u00f6nd\u00fcren \/oyunlar<\/code> u\u00e7 noktas\u0131n\u0131 tan\u0131ml\u0131yoruz. Daha karma\u015f\u0131k senaryolar i\u00e7in, veritaban\u0131 entegrasyonu gerekecektir. PostgreSQL, MongoDB veya di\u011fer veritabanlar\u0131n\u0131 kullanarak oyun verilerini depolayabilir ve y\u00f6netebiliriz. Veritaban\u0131 se\u00e7iminde, projenin \u00f6l\u00e7eklenebilirlik ihtiya\u00e7lar\u0131 ve veri yap\u0131s\u0131 g\u00f6z \u00f6n\u00fcnde bulundurulmal\u0131d\u0131r. Ayr\u0131ca, g\u00fcvenlik \u00f6nlemlerini ihmal etmemeli ve do\u011frulama mekanizmalar\u0131 (\u00f6rne\u011fin, JWT) kullanarak yetkisiz eri\u015fimi \u00f6nlemeliyiz.<\/p>\nVeritaban\u0131 Se\u00e7imi ve Entegrasyonu: Hangi Veritaban\u0131 En Uygun?<\/h3>\n
Veritaban\u0131 se\u00e7imi, projenin ihtiya\u00e7lar\u0131na ba\u011fl\u0131 olarak de\u011fi\u015fir. K\u00fc\u00e7\u00fck \u00f6l\u00e7ekli bir proje i\u00e7in SQLite yeterli olabilirken, b\u00fcy\u00fck ve \u00f6l\u00e7eklenebilir bir proje i\u00e7in PostgreSQL veya MongoDB daha uygun olacakt\u0131r. PostgreSQL, ili\u015fkisel veritaban\u0131 y\u00f6netim sistemlerinin sa\u011flaml\u0131\u011f\u0131n\u0131 ve performans\u0131n\u0131 sunar. \u00d6te yandan, MongoDB, NoSQL veritaban\u0131 olarak esnek veri modelleme olana\u011f\u0131 sunar. Her iki veritaban\u0131 da Python ile kolayca entegre edilebilir. Se\u00e7im yaparken, veri yap\u0131s\u0131, performans gereksinimleri ve gelecekteki \u00f6l\u00e7eklenebilirlik fakt\u00f6rlerini dikkate almak \u00f6nemlidir. \u00d6rne\u011fin, oyunlar\u0131n karma\u015f\u0131k ili\u015fkiler i\u00e7ermesi durumunda PostgreSQL, NoSQL veritabanlar\u0131na g\u00f6re daha avantajl\u0131 olabilir. Veritaban\u0131 se\u00e7imi, projenin mimarisini etkileyen \u00f6nemli bir karard\u0131r, bu nedenle dikkatlice ele al\u0131nmal\u0131d\u0131r.<\/p>\n
Next.js ve FastAPI Entegrasyonu: API \u00c7a\u011fr\u0131lar\u0131 ve Veri Y\u00f6netimi<\/h2>\n
Next.js frontend'\u0131 ve FastAPI backend'ini entegre etmek i\u00e7in, frontend'dan backend'e API \u00e7a\u011fr\u0131lar\u0131 yapmam\u0131z gerekir. Bu \u00e7a\u011fr\u0131lar\u0131 fetch<\/code> veya axios<\/code> gibi k\u00fct\u00fcphaneler kullanarak ger\u00e7ekle\u015ftirebiliriz. \u00d6rne\u011fin, oyun listesini \u00e7ekmek i\u00e7in a\u015fa\u011f\u0131daki kodu kullanabiliriz:<\/p>\nconst getOyunlar = async () => {\n const response = await fetch('\/api\/oyunlar'); \/\/ FastAPI u\u00e7 noktas\u0131na istek\n const oyunlar = await response.json();\n return oyunlar;\n};<\/pre>\n<\/code><\/p>\n
Bu kod par\u00e7as\u0131, \/api\/oyunlar<\/code> u\u00e7 noktas\u0131na bir istek g\u00f6nderir ve gelen JSON verisini i\u015fler. getOyunlar<\/code> fonksiyonunu kullanarak, oyun listesini frontend'da g\u00f6r\u00fcnt\u00fcleyebiliriz. Veri y\u00f6netimini iyile\u015ftirmek i\u00e7in, state y\u00f6netimi k\u00fct\u00fcphaneleri (\u00f6rne\u011fin, Redux, Zustand) veya React Context API'sini kullanabiliriz. B\u00fcy\u00fck veri k\u00fcmeleri i\u00e7in, verileri sayfalamak ve gerekti\u011finde daha fazla veri \u00e7ekmek \u00f6nemlidir. Bu sayede, uygulama performans\u0131 ve kullan\u0131c\u0131 deneyimi iyile\u015ftirilebilir. Ayr\u0131ca, API yan\u0131tlar\u0131n\u0131 do\u011frulamak ve hata y\u00f6netimi mekanizmalar\u0131 uygulamak \u00f6nemlidir. \u00d6rne\u011fin, a\u011f hatalar\u0131n\u0131 yakalamak ve kullan\u0131c\u0131ya bildirim vermek i\u00e7in try-catch<\/code> bloklar\u0131 kullanabiliriz.<\/p>\nG\u00fcvenlik ve Performans Optimizasyonu<\/h2>\n
G\u00fcvenlik, her web uygulamas\u0131 i\u00e7in kritik \u00f6neme sahiptir. Oyun market yerinizde kullan\u0131c\u0131 verilerini korumak i\u00e7in g\u00fcvenlik \u00f6nlemleri alman\u0131z elzemdir. G\u00fcvenli \u015fifreleme y\u00f6ntemleri kullanarak kullan\u0131c\u0131 \u015fifrelerini saklamal\u0131 ve yetkisiz eri\u015fimi \u00f6nlemek i\u00e7in do\u011frulama mekanizmalar\u0131 (\u00f6rne\u011fin, JWT) uygulamal\u0131s\u0131n\u0131z. Ayr\u0131ca, veritaban\u0131 g\u00fcvenli\u011fini sa\u011flamak i\u00e7in gerekli \u00f6nlemleri almal\u0131 ve d\u00fczenli g\u00fcvenlik g\u00fcncellemeleri yapmal\u0131s\u0131n\u0131z. Dikkatsiz bir \u015fekilde ele al\u0131nan g\u00fcvenlik a\u00e7\u0131klar\u0131, ciddi sonu\u00e7lara yol a\u00e7abilir. \u00d6rne\u011fin, SQL injection veya XSS sald\u0131r\u0131lar\u0131, sisteminize ciddi zarar verebilir.<\/p>\n