uma talk sobre o caso de sucesso do myinfoshare, usando ionic e couchdb em seu app mobile, Um startup de Brasilia e que aposta em novas tecnologias para melhor servir seus clientes.

1. pen4education
Trilha – JavaScript
Itacir Ferreira Pompeu
Técnologo em Sistemas para Internet

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. 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. 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. 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. pen4education
www.myinfoshare.com

7. pen4education
myinfoshare - equipe

8. pen4education
Offline First
Isso realmente existe?
https://github.
com/offlinefirst
http://offlinefirst.org/
Pouchdb simplificou muito!!!!

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. 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. 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. pen4education
Interface Couchdb
Futon_Link
Fauxton

13. pen4education
Sync e Replicação
Opera de forma simples.
Peer to peer.
Poder de incrementar documentos.
Possui um controle de conflito.

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. 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. pen4education
O PouchDB how Sync.

17. pen4education

18. pen4education
O PouchDB possui full
coverage

19. pen4education

20. pen4education
O PouchDB api example.
DB Post DB PUT

21. pen4education
O PouchDB api example.
DB GET DB Query

22. pen4education
O PouchDB Find
Db.query sera deprecado, então user db.find um
plugin com uma api simples.

23. pen4education
O PouchDB api example.
DB BulkDocs

24. pen4education
O PouchDB adapters.

25. pen4education
O PouchDB adapters.

26. pen4education
O Ionic

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. 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. 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. pen4education
PhoneGap Build

31. pen4education
App My InfoShare site

32. pen4education
App My InfoShare

33. pen4education
Pouch-Express
Um submodulo do PouchDB, que utiliza NodeJS e
express.
Rode o comando npm i pouch-express express
Use

34. pen4education
Arquitetura do App

35. pen4education

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. pen4education
Um bom desenvolvedor, é
aquele que sabe aproveitar o
que de melhor existe no
momento.

38. pen4education
Obrigado!
@Pompeulimp (Twiter)
@Pompeu (GitHub)
Itacir.Pompeu(facebook)
http//:pompeu.github.io(blog)

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. 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. pen4education
Any Questions