Créez un blog avec Flutter avec Headless Oracle Content Management

Introduction

Flutter est un framework open source de Google pour la création d'applications multi-plates-formes belles, compilées de manière native à partir d'une base de code unique. Le code flutter est compilé en code machine ARM ou Intel ainsi qu'en code JavaScript, pour des performances rapides sur tous les appareils. Flutter peut être un outil puissant pour créer des applications qui utilisent du contenu d'Oracle Content Management. Avec le bon modèle de contenu, vous pouvez rapidement créer une interface Flutter qui constitue un blog typique.

Dans ce tutoriel, nous créerons un blog simple dans Flutter en utilisant Oracle Content Management en tant que CMS sans tête. Cet exemple Flutter est disponible sur GitHub.

Ce didacticiel comporte trois étapes :

  1. Préparer Oracle Content Management
  2. Construire le blog dans Flutter
  3. Préparer votre application pour le déploiement

Prérequis

Avant de poursuivre ce tutoriel, nous vous recommandons de lire les informations suivantes en premier :

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

Ce que nous construisons

Notre blog se compose de trois écrans qui permettent aux visiteurs d'explorer des articles de blog organisés en sujets. Le premier écran, l'écran d'accueil, se compose d'une liste de sujets de blog.

Pour consulter ce que nous construisons, voici l'état final de notre tutoriel, un blog Flutter de base qui utilise du contenu d'Oracle Content Management.

Voici à quoi ressemblera l'écran d'accueil à la fin de ce tutoriel :

Cette image montre l'écran d'accueil du site de démonstration Cafe Supremo avec une liste des sujets disponibles.

La deuxième page, l'écran de sujet, affiche des aperçus de chaque article de blog appartenant à un sujet. L'écran d'un sujet donné se présente comme suit :

Cette image présente un écran de sujet appelé "Comment faire du café" avec une liste des articles disponibles pour ce sujet.

Enfin, l'écran d'article affiche le dernier article du blog, y compris des informations sur l'auteur du blog. Voici à quoi ressemblera une page d'article individuelle :

Cette image présente une page d'article individuelle, avec le contenu et une référence d'auteur.

Pour continuer, vous devez disposer d'un abonnement actif à Oracle Content Management et être connecté avec le rôle Administrateur de contenu.

Tâche 1 : Préparation d'Oracle Content Management

Si vous ne disposez pas encore d'une instance Oracle Content Management, reportez-vous à Démarrage rapide pour savoir comment vous inscrire à Oracle Cloud, provisionner une instance Oracle Content Management et configurer Oracle Content Management en tant que CMS sans tête.

Pour ce tutoriel, vous devrez créer un modèle de contenu de deux manières. Un pack de ressources téléchargeables est disponible pour remplir votre référentiel vide avec les types de contenu et le contenu associé, ou vous pouvez créer votre propre modèle de contenu et votre propre contenu.

Pour préparer Oracle Content Management :

  1. Créer un canal et un référentiel de ressources.
  2. Créez un modèle de contenu à l'aide de l'une des deux méthodes suivantes :

Créer un canal et un référentiel d'immobilisations

Vous devez d'abord créer un canal et un référentiel de ressources dans Oracle Content Management afin de pouvoir publier du contenu.

Pour créer un canal et un référentiel de ressources dans Oracle Content Management, procédez comme suit :

  1. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.

  2. Sélectionnez Contenu dans le menu de navigation de gauche, puis choisissez Publier des canaux dans la liste de sélection de l'en-tête de page.

    Cette image présente l'option Canaux de publication sélectionnée dans le menu déroulant de l'en-tête de page Contenu.

  3. Dans l'angle supérieur droit, cliquez sur Créer pour créer un canal. Nommez le canal 'OCEGettingStartedChannel' dans le cadre de ce tutoriel et conservez l'accès public. Cliquez sur Enregistrer pour créer le canal.

    Cette image présente le panneau de définition du canal de publication, avec 'OCEGettingStartedChannel' dans le champ de nom du canal.

  4. Sélectionnez Contenu dans le menu de navigation de gauche, puis choisissez Référentiels dans la liste de sélection de l'en-tête de page.

    Cette image présente l'option Référentiels sélectionnée dans le menu déroulant de l'en-tête de page Contenu.

  5. Dans l'angle supérieur droit, cliquez sur Créer pour créer un référentiel de ressources. Nommez le référentiel de ressources 'OCEGettingStartedRepository' dans le cadre de ce tutoriel.

    Cette image présente le panneau de définition du référentiel, avec 'OCEGettingStartedRepository' dans le champ Nom du référentiel.

  6. Dans le champ Canaux de publication, sélectionnez le canal OCEGettingStartedChannel pour indiquer à Oracle Content Management que le contenu du référentiel OCEGettingStartedRepository peut être publié dans le canal OCEGettingStartedChannel. Cliquez sur Enregistrer une fois que vous avez terminé.

    Cette image présente le panneau de définition du référentiel, avec 'OCEGettingStartedChannel' dans le champ Canaux de publication.

