"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "giriş", "hProperties": { "id": "giriş" } }, "depth": 2, "value": "Giriş" }, { "data": { "id": "arka-plan", "hProperties": { "id": "arka-plan" } }, "depth": 2, "value": "Arka Plan" }, { "data": { "id": "yapılandırma-odaklı-geliştirme-cdd-nedir", "hProperties": { "id": "yapılandırma-odaklı-geliştirme-cdd-nedir" } }, "depth": 2, "value": "Yapılandırma Odaklı Geliştirme (CDD) Nedir" }, { "data": { "id": "dinamik-form-nedir", "hProperties": { "id": "dinamik-form-nedir" } }, "depth": 2, "value": "Dinamik Form Nedir?" }, { "data": { "id": "şema-tasarlama", "hProperties": { "id": "şema-tasarlama" } }, "depth": 2, "value": "Şema Tasarlama" }, { "data": { "id": "react-hook-form-ile-formu-oluşturma", "hProperties": { "id": "react-hook-form-ile-formu-oluşturma" } }, "depth": 2, "value": "React-Hook-Form ile formu oluşturma" }, { "data": { "id": "sonuç", "hProperties": { "id": "sonuç" } }, "depth": 2, "value": "Sonuç" }]; const readingTime = { "minutes": 3, "words": 843, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "giriş", children: ["Giriş", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#giriş", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/connectors/", children: "Bağlayıcılar" }), ", Logto'da kritik bir rol oynar. Onların yardımıyla, Logto son kullanıcıların sosyal hesaplarla giriş yapabilme yeteneği ve şifresiz kayıt veya giriş yapmalarını sağlar. Logto, kullanıcıların kendi bağlayıcılarını kurmalarına veya oluşturmalarına izin verir ve hali hazırda 20'den fazla ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/connectors", children: "resmi bağlayıcı" }), " bulunmaktadır. Bağlayıcılarımız yüksek derecede esnek olacak şekilde tasarlanmıştır ve kullanıcıların kendi bağlayıcılarını kurmalarına veya oluşturmalarına izin verir. Aynı zamanda, yeni bir bağlayıcı geliştirmek kolaydır. Bunu başarmak için, Konfigürasyon Odaklı Geliştirme (CDD) esinlenilerek tasarlanmış ve uygulanmış bir çözüm olan “Dinamik Form” adlı bir çözüm tasarladık."] }), "\n", _jsxs(_components.h2, { id: "arka-plan", children: ["Arka Plan", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#arka-plan", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Logto'nun bağlayıcısı için yapılandırma, esnek olmasına rağmen düzenlenmesi ve doğrulanması zor olabilen bir JSON'dur. Başlangıçta, bu büyük bir sorun değildi, çünkü o zaman çoğu JSON yapılandırması şu şekildeydi:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"appId\": \"xxx\",\n \"appSecret\": \"xx\"\n}\n" }) }), "\n", _jsx(_components.p, { children: "Ancak daha fazla sağlayıcı ve protokolü destekledikçe, işler değişmeye başladı. \"SAML bağlayıcısını\" örnek olarak alalım, JSON yapılandırmasında 10'dan fazla anahtar var ve değer türü karmaşıktır, içinde stringler, sayılar, JSON'lar, seçim değerleri ve sertifikalar için çok satırlı stringler bulunur." }), "\n", _jsx(_components.p, { children: "Bu nedenle, JSON düzenleyiciyi değiştirmek için iyi tasarlanmış bir form getirmenin zamanı geldiğini düşünüyoruz. Logto Bağlayıcısı, üçüncü taraf bir uygulama olarak çalışacak şekilde tasarlanmıştır, dolayısıyla formların kodlanmış sabit halleri uygulanabilir bir çözüm değildir. Sonuç, yönetimi kolay ve aynı zamanda iyi bir kullanıcı deneyimine sahip dinamik formlar için güçlü bir ihtiyaçtır. Yukarıda bahsettiğimiz SAML bağlayıcısının formu şu şekildedir:" }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/saml_c9a655b1ed.webp", alt: "SAML bağlayıcı yapılandırması", width: "700px" }) }), "\n", _jsxs(_components.h2, { id: "yapılandırma-odaklı-geliştirme-cdd-nedir", children: ["Yapılandırma Odaklı Geliştirme (CDD) Nedir", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#yapılandırma-odaklı-geliştirme-cdd-nedir", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CDD veya Bileşen Odaklı Geliştirme, uygulama inşa etmenin alternatif bir yaklaşımını sunar. Geleneksel yöntemde, lider mimarlar iş ihtiyaçlarına göre tasarımlar oluşturur, ardından uygulama geliştirilir ve dağıtılır ve herhangi bir değişiklik ya ek elemanlarla ya da zor bir yeniden düzenlemeyle yürütülür." }), "\n", _jsx(_components.p, { children: "Buna karşılık, CDD, uygulamaların inşasına baştan itibaren en temel seviyede bağımsız bileşenler oluşturmaya odaklanır. Tipik olarak JSON olan bir arayüz, daha üst düzey kullanıcı arayüzünü bir araya getirmek için kurulmuştur. Yeniden kullanılabilir bileşenlerin ve bir JSON planının kombinasyonunu içeren bu yöntem, geliştiricilerin uygulamaları daha esnek ve ölçeklenebilir bir şekilde oluşturmasına olanak tanır." }), "\n", _jsx(_components.p, { children: "CDD'nin özü, modülerliği kullanarak gevşek bağlanmış bir bileşen seti tasarlamak ve ardından bunları standartlaştırılmış bir arayüz kullanarak bir araya getirmektir." }), "\n", _jsxs(_components.h2, { id: "dinamik-form-nedir", children: ["Dinamik Form Nedir?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#dinamik-form-nedir", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Konfigürasyon Odaklı Geliştirme (CDD) yaklaşımını benimsemek, dinamik web formları oluşturmamıza olanak tanır. Bunlar, statik, değişmeyen alanlara sahip sıradan formlar değil; aksine, JSON dosyasına dayanarak üretilen alanlara sahip dinamik varlıklardır. Bu dinamik web formlarının güzelliği, esnekliklerinde yatar - form alanlarında bir değişiklik gerekirse, tek yapılması gereken JSON yapılandırmasını güncellemektir. Bu düzeyde uyum sağlama kabiliyeti, farklı form yapılandırmalarına ihtiyaç duyan ve Logto tarafından bilinmeyen Logto Bağlayıcıları için dinamik web formlarını ideal bir çözüm haline getirir." }), "\n", _jsxs(_components.h2, { id: "şema-tasarlama", children: ["Şema Tasarlama", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#şema-tasarlama", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Şemayı, her bir öğenin adı, etiketi, yer tutucusu ve en önemlisi, türü olabilecek bir form öğeleri dizisi olacak şekilde tasarladık. 6 form öğesi türümüz var ve bir enum olarak tanımladık:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "enum FormItemType {\n Text = 'Text',\n Number = 'Number',\n MultilineText = 'MultilineText',\n Switch = 'Switch',\n Select = 'Select',\n Json = 'Json',\n}\n" }) }), "\n", _jsx(_components.p, { children: "Ve form öğesi için tür tanımı şu şekildedir:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type FormItem = {\n type: FormItemType;\n name: string;\n label: string;\n placeholder?: string;\n required?: string;\n description?: string;\n tooltip?: string;\n};\n" }) }), "\n", _jsx(_components.p, { children: "Daha sonra tam şema:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type Form = FormItem[];\n" }) }), "\n", _jsxs(_components.p, { children: ["Ancak küçük bir sorun var, \"select\" form türü bir seçenek listesi gerektiriyor, bu yüzden bu alanı ", _jsx(_components.code, { children: "FormItem" }), "'a ekleyin:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type BaseFormItem = {\n name: string;\n label: string;\n placeholder?: string;\n required?: string;\n description?: string;\n tooltip?: string;\n};\n\ntype FormItem =\n | ({\n type:\n | FormItemType.Text\n | FormItemType.Number\n | FormItemType.MultilineText\n | FormItemType.Switch\n | FormItemType.Json;\n } & BaseFormItem)\n | ({ type: FormItemType.Select } & BaseFormItem & {\n options: Array<{ value: string; title: string }>;\n });\n" }) }), "\n", _jsxs(_components.h2, { id: "react-hook-form-ile-formu-oluşturma", children: ["React-Hook-Form ile formu oluşturma", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#react-hook-form-ile-formu-oluşturma", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Şimdi şema belirlendiğine göre, şemaya dayalı olarak arka uçta formu oluşturabiliriz. Bunu başarmak için React Hook Form kullanacağız." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://react-hook-form.com/", children: "React-Hook-Form" }), ", React'te verimli, kullanımı kolay formlar oluşturmak için güçlü bir araçtır."] }), "\n", _jsxs(_components.p, { children: ["İlk iş bir form başlatmak, JSON yapılandırmanın alınan ve ", _jsx(_components.code, { children: "formItems" }), " olarak adlandırıldığını ve formdaki verilerin ", _jsx(_components.code, { children: "formData" }), " olduğunu varsayalım:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "type FormData = Record;\n\ntype Props = {\n formItems: FormItem[];\n formData: FormData;\n};\n\nconst Form = ({ formItems, formData }: Props) => {\n const { register, control, handleSubmit } = useForm({ defaultValues: formData });\n\n const onSubmit = handleSubmit(async (data: FormData) => {\n await submitFormToServer(data);\n });\n\n return ;\n};\n" }) }), "\n", _jsx(_components.p, { children: "Daha sonra, form kontrol elemanını türüne göre uygulayın, işte basit bir gösterim:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "

\n {formItems.map((formItem) => (\n

{formItem.label}

\n {formItem.type === FormItemType.Text && (\n \n )}\n {formItem.type === FormItemType.Number && (\n \n )}\n {formItem.type === FormItemType.MultilineText && (\n

\n        )}\n        {formItem.type === FormItemType.Switch && (\n          <input type=\"checkbox\" {...register(formItem.name, { required: formItem.required })} />\n        )}\n        {formItem.type === FormItemType.Select && (\n          <select {...register(formItem.name, { required: formItem.required })}>\n            {formItem.options.map((option) => (\n              <option key={option.value} value={option.value}>\n                {option.title}\n              </option>\n            ))}\n          </select>\n        )}\n      </div>\n    </div>\n  ))}\n</form>\n"
      })
    }), "\n", _jsxs(_components.h2, {
      id: "sonuç",
      children: ["Sonuç", _jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#sonuç",
        children: _jsx(_components.span, {
          children: "#"
        })
      })]
    }), "\n", _jsx(_components.p, {
      children: "Yapılandırma Odaklı Geliştirme (CDD)'nin esnekliği, özellikle Logto'nun bağlayıcıları durumunda dinamik form oluşturma uygulandığında öne çıkıyor. Avantajları iki yönlüdür:"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "Geliştiriciler için, etkileşimli ve kullanıcı dostu formlar oluşturma sürecini basitleştirir. Karmaşık kodlama zorluklarıyla uğraşmak yerine, geliştiricilerin yalnızca daha iyi tasarlanmış, Logto ekibi tarafından tasarlanan sezgisel kullanıcı arayüzleri elde etmek için bir JSON dosyasını tanımlamaları yeterlidir."
      }), "\n", _jsx(_components.li, {
        children: "Kullanıcılar için, bu yaklaşım bir bağlayıcı kurma sürecini büyük ölçüde basitleştirir. Entegrasyonun karmaşıklığını ortadan kaldırarak kullanıcıların Logto'yu sosyal giriş özellikleri ile birlikte e-posta veya SMS hizmetleri ile entegre etmelerini kolaylaştırır."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Son zamanlarda, internet üzerinde Düşük Kod'u tanıtan makaleler yaygındır. Bu çözüm, gerçek kullanıcı ihtiyaçları açısından geliştirildi ve Düşük Kod'un harika bir temsilcisi olduğuna inanıyoruz."
    }), "\n", _jsx(_components.p, {
      children: "Denemek ister misiniz? Logto Cloud'a gidin ve bir bağlayıcı seçin."
    }), "\n", _jsx(LogtoCloudButton, {
      children: "Bugün Logto'yu Deneyin"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  headings,
  readingTime,
  frontmatter,
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}
</article></body></html>