14 agosto 2018 - 09:00 | Atualizado em 29 março 2023 - 17:31
Ruby on Rails é um framework gratuito cujo objetivo é acelerar o desenvolvimento de aplicações web. Utiliza o padrão de arquitetura MVC, tem Ruby como linguagem de backend (que dá ao framework uma excelente performance porque é desenvolvida em C) e é mantido e atualizado pela comunidade.
Saiba como criar um CRUD de uma agenda em poucos minutos.
Instalando o framework Ruby on Rails no Windows
Faça o download do instalador e instale o Ruby, MSYS2 e MINGW (a versão utilizada no tutorial foi a 2.4.4-1);
Faça o download e instale o nodeJS (a versão utilizada foi a 8.11.2);
Em um terminal, instale a GEM (biblioteca) do framework Rails com o comando gem install rails (a mais atual é a versão 5.2);
Para verificar que tudo foi instalado corretamente, ainda no terminal digite os comandos Ruby -v (o resultado deve ser parecido com: ruby 2.4.4p296) e Rails -v (deve retornar exatamente: Rails 5.2.0).
Começando o projeto
Nesse projeto, criaremos um CRUD (Create Retrieve Update Delete) de uma agenda de contatos. Esse artigo visa apenas ensinar o básico do framework, mostrar suas facilidades e fazer com que o leitor conheça essa ferramenta incrível de desenvolvimento.
MVC (Model View Controller): padrão de arquitetura que divide a aplicação em três partes interconectadas, separando a representação da informação do modo que ela é apresentada. View é a camada de interação com usuário, Model é a camada de manipulação e regra de negócios e o Controller é responsável por receber todas as requisições do usuário, processar informações e devolver para a view.
1. Criando o projeto via terminal
2. A resposta do terminal deve ser algo parecido com a imagem abaixo
3. Conhecendo o escopo da agenda de contatos
Nosso contato (contact) da agenda vai ter nome, email, telefone e um tipo (kind)… que pode ser família, trabalho, amigo, etc…
Cada tipo vai ter um nome ou descrição;
O telefone (phone) vai ser um campo do tipo string;
O endereço (address) é composto por Estado, Cidade e Rua.
4. Modelando o banco de dados de acordo com o projeto
Cada contato vai pertencer a um tipo;
Cada contato vai ter um telefone e um endereço;
Cada tipo vai ter um ou mais contatos;
O endereço pertence ao contato;
O telefone pertence ao contato.
Quando criamos a aplicação sem passar nenhum parâmetro para o Rails, o banco de dados padrão é o sqlite3. A configuração pode ser vista e editada no arquivo /config/database.yml
5. Usando Scaffold para criar o modelo no Rails
Utilizaremos o modelo padrão do rails e vamos criar os modelos em inglês, pois, quando quisermos relações de um para vários, basta fazer pequenas alterações nos models, deixando-os no plural para que o framework trate do banco de dados por nós. O scaffold nos ajuda a criar de uma vez as models, controllers, views e helpers (veremos mais a frente) do padrão MVC. No terminal digite:
rails g scaffold Kind description:string
rails g scaffold Contact name:string email:string kind:references rmk:text
o kind:references significa que existe uma chave estrangeira relacionando o contact com o kind
rails g scaffold Address street:string city:string state:string contact:references
o contact:references significa que existe uma relação com a tabela de contact
rails g scaffold Phone phone:string contact:references
a mesma regra pode ser aplicada aqui
Os códigos acima nos criam o tipo com uma descrição, um contato (com nome, email, uma referência para tipo e observações), endereço e telefone.
Perceba que quatro arquivos foram criadas na pasta /db/migrate:
Cada arquivo desses é uma “migração” com características das tabelas criadas ou editadas, como mostra a figura abaixo:
6. Aplicando as migrações no projeto através do terminal:
rake db:create
rake db:migrate
Esse comando pode ser digitado separadamente ou na mesma linha do terminal na ordem correta: rake db:create db:migrate
As migrações são uma maneira eficiente de alterar e dar um versionamento à estrutura de seu banco de dados de uma maneira extremamente eficiente. A cada mudança um novo arquivo de migração é criado, sendo assim, todos os desenvolvedores envolvidos naquele projeto poderão ver as alterações no banco de dados de acordo com seu histórico de migrações.
7 – Vamos verificar como nossa aplicação está desenvolvida até agora
No terminal, digite:
rails s
Caso tenha algum problema com o endereço passado, pode-se forçar passando mais um parâmetro pro terminal:
rails s -b localhost
A webpage de boas vindas do Rails deve aparecer. Agora, podemos alterar os endereços para verificar que nossas views do CRUD foram efetivamente criadas. Nosso framework segue o seguinte padrão para acesso:
http://localhost:3000/kinds
Aqui conseguiríamos ver todos os KINDS (tipos) cadastrados caso já tivéssemos feito algo anteriormente;
O modelo de acesso é http://localhost:3000/controller/action, por exemplo http://localhost:3000/kinds/new ou http://localhost:3000/kinds/edit;
Onde o controller é do modelo que criamos e a ação é se queremos editar, adicionar, deletar, etc;
Você pode alterar o kinds para os outros controllers (contacts, phones ou addresses). Perceba que o plural aqui é importante porque a página acessada exibe TODAS as informações já cadastradas daquele modelo, ou seja, todos os telefones, todos os contatos, etc.
8. Pare a execução atual do terminal e crie o controller de nossa página inicial com o comando:
rails g controller home index
9. Carregue a página inicial
Para que nossa página inicial seja carregada sempre que tentarmos acessar o link raiz de nossa aplicação, temos que alterar o arquivo /config/routes.rb, informando que a raiz é nossa home/index sempre no padrão controller#action:
10. Acessando agora o link raiz, temos o resultado:
11. Deixando nossa agenda mais útil
Vamos deixar nossa agenda mais útil e colocar um link para que o usuário acesse todos os quatro modelos criados. Para fazer isso, vá até o arquivo /app/views/home/index.html.erb e deixe ele assim:
O helper link_to “Descrição”, model_path faz o papel do link clássico do html
<a href=”http://localhost:3000/kinds“>Tipos</a> com o intuito de deixar o código mais limpo e legível.
O que o link_to faz aqui com o parâmetro kinds_path é nos direcionar para o endereço http://localhost:3000/kinds (ou outro model que desejamos acessar – phones_path, addresses_path…)
12. Vamos ver como ficou nossa aplicação
Verifique se todos os links estão funcionando normalmente.
13. Modificando nosso formulário de inserção de contatos – caixa de seleção.
Veja que de acordo com o que foi desenvolvido até agora, nós teríamos que digitar sempre o tipo a que aquele contato pertenceria:
Vamos criar uma caixa de seleção para que os tipos já cadastrados apareçam na hora da inserção:
Vá até o controller de contacts, crie uma função com o nome de sua escolha onde uma variável receba todos os tipos já cadastrados naquele modelo (Model.all):
o @kind_options_for_select pode ser visto localmente e pela view
o ruby já retorna o @kind_options_for_select para quem invocar essa função sem precisar da palavra reservada return
Adicione essa função options_for_select (ou o nome que você tenha criado) na função de new e de edit do controller:
Vá até o arquivo /app/views/contacts/_form.html.erb e altere o campo textfield do do kind_id pelo helper que vai criar a caixa de seleção:
o collection_select cria a caixa de seleção com os parâmetros :kind_id (do contato), @kind_options_for_select (que trouxemos do controller seguindo o padrão MVC), :id (do tipo) e :description (do tipo).
14. Criando as relações e propriedades restantes diretamente no model
Foi definido anteriormente que:
Um contato pertence a um tipo (previamente adicionado com o scaffold – kind:references)
Um tipo pode nenhum ou vários contatos
Um contato tem um telefone – endereço pertence a telefone ( previamente definido no scaffold – contact:references)
Um contato tem um endereço (previamente definido no scaffold – contact:references)
Atualizando os models de Kind e Contact:
Kind – antes
Kind – depois
Contact – antes
Contact – depois
15. Atualizar o controller de contacts
Atualizar o controller de contacts – contact_params para que na hora da criação de um novo, ele possa receber os atributos das outras tabelas (telefone e endereço).
Antes
Depois
16. Calma, estamos terminando!
Vamos agora atualizar nosso form para que na criação do contato, os campos de endereço e telefone já apareçam e sejam salvos. Adicione abaixo do collection_select dos tipos essa parte do código. Nela, podemos ver que criamos um formulário para os campos de endereço e telefone… e que para cada campo apareça sua label e seu tipo (todos por enquanto serão text_field).
17. Atualizar o controller de contato em new para que sejam gerados os campos que queremos vincular ao contato:
É exatamente o que o .build_campo faz. Esse objeto faz com que os campos de endereço e telefone apareçam na hora da criação de um contato.
18. Criando um HELPER
Criando um HELPER para que o campo de estados seja uma caixa de seleção simples, idêntica ao “tipos”. A diferença é que os estados são fixos, logo, podemos criar um helper que pode facilitar essa criação da caixa de seleção. Vá ao arquivo /app/helpers/application_helper.rb e insira:
Veja que ao criarmos o formulário dos campos de endereço, já criamos o campo do estado com um select na função options_for_states do helper application_helper.
19. Hora de testar tudo que foi feito até agora
Vá ao terminal e inicie a aplicação mais uma vez
Crie alguns tipos novos
Crie alguns contatos novos (veja que a caixa de seleção dos estados está funcional)
Edite e remova como quiser os novos contatos
Primeiro contato criado com sucesso!
Veja que no contacts_path, ou no link http://localhost:3000/contacts, ele criado já foi adicionado à lista de contatos.
Remova o contato e verifique que o CRUD está funcional:
20. Deixando o projeto mais “redondinho”
Veja que ao listarmos nossos contatos, o tipo não é mostrado, pois o que aparece é sua referência. Para resolver esse “problema”, vá ao arquivo appviewscontactsindex.html.erb e altere a linha <td><%= contact.kind %></td> por:
E veja como ficou:
Faça isso para as demais telas que você ache necessário como um exercício.
Conclusão
Com este artigo pudemos ver o desenvolvimento de um CRUD simples de uma agenda. Caso você tenha gostado do framework e pretenda estudar um pouco mais, deixo algumas sugestões de como esse sistema pode ficar mais robusto e intuitivo:
Melhore o front end com bootstrap;
Altere o model, controller e _form de contato para que ele possa ter vários telefones associados;
Faça um sistema de login (dica: gem devise).
Espero trazer mais conteúdos de RoR futuramente.
Recomendados para você
NFC: entenda o que é e como usar a tecnologia ...
Entenda o que faz e como contratar um cientista de dados ...
A Cedro Technologies utiliza cookies para melhorar a sua experiência de navegação, personalizar conteúdos e desenvolver iniciativas de marketing. Para informações sobre os tipos de cookies e para configurá-los de acordo com a sua preferência, clique em “Definições de cookies”, onde poderão ser habilitados e desabilitados conforme sua preferência. Para aceitá-los, clique em "Aceitar todos os cookies". Querendo saber mais, acesse nossa Política de Privacidade.
Cookies estritamente necessários
Os cookies estritamente necessários permitem um funcionamento adequado do nosso site, não coletando ou armazenando informações sobre você ou em relação às suas preferências. Normalmente, eles só são configurados em resposta a ações realizadas pelos usuários, como por exemplo salvar as suas preferências de privacidade, realizar login ou salvar informações para o preenchimento de formulários. Por essa razão, não é possível desabilitá-los.
Se você desativar este cookie, não poderemos salvar suas preferências. Isso significa que toda vez que você visitar este site, você precisará ativar ou desativar os cookies novamente.
Cookies de desempenho (Performance cookies)
Esse tipo de cookie coleta informações sobre como os usuários utilizam e navegam no site, como por exemplo:
Quais páginas os usuários acessam com mais frequência;
Se o usuário recebe mensagens de erro de nossas páginas.
Vale ressaltar que esse tipo de cookie não coleta informações que identificam o usuário. Todas as informações que esses cookies coletam são agregadas e, portanto, anônimas, sendo usados apenas para melhorar o funcionamento do site (medição e melhoria de desempenho do site).
Ative primeiro os Cookies estritamente necessários para que possamos salvar suas preferências!
Cookies de funcionalidade (Functional cookies)
Permitem que o site forneça funcionalidade e personalização aprimoradas. Eles podem ser definidos por nós ou por fornecedores terceiros cujos serviços adicionamos às nossas páginas.
Ative primeiro os Cookies estritamente necessários para que possamos salvar suas preferências!