Base de Conhecimento
Como configurar um projeto Ruby on Rails com um front-end do React Imprimir este Artigo
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 new
comando, que cria um novo aplicativo Rails.
Agora, você criará um novo aplicativo Rails usando o new
gerador. 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 new
comando do gerador:
- O
-d
sinalizador especifica o mecanismo de banco de dados preferido, que neste caso é o PostgreSQL. - O
-T
sinalizador 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
--webpack
instrui Rails para pré-configurar para JavaScript com o bundler Webpack , neste caso especificamente para uma aplicação Reagir. - O
--skip-coffee
Rails 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_recipe
diretó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.json
arquivo 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.yml
arquivo encontrado em config/database.yml
conté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.yml
para 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 development
e 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 s
ou server
aciona o Puma , que é um servidor web distribuído com o Rails por padrão e --binding=127.0.0.1
liga 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+C
na 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.json
arquivo. Para verificar isso, dê uma olhada no package.json
arquivo localizado no diretório raiz do projeto:
- nano package.json
Você verá os pacotes instalados listados sob a dependencies
chave:
{
"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 controller
gerador para criar um controlador. O controller
gerador 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 index
açã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 Listen
a 524288
. Você pode alterar isso novamente executando o mesmo comando e substituindo 524288
pelo número desejado.
A execução deste comando gera os seguintes arquivos:
- Um
homepage_controller.rb
arquivo para receber todas as solicitações relacionadas à página inicial. Este arquivo contém aindex
ação que você especificou no comando. - Um
homepage.js
arquivo para adicionar qualquer comportamento JavaScript relacionado aoHomepage
controlador. - Um
homepage.scss
arquivo para adicionar estilos relacionados aoHomepage
controlador. - Um
homepage_helper.rb
arquivo para adicionar métodos auxiliares relacionados aoHomepage
controlador. - Um
index.html.erb
arquivo 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 get
rota 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.rb
em 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 index
ação do Homepage
controlador, que, por sua vez, processa o que estiver no index.html.erb
arquivo localizado no app/views/homepage/index.html.erb
navegador.
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+C
para parar o servidor.
Em seguida, exclua o conteúdo do ~/rails_react_recipe/app/views/homepage/index.html.erb
arquivo. Ao fazer isso, você garantirá que o conteúdo de index.html.erb
nã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_tag
auxiliar e pode vincular folhas de estilo importadas aos pacotes usando o stylesheet_pack_tag
auxiliar. 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.jsx
arquivo 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.erb
o 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.jsx
arquivo na página sempre que você executa o aplicativo. Juntamente com o pacote JavaScript, você também adicionou uma meta
viewport
tag 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 components
diretório no app/javascript
diretório:
- mkdir ~/rails_react_recipe/app/javascript/components
O components
diretó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.jsx
arquivo no components
diretó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 Link
componente do React Router. O Link
componente 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 Home
componente no lugar, você irá configurar o roteamento usando o React Router. Crie um routes
diretório no app/javascript
diretório:
- mkdir ~/rails_react_recipe/app/javascript/routes
O routes
diretório conterá algumas rotas com seus componentes correspondentes. Sempre que uma rota especificada é carregada, ela renderiza seu componente correspondente no navegador.
No routes
diretório, crie um Index.jsx
arquivo:
- 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.jsx
arquivo de rota, você importou um par de módulos: o React
módulo que permite o uso Reagir, e os BrowserRouter
, Route
e Switch
módulos de Reagir Router, que ajuda juntos nos navegar de uma rota para outra. Por fim, você importou seu Home
componente, 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.jsx
arquivo no app/javascript/components
diretório:
- nano ~/rails_react_recipe/app/javascript/components/App.jsx
Adicione o seguinte código ao App.jsx
arquivo:
import React from "react";
import Routes from "../routes/Index";
export default props => <>{Routes}</>;
No App.jsx
arquivo, 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.jsx
configurou, é hora de renderizá-lo no seu arquivo de entrada. Abra o Index.jsx
arquivo 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 App
componente. Usando o método de renderização do ReactDOM, você renderizou seu App
componente em um div
elemento que foi anexado ao corpo da página. Sempre que o aplicativo é carregado, o React renderiza o conteúdo do App
componente dentro do div
elemento na página.
Salve e saia do arquivo.
Por fim, adicione alguns estilos CSS à sua página inicial.
Abra o seu application.css
no seu ~/rails_react_recipe/app/assets/stylesheets
diretório:
- nano ~/rails_react_recipe/app/assets/stylesheets/application.css
Em seguida, substitua o conteúdo do application.css
arquivo 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 model
subcomando 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 Recipe
modelo:
- rails generate model Recipe name:string ingredients:text instruction:text image:string
Os instrui comando anterior trilhos para criar um Recipe
modelo em conjunto com uma name
coluna de tipo string
, um ingredients
e instruction
coluna do tipo text
, e uma image
coluna 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 model
comando cria dois arquivos:
- Um
recipe.rb
arquivo que contém toda a lógica relacionada ao modelo. - Um
20190407161357_create_recipes.rb
arquivo (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
, ingredients
e instruction
de 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 recipes
tabela 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.rb
arquivo.
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 change
método e um comando para criar uma tabela chamada recipes
junto com as colunas e seus tipos de dados. Você também atualizou 20190407161357_create_recipes.rb
com uma NOT NULL
restrição nos name
, ingredients
e instruction
colunas, 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 Recipes
controlador em um api/v1
diretório com um index
, create
, show
, e destroy
ação. A index
ação tratará de buscar todas as suas receitas, a create
ação será responsável por criar novas receitas, a show
ação buscará uma única receita e a destroy
açã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 Recipes
controlador. Para usar essas rotas, faça alterações no seu config/routes.rb
arquivo.
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 create
e destroy
para que ele possa post
e delete
dados. Você também modificou as rotas para a ação show
e destroy
adicionando um :id
parâmetro à rota. :id
manterá 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 à index
ação do homepage
controlador. 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.rb
arquivo 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 index
ação, usando o all
método fornecido pelo ActiveRecord, você obtém todas as receitas em seu banco de dados. Usando o order
mé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 create
ação, você usa o create
método do ActiveRecord para criar uma nova receita. O create
mé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_params
parâmetro para o create
método A recipe_params
é um private
mé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
, einstruction
parâmetro para uso válido do create
mé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 recipe
método privado . O recipe
método usa o método ActiveRecord find
para encontrar uma receita que id
corresponda ao id
fornecido no params
e o atribui a uma variável de instância @recipe
. Na show
ação, você verificou se uma receita é retornada pelo recipe
método e a enviou como uma resposta JSON, ou enviou um erro se não foi.
Na destroy
ação, você fez algo semelhante usando o operador de navegação segura do Ruby &.
, que evita nil
erros 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.rb
para 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
, ingredients
e 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 index
ação no RecipesController
para obter uma lista de todas as receitas. Essas receitas serão exibidas em cartões na página.
Crie um Recipes.jsx
arquivo no app/javascript/components
diretó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 Recipes
classe que estenda a React.Component
classe. 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 componentDidMount
mé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 componentDidMount
mé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 render
método na Recipe
classe. 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
Esta resposta lhe foi útil?
Veja também
Como Ligar seu servidor SA-MP em GameCp e Conectar no Filezilla
Introdução O uso de loops no Go permite automatizar e repetir tarefas de maneira eficiente....
Introdução O WordPress é um sistema popular de gerenciamento de conteúdo que, de acordo com a...
Introdução O controle de versão não é apenas para código. É para qualquer coisa que você queira...
Introdução Haverá momentos em que seu código precisará de funcionalidade adicional fora do seu...