Crie um Site Mínimo no Flutter com o Oracle Content Management Sem Interface

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 interface do usuário do Flutter que compõem um blog típico.

Neste tutorial, vamos criar um site mínimo 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
Construa o site mínimo 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

Com o Flutter mínimo, você pode recuperar facilmente imagens e outros conteúdos do repositório do Oracle Content Management.

Para ver o que estamos construindo, aqui está o estado final do nosso tutorial, um site mínimo básico do Flutter que consome conteúdo do Oracle Content Management.

É assim que a tela inicial ficará no fim deste tutorial:

Esta imagem mostra uma página de destino para um site mínimo do Flutter.

É assim que a tela entre em contato conosco ficará no final deste tutorial:

Esta imagem mostra a página de contato para um site mínimo do Flutter.

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

Se você ainda não tiver uma instância do Oracle Content Management, consulte 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. Há um pacote de ativos com download disponível que preencherá seu repositório vazio com tipos de conteúdo e conteúdo associado.

Para preparar o Oracle Content Management:

Criar um repositório de canais e ativos
Importar o Pacote de Ativos de Amostras do Oracle Content Management

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 'OCEMinimalChannel' 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 'OCEMinimalRepository' para a finalidade deste tutorial.
No campo Canais de Publicação, selecione o canal OCEMinimalChannel para indicar ao Oracle Content Management que o conteúdo no repositório OCEMinimalRepository pode ser publicado no canal OCEMinimalChannel. 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. Se quiser importar o Pacote de Ativos de Amostras do Oracle Content Management, você poderá 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 OCEMinimal_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 OCEMinimalRepository e clique no botão Importar Conteúdo na barra de ação superior.
Faça upload do OCEMinimal_data.zip do seu computador local para a pasta Documentos.
Após o upload, selecione OCEMinimal_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 OCEMinimalRepository. 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, OCEMinimalChannel.
Antes de publicar, você precisa validar todos os ativos. Primeiro adicione OCEMinimalChannel 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.

Tarefa 2: Criar o Site Mínimo no Flutter

Para consumir nosso conteúdo do Oracle Content Management em um aplicativo Flutter, podemos usar a amostra mínima do site 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 construção do local mínimo 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 mínima do site 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-minimal-sample.git
cd oce-flutter-minimal-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 mínima do Flutter, você precisa configurar algumas informações para que suas solicitações de API REST possam direcionar o URL correto da instância e a versão da API com o token correto do canal. 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': 'ba0efff9c021422cb134c2fd5daf6015'
};

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

Também precisamos configurar quais imagens serão usadas em todo o aplicativo. No mesmo arquivo, você verá o seguinte:

const Map<String, String> appConfig = <String, String>{
  'homePage': 'Banner1.jpg',
  'contactUs' : 'Banner2.jpg',
  'logo' : 'Logo.png',
  'footerLogo' : 'Powered_by_OCE.png',
};

Altere o nome de cada imagem para refletir os valores em sua instância.

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 mínimo.

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.

Extraindo Dados da Imagem

Abra lib/networking/services.dart e encontre a função abaixo, que ajuda a obter todas as imagens para este aplicativo.

  // Get all the images needed for the app
  Future<AppImages> getAppImages() async {
    final Content content = Content();
    final String homepageImage = appConfig['homePage'];
    final String contactUsImage = appConfig['contactUs'];
    final String logoImage = appConfig['logo'];
    final String footerImage = appConfig['footerLogo'];
    AppImages images;
    try {
      final dynamic data = await content.queryItems(<String, String>{
        'q':
            '(name eq "$homepageImage" OR name eq "$contactUsImage" OR name eq "$logoImage" OR name eq "$footerImage")',
        'fields': 'all',
        'expand': 'all',
      });
      final List<dynamic> items = data['items'] as List<dynamic>;
      String homePageImageGUID,
          contactUsImageGUID,
          headerLogoGUID,
          footerLogoGUID;
      for (int i = 0; i < items.length; i++) {
        final String name = items[i]['name'] as String;
        final String id = items[i]['id'] as String;
        if (name == homepageImage) {
          homePageImageGUID = id;
        } else if (name == contactUsImage) {
          contactUsImageGUID = id;
        } else if (name == logoImage) {
          headerLogoGUID = id;
        } else if (name == footerImage) {
          footerLogoGUID = id;
        }
      }
      //If any of the image ids are null, let the user know but continue loading the app
      if (homePageImageGUID == null ||
          contactUsImageGUID == null ||
          headerLogoGUID == null ||
          footerLogoGUID == null) {
        print(kFileNameError);
      }
      images = AppImages(
        headerLogoUrl: content.getRenditionURL(<String, String>{'id': headerLogoGUID}),
        footerLogoUrl: content.getRenditionURL(<String, String>{'id': footerLogoGUID}),
        contactUsImageUrl:
            content.getMediumRenditionUrl(<String, String>{'id': contactUsImageGUID}),
        homePageImageUrl: content.getMediumRenditionUrl(<String, String>{'id': homePageImageGUID}),
      );
    } catch (exception) {
      rethrow;
    }
    return images;
  }
;

Agora que temos nossas consultas de dados, podemos renderizar as respostas em nossos componentes mais simples.

Componentes do Flutter

O aplicativo mínimo 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 LoadingScreen
Componente HomePage
Componente ContactUs

Componente LoadingScreen

O LoadingScreen é um widget com monitoramento de estado que é renderizado pelo componente LoadingScreen, localizado em lib/screens/loading_screen.dart.

O arquivo lib/screens/loading_screen.dart contém todo o código para obter dados para a tela e faz chamadas para as funções definidas em services.dart.

  Future<void> getData() async {
    final Services services = Services();
    try {
      final AppImages images = await services.getAppImages();
      if (images != null) {
        Navigator.push<dynamic>(context,
            MaterialPageRoute<dynamic>(builder: (BuildContext context) {
          return HomePage(appImages: images);
        }));
      }
    } catch (exception) {
      setState(() {
        this.exception = exception.toString();
      });
      print(exception.toString());
    }
  }

O componente usa o método getData para obter dados usando o método definido no arquivo services.dart.

Componente HomePage

A tela inicial é renderizada pelo componente HomePage, localizado em lib/screens/home_page.dart.

O componente HomePage é iniciado pelo Componente LoadingScreen, que passa os dados para ele. Ele não obtém nenhum dado adicional do servidor.

Ele também usa o componente ScreenLayout definido no arquivo lib/components/screen_layout.dart, bem como o componente ImageStack definido no arquivo lib/components/image_stack.dart.

Componente ContactUs

A tela Entre em Contato Conosco é renderizada pelo componente ContactUs, localizado em lib/screens/contact_us.dart.

O componente ContactUs é iniciado pelo Componente NavDrawer, definido no arquivo lib/components/navdrawer.dart, que transmite os dados a ele. Ele não obtém nenhum dado adicional do servidor. Ele também usa o componente ImageStack definido no arquivo lib/components/image_stack.dart.

Tarefa 3: Preparar Seu Aplicativo para Implantação

Agora que construímos nosso site mínimo 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 mínimo 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 mínimo do site, 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

Crie um Site Mínimo no Flutter com o Oracle Content Management Sem Interface

F55459-01

Março de 2022

Autor Principal: Oracle Corporation