Cocoon: Crie facilmente Forms dinâmicos no Rails

Cocoon: Crie facilmente Forms dinâmicos no Rails

Muitas vezes precisamos em um único formulário salvar registros em diferentes tabelas do nosso banco de dados (exp: criar um usuário com múltiplos telefones) e dentro do Rails podemos fazer isso usando os Nested Attributes.
Porém, quando queremos deixar o usuário escolher quantos registros ele vai querer gravar (exp: Um usuário que deseja salvar 3 telefones) nós precismos deixar a tela dinâmica (permitindo que o usuário adicione mais campos de telefone) e ai é que a gem Cocoon vem nos ajudar.

Essa gem facilita a criação de formulários dinâmicos via jQuery no Rails, ou seja, ao invés de precisarmos criar um arquivo javascript para incluir esses campos extras ela faz isso por nós com maestria.

Então neste post nós iremos entender a estrutura da gem Cocoon e veremos o quanto ela pode agilizar nosso desenvolvimento de formulários.

Ferramentas

  • ruby 2.4.2
  • rails 5.1
  • cocoon (gem)
  • yarn


O que vamos criar?

Nesse exemplo iremos criar um registro de usuários e suas experiências profissionais, onde você poderá inserir quantas experiências profissionais desejar para um usuário através do uso do Cocoon \o/

Prepara o ambiente ai para codar e vem com a gente nessa jornada \o/

Criando nosso App de exemplo

Criando o projeto e suas configurações iniciais

1- Primeiro vamos gerar nosso projeto, no seu terminal rode o comando:

2 – Entre no projeto:

3- Vamos criar nosso banco de dados, rode:

4- Agora vamos criar nosso scaffold de user e nosso model para salvar as experiências profissionais de cada User

a- Rode no seu terminal:

b- Rode no seu terminal:

4- Rode as migrations

Instalando as dependências e o cocoon

1- Para instalar o jquery, vamos usar o yarn, rode no seu terminal:

PS: Se você ainda não tem o yarn instalado, abra esse link e instale:
https://yarnpkg.com/lang/pt-br/docs/install/

2- No seu gemfile adicione a linha:

3- Rode no console:

4- Atualize seu app/assets/javascripts/application.js colocando:

Criando nosso app \o/

Obs: Deixei comentários nos códigos e detalhes a baixo deles para você entender cada ponto da implementação, leia com atenção.

1- No seu Controller users_controller.rb substitua o conteúdo por:

Obs: Dessa forma estamos autorizando a request a aceitar parametros de experiences, o param _destroy é para que ele permita deletar o nested quando clicarmos no link de apagar uma experiência.

2- Substitua o conteúdo do seu model User para:

3- Para incluir a adição dinâmica das experiencias vamos substituir o conteúdo de app/views/users/_form.html.erb por (atenção aos comentários no código 🙂 ):

4- Agora crie uma partial no seguinte patch /app/views/users/_experience_fields.html.erb e insira o código a baixo nela.
Obs: Essa partial será carregada pela gem cocoon quando o usuário quiser adicionar mais campos de experiencia:

5 – Pronto \o/, agora para complementar vamos incluir alguns callbacks.

Usando os callbacks do cocoon

Para customizar ainda mais o comportamento dos nosso forms nós podemos usar alguns callbacks com o cocoon, esses callbacks são funções javascript que rodam após um evento (antes da inserção da partial, após a inserção e etc). Então bora:

1- Crie um arquivo app/assets/javascripts/cocoon_callbacks.coffee e insira o seguinte conteúdo:

Nesse exemplo usamos os callbacks after-insert e o before-remove para criar pequenas animações na nossa tela, ainda existem os métodos before-insert e o método after-remove que você também pode utilizar. =)

2 – Agora que nós criamos nosso callback já podemos ver o resultado no browser, para subir o servidor rode:

3 – Visite http://localhost:3000/users para ver como ficou seu form.

Bônus – Melhorando nosso layout com Materialize

1- No seu terminal rode o comando:

2- No seu arquivo app/assets/stylesheets/application.css adicione:

3- Atualize o conteúdo do seu arquivo app/assets/stylesheets/users.scss para:

4- Atualize o código do seu arquivo app/views/users/_form.html.erb pelo código a baixo:

Obs: Preste bastante atenção nas classes css que usamos para entender as alterações de layout feitas, caso tenha alguma dúvida você pode ler sobre todas mais detalhadamente na documentação do materialize

5- Atualize seu arquivo views/layouts/application.html.erb para:

6 – Pronto, nosso app está funcional, e com um layout apresentável, dá uma olhada como ficou rodando:

7 – Visite http://localhost:3000/users para ver como ficou seu form.

 

nested attributes

Fixando o que você aprendeu

Para você exercitar os conhecimentos que adquiriu nesse post eu separei dois desafios pra você:

  1. Use o conhecimento aprendido para implementar formulários dinâmicos para o usuário adicionar telefones.
  2. Para praticar suas habilidades no front-end, atualize a view da action show para mostrar todos os dados referentes a um usuário(experiences e phones).

Depois que finalizar os desafios poste nos comentários o link para o repositório no Github onde seu projeto está para compararmos as diferentes implementações \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/



Conclusão

Aprendemos como implementar forms dinâmicos facilmente usando o cocoon, como usar callbacks para reagir as mudanças no form e como customizar tudo isso para deixar seu form ainda mais incrível.

Se você gostou desse conteúdo compartilha com outros programadores que assim como você estão buscando desenvolver suas habilidades, será de grande ajuda \o/

Caso você tenha se interessado pelo Yarn durante esse tutorial e ainda não conhece a fundo ele, veja esse nosso post sobre ele: Instalando pacotes no Rails com Yarn (Jquery, Bootstrap e Materialize)

Até breve 🙂


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 2, 2018

5
Deixe um comentário

avatar
4 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
AlbertoFitflops Sale Clearance UKlailsonLeonardo ScorzaMarcelo Tenório De Souza Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Marcelo Tenório De Souza
Membro
Marcelo Tenório De Souza
Leonardo Scorza

Boaaaa \o/

lailson
Membro
lailson

Como eu faço caso meu User seja gerado pelo Devise ?

trackback

Fitflops Sale Clearance UK

Thank you for another excellent post. Where else could anyone get that type of info in such an ideal way of writing? I have a presentation next week, and I am on the look for such information.

Alberto
Visitante
Alberto

Não acontece nada quando clico em “link_to_add_association” ou “link_to_remove_association”. Tem ideia do que pode ser?

Feito com s2 por OneBitCode
%d blogueiros gostam disto: