Erstellen Sie eine Flutter- Neuigkeiten -App mit Contentstack und Dart

Schnellstart

Hier finden Sie eine Kurzanleitung zum Erstellen einer Nachrichten-Web-App in Flutter mit Contentstack und der Entwicklungssprache von Flutter, Dart.

Voraussetzungen

• Android Studio
• Flutter-SDK
• Contentstack -Konto

1. Erstellen einen Stapel

   Einloggen sich bei Ihrem Contentstack Konto an und erstellen Sie einen neuen Stack. Dieser Stapel enthält alle für Ihre Website spezifischen Daten. Mehr erfahren darüber, wie Sie einen Stapel erstellen .

2. Hinzufügen eine Veröffentlichungsumgebung hinzu

   Um eine Umgebung in Contentstack hinzuzufügen, navigieren Sie zu Einstellungen -> Umfeld, und klicken Sie auf + Neu Umgebung Tab. Geben Sie beispielsweise einen passenden Namen für Ihre Umgebung ein Inszenierung.
   
   Geben Sie die Basis URL an (z. B. http://IhrDomainName.com) und wählen Sie die Sprache aus (z. B. Englisch – USA). Klicken Sie dann auf Speichern. Weiterlesen über Umgebungen.

3. Inhalt Importieren

   Ein Inhaltstyp ist wie die Struktur oder der Entwurf einer Seite oder eines Abschnitts Ihrer Website oder Ihres mobilen Eigentums. Weiterlesen über Inhalt .

   Für diese Website sind zwei grundlegende Inhaltstypen erforderlich: Kategorie und Neuigkeiten. Für eine schnelle Integration haben wir diese Inhaltstypen bereits erstellt. Sie müssen sie lediglich in Ihren Stack importieren. (Sie können auch Ihre eigenen Inhaltstypen erstellen. Erfahren Sie, wie das geht).
   
   Um die Inhaltstypen zu importieren, speichern Sie zunächst den ZIP-Ordner der unten angegebenen JSON-Dateien auf Ihrem lokalen Computer. Extrahieren Sie die Dateien aus dem Ordner. Gehen Sie dann zu Ihrem Stack in Contentstack. Auf dem nächsten Bildschirm werden Sie aufgefordert, entweder einen neuen Inhaltstyp zu erstellen oder einen in Ihren Stapel zu importieren. Drücke den Importieren Link und wählen Sie die aus JSON Datei, die auf Ihrem Computer gespeichert ist.

   Hier finden Sie eine kurze Übersicht über die für dieses Projekt erforderlichen Inhaltstypen.

   Neuigkeiten: Mit diesem Inhaltstyp können Sie den Nachrichteninhalt zu Ihrer App hinzufügen.
   Category: Mit diesem Inhaltstyp können Sie die verschiedenen Kategorien Ihrer Nachrichten-App erstellen.

   Herunterladen Alle Inhalt herunter
   
   Nachdem nun alle Inhaltstypen fertig sind, fügen wir einige Inhalte für Ihre Nachrichten-App hinzu.

4. Inhalt Hinzufügen

   Erstellen und veröffentlichen Sie Einträge für die Inhaltstypen „Neuigkeiten“ und „Kategorie“ . Hinzufügen einige Dummy-Einträge für Nachrichtenartikel für den Inhaltstyp „Neuigkeiten“ hinzu. Speichern und veröffentlichen Sie diese Einträge. Lernen wie man erstellen und veröffentlichen Einträge.
   
   Mit diesem Schritt haben Sie Beispieldaten für Ihre Website erstellt. Jetzt ist es an der Zeit, die Präsentationsschicht zu verwenden und zu konfigurieren.

5. Installieren Sie Flutter SDK und Android Studio

   Herunterladen Flutter SDK hier herunter. Abhängig von Ihrem Betriebssystem können Sie die Installationsart für Ihren Computer auswählen. Für unser Beispiel haben wir es unter Windows installiert.
   
   Nachdem Sie Flutter SDK installiert haben, besteht der nächste Schritt darin, eine IDE zu installieren, um eine Flutter-Anwendung zu erstellen. Also, herunterladen Android Studio und richten Sie es ein.

6. Installieren Sie Flutter- und Dart-Plug-Ins

   Um diese Plug-Ins zu installieren, befolgen Sie die folgenden Schritte:

   1. Öffnen Android Studio und klicken Sie auf Einstellungen .
   2. Suchen Sie dann im linken Navigationsbereich nach Plugins und klicken Sie darauf.
   3. Auswählen Marktplatz aus. Sie sehen eine Liste von Plug-Ins, die Sie je nach Bedarf installieren können.
   4. Suchen Sie nun Flutter und klicken Sie auf „Installieren“ .
   5. Klicken Sie auf „Ja“, wenn Sie aufgefordert werden, das Dart-Plugin zu installieren.
   6. Klicken Sie auf Neu starten, wenn Sie dazu aufgefordert werden.

   Hinweis: Stellen Sie den Pfad des Flutter SDK korrekt ein und testen Sie, ob Flutter installiert ist und wie erwartet funktioniert, indem Sie die hier angegebenen Schritte ausführen.

7. Konfigurieren Sie die App

   Um Ihre Flutter-News-App schnell zum Laufen zu bringen, haben wir einen Beispielcode für dieses Projekt erstellt. Sie müssen es herunterladen und die Konfiguration ändern. Herunterladen die App mit dem folgenden Befehl herunter:

   $ git clone https://github.com/contentstack/contentstack-flutter-news-app.git

   Sobald Sie das Projekt heruntergeladen haben:

   1. Öffnen Android Studio und suchen Sie den lib- Ordner.
   2. Herunterladen die herunter contentstack.dart Datei, extrahieren Sie sie und speichern Sie sie in der Datei lib Ordner.
        
      
   3. Die main.dart Die Datei gibt den Einstiegspunkt der zu startenden App an.
      

      Hinweis: Wenn Sie eine Fehlermeldung im Zusammenhang mit der https-Paketbibliothek erhalten, lesen Sie deren Paketanleitung . Alternativ können Sie die Abhängigkeit auch zur Datei pubspec.yaml hinzufügen.

   4. Im news.dart In der Datei „lib“ müssen Sie Contentstack initialisieren, damit die Flutter-App Inhalte von Contentstack abrufen kann. Geben Sie Ihre Stack-Anmeldeinformationen wie unten gezeigt an. Sie müssen den API-Schlüssel, das Bereitstellung und den Name Ihres Stacks angeben, um das SDK zu initialisieren. (Erfahren Sie, wie Sie Ihr finden API-Schlüssel und Bereitstellung von Stack. Weiterlesen über Umgebungen.)
      var stack = Contentstack.stack (apiKey: 'API_KEY', 
      accessToken: 'ACCESS_TOKEN', environment: 'ENVIRONMENT_NAME')

8. Führen Sie Ihre Flutter Neuigkeiten -App aus

   Der letzte Schritt besteht darin, die App auszuführen und zu überprüfen, ob sie Inhalte von Contentstack abruft. Gehen Sie wie folgt vor:

   1. Wählen Sie in Ihrer Android Studio-IDE Ihr Gerät aus Target Selektor und klicken Sie auf Grün Ausführen-Symbol, um die App auszuführen.
      
   2. Wenn Sie das in der Liste aufgeführte Gerät nicht sehen können Zielauswahl, geh zum Tools Option und wählen Sie AVD-Manager. Dort wird ein virtuelles Gerät aufgeführt.
      
   3. Klicken Sie auf das Symbol „Ausführen“ in der Geräteauswahl-Symbolleiste oder rufen Sie den Menü „Ausführen “ und dann „Main.dart“ auf.

Sie sollten den von Contentstack abgerufenen Inhalt auf dem virtuellen Android-Gerät sehen.