7.4. Zusammenfassung

7.4.1. Einleitung

Die Entwicklung plattformübergreifender Apps war traditionell aufwändig, da für jede Plattform eine separate App entwickelt werden musste. Mit Frameworks wie Flutter und React Native hat sich dies in den letzten Jahren geändert. Flutter, ein Open-Source-Framework von Google, ermöglicht die Erstellung plattformübergreifender Apps mit einer einzigen Codebasis, unter Verwendung der Programmiersprache Dart. In diesem Projekt wird eine einfache mobile Anwendung entwickelt, die eine ChatGPT-ähnliche Benutzeroberfläche bietet. Ziel ist es, Dart und Flutter zu nutzen, um eine einfache App zu erstellen, die Anfragen an die OpenAI ChatGPT API sendet und Antworten empfängt.

7.4.2. Methodik

Flutter- und Dart-Installation

  • Installation von Flutter über gängige Package-Manager.

  • Einrichtung und Überprüfung der Installation mit „Flutter Doctor“.

  • Notwendige Tools für die Entwicklung auf verschiedenen Plattformen (Android Studio, Xcode, Webbrowser, etc.).

Projekt Setup

  • Erstellung eines neuen Flutter-Projekts mit flutter create project_name.

  • Standardordnerstruktur: lib/, android/, ios/, web/, etc.

  • Konfiguration und Installation von Paketen über pub.dev und „pubspec.yaml“.

Integration der OpenAI ChatGPT API

  • Beantragung eines API-Schlüssels bei OpenAI.

  • Entwicklung des ChatGPTService zur Kommunikation mit der API, einschließlich Methoden zum Laden und Speichern von Nachrichten und zum Senden von Anfragen an die API.

  • Implementierung der sendMessage Methode, um Nachrichten an die API zu senden und Antworten zu verarbeiten.

Erstellung des Chat-Widgets

  • Design und Implementierung des Chat-Widgets zur Anzeige von Nachrichten.

  • Anordnung der Nachrichten in einer Listenansicht, unterteilt in Nutzer- und ChatGPT-Nachrichten, mit individuellem Styling und Layout.

7.4.3. Ergebnisse

  • Flutter-Projektstruktur: Die Anwendung nutzt die Standard-Ordnerstruktur von Flutter, wobei lib/ für den Hauptcode verwendet wird. Abhängigkeiten sind in pubspec.yaml definiert.

  • API-Integration: Die ChatGPTService-Klasse ermöglicht die Kommunikation mit der OpenAI ChatGPT API, die Nachrichten senden, Antworten empfangen und lokal speichern kann. Die Kommunikation erfolgt über das http-Paket und die Nachrichten werden mit shared_preferences gespeichert.

  • Chat-UI: Das Chat-Widget zeigt Nachrichten in einer ScrollView an, differenziert nach Nutzer- und AI-Nachrichten mit unterschiedlichem Styling. Nachrichten werden dynamisch hinzugefügt und angezeigt, mit einem ansprechenden Layout und Hintergrundverlauf.

7.4.4. Fazit

Das Projekt demonstriert erfolgreich, wie man mit Flutter und Dart eine ChatGPT-ähnliche Anwendung entwickelt, die Anfragen an die OpenAI API stellt und Antworten darstellt. Die Nutzung von Flutter für die plattformübergreifende Entwicklung vereinfacht die Entwicklung und Pflege der App erheblich. Die Integration der OpenAI ChatGPT API ermöglichte es, eine funktionale Chat-Funktionalität bereitzustellen. Die App bietet eine benutzerfreundliche Oberfläche, und die Implementierung der Nachrichtenspeicherung und -abruf aus lokalem Speicher zeigt die praktische Anwendung von shared_preferences. Die erstellte App kann als Grundlage für weiterführende Entwicklungen in der Chatbot- und KI-Anwendungsentwicklung dienen.