Mantendo os dados do seu app web offline com PouchDB

Mantendo os dados do seu app
web offline com PouchDB
Prof. Sidney Sousa

Sobre o que conversaremos?
 PWAs
 Armazenamento de dados offline
 Sincronização com CouchDB

Público alvo
 Devs web/mobile
 Estudantes de desenvolvimento de software

... mas antes, quem sou eu?
 Bacharel e mestre em Ciência da
Computação (UEMS e UNICAMP)
 Dev há 14 anos (Peanuts, DigithoBrasil,
CASSEMS, IFMS)
 Professor há 10 anos (FCG, IFMS)
 Professor de Desenvolvimento Web no
IFMS campus Aquidauana desde 2013
 Javaneiro desde 2012
 Programming language agnostic

UX dos apps web: histórico
 Década 90: Homepages e conteúdo estático
 Década de 2000: Web 2.0 e Web Semântica; Início do pensamento “responsivo”
 Década de 2010: Responsividade e Mobile First; PWAs

PWA
 Progressive Web App
 De acordo com o Google, um PWA deve ser:
 Confiável – Carrega instantaneamente e nunca exibe Downasaur, mesmo em condições de rede
instáveis.
 Rápido - Responde rapidamente às interações do usuário com transições suaves e sem rolagens de tela
“escrotas”.
 Engajante - Possui a aparência de um app nativo em dispositivos móveis, com UX imersiva.

SPA
 Single Page App
 App web que interage com o usuário reescrevendo a página atual ao invés de carregar uma
nova página do servidor
 Carrega todos os artefatos do app (HTML, CSS e JavaScript) com uma única carga inicial de
página
 A página nunca recarrega em nenhum momento do processo
 Frameworks/bibliotecas famosas: Angular, React, Vue.js

SPA de novo!
 A navegação entre “páginas” em um SPA bem feito é instantânea
 Bom uso de CSS e responsividade

Web App Manifest
 Arquivo que oferece metadados associados ao app
 Ex.: ícones do app, URL a ser aberta quando o usuário abre o app
 Permite que o app possa ser aberto no browser em tela cheia (full screen)

Armazenamento de dados
 Quando online, consumir alguma API (REST preferencialmente!)
 DBMS agnostic

Armazenamento de dados
 Quando offline...
 ... e quando offline?

... mas devo me preocupar com isto?
 Como diria o sábio, depende...
 ... mas, vale a pena refletir acerca de algumas coisas:
 Confiabilidade
 Qualidade da conexão de rede
 Mobilidade

O que é o PouchDB
 DBMS JavaScript inspirado no CouchDB
 Armazena dados no browser
 Oferece sincronização com o CouchDB
 Motivação: fazer com que o app funcione
bem online ou off-line

Modelo de dados
 PouchDB é um DBMS NoSQL baseado em documentos
 Formato JSON
{
"_id": "2018-11-16T15:57:03.269Z",
"_rev": "1-a8ad186fef3bdc10c70b28a2a3dec79a",
"nome": "Sidney Sousa",
"telefone": "(67) 99105-6178"
}

Do you like code?
Vamos ver um pouco de código?

Instalação
 Bower: bower i --save pouchdb
 NPM: npm i --save pouchdb
 CDN: //cdn.jsdelivr.net/npm/pouchdb@7.0.0/dist/pouchdb.min.js

Importação
 <= ES5: var PouchDB = require('pouchdb’);
 ES6: import PouchDB from ‘pouchdb’

Criando um banco de dados
const db = new PouchDB('contatos');

Salvando um documento
let contato = { nome: 'Sidney Sousa', telefone: '(67) 99999-9999' };
db.put(contato, (erro, resposta) => {
if(!erro)
console.log('Contato salvo!');
});

Recuperando todos os documentos
db.allDocs({ include_docs: true, descending: true }, (err, doc) => {
console.log(doc.rows);
})

Removendo um contato
db.remove(contato);

Onde ficam os dados?
 IndexedDB ou WebSQL em browsers que não suportam IndexedDB
 Browsers que suportam PouchDB:
 Firefox 29+ (Including Firefox OS and Firefox for Android)
 Chrome 30+
 Safari 5+
 Internet Explorer 10+
 Opera 21+
 Android 4.0+
 iOS 7.1+
 Windows Phone 8+

Quanto eu posso armazenar no browser?
 Chrome: calcula de acordo com o espaço de armazenamento do disco do usuário (20% de 1/3
do espaço total do disco)
 Firefox: sem limites, mas pede confirmação do usuário caso o armazenamento ultrapasse 50 MB
 Safari: sem limites no desktop, 50 MB no iOS (WebSQL)
 Lista completa de browsers: https://pouchdb.com/faq.html#data_limits

Sincronizando com o CouchDB
 CouchDB é um DBMS orientado a
documentos
 Possui como maior diferencial uma API
Rest pronta para operações e consultas
 Encapsula os dados em formato JSON,
porém oferece suporte para dados
binários
 Talvez, o maior concorrente do MongoDB

Sincronizando com o CouchDB
let urlBancoDeDados = 'http://meubancodedados.com/contatos';
db.sync(urlBancoDeDados, { live: true, retry: true });

Links úteis + Contato
 PouchDB: https://pouchdb.com
 CouchDB: http://couchdb.apache.org
 IBM Cloudant: https://www.ibm.com/cloud/cloudant
 Exemplo de PWA com PouchDB:
git clone https://github.com/sidneyroberto/exemplo-pouchdb.git
 Contato:
 E-mail: sidney.sousa@ifms.edu.br
 Github: https://github.com/sidneyroberto/
Obrigado pela atenção!

Mantendo os dados do seu app web offline com PouchDB

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Mantendo os dados do seu app web offline com PouchDB

Semelhante a Mantendo os dados do seu app web offline com PouchDB (20)

Mais de Sidney Roberto

Mais de Sidney Roberto (20)

Mantendo os dados do seu app web offline com PouchDB