Créer un modèle de contenu

L'étape suivante consiste à créer un modèle de contenu. Vous pouvez utiliser l'une des deux méthodes suivantes :

Importer le pack de ressources d'échantillons Oracle Content Management

Vous pouvez télécharger un exemple de pack de ressources Oracle Content Management préconfiguré qui contient tous les types et ressources de contenu requis pour ce tutoriel. Si vous préférez, vous pouvez également créer votre propre modèle de contenu au lieu de télécharger le pack de ressources échantillon.

Vous pouvez télécharger une copie du contenu que nous utilisons dans ce tutoriel à partir d'Oracle Content Management Samples Asset Pack. Vous pourrez ainsi tester les types de contenu et modifier le contenu. Si vous souhaitez importer le pack de ressources Oracle Content Management Samples, vous pouvez télécharger l'archive du pack de ressources, OCESamplesAssetPack.zip, puis l'extraire dans le répertoire de votre choix :

  1. Téléchargez le pack de ressources d'échantillons Oracle Content Management (OCESamplesAssetPack.zip) à partir de la page Téléchargements d'Oracle Content Management. Extrayez le fichier ZIP téléchargé à un emplacement sur votre ordinateur. Après extraction, cet emplacement inclut un fichier nommé OCEGettingStarted_data.zip.

  2. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.

  3. Sélectionnez Contenu dans le menu de navigation de gauche, puis choisissez Référentiels dans la liste de sélection de l'en-tête de page. Sélectionnez maintenant OCEGettingStartedRepository et cliquez sur le bouton Importer un contenu dans la barre d'actions supérieure.

    Cette image présente la page Référentiels, avec l'élément OCEGettingStartedRepository sélectionné.

  4. Téléchargez OCEGettingStarted_data.zip à partir de votre ordinateur local vers le dossier Documents.

    Cette image présente l'écran de confirmation de téléchargement du fichier OCEGettingStarted_data.zip.

  5. Une fois chargé, sélectionnez OCEGettingStarted_data.zip et cliquez sur OK pour importer le contenu dans votre référentiel de ressources.

    Cette image montre le fichier OCEGettingStarted_data.zip sélectionné avec le bouton OK activé.

  6. Une fois le contenu importé, accédez à la page Assets et ouvrez le référentiel OCEGettingStartedRepository. Vous verrez que toutes les images et tous les éléments de contenu associés ont été ajoutés au référentiel de ressources.

    Cette image présente le référentiel OCEGettingStartedRepository, avec toutes les ressources qui viennent d'être importées.

  7. Cliquez sur Sélectionner tout en haut à gauche, puis sur Publier pour ajouter toutes les ressources importées au canal de publication que vous avez créé précédemment, OCEGettingStartedChannel.

    Cette image présente le référentiel OCEGettingStartedRepository, avec toutes les ressources sélectionnées et l'option Publier dans la barre d'actions visibles.

  8. Avant de publier, vous devez valider toutes les ressources. Ajoutez d'abord OCEGettingStartedChannel en tant que canal sélectionné, puis cliquez sur le bouton Valider.

    Cette image présente la page Résultats de la validation, avec le canal OCEGettingStartedChannel ajouté dans le champ Canaux, toutes les ressources à valider et le bouton Valider activé.

  9. Une fois les ressources validées, vous pouvez les publier dans le canal sélectionné en cliquant sur le bouton Publier dans le coin supérieur droit.

    Cette image présente la page Résultats de la validation, avec le canal OCEGettingStartedChannel ajouté dans le champ Canaux, toutes les ressources validées et le bouton Publier activé.

Une fois cette opération effectuée, vous pouvez voir sur la page Immobilisations que toutes les immobilisations ont été publiées. (Vous pouvez le signaler par l'icône située au-dessus du nom de l'équipement.)

