G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda i\u00e7erik t\u00fcketimi, reklam bombard\u0131man\u0131 ve s\u0131n\u0131rl\u0131 ki\u015fiselle\u015ftirme se\u00e7enekleriyle dolu bir deneyim haline geldi. \u00d6zellikle anime hayranlar\u0131 i\u00e7in, izledikleri serileri takip etmek, yeni \u00e7\u0131kanlar\u0131 ke\u015ffetmek ve ki\u015fisel listelerini y\u00f6netmek, genellikle reklamlarla dolu, karma\u015f\u0131k veya yeterince esnek olmayan platformlarda bir m\u00fccadeleye d\u00f6n\u00fc\u015febiliyor. Peki ya kendi kurallar\u0131n\u0131z\u0131 koydu\u011funuz, tamamen reklams\u0131z ve sizin istedi\u011finiz gibi \u015fekillendirilmi\u015f bir anime takip panosuna sahip olsayd\u0131n\u0131z? \u0130\u015fte bu makalede, AniList API’nin g\u00fcc\u00fcn\u00fc kullanarak s\u0131f\u0131rdan, reklamlardan ar\u0131nd\u0131r\u0131lm\u0131\u015f, ki\u015fisel bir anime panosu olu\u015fturman\u0131n t\u00fcm ad\u0131mlar\u0131n\u0131, temel kavramlardan ileri d\u00fczey optimizasyonlara kadar detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Bu rehber sayesinde, hem kendi projenizi hayata ge\u00e7irecek hem de modern web geli\u015ftirme teknikleri hakk\u0131nda de\u011ferli bilgiler edineceksiniz.<\/p>\n
Anime d\u00fcnyas\u0131, her ge\u00e7en g\u00fcn geni\u015fleyen ve milyonlarca hayran\u0131 pe\u015finden s\u00fcr\u00fckleyen devasa bir k\u00fclt\u00fcrel fenomendir. Ancak bu zengin i\u00e7eri\u011fi takip etmek, y\u00f6netmek ve ke\u015ffetmek i\u00e7in kulland\u0131\u011f\u0131m\u0131z ara\u00e7lar, \u00e7o\u011fu zaman beklentilerimizi kar\u015f\u0131lamaktan uzak kalabiliyor. Mevcut pop\u00fcler anime takip platformlar\u0131, belirli avantajlar sunsa da, beraberinde bir\u00e7ok s\u0131n\u0131rlamay\u0131 da getiriyor. Bu s\u0131n\u0131rlamalar, \u00f6zellikle kullan\u0131c\u0131 deneyimi ve ki\u015fiselle\u015ftirme a\u00e7\u0131s\u0131ndan ciddi bo\u015fluklar yaratmaktad\u0131r. \u0130\u015fte bu noktada, kendi anime panonuzu in\u015fa etme fikri cazip hale geliyor.<\/p>\n
\u00d6ncelikle, reklam bombard\u0131man\u0131, bir\u00e7ok kullan\u0131c\u0131n\u0131n en b\u00fcy\u00fck \u015fikayetlerinden biridir. \u00c7o\u011fu \u00fccretsiz platform, gelir elde etmek amac\u0131yla sayfalar\u0131n\u0131 banner, pop-up veya video reklamlarla doldurur. Bu durum, bir yandan i\u00e7eri\u011fe odaklanmay\u0131 zorla\u015ft\u0131r\u0131rken, di\u011fer yandan da genel kullan\u0131c\u0131 deneyimini olumsuz etkiler. Yeni bir anime b\u00f6l\u00fcm\u00fc hakk\u0131nda bilgi ararken ya da izleme listenizi g\u00fcncellerken s\u00fcrekli kar\u015f\u0131n\u0131za \u00e7\u0131kan rahats\u0131z edici reklamlar, keyifli olmas\u0131 gereken bir aktiviteyi \u00e7ileye d\u00f6n\u00fc\u015ft\u00fcrebilir. Kendi panonuzu kurdu\u011funuzda, bu reklam karma\u015fas\u0131ndan tamamen kurtulur, temiz ve odaklanm\u0131\u015f bir aray\u00fczde gezinebilirsiniz. Bu, sadece estetik bir tercih de\u011fil, ayn\u0131 zamanda verimlilik ve zihinsel rahatl\u0131k a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck bir avantajd\u0131r.<\/p>\n
\u0130kinci \u00f6nemli nokta ise ki\u015fiselle\u015ftirme eksikli\u011fidir. Bir\u00e7ok platform, kullan\u0131c\u0131lar\u0131na s\u0131n\u0131rl\u0131 \u00f6l\u00e7\u00fcde aray\u00fcz temas\u0131 veya liste g\u00f6r\u00fcn\u00fcm\u00fc sunar. Ancak kendi panonuzu in\u015fa etti\u011finizde, her \u015fey sizin kontrol\u00fcn\u00fczdedir. Panonuzun renginden d\u00fczenine, hangi bilgilerin nerede g\u00f6sterilece\u011fine kadar her detay\u0131 kendi zevkinize ve ihtiya\u00e7lar\u0131n\u0131za g\u00f6re \u015fekillendirebilirsiniz. \u00d6rne\u011fin, Ay\u015fe ad\u0131nda bir anime hayran\u0131 d\u00fc\u015f\u00fcnelim. Ay\u015fe, mevcut platformlarda en \u00e7ok izledi\u011fi t\u00fcrleri \u00f6ne \u00e7\u0131karan, belirli bir puan\u0131n \u00fczerindeki animeleri filtreleyebilen ve hatta karakterlerin do\u011fum g\u00fcnlerini g\u00f6steren bir takvim entegrasyonu isteyen bir kullan\u0131c\u0131. Ancak kulland\u0131\u011f\u0131 platformlar bu esnekli\u011fi sunmad\u0131\u011f\u0131 i\u00e7in s\u00fcrekli bir hayal k\u0131r\u0131kl\u0131\u011f\u0131 ya\u015f\u0131yor. Kendi panosunu kurdu\u011funda ise, tam da bu \u00f6zelliklere sahip, sadece kendi ilgi alanlar\u0131na odaklanm\u0131\u015f bir deneyim yaratma \u015fans\u0131na sahip olur. Bu, sadece bir takip arac\u0131 olmaktan \u00f6te, sizin anime d\u00fcnyan\u0131z\u0131n bir uzant\u0131s\u0131 haline gelir.<\/p>\n
Veri gizlili\u011fi ve kontrol\u00fc de g\u00f6z ard\u0131 edilmemesi gereken bir di\u011fer fakt\u00f6rd\u00fcr. \u00dc\u00e7\u00fcnc\u00fc taraf platformlar, kullan\u0131c\u0131 verilerini \u00e7e\u015fitli ama\u00e7larla toplayabilir ve i\u015fleyebilir. Kendi \u00e7\u00f6z\u00fcm\u00fcn\u00fcz\u00fc geli\u015ftirdi\u011finizde, hangi verilerin topland\u0131\u011f\u0131na, nas\u0131l sakland\u0131\u011f\u0131na ve kimlerle payla\u015f\u0131ld\u0131\u011f\u0131na dair tam kontrole sahip olursunuz. Bu, \u00f6zellikle ki\u015fisel verilerin korunmas\u0131n\u0131n giderek daha fazla \u00f6nem kazand\u0131\u011f\u0131 g\u00fcn\u00fcm\u00fczde, kullan\u0131c\u0131lar i\u00e7in b\u00fcy\u00fck bir g\u00fcvence sa\u011flar. Kendi sunucunuzda bar\u0131nd\u0131rd\u0131\u011f\u0131n\u0131z veya tamamen istemci taraf\u0131nda (client-side) \u00e7al\u0131\u015fan bir uygulama ile verilerinizin g\u00fcvenli\u011fini bizzat y\u00f6netebilirsiniz.<\/p>\n
Son olarak, kendi anime panonuzu kurmak, sadece bir proje geli\u015ftirmekten \u00f6te, ayn\u0131 zamanda de\u011ferli bir \u00f6\u011frenme ve geli\u015ftirme f\u0131rsat\u0131d\u0131r. Web geli\u015ftirmenin temel ta\u015flar\u0131ndan olan API entegrasyonu, veritaban\u0131 y\u00f6netimi (e\u011fer kullanmay\u0131 tercih ederseniz), kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) ve kullan\u0131c\u0131 deneyimi (UX) tasar\u0131m\u0131 gibi bir\u00e7ok farkl\u0131 alanda pratik yapma imkan\u0131 bulursunuz. Bu proje, teorik bilgilerinizi prati\u011fe d\u00f6kerek ger\u00e7ek d\u00fcnya becerileri kazanman\u0131z\u0131 sa\u011flar. Bir geli\u015ftirici olarak portf\u00f6y\u00fcn\u00fcze ekleyebilece\u011finiz somut bir \u00fcr\u00fcn ortaya \u00e7\u0131kar\u0131rken, ayn\u0131 zamanda sorun \u00e7\u00f6zme ve yarat\u0131c\u0131 d\u00fc\u015f\u00fcnme yeteneklerinizi de geli\u015ftirirsiniz. Yani, kendi panonuzu kurmak, sadece reklams\u0131z bir deneyim elde etmekle kalmaz, ayn\u0131 zamanda ki\u015fisel ve mesleki geli\u015fiminiz i\u00e7in de \u00f6nemli bir yat\u0131r\u0131m olur.<\/p>\n
Kendi reklams\u0131z anime panomuzu in\u015fa etme yolculu\u011funda, veri kayna\u011f\u0131m\u0131z ve bu verilere eri\u015fim y\u00f6ntemimiz hayati \u00f6neme sahiptir. \u0130\u015fte bu noktada AniList API ve GraphQL devreye giriyor. Bu b\u00f6l\u00fcm, AniList API’nin ne oldu\u011funu, neden tercih etmemiz gerekti\u011fini ve GraphQL’in geleneksel REST API’lerine g\u00f6re sundu\u011fu avantajlar\u0131 detayl\u0131 bir \u015fekilde a\u00e7\u0131klayacakt\u0131r.<\/p>\n
AniList, anime ve manga hayranlar\u0131 i\u00e7in kapsaml\u0131 bir veri taban\u0131 ve sosyal platformdur. Kullan\u0131c\u0131lar\u0131n izledikleri veya okuduklar\u0131 serileri takip etmelerine, yeni i\u00e7erikler ke\u015ffetmelerine, arkada\u015flar\u0131yla etkile\u015fim kurmalar\u0131na ve kendi listelerini olu\u015fturmalar\u0131na olanak tan\u0131r. AniList API ise, bu zengin veri taban\u0131na programatik olarak eri\u015fim sa\u011flayan bir aray\u00fczd\u00fcr. Yani, kendi uygulamalar\u0131m\u0131z\u0131 veya panolar\u0131m\u0131z\u0131 geli\u015ftirirken, AniList’in devasa anime ve manga koleksiyonunu, kullan\u0131c\u0131 profillerini, izleme listelerini ve daha fazlas\u0131n\u0131 kullanabiliriz.<\/p>\n
AniList API’yi tercih etmemizin birka\u00e7 \u00f6nemli nedeni vard\u0131r. Birincisi, AniList’in veri kalitesi ve kapsam\u0131d\u0131r. Platform, s\u00fcrekli g\u00fcncellenen ve olduk\u00e7a detayl\u0131 bilgiler i\u00e7eren geni\u015f bir anime ve manga ar\u015fivi sunar. Bu da panomuz i\u00e7in g\u00fcvenilir ve zengin bir veri kayna\u011f\u0131 anlam\u0131na gelir. \u0130kincisi, AniList API’nin modern ve geli\u015ftirici dostu yap\u0131s\u0131d\u0131r. GraphQL tabanl\u0131 olmas\u0131, veri \u00e7ekme s\u00fcre\u00e7lerini olduk\u00e7a esnek ve verimli hale getirir. \u00dc\u00e7\u00fcnc\u00fcs\u00fc, topluluk deste\u011fi ve dok\u00fcmantasyonudur. AniList’in aktif bir geli\u015ftirici toplulu\u011fu ve anla\u015f\u0131l\u0131r, kapsaml\u0131 API dok\u00fcmantasyonu bulunur. Bu, geli\u015ftirme s\u00fcrecinde kar\u015f\u0131la\u015fabilece\u011finiz sorunlar\u0131 \u00e7\u00f6zmenize veya yeni \u00f6zellikler eklemenize yard\u0131mc\u0131 olacak kaynaklara kolayca ula\u015fabilece\u011finiz anlam\u0131na gelir.<\/p>\n
Piyasada MyAnimeList gibi ba\u015fka pop\u00fcler anime takip platformlar\u0131 da bulunsa da, AniList API genellikle daha modern bir yakla\u015f\u0131m sunar. MyAnimeList API’nin baz\u0131 s\u00fcr\u00fcmleri daha eski teknolojilere dayanabilirken ve kullan\u0131m limitleri daha k\u0131s\u0131tl\u0131 olabilirken, AniList’in GraphQL tabanl\u0131 API’si daha esnek sorgulama yetenekleri ve genellikle daha c\u00f6mert kullan\u0131m limitleri sunar. Bu da bizim gibi \u00f6zel bir pano geli\u015ftirenler i\u00e7in b\u00fcy\u00fck bir avantajd\u0131r.<\/p>\n
AniList API’nin kalbinde GraphQL yatar. GraphQL, Facebook taraf\u0131ndan geli\u015ftirilen ve 2015 y\u0131l\u0131nda a\u00e7\u0131k kaynak olarak yay\u0131nlanan bir API sorgu dili ve \u00e7al\u0131\u015fma zaman\u0131 (runtime) ortam\u0131d\u0131r. Geleneksel RESTful API’lere k\u0131yasla veri \u00e7ekme konusunda \u00f6nemli avantajlar sunar.<\/p>\n
REST API’lerde, genellikle belirli bir kaynak i\u00e7in belirli bir u\u00e7 nokta (endpoint) bulunur. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n anime listesini almak i\u00e7in GraphQL ise bu sorunlara zarif bir \u00e7\u00f6z\u00fcm sunar. GraphQL ile istemci, tam olarak hangi veriye ihtiyac\u0131 oldu\u011funu belirten bir sorgu g\u00f6nderir ve sunucu da sadece istenen veriyi d\u00f6nd\u00fcr\u00fcr. Tek bir GraphQL u\u00e7 noktas\u0131 (genellikle \u0130\u015fte \u00f6rnek bir GraphQL sorgusu yap\u0131s\u0131:<\/p>\n Bu sorgu, belirli bir kullan\u0131c\u0131n\u0131n ID’sini, ad\u0131n\u0131 ve anime istatistiklerini (izlenen anime say\u0131s\u0131, ortalama puan, t\u00fcrlere g\u00f6re da\u011f\u0131l\u0131m) \u00e7ekmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, tam olarak hangi alanlara ihtiyac\u0131m\u0131z oldu\u011funu belirtiyoruz. GraphQL sunucusu, bu sorguyu yorumlayarak sadece istenen verileri i\u00e7eren bir JSON yan\u0131t\u0131 d\u00f6nd\u00fcr\u00fcr.<\/p>\n AniList API ile etkile\u015fim kurarken, kullan\u0131c\u0131lar\u0131n kendi verilerine eri\u015febilmesi i\u00e7in kimlik do\u011frulama (authentication) mekanizmalar\u0131n\u0131 da anlamam\u0131z gerekir. AniList, genellikle OAuth 2.0 protokol\u00fcn\u00fc kullan\u0131r. Bu protokol, kullan\u0131c\u0131lar\u0131n AniList hesaplar\u0131 \u00fczerinden uygulamam\u0131za yetki vermesini sa\u011flar. Yetkilendirme (authorization) s\u00fcrecinin sonunda, uygulamam\u0131z bir eri\u015fim belirteci (access token) al\u0131r. Bu belirte\u00e7, kullan\u0131c\u0131n\u0131n AniList verilerine belirli bir s\u00fcre boyunca eri\u015fmek i\u00e7in kullan\u0131l\u0131r. Bu sayede, kullan\u0131c\u0131lar\u0131n \u015fifrelerini uygulamam\u0131zda saklamadan g\u00fcvenli bir \u015fekilde veri \u00e7ekebiliriz. OAuth 2.0 ak\u0131\u015f\u0131 genellikle \u015fu ad\u0131mlar\u0131 i\u00e7erir: kullan\u0131c\u0131y\u0131 AniList’in yetkilendirme sayfas\u0131na y\u00f6nlendirme, kullan\u0131c\u0131n\u0131n izni sonras\u0131 bir geri arama (callback) URL’si ile yetkilendirme kodu alma ve bu kod ile bir sunucu taraf\u0131nda eri\u015fim belirteci (access token) ve yenileme belirteci (refresh token) de\u011fi\u015fimi yapma.<\/p>\n GraphQL’in bu esnekli\u011fi ve AniList API’nin zengin veri taban\u0131, kendi ki\u015fiselle\u015ftirilmi\u015f anime panomuzu in\u015fa etmek i\u00e7in bize m\u00fckemmel bir temel sunmaktad\u0131r. Bu temelleri anlad\u0131ktan sonra, bir sonraki ad\u0131mda projemizin kurulumuna ve ad\u0131m ad\u0131m geli\u015ftirme s\u00fcrecine ge\u00e7ebiliriz.<\/p>\n Art\u0131k AniList API ve GraphQL’in temel prensiplerini anlad\u0131\u011f\u0131m\u0131za g\u00f6re, kendi reklams\u0131z anime panomuzu in\u015fa etmeye ba\u015flayabiliriz. Bu b\u00f6l\u00fcm, projenin kurulumundan temel bile\u015fenlerin olu\u015fturulmas\u0131na ve API ile ilk ba\u011flant\u0131n\u0131n kurulmas\u0131na kadar ad\u0131m ad\u0131m bir rehber sunacakt\u0131r.<\/p>\n \u00d6ncelikle, projemizi geli\u015ftirmek i\u00e7in gerekli ara\u00e7lar\u0131 ve ortam\u0131 kurmam\u0131z gerekiyor. Modern bir web uygulamas\u0131 geli\u015ftirece\u011fimiz i\u00e7in, bir Frontend Framework (yaz\u0131l\u0131m \u00e7er\u00e7evesi) kullanmak i\u015fimizi olduk\u00e7a kolayla\u015ft\u0131racakt\u0131r. Bu makalede \u00f6rnekler i\u00e7in React’\u0131 tercih edece\u011fiz, ancak Vue veya Svelte gibi di\u011fer pop\u00fcler Framework’leri de kullanabilirsiniz.<\/p>\n Bu komutlar, Proje ortam\u0131m\u0131z\u0131 kurduktan sonra, AniList API ile ba\u011flant\u0131 kurmaya ve veri \u00e7ekmeye ba\u015flayabiliriz. Bu s\u00fcre\u00e7, AniList geli\u015ftirici hesab\u0131 olu\u015fturmaktan, OAuth 2.0 ile kullan\u0131c\u0131 yetkilendirmeye kadar birka\u00e7 ad\u0131m\u0131 i\u00e7erir.<\/p>\n Bu kod blo\u011fu, API ba\u011flant\u0131m\u0131z\u0131 kurduktan sonra, s\u0131ra panomuzun g\u00f6rsel yap\u0131s\u0131n\u0131 olu\u015fturmaya geliyor. Bir React uygulamas\u0131nda, her bir b\u00f6l\u00fcm\u00fc ayr\u0131 bir bile\u015fen (component) olarak d\u00fc\u015f\u00fcnebiliriz. \u0130\u015fte temel bile\u015fenler ve i\u015flevleri:<\/p>\n Bu bile\u015fenleri olu\u015ftururken, temiz ve anla\u015f\u0131l\u0131r bir kullan\u0131c\u0131 aray\u00fcz\u00fc tasarlamaya \u00f6zen g\u00f6sterin. Reklams\u0131z bir deneyim sundu\u011fumuz i\u00e7in, aray\u00fcz\u00fcn sade ve i\u015flevsel olmas\u0131 kullan\u0131c\u0131 memnuniyetini art\u0131racakt\u0131r. Her bir bile\u015fenin kendi verilerini AniList API’den \u00e7ekmesi ve kullan\u0131c\u0131 etkile\u015fimlerine (\u00f6rne\u011fin “ilerlemeyi g\u00fcncelle” d\u00fc\u011fmesine bas\u0131ld\u0131\u011f\u0131nda) g\u00f6re verileri g\u00fcncellemesi gerekecektir. Bu ad\u0131mlar\u0131 takip ederek, kendi ki\u015fisel anime panonuzun temelini sa\u011flam bir \u015fekilde atm\u0131\u015f olacaks\u0131n\u0131z.<\/p>\n Temel fonksiyonlar\u0131 olan bir pano olu\u015fturduktan sonra, s\u0131ra kullan\u0131c\u0131 deneyimini (UX) geli\u015ftirmeye ve ki\u015fiselle\u015ftirme se\u00e7enekleri eklemeye gelir. Reklams\u0131z bir ortam sunman\u0131n yan\u0131 s\u0131ra, uygulaman\u0131z\u0131n sezgisel, estetik ve kullan\u0131\u015fl\u0131 olmas\u0131 da \u00f6nemlidir. \u0130\u015fte panonuzu bir \u00fcst seviyeye ta\u015f\u0131yacak baz\u0131 ipu\u00e7lar\u0131 ve \u00f6zellikler:<\/p>\n Bu \u00f6zellikler, kullan\u0131c\u0131lar\u0131n devasa anime k\u00fct\u00fcphanesinde gezinmesini kolayla\u015ft\u0131r\u0131r ve arad\u0131klar\u0131n\u0131 daha h\u0131zl\u0131 bulmalar\u0131na yard\u0131mc\u0131 olur.\n <\/li>\n Bu, kullan\u0131c\u0131lar\u0131n panolar\u0131n\u0131 g\u00fcncel tutmalar\u0131n\u0131 kolayla\u015ft\u0131r\u0131r ve etkile\u015fimi art\u0131r\u0131r.\n <\/li>\n Bu \u00f6zelliklerin entegrasyonu, panonuzu sadece bir veri g\u00f6sterim arac\u0131 olmaktan \u00e7\u0131kar\u0131p, ger\u00e7ekten ki\u015fisel ve kullan\u0131\u015fl\u0131 bir deneyim haline getirecektir. Unutmay\u0131n, iyi bir kullan\u0131c\u0131 deneyimi, uygulaman\u0131z\u0131n ba\u015far\u0131s\u0131 i\u00e7in reklams\u0131z bir ortam kadar \u00f6nemlidir.<\/p>\n Temel anime panomuz \u00e7al\u0131\u015f\u0131r duruma geldikten sonra, uygulaman\u0131n performans\u0131n\u0131 art\u0131rmak, kullan\u0131c\u0131 etkile\u015fimini derinle\u015ftirmek ve daha zengin \u00f6zellikler sunmak i\u00e7in ileri d\u00fczey optimizasyonlara ve ek \u00f6zelliklere y\u00f6nelebiliriz. Bu b\u00f6l\u00fcm, deneyimli geli\u015ftiriciler i\u00e7in ipu\u00e7lar\u0131 ve panonuzu daha da ileriye ta\u015f\u0131yacak yakla\u015f\u0131mlar sunmaktad\u0131r.<\/p>\n API tabanl\u0131 uygulamalarda performans, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik bir fakt\u00f6rd\u00fcr. S\u00fcrekli ayn\u0131 veriyi API’den \u00e7ekmek, hem AniList API’nin kullan\u0131m limitlerini zorlayabilir hem de uygulaman\u0131n yava\u015flamas\u0131na neden olabilir. Bu nedenle, veri \u00f6nbellekleme stratejileri uygulamak b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r.<\/p>\n Taray\u0131c\u0131n\u0131n yerel depolama (localStorage) veya oturum depolama (sessionStorage) gibi mekanizmalar\u0131n\u0131 kullanarak s\u0131k\u00e7a eri\u015filen verileri \u00f6nbelle\u011fe alabiliriz. \u00d6rne\u011fin, kullan\u0131c\u0131n\u0131n izleme listesi veya profil bilgileri gibi nispeten statik veriler, ilk \u00e7ekildikten sonra belirli bir s\u00fcre boyunca yerel depolamada tutulabilir. Her API iste\u011fi \u00f6ncesinde, \u00f6nbellekte ilgili verinin olup olmad\u0131\u011f\u0131 kontrol edilir. E\u011fer varsa ve s\u00fcresi dolmam\u0131\u015fsa, API’ye istek atmak yerine \u00f6nbellekten veri kullan\u0131l\u0131r. Bu, hem a\u011f trafi\u011fini azalt\u0131r hem de y\u00fckleme s\u00fcrelerini k\u0131salt\u0131r.<\/p>\n React Query (TanStack Query) veya SWR gibi durum y\u00f6netim k\u00fct\u00fcphaneleri, \u00f6nbellekleme, veri senkronizasyonu ve yeniden getirme (re-fetching) gibi i\u015flemleri otomatikle\u015ftirerek bu s\u00fcreci \u00e7ok daha kolay hale getirir.<\/p>\n<\/li>\n E\u011fer uygulaman\u0131zda bir backend kullan\u0131yorsan\u0131z, sunucu taraf\u0131nda Redis gibi in-memory veritabanlar\u0131 veya dosya sistemini kullanarak API yan\u0131tlar\u0131n\u0131 \u00f6nbelle\u011fe alabilirsiniz. Bu, \u00f6zellikle birden fazla kullan\u0131c\u0131n\u0131n ayn\u0131 verilere eri\u015fti\u011fi durumlarda (\u00f6rne\u011fin pop\u00fcler animelerin detaylar\u0131) faydal\u0131d\u0131r. Sunucu, AniList API’den bir kez veri \u00e7eker ve bunu \u00f6nbelle\u011fe al\u0131r; sonraki isteklerde do\u011frudan \u00f6nbellekten servis eder.<\/p>\n<\/li>\n Kullan\u0131c\u0131lar\u0131n yeni b\u00f6l\u00fcmlerden veya \u00f6nemli g\u00fcncellemelerden an\u0131nda haberdar olmas\u0131, panonun de\u011ferini art\u0131r\u0131r. Ger\u00e7ek zamanl\u0131 \u00f6zellikler eklemek, kullan\u0131c\u0131 etkile\u015fimini ve memnuniyetini art\u0131rabilir.<\/p>\n Kullan\u0131c\u0131lar\u0131n panolar\u0131n\u0131 daha fazla ki\u015fiselle\u015ftirmeleri i\u00e7in tema se\u00e7enekleri ve k\u00fc\u00e7\u00fck, i\u015flevsel “widget”lar (ara\u00e7lar) eklemek, uygulamay\u0131 daha \u00e7ekici hale getirir.<\/p>\n Bu ileri d\u00fczey optimizasyonlar ve ek \u00f6zellikler, anime panonuzu sadece bir takip arac\u0131ndan \u00f6te, zengin ve ki\u015fiselle\u015ftirilmi\u015f bir anime deneyimi merkezine d\u00f6n\u00fc\u015ft\u00fcrecektir. Kullan\u0131c\u0131 Can’\u0131n panosunu ele alal\u0131m. Can, art\u0131k sadece izlediklerini takip etmekle kalm\u0131yor, ayn\u0131 zamanda favori t\u00fcrlerine g\u00f6re otomatik \u00f6neriler al\u0131yor, yeni b\u00f6l\u00fcmler \u00e7\u0131kt\u0131\u011f\u0131nda an\u0131nda bildirimler al\u0131yor ve panosunu tamamen kendi zevkine g\u00f6re tasarlayabiliyor. Bu t\u00fcr \u00f6zellikler, kullan\u0131c\u0131lar\u0131n uygulaman\u0131za olan ba\u011fl\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r ve onu vazge\u00e7ilmez k\u0131lar.<\/p>\n Bu makale boyunca, AniList API’nin g\u00fcc\u00fcn\u00fc kullanarak nas\u0131l reklams\u0131z ve ki\u015fiselle\u015ftirilmi\u015f bir anime panosu in\u015fa edebilece\u011finizi ad\u0131m ad\u0131m inceledik. Modern web geli\u015ftirme teknolojileri olan GraphQL ve React gibi Framework’leri kullanarak, sadece reklam karma\u015fas\u0131ndan uzak, sade bir aray\u00fcz olu\u015fturmakla kalmad\u0131k, ayn\u0131 zamanda veri \u00e7ekme, kimlik do\u011frulama, kullan\u0131c\u0131 deneyimi iyile\u015ftirmeleri ve ileri d\u00fczey performans optimizasyonlar\u0131 gibi bir\u00e7ok teknik konuya da de\u011findik. Bu proje, sadece bir anime takip arac\u0131 olman\u0131n \u00f6tesinde, web geli\u015ftirme becerilerinizi peki\u015ftirmek ve ger\u00e7ek d\u00fcnya problemleri i\u00e7in yarat\u0131c\u0131 \u00e7\u00f6z\u00fcmler \u00fcretmek ad\u0131na harika bir f\u0131rsat sunmaktad\u0131r.<\/p>\n Kendi panonuzu kurarak, mevcut platformlar\u0131n dayatt\u0131\u011f\u0131 s\u0131n\u0131rlamalardan kurtulur, verileriniz \u00fczerinde tam kontrol sahibi olur ve tamamen kendi tercihlerinize g\u00f6re \u015fekillendirilmi\u015f bir deneyim ya\u015fars\u0131n\u0131z. Ay\u015fe ve Can gibi kullan\u0131c\u0131lar\u0131n hikayeleri, bu t\u00fcr ki\u015fiselle\u015ftirilmi\u015f \u00e7\u00f6z\u00fcmlerin ne kadar de\u011ferli olabilece\u011fini g\u00f6stermektedir. Bu s\u00fcre\u00e7, size sadece teknik bilgi kazand\u0131rmakla kalmaz, ayn\u0131 zamanda bir geli\u015ftirici olarak \u00f6zg\u00fcveninizi art\u0131r\u0131r ve portf\u00f6y\u00fcn\u00fcze de\u011ferli bir proje eklemenizi sa\u011flar. Unutmay\u0131n, en iyi uygulamalar genellikle ki\u015fisel bir ihtiyac\u0131 \u00e7\u00f6zme arzusundan do\u011far.<\/p>\n Peki, bu panoyu gelecekte daha da ileriye ta\u015f\u0131mak i\u00e7in neler yap\u0131labilir? Potansiyel \u00f6zellikler neredeyse s\u0131n\u0131rs\u0131zd\u0131r:<\/p>\n Bu projenin sundu\u011fu potansiyel ger\u00e7ekten heyecan verici. Kendi anime panonuzu in\u015fa etmek, hem ki\u015fisel bir tutkunuzu teknolojiyle birle\u015ftirmenize hem de de\u011ferli geli\u015ftirme deneyimleri kazanman\u0131za olanak tan\u0131r. \u015eimdi s\u0131ra sizde! Kendi reklams\u0131z anime d\u00fcnyan\u0131z\u0131 in\u015fa etmeye ba\u015flay\u0131n ve yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131n s\u0131n\u0131rlar\u0131n\u0131 zorlay\u0131n.<\/p>\n #WebGeli\u015ftirme #Anime #AniListAPI #GraphQL #Reklams\u0131zDeneyim #Frontend #Teknoloji #Ki\u015fiselle\u015ftirme<\/p>\n\/users\/{id}\/animelist<\/code> gibi bir u\u00e7 noktaya istek atman\u0131z gerekebilir. Bu, genellikle ihtiyac\u0131n\u0131z olandan daha fazla veya daha az veri alman\u0131za neden olabilir. “Fazla veri \u00e7ekme” (over-fetching) durumunda, gereksiz verileri indirip filtrelemeniz gerekirken, “eksik veri \u00e7ekme” (under-fetching) durumunda ise birden fazla API iste\u011fi yapman\u0131z gerekebilir. Bu durum, \u00f6zellikle mobil uygulamalar gibi bant geni\u015fli\u011finin k\u0131s\u0131tl\u0131 oldu\u011fu ortamlarda performans\u0131 olumsuz etkiler.<\/p>\n\/graphql<\/code>) \u00fczerinden t\u00fcm verilere eri\u015filebilir. Bu, GraphQL’in “tek u\u00e7 nokta” (single endpoint) ve “tek sorgu” (single query) felsefesinin temelini olu\u015fturur. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n sadece ad\u0131n\u0131, id’sini ve izledi\u011fi anime say\u0131s\u0131n\u0131 almak istedi\u011finizde, sorgunuzu tam olarak bu alanlar\u0131 i\u00e7erecek \u015fekilde yazars\u0131n\u0131z. Sunucu da sadece bu \u00fc\u00e7 alan\u0131 i\u00e7eren bir yan\u0131t d\u00f6ner. Bu durum, a\u011f trafi\u011fini azalt\u0131r, uygulaman\u0131n daha h\u0131zl\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar ve geli\u015ftirme s\u00fcrecini basitle\u015ftirir.<\/p>\n\n query GetUserAnimeStats($userName: String) {\n User (name: $userName) {\n id\n name\n statistics {\n anime {\n count\n meanScore\n genres {\n genre\n count\n }\n }\n }\n }\n }\n <\/code><\/pre>\n<\/p><\/div>\nAd\u0131m Ad\u0131m Reklams\u0131z Anime Panosu \u0130n\u015fas\u0131<\/h2>\n
Proje Ortam\u0131n\u0131n Kurulumu ve Gerekli Ara\u00e7lar<\/h3>\n
\n
node -v<\/code> ve npm -v<\/code> komutlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rarak do\u011frulu\u011funu kontrol edebilirsiniz.\n <\/li>\n\n # Vite ile yeni bir React projesi olu\u015fturma\n npm create vite@latest my-anime-dashboard -- --template react\n cd my-anime-dashboard\n npm install\n npm run dev\n <\/code><\/pre>\n<\/p><\/div>\nmy-anime-dashboard<\/code> ad\u0131nda yeni bir React projesi olu\u015fturacak, gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyecek ve geli\u015ftirme sunucusunu ba\u015flatacakt\u0131r.\n <\/li>\nAniList API ile \u0130lk Ba\u011flant\u0131y\u0131 Kurma<\/h3>\n
\n
\n AniList’in geli\u015ftirici portal\u0131na giderek (genellikle AniList.co alt\u0131ndaki “Developers” veya “API” b\u00f6l\u00fcm\u00fc) yeni bir uygulama kaydetmeniz gerekir. Bu i\u015flem s\u0131ras\u0131nda size bir Client ID (istemci kimli\u011fi) ve Client Secret (istemci gizlili\u011fi) verilecektir. Bu anahtarlar, uygulaman\u0131z\u0131n AniList API’ye kimli\u011fini do\u011frulamak i\u00e7in kullan\u0131l\u0131r. Ayr\u0131ca, uygulaman\u0131z\u0131n y\u00f6nlendirilece\u011fi bir Geri Arama URL’si (Redirect URI) belirtmeniz gerekecektir. Bu genellikle uygulaman\u0131z\u0131n yetkilendirme sonras\u0131 kullan\u0131c\u0131y\u0131 y\u00f6nlendirece\u011fi bir URL’dir (\u00f6rne\u011fin, http:\/\/localhost:5173\/callback<\/code> geli\u015ftirme ortam\u0131nda).\n <\/li>\n
\n Kullan\u0131c\u0131lar\u0131n kendi AniList verilerine eri\u015febilmemiz i\u00e7in onlar\u0131n iznini almam\u0131z gerekir. Bu, OAuth 2.0 “authorization code” ak\u0131\u015f\u0131 ile yap\u0131l\u0131r.<\/p>\n\n
scope<\/code>) i\u00e7erir.\n\n \/\/ \u00d6rnek Yetkilendirme URL'si Olu\u015fturma\n const clientId = 'S\u0130Z\u0130N_CLIENT_ID_N\u0130Z';\n const redirectUri = 'http:\/\/localhost:5173\/callback';\n const authUrl = https:\/\/anilist.co\/api\/v2\/oauth\/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code<\/code>;\n\n \/\/ Kullan\u0131c\u0131y\u0131 y\u00f6nlendirme\n \/\/ window.location.href = authUrl;\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\ncode<\/code> parametresi ile y\u00f6nlendirecektir.\n <\/li>\n\/callback<\/code> sayfas\u0131nda bu code<\/code>‘u yakalay\u0131n ve AniList API’ye bir POST iste\u011fi g\u00f6ndererek bir eri\u015fim belirteci (access token) ve yenileme belirteci (refresh token) ile de\u011fi\u015ftirin. Bu ad\u0131m, g\u00fcvenlik nedeniyle genellikle bir backend sunucusu \u00fczerinden yap\u0131lmal\u0131d\u0131r, \u00e7\u00fcnk\u00fc Client Secret’\u0131n\u0131z\u0131 taray\u0131c\u0131da a\u00e7\u0131kta b\u0131rakmak istemezsiniz. Ancak basit bir \u00f6rnek i\u00e7in taray\u0131c\u0131da da g\u00f6sterilebilir (ancak \u00fcretim ortam\u0131 i\u00e7in \u00f6nerilmez).\n\n \/\/ Callback sayfas\u0131nda kodu yakalama (\u00f6rnek)\n const urlParams = new URLSearchParams(window.location.search);\n const code = urlParams.get('code');\n\n if (code) {\n \/\/ Bu iste\u011fin sunucu taraf\u0131nda yap\u0131lmas\u0131 \u015fiddetle tavsiye edilir!\n async function getAccessToken(authCode) {\n const response = await fetch('https:\/\/anilist.co\/api\/v2\/oauth\/token', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'Accept': 'application\/json',\n },\n body: JSON.stringify({\n grant_type: 'authorization_code',\n client_id: 'S\u0130Z\u0130N_CLIENT_ID_N\u0130Z',\n client_secret: 'S\u0130Z\u0130N_CLIENT_SECRET_N\u0130Z', \/\/ G\u00fcvenlik riski! Sunucu taraf\u0131nda tutulmal\u0131.\n redirect_uri: redirectUri,\n code: authCode\n })\n });\n const data = await response.json();\n console.log('Access Token:', data.access_token);\n \/\/ Access token'\u0131 g\u00fcvenli bir \u015fekilde saklay\u0131n (\u00f6rne\u011fin localStorage veya HTTP-only cookie)\n localStorage.setItem('anilist_access_token', data.access_token);\n return data.access_token;\n }\n getAccessToken(code);\n }\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\n<\/ol>\n<\/li>\n
\n Eri\u015fim belirtecini ald\u0131ktan sonra, art\u0131k AniList API’ye yetkili GraphQL sorgular\u0131 g\u00f6nderebiliriz. \u0130\u015fte bir kullan\u0131c\u0131n\u0131n temel bilgilerini ve izledi\u011fi animelerin say\u0131s\u0131n\u0131 \u00e7eken \u00f6rnek bir sorgu ve JavaScript ile nas\u0131l \u00e7a\u011fr\u0131laca\u011f\u0131:<\/p>\n\n \/\/ GraphQL Sorgusu \u00d6rne\u011fi\n const query = query ($userName: String) {\n User (name: $userName) {\n id\n name\n avatar {\n large\n }\n statistics {\n anime {\n count\n meanScore\n }\n }\n }\n }<\/code>;\n\n \/\/ JavaScript ile API \u00e7a\u011fr\u0131s\u0131\n async function getUserData(username, accessToken) {\n const response = await fetch('https:\/\/graphql.anilist.co', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'Accept': 'application\/json',\n 'Authorization': 'Bearer ' + accessToken \/\/ Eri\u015fim belirtecini ba\u015fl\u0131kta g\u00f6nderiyoruz\n },\n body: JSON.stringify({\n query: query,\n variables: { userName: username } \/\/ Dinamik de\u011fi\u015fkenleri burada tan\u0131ml\u0131yoruz\n })\n });\n const data = await response.json();\n return data;\n }\n\n \/\/ \u00d6rnek kullan\u0131m\n \/\/ const myAccessToken = localStorage.getItem('anilist_access_token');\n \/\/ if (myAccessToken) {\n \/\/ getUserData('kullanici_adi', myAccessToken).then(data => {\n \/\/ console.log(data.data.User);\n \/\/ });\n \/\/ }\n <\/code><\/pre>\n<\/p><\/div>\ngetUserData<\/code> fonksiyonunun nas\u0131l \u00e7a\u011fr\u0131laca\u011f\u0131n\u0131 ve d\u00f6nen verinin nas\u0131l i\u015flenece\u011fini g\u00f6stermektedir. D\u00f6nen data<\/code> objesi, sorgunuzda istedi\u011finiz t\u00fcm bilgileri i\u00e7erecektir.\n <\/li>\n<\/ol>\nPanonun Temel Bile\u015fenlerini Olu\u015fturma<\/h3>\n
\n
\n <div class=\"anime-dashboard\">\n <h3>\u015eu An \u0130zlediklerim<\/h3>\n <ul class=\"anime-list\">\n <li class=\"anime-item\">\n <img src=\"https:\/\/s4.anilist.co\/file\/anilistcdn\/media\/anime\/cover\/large\/bx1-tXgR3G_9y38B.jpg\" alt=\"Attack on Titan\">\n <div class=\"anime-info\">\n <h4>Attack on Titan<\/h4>\n <p>Son \u0130zlenen B\u00f6l\u00fcm: 78<\/p>\n <button>\u0130lerlemeyi G\u00fcncelle<\/button>\n <\/div>\n <\/li>\n <li class=\"anime-item\">\n <img src=\"https:\/\/s4.anilist.co\/file\/anilistcdn\/media\/anime\/cover\/large\/bx127230-eK4qlwB2o1xR.jpg\" alt=\"Jujutsu Kaisen\">\n <div class=\"anime-info\">\n <h4>Jujutsu Kaisen<\/h4>\n <p>Son \u0130zlenen B\u00f6l\u00fcm: 20<\/p>\n <button>\u0130lerlemeyi G\u00fcncelle<\/button>\n <\/div>\n <\/li>\n <\/ul>\n <\/div>\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\nKullan\u0131c\u0131 Deneyimini Geli\u015ftirme ve Ki\u015fiselle\u015ftirme<\/h3>\n
\n
\n
\n \/\/ GraphQL Mutasyon \u00d6rne\u011fi: Anime ilerlemesini g\u00fcncelleme\n const updateAnimeProgressMutation = mutation ($mediaId: Int, $progress: Int) {\n SaveMediaListEntry (mediaId: $mediaId, progress: $progress) {\n id\n status\n progress\n }\n }<\/code>;\n\n async function updateProgress(mediaId, newProgress, accessToken) {\n const response = await fetch('https:\/\/graphql.anilist.co', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'Accept': 'application\/json',\n 'Authorization': 'Bearer ' + accessToken\n },\n body: JSON.stringify({\n query: updateAnimeProgressMutation,\n variables: { mediaId: mediaId, progress: newProgress }\n })\n });\n const data = await response.json();\n return data;\n }\n <\/code><\/pre>\n<\/p><\/div>\n\u0130leri D\u00fczey Optimizasyonlar ve Ek \u00d6zellikler<\/h2>\n
Veri \u00d6nbellekleme (Caching) ve Performans \u0130yile\u015ftirmeleri<\/h3>\n
\n
\n \/\/ \u00d6nbelle\u011fe alma fonksiyonu \u00f6rne\u011fi\n function getCachedData(key) {\n const cached = localStorage.getItem(key);\n if (cached) {\n const { data, timestamp } = JSON.parse(cached);\n \/\/ 1 saatlik \u00f6nbellek s\u00fcresi\n if (Date.now() - timestamp < 3600000) {\n return data;\n }\n }\n return null;\n }\n\n function setCacheData(key, data) {\n localStorage.setItem(key, JSON.stringify({ data, timestamp: Date.now() }));\n }\n\n \/\/ Kullan\u0131m \u00f6rne\u011fi\n \/\/ let userData = getCachedData('user_profile');\n \/\/ if (!userData) {\n \/\/ userData = await getUserData('kullanici_adi', accessToken);\n \/\/ setCacheData('user_profile', userData);\n \/\/ }\n <\/code><\/pre>\n<\/p><\/div>\nGer\u00e7ek Zamanl\u0131 G\u00fcncellemeler ve Bildirimler<\/h3>\n
\n
\u00d6zel Temalar ve Widget’lar<\/h3>\n
\n
Sonu\u00e7 ve Gelecek Perspektifleri<\/h2>\n
\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\n