"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "inleiding", "hProperties": { "id": "inleiding" } }, "depth": 2, "value": "Inleiding" }, { "data": { "id": "achtergrond", "hProperties": { "id": "achtergrond" } }, "depth": 2, "value": "Achtergrond" }, { "data": { "id": "wat-is-config-driven-development-cdd", "hProperties": { "id": "wat-is-config-driven-development-cdd" } }, "depth": 2, "value": "Wat is Config Driven Development (CDD)" }, { "data": { "id": "wat-is-een-dynamic-form", "hProperties": { "id": "wat-is-een-dynamic-form" } }, "depth": 2, "value": "Wat is een Dynamic Form?" }, { "data": { "id": "ontwerpen-van-schema", "hProperties": { "id": "ontwerpen-van-schema" } }, "depth": 2, "value": "Ontwerpen van Schema" }, { "data": { "id": "bouwen-van-het-formulier-met-react-hook-form", "hProperties": { "id": "bouwen-van-het-formulier-met-react-hook-form" } }, "depth": 2, "value": "Bouwen van het formulier met React-Hook-Form" }, { "data": { "id": "conclusie", "hProperties": { "id": "conclusie" } }, "depth": 2, "value": "Conclusie" }]; const readingTime = { "minutes": 3, "words": 1022, "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: "inleiding", children: ["Inleiding", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#inleiding", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/connectors/", children: "Connectors" }), " spelen een cruciale rol in Logto. Met hun hulp stelt Logto eindgebruikers in staat om te registreren zonder wachtwoord of in te loggen en in te loggen met sociale accounts. Logto laat gebruikers hun eigen connectors installeren of bouwen, en er zijn al meer dan 20 ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/connectors", children: "officiële connectors" }), ". Onze connectors zijn ontworpen om zeer flexibel te zijn, en staan gebruikers toe om hun eigen te installeren of zelfs te bouwen. Tegelijkertijd is het eenvoudig om een nieuwe connector te ontwikkelen. Om dat te bereiken, hebben we een oplossing ontworpen en geïmplementeerd genaamd \"Dynamic Form\" die is geïnspireerd door Config Driven Development (CDD)."] }), "\n", _jsxs(_components.h2, { id: "achtergrond", children: ["Achtergrond", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#achtergrond", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "De configuratie voor Logto's connector is een JSON die, hoewel flexibel, uitdagend kan zijn om te bewerken en te valideren. In het begin was dat geen groot probleem, omdat de meeste JSON-configuraties toen nog zoiets waren als:" }), "\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: "Maar naarmate we meer en meer aanbieders en protocollen ondersteunen, begonnen de dingen te veranderen. Neem de \"SAML-connector\" als voorbeeld: er zijn meer dan 10 sleutels in de JSON-configuratie, en de waarde-typen zijn complex; er zijn strings, nummers, JSON's, geselecteerde waarden en meerregelige strings voor certificaten." }), "\n", _jsx(_components.p, { children: "Dus denken we dat het tijd is om een goed ontworpen formulier te introduceren ter vervanging van de JSON-editor. De Logto Connector is ontworpen om te werken als een applicatie van derden, dus het hardcoden van formulieren is geen haalbare oplossing. Het resultaat is een sterke behoefte aan dynamische formulieren die gemakkelijk te beheren zijn en tegelijkertijd een goede gebruikerservaring bieden. Het formulier voor de SAML-connector dat we eerder noemden, ziet eruit als:" }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/saml_c9a655b1ed.webp", alt: "SAML connector config", width: "700px" }) }), "\n", _jsxs(_components.h2, { id: "wat-is-config-driven-development-cdd", children: ["Wat is Config Driven Development (CDD)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wat-is-config-driven-development-cdd", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CDD, of Component Driven Development, biedt een alternatief voor het bouwen van applicaties. In de traditionele methode creëren hoofdarkitecten ontwerpen op basis van zakelijke behoeften. De applicatie wordt vervolgens ontwikkeld en ingezet, en eventuele wijzigingen worden uitgevoerd door extra elementen of door lastige refactoring." }), "\n", _jsx(_components.p, { children: "In tegenstelling hiermee richt CDD zich op het bouwen van onafhankelijke componenten vanaf het begin, te beginnen op het meest fundamentele niveau. Een interface, meestal JSON, wordt vastgesteld om de gebruikersinterface op hoger niveau in elkaar te zetten. Deze methode, waarbij de combinatie van herbruikbare componenten en een JSON-blauwdruk betrokken is, stelt ontwikkelaars in staat om op een flexibele en schaalbare manier applicaties te bouwen." }), "\n", _jsx(_components.p, { children: "De essentie van CDD ligt in het gebruik van modulariteit om een losjes gekoppelde set componenten te maken, die vervolgens worden samengebracht met behulp van een gestandaardiseerde interface." }), "\n", _jsxs(_components.h2, { id: "wat-is-een-dynamic-form", children: ["Wat is een Dynamic Form?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wat-is-een-dynamic-form", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Door de benadering van Config Driven Development (CDD) te omarmen, kunnen we dynamische webformulieren maken. Dit zijn geen gewone formulieren met statische, onveranderlijke velden; eerder zijn het dynamische entiteiten met velden die worden gegenereerd op basis van een JSON-bestand. Het mooie van deze dynamische webformulieren ligt in hun flexibiliteit – als er een verandering in de formuliervelden vereist is, is het enige wat nodig is een update van de JSON-configuratie. Dit niveau van aanpasbaarheid maakt dynamische webformulieren een ideale oplossing voor Logto Connectors, die verschillende formulierconfiguraties vereisen die onbekend zijn voor Logto." }), "\n", _jsxs(_components.h2, { id: "ontwerpen-van-schema", children: ["Ontwerpen van Schema", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ontwerpen-van-schema", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Wij hebben het schema ontworpen als een reeks formulieritems, elk item kan een naam, label, placeholder hebben en het belangrijkste: het type. We hebben 6 soorten formulieritems, en die zijn gedefinieerd als een enum:" }), "\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: "En de type-definitie van een formulieritem is:" }), "\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: "Dan is het volledige schema:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type Form = FormItem[];\n" }) }), "\n", _jsxs(_components.p, { children: ["Maar er is een klein probleem: het formulier type \"select\" vereist een lijst met opties, dus voeg dit veld toe aan ", _jsx(_components.code, { children: "FormItem" }), ":"] }), "\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: "bouwen-van-het-formulier-met-react-hook-form", children: ["Bouwen van het formulier met React-Hook-Form", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bouwen-van-het-formulier-met-react-hook-form", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Nu het schema is vastgesteld, kunnen we het formulier aan de voorkant bouwen op basis van het schema. We zullen React Hook Form gebruiken om dat te bereiken." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://react-hook-form.com/", children: "React-Hook-Form" }), " is een krachtig hulpmiddel voor het bouwen van efficiënte, gebruiksvriendelijke formulieren in React."] }), "\n", _jsxs(_components.p, { children: ["Het eerste wat je moet doen is het initialiseren van een formulier. Stel dat de JSON-configuratie is opgehaald en ", _jsx(_components.code, { children: "formItems" }), " wordt genoemd, en de gegevens in het formulier zijn ", _jsx(_components.code, { children: "formData" }), ":"] }), "\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: "Vervolgens, implementeer formuliercontrole-elementen volgens het type. Hier is een eenvoudige demonstratie:" }), "\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: "conclusie",
      children: ["Conclusie", _jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#conclusie",
        children: _jsx(_components.span, {
          children: "#"
        })
      })]
    }), "\n", _jsx(_components.p, {
      children: "De veelzijdigheid van Config Driven Development (CDD) komt tot uiting wanneer het wordt toegepast op het creëren van dynamische formulieren, vooral in het geval van de connectors van Logto. De voordelen zijn tweeledig:"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "Voor ontwikkelaars vereenvoudigt het het proces van het creëren van interactieve en gebruiksvriendelijke formulieren. In plaats van te worstelen met complexe codering, hoeven ontwikkelaars alleen maar een JSON-bestand te definiëren om de beter ontworpen, intuïtieve gebruikersinterfaces te verkrijgen die door het Logto-team zijn ontworpen."
      }), "\n", _jsx(_components.li, {
        children: "Voor gebruikers wordt het instelproces van een connector aanzienlijk vereenvoudigd. Het haalt de complexiteit uit de integratie en maakt het gemakkelijker voor gebruikers om Logto te integreren met functies voor sociale inlog, evenals e-mail- of SMS-diensten."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Recent zijn artikelen die Low Code promoten overal op internet te vinden. Deze oplossing is ontwikkeld vanuit het perspectief van daadwerkelijke gebruikersbehoeften, en wij geloven dat het een uitstekende weergave is van Low Code."
    }), "\n", _jsx(_components.p, {
      children: "Wil je het proberen? Ga naar Logto Cloud en kies een connector."
    }), "\n", _jsx(LogtoCloudButton, {
      children: "Probeer Logto Vandaag"
    })]
  });
}
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>