{"id":32462,"date":"2025-10-22T03:31:36","date_gmt":"2025-10-22T00:31:36","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/"},"modified":"2025-10-22T03:31:36","modified_gmt":"2025-10-22T00:31:36","slug":"javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/","title":{"rendered":"JavaScript ve Mock API ile \u0130nteraktif \u00dcr\u00fcn Arama Uygulamas\u0131"},"content":{"rendered":"

<\/p>\n

G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda kullan\u0131c\u0131lar, arad\u0131klar\u0131 bilgilere veya \u00fcr\u00fcnlere an\u0131nda ula\u015fmak ister. Bu beklenti, \u00f6zellikle e-ticaret siteleri ve i\u00e7erik platformlar\u0131 i\u00e7in interaktif arama uygulamalar\u0131n\u0131 vazge\u00e7ilmez k\u0131l\u0131yor. Peki, modern web geli\u015ftirme teknikleriyle, \u00f6zellikle JavaScript ve bir Mock API kullanarak, h\u0131zl\u0131 ve etkili bir \u00fcr\u00fcn arama uygulamas\u0131n\u0131 nas\u0131l hayata ge\u00e7irebiliriz? Bu makalede, bu sorunun cevab\u0131n\u0131 ad\u0131m ad\u0131m, pratik \u00f6rnekler ve ileri d\u00fczey ipu\u00e7lar\u0131yla ke\u015ffedece\u011fiz. Kullan\u0131c\u0131 dostu arama deneyimleri tasarlamak art\u0131k \u00e7ok daha kolay!<\/p>\n

G\u00fcn\u00fcm\u00fcz\u00fcn rekabet\u00e7i dijital pazar\u0131nda, kullan\u0131c\u0131 deneyimi (UX) bir uygulaman\u0131n veya web sitesinin ba\u015far\u0131s\u0131nda kritik bir rol oynamaktad\u0131r. Kullan\u0131c\u0131lar, web sitelerinde gezinirken sezgisel, h\u0131zl\u0131 ve verimli bir deneyim beklerler. \u00d6zellikle \u00fcr\u00fcn veya bilgi aray\u0131\u015f\u0131nda olduklar\u0131nda, karma\u015f\u0131k men\u00fcler aras\u0131nda kaybolmak veya yava\u015f yan\u0131t veren bir arama motoruyla kar\u015f\u0131la\u015fmak, hayal k\u0131r\u0131kl\u0131\u011f\u0131na ve potansiyel m\u00fc\u015fteri kayb\u0131na yol a\u00e7abilir. \u0130\u015fte tam da bu noktada, JavaScript ve bir Mock API kullanarak geli\u015ftirece\u011fimiz interaktif \u00fcr\u00fcn arama uygulamalar\u0131 devreye girer. Bu t\u00fcr uygulamalar, kullan\u0131c\u0131lar\u0131n ihtiya\u00e7 duydu\u011fu \u00fcr\u00fcnleri veya bilgileri an\u0131nda, dinamik ve kullan\u0131c\u0131 dostu bir aray\u00fczle bulmalar\u0131n\u0131 sa\u011flar.<\/p>\n

Peki, bir interaktif \u00fcr\u00fcn arama uygulamas\u0131n\u0131n temel faydalar\u0131 nelerdir? \u0130lk olarak, geli\u015ftirilmi\u015f kullan\u0131c\u0131 deneyimi<\/strong> sunar. Kullan\u0131c\u0131lar arama \u00e7ubu\u011funa yazd\u0131klar\u0131 her harf veya se\u00e7tikleri her filtre ile sonu\u00e7lar\u0131 an\u0131nda g\u00fcncellenmi\u015f olarak g\u00f6rd\u00fcklerinde, uygulaman\u0131n onlarla etkile\u015fime girdi\u011fini hissederler. Bu, web sitesinde ge\u00e7irilen s\u00fcreyi art\u0131r\u0131r ve kullan\u0131c\u0131 memnuniyetini y\u00fckseltir. \u0130kinci olarak, art\u0131r\u0131lm\u0131\u015f d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131<\/strong> sa\u011flar. Kullan\u0131c\u0131lar arad\u0131klar\u0131 \u00fcr\u00fcn\u00fc kolayca bulduklar\u0131nda, sat\u0131n alma veya hedeflenen eylemi ger\u00e7ekle\u015ftirme olas\u0131l\u0131klar\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde artar. H\u0131zl\u0131 ve do\u011fru arama sonu\u00e7lar\u0131, karars\u0131z m\u00fc\u015fterileri bile harekete ge\u00e7irebilir. \u00dc\u00e7\u00fcnc\u00fc olarak, verimlilik ve eri\u015filebilirlik<\/strong> a\u00e7\u0131s\u0131ndan avantajlar sunar. Geleneksel sayfa yenilemeli arama y\u00f6ntemlerine k\u0131yasla, JavaScript tabanl\u0131 \u00e7\u00f6z\u00fcmler sadece gerekli veriyi \u00e7ekerek a\u011f trafi\u011fini azalt\u0131r ve performans\u0131 art\u0131r\u0131r. Ayr\u0131ca, do\u011fru yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131nda, bu uygulamalar engelli kullan\u0131c\u0131lar i\u00e7in de daha eri\u015filebilir bir deneyim sunabilir.<\/p>\n

Bir e-ticaret sitesini d\u00fc\u015f\u00fcnelim: M\u00fc\u015fterileriniz y\u00fczlerce farkl\u0131 \u00fcr\u00fcn\u00fc bar\u0131nd\u0131ran bir katalog i\u00e7inde spesifik bir kulakl\u0131k modeli veya belirli bir bedende elbise ar\u0131yor olabilirler. E\u011fer arama \u00e7ubu\u011funa “kablosuz kulakl\u0131k” yazd\u0131klar\u0131nda sonu\u00e7lar an\u0131nda listelenmiyorsa ve sayfan\u0131n her seferinde tamamen yenilenmesi gerekiyorsa, sab\u0131rlar\u0131 \u00e7abucak t\u00fckenebilir. Ancak interaktif bir arama uygulamas\u0131yla, “kablosuz” yazd\u0131klar\u0131 anda ilgili \u00fcr\u00fcnler belirmeye ba\u015flar ve “kulakl\u0131k” kelimesi tamamland\u0131\u011f\u0131nda daha da spesifik sonu\u00e7lar g\u00f6sterilir. Kategori, fiyat aral\u0131\u011f\u0131 veya marka gibi filtreler eklediklerinde de liste saniyeler i\u00e7inde g\u00fcncellenir. Bu, hem zamandan tasarruf ettirir hem de kullan\u0131c\u0131ya “arad\u0131\u011f\u0131m\u0131 buldum” hissini verir. Bu makale boyunca, i\u015fte bu dinamik ve verimli deneyimi ad\u0131m ad\u0131m nas\u0131l in\u015fa edece\u011fimizi \u00f6\u011frenece\u011fiz. S\u0131f\u0131rdan ba\u015flayarak, temel JavaScript, DOM manip\u00fclasyonu ve Mock API kullan\u0131m\u0131yla kendi interaktif \u00fcr\u00fcn arama uygulaman\u0131z\u0131 geli\u015ftireceksiniz. B\u00f6ylece, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n dijital platformunuzda ge\u00e7irdikleri zaman\u0131 daha keyifli ve verimli hale getireceksiniz.<\/p>\n

Temel Kavramlar ve Ortam Haz\u0131rl\u0131\u011f\u0131: JavaScript, DOM ve Mock API \u0130le Tan\u0131\u015f\u0131n<\/h2>\n

\u0130nteraktif bir \u00fcr\u00fcn arama uygulamas\u0131 olu\u015fturmak i\u00e7in temel web teknolojileri olan JavaScript, HTML DOM ve bir Mock API hakk\u0131nda sa\u011flam bir anlay\u0131\u015fa sahip olmam\u0131z gerekiyor. Bu b\u00f6l\u00fcmde, bu temel kavramlar\u0131 detayl\u0131ca inceleyecek ve geli\u015ftirme ortam\u0131m\u0131z\u0131 nas\u0131l haz\u0131rlayaca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m ele alaca\u011f\u0131z.<\/p>\n

JavaScript’in G\u00fcc\u00fc ve Rol\u00fc: Web’i Canland\u0131ran Dil<\/h3>\n

JavaScript, web sayfalar\u0131na etkile\u015fim ve dinamizm kazand\u0131ran bir programlama dilidir. Ba\u015flang\u0131\u00e7ta sadece taray\u0131c\u0131 taraf\u0131nda (client-side) \u00e7al\u0131\u015fmak \u00fczere tasarlanm\u0131\u015f olsa da, Node.js gibi teknolojiler sayesinde g\u00fcn\u00fcm\u00fczde sunucu taraf\u0131nda (server-side) da yayg\u0131n olarak kullan\u0131lmaktad\u0131r. Bizim uygulamam\u0131zda JavaScript, kullan\u0131c\u0131n\u0131n arama \u00e7ubu\u011funa yazd\u0131\u011f\u0131 metni alg\u0131layacak, bir veri kayna\u011f\u0131ndan \u00fcr\u00fcn bilgilerini \u00e7ekecek, bu bilgileri i\u015fleyecek ve web sayfas\u0131n\u0131n i\u00e7eri\u011fini dinamik olarak g\u00fcncelleyecektir. Yani, kullan\u0131c\u0131 arama yapt\u0131k\u00e7a sayfan\u0131n yeniden y\u00fcklenmesine gerek kalmadan sonu\u00e7lar\u0131 ekranda g\u00f6sterecek olan beynimiz JavaScript olacakt\u0131r. Modern JavaScript (ES6+), mod\u00fcler yap\u0131s\u0131, async\/await gibi asenkron programlama yetenekleri ve daha temiz s\u00f6zdizimi ile geli\u015ftirme s\u00fcre\u00e7lerini olduk\u00e7a kolayla\u015ft\u0131rm\u0131\u015ft\u0131r.<\/p>\n

HTML DOM: Web Sayfalar\u0131n\u0131n Yap\u0131 Ta\u015f\u0131<\/h3>\n

Document Object Model (DOM), HTML ve XML belgeleri i\u00e7in bir programlama aray\u00fcz\u00fcd\u00fcr. Bir web sayfas\u0131n\u0131 mant\u0131ksal bir a\u011fa\u00e7 yap\u0131s\u0131 olarak temsil eder ve JavaScript’in bu a\u011fa\u00e7taki \u00f6\u011felere (elementlere) eri\u015fmesine ve onlar\u0131 de\u011fi\u015ftirmesine olanak tan\u0131r. Uygulamam\u0131zda, arama sonu\u00e7lar\u0131n\u0131 g\u00f6sterece\u011fimiz bir HTML div<\/code> elementine sahip olaca\u011f\u0131z. JavaScript, Mock API’den ald\u0131\u011f\u0131 \u00fcr\u00fcn verilerini kullanarak bu div<\/code> i\u00e7erisine yeni HTML elementleri (\u00f6rne\u011fin, her \u00fcr\u00fcn i\u00e7in bir kart) olu\u015fturacak ve bunlar\u0131 DOM’a ekleyecektir. Bu sayede, arama sonu\u00e7lar\u0131 dinamik olarak g\u00fcncellenmi\u015f olacak. \u00d6rne\u011fin, document.getElementById()<\/code>, document.querySelector()<\/code>, element.innerHTML<\/code>, element.appendChild()<\/code> gibi DOM manip\u00fclasyon metotlar\u0131n\u0131 s\u0131k\u00e7a kullanaca\u011f\u0131z.<\/p>\n

Mock API Nedir ve Neden Kullan\u0131r\u0131z?<\/h3>\n

Bir Mock API, ger\u00e7ek bir backend sunucusu haz\u0131r olana kadar veya test\/prototipleme ama\u00e7lar\u0131 i\u00e7in kullan\u0131lan sahte bir API’dir. Geli\u015ftirme s\u00fcrecinde ger\u00e7ek bir backend’in kurulmas\u0131n\u0131 beklemek yerine, Mock API ile h\u0131zl\u0131ca bir veri kayna\u011f\u0131 olu\u015fturabilir ve frontend geli\u015ftirmemize odaklanabiliriz. Bu, zaman kazand\u0131r\u0131r ve geli\u015ftirme h\u0131z\u0131n\u0131 art\u0131r\u0131r. Bizim senaryomuzda, \u00fcr\u00fcn verilerimizi i\u00e7eren basit bir JSON dosyas\u0131n\u0131 Mock API olarak kullanaca\u011f\u0131z. Bu verileri web sunucusu \u00fczerinden sunmak i\u00e7in basit bir ara\u00e7 olan JSON Server’\u0131 tercih edebiliriz, ya da daha basit bir ba\u015flang\u0131\u00e7 i\u00e7in sadece bir db.json<\/code> dosyas\u0131 olu\u015fturup bunu do\u011frudan fetch<\/code> API ile yerel olarak okuyabiliriz. Her iki durumda da, temel ama\u00e7 ayn\u0131d\u0131r: uygulaman\u0131n veri ihtiyac\u0131n\u0131 kar\u015f\u0131lamak.<\/p>\n

JSON Server Kurulumu ve Basit Bir Veri Yap\u0131s\u0131:<\/h4>\n

E\u011fer Mock API olarak JSON Server kullanmak isterseniz, terminalinizde \u015fu komutlar\u0131 \u00e7al\u0131\u015ft\u0131rarak kurulum yapabilirsiniz:<\/p>\n

\nnpm install -g json-server\n<\/pre>\n
<\/code><\/p>\n
Daha sonra projenizin ana dizininde db.json<\/code> ad\u0131nda bir dosya olu\u015fturup i\u00e7ine \u00f6rnek \u00fcr\u00fcn verilerini ekleyebilirsiniz. \u0130\u015fte basit bir db.json<\/code> \u00f6rne\u011fi:<\/p>\n
\n{\n  \"products\": [\n    {\n      \"id\": 1,\n      \"name\": \"Kablosuz Kulakl\u0131k\",\n      \"category\": \"Elektronik\",\n      \"price\": 1200,\n      \"image\": \"images\/kulaklik.jpg\",\n      \"description\": \"Y\u00fcksek ses kalitesi ve uzun pil \u00f6mr\u00fc sunan kablosuz kulakl\u0131k.\"\n    },\n    {\n      \"id\": 2,\n      \"name\": \"Ak\u0131ll\u0131 Saat\",\n      \"category\": \"Elektronik\",\n      \"price\": 2500,\n      \"image\": \"images\/saat.jpg\",\n      \"description\": \"Sa\u011fl\u0131k takibi ve bildirim \u00f6zellikleri ile modern ak\u0131ll\u0131 saat.\"\n    },\n    {\n      \"id\": 3,\n      \"name\": \"Deri Ceket\",\n      \"category\": \"Giyim\",\n      \"price\": 1800,\n      \"image\": \"images\/ceket.jpg\",\n      \"description\": \"\u015e\u0131k ve dayan\u0131kl\u0131 ger\u00e7ek deri ceket.\"\n    },\n    {\n      \"id\": 4,\n      \"name\": \"Masa\u00fcst\u00fc Bilgisayar\",\n      \"category\": \"Elektronik\",\n      \"price\": 15000,\n      \"image\": \"images\/bilgisayar.jpg\",\n      \"description\": \"Y\u00fcksek performansl\u0131 oyun ve i\u015f bilgisayar\u0131.\"\n    },\n    {\n      \"id\": 5,\n      \"name\": \"Keten Pantolon\",\n      \"category\": \"Giyim\",\n      \"price\": 450,\n      \"image\": \"images\/pantolon.jpg\",\n      \"description\": \"Yazl\u0131k ve rahat keten pantolon.\"\n    }\n  ]\n}\n<\/pre>\n
<\/code><\/p>\n
Bu db.json<\/code> dosyas\u0131n\u0131 JSON Server ile \u00e7al\u0131\u015ft\u0131rmak i\u00e7in ise \u015fu komutu kullanman\u0131z yeterlidir:<\/p>\n
\njson-server --watch db.json --port 3000\n<\/pre>\n
<\/code><\/p>\n
Bu komut, products<\/code> verilerinize http:\/\/localhost:3000\/products<\/code> adresinden eri\u015fmenizi sa\u011flayacak bir REST API olu\u015fturur. Frontend uygulaman\u0131z bu adrese istek g\u00f6ndererek \u00fcr\u00fcn verilerini \u00e7ekebilecektir. B\u00f6ylece, ger\u00e7ek bir backend'i beklemeye gerek kalmadan veri ak\u0131\u015f\u0131n\u0131 sim\u00fcle etmi\u015f oluruz. Bu temel bile\u015fenlerle, interaktif arama uygulamam\u0131z\u0131n altyap\u0131s\u0131n\u0131 ba\u015far\u0131yla kurmu\u015f olaca\u011f\u0131z.<\/p>\n
Uygulama Geli\u015ftirmenin \u0130lk Ad\u0131mlar\u0131: HTML, CSS ve Veri \u00c7ekme<\/h2>\n
Art\u0131k temel kavramlar\u0131 anlad\u0131\u011f\u0131m\u0131za g\u00f6re, interaktif \u00fcr\u00fcn arama uygulamam\u0131z\u0131n iskeletini in\u015fa etmeye ba\u015flayabiliriz. Bu b\u00f6l\u00fcmde, uygulaman\u0131n temel HTML yap\u0131s\u0131n\u0131 olu\u015fturacak, mobil uyumlulu\u011fu g\u00f6z \u00f6n\u00fcnde bulundurarak baz\u0131 temel CSS stilleri ekleyecek ve JavaScript kullanarak Mock API'den \u00fcr\u00fcn verilerini nas\u0131l \u00e7ekece\u011fimizi ve sayfam\u0131zda nas\u0131l listeleyece\u011fimizi \u00f6\u011frenece\u011fiz.<\/p>\n
Temel HTML Yap\u0131s\u0131: Kullan\u0131c\u0131 Aray\u00fcz\u00fcn\u00fcn Omurgas\u0131<\/h3>\n
Uygulamam\u0131z\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) i\u00e7in basit ama i\u015flevsel bir HTML yap\u0131s\u0131 olu\u015fturaca\u011f\u0131z. Bu yap\u0131, bir arama \u00e7ubu\u011fu, kategori filtreleri (iste\u011fe ba\u011fl\u0131 ama faydal\u0131), \u00fcr\u00fcnlerin g\u00f6r\u00fcnt\u00fclenece\u011fi bir alan ve baz\u0131 temel bilgilendirme metinlerini i\u00e7erecektir. A\u015fa\u011f\u0131daki HTML kodunu index.html<\/code> ad\u0131nda bir dosyaya kaydedebilirsiniz:<\/p>\n
\n\n\n\n    \n    \n    \u0130nteraktif \u00dcr\u00fcn Arama<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n    <div class=\"container\">\n        <h1>\u00dcr\u00fcn Arama Uygulamas\u0131<\/h1>\n        <div class=\"search-area\">\n            <input type=\"text\" id=\"searchInput\" placeholder=\"\u00dcr\u00fcn ad\u0131 veya kategorisi ara...\">\n            <select id=\"categoryFilter\">\n                <option value=\"all\">T\u00fcm Kategoriler<\/option>\n                <!-- Kategoriler JS ile buraya eklenecek -->\n            <\/select>\n        <\/div>\n        <div class=\"product-list\" id=\"productList\">\n            <!-- \u00dcr\u00fcnler JS ile buraya eklenecek -->\n        <\/div>\n        <div id=\"noResults\" class=\"no-results\" style=\"display: none;\">\n            Arad\u0131\u011f\u0131n\u0131z kriterlere uygun \u00fcr\u00fcn bulunamad\u0131.\n        <\/div>\n    <\/div>\n    <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<\/pre>\n<p><\/code><\/p>\n<p>Bu yap\u0131da dikkat etmeniz gereken baz\u0131 \u00f6nemli noktalar var: <code>meta name=\"viewport\"<\/code> etiketi, mobil cihazlarda sayfan\u0131n do\u011fru \u00f6l\u00e7eklenmesini sa\u011flar ve mobil uyumlulu\u011fun temelidir. <code>searchInput<\/code> ve <code>categoryFilter<\/code> gibi ID'ler, JavaScript \u00fczerinden bu elementlere kolayca eri\u015febilmemizi sa\u011flayacak. <code>productList<\/code> ID'li <code>div<\/code> ise dinamik olarak \u00fcr\u00fcn kartlar\u0131m\u0131z\u0131 ekleyece\u011fimiz yer olacak. <code>noResults<\/code> div'i ise arama sonucu bulunamad\u0131\u011f\u0131nda kullan\u0131c\u0131ya bilgi vermek i\u00e7in kullan\u0131lacak.<\/p>\n<h3>Mobil Uyumlu CSS Stilleri: Tasar\u0131m\u0131 Her Ekrana Adapte Etmek<\/h3>\n<p>Kullan\u0131c\u0131lar\u0131n b\u00fcy\u00fck \u00e7o\u011funlu\u011funun mobil cihazlar \u00fczerinden internete eri\u015fti\u011fi g\u00fcn\u00fcm\u00fczde, web uygulamalar\u0131n\u0131n mobil uyumlu olmas\u0131 elzemdir. CSS kullanarak bu uygulamam\u0131za temel bir g\u00f6r\u00fcn\u00fcm kazand\u0131racak ve <code>flexbox<\/code> ile <code>media query<\/code> kullanarak farkl\u0131 ekran boyutlar\u0131na uyum sa\u011flamas\u0131n\u0131 sa\u011flayaca\u011f\u0131z. <code>style.css<\/code> ad\u0131nda bir dosya olu\u015fturup a\u015fa\u011f\u0131daki stilleri ekleyebilirsiniz:<\/p>\n<pre><code class=\"language-css\">\n\/* Temel S\u0131f\u0131rlamalar ve Yaz\u0131 Tipi *\/\nbody {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    margin: 0;\n    padding: 20px;\n    background-color: #f4f7f6;\n    color: #333;\n    line-height: 1.6;\n}\n\n.container {\n    max-width: 1200px;\n    margin: 20px auto;\n    padding: 25px;\n    background-color: #ffffff;\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n\nh1 {\n    text-align: center;\n    color: #2c3e50;\n    margin-bottom: 30px;\n    font-size: 2.5em;\n}\n\n\/* Arama ve Filtre Alan\u0131 *\/\n.search-area {\n    display: flex;\n    gap: 15px; \/* Elemanlar aras\u0131 bo\u015fluk *\/\n    margin-bottom: 30px;\n    flex-wrap: wrap; \/* K\u00fc\u00e7\u00fck ekranlarda alt alta gelmesi i\u00e7in *\/\n    justify-content: center;\n}\n\n#searchInput, #categoryFilter {\n    padding: 12px 18px;\n    border: 1px solid #ddd;\n    border-radius: 6px;\n    font-size: 1em;\n    flex: 1; \/* Esnekli\u011fi sayesinde geni\u015flemesini sa\u011flar *\/\n    min-width: 200px; \/* Minimum geni\u015flik *\/\n    max-width: 400px;\n}\n\n#searchInput:focus, #categoryFilter:focus {\n    border-color: #007bff;\n    outline: none;\n    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);\n}\n\n\/* \u00dcr\u00fcn Listesi *\/\n.product-list {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); \/* Esnek s\u00fctunlar *\/\n    gap: 25px;\n}\n\n\/* \u00dcr\u00fcn Kart\u0131 Stilleri *\/\n.product-card {\n    background-color: #ffffff;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    overflow: hidden;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\n    transition: transform 0.2s ease-in-out;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n\n.product-card:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);\n}\n\n.product-card img {\n    width: 100%;\n    height: 200px;\n    object-fit: cover;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.product-info {\n    padding: 15px;\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n}\n\n.product-info h3 {\n    margin-top: 0;\n    margin-bottom: 10px;\n    color: #34495e;\n    font-size: 1.3em;\n}\n\n.product-info p {\n    margin-bottom: 5px;\n    color: #666;\n    font-size: 0.95em;\n}\n\n.product-info .category {\n    font-weight: bold;\n    color: #007bff;\n}\n\n.product-info .price {\n    font-size: 1.4em;\n    font-weight: bold;\n    color: #28a745;\n    margin-top: auto; \/* Fiyat\u0131 alta hizalar *\/\n}\n\n\/* Sonu\u00e7 Bulunamad\u0131 Mesaj\u0131 *\/\n.no-results {\n    text-align: center;\n    color: #777;\n    font-size: 1.2em;\n    padding: 40px;\n    background-color: #f8d7da;\n    border: 1px solid #f5c6cb;\n    border-radius: 8px;\n    margin-top: 30px;\n}\n\n\/* Mobil Uyumlu Tasar\u0131m \u0130\u00e7in Media Query *\/\n@media (max-width: 768px) {\n    .container {\n        padding: 15px;\n        margin: 10px auto;\n    }\n\n    h1 {\n        font-size: 2em;\n        margin-bottom: 20px;\n    }\n\n    .search-area {\n        flex-direction: column; \/* K\u00fc\u00e7\u00fck ekranlarda alt alta *\/\n        gap: 10px;\n    }\n\n    #searchInput, #categoryFilter {\n        max-width: none; \/* Tam geni\u015flik kaplamas\u0131 i\u00e7in *\/\n    }\n\n    .product-list {\n        grid-template-columns: 1fr; \/* Tek s\u00fctunlu d\u00fczen *\/\n        gap: 15px;\n    }\n\n    .product-card img {\n        height: 180px;\n    }\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu CSS kodunda <code>display: grid<\/code> ve <code>repeat(auto-fill, minmax(280px, 1fr))<\/code> kullanarak \u00fcr\u00fcn kartlar\u0131n\u0131n ekran geni\u015fli\u011fine g\u00f6re otomatik olarak yerle\u015fmesini sa\u011flad\u0131k. Ayr\u0131ca, <code>@media (max-width: 768px)<\/code> kural\u0131yla mobil cihazlar i\u00e7in \u00f6zel stiller tan\u0131mlayarak arama \u00e7ubu\u011funu ve kategori filtresini alt alta getirdik ve \u00fcr\u00fcn kartlar\u0131n\u0131 tek s\u00fctun halinde g\u00f6sterdik. Bu sayede uygulaman\u0131z farkl\u0131 cihazlarda sorunsuz bir deneyim sunar.<\/p>\n<h3>JavaScript ile Veri \u00c7ekme ve \u0130lk \u00dcr\u00fcn Listeleme<\/h3>\n<p>\u015eimdi s\u0131ra JavaScript'e geldi. <code>script.js<\/code> dosyas\u0131nda, Mock API'den \u00fcr\u00fcn verilerini \u00e7ekecek ve bunlar\u0131 HTML sayfam\u0131za dinamik olarak ekleyecek kodu yazaca\u011f\u0131z. <code>fetch<\/code> API, modern web taray\u0131c\u0131lar\u0131nda HTTP istekleri yapmak i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc ve esnek bir ara\u00e7t\u0131r. <code>async\/await<\/code> s\u00f6zdizimi, asenkron i\u015flemleri senkron bir kod gibi okunur hale getirir, bu da kodumuzun daha temiz ve anla\u015f\u0131l\u0131r olmas\u0131n\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ DOM elementlerini se\u00e7iyoruz\nconst searchInput = document.getElementById('searchInput');\nconst categoryFilter = document.getElementById('categoryFilter');\nconst productList = document.getElementById('productList');\nconst noResultsMessage = document.getElementById('noResults');\n\nlet allProducts = []; \/\/ T\u00fcm \u00fcr\u00fcnleri saklayaca\u011f\u0131m\u0131z dizi\n\n\/\/ Mock API'den \u00fcr\u00fcn verilerini \u00e7eken fonksiyon\nasync function fetchProducts() {\n    try {\n        \/\/ Mock API adresimiz (JSON Server kullan\u0131yorsan\u0131z http:\/\/localhost:3000\/products)\n        \/\/ E\u011fer JSON Server kullanm\u0131yorsan\u0131z ve sadece db.json dosyas\u0131n\u0131 kullanacaksan\u0131z,\n        \/\/ bir live server eklentisi kullanman\u0131z ve adresi ona g\u00f6re ayarlaman\u0131z gerekebilir.\n        const response = await fetch('http:\/\/localhost:3000\/products'); \n        if (!response.ok) {\n            throw new Error(<code>HTTP hata kodu: ${response.status}<\/code>);\n        }\n        allProducts = await response.json();\n        populateCategories(allProducts); \/\/ Kategorileri doldur\n        displayProducts(allProducts); \/\/ T\u00fcm \u00fcr\u00fcnleri ba\u015fta g\u00f6ster\n    } catch (error) {\n        console.error(\"\u00dcr\u00fcnler \u00e7ekilirken bir hata olu\u015ftu:\", error);\n        productList.innerHTML = <code><p class=\"error-message\">\u00dcr\u00fcnler y\u00fcklenirken bir sorun olu\u015ftu. L\u00fctfen daha sonra tekrar deneyin.<\/p><\/code>;\n    }\n}\n\n\/\/ \u00dcr\u00fcnleri DOM'a listeleyen fonksiyon\nfunction displayProducts(productsToDisplay) {\n    productList.innerHTML = ''; \/\/ \u00d6nceki \u00fcr\u00fcnleri temizle\n\n    if (productsToDisplay.length === 0) {\n        noResultsMessage.style.display = 'block'; \/\/ Sonu\u00e7 yoksa mesaj\u0131 g\u00f6ster\n        return;\n    } else {\n        noResultsMessage.style.display = 'none'; \/\/ Sonu\u00e7 varsa mesaj\u0131 gizle\n    }\n\n    productsToDisplay.forEach(product => {\n        const productCard = document.createElement('div');\n        productCard.classList.add('product-card');\n        productCard.innerHTML = <code><img decoding=\"async\" src=\"${product.image}\" alt=\"${product.name}\">\n            <div class=\"product-info\">\n                <h3>${product.name}<\/h3>\n                <p><strong>Kategori:<\/strong> <span class=\"category\">${product.category}<\/span><\/p>\n                <p>${product.description.substring(0, 70)}...<\/p>\n                <p class=\"price\">${product.price} TL<\/p>\n            <\/div><\/code>;\n        productList.appendChild(productCard);\n    });\n}\n\n\/\/ Kategori filtresini dolduran fonksiyon\nfunction populateCategories(products) {\n    const categories = [...new Set(products.map(product => product.category))]; \/\/ Tekrar edenleri kald\u0131r\n    categories.forEach(category => {\n        const option = document.createElement('option');\n        option.value = category;\n        option.textContent = category;\n        categoryFilter.appendChild(option);\n    });\n}\n\n\/\/ Uygulama y\u00fcklendi\u011finde \u00fcr\u00fcnleri \u00e7ek\ndocument.addEventListener('DOMContentLoaded', fetchProducts);\n<\/pre>\n<p><\/code><\/p>\n<p>Bu kod blo\u011fu, sayfa y\u00fcklendi\u011finde <code>fetchProducts<\/code> fonksiyonunu \u00e7a\u011f\u0131rarak Mock API'den verileri \u00e7eker. Ard\u0131ndan, <code>displayProducts<\/code> fonksiyonu \u00e7ekilen \u00fcr\u00fcnleri al\u0131r ve her bir \u00fcr\u00fcn i\u00e7in bir HTML kart\u0131 olu\u015fturarak <code>productList<\/code> div'ine ekler. <code>populateCategories<\/code> fonksiyonu ise \u00fcr\u00fcnlerden benzersiz kategorileri alarak kategori filtresini dinamik olarak doldurur. <code>noResultsMessage<\/code> div'ini de kullanarak arama sonucu bulunamad\u0131\u011f\u0131nda kullan\u0131c\u0131ya bilgi verdik. B\u00f6ylece, uygulamam\u0131z\u0131n temel veri \u00e7ekme ve listeleme i\u015flevselli\u011fini tamamlam\u0131\u015f olduk.<\/p>\n<div class=\"interactive-element\">\n  Uzman \u0130pucu: \u00dcr\u00fcn resimlerinin y\u00fcklenmesi performans sorunlar\u0131na yol a\u00e7abilir. Bu durumu \u00f6nlemek i\u00e7in, CSS'de <code>img { display: block; max-width: 100%; height: auto; }<\/code> gibi temel responsive kurallar\u0131n\u0131 uygulaman\u0131n yan\u0131 s\u0131ra, JavaScript taraf\u0131nda resimler i\u00e7in \"lazy loading\" (tembel y\u00fckleme) tekni\u011fini d\u00fc\u015f\u00fcnebilirsiniz. Bu, sadece kullan\u0131c\u0131n\u0131n g\u00f6r\u00fc\u015f alan\u0131na giren resimlerin y\u00fcklenmesini sa\u011flayarak ilk y\u00fckleme s\u00fcresini optimize eder. HTML <code>img<\/code> etiketine <code>loading=\"lazy\"<\/code> \u00f6zelli\u011fini eklemek \u00e7o\u011fu modern taray\u0131c\u0131da bu \u00f6zelli\u011fi otomatik olarak etkinle\u015ftirir.\n<\/div>\n<h2>Dinamik Arama ve Filtreleme Fonksiyonlar\u0131: Kullan\u0131c\u0131 Deneyimini Nas\u0131l Zenginle\u015ftiririz?<\/h2>\n<p>Uygulamam\u0131z\u0131n temel yap\u0131s\u0131 haz\u0131r ve \u00fcr\u00fcnler listeleniyor. \u015eimdi s\u0131ra, kullan\u0131c\u0131lar\u0131n tam olarak arad\u0131klar\u0131n\u0131 bulmalar\u0131n\u0131 sa\u011flayacak dinamik arama ve filtreleme i\u015flevselli\u011fini eklemeye geldi. Bu \u00f6zellikler, uygulaman\u0131n interaktifli\u011fini ve kullan\u0131labilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racak, b\u00f6ylece kullan\u0131c\u0131lar i\u00e7in \u00e7ok daha tatmin edici bir deneyim sunacakt\u0131r.<\/p>\n<h3>Arama \u00c7ubu\u011fu Entegrasyonu: An\u0131nda Sonu\u00e7lar \u0130\u00e7in <code>input<\/code> Eventi<\/h3>\n<p>Arama \u00e7ubu\u011funa yaz\u0131lan her karakterde \u00fcr\u00fcn listesinin g\u00fcncellenmesi, modern web uygulamalar\u0131nda standart bir beklentidir. Bu dinamikli\u011fi sa\u011flamak i\u00e7in JavaScript'teki <code>input<\/code> olay dinleyicisini kullanaca\u011f\u0131z. <code>input<\/code> eventi, bir <code><input><\/code> veya <code><textarea><\/code> elementinin de\u011feri her de\u011fi\u015fti\u011finde tetiklenir.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ Arama ve filtreleme mant\u0131\u011f\u0131n\u0131 uygulayan ana fonksiyon\nfunction applyFilters() {\n    const searchTerm = searchInput.value.toLowerCase(); \/\/ Arama terimini k\u00fc\u00e7\u00fck harfe \u00e7evir\n    const selectedCategory = categoryFilter.value;\n\n    \/\/ T\u00fcm \u00fcr\u00fcnler aras\u0131nda filtreleme yap\n    const filteredProducts = allProducts.filter(product => {\n        const matchesSearch = product.name.toLowerCase().includes(searchTerm) ||\n                              product.description.toLowerCase().includes(searchTerm) ||\n                              product.category.toLowerCase().includes(searchTerm);\n        \n        const matchesCategory = selectedCategory === 'all' || product.category === selectedCategory;\n\n        return matchesSearch && matchesCategory;\n    });\n\n    displayProducts(filteredProducts); \/\/ Filtrelenmi\u015f \u00fcr\u00fcnleri g\u00f6ster\n}\n\n\/\/ Arama \u00e7ubu\u011fu ve kategori filtresi i\u00e7in olay dinleyicileri\nsearchInput.addEventListener('input', applyFilters);\ncategoryFilter.addEventListener('change', applyFilters);\n<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki kod blo\u011funda, <code>applyFilters<\/code> ad\u0131nda merkezi bir fonksiyon olu\u015fturduk. Bu fonksiyon, hem arama \u00e7ubu\u011fundaki metni hem de se\u00e7ili kategori filtresini dikkate alarak <code>allProducts<\/code> dizisini filtreler. <code>toLowerCase()<\/code> metodu, araman\u0131n b\u00fcy\u00fck\/k\u00fc\u00e7\u00fck harf duyars\u0131z olmas\u0131n\u0131 sa\u011flar, bu da kullan\u0131c\u0131 deneyimi i\u00e7in \u00f6nemlidir. <code>includes()<\/code> metodu ise \u00fcr\u00fcn ad\u0131, a\u00e7\u0131klamas\u0131 ve kategorisinde arama teriminin olup olmad\u0131\u011f\u0131n\u0131 kontrol eder. <code>categoryFilter<\/code> i\u00e7in <code>change<\/code> eventini kullanmak, kullan\u0131c\u0131 bir kategori se\u00e7ti\u011finde filtrelemenin hemen devreye girmesini sa\u011flar.<\/p>\n<h3>Filtreleme Se\u00e7enekleri: Kategoriler ve \u0130leri D\u00fczey Filtreler<\/h3>\n<p>Sadece metin tabanl\u0131 arama \u00e7o\u011fu zaman yeterli de\u011fildir. Kullan\u0131c\u0131lar genellikle \u00fcr\u00fcnleri kategori, fiyat aral\u0131\u011f\u0131, marka veya di\u011fer \u00f6zelliklere g\u00f6re daraltmak isterler. HTML'deki <code><select><\/code> elementi kategori filtreleri i\u00e7in idealdir. Daha karma\u015f\u0131k filtreler (\u00f6rne\u011fin fiyat aral\u0131\u011f\u0131) i\u00e7in ek <code>input<\/code> alanlar\u0131 veya kayd\u0131r\u0131c\u0131lar (<code>range<\/code> tipi inputlar) kullan\u0131labilir. Bizim \u00f6rne\u011fimizde, kategori filtresini zaten ekledik ve JavaScript kodumuzda bunun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6sterdik.<\/p>\n<p>Fiyat aral\u0131\u011f\u0131 gibi ek bir filtre eklemek isterseniz, HTML'inize \u015funlar\u0131 ekleyebilirsiniz:<\/p>\n<pre><code class=\"language-html\">\n<div class=\"search-area\">\n    <input type=\"text\" id=\"searchInput\" placeholder=\"\u00dcr\u00fcn ad\u0131 veya kategorisi ara...\">\n    <select id=\"categoryFilter\">\n        <option value=\"all\">T\u00fcm Kategoriler<\/option>\n    <\/select>\n    <input type=\"number\" id=\"minPriceInput\" placeholder=\"Min. Fiyat\" min=\"0\">\n    <input type=\"number\" id=\"maxPriceInput\" placeholder=\"Max. Fiyat\" min=\"0\">\n<\/div>\n<\/pre>\n<p><\/code><\/p>\n<p>Ve <code>script.js<\/code> dosyan\u0131zda <code>applyFilters<\/code> fonksiyonunu g\u00fcncelleyerek bu filtreleri de dahil edebilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ Yeni DOM elementlerini se\u00e7iyoruz\nconst minPriceInput = document.getElementById('minPriceInput');\nconst maxPriceInput = document.getElementById('maxPriceInput');\n\n\/\/ applyFilters fonksiyonunun g\u00fcncellenmi\u015f hali\nfunction applyFilters() {\n    const searchTerm = searchInput.value.toLowerCase();\n    const selectedCategory = categoryFilter.value;\n    const minPrice = parseFloat(minPriceInput.value) || 0; \/\/ Ge\u00e7ersizse 0 yap\n    const maxPrice = parseFloat(maxPriceInput.value) || Infinity; \/\/ Ge\u00e7ersizse sonsuz yap\n\n    const filteredProducts = allProducts.filter(product => {\n        const matchesSearch = product.name.toLowerCase().includes(searchTerm) ||\n                              product.description.toLowerCase().includes(searchTerm) ||\n                              product.category.toLowerCase().includes(searchTerm);\n        \n        const matchesCategory = selectedCategory === 'all' || product.category === selectedCategory;\n        \n        const matchesPrice = product.price >= minPrice && product.price <= maxPrice;\n\n        return matchesSearch && matchesCategory && matchesPrice;\n    });\n\n    displayProducts(filteredProducts);\n}\n\n\/\/ Yeni olay dinleyicileri\nminPriceInput.addEventListener('input', applyFilters);\nmaxPriceInput.addEventListener('input', applyFilters);\n<\/pre>\n<p><\/code><\/p>\n<p>Bu g\u00fcncellemelerle, uygulaman\u0131z art\u0131k kullan\u0131c\u0131lar\u0131n belirledi\u011fi minimum ve maksimum fiyat aral\u0131klar\u0131na g\u00f6re de \u00fcr\u00fcnleri filtreleyebilir. <code>parseFloat()<\/code> kullanarak string de\u011ferleri say\u0131ya d\u00f6n\u00fc\u015ft\u00fcrd\u00fc\u011f\u00fcm\u00fcze ve ge\u00e7ersiz de\u011ferler i\u00e7in varsay\u0131lan de\u011ferler (<code>0<\/code> veya <code>Infinity<\/code>) atad\u0131\u011f\u0131m\u0131za dikkat edin. Bu, daha sa\u011flam bir filtreleme mekanizmas\u0131 sa\u011flar.<\/p>\n<h3>Performans \u0130pu\u00e7lar\u0131: Debouncing ile Arama Deneyimi Optimizasyonu<\/h3>\n<p>Kullan\u0131c\u0131 arama \u00e7ubu\u011funa her tu\u015fa bast\u0131\u011f\u0131nda <code>applyFilters<\/code> fonksiyonunun an\u0131nda \u00e7al\u0131\u015fmas\u0131, \u00f6zellikle b\u00fcy\u00fck veri setlerinde veya karma\u015f\u0131k filtreleme mant\u0131klar\u0131nda performans sorunlar\u0131na yol a\u00e7abilir. \u00c7ok s\u0131k DOM manip\u00fclasyonu ve filtreleme i\u015flemi taray\u0131c\u0131y\u0131 yorabilir. Bu durumu optimize etmek i\u00e7in \"debouncing\" (gecikmeli \u00e7al\u0131\u015ft\u0131rma) tekni\u011fini kullanabiliriz.<\/p>\n<p>Debouncing, bir fonksiyonun belirli bir s\u00fcre i\u00e7inde tekrar \u00e7a\u011fr\u0131lmas\u0131n\u0131 engeller; yani, fonksiyon sadece son \u00e7a\u011fr\u0131dan belirli bir s\u00fcre ge\u00e7tikten sonra \u00e7al\u0131\u015f\u0131r. Bu, kullan\u0131c\u0131n\u0131n yazmay\u0131 bitirmesini beklemek i\u00e7in idealdir.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ Debounce fonksiyonu\nfunction debounce(func, delay) {\n    let timeout;\n    return function(...args) {\n        const context = this;\n        clearTimeout(timeout);\n        timeout = setTimeout(() => func.apply(context, args), delay);\n    };\n}\n\n\/\/ Arama \u00e7ubu\u011fu i\u00e7in debounce uygulanm\u0131\u015f olay dinleyici\n\/\/ \u00d6rne\u011fin, 300 milisaniye gecikme ile\nsearchInput.addEventListener('input', debounce(applyFilters, 300));\n\/\/ Di\u011fer filtreler i\u00e7in de uygulanabilir\n\/\/ categoryFilter.addEventListener('change', debounce(applyFilters, 100));\n<\/pre>\n<p><\/code><\/p>\n<p>Burada <code>debounce<\/code> fonksiyonunu tan\u0131mlad\u0131k. <code>searchInput.addEventListener<\/code> i\u00e7inde <code>applyFilters<\/code> fonksiyonunu do\u011frudan \u00e7a\u011f\u0131rmak yerine, <code>debounce(applyFilters, 300)<\/code> ile sararak kulland\u0131k. Bu sayede, kullan\u0131c\u0131 h\u0131zl\u0131ca yazarken <code>applyFilters<\/code> fonksiyonu her karakterde tetiklenmek yerine, yazma durduktan 300 milisaniye sonra sadece bir kez \u00e7al\u0131\u015f\u0131r. Bu, \u00f6zellikle b\u00fcy\u00fck veri setleriyle \u00e7al\u0131\u015f\u0131rken uygulaman\u0131n \u00e7ok daha duyarl\u0131 ve performansl\u0131 hissetmesini sa\u011flar. B\u00f6ylece, hem i\u015flevsellik hem de performans a\u00e7\u0131s\u0131ndan zenginle\u015ftirilmi\u015f bir kullan\u0131c\u0131 deneyimi sunmu\u015f oluruz.<\/p>\n<h2>\u0130leri D\u00fczey Optimizasyonlar, Ger\u00e7ek D\u00fcnya Senaryolar\u0131 ve Gelecek Ad\u0131mlar<\/h2>\n<p>Temel interaktif \u00fcr\u00fcn arama uygulamam\u0131z art\u0131k \u00e7al\u0131\u015f\u0131r durumda. Ancak ger\u00e7ek d\u00fcnya senaryolar\u0131nda, bu t\u00fcr uygulamalar\u0131n daha sa\u011flam, performansl\u0131 ve kullan\u0131c\u0131 dostu olmas\u0131 gerekir. Bu b\u00f6l\u00fcmde, uygulamam\u0131z\u0131 bir sonraki seviyeye ta\u015f\u0131yacak ileri d\u00fczey optimizasyonlar\u0131, kullan\u0131labilirlik ve eri\u015filebilirlik ipu\u00e7lar\u0131n\u0131, hata y\u00f6netimini ve ger\u00e7ek d\u00fcnya vaka analizlerini ele alaca\u011f\u0131z. Ayr\u0131ca, uygulaman\u0131z\u0131 gelecekte nas\u0131l geli\u015ftirebilece\u011finize dair baz\u0131 fikirler sunaca\u011f\u0131z.<\/p>\n<h3>Kullan\u0131labilirlik (Usability) ve Eri\u015filebilirlik (Accessibility - A11y) \u0130pu\u00e7lar\u0131<\/h3>\n<p>Bir uygulaman\u0131n sadece \u00e7al\u0131\u015fmas\u0131 yeterli de\u011fildir; herkesin kolayca kullanabilmesi de \u00f6nemlidir. Kullan\u0131labilirlik, bir sistemin belirli kullan\u0131c\u0131lar taraf\u0131ndan belirli hedeflere ula\u015fmak i\u00e7in ne kadar etkili, verimli ve tatmin edici kullan\u0131labildi\u011fini ifade eder. Eri\u015filebilirlik ise, uygulaman\u0131n engelli ki\u015filer dahil olmak \u00fczere m\u00fcmk\u00fcn olan en geni\u015f kitle taraf\u0131ndan kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n<ul>\n<li><strong>Odak Y\u00f6netimi:<\/strong> Klavye ile gezen kullan\u0131c\u0131lar i\u00e7in arama \u00e7ubu\u011funa veya filtrelere odaklanman\u0131n kolay oldu\u011fundan emin olun. \u00d6rne\u011fin, arama sonu\u00e7lar\u0131 g\u00fcncellendikten sonra odaklanmay\u0131 tekrar arama \u00e7ubu\u011funa d\u00f6nd\u00fcrmek, h\u0131zl\u0131 arama yapmak isteyenler i\u00e7in faydal\u0131 olabilir.<\/li>\n<li><strong>Anlaml\u0131 HTML:<\/strong> Semantik HTML etiketleri kullan\u0131n. \u00d6rne\u011fin, \u00fcr\u00fcn listesi i\u00e7in <code>\n<ul><\/code> veya <code><\/p>\n<ol><\/code> ve her \u00fcr\u00fcn i\u00e7in <code><\/p>\n<li><\/code> kullanmak, ekran okuyucular i\u00e7in daha anlaml\u0131 bir yap\u0131 sunar.<\/li>\n<li><strong>ARIA Nitelikleri:<\/strong> Eri\u015filebilirlik i\u00e7in ARIA (Accessible Rich Internet Applications) niteliklerini kullan\u0131n. \u00d6rne\u011fin, arama \u00e7ubu\u011funa <code>aria-label=\"\u00dcr\u00fcn arama kutusu\"<\/code> veya <code>aria-labelledby<\/code> ile bir etiket ba\u011flamak, ekran okuyucular\u0131n amac\u0131n\u0131 anlamas\u0131na yard\u0131mc\u0131 olur. Ayr\u0131ca, filtreleme durumu gibi dinamik g\u00fcncellenen alanlar i\u00e7in <code>aria-live=\"polite\"<\/code> niteli\u011fini kullanmak, ekran okuyucular\u0131n bu de\u011fi\u015fiklikleri kullan\u0131c\u0131ya bildirmesini sa\u011flar.<\/li>\n<\/ul>\n<pre><code class=\"language-html\">\n<!-- Eri\u015filebilirlik i\u00e7in geli\u015ftirilmi\u015f arama \u00e7ubu\u011fu -->\n<label for=\"searchInput\" class=\"sr-only\">\u00dcr\u00fcn ad\u0131 veya kategorisi ara<\/label>\n<input type=\"text\" id=\"searchInput\" placeholder=\"\u00dcr\u00fcn ad\u0131 veya kategorisi ara...\" aria-label=\"\u00dcr\u00fcn arama kutusu\">\n\n<!-- Dinamik g\u00fcncellemeleri duyurmak i\u00e7in -->\n<div id=\"searchResultsStatus\" aria-live=\"polite\" class=\"sr-only\"><\/div>\n<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki <code>sr-only<\/code> s\u0131n\u0131f\u0131, g\u00f6rsel olarak gizlenirken ekran okuyucular taraf\u0131ndan okunabilen bir etikettir. JavaScript ile <code>searchResultsStatus<\/code> div'ini g\u00fcncelleyerek (\u00f6rne\u011fin \"5 \u00fcr\u00fcn bulundu\" gibi), kullan\u0131c\u0131n\u0131n arama sonu\u00e7lar\u0131n\u0131n de\u011fi\u015fti\u011fini anlamas\u0131n\u0131 sa\u011flayabiliriz.<\/p>\n<h3>Hata Y\u00f6netimi ve Bo\u015f Durumlar<\/h3>\n<p>Uygulamalar her zaman beklendi\u011fi gibi \u00e7al\u0131\u015fmaz. API \u00e7a\u011fr\u0131lar\u0131 ba\u015far\u0131s\u0131z olabilir, a\u011f ba\u011flant\u0131s\u0131 kesilebilir veya hi\u00e7 \u00fcr\u00fcn bulunamayabilir. Bu t\u00fcr durumlar\u0131 kullan\u0131c\u0131ya d\u00fczg\u00fcn bir \u015fekilde bildirmek, uygulaman\u0131n sa\u011flaml\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/p>\n<ul>\n<li><strong>API Hatalar\u0131:<\/strong> <code>fetchProducts<\/code> fonksiyonunda <code>try...catch<\/code> blo\u011fu kullanarak a\u011f hatalar\u0131n\u0131 yakalad\u0131k. Kullan\u0131c\u0131ya net bir hata mesaj\u0131 g\u00f6stermek (<code>\u00dcr\u00fcnler y\u00fcklenirken bir sorun olu\u015ftu. L\u00fctfen daha sonra tekrar deneyin.<\/code>) \u00f6nemlidir.<\/li>\n<li><strong>Bo\u015f Sonu\u00e7lar:<\/strong> Hi\u00e7 \u00fcr\u00fcn bulunamad\u0131\u011f\u0131nda (<code>productsToDisplay.length === 0<\/code>), kullan\u0131c\u0131ya bilgilendirici bir mesaj g\u00f6stermek (<code>noResults<\/code> div'i \u00f6rne\u011fimizdeki gibi) \u00f6nemlidir. Bu, kullan\u0131c\u0131n\u0131n uygulaman\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ancak arad\u0131\u011f\u0131 \u00fcr\u00fcn\u00fc bulamad\u0131\u011f\u0131n\u0131 anlamas\u0131n\u0131 sa\u011flar, bir hata oldu\u011funu d\u00fc\u015f\u00fcnmesini engeller.<\/li>\n<\/ul>\n<h3>Ger\u00e7ek D\u00fcnya Senaryolar\u0131 ve Vaka Analizleri<\/h3>\n<p>Bu makalede geli\u015ftirdi\u011fimiz interaktif arama uygulamas\u0131n\u0131n arkas\u0131ndaki prensipler, bir\u00e7ok farkl\u0131 ger\u00e7ek d\u00fcnya senaryosunda uygulanabilir:<\/p>\n<ul>\n<li><strong>E-ticaret Platformlar\u0131:<\/strong> En bariz \u00f6rnek. Amazon, Trendyol gibi platformlarda \u00fcr\u00fcn arama, filtreleme, s\u0131ralama ve sayfalama \u00f6zelliklerinin t\u00fcm\u00fc, bizim geli\u015ftirdi\u011fimiz mant\u0131\u011f\u0131n \u00e7ok daha karma\u015f\u0131k versiyonlar\u0131d\u0131r. Kullan\u0131c\u0131lar kategori, fiyat, marka, renk, beden gibi y\u00fczlerce farkl\u0131 filtreyi kullanarak arad\u0131klar\u0131 \u00fcr\u00fcne ula\u015f\u0131rlar.<\/li>\n<li><strong>K\u00fct\u00fcphane veya Dok\u00fcman Y\u00f6netim Sistemleri:<\/strong> Binlerce kitap veya dok\u00fcman aras\u0131nda belirli bir anahtar kelime, yazar, yay\u0131n tarihi veya konu ba\u015fl\u0131\u011f\u0131na g\u00f6re arama yapmak i\u00e7in benzer bir sistem kullan\u0131labilir.<\/li>\n<li><strong>Blog ve Haber Siteleri:<\/strong> Ar\u015fivdeki makaleleri etiketlere, yazarlara veya anahtar kelimelere g\u00f6re filtrelemek, okuyucular\u0131n ilgilendikleri i\u00e7eri\u011fe daha h\u0131zl\u0131 ula\u015fmas\u0131n\u0131 sa\u011flar.<\/li>\n<li><strong>\u0130\u00e7 Y\u00f6netim Panelleri:<\/strong> \u015eirket i\u00e7i projeler, \u00e7al\u0131\u015fanlar, g\u00f6revler veya raporlar aras\u0131nda h\u0131zl\u0131ca arama yapmak, \u00e7al\u0131\u015fan verimlili\u011fini art\u0131r\u0131r.<\/li>\n<\/ul>\n<p>Bir e-ticaret vaka analizi olarak; X firmas\u0131, m\u00fc\u015fterilerinin arama sonu\u00e7lar\u0131nda y\u00fcksek terk oran\u0131 ya\u015fad\u0131\u011f\u0131n\u0131 fark etti. Mevcut sistemleri, her arama veya filtrelemede sayfan\u0131n tamam\u0131n\u0131 yeniden y\u00fckl\u00fcyordu. Bu durum, \u00f6zellikle mobil kullan\u0131c\u0131lar i\u00e7in yava\u015f ve sinir bozucu bir deneyime yol a\u00e7\u0131yordu. Firmaya interaktif, JavaScript tabanl\u0131 bir arama motoru entegre edildi. Bu yeni sistem, \u00fcr\u00fcnleri an\u0131nda filtreleyip g\u00f6r\u00fcnt\u00fclerken, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirdi. Sonu\u00e7 olarak, site \u00fczerinde ge\u00e7irilen s\u00fcre %20 artt\u0131 ve sepet terk oranlar\u0131 %15 azald\u0131, bu da do\u011frudan sat\u0131\u015flarda art\u0131\u015fa yol a\u00e7t\u0131. Bu \u00f6rnek, basit bir teknolojik adaptasyonun kullan\u0131c\u0131 davran\u0131\u015flar\u0131 ve ticari sonu\u00e7lar \u00fczerindeki do\u011frudan etkisini a\u00e7\u0131k\u00e7a g\u00f6stermektedir.<\/p>\n<h3>Gelecek Ad\u0131mlar ve \u0130leri Seviye \u00d6zellikler<\/h3>\n<p>Uygulaman\u0131z\u0131 daha da geli\u015ftirmek i\u00e7in d\u00fc\u015f\u00fcnebilece\u011finiz baz\u0131 \u00f6zellikler:<\/p>\n<ul>\n<li><strong>Sayfalama (Pagination) veya Sonsuz Kayd\u0131rma:<\/strong> \u00c7ok say\u0131da \u00fcr\u00fcn oldu\u011funda, t\u00fcm\u00fcn\u00fc bir anda listelemek yerine sayfalara b\u00f6lmek veya kullan\u0131c\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a yeni \u00fcr\u00fcnleri y\u00fcklemek (<code>Intersection Observer<\/code> API ile) performans i\u00e7in \u00f6nemlidir.<\/li>\n<li><strong>S\u0131ralama (Sorting):<\/strong> \u00dcr\u00fcnleri fiyata g\u00f6re (artan\/azalan), isme g\u00f6re veya pop\u00fclerli\u011fe g\u00f6re s\u0131ralama se\u00e7enekleri eklemek.<\/li>\n<li><strong>Ger\u00e7ek Backend Entegrasyonu:<\/strong> Mock API yerine, Node.js ile Express, Python ile Django\/Flask veya PHP ile Laravel gibi ger\u00e7ek bir backend servisi ile entegrasyon. Bu, veri kal\u0131c\u0131l\u0131\u011f\u0131 ve daha karma\u015f\u0131k i\u015f mant\u0131klar\u0131 i\u00e7in gereklidir.<\/li>\n<li><strong>Durum Y\u00f6netimi:<\/strong> B\u00fcy\u00fck uygulamalarda React, Vue veya Angular gibi framework'ler ile durum y\u00f6netimi (state management) kullanarak kodunuzu daha d\u00fczenli hale getirmek.<\/li>\n<li><strong>Kullan\u0131c\u0131 Geri Bildirimi:<\/strong> Arama yaparken veya filtreleme uyguland\u0131\u011f\u0131nda \"Y\u00fckleniyor...\" mesaj\u0131 g\u00f6stermek, uygulaman\u0131n \u00e7al\u0131\u015f\u0131r durumda oldu\u011funu kullan\u0131c\u0131ya bildirir.<\/li>\n<\/ul>\n<h2>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular: Gelecek Ad\u0131mlar Nelerdir?<\/h2>\n<p>Bu makalede, JavaScript ve Mock API kullanarak dinamik ve interaktif bir \u00fcr\u00fcn arama uygulamas\u0131n\u0131n nas\u0131l geli\u015ftirilece\u011fini ad\u0131m ad\u0131m \u00f6\u011frendik. Temel HTML yap\u0131s\u0131ndan mobil uyumlu CSS stillerine, JavaScript ile veri \u00e7ekme ve DOM manip\u00fclasyonundan, arama ve filtreleme fonksiyonlar\u0131n\u0131n entegrasyonuna kadar bir\u00e7ok \u00f6nemli konuya de\u011findik. Ayr\u0131ca, performans optimizasyonu i\u00e7in debouncing gibi tekniklerin \u00f6nemini vurgulad\u0131k ve kullan\u0131labilirlik ile eri\u015filebilirli\u011fin, modern web uygulamalar\u0131 i\u00e7in vazge\u00e7ilmez unsurlar oldu\u011funu g\u00f6rd\u00fck. Ger\u00e7ek d\u00fcnya senaryolar\u0131nda bu t\u00fcr uygulamalar\u0131n nas\u0131l bir de\u011fer yaratt\u0131\u011f\u0131n\u0131 ve gelecekte hangi y\u00f6ne evrilebilece\u011fini de tart\u0131\u015ft\u0131k.<\/p>\n<p>Art\u0131k elinizde, kullan\u0131c\u0131lar\u0131n \u00fcr\u00fcnleri kolayca bulmas\u0131na yard\u0131mc\u0131 olacak g\u00fc\u00e7l\u00fc bir ara\u00e7 in\u015fa etmek i\u00e7in gerekli bilgi ve beceriler bulunuyor. Bu temel \u00fczerine in\u015fa ederek uygulaman\u0131z\u0131 daha da karma\u015f\u0131k filtreler, s\u0131ralama se\u00e7enekleri, sayfalama ve hatta favori \u00fcr\u00fcnler gibi kullan\u0131c\u0131 etkile\u015fimli \u00f6zelliklerle zenginle\u015ftirebilirsiniz. Unutmay\u0131n, web geli\u015ftirme s\u00fcrekli bir \u00f6\u011frenme ve iyile\u015ftirme s\u00fcrecidir. Bu makaledeki \u00f6rnekleri kendi projelerinize uyarlayarak veya farkl\u0131 veri kaynaklar\u0131yla deneyler yaparak bilgi birikiminizi art\u0131rabilirsiniz. Kullan\u0131c\u0131 deneyimini \u00f6n planda tutan, performansl\u0131 ve eri\u015filebilir uygulamalar geli\u015ftirmek, dijital d\u00fcnyada \u00f6ne \u00e7\u0131kman\u0131n anahtar\u0131d\u0131r.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<ol>\n<li>\n        <strong>Mock API yerine ger\u00e7ek bir API kullanabilir miyim?<\/strong><\/p>\n<p>Kesinlikle! Bu makaledeki Mock API kullan\u0131m\u0131, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131rmak ve frontend geli\u015ftiricilerin backend'in haz\u0131r olmas\u0131n\u0131 beklemeden \u00e7al\u0131\u015fmaya ba\u015flamas\u0131n\u0131 sa\u011flamak i\u00e7indi. Ger\u00e7ek bir projede, Node.js, Python, Java veya PHP gibi teknolojilerle olu\u015fturulmu\u015f, veritaban\u0131na ba\u011fl\u0131 bir ger\u00e7ek API'ye <code>fetch<\/code> istekleri g\u00f6nderebilirsiniz. Temel JavaScript <code>fetch<\/code> \u00e7a\u011fr\u0131 mant\u0131\u011f\u0131 ayn\u0131 kalacakt\u0131r.<\/p>\n<\/li>\n<li>\n        <strong>Uygulama performans\u0131n\u0131 daha da art\u0131rmak i\u00e7in ba\u015fka neler yapabilirim?<\/strong><\/p>\n<p>Performans\u0131 art\u0131rmak i\u00e7in birka\u00e7 yol vard\u0131r:<\/p>\n<ul>\n<li><strong>G\u00f6rsel Optimizasyon:<\/strong> \u00dcr\u00fcn resimlerini s\u0131k\u0131\u015ft\u0131r\u0131n ve boyutlar\u0131n\u0131 optimize edin. <code>loading=\"lazy\"<\/code> gibi HTML nitelikleriyle tembel y\u00fcklemeyi kullan\u0131n.<\/li>\n<li><strong>Debouncing\/Throttling:<\/strong> Arama ve filtreleme olaylar\u0131nda bu teknikleri kullanarak gereksiz fonksiyon \u00e7a\u011fr\u0131lar\u0131n\u0131 azalt\u0131n.<\/li>\n<li><strong>Virtual DOM (Framework'ler i\u00e7in):<\/strong> React, Vue gibi framework'ler Virtual DOM kullanarak DOM manip\u00fclasyonlar\u0131n\u0131 daha verimli hale getirir. E\u011fer projeniz b\u00fcy\u00fcrse bu framework'lere ge\u00e7i\u015f d\u00fc\u015f\u00fcnebilirsiniz.<\/li>\n<li><strong>CDN Kullan\u0131m\u0131:<\/strong> Statik dosyalar\u0131n\u0131z\u0131 (resimler, CSS, JS) bir \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131 (CDN) \u00fczerinden sunarak y\u00fckleme s\u00fcrelerini k\u0131salt\u0131n.<\/li>\n<\/ul>\n<\/li>\n<li>\n        <strong>Mobil uyumlu tasar\u0131m\u0131 sa\u011flamak i\u00e7in sadece <code>media query<\/code> yeterli midir?<\/strong><\/p>\n<p>Medya sorgular\u0131 (media queries) mobil uyumlu tasar\u0131m\u0131n temel bir par\u00e7as\u0131d\u0131r ancak tek ba\u015f\u0131na yeterli de\u011fildir. <code>flexbox<\/code> ve <code>CSS Grid<\/code> gibi modern CSS d\u00fczenleme tekniklerini kullanarak daha esnek ve duyarl\u0131 tasar\u0131mlar olu\u015fturmal\u0131s\u0131n\u0131z. Ayr\u0131ca, <code>viewport<\/code> meta etiketi, <code>rem<\/code> veya <code>em<\/code> gibi g\u00f6receli birimler kullanmak ve dokunmatik ekranlar i\u00e7in yeterli hedef boyutu sa\u011flamak da \u00f6nemlidir. Mobil cihazlarda kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in dokunmatik olaylara da dikkat edilmelidir.<\/p>\n<\/li>\n<li>\n        <strong>Uygulamama nas\u0131l daha fazla filtre ekleyebilirim?<\/strong><\/p>\n<p>Daha fazla filtre eklemek i\u00e7in, HTML'inize ilgili <code><input><\/code>, <code><select><\/code> veya <code><checkbox><\/code> elementlerini eklemeniz gerekir. Ard\u0131ndan, <code>script.js<\/code> dosyan\u0131zdaki <code>applyFilters<\/code> fonksiyonunu g\u00fcncelleyerek bu yeni filtrelerin de\u011ferlerini okumal\u0131 ve <code>allProducts<\/code> dizisini buna g\u00f6re filtrelemelisiniz. \u00d6rne\u011fin, marka filtresi i\u00e7in bir <code><select><\/code> ekleyebilir ve JavaScript'te \u00fcr\u00fcnlerin <code>brand<\/code> \u00f6zelli\u011fine g\u00f6re filtreleme yapabilirsiniz.<\/p>\n<\/li>\n<li>\n        <strong>Bu uygulama i\u00e7in bir sunucuya ihtiyac\u0131m var m\u0131?<\/strong><\/p>\n<p>Sadece frontend (HTML, CSS, JavaScript) dosyalar\u0131n\u0131z i\u00e7in bir web sunucusuna (\u00f6rne\u011fin, bir Nginx veya Apache sunucusu veya basit bir <code>live-server<\/code> eklentisi) ihtiyac\u0131n\u0131z var. Mock API olarak JSON Server kullan\u0131yorsan\u0131z, o da kendi yerel sunucusunu \u00e7al\u0131\u015ft\u0131r\u0131r. Uygulaman\u0131z\u0131n canl\u0131ya al\u0131nmas\u0131 i\u00e7in bu dosyalar\u0131n bir bar\u0131nd\u0131rma hizmetine (hosting) y\u00fcklenmesi gerekir. Ger\u00e7ek bir backend ile \u00e7al\u0131\u015fmak isterseniz, o zaman bir sunucu ortam\u0131na (VPS, bulut hizmetleri vb.) ihtiyac\u0131n\u0131z olacakt\u0131r.<\/p>\n<\/li>\n<\/ol>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda kullan\u0131c\u0131lar, arad\u0131klar\u0131 bilgilere veya \u00fcr\u00fcnlere an\u0131nda ula\u015fmak ister. Bu beklenti, \u00f6zellikle e-ticaret siteleri ve i\u00e7erik…","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":[129],"tags":[],"class_list":{"0":"post-32462","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","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>JavaScript ve Mock API ile \u0130nteraktif \u00dcr\u00fcn Arama Uygulamas\u0131<\/title>\n<meta name=\"description\" content=\"G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda kullan\u0131c\u0131lar, arad\u0131klar\u0131 bilgilere veya \u00fcr\u00fcnlere an\u0131nda ula\u015fmak ister. Bu beklenti, \u00f6zellikle e-ticaret siteleri ve i\u00e7erik platformlar\u0131 i\u00e7in interaktif arama uygulamalar\u0131n\u0131 vazge\u00e7ilmez k\u0131l\u0131yor. Peki, modern web geli\u015ftirme teknikleriyle, \u00f6zellikle JavaScript ve bir Mock API kullanarak, h\u0131zl\u0131 ve etkili bir \u00fcr\u00fcn arama uygulamas\u0131n\u0131 nas\u0131l hayata ge\u00e7irebiliriz? Bu makalede, bu sorunun cevab\u0131n\u0131 ad\u0131m ad\u0131m, pratik \u00f6rnekler ve ileri d\u00fczey ipu\u00e7lar\u0131yla ke\u015ffedece\u011fiz. Kullan\u0131c\u0131 dostu arama deneyimleri tasarlamak art\u0131k \u00e7ok daha kolay!\" \/>\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\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript ve Mock API ile \u0130nteraktif \u00dcr\u00fcn Arama Uygulamas\u0131\" \/>\n<meta property=\"og:description\" content=\"G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda kullan\u0131c\u0131lar, arad\u0131klar\u0131 bilgilere veya \u00fcr\u00fcnlere an\u0131nda ula\u015fmak ister. Bu beklenti, \u00f6zellikle e-ticaret siteleri ve i\u00e7erik platformlar\u0131 i\u00e7in interaktif arama uygulamalar\u0131n\u0131 vazge\u00e7ilmez k\u0131l\u0131yor. Peki, modern web geli\u015ftirme teknikleriyle, \u00f6zellikle JavaScript ve bir Mock API kullanarak, h\u0131zl\u0131 ve etkili bir \u00fcr\u00fcn arama uygulamas\u0131n\u0131 nas\u0131l hayata ge\u00e7irebiliriz? Bu makalede, bu sorunun cevab\u0131n\u0131 ad\u0131m ad\u0131m, pratik \u00f6rnekler ve ileri d\u00fczey ipu\u00e7lar\u0131yla ke\u015ffedece\u011fiz. Kullan\u0131c\u0131 dostu arama deneyimleri tasarlamak art\u0131k \u00e7ok daha kolay!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-22T00:31:36+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=\"25 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"JavaScript ve Mock API ile \u0130nteraktif \u00dcr\u00fcn Arama Uygulamas\u0131\",\"datePublished\":\"2025-10-22T00:31:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/\"},\"wordCount\":4109,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Javascript\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/\",\"name\":\"JavaScript ve Mock API ile \u0130nteraktif \u00dcr\u00fcn Arama Uygulamas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-22T00:31:36+00:00\",\"description\":\"G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda kullan\u0131c\u0131lar, arad\u0131klar\u0131 bilgilere veya \u00fcr\u00fcnlere an\u0131nda ula\u015fmak ister. Bu beklenti, \u00f6zellikle e-ticaret siteleri ve i\u00e7erik platformlar\u0131 i\u00e7in interaktif arama uygulamalar\u0131n\u0131 vazge\u00e7ilmez k\u0131l\u0131yor. Peki, modern web geli\u015ftirme teknikleriyle, \u00f6zellikle JavaScript ve bir Mock API kullanarak, h\u0131zl\u0131 ve etkili bir \u00fcr\u00fcn arama uygulamas\u0131n\u0131 nas\u0131l hayata ge\u00e7irebiliriz? Bu makalede, bu sorunun cevab\u0131n\u0131 ad\u0131m ad\u0131m, pratik \u00f6rnekler ve ileri d\u00fczey ipu\u00e7lar\u0131yla ke\u015ffedece\u011fiz. Kullan\u0131c\u0131 dostu arama deneyimleri tasarlamak art\u0131k \u00e7ok daha kolay!\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript ve Mock API ile \u0130nteraktif \u00dcr\u00fcn Arama Uygulamas\u0131\"}]},{\"@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":"JavaScript ve Mock API ile \u0130nteraktif \u00dcr\u00fcn Arama Uygulamas\u0131","description":"G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda kullan\u0131c\u0131lar, arad\u0131klar\u0131 bilgilere veya \u00fcr\u00fcnlere an\u0131nda ula\u015fmak ister. Bu beklenti, \u00f6zellikle e-ticaret siteleri ve i\u00e7erik platformlar\u0131 i\u00e7in interaktif arama uygulamalar\u0131n\u0131 vazge\u00e7ilmez k\u0131l\u0131yor. Peki, modern web geli\u015ftirme teknikleriyle, \u00f6zellikle JavaScript ve bir Mock API kullanarak, h\u0131zl\u0131 ve etkili bir \u00fcr\u00fcn arama uygulamas\u0131n\u0131 nas\u0131l hayata ge\u00e7irebiliriz? Bu makalede, bu sorunun cevab\u0131n\u0131 ad\u0131m ad\u0131m, pratik \u00f6rnekler ve ileri d\u00fczey ipu\u00e7lar\u0131yla ke\u015ffedece\u011fiz. Kullan\u0131c\u0131 dostu arama deneyimleri tasarlamak art\u0131k \u00e7ok daha kolay!","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\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/","og_locale":"tr_TR","og_type":"article","og_title":"JavaScript ve Mock API ile \u0130nteraktif \u00dcr\u00fcn Arama Uygulamas\u0131","og_description":"G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda kullan\u0131c\u0131lar, arad\u0131klar\u0131 bilgilere veya \u00fcr\u00fcnlere an\u0131nda ula\u015fmak ister. Bu beklenti, \u00f6zellikle e-ticaret siteleri ve i\u00e7erik platformlar\u0131 i\u00e7in interaktif arama uygulamalar\u0131n\u0131 vazge\u00e7ilmez k\u0131l\u0131yor. Peki, modern web geli\u015ftirme teknikleriyle, \u00f6zellikle JavaScript ve bir Mock API kullanarak, h\u0131zl\u0131 ve etkili bir \u00fcr\u00fcn arama uygulamas\u0131n\u0131 nas\u0131l hayata ge\u00e7irebiliriz? Bu makalede, bu sorunun cevab\u0131n\u0131 ad\u0131m ad\u0131m, pratik \u00f6rnekler ve ileri d\u00fczey ipu\u00e7lar\u0131yla ke\u015ffedece\u011fiz. Kullan\u0131c\u0131 dostu arama deneyimleri tasarlamak art\u0131k \u00e7ok daha kolay!","og_url":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-22T00:31:36+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"25 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"JavaScript ve Mock API ile \u0130nteraktif \u00dcr\u00fcn Arama Uygulamas\u0131","datePublished":"2025-10-22T00:31:36+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/"},"wordCount":4109,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Javascript"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/","url":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/","name":"JavaScript ve Mock API ile \u0130nteraktif \u00dcr\u00fcn Arama Uygulamas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-22T00:31:36+00:00","description":"G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda kullan\u0131c\u0131lar, arad\u0131klar\u0131 bilgilere veya \u00fcr\u00fcnlere an\u0131nda ula\u015fmak ister. Bu beklenti, \u00f6zellikle e-ticaret siteleri ve i\u00e7erik platformlar\u0131 i\u00e7in interaktif arama uygulamalar\u0131n\u0131 vazge\u00e7ilmez k\u0131l\u0131yor. Peki, modern web geli\u015ftirme teknikleriyle, \u00f6zellikle JavaScript ve bir Mock API kullanarak, h\u0131zl\u0131 ve etkili bir \u00fcr\u00fcn arama uygulamas\u0131n\u0131 nas\u0131l hayata ge\u00e7irebiliriz? Bu makalede, bu sorunun cevab\u0131n\u0131 ad\u0131m ad\u0131m, pratik \u00f6rnekler ve ileri d\u00fczey ipu\u00e7lar\u0131yla ke\u015ffedece\u011fiz. Kullan\u0131c\u0131 dostu arama deneyimleri tasarlamak art\u0131k \u00e7ok daha kolay!","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-mock-api-ile-interaktif-urun-arama-uygulamasi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript ve Mock API ile \u0130nteraktif \u00dcr\u00fcn Arama Uygulamas\u0131"}]},{"@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\/32462","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=32462"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32462\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}