Crea un blog a Flutter con Oracle Content Management senza problemi
Introduzione
Flutter è un framework open source di Google per sviluppare applicazioni belli, compilate in modo nativo e multipiattaforma da un singolo codebase. Il codice Flutter compila il codice ARM o Intel e JavaScript per prestazioni rapide su qualsiasi dispositivo. Flutter può essere uno strumento efficace per creare applicazioni che utilizzano contenuti di Oracle Content Management. Grazie al modello di contenuto appropriato, è possibile creare rapidamente un'interfaccia utente Flutter che costituisce un blog tipico.
In questa esercitazione, creeremo un blog semplice in Flutter sfruttando Oracle Content Management come CMS headless. Questo esempio di Flutter è disponibile su GitHub.
Il tutorial prevede tre passi:
- Prepara Oracle Content Management
- Costruisci il blog in Flutter
- Prepara la tua applicazione per la distribuzione
Prerequisiti
Prima di procedere con questa esercitazione, si consiglia di leggere prima le seguenti informazioni:
Per seguire questa esercitazione, è necessario:
- una sottoscrizione a Oracle Content Management
- un account di gestione dei contenuti oracle con ruolo di amministratore dei contenuti
- un computer Windows o Mac con Node versione 10 o successiva
Quello che stiamo costruendo
Il nostro blog sarà composto da tre schermi che consentono ai visitatori di esplorare gli articoli del blog organizzati in argomenti. La prima schermata, la schermata iniziale, sarà costituita da un elenco di argomenti di blog.
Per dare un'occhiata a cosa stiamo creando, ecco lo stato finale della nostra esercitazione: un blog Flutter di base che consuma i contenuti di Oracle Content Management.
Di seguito è riportato l'aspetto della schermata iniziale alla fine di questa esercitazione.

Nella seconda pagina, la schermata dell'argomento, vengono visualizzate le anteprime di ciascun articolo del blog appartenente a un argomento. Di seguito viene descritto l'aspetto di una singola schermata dell'argomento.

Infine, la schermata dell'articolo visualizza l'articolo finale del blog, includendo informazioni sull'autore del blog. Ecco come apparirà una pagina di singoli articoli:

Per continuare, è necessario disporre di una sottoscrizione attiva a Oracle Content Management ed eseguire il login con il ruolo Amministratore contenuto.
Task 1: Prepara Oracle Content Management
Se non si dispone già di un'istanza di Oracle Content Management, vedere Avvio rapido per informazioni su come effettuare la registrazione a Oracle Cloud, eseguire il provisioning di un'istanza di Oracle Content Management e configurare Oracle Content Management come CMS headless.
Per questa esercitazione, sarà necessario creare un modello di contenuto in due modi. È disponibile un asset pack scaricabile che riempirà il repository vuoto con i tipi di contenuto e il contenuto associato oppure è possibile creare un modello di contenuto e un contenuto personalizzati.
Per preparare Oracle Content Management:
- Creare un repository di canali e asset.
- Creare un modello di contenuto utilizzando uno dei due metodi riportati di seguito.
Creare un canale e un repository di asset
È innanzitutto necessario creare un canale e un repository di asset in Oracle Content Management in modo da poter pubblicare contenuti.
Per creare un canale e un repository di asset in Oracle Content Management, procedere come segue.
Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.
Scegliere Contenuto nel menu di navigazione a sinistra, quindi scegliere Pubblicazione dei canali dall'elenco di selezione nell'intestazione della pagina.

Nell'angolo in alto a destra fare clic su Crea per creare un nuovo canale. Assegnare un nome al canale 'OCEGettingStartedChannel' ai fini di questa esercitazione e mantenere l'accesso pubblico. Fare clic su Salva per creare il canale.

Scegliere Contenuto nel menu di navigazione a sinistra, quindi scegliere Repositori dall'elenco di selezione nell'intestazione della pagina.

Nell'angolo in alto a destra fare clic su Crea per creare un nuovo repository di asset. Assegnare un nome al repository asset 'OCEGettingStartedRepository' ai fini di questa esercitazione.

