Criar uma Galeria de Imagens no Flutter com o Oracle Content Management Headless

Introdução

Flutter é uma estrutura de código aberto do Google para criar aplicativos lindos e compilados nativamente em várias plataformas a partir de uma única base de código. O código Flutter é compilado para código de máquina ARM ou Intel, bem como JavaScript, para desempenho rápido em qualquer dispositivo. O Flutter pode ser uma ferramenta poderosa para criar aplicativos que consumam conteúdo do Oracle Content Management. Armado com o modelo de conteúdo certo, você pode criar rapidamente a IU do Flutter que compõem uma galeria típica.

Neste tutorial, vamos criar uma galeria simples no Flutter, aproveitando o Oracle Content Management como um CMS sem supervisão. Esta amostra do Flutter está disponível no GitHub.

O tutorial consiste em três etapas:

Preparar o Oracle Content Management
Criar a Galeria de Imagens no Flutter
Preparar seu aplicativo para implantação

Pré-requisitos

Antes de continuar com este tutorial, recomendamos que você leia as seguintes informações primeiro:

Para seguir este tutorial, você precisará de:

uma assinatura do Oracle Content Management
uma conta do Oracle Content Management com a atribuição de Administrador de Conteúdo
um computador Windows ou Mac com Node versão 10 ou superior

O que estamos construindo

Nossa galeria de imagens consistirá de várias telas de imagens de alimentos e bebidas disponíveis em uma cafeteria.

Esta imagem mostra uma galeria de imagens com diferentes tipos de bagels, alguns com creme ou coberturas, ou ambos.

As categorias são nós filhos de uma taxonomia e podem ser organizadas em hierarquias. Para nossa galeria de imagens, queremos mostrar todas as categorias disponíveis, independentemente da organização. Para fazer isso, primeiro precisamos encontrar as taxonomias disponíveis, que usamos o recurso de API REST GET /published/api/v1.1/taxonomies.

Em seguida, precisamos obter o conjunto de categorias para cada uma das taxonomias. Isso é feito usando a API REST GET /published/api/v1.1/taxonomies/{id}/categories.

Para construir a visualização de uma categoria, como Bagels, precisamos obter uma contagem do número de imagens e dos URLs das quatro primeiras imagens.

Esta imagem mostra imagens na categoria Breakfast.

Nossa solicitação para encontrar os ativos publicados na categoria especifica os critérios de categoria por meio de uma string de consulta, da seguinte forma:

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

Observação: Além de publicar os ativos digitais que queremos exibir, você também precisa publicar as taxonomias no canal.

Para continuar, você precisará ter uma assinatura ativa no Oracle Content Management e estar conectado com a atribuição de Administrador de Conteúdo.

Tarefa 1: Preparar o Oracle Content Management

Este tutorial se baseia na suposição de que você criou seu repositório de ativos e atualmente tem um modelo de conteúdo vazio (ou seja, nenhum tipo de conteúdo criado).

Se você ainda não tiver uma instância do Oracle Content Management, consulte o Início Rápido para saber como se registrar no Oracle Cloud, provisionar uma instância do Oracle Content Management e configurar o Oracle Content Management como um CMS sem interface.

Para este tutorial, você precisará criar um modelo de conteúdo de duas maneiras. Há um pacote de ativos com download disponível que preencherá seu repositório vazio com tipos de conteúdo e conteúdo associado ou você poderá criar seu próprio modelo de conteúdo e conteúdo.

Para preparar o Oracle Content Management:

Crie um repositório de canais e ativos.
Importar o Pacote de Ativos de Amostras do Oracle Content Management
Fazer Upload de Seus Próprios Ativos de Imagem
Criar Taxonomias e Vinculá-las a Ativos de Imagem

Criar um Canal e um Repositório de Ativos

Primeiro você precisa criar um canal e um repositório de ativos no Oracle Content Management para que possa publicar conteúdo.

Para criar um canal e um repositório de ativos no Oracle Content Management:

Efetue log-in na interface Web do Oracle Content Management como administrador.
Escolha Conteúdo no menu de navegação esquerdo e escolha Publicando Canais na lista de seleção no cabeçalho da página.
No canto superior direito, clique em Criar para criar um novo canal. Nomeie o canal 'OCEImageGalleryChannel' para a finalidade deste tutorial e mantenha o acesso público. Clique em Salvar para criar o canal.
Escolha Conteúdo no menu de navegação esquerdo e escolha Repositórios na lista de seleção no cabeçalho da página.
No canto superior direito, clique em Criar para criar um novo repositório de ativos. Nomeie o repositório de ativos 'OCEImageGalleryRepository' para a finalidade deste tutorial.
No campo Publicando Canais, selecione OCEImageGalleryChannel para indicar ao Oracle Content Management que o conteúdo no repositório OCEImageGalleryRepository pode ser publicado no canal OCEImageGalleryChannel. Clique em Salvar quando tiver concluído.

