"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduction", "hProperties": { "id": "introduction" } }, "depth": 2, "value": "Introduction" }, { "data": { "id": "contexte", "hProperties": { "id": "contexte" } }, "depth": 2, "value": "Contexte" }, { "data": { "id": "quest-ce-que-le-développement-guidé-par-la-configuration-cdd", "hProperties": { "id": "quest-ce-que-le-développement-guidé-par-la-configuration-cdd" } }, "depth": 2, "value": "Qu'est-ce que le Développement Guidé par la Configuration (CDD)" }, { "data": { "id": "quest-ce-quun-formulaire-dynamique-", "hProperties": { "id": "quest-ce-quun-formulaire-dynamique-" } }, "depth": 2, "value": "Qu'est-ce qu'un Formulaire Dynamique ?" }, { "data": { "id": "concevoir-le-schéma", "hProperties": { "id": "concevoir-le-schéma" } }, "depth": 2, "value": "Concevoir le Schéma" }, { "data": { "id": "construire-le-formulaire-avec-react-hook-form", "hProperties": { "id": "construire-le-formulaire-avec-react-hook-form" } }, "depth": 2, "value": "Construire le formulaire avec React-Hook-Form" }, { "data": { "id": "conclusion", "hProperties": { "id": "conclusion" } }, "depth": 2, "value": "Conclusion" }]; const readingTime = { "minutes": 4, "words": 1094, "text": "4 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: "introduction", children: ["Introduction", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduction", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/connectors/", children: "Les connecteurs" }), " jouent un rôle crucial dans Logto. Avec leur aide, Logto permet aux utilisateurs finaux d'utiliser l'enregistrement ou la connexion sans mot de passe et les capacités de connexion avec des comptes sociaux. Logto permet aux utilisateurs d'installer ou de créer leurs propres connecteurs, et il y a déjà plus de 20 ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/connectors", children: "connecteurs officiels" }), ". Nos connecteurs sont conçus pour être très flexibles, et permettent aux utilisateurs de les installer ou même de les créer eux-mêmes. En même temps, il est facile de développer un nouveau connecteur. Pour y parvenir, nous avons conçu et mis en œuvre une solution appelée \"Formulaire Dynamique\" inspirée du Développement Guidé par la Configuration (CDD)."] }), "\n", _jsxs(_components.h2, { id: "contexte", children: ["Contexte", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#contexte", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "La configuration du connecteur de Logto est un JSON qui, bien que flexible, peut être difficile à éditer et à valider. Au début, ce n'était pas un gros problème, car à ce moment-là, la plupart des configurations JSON ressemblaient à :" }), "\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: "Mais à mesure que nous supportons de plus en plus de fournisseurs et de protocoles, les choses ont commencé à changer. Prenons l'exemple du \"connecteur SAML\", il y a plus de 10 clés dans la configuration JSON, et le type de valeur est complexe, il y a des chaînes, des nombres, des JSON, des valeurs sélectionnées, et des chaînes multilignes pour le certificat." }), "\n", _jsx(_components.p, { children: "Donc nous pensons qu'il est temps d'introduire un formulaire bien conçu pour remplacer l'éditeur JSON. Le Connecteur Logto est conçu pour fonctionner comme une application tierce, donc il n'est pas envisageable de codifier les formulaires en dur. Le résultat est une forte nécessité de formulaires dynamiques faciles à gérer, et qui offrent une bonne expérience utilisateur en même temps. Le formulaire pour le connecteur SAML que nous avons mentionné ci-dessus ressemble à :" }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/saml_c9a655b1ed.webp", alt: "Configuration du connecteur SAML", width: "700px" }) }), "\n", _jsxs(_components.h2, { id: "quest-ce-que-le-développement-guidé-par-la-configuration-cdd", children: ["Qu'est-ce que le Développement Guidé par la Configuration (CDD)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#quest-ce-que-le-développement-guidé-par-la-configuration-cdd", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Le CDD, ou Développement Guidé par les Composants, propose une approche alternative pour construire des applications. Dans la méthode conventionnelle, les architectes principaux créent des designs basés sur les besoins commerciaux, l'application est ensuite développée et déployée, et toute modification est exécutée soit par des éléments supplémentaires, soit par un refactoring compliqué." }), "\n", _jsx(_components.p, { children: "En revanche, le CDD se concentre sur la construction de composants indépendants dès le début, en commençant au niveau le plus fondamental. Une interface, typiquement JSON, est établie pour assembler l'interface utilisateur de niveau supérieur. Cette méthode, impliquant la combinaison de composants réutilisables et d'un plan JSON, permet aux développeurs de construire facilement des applications de manière plus flexible et évolutive." }), "\n", _jsx(_components.p, { children: "L'essence du CDD réside dans son utilisation de la modularité pour créer un ensemble de composants faiblement liés, qui sont ensuite rassemblés grâce à une interface standardisée." }), "\n", _jsxs(_components.h2, { id: "quest-ce-quun-formulaire-dynamique-", children: ["Qu'est-ce qu'un Formulaire Dynamique ?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#quest-ce-quun-formulaire-dynamique-", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Adopter l'approche du Développement Guidé par la Configuration (CDD) nous permet de créer des formulaires web dynamiques. Ce ne sont pas des formulaires ordinaires avec des champs statiques et inchangeables ; ce sont plutôt des entités dynamiques avec des champs générés à partir d'un fichier JSON. La beauté de ces formulaires web dynamiques réside dans leur flexibilité - si une modification des champs du formulaire est nécessaire, il suffit d'une mise à jour de la configuration JSON. Ce niveau d'adaptabilité rend les formulaires web dynamiques une solution idéale pour les Connecteurs Logto, qui nécessitent différentes configurations de formulaire inconnues pour Logto." }), "\n", _jsxs(_components.h2, { id: "concevoir-le-schéma", children: ["Concevoir le Schéma", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#concevoir-le-schéma", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Nous avons conçu le schéma comme un tableau d'éléments de formulaire, chaque élément peut avoir un nom, un label, un espace réservé et le plus important, un type. Nous avons 6 types d'éléments de formulaire, et ils sont définis comme une énumération :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "enum FormItemType {\n Text = 'Texte',\n Number = 'Nombre',\n MultilineText = 'TexteMultiligne',\n Switch = 'Interrupteur',\n Select = 'Sélectionner',\n Json = 'Json',\n}\n" }) }), "\n", _jsx(_components.p, { children: "Et la définition de type de l'élément de formulaire est :" }), "\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: "Ensuite, le schéma complet est :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type Form = FormItem[];\n" }) }), "\n", _jsxs(_components.p, { children: ["Mais il y a un petit problème, le type de formulaire \"sélectionner\" nécessite une liste d'options, donc ajoutez ce champ à ", _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: "construire-le-formulaire-avec-react-hook-form", children: ["Construire le formulaire avec React-Hook-Form", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#construire-le-formulaire-avec-react-hook-form", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Maintenant que le schéma est défini, nous pouvons construire le formulaire dans le front-end basé sur le schéma. Nous utiliserons React Hook Form pour y parvenir." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://react-hook-form.com/", children: "React-Hook-Form" }), " est un outil puissant pour construire des formulaires efficaces et faciles à utiliser dans React."] }), "\n", _jsxs(_components.p, { children: ["La première chose est d'initier un formulaire, supposons que la configuration JSON est récupérée et appelée ", _jsx(_components.code, { children: "formItems" }), ", et que les données dans le formulaire sont ", _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: "Ensuite, implémentez l'élément de contrôle de formulaire selon le type, voici une simple démonstration :" }), "\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: "conclusion",
      children: ["Conclusion", _jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#conclusion",
        children: _jsx(_components.span, {
          children: "#"
        })
      })]
    }), "\n", _jsx(_components.p, {
      children: "La polyvalence du Développement Guidé par la Configuration (CDD) brille lorsque appliqué à la création de formulaires dynamiques, en particulier dans le cas des connecteurs de Logto. Les avantages sont doubles :"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "Pour les développeurs, cela simplifie le processus de création de formulaires interactifs et conviviaux. Au lieu de gérer des complexités de code complexes, les développeurs n'ont qu'à définir un fichier JSON pour obtenir les interfaces utilisateur mieux conçues et intuitives conçues par l'équipe Logto."
      }), "\n", _jsx(_components.li, {
        children: "Pour les utilisateurs, cette approche simplifie grandement le processus de configuration d'un connecteur. Elle rend l'intégration moins complexe, facilitant pour les utilisateurs l'intégration de Logto avec les fonctionnalités de connexion sociale, ainsi que les services email ou SMS."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Récemment, des articles promouvant le Low Code sont omniprésents sur Internet. Cette solution a été développée du point de vue des besoins réels des utilisateurs, et nous croyons qu'elle est une excellente représentation du Low Code."
    }), "\n", _jsx(_components.p, {
      children: "Vous voulez essayer ? Allez sur Logto Cloud et choisissez un connecteur."
    }), "\n", _jsx(LogtoCloudButton, {
      children: "Essayez Logto Aujourd'hui"
    })]
  });
}
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>