Programování v oblasti umělé inteligence pomocí 4D a VS Code: Praktický průvodce

Pokud jste nedávno sledovali náš webinář o programování s umělou inteligencí v 4D 21, viděli jste, jak jsme vytvořili kompletní aplikaci cestovní kanceláře (struktura databáze, data, formuláře a funkce využívající umělou inteligenci), a to téměř výhradně pomocí příkazů v přirozeném jazyce. V tomto příspěvku vás provedeme nastavením a ukážeme vám, jak tento pracovní postup využít ve svých vlastních projektech.

Co potřebujete

• 4D 21 (nebo novější)
• Visual Studio Code s povoleným GitHub Copilotem (viz nastavení níže)
• Rozšíření 4D Analyzer (viz níže)
• Sada instrukčních souborů přizpůsobených vývoji v 4D (viz níže)

Nastavení GitHub Copilot

Než začnete: GitHub Copilot běží přes váš účet GitHub, nikoli přímo přes OpenAI, Anthropic nebo jiného poskytovatele AI. Nemusíte kupovat kredity od Clauda ani žádné jiné služby. Vše se spravuje přes GitHub.

1. Pokud ještě nemáteúčet GitHub, vytvořte si jej: github.com

2. Aktivujte GitHub Copilot ve svém účtu na github.com/features/copilot. Součástí je bezplatná úroveň s velkorysým měsíčním limitem, k zahájení není nutná kreditní karta.

3. Přihlaste se z VS Code. Otevřete VS Code, klikněte na ikonu Účty v levém dolním rohu a přihlaste se pomocí svého účtu GitHub. Po připojení se v stavovém řádku zobrazí ikona Copilot a bude k dispozici Chat.

4. Vyberte si model. V panelu Copilot Chat vám výběr modelů umožňuje zvolit, který model AI bude pohánět vaše odpovědi (GPT-4o, Claude, Gemini a další v závislosti na vašem tarifu). Výchozí nastavení je pro začátek v pořádku, později můžete přepnout.

Chcete-li zkontrolovat využití a spravovat svůj tarif: Přejděte na github.com/settings/copilot. Můžete zde zjistit, kolik požadavků jste již využili, přejít na placený tarif a spravovat fakturaci, pokud potřebujete větší kapacitu.

Rozšíření 4D Analyzer

Díky rozšíření 4D Analyzer si VS Code skutečně uvědomuje jazyk 4D. Nainstalujte si jej z VS Code Marketplace a získáte:

• Zbarvení syntaxe pro kód 4D: metody, třídy, třídy formulářů atd.
• Doplňování kódu a nápovědu k podpisům
• Diagnostiku (chyby a varování) v reálném čase při psaní

To je při práci s AI velmi důležité. Když GitHub Copilot vygeneruje kód 4D, Analyzer jej okamžitě ověří. Chyby se zvýrazní přímo v editoru, což znamená, že je můžete zachytit ještě předtím, než se pokusíte kód spustit, a předat je zpět Copilotu, aby je opravil.

Instalace:

1. Otevřete VS Code
2. Přejděte do panelu Rozšíření (Cmd+Shift+X na macOS, Ctrl+Shift+X na Windows)
3. Vyhledejte „4D Analyzer“
4. Klikněte na Instalovat

To je vše. Otevřete libovolnou složku projektu 4D a rozšíření se automaticky aktivuje.

Instrukční soubory: Naučte Copilot, jak psát kód 4D

GitHub Copilot zná mnoho programovacích jazyků, ale nezná váš styl kódování, vaše osvědčené postupy ani jemné nuance vývoje v 4D. Právě zde přicházejí na řadu instruktážní soubory.

Instrukční soubory jsou dokumenty ve formátu Markdown umístěné ve složce .github/instructions/ v kořenovém adresáři vašeho projektu. Copilot je automaticky načte a použije jako kontext pro každou odpověď. Představte si je jako stylový průvodce, kterým se AI řídí.

Kde je získat

Sada připravených instrukčních souborů pro 4D je k dispozici na GitHubu:

👉 github.com/mathieu-ferry/4D-github-instructions

Jak je nastavit

1. V kořenovém adresáři vašeho projektu 4D vytvořte složku .github/instructions/
2. Zkopírujte soubory s pokyny z výše uvedeného úložiště do této složky
3. Otevřete Copilot Chat a zeptejte se: „Jaké jsou vaše standardy pro kódování v 4D?“ Copilot by měl odpovědět na základě obsahu vašich souborů s pokyny

Pokud tak učiní, můžete pokračovat. Pokyny pokrývají témata jako:

• Preferované používání tříd namísto procedurálních metod
• Konvence tříd formulářů
• Odkazy na schémata JSON pro formuláře a katalogy
• Konvence pojmenování a struktura kódu

Tip: Tyto soubory jsou výchozím bodem. Nejlepších výsledků dosáhnete, když je přizpůsobíte svým vlastním zvykům při programování a konvencím projektu. Přidejte vlastní pravidla, odstraňte to, co se nevztahuje, a postupem času je vylepšujte.

Spojení všeho dohromady: dva příklady

Příklad 1: Vytvoření struktury databáze pomocí výzev

Při práci s editorem Structure se změny promítají do souboru 4DCatalog. Díky instrukčním souborům z repozitáře GitHub může Copilot tento soubor za vás bezpečně upravovat (kontext schématu je v těchto instrukcích zahrnut). Vy se řídíte pokyny a po restartu jsou změny struktury okamžitě viditelné v 4D. Zde je realistický postup:

Vy: „Vytvořte v katalogu tabulku se seznamem zaměstnanců s jejich příjmením a jménem.“

Copilot upraví vaši strukturu. Restartujte 4D a získáte tabulku Employee s primárním klíčem UUID a požadovanými poli.

Vy: „Vytvořte novou tabulku obsahující seznam oddělení společnosti.“

Objeví se další tabulka.

Vy: „Přidej vztah mezi zaměstnanci a odděleními, přičemž každý zaměstnanec patří do jednoho oddělení.“

Copilot přidá cizí klíč a správnou definici vztahu. Tímto způsobem, krok za krokem, pouze prostřednictvím komunikace s AI, vytvoříte celý relační model.

Klíčový poznatek: popíšete záměr v běžném jazyce a AI se postará o podrobnosti katalogu. Soubory s pokyny zajišťují, že výstup odpovídá vašim očekávaným konvencím (klíče UUID, správné typy atributů, správná syntaxe relací).

Příklad 2: Vytvoření formuláře a jeho třídy

Formuláře jsou místem, kde to začíná být opravdu zajímavé. Rozložení můžete popsat v jediném příkazu:

Vy: „Vytvoř 4D formulář, který zobrazuje seznam úkolů. Chci na levé straně seznamové pole s přehledem, příjmením přidělené osoby, oddělením, termínem a stavem. Na pravé straně zobraz podrobný pohled se všemi těmito informacemi plus popisem úkolu a vedoucím oddělení. Přiřaď formulář k třídě formuláře.“

Copilot vygeneruje:

• Formulář JSON (form.4DForm) s rozevíracím seznamem, vstupními poli a rozvržením
• Třídu formuláře (.4dm) s logikou zpracování událostí a vazby dat

Výsledkem je funkční formulář, který můžete otevřít v 4D a začít používat. Bude na první pokus dokonalý do posledního pixelu? Pravděpodobně ne. Poskytuje vám však pevný základ, který můžete vylepšit pomocí následných pokynů nebo ručních úprav.

Vylepšení návrhu

První vygenerovaný formulář je funkčním základem, nikoli hotovým produktem. Existuje několik způsobů, jak Copilot dovést k lepšímu výsledku:

