CRUD com Rails e React: Criando uma TO-DO List

Aprenda a criar um APP de gerenciamento de tarefas (CRUD completo) do zero usando o Ruby On Rails como API e o React como cliente de forma fácil e rápida neste artigo que vai direto ao ponto.

Na parte da API você vai aprender como criar sem dificuldades os endpoints necessários, como permitir que a API seja consumida via browser (CORS) e como preparar os dados de teste que serão usados para dar suporte a criação do cliente web.

Na parte do cliente, você vai aprender: como criar uma estrutura de projeto com React, como usar o bootstrap e o fontawesome para criar um site responsivo e elegante, como realizar chamadas Web pelo React e como integrar tudo isso com a API.

 

Nosso Projeto

Após todos os passos do artigo, você deve ter o seguinte resultado:

 

Aviso importante 😁

Este artigo é um aquecimento para a Semana Super Full Stack, nela nós vamos ensinar como desenvolver um APP inspirado no iFood usando Ruby On Rails como API e React como cliente.

O evento vai acontecer do dia 29/04 até o dia 05/05, ele é online e totalmente gratuito, então se inscreva agora pra aproveitar: Mini curso criando um APP inspirado no iFood

 

Dependências

 

 

 

 

Passo a Passo


 

Criando a API com Ruby On Rails

Primeiramente nós vamos criar a API que irá permitir a criação, visualização, remoção e atualização das tarefas.

 

Criando e preparando o Projeto

Vamos gerar o projeto, criar o controller e model tasks e refletir isto no banco de dados

 

1. Crie o projeto da nossa API:

2. Entre no projeto criado:

3. Agora gere um scaffold Tasks (controller + model) para gerenciarmos nossas tarefas:

4. Seu controller Tasks deve estar dessa forma:

5. Crie o banco de dados e rode as migrations:

 

Liberando a API (cors)

Vamos liberar a API para que ela possa ser acessa via chamadas javascript do Browser, ou seja, habilitar e configurar o CORS.

 

1. Coloque no Gemfile:

2. Instale a gem rodando:

3. Coloque em config/initializers/cors.rb:

 

Incluindo dados Fake no banco de dados

Vamos incluir algumas tasks no banco de dados para consumir futuramente no cliente React

 

1. Acrescente os seguintes códigos em db/seeds.rb:

2. Insira os valores no banco de dados:

 

Ver as rotas e deixar tudo online

1. Veja as rotas da sua API rodando:

Será algo como:

2. Suba o servidor para consumir futuramente com o React:

3. Pronto o/

 


 

Criando o cliente React

Agora nós iremos criar o projeto react que vai consumir a API criado anteriormente permitindo que realizando o CRUD de tarefas de forma visual e intuitiva.

 

Criando e preparando o Projeto

1. Instale o create-react-app

2. Gere o projeto:

3. Entre na pasta do projeto:

4. Suba o servidor para ver o projeto gerado:

5. Em localhost:3000 deve aparecer:

 

 

Instalando o Bootstrap, Sass e Fontawesome

Para criar um APP responsivo e com uma aparência intuitiva vamos utilizar o bootstrap e o fontawesome e para facilitar a criação de arquivos de estilo vamos utilizar o sass.

 

1. Instale o bootstrap

2. Inclua o css do Bootstrap adicionando o ao arquivo public/index.html

Obs: Inclua-o sem alterar o resto dos códigos representados pelos “….”

3. Instale o sass para facilitar a criação de arquivos de estilo no APP:

4. Para deixar o APP mais elegante instale os ícones do fontawesome:

5. Importe o fontawesome incluindo no src/App.js os seguintes trechos:

Obs: Inclua os imports e o library.add ao arquivo sem alterar o resto dos códigos representados pelos “…”

Obs2: O arquivo App.js será a base do nosso projeto, ou seja, todos os outros components serão renderizados a partir dele.

Explicação do código: O primeiro importe seleciona a biblioteca que vamos usar, o segundo importa os icones faCheckCircle (usado pra dizer que a tarefa está pronta) e faTrashAlt (usando pra excluir a tarefa) e o terceiro adiciona os ícones selecionados a library para termos acesso a eles em todos os components.

6. Seu projeto deve estar assim no browser:

 

Gerando os components do Projeto

Agora vamos gerar os components que serão a base do cliente react (header, tasks, list e create_tasks)

 

1. Gere a pasta de components:

