Deeltaak 2

Coding the Curbs website

Een website om een smartzone te zoeken en boeken en vragen te stellen.

Inhoudsopgave

📄 Beschrijving
💻 Gebruik
📌 Kenmerken
⚙️ Installatie
📁 Bronnen
🔒 Licentie

📄 Beschrijving

Deze pagina is gemaakt voor de volgende userstory's:

"Als vervoerder wil ik een overzicht van smartzones in een stad kunnen bekijken, zodat ik kan zien waar ik kan parkeren om mijn goederen te laden/lossen"
"Als vervoerder wil ik onderweg vanuit mijn voertuig meer informatie over een smartzone kunnen bekijken, zodat ik kan zien of de zone geschikt is om mijn goederen te laden en/of lossen"
"Als vervoerder wil een smart zone kunnen reserveren, zodat ik mijn plek kan bevestigen"
"Als gebruiker wil ik een vraag kunnen stellen, zodat ik hulp kan krijgen"

De eerste pagina is een overzichtspagina met de verschillende smartzones, die ook hun eigen detailslide hebben. Verder is een kaart te zien met de locaties van de zones. De tweede pagina is een pagina waar een reserveerformulier staat waar je de gewenste smartzone kunt boeken en je gegevens invult.

De website vind je hier.

💻 Gebruik

Deze website bestaat uit meerdere delen. Aan de linkerkant staat een overzicht van alle smartzones. Aan de rechterkant staat de kaart of het formulier om te kunnen reserveren.

Elke smartzone heeft een eigen tegel en ziet er als volgt uit:

Er is meer informatie beschikbaar per smartzone als je op het i-icoontje klikt:

Het logo en de navigatiebar blijven in beeld staan als je scrollt:

De navigatiebar bevat de volgende pagina's:

De kaart heeft markers die gelinkt zijn aan de zones en ziet er als volgt uit:

Het formulier om te reserveren bevat de volgende velden:

Er zijn drie manieren om met het formulier te beginnen:

Op de 'Book' knop uit de navigatie klikken. Het formulier begint dan helemaal leeg.
Op de 'Book now' knop van een smartzone klikken. In het formulier worden al de smartzone en de start datum ingevuld.
Op de 'Book later' knop van een smartzone klikken. In het formulier wordt al de smartzone ingevuld.

Op elke pagina is een chatbot te vinden om vragen te stellen:

📌 Kenmerken

Voor dit project heb we met node.js, express en ejs gewerkt. Daarnaast is er ook gebruik gemaakt van de JavaScript library Leaflet en maptiler.

HTML is ondergebracht in partials die door middel van EJS aan een grotere pagina vastzitten.

Met behulp van CSS zijn er SVG's geanimeerd met keyframes.

In JavaScript hebben we een invalid statement voor het formulier gemaakt. Hierdoor kijkt het formulier pas als je op de submit knop hebt gedruk of alles is ingevuld.

Met NODE hebben we de pagina's een route gegeven waardoor ze de informatie uit de API krijgen en informatie naar de API kunnen sturen.

Door EJS kunnen we JavaScript in de HTML gebruiken. Hierdoor kunnnen we in het formulier kijken naar welke datum vandaag is en ervoor zorgen dat er geen datum in het verleden geselecteerd kan worden.

Voor de kaart hebben we Leaflet gebruikt. Hiermee kunnen we makkelijk een kaart maken met markers die klikbaar zijn.

De chat is gemaakt met socket.io en chat-gpt. Hierdoor kun je een vraag stellen waar automatisch antwoord op wordt gegeven.

⚙️ Installatie

Om (verder) te kunnen werken aan dit project, moet je de volgende stappen volgen:

Instaleer node versie 18.15.0
Clone deze repository
Open de terminal (CTRL + `)
Type 'npm install express ejs dotenv openai socket.io'
Je ziet nu de node_modules map
Maak een .env bestand met beide variable die in de example.env staan
Type in terminal 'npm start'
Klik link localhost

Let op, er is gebruik gemaakt van een .env bestand.

📁 Bronnen

Leaflet
Maptiler
socket.io
Openai
Front-End Performance Checklist
Informatie uit de colleges van FDND

🔒 Licentie

This project is licensed under the terms of the MIT license.

	//Chatbot
	let conversationHistory = []
	const historySize = 20

	ioServer.on('connection', (client) => {
	console.log(`user ${client.id} connected`)
	client.emit('history', conversationHistory)
	client.on('message', async (message, callback) => {
	try {
	while (conversationHistory.length > historySize) {
	conversationHistory.shift()
	}
	conversationHistory.push({ role: "user", content: message })
	const completion = await openai.createChatCompletion({
	model: "gpt-4",
	prompt: "hello world",
	})
	const response = completion.data.choices[0].message.content;
	conversationHistory.push({ role: "assistant", content: response })

	ioServer.emit('message', response)
	callback()
	} catch (error) {
	callback("Error: Unable to connect to the chatbot");
	}
	})

	client.on('disconnect', () => {
	console.log(`user ${client.id} disconnected`)
	})
	})

	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
	integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" media="screen">
	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
	integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin="" defer async></script>

cathelijnevisser / ctc-a-chatbot Goto Github PK

ctc-a-chatbot's Introduction

Coding the Curbs website

Inhoudsopgave

📄 Beschrijving

💻 Gebruik

📌 Kenmerken

⚙️ Installatie

📁 Bronnen

🔒 Licentie

ctc-a-chatbot's People

Contributors

Stargazers

Forkers

ctc-a-chatbot's Issues

Recommend Projects

Recommend Topics

Recommend Org