PWA: Aprenda a criar um com Rails em 15 minutos

PWA: Aprenda a criar um com Rails em 15 minutos

Será que todo sistema precisa de um aplicativo mobile? 🤔
Quantos aplicativos você baixou e utilizou apenas uma vez?

Muitos desenvolvedores acabam optando por criar um APP Mobile para seu produto porque querem que seus clientes tenham acesso fácil, rápido e até mesmo offline a ele, porém nem sempre é necessário fazer esse investimento de tempo e dinheiro para ter tudo isso.

Um caminho alternativo que vem ganhando força é transformar o seu site em um PWA (Progressive Web App) através da inclusão de alguns arquivos simples.

Fazendo isso, você deixará o seu site mais amigável ao mundo mobile, permitindo que o usuário instale-o (crie um ícone de fácil acesso na tela do mobile), use os recursos Offline e etc.

 

O que é PWA?

Explicando de forma sucinta, um pwa é uma aplicação web que entrega ao usuário uma experiência semelhante a de um app mobile.

Segundo definições do google um pwa deve ser:

  • Confiável – Carregar instantaneamente e  funcionar mesmo que o usuário esteja offline.
  • Rápido – Responder rapidamente a interações do usuário.
  • Envolvente – Ser como um app nativo, oferecendo uma experiência de usuário imersiva.

 

O que vamos criar (aprenda na prática)

Desenvolveremos uma aplicação que exibirá informações sobre o que você encontra no Onebitcode.

Nela será aplicado a metodologia pwa, possibilitando a instalação em dispositivos mobile e também a configuração de uma página de resposta para quando o usuário não estiver conectado a internet. Para isso vamos utilizar uma gem chamada ServiceWorker::Rails.

Obs: No final tem um GIF para você ver o resultado final do projeto, bora aprender na prática?

 

Ferramentas

  • • Ruby 2.5
  • • Rails 5.2
  • • Gem ServiceWorker::Rails
  • • Gem MaterializeCSS

 

 

Passo a Passo

Início

Neste tópico você criará e realizará as configurações iniciais do projeto.

1- Crie uma nova aplicação chamada pwa

2- Adicione as gems materializecss, jquery-rails e serviceworker-rails ao Gemfile do projeto.

A gem materializecss ajudará na estilização do projeto.

3- Instale as gems com o comando

4- Inclua o javascript das gems adicionadas substituindo o código de app/assets/javascripts/application.js por

5- Agora, inclua os estilos da gem materializecss no arquivo app/assets/application.css

 

Páginas

Após realizar as configurações iniciais, construa as páginas que estarão disponíveis na aplicação.

1- Crie o controller Pages com algumas actions

2-  Defina a raiz da aplicação adicionando a config/routes.rb

3- Substitua o código de app/views/layouts/application.html.erb  por

Você adicionou metatag viewport para que a responsividade da aplicação se adeque a tela de dispositivos menores como smartphones.

4- Altere o código de app/views/pages/home.html.erb para

Neste arquivo você listou alguns conteúdos presentes no Onebitcode.

 

Dando continuidade, é preciso adicionar a descrição de cada tipo de conteúdo.

5- Adicione a descrição do conteúdo Blog substituindo o código de app/views/pages/blog.html.erb por

6- Para adicionar a descrição do conteúdo Cursos altere o código de app/views/pages/courses.html.erb para

7- Insira a descrição do conteúdo Bootcamp substituindo o código de app/views/pages/bootcamp.html.erb por

 

SSL

Quando estamos criando PWAs é obrigatório o uso do certificado ssl, então vamos forçar o uso nas configurações do Rails.

1- Para exigir que todas requisições sejam feitas utilizando ssl vá até o arquivo config/environments/production.rb e adicione a seguinte instrução

Obs: Lembre-se de adicionar um certificado ssl ao ambiente de produção antes de realizar o deploy.

 

ServiceWorker::Rails

Agora você irá instalar a gem serviceworker-rails, que através de poucos passos permite transformar uma aplicação em um Progressive Web App.

1- Adicione a gem ao seu Gemfile

2- Instale a gem executando

A gem disponibiliza um generator para criar alguns arquivos  necessários.

3- Rode o generator

Ele criará os seguintes arquivos:

• config/initializers/serviceworker.rb – Para configurações da aplicação

• app/assets/javascripts/serviceworker.js.erb – Um serviceworker com algumas estratégias. Ele é capaz de interferir em requisições e exibir uma página específica quando o usuário não estiver conectado.

• app/assets/javascripts/serviceworker-companion.js – Arquivo que registra o serviceworker no navegador.

• app/assets/javascripts/manifest.json.erb – Arquivo que possui algumas meta informações da aplicação. O navegador utiliza elas para instalar sua aplicação em um dispositivo mobile.

