Base de Conhecimento

Introdução

O Ruby on Rails é uma estrutura de aplicativo da web popular do lado do servidor, com mais de 42.000 estrelas no GitHub no momento em que este tutorial foi escrito. Ele fornece muitos aplicativos populares que existem hoje na web, como GitHub , Basecamp , SoundCloud , Airbnb e Twitch . Com ênfase na experiência do programador e na comunidade apaixonada que se formou em torno dele, o Ruby on Rails fornecerá as ferramentas necessárias para criar e manter seu aplicativo Web moderno.

React é uma biblioteca JavaScript usada para criar interfaces de usuário front-end. Apoiada pelo Facebook, é uma das bibliotecas front-end mais populares usadas na web atualmente. O React oferece recursos como um DOM (Document Object Model) virtual , arquitetura de componentes e gerenciamento de estado, que tornam o processo de desenvolvimento de front-end mais organizado e eficiente.

Com o frontend da Web se movendo em direção a estruturas separadas do código do lado do servidor, combinar a elegância do Rails com a eficiência do React permitirá criar aplicativos poderosos e modernos, informados pelas tendências atuais. Ao usar o React para renderizar componentes de uma exibição do Rails, em vez do mecanismo de modelo do Rails, seu aplicativo se beneficiará dos mais recentes avanços no JavaScript e no desenvolvimento de front-end, enquanto ainda aproveita a expressividade do Ruby on Rails.

Neste tutorial, você criará um aplicativo Ruby on Rails que armazena suas receitas favoritas e as exibe com um front end do React. Quando terminar, você poderá criar, visualizar e excluir receitas usando uma interface do React denominada Bootstrap :

Se você quiser dar uma olhada no código desse aplicativo, consulte o repositório associado deste tutorial no GitHub da Comunidade DigitalOcean .

Pré-requisitos

Para seguir este tutorial, você precisa ter o seguinte:

• Node.js e npm instalados em sua máquina de desenvolvimento. Este tutorial usa o Node.js. versão 10.16.0 e o npm versão 6.9.0. O Node.js é um ambiente de tempo de execução JavaScript que permite executar seu código fora do navegador. Ele vem com um Gerenciador de Pacotes pré-instalado chamado npm , que permite instalar e atualizar pacotes. Para instalá-los no macOS ou no Ubuntu 18.04, siga as etapas em Como instalar o Node.js e criar um ambiente de desenvolvimento local no macOS ou na seção "Instalando usando um PPA" de Como instalar o Node.js. no Ubuntu 18.04 .

• O gerenciador de pacotes Yarn instalado em sua máquina de desenvolvimento, que permitirá fazer o download da estrutura do React. Este tutorial foi testado na versão 1.16.0; Para instalar essa dependência, siga o guia de instalação oficial do Yarn .

• Instalação da estrutura Ruby on Rails. Para isso, siga nosso guia sobre Como instalar o Ruby on Rails com rbenv no Ubuntu 18.04 ou Como instalar o Ruby on Rails com rbenv no CentOS 7 . Se você deseja desenvolver este aplicativo no macOS, consulte este tutorial em Como instalar o Ruby on Rails com rbenv no macOS . Este tutorial foi testado na versão 2.6.3 do Ruby e na versão 5.2.3 do Rails, portanto, certifique-se de especificar essas versões durante o processo de instalação.

• Instalação do PostgreSQL, conforme mostrado nas etapas 1 e 2 do nosso tutorial Como usar o PostgreSQL com seu aplicativo Ruby on Rails no Ubuntu 18.04 ou Como usar o PostgreSQL com seu aplicativo Ruby on Rails no macOS . Para seguir este tutorial, use o PostgreSQL versão 10. Se você deseja desenvolver este aplicativo em uma distribuição diferente do Linux ou em outro sistema operacional, consulte a página oficial de downloads do PostgreSQL . Para obter mais informações sobre como usar o PostgreSQL, consulte nossos tutoriais Como instalar e usar o PostgreSQL .

Etapa 1 - Criando um novo aplicativo Rails

Nesta etapa, você criará seu aplicativo de receita na estrutura de aplicativos do Rails. Primeiro, você criará um novo aplicativo Rails, que será configurado para funcionar com o React imediatamente, com pouca configuração.

O Rails fornece vários scripts chamados geradores que ajudam na criação de tudo o que é necessário para criar um aplicativo Web moderno. Para ver uma lista completa desses comandos e o que eles fazem, execute o seguinte comando na janela do Terminal:

• rails -h

Isso produzirá uma lista abrangente de opções, que permitirá definir os parâmetros do seu aplicativo. Um dos comandos listados é o newcomando, que cria um novo aplicativo Rails.

