{"id":15339,"date":"2025-03-16T12:30:16","date_gmt":"2025-03-16T09:30:16","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/ai-api-yanitlarini-zod-ve-ajv-ile-dogrulama-ve-frontendinizi-koruma\/"},"modified":"2025-03-16T12:30:16","modified_gmt":"2025-03-16T09:30:16","slug":"ai-api-yanitlarini-zod-ve-ajv-ile-dogrulama-ve-frontendinizi-koruma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/ai-api-yanitlarini-zod-ve-ajv-ile-dogrulama-ve-frontendinizi-koruma\/","title":{"rendered":"AI API Yan\u0131tlar\u0131n\u0131 Zod ve AJV ile Do\u011frulama ve Frontend’inizi Koruma"},"content":{"rendered":"

<\/p>\n

AI API Yan\u0131tlar\u0131n\u0131 Zod ve AJV ile Do\u011frulama ve Frontend’inizi Koruma<\/p>\n

Yapay zeka API’leri giderek daha pop\u00fcler hale geliyor. Ancak, bu API’lerden gelen verilerin beklenmedik bi\u00e7imlerde veya hatal\u0131 \u015fekilde gelmesi olas\u0131l\u0131\u011f\u0131 da y\u00fcksektir. Bu durum, frontend uygulamalar\u0131n\u0131z\u0131n \u00e7\u00f6kmesine veya beklenmedik davran\u0131\u015flar sergilemesine neden olabilir. Bu sorunu \u00e7\u00f6zmek i\u00e7in g\u00fc\u00e7l\u00fc veri do\u011frulama ara\u00e7lar\u0131na ihtiya\u00e7 duyars\u0131n\u0131z. \u0130\u015fte tam bu noktada Zod ve AJV devreye giriyor.<\/p>\n

Zod ve AJV, JavaScript ve TypeScript i\u00e7in g\u00fc\u00e7l\u00fc veri do\u011frulama k\u00fct\u00fcphaneleridir. Bu k\u00fct\u00fcphaneler, API yan\u0131tlar\u0131n\u0131z\u0131 \u00f6nceden tan\u0131mlanm\u0131\u015f \u015femalara g\u00f6re do\u011frulaman\u0131za olanak tan\u0131r. B\u00f6ylece, beklenmeyen veriler nedeniyle olu\u015fabilecek sorunlar\u0131 \u00f6nleyebilirsiniz. \u00d6rne\u011fin, API’den gelen bir kullan\u0131c\u0131 nesnesinin t\u00fcm gerekli alanlar\u0131 i\u00e7erdi\u011finden emin olmak veya bir say\u0131n\u0131n belirli bir aral\u0131kta oldu\u011fundan emin olmak i\u00e7in bu k\u00fct\u00fcphaneleri kullanabilirsiniz. <\/p>\n

Zod ile API Yan\u0131t Do\u011frulama<\/h2>\n

Zod, TypeScript ile m\u00fckemmel bir uyumlulu\u011fa sahiptir ve daha okunabilir ve yaz\u0131m\u0131 daha kolay bir s\u00f6zdizimi sunar. A\u015fa\u011f\u0131daki \u00f6rnekte, bir kullan\u0131c\u0131 nesnesini do\u011frulamak i\u00e7in Zod nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 g\u00f6rebilirsiniz:<\/p>\n

\nimport { z } from 'zod';\n\nconst userSchema = z.object({\n  id: z.number(),\n  name: z.string().min(3),\n  email: z.string().email(),\n});\n\nconst apiResponse = { id: 1, name: 'Fatih', email: 'fatih@soysal.com' };\n\nconst validatedResponse = userSchema.parse(apiResponse);\n\nconsole.log(validatedResponse); \/\/ Do\u011frulanm\u0131\u015f kullan\u0131c\u0131 nesnesi\n<\/code><\/pre>\n
Bu \u00f6rnekte, userSchema<\/code>, kullan\u0131c\u0131 nesnesinin yap\u0131s\u0131n\u0131 tan\u0131mlar.  z.object()<\/code>, bir nesne \u015femas\u0131 olu\u015ftururken, z.number()<\/code>, z.string()<\/code> ve z.email()<\/code> gibi fonksiyonlar da veri tiplerini belirtir.  userSchema.parse()<\/code> fonksiyonu, API yan\u0131t\u0131n\u0131 do\u011frulama i\u015flemini ger\u00e7ekle\u015ftirir.  E\u011fer yan\u0131t \u015fema ile uyu\u015fmazsa, bir hata f\u0131rlat\u0131l\u0131r.  Bu, uygulaman\u0131z\u0131n \u00e7\u00f6kmesini engeller.<\/p>\n
AJV ile API Yan\u0131t Do\u011frulama<\/h2>\n
AJV, daha esnek bir yakla\u015f\u0131m sunar ve JSON Schema’y\u0131 destekler. Bu,  farkl\u0131 API’lerden gelen \u00e7e\u015fitli veri yap\u0131lar\u0131yla \u00e7al\u0131\u015f\u0131rken daha geni\u015f bir uyumluluk sa\u011flar.  Ancak, Zod’a g\u00f6re daha fazla konfig\u00fcrasyon gerektirebilir.<\/p>\n
\nconst Ajv = require('ajv');\nconst ajv = new Ajv();\n\nconst schema = {\n  type: \"object\",\n  properties: {\n    id: { type: \"integer\" },\n    name: { type: \"string\", minLength: 3 },\n    email: { type: \"string\", format: \"email\" }\n  },\n  required: [\"id\", \"name\", \"email\"]\n};\n\nconst apiResponse = { id: 1, name: 'Fatih', email: 'fatih@soysal.com' };\n\nconst valid = ajv.validate(schema, apiResponse);\n\nif (valid) {\n  console.log(apiResponse); \/\/ Do\u011frulanm\u0131\u015f kullan\u0131c\u0131 nesnesi\n} else {\n  console.error(ajv.errors); \/\/ Do\u011frulama hatalar\u0131\n}\n<\/code><\/pre>\n
Bu \u00f6rnekte, AJV kullanarak ayn\u0131 kullan\u0131c\u0131 nesnesini do\u011frulad\u0131k.  JSON Schema’da, her alan\u0131n tipi, minimum uzunlu\u011fu ve gerekli olup olmad\u0131\u011f\u0131 a\u00e7\u0131k\u00e7a belirtilir.  ajv.validate()<\/code> fonksiyonu, API yan\u0131t\u0131n\u0131 \u015fema ile kar\u015f\u0131la\u015ft\u0131r\u0131r ve sonu\u00e7 olarak bir boolean de\u011feri d\u00f6nd\u00fcr\u00fcr.  Hatalar, ajv.errors<\/code> \u00f6zelli\u011fi ile eri\u015filebilir.<\/p>\n
Zod mu AJV mi?<\/h2>\n
Hangisini kullanaca\u011f\u0131n\u0131z projenizin ihtiya\u00e7lar\u0131na ve tercihlerinize ba\u011fl\u0131d\u0131r. Zod, TypeScript projeleri i\u00e7in daha iyi bir se\u00e7im olabilir \u00e7\u00fcnk\u00fc daha iyi tip g\u00fcvenli\u011fi ve daha temiz bir s\u00f6zdizimi sunar.  AJV ise daha esnek ve JSON Schema ile uyumlu olmas\u0131 nedeniyle daha geni\u015f bir uyumluluk sunar.  Her iki k\u00fct\u00fcphane de g\u00fc\u00e7l\u00fc ve etkili veri do\u011frulama ara\u00e7lar\u0131d\u0131r.<\/p>\n
\u00d6nemli Not:<\/strong>  API yan\u0131tlar\u0131n\u0131 do\u011frulamak, frontend uygulamalar\u0131n\u0131z\u0131n g\u00fcvenilirli\u011fini ve sa\u011flaml\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. Beklenmedik veriler nedeniyle olu\u015fabilecek hatalar\u0131 yakalaman\u0131za ve kullan\u0131c\u0131lara daha iyi bir deneyim sunman\u0131za yard\u0131mc\u0131 olur.  Bu k\u00fct\u00fcphaneleri kullanarak, API geli\u015ftirme s\u00fcrecinizde olas\u0131 sorunlar\u0131 \u00f6nceden tespit edebilir ve daha sa\u011flam bir uygulama geli\u015ftirebilirsiniz.  Daha detayl\u0131 bilgi i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.<\/p>\n
Daha fazla bilgi i\u00e7in a\u015fa\u011f\u0131daki kaynaklara g\u00f6z atabilirsiniz:<\/p>\n