Importar o Pacote de Ativos de Amostras do Oracle Content Management

Você pode fazer download de uma amostra de pacote de ativos do Oracle Content Management pré-configurada que contenha todos os tipos de conteúdo e ativos necessários para este tutorial.

Você pode fazer upload de uma cópia do conteúdo que estamos usando neste tutorial do Oracle Content Management Samples Asset Pack. Isso permitirá experimentar os tipos de conteúdo e modificar o conteúdo. Você pode fazer download do arquivo compactado do pacote de ativos, OCESamplesAssetPack.zip, e extraí-lo para um diretório de sua escolha:

Faça download do Pacote de Ativos de Amostras do Oracle Content Management (OCESamplesAssetPack.zip) na página downloads do Oracle Content Management. Extraia o arquivo zip baixado para um local em seu computador. Após a extração, esse local incluirá um arquivo chamado OCEImageGallery_data.zip.
Efetue log-in na interface Web do Oracle Content Management como administrador.
Escolha Conteúdo no menu de navegação esquerdo e escolha Repositórios na lista de seleção no cabeçalho da página. Agora selecione OCEImageGalleryRepository e clique no botão Importar Conteúdo na barra de ação superior.
Faça upload do OCEImageGallery_data.zip do seu computador local para a pasta Documentos.
Após o upload, selecione OCEImageGallery_data.zip e clique em OK para importar o conteúdo para o repositório de ativos.
Depois que o conteúdo tiver sido importado com sucesso, navegue até a página Ativos e abra o repositório OCEImageGalleryRepository. Você verá que todas as imagens e itens de conteúdo relacionados foram adicionados ao repositório de ativos.
Clique em Selecionar Tudo na parte superior esquerda e em Publicar para adicionar todos os ativos importados ao canal de publicação criado anteriormente, OCEImageGalleryChannel.
Antes de publicar, você precisa validar todos os ativos. Primeiro adicione OCEImageGalleryChannel como um canal selecionado e, em seguida, clique no botão Validar.
Depois que os ativos tiverem sido validados, você poderá publicar todos os ativos no canal selecionado clicando no botão Publicar no canto superior direito.

Uma vez concluído, você pode ver na página Ativos que todos os ativos foram publicados. (Você pode informar pelo ícone acima do nome do ativo.)

Esta imagem mostra a página Ativos, com todos os ativos publicados.

Após importar o Pacote de Ativos de Amostras do Oracle Content Management, você pode iniciar a criação da galeria de imagens no Flutter.

Fazer Upload de Seus Próprios Ativos de Imagem

Para este tutorial, estamos usando um repositório de ativos chamado 'OCEImageGalleryRepository' para criar a home page do nosso site de galeria. Esta página inicial consiste no título 'Image Gallery', bem como álbuns de coleção de imagens que têm ativos de imagem dentro.

Esta imagem mostra a página inicial da galeria de imagens, com imagens de várias categorias de imagens: sanduíches, bebidas, sobremesa, café da manhã e comida.

Para adicionar ativos de imagem ao repositório de ativos da galeria:

Faça log-in na interface Web do Oracle Content Management.
Clique em Ativos no menu de navegação à esquerda.
Abra o repositório OCEImageGalleryRepository.
Clique em Adicionar no canto superior direito da página para adicionar ativos de imagem ao repositório de ativos da galeria.
Faça upload de seus próprios novos ativos no computador local ou escolha os ativos existentes já no Oracle Content Management.

Criar Taxonomias e Vinculá-las a Ativos de Imagem

Você precisa criar uma taxonomia no Oracle Content Management e, em seguida, atribuir categorias aos ativos em seu repositório.

Para criar uma taxonomia no Oracle Content Management:

Efetue log-in na interface Web do Oracle Content Management como administrador.
Escolha Conteúdo no menu de navegação esquerdo e escolha Taxonomias na lista de seleção no cabeçalho da página.
No canto superior direito, clique em Criar para criar uma nova taxonomia. Nomeie o canal 'OCEImageGalleryTaxonomy' para a finalidade deste tutorial.
Clique em Criar.
Agora, crie sua taxonomia adicionando categorias. Clique em Adicionar uma categoria.
Nomeie o item de categoria pai 'Alimentos' e adicione as seguintes categorias filho:
- Café da Manhã
- Sobremesa
- Bebidas
- Sanduíches
Clique em Concluído no canto superior direito da tela.
Na página Taxonomias, selecione a taxonomia OCEImageGalleryTaxonomy e clique em Promover na barra de ações para torná-la disponível para uso em seus repositórios de ativos.

