Arquivo da tag: Rails5

Utilizando Concerns em Rails

O que é Concern?

Concern é um módulo utilitário do ActiveSupport, suportado pelas versões 3 e 4 do Rails e que permite e facilita o compartilhamento de código entre modelos. Além disso, é possível separar diversas responsabilidades de um Modelo, permitindo assim filtrar funções que são exclusivamente de um contexto do modelo em um Concern e importá-las.

Vamos exemplificar um caso onde temos um blog post e este post pode conter diversos votos (positivos ou negativos) e comentários. Os comentários também podem receber votos (positivos ou negativos).

A modelagem desse sistema ficaria basicamente dessa forma:
[code type=ruby]
# models/post.rb

class Post < ActiveRecord::Base validates :title, :content, presence: true has_many :votes has_many :comments end

[code type=ruby]
# models/comment.rb

class Comment < ActiveRecord::Base validates :content, presence: :true has_many :votes belongs_to :post end

[code type=ruby]
# models/vote.rb

class Vote < ActiveRecord::Base enum vote_type: [ :upvote, :downvote ] end

Neste exemplo fica claro que caso quisermos ter uma função que compute um voto para o comentário ou post, teríamos que criar uma função similar entre o modelo Post e o modelo Comment.

A partir dessa ideia, podemos criar um módulo chamado Votable que possui funções que serão executadas e compartilhadas pelos dois modelos.
[code type=ruby]
# models/concern/votable.rb

module Votable
extend ActiveSupport::Concern

included do
has_many :votes
end

def vote!
votes.create
end

def downvote!
votes.create(vote_type: :downvote)
end

def upvote!
votes.create(vote_type: :upvote)
end
end

Inserimos uma função genérica chamada vote! e duas outras funções para caso o voto seja específico: upvote! para votos positivos e downvote! para negativos.

E agora? Como conseguimos incorporar o Concern que acabamos de criar para os diversos modelos utilizados?

Basta incluir include Votable em cada modelo pretendido.

Por exemplo, para ser permitido o Post utilizar a função vote!, ficaria assim:
[code type=ruby]
# models/post.rb

class Post < ActiveRecord::Base include Votable validates :title, :content, presence: true has_many :comments end # models/comment.rb class Comment < ActiveRecord::Base include Votable validates :content, presence: :true belongs_to :post end

Com isso, se entrarmos no console, já conseguimos reproduzir o caso de uso.
[code type=ruby]
irb(main):003:0> post = Post.create(title: “Concern”, content: “Post”)
=> #
irb(main):004:0> post.vote!

É gerado um voto:
[code type=ruby]
irb(main):005:0> post.votes.last
=> #

Do mesmo modo funciona para o modelo Comment:
[code type=ruby]
irb(main):007:0> comment = Comment.create(content: “Concern”, post_id: 1)
=> #
irb(main):008:0> comment.vote!
=> #

Sucesso!

Outro exemplo de utilização seria se não tivéssemos comentários, porém muitas funções relacionadas a voto no modelo Post. Nesse caso, poderíamos colocar essas também em um Concern e importá-las para o modelo.

Pontos negativos

Utilizar a técnica de Concern pode trazer alguns malefícios. Por exemplo:

  • Iniciantes em projetos não compreendem o conceito facilmente, deixando a modelagem ainda mais confusa.
  • Se usado de forma errada, o código pode ficar confuso e de difícil manutenibilidade.
  • Confusão no conceito de como a função trabalha para mais de um modelo.
  • A má utilização pode adicionar complexidade desnecessária ao modelo – ao invés de retirá-la.

Lembre-se que existem outros casos de uso para o Concern. Estude bem a técnica para identificar se é a melhor solução para o seu contexto, sempre levando em conta seus pontos negativos.

Conclusão

Concern é um módulo muito interessante, principalmente para separar responsabilidades de classes complexas ou para compartilhar código entre modelos.

Neste post explicamos como utilizar Concern, exemplificando este módulo que foi útil para o nosso projeto em determinado contexto e pode ser interessante para o seu projeto.