• public/offline.html – A página html que será exibida quando o usuário não estiver conectado a rede.

 

Ajustando o pwa

Neste ponto você já tem uma aplicação pwa. Para finalizar faça os seguintes ajustes.

 

1- Adicione uma mensagem em português para a página offline indo até public/offline.html e alterando seu conteúdo para

Depois que você acessar a aplicação pela primeira vez, o conteúdo da página offline ficará salvo em cache.

Caso tente acessar alguma página sem conexão com a internet, a página offline.html será exibida

2- Agora você irá ajustar algumas informações no arquivo app/assets/javascript/manifest.json.erb

Altere o valor de “name”: para

E altere o valor de “short_name”: para

 

Instalando a Aplicação

Nesta última etapa você irá instalar e testar o resultado de sua aplicação.

1- Faça o download e instalação do ngrok através deste link.

Com ele você conseguirá acessar sua aplicação no mobile (basicamente ele permite que você acesse pela internet um servidor que esteja rodando local na sua máquina) 😁

2- Levante sua aplicação com o comando

3- Abra outra janela do terminal (vá até onde o ngrok foi instalado) e execute o ngrok com o comando

4- Sua aplicação pode ser acessada através de seu dispositivo mobile através da url https fornecida pelo ngrok

Veja como ficou a instalação e utilização da aplicação:

 

Conclusão

Neste artigo você conheceu alguns aspectos de uma grande novidade no mundo da programação, percebeu como é fácil transformar uma aplicação Ruby on Rails em um pwa e pôde observar como isso funciona na prática.

Encontre este projeto no Github:
https://github.com/Leoxxid/pwa

O que achou dessa nova metodologia?
Utilize os comentários para compartilhar sua opinião.

 



12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/




Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!


O OneBitCode traz conteúdos de qualidade, e em português, sobre programação com foco em Ruby on Rails e também JavaScript.
Além disso, aqui sempre levamos à você conteúdos valiosos sobre a carreira de programação, dicas sobre currículos, portfólios, perfil profissional, soft skills, enfim, tudo o que você precisa saber para continuar evoluindo como Programador(a)!

Fique por dentro de todos os conteúdos o/

 

Nossas redes sociais:

📹 • https://youtube.com/Onebitcode [Live todas as terças-feiras às 19h)
💻 • https://linkedin.com/company/onebitcode
🙂 • https://facebook.com/onebitcode
 📱  • https://instagram.com/one_bit_code
🐦 • https://twitter.com/onebitcode

 

Nossos cursos:

🥇 • Programador Full Stack Javascript em 8 Semanas
💎 • Curso Completo de Ruby
 ⚙  • Minicurso: API Rails 5 Completo
🐞 • Minicurso de Testes para Ruby on Rails com RSpec

 

Espero que curta nossos conteúdos e sempre que precisar de ajuda, fala com a gente!
E
stamos aqui para você 🙂

Bem-vindo à família OneBitCode o/

3 1 vote
Article Rating
janeiro 17, 2020
Subscribe
Notify of
guest
27 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Arthur
Arthur
1 ano atrás

Muito legal Leo!
É possível fazer uma app PWA acessando dados de SGBD de uma app em produção? Digo, um app Rails já em produção, e a app PWA acessando esses dados?

leoxxid
1 ano atrás
Reply to  Arthur

Sim, e sem a necessidade de mais nenhum passo. O que foi feito na publicação também pode ser aplicado para qualquer página dinâmica!!!

Rafael Mynssem Brum
1 ano atrás

Boa tarde.
Eu tive o seguinte erro: Tunnel 86a4ed0d.ngrok.io not found

Talvez seja devido a minha versão do Rails ? (5.1.6)

leoxxid
1 ano atrás

Rafael, isso acontece quando o endereço que você está tentando acessar não existe. Por favor, confira se você copiou o endereço que aparece depois do comando ngrok http 3000 de forma correta.

Jose Luiz Boscariol
Jose Luiz Boscariol
1 ano atrás

Parabéns e muito obrigado por compartilhar a novidade! Muito show.

Vagnerlandio Nunes
Vagnerlandio Nunes
1 ano atrás

Gostaria de saber se tem como usar um banco de dados SQlite offline. Algo como o usuário quando está offline ele pode continuar utilizando o app normalmente e quando ele voltar com uma conexão com a internet essas alterações são enviadas para o servidor. Tem como?

Lucas Maia Veríssimo
Lucas Maia Veríssimo
1 ano atrás

Nossa, brigadaço pelo tutorial, tava precisando mesmo!

Uma dúvida. Eu buildo meu front angular dentro da pasta public servida no rails. E aí a index.html do angular é onde fica o HEAD. Além de adaptar esse cabeçalho, posso seguir o restante do tutorial sem problemas? Ou só funciona se eu usar as controllers e views do rails?

Carlos Amorim
1 ano atrás