Agora, você criará um novo aplicativo Rails usando o newgerador. Execute o seguinte comando na janela do Terminal:

• rails new rails_react_recipe -d=postgresql -T --webpack=react --skip-coffee

O comando anterior cria um novo aplicativo Rails em um diretório chamado rails_react_recipe, instala as dependências Ruby e JavaScript necessárias e configura o Webpack. Vamos percorrer os sinalizadores associados a este newcomando do gerador:

• O -dsinalizador especifica o mecanismo de banco de dados preferido, que neste caso é o PostgreSQL.
• O -Tsinalizador instrui o Rails a ignorar a geração de arquivos de teste, já que você não estará escrevendo testes para os fins deste tutorial. Este comando também é sugerido se você deseja usar uma ferramenta de teste Ruby diferente da fornecida pelo Rails.
• Os --webpackinstrui Rails para pré-configurar para JavaScript com o bundler Webpack , neste caso especificamente para uma aplicação Reagir.
• O --skip-coffeeRails pede para não configurar o CoffeeScript , o que não é necessário para este tutorial.

Após a execução do comando, vá para o rails_react_recipediretório, que é o diretório raiz do seu aplicativo:

• cd rails_react_recipe

Em seguida, liste o conteúdo do diretório:

• ls

Esse diretório raiz possui vários arquivos e pastas gerados automaticamente que compõem a estrutura de um aplicativo Rails, incluindo um package.jsonarquivo que contém as dependências de um aplicativo React.

Agora que você criou com sucesso um novo aplicativo Rails, está pronto para conectá-lo a um banco de dados na próxima etapa.

Etapa 2 - Configurando o banco de dados

Antes de executar seu novo aplicativo Rails, você deve primeiro conectá-lo a um banco de dados. Nesta etapa, você conectará o aplicativo Rails recém-criado a um banco de dados PostgreSQL, para que os dados da receita possam ser armazenados e buscados quando necessário.

O database.ymlarquivo encontrado em config/database.ymlcontém detalhes do banco de dados, como nome do banco de dados, para diferentes ambientes de desenvolvimento. O Rails especifica um nome de banco de dados para os diferentes ambientes de desenvolvimento, acrescentando um sublinhado ( _) seguido pelo nome do ambiente ao nome do seu aplicativo. Você sempre pode alterar qualquer nome de banco de dados do ambiente para o que preferir.

Nota: Neste ponto, você pode alterar config/database.ymlpara configurar qual função do PostgreSQL você gostaria que o Rails usasse para criar seu banco de dados. Se você seguiu o Pré-requisito Como usar o PostgreSQL com o aplicativo Ruby on Rails e criou uma função protegida por uma senha, siga as instruções na Etapa 4 para macOS ou Ubuntu 18.04 .

Como dito anteriormente, o Rails oferece muitos comandos para facilitar o desenvolvimento de aplicativos da web. Isto inclui comandos para trabalhar com bases de dados, tais como create, drop, e reset. Para criar um banco de dados para seu aplicativo, execute o seguinte comando na janela do Terminal:

• rails db:create

Este comando cria um banco de dados developmente test, produzindo a seguinte saída:

Created database 'rails_react_recipe_development'
Created database 'rails_react_recipe_test'

Agora que o aplicativo está conectado a um banco de dados, inicie o aplicativo executando o seguinte comando na janela do Terminal:

• rails s --binding=127.0.0.1

O comando sou serveraciona o Puma , que é um servidor web distribuído com o Rails por padrão e --binding=127.0.0.1liga o servidor ao seu localhost.

Depois de executar este comando, seu prompt de comando desaparecerá e você verá a seguinte saída:

=> Booting Puma
=> Rails 5.2.3 application starting in development 
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.1 (ruby 2.6.3-p62), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:3000
Use Ctrl-C to stop

Para ver seu aplicativo, abra uma janela do navegador e navegue até http://localhost:3000. Você verá a página de boas-vindas padrão do Rails:

Isso significa que você configurou corretamente seu aplicativo Rails.

Para parar o servidor da web a qualquer momento, pressione CTRL+Cna janela Terminal onde o servidor está sendo executado. Vá em frente e faça isso agora; você receberá uma mensagem de despedida da Puma:

^C- Gracefully stopping, waiting for requests to finish
=== puma shutdown: 2019-07-31 14:21:24 -0400 ===
- Goodbye!
Exiting

Seu prompt reaparecerá.

Você configurou com sucesso um banco de dados para seu aplicativo de receita de alimentos. Na próxima etapa, você instalará todas as dependências extras de JavaScript necessárias para montar seu front-end do React.

Etapa 3 - Instalando dependências de front-end

Nesta etapa, você instalará as dependências de JavaScript necessárias no frontend do seu aplicativo de receita de comida. Eles incluem:

• React Router , para manipular a navegação em um aplicativo React.
• Bootstrap , para modelar seus componentes front-end.
• jQuery e Popper , para trabalhar com o Bootstrap.

Execute o seguinte comando na janela do Terminal para instalar esses pacotes com o gerenciador de pacotes Yarn:

• yarn add react-router-dom bootstrap jquery popper.js

Este comando usa o Yarn para instalar os pacotes especificados e os adiciona ao package.jsonarquivo. Para verificar isso, dê uma olhada no package.jsonarquivo localizado no diretório raiz do projeto:

• nano package.json

Você verá os pacotes instalados listados sob a dependencieschave:

{
  "name": "rails_react_recipe",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "@rails/webpacker": "^4.0.7",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.7.2"
  }
}

Você instalou algumas dependências de front-end para seu aplicativo. Em seguida, você configurará uma página inicial para seu aplicativo de receita de alimentos.

Etapa 4 - Configurando a página inicial

Com todas as dependências necessárias instaladas, nesta etapa, você criará uma página inicial para o aplicativo. A página inicial servirá como a página de destino quando os usuários visitarem o aplicativo pela primeira vez.

O Rails segue o padrão de arquitetura Model-View-Controller para aplicativos. No padrão MVC, o objetivo de um controlador é receber solicitações específicas e passá-las para o modelo ou visualização apropriado. No momento, o aplicativo exibe a página de boas-vindas do Rails quando o URL raiz é carregado no navegador. Para mudar isso, você criará um controlador e exibirá a página inicial e corresponderá a uma rota.

O Rails fornece um controllergerador para criar um controlador. O controllergerador recebe um nome de controlador, juntamente com uma ação correspondente. Para mais informações, consulte a documentação oficial do Rails .

Este tutorial chamará o controlador Homepage. Execute o seguinte comando na janela do Terminal para criar um controlador de Homepage com uma indexação.

• rails g controller Homepage index

Nota:
No Linux, se você encontrar o erro FATAL: Listen error: unable to monitor directories for changes., isso ocorre devido a um limite do sistema no número de arquivos que sua máquina pode monitorar quanto a alterações. Execute o seguinte comando para corrigi-lo:

• echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Isto irá aumentar permanentemente a quantidade de diretórios que você pode monitorar com Listena 524288. Você pode alterar isso novamente executando o mesmo comando e substituindo 524288pelo número desejado.

A execução deste comando gera os seguintes arquivos:

• Um homepage_controller.rbarquivo para receber todas as solicitações relacionadas à página inicial. Este arquivo contém a indexação que você especificou no comando.
• Um homepage.jsarquivo para adicionar qualquer comportamento JavaScript relacionado ao Homepagecontrolador.
• Um homepage.scssarquivo para adicionar estilos relacionados ao Homepagecontrolador.
• Um homepage_helper.rbarquivo para adicionar métodos auxiliares relacionados ao Homepagecontrolador.
• Um index.html.erbarquivo que é a página de exibição para renderizar qualquer coisa relacionada à página inicial.

Além dessas novas páginas criadas com o comando Rails, o Rails também atualiza seu arquivo de rotas localizado em config/routes.rb. Ele adiciona uma getrota para sua página inicial, que você modificará como sua rota raiz.

Uma rota raiz no Rails especifica o que será exibido quando os usuários visitarem o URL raiz do seu aplicativo. Nesse caso, você deseja que seus usuários vejam sua página inicial. Abra o arquivo de rotas localizado config/routes.rbem seu editor favorito:

• nano config/routes.rb

Dentro deste arquivo, substitua get 'homepage/index'por root 'homepage#index'para que o arquivo se pareça com o seguinte:

Rails.application.routes.draw do
  root 'homepage#index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

Essa modificação instrui o Rails a mapear solicitações para a raiz do aplicativo para a indexação do Homepagecontrolador, que, por sua vez, processa o que estiver no index.html.erbarquivo localizado no app/views/homepage/index.html.erbnavegador.

Para verificar se isso está funcionando, inicie seu aplicativo:

• rails s --binding=127.0.0.1

Ao abrir o aplicativo no navegador, você verá uma nova página de destino para seu aplicativo:

Depois de verificar se seu aplicativo está funcionando, pressione CTRL+Cpara parar o servidor.

Em seguida, exclua o conteúdo do ~/rails_react_recipe/app/views/homepage/index.html.erbarquivo. Ao fazer isso, você garantirá que o conteúdo de index.html.erbnão interfira na renderização React do seu front-end.

Agora que você configurou sua página inicial para o seu aplicativo, você pode ir para a próxima seção, onde você configurará o frontend do seu aplicativo para usar o React.

Etapa 5 - Configurando o React como seu front-end do Rails

Nesta etapa, você configurará o Rails para usar o React no frontend do aplicativo, em vez do mecanismo de modelo. Isso permitirá que você aproveite a renderização do React para criar uma página inicial mais atraente visualmente.

O Rails, com a ajuda da gema Webpacker , agrupa todo o seu código JavaScript em pacotes . Estes podem ser encontrados no diretório packs em app/javascript/packs. Você pode vincular esses pacotes nas visualizações do Rails usando o javascript_pack_tagauxiliar e pode vincular folhas de estilo importadas aos pacotes usando o stylesheet_pack_tagauxiliar. Para criar um ponto de entrada no seu ambiente do React, você adicionará um desses pacotes ao layout do aplicativo.

Primeiro, renomeie o ~/rails_react_recipe/app/javascript/packs/hello_react.jsxarquivo para ~/rails_react_recipe/app/javascript/packs/Index.jsx.

• mv ~/rails_react_recipe/app/javascript/packs/hello_react.jsx ~/rails_react_recipe/app/javascript/packs/Index.jsx

Após renomear o arquivo, abra application.html.erbo arquivo de layout do aplicativo:

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

Adicione as seguintes linhas de código destacadas no final da tag head no arquivo de layout do aplicativo:

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

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <%= javascript_pack_tag 'Index' %>
  </head>

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

A adição do pacote JavaScript ao cabeçalho do seu aplicativo disponibiliza todo o seu código JavaScript e executa o código no seu Index.jsxarquivo na página sempre que você executa o aplicativo. Juntamente com o pacote JavaScript, você também adicionou uma meta viewporttag para controlar as dimensões e o dimensionamento das páginas no seu aplicativo.

Salve e saia do arquivo.

Agora que seu arquivo de entrada foi carregado na página, crie um componente React para sua página inicial. Comece criando um componentsdiretório no app/javascriptdiretório:

• mkdir ~/rails_react_recipe/app/javascript/components

O componentsdiretório abrigará o componente para a página inicial, juntamente com outros componentes do React no aplicativo. A página inicial conterá algum texto e um botão de chamada à ação para visualizar todas as receitas.

No seu editor, crie um Home.jsxarquivo no componentsdiretório:

• nano ~/rails_react_recipe/app/javascript/components/Home.jsx

Adicione o seguinte código ao arquivo:

import React from "react";
import { Link } from "react-router-dom";

export default () => (
  <div className="vw-100 vh-100 primary-color d-flex align-items-center justify-content-center">
    <div className="jumbotron jumbotron-fluid bg-transparent">
      <div className="container secondary-color">
        <h1 className="display-4">Food Recipes</h1>
        <p className="lead">
          A curated list of recipes for the best homemade meal and delicacies.
        </p>
        <hr className="my-4" />
        <Link
          to="/recipes"
          className="btn btn-lg custom-button"
          role="button"
        >
          View Recipes
        </Link>
      </div>
    </div>
  </div>
);

Nesse código, você importou o React e também o Linkcomponente do React Router. O Linkcomponente cria um hiperlink para navegar de uma página para outra. Em seguida, você criou e exportou um componente funcional contendo alguma linguagem de marcação para sua página inicial, estilizada com as classes Bootstrap.

Com o seu Homecomponente no lugar, você irá configurar o roteamento usando o React Router. Crie um routesdiretório no app/javascriptdiretório:

• mkdir ~/rails_react_recipe/app/javascript/routes

O routesdiretório conterá algumas rotas com seus componentes correspondentes. Sempre que uma rota especificada é carregada, ela renderiza seu componente correspondente no navegador.

No routesdiretório, crie um Index.jsxarquivo:

• nano ~/rails_react_recipe/app/javascript/routes/Index.jsx

Adicione o seguinte código a ele:

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "../components/Home";

export default (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
    </Switch>
  </Router>
);

Neste Index.jsxarquivo de rota, você importou um par de módulos: o Reactmódulo que permite o uso Reagir, e os BrowserRouter, Routee Switchmódulos de Reagir Router, que ajuda juntos nos navegar de uma rota para outra. Por fim, você importou seu Homecomponente, que será renderizado sempre que uma solicitação corresponder à /rota root ( ). Sempre que você quiser adicionar mais páginas ao seu aplicativo, tudo o que você precisa fazer é declarar uma rota nesse arquivo e combiná-la com o componente que você deseja processar para essa página.

Salve e saia do arquivo.

Agora você configurou o roteamento com sucesso usando o React Router. Para que o React esteja ciente das rotas disponíveis e as use, as rotas devem estar disponíveis no ponto de entrada do aplicativo. Para conseguir isso, você renderizará suas rotas em um componente que o React renderizará no seu arquivo de entrada.

Crie um App.jsxarquivo no app/javascript/componentsdiretório:

• nano ~/rails_react_recipe/app/javascript/components/App.jsx

Adicione o seguinte código ao App.jsxarquivo:

import React from "react";
import Routes from "../routes/Index";

export default props => <>{Routes}</>;

No App.jsxarquivo, você importou o React e os arquivos de rota que você acabou de criar. Você exportou um componente que renderiza as rotas dentro de fragmentos . Este componente será renderizado no ponto de entrada da aplicação, disponibilizando as rotas sempre que a aplicação for carregada.

Agora que você App.jsxconfigurou, é hora de renderizá-lo no seu arquivo de entrada. Abra o Index.jsxarquivo de entrada :

• nano ~/rails_react_recipe/app/javascript/packs/Index.jsx

Substitua o código lá pelo seguinte código:

import React from "react";
import { render } from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import App from "../components/App";

document.addEventListener("DOMContentLoaded", () => {
  render(
    <App />,
    document.body.appendChild(document.createElement("div"))
  );
});

Neste snippet de código, você importou o React, o método de renderização do ReactDOM, Bootstrap, jQuery, Popper.js e seu Appcomponente. Usando o método de renderização do ReactDOM, você renderizou seu Appcomponente em um divelemento que foi anexado ao corpo da página. Sempre que o aplicativo é carregado, o React renderiza o conteúdo do Appcomponente dentro do divelemento na página.

Salve e saia do arquivo.

Por fim, adicione alguns estilos CSS à sua página inicial.

Abra o seu application.cssno seu ~/rails_react_recipe/app/assets/stylesheetsdiretório:

• nano ~/rails_react_recipe/app/assets/stylesheets/application.css

Em seguida, substitua o conteúdo do application.cssarquivo pelo seguinte código:

.bg_primary-color {
  background-color: #FFFFFF;
}
.primary-color {
  background-color: #FFFFFF;
}
.bg_secondary-color {
  background-color: #293241;
}
.secondary-color {
  color: #293241;
}
.custom-button.btn {
  background-color: #293241;
  color: #FFF;
  border: none;
}
.custom-button.btn:hover {
  color: #FFF !important;
  border: none;
}
.hero {
  width: 100vw;
  height: 50vh;
}
.hero img {
  object-fit: cover;
  object-position: top;
  height: 100%;
  width: 100%;
}
.overlay {
  height: 100%;
  width: 100%;
  opacity: 0.4;
}

Isso cria a estrutura para uma imagem de herói ou um grande banner da web na primeira página do seu site, que você adicionará mais tarde. Além disso, isso estiliza o botão que o usuário usará para entrar no aplicativo.

Com seus estilos CSS, salve e saia do arquivo. Em seguida, reinicie o servidor da Web para o seu aplicativo e recarregue o aplicativo no seu navegador. Você verá uma nova página inicial:

Nesta etapa, você configurou seu aplicativo para que ele use o React como front-end. Na próxima seção, você criará modelos e controladores que permitirão criar, ler, atualizar e excluir receitas.

Etapa 6 - Criando o controlador e modelo de receita

Agora que você configurou um frontend do React para seu aplicativo, nesta etapa, você criará um modelo e um controlador de receita. O modelo de receita representará a tabela do banco de dados que conterá informações sobre as receitas do usuário enquanto o controlador receberá e manipulará solicitações para criar, ler, atualizar ou excluir receitas. Quando um usuário solicita uma receita, o controlador de receita recebe essa solicitação e a passa para o modelo de receita, que recupera os dados solicitados do banco de dados. O modelo retorna os dados da receita como uma resposta ao controlador. Por fim, essas informações são exibidas no navegador.

Comece criando um modelo de receita usando o generate modelsubcomando fornecido pelo Rails e especificando o nome do modelo junto com suas colunas e tipos de dados. Execute o seguinte comando na janela do Terminal para criar um Recipemodelo:

• rails generate model Recipe name:string ingredients:text instruction:text image:string

Os instrui comando anterior trilhos para criar um Recipemodelo em conjunto com uma namecoluna de tipo string, um ingredientse instructioncoluna do tipo text, e uma imagecoluna de tipo string. Este tutorial nomeou o modelo Recipe, porque, por convenção, os modelos no Rails usam um nome singular, enquanto suas tabelas de banco de dados correspondentes usam um nome no plural.