• Vložte screenshot jako inspiraci. Najděte uživatelské rozhraní, které se vám líbí, vložte ho do Copilot Chat a řekněte: „Přepracujte formulář s použitím tohoto obrázku jako vizuální reference.“ Copilot z obrázku extrahuje vzory rozvržení, barevné tóny a mezery.
• Uveďte přesný návrhový brief. Popište záměr, náladu a omezení: „Přepracujte tento formulář pro cestovní kancelář, která potřebuje rychle zpracovávat e-maily. Upřednostněte hustotu informací, kontrastní indikátory stavu a navigaci vhodnou pro klávesnici.“
• Výslovně specifikujte designové tokeny. Pokud máte designový systém, zadejte jej přímo: „Použijte základní rozestup 8px, neutrální šedé pozadí (#F5F5F5), modrou (#1A73E8) pro primární akce a sémantickou červenou/oranžovou/zelenou pro stav úkolu.“
• Požádejte o konzistenci se stávajícími formuláři. Namísto toho, abyste pokaždé začínali od nuly: „Udělejte tento formulář vizuálně konzistentní se stávajícím formulářem Zaměstnanec: stejný styl záhlaví, hierarchie tlačítek a hustota řádků seznamu.“
• Zaznamenejte svůj styl do souborů s pokyny. Nejtrvalejší přístup. Definujte svou paletu barev, pravidla pro mezery a konvence komponent uživatelského rozhraní jednou v .github/instructions/ a každý formulář, který Copilot vygeneruje, je bude automaticky dodržovat, aniž by vás k tomu vyzýval.

Režimy Copilot Chat: Ask, Plan a Agent

Copilot Chat ve VS Code má tři režimy, které lze vybrat z výběru agentů v dolní části panelu Chat:

• Ask: Pouze otázky a odpovědi. Odpovídá na otázky týkající se vaší kódové základny, konceptů kódování nebo VS Code, aniž by se dotýkal jakýchkoli souborů. Užitečné pro pochopení toho, jak něco funguje, nebo pro zkoumání nápadů.
• Plán: Vytvoří strukturovaný, podrobný plán implementace pomocí analýzy kódové základny pouze pro čtení, ještě před napsáním jediného řádku kódu. Odhalí otevřené otázky týkající se nejednoznačných požadavků, abyste mohli předem vyjasnit záměr. Jakmile budete spokojeni, tlačítko „Spustit implementaci“ předá plán přímo do režimu Agent k provedení.
• Agent: Pracovní kůň kódování. Autonomně upravuje soubory v rámci vašeho projektu, spouští příkazy v terminálu, vyvolává nástroje a opakuje kroky k opravě chyb, dokud není úkol dokončen.

Všechny příklady uvedené dříve v tomto příspěvku byly spuštěny v režimu Agent, který je správným výchozím nastavením pro jakýkoli úkol, který skutečně mění váš projekt.

Kdy se režim plánování vyplatí

Dosud jsme pracovali postupně: jeden příkaz, jedna změna, kontrola, opakování. Pro průzkumnou práci nebo rychlé doplnění je to naprosto efektivní. Ale u větších funkcí, které se dotýkají více komponent najednou, stojí režim plánování za ten extra krok.

Režim plánování přečte vaši kódovou základnu, než cokoli vyprodukuje. Výstupem je souhrn na vysoké úrovni rozdělený na proveditelné kroky, včetně jakýchkoli otázek, které má ohledně vašich požadavků. Plán opakujete v běžné konverzaci, dokud přesně neodráží to, co chcete, a poté jej předáte agentovi.

To je obzvláště cenné v projektech 4D, kde jedna funkce může zasahovat do katalogu, jedné nebo více metod či tříd, formuláře JSON, třídy formuláře a souborů zdrojů najednou. Odhalit nesprávný předpoklad ve fázi plánování je mnohem levnější než rozplétat provádění více souborů, které šlo špatným směrem.

Jak to vypadá v praxi

Místo této postupné sekvence:

• „Přidat tabulku e-mailů“
• „Vytvořte formulář pro e-maily“
• „Přidat tlačítko pro zpracování e-mailů“
• „Napište metodu zpracování AI“
• „Přidat vzorová data“

Můžete napsat jeden dobře strukturovaný příkaz popisující celou funkci, spustit jej v nástroji Plan k ověření přístupu a poté nechat agenta jej provést v jednom koordinovaném kroku. Přesně to jsme udělali ve webináři při vytváření funkce AI pro převod e-mailů na úkoly: jeden velký příkaz, který pokrýval tabulku, formulář, tlačítko, logiku zpracování, konfiguraci klíče API a vzorová data, vše najednou.

Tipy pro efektivní pracovní postup s AI

1. Přizpůsobte svůj přístup velikosti úkolu. Krok za krokem funguje dobře, když zkoumáte nebo když není rozsah jasný, což usnadňuje kontrolu a korekci kurzu. U dobře definovaných funkcí je efektivnější jediný větší příkaz s režimem Plan. Dokumentace VS Code doporučuje rozdělit složité úkoly, ale také poznamenává, že zahrnutí očekávaných výstupů (jaké soubory, jaké chování) pomáhá agentovi ověřit jeho vlastní práci.
2. Pojmenujte, co očekáváte, ne jak to udělat. U větších zadání pomáhá snížit dohady uvedení seznamu souborů, tabulek nebo formulářů, které očekáváte, že budou vytvořeny. Vyhněte se přílišnému specifikování detailů implementace: to je práce agenta. Cílem je stanovit jasné hranice, ne psát specifikaci.
3. Trvalá pravidla uchovávejte v souborech s pokyny, jednorázový kontext v zadání. Konvence, pravidla pojmenování a architektonické preference patří do .github/instructions/, neopakujte je v každém zadání. Podle dokumentace VS Code se soubory s pokyny načítají při každé interakci, proto se v nich zaměřte na to, co AI nemůže odvodit pouze z vašeho kódu.
4. Zpětně oznamujte chyby, u těch nejasných uveďte kontext. U izolovaných chyb často stačí vložit chybu běhu přímo do Copilotu. U problémů s logikou nebo architekturou také odkažte na příslušný soubor nebo vysvětlete očekávané chování; samotná chybová zpráva neposkytne dostatečný signál.
5. Pro vizuální diagnostiku použijte screenshoty. Připojení screenshotu je rychlejší než popis problému s rozložením slovy a dokumentace VS Code jej uvádí jako doporučenou kontextovou techniku. Poznámka: v závislosti na vašem plánu Copilot a nastavení organizace může být nutné povolit podporu obrázků.
6. Zkontrolujte výstup AI: náročnost úlohy se odvíjí od toho, o co jde. U prototypů stačí rychlé přečtení. U produkčního kódu s ním zacházejte jako s jakýmkoli jiným přispěvatelským kódem: zkontrolujte logiku, okrajové případy, ověření vstupů a vše, co se týká externích služeb nebo přihlašovacích údajů.
7. Udržujte soubory s pokyny stručné a aktuální. Cílenější pokyny vedou k lepšímu výstupu, ale soubory s pokyny se načítají při každém požadavku. Dokumentace VS Code doporučuje zaměřit se na věci, které AI nemůže odvodit z kódu: nestandardní konvence, architektonická rozhodnutí, specifika prostředí. Nadměrně rozsáhlý soubor, který zahrnuje vše, začne signál oslabovat.

Další kroky: vlastní agenti a dovednosti

Vše, co jsme dosud probrali, využívá vestavěné agenty se sdílenými soubory s pokyny. VS Code vám nyní však umožňuje jít ještě dál a definovat si vlastní agenty a dovednosti, které se ukládají ve vašem projektu do složky .github/agents/.

Vlastní agent je soubor Markdown (.agent.md), který dává AI konkrétní osobnost, omezuje, které nástroje může používat, a volitelně jej přiřazuje k určitému modelu. Můžete například vytvořit specializovaného agenta 4D-reviewer, který se soustředí výhradně na kvalitu kódu, bezpečnostní rizika a konvence pojmenování pro projekty 4D, a to s použitím nástrojů pouze pro čtení, takže nikdy nic neupraví, pokud o to výslovně nepožádáte. Nebo agenta 4D-scaffolder předem naplněného vašimi šablonami formulářů a tříd, připraveného spustit nové obrazovky na požádání.

Dovednosti (soubory.skill.md ) jdou ještě o krok dál: jsou to opakovaně použitelné, přenositelné funkce, které mohou zahrnovat skripty a přístup k externím zdrojům. Zatímco soubor s instrukcemi obsahuje pasivní pravidla, dovednost obsahuje aktivní logiku, kterou může agent vyvolat. Praktický příklad pro 4D: dovednost, která umí dotazovat web s dokumentací 4D a načítat relevantní ukázky kódu přímo do chatu.

Dokumentace VS Code také popisuje předávání: řetězcové pracovní postupy, kde jeden agent předává kontext dalšímu pouhým kliknutím na tlačítko. Plánovací agent vygeneruje specifikaci funkce, poté ji předá implementačnímu agentovi, který ji předá reviznímu agentovi. Každý krok je před spuštěním schválen člověkem.

Všechny tyto agenty můžete generovat pomocí AI přímo v chatu: zadejte /create-agent nebo /create-skill a popište, co chcete. Mohou být uloženy na úrovni pracovního prostoru (sdíleny s týmem prostřednictvím správy zdrojového kódu) nebo ve vašem uživatelském profilu (osobní, dostupné ve všech projektech).

Více než jen generování kódu: další užitečné pracovní postupy s AI

Vytváření funkcí je jen jednou z věcí, které agent AI v vývojovém workflow zvládá dobře. Zde jsou další situace, ve kterých může Copilot výrazně ulehčit práci:

• Dokumentace. Požádejte agenta, aby napsal nebo aktualizoval technickou dokumentaci ze zdrojového kódu, vygeneroval docstrings pro metody a třídy nebo přeložil existující dokumentaci do jiného jazyka. Konkrétně pro 4D to může znamenat generování obsahu nápovědy pro uživatele z logiky třídy formulářů nebo vytvoření strukturované reference API ze sady metod.
• Bezpečnostní kontrola. Požádejte agenta, aby analyzoval metodu, třídu formuláře nebo celou funkci z hlediska běžných zranitelností: neověřené vstupy, chybějící řízení přístupu, vystavení SQL nebo injekci, pevně zakódované přihlašovací údaje. Zde se přirozeně hodí specializovaný bezpečnostní agent pouze pro čtení (viz výše). To nenahradí řádný bezpečnostní audit, ale je to rychlý první průchod.
• Refaktoring. Agenti AI dobře zvládají mechanické refaktoringové úkoly: konzistentní přejmenování symbolů, extrahování opakované logiky do sdílených metod nebo tříd, převod procedurálního kódu na vzory ORDA nebo modernizaci staršího kódu 4D podle současných osvědčených postupů.
• Vysvětlení kódu a zaškolení. Použijte režim Ask k pochopení neznámého kódu, sledování toho, co metoda dělá, nebo získání srozumitelného shrnutí složité logiky. To je obzvláště užitečné při převzetí existujícího projektu nebo zaškolování nových členů týmu.
• Generování testů. Požádejte agenta, aby napsal jednotkové testy pro danou metodu nebo třídu, včetně okrajových případů a chybových stavů. Copilot může také testy po jejich vygenerování spustit a v případě selhání je opakovat.
• Zprávy o commitování a popisy PR. VS Code obsahuje vestavěné inteligentní akce pro generování zpráv o commitování ze změn připravených k odeslání a souhrnů žádostí o pull. Malé úspory času, které se sčítají.

Co bude dál?

Pracovní postup popsaný v tomto příspěvku je vám k dispozici již dnes. Vytvořte si pomocí výzev svou první tabulku a formulář, použijte režim Plánování k řešení celé funkce, refaktorujte starší kód, generujte dokumentaci, spusťte bezpečnostní kontrolu, vytvořte vlastní agenta pro svůj tým. Jediné, co zbývá, je to vyzkoušet.

Zde je vše, co potřebujete k zahájení práce:

1. Stáhněte si 4D 21
2. Nainstalujte VS Code s povoleným GitHub Copilot
3. Přidejte rozšíření 4D Analyzer
4. Zkopírujte soubory s pokyny do svého projektu

Otevřete režim Agent, popište, co chcete vytvořit, a uvidíte, jak daleko se dostanete.

Rádi bychom se dozvěděli o vašich zkušenostech. Sdílejte své výsledky, pracovní postupy a dotazy na fóru 4D, komunita čeká!