Cette image présente la page Actifs, tous les actifs étant publiés.

Après avoir importé le pack de ressources Oracle Content Management Samples, vous pouvez commencer à créer le blog dans Flutter.

Créer votre propre modèle de contenu

Au lieu d'importer le pack de ressources Oracle Content Management Samples, vous pouvez également créer votre propre modèle de contenu.

Pour ce tutoriel, nous utilisons un type de contenu appelé " OCEGettingStartedHomePage " pour créer l'écran d'accueil de notre blog. Cette page d'accueil se compose d'une liste de sujets de blog qui doivent être inclus à l'écran.

Cette image montre l'écran d'accueil du site de démonstration Cafe Supremo.

Pour créer des types de contenu pour le modèle de contenu :

  1. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
  2. Sélectionnez Contenu dans le menu de navigation de gauche, puis choisissez Types d'immobilisation dans la liste de sélection de l'en-tête de page.
  3. Cliquez sur Créer dans l'angle supérieur droit.
  4. Choisissez de créer un type de contenu (et non un type de ressource numérique). Répétez cette opération pour tous les types de contenu requis.

Cette image présente la boîte de dialogue Créer un type de ressource dans l'interface Web d'Oracle Content Management.

Nous créerons quatre types de contenu, chacun comportant son propre ensemble de champs :

Le premier type de contenu, OCEGettingStartedHomePage, doit comporter les champs suivants :

Nom d'affichage Type de champ Requis Nom de l'ordinateur
Nom de la société Champ de texte à valeur unique X company_name
Logo de la société Champ de texte à valeur unique X company_logo
Rubriques Champ de référence à valeurs multiples X sujets
URL du contact Champ de texte à valeur unique X contact_url
A propos de l'URL Champ de texte à valeur unique X about_url

Voici à quoi doit ressembler votre définition de type de contenu OCEGettingStartedHomePage :

Cette image présente la définition du type de contenu 'OCEGettingStartedHomePage'. Elle inclut les champs de données suivants : Nom de la société, Logo de la société, Sujets, URL du contact et A propos de l'URL.

Le second type de contenu, OCEGettingStartedTopic, doit comporter le champ suivant :

Nom d'affichage Type de champ Requis Nom de l'ordinateur
Miniature Champ d'image à valeur unique X miniature

Voici à quoi doit ressembler votre type de contenu OCEGettingStartedTopic :

Cette image présente la définition du type de contenu 'OCEGettingStartedTopic'. Il inclut ce champ de données : Vignette.

Le troisième type de contenu, OCEGettingStartedAuthor, doit comporter les champs suivants :

Nom d'affichage Type de champ Requis Nom de l'ordinateur
Avatar Champ d'image à valeur unique X avatar

Voici à quoi doit ressembler votre type de contenu OCEGettingStartedAuthor :

Cette image présente la définition du type de contenu 'OCEGettingStartedAuthor'. Il inclut ce champ de données : Avatar.

Le quatrième et dernier type de contenu, OCEGettingStartedArticle, doit comporter les champs suivants :

Nom d'affichage Type de champ Requis Nom de l'ordinateur
Date de publication Champ de date à valeur unique X published_name
Auteur Champ de référence à valeur unique X auteur
Image Champ d'image à valeur unique X image
Légende d'image Champ de texte à valeur unique X image_caption
Contenu de l'article Champ de texte long à valeur unique X article_content
Sujet Champ de référence à valeur unique X rubrique

Voici à quoi doit ressembler votre type de contenu OCEGettingStartedArticle :

Cette image présente la définition du type de contenu 'OCEGettingStartedArticlePage'. Elle comprend les champs de données suivants : Date de publication, Auteur, Image, Légende d'image, Contenu de l'article et Sujet.

Une fois que vous avez créé vos types de contenu, vous pouvez ajouter ces types au référentiel que vous avez créé précédemment, OCEGettingStartedRepository :

  1. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
  2. Accédez à OCEGettingStartedRepository.
  3. Modifiez le référentiel et, sous Types d'équipement, indiquez les quatre nouveaux types de contenu. Cliquez sur le bouton Save (Enregistrer) pour enregistrer vos modifications.

Cette image présente la page Modifier le référentiel dans Oracle Content Management, avec les quatre nouveaux types de contenu associés au référentiel OCEGettingStartedRepository.