A execução do generate modelcomando cria dois arquivos:

• Um recipe.rbarquivo que contém toda a lógica relacionada ao modelo.
• Um 20190407161357_create_recipes.rbarquivo (o número no início do arquivo pode diferir dependendo da data em que você executa o comando). Este é um arquivo de migração que contém as instruções para criar a estrutura do banco de dados.

Em seguida, edite o arquivo do modelo de receita para garantir que apenas dados válidos sejam salvos no banco de dados. Você pode conseguir isso adicionando alguma validação de banco de dados ao seu modelo. Abra seu modelo de receita localizado em app/models/recipe.rb:

• nano ~/rails_react_recipe/app/models/recipe.rb

Adicione as seguintes linhas de código destacadas ao arquivo:

class Recipe < ApplicationRecord
  validates :name, presence: true
  validates :ingredients, presence: true
  validates :instruction, presence: true
end

Neste código, você adicionou validação do modelo que verifica a presença de um name, ingredientse instructionde campo. Sem a presença desses três campos, uma receita é inválida e não será salva no banco de dados.

Salve e saia do arquivo.

Para o Rails criar a recipestabela no seu banco de dados, você deve executar uma migração , que no Rails é uma maneira de fazer alterações no seu banco de dados programaticamente. Para garantir que a migração funcione com o banco de dados configurado, é necessário fazer alterações no 20190407161357_create_recipes.rbarquivo.

Abra este arquivo no seu editor:

• nano ~/rails_react_recipe/db/migrate/20190407161357_create_recipes.rb

Adicione as seguintes linhas destacadas, para que o arquivo fique assim:

class CreateRecipes < ActiveRecord::Migration[5.2]
  def change
    create_table :recipes do |t|
      t.string :name, null: false
      t.text :ingredients, null: false
      t.text :instruction, null: false
      t.string :image, default: 'https://raw.githubusercontent.com/do-community/react_rails_recipe/master/app/assets/images/Sammy_Meal.jpg'
      t.timestamps
    end
  end
end

Este arquivo de migração contém uma classe Ruby com um changemétodo e um comando para criar uma tabela chamada recipesjunto com as colunas e seus tipos de dados. Você também atualizou 20190407161357_create_recipes.rbcom uma NOT NULLrestrição nos name, ingredientse instructioncolunas, adicionando null: false, garantindo que estas colunas têm um valor antes de alterar o banco de dados. Por fim, você adicionou um URL de imagem padrão para sua coluna de imagem; esse pode ser outro URL se você quiser usar uma imagem diferente.

Com essas alterações, salve e saia do arquivo. Agora você está pronto para executar sua migração e criar sua tabela. Na sua janela Terminal, execute o seguinte comando:

• rails db:migrate

Aqui você usou o comando migrate do banco de dados, que executa as instruções no seu arquivo de migração. Depois que o comando for executado com êxito, você receberá uma saída semelhante à seguinte:

== 20190407161357 CreateRecipes: migrating ====================================
-- create_table(:recipes)
   -> 0.0140s
== 20190407161357 CreateRecipes: migrated (0.0141s) ===========================

Com seu modelo de receita, crie seu controlador de receitas e adicione a lógica para criar, ler e excluir receitas. Na sua janela Terminal, execute o seguinte comando:

• rails generate controller api/v1/Recipes index create show destroy -j=false -y=false --skip-template-engine --no-helper

Neste comando, você criou um Recipescontrolador em um api/v1diretório com um index, create, show, e destroyação. A indexação tratará de buscar todas as suas receitas, a createação será responsável por criar novas receitas, a showação buscará uma única receita e a destroyação manterá a lógica para excluir uma receita.

Você também passou alguns sinalizadores para tornar o controlador mais leve, incluindo:

• -j=false que instrui o Rails a ignorar a geração de arquivos JavaScript associados.
• -y=false que instrui o Rails a ignorar a geração de arquivos de folha de estilo associados.
• --skip-template-engine, que instrui o Rails a ignorar a geração de arquivos de exibição do Rails, pois o React está atendendo às suas necessidades de front-end.
• --no-helper, que instrui o Rails a ignorar a geração de um arquivo auxiliar para o seu controlador.

A execução do comando também atualizou o arquivo de rotas com uma rota para cada ação no Recipescontrolador. Para usar essas rotas, faça alterações no seu config/routes.rbarquivo.

Abra o arquivo de rotas no seu editor de texto:

• nano ~/rails_react_recipe/config/routes.rb

Depois de aberto, atualize-o para se parecer com o código a seguir, alterando ou adicionando as linhas destacadas:

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      get 'recipes/index'
      post 'recipes/create'
      get '/show/:id', to: 'recipes#show'
      delete '/destroy/:id', to: 'recipes#destroy'
    end
  end
  root 'homepage#index'
  get '/*path' => 'homepage#index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

Nesse arquivo de rota, você modificou o verbo HTTP das rotas createe destroypara que ele possa poste deletedados. Você também modificou as rotas para a ação showe destroyadicionando um :idparâmetro à rota. :idmanterá o número de identificação da receita que você deseja ler ou excluir.

Você também adicionou uma rota catch all com get '/*path'que direcionará qualquer outra solicitação que não corresponda às rotas existentes à indexação do homepagecontrolador. Dessa forma, o roteamento no front-end manipulará solicitações não relacionadas à criação, leitura ou exclusão de receitas.

Salve e saia do arquivo.

Para ver uma lista de rotas disponíveis no seu aplicativo, execute o seguinte comando na janela do Terminal:

• rails routes

A execução deste comando exibe uma lista de padrões de URI, verbos e controladores ou ações correspondentes para o seu projeto.

Em seguida, adicione a lógica para obter todas as receitas de uma só vez. O Rails usa a biblioteca ActiveRecord para lidar com tarefas relacionadas ao banco de dados como esta. O ActiveRecord conecta classes a tabelas de banco de dados relacionais e fornece uma API rica para trabalhar com elas.

Para obter todas as receitas, você usará o ActiveRecord para consultar a tabela de receitas e buscar todas as receitas existentes no banco de dados.

Abra o recipes_controller.rbarquivo com o seguinte comando:

• nano ~/rails_react_recipe/app/controllers/api/v1/recipes_controller.rb

Adicione as seguintes linhas de código destacadas ao controlador de receitas:

class Api::V1::RecipesController < ApplicationController
  def index
    recipe = Recipe.all.order(created_at: :desc)
    render json: recipe
  end

  def create
  end

  def show
  end

  def destroy
  end
end

Em sua indexação, usando o allmétodo fornecido pelo ActiveRecord, você obtém todas as receitas em seu banco de dados. Usando o ordermétodo, você os ordena em ordem decrescente pela data de criação. Dessa forma, você tem as receitas mais recentes primeiro. Por fim, você envia sua lista de receitas como uma resposta JSON com render.

Em seguida, adicione a lógica para criar novas receitas. Assim como na busca de todas as receitas, você dependerá do ActiveRecord para validar e salvar os detalhes da receita fornecidos. Atualize seu controlador de receita com as seguintes linhas de código destacadas:

class Api::V1::RecipesController < ApplicationController
  def index
    recipe = Recipe.all.order(created_at: :desc)
    render json: recipe
  end

  def create
    recipe = Recipe.create!(recipe_params)
    if recipe
      render json: recipe
    else
      render json: recipe.errors
    end
  end

  def show
  end

  def destroy
  end

  private

  def recipe_params
    params.permit(:name, :image, :ingredients, :instruction)
  end
end

Na createação, você usa o createmétodo do ActiveRecord para criar uma nova receita. O createmétodo tem a capacidade de atribuir todos os parâmetros do controlador fornecidos ao modelo de uma só vez. Isso facilita a criação de registros, mas também abre a possibilidade de uso malicioso. Isso pode ser evitado usando um recurso fornecido pelo Rails, conhecido como parâmetros fortes . Dessa forma, os parâmetros não podem ser atribuídos a menos que tenham sido incluídos na lista de permissões. No seu código, você passou um recipe_paramsparâmetro para o createmétodo A recipe_paramsé um privatemétodo onde você lista branca seus parâmetros do controlador para evitar conteúdo errado ou malicioso de entrar em seu banco de dados. Neste caso, você está permitindo um name, image, ingredients, einstructionparâmetro para uso válido do createmétodo

Seu controlador de receita agora pode ler e criar receitas. Tudo o que resta é a lógica para ler e excluir uma única receita. Atualize seu controlador de receitas com o seguinte código:

class Api::V1::RecipesController < ApplicationController
  def index
    recipe = Recipe.all.order(created_at: :desc)
    render json: recipe
  end

  def create
    recipe = Recipe.create!(recipe_params)
    if recipe
      render json: recipe
    else
      render json: recipe.errors
    end
  end

  def show
    if recipe
      render json: recipe
    else
      render json: recipe.errors
    end
  end

  def destroy
    recipe&.destroy
    render json: { message: 'Recipe deleted!' }
  end

  private

  def recipe_params
    params.permit(:name, :image, :ingredients, :instruction)
  end

  def recipe
    @recipe ||= Recipe.find(params[:id])
  end
