Pouch db tdc2016

172 views

Published on

Minha talk no TDC, sobre PouchDB e Ionic, citando o case do Myinfoshare de aplication de chat.

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
172
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Pouch db tdc2016

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

×