2. Gere os arquivos dos components:

 

Criando o Header

Vamos criar o component Header e depois um arquivo sass de estilo para o projeto.

 

1. Crie o arquivo src/components/header/Header.js e coloque nele:

Explicação do código: Neste component nós importamos as bibliotecas básicas do React (React e Component), o Navbar (do bootstrap) e o FontAwesome.
Depois utilizando os components improtados, criamos a Navbar (), injetamos o icone (check-circle) e depois o nome do Projeto (Task Finisher).

2. Renomeie seu arquivo src/App.css para src/App.scss

3. Atualize a importação do src/App.scss no src/App.js

Explicação do código: Note que estamos importando o Header no começo do arquivo e depois adicionando ele ao Html do App (< Header />) para que ele seja renderizado corretamente.

4. Substitua o conteúdo de src/App.scss:

Explicação do código: Aqui nós criamos as variáveis sass com as cores que usaremos no projeto e adicionamos alguns estilos básicos para deixar a nossa Navbar similar ao desenhado no mockup.

 

 

Criando o component Principal das Tasks

Aqui iremos criar a estrutura do component Tasks que servirá como um container para os outros components que irão listar, deletar, atualizar e criar tarefas.

 

1. Crie um arquivo chamado Tasks.js em src/components/tasks e coloque nele:

Explicação do código:
1 – Primeiro importamos as bibliotecas básicas do react e do Bootstrap (Row e Col)

2 – Criarmos uma Col (linha) com o título To-do para futuramente adicionar a lista de tarefas a fazer

3 – Criarmos uma Col (linha) com o título Done para futuramente adicionar a lista de tarefas feitas

2. Atualize o src/APP.js colocando:

Explicação do código:
1 – Importamos o Component Tasks
2 – Adicionamos ele o Tasks () dentro de um Container (elemento que centraliza os conteúdos) ao APP para que seja exibido na tela

 

Criando o component de listagem

Agora vamos criar o component que vai listar as tarefas (tanto as a fazer como as já feitas)

 

1. Primeiro vamos criar os Cards onde a lista será mostrada, para isso crie um arquivo chamado List.js em src/components/tasks/list e coloque nele:

Explicação do código:

1 – Importamos as bibliotecas básicas do React e Bootstrap (Card)

2 – Criamos um Card (retangulo que se destaca do fundo pelo sombreamento) para depois adicionar a tabela

2. Atualize o src/components/tasks/Tasks.js colocando:

Explicação do código:

1 – Importamos o component List
2 – Inserimos o novo component

 

3. O resultado do projeto atual é:

4. Atualize o App.scss colocando:

5. As tasks serão passadas do component Tasks para o List, então vamos atualizar novamente o Tasks.js colocando

Explicação do código:
1 – Passamos para o component como propriedade o hash tasks que é a listagem das tarefas que ele deve mostrar (para a lista de To-do passamos tarefas a fazer [sinalizadas pelo ‘done’: false] e para a lista Done passamos tarefas feitas [sinalizadas pelo ‘done’: ‘true’])

 

6. Pronto, agora vamos criar a tabela para mostrar as tarefas e as opções de delete e check delas, atualize o arquivo src/components/tasks/list/List.js:

Explicação do código:

1 – Importamos o Table para renderizar a tabela de tarefas e o FontAwesomeIcon para inserir os icones de check e delete

2 – Inserimos dentro do o component e dentro dele incluimos um Looping, que faz uma iteração sobre a propriedade tasks recebida do Tasks.js.

3 – Para cada volta do Looping nós inserimos uma nova linha na tabela que possui a descrição da tarefa, o icone para checar (dizer que está feita) a tarefa caso ela tenha o ‘done’: false e o icone para remover a tarefa do banco de dados.

 

7. Atualize o App.scss colocando:

8. Agora nós já temos a listagem das tarefas que veem através do Tasks (em breve vamos baixar direto da API)

 

 

Baixando as tasks da API

Agora iremos linkar a API criada anteriormente com o nosso cliente react através de chamadas Web usando a biblioteca fetch.

 

1. Em src/components/tasks/Tasks.js inclua o método loadTasks para baixar as informações da API e o componentDidMount para chamo-la quando o component for ser exibido:

Explicação do código:

1 – Criamos um constructor (que é chamado sempre que o component é criado), nele nós criamos um state (estado das variáveis daquele component) com o tasks (onde ficará salvo as tarefas) e depois chamamos o bind para garantir que a chamada funcione corretamente nos eventos de click.

