www.cjr.org.b
r
@CJR_UnB
Ruby on Rails
• Introdução ao Ruby• Estruturas da Linguagem• Introdução ao Rails• Estruturas do Framework• Exercício Prático
– Instalação– CRUD– Associações– Banco de Dados
TópicosCurso – Ruby on Rails
Curso – Ruby on Rails
• Linguagem de programação criada em 1993 por Yukihiro Matz
• Open Source• Tipagem dinâmica• Linguagem de alto nível• http://www.ruby-lang.org/
Curso – Ruby on Rails
• Totalmente Orientada a objetos– Tudo é objeto– O número 5 é um objeto da classe Fixnum– Não existem tipos básicos (int, char)
• Linguagem de script dinâmica e interpretada– Perde um pouco em performance
Curso – Ruby on Rails
• Não é necessário declarar variáveis• Variáveis não “tipadas”• Sintaxe simples• Garbage Collector (Gestão de memória automática)• IRB – Interactive Ruby Shell
Curso – Ruby on Rails
Orientação a objetosCurso – Ruby on Rails
Curso – Ruby on Rails
Curso – Ruby on Rails
Curso – Ruby on Rails
Quer aprender mais?
• http://www.ruby-lang.org/• http://groups.google.com/group/rubyonrails-talk• http://groups.google.com/group/rails-br• http://www.google.com/• Apostila Caelum
Curso – Ruby on Rails
O que é Ruby on Rails?
Curso – Ruby on Rails
• Framework MVC ( Model-View-Controller) para desenvolvimento Web
• Desenvolvido em Linguagem Ruby• http://guias.rubyonrails.pro.br/• http://rubyonrails.org/
Curso – Ruby on Rails
• Criado em 2004 por David Heinemeir• Conceitos
– DRY (Don’t Repeat Yourself)– Convention over Configuration
• Exemplo: Blog– http://media.rubyonrails.org/video/rails_take2_with_sound.mov
Histórico
Curso – Ruby on Rails
• O rails é um framework composto por 5 outros frameworks:– Active Record (Model)– Active Pack (ActionController e ActionView)– Action Mailer– Active Support– Active Resource
Curso – Ruby on Rails
• O rails é uma RubyGem• Gem é um código ruby empacotado ( similar a
um plugin)
Curso – Ruby on Rails
• Mãos à obra
Curso – Ruby on Rails
• Qual a idéia: Desenvolver uma aplicação parecida com um blog:– Conexão com o Banco de Dados (Mysql)– CRUD’s de Usuários, Posts e Amizades– Interface amigável– Associações entre Entidades
O Foco
Curso – Ruby on Rails
• Ruby– Linux: sudo apt-get install ruby– Mac OS X: sudo port install ruby– Windows: One-Click-Installer
• http://www.ruby-lang.org/pt/downloads/
• Testando:– >ruby –v
• ruby 1.8.7 (2010-06-23 patchlevel 299) [i386-mingw32]
– >gem –v• 1.3.7
– > irb –v• irb 0.9.5 (05/04/13)
Instalação
Curso – Ruby on Rails
Instalação• Rails
– No terminal: • gem install rails –v 2.3.5
• MySQL– http://dev.mysql.com/downloads/ ou – Xampp, Lampp, Wampp....
• MySQL-Ruby Driver
Curso – Ruby on Rails
• Para não complicar muito o curso não iremos utilizar nenhuma IDE, somente o prompt de comando ( terminal ) e um editor de texto.
• IDE’s para Rails: Aptana Rad Rails, RubyMine, TextMate(Mac)
IDE
Curso – Ruby on Rails
• Abra o terminal
• -d mysql Indica qual o SGDB iremos utilizar
Criando o Projeto
Curso – Ruby on Rails
• Abra o arquivo “database.yml” que está na pasta blog/config
• Edite as configurações do seu SGBD:
Curso – Ruby on Rails
• Agora vamos mandar o rails criar o banco de dados
• Rake é uma ferramenta de construção (build), similar a um make.
Curso – Ruby on Rails
• Vamos criar agora o modelo para nossa entidade Post.
Model: Post
Curso – Ruby on Rails
Model: Post post.rb 20110415025628_create_posts.rb
Curso – Ruby on Rails
Controller: Post• Agora vamos criar o Controller e alguns
Actions ( métodos )
Curso – Ruby on Rails
Controller: Post
Curso – Ruby on Rails
View: Post• Vamos criar os arquivos da view para Posts.• Inicialmente vamos criar um Partial, que nada
mais é do que um pedaço de código que inserimos em outro arquivo. Dessa forma podemos chamar aquele código diversas vezes sem repeti-lo ( Don’t Repeat Yourself)
Curso – Ruby on Rails
View: Post• Crie um arquivo chamado “_post.html.erb” na
pasta views/posts com o código:
• Agora criamos a view “index.html.erb” na pasta view/posts com o código:
Curso – Ruby on Rails
View: Post• Vamos agora criar alguns posts no Console:• No terminal, na pasta raiz do projeto, digite:
Curso – Ruby on Rails
Formulario para Posts• Obviamente o usuário da aplicação não irá
utilizar o console para criar novos posts.• Portanto temos que criar uma funcionalidade
para que o usuário faça novos posts• Vamos fazer como no twitter, e colocar uma
caixa de texto em cima dos posts
Curso – Ruby on Rails
Formulario para Posts• Então vamos criar um partial para este form de um novo post.• Crie o arquivo “_novo_post.html.erb” na pasta views/posts com o
código:
Curso – Ruby on Rails
Formulario para Posts• Agora temos que modificar o index.html.erb
de Posts para mostrar esse partial no topo da página
Curso – Ruby on Rails
Routes• Para isso tudo funcionar temos que fazer algumas
alterações no arquivo routes.rb• Esse é o arquivo que controle todas as rotas dentro da
nossa aplicação rails.• É o que controla o fluxo de uma página para outra, ou
seja, controla como a url será interpretada pelo rails.
Curso – Ruby on Rails
Routes• Abra o arquivo routes.rb que está na pasta blog/config• Adicione a linha “map.resources :posts”• Este comando cria rotas nomeadas para posts• Exemplo: no controller usamos “posts_path”, este comando só é
habilitado por causa da linha abaixo
Curso – Ruby on Rails
Iniciar Servidor• Vá a pasta raiz do projeto e execute o
comando:
Curso – Ruby on Rails
Browser• Abra o browser e digite: http://localhost:3000/posts
Curso – Ruby on Rails
Curso – Ruby on Rails
Ajax• O Ajax nos permite fazer requisições assíncronas
ao servidor utilizando JavaScript.• Vamos então utilizar ajax para enviar um post de
forma dinâmica• Quando clicarmos no botão “enviar” queremos
adicionar o novo post sem recarregar a página.
Curso – Ruby on Rails
Ajax• Para isso devemos editar o action create do
controller de posts (posts_controller.rb na pasta app/controllers)
• Vamos adicionar a linha “format.js”• Isso fará com que a action create possa
responder através de um arquivo javascript.
Curso – Ruby on Rails
Ajax
Curso – Ruby on Rails
Ajax• Agora vamos criar um arquivo de layout• Crie um arquivo “posts.html.erb” na pasta views/layout com o
seguinte código:
Curso – Ruby on Rails
Ajax• A idéia principal de criar esse layout, além de adicionar o código
html corretamente ( html, body...) é chamar as bibliotecas javascript referentes ao Ajax.
• Agora precisamos fazer uma alteração no arquivo “index.html.erb” localizado na pasta views/posts
• Adicionamos simplesmente uma div por fora da renderização do partial. Isso será util mais tarde para informamos ao Ajax, onde ele irá inserir o novo post.
Curso – Ruby on Rails
Ajax• Agora vamos adicionar um bloco “div_for” no partial
“_post.html.erb” (views/posts).• Isso só fará com que ele crie uma nova div para cada vez que aquele
código for chamado.
Curso – Ruby on Rails
Ajax• Vamos editar agora o partial “_novo_post.html.erb” e modificar a
tag para “form_remote_tag”• Isso irá indicar para o rails que esse formulário deverá fazer uma
requisição via ajax e não uma requisição normal.
Curso – Ruby on Rails
Ajax (Quase lá)• Agora, por fim, vamos criar um template rjs.• É esse arquivo que a action “create” irá renderizar.• Crie um arquivo “create.js.rjs” na pasta views/posts com o seguinte
código:
• A primeira linha é um comando para inserir no “topo” da div “posts” o conteúdo do partial “_post.html.erb(@posts)”
• A segunda linha é um comando para dar um efeito visual após a inserção do código html
Curso – Ruby on Rails
Ajax
Curso – Ruby on Rails
CSS
Curso – Ruby on Rails
CSS• Vamos agora deixar a nossa aplicação um pouco mais apresentável.• Crie um arquivo chamado layout.css na pasta public/stylesheets
com o seguinte código:
Curso – Ruby on Rails
CSS• Agora temos que fazer a chamada a esse arquivo de CSS no nosso
arquivo de layout “posts.html.erb” que está na pasta views/layout
Curso – Ruby on Rails
CSS
Curso – Ruby on Rails
Root• Vamos agora, deixar essa página que acabamos de criar como
página inicial da aplicação.• Para isso devemos deletar o arquivo index.html que está na pasta
public e alterar o arquivo routes.rb
Curso – Ruby on Rails
Autenticação de Usuário
Curso – Ruby on Rails
Autenticação de Usuário• Vamos agora criar um sistema de autenticação com login e cadastro
de usuários.• Existem algumas gems prontas para essa funcionalidade. Dentre
elas, existe uma bem simples, Nifty-Generators, criada por Ryan Bates.
• Para instala-la iremos usar o comando no terminal:
Curso – Ruby on Rails
Autenticação de Usuário• Agora que temos a gem instalada, vamos executar os comandos
para gerar os arquivos de autenticação:
Curso – Ruby on Rails
Autenticação de Usuário• O primeiro comando gera os arquivos essenciais para de usuario e
sessão.• O segundo cria além de outras coisas, um arquivo de layout que é
necessário para renderizar as views da autenticação.• Agora vamos fazer um migration para atualizar o banco de dados
Curso – Ruby on Rails
Autenticação de Usuário• Agora vamos criar algumas funcionalidades para a autenticação.• Vamos criar um partial onde o usuario pode logar e se cadastrar• Crie um arquivo chamado “_login.html.erb” na views/posts com o
código:
Curso – Ruby on Rails
Autenticação de Usuário• Agora vamos adicionar esse partial no layout de posts
(“posts.html.erb”). Dessa forma esses links sempre aparecerão no topo da página.
Curso – Ruby on Rails
Autenticação de Usuário• Outra funcionalidade que queremos é que um usuário só possa
postar mensagens se ele estiver logado.• Então podemos fazer isso alterando o “_novo_post.hrml.erb”:
Curso – Ruby on Rails
Autenticação de Usuário• Temos acesso a esses métodos (funções) pois a gem criou o
“authentication.rb” na pasta blog/lib
Curso – Ruby on Rails
Autenticação de Usuário• Ao gerarmos a autenticação com a gem ele criou as telas de
cadastro de usuário e de login “new.html.erb” (views/users) e “new.html.erb” (views/sessions)
• Por padrão as telas vem com mensagens em inglês, então podemos altera-las:
Curso – Ruby on Rails
Autenticação de Usuário
Curso – Ruby on Rails
Autenticação de Usuário
Curso – Ruby on Rails
Autenticação de Usuário• Agora vamos testar
Curso – Ruby on Rails
Autenticação de Usuário
Curso – Ruby on Rails
Autenticação de Usuário
Curso – Ruby on Rails
Amizade
Curso – Ruby on Rails
Amizade• Agora vamos passar para a última parte da aplicação.• Temos que fazer uma relação de amizade entre os usuários• Para isso temos que criar um auto-relacionamento entre o modelo de
usuários. Ou seja, um usuário tem uma relação de amizade com um outro elemento da própria tabela de usuários, por isso nomeamos auto-relacionamento.
• Como temos essa relação de amizade, iremos criar um novo model chamado amizade com as duas chaves estrangeiras (user_id, amigo_id)
Curso – Ruby on Rails
Amizade• Também precisaremos de um controller para criar e excluir amizades
Curso – Ruby on Rails
Amizade• Agora adicionamos o seguinte código no controller:
Curso – Ruby on Rails
Amizade• Agora temos que definir esse auto-relacionamento.• Para isso temos que adicionar as seguintes linhas nos nossos models
Curso – Ruby on Rails
Amizade• Agora vamos fazer uma tela para listar todas as amizades de um usuário e
possibilita-lo de excluir ou adicionar novas amizades.• Para isso vamos criar uma view “index.html.erb” na pasta views/users
Curso – Ruby on Rails
Amizade• E também um “show.html.erb” na pasta de users
Curso – Ruby on Rails
Amizade• Agora vamos adicionar as seguintes actions no controller de usuários:
Curso – Ruby on Rails
Amizade• Vamos agora adicionar a nova entidade no routes.rb
• E também vamos adicionar dois links no “index.html.erb” de posts
Curso – Ruby on Rails
Amizade• Vamos agora fazer algumas correções.• Para não mostrar nenhum post e nem a opção de procurar amigos para
quem não está logado, devemos colocar a seguinte condição no “index.html.erb” de posts
Curso – Ruby on Rails
Amizade• Vamos adicionar a seguinte linha no “_post.html.erb” para informar quem
foi o autor do post
Curso – Ruby on Rails
Amizade• Agora temos mais uma ultima alteração a fazer.• Devemos somente mostrar os posts feitos pelo próprio usuário ou por
seus amigos, afinal um usuário não deseja ver um post de uma pessoa na qual ele não conhece.
• Então para fazer isso, devemos alterar o controller de posts e modificar o retorno que estamos mandando para a view
• Vamos então fazer a seguinte modificação no controller
Curso – Ruby on Rails
Amizade
Curso – Ruby on Rails
Próton!• Agora vamos testar!• Crie uns usuários e faça alguns posts para testar
Curso – Ruby on Rails
Próton!
Curso – Ruby on Rails
Próton!
Curso – Ruby on Rails
Ruby on RailsQuer aprender mais?
• http://akitaonrails.com/• http://guias.rubyonrails.pro.br/• http://railscasts.com/• http://groups.google.com/group/rubyonrails-talk• http://groups.google.com/group/rails-br