Web3 d\u00fcnyas\u0131na ad\u0131m atmak isteyen geli\u015ftiriciler i\u00e7in, g\u00fc\u00e7l\u00fc bir backend (FastAPI), dinamik bir frontend (Nuxt) ve blockchain entegrasyonunu bir araya getiren bir yap\u0131 kurmak, projelerinizi h\u0131zland\u0131rmak ve \u00f6l\u00e7eklendirmek a\u00e7\u0131s\u0131ndan kritik \u00f6nem ta\u015f\u0131yor. Peki, bu \u00fc\u00e7 teknolojiyi kusursuz bir \u015fekilde entegre ederek s\u0131f\u0131rdan bir Web3 uygulamas\u0131 nas\u0131l geli\u015ftirilir? Bu rehberde, bu s\u00fcreci ad\u0131m ad\u0131m ele alacak, temel kavramlar\u0131 a\u00e7\u0131klayacak ve ger\u00e7ek d\u00fcnya senaryolar\u0131yla zenginle\u015ftirece\u011fiz.<\/p>\n
G\u00fcn\u00fcm\u00fcz\u00fcn h\u0131zla geli\u015fen dijital ekosisteminde, merkeziyetsiz uygulamalar (dApps) ve blockchain teknolojileri giderek daha fazla \u00f6nem kazan\u0131yor. Bu alanda projeler geli\u015ftirmek isteyenler i\u00e7in, g\u00fc\u00e7l\u00fc bir altyap\u0131 kurmak ilk ad\u0131m. \u0130\u015fte bu noktada FastAPI, Nuxt ve Web3’\u00fcn birle\u015fimi devreye giriyor. FastAPI, Python tabanl\u0131, y\u00fcksek performansl\u0131 ve modern bir web framework’\u00fcd\u00fcr. API geli\u015ftirmede sundu\u011fu h\u0131z ve basitlik sayesinde backend taraf\u0131nda \u00f6ne \u00e7\u0131kar. Nuxt.js ise Vue.js \u00fczerine kurulu, sunucu taraf\u0131 olu\u015fturma (SSR) ve statik site olu\u015fturma (SSG) gibi \u00f6zellikleriyle \u00f6n plana \u00e7\u0131kan bir frontend framework’\u00fcd\u00fcr. Kullan\u0131c\u0131 deneyimini optimize ederken geli\u015ftirme s\u00fcrecini de kolayla\u015ft\u0131r\u0131r. Web3 teknolojileri ise blockchain, ak\u0131ll\u0131 s\u00f6zle\u015fmeler ve merkeziyetsiz a\u011flar gibi kavramlar\u0131 i\u00e7erir. Bu \u00fc\u00e7 teknolojiyi bir araya getirdi\u011fimizde, hem g\u00fcvenli, hem \u00f6l\u00e7eklenebilir, hem de kullan\u0131c\u0131 dostu dApp’ler geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc bir temel olu\u015fturmu\u015f oluruz.<\/p>\n
Bu entegrasyonun temel faydalar\u0131 aras\u0131nda \u015funlar yer al\u0131r: FastAPI’nin sundu\u011fu h\u0131zl\u0131 API geli\u015ftirme yetenekleri sayesinde blockchain’den al\u0131nan verileri kolayca i\u015fleyip frontend’e aktarabiliriz. Nuxt.js’in sundu\u011fu SSR ve SSG \u00f6zellikleri, dApp’lerimizin arama motoru optimizasyonunu (SEO) iyile\u015ftirir ve ilk y\u00fcklenme s\u00fcrelerini k\u0131salt\u0131r. Bu da kullan\u0131c\u0131lar\u0131n uygulamalar\u0131n\u0131zla daha h\u0131zl\u0131 etkile\u015fim kurmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, Nuxt’in sundu\u011fu mod\u00fcler yap\u0131, Web3 k\u00fct\u00fcphanelerini (\u00f6rne\u011fin, ethers.js veya web3.js) entegre etmeyi kolayla\u015ft\u0131r\u0131r. Bu sayede ak\u0131ll\u0131 s\u00f6zle\u015fmelerle etkile\u015fim kurabilir, kullan\u0131c\u0131lar\u0131n c\u00fczdanlar\u0131n\u0131 ba\u011flayabilir ve blockchain \u00fczerindeki i\u015flemleri ger\u00e7ekle\u015ftirebiliriz. K\u0131sacas\u0131, bu \u00fc\u00e7l\u00fc, geli\u015ftiricilere hem teknik esneklik hem de performans avantaj\u0131 sunarak, rekabet\u00e7i Web3 pazar\u0131nda \u00f6ne \u00e7\u0131kmalar\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir NFT pazar yeri olu\u015fturmak istedi\u011fimizde, FastAPI ak\u0131ll\u0131 s\u00f6zle\u015fmelerden NFT bilgilerini \u00e7ekip veritaban\u0131na kaydedebilir, Nuxt ise bu bilgileri \u015f\u0131k bir aray\u00fczle kullan\u0131c\u0131ya sunabilir. Kullan\u0131c\u0131lar, Nuxt aray\u00fcz\u00fc \u00fczerinden c\u00fczdanlar\u0131n\u0131 ba\u011flayarak NFT al\u0131m sat\u0131m\u0131 yapabilir ve bu i\u015flemler blockchain \u00fczerinde g\u00fcvenli bir \u015fekilde kaydedilir.<\/p>\n
Projelerimizin omurgas\u0131n\u0131 FastAPI ile kuraca\u011f\u0131z. FastAPI’nin asenkron deste\u011fi ve otomatik dok\u00fcmantasyon \u00f6zellikleri, geli\u015ftirme s\u00fcrecini olduk\u00e7a verimli hale getirir. \u0130lk olarak, gerekli k\u00fct\u00fcphaneleri y\u00fcklememiz gerekiyor. Bir vaka analizi olarak, merkeziyetsiz bir borsa (DEX) uygulamas\u0131n\u0131n backend’ini d\u00fc\u015f\u00fcnelim. FastAPI, kullan\u0131c\u0131lar\u0131n al\u0131m sat\u0131m emirlerini al\u0131p, bu emirleri ak\u0131ll\u0131 s\u00f6zle\u015fmelere iletmek i\u00e7in kullan\u0131labilir. Ak\u0131ll\u0131 s\u00f6zle\u015fmeler, emirlerin e\u015fle\u015ftirilmesini ve token transferlerini y\u00f6netir. FastAPI, bu i\u015flemlerin sonucunda olu\u015fan olaylar\u0131 dinleyebilir, veritaban\u0131na kaydedebilir ve frontend’e g\u00fcncel piyasa bilgilerini sa\u011flayabilir. \u00d6rne\u011fin, bir kullan\u0131c\u0131 \u0130\u015fte FastAPI ile basit bir API endpoint \u00f6rne\u011fi:<\/p>\n Backend’imiz haz\u0131r oldu\u011funa g\u00f6re, \u015fimdi kullan\u0131c\u0131lar\u0131n etkile\u015fimde bulunaca\u011f\u0131 aray\u00fcz\u00fc Nuxt.js ile in\u015fa etme zaman\u0131. Nuxt, Vue.js’in g\u00fcc\u00fcn\u00fc kullanarak geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve SEO dostu, sunucu taraf\u0131nda olu\u015fturulmu\u015f (SSR) veya statik olarak olu\u015fturulmu\u015f (SSG) uygulamalar geli\u015ftirmenizi sa\u011flar. Yeni bir Nuxt projesi olu\u015fturmak i\u00e7in Web3 entegrasyonu i\u00e7in, Nuxt uygulaman\u0131zda ethers.js veya web3.js gibi JavaScript k\u00fct\u00fcphanelerini kullanacaks\u0131n\u0131z. Bu k\u00fct\u00fcphaneler, kullan\u0131c\u0131lar\u0131n taray\u0131c\u0131lar\u0131ndaki MetaMask gibi c\u00fczdanlarla etkile\u015fim kurmas\u0131n\u0131 sa\u011flar. Kullan\u0131c\u0131lar, c\u00fczdanlar\u0131n\u0131 ba\u011flayarak ak\u0131ll\u0131 s\u00f6zle\u015fmelerle etkile\u015fimde bulunabilir, i\u015flem imzalayabilir ve blockchain’e veri g\u00f6nderebilirler. Nuxt’in mod\u00fcler yap\u0131s\u0131, bu k\u00fct\u00fcphaneleri kolayca entegre etmenize olanak tan\u0131r. \u00d6rne\u011fin, bir plugin olu\u015fturarak ethers.js’i uygulaman\u0131z\u0131n her yerinde eri\u015filebilir hale getirebilirsiniz. Nuxt’in sundu\u011fu server-side rendering (SSR) \u00f6zelli\u011fi, dApp’lerinizin ilk y\u00fcklenme performans\u0131n\u0131 art\u0131r\u0131r ve arama motorlar\u0131n\u0131n i\u00e7eri\u011finizi daha iyi indekslemesine yard\u0131mc\u0131 olur. Bu, \u00f6zellikle i\u00e7erik odakl\u0131 dApp’ler i\u00e7in \u00f6nemlidir. Statik site olu\u015fturma (SSG) ise, tamamen \u00f6nceden olu\u015fturulmu\u015f sayfalar sunarak inan\u0131lmaz h\u0131zl\u0131 y\u00fcklenme s\u00fcreleri sa\u011flar ve hosting maliyetlerini d\u00fc\u015f\u00fcrebilir. Bu, \u00f6zellikle sabit i\u00e7eriklere sahip dApp’ler i\u00e7in idealdir. Kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in Nuxt’in sundu\u011fu otomatik y\u00f6nlendirme (routing) ve bile\u015fen (component) sistemlerini etkin bir \u015fekilde kullanaca\u011f\u0131z. Bu, karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini y\u00f6netmeyi kolayla\u015ft\u0131r\u0131r.<\/p>\n Bir NFT galerisi \u00f6rne\u011fi d\u00fc\u015f\u00fcnelim. Nuxt frontend’i, FastAPI backend’inden NFT koleksiyonu bilgilerini al\u0131r. Ard\u0131ndan, her bir NFT i\u00e7in g\u00f6rseli, ad\u0131n\u0131 ve a\u00e7\u0131klamas\u0131n\u0131 g\u00f6r\u00fcnt\u00fcler. Kullan\u0131c\u0131, bir NFT’ye t\u0131klad\u0131\u011f\u0131nda, bir modal penceresi a\u00e7\u0131l\u0131r ve NFT’nin detaylar\u0131 g\u00f6sterilir. Bu modal penceresinde, kullan\u0131c\u0131 c\u00fczdan\u0131n\u0131 ba\u011flayarak NFT’yi sat\u0131n alma veya teklif verme gibi i\u015flemleri ger\u00e7ekle\u015ftirebilir. Bu i\u015flemler s\u0131ras\u0131nda, Nuxt frontend’i, ethers.js arac\u0131l\u0131\u011f\u0131yla kullan\u0131c\u0131 c\u00fczdan\u0131yla ileti\u015fim kurar, ak\u0131ll\u0131 s\u00f6zle\u015fme fonksiyonlar\u0131n\u0131 \u00e7a\u011f\u0131r\u0131r ve i\u015flemin durumunu kullan\u0131c\u0131ya bildirir. \u00d6rne\u011fin, bir NFT sat\u0131n alma i\u015flemi ba\u015flat\u0131ld\u0131\u011f\u0131nda, kullan\u0131c\u0131ya MetaMask \u00fczerinden bir onay ekran\u0131 g\u00f6sterilir. Kullan\u0131c\u0131 i\u015flemi onaylad\u0131\u011f\u0131nda, Nuxt uygulamas\u0131 i\u015flem kimli\u011fini (transaction hash) al\u0131r ve kullan\u0131c\u0131ya i\u015flemin blockchain \u00fczerindeki durumunu takip etme imkan\u0131 sunar. Bu s\u00fcre\u00e7te, loading animasyonlar\u0131 ve geri bildirim mesajlar\u0131 ile kullan\u0131c\u0131 deneyimi zenginle\u015ftirilir.<\/p>\n \u0130\u015fte Nuxt’te bir API \u00e7a\u011fr\u0131s\u0131 \u00f6rne\u011fi (sayfa bile\u015feni i\u00e7inde):<\/p>\n Bu a\u015famada, projemizin kalbi olan Web3 entegrasyonunu ger\u00e7ekle\u015ftirece\u011fiz. Ak\u0131ll\u0131 s\u00f6zle\u015fmeler, blockchain \u00fczerinde \u00e7al\u0131\u015fan ve belirli ko\u015fullar sa\u011fland\u0131\u011f\u0131nda otomatik olarak y\u00fcr\u00fct\u00fclen kod par\u00e7ac\u0131klar\u0131d\u0131r. Solidity gibi dillerle yaz\u0131lan bu s\u00f6zle\u015fmeler, merkeziyetsiz uygulamalar\u0131m\u0131z\u0131n temelini olu\u015fturur. FastAPI backend’imiz, Nuxt frontend’imiz ise, ethers.js veya web3.js gibi JavaScript k\u00fct\u00fcphaneleri arac\u0131l\u0131\u011f\u0131yla kullan\u0131c\u0131lar\u0131n taray\u0131c\u0131lar\u0131ndaki c\u00fczdanlarla (MetaMask gibi) ileti\u015fim kurar. Kullan\u0131c\u0131lar, c\u00fczdanlar\u0131n\u0131 ba\u011flayarak uygulamam\u0131zla etkile\u015fimde bulunabilirler. Bu, bir token g\u00f6nderme, bir ak\u0131ll\u0131 s\u00f6zle\u015fme fonksiyonunu \u00e7a\u011f\u0131rma veya bir NFT mintleme gibi i\u015flemleri i\u00e7erebilir. Frontend, kullan\u0131c\u0131n\u0131n c\u00fczdan\u0131ndan i\u015flem i\u00e7in onay al\u0131r, i\u015flemi blockchain’e g\u00f6nderir ve i\u015flemin durumunu kullan\u0131c\u0131ya bildirir. \u00d6rne\u011fin, bir kullan\u0131c\u0131 bir token g\u00f6ndermek istedi\u011finde, Nuxt frontend’i Ger\u00e7ek d\u00fcnya senaryosu olarak, merkeziyetsiz bir oylama sistemi geli\u015ftirdi\u011fimizi d\u00fc\u015f\u00fcnelim. Ak\u0131ll\u0131 s\u00f6zle\u015fme, oy verme kurallar\u0131n\u0131, adaylar\u0131 ve oy say\u0131m\u0131n\u0131 y\u00f6netir. FastAPI backend’i, kullan\u0131c\u0131lar\u0131n oy kullanma isteklerini al\u0131r, bu istekleri do\u011frular ve ak\u0131ll\u0131 s\u00f6zle\u015fmenin JavaScript ile c\u00fczdan ba\u011flant\u0131s\u0131 ve basit bir ak\u0131ll\u0131 s\u00f6zle\u015fme fonksiyonu \u00e7a\u011f\u0131rma \u00f6rne\u011fi (Nuxt bile\u015feni i\u00e7inde):<\/p>\n Bir DeFi uygulamas\u0131, kullan\u0131c\u0131lar\u0131n geleneksel finansal sistemlere ihtiya\u00e7 duymadan varl\u0131klar\u0131n\u0131 y\u00f6netmelerini, bor\u00e7 al\u0131p vermelerini ve ticaret yapmalar\u0131n\u0131 sa\u011flayan merkeziyetsiz uygulamalard\u0131r. Bu t\u00fcr bir uygulama geli\u015ftirmek i\u00e7in FastAPI, Nuxt ve Web3’\u00fcn g\u00fc\u00e7l\u00fc birle\u015fimi kritik \u00f6neme sahiptir. FastAPI backend’i, blockchain \u00fczerindeki token fiyatlar\u0131n\u0131 \u00e7eker, kullan\u0131c\u0131lar\u0131n bakiye bilgilerini sorgular ve ak\u0131ll\u0131 s\u00f6zle\u015fmeler arac\u0131l\u0131\u011f\u0131yla bor\u00e7 verme\/alma i\u015flemlerini y\u00f6netir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n belirli bir token’\u0131 teminat g\u00f6stererek bor\u00e7 almas\u0131 gerekti\u011finde, FastAPI bu iste\u011fi al\u0131r, gerekli do\u011frulamalar\u0131 yapar ve ak\u0131ll\u0131 s\u00f6zle\u015fmenin Nuxt frontend’i ise, kullan\u0131c\u0131lar\u0131n bu karma\u015f\u0131k DeFi ekosistemini kolayca anlay\u0131p kullanmalar\u0131n\u0131 sa\u011flar. Kullan\u0131c\u0131lar, c\u00fczdanlar\u0131n\u0131 ba\u011flayarak mevcut likidite havuzlar\u0131n\u0131 g\u00f6rebilir, bor\u00e7 verme veya alma i\u015flemlerini ba\u015flatabilir ve portf\u00f6ylerini takip edebilirler. Nuxt’in sundu\u011fu grafikler ve g\u00f6rselle\u015ftirmeler, kullan\u0131c\u0131lar\u0131n varl\u0131klar\u0131n\u0131n performans\u0131n\u0131 izlemelerine yard\u0131mc\u0131 olur. \u00d6rne\u011fin, bir kullan\u0131c\u0131 bir likidite havuzuna katk\u0131da bulunmak istedi\u011finde, Nuxt frontend’i gerekli bilgileri al\u0131r, kullan\u0131c\u0131dan onay al\u0131r ve ak\u0131ll\u0131 s\u00f6zle\u015fmenin Projeleriniz b\u00fcy\u00fcd\u00fck\u00e7e, performans ve \u00f6l\u00e7eklenebilirlik daha da \u00f6nem kazanacakt\u0131r. FastAPI taraf\u0131nda, veritaban\u0131 sorgular\u0131n\u0131z\u0131 optimize etmek, caching mekanizmalar\u0131n\u0131 kullanmak (\u00f6rne\u011fin, Redis ile) ve asenkron i\u015flemleri etkin bir \u015fekilde y\u00f6netmek performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r. \u00d6zellikle blockchain’den s\u0131k\u00e7a veri \u00e7ekiyorsan\u0131z, bu verileri \u00f6nbelle\u011fe almak, a\u011f \u00fczerindeki y\u00fck\u00fc azalt\u0131r ve yan\u0131t s\u00fcrelerini h\u0131zland\u0131r\u0131r. Ayr\u0131ca, FastAPI’nin dependency injection (ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu) \u00f6zelli\u011fini kullanarak kodunuzu daha mod\u00fcler ve test edilebilir hale getirebilirsiniz. Bu, \u00f6zellikle karma\u015f\u0131k ak\u0131ll\u0131 s\u00f6zle\u015fme etkile\u015fimlerini y\u00f6netirken faydal\u0131d\u0131r.<\/p>\n Nuxt frontend’inde ise, code splitting (kod b\u00f6lme) ve lazy loading (tembel y\u00fckleme) gibi tekniklerle sayfa y\u00fcklenme s\u00fcrelerini optimize edebilirsiniz. Bu, kullan\u0131c\u0131lar\u0131n yaln\u0131zca ihtiya\u00e7 duyduklar\u0131 kodu indirmesini sa\u011flayarak ilk y\u00fcklenme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. Vuex store’unuzu ak\u0131ll\u0131ca yap\u0131land\u0131rmak, durum y\u00f6netimini kolayla\u015ft\u0131r\u0131r ve uygulaman\u0131z\u0131n performans\u0131n\u0131 art\u0131r\u0131r. \u00d6zellikle Web3 ile ilgili durumlar\u0131 (c\u00fczdan ba\u011flant\u0131s\u0131, i\u015flem durumlar\u0131 vb.) y\u00f6netirken, Vuex’in sundu\u011fu mod\u00fclerlikten faydalanmak \u00f6nemlidir. Web3 entegrasyonunda, ethers.js veya web3.js k\u00fct\u00fcphanelerinin en son s\u00fcr\u00fcmlerini kullanmak ve g\u00fcncel blockchain standartlar\u0131na uyum sa\u011flamak \u00f6nemlidir. Ayr\u0131ca, kullan\u0131c\u0131lar\u0131n farkl\u0131 zincirler (\u00f6rne\u011fin, Ethereum, Polygon, BSC) aras\u0131nda ge\u00e7i\u015f yapabilmesi i\u00e7in uygulaman\u0131z\u0131 \u00e7oklu zincir deste\u011fiyle geli\u015ftirebilirsiniz. Bu, daha geni\u015f bir kullan\u0131c\u0131 kitlesine ula\u015fman\u0131z\u0131 sa\u011flar. G\u00fcvenlik a\u00e7\u0131s\u0131ndan, API anahtarlar\u0131n\u0131z\u0131 ve \u00f6zel bilgilerinizi g\u00fcvenli bir \u015fekilde saklamak i\u00e7in ortam de\u011fi\u015fkenlerini (environment variables) kullan\u0131n ve bunlar\u0131 versiyon kontrol sistemine (Git gibi) dahil etmeyin. Ayr\u0131ca, frontend’de kullan\u0131c\u0131 girdilerini her zaman do\u011frulay\u0131n ve olas\u0131 XSS (Cross-Site Scripting) sald\u0131r\u0131lar\u0131na kar\u015f\u0131 \u00f6nlem al\u0131n.<\/p>\n Bir di\u011fer \u00f6nemli optimizasyon alan\u0131, ak\u0131ll\u0131 s\u00f6zle\u015fmelerin kendisidir. S\u00f6zle\u015fmelerinizi yazarken gas optimizasyonlar\u0131na dikkat etmek, kullan\u0131c\u0131lar\u0131n \u00f6deyece\u011fi i\u015flem \u00fccretlerini d\u00fc\u015f\u00fcrecektir. Ayr\u0131ca, s\u00f6zle\u015fmelerinizi m\u00fcmk\u00fcn oldu\u011funca k\u00fc\u00e7\u00fck ve verimli tutmaya \u00e7al\u0131\u015f\u0131n. Karma\u015f\u0131k mant\u0131\u011f\u0131 backend’e ta\u015f\u0131mak, s\u00f6zle\u015fmelerin daha basit ve denetimi daha kolay olmas\u0131n\u0131 sa\u011flayabilir. \u00d6rne\u011fin, karma\u015f\u0131k veri analizi veya kullan\u0131c\u0131 aray\u00fcz\u00fcyle ilgili i\u015flemler ak\u0131ll\u0131 s\u00f6zle\u015fmeler yerine FastAPI backend’inde yap\u0131labilir. Bu, hem gas maliyetlerini d\u00fc\u015f\u00fcr\u00fcr hem de s\u00f6zle\u015fmelerin daha anla\u015f\u0131l\u0131r olmas\u0131n\u0131 sa\u011flar.<\/p>\n FastAPI, Nuxt ve Web3 teknolojilerini bir araya getirerek, hem g\u00fc\u00e7l\u00fc hem de kullan\u0131c\u0131 dostu merkeziyetsiz uygulamalar geli\u015ftirmek art\u0131k \u00e7ok daha eri\u015filebilir. Bu rehberde, bu \u00fc\u00e7 teknolojinin nas\u0131l entegre edilece\u011fini, temel kavramlar\u0131 ve ger\u00e7ek d\u00fcnya senaryolar\u0131n\u0131 ele ald\u0131k. FastAPI’nin h\u0131z\u0131 ve basitli\u011fi, Nuxt’in esnekli\u011fi ve Web3’\u00fcn sundu\u011fu merkeziyetsizlik, geli\u015ftiricilere yenilik\u00e7i projeler hayata ge\u00e7irmek i\u00e7in sa\u011flam bir temel sunuyor. Bu yap\u0131, \u00f6zellikle dijital varl\u0131k y\u00f6netimi, merkeziyetsiz finans (DeFi), NFT platformlar\u0131 ve oyun gibi alanlarda geli\u015ftirilen uygulamalar i\u00e7in ideal bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Unutmay\u0131n ki, Web3 ekosistemi s\u00fcrekli geli\u015fiyor, bu nedenle g\u00fcncel kalmak ve yeni teknolojileri takip etmek b\u00fcy\u00fck \u00f6nem ta\u015f\u0131yor.<\/p>\n #FastAPI #Nuxt #Web3 #Blockchain #Geli\u015ftirme #MerkeziyetsizUygulamalar<\/p>\npip install fastapi uvicorn python-multipart<\/code> komutuyla bu k\u00fct\u00fcphaneleri kurabiliriz. Ard\u0131ndan, temel bir FastAPI uygulamas\u0131 olu\u015fturabiliriz. Bu uygulama, frontend’den gelen istekleri kar\u015f\u0131layacak ve blockchain ile etkile\u015fim kuracak API endpoint’lerini bar\u0131nd\u0131racakt\u0131r. \u00d6rne\u011fin, bir NFT koleksiyonunun bilgilerini getiren bir endpoint olu\u015fturmak isteyebiliriz. Bu endpoint, ak\u0131ll\u0131 s\u00f6zle\u015fmeden NFT’lerin meta verilerini \u00e7ekecek ve JSON format\u0131nda d\u00f6nd\u00fcrecektir. Bu noktada, Web3 entegrasyonu i\u00e7in web3.py<\/code> gibi Python k\u00fct\u00fcphanelerini kullanaca\u011f\u0131z. Bu k\u00fct\u00fcphane, Ethereum a\u011f\u0131 ile etkile\u015fim kurmam\u0131z\u0131 sa\u011flar. Ak\u0131ll\u0131 s\u00f6zle\u015fme adresimizi ve ABI’mizi (Application Binary Interface) kullanarak s\u00f6zle\u015fme nesneleri olu\u015fturabilir ve fonksiyonlar\u0131n\u0131 \u00e7a\u011f\u0131rabiliriz. \u00d6rne\u011fin, bir NFT’nin sahibini sorgulamak i\u00e7in basit bir fonksiyon yazabiliriz. Bu fonksiyon, ak\u0131ll\u0131 s\u00f6zle\u015fmenin ownerOf<\/code> fonksiyonunu \u00e7a\u011f\u0131racak ve sonucu d\u00f6nd\u00fcrecektir. Veri g\u00fcvenli\u011fi ve yetkilendirme i\u00e7in FastAPI’nin sundu\u011fu g\u00fcvenlik \u00f6zelliklerini de kullanaca\u011f\u0131z. API anahtarlar\u0131, OAuth2 veya JWT (JSON Web Tokens) gibi y\u00f6ntemlerle kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 yapabiliriz. Bu, hassas verilerin korunmas\u0131 ve yetkisiz eri\u015fimin engellenmesi i\u00e7in hayati \u00f6nem ta\u015f\u0131r. Ayr\u0131ca, FastAPI’nin otomatik olarak olu\u015fturdu\u011fu OpenAPI (Swagger UI) dok\u00fcmantasyonu, API’mizin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamay\u0131 ve test etmeyi kolayla\u015ft\u0131r\u0131r. Bu, frontend geli\u015ftiricileriyle olan ileti\u015fimi de g\u00fc\u00e7lendirir.<\/p>\nbuyToken<\/code> fonksiyonunu \u00e7a\u011f\u0131rd\u0131\u011f\u0131nda, FastAPI bu iste\u011fi al\u0131r, gerekli parametreleri do\u011frular ve web3.py<\/code> arac\u0131l\u0131\u011f\u0131yla ak\u0131ll\u0131 s\u00f6zle\u015fmenin ilgili fonksiyonunu \u00e7a\u011f\u0131r\u0131r. \u0130\u015flem tamamland\u0131ktan sonra, ak\u0131ll\u0131 s\u00f6zle\u015fmeden gelen ba\u015far\u0131 veya hata bilgisini al\u0131r ve kullan\u0131c\u0131ya geri bildirimde bulunur. Bu s\u00fcre\u00e7te, i\u015flem \u00fccretleri, gas limitleri gibi blockchain’e \u00f6zg\u00fc parametrelerin y\u00f6netimi de FastAPI taraf\u0131ndan yap\u0131labilir. Ayr\u0131ca, FastAPI, blockchain’den gelen b\u00fcy\u00fck veri setlerini verimli bir \u015fekilde i\u015fleyebilir ve \u00f6nbelle\u011fe alarak performans art\u0131\u015f\u0131 sa\u011flayabilir. \u00d6rne\u011fin, token fiyatlar\u0131n\u0131n ge\u00e7mi\u015f verileri d\u00fczenli olarak \u00e7ekilip bir veritaban\u0131na kaydedilebilir ve frontend’e daha h\u0131zl\u0131 sunulabilir.<\/p>\n\nfrom fastapi import FastAPI\nfrom pydantic import BaseModel\nimport web3 # Bu k\u00fct\u00fcphanenin y\u00fckl\u00fc oldu\u011funu varsay\u0131yoruz\n\napp = FastAPI()\n\n# Web3 ba\u011flant\u0131s\u0131 ve ak\u0131ll\u0131 s\u00f6zle\u015fme yap\u0131land\u0131rmas\u0131\n# Ger\u00e7ek bir projede bu bilgileri g\u00fcvenli bir \u015fekilde saklamal\u0131s\u0131n\u0131z\nw3 = Web3(Web3.HTTPProvider(\"YOUR_INFURA_URL\")) # Veya kendi Ethereum node'unuz\ncontract_address = \"YOUR_CONTRACT_ADDRESS\"\ncontract_abi = [...] # Ak\u0131ll\u0131 s\u00f6zle\u015fmenizin ABI'si\n\ncontract = w3.eth.contract(address=contract_address, abi=contract_abi)\n\nclass TokenInfo(BaseModel):\n token_id: int\n\n@app.get(\"\/token_owner\/{token_id}\")\nasync def get_token_owner(token_id: int):\n try:\n owner_address = contract.functions.ownerOf(token_id).call()\n return {\"token_id\": token_id, \"owner\": owner_address}\n except Exception as e:\n return {\"error\": str(e)}\n <\/code><\/pre>\nAd\u0131m 2: Nuxt.js ile Etkileyici Bir Frontend Tasar\u0131m\u0131<\/h3>\n
npx create-nuxt-app my-web3-app<\/code> komutunu kullanabilirsiniz. Proje kurulumu s\u0131ras\u0131nda, Vuex (durum y\u00f6netimi i\u00e7in) ve Tailwind CSS (h\u0131zl\u0131 stil verme i\u00e7in) gibi ara\u00e7lar\u0131 se\u00e7ebilirsiniz. Nuxt projenizde, FastAPI backend’imizle ileti\u015fim kuracak API \u00e7a\u011fr\u0131lar\u0131n\u0131 ger\u00e7ekle\u015ftirece\u011fiz. Genellikle, axios<\/code> k\u00fct\u00fcphanesi bu ama\u00e7la kullan\u0131l\u0131r. Vuex store’unuzda, kullan\u0131c\u0131 bilgilerini, c\u00fczdan ba\u011flant\u0131 durumunu ve blockchain’den al\u0131nan verileri saklayabilirsiniz. Bu, uygulaman\u0131z\u0131n farkl\u0131 bile\u015fenleri aras\u0131nda veri payla\u015f\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n\n<template>\n <div>\n <h1>NFT Detaylar\u0131: {{ tokenId }}<\/h1>\n <div v-if=\"tokenData\">\n <p>Sahibi: {{ tokenData.owner }}<\/p>\n <!-- Di\u011fer NFT detaylar\u0131 buraya eklenebilir -->\n <\/div>\n <div v-else>\n <p>Y\u00fckleniyor...<\/p>\n <\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data() {\n return {\n tokenId: this.$route.params.id,\n tokenData: null,\n };\n },\n async mounted() {\n try {\n const response = await this.$axios.get(\/token_owner\/${this.tokenId}<\/code>);\n this.tokenData = response.data;\n } catch (error) {\n console.error(\"NFT verisi al\u0131namad\u0131:\", error);\n }\n },\n};\n<\/script>\n <\/code><\/pre>\nAd\u0131m 3: Web3 Entegrasyonu ve Ak\u0131ll\u0131 S\u00f6zle\u015fmelerle Etkile\u015fim<\/h3>\n
web3.py<\/code> k\u00fct\u00fcphanesi arac\u0131l\u0131\u011f\u0131yla bu ak\u0131ll\u0131 s\u00f6zle\u015fmelerle etkile\u015fim kuracakt\u0131r. Bu, veri okuma (\u00f6rne\u011fin, token bakiyeleri, sahiplik bilgileri) ve veri yazma (\u00f6rne\u011fin, token transferleri, ak\u0131ll\u0131 s\u00f6zle\u015fme fonksiyonlar\u0131n\u0131 \u00e7a\u011f\u0131rma) i\u015flemlerini i\u00e7erir. FastAPI’de, ak\u0131ll\u0131 s\u00f6zle\u015fme ABI’sini ve adresini kullanarak bir s\u00f6zle\u015fme nesnesi olu\u015ftururuz. Ard\u0131ndan, bu nesne \u00fczerinden s\u00f6zle\u015fmenin fonksiyonlar\u0131n\u0131 \u00e7a\u011f\u0131rabiliriz. \u00d6rne\u011fin, bir NFT’nin sahibini \u00f6\u011frenmek i\u00e7in ownerOf(tokenId)<\/code> fonksiyonunu \u00e7a\u011f\u0131rabiliriz. Bu fonksiyon, blockchain’den ilgili token’\u0131n sahibinin adresini d\u00f6nd\u00fcrecektir. \u0130\u015flem \u00fccretleri (gas fees) ve i\u015flem limitleri gibi blockchain’e \u00f6zg\u00fc parametrelerin y\u00f6netimi de bu a\u015famada \u00f6nemlidir.<\/p>\ntransfer<\/code> fonksiyonunu \u00e7a\u011f\u0131r\u0131r. Bu fonksiyon, al\u0131c\u0131 adresini ve g\u00f6nderilecek token miktar\u0131n\u0131 parametre olarak al\u0131r. Kullan\u0131c\u0131, MetaMask \u00fczerinden bu i\u015flemi onaylar. \u0130\u015flem blockchain’e g\u00f6nderildikten sonra, frontend kullan\u0131c\u0131s\u0131na i\u015flemin ba\u015far\u0131yla tamamland\u0131\u011f\u0131na dair bir bildirim g\u00f6sterir. Bu entegrasyonun g\u00fcvenli\u011fi de kritik \u00f6neme sahiptir. Kullan\u0131c\u0131lar\u0131n \u00f6zel anahtarlar\u0131 asla frontend’de saklanmamal\u0131d\u0131r. T\u00fcm hassas i\u015flemler c\u00fczdanlar arac\u0131l\u0131\u011f\u0131yla g\u00fcvenli bir \u015fekilde ger\u00e7ekle\u015ftirilmelidir. Ayr\u0131ca, ak\u0131ll\u0131 s\u00f6zle\u015fmelerin denetimden ge\u00e7irilmesi (audit) ve olas\u0131 g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131n giderilmesi, dApp’lerimizin g\u00fcvenilirli\u011fini art\u0131r\u0131r.<\/p>\ncastVote<\/code> fonksiyonunu \u00e7a\u011f\u0131r\u0131r. Nuxt frontend’i ise, kullan\u0131c\u0131lar\u0131n mevcut oylama se\u00e7eneklerini g\u00f6rmesini, oy kullanmas\u0131n\u0131 ve sonu\u00e7lar\u0131 takip etmesini sa\u011flar. Kullan\u0131c\u0131lar, c\u00fczdanlar\u0131n\u0131 ba\u011flayarak oy kullanabilirler. Bu s\u00fcre\u00e7te, her kullan\u0131c\u0131n\u0131n yaln\u0131zca bir kez oy kullanabilmesi gibi kurallar ak\u0131ll\u0131 s\u00f6zle\u015fme taraf\u0131ndan zorlan\u0131r. Frontend, kullan\u0131c\u0131ya oy verme i\u015fleminin ba\u015far\u0131l\u0131 oldu\u011funa dair bir onay mesaj\u0131 g\u00f6sterir ve oylama sonu\u00e7lar\u0131n\u0131 ger\u00e7ek zamanl\u0131 olarak g\u00fcnceller. Bu, \u015feffaf ve g\u00fcvenli bir oylama s\u00fcreci sunar.<\/p>\n\n<template>\n <div>\n <button @click=\"connectWallet\">C\u00fczdan\u0131 Ba\u011fla<\/button>\n <button @click=\"mintNft\" v-if=\"isConnected\">NFT Mintle<\/button>\n <p v-if=\"account\">Ba\u011fl\u0131 C\u00fczdan: {{ account }}<\/p>\n <\/div>\n<\/template>\n\n<script>\nimport { ethers } from 'ethers'; \/\/ ethers.js k\u00fct\u00fcphanesini kullan\u0131yoruz\n\nexport default {\n data() {\n return {\n isConnected: false,\n account: null,\n provider: null,\n signer: null,\n contract: null,\n };\n },\n methods: {\n async connectWallet() {\n if (window.ethereum) {\n try {\n this.provider = new ethers.providers.Web3Provider(window.ethereum);\n await this.provider.send(\"eth_requestAccounts\", []);\n this.signer = this.provider.getSigner();\n this.account = await this.signer.getAddress();\n this.isConnected = true;\n\n \/\/ Ak\u0131ll\u0131 s\u00f6zle\u015fme yap\u0131land\u0131rmas\u0131\n const contractAddress = \"YOUR_CONTRACT_ADDRESS\";\n const contractAbi = [...]; \/\/ Ak\u0131ll\u0131 s\u00f6zle\u015fmenizin ABI'si\n this.contract = new ethers.Contract(contractAddress, contractAbi, this.signer);\n\n } catch (error) {\n console.error(\"C\u00fczdan ba\u011flant\u0131s\u0131 hatas\u0131:\", error);\n }\n } else {\n alert(\"MetaMask kurulu de\u011fil. L\u00fctfen MetaMask'i y\u00fckleyin.\");\n }\n },\n async mintNft() {\n if (!this.contract) {\n alert(\"L\u00fctfen \u00f6nce c\u00fczdan\u0131n\u0131z\u0131 ba\u011flay\u0131n.\");\n return;\n }\n try {\n const tx = await this.contract.mint({ value: ethers.utils.parseEther(\"0.1\") }); \/\/ \u00d6rnek mint i\u015flemi, 0.1 ETH g\u00f6nderiliyor\n await tx.wait(); \/\/ \u0130\u015flemin onaylanmas\u0131n\u0131 bekle\n alert(\"NFT ba\u015far\u0131yla mintlendi!\");\n } catch (error) {\n console.error(\"NFT mintleme hatas\u0131:\", error);\n alert(\"NFT mintleme ba\u015far\u0131s\u0131z oldu.\");\n }\n },\n },\n};\n<\/script>\n <\/code><\/pre>\nGer\u00e7ek D\u00fcnya Senaryosu: Merkeziyetsiz Finans (DeFi) Uygulamas\u0131<\/h3>\n
borrow<\/code> fonksiyonunu \u00e7a\u011f\u0131r\u0131r. Bu fonksiyon, teminat\u0131 al\u0131r, borcu verir ve ilgili kay\u0131tlar\u0131 blockchain’e yazar.<\/p>\naddLiquidity<\/code> fonksiyonunu \u00e7a\u011f\u0131r\u0131r. \u0130\u015flem tamamland\u0131ktan sonra, frontend kullan\u0131c\u0131ya sa\u011flad\u0131\u011f\u0131 likidite pay\u0131n\u0131 ve kazand\u0131\u011f\u0131 faiz oran\u0131n\u0131 g\u00f6sterir. Bu s\u00fcre\u00e7te, kullan\u0131c\u0131lar\u0131n i\u015flem \u00fccretleri, gas limitleri ve beklenen getiriler hakk\u0131nda bilgilendirilmesi de \u00f6nemlidir. G\u00fcvenlik, DeFi uygulamalar\u0131nda en \u00fcst d\u00fczeyde tutulmal\u0131d\u0131r. Ak\u0131ll\u0131 s\u00f6zle\u015fmelerin detayl\u0131 denetimlerden ge\u00e7irilmesi, kullan\u0131c\u0131lar\u0131n fonlar\u0131n\u0131n g\u00fcvende olmas\u0131n\u0131 sa\u011flar. FastAPI backend’i, olas\u0131 doland\u0131r\u0131c\u0131l\u0131k giri\u015fimlerini tespit etmek i\u00e7in de kullan\u0131labilir. \u00d6rne\u011fin, anormal derecede y\u00fcksek i\u015flem hacimlerini veya \u015f\u00fcpheli i\u015flem desenlerini izleyebilir ve uyar\u0131lar \u00fcretebilir.<\/p>\n\u0130leri D\u00fczey \u0130pu\u00e7lar\u0131 ve Optimizasyonlar<\/h3>\n
Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h3>\n
S\u0131k\u00e7a Sorulan Sorular<\/h4>\n
\n
\n
\n C: FastAPI, y\u00fcksek performansl\u0131 API’ler olu\u015fturman\u0131z\u0131 sa\u011flarken, Nuxt.js, SEO dostu ve kullan\u0131c\u0131 deneyimi odakl\u0131 frontend’ler geli\u015ftirmenize olanak tan\u0131r. Web3 entegrasyonu ise merkeziyetsiz uygulamalar\u0131n\u0131z\u0131n temelini olu\u015fturur. Bu kombinasyon, h\u0131zl\u0131 geli\u015ftirme, iyi performans ve g\u00fc\u00e7l\u00fc g\u00fcvenlik sunar.\n <\/li>\n
\n
\n C: G\u00fcvenlik, Web3 projelerinde en \u00f6nemli unsurdur. Ak\u0131ll\u0131 s\u00f6zle\u015fmelerinizi, uzman denetim firmalar\u0131 taraf\u0131ndan denetimden ge\u00e7irmeniz, olas\u0131 g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 tespit etmenize ve kullan\u0131c\u0131 fonlar\u0131n\u0131z\u0131 koruman\u0131za yard\u0131mc\u0131 olur.\n <\/li>\n
\n
\n C: Nuxt frontend’inizde, ethers.js veya web3.js gibi k\u00fct\u00fcphaneleri kullanarak, kullan\u0131c\u0131lara farkl\u0131 a\u011flar aras\u0131nda ge\u00e7i\u015f yapma imkan\u0131 sunabilirsiniz. Bu, uygulaman\u0131z\u0131n daha geni\u015f bir kitleye ula\u015fmas\u0131n\u0131 sa\u011flar.\n <\/li>\n
\n
\n C: FastAPI taraf\u0131nda veritaban\u0131 optimizasyonu, caching ve asenkron i\u015flemler; Nuxt taraf\u0131nda ise code splitting ve lazy loading gibi teknikler kullanarak \u00f6l\u00e7eklenebilirli\u011fi art\u0131rabilirsiniz. Ak\u0131ll\u0131 s\u00f6zle\u015fmelerinizi de gas optimizasyonlar\u0131na dikkat ederek geli\u015ftirmelisiniz.\n <\/li>\n<\/ul>\n