Bom dia Leonardo..estou tendo ese erro e não consigo consertar…

Mostrando /mnt/d/OneBitCode/pwa/app/views/layouts/application.html.erb onde a linha 6 foi criada:

undefined local variable or method `csp_meta_tag’ for #
Did you mean? csrf_meta_tag
csrf_meta_tags
Fonte extraída (em torno da linha 6 ):

Pwa – Onebitcode

Meu RAILS é o 5.1.6

Carlos Amorim
Carlos Amorim
1 ano atrás
Reply to  Carlos Amorim

Resolvido com o Rails 5.2

Lucas Henrique
1 ano atrás
Leonardo Scorza
1 ano atrás
Reply to  Lucas Henrique

E ai Lucas, beleza?
Pelo erro parece que você estava com outro servidor ruby ativo (ocupando a porta 3000), pare este outro projeto e suba novamente o do tutorial 🙂

Carlos Amorim
Carlos Amorim
1 ano atrás

Bom dia Léo tudo bem…tudo funcionou perfeitamente…..Obrigado.
Quero só tirar uma dúvida…..minhas outras apps que tenho posso aplicar essas instruções que acessaremos tbm e meus apps serão como se fosse app de celular?

Leonardo Scorza
1 ano atrás
Reply to  Carlos Amorim

E ai Carlos 🙂
Pode sim, valeu por acompanhar o tutorial.

Rodrigo Toledo
Rodrigo Toledo
1 ano atrás

Fala my friend, blz? Rapaz ainda estou com uma dúvida… como é que no final das contas isto vai virar um aplicativo onde pode ser “instalado” no celular da pessoa.

Testar por uma url em um navegador do celular ok, mas o que preciso é do aplicativo mesmo… seja rodando pelo navegador mas sem o aspecto do navegador se é que me entende

Rodrigo Toledo
Rodrigo Toledo
1 ano atrás

Como gerar essa aplicação pwa em uma aplicação instalável mesmo no celular? Não pode ficar rodando pelo navegador com a barra de navegação

Leonardo Scorza
1 ano atrás
Reply to  Rodrigo Toledo

E ai Rodrigo, beleza?
Dá uma olhada no Gif no final do post, lá você pode ver que no resultado final o APP é instalado no mobile, e não aparece nenhuma barra do browser ou qualquer coisa assim.
Inclusive, depois de instalado o APP (dependendo da configuração) ele pode até mesmo ser usado offline, então fica bem transparente.

Inclusive, essa semana liberamos um curso sobre isso: https://super.onebitcode.com/aula1

Grande abraço

Almir
1 ano atrás

Olá Léo.

Sou fã do seu blog. Já aprendi muito aqui.

Pela primeira vez não consegui produzir o resultado esperado. Estou com um erro no application.js, na linha
//= require activestorage

Parece que não encontra o o activestorage.js

O que pode estar errado? Como posso conseguir este arquivo.

Pode me ajudar?

Obrigado

Almir
1 ano atrás
Reply to  Almir

Obrigado. O problema foi resolvido com atualização do rails.

Leonardo Scorza
1 ano atrás
Reply to  Almir

E ai Almir, beleza?
Que bom que deu certo 🙂

Almir
1 ano atrás

Olá Léo, eu novamente (rs)

Sabe se há alguma incompatibilidade entre gem “serviceworker-rails” e gem “omniauth-facebook”.

Tentei utilizar as duas juntas e tenho a resposta do facebook: “The parameter app_id is required”

Eu testei a técnica do PWA e funcionou direitinho. Depois acrescentei o devise e ominiauth e este não funcionou.

Já chequei o código e está exatamente igual a outra aplicação teste do “omniauth-facebook”.

Você já fez algo com os dois juntos?

Obrigado.

Leonardo Scorza
1 ano atrás
Reply to  Almir

Opa e ai Almir, beleza?
Acredito que não exista ligação entre o erro e a configuração do PWA.
Verifique se você configurou corretamente as credenciais do facebook no seu APP 🙂

Valeu \o

Lucas
Lucas
1 ano atrás

Oi, funcionou aqui, as páginas carregam mais rápido depois da primeira vez.
mas a pagina offline criada não apareceu aqui. Nem o botão de baixar o icone para a área de trabalho =/

Tiago
1 ano atrás

No caso se eu preferir usar o boostrap no lugar do MaterializeCSS, eu simplesmente troco a gem ?

Eduardo
Eduardo
1 ano atrás

Excelente artigo, obrigado!

Almir
1 ano atrás

Como vai Leo,

Você tem algum conteúdo sobre “push notifications”?

Um abraço.

Leonardo Scorza
1 ano atrás
Reply to  Almir

E ai Almir, beleza?
Poxa ainda não, mas é uma boa sugestão o/

Feito com s2 por OneBitCode
27
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: