Curso de Ruby on Rails

6.965 visualizações

Publicada em

Breve curso de Ruby on Rails ministrado na CJR - Empresa Júnior de Computação da UnB.

Publicada em: Educação
0 comentários
10 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
6.965
No SlideShare
0
A partir de incorporações
0
Número de incorporações
9
Ações
Compartilhamentos
0
Downloads
369
Comentários
0
Gostaram
10
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Curso de Ruby on Rails

  1. 1. www.cjr.org.br<br />@CJR_UnB<br />Ruby on Rails<br />
  2. 2. Curso – Ruby on Rails<br />Tópicos<br />Introdução ao Ruby<br />Estruturas da Linguagem<br />Introdução ao Rails<br />Estruturas do Framework<br />Exercício Prático<br />Instalação<br />CRUD<br />Associações<br />Banco de Dados<br />
  3. 3. Curso – Ruby on Rails<br />
  4. 4. Curso – Ruby on Rails<br />Linguagem de programação criada em 1993 por YukihiroMatz<br />Open Source<br />Tipagem dinâmica<br />Linguagem de alto nível<br />http://www.ruby-lang.org/<br />
  5. 5. Curso – Ruby on Rails<br />Totalmente Orientada a objetos<br />Tudo é objeto<br />O número 5 é um objeto da classe Fixnum<br />Não existem tipos básicos (int, char)<br />Linguagem de script dinâmica e interpretada<br />Perde um pouco em performance<br />
  6. 6. Curso – Ruby on Rails<br />Não é necessário declarar variáveis<br />Variáveis não “tipadas”<br />Sintaxe simples<br />GarbageCollector (Gestão de memória automática)<br />IRB – Interactive Ruby Shell<br />
  7. 7. Curso – Ruby on Rails<br />Orientação a objetos<br />
  8. 8. Curso – Ruby on Rails<br />
  9. 9. Curso – Ruby on Rails<br />
  10. 10. Curso – Ruby on Rails<br />Quer aprender mais?<br />http://www.ruby-lang.org/<br />http://groups.google.com/group/rubyonrails-talk<br />http://groups.google.com/group/rails-br<br />http://www.google.com/<br />Apostila Caelum<br />
  11. 11. Curso – Ruby on Rails<br />O que é Ruby on Rails?<br />
  12. 12. Curso – Ruby on Rails<br />Framework MVC ( Model-View-Controller) para desenvolvimento Web<br />Desenvolvido em Linguagem Ruby<br />http://guias.rubyonrails.pro.br/<br />http://rubyonrails.org/<br />
  13. 13. Curso – Ruby on Rails<br />Criado em 2004 por David Heinemeir<br />Conceitos<br />DRY (Don’t Repeat Yourself)<br />Convention over Configuration<br />Exemplo: Blog<br />http://media.rubyonrails.org/video/rails_take2_with_sound.mov<br />Histórico<br />
  14. 14. Curso – Ruby on Rails<br />O rails é um framework composto por 5 outros frameworks:<br />Active Record (Model)<br />Active Pack (ActionController e ActionView)<br />ActionMailer<br />ActiveSupport<br />ActiveResource<br />
  15. 15. Curso – Ruby on Rails<br />O rails é uma RubyGem<br />Gem é um código ruby empacotado ( similar a um plugin)<br />
  16. 16. Curso – Ruby on Rails<br />Mãos à obra<br />
  17. 17. Curso – Ruby on Rails<br />Qual a idéia: Desenvolver uma aplicação parecida com um blog:<br />Conexão com o Banco de Dados (Mysql)<br />CRUD’s de Usuários, Posts e Amizades<br />Interface amigável<br />Associações entre Entidades<br />O Foco<br />
  18. 18. Curso – Ruby on Rails<br />Ruby<br />Linux: sudoapt-get install ruby<br />Mac OS X: sudoport install ruby<br />Windows: One-Click-Installer<br />http://www.ruby-lang.org/pt/downloads/<br />Testando:<br />>ruby –v <br />ruby 1.8.7 (2010-06-23 patchlevel 299) [i386-mingw32]<br />>gem –v<br />1.3.7<br />> irb –v<br />irb 0.9.5 (05/04/13)<br />Instalação<br />
  19. 19. Curso – Ruby on Rails<br />Instalação<br />Rails<br />No terminal: <br />gem install rails –v 2.3.5<br />MySQL<br />http://dev.mysql.com/downloads/ ou <br />Xampp, Lampp, Wampp....<br />MySQL-Ruby Driver<br />
  20. 20. Curso – Ruby on Rails<br />Para não complicar muito o curso não iremos utilizar nenhuma IDE, somente o prompt de comando ( terminal ) e um editor de texto.<br />IDE’s para Rails: AptanaRadRails, RubyMine, TextMate(Mac)<br />IDE<br />
  21. 21. Curso – Ruby on Rails<br />Abra o terminal<br />-d mysql Indica qual o SGDB iremos utilizar<br />Criando o Projeto<br />
  22. 22. Curso – Ruby on Rails<br />Abra o arquivo “database.yml” que está na pasta blog/config<br />Edite as configurações do seu SGBD:<br />
  23. 23. Curso – Ruby on Rails<br />Agora vamos mandar o rails criar o banco de dados<br />Rake é uma ferramenta de construção (build), similar a um make.<br />
  24. 24. Curso – Ruby on Rails<br />Vamos criar agora o modelo para nossa entidade Post.<br />Model: Post<br />
  25. 25. Curso – Ruby on Rails<br />Model: Post<br />post.rb20110415025628_create_posts.rb<br />
  26. 26. Curso – Ruby on Rails<br />Controller: Post<br />Agora vamos criar o Controller e alguns Actions ( métodos )<br />
  27. 27. Curso – Ruby on Rails<br />Controller: Post<br />
  28. 28. Curso – Ruby on Rails<br />View: Post<br />Vamos criar os arquivos da view para Posts.<br />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’tRepeatYourself)<br />
  29. 29. Curso – Ruby on Rails<br />View: Post<br />Crie um arquivo chamado “_post.html.erb” na pasta views/posts com o código:<br />Agora criamos a view “index.html.erb” na pasta view/posts com o código:<br />
  30. 30. Curso – Ruby on Rails<br />View: Post<br />Vamos agora criar alguns posts no Console:<br />No terminal, na pasta raiz do projeto, digite:<br />
  31. 31. Curso – Ruby on Rails<br />Formulario para Posts<br />Obviamente o usuário da aplicação não irá utilizar o console para criar novos posts.<br />Portanto temos que criar uma funcionalidade para que o usuário faça novos posts<br />Vamos fazer como no twitter, e colocar uma caixa de texto em cima dos posts<br />
  32. 32. Curso – Ruby on Rails<br />Formulario para Posts<br />Então vamos criar um partial para este form de um novo post.<br />Crie o arquivo “_novo_post.html.erb” na pasta views/posts com o código:<br />
  33. 33. Curso – Ruby on Rails<br />Formulario para Posts<br />Agora temos que modificar o index.html.erb de Posts para mostrar esse partial no topo da página<br />
  34. 34. Curso – Ruby on Rails<br />Routes<br />Para isso tudo funcionar temos que fazer algumas alterações no arquivo routes.rb<br />Esse é o arquivo que controle todas as rotas dentro da nossa aplicação rails.<br />É o que controla o fluxo de uma página para outra, ou seja, controla como a url será interpretada pelo rails.<br />
  35. 35. Curso – Ruby on Rails<br />Routes<br />Abra o arquivo routes.rb que está na pasta blog/config<br />Adicione a linha “map.resources :posts”<br />Este comando cria rotas nomeadas para posts<br />Exemplo: no controller usamos “posts_path”, este comando só é habilitado por causa da linha abaixo<br />
  36. 36. Curso – Ruby on Rails<br />Iniciar Servidor<br />Vá a pasta raiz do projeto e execute o comando:<br />
  37. 37. Curso – Ruby on Rails<br />Browser<br />Abra o browser e digite: http://localhost:3000/posts<br />
  38. 38. Curso – Ruby on Rails<br />
  39. 39. Curso – Ruby on Rails<br />Ajax<br />O Ajax nos permite fazer requisições assíncronas ao servidor utilizando JavaScript.<br />Vamos então utilizar ajax para enviar um post de forma dinâmica<br />Quando clicarmos no botão “enviar” queremos adicionar o novo post sem recarregar a página.<br />
  40. 40. Curso – Ruby on Rails<br />Ajax<br />Para isso devemos editar o actioncreate do controller de posts (posts_controller.rb na pasta app/controllers)<br />Vamos adicionar a linha “format.js”<br />Isso fará com que a actioncreate possa responder através de um arquivo javascript.<br />
  41. 41. Curso – Ruby on Rails<br />Ajax<br />
  42. 42. Curso – Ruby on Rails<br />Ajax<br />Agora vamos criar um arquivo de layout<br />Crie um arquivo “posts.html.erb” na pasta views/layout com o seguinte código:<br />
  43. 43. Curso – Ruby on Rails<br />Ajax<br />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.<br />Agora precisamos fazer uma alteração no arquivo “index.html.erb” localizado na pasta views/posts<br />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.<br />
  44. 44. Curso – Ruby on Rails<br />Ajax<br />Agora vamos adicionar um bloco “div_for” no partial “_post.html.erb” (views/posts).<br />Isso só fará com que ele crie uma nova div para cada vez que aquele código for chamado.<br />
  45. 45. Curso – Ruby on Rails<br />Ajax<br />Vamos editar agora o partial “_novo_post.html.erb” e modificar a tag para “form_remote_tag”<br />Isso irá indicar para o rails que esse formulário deverá fazer uma requisição via ajax e não uma requisição normal.<br />
  46. 46. Curso – Ruby on Rails<br />Ajax (Quase lá)<br />Agora, por fim, vamos criar um templaterjs.<br />É esse arquivo que a action “create” irá renderizar.<br />Crie um arquivo “create.js.rjs” na pasta views/posts com o seguinte código:<br />A primeira linha é um comando para inserir no “topo” da div “posts” o conteúdo do partial “_post.html.erb(@posts)”<br />A segunda linha é um comando para dar um efeito visual após a inserção do código html<br />
  47. 47. Curso – Ruby on Rails<br />Ajax<br />
  48. 48. Curso – Ruby on Rails<br />CSS<br />
  49. 49. Curso – Ruby on Rails<br />CSS<br />Vamos agora deixar a nossa aplicação um pouco mais apresentável.<br />Crie um arquivo chamado layout.css na pasta public/stylesheets com o seguinte código:<br />
  50. 50. Curso – Ruby on Rails<br />CSS<br />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<br />
  51. 51. Curso – Ruby on Rails<br />CSS<br />
  52. 52. Curso – Ruby on Rails<br />Root<br />Vamos agora, deixar essa página que acabamos de criar como página inicial da aplicação.<br />Para isso devemos deletar o arquivo index.html que está na pasta public e alterar o arquivo routes.rb<br />
  53. 53. Curso – Ruby on Rails<br />Autenticação de Usuário<br />
  54. 54. Curso – Ruby on Rails<br />Autenticação de Usuário<br />Vamos agora criar um sistema de autenticação com login e cadastro de usuários.<br />Existem algumas gems prontas para essa funcionalidade. Dentre elas, existe uma bem simples, Nifty-Generators, criada por Ryan Bates.<br />Para instala-la iremos usar o comando no terminal:<br />
  55. 55. Curso – Ruby on Rails<br />Autenticação de Usuário<br />Agora que temos a gem instalada, vamos executar os comandos para gerar os arquivos de autenticação:<br />
  56. 56. Curso – Ruby on Rails<br />Autenticação de Usuário<br />O primeiro comando gera os arquivos essenciais para de usuario e sessão.<br />O segundo cria além de outras coisas, um arquivo de layout que é necessário para renderizar as views da autenticação.<br />Agora vamos fazer um migration para atualizar o banco de dados<br />
  57. 57. Curso – Ruby on Rails<br />Autenticação de Usuário<br />Agora vamos criar algumas funcionalidades para a autenticação.<br />Vamos criar um partial onde o usuario pode logar e se cadastrar<br />Crie um arquivo chamado “_login.html.erb” na views/posts com o código:<br />
  58. 58. Curso – Ruby on Rails<br />Autenticação de Usuário<br />Agora vamos adicionar esse partial no layout de posts (“posts.html.erb”). Dessa forma esses links sempre aparecerão no topo da página.<br />
  59. 59. Curso – Ruby on Rails<br />Autenticação de Usuário<br />Outra funcionalidade que queremos é que um usuário só possa postar mensagens se ele estiver logado.<br />Então podemos fazer isso alterando o “_novo_post.hrml.erb”:<br />
  60. 60. Curso – Ruby on Rails<br />Autenticação de Usuário<br />Temos acesso a esses métodos (funções) pois a gem criou o “authentication.rb” na pasta blog/lib<br />
  61. 61. Curso – Ruby on Rails<br />Autenticação de Usuário<br />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)<br />Por padrão as telas vem com mensagens em inglês, então podemos altera-las:<br />
  62. 62. Curso – Ruby on Rails<br />Autenticação de Usuário<br />
  63. 63. Curso – Ruby on Rails<br />Autenticação de Usuário<br />
  64. 64. Curso – Ruby on Rails<br />Autenticação de Usuário<br />Agora vamos testar<br />
  65. 65. Curso – Ruby on Rails<br />Autenticação de Usuário<br />
  66. 66. Curso – Ruby on Rails<br />Autenticação de Usuário<br />
  67. 67. Curso – Ruby on Rails<br />Amizade<br />
  68. 68. Curso – Ruby on Rails<br />Amizade<br />Agora vamos passar para a última parte da aplicação.<br />Temos que fazer uma relação de amizade entre os usuários<br />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.<br />Como temos essa relação de amizade, iremos criar um novo model chamado amizade com as duas chaves estrangeiras (user_id, amigo_id)<br />
  69. 69. Curso – Ruby on Rails<br />Amizade<br />Também precisaremos de um controller para criar e excluir amizades<br />
  70. 70. Curso – Ruby on Rails<br />Amizade<br />Agora adicionamos o seguinte código no controller:<br />
  71. 71. Curso – Ruby on Rails<br />Amizade<br />Agora temos que definir esse auto-relacionamento.<br />Para isso temos que adicionar as seguintes linhas nos nossos models<br />
  72. 72. Curso – Ruby on Rails<br />Amizade<br />Agora vamos fazer uma tela para listar todas as amizades de um usuário e possibilita-lo de excluir ou adicionar novas amizades.<br />Para isso vamos criar uma view “index.html.erb” na pasta views/users<br />
  73. 73. Curso – Ruby on Rails<br />Amizade<br />E também um “show.html.erb” na pasta de users<br />
  74. 74. Curso – Ruby on Rails<br />Amizade<br />Agora vamos adicionar as seguintes actions no controller de usuários:<br />
  75. 75. Curso – Ruby on Rails<br />Amizade<br />Vamos agora adicionar a nova entidade no routes.rb<br />E também vamos adicionar dois links no “index.html.erb” de posts<br />
  76. 76. Curso – Ruby on Rails<br />Amizade<br />Vamos agora fazer algumas correções.<br />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<br />
  77. 77. Curso – Ruby on Rails<br />Amizade<br />Vamos adicionar a seguinte linha no “_post.html.erb” para informar quem foi o autor do post<br />
  78. 78. Curso – Ruby on Rails<br />Amizade<br />Agora temos mais uma ultima alteração a fazer.<br />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.<br />Então para fazer isso, devemos alterar o controller de posts e modificar o retorno que estamos mandando para a view<br />Vamos então fazer a seguinte modificação no controller<br />
  79. 79. Curso – Ruby on Rails<br />Amizade<br />
  80. 80. Curso – Ruby on Rails<br />Próton!<br />Agora vamos testar!<br />Crie uns usuários e faça alguns posts para testar<br />
  81. 81. Curso – Ruby on Rails<br />Próton!<br />
  82. 82. Curso – Ruby on Rails<br />Próton!<br />
  83. 83. Curso – Ruby on Rails<br />RubyonRails<br />Quer aprender mais?<br />http://akitaonrails.com/<br />http://guias.rubyonrails.pro.br/<br />http://railscasts.com/<br />http://groups.google.com/group/rubyonrails-talk<br />http://groups.google.com/group/rails-br<br />

×