Nel campo Canali di pubblicazione selezionare il canale OCEGettingStartedChannel per indicare a Oracle Content Management che il contenuto del repository OCEGettingStartedRepository può essere pubblicato nel canale OCEGettingStartedChannel. Al termine, fare clic su Salva.

Crea un modello di contenuto
Il passo successivo consiste nel creare un modello di contenuto. I due metodi possono essere utilizzati:
- Metodo 1: Importazione del pacchetto di asset campione di Oracle Content Management
- Metodo 2: Creare un modello di contenuto personalizzato
Importa Asset Pack di esempio di Oracle Content Management
È possibile scaricare un pacchetto di asset di esempio di Oracle Content Management preconfigurato contenente tutti i tipi di contenuto e gli asset necessari per questa esercitazione. Se lo si preferisce, è inoltre possibile creare un modello di contenuto personalizzato anziché scaricare il pacchetto di asset di esempio.
È possibile caricare una copia del contenuto utilizzato in questa esercitazione dal pacchetto di asset campione di Oracle Content Management. In questo modo sarà possibile sperimentare i tipi di contenuto e modificare il contenuto. Se si desidera importare il package di asset campione di Oracle Content Management, è possibile scaricare l'archivio del pacchetto di asset, OCESamplesAssetPack.zip e estrarlo in una directory di propria scelta:
Scaricare il package di asset (OCESamplesAssetPack.zip) di Oracle Content Management dalla pagina download di Oracle Content Management. Estrarre il file zip scaricato in una posizione del computer. Dopo l'estrazione, questa posizione includerà un file denominato OCEGettingStarted_data.zip.
Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.
Scegliere Contenuto nel menu di navigazione a sinistra, quindi scegliere Repositori dall'elenco di selezione nell'intestazione della pagina. Selezionare OCEGettingStartedRepository e fare clic sul pulsante Importa contenuto nella barra delle azioni superiore.

Caricare OCEGettingStarted_data.zip dal computer locale nella cartella Documents.

Una volta caricato, selezionare OCEGettingStarted_data.zip e fare clic su OK per importare il contenuto nel repository asset.

Dopo aver importato correttamente il contenuto, passare alla pagina Asset e aprire il repository OCEGettingStartedRepository. Tutte le immagini e gli elementi di contenuto correlati sono stati aggiunti al repository degli asset.

Fare clic su Seleziona tutto in alto a sinistra, quindi su Pubblica per aggiungere tutti gli asset importati al canale di pubblicazione creato in precedenza, OCEGettingStartedChannel.

Prima della pubblicazione, è necessario convalidare tutti gli asset. Aggiungere innanzitutto OCEGettingStartedChannel come canale selezionato, quindi fare clic sul pulsante Convalida.

Dopo la convalida degli asset, è possibile pubblicare tutti gli asset nel canale selezionato facendo clic sul pulsante Pubblica nell'angolo superiore destro.

Al termine, è possibile vedere nella pagina Asset che tutti gli asset sono stati pubblicati. È possibile visualizzare l'icona sopra il nome dell'asset.

Dopo aver importato Oracle Content Management Samples Asset Pack, è possibile iniziare creare il blog in Flutter.
Crea il tuo modello di contenuto
Anziché importare il pacchetto di asset campione di Oracle Content Management, è anche possibile creare un modello di contenuto personalizzato.
Per questa esercitazione viene utilizzato un tipo di contenuto denominato 'OCEGettingStartedHomePage' per creare la schermata principale del nostro blog. Questa home page è composta da un elenco di argomenti di blog che devono essere inclusi sullo schermo.

Per creare tipi di contenuto per il modello di contenuto, procedere come segue.
- Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.
- Scegliere Contenuto nel menu di navigazione a sinistra, quindi scegliere Tipi di asset dall'elenco di selezione nell'intestazione della pagina.
- Fare clic su Crea nell'angolo superiore destro.
- Scegliere di creare un tipo di contenuto (non un tipo di asset digitale). Ripetere questa operazione per tutti i tipi di contenuto richiesti.