2 – Criamos o método assincrono loadTasks onde usamos o fetch para realizamos a chamada da listagem de tarefas da API e depois colocamos o resultado com as tarefas no state tasks

3 – Depois nós usamos o metodo componentDidMount (que é chamado quando o component é montado) para chamar a API e preencher as tarefas sempre que o component estiver na tela.

 

2 – No mesmo arquivo altere a chamada do component Task para passar as tarefas baixadas da API:

Na listagem de tarefas a fazer, altere de:

Para

Obs: Note que estamos passando apenas as tarefas que tem o done != true

Na listagem de tarefas feitas, altere de:

Para

Obs: Note que estamos passando apenas as tarefas que tem o done == true

3 – O resultado atual:

 

Deletando tarefas

Agora vamos alterar nosso projeto para que seja possível deletar tarefas

 

1. Altere o arquivo src/components/tasks/list/List.js para incluir o método de delete da tarefa:

Explicação do código:

1 – Incluimos um método assincrono chamado deleteTask que quando acionado chama o método da API que apaga uma tarefa (passada via ID)

2 – Nesse método nós também incluimos o “if (window.confirm(Are you sure you want to delete: "${task.title}"))” que pergunta ao usuário se ele tem certeza que quer deletar antes de chamar a API

 

2. No mesmo arquivo inclua a chamada do metodo de delete no icone de delete:

Mude de:

Para:

Obs: Adicionamos o onClick que percebe que o icone foi clicado e realiza a chamada para o método deleteTask passando a task associada

 

3. No arquivo Tasks.js, altere a chamada da listagem para passar como parâmetro a função de atualização das tasks (para que a tela seja atualizada quando uma task for deletada):

Na listagem de tarefas a fazer, troque:

para:

Obs: Estamos passando a propriedade loadTasks, que nada mais é que o próprio método de atualização das tarefas que chama a API

Na listagem de tarefas feitas, troque:

para:

Obs: Estamos passando a propriedade loadTasks, que nada mais é que o próprio método de atualização das tarefas que chama a API

4. O resultado atual:

 

Marcando tarefas como feitas

Agora iremos adicionar a habilidade de marcar as tarefas como feitas, ou seja, que irão atualizar a tarefa na API e recarregar a lista para que a tarefa fique no local correto.

 

1. Altere o arquivo src/components/tasks/list/List.js para incluir o método de check da tarefa:

Explicação do código:

1 – Incluirmos o método assincrono checkTask que chama a API para atualizar a tarefa passando o valor done como true, ou seja, assinando a tarefa como feita.

2 – Na mesma chamada, chamamos o loadTasks para atualizar a lista de tarefas

 

2. No mesmo arquivo inclua a chamada do metodo de check no icone de check:

Mude de:

Para:

Obs: Estamos adicionando o onClick que vai realizar a chamada do método checkTask passando a task atual assim que o icone for clicando

 

Criando uma nova tarefa

Agora vamos permitir que o usuário crie uma nova tarefa, e para isso precisaremos criar um modal com um Form e um novo método para chamar a API.

 

1. Crie o arquivo src/components/tasks/create_tasks/CreateTasks.js dentro e coloque nele:

Explicação do Código:

1 – Importamos as principais bibliotecas do React (incluindo a useStare que usamos para os hooks) e Bootstrap

2 – Criamos um component do tipo função

