SlideShare uma empresa Scribd logo
pen4education
Trilha – JavaScript
Itacir 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
myinfoshare - equipe
pen4education
Offline First
Isso 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_Link
Fauxton
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

Mais conteúdo relacionado

PDF
Node.JS - Workshop do básico ao avançado
PDF
Vagrant - ambiente de desenvolvimento virtualizado
PDF
Ampliando suas fronteiras com Node-Webkit
KEY
Uma visão rápida sobre Nodejs
PPTX
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
PDF
Nodejs - A performance que eu sempre quis ter
PDF
Node.js, Uma breve introdução
PDF
Node js - Javascript Server Side
Node.JS - Workshop do básico ao avançado
Vagrant - ambiente de desenvolvimento virtualizado
Ampliando suas fronteiras com Node-Webkit
Uma visão rápida sobre Nodejs
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Nodejs - A performance que eu sempre quis ter
Node.js, Uma breve introdução
Node js - Javascript Server Side

Mais procurados (20)

PDF
Node.js - #1 - Introdução - Rodrigo Branas
PPTX
Introdução ao Node.js - FATEC SP
PDF
Python na Web
PDF
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
PPTX
NodeJS - Tutorial de forma simples e pratica.
PDF
Desenvolvendo aplicações Mobile em Python
PDF
Por que Node JS?
PDF
Desenvolvimento Web com Php e jQuery
PDF
Composer dependency manager - TDC - POA 2017
PDF
Composer dependency manager
PDF
Desenvolvendo com IONIC
PDF
Django: desenvolvendo aplicações web de maneira simples e rápida!
PPTX
Hangout Tempo Real Eventos - Nodejs - Os Primeiros Passos
PPTX
Introdução ao NodeJS
PPTX
O que é nodejs, cases e vantagens
ODP
Conhecendo o Nodejs
PPTX
Zabbix - Sou Dev, o que eu tenho a ver com isso? - André Déo (Comunidade Zabb...
PDF
Contribuindo e criando software livre
PPTX
Desmistificando um Ambiente de Desenvolvimento WEB com Vagrant
PDF
Beyond Ruby with NodeJS - RubyConf Brasil 2010
Node.js - #1 - Introdução - Rodrigo Branas
Introdução ao Node.js - FATEC SP
Python na Web
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
NodeJS - Tutorial de forma simples e pratica.
Desenvolvendo aplicações Mobile em Python
Por que Node JS?
Desenvolvimento Web com Php e jQuery
Composer dependency manager - TDC - POA 2017
Composer dependency manager
Desenvolvendo com IONIC
Django: desenvolvendo aplicações web de maneira simples e rápida!
Hangout Tempo Real Eventos - Nodejs - Os Primeiros Passos
Introdução ao NodeJS
O que é nodejs, cases e vantagens
Conhecendo o Nodejs
Zabbix - Sou Dev, o que eu tenho a ver com isso? - André Déo (Comunidade Zabb...
Contribuindo e criando software livre
Desmistificando um Ambiente de Desenvolvimento WEB com Vagrant
Beyond Ruby with NodeJS - RubyConf Brasil 2010
Anúncio

Destaque (6)

PDF
Pouch db tdc2016
PDF
Offline-First Apps with PouchDB
PPTX
Couch DB/PouchDB approach for hybrid mobile applications
PDF
Resumo Eureca! - The Lean Startup
PDF
Offline first, the painless way
PPT
How to Embed a PowerPoint Presentation Using SlideShare
Pouch db tdc2016
Offline-First Apps with PouchDB
Couch DB/PouchDB approach for hybrid mobile applications
Resumo Eureca! - The Lean Startup
Offline first, the painless way
How to Embed a PowerPoint Presentation Using SlideShare
Anúncio

Semelhante a Pouch db tdc2016 (20)

PPTX
Mantendo os dados do seu app web offline com PouchDB
PDF
Offline apps Using Ionic Framework and PouchDB
PDF
Jurassic JavaScript Park - Rodando Offline até na ilha Nublar!
PDF
Mobile First e Offline First
PPT
Html5 pt - Offline Apps
PDF
Phonegap
PDF
DevDay - O elo perdido: sincronizando webapps
PDF
noBackend e Offline First: foque em criar experiências
PDF
Apresentação CEJS - Do nada para a nuvem
PPTX
Abra sua cabeça, apps híbridos - PhoneGap/Cordova
PPTX
Desmistificando o mobile híbrido com phonegap
PPTX
Hello world hybrid apps oportunidades com ionic framework v2
PDF
Seminário de Desenvolvimento Mobile - Etec Cafelândia
PDF
Desenvolvimento Client-Side 2016
PDF
Ionic Framework - Configuração do ambiente e a criação da primeira APP
PDF
Ionic 2/3 + Firebase
PDF
Web Offline
PPTX
Desenvolvimento web - conceitos, tecnologia e tendências.
PDF
Ionic 2 como ferramenta para desenvolvimento móvel
PDF
Web Offline
Mantendo os dados do seu app web offline com PouchDB
Offline apps Using Ionic Framework and PouchDB
Jurassic JavaScript Park - Rodando Offline até na ilha Nublar!
Mobile First e Offline First
Html5 pt - Offline Apps
Phonegap
DevDay - O elo perdido: sincronizando webapps
noBackend e Offline First: foque em criar experiências
Apresentação CEJS - Do nada para a nuvem
Abra sua cabeça, apps híbridos - PhoneGap/Cordova
Desmistificando o mobile híbrido com phonegap
Hello world hybrid apps oportunidades com ionic framework v2
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Desenvolvimento Client-Side 2016
Ionic Framework - Configuração do ambiente e a criação da primeira APP
Ionic 2/3 + Firebase
Web Offline
Desenvolvimento web - conceitos, tecnologia e tendências.
Ionic 2 como ferramenta para desenvolvimento móvel
Web Offline

Último (7)

PDF
Evolução em código: algoritmos genéticos com PHP
PDF
apresentacao introducao computacao ead.pdf
PPTX
Mapeamento de Objeto para Tabela Relacional
PDF
Paper_A028_BR_Victor_Enrique_Cavero_Sori (1).pdf
PPTX
Curso de Windows 11 resumido na prática.pptx
PDF
Dos requisitos ao código: como criar código rastreável em PHP
DOC
CODIGO PARA AUTOMATIZAR A JOGABILIDADE SUPER MARIO
Evolução em código: algoritmos genéticos com PHP
apresentacao introducao computacao ead.pdf
Mapeamento de Objeto para Tabela Relacional
Paper_A028_BR_Victor_Enrique_Cavero_Sori (1).pdf
Curso de Windows 11 resumido na prática.pptx
Dos requisitos ao código: como criar código rastreável em PHP
CODIGO PARA AUTOMATIZAR A JOGABILIDADE SUPER MARIO

Pouch db tdc2016