Creeremo quattro tipi di contenuto, ognuno con un proprio set di campi:
- OCEGettingStartedHomePage
- OCEGettingStartedTopic
- OCEGettingStartedAuthor
- OCEGettingStartedArticle
Il primo tipo di contenuto, OCEGettingStartedHomePage, deve avere i seguenti campi:
| Nome visualizzato | Tipo di campo | Obbligatorio. | Nome computer |
|---|---|---|---|
| Nome società | Campo di testo a valore singolo | X | company_name |
| Logo società | Campo di testo a valore singolo | X | company_logo |
| Argomenti | Campo di riferimento con più valori | X | argomenti |
| URL contatto | Campo di testo a valore singolo | X | contact_url |
| Informazioni su URL | Campo di testo a valore singolo | X | about_url |
Di seguito è riportato l'aspetto della definizione del tipo di contenuto OCEGettingStartedHomePage.

Il secondo tipo di contenuto, OCEGettingStartedTopic, deve avere il seguente campo:
| Nome visualizzato | Tipo di campo | Obbligatorio. | Nome computer |
|---|---|---|---|
| Anteprima | Campo immagine a valore singolo | X | anteprima |
Di seguito è riportato l'aspetto del tipo di contenuto OCEGettingStartedTopic.

Il terzo tipo di contenuto, OCEGettingStartedAuthor, deve avere i seguenti campi:
| Nome visualizzato | Tipo di campo | Obbligatorio. | Nome computer |
|---|---|---|---|
| Avatar | Campo immagine a valore singolo | X | avatar |
Di seguito è riportato l'aspetto del tipo di contenuto OCEGettingStartedAuthor.

Il quarto e il tipo di contenuto finale, OCEGettingStartedArticle, devono avere i seguenti campi:
| Nome visualizzato | Tipo di campo | Obbligatorio. | Nome computer |
|---|---|---|---|
| Data pubblicazione | Campo data a valore singolo | X | published_name |
| Autore | Campo di riferimento a valore singolo | X | creare |
| Immagine | Campo immagine a valore singolo | X | immagine |
| Didascalia immagine | Campo di testo a valore singolo | X | image_caption |
| Contenuto articolo | Campo di testo grande a valore singolo | X | article_content |
| Argomento | Campo di riferimento a valore singolo | X | argomento |
Di seguito è riportato l'aspetto del tipo di contenuto OCEGettingStartedArticle.

Dopo aver creato i tipi di contenuto, è possibile aggiungerli al repository creato in precedenza, OCEGettingStartedRepository:
- Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.
- Passare a OCEGettingStartedRepository.
- Modificare il repository e, in Tipi di asset, specificare tutti e quattro i nuovi tipi di contenuto creati. Fare clic sul pulsante Salva per salvare le modifiche.

Dopo aver aggiunto i tipi di contenuto al repository, è possibile aprire il repository OCEGettingStartedRepository nella pagina Asset e iniziare a creare gli elementi di contenuto per tutti i tipi di contenuto.

