https://dashboard.render.com/

---

Stap 1: Voorbereiding

Voor Render heb je een werkende Flask-app, een GitHub-repository, en de benodigde bestanden nodig.

Stap 1.1: Installeer Git op je computer (indien nodig)

Als je Git nog niet hebt geïnstalleerd:

1. Download en installeer Git via https://git-scm.com/.

Stap 1.2: Maak je projectmap

1. Open een map op je computer waar je je bestanden wilt opslaan.
2. Maak een nieuwe map, bijvoorbeeld kba_project.

Stap 1.3: Maak de nodige bestanden

Navigeer naar je projectmap en maak de volgende bestanden:

1. app.py (Flask-code):

Gebruik een teksteditor zoals VS Code, Sublime Text, of Notepad++ om dit bestand te maken:

python

Code kopiëren

from flask import Flask, request, jsonify app = Flask(__name__) @app.route("/kba", methods=["POST"]) def answer_question(): data = request.json vraag = data.get("vraag", "") if not vraag: return jsonify({"error": "Geen vraag ontvangen."}), 400 antwoord = f"Hier is je antwoord op: '{vraag}'" return jsonify({"vraag": vraag, "antwoord": antwoord}) if __name__ == "__main__": app.run(host="0.0.0.0", port=5000)

2. requirements.txt (afhankelijkheden):

Maak een bestand requirements.txt in dezelfde map en voeg de volgende regels toe:

Code kopiëren

flask

3. Procfile (Render-configuratie):

Maak een bestand genaamd Procfile (zonder extensie!) en voeg de volgende regel toe:

makefile

Code kopiëren

web: python app.py

---

Stap 2: Upload je project naar GitHub

Stap 2.1: Maak een GitHub-repository

1. Ga naar GitHub en log in.
2. Klik op New Repository.
3. Geef je repository een naam, bijvoorbeeld kba_project, en klik op Create Repository.

Stap 2.2: Upload je bestanden naar GitHub

In CMD:

echo “# kba_project” >> README.md

git init

git add README.md

git commit -m “first commit”

git branch -M main

git remote add origin https://github.com/BeatrijsvO/kba_project.git

git push -u origin main

---

Stap 3: Host je KBA op Render

Stap 3.1: Maak een Render-account

1. Ga naar Render en meld je aan.
2. Klik op New → Web Service.

Stap 3.2: Koppel Render aan je GitHub-repository

1. Selecteer je GitHub-repository kba_project.
2. Klik op Connect.

Stap 3.3: Configureer de hosting

1. Vul de instellingen in:
   • Environment: Python 3.x
   • Build Command: pip install -r requirements.txt
   • Start Command: python app.py
2. Klik op Create Web Service.

---

Stap 3.4: Wacht tot de deploy klaar is

Render bouwt je applicatie en geeft een URL, bijvoorbeeld:

https://kba-project.onrender.com

---

Stap 4: Voeg de KBA toe aan je website

Stap 4.1: Maak een HTML-formulier

Voeg dit formulier toe aan je WordPress-website of een andere website (html):

<form id="kbaForm"> <label for="vraag">Stel je vraag:</label> <input type="text" id="vraag" name="vraag" required> <button type="submit">Verstuur</button> </form> <div id="antwoord"></div> <script> document.getElementById("kbaForm").addEventListener("submit", async function(e) { e.preventDefault(); const vraag = document.getElementById("vraag").value; const response = await fetch("https://kba-project.onrender.com/kba", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ vraag }) }); const data = await response.json(); document.getElementById("antwoord").innerText = data.antwoord || "Er is iets misgegaan."; }); </script>

Stap 4.2: Test het formulier

1. Open je website en voer een vraag in het formulier in.
2. Je zou een antwoord moeten krijgen van je KBA die draait op Render.

---

Samenvatting

• Stap 1-2: Maak je Flask-app lokaal en upload deze naar GitHub.
• Stap 3: Host de app gratis op Render.
• Stap 4: Integreer je KBA via een formulier op je website.

---

TEST

Stel je vraag: Verstuur