{"id":14639,"date":"2025-03-09T05:15:13","date_gmt":"2025-03-09T02:15:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/wecoded-challangeima-html-css-javascript-jquery-bootstrap-ve-dev-to-api-ile-cozum\/"},"modified":"2025-03-09T05:15:13","modified_gmt":"2025-03-09T02:15:13","slug":"wecoded-challangeima-html-css-javascript-jquery-bootstrap-ve-dev-to-api-ile-cozum","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/wecoded-challangeima-html-css-javascript-jquery-bootstrap-ve-dev-to-api-ile-cozum\/","title":{"rendered":"WeCoded Challange’\u0131ma HTML, CSS, JavaScript, jQuery, Bootstrap ve DEV.TO API ile \u00c7\u00f6z\u00fcm"},"content":{"rendered":"

WeCoded Challange’\u0131ma HTML, CSS, JavaScript, jQuery, Bootstrap ve DEV.TO API ile \u00c7\u00f6z\u00fcm<\/p>\n

Merhaba! Fatih Soysal olarak, WeCoded challenge’\u0131na kat\u0131l\u0131m\u0131m\u0131 ve geli\u015ftirdi\u011fim \u00e7\u00f6z\u00fcm\u00fc sizlerle payla\u015fmak istiyorum. Bu makalede, dev.to platformunun WeCoded etiketli makalelerini \u00e7ekmek i\u00e7in kulland\u0131\u011f\u0131m HTML, CSS, JavaScript, jQuery, Bootstrap ve Forem API entegrasyonunu detayl\u0131 olarak a\u00e7\u0131klayaca\u011f\u0131m. Hedefim, temiz ve kullan\u0131\u015fl\u0131 bir aray\u00fcz olu\u015fturarak, ilgili i\u00e7erikleri kullan\u0131c\u0131 dostu bir \u015fekilde sunmakt\u0131.<\/p>\n

\u00d6ncelikle, projenin temelini olu\u015fturan teknolojilerden bahsetmek istiyorum. HTML, sayfan\u0131n iskeletini olu\u015fturmam\u0131 sa\u011flad\u0131. CSS, g\u00f6rsel d\u00fczenlemeyi ve aray\u00fcz\u00fcn esteti\u011fini belirledi. JavaScript, dinamik etkile\u015fimler i\u00e7in olmazsa olmazd\u0131. jQuery, JavaScript kodumu daha k\u0131sa ve anla\u015f\u0131l\u0131r hale getirdi. Bootstrap, h\u0131zl\u0131 ve responsive bir aray\u00fcz olu\u015fturmama yard\u0131mc\u0131 oldu. Son olarak, Forem API, dev.to’dan verileri \u00e7ekmemi sa\u011flayan kritik bir bile\u015fen oldu.<\/p>\n

DEV.TO API Entegrasyonu: Verileri \u00c7ekme ve \u0130\u015fleme<\/h2>\n

Projenin en \u00f6nemli a\u015famalar\u0131ndan biri, dev.to’nun Forem API’sini kullanarak WeCoded etiketli makaleleri \u00e7ekmekti. Bunun i\u00e7in API’nin dok\u00fcmantasyonunu dikkatlice inceledim. Ard\u0131ndan, JavaScript ve jQuery kullanarak API’ye istek g\u00f6nderdim ve gelen JSON verilerini i\u015fledim. Bu i\u015flem s\u0131ras\u0131nda, her makalenin ba\u015fl\u0131\u011f\u0131n\u0131, i\u00e7eri\u011finin \u00f6zetini, yay\u0131nlanma tarihini ve yazar\u0131n\u0131 ald\u0131m. Elde etti\u011fim verileri, daha sonra Bootstrap ile olu\u015fturdu\u011fum aray\u00fczde kullanarak kullan\u0131c\u0131ya sundum.<\/p>\n

\n\/\/ \u00d6rnek API iste\u011fi (jQuery kullanarak)\n$.ajax({\n  url: \"https:\/\/dev.to\/api\/articles?tag=wecoded\",\n  type: \"GET\",\n  success: function(response) {\n    \/\/ Gelen verilerin i\u015flenmesi ve aray\u00fcze eklenmesi\n  }\n});\n<\/code><\/pre>\n
Verilerin i\u015flenmesi a\u015famas\u0131nda,  \u00f6nemli bir nokta,  performans optimizasyonuydu.  B\u00fcy\u00fck veri k\u00fcmelerini verimli bir \u015fekilde i\u015flemek i\u00e7in gerekli \u00f6nlemleri ald\u0131m.  Ayr\u0131ca,  hata y\u00f6netimi de projede \u00f6ncelikli konulardan biriydi.  API’den gelen hatalar\u0131 yakalamak ve kullan\u0131c\u0131ya uygun mesajlar g\u00f6stermek i\u00e7in \u00f6zel bir mekanizma geli\u015ftirdim. Bu sayede, olas\u0131 sorunlar\u0131n yol a\u00e7abilece\u011fi olumsuz kullan\u0131c\u0131 deneyimlerini engelledim.<\/p>\n
Aray\u00fcz Tasar\u0131m\u0131 ve Kullan\u0131c\u0131 Deneyimi<\/h2>\n
Aray\u00fcz\u00fc tasarlarken,  kullan\u0131c\u0131 deneyimini \u00f6n planda tuttum.  Temiz, sade ve responsive bir tasar\u0131m hedefledim.  Bootstrap’\u0131n sa\u011flad\u0131\u011f\u0131 ara\u00e7lar sayesinde,  farkl\u0131 ekran boyutlar\u0131nda sorunsuz \u00e7al\u0131\u015fan bir aray\u00fcz olu\u015fturmay\u0131 ba\u015fard\u0131m.  Kullan\u0131c\u0131lar\u0131n makaleleri kolayca tarayabilmeleri ve istedikleri makaleye h\u0131zl\u0131ca ula\u015fabilmeleri i\u00e7in uygun bir navigasyon sistemi tasarlad\u0131m.  Ayr\u0131ca, her makalenin ayr\u0131nt\u0131l\u0131 bilgilerini i\u00e7eren bir sayfa olu\u015fturdum.  B\u00f6ylece, kullan\u0131c\u0131lar se\u00e7tikleri makale hakk\u0131nda daha detayl\u0131 bilgiye sahip olabilirler.<\/p>\n
Sonu\u00e7 olarak, bu projede edindi\u011fim deneyimler olduk\u00e7a de\u011ferliydi.  Hem farkl\u0131 teknolojileri birle\u015ftirme hem de API entegrasyonu konusunda tecr\u00fcbelerimi geli\u015ftirme f\u0131rsat\u0131 buldum.  Bu projedeki kodlar\u0131  kendi web sitemde<\/a>  daha detayl\u0131 olarak payla\u015fmay\u0131 d\u00fc\u015f\u00fcn\u00fcyorum.  Umar\u0131m bu payla\u015f\u0131m\u0131m, benzer projeler \u00fczerinde \u00e7al\u0131\u015fanlar i\u00e7in faydal\u0131 olur.<\/p>\n
Faydal\u0131 bulabilece\u011finiz kaynaklar:<\/p>\n