Task 2: Creare il blog in Flutter
Per utilizzare i contenuti di Oracle Content Management in un'applicazione Flutter, è possibile utilizzare l'esempio di blog Flutter, disponibile per come repository open source su GitHub.
Nota: l'utilizzo dell'esempio Flutter è facoltativo e viene utilizzato in questa esercitazione per iniziare rapidamente. Puoi anche creare la tua applicazione Flutter.
Costruire il blog in Flutter è composto dai seguenti passaggi:
- Installa Flutter
- Duplica il repository di esempio e installa le dipendenze
- Configurare l'applicazione Flutter
- Utilizzare l'interfaccia API REST di Oracle Content Management per recuperare il contenuto
Installa Flutter
La prima cosa da fare per iniziare con Flutter è configurare l'ambiente. Le istruzioni per l'impostazione sono disponibili sul sito Web Fiutter. Utilizzare l'opzione corrispondente al sistema operativo in uso. Di seguito è riportato un riepilogo delle operazioni di installazione.
- Scarica Flutter SDK.
- Aggiornare la variabile di ambiente percorso.
- Eseguire
flutter doctor. - Segui i passaggi indicati sul sito web dedicato agli elementi di disturbo per installare un editor di tua scelta.
- Aggiungere un plugin editor per Android Studio, IntelliJ, VS Code o Emacs. Le istruzioni specificano come installare i plugin Flutter e Dart nell'editor.
- Modificare i valori nel file android.properties per fare riferimento alle posizioni appropriate, alle versioni sdk e kotlin. Potrebbe essere inoltre necessario modificare i valori nel file android.gradle per le versioni appropriate.
Duplica il repository di esempio e installa le dipendenze
L'esempio di blog Flutter è disponibile come repository open source su GitHub.
Occorre prima copiare l'esempio da GitHub al computer locale e modificare la directory nella radice del repository:
git clone https://github.com/oracle-samples/oce-flutter-blog-sample.git
cd oce-flutter-blog-sample
Aprire il progetto da Android Studio o qualsiasi altro editor a scelta. Per ottenere tutti i pacchetti utilizzati nel progetto, fare clic sul pulsante Recupera pacchetti.
Configurazione dell'applicazione Flutter
In questo esempio di blog Flutter, è necessario configurare alcune informazioni in modo che le richieste API REST possano indirizzare l'URL istanza e la versione API corrette con il token canale corretto. Questi valori definiti in lib/config/oce.dart vengono utilizzati dalle funzioni definite in lib/networking/content.dart per stabilire l'endpoint per l'API REST.
In lib/config/oce.dart saranno visualizzate le seguenti informazioni:
const Map<String, String> config = <String, String>{
'serverUrl': 'https://samples.mycontentdemo.com',
'apiVersion': 'v1.1',
'channelToken': '47c9fb78774d4485bc7090bf7b955632'
};
Modifica ogni coppia chiave-valore per riflettere l'URL dell'istanza, la versione dell'API alla quale desideri assegnare la destinazione e il token del canale associato al canale di pubblicazione. Il canale di questa esercitazione è OCEGettingStartedChannel.
Utilizza l'interfaccia API REST di Oracle Content Management per recuperare i contenuti
L'API REST per la consegna dei contenuti consente di accedere agli asset pubblicati in Oracle Content Management. Gli asset pubblicati includono gli elementi di contenuto e gli asset digitali, nonché le relative rendition. È ora possibile utilizzare l'API REST di Oracle Content Management per recuperare i contenuti in modo da renderli disponibili nell'applicazione Flutter del blog.
Il file lib/networking/content.dart dispone di metodi per la connessione al server specificato nel file oce.dart utilizzando l'API REST e restituendo la risposta da esso.
//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}');
}
}
Per il rendering delle immagini, content.dart fornisce anche metodi di supporto per recuperare le varie rendition per un 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;
}
Il file lib/networking/services.dart contiene tutto il codice per ottenere i dati per l'applicazione.
Dati home page
La home page richiede diverse chiamate di dati per ottenere tutti i dati:
- Per prima cosa eseguiamo una query sugli articoli nel canale specificato in oce.dart.
- Recupera i dettagli per ogni elemento dell'argomento.
Aprire lib/networking/services.dart e trovare le funzioni seguenti, che aiutano a ottenere tutti i dati per la home page.
// 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;
}
}
Pagina dell'argomento
La pagina dell'argomento riceve un ID argomento e richiede diverse chiamate dati per ottenere tutti i relativi dati:
- Recupera tutti gli articoli per l'argomento specificato.
- Recupera gli URL di rendition per ciascun articolo.
Aprire lib/networking/services.dart e trovare la funzione seguente, utilizzata dalla funzione fetchData in artt_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;
}
}
Pagina articolo
La pagina dell'articolo riceve un ID articolo e richiede diverse chiamate di dati per ottenere tutti i dati:
- Recupera i dettagli dell'articolo per l'articolo specificato.
- Recupera gli URL di rendition dell'avatar per l'autore dell'articolo.
Aprire lib/networking/services.dart e trovare la funzione seguente, utilizzata dalla funzione fetchData in item.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;
}
}
Ora che abbiamo le nostre query sui dati, possiamo rendere le risposte nei nostri componenti per gli elementi superflui.
Componenti Flutter
L'applicazione blog suddivide ogni schermata in una serie di componenti più piccoli.
Le prossime sezioni forniscono una panoramica del modo in cui Flutter rende la nostra applicazione in ciascuno dei nostri schermi:
Schermata TopicsList
La home page è costituita da un elenco di argomenti in un canale. Viene visualizzato dal componente TopicsList, disponibile in lib/screens/topic_list.dart.
Il file lib/screens/topic_list.dart contiene tutto il codice per ottenere i dati per la schermata e chiama le funzioni definite in 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());
}
}
Il componente utilizza il metodo fetchData per recuperare i dati utilizzando i metodi definiti nel file services.dart. Questo file utilizza anche un componente situato in lib/components/topic_list_item.dart per visualizzare ogni elemento dell'argomento nella schermata degli argomenti.
Schermata ArticlesList
Nella pagina Argomento vengono visualizzati gli articoli di un argomento. Viene visualizzato dal componente ArticlesList, disponibile in lib/screens/articles_list.dart.
Aprire lib/screens/articles_list.dart e individuare la funzione fetchData, utilizzata per ottenere tutti i dati per questa schermata.
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());
}
}
Il componente utilizza il metodo fetchData per ottenere dati dal file services.dart. Questo file utilizza anche un componente situato in lib/components/article_list_item per visualizzare ogni elemento dell'argomento nella schermata degli argomenti.
Schermata articolo
La pagina dell'articolo contiene i dettagli di un articolo. Viene visualizzato dal componente Articolo, situato in lib/screens/article.dart.
Aprire lib/screens/article.dart e trovare la funzione fetchData, utilizzata per ottenere tutti i dati per la schermata dell'articolo.
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());
}
}
Il componente Articolo utilizza il metodo fetchData descritto in precedenza per ottenere dati dal file services.dart. Questo file utilizza anche il componente ItemImage situato in lib/components/item_image per eseguire il rendering dell'immagine dell'articolo.
Task 3: Preparazione dell'applicazione per la distribuzione
Ora che abbiamo costruito il nostro sito di blog Flutter, abbiamo bisogno di distribuirlo su un emulatore o dispositivo in modo da poter eseguire il debug di eventuali problemi e visualizzare in anteprima l'applicazione prima che diventi attiva.
Segui le istruzioni sul sito Web di Flutter per fare in modo che l'editor esegua l'applicazione.
- Se si utilizza Android Studio come editor, individuare la barra degli strumenti principale di Android Studio.
- Nel selettore di destinazione, selezionare un dispositivo Android per l'esecuzione dell'applicazione. Se nessuno è elencato come disponibile, selezionare Strumenti > Android > AVD Manager e crearne uno lì. Per dettagli, vedere Gestione degli AVD.
- Fare clic sull'icona Esegui nella barra degli strumenti oppure richiamare la voce di menu Esegui > Esegui.
Conclusione
In questa esercitazione abbiamo creato un sito di blog in Flutter, che si trova su GitHub. Questo sito utilizza Oracle Content Management come headless CMS. Dopo aver impostato e configurato Oracle Content Management con un canale di contenuto pubblicato per l'esercitazione del sito blog, è stato installato e eseguito il sito Flutter per recuperare il contenuto richiesto ed eseguire l'applicazione.
Per maggiori informazioni su Flutter, visitare il sito Web Flutter.
Per approfondimenti sui concetti importanti di Oracle Content Management nella documentazione.
Per ulteriori esempi, vedere la pagina Esempi di Oracle Content Management in Oracle Help Center.
Crea un blog a Flutter con Oracle Content Management senza problemi
F55469-01
Marzo 2022
Copyright © 2021, 2022, Oracle and/or its affiliates.
Autore principale: Oracle Corporation