# Instalando Bootstrap e criando uma Home

###### tags: `tutorial` `rails` `bootstrap`

---

[ToC]

## :books: MVC

Antes de iniciar as alterações no Rails, temos que entender o que precisamos fazer o como as coisas funcionam. Internamente, o Rails utiliza o MVC para a organização das classes, modelos e arquivos. O MVC é um *design pattern* ou padrão de design, que significa ==Model-View-Controller==, que lida com três principais entidades:
- **Model:** O modelo é a entidade que **guarda as informações** que queremos, e possui algumas poucas e simples regras de negócio pertinentes apenas ao modelo.
- **View:** É responsável por apresentar as informações pro usuário.
- **Controller:** É a entidade que **combina o modelo com a *view***. Faz as buscas nos bancos de dados, processa as informações, aplica regras de negócio e envia para o *front*.

:::info
:bulb: **Nota:** Isso é só um breve resumo do modelo. Sugiro pesquisar melhor quais são os ideias do MVC.
:::

## :memo: Instalando o Bootstrap

O [Bootstrap](https://getbootstrap.com/) é uma ferramenta que facilita o desenvolvimento de sites responsivos, tendo uma abordagem *mobile first*. Ele pode ser instalado como uma gema ou como uma biblioteca do JS. Como as novas versões do Rails utilizam o `webpacker` e ja precisam do `yarn` por padrão, nõs iremos aproveitar isso e instalar como uma biblioteca JS.

Antes de mais nada, digite no terminal:

yarn add bootstrap jquery

O Yarn é um utilitário que auxilia na instalação de bibliotecas JS. `add` quer dizer que vamos adicionar a(s) biblioteca(s) e `bootstrap` e `jquery` são as bibliotecas que precisamos.

Agora temos que ativá-las. Para isso, abra o arquivo `config/webpack/environment.js` e antes da linha `
module.exports = environment` adicione o seguinte:

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
}))

Então entre em `app/javascript/packs/application.js` e adicione depois do ultimo `require`:

require("jquery")
require("bootstrap")

E por fim, entre em `app/assets/stylesheets/application.css` e antes da linha ` *= require_tree .` adicione a seguinte linha:

 *= require bootstrap

Também podemos importar os ícone que o Bootstrap fornece e imports do JQueryUI (que dão alguns recursos a mais para mexer com o front). Para isso, basta entrar em `app/views/layouts/application.html.erb` e **depois** de `javascript_pack_tag` podemos adicionar isso:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

:::success
:tada: **Sucesso:** Agora que temos o Bootstrap instalado, vamos criar nossa homepage.
:::

## Criando a Home Page

Vamos criar o nosso controlador da Home. Felizmente o Rails já trás várias utilidades para facilitar nossa vida, e uma delas é o `rails generate`. Ele serve para gerar arquivos a partir de um *template*. No nosso caso, queremos gerar um controlador. Esse controlador vai ser o nosso controlador da Home, e só vai ter um método inicialmente, o `index`. Então vamos criá-lo:

rails generate controller Home index

Essa linha usa o utilitário `rails generate` para criar um `controller` chamado `Home` com o(s) método(s) `index`.

:::warning
**Nota:** Caso aconteca um erro contendo **`Please run yarn install --check-files to update`**, basta executar isso:

sudo chown ${USER}:${USER} -R .
yarn install

e então é so re-executar
:::

Esse comando vai gerar (entre outros arquivos) o nosso controller em `app/controller/home.rb` e a view `app/view/home/index.html.erb`.

Para que a gente possa chegar na view, é necessário configurar as rotas. Então vamos entrar em `config/routes.rb` e substituir `get 'home/index'` por:

root 'home#index', as: :home

Essa linha especifica a `root` ou a página raiz da página. Ela é a primeira página que aparece quando acessamos a URL do nosso site. O segundo argumento tem um formato especial. Nele temos o controlador e o método a ser executado, dividido pelo caractére #. Nesse exemplo, indicamos o controlador `Home` e o método `index`. O `as: :home` no final indica um nome que damos à rota para usarmos os métodos de rota do Rails.