Après avoir ajouté les types de contenu au référentiel, vous pouvez ouvrir le référentiel OCEGettingStartedRepository sur la page Assets et commencer à créer vos éléments de contenu pour tous les types de contenu.

Cette image présente les éléments de contenu sur la page Ressources de l'interface Web d'Oracle Content Management, avec des options à gauche pour les collections, les canaux, les langues, les types, la sélection d'éléments de contenu et le statut.

Tâche 2 : Construire le blog dans Flutter

Pour utiliser le contenu d'Oracle Content Management dans une application Flutter, nous pouvons utiliser l'exemple de blog Flutter, disponible en tant que référentiel open source sur GitHub.

Remarque : N'oubliez pas que l'utilisation de l'exemple Flutter est facultative et que nous l'utilisons dans ce tutoriel pour vous lancer rapidement. Vous pouvez également créer votre propre application Flutter.

Construire le blog dans Flutter se compose des étapes suivantes :

  1. Installer Flutter
  2. Cloner l'exemple de référentiel et installer les dépendances
  3. Configurer l'application Flutter
  4. Utiliser l'API REST Oracle Content Management pour extraire du contenu

Installer Flutter

La première chose que vous devez faire pour commencer avec Flutter est de configurer votre environnement. Vous trouverez les instructions de configuration sur le site web Flutter. Utilisez l'option correspondant à votre système d'exploitation. Voici un récapitulatif des étapes d'installation :

  1. Obtenez le kit SDK Flutter.
  2. Mettez à jour la variable d'environnement de chemin.
  3. Exécutez flutter doctor.
  4. Suivez les étapes décrites sur le site web Flutter pour installer un éditeur de votre choix.
  5. Ajoutez un module d'extension d'éditeur pour Android Studio, IntelliJ, VS Code ou Emacs. Les instructions indiquent comment installer les modules d'extension Flutter et Dart dans votre éditeur.
  6. Modifiez les valeurs du fichier android.properties pour faire référence aux emplacements appropriés, aux versions sdk et kotlin. Vous devrez peut-être également modifier les valeurs du fichier android.gradle pour les versions appropriées.

Cloner l'exemple de référentiel et installer les dépendances

L'exemple de blog Flutter est disponible en tant que référentiel open source sur GitHub.

Vous devez d'abord cloner l'échantillon à partir de GitHub sur votre ordinateur local et modifier votre répertoire dans la racine du référentiel :

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

Ouvrez le projet depuis Android Studio ou tout autre éditeur de votre choix. Pour obtenir tous les packages utilisés dans le projet, cliquez sur le bouton Obtenir les packages.

Configurer l'application Flutter

Dans cet exemple de blog Flutter, vous devez configurer quelques informations afin que vos demandes d'API REST puissent cibler l'URL d'instance et la version d'API correctes avec le jeton de canal approprié. Ces valeurs définies dans lib/config/oce.dart sont utilisées par les fonctions définies dans lib/networking/content.dart pour établir l'adresse de l'API REST.

Vous trouverez les informations suivantes dans lib/config/oce.dart :

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

Modifiez chaque paire clé-valeur pour refléter l'URL de votre instance, la version d'API à cibler et le jeton de canal associé au canal de publication. Le canal de ce tutoriel est OCEGettingStartedChannel.

Utiliser l'API REST Oracle Content Management pour extraire du contenu

L'API REST pour la fourniture de contenu permet d'accéder aux ressources publiées dans Oracle Content Management. Les ressources publiées incluent les éléments de contenu et les ressources numériques, ainsi que leur rendu. Nous pouvons désormais utiliser l'API REST Oracle Content Management pour récupérer du contenu et le rendre dans notre application Flutter de blog.

Le fichier lib/networking/content.dart comporte des méthodes permettant de se connecter au serveur spécifié dans le fichier oce.dart à l'aide de l'API REST et de renvoyer la réponse.

  //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}');
    }
  }

Pour le rendu des images, content.dart fournit également des méthodes d'aide pour extraire les différents rendus d'une ressource.

  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;
  }

Le fichier lib/networking/services.dart contient tout le code permettant d'obtenir des données pour l'application.

Données de la page d'accueil

La page d'accueil nécessite plusieurs appels de données pour obtenir toutes ses données :

  1. Nous interrogeons d'abord les éléments du canal spécifié dans oce.dart.
  2. Récupérez les détails de chacun des éléments de sujet.

Ouvrez lib/networking/services.dart et trouvez les fonctions ci-dessous, qui aident à obtenir toutes les données de la page d'accueil.

  // 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;
    }
  }

