Base de Conhecimento

Introdução

Se você estiver desenvolvendo um aplicativo Ruby on Rails , pode estar interessado em adicionar estilos ao seu projeto para facilitar o envolvimento do usuário. Uma maneira de fazer isso é adicionar o Bootstrap , uma estrutura HTML, CSS e JavaScript projetada para simplificar o processo de tornar os projetos da Web responsivos e prontos para dispositivos móveis. Ao implementar o Bootstrap em um projeto Rails, você pode integrar suas convenções e componentes de layout ao seu aplicativo para tornar as interações do usuário com seu site mais atraentes.

Neste tutorial, você adicionará o Bootstrap a um projeto existente do Rails que usa o empacotador webpack para servir seus recursos JavaScript e CSS. O objetivo será criar um site visualmente atraente com o qual os usuários possam interagir para compartilhar informações sobre tubarões:

Pré-requisitos

Para seguir este tutorial, você precisará de:

• Uma máquina local ou servidor de desenvolvimento executando o Ubuntu 18.04. Sua máquina de desenvolvimento deve ter um usuário não raiz com privilégios administrativos e um firewall configurado com ufw. Para obter instruções sobre como configurar isso, consulte o tutorial Configuração inicial do servidor com o Ubuntu 18.04 .
• Node.js e npm instalados em sua máquina local ou servidor de desenvolvimento. Este tutorial usa Node.js versão 10.16.3 e versão npm 6.9.0 . Para obter orientação sobre a instalação do Node.js e do npm no Ubuntu 18.04, siga as instruções na seção "Instalando usando um PPA" em Como instalar o Node.js no Ubuntu 18.04 .
• Ruby, rbenv e Rails instalados em sua máquina local ou servidor de desenvolvimento, seguindo as etapas 1 a 4 em Como instalar o Ruby on Rails com rbenv no Ubuntu 18.04 . Este tutorial usa Ruby 2.5.1 , rbenv 1.1.2 e Rails 5.2.3 .
• SQLite instalado, seguindo a Etapa 1 de Como criar um aplicativo Ruby on Rails . Este tutorial usa o SQLite 3 3.22.0 .

Etapa 1 - Clonando o projeto e instalando dependências

Nosso primeiro passo será clonar o repositório de estímulos de trilhos da conta do DigitalOcean Community GitHub . Este repositório inclui o código da instalação descrita em Como adicionar estímulo a um aplicativo Ruby on Rails , que descreve como adicionar Stimulus.js a um projeto existente do Rails 5.

Clone o repositório em um diretório chamado rails-bootstrap:

• git clone https://github.com/do-community/rails-stimulus.git rails-bootstrap

Navegue para o rails-bootstrapdiretório:

• cd rails-bootstrap

Para trabalhar com o código do projeto, você primeiro precisa instalar as dependências do projeto, que estão listadas no Gemfile. Use o seguinte comando para instalar as gemas necessárias:

• bundle install

Em seguida, você instalará suas dependências do Yarn . Como este projeto do Rails 5 foi modificado para atender aos ativos com o webpack, suas dependências JavaScript agora são gerenciadas pelo Yarn. Isso significa que é necessário instalar e verificar as dependências listadas no package.jsonarquivo do projeto .

Execute o seguinte comando para instalar essas dependências:

• yarn install --check-files

O --check-filessinalizador verifica se todos os arquivos já instalados no node_modulesdiretório não foram removidos.

Em seguida, execute as migrações do banco de dados:

• rails db:migrate

Após a conclusão das migrações, você pode testar o aplicativo para garantir que ele esteja funcionando conforme o esperado. Inicie seu servidor com o seguinte comando se estiver trabalhando localmente:

• rails s

Se você estiver trabalhando em um servidor de desenvolvimento, poderá iniciar o aplicativo com:

• rails s --binding=your_server_ip

Navegue para localhost:3000ou . Você verá a seguinte página de destino:http://your_server_ip:3000

Para criar um novo tubarão, clique no link Novo tubarão na parte inferior da página, que o levará ao sharks/newpercurso. Você será solicitado a fornecer um nome de usuário ( sammy ) e senha ( shark ), graças às configurações de autenticação do projeto . A newvisualização é assim:

Para verificar se o aplicativo está funcionando, podemos adicionar algumas informações de demonstração. Insira "Great White" no campo Name e "Scary" no campo Facts :

Clique no botão Criar tubarão para criar o tubarão:

Agora você instalou as dependências necessárias para o seu projeto e testou sua funcionalidade. Em seguida, você pode fazer algumas alterações no aplicativo Rails para que os usuários encontrem uma página de destino principal antes de navegar para o próprio aplicativo de informações do tubarão.

Etapa 2 - Adicionando uma página de destino principal e um controlador

O aplicativo atual define a visualização raiz para a página principal de informações do tubarão, a indexvisualização do sharkscontrolador. Embora isso funcione para levar os usuários ao aplicativo principal, pode ser menos desejável se decidirmos desenvolver o aplicativo no futuro e adicionar outros recursos e funcionalidades. Podemos reorganizar o aplicativo para que a visualização raiz seja definida como um homecontrolador, o que incluirá uma indexvisualização. A partir daí, podemos vincular a outras partes do aplicativo.

Para criar o homecontrolador, você pode usar o rails generatecomando com o controllergerador. Nesse caso, especificaremos que queremos uma indexvisualização para nossa página de destino principal:

• rails generate controller home index

Com o controlador criado, você precisará modificar a visualização raiz no config/routes.rbarquivo do projeto - o arquivo que especifica as declarações de rota do aplicativo -, pois a visualização raiz está atualmente definida para a indexvisualização tubarões .

Abra o arquivo:

• nano config/routes.rb

Encontre a seguinte linha:

. . . 
root 'sharks#index'
. . .

Altere para o seguinte:

. . . 
root 'home#index'
. . .

Isso definirá a visão homedo controlador indexcomo a raiz do aplicativo, possibilitando ramificar para outras partes do aplicativo a partir daí.

Salve e feche o arquivo quando terminar de editar.

Com essas alterações, você estará pronto para adicionar o Bootstrap ao aplicativo.

Etapa 3 - Instalando o Bootstrap e adicionando estilos personalizados

Nesta etapa, você adicionará o Bootstrap ao seu projeto, juntamente com as bibliotecas de ferramentas necessárias para funcionar corretamente. Isso envolverá a importação de bibliotecas e plug-ins no ponto de entrada do webpack do aplicativo e nos arquivos de ambiente. Também envolverá a criação de uma folha de estilos personalizada no app/javascriptdiretório do seu aplicativo , o diretório em que os ativos JavaScript do projeto residem.

Primeiro, use yarnpara instalar o Bootstrap e suas dependências necessárias:

• yarn add bootstrap jquery popper.js

Muitos componentes do Bootstrap requerem JQuery e Popper.js , além dos plugins personalizados do Bootstrap, portanto, este comando garantirá que você tenha as bibliotecas necessárias.

Em seguida, abra o arquivo de configuração principal do webpack, config/webpack/environment.jscom nanoou seu editor favorito:

• nano config/webpack/environment.js

Dentro do arquivo, adicione a biblioteca webpack, junto com uma ProvidePluginque informe ao Bootstrap como interpretar as variáveis ​​JQuery e Popper.

Adicione o seguinte código ao arquivo:

const { environment } = require('@rails/webpacker')
const webpack = require("webpack") 

environment.plugins.append("Provide", new webpack.ProvidePlugin({ 
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))  

module.exports = environment

A ProvidePluginajuda-nos a evitar a múltipla importou requiredeclarações que normalmente usaria quando se trabalha com módulos JQuery ou Popper. Com esse plug-in, o webpack carregará automaticamente os módulos corretos e apontará as variáveis ​​nomeadas para as exportações carregadas de cada módulo.

Salve e feche o arquivo quando terminar de editar.

Em seguida, abra o arquivo principal do ponto de entrada do webpack app/javascript/packs/application.js:

• nano app/javascript/packs/application.js

Dentro do arquivo, adicione as seguintes importinstruções para importar o Bootstrap e o scssarquivo de estilos personalizados que você criará a seguir:

. . . 
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

import "bootstrap"
import "../stylesheets/application"
. . . 

Salve e feche o arquivo quando terminar de editar.

Em seguida, crie um stylesheetsdiretório para a folha de estilos do seu aplicativo:

• mkdir app/javascript/stylesheets

Abra o arquivo de estilos customizados:

• nano app/javascript/stylesheets/application.scss

Este é um scssarquivo que usa Sass em vez de CSS . Sass, ou Sintattically Awesome Style Sheets, é uma linguagem de extensão CSS que permite aos desenvolvedores integrar lógica de programação e convenções, como variáveis ​​compartilhadas, em regras de estilo.

No arquivo, adicione as seguintes instruções para importar os scssestilos personalizados do Bootstrap e as fontes do Google para o projeto:

@import "~bootstrap/scss/bootstrap";
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

Em seguida, adicione as seguintes definições e estilos de variáveis ​​personalizadas para o aplicativo:

. . .
$white: white;
$black: black;

.navbar {
        margin-bottom: 0;
        background: $black;
}
body {
        background: $black;
        color: $white;
        font-family: 'Merriweather', sans-serif;
}
h1,
h2 {
        font-weight: bold;
}
p {
        font-size: 16px;
        color: $white;
}
a:visited {
        color: $black;
}
.jumbotron {
        background: #0048CD;
        color: $white;
        text-align: center;
        p {
                color: $white;
                font-size: 26px;
        }
}
.link {
        color: $white;
}
.btn-primary {
        color: $white;
        border-color: $white;
        margin-bottom: 5px;
}
.btn-sm {
        background-color: $white;
        display: inline-block;
}
img,
video,
audio {
        margin-top: 20px;
        max-width: 80%;
}
caption {

        float: left;
        clear: both;

}

Salve e feche o arquivo quando terminar de editar.

Você adicionou o Bootstrap ao seu projeto, juntamente com alguns estilos personalizados. Agora você pode integrar as convenções e componentes de layout do Bootstrap nos arquivos do aplicativo.

Etapa 4 - Modificando o layout do aplicativo

Nosso primeiro passo na integração de convenções e componentes do Bootstrap ao projeto será adicioná-los ao arquivo de layout do aplicativo principal. Este arquivo define os elementos que serão incluídos em cada modelo de visualização renderizada para o aplicativo. Neste arquivo, garantiremos que nosso ponto de entrada do webpack esteja definido, além de adicionar referências a cabeçalhos de navegação compartilhados parciais e a uma lógica que nos permitirá renderizar um layout para as visualizações associadas ao aplicativo shark.

Primeiro, abra app/views/layouts/application.html.erbo arquivo de layout principal do seu aplicativo:

• nano app/views/layouts/application.html.erb

Atualmente, o arquivo fica assim:

<!DOCTYPE html>
<html>
  <head>
    <title>Sharkapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

O código processa itens como parâmetros e tokens de proteção contra falsificação de solicitação entre sites para formulários dinâmicos, um csp-nonce para nonces por sessão que permite tags de script em linha e as folhas de estilo e os recursos javascript do aplicativo. Observe que, em vez de ter um javascript_link_tag, nosso código inclui a , que diz ao Rails para carregar nosso ponto de entrada principal do webpack em .javascript_pack_tagapp/javascript/packs/application.js

Na <body>página, uma yieldinstrução diz ao Rails para inserir o conteúdo de uma visualização. Nesse caso, como a raiz do nosso aplicativo foi mapeada anteriormente para a indexvisualização shark, isso teria inserido o conteúdo dessa visualização. Agora, no entanto, como alteramos a visualização raiz, isso inserirá o conteúdo homeda indexvisualização do controlador .

Isso levanta algumas questões: queremos que a visualização inicial do aplicativo seja a mesma que os usuários veem quando visualizam o aplicativo shark? E se queremos que essas visões sejam um pouco diferentes, como implementamos isso?

O primeiro passo será decidir o que deve ser replicado em todas as visualizações de aplicativos. Podemos deixar tudo incluído <header>no local, já que são principalmente tags e metadados que queremos estar presentes em todas as páginas de aplicativos. Dentro desta seção, no entanto, também podemos adicionar algumas coisas que personalizarão todas as visualizações de aplicativos.

Primeiro, adicione a viewportmetatag que o Bootstrap recomenda para comportamentos responsivos:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sharkapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
. . .

Em seguida, substitua o titlecódigo existente pelo código que renderizará o título do aplicativo de uma maneira mais dinâmica:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "About Sharks" %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
. . .

Adicione uma <meta>tag para incluir uma descrição do site:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "About Sharks" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "About Sharks" %>">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
. . .

Com esse código, você pode adicionar uma navegação parcial ao layout. Idealmente, cada uma das páginas de nosso aplicativo deve incluir um componente da barra de navegação na parte superior da página, para que os usuários possam navegar facilmente de uma parte do site para outra.

Sob a <body>tag, adicione uma <header>tag e a seguinte instrução de renderização:

  <body>
    <header>
      <%= render 'layouts/navigation' %>
    </header>

    <%= yield %>
. . .

Essa <header>tag permite organizar o conteúdo da página, separando a barra de navegação do conteúdo da página principal.

Finalmente, você pode adicionar uma <main>tag de elemento e alguma lógica para controlar qual visualização e, portanto, qual layout o aplicativo renderizará. Este código usa o content_formétodo para referenciar um identificador de conteúdo que associaremos ao nosso layout de tubarões na próxima etapa.

Substitua a yieldinstrução existente pelo seguinte conteúdo:

. . . 
  <body>
    <header>
      <%= render 'layouts/navigation' %>
    </header>
    <main role="main">
    <%= content_for?(:content) ? yield(:content) : yield %>
    </main>
  </body>
</html>

Agora, se o :contentbloco estiver definido, o aplicativo produzirá o layout associado. Caso contrário, graças ao operador ternário, ele produzirá um rendimento implícito da visualização associada ao homecontrolador.

Depois de fazer essas alterações, salve e feche o arquivo.

Com o conjunto de layouts para todo o aplicativo, é possível criar a parcial da barra de navegação compartilhada e o layout de tubarões para suas visualizações de tubarão.

Etapa 5 - Criando layouts parciais e específicos compartilhados

Além das alterações feitas no layout do aplicativo na Etapa anterior, você desejará criar a barra de navegação compartilhada parcial, o layout dos tubarões ao qual você referenciou app/views/layouts/application.html.erbe uma exibição para a página inicial do aplicativo. Você também pode adicionar estilos de Bootstrap aos link_toelementos atuais do seu aplicativo para aproveitar os estilos internos do Bootstrap.

Primeiro, abra um arquivo para a barra de navegação compartilhada parcial:

• nano app/views/layouts/_navigation.html.erb

Adicione o seguinte código ao arquivo para criar a barra de navegação:

<nav class="navbar navbar-dark navbar-static-top navbar-expand-md">
    <div class="container">
        <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        </button> <%= link_to "Everything Sharks", root_path, class: 'navbar-brand' %>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav mr-auto">
            <li class='nav-item'><%= link_to 'Home', home_index_path, class: 'nav-link' %></li>
            <li class='nav-item'><%= link_to 'Sharks', sharks_path, class: 'nav-link' %></li>  

                </li>
            </ul>
        </div>
    </div>
</nav>

Essa barra de navegação cria um link para a raiz do aplicativo usando o link_tométodo, que é mapeado para o caminho da raiz do aplicativo. A barra de navegação também inclui dois links adicionais: um para o Homecaminho, que é mapeado para a visualização homedo controlador indexe outro para o caminho do aplicativo shark, que é mapeado para a shark indexvisualização.

Salve e feche o arquivo quando terminar de editar.

Em seguida, abra um arquivo no layoutsdiretório para o layout dos tubarões:

• nano app/views/layouts/sharks.html.erb

Antes de adicionar recursos de layout, precisamos garantir que o conteúdo do layout seja definido como o :contentbloco que referenciamos no layout principal do aplicativo. Adicione as seguintes linhas ao arquivo para criar o bloco:

<% content_for :content do %>
<% end %>

O código que estamos prestes a escrever neste bloco será renderizado dentro do :contentbloco no app/views/layouts/application.html.erbarquivo sempre que uma visualização de tubarões for solicitada por um controlador.

Em seguida, dentro do próprio bloco, adicione o seguinte código para criar um componente jumbotron e dois contêineres :

<% content_for :content do %>
    <div class="jumbotron text-center">
        <h1>Shark Info</h1>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <p>
                    <%= yield %>
                </p>
            </div>
            <div class="col-lg-6">
                <p>

                    <div class="caption">You can always count on some sharks to be friendly and welcoming!</div>
                    <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark">
                </p>

            </div>
        </div>
    </div>
    <% end %>

O primeiro contêiner inclui uma yielddeclaração que inserirá o conteúdo das sharkvisualizações do controlador, enquanto o segundo inclui um lembrete de que certos tubarões são sempre amigáveis ​​e acolhedores.

Por fim, na parte inferior do arquivo, adicione a seguinte renderinstrução para renderizar o layout do aplicativo:

. . . 
            </div>
        </div>
    </div>
    <% end %>
        <%= render template: "layouts/application" %>

Esse layout de tubarões fornecerá o conteúdo do :contentbloco nomeado no layout principal do aplicativo; ele renderizará o próprio layout do aplicativo para garantir que nossas páginas de aplicativos renderizadas tenham tudo o que queremos no nível do aplicativo.

Salve e feche o arquivo quando terminar de editar.

Agora temos nossos parciais e layouts no lugar, mas ainda não criamos a visualização que os usuários verão quando navegarem para a página inicial do aplicativo, a visualização homedo controlador index.

Abra esse arquivo agora:

• nano app/views/home/index.html.erb

A estrutura dessa visualização corresponderá ao layout que definimos para as visualizações de tubarão, com um componente principal do jumbotron e dois contêineres. Substitua o código padrão no arquivo pelo seguinte:

<div class="jumbotron">
    <div class="container">
        <h1>Want to Learn About Sharks?</h1>
        <p>Are you ready to learn about sharks?</p>
        <br>
        <p>
            <%= button_to 'Get Shark Info', sharks_path, :method => :get,  :class => "btn btn-primary btn-lg"%>
        </p>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <h3>Not all sharks are alike</h3>
            <p>Though some are dangerous, sharks generally do not attack humans. Out of the 500 species known to researchers, only 30 have been known to attack humans.
            </p>
        </div>
        <div class="col-lg-6">
            <h3>Sharks are ancient</h3>
            <p>There is evidence to suggest that sharks lived up to 400 million years ago.
            </p>
        </div>
    </div>
</div>

Agora, ao chegar na página inicial do aplicativo, os usuários terão uma maneira clara de navegar para a seção shark do aplicativo, clicando no botão Obter informações do tubarão . Este botão aponta para o shark_path- o auxiliar que mapeia para as rotas associadas ao sharkscontrolador.

Salve e feche o arquivo quando terminar de editar.

Nossa última tarefa será transformar alguns dos link_tométodos em nosso aplicativo em botões que podemos estilizar usando o Bootstrap. Também adicionaremos uma maneira de voltar à página inicial a partir da indexexibição de tubarões .

Abra a indexvisualização tubarões para começar:

• nano app/views/sharks/index.html.erb

Na parte inferior do arquivo, localize o link_tométodo que direciona para a newexibição de tubarão:

. . .
<%= link_to 'New Shark', new_shark_path %>

Modifique o código para transformar esse link em um botão que use a "btn btn-primary btn-sm"classe do Bootstrap :

. . .
<%= link_to 'New Shark', new_shark_path, :class => "btn btn-primary btn-sm" %>

Em seguida, adicione um link à página inicial do aplicativo:

. . .
<%= link_to 'New Shark', new_shark_path, :class => "btn btn-primary btn-sm" %> <%= link_to 'Home', home_index_path, :class => "btn btn-primary btn-sm" %>

Salve e feche o arquivo quando terminar de editar.

Em seguida, abra a newvisualização:

• nano app/views/sharks/new.html.erb

Adicione os estilos de botão ao link_tométodo na parte inferior do arquivo:

. . . 
<%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>

Salve e feche o arquivo.

Abra a editvisualização:

• nano app/views/sharks/edit.html.erb

Atualmente, os link_tométodos são organizados assim:

. . . 
<%= link_to 'Show', @shark %> |
<%= link_to 'Back', sharks_path %>

Altere sua organização na página e adicione os estilos de botão, para que o código fique assim:

. . . 
<%= link_to 'Show', @shark, :class => "btn btn-primary btn-sm" %> <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>

Salve e feche o arquivo.

Por fim, abra a showvisualização:

• nano app/views/sharks/show.html.erb

Encontre os seguintes link_tométodos:

. . . 
<%= link_to 'Edit', edit_shark_path(@shark) %> |
<%= link_to 'Back', sharks_path %>
. . . 

Altere-os para ficar assim:

. . . 
<%= link_to 'Edit', edit_shark_path(@shark), :class => "btn btn-primary btn-sm" %> <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>
. . .

Salve e feche o arquivo.

Agora você está pronto para testar o aplicativo.

Inicie seu servidor com o comando apropriado:

• rails s se você estiver trabalhando localmente
• rails s --binding=your_server_ip se você estiver trabalhando com um servidor de desenvolvimento

Navegue para localhost:3000ou , dependendo de você estar trabalhando localmente ou em um servidor. Você verá a seguinte página de destino:http://your_server_ip:3000

Clique em Obter informações sobre tubarões . Você verá a seguinte página:

Agora você pode editar seu tubarão ou adicionar fatos e postagens, usando os métodos descritos em Como adicionar estímulo a um aplicativo Ruby on Rails . Você também pode adicionar novos tubarões à conversa.

Ao navegar para outras visualizações de tubarão, você verá que o layout do tubarão está sempre incluído:

Agora você tem o Bootstrap integrado ao seu aplicativo Rails. A partir daqui, você pode avançar adicionando novos estilos e componentes ao seu aplicativo para torná-lo mais atraente para os usuários.

Conclusão

Agora você tem o Bootstrap integrado ao seu aplicativo Rails, o que permitirá criar estilos responsivos e visualmente atraentes para aprimorar a experiência dos usuários no projeto.

Para saber mais sobre os recursos do Bootstrap e o que eles oferecem, consulte a documentação do Bootstrap . Você também pode consultar a documentação do Sass , para ter uma idéia de como usá-lo para aprimorar e estender seus estilos e lógica CSS.

Se você estiver interessado em ver como o Bootstrap se integra a outras estruturas, consulte Como criar um aplicativo climático com Angular, Bootstrap e a API APIXU . Você também pode aprender sobre como ele se integra ao Rails e ao React lendo Como configurar um projeto Ruby on Rails com um front-end do React .