Podemos subir nosso app agora, e se entrarmos em [http://localhost:3000](http://localhost:3000/) veremos algo semelhante a isso:
<img src="https://i.imgur.com/qCLSzMu.png" align="center" />

:::info
:memo: **Lembrete:** Para levantar o app, basta digitar no terminal **`docker compose up --build`**.
:::

Conseguimos alguma coisa, mas poderia ser um pouco melhor :smile:
Então vamos começar alterando a nossa *view* para isso:

<div class="card mx-auto" style="width: 40%; min-width: 200px; margin-top: 10%">
  <div class="card-header">
    <i class="bi-box-arrow-in-right"></i> Login
  </div>
  <div class="card-body">
    <h5 class="card-title">Bem Vindo!</h5>
    <p class="card-text">Seja bem vindo ao meu site :D</p>
    <p class="card-text">Por favor, faça login ou se cadastre:</p>
    <div class="btn-group d-flex" role="group">
      <%= link_to 'Entrar', '', class: 'btn btn-primary', method: 'get' %>
      <%= link_to 'Criar conta', '', class: 'btn btn-secondary', method: 'get' %>
    </div>
  </div>
</div>

Se tudo der certo, você deve se deparar com isso:

:::info
:bulb: **Nota:** Vale a pena ver a **[documentação do Bootstrap](https://getbootstrap.com/docs/5.0/components/)** para entender o que estamos fazendo assim como quais componentes ele nos fornece!
:::

Mas ainda falta coisas na página e esses botões não fazem nada ainda.

Sobre a página, podemos colocar uma [**NavBar**](https://getbootstrap.com/docs/5.0/components/navbar/)!

### Navbar

A Navbar é um componente que fica no topo da página e fornece algumas ferramentas. Idealmente, ela é um objeto que aparece em todas as páginas e nos **ajuda a navegar pelo site**, com links para as áreas mais importantes.

Como o objetivo é mostrar a Navbar em todas as páginas, queremos ao máximo não precisar duplicar o código dela. Por isso, iremos altera o arquivo `app/views/layouts/application.html.erb`.

O funcionamento desse arquivo é um pouco diferente dos outros arquivos de *view*. Toda vez que o Rails vai apresentar uma página, ele é carregado. No meio do código, tem uma linha que é: `<%= yield %>`. Essa `yield` espera que os arquivos específicos de cada rota sejam carregados e retornem algum resultado, e então, o `yield` é substituído pelo retorno.

Por isso, se precisamos fazer um código que apareça em todas as telas do nosso app, esse `application.html.erb` é um bom começo. E é o que vamos fazer.

Antes de editar o `application.html.erb`, vamos criar um template da navbar, para que o código dela esteja separado e futuramente seja fácil de editá-lo.
Vamos criar o arquivo `app/views/layouts/_navbar.html.erb` (note o `_`, ele é importante!). Dentro desse arquivo, insira:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <%= link_to 'PastaDoProjeto', home_path, class: 'navbar-brand' %>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbar">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <%= link_to 'Home', home_path, class: 'nav-link active' %>
      </li>
    </ul>
  </div>
</nav>

:::warning
:memo: **Lembrete:** Não se esqueça de mudar o código para conter o nome do seu App, assim como adicionar mais coisas que deseja.
:::
:::info
:bulb: **Nota:** Perceba que na linha 11 usamos o **`home_path`** no **`link_to`**, que foi criado com aquele **`as: :home`** que adicionamos antes.
:::

E agora no `application.html.erb` iremos colocar o seguinte código antes da linha do `yield`:

<%= render 'layouts/navbar' %>

E quando recarregarmos a página, veremos isso:


:::success
:rocket: **Próximo passo:** Siga o link ➜ [Fazendo Login com Devise](https://hackmd.io/RcwgP49yQlOV7sOdAaX2UQ)
:::