{"id":30443,"date":"2025-09-27T23:31:41","date_gmt":"2025-09-27T20:31:41","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/"},"modified":"2025-09-27T23:31:41","modified_gmt":"2025-09-27T20:31:41","slug":"kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/","title":{"rendered":"KendoReact ile AI Destekli \u00d6\u011frenme Asistan\u0131 Nas\u0131l Geli\u015ftirilir?"},"content":{"rendered":"<p><body><\/p>\n<p>KendoReact ile yapay zeka destekli bir \u00f6\u011frenme asistan\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu rehber, modern web teknolojileri ve AI modellerini kullanarak interaktif bir \u00f6\u011frenme yolda\u015f\u0131 olu\u015fturman\u0131z i\u00e7in ad\u0131m ad\u0131m bilgiler sunuyor.<\/p>\n<p>Geleneksel \u00f6\u011frenme y\u00f6ntemleri, \u00e7o\u011fu zaman tek tip bir m\u00fcfredat sunar ve \u00f6\u011frencilerin bireysel ihtiya\u00e7lar\u0131n\u0131 g\u00f6z ard\u0131 edebilir. Herkesin \u00f6\u011frenme h\u0131z\u0131, ilgi alanlar\u0131 ve anlama bi\u00e7imi farkl\u0131d\u0131r. S\u0131n\u0131f ortam\u0131nda veya standart ders kitaplar\u0131yla bu farkl\u0131l\u0131klara hitap etmek olduk\u00e7a zordur. \u0130\u015fte tam da bu noktada, yapay zeka destekli \u00f6\u011frenme asistanlar\u0131 devreye girer ve \u00f6\u011frenme deneyimini devrim niteli\u011finde ki\u015fiselle\u015ftirme potansiyeli sunar. Bu asistanlar, \u00f6\u011frencilerin g\u00fc\u00e7l\u00fc ve zay\u0131f y\u00f6nlerini analiz edebilir, onlara \u00f6zel i\u00e7erikler \u00f6nerebilir, anl\u0131k geri bildirim sa\u011flayabilir ve \u00f6\u011frenme yolculuklar\u0131n\u0131 daha etkili, verimli ve keyifli hale getirebilir.<\/p>\n<p>Hayal edin: Karma\u015f\u0131k bir konuyu anlamakta zorlan\u0131yorsunuz ve asistan\u0131n\u0131z hemen sizin i\u00e7in basitle\u015ftirilmi\u015f bir a\u00e7\u0131klama, g\u00f6rsel bir \u00f6rnek veya ilgili bir pratik al\u0131\u015ft\u0131rma sunuyor. Ya da yeni bir dil \u00f6\u011frenirken, telaffuzunuzu analiz edip an\u0131nda d\u00fczeltmeler yap\u0131yor, kelime da\u011farc\u0131\u011f\u0131n\u0131z\u0131 zenginle\u015ftirecek ba\u011flamlar \u00f6neriyor. Bu t\u00fcr ki\u015fiselle\u015ftirilmi\u015f bir \u00f6\u011frenme deneyimi, sadece motivasyonu art\u0131rmakla kalmaz, ayn\u0131 zamanda bilginin kal\u0131c\u0131 olmas\u0131n\u0131 da sa\u011flar. Yapay zeka, \u00f6\u011frenme materyallerini adapte edebilme, \u00f6\u011frencinin ilerlemesini takip edebilme ve hatta duygusal durumunu yorumlayarak \u00f6\u011frenme s\u00fcrecine destek olabilme yetene\u011fiyle bu d\u00f6n\u00fc\u015f\u00fcm\u00fcn merkezinde yer al\u0131yor.<\/p>\n<p>Peki, bu vizyonu ger\u00e7e\u011fe d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in hangi teknolojilere ihtiyac\u0131m\u0131z var? Bu makalede, modern bir web aray\u00fcz\u00fc geli\u015ftirmek i\u00e7in React&#8217;in g\u00fcc\u00fcn\u00fc, zengin ve \u00f6zelle\u015ftirilebilir kullan\u0131c\u0131 aray\u00fcz\u00fc bile\u015fenleri sunan KendoReact k\u00fct\u00fcphanesini ve tabii ki yapay zeka modellerini bir araya getirece\u011fiz. Amac\u0131m\u0131z, sadece teknik detaylar\u0131 aktarmak de\u011fil, ayn\u0131 zamanda bu teknolojilerin nas\u0131l entegre edilerek ger\u00e7ek d\u00fcnyada fayda sa\u011flayacak bir \u00fcr\u00fcn haline getirilebilece\u011fini ad\u0131m ad\u0131m g\u00f6stermektir. Bu sayede, okuyucular\u0131m\u0131z bu bilgileri kendi projelerinde uygulayarak, \u00f6\u011frenmenin gelece\u011fine y\u00f6n veren bu heyecan verici alana ilk ad\u0131mlar\u0131n\u0131 atabilecekler.<\/p>\n<h2>Temel Ta\u015flar: Yapay Zeka, KendoReact ve React&#8217;in G\u00fcc\u00fc Nedir?<\/h2>\n<p>Bir AI destekli \u00f6\u011frenme asistan\u0131 in\u015fa ederken, do\u011fru ara\u00e7 setini se\u00e7mek projenin ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir. Bu b\u00f6l\u00fcmde, bu projede kullanaca\u011f\u0131m\u0131z \u00fc\u00e7 temel teknoloji olan Yapay Zeka (AI), React ve KendoReact&#8217;in ne olduklar\u0131n\u0131, neden \u00f6nemli olduklar\u0131n\u0131 ve bu projede hangi rollerde g\u00f6rev alacaklar\u0131n\u0131 detayl\u0131ca inceleyece\u011fiz.<\/p>\n<h3>Yapay Zeka (AI) Nedir ve \u00d6\u011frenme Asistan\u0131m\u0131z \u0130\u00e7in Neden Vazge\u00e7ilmezdir?<\/h3>\n<p>Yapay Zeka (AI), makinelerin insan benzeri zeka g\u00f6stermesini sa\u011flayan geni\u015f bir bilgisayar bilimi alan\u0131d\u0131r. \u00d6\u011frenme, problem \u00e7\u00f6zme, alg\u0131lama ve do\u011fal dili anlama gibi bili\u015fsel g\u00f6revleri yerine getirme yetene\u011fini kapsar. \u00d6\u011frenme asistan\u0131m\u0131z \u00f6zelinde, AI&#8217;\u0131n alt dallar\u0131ndan Makine \u00d6\u011frenimi (Machine Learning) ve Do\u011fal Dil \u0130\u015fleme (Natural Language Processing &#8211; NLP) bizim i\u00e7in merkezi rol oynayacakt\u0131r. Makine \u00f6\u011frenimi, sistemlerin verilerden \u00f6\u011frenerek performanslar\u0131n\u0131 art\u0131rmas\u0131n\u0131 sa\u011flarken, NLP makinelerin insan dilini anlamas\u0131n\u0131, yorumlamas\u0131n\u0131 ve \u00fcretmesini m\u00fcmk\u00fcn k\u0131lar. \u00d6rne\u011fin, bir \u00f6\u011frencinin sordu\u011fu bir soruyu anlamak, ona uygun bir cevap \u00fcretmek, hatta \u00f6\u011frencinin \u00f6\u011frenme stilini veya zorland\u0131\u011f\u0131 konular\u0131 tespit etmek AI&#8217;\u0131n yetenek alan\u0131na girer.<\/p>\n<p>AI modelleri sayesinde, \u00f6\u011frenme asistan\u0131m\u0131z:<\/p>\n<ul>\n<li>Ki\u015fiselle\u015ftirilmi\u015f i\u00e7erik \u00f6nerebilir.<\/li>\n<li>Karma\u015f\u0131k konular\u0131 basitle\u015ftirerek a\u00e7\u0131klayabilir.<\/li>\n<li>Soru-cevap oturumlar\u0131 d\u00fczenleyebilir.<\/li>\n<li>Kullan\u0131c\u0131 performans\u0131n\u0131 analiz edip geri bildirim sa\u011flayabilir.<\/li>\n<li>\u00d6\u011frencinin ilerlemesini izleyebilir ve adapte olabilir.<\/li>\n<\/ul>\n<p>Bu yetenekler, asistan\u0131m\u0131z\u0131n sadece bir bilgi kayna\u011f\u0131 olmaktan \u00e7\u0131k\u0131p, ger\u00e7ekten etkile\u015fimli ve destekleyici bir &#8220;\u00f6\u011frenme buddy&#8221; haline gelmesini sa\u011flar.<\/p>\n<h3>React Nedir ve \u00d6n U\u00e7 Geli\u015ftirmede Neden Bu Kadar Pop\u00fclerdir?<\/h3>\n<p>React, Facebook taraf\u0131ndan geli\u015ftirilen ve kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 mimarisi sayesinde, karma\u015f\u0131k aray\u00fczleri k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir par\u00e7alara b\u00f6lerek geli\u015ftirmeyi kolayla\u015ft\u0131r\u0131r. Sanal DOM (Virtual DOM) mekanizmas\u0131 sayesinde y\u00fcksek performans sunar ve sadece de\u011fi\u015fen k\u0131s\u0131mlar\u0131 g\u00fcncelleyerek taray\u0131c\u0131da daha h\u0131zl\u0131 render edilmesini sa\u011flar. Geli\u015ftirici toplulu\u011fu \u00e7ok geni\u015f oldu\u011fu i\u00e7in, s\u00fcrekli g\u00fcncellenir, bir\u00e7ok kaynak ve eklentiye sahiptir.<\/p>\n<p>React, \u00f6\u011frenme asistan\u0131m\u0131z\u0131n \u00f6n y\u00fcz\u00fcn\u00fc in\u015fa etmek i\u00e7in ideal bir temeldir \u00e7\u00fcnk\u00fc:<\/p>\n<ul>\n<li>Mod\u00fcler yap\u0131s\u0131 sayesinde karma\u015f\u0131k UI&#8217;lar\u0131 y\u00f6netmeyi kolayla\u015ft\u0131r\u0131r.<\/li>\n<li>Performans\u0131, ak\u0131c\u0131 ve duyarl\u0131 bir kullan\u0131c\u0131 deneyimi sunar.<\/li>\n<li>Geni\u015f ekosistemi, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve kar\u015f\u0131la\u015f\u0131labilecek sorunlara \u00e7\u00f6z\u00fcm bulmay\u0131 kolayla\u015ft\u0131r\u0131r.<\/li>\n<\/ul>\n<h3>KendoReact Nedir ve Kullan\u0131c\u0131 Aray\u00fcz\u00fcm\u00fcz\u00fc Nas\u0131l Zenginle\u015ftirir?<\/h3>\n<p>KendoReact, Progress taraf\u0131ndan geli\u015ftirilen, React uygulamalar\u0131 i\u00e7in kapsaml\u0131 bir UI bile\u015fenleri k\u00fct\u00fcphanesidir. Izgaralar, \u00e7izelgeler, form elemanlar\u0131, takvimler, gezinme men\u00fcleri ve \u00e7ok daha fazlas\u0131n\u0131 i\u00e7eren 100&#8217;den fazla y\u00fcksek performansl\u0131 ve eri\u015filebilir bile\u015fen sunar. Bu bile\u015fenler, profesyonel kalitede, tutarl\u0131 bir tasar\u0131m diline sahiptir ve kolayca \u00f6zelle\u015ftirilebilirler. Ayr\u0131ca, tema deste\u011fi sayesinde uygulaman\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc kolayca marka kimli\u011finize uygun hale getirebilirsiniz.<\/p>\n<p>KendoReact, \u00f6\u011frenme asistan\u0131m\u0131z i\u00e7in paha bi\u00e7ilmez bir ara\u00e7t\u0131r \u00e7\u00fcnk\u00fc:<\/p>\n<ul>\n<li>Haz\u0131r, profesyonel ve duyarl\u0131 UI bile\u015fenleri sunar, bu da geli\u015ftirme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131salt\u0131r.<\/li>\n<li>Eri\u015filebilirlik (WCAG uyumlulu\u011fu) standartlar\u0131na uygun bile\u015fenlerle geni\u015f bir kullan\u0131c\u0131 kitlesine ula\u015fmay\u0131 sa\u011flar.<\/li>\n<li>Y\u00fcksek performansl\u0131 bile\u015fenler, AI&#8217;dan gelen verilerin h\u0131zl\u0131 ve sorunsuz bir \u015fekilde g\u00f6sterilmesine olanak tan\u0131r.<\/li>\n<li>Esnek \u00f6zelle\u015ftirme se\u00e7enekleri sayesinde, uygulaman\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tam olarak istedi\u011finiz gibi \u015fekillendirebilirsiniz.<\/li>\n<\/ul>\n<p>Bu \u00fc\u00e7 teknolojinin birle\u015fimi \u2013 React ile g\u00fc\u00e7l\u00fc bir temel, KendoReact ile zengin ve i\u015flevsel bir UI, ve AI ile ak\u0131ll\u0131 etkile\u015fimler \u2013 \u00f6\u011frenme asistan\u0131m\u0131z\u0131 sadece g\u00fczel g\u00f6r\u00fcnmekle kalmay\u0131p, ayn\u0131 zamanda son derece yetenekli ve kullan\u0131\u015fl\u0131 k\u0131lar.<\/p>\n<h2>Projenizi Ba\u015flatma: AI Destekli \u00d6\u011frenme Asistan\u0131 \u0130\u00e7in \u0130lk Ad\u0131mlar Nelerdir?<\/h2>\n<p>Harika bir fikir ve g\u00fc\u00e7l\u00fc bir teknoloji y\u0131\u011f\u0131n\u0131na sahip oldu\u011fumuza g\u00f6re, s\u0131ra geldi bu projeyi hayata ge\u00e7irmeye. AI destekli \u00f6\u011frenme asistan\u0131n\u0131z\u0131 in\u015fa etmeye ba\u015flaman\u0131n ilk ad\u0131mlar\u0131, temel React projenizi kurmak, KendoReact&#8217;i entegre etmek ve AI servislerine eri\u015fimi yap\u0131land\u0131rmakt\u0131r. Bu b\u00f6l\u00fcm, sizi bu ilk yap\u0131land\u0131rma s\u00fcrecinden ad\u0131m ad\u0131m ge\u00e7irecek ve gelecekteki geli\u015ftirmeleriniz i\u00e7in sa\u011flam bir temel olu\u015fturman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n<h3>React Projesi Kurulumu: Temel \u0130skeleti Olu\u015fturma<\/h3>\n<p>React projesi olu\u015fturman\u0131n en yayg\u0131n ve kolay yolu, <code>create-react-app<\/code> (CRA) veya daha hafif ve h\u0131zl\u0131 olan Vite gibi ara\u00e7lar\u0131 kullanmakt\u0131r. Bu rehberde, daha modern ve performans odakl\u0131 bir se\u00e7enek olan Vite&#8217;\u0131 tercih edece\u011fiz. Komut sat\u0131r\u0131n\u0131z\u0131 a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutlar\u0131 uygulay\u0131n:<\/p>\n<pre><code>\n    npm create vite@latest my-learning-buddy -- --template react\n    cd my-learning-buddy\n    npm install\n    npm run dev\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu komutlar s\u0131ras\u0131yla yeni bir Vite projesi olu\u015fturacak, proje dizinine gidecek, gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyecek ve geli\u015ftirme sunucusunu ba\u015flatacakt\u0131r. Taray\u0131c\u0131n\u0131zda <code>http:\/\/localhost:5173<\/code> (veya benzer bir adres) adresine gitti\u011finizde varsay\u0131lan React uygulaman\u0131z\u0131 g\u00f6rmelisiniz. Art\u0131k React projeniz haz\u0131r!<\/p>\n<h3>KendoReact Entegrasyonu: UI G\u00fcc\u00fcn\u00fc Projenize Katma<\/h3>\n<p>React projeniz haz\u0131rland\u0131ktan sonra, KendoReact bile\u015fenlerini kullanmaya ba\u015flayabiliriz. KendoReact, ba\u011f\u0131ms\u0131z paketler halinde sunulur, bu da sadece ihtiyac\u0131n\u0131z olan bile\u015fenleri y\u00fckleyebilece\u011finiz anlam\u0131na gelir. Bir sohbet aray\u00fcz\u00fc ve baz\u0131 temel form elemanlar\u0131 i\u00e7in KendoReact'in ana UI paketlerini ve bir temas\u0131n\u0131 y\u00fckleyelim:<\/p>\n<pre><code>\n    npm install --save @progress\/kendo-react-buttons @progress\/kendo-react-inputs @progress\/kendo-react-layout @progress\/kendo-react-intl @progress\/kendo-theme-material\n    <\/pre>\n<p><\/code><\/p>\n<p><code>@progress\/kendo-theme-material<\/code> paketi, uygulaman\u0131za modern bir Material Design temas\u0131 ekleyecektir. Bu temay\u0131 projenizin ana <code>index.css<\/code> veya <code>main.jsx\/tsx<\/code> dosyas\u0131na aktararak etkinle\u015ftirebilirsiniz:<\/p>\n<pre><code>\n    \/\/ src\/main.jsx veya src\/index.js\n    import React from 'react';\n    import ReactDOM from 'react-dom\/client';\n    import App from '.\/App.jsx';\n    import '.\/index.css';\n    import '@progress\/kendo-theme-material\/dist\/all.css'; \/\/ KendoReact temas\u0131\n\n    ReactDOM.createRoot(document.getElementById('root')).render(\n      <React.StrictMode>\n        <App \/>\n      <\/React.StrictMode>,\n    );\n    <\/pre>\n<p><\/code><\/p>\n<p>Art\u0131k KendoReact bile\u015fenlerini projenizde sorunsuzca kullanabilirsiniz. \u00d6rne\u011fin, bir KendoReact butonu ekleyerek kurulumu test edebiliriz:<\/p>\n<pre><code>\n    \/\/ src\/App.jsx\n    import { Button } from '@progress\/kendo-react-buttons';\n    import '.\/App.css';\n\n    function App() {\n      return (\n        <div className=\"App\">\n          <h1>AI Destekli \u00d6\u011frenme Asistan\u0131<\/h1>\n          <Button onClick={() => alert('Merhaba, KendoReact!')}>\n            Merhaba KendoReact\n          <\/Button>\n        <\/div>\n      );\n    }\n\n    export default App;\n    <\/pre>\n<p><\/code><\/p>\n<p>Uygulaman\u0131z\u0131 \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda (<code>npm run dev<\/code>), sayfan\u0131zda bir KendoReact butonu g\u00f6rmelisiniz. Bu, KendoReact'in ba\u015far\u0131yla entegre edildi\u011fini g\u00f6sterir.<\/p>\n<div class=\"expert-tip\">\n      Uzman \u0130pucu: KendoReact'in bir\u00e7ok farkl\u0131 bile\u015feni var. Performans ve bundle boyutu i\u00e7in sadece ihtiyac\u0131n\u0131z olan paketleri y\u00fcklemeye \u00f6zen g\u00f6sterin. \u00d6rne\u011fin, sadece bir Grid kullanacaksan\u0131z, t\u00fcm KendoReact UI paketlerini de\u011fil, sadece <code>@progress\/kendo-react-grid<\/code> paketini y\u00fckleyin.\n    <\/div>\n<h3>AI Servisleri Se\u00e7imi ve Yap\u0131land\u0131rmas\u0131: Asistan\u0131m\u0131z\u0131n Beynini Ba\u011flama<\/h3>\n<p>\u00d6\u011frenme asistan\u0131m\u0131z\u0131n \"beyni\" yapay zeka servislerinde yat\u0131yor. Bug\u00fcn piyasada OpenAI (ChatGPT, GPT-4), Google Gemini, Hugging Face gibi bir\u00e7ok g\u00fc\u00e7l\u00fc AI modeli ve API'\u0131 bulunmaktad\u0131r. Bu rehberde, geni\u015f yetenekleri ve kullan\u0131m kolayl\u0131\u011f\u0131 nedeniyle OpenAI API'\u0131n\u0131 \u00f6rnek alaca\u011f\u0131z. OpenAI API'\u0131n\u0131 kullanmak i\u00e7in bir hesap olu\u015fturman\u0131z ve bir API anahtar\u0131 alman\u0131z gerekecektir. Bu anahtar\u0131 asla a\u00e7\u0131k kaynak kodunuzda veya do\u011frudan istemci taraf\u0131nda (taray\u0131c\u0131da) kullanmamal\u0131s\u0131n\u0131z, \u00e7\u00fcnk\u00fc bu g\u00fcvenlik zafiyetlerine yol a\u00e7ar. Bunun yerine, anahtar\u0131 sunucu taraf\u0131nda (Node.js, Python vb.) veya bir ortam de\u011fi\u015fkeni olarak saklamal\u0131s\u0131n\u0131z.<\/p>\n<p>Geli\u015ftirme a\u015famas\u0131nda, <code>.env<\/code> dosyalar\u0131n\u0131 kullanarak API anahtar\u0131n\u0131z\u0131 g\u00fcvenli bir \u015fekilde saklayabilirsiniz. Projenizin k\u00f6k dizininde bir <code>.env<\/code> dosyas\u0131 olu\u015fturun ve anahtar\u0131n\u0131z\u0131 i\u00e7ine yaz\u0131n:<\/p>\n<pre><code>\n    \/\/ .env\n    VITE_OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\n    <\/pre>\n<p><\/code><\/p>\n<p>Vite, <code>VITE_<\/code> \u00f6n ekiyle ba\u015flayan ortam de\u011fi\u015fkenlerini otomatik olarak istemci taraf\u0131na if\u015fa eder. \u00dcretim ortam\u0131nda ise bu anahtar\u0131 sunucu taraf\u0131nda daha g\u00fcvenli bir \u015fekilde y\u00f6netmeniz \u015fiddetle tavsiye edilir.<\/p>\n<p><strong>Vaka Analizi: Bir Dil \u00d6\u011frenme Uygulamas\u0131 \u0130\u00e7in Temel Yap\u0131<\/strong><\/p>\n<p>Bir dil \u00f6\u011frenme asistan\u0131 hayal edelim. Kullan\u0131c\u0131, \u00f6\u011frenmek istedi\u011fi bir kelimeyi veya c\u00fcmleyi giriyor ve asistan bu kelimenin anlam\u0131n\u0131, farkl\u0131 c\u00fcmlelerdeki kullan\u0131m\u0131n\u0131, e\u015f anlaml\u0131lar\u0131n\u0131 ve hatta telaffuz rehberli\u011fini sunuyor. Bu senaryoda:<\/p>\n<ul>\n<li><strong>React ve KendoReact<\/strong>: Kullan\u0131c\u0131n\u0131n kelime girmesi i\u00e7in bir <code>KendoReact TextBox<\/code>, AI'dan gelen yan\u0131t\u0131 g\u00f6stermek i\u00e7in bir <code>KendoReact PanelBar<\/code> veya <code>Card<\/code> ve kelimenin farkl\u0131 kullan\u0131mlar\u0131n\u0131 listeleyebilece\u011fimiz bir <code>KendoReact Grid<\/code> veya <code>ListGroup<\/code> kullan\u0131rd\u0131k.<\/li>\n<li><strong>AI<\/strong>: OpenAI API's\u0131na kullan\u0131c\u0131n\u0131n kelimesini ve \"bu kelimenin \u0130ngilizce anlam\u0131 nedir, 3 farkl\u0131 c\u00fcmlede kullan ve 2 e\u015f anlaml\u0131s\u0131n\u0131 ver\" gibi bir komut (prompt) g\u00f6nderirdik. API'dan gelen yan\u0131t\u0131 i\u015fleyip aray\u00fczde g\u00f6sterirdik.<\/li>\n<\/ul>\n<p>Bu ilk ad\u0131mlar, projenizin temelini olu\u015fturur ve ilerleyen b\u00f6l\u00fcmlerde bu temelin \u00fczerine daha karma\u015f\u0131k \u00f6zellikler in\u015fa etmeye ba\u015flayaca\u011f\u0131z.<\/p>\n<h2>KendoReact ile Kullan\u0131c\u0131 Aray\u00fcz\u00fc Nas\u0131l Olu\u015fturulur?<\/h2>\n<p>AI destekli \u00f6\u011frenme asistan\u0131m\u0131z\u0131n beynini (AI) ve iskeletini (React) haz\u0131rlad\u0131k. \u015eimdi s\u0131ra geldi bu asistan\u0131 kullan\u0131c\u0131lar\u0131m\u0131z\u0131n keyifle etkile\u015fime ge\u00e7ebilece\u011fi \u00e7ekici ve i\u015flevsel bir y\u00fcze kavu\u015fturmaya. KendoReact, bu noktada devreye girerek bize haz\u0131r, \u00f6zelle\u015ftirilebilir ve duyarl\u0131 UI bile\u015fenleri sunar. Bu b\u00f6l\u00fcmde, bir sohbet aray\u00fcz\u00fc ve temel mod\u00fcller olu\u015fturmak i\u00e7in KendoReact'in g\u00fcc\u00fcn\u00fc nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n<h3>\u00d6\u011frenme Asistan\u0131n\u0131n Ana Ekran\u0131: Sohbet ve Mod\u00fcl Yakla\u015f\u0131m\u0131<\/h3>\n<p>Bir \u00f6\u011frenme asistan\u0131n\u0131n kalbi, kullan\u0131c\u0131 ile do\u011fal bir sohbeti sim\u00fcle eden aray\u00fcz\u00fcd\u00fcr. Kullan\u0131c\u0131 sorular sorar, asistan yan\u0131tlar verir. Bu sohbet aray\u00fcz\u00fcn\u00fcn yan\u0131 s\u0131ra, quizler, ilerleme takibi veya konu se\u00e7imi gibi farkl\u0131 mod\u00fcller de uygulaman\u0131n temelini olu\u015fturacakt\u0131r.<\/p>\n<p>Ana ekran\u0131m\u0131zda \u015funlar olabilir:<\/p>\n<ul>\n<li><strong>Sohbet Penceresi<\/strong>: AI ile etkile\u015fimin merkezi. Kullan\u0131c\u0131n\u0131n ve asistan\u0131n mesajlar\u0131n\u0131 g\u00f6sterir.<\/li>\n<li><strong>Giri\u015f Kutusu ve G\u00f6nder Butonu<\/strong>: Kullan\u0131c\u0131n\u0131n soru veya komutlar\u0131n\u0131 girmesi i\u00e7in.<\/li>\n<li><strong>Mod\u00fcl Se\u00e7ici<\/strong>: Kullan\u0131c\u0131lar\u0131n farkl\u0131 \u00f6\u011frenme mod\u00fclleri aras\u0131nda ge\u00e7i\u015f yapmas\u0131n\u0131 sa\u011flar (\u00f6rn. \"Kelime \u00d6\u011fren\", \"Dilbilgisi Testi\", \"Konu \u00d6zeti\").<\/li>\n<\/ul>\n<h3>KendoReact Bile\u015fenleri ile Dinamik UI Olu\u015fturma<\/h3>\n<p>\u015eimdi bu yap\u0131lar\u0131 KendoReact bile\u015fenleriyle nas\u0131l in\u015fa edebilece\u011fimize bakal\u0131m. \u0130\u015fte baz\u0131 temel KendoReact bile\u015fenleri ve kullan\u0131m alanlar\u0131:<\/p>\n<ul>\n<li><code>TextBox<\/code>: Kullan\u0131c\u0131n\u0131n metin giri\u015fi yapmas\u0131 i\u00e7in.<\/li>\n<li><code>Button<\/code>: Mesajlar\u0131 g\u00f6ndermek veya mod\u00fcller aras\u0131nda ge\u00e7i\u015f yapmak i\u00e7in.<\/li>\n<li><code>PanelBar<\/code> veya <code>Card<\/code>: Sohbet mesajlar\u0131n\u0131 veya mod\u00fcl i\u00e7eriklerini d\u00fczenli bir \u015fekilde g\u00f6stermek i\u00e7in.<\/li>\n<li><code>DropDownList<\/code> veya <code>ButtonGroup<\/code>: Farkl\u0131 \u00f6\u011frenme mod\u00fclleri aras\u0131nda se\u00e7im yapmak i\u00e7in.<\/li>\n<\/ul>\n<p>\u00d6rnek olarak, basit bir sohbet aray\u00fcz\u00fc iskeleti olu\u015ftural\u0131m. Bu aray\u00fcz, kullan\u0131c\u0131dan metin alacak ve bunu bir \"sohbet ge\u00e7mi\u015fi\" listesine ekleyecektir. AI entegrasyonu sonraki b\u00f6l\u00fcmde ele al\u0131nacak.<\/p>\n<pre><code>\n    \/\/ src\/components\/ChatInterface.jsx\n    import React, { useState } from 'react';\n    import { TextBox } from '@progress\/kendo-react-inputs';\n    import { Button } from '@progress\/kendo-react-buttons';\n    import { PanelBar, PanelBarItem } from '@progress\/kendo-react-layout';\n    import '@progress\/kendo-theme-material\/dist\/all.css'; \/\/ Temay\u0131 tekrar import etmek gerekebilir\n\n    const ChatInterface = () => {\n      const [messages, setMessages] = useState([]);\n      const [input, setInput] = useState('');\n\n      const handleSendMessage = () => {\n        if (input.trim()) {\n          setMessages([...messages, { text: input, sender: 'user' }]);\n          setInput('');\n          \/\/ Burada AI'ya mesaj g\u00f6nderme mant\u0131\u011f\u0131 eklenecek\n          \/\/ \u00d6rne\u011fin: simulateAIResponse(input);\n        }\n      };\n\n      const simulateAIResponse = (userMessage) => {\n        \/\/ Basit bir sim\u00fclasyon, ger\u00e7ek AI entegrasyonu sonraki b\u00f6l\u00fcmde\n        setTimeout(() => {\n          setMessages((prevMessages) => [\n            ...prevMessages,\n            { text: <code>\"${userMessage}\" hakk\u0131nda bilgi mi istiyorsunuz?<\/code>, sender: 'ai' },\n          ]);\n        }, 1000);\n      };\n\n      return (\n        <div style={{ maxWidth: '600px', margin: '20px auto', padding: '15px', border: '1px solid #ccc', borderRadius: '8px', boxShadow: '0 2px 5px rgba(0,0,0,0.1)' }}>\n          <h3 style={{ textAlign: 'center', marginBottom: '20px' }}>AI \u00d6\u011frenme Asistan\u0131<\/h3>\n          <div style={{ height: '400px', overflowY: 'auto', border: '1px solid #eee', padding: '10px', marginBottom: '15px', borderRadius: '4px', backgroundColor: '#f9f9f9' }}>\n            {messages.length === 0 ? (\n              <p style={{ textAlign: 'center', color: '#888' }}>Hen\u00fcz mesaj yok. Bir \u015fey yaz\u0131n!<\/p>\n            ) : (\n              messages.map((msg, index) => (\n                <div key={index} style={{ marginBottom: '10px', textAlign: msg.sender === 'user' ? 'right' : 'left' }}>\n                  <PanelBar expandMode=\"single\" style={{ display: 'inline-block', maxWidth: '80%' }}>\n                    <PanelBarItem expanded={true} title={msg.sender === 'user' ? 'Siz' : 'Asistan'} >\n                      <div style={{ padding: '10px', backgroundColor: msg.sender === 'user' ? '#e6f7ff' : '#fff0e6', borderRadius: '5px' }}>\n                        {msg.text}\n                      <\/div>\n                    <\/PanelBarItem>\n                  <\/PanelBar>\n                <\/div>\n              ))\n            )}\n          <\/div>\n          <div style={{ display: 'flex', gap: '10px' }}>\n            <TextBox\n              value={input}\n              onChange={(e) => setInput(e.target.value)}\n              onKeyDown={(e) => { if (e.key === 'Enter') handleSendMessage(); }}\n              placeholder=\"Sorunuzu buraya yaz\u0131n...\"\n              style={{ flexGrow: 1 }}\n            \/>\n            <Button primary={true} onClick={handleSendMessage}>G\u00f6nder<\/Button>\n          <\/div>\n        <\/div>\n      );\n    };\n\n    export default ChatInterface;\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu <code>ChatInterface<\/code> bile\u015fenini ana <code>App.jsx<\/code> dosyan\u0131za ekleyerek uygulaman\u0131z\u0131 \u00e7al\u0131\u015ft\u0131rabilirsiniz:<\/p>\n<pre><code>\n    \/\/ src\/App.jsx\n    import ChatInterface from '.\/components\/ChatInterface';\n    import '.\/App.css';\n\n    function App() {\n      return (\n        <div className=\"App\">\n          <ChatInterface \/>\n        <\/div>\n      );\n    }\n\n    export default App;\n    <\/pre>\n<p><\/code><\/p>\n<div class=\"expert-tip\">\n      Uzman \u0130pucu: KendoReact bile\u015fenlerini kullan\u0131rken, temalar\u0131n do\u011fru y\u00fcklendi\u011finden ve gerekli stil dosyalar\u0131n\u0131n uygulaman\u0131zda mevcut oldu\u011fundan emin olun. Ayr\u0131ca, bile\u015fenlerin performans\u0131n\u0131 art\u0131rmak i\u00e7in, \u00f6zellikle dinamik listelerde <code>key<\/code> prop'unu do\u011fru kullanmaya \u00f6zen g\u00f6sterin.\n    <\/div>\n<h3>Mobil Uyumluluk \u0130\u00e7in CSS Media Query \u00d6rne\u011fi<\/h3>\n<p>Modern web uygulamalar\u0131n\u0131n mobil uyumlu olmas\u0131 \u015fartt\u0131r. KendoReact bile\u015fenleri genellikle duyarl\u0131 tasar\u0131ma uygun olarak tasarlanm\u0131\u015ft\u0131r, ancak \u00f6zel d\u00fczenlemeleriniz i\u00e7in CSS <code>media query<\/code>'leri kullanabilirsiniz. \u00d6rne\u011fin, sohbet penceresini k\u00fc\u00e7\u00fck ekranlarda daha dar hale getirmek i\u00e7in <code>src\/App.css<\/code> dosyan\u0131za \u015funlar\u0131 ekleyebilirsiniz:<\/p>\n<pre><code>\n    \/* src\/App.css *\/\n    .App {\n      font-family: 'Roboto', sans-serif;\n      text-align: center;\n      padding: 10px;\n    }\n\n    @media (max-width: 768px) {\n      .App > div { \/* ChatInterface bile\u015fenini i\u00e7eren div *\/\n        max-width: 95% !important;\n        margin: 10px auto !important;\n        padding: 10px !important;\n      }\n      h3 {\n        font-size: 1.2em;\n      }\n    }\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu <code>media query<\/code>, ekran geni\u015fli\u011fi 768 pikselin alt\u0131na d\u00fc\u015ft\u00fc\u011f\u00fcnde sohbet aray\u00fcz\u00fcn\u00fcn geni\u015fli\u011fini art\u0131r\u0131r ve kenar bo\u015fluklar\u0131n\u0131 ayarlar. Bu sayede, uygulaman\u0131z hem masa\u00fcst\u00fc hem de mobil cihazlarda iyi bir kullan\u0131c\u0131 deneyimi sunar.<\/p>\n<h2>Yapay Zeka Entegrasyonu: Asistan\u0131n\u0131z\u0131 Nas\u0131l Ak\u0131ll\u0131 Hale Getireceksiniz?<\/h2>\n<p>Kullan\u0131c\u0131 aray\u00fcz\u00fcm\u00fcz\u00fc KendoReact ile olu\u015fturduk, \u015fimdi s\u0131ra geldi asistan\u0131m\u0131za \"zeka\" katmaya. Bu b\u00f6l\u00fcmde, harici bir yapay zeka servisi (\u00f6rne\u011fimizde OpenAI API) ile nas\u0131l ileti\u015fim kuraca\u011f\u0131m\u0131z\u0131, kullan\u0131c\u0131dan gelen girdileri nas\u0131l i\u015fleyece\u011fimizi ve AI'dan gelen yan\u0131tlar\u0131 nas\u0131l dinamik olarak aray\u00fcze yans\u0131taca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Bu, \u00f6\u011frenme asistan\u0131m\u0131z\u0131n sadece bir sohbet botu olmaktan \u00e7\u0131k\u0131p, ger\u00e7ek bir bilgi kayna\u011f\u0131 ve etkile\u015fimli bir \u00f6\u011frenme yolda\u015f\u0131 haline geldi\u011fi a\u015famad\u0131r.<\/p>\n<h3>AI API'lar\u0131 ile \u0130leti\u015fim Kurma: Asistan\u0131n \"Konu\u015fmas\u0131n\u0131\" Sa\u011flamak<\/h3>\n<p>Yapay zeka modelleri genellikle RESTful API'lar arac\u0131l\u0131\u011f\u0131yla eri\u015filebilir. Bu, uygulaman\u0131z\u0131n HTTP istekleri g\u00f6ndererek AI servisine veri g\u00f6nderebilece\u011fi ve ondan yan\u0131tlar alabilece\u011fi anlam\u0131na gelir. Modern JavaScript'te bu t\u00fcr istekler yapmak i\u00e7in <code>fetch<\/code> API'\u0131 veya daha geli\u015fmi\u015f bir k\u00fct\u00fcphane olan Axios kullan\u0131labilir. G\u00fcvenlik nedeniyle, API anahtar\u0131n\u0131z\u0131 asla do\u011frudan istemci taraf\u0131nda a\u00e7\u0131\u011fa \u00e7\u0131karmamal\u0131s\u0131n\u0131z. Daha g\u00fcvenli bir yakla\u015f\u0131m, arka u\u00e7 (backend) sunucusu arac\u0131l\u0131\u011f\u0131yla istekleri proxy etmek veya geli\u015ftirme ortam\u0131nda <code>.env<\/code> dosyalar\u0131n\u0131 dikkatli kullanmakt\u0131r.<\/p>\n<p>\u00d6nceki b\u00f6l\u00fcmde olu\u015fturdu\u011fumuz <code>ChatInterface.jsx<\/code> bile\u015fenimizi AI ile entegre edelim. Bunun i\u00e7in OpenAI'\u0131n <code>gpt-3.5-turbo<\/code> modelini kullanaca\u011f\u0131z.<\/p>\n<pre><code>\n    \/\/ src\/components\/ChatInterface.jsx (G\u00fcncellenmi\u015f K\u0131s\u0131m)\n    import React, { useState } from 'react';\n    import { TextBox } from '@progress\/kendo-react-inputs';\n    import { Button } from '@progress\/kendo-react-buttons';\n    import { PanelBar, PanelBarItem } from '@progress\/kendo-react-layout';\n    import '@progress\/kendo-theme-material\/dist\/all.css';\n\n    const API_KEY = import.meta.env.VITE_OPENAI_API_KEY; \/\/ Vite ile ortam de\u011fi\u015fkeni eri\u015fimi\n\n    const ChatInterface = () => {\n      const [messages, setMessages] = useState([]);\n      const [input, setInput] = useState('');\n      const [isLoading, setIsLoading] = useState(false); \/\/ Y\u00fckleme durumu i\u00e7in\n\n      const handleSendMessage = async () => {\n        if (input.trim() === '') return;\n\n        const userMessage = { text: input, sender: 'user' };\n        setMessages((prevMessages) => [...prevMessages, userMessage]);\n        setInput('');\n        setIsLoading(true);\n\n        try {\n          const response = await fetch('https:\/\/api.openai.com\/v1\/chat\/completions', {\n            method: 'POST',\n            headers: {\n              'Content-Type': 'application\/json',\n              'Authorization': <code>Bearer ${API_KEY}<\/code>,\n            },\n            body: JSON.stringify({\n              model: 'gpt-3.5-turbo', \/\/ Kulland\u0131\u011f\u0131n\u0131z OpenAI modeli\n              messages: [\n                { role: 'system', content: 'Sen, kullan\u0131c\u0131lara derslerinde yard\u0131mc\u0131 olan bir \u00f6\u011frenme asistan\u0131s\u0131n. K\u0131sa, a\u00e7\u0131klay\u0131c\u0131 ve yard\u0131mc\u0131 cevaplar ver.' },\n                ...messages.map(msg => ({ role: msg.sender === 'user' ? 'user' : 'assistant', content: msg.text })),\n                { role: 'user', content: userMessage.text },\n              ],\n              temperature: 0.7, \/\/ Yarat\u0131c\u0131l\u0131k seviyesi (0.0-1.0)\n              max_tokens: 150, \/\/ Yan\u0131t\u0131n maksimum uzunlu\u011fu\n            }),\n          });\n\n          if (!response.ok) {\n            throw new Error(<code>API hatas\u0131: ${response.statusText}<\/code>);\n          }\n\n          const data = await response.json();\n          const aiResponse = data.choices[0].message.content;\n          setMessages((prevMessages) => [...prevMessages, { text: aiResponse, sender: 'ai' }]);\n        } catch (error) {\n          console.error(\"AI'dan yan\u0131t al\u0131namad\u0131:\", error);\n          setMessages((prevMessages) => [\n            ...prevMessages,\n            { text: '\u00dczg\u00fcn\u00fcm, bir hata olu\u015ftu. L\u00fctfen tekrar deneyin.', sender: 'ai' },\n          ]);\n        } finally {\n          setIsLoading(false);\n        }\n      };\n\n      return (\n        <div style={{ maxWidth: '600px', margin: '20px auto', padding: '15px', border: '1px solid #ccc', borderRadius: '8px', boxShadow: '0 2px 5px rgba(0,0,0,0.1)' }}>\n          <h3 style={{ textAlign: 'center', marginBottom: '20px' }}>AI \u00d6\u011frenme Asistan\u0131<\/h3>\n          <div style={{ height: '400px', overflowY: 'auto', border: '1px solid #eee', padding: '10px', marginBottom: '15px', borderRadius: '4px', backgroundColor: '#f9f9f9' }}>\n            {messages.length === 0 && !isLoading ? (\n              <p style={{ textAlign: 'center', color: '#888' }}>Hen\u00fcz mesaj yok. Bir \u015fey yaz\u0131n!<\/p>\n            ) : (\n              messages.map((msg, index) => (\n                <div key={index} style={{ marginBottom: '10px', textAlign: msg.sender === 'user' ? 'right' : 'left' }}>\n                  <PanelBar expandMode=\"single\" style={{ display: 'inline-block', maxWidth: '80%' }}>\n                    <PanelBarItem expanded={true} title={msg.sender === 'user' ? 'Siz' : 'Asistan'} >\n                      <div style={{ padding: '10px', backgroundColor: msg.sender === 'user' ? '#e6f7ff' : '#fff0e6', borderRadius: '5px' }}>\n                        {msg.text}\n                      <\/div>\n                    <\/PanelBarItem>\n                  <\/PanelBar>\n                <\/div>\n              ))\n            )}\n            {isLoading && (\n                <div style={{ textAlign: 'center', color: '#888', fontStyle: 'italic' }}>Asistan d\u00fc\u015f\u00fcn\u00fcyor...<\/div>\n            )}\n          <\/div>\n          <div style={{ display: 'flex', gap: '10px' }}>\n            <TextBox\n              value={input}\n              onChange={(e) => setInput(e.target.value)}\n              onKeyDown={(e) => { if (e.key === 'Enter' && !isLoading) handleSendMessage(); }}\n              placeholder=\"Sorunuzu buraya yaz\u0131n...\"\n              style={{ flexGrow: 1 }}\n              disabled={isLoading}\n            \/>\n            <Button primary={true} onClick={handleSendMessage} disabled={isLoading}>G\u00f6nder<\/Button>\n          <\/div>\n        <\/div>\n      );\n    };\n\n    export default ChatInterface;\n    <\/pre>\n<p><\/code><\/p>\n<h3>Prompt Engineering Prensipleri: AI'dan En \u0130yi Yan\u0131t\u0131 Alma Sanat\u0131<\/h3>\n<p>Yapay zeka modellerinden istedi\u011finiz yan\u0131tlar\u0131 almak, do\u011fru \"prompt\" (komut) yazma sanat\u0131n\u0131 gerektirir. Buna prompt engineering denir. \u0130yi bir prompt, AI'\u0131n ne yapmas\u0131n\u0131 bekledi\u011finizi, hangi ba\u011flamda yan\u0131t vermesi gerekti\u011fini ve hatta hangi tonu kullanmas\u0131 gerekti\u011fini a\u00e7\u0131k\u00e7a belirtir.<\/p>\n<p>Yukar\u0131daki kod \u00f6rne\u011finde, <code>messages<\/code> dizisinin ba\u015f\u0131na bir <code>system<\/code> mesaj\u0131 ekledik:<\/p>\n<pre><code>\n    { role: 'system', content: 'Sen, kullan\u0131c\u0131lara derslerinde yard\u0131mc\u0131 olan bir \u00f6\u011frenme asistan\u0131s\u0131n. K\u0131sa, a\u00e7\u0131klay\u0131c\u0131 ve yard\u0131mc\u0131 cevaplar ver.' }\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu, AI'a bir \"rol\" atar ve onun bir \u00f6\u011frenme asistan\u0131 gibi davranmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, yan\u0131tlar\u0131n\u0131n \"k\u0131sa, a\u00e7\u0131klay\u0131c\u0131 ve yard\u0131mc\u0131\" olmas\u0131n\u0131 talep ederek \u00e7\u0131kt\u0131n\u0131n format\u0131n\u0131 ve tonunu belirleriz. Daha karma\u015f\u0131k senaryolar i\u00e7in, prompt'unuza \u015funlar\u0131 ekleyebilirsiniz:<\/p>\n<ul>\n<li><strong>\u00d6rnekler<\/strong>: AI'\u0131n nas\u0131l yan\u0131t vermesini istedi\u011finize dair birka\u00e7 \u00f6rnek.<\/li>\n<li><strong>K\u0131s\u0131tlamalar<\/strong>: Yan\u0131t\u0131n belirli bir uzunlukta olmas\u0131, belirli kelimeleri i\u00e7ermemesi veya belirli bir formata uymas\u0131 gibi.<\/li>\n<li><strong>Ek Bilgiler<\/strong>: Konuyla ilgili ek ba\u011flam veya \u00f6\u011frencinin ge\u00e7mi\u015fteki performans\u0131na dair veriler.<\/li>\n<\/ul>\n<div class=\"expert-tip\">\n      Uzman \u0130pucu: Prompt'lar\u0131n\u0131zda a\u00e7\u0131k, net ve tekil talimatlar kullan\u0131n. Karma\u015f\u0131k istekleri par\u00e7alara ay\u0131rmak, AI'\u0131n daha do\u011fru ve ilgili yan\u0131tlar \u00fcretmesine yard\u0131mc\u0131 olur. Ayr\u0131ca, farkl\u0131 <code>temperature<\/code> (yarat\u0131c\u0131l\u0131k) de\u011ferlerini deneyerek AI'\u0131n yan\u0131tlar\u0131n\u0131n ne kadar rastgele veya deterministik olaca\u011f\u0131n\u0131 ayarlayabilirsiniz.\n    <\/div>\n<h3>Gelen AI Yan\u0131tlar\u0131n\u0131 \u0130\u015fleme ve G\u00f6sterme: Dinamik \u0130\u00e7erik Y\u00f6netimi<\/h3>\n<p>AI'dan gelen yan\u0131tlar genellikle JSON format\u0131ndad\u0131r. Yukar\u0131daki \u00f6rnekte, <code>data.choices[0].message.content<\/code> ile AI'\u0131n metin yan\u0131t\u0131na eri\u015fiyoruz. Bu metni ald\u0131ktan sonra, React'in <code>useState<\/code> hook'unu kullanarak <code>messages<\/code> durumunu g\u00fcncelliyor ve yeni mesaj\u0131 aray\u00fczde g\u00f6steriyoruz. KendoReact'in <code>PanelBarItem<\/code> bile\u015feni, sohbet mesajlar\u0131n\u0131 d\u00fczenli ve okunabilir bir formatta sunmak i\u00e7in idealdir.<\/p>\n<p><strong>Vaka Analizi: Metin \u00d6zetleme veya Soru Yan\u0131tlama \u00d6zelli\u011fi<\/strong><\/p>\n<p>Diyelim ki asistan\u0131m\u0131za bir \"Metin \u00d6zetle\" mod\u00fcl\u00fc eklemek istiyoruz. Kullan\u0131c\u0131 uzun bir metin girecek ve AI bunu \u00f6zetleyecek.<\/p>\n<ol>\n<li><strong>UI<\/strong>: <code>KendoReact TextArea<\/code> ile uzun metin giri\u015fi al, bir <code>Button<\/code> ile \u00f6zetleme iste\u011fini g\u00f6nder.<\/li>\n<li><strong>AI Entegrasyonu<\/strong>: Kullan\u0131c\u0131n\u0131n metnini ve \"Bu metni 3 c\u00fcmlede \u00f6zetle.\" gibi bir prompt ile OpenAI API's\u0131na g\u00f6nder.<\/li>\n<li><strong>Yan\u0131t \u0130\u015fleme<\/strong>: Gelen \u00f6zeti bir <code>KendoReact Card<\/code> veya <code>PanelBar<\/code> i\u00e7inde g\u00f6ster.<\/li>\n<\/ol>\n<p>Benzer \u015fekilde, bir \"Soru Cevaplama\" \u00f6zelli\u011fi i\u00e7in, kullan\u0131c\u0131n\u0131n sorusunu AI'a g\u00f6nderir ve gelen yan\u0131t\u0131 do\u011frudan sohbet aray\u00fcz\u00fcnde g\u00f6steririz. Bu t\u00fcr entegrasyonlar, \u00f6\u011frenme asistan\u0131n\u0131z\u0131n ger\u00e7ekten dinamik ve faydal\u0131 olmas\u0131n\u0131 sa\u011flar. G\u00fc\u00e7l\u00fc bir AI entegrasyonu ile asistan\u0131n\u0131z, \u00f6\u011frencilere an\u0131nda geri bildirim sa\u011flayabilir, kavramlar\u0131 a\u00e7\u0131klayabilir ve hatta karma\u015f\u0131k konular hakk\u0131nda derinlemesine analizler sunabilir.<\/p>\n<h2>Etkile\u015fim ve Geri Bildirim: \u00d6\u011frenme Deneyimini Nas\u0131l Ki\u015fiselle\u015ftiririz?<\/h2>\n<p>Bir \u00f6\u011frenme asistan\u0131n\u0131n de\u011feri, sadece bilgi sa\u011flamas\u0131ndan \u00f6te, bu bilgiyi kullan\u0131c\u0131ya \u00f6zel hale getirebilmesi ve onlar\u0131n \u00f6\u011frenme yolculu\u011funa aktif olarak kat\u0131lmas\u0131yla ortaya \u00e7\u0131kar. Bu b\u00f6l\u00fcmde, AI destekli asistan\u0131m\u0131z\u0131n nas\u0131l daha etkile\u015fimli hale getirilece\u011fini, kullan\u0131c\u0131 girdilerini analiz ederek yan\u0131tlar\u0131 ki\u015fiselle\u015ftirmeyi, \u00f6\u011frenme ilerlemesini izlemeyi ve uyarlanabilir \u00f6\u011frenme mekanizmalar\u0131n\u0131 entegre etmeyi ke\u015ffedece\u011fiz. KendoReact'in zengin bile\u015fenleri, bu ki\u015fiselle\u015ftirilmi\u015f deneyimi olu\u015fturmam\u0131z i\u00e7in bize g\u00fc\u00e7l\u00fc ara\u00e7lar sunacakt\u0131r.<\/p>\n<h3>Kullan\u0131c\u0131 Girdilerini Analiz Etme ve AI'\u0131n Yan\u0131tlar\u0131n\u0131 Ki\u015fiselle\u015ftirme<\/h3>\n<p>Asistan\u0131n ger\u00e7ekten \"ak\u0131ll\u0131\" olabilmesi i\u00e7in, sadece kullan\u0131c\u0131n\u0131n ne sordu\u011funu de\u011fil, ayn\u0131 zamanda o soruyu neden sordu\u011funu ve ne t\u00fcr bir yard\u0131ma ihtiyac\u0131 oldu\u011funu da anlamas\u0131 gerekir. Bu, kullan\u0131c\u0131 girdilerini daha derinlemesine analiz etmeyi gerektirir. \u00d6rne\u011fin, bir kullan\u0131c\u0131 s\u00fcrekli belirli bir konuda soru soruyorsa, asistan bu konunun onun i\u00e7in zorlay\u0131c\u0131 oldu\u011funu anlayabilir.<\/p>\n<p>Ki\u015fiselle\u015ftirme i\u00e7in \u015funlar\u0131 yapabiliriz:<\/p>\n<ul>\n<li><strong>Kullan\u0131c\u0131 Profili Olu\u015fturma<\/strong>: \u00d6\u011frencinin ilgi alanlar\u0131, ge\u00e7mi\u015f \u00f6\u011frenme performans\u0131, tercih etti\u011fi \u00f6\u011frenme stili (g\u00f6rsel, i\u015fitsel, metin tabanl\u0131) gibi bilgileri depolayabiliriz. Bu veriler, asistan\u0131n prompt'lar\u0131na eklenerek AI'\u0131n daha alakal\u0131 yan\u0131tlar \u00fcretmesini sa\u011flayabilir.<\/li>\n<li><strong>Duygu Analizi (Opsiyonel)<\/strong>: Geli\u015fmi\u015f AI modelleri, kullan\u0131c\u0131 metnindeki duygu tonunu analiz edebilir. E\u011fer kullan\u0131c\u0131 hayal k\u0131r\u0131kl\u0131\u011f\u0131 veya s\u0131k\u0131nt\u0131 ifade ediyorsa, asistan daha motive edici veya basitle\u015ftirilmi\u015f bir yakla\u015f\u0131m sergileyebilir.<\/li>\n<li><strong>\u00d6\u011frenme Ge\u00e7mi\u015fi<\/strong>: Kullan\u0131c\u0131n\u0131n \u00f6nceki sorular\u0131, do\u011fru\/yanl\u0131\u015f cevaplar\u0131 ve tamamlad\u0131\u011f\u0131 mod\u00fcller, AI'\u0131n bir sonraki ad\u0131m\u0131 belirlemesine yard\u0131mc\u0131 olabilir. AI, \u00f6\u011frencinin mevcut bilgi d\u00fczeyine uygun zorlukta sorular sorabilir veya konular\u0131 tekrar edebilir.<\/li>\n<\/ul>\n<p>\u00d6rne\u011fin, OpenAI API's\u0131na g\u00f6nderdi\u011fimiz <code>messages<\/code> dizisine kullan\u0131c\u0131 profili bilgilerini ekleyebiliriz:<\/p>\n<pre><code>\n    \/\/ OpenAI API iste\u011fi i\u00e7inde messages dizisine ek bilgi\n    messages: [\n        { role: 'system', content: <code>Sen, ${userProfile.name} adl\u0131 \u00f6\u011frenciye ${userProfile.learningGoal} konusunda yard\u0131mc\u0131 olan bir \u00f6\u011frenme asistan\u0131s\u0131n. \u00d6\u011frencinin tercih etti\u011fi \u00f6\u011frenme stili: ${userProfile.learningStyle}.<\/code> },\n        \/\/ ... mevcut sohbet ge\u00e7mi\u015fi\n        { role: 'user', content: userMessage.text },\n    ],\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu, AI'\u0131n yan\u0131tlar\u0131n\u0131 kullan\u0131c\u0131n\u0131n bireysel ba\u011flam\u0131na g\u00f6re \u015fekillendirmesine olanak tan\u0131r.<\/p>\n<h3>KendoReact Chart ile \u0130lerleme Takibi ve Motivasyon<\/h3>\n<p>\u00d6\u011frenme s\u00fcrecinde ilerlemeyi g\u00f6rselle\u015ftirmek, \u00f6\u011frencilerin motivasyonunu art\u0131rman\u0131n ve \u00e7abalar\u0131n\u0131n kar\u015f\u0131l\u0131\u011f\u0131n\u0131 g\u00f6rmelerini sa\u011flaman\u0131n \u00f6nemli bir yoludur. KendoReact'in zengin grafik bile\u015fenleri, bu t\u00fcr ilerleme takibini kolayca uygulaman\u0131za olanak tan\u0131r. \u00c7ubuk grafikler, \u00e7izgi grafikler veya halka grafikler (pie charts) kullanarak \u015funlar\u0131 g\u00f6sterebiliriz:<\/p>\n<ul>\n<li>Tamamlanan ders say\u0131s\u0131<\/li>\n<li>Quizlerdeki ortalama ba\u015far\u0131 oran\u0131<\/li>\n<li>Belirli bir konudaki ustal\u0131k seviyesi<\/li>\n<li>Ge\u00e7mi\u015fe g\u00f6re ilerleme h\u0131z\u0131<\/li>\n<\/ul>\n<pre><code>\n    \/\/ src\/components\/ProgressChart.jsx\n    import React from 'react';\n    import { Chart, ChartSeries, ChartSeriesItem, ChartCategoryAxis, ChartCategoryAxisItem, ChartTitle, ChartLegend } from '@progress\/kendo-react-charts';\n    import 'hammerjs'; \/\/ KendoReact Charts i\u00e7in gereklidir\n\n    const categories = ['Ocak', '\u015eubat', 'Mart', 'Nisan'];\n    const quizScores = [80, 85, 90, 92]; \/\/ \u00d6rnek quiz skorlar\u0131\n\n    const ProgressChart = () => (\n      <Chart style={{ height: '350px' }}>\n        <ChartTitle text=\"Ayl\u0131k Quiz Performans\u0131\" \/>\n        <ChartLegend position=\"top\" \/>\n        <ChartCategoryAxis>\n          <ChartCategoryAxisItem categories={categories} \/>\n        <\/ChartCategoryAxis>\n        <ChartSeries>\n          <ChartSeriesItem type=\"line\" data={quizScores} name=\"Ortalama Skor\" \/>\n        <\/ChartSeries>\n      <\/Chart>\n    );\n\n    export default ProgressChart;\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu <code>ProgressChart<\/code> bile\u015fenini, ana uygulaman\u0131zda bir mod\u00fcl olarak veya asistan\u0131n ana panosunda g\u00f6sterebilirsiniz.<\/p>\n<h3>Quiz ve Test Mod\u00fclleri Olu\u015fturma<\/h3>\n<p>Etkile\u015fimli quizler ve testler, \u00f6\u011frenilen bilgiyi peki\u015ftirmek i\u00e7in vazge\u00e7ilmezdir. KendoReact'in <code>RadioGroup<\/code>, <code>CheckBox<\/code>, <code>Button<\/code> ve <code>Notification<\/code> gibi bile\u015fenleri, zengin quiz aray\u00fczleri olu\u015fturman\u0131z\u0131 sa\u011flar. AI, kullan\u0131c\u0131n\u0131n ge\u00e7mi\u015f performans\u0131na g\u00f6re quiz sorular\u0131n\u0131 dinamik olarak \u00fcretebilir veya zorluk seviyesini ayarlayabilir.<\/p>\n<p><strong>Uyarlanabilir \u00d6\u011frenme (Adaptive Learning) Mekanizmalar\u0131<\/strong><\/p>\n<p>Uyarlanabilir \u00f6\u011frenme, asistan\u0131n \u00f6\u011frencinin performans\u0131na, h\u0131z\u0131na ve tercihlerine g\u00f6re m\u00fcfredat\u0131 ve \u00f6\u011frenme yolunu ger\u00e7ek zamanl\u0131 olarak de\u011fi\u015ftirmesi anlam\u0131na gelir. Bu, AI'\u0131n en g\u00fc\u00e7l\u00fc uygulamalar\u0131ndan biridir:<\/p>\n<ul>\n<li><strong>Zorluk Seviyesi Ayarlama<\/strong>: E\u011fer bir \u00f6\u011frenci belirli bir konuda s\u00fcrekli y\u00fcksek puanlar al\u0131yorsa, asistan daha zorlu materyallere ge\u00e7ebilir. Zorland\u0131\u011f\u0131nda ise, daha temel konulara geri d\u00f6nebilir veya ek al\u0131\u015ft\u0131rmalar sunabilir.<\/li>\n<li><strong>Konu \u00d6nerileri<\/strong>: \u00d6\u011frencinin ilgi alanlar\u0131 veya ge\u00e7mi\u015f performans\u0131 do\u011frultusunda, AI bir sonraki \u00f6\u011frenece\u011fi konular\u0131 veya pratik yapaca\u011f\u0131 alanlar\u0131 \u00f6nerebilir.<\/li>\n<li><strong>Farkl\u0131 Materyal Sunumu<\/strong>: AI, bir konuyu farkl\u0131 \u015fekillerde a\u00e7\u0131klayabilir (metin, video ba\u011flant\u0131s\u0131, etkile\u015fimli sim\u00fclasyon) ve \u00f6\u011frencinin en iyi yan\u0131t verdi\u011fi format\u0131 belirleyerek gelecekte bu format\u0131 daha s\u0131k kullanabilir.<\/li>\n<\/ul>\n<p>Bu mekanizmalar\u0131 uygulamak i\u00e7in, AI'a kullan\u0131c\u0131 ge\u00e7mi\u015fini ve \u00f6\u011frenme hedeflerini i\u00e7eren daha zengin prompt'lar g\u00f6ndermeniz gerekecektir. AI, bu bilgilere dayanarak bir sonraki ad\u0131m\u0131 \u00f6nerecek veya uygun \u00f6\u011frenme materyalini se\u00e7ecektir. KendoReact, bu \u00f6nerileri bir <code>DropDownList<\/code> ile sunmak veya farkl\u0131 mod\u00fcllere ge\u00e7i\u015fi sa\u011flamak i\u00e7in kullan\u0131labilir.<\/p>\n<p>Ki\u015fiselle\u015ftirme ve geri bildirim d\u00f6ng\u00fcleri, \u00f6\u011frenme asistan\u0131n\u0131z\u0131 pasif bir ara\u00e7tan aktif bir mentora d\u00f6n\u00fc\u015ft\u00fcrerek, \u00f6\u011frenme deneyimini ger\u00e7ekten d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc hale getirir.<\/p>\n<h2>\u0130leri D\u00fczey Optimizasyonlar ve Entegrasyonlar: Performans\u0131 ve Fonksiyonelli\u011fi Nas\u0131l Art\u0131r\u0131rs\u0131n\u0131z?<\/h2>\n<p>\u00d6\u011frenme asistan\u0131m\u0131z\u0131n temel i\u015flevlerini olu\u015fturduk. Art\u0131k daha fazla kullan\u0131c\u0131y\u0131 etkileyecek ve daha zengin bir deneyim sunacak ileri d\u00fczey \u00f6zellikler ve optimizasyonlar eklemenin zaman\u0131 geldi. Bu b\u00f6l\u00fcmde, uygulaman\u0131z\u0131n performans\u0131n\u0131 nas\u0131l art\u0131rabilece\u011finizi, karma\u015f\u0131k durum y\u00f6netimini nas\u0131l ele alabilece\u011finizi ve AI destekli asistan\u0131n\u0131za sesli etkile\u015fim gibi modern yetenekleri nas\u0131l entegre edebilece\u011finizi inceleyece\u011fiz.<\/p>\n<h3>Performans \u0130pu\u00e7lar\u0131: Uygulaman\u0131z\u0131 Daha H\u0131zl\u0131 ve Ak\u0131c\u0131 Hale Getirme<\/h3>\n<p>B\u00fcy\u00fck ve veri yo\u011fun uygulamalarda performans kritik \u00f6neme sahiptir. KendoReact bile\u015fenleri optimize edilmi\u015ftir, ancak React uygulaman\u0131z\u0131n genel performans\u0131 i\u00e7in yapabilece\u011finiz ek \u015feyler vard\u0131r:<\/p>\n<ul>\n<li><strong>Lazy Loading (Tembel Y\u00fckleme)<\/strong>: Uygulaman\u0131zdaki t\u00fcm bile\u015fenleri ba\u015flang\u0131\u00e7ta y\u00fcklemek yerine, yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda y\u00fckleyin. React'in <code>React.lazy()<\/code> ve <code>Suspense<\/code> \u00f6zellikleri ile bunu kolayca yapabilirsiniz. \u00d6rne\u011fin, \u00f6\u011frenme asistan\u0131n\u0131zdaki quiz mod\u00fcl\u00fc yaln\u0131zca kullan\u0131c\u0131 \"Quiz\" mod\u00fcl\u00fcne t\u0131klad\u0131\u011f\u0131nda y\u00fcklenebilir.<\/li>\n<li><strong>Memoization<\/strong>: <code>React.memo()<\/code>, <code>useMemo()<\/code> ve <code>useCallback()<\/code> hook'lar\u0131n\u0131 kullanarak pahal\u0131 hesaplamalar\u0131n veya gereksiz yeniden render'lar\u0131n \u00f6n\u00fcne ge\u00e7ebilirsiniz. \u00d6zellikle b\u00fcy\u00fck KendoReact Grid'ler veya Chart'lar gibi veri yo\u011fun bile\u015fenlerde, verilerin de\u011fi\u015fmedi\u011fi s\u00fcrece yeniden render edilmesini engellemek performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/li>\n<li><strong>Sanal Listeleme (Virtualization)<\/strong>: E\u011fer sohbet ge\u00e7mi\u015finiz gibi \u00e7ok uzun listeleriniz varsa, KendoReact'in Grid bile\u015fenindeki sanal kayd\u0131rma (virtual scrolling) gibi \u00f6zelliklerini kullan\u0131n. Bu, ayn\u0131 anda sadece g\u00f6r\u00fcn\u00fcr \u00f6\u011feleri render ederek performans\u0131 optimize eder.<\/li>\n<li><strong>Gereksiz Yeniden Render'lardan Ka\u00e7\u0131nma<\/strong>: React Developer Tools gibi ara\u00e7larla gereksiz render'lar\u0131 tespit edebilir ve component'lerinizi daha verimli hale getirebilirsiniz.<\/li>\n<\/ul>\n<pre><code>\n    \/\/ Lazy Loading \u00d6rne\u011fi\n    import React, { lazy, Suspense } from 'react';\n\n    const QuizModule = lazy(() => import('.\/QuizModule'));\n\n    function App() {\n      const [showQuiz, setShowQuiz] = useState(false);\n\n      return (\n        <div>\n          <button onClick={() => setShowQuiz(!showQuiz)}>\n            {showQuiz ? 'Sohbete D\u00f6n' : 'Quiz Yap'}\n          <\/button>\n          <Suspense fallback={<div>Y\u00fckleniyor...<\/div>}>\n            {showQuiz ? <QuizModule \/> : <ChatInterface \/>}\n          <\/Suspense>\n        <\/div>\n      );\n    }\n    <\/pre>\n<p><\/code><\/p>\n<h3>State Y\u00f6netimi: Karma\u015f\u0131k Veri Ak\u0131\u015f\u0131n\u0131 Kontrol Etme<\/h3>\n<p>Uygulama b\u00fcy\u00fcd\u00fck\u00e7e, farkl\u0131 bile\u015fenler aras\u0131nda veri payla\u015f\u0131m\u0131 ve durumu y\u00f6netmek karma\u015f\u0131k hale gelebilir. React'in yerle\u015fik <code>useState<\/code> ve <code>useContext<\/code> hook'lar\u0131 yeterli olsa da, daha b\u00fcy\u00fck projeler i\u00e7in \u00f6zel state y\u00f6netim k\u00fct\u00fcphaneleri faydal\u0131 olabilir:<\/p>\n<ul>\n<li><strong>Redux \/ Redux Toolkit<\/strong>: B\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar i\u00e7in merkezi bir state depolama alan\u0131 sa\u011flar. Tahmin edilebilir bir veri ak\u0131\u015f\u0131 ve g\u00fc\u00e7l\u00fc hata ay\u0131klama ara\u00e7lar\u0131 sunar.<\/li>\n<li><strong>Context API (Yerel \u00c7\u00f6z\u00fcm)<\/strong>: Redux kadar g\u00fc\u00e7l\u00fc olmasa da, prop drilling'i (prop'lar\u0131 bir dizi bile\u015fenden a\u015fa\u011f\u0131ya do\u011fru ge\u00e7irme) \u00f6nlemek i\u00e7in React'in kendi Context API'\u0131n\u0131 kullanabilirsiniz. K\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli projeler i\u00e7in iyi bir se\u00e7enektir.<\/li>\n<li><strong>Zustand \/ Jotai<\/strong>: Daha basit ve hafif state y\u00f6netim \u00e7\u00f6z\u00fcmleri arayanlar i\u00e7in pop\u00fcler se\u00e7eneklerdir. Minimalist API'lar\u0131 ile h\u0131zl\u0131ca entegre edilebilirler.<\/li>\n<\/ul>\n<p>AI'dan gelen kullan\u0131c\u0131 ge\u00e7mi\u015fi, profil bilgileri, quiz sonu\u00e7lar\u0131 gibi verileri merkezi bir state y\u00f6netim \u00e7\u00f6z\u00fcm\u00fcyle y\u00f6netmek, uygulaman\u0131z\u0131n daha \u00f6l\u00e7eklenebilir ve bak\u0131m\u0131 daha kolay olmas\u0131n\u0131 sa\u011flar.<\/p>\n<h3>Sesli Etkile\u015fim (Speech-to-Text, Text-to-Speech): Do\u011fal Bir \u00d6\u011frenme Deneyimi<\/h3>\n<p>\u00d6\u011frenme asistan\u0131n\u0131za sesli komutlar verme veya yan\u0131tlar\u0131 sesli olarak dinleme yetene\u011fi eklemek, kullan\u0131c\u0131 deneyimini zenginle\u015ftirir ve daha do\u011fal bir etkile\u015fim sa\u011flar. Taray\u0131c\u0131n\u0131n yerle\u015fik <code>SpeechRecognition<\/code> (konu\u015fmadan metne) ve <code>SpeechSynthesis<\/code> (metinden konu\u015fmaya) API'lar\u0131 veya harici servisler (Google Cloud Speech-to-Text, Amazon Polly) ile bu \u00f6zellikler entegre edilebilir.<\/p>\n<ul>\n<li><strong>Speech-to-Text (Sohbet giri\u015fine)<\/strong>: Kullan\u0131c\u0131, klavye kullanmak yerine mikrofonuna konu\u015farak asistan\u0131na soru sorabilir.<\/li>\n<li><strong>Text-to-Speech (AI yan\u0131tlar\u0131na)<\/strong>: Asistan, yaz\u0131l\u0131 yan\u0131tlar\u0131n\u0131 sesli olarak okuyarak \u00f6zellikle dil \u00f6\u011frenenler i\u00e7in telaffuz prati\u011fi sunabilir.<\/li>\n<\/ul>\n<pre><code>\n    \/\/ Basit bir Text-to-Speech \u00f6rne\u011fi\n    const speakText = (text) => {\n      if ('speechSynthesis' in window) {\n        const utterance = new SpeechSynthesisUtterance(text);\n        utterance.lang = 'tr-TR'; \/\/ Dil ayar\u0131\n        window.speechSynthesis.speak(utterance);\n      } else {\n        console.warn('Taray\u0131c\u0131n\u0131z SpeechSynthesis API\\'\u0131n\u0131 desteklemiyor.');\n      }\n    };\n\n    \/\/ AI yan\u0131t\u0131n\u0131 ald\u0131ktan sonra\n    \/\/ speakText(aiResponse);\n    <\/pre>\n<p><\/code><\/p>\n<h3>Di\u011fer API'larla Entegrasyonlar: Asistan\u0131n Yeteneklerini Geni\u015fletme<\/h3>\n<p>\u00d6\u011frenme asistan\u0131n\u0131z\u0131n yeteneklerini, di\u011fer web servisleriyle entegre olarak daha da geni\u015fletebilirsiniz:<\/p>\n<ul>\n<li><strong>S\u00f6zl\u00fck API'lar\u0131<\/strong>: Kelime anlamlar\u0131, \u00f6rnek c\u00fcmleler ve etimolojiler i\u00e7in.<\/li>\n<li><strong>G\u00f6rsel Arama API'lar\u0131<\/strong>: Kavramlar\u0131 g\u00f6rsel olarak a\u00e7\u0131klamak i\u00e7in ilgili resimler bulma.<\/li>\n<li><strong>\u00c7eviri API'lar\u0131<\/strong>: Farkl\u0131 diller aras\u0131nda an\u0131nda \u00e7eviri yapma.<\/li>\n<li><strong>Video\/E\u011fitim Kayna\u011f\u0131 API'lar\u0131<\/strong>: Belirli konularla ilgili e\u011fitim videolar\u0131 veya makaleler \u00f6nerme.<\/li>\n<\/ul>\n<p>KendoReact'in <code>AutoComplete<\/code> veya <code>MultiSelect<\/code> bile\u015fenlerini bu harici API'lardan gelen verileri kullan\u0131c\u0131ya sunmak i\u00e7in kullanabilirsiniz.<\/p>\n<h3>G\u00fcvenlik ve \u00d6l\u00e7eklenebilirlik Hususlar\u0131<\/h3>\n<p>Bir uygulamay\u0131 ileri seviyeye ta\u015f\u0131rken g\u00fcvenlik ve \u00f6l\u00e7eklenebilirlik vazge\u00e7ilmezdir:<\/p>\n<ul>\n<li><strong>API Anahtar\u0131 G\u00fcvenli\u011fi<\/strong>: Asla istemci taraf\u0131nda do\u011frudan a\u00e7\u0131k\u00e7a API anahtarlar\u0131 kullanmay\u0131n. Bir proxy sunucusu veya sunucusuz fonksiyonlar (serverless functions) arac\u0131l\u0131\u011f\u0131yla AI API'lar\u0131na eri\u015fin.<\/li>\n<li><strong>Veri G\u00fcvenli\u011fi ve Gizlili\u011fi<\/strong>: Kullan\u0131c\u0131 verilerini toplarken ve depolarken GDPR veya KVKK gibi veri gizlili\u011fi d\u00fczenlemelerine uyun. Hassas verileri \u015fifreleyin.<\/li>\n<li><strong>\u00d6l\u00e7eklenebilir Altyap\u0131<\/strong>: Uygulaman\u0131z\u0131 bulut servislerinde (AWS, Azure, Google Cloud) da\u011f\u0131tarak artan kullan\u0131c\u0131 y\u00fck\u00fcne dayan\u0131kl\u0131 hale getirin. React ve KendoReact'in do\u011fas\u0131 gere\u011fi zaten \u00f6l\u00e7eklenebilir frontend yap\u0131lar\u0131 olu\u015fturmaya elveri\u015flidir.<\/li>\n<\/ul>\n<p>Bu ileri d\u00fczey optimizasyonlar ve entegrasyonlar, \u00f6\u011frenme asistan\u0131n\u0131z\u0131 sekt\u00f6rdeki en iyi uygulamalarla donatacak ve kullan\u0131c\u0131lara \u00fcst d\u00fczey bir \u00f6\u011frenme deneyimi sunacakt\u0131r.<\/p>\n<h2>Sonu\u00e7: Gelece\u011fin \u00d6\u011frenme Deneyimi Burada!<\/h2>\n<p>Bu makale boyunca, KendoReact'in g\u00fc\u00e7l\u00fc UI bile\u015fenlerini modern yapay zeka modelleriyle birle\u015ftirerek nas\u0131l etkile\u015fimli ve ki\u015fiselle\u015ftirilmi\u015f bir \u00f6\u011frenme asistan\u0131 olu\u015fturabilece\u011fimizi detayl\u0131 bir \u015fekilde inceledik. React ile sa\u011flam bir \u00f6n u\u00e7 iskeleti kurmaktan, KendoReact ile zengin ve duyarl\u0131 bir kullan\u0131c\u0131 aray\u00fcz\u00fc geli\u015ftirmeye, OpenAI API'\u0131 ile asistan\u0131m\u0131za zeka katmaya ve son olarak uygulaman\u0131n performans\u0131n\u0131 ve yeteneklerini ileri d\u00fczey optimizasyonlarla nas\u0131l art\u0131raca\u011f\u0131m\u0131za kadar bir\u00e7ok konuya de\u011findik.<\/p>\n<p>AI destekli \u00f6\u011frenme asistanlar\u0131, geleneksel e\u011fitimdeki bo\u015fluklar\u0131 doldurarak her \u00f6\u011frencinin bireysel ihtiya\u00e7lar\u0131na g\u00f6re uyarlanm\u0131\u015f, dinamik ve ilgi \u00e7ekici bir \u00f6\u011frenme yolu sunma potansiyeline sahiptir. Bu asistanlar, sadece bilgi aktarmakla kalmaz, ayn\u0131 zamanda \u00f6\u011frencilerin motivasyonunu art\u0131r\u0131r, zay\u0131f y\u00f6nlerini belirleyerek onlara \u00f6zel destek sa\u011flar ve \u00f6\u011frenme s\u00fcre\u00e7lerini daha verimli hale getirir. KendoReact gibi kapsaml\u0131 UI k\u00fct\u00fcphaneleri, geli\u015ftiricilere bu karma\u015f\u0131k sistemler i\u00e7in profesyonel ve eri\u015filebilir aray\u00fczler olu\u015fturma konusunda b\u00fcy\u00fck kolayl\u0131klar sunar, b\u00f6ylece geli\u015ftiriciler daha \u00e7ok i\u015f mant\u0131\u011f\u0131na ve AI entegrasyonuna odaklanabilir.<\/p>\n<p>Gelecekte, yapay zekan\u0131n \u00f6\u011frenme alan\u0131ndaki rol\u00fc daha da b\u00fcy\u00fcyecek. Sesli asistanlarla daha do\u011fal etkile\u015fimler, sanal ve art\u0131r\u0131lm\u0131\u015f ger\u00e7eklik (VR\/AR) entegrasyonlar\u0131yla s\u00fcr\u00fckleyici \u00f6\u011frenme ortamlar\u0131 ve daha geli\u015fmi\u015f duygu analiziyle ki\u015fiselle\u015ftirilmi\u015f duygusal destek gibi yenilikler bizi bekliyor. Kendi AI destekli \u00f6\u011frenme asistan\u0131n\u0131z\u0131 in\u015fa etmek, sadece teknolojik bir ba\u015far\u0131 de\u011fil, ayn\u0131 zamanda e\u011fitimin gelece\u011fine yap\u0131lan de\u011ferli bir yat\u0131r\u0131md\u0131r. Bu rehberdeki bilgileri kullanarak, siz de \u00f6\u011frenme deneyimini d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in ilk ad\u0131m\u0131n\u0131z\u0131 atabilirsiniz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<p><strong>1. KendoReact kullanmak \u00fccretli midir?<\/strong><\/p>\n<p>Evet, KendoReact ticari bir k\u00fct\u00fcphanedir ve geli\u015ftirme ile \u00fcretim ortamlar\u0131nda kullanmak i\u00e7in lisans sat\u0131n alman\u0131z gerekmektedir. Ancak genellikle deneme s\u00fcr\u00fcmleri sunulur ve a\u00e7\u0131k kaynak projelerde veya \u00f6\u011frenme ama\u00e7l\u0131 kullan\u0131mlarda belirli k\u0131s\u0131tlamalarla denenebilir.<\/p>\n<p><strong>2. OpenAI API'\u0131 yerine ba\u015fka bir AI servisi kullanabilir miyim?<\/strong><\/p>\n<p>Kesinlikle! Google Gemini, Hugging Face API'lar\u0131, Azure AI Services veya kendi \u00f6zel makine \u00f6\u011frenimi modellerinizi bir API arac\u0131l\u0131\u011f\u0131yla entegre edebilirsiniz. Entegrasyon ad\u0131mlar\u0131 servisler aras\u0131nda farkl\u0131l\u0131k g\u00f6sterse de, temel mant\u0131k (HTTP iste\u011fi g\u00f6nderme, yan\u0131t\u0131 i\u015fleme) benzer olacakt\u0131r.<\/p>\n<p><strong>3. Mobil uygulama olarak da yay\u0131nlayabilir miyim?<\/strong><\/p>\n<p>Evet, React Native veya Capacitor\/Ionic gibi framework'ler kullanarak mevcut React kod taban\u0131n\u0131z\u0131 mobil uygulamalara d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz. KendoReact'in duyarl\u0131 bile\u015fenleri, mobil cihazlarda da iyi bir g\u00f6r\u00fcn\u00fcm ve his sa\u011flamaya yard\u0131mc\u0131 olacakt\u0131r. Ancak, KendoReact do\u011frudan React Native i\u00e7in tasarlanmam\u0131\u015ft\u0131r, bu durumda \u00f6zel mobil UI bile\u015fenleri kullanman\u0131z gerekebilir.<\/p>\n<p><strong>4. Uygulamam\u0131n g\u00fcvenli\u011fini nas\u0131l sa\u011flar\u0131m?<\/strong><\/p>\n<p>API anahtarlar\u0131n\u0131z\u0131 do\u011frudan istemci taraf\u0131nda tutmaktan ka\u00e7\u0131n\u0131n; bunlar\u0131 bir arka u\u00e7 sunucusu veya sunucusuz bir i\u015flev (serverless function) arac\u0131l\u0131\u011f\u0131yla proxy edin. Kullan\u0131c\u0131 verilerini \u015fifreleyin ve veri gizlili\u011fi d\u00fczenlemelerine (GDPR, KVKK) uyun. Uygulaman\u0131z\u0131 da\u011f\u0131tmadan \u00f6nce g\u00fcvenlik a\u00e7\u0131klar\u0131 i\u00e7in d\u00fczenli taramalar yap\u0131n.<\/p>\n<p><strong>5. Bu asistan\u0131 farkl\u0131 dillerde de \u00e7al\u0131\u015ft\u0131rabilir miyim?<\/strong><\/p>\n<p>Evet, \u00e7o\u011fu modern AI modeli \u00e7ok dilli deste\u011fe sahiptir. OpenAI API'\u0131na g\u00f6nderdi\u011finiz prompt'larda veya modelin ayarlamalar\u0131nda hedef dili belirterek asistan\u0131n\u0131z\u0131n farkl\u0131 dillerde yan\u0131t vermesini sa\u011flayabilirsiniz. KendoReact'in uluslararas\u0131la\u015ft\u0131rma (i18n) \u00f6zellikleri de uygulaman\u0131z\u0131n UI's\u0131n\u0131 farkl\u0131 dillere adapte etmenize yard\u0131mc\u0131 olur.<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"KendoReact ile yapay zeka destekli bir \u00f6\u011frenme asistan\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu rehber, modern web teknolojileri ve AI&hellip;","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":[128],"tags":[],"class_list":{"0":"post-30443","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>KendoReact ile AI Destekli \u00d6\u011frenme Asistan\u0131 Nas\u0131l Geli\u015ftirilir?<\/title>\n<meta name=\"description\" content=\"KendoReact ile yapay zeka destekli bir \u00f6\u011frenme asistan\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu rehber, modern web teknolojileri ve AI modellerini kullanarak interaktif bir \u00f6\u011frenme yolda\u015f\u0131 olu\u015fturman\u0131z i\u00e7in ad\u0131m ad\u0131m bilgiler sunuyor.\" \/>\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\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"KendoReact ile AI Destekli \u00d6\u011frenme Asistan\u0131 Nas\u0131l Geli\u015ftirilir?\" \/>\n<meta property=\"og:description\" content=\"KendoReact ile yapay zeka destekli bir \u00f6\u011frenme asistan\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu rehber, modern web teknolojileri ve AI modellerini kullanarak interaktif bir \u00f6\u011frenme yolda\u015f\u0131 olu\u015fturman\u0131z i\u00e7in ad\u0131m ad\u0131m bilgiler sunuyor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-27T20:31:41+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\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"KendoReact ile AI Destekli \u00d6\u011frenme Asistan\u0131 Nas\u0131l Geli\u015ftirilir?\",\"datePublished\":\"2025-09-27T20:31:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/\"},\"wordCount\":5245,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/\",\"name\":\"KendoReact ile AI Destekli \u00d6\u011frenme Asistan\u0131 Nas\u0131l Geli\u015ftirilir?\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-09-27T20:31:41+00:00\",\"description\":\"KendoReact ile yapay zeka destekli bir \u00f6\u011frenme asistan\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu rehber, modern web teknolojileri ve AI modellerini kullanarak interaktif bir \u00f6\u011frenme yolda\u015f\u0131 olu\u015fturman\u0131z i\u00e7in ad\u0131m ad\u0131m bilgiler sunuyor.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"KendoReact ile AI Destekli \u00d6\u011frenme Asistan\u0131 Nas\u0131l Geli\u015ftirilir?\"}]},{\"@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":"KendoReact ile AI Destekli \u00d6\u011frenme Asistan\u0131 Nas\u0131l Geli\u015ftirilir?","description":"KendoReact ile yapay zeka destekli bir \u00f6\u011frenme asistan\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu rehber, modern web teknolojileri ve AI modellerini kullanarak interaktif bir \u00f6\u011frenme yolda\u015f\u0131 olu\u015fturman\u0131z i\u00e7in ad\u0131m ad\u0131m bilgiler sunuyor.","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\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/","og_locale":"tr_TR","og_type":"article","og_title":"KendoReact ile AI Destekli \u00d6\u011frenme Asistan\u0131 Nas\u0131l Geli\u015ftirilir?","og_description":"KendoReact ile yapay zeka destekli bir \u00f6\u011frenme asistan\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu rehber, modern web teknolojileri ve AI modellerini kullanarak interaktif bir \u00f6\u011frenme yolda\u015f\u0131 olu\u015fturman\u0131z i\u00e7in ad\u0131m ad\u0131m bilgiler sunuyor.","og_url":"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-09-27T20:31:41+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\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"KendoReact ile AI Destekli \u00d6\u011frenme Asistan\u0131 Nas\u0131l Geli\u015ftirilir?","datePublished":"2025-09-27T20:31:41+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/"},"wordCount":5245,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/","url":"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/","name":"KendoReact ile AI Destekli \u00d6\u011frenme Asistan\u0131 Nas\u0131l Geli\u015ftirilir?","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-09-27T20:31:41+00:00","description":"KendoReact ile yapay zeka destekli bir \u00f6\u011frenme asistan\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu rehber, modern web teknolojileri ve AI modellerini kullanarak interaktif bir \u00f6\u011frenme yolda\u015f\u0131 olu\u015fturman\u0131z i\u00e7in ad\u0131m ad\u0131m bilgiler sunuyor.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/kendoreact-ile-ai-destekli-ogrenme-asistani-nasil-gelistirilir\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"KendoReact ile AI Destekli \u00d6\u011frenme Asistan\u0131 Nas\u0131l Geli\u015ftirilir?"}]},{"@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\/30443","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=30443"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30443\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}