bike de boa

O primeiro PWA para ciclistas

Cristiano Medeiros Dalbem

Quem sou eu

Cristiano Medeiros Dalbem

Web Developer・UX Designer

​

__

​

Ciência da Computação

UFRGS・Porto Alegre

Software & Systems Engineering

Politécnica de Grenoble・França

Milhares de horas de Google, YouTube, StackOverflow, Medium, livros, ...

​

Cristiano Dalbem

Eduardo Vernier

Hannah Kny

Denner Machado

Matheus Schuh

Francisco Cenzi

Henrique Geremia

Heitor Latosinski

Motivação

Desenvolvimento e PWA

Design

Motivação

Desenvolvimento e PWA

Design

É preciso que as pessoas exijam as coisas certas.

​

Se você, por exemplo, perguntar a uma criança o que ela quer de natal, ela vai responder uma lista de coisas que já conhece. Uma criança nunca pediria algo de que nunca ouviu falar. O mesmo vale para as demandas das pessoas em relação às cidades.

​

É fundamental que haja informação sobre como uma cidade pode ser melhor para que a sociedade exija as coisas certas”

​

— Jan Gehl

Arquiteto

"

https://drive.google.com/open?id=1Qs65ZIolZr0WqLvT0c3FRHYwwQ4&usp=sharing

http://www.lume.ufrgs.br/handle/10183/67513

Pedala SP

UseBike

BikeIT

MubMaps

Bike POA

biciponto

Motivação

Desenvolvimento e PWA

Design

60% dos apps no Google Play nunca foram baixados.

60% dos apps no Google Play nunca foram baixados.

Na média um usuário baixa menos de 3 apps por mês.

​

60% dos apps no Google Play nunca foram baixados.

Na média um usuário baixa menos de 3 apps por mês.

Usuários mobile passam a maior parte do tempo em apps, mas 94% da receita vem de 1% dos fornecedores, e usuários gastam 80% do seu tempo em apenas 5 apps.

60% dos apps no Google Play nunca foram baixados.

Na média um usuário baixa menos de 3 apps por mês.

Usuários mobile passam a maior parte do tempo em apps, mas 94% da receita vem de 1% dos fornecedores, e usuários gastam 80% do seu tempo em apenas 5 apps.

80% dos usuários que baixam um app falham em se tornar usuários ativos.

"PWAs são web apps que usam as mais modernas tecnologias web.

​

São tecnicamente páginas da web normais, mas podem parecer e se comportar como aplicativos mobile.

​

Esse novo conceito tenta combinar as funcionalidades oferecidas pelos navegadores modernos com os benefícios das experiências mobile."

Confiável Rápido Engajante

https://developers.google.com/web/progressive-web-apps/

https://medium.com/dev-channel/progressive-web-app-libraries-in-production-b52cad37d34

Vantagens do PWA

Ícone na tela inicial

Vantagens do PWA

Ícone na tela inicial

Aplicativo em tela cheia

Vantagens do PWA

Ícone na tela inicial

Aplicativo em tela cheia

Menos atrito na instalação

Vantagens do PWA

Ícone na tela inicial

Aplicativo em tela cheia

Menos atrito na instalação

Experiência offline e controle total da cache

Vantagens do PWA

Ícone na tela inicial

Aplicativo em tela cheia

Menos atrito na instalação

Experiência offline e controle total da cache

Atualizações são automáticas - assim como na web ;)

Vantagens do PWA

Ícone na tela inicial

Aplicativo em tela cheia

Menos atrito na instalação

Experiência offline e controle total da cache

Atualizações são automáticas - assim como na web ;)

"First class citizen"

Vantagens do PWA

Ícone na tela inicial

Aplicativo em tela cheia

Menos atrito na instalação

Experiência offline e controle total da cache

Atualizações são automáticas - assim como na web ;)

"First class citizen"

Push Notifications

Vantagens do PWA

Ícone na tela inicial

Aplicativo em tela cheia

Menos atrito na instalação

Experiência offline e controle total da cache

Atualizações são automáticas - assim como na web ;)

"First class citizen"

Push Notifications

Background Sync (em breve)

Vantagens do PWA

Ícone na tela inicial

Aplicativo em tela cheia

Menos atrito na instalação

Experiência offline e controle total da cache

Atualizações são automáticas - assim como na web ;)

"First class citizen"

Push Notifications

Background Sync (em breve)

Web Share (em breve)

​

Vantagens do PWA

Ícone na tela inicial

Aplicativo em tela cheia

Menos atrito na instalação

Experiência offline e controle total da cache

Atualizações são automáticas - assim como na web ;)

"First class citizen"

Push Notifications

Background Sync (em breve)

Web Share (em breve)

Image Capture (em breve)

Vantagens do PWA

Ícone na tela inicial

Aplicativo em tela cheia

Instalação rápida e fácil não precisa ir até a Play Store, baixar 50mb, ...

Experiência offline e controle total da cache

Atualizações automáticas como tudo na web ;)

First class citizen site é tratado pelo Sist. Oper. como um app instalado normal

Push Notifications

Background Sync caiu a Internet? Sem problema, sincronizamos os dados quando ela voltar

Web Share

Image Capture

https://developers.google.com/web/fundamentals/architecture/app-shell

shell da aplicação conteúdo

https://caniuse.com/#search=service%20worker

https://caniuse.com/#search=service%20worker

https://jakearchibald.github.io/isserviceworkerready/

https://www.youtube.com/watch?v=JmC0xkCMFCE

​

https://www.youtube.com/watch?v=7vUs5yOuv-o

https://www.youtube.com/watch?v=CPP9ew4Co0M

https://www.youtube.com/watch?v=m-sCdS0sQO8

https://www.youtube.com/watch?v=JmC0xkCMFCE

https://www.youtube.com/watch?v=aCMbSyngXB4

https://medium.com/javascript-scene/native-apps-are-doomed-ac397148a2c0

FRONT-END・WEB

Node・Express

HTML・SASS・Javascript (ES6)

Gulp・Bower

Google Maps API・sw-precache・Handlebars・History.js・Velocity.js・JQuery・Bootstrap・sweetalert2

BACK-END・API

Node・Express

PostgreSQL + SequelizeJS

Amazon S3

Mocha・node-jwt-simple・acl-express・nodemon

​

ANDROID

Google Data Binding Lib

Realm

Retrofit

Glide

Google Maps API

Motivação

Desenvolvimento e PWA

Design

Uma interface de usuário é como uma piada. Se você tem que explicar, ela não é tão boa.

​

​

– Martin Leblanc

Iconfinder CEO

"

Carregamento

Como instalar

/bikedeboa

O bike de boa terá atingido seu propósito quando ele não for mais necessário."

"

/bikedeboa

/bikedeboaapp

/cmdalbem/bikedeboa

/dennerevaldt/bikedeboa-api

www.bikedeboa.com.br