"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduzione", "hProperties": { "id": "introduzione" } }, "depth": 2, "value": "Introduzione" }, { "data": { "id": "contesto", "hProperties": { "id": "contesto" } }, "depth": 2, "value": "Contesto" }, { "data": { "id": "che-cosè-lo-sviluppo-guidato-dalla-configurazione-cdd", "hProperties": { "id": "che-cosè-lo-sviluppo-guidato-dalla-configurazione-cdd" } }, "depth": 2, "value": "Che cos'è lo Sviluppo Guidato dalla Configurazione (CDD)" }, { "data": { "id": "cosè-un-modulo-dinamico", "hProperties": { "id": "cosè-un-modulo-dinamico" } }, "depth": 2, "value": "Cos'è un Modulo Dinamico?" }, { "data": { "id": "progettare-lo-schema", "hProperties": { "id": "progettare-lo-schema" } }, "depth": 2, "value": "Progettare lo Schema" }, { "data": { "id": "costruire-il-modulo-con-react-hook-form", "hProperties": { "id": "costruire-il-modulo-con-react-hook-form" } }, "depth": 2, "value": "Costruire il modulo con React-Hook-Form" }, { "data": { "id": "conclusione", "hProperties": { "id": "conclusione" } }, "depth": 2, "value": "Conclusione" }]; const readingTime = { "minutes": 3, "words": 1011, "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: "introduzione", children: ["Introduzione", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduzione", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/connectors/", children: "I connettori" }), " svolgono un ruolo critico in Logto. Con il loro aiuto, Logto consente agli utenti finali di utilizzare la registrazione o l'accesso senza password e le capacità di accesso con account social. Logto consente agli utenti di installare o creare i propri connettori, e ci sono già più di 20 ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/connectors", children: "connettori ufficiali" }), ". I nostri connettori sono progettati per essere altamente flessibili e consentono agli utenti di installare o anche creare i propri. Allo stesso tempo, è facile sviluppare un nuovo connettore. Per raggiungere questo obiettivo, abbiamo progettato e implementato una soluzione chiamata \"Dynamic Form\" ispirata allo Sviluppo Guidato dalla Configurazione (Config Driven Development, CDD)."] }), "\n", _jsxs(_components.h2, { id: "contesto", children: ["Contesto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#contesto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "La configurazione per il connettore di Logto è un JSON che, sebbene flessibile, può essere difficile da modificare e convalidare. All'inizio questo non è un grosso problema, perché in quel momento la maggior parte delle configurazioni JSON era simile a:" }), "\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: "Ma poiché supportiamo sempre più fornitori e protocolli, le cose hanno cominciato a cambiare. Prendiamo il \"connettore SAML\" come esempio, ci sono più di 10 chiavi nella configurazione JSON e il tipo di valore è complesso: ci sono stringhe, numeri, JSON, valori selezionati e stringhe multilinea per i certificati." }), "\n", _jsx(_components.p, { children: "Quindi pensiamo che sia il momento di introdurre un modulo ben progettato per sostituire l'editor JSON. Il connettore Logto è progettato per funzionare come un'applicazione di terze parti, quindi non è una soluzione fattibile utilizzare moduli hardcoded. Il risultato è un forte bisogno di moduli dinamici facili da gestire e dotati di una buona esperienza utente allo stesso tempo. Il modulo per il connettore SAML che abbiamo menzionato sopra appare come:" }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/saml_c9a655b1ed.webp", alt: "Configurazione del connettore SAML", width: "700px" }) }), "\n", _jsxs(_components.h2, { id: "che-cosè-lo-sviluppo-guidato-dalla-configurazione-cdd", children: ["Che cos'è lo Sviluppo Guidato dalla Configurazione (CDD)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#che-cosè-lo-sviluppo-guidato-dalla-configurazione-cdd", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Il CDD, o Sviluppo Guidato dai Componenti, presenta un approccio alternativo alla costruzione di applicazioni. Nel metodo convenzionale, i lead architect creano progetti basati sulle esigenze aziendali; l'applicazione viene quindi sviluppata e distribuita, e ogni modifica viene eseguita attraverso elementi aggiuntivi o attraverso un difficile refactoring." }), "\n", _jsx(_components.p, { children: "Al contrario, il CDD si concentra sulla costruzione di componenti indipendenti fin dall'inizio, partendo dal livello più fondamentale. Un'interfaccia, tipicamente JSON, viene stabilita per assemblare l'interfaccia utente di livello superiore. Questo metodo, che coinvolge la combinazione di componenti riutilizzabili e un progetto JSON, consente agli sviluppatori di creare applicazioni in modo più flessibile e scalabile." }), "\n", _jsx(_components.p, { children: "L'essenza del CDD risiede nella sua utilizzazione della modularità per realizzare un insieme di componenti debolmente collegati, che vengono poi assemblati usando un'interfaccia standardizzata." }), "\n", _jsxs(_components.h2, { id: "cosè-un-modulo-dinamico", children: ["Cos'è un Modulo Dinamico?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#cosè-un-modulo-dinamico", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Adottare l'approccio dello Sviluppo Guidato dalla Configurazione (CDD) ci consente di creare moduli web dinamici. Questi non sono moduli ordinari con campi statici e immutabili; piuttosto, sono entità dinamiche con campi generati in base a un file JSON. La bellezza di questi moduli web dinamici risiede nella loro flessibilità: se è necessario apportare una modifica nei campi del modulo, basta aggiornare la configurazione JSON. Questo livello di adattabilità rende i moduli web dinamici una soluzione ideale per i connettori Logto, che richiedono diverse configurazioni di modulo sconosciute a Logto." }), "\n", _jsxs(_components.h2, { id: "progettare-lo-schema", children: ["Progettare lo Schema", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#progettare-lo-schema", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Abbiamo progettato lo schema come una gamma di elementi di modulo; ciascun elemento può avere un nome, un'etichetta, un segnaposto e, la cosa più importante, un tipo. Abbiamo 6 tipi di elementi di modulo, definiti come un 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: "E la definizione del tipo di elemento di modulo è:" }), "\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: "Quindi lo schema completo è:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type Form = FormItem[];\n" }) }), "\n", _jsxs(_components.p, { children: ["Ma c'è un piccolo problema: il tipo di modulo \"select\" richiede un elenco di opzioni, quindi aggiungi questo campo a ", _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: "costruire-il-modulo-con-react-hook-form", children: ["Costruire il modulo con React-Hook-Form", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#costruire-il-modulo-con-react-hook-form", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Ora che lo schema è impostato, possiamo costruire il modulo nel front end basandoci sullo schema. Useremo React Hook Form per ottenere questo risultato." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://react-hook-form.com/", children: "React-Hook-Form" }), " è uno strumento potente per costruire moduli efficienti e facili da usare in React."] }), "\n", _jsxs(_components.p, { children: ["La prima cosa è inizializzare un modulo; supponiamo che la configurazione JSON sia stata recuperata e sia chiamata ", _jsx(_components.code, { children: "formItems" }), ", e i dati nel modulo siano ", _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: "Quindi, implementa l'elemento di controllo del modulo secondo il tipo; ecco una semplice dimostrazione:" }), "\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: "conclusione",
      children: ["Conclusione", _jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#conclusione",
        children: _jsx(_components.span, {
          children: "#"
        })
      })]
    }), "\n", _jsx(_components.p, {
      children: "La versatilità dello Sviluppo Guidato dalla Configurazione (CDD) emerge quando viene applicata alla creazione di moduli dinamici, specialmente nel caso dei connettori di Logto. I vantaggi sono due:"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "Per gli sviluppatori, semplifica il processo di creazione di moduli interattivi e facili da usare. Invece di gestire complessità di codice intricate, gli sviluppatori devono solo definire un file JSON per ottenere le interfacce utente meglio progettate e intuitive create dal team di Logto."
      }), "\n", _jsx(_components.li, {
        children: "Per gli utenti, questo approccio semplifica notevolmente il processo di configurazione di un connettore. Elimina la complessità dall'integrazione, rendendo più facile per gli utenti integrare Logto con funzionalità di accesso sociale, così come con servizi email o SMS."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Di recente, gli articoli che promuovono il Low Code sono onnipresenti su Internet. Questa soluzione è stata sviluppata dalla prospettiva delle effettive esigenze degli utenti e crediamo che sia una grande rappresentazione del Low Code."
    }), "\n", _jsx(_components.p, {
      children: "Vuoi provarlo? Vai su Logto Cloud e scegli un connettore."
    }), "\n", _jsx(LogtoCloudButton, {
      children: "Prova Logto oggi"
    })]
  });
}
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>