Criando um weblog Ruby em dez minutos
Contribuição de Brian Leonard, manutenção de Chris Kutler
Abril de 2008 [Número de revisão: V6.1-1]
Neste tutorial, use o suporte a Ruby no NetBeans IDE para criar e executar uma aplicação Web de banco de dados simples. Completando as etapas deste tutorial, você aprende como fazer as seguintes tarefas:
- Use tarefas do Rake e arquivos de migração para criar e atualizar tabelas de banco de dados
- Use o gerador de cadafalso para criar, ler, atualizar, excluir (CRUD) aplicações Web de banco de dados simples
- Edite as visualizações para ajustar as páginas da Web
Conteúdo
Para concluir este tutorial, você precisa do seguinte software.
Criando o projeto Ruby on Rails
Comece criando um projeto Ruby on Rails. Por padrão, o aplicativo é criado em uma estrutura de diretórios que esteja de acordo com as convenções do projeto Ruby on Rails para aplicativos.
No NetBeans IDE, escolha Arquivo > Novo projeto.
Selecione Ruby na lista Categorias e Aplicativo Ruby on Rails na lista Projetos, como mostrado na figura seguinte.
- Clique em Próximo para nomear o projeto e especifique sua localização.
-
Digite rubyweblog na caixa de texto Nome do projeto, conforme mostrado na figura seguinte.
Aceite todas as outras configurações padrão nesta página.
Vá para a Etapa 8 se as seguintes condições se aplicarem:
- Você está usando o nome de usuário
root padrão
- O
root não requer uma senha
- Você está usando o servidor de banco de dados MySQL
O IDE presume essas condições por padrão.
-
Clique em Próximo para configurar o acesso ao banco de dados.
Selecione a opção Especificar diretamente informações do banco de dados, selecione o Adaptador de banco de dados e digite o Nome de usuário e s Senha. Deixe o Nome do banco de dados em branco.
Clique em Terminar para criar o novo projeto.
O IDE cria o diretório do projeto com o mesmo nome que o projeto e abre o arquivo database.yml na área de edição. Observe que o nome de banco de dados padrão para a configuração de desenvolvimento é rubyweblog_development.
Verifique se as configurações de adaptador, banco de dados, nome do usuário e senha da seção de desenvolvimento estão corretas, em seguida, clique no pequeno x botão na aba database.yml para fechar o arquivo.
Criando o cadafalso
Essa aplicação de weblog é construída em torno do modelo Postagem, que armazena instâncias de postagens de blog. Aqui você usa o gerador de cadafalso Rails para criar o modelo e seu controlador, assim como o índice (lista), as visualizações mostrar, nova e editar.
O gerador também cria um arquivo de migração para criar a tabela do banco de dados de modelo e cria teste de unidade e stubs de correção para escrever testes de modelo.
Na janela Projetos, clique com o botão direito do mouse no nó do projeto rubyweblog e escolha Gerar, como mostrado na figura seguinte.
-
Na caixa de diálogo Gerador do Rails, selecione cadafalso na lista suspensa Gerar, como mostrado na figura seguinte.
-
Digite Post na caixa de texto Nome do modelo.
Digite title:string na caixa de texto Partes de atributo e clique em OK.
A janela Saída lista os arquivos que o gerador de cadafalso cria e atualiza.
Criando o banco de dados
Nesta seção, você usa uma tarefa do Rake para criar o banco de dados rubyweblog_development. Em seguida, usa o arquivo de migração 001_create_posts.rb para adicionar a tabela de postagens ao banco de dados.
Na janela Projetos, clique com o botão direito do mouse no nó do projeto rubyweblog e escolha Executar tarefa do Rake > db > criar no menu pop-up.
O Rake cria o banco de dados para configuração de desenvolvimento conforme definido no arquivo database.yml.
Observação:Se você vir mensagens de erro na janela Saída, verifique se o nome do usuário e a senha na seção de desenvolvimento no arquivo database.yml estão corretos. Verifique também se o servidor do banco de dados está em execução.
Na janela Projetos, expanda Migrações de banco de dados e expanda migrar.
Clique duas vezes no nó 001_create_posts.rb para abrir o arquivo na área de edição, como mostrado na figura seguinte.
O arquivo é aberto para mostrar o método self.up, que cria uma tabela chamada postagens e o método self.down, que desfaz a tabela postagens, conforme mostrado no seguinte código de exemplo.
class CreatePosts < ActiveRecord::Migration
def self.up
create_table :posts do |t|
t.string :title
t.timestamps
end
end
def self.down
drop_table :posts
end
end
Observe que o método create_table adiciona uma coluna id por padrão, e que o método timestamps adiciona as colunas created_at e updated_at à tabela de banco de dados.
-
Na janela Projetos, clique com o botão direito do mouse no nó rubyweblog e escolha Migrar banco de dados > Para versão atual, como mostrado na figura seguinte.
Esta ação atualiza o banco de dados para incluir a tabela de postagens. A janela Saída indica quando a migração está concluída, como mostrado na figura seguinte.
Executando o aplicativo
Agora, teste o aplicativo.
-
Na janela Projetos, expanda o nó Configuração e clique duas vezes em routes.rb para abri-lo no editor.
-
Encontre o seguinte comentário.
# map.root :controller => "welcome"
-
Remova o comentário da linha e altere o controlador para "posts", como mostrado a seguir.
map.root :controller => "posts"
-
Na janela Projetos, expanda o nó Público, clique com o botão direito do mouse em index.html e escolha Excluir no menu pop-up.
A página index.html exibe uma página de boas-vindas padrão, que não é o que você deseja. Excluindo index.html, o Rails procura routes.rb para determinar qual página deve ser exibida.
Escolha Arquivo > Salvar todos no menu principal.
-
Clique no botão Executar projeto principal na barra de ferramentas.
Essa ação inicia do servidor WEBrick, que é um servidor Web (escrito em Ruby) fornecido como parte do framework Ruby on Rails, e exibe a página seguinte no navegador.
Observação: Você pode configurar o projeto para usar um servidor diferente. Se você estiver usando um servidor que não seja WEBrick, talvez precise digitar http://localhost:3000/posts na caixa de texto de endereço do navegador e pressionar Enter.
-
Clique no link Nova postagem para exibir a segunda página do aplicativo, como mostrado na figura seguinte.
-
Digite um título e clique em Criar.
A figura seguinte mostra uma postagem de blog de amostra.
Clique no link Voltar para retornar à lista de postagens.
Adicionando outra coluna da tabela
Aqui você adiciona uma coluna body à tabela de postagens para manter o texto de cada entrada do blog.
-
Clique com o botão direito do mouse no nó Migrações de banco de dados e escolha Gerar no menu pop-up.
A caixa de diálogo Gerador do Rails se abre com a migração selecionada na lista suspensa Gerar.
-
Digite AddBodyToPost body:text na caixa de texto Argumentos, como mostrado na figura seguinte.
-
Clique em OK.
O IDE cria o script de migração versionado 002_add_body_to_post.rb. O arquivo se abre para mostrar o método self.up, que adiciona uma coluna body e o método self.down, que remove a coluna, como mostrado na amostra de código seguinte. Observe como o código gerado extraiu o nome da tabela do primeiro argumento AddBodyToPost.
class AddBodyToPost < ActiveRecord::Migration
def self.up
add_column :posts, :body, :text
end
def self.down
remove_column :posts, :body
end
end
-
Clique com o botão direito do mouse no nó rubyweblog e escolha Migrar banco de dados > Para versão atual no menu pop-up.
Como alternativa, clique com o botão direito do mouse no arquivo de origem e escolha Executar do menu pop-up.
Na janela Projetos, expanda Visualizações, expanda Postagens e clique duas vezes em edit.html.erb para abrir o arquivo na área de edição.
Adicione as instruções mostradas em negrito na amostra de código ao arquivo edit.html.erb.
Como alternativa, coloque o cursor antes da marca <p> de Title e arraste e solte o cursor para a posição após a marca de fim do parágrafo </p>, em seguida, pressione Ctrl+Shift+Seta para baixo para duplicar as linhas. Substitua Title por Body e substitua f.text_field :title por f.text_area :body.
<h1>Editing post</h1>
<%= error_messages_for :post %>
<% form_for(@post) do |f| %>
<p>
<b>Title</b><br />
<%= f.text_field :title %>
</p>
<p>
<b>Body</b><br />
<%= f.text_area :body %>
</p>
<p>
<%= f.submit "Update" %>
</p>
<% end %>
<%= link_to 'Show', @post %> |
<%= link_to 'Back', posts_path %>
Clique duas vezes em new.html.erb para abrir o arquivo na área de edição.
Adicione as instruções mostradas em negrito na amostra de código seguinte ao arquivo new.html.erb. Como alternativa, use Ctrl+Shift+Seta para baixo a fim de duplicar o parágrafo Title e editar o código duplicado como descrito na Etapa 6.
<h1>New post</h1>
<%= error_messages_for :post %>
<% form_for(@post) do |f| %>
<p>
<b>Title</b><br />
<%= f.text_field :title %>
</p>
<p>
<b>Body</b><br />
<%= f.text_area :body %>
</p>
<p>
<%= f.submit "Create" %>
</p>
<% end %>
<%= link_to 'Back', posts_path %>
Clique duas vezes em show.html.erb para abrir o arquivo na área de edição.
Adicione as instruções mostradas em negrito na amostra de código seguinte ao arquivo show.html.erb. Como alternativa, use Ctrl+Shift+Seta para baixo a fim de duplicar o parágrafo Title como descrito na Etapa 6, altere Title: para Body:, e altere @post.title para @post.body.
<p>
<b>Title:</b>
<%=h @post.title %>
</p>
<p>
<b>Body:</b>
<%=h @post.body %>
</p>
<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>
Escolha Arquivo > Salvar todos no menu principal.
Retorne ao navegador e clique no link Nova postagem para ver a nova coluna corpo, como mostrado na figura abaixo.
Crie mais algumas entradas de blog.
Quando você tiver terminado, clique em Voltar para retornar à pagina "Listando postagens".
Validando entrada
Aqui, adicione código à classe Postagem para garantir que os usuários forneçam valores para os campos de título e corpo.
Na janela Projetos, expanda o nó Modelos e clique duas vezes em post.rb para abrir o arquivo no editor.
Abra uma linha na definição Classe, digite vp e pressione Tab.
O IDE substitui o disparador vp pelo seguinte modelo de código parametrizado.
validates_presence_of :attribute
-
Digite title, :body, em seguida, pressione Enter. O código deve se parecer com a seguinte instrução.
validates_presence_of :title, :body
-
Salve o arquivo, retorne para o navegador, clique em Nova postagem e clique em Criar.
A aplicação agora informa que o título e o corpo não podem ficar em branco.
Deixando a lista com aparência de blog
Aqui você edita a visualização index.html para fazer com que a lista do blog se pareça com um blog típico, como mostrado na figura seguinte.
-
Na janela Projetos, expanda Visualizações > postagens e clique duas vezes em index.html.erb para abrir o arquivo na área de edição.
Essa visualização mostra a lista de entradas do blog.
-
Exclua os elementos <h1> e <table>, e subsitua-os pelo código seguinte que é mostrado em negrito.
<h1>The Ruby Blog</h1>
<% for post in @posts %>
<h2><%= post.title %></h2>
<p><%= post.body %></p>
<small>
<%= link_to "permalink",
:action => "show",
:id => post %>
</small>
<hr>
<% end %>
<br />
<%= link_to 'New post', new_post_path %>
Para cada instância de uma ação post, este código produz um título, um corpo e um Permalink.
-
Salve as alterações e execute a aplicação para ver a nova interface do modelo Postagem.
-
Para exibir o blog com a primeira entrada mais recente, edite o código que você acabou de adicionar para reverter a ordem de classificação, adicionando uma chamada ao método .reverse, como mostrado a seguir.
<% for post in @posts.reverse %>
Salve o arquivo e atualize seu navegador para ver a lista exibida em ordem reversa.
Praticando o que você aprendeu
Usando as habilidades que você aprendeu neste exercício,crie um projeto da Web de lista de tarefas. Use o gerador de cadafalso para construir um cadafalso em torno do modelo Tarefa com os campos title:string e description:text. Use o Rake para criar o banco de dados e, em seguida, use Migrações de banco de dados para criar a tabela. Não esqueça de editar o arquivo route.rb para mapear o root, e lembre-se de excluir o arquivo index.html.
Próximas etapas
>> Mais documentação do NetBeans Ruby
|
|
