"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "wprowadzenie", "hProperties": { "id": "wprowadzenie" } }, "depth": 2, "value": "Wprowadzenie" }, { "data": { "id": "tło", "hProperties": { "id": "tło" } }, "depth": 2, "value": "Tło" }, { "data": { "id": "co-to-jest-rozwój-oparty-na-konfiguracjach-cdd", "hProperties": { "id": "co-to-jest-rozwój-oparty-na-konfiguracjach-cdd" } }, "depth": 2, "value": "Co to jest Rozwój Oparty na Konfiguracjach (CDD)" }, { "data": { "id": "co-to-jest-dynamiczna-forma", "hProperties": { "id": "co-to-jest-dynamiczna-forma" } }, "depth": 2, "value": "Co to jest Dynamiczna Forma?" }, { "data": { "id": "projektowanie-schematów", "hProperties": { "id": "projektowanie-schematów" } }, "depth": 2, "value": "Projektowanie Schematów" }, { "data": { "id": "tworzenie-formularza-z-react-hook-form", "hProperties": { "id": "tworzenie-formularza-z-react-hook-form" } }, "depth": 2, "value": "Tworzenie formularza z React-Hook-Form" }, { "data": { "id": "podsumowanie", "hProperties": { "id": "podsumowanie" } }, "depth": 2, "value": "Podsumowanie" }]; const readingTime = { "minutes": 3, "words": 867, "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: "wprowadzenie", children: ["Wprowadzenie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wprowadzenie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/connectors/", children: "Konektory" }), " odgrywają kluczową rolę w Logto. Dzięki nim Logto umożliwia użytkownikom końcowym korzystanie z rejestracji bez hasła lub logowania się oraz z możliwości logowania się za pomocą kont społecznościowych. Logto pozwala użytkownikom instalować lub tworzyć własne konektory, a obecnie dostępnych jest już ponad 20 ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/connectors", children: "oficjalnych konektorów" }), ". Nasze konektory są zaprojektowane tak, aby były bardzo elastyczne, umożliwiając użytkownikom instalowanie lub budowanie własnych. Jednocześnie tworzenie nowego konektora jest łatwe. Aby to osiągnąć, zaprojektowaliśmy i wdrożyliśmy rozwiązanie o nazwie „Dynamiczna Forma”, które jest inspirowane Rozwojem Opartym na Konfiguracjach (CDD)."] }), "\n", _jsxs(_components.h2, { id: "tło", children: ["Tło", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#tło", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Konfiguracja konektora Logto jest zapisana w JSON, która, mimo że jest elastyczna, może być trudna do edycji i walidacji. Na początku nie stanowiło to dużego problemu, ponieważ wtedy większość konfiguracji JSON wyglądała tak:" }), "\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: "Ale wraz z obsługą coraz większej liczby dostawców i protokołów sytuacja zaczęła się zmieniać. Na przykład w przypadku „SAML connector” w konfiguracji JSON znajduje się ponad 10 kluczy, a typy wartości są złożone - są tam ciągi znaków, liczby, JSONy, wartości do wyboru oraz wieloliniowe ciągi znaków dla certyfikatów." }), "\n", _jsx(_components.p, { children: "Więc uważamy, że nadszedł czas na wprowadzenie dobrze zaprojektowanej formy jako zastąpienia edytora JSON. Konektor Logto jest zaprojektowany do działania jako aplikacja zewnętrzna, więc twarde kodowanie formularzy nie jest realnym rozwiązaniem. W rezultacie istnieje silna potrzeba dynamicznych formularzy, które są łatwe do zarządzania i jednocześnie oferują dobre doświadczenie użytkownika. Formularz dla konektora SAML, o którym wspomnieliśmy powyżej, wygląda tak:" }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/saml_c9a655b1ed.webp", alt: "Konfiguracja konektora SAML", width: "700px" }) }), "\n", _jsxs(_components.h2, { id: "co-to-jest-rozwój-oparty-na-konfiguracjach-cdd", children: ["Co to jest Rozwój Oparty na Konfiguracjach (CDD)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#co-to-jest-rozwój-oparty-na-konfiguracjach-cdd", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CDD, czyli Rozwój Oparty na Komponentach, prezentuje alternatywne podejście do tworzenia aplikacji. W tradycyjnej metodzie główni architekci tworzą projekty na podstawie potrzeb biznesowych, aplikacja jest następnie rozwijana i wdrażana, a wszelkie modyfikacje są wykonywane albo przez dodawanie nowych elementów, albo przez trudne refaktoryzacje." }), "\n", _jsx(_components.p, { children: "W przeciwieństwie do tego CDD skoncentrowany jest na budowaniu niezależnych komponentów od samego początku, zaczynając od najbardziej podstawowego poziomu. Interfejs, zazwyczaj JSON, jest ustanawiany do montażu interfejsu użytkownika na wyższym poziomie. Ta metoda, polegająca na łączeniu używanych wielokrotnie komponentów i szablonu JSON, pozwala deweloperom na wygodniejsze budowanie aplikacji w bardziej elastyczny i skalowalny sposób." }), "\n", _jsx(_components.p, { children: "Istota CDD leży w jego wykorzystaniu modularności do tworzenia luźno powiązanego zestawu komponentów, które są następnie łączone za pomocą standaryzowanego interfejsu." }), "\n", _jsxs(_components.h2, { id: "co-to-jest-dynamiczna-forma", children: ["Co to jest Dynamiczna Forma?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#co-to-jest-dynamiczna-forma", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Przyjęcie podejścia Rozwoju Opartego na Konfiguracjach (CDD) pozwala nam tworzyć dynamiczne formularze internetowe. Nie są to zwykłe formularze z statycznymi, niezmiennymi polami; raczej są to dynamiczne jednostki z polami generowanymi na podstawie pliku JSON. Piękno tych dynamicznych formularzy internetowych leży w ich elastyczności – jeśli konieczna jest zmiana w polach formularza, wystarczy zaktualizować konfigurację JSON. Ten poziom adaptacyjności sprawia, że dynamiczne formularze internetowe są idealnym rozwiązaniem dla konektorów Logto, które wymagają różnych konfiguracji formularzy, które są nieznane Logto." }), "\n", _jsxs(_components.h2, { id: "projektowanie-schematów", children: ["Projektowanie Schematów", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#projektowanie-schematów", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Zaprojektowaliśmy schemat jako tablicę elementów formularza, każdy element może mieć nazwę, etykietę, podpowiedź oraz, co najważniejsze, typ. Mamy 6 typów elementów formularza, zdefiniowanych jako 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: "A definicja typu elementu formularza to:" }), "\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: "Następnie pełny schemat wygląda następująco:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type Form = FormItem[];\n" }) }), "\n", _jsxs(_components.p, { children: ["Ale pojawia się mały problem, typ formularza „select” wymaga listy opcji, więc dodajemy to pole do ", _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: "tworzenie-formularza-z-react-hook-form", children: ["Tworzenie formularza z React-Hook-Form", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#tworzenie-formularza-z-react-hook-form", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Teraz, gdy schemat jest gotowy, możemy zbudować formularz na front-endzie na podstawie schematu. Wykorzystamy React Hook Form do osiągnięcia tego celu." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://react-hook-form.com/", children: "React-Hook-Form" }), " to potężne narzędzie do budowania wydajnych, łatwych w użyciu formularzy w React."] }), "\n", _jsxs(_components.p, { children: ["Pierwszą rzeczą jest inicjalizacja formularza, załóżmy, że konfiguracja JSON została pobrana i nazwana ", _jsx(_components.code, { children: "formItems" }), ", a dane w formularzu to ", _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: "Następnie, implementujemy element sterowania formularzem zgodnie z typem, oto prosta demonstracja:" }), "\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: "podsumowanie",
      children: ["Podsumowanie", _jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#podsumowanie",
        children: _jsx(_components.span, {
          children: "#"
        })
      })]
    }), "\n", _jsx(_components.p, {
      children: "Wszechstronność Rozwoju Opartego na Konfiguracjach (CDD) jasno się objawia, gdy jest stosowana do tworzenia dynamicznych formularzy, szczególnie w przypadku konektorów Logto. Korzyści są dwojakie:"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "Dla deweloperów, upraszcza proces tworzenia interaktywnych i przyjaznych dla użytkownika formularzy. Zamiast zajmować się zawiłościami kodowania, deweloperzy muszą tylko zdefiniować plik JSON, aby uzyskać lepiej zaprojektowane, intuicyjne interfejsy użytkownika zaprojektowane przez zespół Logto."
      }), "\n", _jsx(_components.li, {
        children: "Dla użytkowników, to podejście znacznie upraszcza proces skonfigurowania konektora. Usuwa złożoność z integracji, ułatwiając użytkownikom integrację Logto z funkcjami logowania społecznościowego, a także usługami e-mail lub SMS."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Ostatnio artykuły promujące Low Code są wszechobecne w Internecie. To rozwiązanie zostało opracowane z perspektywy rzeczywistych potrzeb użytkowników i uważamy, że jest doskonałym przykładem Low Code."
    }), "\n", _jsx(_components.p, {
      children: "Chcesz spróbować? Przejdź do Logto Cloud i wybierz konektor."
    }), "\n", _jsx(LogtoCloudButton, {
      children: "Wypróbuj Logto Dzisiaj"
    })]
  });
}
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>