Motivationskicker

Der Motivationskicker ist nicht nur eine kleine Web-App. Er ist auch ein praktisches Beispiel dafuer, wie moderne Software heute mit Hilfe von AI schneller geplant, gebaut, getestet und in die Cloud gebracht werden kann.

Die App hilft Nutzern dabei, ihre aktuelle Energie einzuschaetzen, eine kurze Fokus- oder Motivations-Challenge zu bekommen und danach eine kleine Reflexion festzuhalten. Optional koennen Google- oder Microsoft-Kalender verbunden werden, damit die Vorschlaege besser zur aktuellen Tageslage passen.

Was die App macht

Nutzer koennen:

• sich mit einem Test-User schnell ausprobieren,
• einen lokalen User anlegen,
• sich mit Google oder Microsoft anmelden,
• ihre E-Mail bestaetigen, bevor kostenpflichtige AI-Funktionen genutzt werden,
• Google- oder Microsoft-Kalender verbinden,
• eine Energie von 1 bis 10 auswaehlen,
• eine kurze AI-generierte Challenge erhalten,
• eine Reflexion speichern,
• Fortschritt und Historie sehen.

Fuer Test-User ist wichtig: Die App erklaert direkt, was sie tut und wie man startet. Gleichzeitig wird verhindert, dass jeder anonym und unbegrenzt kostenpflichtige AI-Funktionen ausloest.

Welche Technologien verwendet werden

Die App besteht aus mehreren Teilen, die zusammenarbeiten:

• Frontend: HTML, CSS, JavaScript und Tailwind CSS fuer die Oberflaeche.
• Backend: ASP.NET Core Minimal API mit .NET 9.
• Authentifizierung: Lokales Login, Google Login und Microsoft Login.
• Kalenderintegration: Google Calendar API und Microsoft Graph Calendar.
• AI-Funktion: Azure OpenAI / Microsoft AI fuer personalisierte Challenges.
• E-Mail-Bestaetigung: Microsoft Graph Mail oder optional SMTP.
• Cloud Hosting: Azure App Service.
• Identitaet und Berechtigungen: Microsoft Entra ID App Registrations.
• Datenhaltung: JSON-Dateien fuer User, Historie und Konfiguration.
• Sicherheit: Sessions, CSRF-Schutz, geschuetzte OAuth Tokens, blockierte sensible Dateien.
• Entwicklung: Visual Studio Code, GitHub, GitHub Copilot und Codex.

Warum so ein Projekt ohne AI viel Fachwissen braucht

Auf den ersten Blick wirkt die App klein. In Wirklichkeit beruehrt sie viele unterschiedliche Fachbereiche:

• Frontend-Entwicklung: Layout, Interaktionen, responsive Oberflaeche, Fehlermeldungen, Nutzerfuehrung.
• Backend-Entwicklung: API-Routen, Sessions, Authentifizierung, Datenmodelle, Fehlerbehandlung.
• Security: CSRF, Token-Schutz, Passwort-Hashing, sichere Cookies, Zugriffsschutz.
• OAuth: Google Login, Microsoft Login, Redirect URIs, Scopes, Callback-Handling.
• Microsoft Graph: Kalender lesen, Mail senden, App Permissions, Admin Consent.
• Azure: App Service, App Settings, Deployment, Logs, Runtime-Konfiguration.
• Entra ID: App Registration, Client Secrets, API Permissions, Tenant IDs.
• AI Prompting: Kontextaufbau, Kalenderdaten einbinden, Kostenkontrolle, Fallbacks.
• Betrieb: Debugging, Log Stream, Fehlersuche bei 401, 403 und 500 Fehlern.

Ohne AI muesste man in vielen dieser Bereiche sehr tief einsteigen. Man muesste Dokumentation lesen, Fehlermeldungen interpretieren, Konfigurationsdetails kennen und die richtigen Teile im Code sauber verbinden.

Mit AI ersetzt man dieses Wissen nicht komplett. Aber AI hilft dabei, schneller durch diese Bereiche zu navigieren.

Wie AI die Entwicklung vereinfacht hat

AI wurde hier nicht nur fuer Text oder Ideen verwendet, sondern als praktischer Entwicklungsassistent.

Beispiele:

• Die App-Struktur wurde analysiert und passende Stellen im Code wurden gefunden.
• Login, Test-User, Google Login und Microsoft Login wurden Schritt fuer Schritt erweitert.
• Die E-Mail-Bestaetigung wurde als Kostenbremse konzipiert und serverseitig umgesetzt.
• Microsoft Graph Mail wurde eingebaut, ohne SMTP-Passwoerter nutzen zu muessen.
• Azure-Fehler wurden anhand von Log-Ausgaben interpretiert.
• Typische Fehler wie "Secret ID statt Secret Value" wurden erkannt.
• Fallbacks wurden eingebaut, damit Test-User die App auch ohne Kalender ausprobieren koennen.
• README, Deployment-Hinweise und App-Settings wurden strukturiert dokumentiert.

Die AI hat dabei nicht einfach "irgendwelchen Code" geschrieben. Sie hat geholfen, das bestehende Projekt zu verstehen, Risiken zu erkennen und die naechsten sinnvollen Schritte vorzuschlagen.

Rolle von Visual Studio Code

Visual Studio Code war die zentrale Entwicklungsumgebung.

Dort wurden:

• Dateien wie Program.cs, public/script.js und README.md bearbeitet,
• Projektstruktur und offene Tabs genutzt,
• Terminal-Kommandos wie dotnet build ausgefuehrt,
• Fehler und Logs im Kontext betrachtet,
• Aenderungen direkt im Projekt nachvollzogen.

VS Code ist dabei nicht nur ein Editor, sondern die Schaltzentrale fuer Entwicklung, Test und Deployment-Vorbereitung.

Rolle von GitHub Copilot und Codex

GitHub Copilot und Codex wurden als AI-Entwicklungshelfer eingesetzt.

Copilot hilft besonders gut direkt beim Schreiben und Vervollstaendigen von Code. Codex wurde hier als Agent genutzt, der groessere Zusammenhaenge bearbeiten kann:

• Codebasis lesen,
• Stellen finden,
• Aenderungen planen,
• Dateien bearbeiten,
• Build ausfuehren,
• Fehler analysieren,
• Doku schreiben.

Dadurch konnte die Entwicklung iterativ laufen: Idee formulieren, Code anpassen, testen, Log ansehen, nachbessern.

Setup und Projektstart mit AI

Auch das Setup wurde durch AI vereinfacht.

Fuer so eine App muss man wissen:

• welche Runtime gebraucht wird,
• wie ASP.NET Core gestartet wird,
• welche Umgebungsvariablen benoetigt werden,
• wie OAuth Redirect URIs gesetzt werden,
• wie Azure App Service konfiguriert wird,
• welche Entra ID App Registrations noetig sind,
• welche Secrets sicher gespeichert werden muessen.

AI kann hier Checklisten erstellen, fehlende Werte erkennen und erklaeren, warum ein bestimmter Wert gebraucht wird.

Beispiel:

• GRAPH_MAIL_TENANT_ID ist die Directory/Tenant ID.
• GRAPH_MAIL_CLIENT_ID ist die Application/Client ID.
• GRAPH_MAIL_CLIENT_SECRET muss der Secret Value sein, nicht die Secret ID.
• GRAPH_MAIL_FROM muss eine echte Microsoft-365-Mailbox sein.

Das sind Details, an denen man ohne Erfahrung leicht haengen bleibt.

Azure und Entra ID: Viel Infrastruktur, weniger Reibung

Damit die App produktiv funktioniert, mussten mehrere Azure- und Microsoft-365-Themen verbunden werden:

• Azure App Service fuer das Hosting,
• App Settings fuer Konfiguration und Secrets,
• Microsoft Entra ID fuer App Registrations,
• Microsoft Graph fuer Login, Kalender und Mailversand,
• Admin Consent fuer Mail.Send,
• Redirect URIs fuer OAuth,
• Log Stream fuer Fehlersuche.

