Flutter ist ein leistungsstarkes Framework für die Entwicklung plattformübergreifender mobiler Apps. Eine der Stärken von Flutter ist die einfache Integration externer APIs, die es Entwicklern ermöglichen, ihre Apps mit dynamischen Inhalten und fortschrittlichen Funktionen zu bereichern. In diesem Artikel zeige ich dir, wie du eine externe API am Beispiel der OpenAI API in eine Flutter-App integrierst. Du wirst auch lernen, wie du deinen persönlichen API-Schlüssel sicher speicherst, indem du die dotenv-Bibliothek verwendest.
Was sind APIs?
APIs (Application Programming Interfaces) sind Schnittstellen, die es verschiedenen Softwareanwendungen ermöglichen, miteinander zu kommunizieren. Sie ermöglichen es, Daten und Funktionen von externen Diensten zu nutzen, ohne dass du den gesamten Code schreiben musst. Eine API stellt eine Sammlung von Endpunkten zur Verfügung, auf die du zugreifen kannst, um Informationen abzurufen oder zu senden. Beispiele für solche Dienste sind Google Maps, Wetterdienste und eben auch die OpenAI API.
In diesem Tutorial nutzen wir die OpenAI API, um die Leistungsfähigkeit von GPT-4 in unserer Flutter-App zu integrieren. Dabei zeigen wir, wie du mit HTTP-Anfragen Daten von der API abrufen kannst.
Schritte zur Integration der OpenAI API in Flutter
- Flutter-Projekt einrichten
Bevor wir mit der API-Integration beginnen, erstelle ein neues Flutter-Projekt:
- Notwendige Pakete hinzufügen
Für die Kommunikation mit der API benötigen wir das http-Paket, das HTTP-Anfragen in Flutter ermöglicht. Darüber hinaus verwenden wir das flutter_dotenv-Paket, um unseren API-Schlüssel sicher zu speichern. Zur Benutzung dieses Pakets werden wir eine Datei .env in unserem Projektordner anlegen, auf die wir später zugreifen müssen. Um diese zu aus Dart abrufbar zu machen, fügen wir sie unseren Assets hinzu. Öffne die pubspec.yaml und füge die folgenden Abhängigkeiten und Assets hinzu:
Dann speichere einmal die pubspec.yaml oder führe im Terminal den folgenden Befehl aus.
- API-Key von OpenAI besorgen
Um auf die OpenAI API zugreifen zu können, benötigst du einen API-Schlüssel. Dieser kann über die OpenAI-Website generiert werden. Melde dich dort an, erstelle ein Projekt und kopiere deinen API-Schlüssel.
- API-Key sicher speichern
Es ist wichtig, deinen API-Schlüssel sicher zu speichern und nicht direkt im Code zu hinterlegen. Das flutter_dotenv Paket hilft uns, Umgebungsvariablen in einer .env-Datei zu verwalten. Somit wird der API-Schlüssel auch davor geschützt, auf Github hochgeladen zu werden und dort wiederum von anderen Nutzern heruntergeladen zu werden.
Erstelle im Hauptverzeichnis deines Projekts eine .env-Datei und füge dort deinen API-Schlüssel ein:
Nun müssen wir sicherstellen, dass die .env-Datei geladen wird. Öffne dazu die main.dart-Datei und lade die Umgebungsvariablen direkt zu Beginn der main-Methode:
- Eine HTTP-Anfrage an die OpenAI API senden
Nun, da wir die notwendigen Pakete installiert und den API-Schlüssel sicher gespeichert haben, können wir eine Anfrage an die OpenAI API senden. Dafür erstellen wir eine einfache Funktion, die eine Anfrage an die OpenAI API stellt, um eine Antwort vom Modell GPT-3 oder GPT-4 zu erhalten.
Füge die folgende Funktion in deiner Dart-Datei hinzu:
Diese Funktion fetchOpenAIResponse sendet eine Anfrage an die OpenAI API und gibt die Antwort des Modells als Text zurück. Du kannst das Modell und andere Parameter wie beispielsweise max_completion_tokens anpassen, um die Ausgabe zu steuern. In der API Dokumentation von OpenAI findest du weitere Informationen über die zu übergebenden Parameter und über den Response. Im Beispiel holen wir uns die Antwort der künstlichen Intelligenz aus dem Response, welcher im JSON-Format zurückgegeben wird. Ein Response Body kann beispielsweise so aussehen:
Wie du siehst befindet sich die Antwort auf unseren Prompt unter choices –> Index 0 (da es sich um eine Liste handelt) –> message –> content.
- Ergebnisse in der App anzeigen
Um die Antwort von OpenAI in deiner App anzuzeigen, kannst du eine einfache Benutzeroberfläche erstellen. In der main.dart-Datei fügst du eine einfache Benutzeroberfläche hinzu, die den Text vom OpenAI-Modell anzeigt:
Hier können Nutzer einen Text eingeben, der dann als Eingabeaufforderung an die OpenAI API gesendet wird. Die Antwort wird unterhalb des Textfeldes angezeigt.
Fazit
Die Integration von externen APIs in Flutter-Apps ist eine großartige Möglichkeit, um zusätzliche Funktionen wie KI, Wetterdaten, Geolocation oder soziale Netzwerke in deine App zu integrieren. In diesem Beispiel haben wir gesehen, wie man die OpenAI API einbindet, um GPT-4 in eine Flutter-App zu integrieren. Durch die Verwendung der dotenv-Bibliothek haben wir den API-Schlüssel sicher gespeichert und so potenzielle Sicherheitsrisiken vermieden.
Mit diesen Grundlagen kannst du viele weitere APIs einbinden und deine App um interessante und nützliche Funktionen erweitern.