Porém, é necessário usá-lo conscientemente e entender o porquê de estar sendo aplicado ao projeto, pois utilizá-lo de maneira errada adicionará mais complexidade ao projeto, dificultando o entendimento do sistema para pessoas que estão começando a mexer no projeto.

Você tem alguma experiência interessante utilizando Concerns? Compartilhe nos comentários abaixo!

Conteúdo oficial

Criando um CRUD com Angular 2 + Rails 5

Introdução ?

Os Apps profissionais seguem há algum tempo na direção de ter uma divisão entre o backend (API) e o front end (Cliente Web), recentemente foi lançado a versão 2 do Angular (que tem pouco a ver com a versão 1) e também a versão 5 do Rails (que tem muito a ver com a versão 4 ? ), nesse tutorial eu vou demonstrar como conectar essas duas tecnologias para criar um App incrível \o/.

Nós vamos criar um CRUD de uma pequena aplicação de FAQ, e para fazer isso mais rapidamente nós vamos usar uma ferramenta bem legal que chama Angular-CLI (command line interface), que vai nos permitir gerar o projeto Angular 2, os components e os services facilmente (similar aos generates do Rails).

O que vamos aprender?
  1. Como criar um CRUD em uma aplicação Rails 5
  2. Como criar um CRUD em uma aplicação Angular 2
  3. Como conectar o Rails 5 com o Angular 2
INGREDIENTES
Objetivos

Criar um Pequeno App que nos permita criar questões para um FAQ, com o front end em Angular 2 e o Backend no Rails 5.

Passo a Passo
  • Rails 5
    1. Criar o Projeto Rails Api
    2. Gerar o CRUD
    3. Incluir o CORS
  • Angular 2
    1. Criar o Projeto Angular usando o Angular-CLI
    2. Configurar nosso projeto
    3. Criar nossos components
    4. Criar nosso service
    5. Editar nossas views
    6. Conectar tudo isso ?
Mãos à Obra \o/
Parte 1 – Criando o projeto Rails 5

Primeiro vamos gerar o nosso projeto Rails 5 API que vai ser consumido via JSON pelo projeto Angular 2.

  1. Para começar, rode no seu console o comando para gerar o projeto:

    *a flag –api significa que o rails vai configurar o projeto como uma API pra gente

  2. Agora vamos gerar nosso scaffold, rode:
  3. Rode as migrations:
  4. Agora vamos configurar o CORS para que nosso APP possa receber chamada de outros domínios, primeiro no seu Gemfile adicione:

    *O que é CORS

  5. Rode o bundle, para instalar a Gem:
  6. Agora no arquivo config/application.rb, substitua o conteúdo por:
  7. Para testar, rode o servidor e visite http://localhost:3000/questions
  8. Pronto \o/, nossa aplicação Rails já está pronta. Agora vamos para o Angular 2 ?

 

Pausa para o Merchan do BEM! ?
BOOTCAMP ONE BIT CODE – SUBA DE LEVEL NO MUNDO DO RUBY ON RAILS

Este é o último final de semana para se inscrever no primeiro Bootcamp online do OneBitCode!
Neste curso, nós vamos criar do zero um site similar ao Airbnb usando Rails 5 como Api e Angular 2 como cliente Web.
O curso vai ter vídeo aulas semanais, live de 2 horas por semana, suporte total às dúvidas e um Slack exclusivo para os alunos desenvolverem network.
O curso vai ser ÉPICO, então confere a Landing Page dele e faça parte do grupo de alunos One Bit Code! \o/
Conheça o Bootcamp!

Parte 2 – Criando o App Angular 2

Agora sim começa a parte mais emocionante complicada, vamos criar nosso APP Angular 2 e para fazer isso vamos usar o Angular-CLI.

Dependências

Primeiro, vamos começar com as dependências.

  1. Você vai precisar ter o NPM instalado na sua máquina. Para instalar no Ubuntu:

    Para instalar no Mac:

  2. Agora você precisa instalar o Angular-CLI:
Criação do App

