Creare una galleria di immagini in Flutter con Oracle Content Management headless

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 adatto, è possibile creare rapidamente un'interfaccia utente Flutter che costituisce una galleria tipica.

In questa esercitazione verrà creata una semplice galleria in Flutter mediante l'utilizzo di Oracle Content Management come CMS headless. Questo esempio di Flutter è disponibile su GitHub.

Il tutorial prevede tre passi:

Prepara Oracle Content Management
Costruisci la Galleria di immagini 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 Oracle Content Management con il ruolo Amministratore contenuto;
un computer Windows o Mac con Node versione 10 o successiva

Quello che stiamo costruendo

La nostra galleria di immagini sarà composta da diversi schermi di immagini di cibo e bevande disponibili in una caffetteria.

Questa immagine mostra una galleria di immagini con diversi tipi di bagel, alcuni con crema o toppings, o entrambi.

Le categorie sono nodi figlio di una tassonomia e possono essere organizzate in gerarchie. Per la nostra galleria di immagini, vogliamo mostrare tutte le categorie disponibili indipendentemente dall'organizzazione. Per raggiungere questo obiettivo, dobbiamo innanzitutto trovare le tassonomie disponibili, che utilizziamo la risorsa API REST GET /published/api/v1.1/taxonomies.

Successivamente, dobbiamo ottenere il set di categorie per ciascuna delle tassonomie. A tale scopo, viene utilizzato il comando GET dell'API REST /published/api/v1.1/taxonomies/{id}/categories.

Per costruire l'anteprima di una categoria, come Bagels, dobbiamo ottenere un conteggio del numero di immagini e degli URL delle prime quattro immagini.

Questa immagine mostra le immagini nella categoria Colazione.

La nostra richiesta di trovare gli asset pubblicati nella categoria specifica i criteri della categoria attraverso una stringa di query, come segue:

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

Nota: oltre alla pubblicazione degli asset digitali che si desidera visualizzare, è inoltre necessario pubblicare le tassonomie nel canale.

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

Questa esercitazione si basa sul presupposto che il repository degli asset sia stato creato e che al momento disponga di un modello di contenuto vuoto, ovvero non è stato creato alcun tipo di contenuto.

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.
Importa Asset Pack di esempio di Oracle Content Management
Carica asset immagine personale
Creare tassonomie e collegarle ad asset immagine

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 'OCEImageGalleryChannel' 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 'OCEImageGalleryRepository' ai fini di questa esercitazione.
Nel campo Canali di pubblicazione selezionare OCEImageGalleryChannel per indicare a Oracle Content Management che il contenuto del repository OCEImageGalleryRepository può essere pubblicato nel canale OCEImageGalleryChannel. Al termine, fare clic su Salva.

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.

È 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. È 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 OCEImageGallery_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 OCEImageGalleryRepository e fare clic sul pulsante Importa contenuto nella barra delle azioni superiore.
Caricare OCEImageGallery_data.zip dal computer locale alla cartella Documenti.
Una volta caricato, selezionare OCEImageGallery_data.zip e fare clic su OK per importare il contenuto nel repository degli asset.
Dopo aver importato correttamente il contenuto, passare alla pagina Asset e aprire il repository OCEImageGalleryRepository. 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, OCEImageGalleryChannel.
Prima della pubblicazione, è necessario convalidare tutti gli asset. Aggiungere innanzitutto OCEImageGalleryChannel 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.

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

Dopo aver importato Oracle Content Management Samples Asset Pack, è possibile avviare la creazione della raccolta di immagini in Flutter.

Carica asset immagine personale

Per questa esercitazione viene utilizzato un repository di asset denominato 'OCEImageGalleryRepository' per creare la home page del sito della galleria. Questa home page è composta dal titolo "Image Gallery" e da album di raccolta di immagini con asset di immagini all'interno.

Questa immagine mostra la home page della galleria di immagini, con immagini di varie categorie di immagini: panini, bevande, dessert, colazione e cibo.

Per aggiungere asset immagine al repository asset della galleria, procedere come segue.

Eseguire il login all'interfaccia Web di Oracle Content Management.
Fare clic su Asset nel menu di navigazione a sinistra.
Aprire il repository OCEImageGalleryRepository.
Fare clic su Aggiungi nell'angolo superiore destro della pagina per aggiungere asset immagine al repository asset della galleria.
Caricare i nuovi asset dal computer locale o scegliere quelli già presenti in Oracle Content Management.

Creare tassonomie e collegarle ad asset immagine

È necessario creare una tassonomia in Oracle Content Management, quindi assegnare le categorie agli asset nel repository.

Per creare una tassonomia 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 Tassonomie dall'elenco di selezione nell'intestazione della pagina.
Nell'angolo in alto a destra fare clic su Crea per creare una nuova tassonomia. Assegnare un nome al canale 'OCEImageGalleryTaxonomy' ai fini di questa esercitazione.
Fare clic su Crea.
Ora creare la tassonomia aggiungendo le categorie. Fare clic su Aggiungi una categoria.
Assegnare un nome all'elemento di categoria padre 'Food' e aggiungere le seguenti categorie figlio:
- Colazione
- Dessert
- Bevande
- Sandwich
Fare clic su Done nella parte superiore destra della schermata.
Nella pagina Tassonomie, selezionare la tassonomia OCEImageGalleryTaxonomy e fare clic su Promuovi nella barra delle azioni per renderla disponibile per l'uso nei repository degli asset.

