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:

  1. Prepara Oracle Content Management
  2. Costruisci il blog in Flutter
  3. 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:

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.

Questa immagine mostra la schermata iniziale del sito demo Cafe Supremo con un elenco degli argomenti disponibili.

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.

Questa immagine mostra una schermata di argomento denominata "Come fare caffè" con un elenco degli articoli disponibili per l'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:

Questa immagine mostra una pagina di un singolo articolo con il contenuto e il riferimento di un autore.

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:

  1. Creare un repository di canali e asset.
  2. 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.

  1. Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.

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

    Questa immagine mostra l'opzione Canali di pubblicazione selezionata nel menu a discesa nell'intestazione della pagina Contenuto.

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

    Questa immagine mostra il pannello di definizione del canale di pubblicazione, con 'OCEGettingStartedChannel' nel campo del nome del canale.

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

    Questa immagine mostra l'opzione Repository selezionata nel menu a discesa nell'intestazione della pagina Contenuto.

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

    Questa immagine mostra il pannello di definizione del repository, con 'OCEGettingStartedRepository' nel campo del nome del repository.

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

    Questa immagine mostra il pannello di definizione del repository, con 'OCEGettingStartedChannel' nel campo Canali di pubblicazione.

Crea un modello di contenuto

Il passo successivo consiste nel creare un modello di contenuto. I due metodi possono essere utilizzati:

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:

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

  2. Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.

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

    Questa immagine mostra la pagina Repository, con l'elemento OCEGettingStartedRepository selezionato.

  4. Caricare OCEGettingStarted_data.zip dal computer locale nella cartella Documents.

    Questa immagine mostra la schermata di conferma del caricamento per il file OCEGettingStarted_data.zip.

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

    Questa immagine mostra il file OCEGettingStarted_data.zip selezionato con il pulsante OK abilitato.

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

    Questa immagine mostra il repository OCEGettingStartedRepository, con tutti gli asset appena importati.

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

    Questa immagine mostra il repository OCEGettingStartedRepository, con tutti gli asset selezionati e l'opzione Pubblica nella barra delle azioni visibili.

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

    Questa immagine mostra la pagina Risultati convalida, con il canale OCEGettingStartedChannel aggiunto nel campo Canali, tutti gli asset da convalidare e il pulsante Convalida abilitato.

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

    Questa immagine mostra la pagina Risultati convalida, con il canale OCEGettingStartedChannel aggiunto nel campo Canali, tutti gli asset convalidati e il pulsante Pubblica abilitato.

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

Questa immagine mostra la pagina Asset, con tutti gli asset pubblicati.

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.

Questa immagine mostra la schermata iniziale del sito demo Cafe Supremo.

Per creare tipi di contenuto per il modello di contenuto, procedere come segue.

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

Questa immagine mostra la finestra di dialogo Crea tipo di asset nell'interfaccia Web di Oracle Content Management.

Creeremo quattro tipi di contenuto, ognuno con un proprio set di campi:

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.

Questa immagine mostra la definizione del tipo di contenuto 'OCEGettingStartedHomePage'. Include i seguenti campi dati: Nome società, Logo società, Argomenti, URL contatto e Informazioni sull'URL.

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.

Questa immagine mostra la definizione del tipo di contenuto 'OCEGettingStartedTopic'. Include questo campo dati: Anteprima.

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.

Questa immagine mostra la definizione del tipo di contenuto 'OCEGettingStartedAuthor'. Include questo campo dati: Avatar.

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.

Questa immagine mostra la definizione del tipo di contenuto 'OCEGettingStartedArticlePage'. Include i seguenti campi dati: Data pubblicazione, Autore, Immagine, Didascalia immagine, Contenuto articolo e Argomento.

Dopo aver creato i tipi di contenuto, è possibile aggiungerli al repository creato in precedenza, OCEGettingStartedRepository:

  1. Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.
  2. Passare a OCEGettingStartedRepository.
  3. 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.

Questa immagine mostra la pagina Modifica repository in Oracle Content Management, con i quattro tipi di contenuto appena creati associati al repository OCEGettingStartedRepository.

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.

Questa immagine mostra gli elementi di contenuto nella pagina Asset dell'interfaccia Web di Oracle Content Management, con le opzioni a sinistra per raccolte, canali, lingue, tipi, selezione degli elementi di contenuto e stato.

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:

  1. Installa Flutter
  2. Duplica il repository di esempio e installa le dipendenze
  3. Configurare l'applicazione Flutter
  4. 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.

  1. Scarica Flutter SDK.
  2. Aggiornare la variabile di ambiente percorso.
  3. Eseguire flutter doctor.
  4. Segui i passaggi indicati sul sito web dedicato agli elementi di disturbo per installare un editor di tua scelta.
  5. Aggiungere un plugin editor per Android Studio, IntelliJ, VS Code o Emacs. Le istruzioni specificano come installare i plugin Flutter e Dart nell'editor.
  6. 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:

  1. Per prima cosa eseguiamo una query sugli articoli nel canale specificato in oce.dart.
  2. 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:

  1. Recupera tutti gli articoli per l'argomento specificato.
  2. 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:

  1. Recupera i dettagli dell'articolo per l'articolo specificato.
  2. 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.

  1. Se si utilizza Android Studio come editor, individuare la barra degli strumenti principale di Android Studio.
  2. 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.
  3. 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.