Finalmente, vamos a criação do App.

  1. Para gerar o projeto, rode na pasta desejada (fora do projeto Rails) no console:
  2. Agora vamos ver se tudo funcionou corretamente, dentro do projeto, rode no console:
  3. Acesse no seu browser, http://localhost:9000, deve aparecer uma mensagem dizendo que funcionou ?
  4. Agora vamos gerar nossos components, rode:

    *Os components são o coração do Angular 2, eles são a principal maneira que nós criamos elementos, definimos as views e a lógica

  5. Depois rode:
  6. Agora vamos gerar nosso Modelo de dados, crie uma pasta no caminho “/src/app/questions/” com o nome shared (“/src/app/questions/shared”).
  7. Depois crie um arquivo dentro dessa pasta chamado “question.ts” e coloque o seguinte conteúdo:
  8. Vamos criar nosso Service (ele serve para o Angular 2 conversar com a API), no console rode o comando:
  9. Agora vamos adicionar o router outlet para fazer nossas rotas funcionarem, no nosso arquivo ‘src/app/app.componet.html’ substitua o conteúdo por:
  10. Agora nós vamos criar o nosso arquivo de rotas (que vai gerenciar nossas URLs), no caminho “src/app/” crie o arquivo “app.routing.ts” e preencha ele com o seguinte conteúdo:
    *Note os comentários no código

  11. Agora nós precisamos alterar nosso arquivo ‘src/app/app.module.ts’ para incluir nosso arquivo de rotas e algumas dependências do projeto, seu arquivo deve ficar assim:
    *Note os comentários no código

  12. Agora nós vamos editar nossos components, para começar vamos editar nosso componente de listagem, no arquivo ‘/src/app/questions/questions.component.ts’ substitua o conteúdo por:
    *Note os comentários no código

  13. Pronto, a parte lógica da listagem está ok (exceto pelo service ainda), agora vamos editar a aparência da aplicação, no arquivo ‘/src/app/questions/questions.component.html’ adicione o seguinte html:
  14. Agora vamos para o próximo component, no arquivo /src/app/questions/question-form/question-form.component.ts’ cole o seguinte código para podermos editar e criar questions:
    *Note os comentários no código

  15. Pronto, a parte lógica da edição/criação está ok (exceto pelo service ainda), agora vamos editar a aparência da aplicação, no arquivo ‘/src/app/questions/question-form/question-form.component.html’ adicione o seguinte html:
  16. Excelente, nossos components estão ok, agora vamos configurar nosso service. No arquvio ‘src/app/questions/shared/questions.service.ts’ susbstitua o conteúdo pelo seguinte código:
    *Note os comentários no código

  17. Pronto \o/, agora vamos testar.
  18. Rode no seu console:
  19. Acessando no browser, seu resultado deve ser similar a este:
    captura-de-tela-de-2016-12-10-02-49-37* É claro que não é um Faq muito bonito, mas ele funciona e é suficiente para demonstrar a integração ?
  20. Agora você pode criar novas questões, editá-las e deletá-las \o/, parabéns nós conseguimos!

 

CONCLUSÃO

Pronto, conseguimos fazer o nosso não tão simples CRUD, mas valeu a pena :). É claro que esse é um tutorial introdutório apenas para te dar uma visão geral de como o Angular 2 e o Rails 5 podem se comunicar e também para abrir um pouco a sua mente para a estrutura do Angular 2. Mas tenho certeza que você notou a riqueza dos dois frameworks e as possibilidades ilimitadas que eles trazem se usados juntos ?

Como de costume o Código completo da aplicação está no Github, caso você queria clonar o código, clique aqui para ver a parte do Angular 2 e clique aqui para acessar a parte do Rails 5. Aproveita e me segue lá \o/

Apenas informando novamente que o Bootcamp do OneBitCode está com as inscrições abertas (quase fechando já) e nesse bootcamp nós vamos nos aprofundar muito no Rails 5 e também no Angular 2 (fullstack) através da criação de um clone do Airbnb, então se você ainda não viu a landing page, VEJA CLICANDO AQUI. Vai ser épico, não deixe essa chance passar! \o/

Se você ficou com dúvidas ou tem sugestões de posts para o Blog comenta aí em baixo ou me adiciona no Facebook clicando aqui.