Création d'une galerie d'images dans Flutter avec Oracle Content Management en mode Headless

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 utilisateur Flutter qui constitue une galerie typique.

Dans ce tutoriel, nous allons créer une galerie 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 la galerie d'images 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 galerie d'images se compose de plusieurs écrans d'images de nourriture et de boissons disponibles dans un café.

Cette image montre une galerie d'images avec différents types de bagels, certains avec de la crème ou des garnitures, ou les deux.

Les catégories sont des noeuds enfant d'une taxonomie et peuvent être organisées en hiérarchies. Pour notre galerie d'images, nous voulons afficher toutes les catégories disponibles, quelle que soit l'organisation. Pour ce faire, nous devons d'abord trouver les taxonomies disponibles, que nous utilisons la ressource d'API REST GET /published/api/v1.1/taxonomies.

Ensuite, nous devons obtenir l'ensemble des catégories pour chacune des taxonomies. Pour ce faire, utilisez l'API REST GET /published/api/v1.1/taxonomies/{id}/categories.

Pour construire l'aperçu d'une catégorie, comme Bagels, nous devons obtenir un compte du nombre d'images et des URL des quatre premières images.

Cette image présente les images de la catégorie Petit déjeuner.

Notre demande de recherche des ressources publiées dans la catégorie spécifie les critères de catégorie via une chaîne de requête, comme suit :

"(taxonomies.categories.nodes.id eq 892CD6BC4F654249A00CB7942EE8C773)"

Remarque : Outre la publication des ressources numériques que nous voulons afficher, vous devez également publier les taxonomies sur le canal.

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

Ce tutoriel est basé sur l'hypothèse que vous avez créé votre référentiel de ressources et que vous disposez actuellement d'un modèle de contenu vide (c'est-à-dire qu'aucun type de contenu n'a été créé).

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. Importer le pack de ressources d'échantillons Oracle Content Management
  3. Charger vos propres ressources d'image
  4. Créer des taxonomies et les lier à des ressources d'image

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 'OCEImageGalleryChannel' 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 'OCEImageGalleryChannel' 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 'OCEImageGalleryRepository' dans le cadre de ce tutoriel.

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

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

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

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.

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. Vous pouvez télécharger l'archive de 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 l'extraction, cet emplacement inclut un fichier nommé OCEImageGallery_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 à présent OCEImageGalleryRepository 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 OCEImageGalleryRepository sélectionné.

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

    Cette image présente l'écran de confirmation de téléchargement pour le fichier OCEImageGallery_data.zip.

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

    Cette image montre le fichier OCEImageGallery_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 OCEImageGalleryRepository. 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, OCEImageGalleryChannel.

    Cette image présente le référentiel OCEImageGalleryRepository, 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 OCEImageGalleryChannel 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 OCEImageGalleryChannel 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 OCEImageGalleryChannel 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 démarrer la création de la galerie d'images dans Flutter.

Charger vos propres ressources d'image

Pour ce tutoriel, nous utilisons un référentiel de ressources appelé " OCEImageGalleryRepository " pour créer la page d'accueil de notre site de galerie. Cette page d'accueil se compose du titre " Galerie d'images " ainsi que des albums de collection d'images à l'intérieur desquels figurent des ressources d'image.

Cette image montre la page d'accueil de la galerie d'images, avec des images de différentes catégories d'images : sandwichs, boissons, dessert, petit déjeuner et nourriture.

Pour ajouter des ressources d'image au référentiel de ressources de la galerie :

  1. Connectez-vous à l'interface Web d'Oracle Content Management.

  2. Cliquez sur Ressources dans le menu de navigation de gauche.

  3. Ouvrez le référentiel OCEImageGalleryRepository.

  4. Cliquez sur Ajouter dans l'angle supérieur droit de la page pour ajouter des ressources d'image au référentiel de ressources de la galerie.

    Cette image présente la page Equipements avec le contenu et le menu déroulant Ajouter ouvert, avec deux options : Ajouter à partir de Documents et Ajouter à partir de cet ordinateur.

  5. Chargez vos propres nouvelles ressources à partir de votre ordinateur local ou choisissez des ressources existantes déjà dans Oracle Content Management.

Vous devez créer une taxonomie dans Oracle Content Management, puis affecter des catégories aux ressources de votre référentiel.

Pour créer une taxonomie 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 Taxonomies dans la liste de sélection de l'en-tête de page.

    Cette image présente l'option Taxonomies 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 une taxonomie. Nommez le canal 'OCEImageGalleryTaxonomy' dans le cadre de ce tutoriel.

    Cette image présente le panneau de définition de la taxonomie, avec 'OCEImageGalleryTaxonomy' dans le champ de nom de la taxonomie.

  4. Cliquez sur Créer.

  5. Créez maintenant la taxonomie en ajoutant des catégories : Cliquez sur Ajouter une catégorie.

    Cette image présente la page Ajouter une catégorie pour la taxonomie 'OCEImageGalleryTaxonomy'.

  6. Nommez l'article de catégorie parent "Food" et ajoutez les catégories enfant suivantes :

    • Petit-déjeuner
    • Dessert
    • Boissons
    • Sandwichs

    Cliquez sur Terminé en haut à droite de l'écran.

    Cette image présente la page de définition de catégorie, avec "Bien" comme catégorie parent et ces catégories enfant : Petit déjeuner, Dessert, Boissons et Sandwiches.

  7. Sur la page Taxonomies, sélectionnez la taxonomie OCEImageGalleryTaxonomy et cliquez sur Promouvoir dans la barre d'actions pour la rendre disponible pour utilisation dans les référentiels de ressources.

    Cette image montre la taxonomie OCEImageGalleryTaxonomy sélectionnée dans la liste, avec l'option Promouvoir dans la barre d'actions visible.

Modifiez ensuite le référentiel OCEImageGalleryRepository pour activer la taxonomie OCEImageGalleryTaxonomy pour ce référentiel :

  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 Référentiels dans la liste de sélection de l'en-tête de page.

  3. Sélectionnez et modifiez le référentiel OCEImageGalleryRepository.

  4. Dans le champ Taxonomies, sélectionnez OCEImageGalleryTaxonomy pour que vous puissiez affecter les catégories de cette taxonomie aux ressources du référentiel OCEImageGalleryRepository.

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

  5. Cliquez sur Enregistrer.

Affectez ensuite des catégories de taxonomie à chacune des ressources d'image dans le référentiel OCEImageGalleryRepository :

  1. Connectez-vous à l'interface Web d'Oracle Content Management.

  2. Cliquez sur Ressources dans le menu de navigation de gauche.

  3. Ouvrez le référentiel OCEImageGalleryRepository.

  4. Sélectionnez des ressources d'image, cliquez sur Plus dans la barre d'actions, puis choisissez Catégories dans le menu.

    Cette image présente une ressource sélectionnée dans le référentiel OCEImageGalleryRepository, avec le menu de sélection Plus (y compris l'option Catégories).

  5. Dans le panneau Catégories, cliquez sur Ajouter une catégorie. Recherchez le nom de la catégorie dans la barre de recherche ou sélectionnez une catégorie dans la structure hiérarchique de la taxonomie, puis cliquez sur Ajouter pour affecter la catégorie sélectionnée. Vous pouvez affecter plusieurs catégories à une immobilisation.

    Cette image présente le panneau Catégories d'une ressource, avec la barre de recherche des catégories et la structure hiérarchique des taxonomies Alimentaires.

  6. Une fois que vous avez terminé d'affecter des taxonomies à toutes les ressources d'image, sélectionnez toutes les ressources du référentiel et publiez-les dans le canal OCEImageGalleryChannel.

Pour utiliser le contenu d'Oracle Content Management dans une application Flutter, nous pouvons utiliser l'exemple de galerie 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.

La construction de la galerie d'images 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 galerie 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-gallery-sample.git
cd oce-flutter-gallery-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 galerie 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': 'e0b6421e73454818948de7b1eaddb091'
};

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 OCEImageGalleryChannel.

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 tirer parti de l'API REST Oracle Content Management pour récupérer du contenu et le rendre dans notre galerie d'images.

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 chargeons d'abord les taxonomies pour le canal spécifié dans oce.dart.
  2. Pour chacune des taxonomies, nous obtenons toutes les catégories de cette taxonomie.
  3. Pour chaque catégorie, nous obtenons quatre éléments de contenu dans cette catégorie.
  4. Pour chacun de ces éléments, nous extrayons ses URL de rendu.

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

La fonction fetchTaxonomies() associée à la fonction fetchCategories() obtient toutes les catégories de toutes les taxonomies. La fonction fetchItemsForCategory est ensuite appelée pour ajouter les quatre éléments de catégorie à chaque catégorie. Enfin, retrieveThumbnailURL est appelé pour obtenir les URL de vignette.

  // Fetch the taxonomies for the channel
  Future<List<String>> fetchTaxonomies() async {
    final Content content = Content();
    try {
      dynamic data = await content.getTaxonomies();
      dynamic taxonomies = data['items'];
      List<String> idArray = [];
      for (var taxonomy in taxonomies) {
        idArray.add(taxonomy['id']);
      }
      return idArray;
    } catch (exception) {
      rethrow;
    }
  }

  // Fetch the categories for the specified taxonomyId.
  Future<List<dynamic>> fetchCategories(taxonomyId) async {
    final Content content = Content();
    dynamic data = await content.queryTaxonomyCategories({
      'id': '$taxonomyId',
    });
    return data['items'];
  }

  // Fetch the items that belong to the specified category
  Future<dynamic> fetchItemsForCategory(String categoryId, bool limit) async {
    final Content content = Content();
    dynamic data = await content.queryItems({
      'q': '(taxonomies.categories.nodes.id eq "$categoryId")',
      'fields': 'all',
      'expand': 'all',
      'limit': limit ? '4' : '100',
      'totalResults': 'true',
    });
    return data;
  }

  // Retrieve the thumbnail URL for the item specified.
  Future<String> retrieveThumbnailURL(identifier) async {
    final Content content = Content();
    dynamic data = await content.getItem({
      'id': identifier,
      'fields': 'all',
      'expand': 'all',
    });
    String url = data['fields']['renditions'][1]['formats'][0]['links'][0]['href'];
    return url;
  }

Page de grille d'images

La page de grille d'images reçoit un code catégorie et nécessite plusieurs appels de données pour obtenir toutes ses données :

  1. Obtenir tous les articles pour la catégorie spécifiée.
  2. Pour chaque élément, obtenez ses URL de rendu.

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

  Future<dynamic> fetchItemsForCategory(String categoryId, bool limit) async {
    final Content content = Content();
    dynamic data = await content.queryItems({
      'q': '(taxonomies.categories.nodes.id eq "$categoryId")',
      'fields': 'all',
      'expand': 'all',
      'limit': limit ? '4' : '100',
      'totalResults': 'true',
    });
    return data;
  }

Il appelle fetchItemsForCategory, comme la page d'accueil, mais sans limite, de sorte que tous les éléments sont renvoyés, pas seulement quatre.

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

Composants Flutter

L'application de galerie décompose chaque page en plusieurs composants plus petits.

Les sections suivantes présentent comment Flutter rend notre application dans chacun de nos composants :

Composant HomePage

La page d'accueil se compose d'une liste de catégories pour une taxonomie, avec un aperçu de quatre éléments dans cette catégorie. Il est affiché par le composant HomePage situé à lib/screens/home_page.dart. Le composant utilise les fonctions définies dans le fichier services.dart pour obtenir les données.

  Future<void> fetchData() async {
    final Services services = Services();
    try {
      List<String> taxonomyIdArray = await services.fetchTaxonomies();
      // For each taxonomy, fetch the categories and append them to an array
      for (var taxonomyId in taxonomyIdArray) {
        List<dynamic> data = await services.fetchCategories(taxonomyId);
        for (var categoryData in data) {
          categories.add(CategoryListItemModel.fromJson(categoryData));
        }
        setState(() {
          categories = categories;
        });
      }
    } catch (exception) {
      setState(() => this.exception = exception.toString());
      print(exception.toString());
    }
  }

Ce fichier utilise également un composant situé à lib/components/card_grid.dart pour afficher les images dans une grille.

Composant ImageGrid

Le composant ImageGridPage affiche les éléments de la catégorie. Il est affiché par le composant ImageGrid, situé à lib/screens/image_grid.dart.

Le composant appelle pour obtenir les données du fichier services.dart.

  Future<void> fetchData() async {
    final Services services = Services();

    String categoryId = widget.category.id;
    try {
      dynamic categoryItems =
          await services.fetchItemsForCategory(categoryId, false);
      items = categoryItems['items'];
      setState(() {
        dataFetched = true;
      });
    } catch (exception) {
      setState(() {
        this.exception = exception.toString();
      });
      print(exception.toString());
    }
  }

Composant ImagePager

Le composant ImagePager situé dans lib/screens/image_pager.dart affiche les éléments sous forme de pageur coulissant.

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

Maintenant que nous avons créé notre site de galerie d'images 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 galerie 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 la galerie, nous avons installé et exécuté le site Flutter pour extraire le contenu requis et créer le site.

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.