Rails + Bulma: Criando um sistema de votação online (+Admin)

Neste tutorial você vai aprender como desenvolver um sistema de votação completo e um sistema administrativo associado para gerenciar os usuários, campanhas e likes usando Ruby On Rails e Bulma.

Através deste projeto você vai evoluir suas habilidades na criação de sistemas com Ruby On Rails, criação de sistemas administrativos (que são fundamentais na maior parte dos projetos) e uso do javascript para fazer chamadas assíncronas para o backend, então se prepare e venha com a gente construir esse projeto em 20 minutos 😁

 

Ferramentas

1. Ruby 2.5
2. Ruby on Rails 5.2
3. yarn
4. Devise
5. Rails admin
6. Active Storage

 

Detalhes do APP

Vamos desenvolver um sistema de votação que vai permitir que os usuários votem aprovando ou desaprovando uma campanha que criaremos na parte administrativa, esse APP também nos permitirá bloquear essa campanha quando ela chegar ao final e ver o resultado da votação.

Cada tipo de usuário terá uma função definida no app, a função do administrador é criar, bloquear, editar e excluir a campanha enquanto o usuário, tem o papel de votar se gostou ou não gostou de uma determinada campanha.

Para o desenvolvimento das telas de votação o sistema contará com o framework bulma para facilitar a criação de páginas responsívas e para a criação do administrativo usaremos a gem do Rails Admin que nos permitirá criar um admin completo em poucos minutos.

Também utilizaremos o Devise para o controle de sessão e o Active Storage para salvar as imagens das campanhas.

Para uma explicação mais aprofundada sobre o Rails Admin dê uma olhada no curso completo do OneBitCode: Criando um sistema Administrativo Completo com Rails Admin

 

Tela de votação

 

Admin do projeto

 

 

 

Passo a Passo da criação do APP

 

Preparando nossa Aplicação

1. Agora vamos criar um novo projeto com o nome your vote.

2. Entre na pasta do projeto que foi criado.

3. Adicione no Gemfile:

4. Instale as gems com o seguinte comando:

5. O arquivo package.json deve ficar com o seguinte conteúdo (estamos incluindo o Bulma, Fontawesome e jquery):

O Yarn é um gerenciador de pacotes javascript rápido, seguro e confiável que foi integrado no rails > 5.1 para facilitar ainda mais a gestão das dependências. Assim como o Bundler o Yarn possui um arquivo onde as dependências são declaradas chamado package.json

6. Para instalar as dependências listadas no package.json:

7. Para importar, deixe o arquivo _app/assets/javascripts/application.js_ com o seguinte conteúdo:

8. Renomeie o arquivo application.css para application.scss:

9. Para realizar os imports, o arquivo app/assets/stylesheets/application.scss deve ficar com o seguinte conteúdo:

10. Para instalar o Active Storage (gerar a migration dele) rode no console:

11. Para configurar o devise no seu app execute o seguinte comando no terminal:

12. Para instalar o Rails Admin rode no console.

13. Ao rodar o comando, o Rails Admin perguntará em qual rota você gostaria de instalar. Neste tutorial deixaremos em /admin como no default, para isso aperte enter, mas você poderá escolher outra rota ou até mesmo instalar na home.

 

Criando os modelos e configurando o Rails Admin

1. Vamos gerar os modelos do sistema.

2. Para configurar o acesso ao administrativo substitua o arquivo config/initializers/rails_admin.rb por:

Para que o Rails Admin libere o acesso correto ao user admin, usamos as seguintes configurações:
config.authenticate_with: informamos ao RailsAdmin que o usuário tem que estar devidamente autenticado.
config.authorize_with: informamos que o usuário tem que ser do tipo admin para ter a autorização de usar o administrativo.

3. Para criar o banco de dados e as tabelas do app rode no terminal o seguinte comando:

4. Adicione ao modelo user em app/models/user.rb.

5. Em app/models/campaign.rb substitua:

No model Campaign é onde utilizaremos o Active Storage para armazenar as fotos, para isso adicione ao modelo has_one_attached.

Campaign pertence ao usuário, para criar um modelo que pertence a outro modelo utiliza-se o references.
ex: rails g model campaign user:references

O modelo campaign pode possuir mais de um like, então para funcionar corretamente utilizamos o has_many: likes.

Utilizamos validates_presence_of para informar que aquele atributo não pode ser nulo.

Foi utlizado um callback before_update, o método is_blocked foi criado para verificar se aquela campaign está bloqueada, se a campanha estiver bloqueada será abortado todo o processo de update. Com esse método conseguimos garantir que não ocorrerá nenhuma alteração na campanha depois do bloqueio da mesma.

6. Substitua o código do modelo like em app/models/like.rb:

Nesse modelo também temos um callback before_update, o método is_blocked foi criado para verificar se à campaign que usuário está tentando votar apresenta-se bloqueada, se a campanha estiver bloqueada nenhum usuário irá conseguir realizar a votação.

 

 

Preparando a Campaign

1. Crie um controller com o nome campaigns com os métodos index e show usando o seguinte comando:

2. Para criar o controlador do like rode no terminal:

3. Substitua o código de app/controllers/applications_controller.rb por:

Como adicionamos o atributo name, precisamos informar para o devise que o método sing_up irá receber um parâmetro novo, para isso adicionamos o método configure_permitted_parameters.

4. Troque o código do arquivo app/controllers/campaigns_controller.rb por esse:

5. Substitua o código do arquivo app/views/campaigns/index.html.erb por esse:

Esse código será responsável por mostrar todas as campanhas sendo que a variável @campaigns foi instanciada no método index do controller campaign.

6. Substitua o código do arquivo app/views/campaigns/show.html.erb por:

Esse código será responsável por mostrar de forma detalhada uma determinada campaign.

7. Crei um arquivo _campaign.html.erb em app/views/campaigns e adicione:

Aqui será executado pelo código presente no index.html, <%= render @campaigns %>. Nesta parte ocorrerá a criação, com o auxílio do framework Bulma, dos cards da campaing.

 

Customizando o Devise

1. Nesta parte iremos customizar as telas do devise para isso vamos gerar as views do devise.

2. Em app/views/devise/registrations/new.html.erb troque por:

3. Em app/views/devise/sessions/new.html.erb troque por:

 

 

Criando o Menu principal

1. Vamos criar uma pasta chamada shared em app/views/ e um arquivo dentro da pasta chamado _menu.html.erb e dentro do arquivo coloque:

Esse código é resposável por criar o menu do sistema com as opções: Home, Log in, Sign up, Logout e o administrativo caso o usuário seja o administrador.

2. Atualize o arquivo app/views/layouts/application.html.erb com:

 

 

Estilizando as Views

1. Agora vamos ajustar as views alterando o scss, em app/assets/stylesheets/application.scss troque por:

O @import “./**/*”; está importanto todos os arquivos que esteja dentro da pasta stylesheets

2. Em app/assets/stylesheets/campaigns.scss coloque:

3. Crie um arquivo devise.scss em app/assets/stylesheets/ e adicione:

 

 

Implementando o Voto (Javascript e Controller)

1. O usuário irá realizar a votação na tela show da campaign e para realizar a requisição usaremos js, em app/assets/javascripts/ crie um arquivo campaigns.js e coloque:

Essas funções são responsáveis por: atualizar o voto da campaign caso o usuário já tenha votado, pegar o evento click e realizar as trocas dos ícones e enviar a escolha do usuário, se gostou ou não gostou, para os métodos create ou update do controlador like.

Importante: caso exista algum arquivo .coffee em app/assets/javascripts, excluí-los.

2. Em app/controllers/like_controller substitua por:

3. Em app/controllers/application_controller troque por:

Como estamos fazendo requisição via ajax é necessário adicionar skip_before_action para evitar o erro InvalidAuthenticityToken

4. Agora para finalizar o desenvolvimento vamos alterar o arquivo routes em config/routes.rb por:

 

 

Testando nossa Aplicação

1. Execute o seguinte commando e abra o browser em https://localhost:3000.

 

2. Crie um usuário e acesse a página de listagem de campanhas:

A página ainda está vázia porque não criamos nenhuma campanha.

 

3 – Pare o servidor e abra o rails console (digitando rails c) e rode nele:

Transformamos nossa usuário em admin.

 

4 – Suba novamente o servidor e visite http://localhost:3000/admin

 

5 – Crie uma nova campanha (com nome, descrição, imagem e user como dono):

 

6 – Visite http://localhost:3000 e veja que sua campanha está na listagem.

 

7 – Entre nela e faça seu voto o/

 

8 – Edite ela no admin para bloqueá-la (assim podemos ver a contagem final de votos):

 

9 – Visite novamente sua campanha.

 

10 – Pronto, agora você pode deixar online, criar suas campanhas e compartilhar o link 😀

 

 

Conclusão

Através da criação deste sistema de votação conseguimos perceber como o Rails Admin pode facilitar e acelerar a criação de um projeto quando precisamos desenvolver a parte administrativa e como o Bulma nos permite criar interfaces bonitas e responsívas facilmente.

Se você gostou do projeto ou tem alguma dúvida ou sugestão deixe um comentário ai em baixo para sabermos, se possível divulgue este artigo para seus(uas) amigos(as) programadores(as) para espalhar o conhecimento.

Muito Obrigado 😁

 




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/

junho 24, 2019

5
Deixe um comentário

avatar
2 Comment threads
3 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Leonardo ScorzathiagoAbner Soares Alves Junior Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
thiago
Visitante
thiago

Não é possivel desbloquear um campanha que foi bloqueada.
“Campaign failed to be updated
-”

Para deletar uma campanha com votos, acrescentar “dependent: :delete_all” no “has_many :likes” do Model da campanha

Leonardo Scorza

Obrigado pela contribuição,
Inclui no artigo o delete_all 🙂

thiago
Visitante
thiago

Só uma obs, vc colocou no delete_all no model User e não no Campaign.

Abner Soares Alves Junior
Visitante
Abner Soares Alves Junior

Parabéns mais uma vez pelo tutorial. Um adendo que poderia fazer é nas views que exibem campaign você poderia adicionar e apresentar da forma abaixo, para caso o usuário não adicione imagem:

Leonardo Scorza

Obrigado por acompanhar o tutorial o/

Feito com s2 por OneBitCode
%d blogueiros gostam disto: