Rafael Ugolini é um desenvolvedor de software full stack que atualmente trabalha na Famoco em Bruxelas, Bélgica. Ele trabalha com desenvolvimento de software há mais de 10 anos e, ultimamente, tem se concentrado no design de soluções da Web e no desenvolvimento usando Python e Javascript. Twitter, LinkedIn, Github
Introdução
Neste artigo, vou propor uma off-line primeiro desenvolvimento usando Couchbase como a ferramenta de comunicação entre o backend e o frontend.
Ao estudar o react-redux, algo de que gostei muito foi o Ações assíncronas padrão onde você tem:
|
1 2 3 4 5 |
{ tipo: 'FECH_POSTS_REQUEST' } { tipo: 'FECH_POSTS_FAILURE', erro: 'Ops' } { tipo: 'FECH_POSTS_SUCCESS', resposta: { ... } } |
Depois de entender um pouco mais sobre o Couchbase e o Gateway de sincronização do CouchbaseSe você tiver um aplicativo off-line totalmente funcional, parece possível aplicar esse tipo de padrão e deixar que o Couchbase lide com toda a comunicação do aplicativo. Esse padrão proporciona uma experiência de usuário muito boa porque você realmente renderiza a página com base no status atual do aplicativo.
Como isso funciona?
Aplicativo
O aplicativo em si nunca faz nenhuma chamada para o back-end, a única responsabilidade que ele tem é salvar estados e renderizá-los. Dessa forma, é possível ter um aplicativo totalmente funcional trabalhando off-line.
Couchbase Lite/Sync Gateway
Couchbase Lite será responsável por sincronizar o estado atual do aplicativo com Gateway de sincronização do Couchbase e recuperar novas informações assim que o documento for atualizado no backend.
Ganchos da Web
Quando o Couchbase Sync Gateway receber um documento que corresponda ao filtro, ele fará uma chamada HTTP para o aplicativo Web com o documento que precisa ser atualizado.
Aplicativo da Web
O aplicativo Web pode fazer qualquer tipo de atualização, como:
- Criação de uma nova tarefa em uma fila de tarefas
- Recuperação de dados de uma API externa
- Analisar alguns dados/imagens (por exemplo: OCR)
Mãos à obra
Para ilustrar um pouco como esse conceito funciona, desenvolvi um exemplo simples em que, depois de salvar um documento específico, o aplicativo da Web enviará uma tarefa que obterá um personagem aleatório de Star Wars e atualizará o documento.
Você pode baixar todo o código necessário para executar um exemplo disso solução.
A pilha é composta por:
- Aplicativo da Web - Flask
- Fila de tarefas - Celery + RabbitMQ
- Sync Gateway (modo morsa)
Para colocá-lo em execução, basta clonar o repositório git e executar o docker-compose:
|
1 2 3 4 5 |
git clone https://github.com/rafaelugolini/syncgateway_apiless_example cd syncgateway_apiless_example doca-compor para cima |
Modelagem de dados
Neste exemplo, a chave ação é a fonte primária dos eventos, o documento deve ser salvo com:
|
1 |
{ "ação": "person_request" (solicitação de pessoa) } |
Para criar um documento curl, basta usar o seguinte comando
|
1 |
enrolar -H "Content-Type: application/json" -X POST -d '{"action": "person_request"}' http://localhost:4984/db/ |
Gateway de sincronização
Na configuração do gateway de sincronização, foi registrado um manipulador de eventos para cada alteração de documento com action == "person_request"uma chamada de API será feita para o aplicativo Web.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
"event_handlers": { "document_changed": [ {"handler": "webhook", "url": "http://web_service:5000/person_request/", "filtro": `função(doc) { se (doc.ação == "person_request" (solicitação de pessoa)) { retorno verdadeiro; } retorno falso; }` } ] } |
Aplicativo da Web
O aplicativo da Web é uma API simples do Flask que recebe um POST com as informações do documento e envia uma tarefa para o Celery.
A tarefa consultará uma pessoa aleatória de Guerra nas Estrelas de https://swapi.co/ e atualizar o documento:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "ação": "person_success", "gênero": "feminino", "altura": "168", "massa": "55", "name" (nome): "Zam Wesell" } |
Cliente
Desenvolvi um cliente pouchdb simples que imprimirá todos os documentos do gateway de sincronização para o console. Basicamente, ele executa essa função sempre que há uma alteração no banco de dados.
|
1 2 3 4 5 6 7 8 9 10 11 |
const getAllDocs = () => ( db.todos os documentos({ incluir_docs: verdadeiro, anexos: verdadeiro, }).então((resultado) => { console.registro('\x1Bc'); // isso limpa o console console.registro(util.inspecionar(resultado.linhas, falso, nulo)); }).captura((erro) => { console.registro(erro); }) ); |
YVocê pode obtê-lo no seguinte endereço repositório git.
|
1 2 |
fio instalar fio iniciar |
Esta postagem foi trazida a você pelo Programa de redação da comunidade Couchbase
[...] Erro ao carregar o artigo HTMLUnique [...]