Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Curso de Ruby on Rails

6,996 views

Published on

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

Published in: Education

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 />

×