end

Nas novas linhas de código, você criou um recipemétodo privado . O recipemétodo usa o método ActiveRecord findpara encontrar uma receita que idcorresponda ao idfornecido no paramse o atribui a uma variável de instância @recipe. Na showação, você verificou se uma receita é retornada pelo recipemétodo e a enviou como uma resposta JSON, ou enviou um erro se não foi.

Na destroyação, você fez algo semelhante usando o operador de navegação segura do Ruby &., que evita nilerros ao chamar um método. Isso permite que você exclua uma receita apenas se ela existir e envie uma mensagem como resposta.

Agora que você concluiu essas alterações recipes_controller.rb, salve o arquivo e saia do seu editor de texto.

Nesta etapa, você criou um modelo e um controlador para suas receitas. Você escreveu toda a lógica necessária para trabalhar com receitas no back-end. Na próxima seção, você criará componentes para visualizar suas receitas.

Etapa 7 - Vendo receitas

Nesta seção, você criará componentes para visualizar receitas. Primeiro, você criará uma página na qual poderá visualizar todas as receitas existentes e, em seguida, outra para visualizar receitas individuais.

Você começará criando uma página para visualizar todas as receitas. No entanto, antes de fazer isso, você precisa de receitas para trabalhar, pois seu banco de dados está vazio no momento. O Rails nos oferece a oportunidade de criar dados iniciais para sua aplicação.

Abra o arquivo inicial seeds.rbpara editar:

• nano ~/rails_react_recipe/db/seeds.rb

Substitua o conteúdo desse arquivo inicial pelo seguinte código:

9.times do |i|
  Recipe.create(
    name: "Recipe #{i + 1}",
    ingredients: '227g tub clotted cream, 25g butter, 1 tsp cornflour,100g parmesan, grated nutmeg, 250g fresh fettuccine or tagliatelle, snipped chives or chopped parsley to serve (optional)',
    instruction: 'In a medium saucepan, stir the clotted cream, butter, and cornflour over a low-ish heat and bring to a low simmer. Turn off the heat and keep warm.'
  )
end

Neste código, você está usando um loop para Rails Instrua para criar nove receitas com um name, ingredientse instruction. Salve e saia do arquivo.

Para propagar o banco de dados com esses dados, execute o seguinte comando na janela do Terminal:

• rails db:seed

A execução deste comando adiciona nove receitas ao seu banco de dados. Agora você pode buscá-los e renderizá-los no frontend.

O componente para visualizar todas as receitas fará uma solicitação HTTP para a indexação no RecipesControllerpara obter uma lista de todas as receitas. Essas receitas serão exibidas em cartões na página.

Crie um Recipes.jsxarquivo no app/javascript/componentsdiretório:

• nano ~/rails_react_recipe/app/javascript/components/Recipes.jsx

Depois que o arquivo estiver aberto, importe os módulos React e Link para ele adicionando as seguintes linhas:

import React from "react";
import { Link } from "react-router-dom";

Em seguida, crie uma Recipesclasse que estenda a React.Componentclasse. Adicione o seguinte código destacado para criar um componente React que se estende React.Component:

import React from "react";
import { Link } from "react-router-dom";

class Recipes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      recipes: []
    };
  }

}
export default Recipes;

Dentro do construtor , estamos inicializando um objeto de estado que contém o estado de suas receitas, que na inicialização é uma matriz vazia ( []).

Em seguida, adicione um componentDidMountmétodo na classe Recipe. O método componentDidMount é um método de ciclo de vida React chamado imediatamente após a montagem de um componente. Neste método de ciclo de vida, você fará uma chamada para buscar todas as suas receitas. Para fazer isso, adicione as seguintes linhas:

import React from "react";
import { Link } from "react-router-dom";

class Recipes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      recipes: []
    };
  }

  componentDidMount() {
      const url = "/api/v1/recipes/index";
      fetch(url)
        .then(response => {
          if (response.ok) {
            return response.json();
          }
          throw new Error("Network response was not ok.");
        })
        .then(response => this.setState({ recipes: response }))
        .catch(() => this.props.history.push("/"));
  }

}
export default Recipes;

No seu componentDidMountmétodo, você fez uma chamada HTTP para buscar todas as receitas usando a API de busca . Se a resposta for bem-sucedida, o aplicativo salva a matriz de receitas no estado da receita. Se houver um erro, ele redirecionará o usuário para a página inicial.

Por fim, adicione um rendermétodo na Recipeclasse. O método render contém os elementos React que serão avaliados e exibidos na página do navegador quando um componente for r