"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-por-configuração-cdd", "hProperties": { "id": "o-que-é-desenvolvimento-orientado-por-configuração-cdd" } }, "depth": 2, "value": "O que é Desenvolvimento Orientado por 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": "desenho-do-esquema", "hProperties": { "id": "desenho-do-esquema" } }, "depth": 2, "value": "Desenho do 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": 1000, "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 sua ajuda, o Logto permite aos utilizadores finais registarem-se ou entrarem sem senha e usar as capacidades de iniciar sessão com contas sociais. O Logto permite aos utilizadores instalar ou construir os 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" }), ". Os nossos conectores são altamente flexíveis e permitem aos utilizadores instalar ou mesmo construir os seus próprios. Ao mesmo tempo, é fácil desenvolver um novo conector. Para alcançar isso, desenhámos e implementámos uma solução chamada “Formulário Dinâmico” que é inspirada no Desenvolvimento Orientado por 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 início, isso não é um grande problema, porque naquela altura, a maioria das configurações JSON são assim:" }), "\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 suportamos mais e mais fornecedores e protocolos, as coisas começaram a mudar. Pegue 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 de seleção e strings de múltiplas linhas para certificados." }), "\n", _jsx(_components.p, { children: "Então pensamos que é hora de introduzir um formulário bem projetado para substituir o editor JSON. O conector Logto é desenhado para funcionar como uma aplicação de terceiros, por isso hard-coding formulários não é uma solução viável. O resultado é uma forte necessidade de formulários dinâmicos que sejam fáceis de gerir e proporcionem uma boa experiência de utilizador ao mesmo tempo. O formulário para o conector SAML que mencionámos acima é assim:" }), "\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-por-configuração-cdd", children: ["O que é Desenvolvimento Orientado por Configuração (CDD)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#o-que-é-desenvolvimento-orientado-por-configuração-cdd", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CDD, ou Desenvolvimento Orientado por Componentes, apresenta uma abordagem alternativa para construir aplicações. No método convencional, os arquitetos líderes criam designs com base nas necessidades de negócios, a aplicação é então desenvolvida e implantada, e quaisquer modificações são executadas através de elementos adicionais ou através de refatoração difícil." }), "\n", _jsx(_components.p, { children: "Em contraste, o 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 de utilizador de nível superior. Este método, que envolve a combinação de componentes reutilizáveis e uma blueprint em JSON, capacita os desenvolvedores a construir aplicações de forma mais flexível e escalável." }), "\n", _jsx(_components.p, { children: "A essência do CDD está na sua utilização da modularidade para criar um conjunto de componentes soltos, que são então unidos 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 do Desenvolvimento Orientado por Configuração (CDD) permite-nos criar formulários web dinâmicos. Estes não são formulários comuns com campos estáticos e inalteráveis; em vez disso, são entidades dinâmicas com campos gerados com base num arquivo JSON. A beleza destes formulários web dinâmicos reside na sua flexibilidade – se uma mudança nos campos do formulário for necessária, basta uma atualização na configuração JSON. Este nível de adaptabilidade torna os formulários web dinâmicos uma solução ideal para os Conectores Logto, que requerem diferentes configurações de formulário que são desconhecidas para Logto." }), "\n", _jsxs(_components.h2, { id: "desenho-do-esquema", children: ["Desenho do Esquema", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#desenho-do-esquema", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Desenhámos o esquema para ser um array de itens de formulário, cada item pode ter nome, rótulo, espaço reservado, e o mais importante, tipo. Temos 6 tipos de item de formulário, e definido como um enum:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "enum FormItemType {\n Text = 'Texto',\n Number = 'Número',\n MultilineText = 'TextoMultilinha',\n Switch = 'Interruptor',\n Select = 'Selecionar',\n Json = 'Json',\n}\n" }) }), "\n", _jsx(_components.p, { children: "E a definição de tipo de 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 de formulário \"selecionar\" requer uma lista de opções, então adicione este 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: "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. Usaremos 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 no React."] }), "\n", _jsxs(_components.p, { children: ["A primeira coisa é iniciar um formulário, suponha que a configuração JSON é obtida 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: "Em seguida, implemente o elemento de controlo 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 por Configuração (CDD) ressalta quando aplicado à criação de formulários dinâmicos, especialmente no caso dos conectores do Logto. As vantagens são duplas:"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "Para os desenvolvedores, simplifica o processo de criar formulários interativos e amigáveis. Em vez de lidar com complexidades intricadas de codificação, os desenvolvedores apenas precisam definir um arquivo JSON para obter interfaces de usuário melhor projetadas e intuitivas projetadas pela equipe Logto."
      }), "\n", _jsx(_components.li, {
        children: "Para os utilizadores, esta abordagem simplifica muito o processo de configuração de um conector. Isso retira a complexidade da integração, tornando mais fácil para os utilizadores integrar o Logto com recursos de login social, bem como serviços de email ou SMS."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Recentemente, artigos promovendo Low Code são ubíquos na internet. Esta solução foi desenvolvida do ponto de vista das necessidades reais dos utilizadores, e acreditamos que seja uma ótima representação de Low Code."
    }), "\n", _jsx(_components.p, {
      children: "Quer experimentar? Vá até Logto Cloud e escolha um conector."
    }), "\n", _jsx(LogtoCloudButton, {
      children: "Experimente 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>