Flutter: implemente offline first com Couchbase em um app

Configurando o Couchbase - Apresentação

Boas-vindas a mais um curso de Flutter na Alura.

Apresentação

Meu nome é William Bezerra, sou instrutor na Escola de Mobile na Alura. Acompanharei vocês ao longo deste curso.

Audiodescrição: William é um homem pardo com cabelos, barba e bigodes pretos. ELe usa óculos de aros grandes. Ao fundo, há uma parece com iluminação degradê do rosa para o azul.

Sobre o curso

Ao longo deste curso, trabalharemos com um aplicativo de checklist para uma grande rede varejista. A ideia é garantir o funcionamento online e offline, pois um dos requisitos é que funcione em ambientes com conexão de internet instável.

Ao final do curso, teremos um projeto em que mais de uma pessoa poderá interagir na aplicação e a sincronização com os demais dispositivos será automática. No contexto offline, o aplicativo continuará funcionando e será capaz de sincronizar assim que a conexão for retomada.

Utilizaremos o Couchbase como base de dados, que possibilitará a sincronicidade das informações.

Pré-requisitos

Para construirmos este projeto juntos, é importante que você já entenda conceitos básicos de Flutter e uso de dados de maneira geral, como fazer parse de informações e trabalhar com banco de dados.

Se isso chamou sua atenção e você está curioso para entender como vamos construir tudo isso, esperamos você na próxima aula.

Configurando o Couchbase - Instalando o Couchbase em seu projeto

Você foi contratado por uma grande rede varejista para criar um aplicativo de checklist para uso dos funcionários. Junto do nosso time, começamos a estruturar, fazer o levantamento de requisitos, entender os possíveis problemas, desenhar toda a parte de interface e experiência do usuário.

Funcionamento online e offline

Em um determinado momento, lembramos de um problema ocorrido no supermercado na noite anterior: ao fazer compras, ficamos em dúvida sobre qual produto levar. Tentamos enviar uma mensagem no grupo da família, mas a mensagem não foi enviada.

Isso nos fez perceber que, dentro do supermercado, a internet pode funcionar de maneira instável, o que é muito comum. Assim, trouxemos essa questão para o cenário de construção do aplicativo. É interessante que ele funcione tanto de modo online quanto offline.

Caso contrário, podem surgir problemas durante o uso, como um funcionário coletar o mesmo produto que outro ou um produto não chegar ao usuário final. É crucial garantir a estabilidade do aplicativo em ambos os modos.

Uma das metodologias mais aceitas é a offline first, em que garantimos que o aplicativo seja construído para funcionar primeiro offline e, ao estabelecer uma conexão com a internet, funcione de modo online. Ou seja, ele salva os dados no dispositivo e os envia para o servidor externo, quando possível.

No Flutter (a linguagem que utilizamos), uma das metodologias mais aceitas é usar um banco de dados NoSQL chamado Couchbase, que possibilita a sincronicidade entre o banco de dados local e o online.

Configurando o Couchbase

Para prosseguir nesta aula, é importante que já tenhamos feito a atividade anterior, em que fizemos a preparação do ambiente e onde está toda a base de código para ser utilizada no projeto.

Após baixar e clonar o projeto, rodamos o comando flutter pub get, conforme definido na atividade. Isso nos dará uma base de código com todas as interfaces prontas, mas funcionando apenas de maneira visual. Ou seja, podemos adicionar, apagar e editar, mas apenas localmente, pois as funções estão mocadas, isto é, simuladas.

Partindo desse princípio, iniciaremos as configurações do Couchbase para criar as integrações corretamente, funcionando primeiro offline (offline first) e depois online, com a sincronicidade entre bancos com o Couchbase.

Para isso, precisamos adicionar três packages ao projeto. O primeiro é o package do Couchbase, chamado CBL (Couchbase Lite). No terminal do VS Code, dentro da pasta do projeto, rodamos o seguinte comando:

flutter pub add cbl

Este primeiro package é uma implementação genérica do Couchbase para funcionar no Dart. Em outras palavras, instalamos a estrutura original do Couchbase (CBL) e, a seguir, instalaremos o package do cbl_flutter, que adapta o Couchbase para o Flutter. Basta executar o seguinte comando:

flutter pub add cbl_flutter

Assim, temos praticamente tudo para a configuração inicial do Couchbase. No entanto, é preciso escolher a versão do Couchbase a ser utilizada. Podemos optar entre as versões:

• Enterprise, indicada para grandes projetos com múltiplas conexões;
• Community, mais simples e adequada para nosso contexto, com menos usuários e sincronicidade.

Para selecionar a versão Community Edition (CE), usaremos o seguinte comando:

flutter pub add cbl_flutter_ce

Dessa forma, já adicionamos todos os packages necessários. Vamos verificar o pubspec.yaml, o arquivo principal do projeto em que estão as dependências. Da linha 42 a 44, encontraremos as três novas alterações: cbl, cbl_flutter e cbl_flutter_ce, com suas versões estáveis.

Para finalizar, rodaremos o comando flutter pub get para garantir que tudo está sincronizado corretamente no projeto. Para garantir que o Couchbase está completamente instalado, precisamos inicializar o package no projeto. Ou seja, antes de rodar o aplicativo, é necessário garantir que o Couchbase está disponível.

