"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introdução", "hProperties": { "id": "introdução" } }, "depth": 2, "value": "Introdução" }, { "data": { "id": "contexto", "hProperties": { "id": "contexto" } }, "depth": 2, "value": "Contexto" }, { "data": { "id": "o-que-é-desenvolvimento-orientado-a-configuração-cdd", "hProperties": { "id": "o-que-é-desenvolvimento-orientado-a-configuração-cdd" } }, "depth": 2, "value": "O que é Desenvolvimento Orientado a Configuração (CDD)" }, { "data": { "id": "o-que-é-um-formulário-dinâmico", "hProperties": { "id": "o-que-é-um-formulário-dinâmico" } }, "depth": 2, "value": "O que é um Formulário Dinâmico?" }, { "data": { "id": "projetando-o-esquema", "hProperties": { "id": "projetando-o-esquema" } }, "depth": 2, "value": "Projetando o Esquema" }, { "data": { "id": "construindo-o-formulário-com-react-hook-form", "hProperties": { "id": "construindo-o-formulário-com-react-hook-form" } }, "depth": 2, "value": "Construindo o formulário com React-Hook-Form" }, { "data": { "id": "conclusão", "hProperties": { "id": "conclusão" } }, "depth": 2, "value": "Conclusão" }]; const readingTime = { "minutes": 3, "words": 1016, "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: "introdução", children: ["Introdução", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introdução", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/connectors/", children: "Conectores" }), " desempenham um papel crítico no Logto. Com a ajuda deles, o Logto permite que os usuários finais usem o registro ou login sem senha e as funcionalidades de login com contas sociais. O Logto permite que os usuários instalem ou construam seus próprios conectores, e já existem mais de 20 ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/connectors", children: "conectores oficiais" }), ". Nossos conectores são projetados para serem altamente flexíveis, permitindo que os usuários instalem ou até mesmo construam os seus próprios. Ao mesmo tempo, é fácil desenvolver um novo conector. Para atingir isso, projetamos e implementamos uma solução chamada \"Formulário Dinâmico\" que é inspirada pelo Desenvolvimento Orientado a Configuração (CDD)."] }), "\n", _jsxs(_components.h2, { id: "contexto", children: ["Contexto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#contexto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "A configuração para o conector do Logto é um JSON que, embora flexível, pode ser desafiador de editar e validar. No começo, isso não era um grande problema, pois naquela época, a maioria das configurações JSON eram como:" }), "\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: "Mas à medida que oferecemos suporte para mais e mais provedores e protocolos, as coisas começaram a mudar. Tome o \"conector SAML\" como exemplo, há mais de 10 chaves na configuração JSON, e o tipo de valor é complexo, há strings, números, JSONs, valores selecionáveis e strings de múltiplas linhas para certificado." }), "\n", _jsx(_components.p, { children: "Então achamos que é hora de introduzir um formulário bem projetado para substituir o editor JSON. O Conector Logto é projetado para funcionar como uma aplicação de terceiros, então formular hardcoded não é uma solução viável. O resultado é uma forte necessidade de formulários dinâmicos que sejam fáceis de gerenciar e, ao mesmo tempo, tenham uma boa experiência para o usuário. O formulário para o conector SAML que mencionamos acima parece com:" }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/saml_c9a655b1ed.webp", alt: "Configuração do conector SAML", width: "700px" }) }), "\n", _jsxs(_components.h2, { id: "o-que-é-desenvolvimento-orientado-a-configuração-cdd", children: ["O que é Desenvolvimento Orientado a Configuração (CDD)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#o-que-é-desenvolvimento-orientado-a-configuração-cdd", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CDD, ou Desenvolvimento Orientado a Componentes, apresenta uma abordagem alternativa para a construção de aplicações. No método convencional, arquitetos principais criam designs com base nas necessidades do negócio, a aplicação é então desenvolvida e implementada, e quaisquer modificações são executadas através de elementos adicionais ou de uma refatoração difícil." }), "\n", _jsx(_components.p, { children: "Em contraste, CDD foca na construção de componentes independentes desde o início, começando no nível mais fundamental. Uma interface, tipicamente JSON, é estabelecida para montar a interface do usuário de nível superior. Este método, envolvendo a combinação de componentes reutilizáveis e um projeto em JSON, capacita os desenvolvedores a construir aplicações de maneira mais flexível e escalável." }), "\n", _jsx(_components.p, { children: "A essência do CDD está na sua utilização de modularidade para criar um conjunto de componentes fracamente ligados, que são então reunidos usando uma interface padronizada." }), "\n", _jsxs(_components.h2, { id: "o-que-é-um-formulário-dinâmico", children: ["O que é um Formulário Dinâmico?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#o-que-é-um-formulário-dinâmico", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Adotar a abordagem de Desenvolvimento Orientado a Configuração (CDD) nos permite criar formulários web dinâmicos. Estes não são formulários comuns com campos estáticos e imutáveis; em vez disso, eles são entidades dinâmicas com campos gerados com base em um arquivo JSON. A beleza desses formulários web dinâmicos reside em sua flexibilidade — se uma mudança nos campos do formulário for necessária, tudo o que é preciso é uma atualização na configuração JSON. Este nível de adaptabilidade torna os formulários web dinâmicos uma solução ideal para Conectores Logto, que requerem diferentes configurações de formulário desconhecidas pelo Logto." }), "\n", _jsxs(_components.h2, { id: "projetando-o-esquema", children: ["Projetando o Esquema", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#projetando-o-esquema", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Projetamos o esquema para ser uma array de itens de formulário, cada item pode ter nome, rótulo, marcador de posição e, o mais importante, tipo. Temos 6 tipos de itens de formulário, e são definidos como um 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 a definição de tipo do item de formulário é:" }), "\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: "Então o esquema completo é:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type Form = FormItem[];\n" }) }), "\n", _jsxs(_components.p, { children: ["Mas há um pequeno problema, o tipo do formulário \"selecionar\" requer uma lista de opções, então adicione este campo ao ", _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: "construindo-o-formulário-com-react-hook-form", children: ["Construindo o formulário com React-Hook-Form", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#construindo-o-formulário-com-react-hook-form", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Agora que o esquema está definido, podemos construir o formulário no front-end com base no esquema. Vamos usar o React Hook Form para conseguir isso." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://react-hook-form.com/", children: "React-Hook-Form" }), " é uma ferramenta poderosa para construir formulários eficientes e fáceis de usar em React."] }), "\n", _jsxs(_components.p, { children: ["A primeira coisa é iniciar um formulário, vamos supor que a configuração JSON é buscada e chamada de ", _jsx(_components.code, { children: "formItems" }), ", e os dados no formulário são ", _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: "Então, implemente o elemento de controle do formulário de acordo com o tipo, aqui está uma demonstração simples:" }), "\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: "conclusão",
      children: ["Conclusão", _jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#conclusão",
        children: _jsx(_components.span, {
          children: "#"
        })
      })]
    }), "\n", _jsx(_components.p, {
      children: "A versatilidade do Desenvolvimento Orientado a Configuração (CDD) brilha quando aplicada à criação de formulários dinâmicos, especialmente no caso dos conectores do Logto. As vantagens são duas:"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "Para os desenvolvedores, isso simplifica o processo de criação de formulários interativos e amigáveis. Em vez de lidar com complexidades de codificação intricadas, os desenvolvedores só precisam definir um arquivo JSON para obter interfaces de usuário melhor projetadas e intuitivas projetadas pela equipe do Logto."
      }), "\n", _jsx(_components.li, {
        children: "Para os usuários, essa abordagem simplifica bastante o processo de configuração de um conector. Ela tira a complexidade da integração, facilitando a integração do Logto com recursos de login social, bem como com serviços de e-mail ou SMS."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Recentemente, artigos promovendo Baixo Código estão por toda parte na internet. Esta solução foi desenvolvida a partir da perspectiva das necessidades reais dos usuários, e acreditamos que é uma ótima representação de Baixo Código."
    }), "\n", _jsx(_components.p, {
      children: "Quer tentar? Vá para a Logto Cloud e escolha um conector."
    }), "\n", _jsx(LogtoCloudButton, {
      children: "Experimente o Logto Hoje"
    })]
  });
}
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>