# Prompt Engineering 2 ## 1, Introductie We hebben in prompt engineering 1 geleerd waaraan een goede prompt moest voldoen. Dit zijn de basis kenmerken van een goede prompt. De eerste drie kenmerken moet je prompt **altijd** aan voldoen! 1. 1. **Context** - een goede prompt heeft voldoende contexrt. 2. **Details**/**Specifiek** - een goed prompt heeft voldoende details en is zo specifiek mogelijk. 3. **Duidelijkheid** - een goedeprompt is duidelijk. 4. **Doelgericht** - een goede prompt is doelgericht. 5. **Vorm** - in een goede prompt kan je de output in een bepalade vorm vragen. 6. **Toon** -door in de prompt de toon op te nemen, bepaal je de vorm van het antwoord. In deze module gaan we 6 **advanched prompt-technieken** leren. Deze technieken heb je niet altijd nodig maar het is handig om deze technieken te kennen. Bovendien zijn de meeste techniekken ook toepasbaar in als '**problem solving**' technieken. 1. **Isolate the problem** Focus alleen op het onderdeel dat opgelost moet worden. Laat overbodige context of code weg, zodat de AI zich op het juiste richt. 2. **Provide lists in bullet points** Structuur helpt de AI om overzichtelijke en duidelijke antwoorden te geven. 3. **Provide the order if you ask for multiple tasks** Geef een logische volgorde bij samengestelde opdrachten. 4. **Geef voorbeelden (few-shot prompting)** Laat zien wat je bedoelt met een input/output-voorbeeld. 5. **Stel voorwaarden of beperkingen** Geef grenzen aan zoals "gebruik max. 100 woorden" of "geen disclaimers". 6. **Werk in stappen (chain-of-thought prompting)** Vraag de AI om stap voor stap te redeneren of eerst een plan te maken. ## 1. Isolate the problem ### Uitleg Richt je prompt op het exacte probleem. In plaats van een hele codepagina te geven, geef alleen het stuk code of de situatie waar het om draait. Hoe minder ruis, hoe beter de AI kan helpen.
Je ziet dus dat je voor een goede prompt de code goed moet kunnen lezen.
### Opdracht Je hebt een PHP-pagina met een formulier dat soms geen gegevens doorstuurt. 👉 Maak een prompt voor ChatGPT waarin je **alleen het relevante deel van de code opneemt** en waarin je de AI vraagt om te helpen bij het vinden van de fout. Houd nog steeds rekening met de **context, details en duidelijkheid**. In dit voorbeeld zou je makkelijk de hele code kunnen verturen, maar in de echte wereld heb je veel meer code en daarom is dit een goede oefening in het isoleren van code die relevant is.Tip: je kan ook andersom redeneren en alle code waarvan je zeker weet die goed is of niets met het formulier te maken heeft weghaald.
```php= $bericht ?>
Tip: denk goed na over wat je de AI precies als voorbeeld geeft, ***alleen*** de HTML of HTML **met** CSS? Denk hierbij ook aan *Isolate the problem*.
### Inleveren 1. Je volledige prompt inclusief voorbeeld(en) 2. De gegenereerde knop + uitleg van de AI 3. Een screenshot van de knop in de browser ## 5. Stel voorwaarden of beperkingen ### Uitleg Soms wil je meer controle over **hoe** de AI iets oplevert. Je kunt dan in je prompt **voorwaarden of beperkingen** opnemen. Bijvoorbeeld: - Beperk het aantal woorden of regels code - Vermijd bepaalde technieken (zoals frameworks) - Vraag om iets op een specifieke manier te doen (bijv. alleen in-line CSS) Door deze randvoorwaarden op te nemen, stuur je de AI veel gerichter aan. ### Opdracht Je wilt een eenvoudige HTML-formulierpagina laten genereren, maar je stelt een aantal duidelijke voorwaarden. 1. **Bedenk minstens 3 voorwaarden** waaraan de code moet voldoen. Bijvoorbeeld: - Geen externe CSS-bestanden of frameworks zoals Bootstrap - Maximaal 30 regels HTML - Formulier moet naam en e-mailadres bevatten, met eenvoudige styling 2. **Schrijf een prompt** waarin je deze voorwaarden duidelijk formuleert. - Leg de context uit: *“Ik wil een eenvoudig formulier…”* - Som je voorwaarden op in een bulletlijst of genummerde lijst - Sluit duidelijk af met je verzoek: *“Geef alleen de HTML-code”* 3. Zorg dat je prompt voldoet aan de **context, details en duidelijkheid**. ### Inleveren 1. Je prompt (inclusief de voorwaarden) 2. De gegenereerde HTML-code 3. Een screenshot van het formulier ## 6. Chain-of-thought prompting 1 ### Uitleg Bij opdrachten met meerdere onderdelen is het slim om de AI **eerst te laten nadenken en plannen**. Dat noem je *chain-of-thought prompting*. Je vraagt de AI dus om niet meteen te bouwen, maar eerst te analyseren: - Wat moet er gebeuren, welke stappen moet ik volgen? - In welke volgorde? - Wat zijn de componenten en technieken die ik moet gebruiken? Daarna kan de AI **gestructureerd** de code aanleveren. Zo voorkom je onvolledige of chaotische antwoorden. ### Voorbeeld ##### Prompt *Ik wil een formulier dat een naam opslaat. Leg eerst uit welke stappen ik daarvoor nodig heb. Geef dan de HTML-code. Geef daarna de PHP-code. Leg elke stap kort uit.* ##### Verwachte AI-reactie 1. Je hebt een HTML-formulier nodig om de naam in te voeren. 2. Je hebt een PHP-script nodig dat de naam opvangt en verwerkt. 3. Je moet het formulier met method="post" versturen. 4. Daarna geef ik de HTML en PHP code apart, met uitleg. Als je een stap niet snapt, of het niet eens bent, vraag dan verheldering. Vraag uitleg, bijvoorbeeld: ##### Prompt *Wat gebeuert er in stap 3 en waarom moet ik ene post gebruiken, zijn er alternatieven?* Op deze manier leer je een probleem in stappen opdelen en daarna de stappen één voor één op te lossen. Nu lijkt dat wellicht overbodig, maar bij grotere projecten is deze methode noodzakelijk. ### Opdracht Je wil een AI vragen om een simpele “Contact opnemen”-pagina te maken met de volgende onderdelen: - Een **HTML-formulier** met velden voor naam, e-mail en bericht - Een **mooie layout met CSS** (geen framework) - Een **PHP-bestand** dat het formulier verwerkt en de data netjes toont - **De gegevens mogen niet verstuurd worden zonder geldige invoer** **Maar:** je wil niet meteen de code, je wil dat de AI eerst in stappen uitlegt *hoe je dit moet aanpakken*. 1. **Schrijf een prompt** waarin je aan de AI vraagt om: - Eerst te analyseren wat deze opdracht inhoudt - Daarna een overzicht in stappen te geven van wat er allemaal moet gebeuren (HTML-structuur, input validatie, PHP-verwerking, opmaak) - Pas daarna per stap de juiste code te geven, met uitleg 2. Gebruik termen als: - “Geef eerst een analyse van de opdracht” - “Schrijf daarna de stappen uit in logische volgorde” - “Geef dan pas de bijbehorende code, met uitleg per stap” 3. Voeg in je prompt beperkingen of voorkeuren toe, zoals: - “Gebruik geen externe CSS-frameworks” - “Gebruik eenvoudige PHP, geen database” - “Geef geen code voordat alle stappen duidelijk zijn” 4. Zorg dat je prompt voldoet aan de kenmerken: **context, details, duidelijkheid, volgorde** ### Inleveren 1. Je volledige prompt(en) 2. Het AI-antwoord (mag opgeknipt zijn in stappen) 3. De uiteindelijke werkende HTML- en PHP-code 4. Screenshot van de werkende pagina ## 7. Chain-of-thought prompting 2 In de vorige opdracht heb je een formulier laten maken. Wat voor method heb je gebruikt in het formulier? Vraag AI om uit te leggen welke methoden er zijn en wat de voor en nadelen zijn van bedien methoden? ### Inleveren 1. Je volledige prompt. 2. In een txt bestand: Jouw eingen aanbeveling: wat zou je het beste hebben kunnen gebruiken bij de vorige opdracht. Leg uit waarom!