Em seguida, edite o repositório OCEImageGalleryRepository para ativar a taxonomia OCEImageGalleryTaxonomy desse repositório:

Efetue log-in na interface Web do Oracle Content Management como administrador.
Escolha Conteúdo no menu de navegação esquerdo e escolha Repositórios na lista de seleção no cabeçalho da página.
Selecione e edite o repositório OCEImageGalleryRepository.
No campo Taxonomias, selecione OCEImageGalleryTaxonomy para que você possa atribuir categorias dessa taxonomia aos ativos no repositório OCEImageGalleryRepository.
Clique em Salvar.

Em seguida, designe categorias de taxonomia a cada um dos ativos de imagem no repositório OCEImageGalleryRepository:

Faça log-in na interface Web do Oracle Content Management.
Clique em Ativos no menu de navegação à esquerda.
Abra o repositório OCEImageGalleryRepository.
Selecione um ou mais ativos de imagem, clique em Mais na barra de ações e escolha Categorias no menu.
No painel Categorias, clique em Adicionar Categoria. Procure o nome da categoria na barra de pesquisa ou selecione uma categoria na estrutura hierárquica da taxonomia e clique em Adicionar para atribuir a categoria selecionada. É possível atribuir várias categorias a um ativo.
Após concluir a designação de taxonomias a todos os ativos de imagem, selecione todos os ativos em seu repositório e publique-os no canal OCEImageGalleryChannel.

Tarefa 2: Criar a Galeria de Imagens no Flutter

Para consumir nosso conteúdo do Oracle Content Management em um aplicativo Flutter, podemos usar a amostra da galeria do Flutter, que está disponível como repositório de código-fonte aberto no GitHub.

Observação: Lembre-se de que usar a amostra do Flutter é opcional e nós a usamos neste tutorial para que você comece rapidamente. Você também pode criar seu próprio aplicativo Flutter.

A criação da galeria de imagens no Flutter consiste nestas etapas:

Instalar o Flutter
Clonar o repositório de amostra e instalar dependências
Configurar o aplicativo Flutter
Usar a API REST do Oracle Content Management para extrair conteúdo

Instalar o Flutter

A primeira coisa que você precisa fazer para começar a usar o Flutter é configurar seu ambiente. Você pode encontrar as instruções para configurá-las no site do Flash. Use a opção correspondente ao seu sistema operacional. Veja um resumo das etapas de instalação:

Obtenha o SDK do Flutter.
Atualize sua variável de ambiente de caminho.
Execute flutter doctor.
Siga as etapas descritas no site do Flash para instalar um editor de sua escolha.
Adicione um plug-in do editor para Android Studio, IntelliJ, VS Code ou Emacs. As instruções especificam como instalar os plug-ins Flutter e Dart no seu editor.
Modifique os valores no arquivo android.properties para consultar os locais apropriados, as versões sdk e kotlin. Você também pode precisar modificar valores no arquivo android.gradle para as versões apropriadas.

Clonar o Repositório de Amostra e Instalar Dependências

A amostra da galeria do Flutter está disponível como um repositório de código aberto no GitHub.

Primeiro você precisará clonar a amostra do GitHub para seu computador local e alterar seu diretório na raiz do repositório:

git clone https://github.com/oracle-samples/oce-flutter-gallery-sample.git
cd oce-flutter-gallery-sample

Abra o projeto no Android Studio ou em qualquer outro editor de sua escolha. Para obter todos os pacotes que estão sendo usados no projeto, clique no botão Obter pacotes.

Configurar o Aplicativo Flutter

Nesta amostra de galeria do Flutter, você precisa configurar algumas informações para que suas solicitações de API REST possam direcionar o URL da instância e a versão da API corretos com o token de canal correto. Esses valores definidos em lib/config/oce.dart são usados pelas funções definidas em lib/networking/content.dart para estabelecer o ponto final para a API REST.

Você verá as seguintes informações em lib/config/oce.dart:

const Map<String, String> config = <String, String>{
  'serverUrl': 'https://samples.mycontentdemo.com',
  'apiVersion': 'v1.1',
  'channelToken': 'e0b6421e73454818948de7b1eaddb091'
};

Altere cada par de chave/valor para refletir o URL da instância, a versão da API que você deseja direcionar e o token de canal associado ao canal de publicação. O canal deste tutorial é OCEImageGalleryChannel.

Usar a API REST do Oracle Content Management para Extrair Conteúdo

