Ruby on Rails Fullstack

User logic com Devise

Devise

Devise é uma gem responsável por cuidar de todo o modelo de usuário. Isso quer dizer que:

  • Emails de redefinição de senha
  • Senhas criptografadas em BD
  • "Lembre de mim"
  • Login / Logout

São algumas das coisas tratadas por Devise.

Devise

Instalação

#Gemfile
gem 'devise'
# Terminal
bundle install
rails generate devise:install

Devise

Criação de Usuário

# Terminal
# repare que não é 'generate model', mas 'generate devise'
rails g devise User atributo1:tipo1 atributo2:tipo2
rails db:migrate

Não se preocupe em gerar campos de email e senha, o devise gera automaticamente. Dê uma olhada em db/migrate/#####_devise_create_users.rb

Devise

Permitindo parâmetros customizados

É necessário realizar uma configuração especial para permitir (strong params) atributos do User que não foram criados pelo próprio Devise

Devise

Permitindo parâmetros customizados

class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  def configure_permitted_parameters
    # For additional fields in app/views/devise/registrations/new.html.erb
    devise_parameter_sanitizer.permit(:sign_up, keys: [:first_name, :last_name])

    # For additional in app/views/devise/registrations/edit.html.erb
    devise_parameter_sanitizer.permit(:account_update, keys: [:username])
  end
end

Copie e cole o código abaixo em app/controllers/application_controller.rb

Ajuste os parâmetros que gostaria que o usuário cadastrasse (new) ou editasse (edit)

Pronto!

Agora só precisamos arrumar o front end

Devise front-end

Temos novas rotas com o devise!

Vamos nos preocupar com new_user_session_path (login) e destroy_user_session_path (logout)

Devise front-end

Faremos uma navbar que terá o link para login (quando o usuário não estiver logado) e o link para logout (quando o usuário estiver logado).

 

Bônus! Para melhorar nosso estilo de forma rápida, utilizaremos bootstrap! Para isso, siga as instruções de instalação do bootstrap aqui

Devise front-end

Crie uma homepage. Isso é necessário para o bom funcionamento de Devise, como apontado pela própria gem após sua instalação.

# config/routes.rb

# ...
  
  root to: 'controller#action'

# ...

Devise front-end

Desenhe a navbar. Ela pode ser do jeito que preferir. Um exemplo segue abaixo:

<div class="border-bottom">
  <div class="container p-2 d-flex justify-content-between 
   align-items-center">
    <span>Hello World</span>
    <%= link_to 'Login', new_user_session_path, class: 
     'btn btn-primary' %>
    <%= link_to 'Logout', destroy_user_session_path, 
     method: :delete, class: 'btn btn-danger' %>
  </div>
</div>

Devise front-end

O botão de login deve aparecer somente quando não houver um usuário logado, caso contrário é o botão de logout que deve aparecer. Felizemente, Devise nos oferece um método para saber se, naquele momento, o usuário está logado ou não:

user_signed_in?

Devise front-end

<div class="border-bottom">
  <div class="container p-2 d-flex justify-content-between 
   align-items-center">
    <span>Hello World</span>
    <% if !user_signed_in? %>
      <%= link_to 'Login', new_user_session_path, class: 
       'btn btn-primary' %>
    <% else %>
      <%= link_to 'Logout', destroy_user_session_path, 
       method: :delete, class: 'btn btn-danger' %>
    <% end %>
  </div>
</div>

Está feito!

Todas as outras rotas já estão devidamente configuradas. Caso queira ajustar seus designs, basta executar no terminal

rails g devise:views

Os arquivos de view de cada página serão mostrados na pasta para que possa alterá-los

Informações do usuário logado

Também podemos acessar as informações do usuário logado com outra ferramenta fornecida pelo Devise:

current_user

Esse método nos retorna o User corrente logado na máquina.

Informações do usuário logado

<div class="border-bottom">
  <div class="container p-2 d-flex justify-content-between 
   align-items-center">
    <span>Hello World</span>
    <% if !user_signed_in? %>
      <%= link_to 'Login', new_user_session_path, class: 
       'btn btn-primary' %>
    <% else %>
      <div class="d-flex align-items-center">
        <%= current_user.email %>
      
        <%= link_to 'Logout', destroy_user_session_path, 
         method: :delete, class: 'ml-2 btn btn-danger' %>
      </div>
    <% end %>
  </div>
</div>

E se quisermos que a navbar apareça em mais de uma página??

Partials

Pedaços de views presentes em mais de uma página

Caso tenhamos componentes idênticos em várias páginas diferentes (navbars e footers, por exemplo), podemos criar um único arquivo para cada componente e reutilizá-los nas páginas que os queremos presentes. A esses arquivos damos o nome de partials

Partials

Criação de uma partial

Uma partial genérica, presente em views de vários controllers diferentes, é comumente armazenada numa nova pasta, views/shared. Caso a partial seja utilizada em várias views de um único controller, a partial pode ser criada na pasta de views daquele controller.

Todo nome de partial começa com '_'

Partials

Criação de uma partial

Vamos criar a partial para navbar. Sendo bastante genérica, iremos armazená-la na pasta shared/

<!-- app/views/shared/_navbar.html.erb -->
<div class="border-bottom">
  <div class="container p-2 d-flex justify-content-between 
   align-items-center">
    <span>Hello World</span>
    <% if !user_signed_in? %>
      <%= link_to 'Login', new_user_session_path, class: 
       'btn btn-primary' %>
    <% else %>
      <%= link_to 'Logout', destroy_user_session_path, 
       method: :delete, class: 'btn btn-danger' %>
    <% end %>
  </div>
</div>

Partials

Utilização de uma partial

Para utilizá-la em qualquer página, basta utilizar

<%= render 'shared/nabvar' %>

Na view onde gostaria. Essa linha deve ser implementada exatamente onde você implementaria o código presente na partial

Perceba que o '_' não está presente!!!

Partials

Outras partial importante

Talvez tenha reparado, nas instruções após a instalação do Devise, que o mesmo requer "flash messages" no layout. Ao invés de cumprir tal instrução, crie a partial do slide a seguir

Partials

Outras partial importante

<!-- app/views/shared/_flashes.html.erb -->
<% if notice %>
  <div class="alert alert-info alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" 
     aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <%= notice %>
  </div>
<% end %>
<% if alert %>
  <div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" 
     aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <%= alert %>
  </div>
<% end %>

Partials

Outras partial importante

Em seguida, renderize-o em app/views/layout/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>

  <body>
    <%= render 'shared/flashes' %>
    <%= yield %>
  </body>
</html>

Heroku

Heroku

Instalação

# OS X
brew install heroku/brew/heroku
# Linux
wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh

Heroku

Depois de criar sua conta no site, faça login em seu terminal com o comando

heroku login

Heroku

Heroku funciona da mesma forma que Github!

  • Dentro de seu projeto, crie um novo "repositório" no heroku
  • Quando seu projeto estiver pronto para ir a público, envie-o ao repositório criado com git push

Heroku

heroku create app-name

Para criar um novo repositório pelo terminal (e conectá-lo ao projeto):

Para enviar seu projeto local ao repositório:

git push heroku master

Heroku

Atenção!

Heroku não suporta sqlite3! Para enviar seu projeto, o mesmo deve utilizar algum outro SGBD, como Postgres.

rails new app_name --database=postgresql

Caso já tenha um projeto feito com sqlite e deseja alterar o SGBD, veja aqui como fazer isso.

Made with Slides.com