Moje první zkušenost s tvorbou vlastní komponenty Qodly s využitím umělé inteligence

V tomto blogovém příspěvku popisuji, jak jsem se pustil do vývoje své první vlastní komponenty pro Qodly, aniž bych napsal jediný řádek kódu nebo něco vytvořil sám. Veškerou náročnou práci za mě odvedla umělá inteligence, kterou jsem naváděl pomocí jasných pokynů.

Stačilo jen několik vhodných pokynů a pomocí VSCode a Github Copilot jsem získal svou první vlastní komponentu. Díky umělé inteligenci se můžete soustředit na specifikaci svých potřeb a na to, co chcete, a zapomenout na složité technické záležitosti spojené s vývojem.

Čtěte dál a dozvíte se více.

Než začnete

Jak je vysvětleno v dokumentaci, pokud potřebujete komponentu, kterou 4D Qodly Pro nativně neposkytuje, je vlastní komponenta flexibilním řešením.

Lze ji sdílet napříč různými projekty nebo v rámci komunity Qodly. Jakmile je k dispozici, používá se stejně jako jakákoli nativní komponenta Qodly.

Nejprve jsem si prohlédl toto kompletní demo. Jakmile jsem pochopil hlavní myšlenku, postupoval jsem podle těchto kroků.

Dvě základní složky

Stáhněte si dovednosti

Aby AI fungovala správně, potřebuje sadu dovedností. Dovednosti jsou pokyny, kterými se AI musí řídit jako metodou. Díky těmto dovednostem AI ví, jak implementovat vlastní komponentu (rámec, architekturu atd.), stejně jako jak psát automatizované testy.

Tyto dovednosti jsem si stáhl z tohoto repozitáře na GitHubu.

Ve VS Code jsem vytvořil prázdnou složku a poté v ní složku .github/skills, do které jsem tyto dovednosti umístil.

Pak přišla řada na mě

Mým úkolem bylo popsat specifikaci komponenty: její vstupy, události, na které má reagovat, její chování atd.

Na základě této stručné specifikace a daných dovedností AI sama implementuje vlastní komponentu.

Je třeba uvést následující informace:

– název a účel komponenty

– vlastnosti: vlastnosti, které určují chování komponenty

– vzhled: jak komponenta vypadá v návrhovém a vykreslovacím režimu

– události: akce uživatele, na které musí komponenta reagovat

– chování: jak se komponenta chová v závislosti na událostech a svých vlastnostech

Všechny tyto informace se zadávají do AI v přirozeném jazyce.

Příklad: vlastní komponenta „kopírovat do schránky“

Mým cílem bylo vytvořit velmi jednoduchou komponentu schopnou zkopírovat řetězcový datový zdroj Qodly do schránky (počítače, na kterém došlo ke kliknutí). Tato komponenta v 4D Qodly Pro nativně neexistuje.

První hlavní výzva

Je čas zadat pokyn AI. Jak je vysvětleno ve videu, pokyn se opírá o jakousi mini-specifikaci: smlouvu ve třech hlavních částech, jak je popsáno výše.

Po instalaci dovedností jsem odeslal svůj první příkaz:

Zde je text zadání, který můžete zkopírovat a vložit:

Nacházíme se v prázdné složce.

Ve složce .gihub máme pouze několik dovedností.

Cílem těchto dovedností je vytváření vlastních komponent pro Qodly.

Začneme s vytvářením vlastní komponenty.

Použijte skill qodly-custom-component.

Vytvořte kostru pomocí @qodly/cli a poté implementujte komponentu pomocí standardní struktury Build / Render / Config / Settings.

Vytvořte pro Qodly komponentu zcela od začátku. Komponenta musí využívat třídílnou smlouvu: Props, Events a Behavior.

V případě potřeby mě požádejte o zadání názvu komponenty, verze a dalších požadovaných informací

Zde jsou podrobnosti:

Props definují, co do komponenty vstupuje:
• datasource: povinný řetězec zdroje dat pro Qodly
• vzhled komponenty v režimu návrhu a při vykreslení: běžná ikona kopírování

Události definují, co z komponenty vychází:
• onClick: spustí se při kliknutí na komponentu

Chování:
• Po kliknutí na komponentu se zkopíruje obsah navázaného zdroje dat do lokální schránky (schránky počítače, na kterém došlo ke kliknutí).
• Pokud je datový zdroj prázdný nebo má hodnotu null, nic se nezkopíruje a místní schránka počítače, na kterém došlo ke kliknutí, zůstane beze změny.
• Pokud není komponenta navázána na datový zdroj Qodly typu String, nic se nezkopíruje a místní schránka počítače, na kterém došlo ke kliknutí, zůstane beze změny.

Odpověď AI

Toto je odpověď, kterou jsem obdržel:

A byla vytvořena moje vlastní komponenta copyclipboard

Testování mé práce

Poté jsem se zeptal, jak komponentu otestovat lokálně. Copilot mi poradil spustit:

Vlastní komponentu lze poté otestovat lokálně otevřením stránky http://localhost:5001/ v prohlížeči

Je nutné spustit instanci 4D

http://localhost:5001/ je lokální URL serveru Vite. Poskytuje pouze lokální vývojové prostředí, které obsahuje vlastní komponentu. Chcete-li využívat všechny funkce Qodly Studio, jako jsou zdroje Qodly a dostupné funkce ORDA, musíte zajistit, aby instance Qodly Studio projektu 4D běžela na HTTPS portu 7443.

Vytvořil jsem tedy prázdný projekt 4D a otevřel jej s těmito webovými nastaveními:

A nastavení webové správy instance 4D jsou následující:

Tímto způsobem je instance Qodly Studio mého projektu 4D dostupná na adrese https://localhost:7443/studio. Využívá ji lokální vývojové prostředí při spuštění http://localhost:5001/.

A tady je výsledek!

Sestavení a publikování

Abych sestavil a publikoval finální verzi mé vlastní komponenty, jednoduše jsem požádal Copilot, aby ji sestavil stejně jako u jiných již existujících vlastních komponent. Dal jsem Copilotu příklad (např. https://github.com/b-fadwa/Qodly-file-download).

Také jsem ho požádal, aby komponentu publikoval do daného repozitáře na GitHubu, a to včetně zdrojového kódu i jednotlivých verzí.

A to je vše.

Co to přináší

Tato první zkušenost ukazuje, že AI výrazně snižuje bariéru pro rozšiřování Qodly Studio. Pokud dokážete popsat, co by komponenta měla dělat (její vlastnosti, události a chování), AI ji za vás sestaví.

Možnosti přizpůsobení Qodly Studio jsou proto velmi široké: dnes tlačítko „kopírovat do schránky“, zítra však jakákoli komponenta, kterou vaše aplikace potřebují, aniž byste museli být odborníky na front-end. Jediným skutečným omezením je srozumitelnost vaší specifikace.