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/




Você é novo por aqui?

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 outras tecnologias como Angular, Ionic, React, desenvolvimento de Chatbots e etc.

Se você deseja aprender mais, de uma forma natural e dentro de uma comunidade ativa, visite nosso Facebook e nosso Twitter, veja os screencasts e talks no Youtube, alguns acontecimentos no Instagram, ouça os Podcasts e faça parte de nossa Newsletter.

Além disso, também estamos com alguns e-Books muito interessantes para quem deseja se aprimorar como programador e também como freelancer (os e-Books são gratuitos!):

Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente! Seja por Facebook ou e-mail, estamos aqui para você 🙂

Bem-vindo à família OneBitCode \o/

outubro 11, 2018

22
Deixe um comentário

avatar
12 Comment threads
10 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
11 Comment authors
Leonardo ScorzaAlmirRodrigo ToledoCarlos AmorimLucas Henrique Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Arthur
Visitante
Arthur

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
Membro
leoxxid

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
Membro
Rafael Mynssem Brum

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
Membro
leoxxid

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
Visitante
Jose Luiz Boscariol

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

Vagnerlandio Nunes
Visitante
Vagnerlandio Nunes

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?

leoxxid
Membro
leoxxid
Lucas Maia Veríssimo
Visitante
Lucas Maia Veríssimo

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
Membro
Carlos Amorim

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
Visitante
Carlos Amorim

Resolvido com o Rails 5.2

Lucas Henrique
Membro
Lucas Henrique
Leonardo Scorza

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
Visitante
Carlos Amorim

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

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

Rodrigo Toledo
Visitante
Rodrigo Toledo

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
Visitante
Rodrigo Toledo

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

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
Membro
Almir

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
Membro
Almir

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

Leonardo Scorza

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

Almir
Membro
Almir

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

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

Feito com s2 por OneBitCode
%d blogueiros gostam disto: