Erstellen Sie mit Headless Oracle Content Management einen Blog

Einführung

Flutter ist ein Open-Source-Framework von Google, um schöne, nativ kompilierte, plattformübergreifende Anwendungen aus einer einzelnen Codebasis zu erstellen. Flutter-Code wird mit ARM- oder Intel-Rechnercode sowie JavaScript kompiliert und ermöglicht eine schnelle Performance auf jedem Gerät. Flutter kann ein leistungsstarkes Tool zum Erstellen von Anwendungen sein, die Inhalte aus Oracle Content Management konsumieren. Mit dem richtigen Contentmodell können Sie schnell Flutter UI erstellen, die einen typischen Blog bildet.

In diesem Tutorial erstellen wir einen einfachen Blog in Flutter, indem wir Oracle Content Management als Headless CMS nutzen. Dieses Flutter-Beispiel ist auf GitHub verfügbar.

Das Tutorial besteht aus drei Schritten:

1. Oracle Content Management vorbereiten
2. Blog in Flutter erstellen
3. Anwendung für Deployment vorbereiten

Voraussetzungen

Bevor Sie mit diesem Tutorial fortfahren, sollten Sie zuerst folgende Informationen lesen:

• Wichtige Konzepte
• Asset-Repositorys

Um diesem Tutorial zu folgen, benötigen Sie:

• Oracle Content Management-Abonnement
• ein oracle-content-management-Account mit der Rolle "Inhaltsadministrator"
• einen Windows- oder Mac-Computer mit Node-Version 10 oder höher

Was wir entwickeln

Unser Blog besteht aus drei Bildschirmen, mit denen Besucher Blogartikel, die in Themen organisiert sind, erkunden können. Der erste Bildschirm, der Startbildschirm, besteht aus einer Liste von Blog-Themen.

Im Folgenden finden Sie den Endstatus unseres Tutorials, ein einfacher Flutter-Blog, der Inhalte aus Oracle Content Management konsumiert.

So sieht der Home-Bildschirm am Ende dieses Tutorials aus:

Auf der zweiten Seite, dem Themenbildschirm, wird eine Vorschau jedes Blogartikels angezeigt, der zu einem Thema gehört. So wird ein einzelner Themenbildschirm aussehen:

Zuletzt zeigt der article screen den letzten Blogartikel an, einschließlich Informationen zum Autor des Blogs. So wird eine einzelne Artikelseite aussehen:

Um fortzufahren, benötigen Sie ein aktives Abonnement für Oracle Content Management und müssen mit der Rolle "Inhaltsadministrator" angemeldet sein.

Aufgabe 1: Oracle Content Management vorbereiten

Wenn noch keine Oracle Content Management-Instanz vorhanden ist, erfahren Sie im Schnellstart, wie Sie sich für Oracle Cloud registrieren, eine Oracle Content Management-Instanz bereitstellen und Oracle Content Management als Headless CMS konfigurieren.

Für dieses Tutorial haben Sie zwei Möglichkeiten, ein Contentmodell zu erstellen. Es ist ein herunterladbares Assetpack verfügbar, das Ihr leeres Repository mit Inhaltstypen und zugehörigen Inhalten ausfüllt, oder Sie können Ihr eigenes Contentmodell und Ihren eigenen Inhalt erstellen.

So bereiten Sie Oracle Content Management vor:

1. Erstellen Sie ein Kanal- und Asset-Repository.
2. Erstellen Sie ein Contentmodell mit einer der beiden folgenden Methoden:
   • Methode 1: Oracle Content Management Samples Asset Pack importieren
   • Methode 2: Eigenes Contentmodell erstellen

Kanal- und Anlagen-Repository erstellen

Sie müssen zunächst einen Kanal und ein Asset-Repository in Oracle Content Management erstellen, damit Sie Inhalte veröffentlichen können.

So erstellen Sie einen Kanal und ein Asset-Repository in Oracle Content Management:

1. Melden Sie sich als Administrator bei der Oracle Content Management-Weboberfläche an.

2. Wählen Sie im linken Navigationsmenü die Option Inhalt, und wählen Sie dann in der Auswahlliste im Seitenheader die Option Kanäle veröffentlichen aus.

   

3. Klicken Sie in der oberen rechten Ecke auf Erstellen, um einen neuen Channel zu erstellen. Benennen Sie den Kanal "OCEGettingStartedChannel" für dieses Tutorial, und halten Sie den Zugriff öffentlich. Klicken Sie auf Speichern, um den Channel zu erstellen.

   

4. Wählen Sie im linken Navigationsmenü die Option Inhalt, und wählen Sie dann in der Auswahlliste im Seitenheader die Option Repositories aus.

   

5. Klicken Sie in der oberen rechten Ecke auf Erstellen, um ein neues Asset-Repository zu erstellen. Benennen Sie das Asset-Repository 'OCEGettingStartedRepository' für den Zweck dieses Tutorials.

   

6. Wählen Sie im Feld Kanäle veröffentlichen den Kanal OCEGettingStartedChannel aus, um Oracle Content Management anzugeben, dass Inhalte im Repository OCEGettingStartedRepository im Kanal OCEGettingStartedChannel veröffentlicht werden können. Klicken Sie anschließend auf Speichern.

   

Contentmodelle erstellen

Im nächsten Schritt erstellen Sie ein Contentmodell. Sie haben zwei Möglichkeiten:

• Methode 1: Oracle Content Management Samples Asset Pack importieren
• Methode 2: Eigenes Contentmodell erstellen

Oracle Content Management-Musterassetpaket importieren

Sie können ein vorkonfiguriertes Oracle Content Management-Beispielassetspack herunterladen, das alle erforderlichen Inhaltstypen und Assets für dieses Tutorial enthält. Falls gewünscht, können Sie auch ein eigenes Contentmodell erstellen, anstatt das Beispielassetpaket herunterzuladen.

Sie können eine Kopie des Inhalts, den wir in diesem Tutorial verwenden, aus dem Oracle Content Management Samples Asset Pack hochladen. Dadurch können Sie mit den Inhaltstypen experimentieren und den Inhalt ändern. Wenn Sie das Oracle Content Management Samples Asset Pack importieren möchten, können Sie das Asset Pack-Archiv, OCESamplesAssetPack.zip, herunterladen und in ein Verzeichnis Ihrer Wahl extrahieren:

1. Laden Sie das Oracle Content Management Samples Asset Pack (OCESamplesAssetPack.zip) auf der Download-Seite für Oracle Content Management herunter. Extrahieren Sie die heruntergeladene ZIP-Datei in ein Verzeichnis auf Ihrem Computer. Nach der Extraktion enthält dieses Verzeichnis die Datei OCEGettingStarted_data.zip.

2. Melden Sie sich als Administrator bei der Oracle Content Management-Weboberfläche an.

3. Wählen Sie im linken Navigationsmenü die Option Inhalt, und wählen Sie dann in der Auswahlliste im Seitenheader die Option Repositories aus. Wählen Sie jetzt OCEGettingStartedRepository, und klicken Sie in der oberen Aktionsleiste auf die Schaltfläche Inhalt importieren.

   

4. Laden Sie OCEGettingStarted_data.zip vom lokalen Rechner in den Ordner Dokumente hoch.

   

5. Wählen Sie nach dem Hochladen OCEGettingStarted_data.zip aus, und klicken Sie auf OK, um den Inhalt in das Asset-Repository zu importieren.

   

6. Nachdem der Inhalt erfolgreich importiert wurde, navigieren Sie zur Seite Assets, und öffnen Sie das Repository OCEGettingStartedRepository. Sie sehen, dass jetzt alle zugehörigen Bilder und Inhaltselemente zum Asset-Repository hinzugefügt wurden.

   

7. Klicken Sie oben links auf Alle auswählen und dann auf Veröffentlichen, um alle importierten Assets zu dem Veröffentlichungskanal hinzuzufügen, den Sie zuvor erstellt haben, OCEGettingStartedChannel.

   

8. Vor der Veröffentlichung müssen Sie alle Assets validieren. Fügen Sie zunächst OCEGettingStartedChannel als ausgewählten Kanal hinzu, und klicken Sie auf die Schaltfläche Validieren.

   

9. Nachdem die Assets validiert wurden, können Sie alle Assets im ausgewählten Channel veröffentlichen, indem Sie oben rechts auf die Schaltfläche Veröffentlichen klicken.

   

Anschließend können Sie auf der Seite Anlagen sehen, dass alle Assets veröffentlicht wurden. (Sie können das Symbol über dem Anlagennamen anzeigen.)

Nach dem Import des Oracle Content Management Samples Asset Packs können Sie den Blog in Flutter erstellen.

Erstellen Sie ein eigenes Contentmodell

Anstatt das Oracle Content Management Samples Asset Pack zu importieren, können Sie auch ein eigenes Contentmodell erstellen.

Für dieses Tutorial verwenden wir den Inhaltstyp "OCEGettingStartedHomePage", um den Startbildschirm für unser Blog zu erstellen. Diese Homepage besteht aus einer Liste von Blog-Themen, die auf dem Bildschirm enthalten sein sollten.

So erstellen Sie Inhaltstypen für das Contentmodell:

1. Melden Sie sich als Administrator bei der Oracle Content Management-Weboberfläche an.
2. Wählen Sie im linken Navigationsmenü die Option Inhalt, und wählen Sie dann in der Auswahlliste im Seitenheader die Option Anlagentypen aus.
3. Klicken Sie auf Erstellen in der oberen rechten Ecke.
4. Wählen Sie diese Option, um einen Inhaltstyp zu erstellen (kein digitaler Vermögensgegenstandstyp). Wiederholen Sie diesen Vorgang für alle erforderlichen Inhaltstypen.

Wir erstellen vier Inhaltstypen mit jeweils eigenen Feldern:

• OCEGettingStartedHomePage
• OCEGettingStartedTopic
• OCEGettingStartedAuthor
• OCEGettingStartedArticle

Der erste Inhaltstyp OCEGettingStartedHomePage muss die folgenden Felder enthalten:

Anzeigename	Feldtyp	Erforderlich	Rechnername
Unternehmensname	Einwertiges Textfeld	X	company_name
Firmenlogo	Einwertiges Textfeld	X	company_logo
Themen	Referenzfeld für mehrere Werte	X	Themen
Kontakt-URL	Einwertiges Textfeld	X	contact_url
Info URL	Einwertiges Textfeld	X	about_url

So sollte die Inhaltstypdefinition OCEGettingStartedHomePage aussehen:

Der zweite Inhaltstyp OCEGettingStartedTopic muss das folgende Feld enthalten:

Anzeigename	Feldtyp	Erforderlich	Rechnername
Thumbnail	Bildfeld mit einem Wert	X	Thumbnail

So sollte der Inhaltstyp OCEGettingStartedTopic aussehen:

Der dritte Inhaltstyp OCEGettingStartedAuthor muss die folgenden Felder enthalten:

Anzeigename	Feldtyp	Erforderlich	Rechnername
Avatar	Bildfeld mit einem Wert	X	Avatar

So sollte der Inhaltstyp OCEGettingStartedAuthor aussehen:

Der vierte und letzte Inhaltstyp OCEGettingStartedArticle muss die folgenden Felder enthalten:

Anzeigename	Feldtyp	Erforderlich	Rechnername
Veröffentlichungsdatum	Datumsfeld für einen Wert	X	published_name
Autor	Einzelwertreferenzfeld	X	Autor
Bild	Bildfeld mit einem Wert	X	Bild
Bildunterschrift	Einwertiges Textfeld	X	image_caption
Artikelinhalt	Einwertiges Großtextfeld	X	article_content
Thema	Einzelwertreferenzfeld	X	Thema

So sollte der Inhaltstyp OCEGettingStartedArticle aussehen:

Nachdem Sie die Inhaltstypen erstellt haben, können Sie diese Inhaltstypen dem zuvor erstellten Repository hinzufügen: OCEGettingStartedRepository:

1. Melden Sie sich als Administrator bei der Oracle Content Management-Weboberfläche an.
2. Navigieren Sie zu OCEGettingStartedRepository.
3. Bearbeiten Sie das Repository, und geben Sie unter Anlagentypen alle vier neu erstellten Inhaltstypen an. Klicken Sie auf Speichern, um die Änderungen zu speichern.

Nachdem Sie die Inhaltstypen zum Repository hinzugefügt haben, können Sie das Repository OCEGettingStartedRepository auf der Seite Assets öffnen und mit der Erstellung Ihrer Inhaltselemente für alle Inhaltstypen beginnen.

Aufgabe 2: Blog in Flutter erstellen

Um unseren Oracle Content Management-Inhalt in einer Flutter-Anwendung zu konsumieren, können Sie das Flutter-Blogbeispiel verwenden, das als Open-Source-Repository auf GitHub verfügbar ist.

Hinweis: Beachten Sie, dass die Verwendung des Flutter-Beispiels optional ist. In diesem Tutorial erhalten Sie einen schnellen Einstieg. Sie können auch Ihre eigene Flutter-Anwendung erstellen.

Der Aufbau des Blogs in Flutter besteht aus folgenden Schritten:

1. Flutter installieren
2. Beispiel-Repository klonen und Abhängigkeiten installieren
3. Flutter-Anwendung konfigurieren
4. REST-API für Oracle Content Management zum Abrufen von Inhalt verwenden

Flutter installieren

Das erste, was Sie tun müssen, um mit Flutter zu beginnen, ist die Einrichtung Ihrer Umgebung. Anweisungen zur Einrichtung finden Sie auf der Flutter-Website. Verwenden Sie die dem Betriebssystem entsprechende Option. Zusammenfassung der Installationsschritte:

1. Holen Sie sich das Flutter-SDK.
2. Aktualisieren Sie die Pfadumgebungsvariable.
3. Führen Sie flutter doctor aus.
4. Befolgen Sie die Schritte auf der Flutter-Website, um einen Editor Ihrer Wahl zu installieren.
5. Fügen Sie ein Editor-Plug-in für Android Studio, IntelliJ, VS Code oder Emacs hinzu. Die Anweisungen geben an, wie die Flutter- und Dart-Plug-ins in Ihrem Editor installiert werden.
6. Ändern Sie die Werte in der Datei android.properties so, dass sie sich auf die entsprechenden Speicherorte, sdk- und kotlin-Versionen beziehen. Möglicherweise müssen Sie auch Werte in der Datei android.gradle für die entsprechenden Versionen ändern.

Beispiel-Repository klonen und Abhängigkeiten installieren

Das Flutter-Blogbeispiel ist als Open-Source-Repository auf GitHub verfügbar.

Sie müssen das Beispiel zunächst von GitHub auf Ihren lokalen Computer klonen und in das Repository-Root-Verzeichnis wechseln:

git clone https://github.com/oracle-samples/oce-flutter-blog-sample.git
cd oce-flutter-blog-sample

Öffnen Sie das Projekt von Android Studio oder einem anderen Editor Ihrer Wahl. Um alle Packages abzurufen, die im Projekt verwendet werden, klicken Sie auf die Schaltfläche Packages abrufen.

Flutter-Anwendung konfigurieren

In diesem Flutter-Blogbeispiel müssen Sie einige Informationen konfigurieren, damit Ihre REST-API-Anforderungen die richtige Instanz-URL und API-Version mit dem richtigen Kanaltoken als Ziel festlegen können. Diese in lib/config/oce.dart definierten Werte werden von den in lib/networking/content.dart definierten Funktionen verwendet, um den Endpunkt für die REST-API einzurichten.

Die folgenden Informationen werden in lib/config/oce.dart angezeigt:

const Map<String, String> config = <String, String>{
  'serverUrl': 'https://samples.mycontentdemo.com',
  'apiVersion': 'v1.1',
  'channelToken': '47c9fb78774d4485bc7090bf7b955632'
};

Ändern Sie jedes Schlüssel/Wert-Paar entsprechend Ihrer Instanz-URL, der gewünschten API-Version und dem Channel-Token, das mit Ihrem Veröffentlichungskanal verknüpft ist. Der Kanal für dieses Tutorial ist OCEGettingStartedChannel.

REST-API für Oracle Content Management zum Abrufen von Inhalt verwenden

