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 :
- Préparer Oracle Content Management
- Construire le blog dans Flutter
- 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 :
- un abonnement Oracle Content Management
- un compte oracle-content-management doté du rôle d'administrateur de contenu
- un ordinateur Windows ou Mac avec Node version 10 ou supérieure
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 :
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 :
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 :
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 :
- Créer un canal et un référentiel de ressources.
- 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 :
Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
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.
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.
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.
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.
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é.
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 :
- Méthode 1 : Importer le pack de ressources d'échantillons Oracle Content Management
- Méthode 2 : créer votre propre modèle de contenu
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 :
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.
Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
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.
Téléchargez OCEGettingStarted_data.zip à partir de votre ordinateur local vers le dossier Documents.
Une fois chargé, sélectionnez OCEGettingStarted_data.zip et cliquez sur OK pour importer le contenu dans votre référentiel de ressources.
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.
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.
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.
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.
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.)
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.
Pour créer des types de contenu pour le modèle de contenu :
- Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
- 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.
- Cliquez sur Créer dans l'angle supérieur droit.
- 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.
Nous créerons quatre types de contenu, chacun comportant son propre ensemble de champs :
- OCEGettingStartedHomePage
- OCEGettingStartedTopic
- OCEGettingStartedAuthor
- OCEGettingStartedArticle
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 :
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 :
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 :
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 :
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 :
- Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
- Accédez à OCEGettingStartedRepository.
- 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.
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.
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 :
- Installer Flutter
- Cloner l'exemple de référentiel et installer les dépendances
- Configurer l'application Flutter
- 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 :
- Obtenez le kit SDK Flutter.
- Mettez à jour la variable d'environnement de chemin.
- Exécutez
flutter doctor
. - Suivez les étapes décrites sur le site web Flutter pour installer un éditeur de votre choix.
- 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.
- 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 :
- Nous interrogeons d'abord les éléments du canal spécifié dans oce.dart.
- 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 :
- Obtenir tous les articles du sujet spécifié.
- 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 :
- Obtenir les détails de l'article spécifié.
- 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.
- Si vous utilisez Android Studio comme éditeur, localisez la barre d'outils principale d'Android Studio.
- 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.
- 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.
Créez un blog avec Flutter avec Headless Oracle Content Management
F55462-01
Mars 2022
Copyright © 2021, 2022, Oracle and/or its affiliates.
Auteur principal : Oracle Corporation