Jeder dieser Schritte kann fuer sich genommen komplex sein. AI hat geholfen, Fehlermeldungen zu interpretieren und den naechsten Schritt zu finden.

Ein Beispiel aus der Entwicklung:

Invalid client secret provided.
Ensure the secret being sent is the client secret value, not the client secret ID.

AI konnte daraus ableiten: Die App Registration war grundsaetzlich richtig, aber in den App Settings wurde wahrscheinlich die Secret ID statt des Secret Values eingetragen.

Datenschutz und Berechtigungen

Der Motivationskicker speichert nur Daten, die fuer die Nutzung der App erforderlich sind. Es gibt kein Werbe-Tracking, keinen Verkauf von Daten und keine Weitergabe an Dritte zu Marketingzwecken.

Gespeichert werden koennen:

• Login-Daten bzw. technische Accountdaten,
• E-Mail-Adresse und Verifikationsstatus,
• App-Einstellungen, zum Beispiel Sprache und Kalenderauswahl,
• gespeicherte Reflexionen und Challenge-Historie,
• verschluesselte OAuth-Tokens, wenn Google oder Microsoft verbunden wird.

Bei Google Login oder Kalenderverbindung fordert die App Profil-/E-Mail-Zugriff und lesenden Kalenderzugriff an:

• openid,
• profile,
• email,
• Google Calendar calendar.readonly.

Bei Microsoft Login oder Kalenderverbindung fordert die App an:

• openid,
• profile,
• offline_access,
• User.Read,
• Calendars.Read.

Die Kalenderrechte werden nur genutzt, um aktuelle und kommende Termine zu lesen und daraus passendere Motivations- oder Fokusvorschlaege zu erstellen. Die App erstellt, veraendert oder loescht keine Kalendereintraege.

AI-Funktionen koennen Energielevel, relevante Kalenderinformationen und bisherige App-Historie als Kontext verwenden, um eine Challenge zu erzeugen.

Verbindungen zu Google oder Microsoft koennen in den Einstellungen getrennt werden.

Kostenkontrolle durch E-Mail-Bestaetigung

AI-Funktionen koennen Kosten verursachen. Deshalb wurde eine einfache Kostenbremse eingebaut:

• Google- und Microsoft-Logins gelten als bestaetigt.
• Lokale User und Test-User muessen erst ihre E-Mail bestaetigen.
• Erst danach darf /api/nudge eine AI-Challenge erzeugen.

Wichtig: Diese Pruefung findet serverseitig statt. Sie ist also nicht nur ein Button im Frontend, sondern Teil der API-Logik.

Was AI nicht ersetzt

AI nimmt nicht die Verantwortung ab.

Man muss weiterhin entscheiden:

• welche Daten gespeichert werden,
• welche Kosten akzeptabel sind,
• welche Sicherheitsregeln gelten,
• welche Provider genutzt werden,
• welche Nutzerfuehrung sinnvoll ist,
• wann etwas gut genug fuer einen Test ist.

AI beschleunigt die Umsetzung, erklaert Zusammenhaenge und hilft beim Debugging. Die fachliche Entscheidung bleibt beim Menschen.

Fazit

Diese App zeigt, wie AI-gestuetzte Entwicklung in der Praxis aussehen kann.

Es geht nicht darum, dass man gar nichts mehr wissen muss. Es geht darum, dass man mit AI schneller von einer Idee zu einer funktionierenden Anwendung kommt.

Statt in jedem Bereich sofort Experte sein zu muessen, kann man mit AI:

• Fragen stellen,
• Architektur verstehen,
• Code erweitern,
• Cloud-Probleme einordnen,
• Konfigurationen pruefen,
• Fehler schneller beheben,
• Dokumentation erstellen.

Der Motivationskicker ist damit nicht nur eine App zum Ausprobieren, sondern auch ein Beispiel dafuer, wie moderne Softwareentwicklung mit AI fuer kleinere Teams, Selbststaendige und Unternehmen zugaenglicher wird.