Modificare quindi il repository OCEImageGalleryRepository per abilitare la tassonomia OCEImageGalleryTaxonomy per il repository.

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 e modificare il repository OCEImageGalleryRepository.
Nel campo Tassonomie selezionare OCEImageGalleryTaxonomy in modo da poter assegnare categorie dalla tassonomia agli asset nel repository OCEImageGalleryRepository.
Fare clic su Salva.

Quindi, assegnare le categorie di tassonomia a ogni asset immagine nel repository OCEImageGalleryRepository:

Eseguire il login all'interfaccia Web di Oracle Content Management.
Fare clic su Asset nel menu di navigazione a sinistra.
Aprire il repository OCEImageGalleryRepository.
Selezionare uno o più asset immagine, fare clic su Altro nella barra delle azioni, quindi scegliere Categorie dal menu.
Nel pannello Categorie fare clic su Aggiungi categoria. Cercare il nome della categoria nella barra di ricerca o selezionare una categoria dalla struttura gerarchica della tassonomia, quindi fare clic su Aggiungi per assegnare la categoria selezionata. È possibile assegnare più categorie a un cespite.
Al termine dell'assegnazione delle tassonomie a tutti gli asset immagine, selezionare tutti gli asset nel repository e pubblicarli nel canale OCEImageGalleryChannel.

Task 2: Creare la Galleria immagini in Flutter

Per utilizzare i contenuti di Oracle Content Management in un'applicazione Flutter, è possibile utilizzare l'esempio della galleria Flutter, disponibile 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.

La creazione della galleria di immagini in Flutter è costituita 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 della galleria 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-gallery-sample.git
cd oce-flutter-gallery-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 galleria 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': 'e0b6421e73454818948de7b1eaddb091'
};

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

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 nella raccolta di immagini dell'applicazione Flutter.

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 carichiamo le tassonomie per il canale specificato in oce.dart.
Per ciascuna delle tassonomie otteniamo tutte le categorie della tassonomia.
Per ogni categoria, otteniamo quattro elementi di contenuto in quella categoria.
Per ciascuno di questi elementi, vengono estratti gli URL di rendition.

Aprire lib/networking/services.dart e trovare le funzioni riportate di seguito, che consentono di ottenere tutti i dati per la home page.

La funzione fetchTaxonomies() insieme alla funzione fetchCategories() ottiene tutte le categorie in tutte le tassonomie. La funzione fetchItemsForCategory viene quindi chiamata per aggiungere le quattro voci di categoria a ogni categoria. Infine, retrieveThumbnailURL viene chiamato per ottenere gli URL di anteprima.

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

Pagina griglia immagini

La pagina della griglia immagini riceve un ID categoria e richiede diverse chiamate di dati per ottenere tutti i dati:

Recupera tutti gli articoli per la categoria specificata.
Per ogni elemento, ottenere i relativi URL di rendition.

Aprire lib/networking/services.dart e trovare la funzione seguente, utilizzata dalla funzione fetchData in 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;
  }

Chiama fetchItemsForCategory, come la home page, ma senza limiti, in modo che tutti gli elementi vengano restituiti, non solo quattro.

Ora che abbiamo la nostra query sui dati, possiamo rendere le risposte nei nostri componenti Flutter.

Componenti Flutter

L'applicazione della galleria suddivide ogni pagina in una serie di componenti più piccoli.

Le prossime sezioni forniscono una panoramica del modo in cui Flutter rende la nostra applicazione in ognuno dei nostri componenti:

Componente HomePage
Componente ImageGrid
Componente ImagePager

Componente HomePage

La home page è costituita da un elenco di categorie per una tassonomia, con un'anteprima di quattro elementi in tale categoria. Viene visualizzato dal componente HomePage situato in lib/screens/home_page.dart. Il componente utilizza le funzioni definite nel file services.dart per ottenere i dati.

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

Questo file utilizza anche un componente situato in lib/components/card_grid.dart per eseguire il rendering delle immagini in una griglia.

Componente ImageGrid

Il componente ImageGridPage visualizza gli articoli nella categoria. Viene visualizzato dal componente ImageGrid, situato in lib/screens/image_grid.dart.

Il componente effettua una chiamata per ottenere i dati dal file 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());
    }
  }

Componente ImagePager

Il componente ImagePager situato in lib/screens/image_pager.dart visualizza gli elementi in un modulo pager scorrevole.

Task 3: Preparazione dell'applicazione per la distribuzione

Ora che abbiamo costruito il nostro sito di galleria di immagini Flutter, abbiamo bisogno di distribuirlo su un emulatore o dispositivo in modo da poter eseguire il debug di eventuali problemi e visualizzare l'anteprima dell'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 galleria 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 sul sito della galleria, è stato installato e eseguito il sito Flutter per recuperare il contenuto richiesto e creare il sito.

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.

Titolo e informazioni sul copyright

Creare una galleria di immagini in Flutter con Oracle Content Management headless

F55472-01

Marzo 2022

Autore principale: Oracle Corporation