pouch db tdc2016
TRANSCRIPT
![Page 1: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/1.jpg)
pen4education
Trilha – JavaScriptItacir Ferreira Pompeu
Técnologo em Sistemas para Internet
![Page 2: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/2.jpg)
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.
![Page 3: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/3.jpg)
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.
![Page 4: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/4.jpg)
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
![Page 5: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/5.jpg)
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.
![Page 6: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/6.jpg)
pen4education
www.myinfoshare.com
![Page 8: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/8.jpg)
pen4education
Offline FirstIsso realmente existe?
https://github.com/offlinefirst
http://offlinefirst.org/
Pouchdb simplificou muito!!!!
![Page 9: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/9.jpg)
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
![Page 10: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/10.jpg)
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
![Page 11: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/11.jpg)
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.
![Page 12: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/12.jpg)
pen4education
Interface Couchdb
Futon_LinkFauxton
![Page 13: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/13.jpg)
pen4education
Sync e Replicação
Opera de forma simples.
Peer to peer.
Poder de incrementar documentos.
Possui um controle de conflito.
![Page 14: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/14.jpg)
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/>
![Page 15: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/15.jpg)
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/>
![Page 16: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/16.jpg)
pen4education
O PouchDB how Sync.
![Page 17: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/17.jpg)
pen4education
![Page 18: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/18.jpg)
pen4education
O PouchDB possui full coverage
![Page 19: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/19.jpg)
pen4education
![Page 20: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/20.jpg)
pen4education
O PouchDB api example.
DB Post DB PUT
![Page 21: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/21.jpg)
pen4education
O PouchDB api example.
DB GET DB Query
![Page 22: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/22.jpg)
pen4education
O PouchDB Find
Db.query sera deprecado, então user db.find um plugin com uma api simples.
![Page 23: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/23.jpg)
pen4education
O PouchDB api example.
DB BulkDocs
![Page 24: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/24.jpg)
pen4education
O PouchDB adapters.
![Page 25: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/25.jpg)
pen4education
O PouchDB adapters.
![Page 26: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/26.jpg)
pen4education
O Ionic
![Page 27: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/27.jpg)
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
![Page 28: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/28.jpg)
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.
![Page 29: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/29.jpg)
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.
![Page 30: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/30.jpg)
pen4education
PhoneGap Build
![Page 31: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/31.jpg)
pen4education
App My InfoShare site
![Page 32: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/32.jpg)
pen4education
App My InfoShare
![Page 33: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/33.jpg)
pen4education
Pouch-Express
Um submodulo do PouchDB, que utiliza NodeJS e express.
Rode o comando npm i pouch-express express
Use
![Page 34: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/34.jpg)
pen4education
Arquitetura do App
![Page 35: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/35.jpg)
pen4education
![Page 36: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/36.jpg)
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.
![Page 37: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/37.jpg)
pen4education
Um bom desenvolvedor, é aquele que sabe aproveitar o que de melhor existe no momento.
![Page 38: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/38.jpg)
pen4education
Obrigado!
@Pompeulimp (Twiter)
@Pompeu (GitHub)
Itacir.Pompeu(facebook)
http//:pompeu.github.io(blog)
![Page 39: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/39.jpg)
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.
![Page 40: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/40.jpg)
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.
![Page 41: Pouch db tdc2016](https://reader030.vdocuments.net/reader030/viewer/2022020213/58eee4591a28ab294c8b45cb/html5/thumbnails/41.jpg)
pen4education
Any Questions