Page Sujet

La page de rubrique reçoit un ID de sujet et nécessite plusieurs appels de données pour obtenir toutes ses données :

  1. Obtenir tous les articles du sujet spécifié.
  2. Obtenez les URL de rendu pour chaque article.

Ouvrez lib/networking/services.dart et trouvez la fonction ci-dessous, qui est utilisée par la fonction fetchData dans items_list.dart.

  // 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;
    }
  }

Page Article

La page d'article reçoit un ID d'article et nécessite plusieurs appels de données pour obtenir toutes ses données :

  1. Obtenir les détails de l'article spécifié.
  2. Obtenir les URL de rendu de l'avatar pour l'auteur de l'article.

Ouvrez lib/networking/services.dart et trouvez la fonction ci-dessous, qui est utilisée par la fonction fetchData dans l'article.dart.

  // 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;
    }
  }

Maintenant que nous avons nos requêtes sur les données, nous pouvons afficher les réponses dans nos composants Flutter.

Composants Flutter

L'application blog décompose chaque écran en plusieurs composants plus petits.

Les sections suivantes présentent comment Flutter rend notre application sur chacun de nos écrans :

Ecran TopicsList

La page d'accueil se compose d'une liste de sujets dans un canal. Il est affiché par le composant TopicsList, situé à lib/screens/topic_list.dart.

Le fichier lib/screens/topic_list.dart contient tout le code permettant d'obtenir les données de l'écran et appelle les fonctions définies dans services.dart.

  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());
    }
  }

Le composant utilise la méthode fetchData pour obtenir des données à l'aide des méthodes définies dans le fichier services.dart. Ce fichier utilise également un composant situé à lib/components/topic_list_item.dart pour afficher chaque élément de sujet dans l'écran des sujets.

Ecran ArticlesList

La page Sujet affiche les articles d'un sujet. Il est affiché par le composant ArticlesList, situé à lib/screens/articles_list.dart.

Ouvrez lib/screens/articles_list.dart et recherchez la fonction fetchData, qui est utilisée pour obtenir toutes les données de cet écran.

  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());
    }
  }

Le composant utilise la méthode fetchData pour obtenir des données à partir du fichier services.dart. Ce fichier utilise également un composant situé à lib/components/article_list_item pour afficher chaque élément de sujet dans l'écran des sujets.

Ecran Article

La page Article affiche les détails d'un article. Il est rendu par le composant Article, situé à lib/screens/article.dart.

Ouvrez lib/screens/article.dart et recherchez la fonction fetchData, qui est utilisée pour obtenir toutes les données de l'écran de l'article.

  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());
    }
  }

Le composant Article utilise la méthode fetchData décrite précédemment pour obtenir des données à partir du fichier services.dart. Ce fichier utilise également le composant ItemImage situé à lib/components/item_image pour afficher l'image de l'article.

Tâche 3 : Préparation de l'application pour le déploiement

Maintenant que nous avons créé notre site de blog Flutter, nous devons le déployer sur un émulateur ou un appareil afin que nous puissions résoudre tous les problèmes et prévisualiser l'application avant sa mise en service.

Suivez les instructions du site web sur le superflu pour votre éditeur afin d'exécuter l'application.

  1. Si vous utilisez Android Studio comme éditeur, localisez la barre d'outils principale d'Android Studio.
  2. Dans le sélecteur de cible, sélectionnez un appareil Android pour exécuter l'application. Si aucune liste n'est disponible, sélectionnez Outils > Android > Gestionnaire AVD et créez-en un. Pour plus d'informations, reportez-vous à la section Managing AVDs.
  3. Cliquez sur l'icône Run dans la barre d'outils ou appelez l'option de menu Run > Run.

Conclusion

Dans ce tutoriel, nous avons créé un site de blog dans Flutter, disponible sur GitHub. Ce site utilise Oracle Content Management comme CMS sans tête. Après avoir configuré Oracle Content Management avec un canal de contenu publié pour le tutoriel du site de blog, nous avons installé et exécuté le site Flutter pour extraire le contenu requis et exécuter l'application.

Pour plus d'informations sur Flutter, visitez le site web sur Flutter.

Découvrez les concepts importants relatifs à Oracle Content Management dans la documentation.

Vous trouverez d'autres exemples de ce type sur la page Exemples Oracle Content Management dans Oracle Help Center.