Criando aplicações off-line com PO Sync — Parte 1
Por que criar aplicações que funcionem em modo off-line?
Existem várias razões pelas quais se necessita de um aplicativo que funcione em modo off-line, dentre elas podemos destacar a produtividade. Pois muitos usuários que necessitam de mobilidade em algum momento acabam enfrentando problemas com relação a instabilidade de rede ou até mesmo a falta dela.
Vamos pensar em um campo de pesquisa que fica em uma área bastante afastada, o pesquisador precisa coletar os dados no local, ou até mesmo as coordenadas para posteriormente serem sincronizadas com a base de dados da central. Isso gera mais confiança, produtividade e mobilidade para o usuário.
Por isso, quero mostrar para vocês como nós podemos fazer este tipo de aplicativo utilizando as tecnologias Ionic e o PO Sync.
Este artigo será dividido em várias etapas, portanto neste primeiro momento iremos nos concentrar na apresentação do PO Sync e na sua configuração inicial.
PO Sync
O PO Sync é uma biblioteca que possibilita armazenar e sincronizar dados, possibilitando ao usuário utilizar o aplicativo mesmo estando off-line, com a mesma experiência como se estivesse online.
Ele simplifica o processo de implementação de aplicações off-line, pois o desenvolvedor não precisa se preocupar com o estado dos dados na alternância entre online/offline das aplicações. E também traz diferentes tipos de armazenamento, como o IndexDB, localStorage, LokiJS e como possui licença MIT e está disponível no Github, também abre para a possibilidade de melhorias através da comunidade.
Esta biblioteca, faz parte de um projeto maior chamado PO UI, que contém diversas soluções para aumentar a produtividade do desevolvimento de aplicações front-end.
Como ele funciona?
Primeiramente, o PO Sync armazena localmente os dados criados pelo usuário. Qualquer modificação feita nesses dados, até mesmo a criação, vai gerar um item de sincronização que a própria biblioteca armazena, para posteriormente enviar esses dados para o servidor. Esses itens ficam armazenados em uma fila de eventos, com as características que representam o tipo de evento como criação, alteração ou remoção.
Esses dados são enviados para o servidor a partir de um gatilho, que pode ser a alteração do estado da rede, uma configuração que você pode fazer para sincronizar de forma periódica ou até mesmo uma sincronização manual feita pelo próprio usuário do aplicativo.
Por onde eu começo?
No portal do PO UI contém dois guias bem completos sobre a instalação do pacote na sua aplicação e os principais fundamentos que envolvem o PO Sync, incluindo técnicas mais avançadas para customizar conforme a sua aplicação.
Neste tutorial, iremos abordar a preparação do ambiente da sua aplicação para começar a utilizar o PO Sync, bem como a primeira busca na base de dados.
O problema
A nossa aplicação será um gerenciador de pets! Imagine uma pessoa que trabalha como pet sitter e que, por cuidar de muitos animais, precisa estar sempre atenta ao horário das medicações, se eles já foram alimentados, o tipo da ração de cada um, enfim são muitos detalhes! Como ela sempre está indo para diversos lugares, as vezes fica sem acesso à rede dependendo da região.
Então, vamos criar agora uma solução que possa ajudá-la nesse problema e que mantenha a mobilidade do aplicativo!
Endpoint do tutorial
Para fazer as sincronizações, iremos precisar ter um backend pronto que nos retorne os dados conforme a específicação do PO Sync. Para esse tutorial, iremos utilizar os endpoints desse link:
https://my-pets-backend.herokuapp.com/api.
Vamos lá!
Para seguir esse tutorial e desenvolver utilizando a biblioteca, é necessário ter como pré-requisitos conhecimentos em:
Para criar a aplicação e instalar as dependências, você pode seguir as opções do guia Começando com o PO Sync. Após fazer essa configuração inicial, você deve ter adicionado a biblioteca da seguinte forma:
Com isso, a nossa aplicação está pronta para começar a usar o @po-ui/ng-sync.
Agora nós precisamos criar o nosso primeiro schema, chamado Pets. Ele terá as configurações e características do nosso endpoint Pets. Para isso, crie um arquivo chamado schemas.constants.ts em src/app/schemas.constants.ts.
Depois de criado o nosso schema, precisamos ter um serviço que seja responsável por fazer as configurações iniciais do PO Sync.
Vamos criar um serviço chamado SyncService, e adicionar as configurações que precisamos.
Os métodos checkDataInitial e loadDataInitial fazem um controle para poder fazer um carregamento inicial dos dados. Caso esses dados já tenham sido carregados no aplicativo, ele pula essa etapa. Este controle pode ser feito como você quiser, ou até mesmo não fazer nenhuma carga inicial dos dados.
Como esta instância do PO Sync será utilizada pela aplicação inteira, podemos deixar o serviço com escopo global.
Agora nós queremos que a inicialização do PO Sync seja executada sempre que o aplicativo inicializa nas rotas, para podermos avisar aos demais componentes que ele já está pronto para ser utilizado. Para isso, iremos criar um resolver de rotas.
Agora basta adicioná-lo na nossa rota principal:
Para buscar os dados, iremos criar um serviço chamado PetsService.
Nele, buscaremos os dados armazenados e gerenciados pela biblioteca, utilizando o serviço PoSyncService, que nos oferece métodos para busca dos dados e também alguns filtros para ele. Neste caso, estaremos buscando todos os dados referentes ao schema Pets.
Agora vamos para HomePageComponent!
Para buscar os dados do servidor utilizando o PO Sync, primeiro precisamos verificar se foi inicializado na aplicação. Para isso, faremos essa validação através das propriedades das rotas da seguinte forma:
Basta utilizar a propriedade this.pets$ que contém um Observable que retorna os dados que queremos acessar. Dessa forma, você pode acessar os dados da seguinte forma no seu home.component.html:
Em seguida, execute a aplicação utilizando o ionic serve e, se ocorrer tudo certo, você terá uma tela com as informações parecidas com a imagem abaixo:
Com isso, seu App já recebe novos dados que são colocados no servidor e também está pronto para começar a enviar novos dados também, e já pode começar a funcionar de forma off-line.
Considerações finais
- Você pode acessar o fonte de aplicativo em: My Pets Github.
- O próprio PO UI contém um exemplo pronto que você também pode olhar: PO Sample Conference.
Em breve farei outras postagens com o passo a passo das demais funcionalidades do PO Sync, como gravar, atualizar e remover os dados e preparar a API para as sincronizações.
