Vue.js + Ruby On Rails: Seu primeiro App em 10 minutos

Vue.js + Ruby On Rails: Seu primeiro App em 10 minutos

O Vue.js é um framework que vem ganhando cada vez mais espaço no mundo JS devido a sua simplicidade e performance, somando essa ferramenta fantástica com o Ruby on Rails podemos desenvolver projetos extremamente profissionais.

Nesse tutorial rápido você vai aprender a criar o seu primeiro APP (Vue.js + Rails) e vai poder testar a integração entre essas duas tecnologias incríveis, bora?

 

O que vamos criar?

Criaremos uma página de cadastro de dados pessoais e profissionais de uma pessoa (um mini-currículo), onde teremos uma pré-visualização em tempo real do resultado final do currículo de acordo com a inserção de dados do usuário.

Quais ferramentas vamos usar?

  • • Ruby On Rails 5.2
  • • Vue.js
  • • Bulma
  • • Yarn

 

Breve Introdução ao Vue

O Vue, assim como o Angular, é um framework voltado para manipulação do front-end com um código bem enxuto. Ele utiliza o conceito de two-way data binding, onde ocorre o seguinte: existe uma View e um model JS e tudo o que acontece no model, é refletido a View e tudo que ocorre na View é refletido no model.

Este mapeamento Model-View é feito por meio de atributos que adicionamos nas tags html mapeado um objeto que criamos no arquivo JS.

Vamos usar como exemplo o seguinte:

Neste trecho de código nós inicializamos o Vue e passamos os parâmetros el para deixar o Vue disponível naquele elemento JS, um parâmetro data que deve retornar os objetos que deixaremos disponíveis para o DOM, permitindo o two-way data binding e um parâmetro methods que são os métodos que deixamos disponíveis para chamarmos através dos eventos do DOM.

Com este código do Vue, podemos ter um codigo HTML assim:

 Temos alguns itens importantes neste código:

• v-model – fazemos uma ligação entre o valor da variável obj.name ao que está sendo digitado no input
v-if – só mostra o conteúdo dentro da tag se a condição for atendida
v-on: – dispara um método quando o evento é disparado. Com o v-on:click, ele detecta o evento click no botão e chama o método sayHi que disponibilizamos no atributo methods do Vue.

 

Antes de começarmos eu tenho um convite para você

No dia 21/05 vai rolar um evento (online e gratuito) muito importante do OneBitCode onde criaremos um site baseado no Netflix usando Ruby On Rails + Vue.js do zero ao deploy, então aproveita para se cadastrar nele clicando na imagem a baixo:

Vue.js

Desenvolvendo nosso App

Por se tratar do primeiro post da série sobre Vue.js + Rails faremos uma introdução básica aos principais conceitos do Vue.js e evitaremos utilizar muitos recursos.

Neste post, vamos colocar o Vue para funcionar dentro do Rails.

 

Criando nosso projeto e preparando nosso scaffold

1. Vamos criar nosso projeto

 

2. Criando nosso scaffold de User

 

3. Agora iremos criar o database e rodar as migrations:

 

Instalando as dependências

1. No seu Gemfile, adicione a gem webpacker:

 

2. Rode o bundle:

 

3. Agora podemos instalar nossas bibliotecas, rode os comandos:

*Pode demorar um pouco para baixar os pacotes

 

4. Vamos adicionar duas dependências importantes para o bom funcionamento do Vue em conjunto com o Rails:

 

5. Por último, vamos instalar o Bulma que irá facilitar a construção do nosso front-end:

 

6. Para que o Rails tenha acesso as classes do bulma, adicione ao seu application.css

 

Integrando com o Vue

1. Antes de tudo, atualize o application.html.erb colocando:

Na tag head adicionamos o javascript_pack_tag que possibilita a leitura do nosso código dentro do arquivo hello_vue

 

2. Substitua o código do seu arquivo app/javascripts/packs/hello_vue.js por:

Neste código, nós iniciamos o nosso projeto:

Fizemos os imports das dependências incluindo o TurbolinksAdapter e o VueResource que instalamos anteriormente e executamos o Vue.use para garantir o funcionamento das bibliotecas dentro do Vue.

Iniciamos nosso método principal e garantimos o funcionamento com Turbolinks, através do evento turbolinks:load criamos a variável element com um elemento do DOM para iniciarmos o Vue e deste elemento nós também pegamos o valor de um data attribute com o objeto user e estamos retornando na função data do Vue para que fique disponível no DOM.

 

3. Agora vamos adicionar um método ao nosso objeto Vue. Substitua o código do hello_vue.js por:

O método saveUser é chamado no click do botão submit do nosso form que veremos mais pra frente e dentro dessa função fazemos uma requisição do tipo post em /users que é a url do users#create gerada pelo nosso scaffold (passamos o parâmetro user com as informações do formulário.)

Temos ainda duas funções de parâmetro, uma de sucesso que redireciona para a página show do record criado, usando o Turbolinks.visit e uma de erro, que exibe o erro no console.

 

4. Vamos fazer uma pequena alteração no nosso arquivo app/views/users/new.html.erb:

 

5. Agora é a vez de modificar o nosso arquivo views/users/_form.html.erb, substitua seu conteúdo por:

Iniciamos com uma (content_tag div) que possui o id user-form, que é id que o Vue busca através da opção el na inicialização e um atributo data onde passamos o objeto user que será enviado pro Vue.

 

6. Agora vamos adicionar à nossa view (views/users/_form.html.erb) a parte de pré visualização do currículo do usuário, seu arquivo deverá ficar dessa forma:

No Vue podemos utilizar a notação {{ var }}, que é a forma de mostrar na nossa view uma variável que vem do Vue.js, então {{ user.name }} irá mostrar o valor atribuído a essa variável.

 

7. Por ultimo adicione ao seu users.scss

Resultado

Depois de seguir os passos anteriores seu APP deve ter ficado desta forma:

rails

 

 

 

Conclusão

Criamos um exemplo simples, porém já é possível perceber a praticidade do Vue.js e como é fácil fazê-lo funcionar dentro do Rails (caso você queira saber mais sobre ele acesse nosso post introdutório: primeiro contato com o Vue)

Compartilhe esse post com seus amigos e comente aí embaixo, seu feedback é muito importante para nós! 🙂
Obrigado por nos acompanhar,
Estamos juntos \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/

maio 16, 2018

16
Deixe um comentário

avatar
7 Comment threads
9 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
10 Comment authors
FranciscoAndré Gonçalves RodriguesCristiAllanFabioLuan Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Romenig Lima Damasio
Visitante
Romenig Lima Damasio

muito bom, vlw pelo tuto!!
só pra constar, quando vai editar ele cria um novo post com os dados existentes.

Leonardo Scorza

Legal Romening,
Ficamos felizes que você curtiu \o/

Edson Lima
Visitante
Edson Lima

Pode me ajudar com este erro:

Showing /Users/edsonlima/projetos/rails_vue/cv_example/app/views/layouts/application.html.erb where line #6 raised:

undefined local variable or method `csp_meta_tag’ for #<#:0x007ff0d49a6808>
Did you mean? csrf_meta_tag
csrf_meta_tags

Extracted source (around line #6)

CvExample

Leonardo Scorza

E ai Edson, como vai?
Qual a sua versão do Rails?

Sergio Lima
Visitante

Parabéns pelo ótimo artigo!
Por que escolheram o Bulma? Alguma razão especial?
Obrigado!

Jakeline
Membro
Jakeline

Olá.
Estou usando o Cloud9 para criar os projetos.
Quando executei o comando bin/yarn install me deparei com o seguinte erro:
Yarn executable was not detected in the system.
Download Yarn at https://yarnpkg.com/en/docs/install

Como resolvo já que uso uma IDE no navegador?

Luan
Visitante
Luan

Parabéns pelo artigo!
Rodei todos os comandos corretamente, porém estou com um problema:
Webpacker::Manifest::MissingEntryError in Users#new
Showing /home/luan/projetos/cv_example/app/views/layouts/application.html.erb where line #10 raised:

Webpacker can’t find hello_vue.js in /home/luan/projetos/cv_example/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the webpack -w or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker’s config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
Extracted source (around line #10):
8
9
10
11
12

Rails.root: /home/luan/projetos/cv_example

André Gonçalves Rodrigues
Membro
André Gonçalves Rodrigues

Estou com o mesmo problema Luan, conseguiu resolver?

Fabio
Visitante
Fabio

Estou com um problema na hora de gem ‘webpacker’ diz que o diretorio não existe, ja dei sudo gem install webpacker e gem install webpacker, só que ate agora nada

Francisco
Visitante
Francisco

Fala Galera, gostei do tutorial, bem bacana. Só acho que encurtaria alguns passos se já criassem a aplicação usando os atalhos que o rails fornece, como por exemplo: rails new cv_example -d postgresql –webpack

Feito com s2 por OneBitCode
%d blogueiros gostam disto: