[PT] Resumo Atualmente há uma diversidade de dispositivos com sistemas operacionais diversos — é comum desenvolver a mesma aplicação em diferentes plataformas de forma nativa. Progressive Web App (PWA) apresenta um novo modelo de criação de aplicativos, visando a combinação de recursos oferecidos pelos navegadores modernos, com as vantagens de uso em dispositivos com diferentes tamanhos não importando o seu sistema operacional. Ao contrário dos tradicionais aplicativos, um Progressive Web App pode ser visto como uma evolução das aplicações híbridas entre os sites e um aplicativo móvel, ou seja, o PWA é utilizado para poupar que uma mesma aplicação seja criada para diferentes plataformas, garantindo a mesma funcionalidade independente do sistema operacional e do dispositivo. Com base nisso, foi desenvolvido a Consulta Tech, uma aplicação PWA voltada para a marcação de consultas na área de saúde que tem como foco principal resolver o problema de responsividade e a utilização de recursos do dispositivo independentemente do sistema operacional. [EN] Abstract Nowadays there are a variety of devices with several operating systems — it is common to develop the same application on different platforms in natively way. Progressive Web App (PWA) introduces a new application design model, aiming to combine the resources offered by modern browsers with the advantages of use in devices of different sizes no matter what your operating system is. On the opposite of traditional apps, a Progressive Web App can be seen as an evolution of hybrid applications between sites and a mobile app, that is, PWA is used to avoid that the same application be created in different platforms, assuring the same functionality in any operating system and device. Based on this, the Consulta Tech was developed, a PWA application intended to schedule consultations in health area which has as main proposal solve the problem of responsiveness and the use of device features no matter the operating system.

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