Deze repo is onderdeel van het vak informatica op het Emmauscollege Rotterdam.
The basic idea is that a webpage of the shop is loaded by the browser and information on the articles in the shop are added to that depending on what the user selects.
An alternative approach would be to have the server build complete web-pages including all information on articles. This is the idea behind the php programming language. The REST-interface is gaining popularity. An advantage of REST above php is that REST allows for more responsive (interfactive) websites.
Codespaces
Gebruik het terminal window te zien zijn.
Stop de server door typen van [CRTL]+[C].
Start de server met het volgene commando.
bash start.shOm de server te (her)starten kun je ook de start knop gebruiken die je ziet als je op het "run en debug" icoon in de iconenbalk links op het scherm drukt.
Replit
druk op de groene "Run"-knop
Gitpod
Gebruik het terminal window waar de server-berichten te zien zijn.
Stop de server door typen van [CRTL]+[C].
Start de server met het volgene commando
bash start.shWijzig de sql-commando's in het bestand db/create.sql
Start de server opnieuw (zie elders hoe dat moet) nadat de sql-commando's gewijzigd zijn. Zo zorg je ervoor dat de database opnieuw gemaakt wordt door de nieuwe sql-commando's uit te voeren.
Open de database in de terminal met het volgende commando
sqlite3 db/my.dbJe kunt met SQL commanda's zien wat er in de database staat.
Bijvoorbeeld het commando: SELECT * from Products; (vergeet de ; aan het einde niet)
Meer handige commando's:
.tables.schema productsSELECT * FROM products LIMIT 3;.quitJe kunt het antwoord van de api testen door achter de link naar je webshop /api/products te typen, bijvoorbeeld:
https://....-8080.app.github.dev/api/products (voor codespaces, pas aan voor jouw webshop-adres)
https://....repl.co/api/products (voor replit, pas aan voor jouw webshop-adres)
https://....gitpod.io/api/products (voor gitpod, pas aan voor jouw webshop-adres)
Bekijk de terminal (codespaces en gitpod) of console (replit) van de server, daar kun je foutmeldingen zien. Je kunt in de code in de map api opdrachten toevoegen die inhoud van variabelen afdrukken. Bijvoorbeeld:
console.log("Waarde van i is ", i);Start de server opnieuw (zie elders hoe dat moet) nadat de code gewijzigd is.
Bekijk de console in de browser, daar kun je foutmeldingen zien.
In Chrome open je de console in het menu -> Weergave -> Ontwikkelaar -> JavaScript-console.
Je kunt in de code op strategische plaatsen de volgende opdracht toevoegen:
debuggerAls de console open staat dan stopt de browser met het uitvoeren van code als hij het debugger commando tegenkomt. Je kunt dan via de console opdrachten geven. Je kunt de inhoud van variabelen bekijken met de opdracht:
console.log("Waarde van i is ", i);er zijn afgelopen jaar dingen in replit veranderd, waardoor je je webshop op dit moment geen mail kunt laten sturen De shop mailt elke order die geplaatst is. Mailen werkt niet in gitpod, omdat verkeer over de smtp-port geblokkeerd wordt. Mailen door de shop in replit werkt als volgt. Zet de environment variabelen (slotje links in replit menu)
GMAIL_EMAIL=<email account>
GMAIL_PASSWORD=<email wachtwoord>
ORDER_MAIL_TO=<jouw email waar je orders ontvangt>Als je gmail gebruikt zonder tweestapsverificatie:
Zet in gmail (account->beveiliging) gebruik van minder veilige apps aan
Als je gmail gebruikt met tweestapsverificatie:
Maak een app-wachtwoord (account->beveiliging) en zet dat in GMAIL_PASSWORD
Test je emailconfiguratie:
Doe een bestelling en kijk naar de console in replit of gitpod.
De api meldt op de console als mail succesvol is verzonden en geeft een foutmelding als het niet is gelukt.
Database with information on the arcticles in the shop. The commands in the db.sql file build te database. The database is build everytime start.sh is executed.
Static (non changing) html, css en js files.
js files which are being executed on the server when the api is called
Dit bestand bevat de commando's om de webshop (opnieuw) te starten. Je voert dit bestand uit in de terminal met het commando
bash start.shMappen met de configuratie voor Codespaces
Bestanden met de configuratie voor replit
We use a bash-repl (language="bash" in .replit file), because bash has sqlite3 and nodejs installed. Downside of bash-repl: The nodejs-repl installs packages automatically by scanning your code. In the bash-repl we have to maintain dependencies in a packages file manually.
Bestand met de configuratie voor replit
De code is voorzien van commentaar op punten waar de werking misschien niet eenvoudig te volgen is. We gaan er vanuit dat je basiskennis hebt over html, css en Javascript. Dit heb je geleerd in de vierde klas. In deze webshop worden een aantal technieken gebruikt die je niet in de vierde hebt gehad. Die lichten we kort toe.
Bij de aanroep van een functie kun je variabelen meegeven als parameter. Dit ken je van de vierde klas. Je kunt ook functies meegeven als parameter. In Javascript wordt dit veelvuldig gebruikt.
In de meeste programmeertalen wordt code van boven naar beneden uitgevoerd. In Javascript wordt soms met de volgende opdracht doorgegaan voordat de vorige klaar is. Als de vorige klaar is dan wordt er een functie aangeroepen die als parameter is meegegeven aan de vorige opdracht. Deze functie wordt een callback genoemd. Het gebruik van callbacks is een krachtige functionaliteit van Javascript maar voor beginnende programmeurs lastig te doorgronden. Een callback wordt bijvoorbeeld gebruikt bij het versturen van mail.
Je kunt Javascript gebruiken om extra elementen aan je webpagina toe te voegen nadat deze geladen is. Een veelgebruikte manier daarvoor is het opnemen van een stukje template in het html bestand (html tussen en ) Het template wordt niet door de browser getoond, maar het stuk html in het template kan in Javascript worden gekopieerd (gecloned) en aangepast. Dit wordt bijvoorbeeld gebruikt bij het tonen van artikelen in de shop.
Op school zit er een fout in het netwerk, gebruik daar dit trucje om de port naar de server te openen: