Em algum momento em nosso desenvolvimento de apps em rails teremos que criar páginas estáticas. Sim, aquelas páginas de "sobre", "a equipe" etc. Temos N formas de fazer isso como falado pelo Akita neste link aqui e no RailsCasts. Vamos ver mais uma forma de fazer isso, só que mais poderosa, deixando o cliente cadastrar o conteúdo da página.

A missão

Criar uma página "sobre" que resida em "/sobre" e que o cliente possa facilmente alterar o seu conteúdo.

O arsenal

Para esta brincadeira, iremos usar as seguintes ferramentas:

• High Voltage: um gerador de páginas estáticas;
• Static Content: utiliza chave e valor para gerar conteúdo estático de forma fácil;
• Active Admin: interface administrativa para apps rails.

Criando a página

Para criarmos a nossa página estática, utilizaremos o High Voltage da thoughtbot. Para isso, adicione no seu Gemfile:

1 gem 'high_voltage', '1.2.4'

em seguida rode bundle.

Como vemos no próprio readme do High Voltage, temos que criar uma pasta "pages" e adicionar nosso arquivo lá:

1 $ mkdir app/views/pages
2 $ touch app/views/pages/sobre.html.haml

Por padrão, as páginas são acessíveis após o /pages. Ou seja, a nossa é acessível em /pages/sobre. Como vamos usar o endereço /sobre, temos que definir o seguinte no config/initializers/high_voltage.rb:

1 HighVoltage.route_drawer = HighVoltage::RouteDrawers::Root

Não se esqueça de definir no seu menu um link para a página "sobre". Para isso, utilize o helper page_path. Exemplo:

1 page_path('sobre')

Testes

Não se esqueça de definir os testes para a sua nova página. Para isso, iniciaremos com o teste de rota, que reside em spec/routing/pages_routing_spec.rb:

 1 require "spec_helper"
 2 
 3 describe HighVoltage::PagesController do
 4 
 5   describe "routing" do
 6 
 7     it "routes to #sobre" do
 8       expect(get("/sobre")).to route_to("high_voltage/pages#show", id: "sobre")
 9     end
10   end
11 
12   describe "route helpers" do
13 
14     it "page_path" do
15       expect(page_path(:sobre)).to eq("/sobre")
16     end
17   end
18 end

Como pudemos observar, testamos a nossa rota e o helper da mesma.

Agora vamos testar o nosso controller pages, que reside em spec/controllers/pages_controller_spec.rb. Veja como fica nossa spec:

 1 require 'spec_helper'
 2 
 3 describe HighVoltage::PagesController do
 4 
 5   describe "GET 'sobre'" do
 6 
 7     before do
 8       get :show, id: :sobre
 9     end
10 
11     it { should respond_with(:success) }
12     it { should render_template('sobre') }
13     it { should render_with_layout(:application) }
14   end
15 end

Como observado, foram poucos testes e estes, bem simples. Não se esqueça de instalar o shoulda-matchers se ainda não o usa. E caso queira começar um novo projeto e usar as ferramentas que usamos aqui na HE:labs, dê uma olhada na nossa gem Pah que utilizamos para começar todos nossos projetos em rails.

Criando o conteúdo da página

Para criarmos o conteúdo de nossa página, utilizaremos o Static Content. Para isso, adicione no seu Gemfile:

1 gem 'static_content', '2.0.0'

Em seguida, rode bundle.

Após instalar a gem, temos que rodar um generator. Este, gerará o model Content para nós. Para isto, execute:

1 $ rails g static_content:install

Depois de termos instalado o Static Content, iremos usá-lo em nossa view. Altere a sua view app/views/pages/sobre.html.haml deixando ela assim:

1 %h1
2   = rc :about_title, default: "Título da página de sobre"
3 
4 = c :about_content, default: "Conteúdo da página de sobre"

Utilizamos 2 helpers diferentes: no título o rc, pois aqui queremos o conteúdo raw, sem conversão para HTML; e no conteúdo, o c, que neste caso, queremos que o conteúdo seja convertido de markdown para HTML. E perceba que em ambos os casos definimos um valor default.

Criando a área administrativa

Instale o Active Admin adicionando no seu Gemfile:

1 gem 'activeadmin', '0.6.0'

Em seguida, rode bundle.

Após instalar a gem, rode o seguinte generator:

1 $ rails generate active_admin:install

Rode as migrações com:

1 $ rake db:migrate

Neste momento já é possível acessar o admin. Visualize "/admin" com os seguintes dados:

• User: admin@example.com
• Password: password

Como pode-se notar, ainda não temos o nosso model Content.

Ps: Caso tenha algum problema na instalação do Active Admin, veja a sua documentação com mais detalhes aqui.

Adicionando o content ao Active Admin

Para criarmos nosso model Content no Active Admin, utilizaremos o seguinte gerador:

1 $ rails generate active_admin:resource Content

Com isso, ele cria um arquivo em app/admin/contents.rb.

Como o Static Content utiliza chave e valor, não é legal mostrar para nosso cliente o nome da chave em inglês. Podemos traduzir as chaves do Static Content que são exibidas no nosso index no active admin. Para isso, altere app/admin/contents.rb deixando-o assim:

 1 ActiveAdmin.register Content do
 2 
 3   index do
 4     column :slug do |c|
 5       t(c.slug, scope: 'static_content.slugs')
 6     end
 7     column :text
 8     column :updated_at
 9 
10     default_actions
11   end
12 end

E por último, criamos as nossas traduções das chaves do Static Content em config/locales/static_content.pt-BR.yml, ficando assim:

1 pt-BR:
2   static_content:
3     slugs:
4       about_title: Título de sobre
5       about_content: Conteúdo de sobre

Conclusão

Agora nosso cliente pode alterar o texto de sua página estática usando todo o poder do Markdown. E estas páginas são facilmente estendidas.

E você, como resolve este problema de página estática? Fala aí ;)

Comentários