No menu lateral esquerdo, dentro da pasta "lib", acessaremos o main.dart, o arquivo principal do aplicativo, que estará apenas executando o aplicativo com runApp():

Arquivo main.dart

import 'package:flutter/material.dart';

import 'app/app_widget.dart';

void main() {
  runApp(const MyApp());
}

Precisamos que o Couchbase seja inicializado antes de rodar o aplicativo. Para isso, chamaremos CodebaseLiteFlutter.init(), antes do runApp(). Além disso, injetaremos o package cbl_flutter no projeto, na linha 1:

import 'package:cbl_flutter/cbl_flutter.dart'
import 'package:flutter/material.dart';

import 'app/app_widget.dart';

void main() {
    CouchbaseLiteFlutter.init();
    runApp(const MyApp());
}

Precisamos esperar ele iniciar antes de rodar o aplicativo, então vamos inserir um await antes do CodebaseLiteFlutter.init(). Logo, é necessário transformar a função void main() em Future<void> main(), também tornando-a assíncrona com o async:

// ...

Future<void> main() async {
    await CouchbaseLiteFlutter.init();
    runApp(const MyApp());
}

Dessa maneira, o Couchbase será inicializado, mas ainda precisamos garantir que o Flutter será inicializado antes dessa execução. Portanto, adicionaremos WidgetsFlutterBinding.ensureInitialized() no início da nossa função:

// ...

Future<void> main() async {
    WidgetsFlutterBinding.ensureInitialized();

    await CouchbaseLiteFlutter.init();

    runApp(const MyApp());
}

Assim, garantimos que, ao rodar o aplicativo, ele inicializará todas as funções necessárias, depois o Couchbase, e então executar o app. Como já instalamos a dependência da Community Edition, o Couchbase já sabe qual versão usar, sem necessidade de configuração específica, pois ele já utiliza a instalada no package.

Configurando o Couchbase - Criando e inicializando o serviço do Couchbase

Agora que o Couchbase foi instalado, precisamos configurar e implementar um serviço para utilizar suas funções ao longo da aplicação. Isso é essencial para termos uma abstração eficaz da plataforma e de toda a estrutura lógica do que será feito.

Implementando um serviço

Para iniciar essa configuração, vamos voltar ao projeto no VS Code. Acessaremos a pasta "lib" e, dentro dela, a pasta "app", onde estão todas as camadas do nosso aplicativo. Dentro de "app", criaremos uma pasta chamada "services". Basta clicar com o botão direito, selecionar "New folder" (nova pasta) e digitar o nome "services".

Dentro da pasta "services", criaremos um serviço específico para a implementação do Couchbase. Podemos nomeá-lo de várias formas, mas utilizaremos o nome mais óbvio: couchbase service. Assim, criaremos um arquivo chamado couchbase_service.dart.

Nele, vamos inicializar uma classe:

Arquivo couchbase_service.dart

class CouchbaseService {

}

A primeira implementação dentro dessa classe será a inicialização do banco de dados. Logo, criaremos um nullable AsyncDatabase chamado database. A importação do CBL aparecerá automaticamente na primeira linha do arquivo:

import 'package:cbl/cbl.dart';

class CouchbaseService {
    AsyncDatabase? database;
}

Assim, conseguimos criar uma função para inicializar. Mas por que criamos uma variável? Vamos inicializar essa variável dentro do serviço para que depois possamos utilizar o mesmo database em todas as operações, sem a necessidade de reinicializá-lo constantemente.

Agora, vamos criar uma função chamada init(), com retorno void. Ela será responsável por instanciar e iniciar o banco de dados. Definiremos a variável database como Database.openAsync() para criar ou recuperar a instância do banco de dados e, entre os parênteses, definiremos o nome database:

import 'package:cbl/cbl.dart';

class CouchbaseService {
    AsyncDatabase? database;

    void init() {
        database = Database.openAsync('database');
    }
}

Inicialmente, o código indicará um erro, pois estamos trabalhando com um Future<>, então é necessário utilizar o await. Portanto, vamos adicionar o await antes de Database.openAsync() e transformar init() em uma função assíncrona, que passará a ser uma Future<void>:

import 'package:cbl/cbl.dart';

class CouchbaseService {
    AsyncDatabase? database;

    Future<void> init() async {
        database = await Database.openAsync('database');
    }
}

Assim, já temos a implementação de inicialização do Couchbase dentro do serviço. Por fim, vamos fazer uma configuração para checar se a variável database é nula. Basta incluir duas interrogações antes da inicialização:

import 'package:cbl/cbl.dart';

class CouchbaseService {
    AsyncDatabase? database;

    Future<void> init() async {
        database ??= await Database.openAsync('database');
    }
}

Essa implementação garante que o banco de dados seja inicializado apenas uma vez. Caso já esteja iniciado, a função não fará nada. Isso é útil, pois podemos chamar a função de inicialização sempre que necessário, mas ela só executará se o banco de dados ainda não estiver iniciado.

Sobre o curso Flutter: implemente offline first com Couchbase em um app

O curso Flutter: implemente offline first com Couchbase em um app possui 140 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de Flutter em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Configurando o Couchbase
• Listando dados com o Couchbase
• Gerenciamento de dados locais com Couchbase
• Sincronização de dados offline e online
• Gerenciamento de conflitos e segurança