curso de ruby on rails

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/


• 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


• 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


Orientação a objetosCurso – 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


O que é Ruby on Rails?


• Framework MVC ( Model-View-Controller) para desenvolvimento Web

• Desenvolvido em Linguagem Ruby• http://guias.rubyonrails.pro.br/• http://rubyonrails.org/


• 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


• O rails é um framework composto por 5 outros frameworks:– Active Record (Model)– Active Pack (ActionController e ActionView)– Action Mailer– Active Support– Active Resource


• O rails é uma RubyGem• Gem é um código ruby empacotado ( similar a

um plugin)


• Mãos à obra


• 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


• 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


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


• 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


• Abra o terminal

• -d mysql Indica qual o SGDB iremos utilizar

Criando o Projeto


• Abra o arquivo “database.yml” que está na pasta blog/config

• Edite as configurações do seu SGBD:


• Agora vamos mandar o rails criar o banco de dados

• Rake é uma ferramenta de construção (build), similar a um make.


• Vamos criar agora o modelo para nossa entidade Post.

Model: Post


Model: Post post.rb 20110415025628_create_posts.rb


Controller: Post• Agora vamos criar o Controller e alguns

Actions ( métodos )


Controller: Post


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)


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:


View: Post• Vamos agora criar alguns posts no Console:• No terminal, na pasta raiz do projeto, digite:


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


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:


Formulario para Posts• Agora temos que modificar o index.html.erb

de Posts para mostrar esse partial no topo da página


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.


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


Iniciar Servidor• Vá a pasta raiz do projeto e execute o

comando:


Browser• Abra o browser e digite: http://localhost:3000/posts


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.


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.


Ajax


Ajax• Agora vamos criar um arquivo de layout• Crie um arquivo “posts.html.erb” na pasta views/layout com o

seguinte código:


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.


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.


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.


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


Ajax


CSS


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:


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


CSS


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


Autenticação de Usuário


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:


Autenticação de Usuário• Agora que temos a gem instalada, vamos executar os comandos

para gerar os arquivos de autenticação:


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


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:


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.


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”:


Autenticação de Usuário• Temos acesso a esses métodos (funções) pois a gem criou o

“authentication.rb” na pasta blog/lib


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:


Autenticação de Usuário• Agora vamos testar


Amizade


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)


Amizade• Também precisaremos de um controller para criar e excluir amizades


Amizade• Agora adicionamos o seguinte código no controller:


Amizade• Agora temos que definir esse auto-relacionamento.• Para isso temos que adicionar as seguintes linhas nos nossos models


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


Amizade• E também um “show.html.erb” na pasta de users


Amizade• Agora vamos adicionar as seguintes actions no controller de usuários:


Amizade• Vamos agora adicionar a nova entidade no routes.rb

• E também vamos adicionar dois links no “index.html.erb” de posts


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


Amizade• Vamos adicionar a seguinte linha no “_post.html.erb” para informar quem

foi o autor do post


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


Amizade


Próton!• Agora vamos testar!• Crie uns usuários e faça alguns posts para testar


Próton!


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

curso de ruby on rails

Education