O documento discute a utilização de Progressive Web Apps (PWA) em um cenário mobile, apresentando suas características e comparando com outras abordagens de desenvolvimento, como aplicativos nativos e híbridos. Ele também destaca os objetivos de implementar uma aplicação para a área de saúde, os métodos de desenvolvimento e os resultados alcançados. Conclui se a PWA é uma abordagem viável e em quais contextos deve ser utilizada.

1. Quando utilizar progressive
web apps?

2. 2
Abraão Honório
Engenheiro de software na Social Miner 💛, palestrante
técnico, líder de comunidade, entusiasta de código aberto
e formado em Engenharia de Computação pela
Universidade Federal da Paraíba (UFPB)
@AbraaoHonorio @AbraaoHonorio

3. 1. Introdução
2. Conceitos Gerais
1ª PARTE

4. 1ª PARTE

5. Escopo da apresentação:
1ª Parte:
1 - Introdução
2 - Conceitos gerais
3 - Metodologia
5
2ª Parte:
4 - Resultados
5 - Conclusões
6 - Trabalhos
futuros

6. 1ª PARTE
1. Introdução

7. Introdução
▹ Cenário mobile no mundo
7

8. Cenário mobile no mundo
8

9. Introdução
▹ Cenário mobile no mundo
▹ Mobile Web x Apps 9

10. Cenário mobile no mundo
10

11. Introdução
▹ Cenário mobile no mundo
▹ Mobile Web x Apps
▹ Desmistificando o uso do celular
11

12. 12
Fonte: Ibope

13. “A pesquisa do Ibope
também revela que 60%
dos brasileiros possuem
entre 5 e 20 aplicativos
instalados no celular. No
entanto, 49% disseram
que usam menos de
cinco desses aplicativos
por dia
13

14. A maioria dos usuários de
smartphones baixam zero
apps por mês
14

15. Objetivo
▹ Objetivo geral
▹ Objetivos específicos
￭ Implementar uma aplicação
móvel de qualidade para a
marcação de consultas na área
de saúde
￭ Retratar situações onde
abordagem do PWA será bem
utilizado e onde a sua
abordagem terá pouco a
contribuir
15

16. 1ª PARTE
1. Introdução
2. Conceitos Gerais

17. Conceito Gerais
▹ Desenvolvimento Nativo
17

18. Want big impact?
USE BIG IMAGE.
18

19. Existem mais de
1.200 fabricantes
Android distintos
19

20. Conceito Gerais
▹ Desenvolvimento Nativo
▹ IOS
￭ Desenvolvimento IOS
▹ Android
￭ Desenvolvimento Android
▹ Progressive Web Apps
20

21. Aplicação web
progressiva(PWA) ?
21
Etimologia da palavra
Progressive web Apps
Progressiva
02
APP
03
01
WEB

22. “ Vocês já tem tudo o que precisam se
querem saber como desenvolver
aplicativos para o iPhone hoje: basta usar
os padrões modernos da web. ”
22

23. 1ª PARTE
1. Introdução
2. Conceitos Gerais
3. Metodologia

24. Metodologia
￭ Experiência do Usuário
￭ Arquitetura
￭ Ionic(exemplo)
⬝ Angular
￭ Deploy 24

25. Experiência do usuário
25
Confiável Rápido Envolvente

26. Want big impact?
USE BIG IMAGE.
26

27. Want big impact?
USE BIG IMAGE.
27

28. Acesso rápido
28
Fonte: https://porta23.blogosfera.uol.com.br/2017/05/31/clientes-abandonam-marca-que-nao-atender-rapido-no-celular-diz-google/

29. Envolvente
29
❏ Download do APP
❏ Full-sceren
❏ Orientação
❏ Notificações
❏ Push Notification
❏ Acesso aos sensores

30. Metodologia
￭ Experiência do Usuário
￭ Ionic
⬝ Angular
￭ Arquitetura
30

31. Escolhas Tecnologicas
31

32. Metodologia
￭ Experiência do Usuário
￭ Ionic
⬝ Angular
￭ Arquitetura
32

33. 2ª
PARTE
1. Resultados

34. 34
Comparativo
Funcionalidades PWA Híbrida Nativa
Instalável SIM SIM SIM
Offline SIM SIM SIM
Testável antes da
instalação
SIM NÃO NÃO
Adicionar nos
marketplace(app’s
store)
SIM SIM SIM
Multiplataforma LIMITADO SIM NÃO
Acesso AO hardware LIMITADO SIM NÃO
Sincronização EM
background
SIM SIM SIM

35. 35
Tela de login

36. 36
Tela inicial
Figura: 1

37. 37
Tela inicial

38. 38
Tela cadastro de consulta

39. 39
Tela cadastro de consulta

40. 40
Tela cadastro de consulta

41. 41
Notificação

42. 42
Notificação

43. 43
Gráficos

44. 44
Baixando o Aplicativo

45. 45
Baixando o Aplicativo

46. 46
Push Notification

47. 47
Mas seu APP é PWA?

48. 2ª
PARTE1. Resultados
2. Conclusão
3. Trabalhos futuro

49. Conslusão
￭ PWA é abordagem viável?
￭ Em que contexto a abordagem
PWA deve ser usada?
49

50. 50
Referências