Voor deze opdracht werken we verder met het fictieve bedrijf Cloud Automatisering Horeca dat gespecialiseerd is in het automatiseren van alles wat in een horecazaak gebeurt en gedaan wordt. Dit bedrijf helpt horecazaken om hun processen efficiënter te maken door middel van digitale oplossingen zoals voorraadbeheer, klantenservice en realtime dashboards.

We hebben gekozen om de no-code-toepassing te ontwikkelen voor ons bedrijf: dit is een AI-gestuurde akoestische adviesplanner. De gebruikers kunnen zelf hun parameters invoeren en kiezen wat ze nodig hebben om een proces uit te voeren. Deze tool berekent het voorraadbeheer zodat uitbaters beter hun voorraad kunnen opvolgen. De uitbater of het personeel moet ingeven hoeveel producten er nog op voorraad zijn, hoeveel er dagelijks worden gebruikt en wanneer er opnieuw moet worden besteld. Daarna word alles automatisch berekend en geeft het een waarschuwing wanneer je tijdig opnieuw moet bestellen.

We hebben eerst gebruikgemaakt van ChatGPT om onze prompt te verwerken en te optimaliseren; daarna hebben we Loveable gebruikt om onze code te genereren.

Onze prompt:

Maak een webpagina in HTML, CSS en JavaScript met als titel “Voorraadbeheer Tool”. De gebruiker moet volgende gegevens kunnen invoeren: huidige voorraad (aantal producten), gemiddeld dagelijks verbruik, minimum voorraadniveau. Wanneer de gebruiker op een knop “Bereken” klikt: bereken na hoeveel dagen de voorraad op is, geef een melding wanneer de voorraad onder het minimum niveau komt. Gebruik HTML, CSS en JavaScript in een bestand dat werkt in de browser, maak het design mooi, modern en gebruiksvriendelijk. Geef de volledige code die in een HTML-bestand werkt. 

Herwerkt prompt door ChatGPT:

Titel: Maak een moderne, gebruiksvriendelijke webpagina met de titel “Voorraadbeheer Tool” met behulp van HTML, CSS en JavaScript in één enkel HTML-bestand (geen externe bestanden).

1) Functionaliteit:

De gebruiker moet de volgende gegevens kunnen invoeren:

• Huidige voorraad (aantal producten)

• Gemiddeld dagelijks verbruik

• Minimum voorraadniveau

Voorzie een knop “Bereken” die bij klikken:

1. Berekent na hoeveel dagen de voorraad op is

2. Weergeeft op welke dag de voorraad onder het minimum niveau zakt

3. Duidelijke meldingen toont, zoals:

   • “Voorraad is op na X dagen”

   • “Minimum voorraad bereikt na Y dagen”

2) Validatie:

• Controleer dat alle invoervelden correct en positief zijn

• Toon foutmeldingen bij ongeldige invoer

3) Design & UX

• Gebruik een modern en strak design

• Maak de layout responsive (werkt op desktop en mobiel)

• Gebruik duidelijke labels, voldoende witruimte en afgeronde elementen

• Voeg subtiele visuele feedback toe (zoals hover-effecten of kleurveranderingen)

• Toon resultaten overzichtelijk in een apart resultaatgedeelte

4) Technische vereisten:

• Gebruik alleen vanilla HTML, CSS en JavaScript

• Geen externe libraries of frameworks

• Alles moet werken door het HTML-bestand lokaal te openen in een browser

Link van het dialoog met ChatGPT: https://chatgpt.com/c/69bb05bb-dbb4-8327-815f-736d01e7be9a

Link voor het bestand met het no-code prototype: https://vital-stock-plan.lovable.app

Screenshot van het prototype: