"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "einführung", "hProperties": { "id": "einführung" } }, "depth": 2, "value": "Einführung" }, { "data": { "id": "hintergrund", "hProperties": { "id": "hintergrund" } }, "depth": 2, "value": "Hintergrund" }, { "data": { "id": "was-ist-konfigurationsgesteuerte-entwicklung-cdd", "hProperties": { "id": "was-ist-konfigurationsgesteuerte-entwicklung-cdd" } }, "depth": 2, "value": "Was ist konfigurationsgesteuerte Entwicklung (CDD)" }, { "data": { "id": "was-ist-ein-dynamisches-formular", "hProperties": { "id": "was-ist-ein-dynamisches-formular" } }, "depth": 2, "value": "Was ist ein dynamisches Formular?" }, { "data": { "id": "schema-entwerfen", "hProperties": { "id": "schema-entwerfen" } }, "depth": 2, "value": "Schema entwerfen" }, { "data": { "id": "das-formular-mit-react-hook-form-erstellen", "hProperties": { "id": "das-formular-mit-react-hook-form-erstellen" } }, "depth": 2, "value": "Das Formular mit React-Hook-Form erstellen" }, { "data": { "id": "fazit", "hProperties": { "id": "fazit" } }, "depth": 2, "value": "Fazit" }]; const readingTime = { "minutes": 3, "words": 967, "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: "einführung", children: ["Einführung", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#einführung", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/connectors/", children: "Konnektoren" }), " spielen eine entscheidende Rolle in Logto. Mit ihrer Hilfe ermöglicht Logto den Endbenutzern die passwortlose Registrierung oder Anmeldung sowie die Möglichkeit, sich mit sozialen Konten anzumelden. Logto ermöglicht es den Benutzern, ihre eigenen Konnektoren zu installieren oder zu erstellen, und es gibt bereits mehr als 20 ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/connectors", children: "offizielle Konnektoren" }), ". Unsere Konnektoren sind so konzipiert, dass sie sehr flexibel sind und es den Benutzern erlauben, ihre eigenen zu installieren oder sogar zu entwickeln. Gleichzeitig ist es einfach, einen neuen Konnektor zu entwickeln. Um dies zu erreichen, haben wir eine Lösung namens „Dynamic Form“ entwickelt und implementiert, die von der Config Driven Development (CDD) inspiriert ist."] }), "\n", _jsxs(_components.h2, { id: "hintergrund", children: ["Hintergrund", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#hintergrund", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Die Konfiguration für den Logto-Konnektor ist ein JSON, das zwar flexibel, aber schwer zu bearbeiten und zu validieren sein kann. Am Anfang war das noch kein großes Problem, da die meisten JSON-Konfigurationen zu dieser Zeit folgendermaßen aussahen:" }), "\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: "Aber als wir mehr und mehr Anbieter und Protokolle unterstützen, begannen sich die Dinge zu ändern. Nehmen wir den „SAML-Konnektor“ als Beispiel: Es gibt mehr als 10 Schlüssel in der JSON-Konfiguration, und die Art der Werte ist komplex; es gibt Strings, Zahlen, JSONs, Auswahlwerte und mehrzeilige Strings für Zertifikate." }), "\n", _jsx(_components.p, { children: "Daher denken wir, dass es an der Zeit ist, ein gut gestaltetes Formular einzuführen, um den JSON-Editor zu ersetzen. Der Logto-Konnektor ist so konzipiert, dass er als Drittanbieteranwendung funktioniert, daher ist das Hardcoding von Formularen keine tragfähige Lösung. Das Ergebnis ist ein starker Bedarf an dynamischen Formularen, die einfach zu verwalten sind und gleichzeitig eine gute Benutzererfahrung haben. Das Formular für den oben genannten SAML-Konnektor sieht folgendermaßen aus:" }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/saml_c9a655b1ed.webp", alt: "SAML-Konnektor-Konfiguration", width: "700px" }) }), "\n", _jsxs(_components.h2, { id: "was-ist-konfigurationsgesteuerte-entwicklung-cdd", children: ["Was ist konfigurationsgesteuerte Entwicklung (CDD)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#was-ist-konfigurationsgesteuerte-entwicklung-cdd", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CDD, oder Component Driven Development, bietet einen alternativen Ansatz zur Erstellung von Anwendungen. Im herkömmlichen Verfahren entwerfen leitende Architekten Designs basierend auf den geschäftlichen Anforderungen, die Anwendung wird dann entwickelt und bereitgestellt, und alle Änderungen werden entweder durch zusätzliche Elemente oder durch schwierige Refaktorisierungen ausgeführt." }), "\n", _jsx(_components.p, { children: "Im Gegensatz dazu konzentriert sich CDD darauf, von Anfang an unabhängige Komponenten zu erstellen, beginnend auf der grundlegendsten Ebene. Eine Schnittstelle, typischerweise JSON, wird erstellt, um die Benutzeroberfläche auf höherer Ebene zusammenzustellen. Diese Methode, die die Kombination wiederverwendbarer Komponenten und eines JSON-Blueprints umfasst, ermöglicht es Entwicklern, Anwendungen auf flexiblere und skalierbare Weise bequem zu erstellen." }), "\n", _jsx(_components.p, { children: "Das Wesen von CDD liegt in der Nutzung von Modularität, um eine locker verbundene Menge von Komponenten zu erstellen, die dann über eine standardisierte Schnittstelle zusammengeführt werden." }), "\n", _jsxs(_components.h2, { id: "was-ist-ein-dynamisches-formular", children: ["Was ist ein dynamisches Formular?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#was-ist-ein-dynamisches-formular", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Die Nutzung des konfigurationsgesteuerten Entwicklungsansatzes (CDD) ermöglicht es uns, dynamische Webformulare zu erstellen. Dies sind keine gewöhnlichen Formulare mit statischen, unveränderlichen Feldern, sondern dynamische Entitäten mit Feldern, die basierend auf einer JSON-Datei generiert werden. Die Schönheit dieser dynamischen Webformulare liegt in ihrer Flexibilität – bei Bedarf genügt eine Aktualisierung der JSON-Konfiguration. Dieses Maß an Anpassungsfähigkeit macht dynamische Webformulare zu einer idealen Lösung für Logto-Konnektoren, die unterschiedliche Formularkonfigurationen erfordern, die Logto unbekannt sind." }), "\n", _jsxs(_components.h2, { id: "schema-entwerfen", children: ["Schema entwerfen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#schema-entwerfen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Wir haben das Schema als ein Array von Formularelementen entworfen, wobei jedes Element einen Namen, ein Label, einen Platzhalter und am wichtigsten den Typ haben kann. Wir haben 6 Arten von Formularelementen und definieren diese als 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: "Und die Typdefinition des Formularelements ist:" }), "\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: "Dann ist das vollständige Schema:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type Form = FormItem[];\n" }) }), "\n", _jsxs(_components.p, { children: ["Aber es gibt ein kleines Problem: Der Formular-Typ „select“ benötigt eine Liste von Optionen, daher fügen wir dieses Feld zu ", _jsx(_components.code, { children: "FormItem" }), " hinzu:"] }), "\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: "das-formular-mit-react-hook-form-erstellen", children: ["Das Formular mit React-Hook-Form erstellen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#das-formular-mit-react-hook-form-erstellen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Da das Schema festgelegt ist, können wir das Formular im Frontend basierend auf dem Schema erstellen. Wir verwenden dafür React Hook Form." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://react-hook-form.com/", children: "React-Hook-Form" }), " ist ein leistungsstarkes Werkzeug zum Erstellen effektiver, einfach zu verwendender Formulare in React."] }), "\n", _jsxs(_components.p, { children: ["Das Erste ist, ein Formular zu initialisieren, dabei nehmen wir an, dass die JSON-Konfiguration abgerufen wurde und ", _jsx(_components.code, { children: "formItems" }), " genannt wird, und die Daten im Formular sind ", _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: "Dann implementieren wir das Formularelement entsprechend dem Typ, hier ist eine einfache Darstellung:" }), "\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: "fazit",
      children: ["Fazit", _jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#fazit",
        children: _jsx(_components.span, {
          children: "#"
        })
      })]
    }), "\n", _jsx(_components.p, {
      children: "Die Vielseitigkeit der konfigurationsgesteuerten Entwicklung (CDD) zeigt sich deutlich bei der Anwendung auf die Erstellung dynamischer Formulare, insbesondere im Fall der Logto-Konnektoren. Die Vorteile sind zwei\ngleisig:"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "Für Entwickler vereinfacht es den Prozess der Erstellung interaktiver und benutzerfreundlicher Formulare. Anstatt mit komplexen Kodierungskomplexitäten umzugehen, müssen Entwickler nur eine JSON-Datei definieren, um die besser gestalteten, intuitiven Benutzeroberflächen zu erhalten, die vom Logto-Team entworfen wurden."
      }), "\n", _jsx(_components.li, {
        children: "Für Benutzer vereinfacht dieser Ansatz den Prozess der Einrichtung eines Konnektors erheblich. Es nimmt die Komplexität aus der Integration und macht es den Benutzern einfacher, Logto mit sozialen Anmeldefunktionen sowie E-Mail- oder SMS-Diensten zu integrieren."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "In letzter Zeit sind Artikel, die Low Code bewerben, allgegenwärtig im Internet. Diese Lösung wurde aus der Perspektive der tatsächlichen Benutzerbedürfnisse entwickelt, und wir glauben, dass sie eine hervorragende Darstellung von Low Code ist."
    }), "\n", _jsx(_components.p, {
      children: "Möchtest du es ausprobieren? Gehe zur Logto Cloud und wähle einen Konnektor."
    }), "\n", _jsx(LogtoCloudButton, {
      children: "Teste Logto heute"
    })]
  });
}
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>