Die REST-API für die Inhaltsbereitstellung bietet Zugriff auf veröffentlichte Assets in Oracle Content Management. Veröffentlichte Assets umfassen Inhaltselemente und digitale Assets sowie ihre Formatvarianten. Wir können jetzt die REST-API von Oracle Content Management nutzen, um Inhalte abzurufen, damit wir sie in unserer Blog-Flutter-Anwendung wiedergeben können.

Die Datei lib/networking/content.dart enthält Methoden für die Verbindung mit dem Server, der in der Datei oce.dart mit der REST-API angegeben ist und die Antwort von ihr zurückgibt.

  //Utility method to build up the URL for published content.
  String _getPublishedContentServerURL() {
    final String? serverUrl = data['serverUrl'] as String?;
    final String? apiVersion = data['apiVersion'] as String?;
    return '$serverUrl/content/published/api/$apiVersion/';
  }

  // Adds the channel token to the URL
  String _addChannelToURL(String currUrl) {
    final String? channelToken = data['channelToken'] as String?;
    return '$currUrl?channelToken=$channelToken';
  }

  //Make an http get call and return the response if successful
  Future<dynamic> _get(String url) async {
    dynamic responseJson;
    try {
      final Response response = await get(Uri.parse(url));
      responseJson = _returnResponse(response);
    } on SocketException {
      throw FetchDataException(kConnectionError);
    }
    return responseJson;
  }

  //Return the json decoded response body if response status is successful
  dynamic _returnResponse(Response response) {
    switch (response.statusCode) {
      case 200:
        final Map<String, dynamic>? responseJson =
            json.decode(response.body.toString()) as Map<String, dynamic>?;
        return responseJson;
      case 400:
        throw BadRequestException(response.body.toString());
      case 401:
      case 403:
        throw UnauthorizedException(response.body.toString());
      case 500:
      default:
        throw FetchDataException('StatusCode : ${response.statusCode}');
    }
  }

Zur Wiedergabe der Bilder bietet content.dart auch Helper-Methoden zum Abrufen der verschiedenen Formatvarianten für ein Asset.

  String getMediumRenditionUrl(Map<String, String> args) {
    final String itemId = args['id'];
    if (itemId == null) return null;
    String url = _getPublishedContentServerURL();
    url = '${url}assets/$itemId/Medium';
    // add the channel token to the URL
    url = _addChannelToURL(url);
    url = '$url&format=jpg&&type=responsiveimage';
    return url;
  }

  String getRenditionURL(Map<String, String> args) {
    final String itemId = args['id'];
    if (itemId == null) return null;
    String url = _getPublishedContentServerURL();
    url = '${url}assets/$itemId/native';
    // add the channel token to the URL
    url = _addChannelToURL(url);
    return url;
  }

Die Datei lib/networking/services.dart enthält den Code zum Abrufen von Daten für die Anwendung.

Homepage-Daten

Die Homepage benötigt mehrere Datenaufrufe, um alle Daten abzurufen:

1. Zunächst werden Artikel im in oce.dart angegebenen Kanal abgefragt.
2. Rufen Sie die Details für jedes Themenelement ab.

Öffnen Sie lib/networking/services.dart und finden Sie die unten aufgeführten Funktionen, mit denen Sie alle Daten für die Homepage abrufen können.

  // Fetch the top level values to be displayed on the home page.
  Future<TopicListModel> fetchHomePage() async {
    final Content content = Content();
    try {
      final dynamic topicListData = await content.queryItems(<String, String>{
        'q': '(type eq "OCEGettingStartedHomePage" AND name eq "HomePage")',
        'fields': 'all',
      });
      return TopicListModel.fromJson(topicListData);
    } catch (exception) {
      rethrow;
    }
  }

  // Fetch details about the specific topic
  Future<TopicListItemModel> fetchTopic(topicId) async {
    final Content content = Content();
    try {
      final dynamic data = await content.getItem(<String, String?>{
        'id': topicId,
        'fields': 'all',
        'expand': 'all',
      });
      TopicListItemModel topicListItemModel = TopicListItemModel.fromJson(data);
      topicListItemModel.thumbnailUrl = getMediumRenditionUrl(topicListItemModel.thumbnailId);
      return topicListItemModel;
    } catch (exception) {
      rethrow;
    }
  }

Themenseite

Die Themenseite empfängt eine Themen-ID und erfordert mehrere Datenaufrufe, um alle Daten abzurufen:

1. Holen Sie sich alle Artikel für das angegebene Thema.
2. Ruft die Formatierungs-URLs für jeden Artikel ab.

Öffnen Sie lib/networking/services.dart und finden Sie die Funktion unten, die von der Funktion fetchData in items_list.dart verwendet wird.

  // Get all the articles for the specified topic.
  //
  // @param {String} topicId - the id of the topic
  // @returns ArticleListModel which contains the list of articles for the topic
  Future<ArticleListModel>fetchArticles(topicId) async{
    final Content content = Content();
    try {
      final dynamic data = await content.queryItems(<String, String>{
        'q': '(type eq "OCEGettingStartedArticle" AND fields.topic eq "$topicId")',
        'fields': 'all',
        'orderBy': 'fields.published_date:desc',
      });
      ArticleListModel articleListModel = ArticleListModel.fromJson(data);
      for (ArticleListItemModel articleListItemModel in articleListModel.articlesList) {
        articleListItemModel.thumbnailUrl = getMediumRenditionUrl(articleListItemModel.thumbnailId);
      }
      return articleListModel;
    } catch (exception) {
      rethrow;
    }
  }

Artikelseite

Die Artikelseite erhält eine Artikel-ID und benötigt mehrere Datenaufrufe, um alle Daten abzurufen:

1. Rufen Sie die Artikeldetails für den angegebenen Artikel ab.
2. Rufen Sie die Formatvarianten-URLs des Avatars für den Artikelautor ab.

Öffnen Sie lib/networking/services.dart und finden Sie die Funktion unten, die von der Funktion fetchData in item.dart verwendet wird.

  // Get details of the specified article.
  //
  // @param {String} articleId - The id of the article
  // @returns ArticleModel - the article
  Future<ArticleModel>fetchArticle(articleId) async{
    final Content content = Content();
    try {
      final dynamic data = await content.getItem(<String, String?>{
        'id': articleId,
        'expand': 'all',
      });
      ArticleModel articleModel =  ArticleModel.fromJson(data);
      articleModel.authorImageUrl = getMediumRenditionUrl(articleModel.authorImageId);
      articleModel.imageUrl = getRenditionUrl(articleModel.imageId);
      return articleModel;
    } catch (exception) {
      rethrow;
    }
  }

Nachdem wir unsere Datenabfragen erstellt haben, können wir die Antworten in unseren Flutter-Komponenten wiedergeben.

Flutterkomponenten

Die Blog-Anwendung unterteilt jeden Bildschirm in eine Reihe kleinerer Komponenten.

Die nächsten Abschnitte bieten einen Überblick darüber, wie Flutter unsere Anwendung auf jedem unserer Bildschirme wiedergibt:

• TopicsList-Bildschirm
• ArticlesList-Bildschirm
• Artikelbildschirm

TopicsList-Bildschirm

Die Homepage besteht aus einer Liste von Themen in einem Channel. Er wird von der Komponente TopicsList in lib/screens/topic_list.dart wiedergegeben.

Die Datei lib/screens/topic_list.dart enthält den gesamten Code zum Abrufen von Daten für den Bildschirm und ruft die in services.dart definierten Funktionen auf.

  Future<void> fetchData() async {
    final Services services = Services();
    try {
      topicListModel = await services.fetchHomePage();
      setState(() {
        topicListModel = topicListModel;
      });
      //for each topicid , fetch the topic
      for (var topicId in topicListModel!.topicIdList) {
        TopicListItemModel topic = await services.fetchTopic(topicId);
        setState(() {
          topics.add(topic);
          if (topics.length == topicListModel!.topicIdList.length) {
            dataFetched = true;
          }
        });
      }
    } catch (e) {
      setState(() {
        exception = e.toString();
      });
      print(exception.toString());
    }
  }

Die Komponente verwendet die Methode fetchData, um Daten mit Methoden abzurufen, die in der Datei services.dart definiert sind. Diese Datei verwendet auch eine Komponente in lib/components/topic_list_item.dart, um jedes Themenelement im Themenbildschirm wiederzugeben.

ArticlesList-Bildschirm

Auf der Seite "Thema" werden die Artikel in einem Thema angezeigt. Er wird von der Komponente ArticlesList in lib/screens/articles_list.dart wiedergegeben.

Öffnen Sie lib/screens/articles_list.dart, und suchen Sie die Funktion fetchData, mit der alle Daten für diesen Bildschirm abgerufen werden.

  Future<void> fetchData() async {
    final Services services = Services();
    try {
      ArticleListModel articleListModel =
          await services.fetchArticles(widget.topicModel.id);
      setState(() {
        articles = articleListModel.articlesList;
      });
    } catch (exception) {
      setState(() {
        this.exception = exception.toString();
      });
      print(exception.toString());
    }
  }

Die Komponente verwendet die Methode fetchData, um Daten aus der Datei services.dart abzurufen. Diese Datei verwendet auch eine Komponente in lib/components/article_list_item, um jedes Themenelement im Themenbildschirm wiederzugeben.

Artikelbildschirm

Auf der Seite "Artikel" werden Details zu einem Artikel angezeigt. Sie wird durch die Artikelkomponente in lib/screens/article.dart gerendert.

Öffnen Sie lib/screens/article.dart und suchen Sie die Funktion fetchData, mit der alle Daten für den Artikelbildschirm abgerufen werden.

  Future<void> fetchData() async {
    final Services services = Services();
    try {
      ArticleModel articleModel =
          await services.fetchArticle(widget.articleListItemModel.id);
      setState(() {
        this.articleModel = articleModel;
      });
    } catch (exception) {
      setState(() {
        this.exception = exception.toString();
      });
      print(exception.toString());
    }
  }

Die Artikelkomponente verwendet die zuvor beschriebene Methode fetchData, um Daten aus der Datei services.dart abzurufen. Diese Datei verwendet auch die ItemImage-Komponente in lib/components/item_image, um das Artikelbild wiederzugeben.

Aufgabe 3: Anwendung für Deployment vorbereiten

Nachdem wir unsere Flutter-Blog-Website erstellt haben, müssen wir sie jetzt auf einem Emulator oder Gerät bereitstellen, damit wir Probleme beheben und eine Vorschau der Anwendung anzeigen können, bevor sie live geht.

Befolgen Sie die Anweisungen auf der Flutter-Website, damit Ihr Editor die App ausführt.

1. Wenn Sie Android Studio als Editor verwenden, suchen Sie die Android Studio-Haupt-Symbolleiste.
2. Wählen Sie in der Zielauswahl ein Android-Gerät für die Ausführung der App aus. Wenn keine Liste verfügbar ist, wählen Sie "Extras > Android > AVD-Manager" und erstellen dort eine Option. Weitere Informationen finden Sie unter AVDs verwalten.
3. Klicken Sie in der Symbolleiste auf das Symbol "Ausführen", oder rufen Sie die Menüoption "Ausführen" > "Ausführen" auf.

Schlussfolgerung

In diesem Tutorial haben wir eine Blog-Seite in Flutter erstellt, die sich auf GitHub befindet. Diese Site verwendet Oracle Content Management als Headless CMS. Nachdem Sie Oracle Content Management mit einem Kanal veröffentlichter Inhalte für das Tutorial der Blog-Site eingerichtet und konfiguriert haben, haben wir die Flutter-Site installiert und ausgeführt, um den erforderlichen Inhalt abzurufen und die App auszuführen.

Weitere Informationen zu Flutter finden Sie auf der Flutter-Website.

Machen Sie sich mit wichtigen Oracle Content Management-Konzepten in der Dokumentation vertraut.

Weitere Beispiele finden Sie auf der Seite Oracle Content Management - Beispiele im Oracle Help Center.

---

Titel und Copyright-Informationen

Erstellen Sie mit Headless Oracle Content Management einen Blog

F55464-01

März 2022

Copyright © 2021, 2022, Oracle and/or its affiliates.

Hauptverfasser: Oracle Corporation