pouch db tdc2016
TRANSCRIPT
pen4education
Trilha – JavaScriptItacir Ferreira Pompeu
Técnologo em Sistemas para Internet
pen4education
Aplicações off-line first com Ionic e PouchDB
Essa palestra, aborda os desafios acerca da criação de um chat com sincronia offline e “realtime”, usando Couchdb, Ionic e Pouchdb, com baixo custo.
pen4education
Who am I?
Itacir Ferreira Pompeu, ex-maratonista de programação (ACM-ICPC), lutador de jiujitsu, professor de NodeJS na Webschool.io, desenvolvedor “fullstack” no produto MyInfoShare (Brasília), apaixonado por Opensource e Linux, formado em TSI.
pen4education
Agenda
● O Produto MyInfoShare● Couchdb
○ Sync e Replicate○ How to Use
● Pouchdb○ Open Source e JS○ Simple Sync○ Full Coverge○ Api Simples
● Ionic○ Como Funciona○ Electron e Navegador
● Dicas Básicas○ Autenticação e http○ NodeJS e Express
● Considerações Finais● Perguntas
pen4education
Introdução• Javascript à frente de tudo, fui desafiado recentemente a
criar um chat mobile.
• Sockt.IO foi minha primeira opção, contudo, ao verificar a real regra de negócio da aplicação, percebi que haveria muito uso offline da aplicação.
• Como já havia “Brincado” com PouchDB, sugeri o uso, comecei a pesquisá-lo, e hoje irei compartilhar com vocês essa experiência.
pen4education
www.myinfoshare.com
pen4education
Offline FirstIsso realmente existe?
https://github.com/offlinefirst
http://offlinefirst.org/
Pouchdb simplificou muito!!!!
pen4education
Entendendo o Conceito Web Storage“Web Storage: formas mais sofisticadas de manter informações no
navegador, que ficam disponíveis durante uma única sessão. Ao
invés de ter que buscar a informação no banco de dados
(percorrendo todo o caminho entre servidores), a informação é
requisitada para o próprio browser.”
<http://arquiteturadeinformacao.com/design-de-interacao/depois-de-
mobile-first-o-conceito-de-offline-first/> by: Fabricio Teixeira
pen4education
Entendendo o Conceito App Cache“App Cache: armazenar arquivos HTML, CSS, JS e imagens
para fazer sites e aplicativos funcionarem offline. A ideia é
controlar mais de perto o comportamento do Cache para
decidir quais arquivos devem ser armazenados e quando.”
<http://arquiteturadeinformacao.com/design-de-interacao/depois-de-mobile-first-o-conceito-de-offline-first/> by: Fabricio Teixeira
pen4education
Entendendo o CouchDB
Leia o livro disponível em: <http://guide.couchdb.org/draft/tour.html>
Ele é um banco NOSQL, baseado em HTTP (rest), e organizado em documentos.
Possui uma grande semelhança com Mongo, porem é escrito em Erlang.
Possui Interface de comunicação simples, e pode ser acessado pelo navegador.
pen4education
Interface Couchdb
Futon_LinkFauxton
pen4education
Sync e Replicação
Opera de forma simples.
Peer to peer.
Poder de incrementar documentos.
Possui um controle de conflito.
pen4education
O PouchDB
O banco de dados que sincroniza!
PouchDB é um banco de dados JavaScript de código aberto inspirado pelo Apache CouchDB, que é projetado para funcionar bem dentro do navegador. O PouchDB foi criado para ajudar os desenvolvedores web a criar aplicativos que funcionam bem off-line como eles fazem online.
fonte: <https://pouchdb.com/>
pen4education
O PouchDB
Ele permite que os aplicativos armazenem dados localmente enquanto off-line, em seguida, sincronizá-lo com o CouchDB e servidores compatíveis quando a aplicação está de volta on-line, mantendo os dados do usuário em sincronia, não importa onde eles façam o próximo login.
fonte: <https://pouchdb.com/>
pen4education
O PouchDB how Sync.
pen4education
pen4education
O PouchDB possui full coverage
pen4education
pen4education
O PouchDB api example.
DB Post DB PUT
pen4education
O PouchDB api example.
DB GET DB Query
pen4education
O PouchDB Find
Db.query sera deprecado, então user db.find um plugin com uma api simples.
pen4education
O PouchDB api example.
DB BulkDocs
pen4education
O PouchDB adapters.
pen4education
O PouchDB adapters.
pen4education
O Ionic
pen4education
O Ionic
“Ionic é um framework criado no final de 2013, que visa a
criação de aplicações híbridas para dispositivos móveis. Hoje,
o Ionic encontra-se na versão 1.3, que segundo a equipe por
trás do desenvolvimento, será o último release beta. Ele nada
mais é do que uma pilha de componentes e outros
frameworks.”
<http://tableless.com.br/introducao-ao-ionic-framework/> by:
grillorafael
pen4education
Dependencias
Deve-ser ter NodeJS instalando para usar o npm e atravez dele instalar o apache cordova e ionic.
apt-get install nodejs && sudo npm i -g cordova ionic
O Ionic não e nada mais que a união de AngularJS com um css baseado no design adaptativo de acordo com a plataforma, hoje já esta sendo Ionic 2.
pen4education
Ionic how use
Lembrando para fazer build Android e Ios.
Deve-se ter os ambientes Java e Android no path do Sistema operacional o IOS deve-se ter o ambiente dele.
Caso queira pagar por isso Adobe reserva um produto para build.
pen4education
PhoneGap Build
pen4education
App My InfoShare site
pen4education
App My InfoShare
pen4education
Pouch-Express
Um submodulo do PouchDB, que utiliza NodeJS e express.
Rode o comando npm i pouch-express express
Use
pen4education
Arquitetura do App
pen4education
pen4education
Conclusão
Aplicativos com Ionic e pouchDB são simples de trabalhar com offline first.
Foi uma boa opção para o MyInfoShare.
Eu recomendo a todos.
pen4education
Um bom desenvolvedor, é aquele que sabe aproveitar o que de melhor existe no momento.
pen4education
Obrigado!
@Pompeulimp (Twiter)
@Pompeu (GitHub)
Itacir.Pompeu(facebook)
http//:pompeu.github.io(blog)
pen4education
Referências
IONIC. Disponível em: <http://tableless.com.br/introducao-ao-ionic-framework/> Acesso em: 04 maio de 2016.
ANGULAR. Disponível em: <https://angularjs.org/> Acesso em: 01 maio de 2016.
POUCHDB. Disponível em: <https://pouchdb.com/> Acesso em: 01 maio de 2016.
pen4education
Referências
NPMJS. Disponível em: <https://www.npmjs.com/> Acesso em: 03 maio de 2016.NODE. Disponível em: <https://nodejs.org/en//> Acesso em: 03 maio de 2016.COUCHDB. Disponível em: <http://couchdb.apache.org//> Acesso em: 04 maio de 2016.
pen4education
Any Questions