"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "johdanto", "hProperties": { "id": "johdanto" } }, "depth": 2, "value": "Johdanto" }, { "data": { "id": "tausta", "hProperties": { "id": "tausta" } }, "depth": 2, "value": "Tausta" }, { "data": { "id": "mitä-on-konfiguraatiovetoinen-kehitys-cdd", "hProperties": { "id": "mitä-on-konfiguraatiovetoinen-kehitys-cdd" } }, "depth": 2, "value": "Mitä on konfiguraatiovetoinen kehitys (CDD)" }, { "data": { "id": "mitä-on-dynaaminen-lomake", "hProperties": { "id": "mitä-on-dynaaminen-lomake" } }, "depth": 2, "value": "Mitä on dynaaminen lomake?" }, { "data": { "id": "skeeman-suunnittelu", "hProperties": { "id": "skeeman-suunnittelu" } }, "depth": 2, "value": "Skeeman suunnittelu" }, { "data": { "id": "lomakkeen-rakentaminen-react-hook-formilla", "hProperties": { "id": "lomakkeen-rakentaminen-react-hook-formilla" } }, "depth": 2, "value": "Lomakkeen rakentaminen React-Hook-Formilla" }, { "data": { "id": "yhteenveto", "hProperties": { "id": "yhteenveto" } }, "depth": 2, "value": "Yhteenveto" }]; const readingTime = { "minutes": 2, "words": 740, "text": "2 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: "johdanto", children: ["Johdanto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#johdanto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/connectors/", children: "Liitännäiset" }), " ovat keskeisessä roolissa Logtossa. Niiden avulla Logto mahdollistaa loppukäyttäjille salasanattoman rekisteröitymisen tai kirjautumisen sekä kyvyn kirjautua sosiaalisen median tileillä. Logto antaa käyttäjille mahdollisuuden asentaa tai luoda omia liitännäisiä, ja virallisia liitännäisiä on jo yli 20 ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/connectors", children: "virallista liitännäistä" }), ". Liitännäisemme on suunniteltu erittäin joustaviksi, ja ne mahdollistavat käyttäjille omien liitännäisten asentamisen tai jopa rakentamisen. Samalla uuden liitännäisen kehittäminen on helppoa. Tämän saavuttamiseksi suunnittelimme ja toteutimme ratkaisun nimeltä \"Dynamic Form\", joka on saanut inspiraationsa Config Driven Developmentista (CDD)."] }), "\n", _jsxs(_components.h2, { id: "tausta", children: ["Tausta", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#tausta", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Logton liitännäisen konfiguraatio on JSON, joka, vaikkakin joustava, voi olla haastava muokata ja validoida. Aluksi tämä ei ollut suuri ongelma, koska siihen aikaan useimmat JSON-konfiguraatiot olivat kuten:" }), "\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: "Mutta kun tuemme yhä enemmän tarjoajia ja protokollia, asiat alkoivat muuttua. Otetaan esimerkiksi \"SAML-liitännäinen\", JSON-konfiguraatiossa on yli 10 avainta, ja arvojen tyyppi on monimutkainen: on merkkijonoja, numeroita, JSONeja, valinta-arvoja ja monirivisiä merkkijonoja todistuksille." }), "\n", _jsx(_components.p, { children: "Joten meistä on aika tuoda hienosti suunniteltu lomake korvaamaan JSON-editori. Logton liitännäinen on suunniteltu toimimaan kolmannen osapuolen sovelluksena, joten lomakkeiden kovakoodaus ei ole toteuttamiskelpoinen ratkaisu. Tuloksena on vahva tarve dynaamisille lomakkeille, jotka ovat helppoja hallita ja tarjoavat hyvän käyttäjäkokemuksen samanaikaisesti. Mainittu SAML-liitännäisen lomake näyttää seuraavalta:" }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/saml_c9a655b1ed.webp", alt: "SAML-liitännäisen konfiguraatio", width: "700px" }) }), "\n", _jsxs(_components.h2, { id: "mitä-on-konfiguraatiovetoinen-kehitys-cdd", children: ["Mitä on konfiguraatiovetoinen kehitys (CDD)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mitä-on-konfiguraatiovetoinen-kehitys-cdd", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CDD, eli Component Driven Development, tarjoaa vaihtoehtoisen lähestymistavan sovellusten rakentamiseen. Perinteisessä menetelmässä johtavat arkkitehdit luovat suunnitelmat liiketoimintatarpeiden perusteella, sovellus kehitetään ja otetaan käyttöön, ja mahdolliset muutokset toteutetaan joko lisäelementtien kautta tai vaikean refaktoroinnin kautta." }), "\n", _jsx(_components.p, { children: "CDD keskittyy itsenäisten komponenttien rakentamiseen alusta alkaen, aloittaen kaikkein perustasolta. Rajapinta, tyypillisesti JSON, perustetaan korkeampitasoisen käyttöliittymän kokoamista varten. Tämä menetelmä, joka yhdistää uudelleenkäytettäviä komponentteja ja JSON-suunnitelman, mahdollistaa kehittäjien rakentaa sovelluksia joustavammalla ja skaalautuvammalla tavalla." }), "\n", _jsx(_components.p, { children: "CDD:n ydin on sen modulaarisuuden hyödyntämisessä hajanaisen komponenttijoukon luomiseksi, joka sitten yhdistetään standardoidun rajapinnan avulla." }), "\n", _jsxs(_components.h2, { id: "mitä-on-dynaaminen-lomake", children: ["Mitä on dynaaminen lomake?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mitä-on-dynaaminen-lomake", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Konfiguraatiovetoisen kehityksen (CDD) omaksuminen mahdollistaa dynaamisten verkkolomakkeiden luomisen. Nämä eivät ole tavallisia lomakkeita staattisilla, muuttumattomilla kentillä, vaan ne ovat dynaamisia olentoja, joiden kentät luodaan JSON-tiedoston perusteella. Näiden dynaamisten verkkolomakkeiden kauneus on joustavuudessa – jos lomakekentissä tarvitaan muutoksia, riittää vain JSON-konfiguraation päivittäminen. Tämä mukautuvuustaso tekee dynaamisista verkkolomakkeista ihanteellisen ratkaisun Logton liitännäisille, jotka vaativat erilaisia lomakekonfiguraatioita, jotka Logto ei tunne." }), "\n", _jsxs(_components.h2, { id: "skeeman-suunnittelu", children: ["Skeeman suunnittelu", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#skeeman-suunnittelu", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Suunnittelimme skeeman olevan joukko lomakkeen osia, joista jokaisella voi olla nimi, etiketti, paikkamerkki ja tärkein, tyyppi. Meillä on 6 tyyppistä lomakkeen osaa, ja nämä määritetään enumin avulla:" }), "\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: "Ja lomakkeen osan tyyppimääritelmä on:" }), "\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: "Täydellinen skeema on siis:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type Form = FormItem[];\n" }) }), "\n", _jsxs(_components.p, { children: ["Mutta on pieni ongelma, \"select\"-lomake tyyppi vaatii valintojen listan, joten lisätään tämä kenttä ", _jsx(_components.code, { children: "FormItem" }), ":iin:"] }), "\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: "lomakkeen-rakentaminen-react-hook-formilla", children: ["Lomakkeen rakentaminen React-Hook-Formilla", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lomakkeen-rakentaminen-react-hook-formilla", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Nyt kun skeema on asetettu, voimme rakentaa lomakkeen etupäähän skeeman perusteella. Käytämme React Hook Formia tämän saavuttamiseksi." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://react-hook-form.com/", children: "React-Hook-Form" }), " on voimakas työkalu tehokkaiden ja helppokäyttöisten lomakkeiden rakentamiseen Reactissa."] }), "\n", _jsxs(_components.p, { children: ["Ensimmäinen asia on aloittaa lomake, oletetaan, että JSON-konfiguraatio on haettu ja nimetty ", _jsx(_components.code, { children: "formItems" }), ", ja lomakkeen tiedot ovat ", _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: "Sitten toteuta lomakkeen ohjauselementti tyypin mukaan, tässä yksinkertainen esitys:" }), "\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: "yhteenveto",
      children: ["Yhteenveto", _jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#yhteenveto",
        children: _jsx(_components.span, {
          children: "#"
        })
      })]
    }), "\n", _jsx(_components.p, {
      children: "Konfiguraatiovetoisen kehityksen (CDD) monipuolisuus loistaa, kun sitä sovelletaan dynaamisten lomakkeiden luomiseen, erityisesti Logton liitännäisten tapauksessa. Hyödyt ovat kaksijakoiset:"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "Kehittäjille se yksinkertaistaa interaktiivisten ja käyttäjäystävällisten lomakkeiden luomista. Monimutkaisten koodauskompleksien sijaan kehittäjien tarvitsee vain määrittää JSON-tiedosto saadakseen paremmin suunnitellut, Logton tiimin suunnittelemat intuitiiviset käyttöliittymät."
      }), "\n", _jsx(_components.li, {
        children: "Käyttäjille tämä lähestymistapa yksinkertaistaa huomattavasti liitännäisen asetusprosessia. Se vie monimutkaisuuden pois integroinnista, tehden Logton integroinnista sosiaalisen median kirjautumisominaisuuksien sekä sähköposti- tai SMS-palveluiden kanssa helpompaa."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Viime aikoina artikkelit, jotka edistävät vähäkoodia, ovat yleisiä internetissä. Tämä ratkaisu kehitettiin todellisten käyttäjien tarpeiden näkökulmasta, ja uskomme sen olevan erinomainen esimerkki vähäkoodista."
    }), "\n", _jsx(_components.p, {
      children: "Haluatko kokeilla? Mene Logto Cloudiin ja valitse liitännäinen."
    }), "\n", _jsx(LogtoCloudButton, {
      children: "Kokeile Logtoa tänään"
    })]
  });
}
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>