3 – Utilizamos Hooks para definir os valores do state do component (title = título da tarefa, show = boolean que mostra e esconde o modal) e as funções para setar eles (setTitle = altera o title, setShow = altera o show), para saber mais sobre hooks vale a leitura: [Introducing to hooks](https://reactjs.org/docs/hooks-intro.html)

4 – Criamos o método assincrono handleSubmit que vai chamar a API para realizar a criação da task assim que o form for submetido.

5 – Ainda neste método, após a chamada da API chamada o setShow(false) para esconder o modal, o setTitle(”) para limpar o campo title e o loadTasks para atualizar a listagem de tarefas

6 – No Html adicionamos o botão que ficará visível na listagem de tarefas para adicionar novas tarefas (+ Tasks) e depois o Modal com o campo de título, o botão para realizar a criação da task e o botão para cancelar.

 

2. Agora insira o create_task no component Tasks:

Mudando de:

Para:

Explicação do código:

1 – Importamos o CreateTasks

2 – Injetamos ele na linha de tarefas a fazer passando o método de atualização das tarefas como propriedade

3. Atualize o App.scss colocando:

4. Resultado:

 

 

 

Pronto. Subindo e testando o Projeto

1. Pronto, para ver funcionando suba o servidor:

2. Seu APP deve estar desta forma:

 

Desafio

Para expandir ainda mais suas habilidades, adicione logo a baixo do Card de tarefas feitas o botão de remover todas as tarefas (Remove All) e garanta que quando o usuário clicar nele, todas as tarefas marcadas como feitas sejam removidas.

 

Conclusão

Criar um Projeto que integre Rails e React é realmente muito fácil e traz um resultado incrível, utilize esse passo a passo como base para projetos maiores e mais complexos e não se esqueça de realizar o desafio final para fixar tudo que você aprendeu aqui.

Importante: Não se esqueça de participar da Semana Super Full Stack onde criaremos um clone do iFood usando Ruby On Rails API + um SPA React. O Evento vai acontecer do dia 29/04 a 05/05, será online e gratuito!
Então se inscreva agora clicando aqui.

Obrigado por estar com a gente o/

 



12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas \o/




Você é novo por aqui?

Primeira vez no OneBitCode? Curtiu esse conteúdo? O OneBitCode tem muito mais para você!

O OneBitCode traz conteúdos de qualidade e em português sobre programação com foco em Ruby on Rails e outras tecnologias como Angular, Ionic, React, desenvolvimento de Chatbots e etc.

Se você deseja aprender mais, de uma forma natural e dentro de uma comunidade ativa, visite nosso Facebook e nosso Twitter, veja os screencasts e talks no Youtube, alguns acontecimentos no Instagram, ouça os Podcasts e faça parte de nossa Newsletter.

Além disso, também estamos com alguns e-Books muito interessantes para quem deseja se aprimorar como programador e também como freelancer (os e-Books são gratuitos!):

Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente! Seja por Facebook ou e-mail, estamos aqui para você 🙂

Bem-vindo à família OneBitCode \o/

abril 23, 2019

9
Deixe um comentário

avatar
4 Comment threads
5 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
LucasJones SoaresLeonardo ScorzaYahgoAndré Caetano Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Thiago Santos
Visitante
Thiago Santos

Boa tarde,
Eu faço os passos certinhos e ao invés de abrir essa tela para mim: https://i1.wp.com/onebitcode.com/wp-content/uploads/2019/04/img0-artigo.png?ssl=1

Aparece a mensagem: Failed to compile

./src/App.js
Module not found: Can’t resolve ‘@fortawesome/free-regular-svg-icons’ in ‘/home/thiago/code/thiagohenriquesantos/tasks/tasks_client/src’

This error occurred during the build time and cannot be dismissed.

Poderia me ajudar? Obrigado

Leonardo
Visitante
Leonardo

Muito bom esse tutorial, estou muito animado para o curso do dia 29.

Tive um pequeno problema, que caso alguém tenha o mesmo problema pode ajudar:

Problema com os ícones :
Como esta, e não aparecia os ícones para mim:
<FontAwesomeIcon icon={['far', 'check-circle']} size="lg"/>

Troquei por, e funcionou, no caso repita para todos ícones.
<FontAwesomeIcon icon="check-circle" size="lg"/>

Alicia
Visitante
Alicia

Obrigada! Estava acontecendo o mesmo comigo!

André Caetano
Membro
André Caetano

Tb tive o mesmo problema
Valeu

Jones Soares
Visitante
Jones Soares

Na parte react o texto 3. Entre na pasta do projeto:
cd tasks_spa
Ocorreto:
cd tasks_client

Yahgo
Membro
Yahgo

Bom dia! Na parte de “Incluindo dados Fake no banco de dados” dois comandos estão confusos, o primeiro é um para abrir o console do rails e o segundo é o “rails db:seeds” que deveria ser somente “rails db:seed”. Esse s no final pode ser difícil de identificar como erro (aconteceu comigo hahahahaa). Só esses detalhes mesmo, o tutorial está excelente 🙂

Lucas
Visitante
Lucas

Boa noite! Parabéns pelo material! Estou implementando a aplicação, não obtive nenhum erro, exceção, porém meu estilos, scss não estão sendo carregados. O bootstrap carrega corretamente porém o App.scss não carrega.

Feito com s2 por OneBitCode
%d blogueiros gostam disto: