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/

0 0 vote
Article Rating
janeiro 17, 2020
Subscribe
Notify of
guest
18 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Romenig Lima Damasio
Romenig Lima Damasio
2 anos atrás

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

Leonardo Scorza
2 anos atrás

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

Edson Lima
Edson Lima
2 anos atrás

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
2 anos atrás
Reply to  Edson Lima

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

Sergio Lima
2 anos atrás

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

Jakeline
2 anos atrás

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?

Jakeline
2 anos atrás
Reply to  CristiAllan

Obrigada.

Utilizei o comando : curl -o- -L https://yarnpkg.com/install.sh | bash -s — –nightly
Link: https://yarnpkg.com/en/docs/install#alternatives-nightly

Luan
Luan
2 anos atrás

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
Reply to  Luan

Estou com o mesmo problema Luan, conseguiu resolver?

Fabio
Fabio
2 anos atrás

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
Francisco
2 anos atrás

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

Jhonatan Petronilho
1 ano atrás

Olá meu amigo. Eu queria muito assistir a essa apresentação: Netflix usando Ruby On Rails + Vue.js do zero ao deploy.

Gratidão!

Marco Castro
1 ano atrás

Como posso ter acesso ao minicurso “Netflix usando Ruby On Rails + Vue.js do zero ao deploy” ?

Feito com s2 por OneBitCode
18
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: