Transferir como PDF, PPTX
Carregado porBruno Catão
Web Offline
O documento discute a necessidade de um sistema que funcione offline em 70 delegacias com baixa qualificação dos usuários e instabilidade na conexão com a internet. Propõe o uso de HTML5 e tecnologias como AppCache e Web Storage para suportar aplicativos que funcionem tanto online quanto offline, evitando a necessidade de instalação de softwares complexos. Além disso, menciona a arquitetura inversa e a importância de bibliotecas como jQuery e PouchDB para facilitar o desenvolvimento e a comunicação cliente/servidor.
Mais conteúdo relacionado
Web Offline
- 1.
- 2. – Eu, quandomeu cliente pediu isso ! “Hã ?!”
- 3. Qual o Problema? Sistema da PCCG 70 delegacias com acesso à Internet SEM software
- 4. Requisitos do Sistema Queroter acesso ao software em todas as delegacias Quero poder emitir relatórios em tempo real de qualquer local Características “especiais” Baixa qualificação dos usuários Frequente instabilidade da conexão com a Internet
- 5. Resumindo Baixa Qualificação dosUsuários Não dá para instalar aplicativos complicados Acessar de qualquer lugar Tem “cheiro” de Internet Instabilidade da conexão Ninguém costa de ouvir: “Desculpe senhor, mas o sistema está fora do ar"
- 6. “Quero algo queesteja na Internet, mas que funcione quando a Internet cair"
- 7. Alternativas Arquiteturas Cliente /Servidor: Delphi, Java Webstart, Adobe AIR, WPF, … Problema: - Alô, é do TI ? Então, o programa não tá abrindo ! - Você fez alguma coisa diferente ? - Não, só abri uma página dizendo que ganhei um ringtone …
- 10. Por que HTML5? HTML5 = HTML + CSS3 + JS AppCache + Web Storage !!! Não preciso instalar software no computador de ninguém ! Se a Internet não abrir chame o suporte e não o programador ;)
- 11.
- 12. Vantagens Carregamento mais rápido Suportainstabilidades de conexão Bom para aplicativos móveis (o 3G não é tão bom assim) Coleta de dados …
- 13. –Clarice Lispector “Bora programargalera !”
- 14. AppCache 1/2 HTML Manifesto Browser 1 -Primeiro Acesso Eu tenho um manifesto ! 2 - Faz download Cache ————— arquivo 1 arquivo 2 …. 3 - Define 4 - Faz download Cache Local ————— arquivo 1 arquivo 2 …. 5 - Cria WEB LOCAL
- 15. AppCache 2/2 HTML Manifesto Browser 1 -Outros Acessos Eu tenho um manifesto ! Cache ————— arquivo 1 arquivo 2 …. Cache Local ————— arquivo 1 arquivo 2 …. 3 - Acessa arquivos locais WEB LOCAL 2 - Tem cache ? NÃO HÁ COMUNICAÇÃO !
- 16.
- 17.
- 18.
- 20. O que falta? Mime-type Como atualizar o conteúdo ? E a comunicação cliente / servidor ? Posso ter dados mistos (online / offline) ? E o banco de dados ?
- 21.
- 22. Mime-Type No Apache, adicionarao .htaccess AddType text/cache-manifest .appcache! Em Java, criar um filtro (próximo slide) No IIS, Sei Lá !!!
- 24. Atualização de Conteúdo Oconteúdo é atualizado se a cache for invalidada Coisas que NÃO invalidam a AppCache: F5, Control F5, limpar a cache e limpar dados offline Como invalidar a cache ? Alterando o manifesto Page miss (404 ou 500) No Chrome: chrome://appcache-internals/
- 25. Esqueci de Colocarum Arquivo no Manifesto
- 26.
- 27. – Dalai Lama “Tudotem que estar no manifesto”
- 28. Atualização Controlada Colocar umnúmero de versão no manifesto ajuda ;) # Versao 1.0! CACHE MANIFEST! ! /index.html! /imagens/logo.png! /javascript/script.js! /css/estilo.css
- 29. Dados Mistos Seção Network Recursosque estão na rede Seção Fallback Baixa da rede, mas se estiver offline usa esse arquivo
- 30.
- 31. Seção Network ;) CACHEMANIFEST! ! /index.html! /imagens/logo.png! /javascript/script.js! /css/estilo.css! ! NETWORK:! *
- 32. Imagine o cenário… Seu aplicativo tem usuários Cada usuário tem sua fotografia Como seu sistema se comportará offline ? Você vai baixar todas as fotos ? Teria que atualizar o manifesto para cada nova foto
- 33.
- 34.
- 35. Solução Seção Fallback Forneça umafoto padrão para quando estiver offline
- 36.
- 37.
- 38. Comunicação Cliente /Servidor Javascript !!! REST JSON Inversão de arquitetura
- 39. Arquitetura Inversa Normalmente Lógica noservidor Cliente possui lógica apenas de apresentação Porém, precisamos de uma arquitetura inversa Por quê ?
- 40. JavaScript Aprendam ! Javascript !=Java Linguagem Funcional WEB => JavaScript node.js => Javascript server-side ! Vale a pena olhar …
- 41. E o Bancode Dados Web Storage Session Storage Local Storage temporário permanente (5 a 10mb por página)
- 42. PouchDB Dupla Dinâmica: PouchDB +CouchDB var db = new PouchDB('dbname'); ! db.put({ _id: 'dave@gmail.com', name: 'David', age: 67 }); ! db.changes().on('change', function() { console.log('Ch-Ch-Changes'); }); ! db.replicate.to('http://example.com/mydb');
- 43. Bibliotecas require.js - http://requirejs.org jquery- http://jquery.com handlebars - http://handlebarsjs.com
- 44.
- 45. jQuery Uniformização Busca de elementospor seletores CSS Suporte a plugins Ex: $(‘a’).hide( ); // Esconde todos os links $(‘h1’).css(‘color’, ‘red’); // Todos os títulos ficam vermelho
- 46. Handlebars Templating Engine (ex:JSP, ASP, PHP, …) Facilita a produção de texto (normalmente HTML) TEMPLATE DADOS String+ = Normalmente HTML
- 47.
- 48.
- 49. Problemas Muito inovador Falta deframeworks Falta de ferramentas
- 50. Vantagens Muito inovador Acelera muitoa velocidade do acesso Diminui bastante o processamento no servidor Aumenta as possibilidades de interação com o aplicativo
- 51.
- 55. docx gerado 100%em JavaScript ! DocxGenJS https://github.com/edi9999/docxtemplater
- 56.
- 57. Referências Sérgio Lopes -http://sergiolopes.org/palestra- appcache-html5-offline W3Schools - http://www.w3schools.com/html/ html5_app_cache.asp Zeno Rocha - http://zenorocha.com/html5-local- storage/