A API REST para Entrega de Conteúdo fornece acesso a ativos publicados no Oracle Content Management. Os ativos publicados incluem itens de conteúdo e ativos digitais, bem como suas renderizações. Agora podemos aproveitar a API REST do Oracle Content Management para buscar conteúdo e renderizá-lo em nosso aplicativo Flutter da galeria de imagens.

O arquivo lib/networking/content.dart tem métodos para estabelecer conexão com o servidor especificado no arquivo oce.dart usando a API REST e retornando a resposta dele.

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

Para renderizar as imagens, o content.dart também fornece métodos auxiliares para recuperar as várias renderizações de um ativo.

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

O arquivo lib/networking/services.dart contém todo o código para obter dados do aplicativo.

Dados da página inicial

A página inicial requer várias chamadas de dados para obter todos os seus dados:

Primeiro carregamos as taxonomias para o canal especificado em ocean.dart.
Para cada uma das taxonomias, obtemos todas as categorias nessa taxonomia.
Para cada categoria, temos quatro itens de conteúdo nessa categoria.
Para cada um desses itens, extraímos seus URLs de renderização.

Abra lib/networking/services.dart e encontre as funções abaixo, o que ajuda a obter todos os dados da página inicial.

A função fetchTaxonomies() em conjunto com fetchCategories() obtém todas as categorias em todas as taxonomias. A função fetchItemsForCategory é chamada para adicionar os quatro itens de categoria a cada categoria. Finalmente, retrieveThumbnailURL é chamado para obter os URLs de miniatura.

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

Página da Grade de Imagens

A página de grade de imagem recebe um ID de categoria e requer várias chamadas de dados para obter todos os seus dados:

Obtenha todos os itens da categoria especificada.
Para cada item, obtenha seus URLs de renderização.

Abra lib/networking/services.dart e localize a função abaixo, que é usada pela função fetchData em 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;
  }

Ele chama fetchItemsForCategory, como a home page, mas sem limite, para que todos os itens sejam retornados, não apenas quatro.

Agora que temos nossa consulta de dados, podemos renderizar as respostas em nossos componentes do Flutter.

Componentes do Flutter

O aplicativo de galeria divide cada página em vários componentes menores.

As próximas seções fornecem uma visão geral de como o Flutter processa nosso aplicativo em cada um de nossos componentes:

Componente HomePage
Componente ImageGrid
Componente ImagePager

Componente HomePage

A página inicial consiste em uma lista de categorias para uma taxonomia, com uma visualização de quatro itens nessa categoria. Ele é renderizado pelo componente HomePage localizado em lib/screens/home_page.dart. O componente usa as funções definidas no arquivo services.dart para obter os dados.

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

Este arquivo também usa um componente localizado em lib/components/card_grid.dart para renderizar as imagens em uma grade.

Componente ImageGrid

O componente ImageGridPage exibe os itens na categoria. Ele é renderizado pelo componente ImageGrid, localizado em lib/screens/image_grid.dart.

O componente faz chamada para obter os dados do arquivo 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

O componente ImagePager localizado em lib/screens/image_pager.dart exibe os itens em um formato de pager deslizante.

Tarefa 3: Preparar Seu Aplicativo para Implantação

Agora que construímos nosso site da galeria de imagens do Flutter, precisamos implantá-lo em um emulador ou dispositivo para que possamos depurar quaisquer problemas e visualizar o aplicativo antes que ele entre em operação.

Siga as instruções no site do Flash para que o seu editor execute o aplicativo.

Se você estiver usando o Android Studio como editor, localize a barra de ferramentas principal do Android Studio.
No seletor de destino, selecione um dispositivo Android para executar o aplicativo. Se nenhum estiver listado como disponível, selecione Ferramentas > Android > Gerenciador de AVD e crie um lá. Para obter detalhes, consulte Gerenciando AVDs.
Clique no ícone de execução na barra de ferramentas ou chame o item de menu Executar > Executar.

Conclusão

Neste tutorial, criamos um site de galeria no Flutter, que pode ser encontrado no GitHub. Este site usa o Oracle Content Management como um CMS sem interface do usuário. Após configurar e configurar o Oracle Content Management com um canal de conteúdo publicado para o tutorial do site da galeria, instalamos e executamos o site do Flutter para extrair o conteúdo necessário e criar o site.

Para obter mais informações sobre o Flutter, acesse o site do Flash.

Saiba mais sobre conceitos importantes do Oracle Content Management na documentação.

Você pode encontrar mais amostras como esta na página Amostras do Oracle Content Management no Oracle Help Center.

Título e Informações de Copyright

Criar uma Galeria de Imagens no Flutter com o Oracle Content Management Headless

F55471-01

Março de 2022

Autor Principal: Oracle Corporation