Ontwikkelen
PadelOS AppScript
Dat vind ik een heel goed idee. Sterker nog, ik zou de roadmap iets aanpassen.
Tot nu toe hebben we de roadmap vooral functioneel opgezet ("Dashboard", "Spelers", enz.). Maar als we Padelschool OS echt jarenlang willen kunnen uitbreiden, is het verstandiger om iedere sprint op te delen in twee sporen:
A. Backend (Apps Script + Google Sheets)
B. Frontend (HTML/CSS/JavaScript)
Daardoor bouw je vanaf het begin een professionele architectuur.
Vanaf Sprint 2 krijgt iedere sprint deze opbouw:
Google Apps Script
Google Spreadsheet
API
Beveiliging
Database
HTML
CSS
JavaScript
UX
Dashboard
Ik zou dus Sprint 2 ongeveer zo aanpakken.
Apps Script Backend
Projectstructuur
We beginnen met het hele Apps Script project.
Padelschool OS
├── Code.gs
├── Router.gs
├── Database.gs
├── Users.gs
├── Players.gs
├── Trainers.gs
├── Groups.gs
├── Planning.gs
├── Lessons.gs
├── Exercises.gs
├── Evaluations.gs
├── Invoices.gs
├── Logger.gs
├── Security.gs
├── Settings.gs
├── Utils.gs
└── Config.gs
Dit zijn meteen de bestanden waar de rest van het systeem op voortbouwt.
Config.gs
Dit bestand bevat alle centrale instellingen.
Bijvoorbeeld:
Spreadsheet ID
Versienummer
Namen van de tabbladen
Rollen
Standaardinstellingen
Timezone
Valuta
Factuurinstellingen
Alle andere .gs-bestanden lezen deze instellingen uit, zodat je wijzigingen maar op één plek hoeft te doen.
Database.gs
Dit wordt de database-driver.
Deze kent nog niets van spelers of lessen.
Hij weet alleen hoe hij een Google Sheet moet lezen en schrijven.
Hij krijgt functies zoals:
tabblad openen
alle rijen lezen
rij toevoegen
rij wijzigen
rij verwijderen
zoeken op ID
Dit bestand wordt door vrijwel alle andere bestanden gebruikt.
Router.gs
Dit is de API-router.
Alle HTML-aanroepen gaan hier naartoe.
Bijvoorbeeld:
getPlayers()
savePlayer()
getLessons()
saveLesson()
getPlanning()
Router.gs bepaalt vervolgens welk bestand het werk uitvoert.
Logger.gs
Alles wat iemand doet wordt gelogd.
Bijvoorbeeld:
20:31
Trainer
Nieuwe les gemaakt
Les 153
of
Administrator
Trainer verwijderd
Hiermee bouw je direct een audittrail op.
Security.gs
Dit bestand bepaalt wat iemand mag.
Bijvoorbeeld:
Speler
↓
Alleen eigen profiel
Trainer
↓
Eigen lessen
Eigen spelers
Administrator
↓
Alles
Later kun je hier ook clubspecifieke rechten aan toevoegen.
Users.gs
Gebruikersbeheer.
Hier komt straks:
login
huidige gebruiker
rol
wachtwoorden (of Google-accountcontrole)
autorisatie
Ook toekomstige e-mailuitnodigingen kunnen hier landen.
Frontend Dashboard
Nu pas koppelen we het dashboard aan de backend.
De HTML vraagt bijvoorbeeld:
google.script.run
.getDashboard()
En ontvangt:
aantal spelers
aantal trainers
aantal lessen
aantal groepen
zonder direct met de spreadsheet te praten.
Dashboard Widgets
We bouwen de eerste echte widgets:
Vandaag
Deze week
Aankomende lessen
Laatste wijzigingen
Recente evaluaties
Alles wordt live uit de spreadsheet gelezen.
Sprint Review
We controleren:
Backend werkt.
Frontend werkt.
API werkt.
Dashboard werkt.
Geen consolefouten.
Geen Apps Script-fouten.
Logging werkt.
Rollen werken.
Pas in Sprint 3 beginnen we met Players.gs volledig uit te bouwen.
Waarom?
Omdat dan de fundering al staat.
Players hoeft dan alleen nog maar te zeggen:
Database.getRows()
Database.save()
Logger.log()
Security.check()
en niet zelf uit te zoeken hoe dat moet.
Ik zou vanaf nu elk .gs-bestand volledig uitwerken, alsof we een professioneel softwareontwerp (software design specification) schrijven.
Dus bijvoorbeeld:
Config.gs
doel
architectuur
functies
constanten
instellingen
koppelingen
voorbeeldcode
toekomstige uitbreidingen
Daarna:
Database.gs
Volledig.
Daarna:
Router.gs
Volledig.
Daarna:
Logger.gs
Volledig.
En zo verder.
Aan het einde van Sprint 10 hebben we dan niet alleen een werkende Padelschool OS, maar ook een complete technische documentatie van het hele systeem. Dat maakt het veel eenvoudiger om later nieuwe modules toe te voegen of met meerdere ontwikkelaars aan hetzelfde project te werken.
We gaan nu van concept → product.
De eerste versie noemen we:
Doel:
Een werkende basisapp waarin we later alle modules kunnen uitbreiden.
We starten met deze structuur:
PADELSCHOOL-OS/
│
├── index.html
│
├── css/
│ ├── style.css
│ └── components.css
│
├── js/
│ ├── app.js
│ ├── router.js
│ ├── database.js
│ ├── players.js
│ ├── trainers.js
│ ├── groups.js
│ └── planning.js
│
├── data/
│ ├── spelers.json
│ ├── trainers.json
│ ├── groepen.json
│ └── lessen.json
│
└── README.md
De eerste interface:
--------------------------------
🎾 PADELSCHOOL OS
Dashboard
Welkom Stijn
Vandaag
--------------------------------
📅 Planning
17:00
Beginners groep A
18:00
Gevorderden groep B
--------------------------------
👥 Mijn groepen
Beginners
8 spelers
Gevorderden
6 spelers
--------------------------------
⚡ Snelle acties
+ Nieuwe speler
+ Nieuwe les
+ Evaluatie
+ Oefening
--------------------------------
Versie 0.1 krijgt:
Status:
🟢 Actief
Status:
🟡 Basis
Kan:
speler toevoegen
speler bekijken
Status:
🟡 Basis
Kan:
trainer toevoegen
beschikbaarheid
Status:
🟡 Basis
Kan:
groep maken
spelers koppelen
Status:
⚪ Voorbereiding
We maken de eerste "database".
[
{
"id":1,
"naam":"Voorbeeld Speler",
"niveau":7,
"speelhand":"links",
"doel":"Techniek verbeteren"
}
]
[
{
"id":1,
"naam":"Stijn",
"niveau":"Padelleraar A",
"specialisatie":[
"Techniek",
"Tactiek"
]
}
]
We bouwen eerst:
HTML
CSS
JavaScript
Waarom?
Omdat we snel:
✅ kunnen testen
✅ kunnen aanpassen
✅ kunnen delen
✅ kunnen publiceren
Later:
Backend:
Google Sheets API
Firebase
Supabase
Eigen database
We maken direct rekening met:
ROL:
ADMIN
|
|-- Padelschool eigenaar
TRAINER
|
|-- Geeft lessen
SPELER
|
|-- Volgt ontwikkeling
CLUB
|
|-- Beheert meerdere trainers
Dag 1:
✅ Structuur maken
Dag 2:
Dashboard bouwen
Dag 3:
Navigatie bouwen
Dag 4:
Speler module
Dag 5:
Trainer module
Dag 6:
Groepen module
Dag 7:
Data opslaan
Dag 8:
Export functies
Dag 9:
Testen
Dag 10:
Alpha release
Na deze sprint hebben we:
Met:
✅ Werkende website
✅ Dashboard
✅ Navigatie
✅ Eerste database
✅ Spelersbeheer
✅ Trainersbeheer
✅ Groepenbeheer
Sprint 1.1 → De eerste index.html bouwen
Daarna:
Sprint 1.2 → CSS Design System
Daarna:
Sprint 1.3 → JavaScript Engine
Dan ontstaat de eerste echte Padelschool OS applicatie.
Ik zou nu beginnen met de complete eerste index.html van Padelschool OS Alpha 0.1.
Mooi. We gaan nu echt starten met de eerste bouwsteen.
Dit is Padelschool OS Alpha 0.1 – index.html.
Deze eerste versie bevat:
✅ Professioneel dashboard
✅ Sidebar navigatie
✅ Modulestructuur
✅ Trainer dashboard
✅ Spelersoverzicht
✅ Groepen
✅ Planning
✅ Lessen
✅ Oefeningen
✅ Evaluaties
✅ Responsive mobiele layout
✅ Eerste interacties via JavaScript
✅ Klaar om later gekoppeld te worden aan Google Sheets / Database
Maak een bestand:
PadelschoolOS/index.html
en plak onderstaande code.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Padelschool OS Alpha 0.1</title>
<style>
:root {
--primary:#0ea5e9;
--dark:#0284c7;
--green:#22c55e;
--bg:#f8fafc;
--text:#1e293b;
--card:white;
}
*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:
"Segoe UI",
Arial,
sans-serif;
}
body{
background:var(--bg);
color:var(--text);
}
/* APP */
.app{
display:flex;
min-height:100vh;
}
/* SIDEBAR */
.sidebar{
width:260px;
background:#0f172a;
color:white;
padding:25px;
}
.logo{
font-size:22px;
font-weight:bold;
margin-bottom:30px;
}
.logo span{
color:#38bdf8;
}
.menu button{
width:100%;
padding:14px;
margin-bottom:10px;
background:none;
border:none;
color:white;
text-align:left;
cursor:pointer;
border-radius:8px;
}
.menu button:hover{
background:#1e293b;
}
/* MAIN */
.main{
flex:1;
padding:30px;
}
/* HEADER */
.header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
}
.header h1{
font-size:28px;
}
.profile{
background:white;
padding:12px 20px;
border-radius:12px;
}
/* CARDS */
.grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}
.card{
background:var(--card);
padding:22px;
border-radius:18px;
box-shadow:
0 5px 15px rgba(0,0,0,.05);
}
.card h3{
margin-bottom:15px;
}
.number{
font-size:34px;
font-weight:bold;
color:var(--primary);
}
/* TABLE */
table{
width:100%;
border-collapse:collapse;
}
td,th{
padding:12px;
text-align:left;
border-bottom:1px solid #e2e8f0;
}
/* BUTTON */
.action{
background:var(--primary);
color:white;
padding:12px 18px;
border-radius:10px;
border:none;
cursor:pointer;
}
.action:hover{
background:var(--dark);
}
/* MOBILE */
@media(max-width:800px){
.sidebar{
width:80px;
}
.logo{
font-size:0;
}
.menu button{
font-size:0;
}
.main{
padding:15px;
}
}
</style>
</head>
<body>
<div class="app">
<!-- SIDEBAR -->
<aside class="sidebar">
<div class="logo">
🎾 <span>Padelschool</span> OS
</div>
<div class="menu">
<button onclick="openModule('Dashboard')">
🏠 Dashboard
</button>
<button onclick="openModule('Spelers')">
👥 Spelers
</button>
<button onclick="openModule('Trainers')">
🎓 Trainers
</button>
<button onclick="openModule('Groepen')">
👨👩👧 Groepen
</button>
<button onclick="openModule('Planning')">
📅 Planning
</button>
<button onclick="openModule('Lessen')">
🎾 Lessen
</button>
<button onclick="openModule('Oefeningen')">
📚 Oefeningen
</button>
<button onclick="openModule('Evaluaties')">
⭐ Evaluaties
</button>
</div>
</aside>
<!-- MAIN -->
<main class="main">
<div class="header">
<h1 id="title">
Dashboard
</h1>
<div class="profile">
Stijn 👋
</div>
</div>
<div id="content">
<!-- DASHBOARD -->
<div class="grid">
<div class="card">
<h3>
Spelers
</h3>
<div class="number">
48
</div>
Actieve spelers
</div>
<div class="card">
<h3>
Trainers
</h3>
<div class="number">
5
</div>
Team
</div>
<div class="card">
<h3>
Groepen
</h3>
<div class="number">
12
</div>
Trainingsgroepen
</div>
<div class="card">
<h3>
Lessen vandaag
</h3>
<div class="number">
8
</div>
Planning
</div>
</div>
<br><br>
<div class="card">
<h3>
Vandaag
</h3>
<table>
<tr>
<th>
Tijd
</th>
<th>
Groep
</th>
<th>
Thema
</th>
</tr>
<tr>
<td>
17:00
</td>
<td>
Beginners A
</td>
<td>
Forehand + positie
</td>
</tr>
<tr>
<td>
18:00
</td>
<td>
Gevorderden B
</td>
<td>
Bandeja + netspel
</td>
</tr>
<tr>
<td>
19:30
</td>
<td>
Selectie
</td>
<td>
Tactische patronen
</td>
</tr>
</table>
</div>
<br>
<button class="action"
onclick="newLesson()">
+ Nieuwe Les
</button>
</div>
</main>
</div>
<script>
function openModule(module){
document.getElementById("title").innerHTML=module;
let content=
document.getElementById("content");
content.innerHTML=`
<div class="card">
<h2>
${module}
</h2>
<p>
Deze module wordt gebouwd in volgende development sprint.
</p>
<br>
<button class="action">
Nieuwe ${module}
</button>
</div>
`;
}
function newLesson(){
alert(
"Nieuwe les wordt toegevoegd aan Padelschool OS"
);
}
</script>
</body>
</html>
Architectuur:
PADELSCHOOL OS
|
Dashboard
|
--------------------------------
Spelers Trainers Groepen
Planning Lessen Evaluaties
Oefeningen
--------------------------------
Database laag
↓
Google Sheets /
Firebase /
Supabase
Sprint 1.2 — CSS Design System uitbreiden
Daarna:
Sprint 1.3 — JavaScript Engine bouwen
Daarna:
Sprint 2 — Echt Dashboard met data-modellen
De basis staat nu. Dit is de eerste echte "app-shell" van Padelschool OS. 🎾🚀