#desenvolvimento

Relatórios com Rails e Odf-report


Olá pessoal.

Em um projeto desenvolvido em Ruby on Rails que estou trabalhando preciso implementar a geração de alguns relatórios. Atualmente esses relatórios são feitos através de documentos de texto do tipo Word e isto pesou muito na escolha da utilização da gem Odf-report.

Esta gem tem como objetivo criar um relatório/documento de acordo com um template salvo no formato ODF, cuja extensão é .odt.

A utilização da gem é bem simples, basicamente você precisa adicionar no arquivo os campos que terão o valor alterado via código, e no código definir o valor para cada campo.

Para incluir um campo dentro do template basta definir uma palavra ou expressão e adicioná-la entre colchetes, por exemplo:

[NOME]

[DATA_NASCIMENTO]

Para facilitar o entendimento da utilização eu criei um projeto de exemplo que pode ser visto aqui no meu GitHub. Também disponibilizei um demo no Heroku.

É isso.

Até breve 😉

Padrão
#desenvolvimento

ActiveAdmin – Customização do menu


Olá pessoal.

Após um longo hiato sem posts resolvi escrever sobre como fazer um menu customizado utilizando ActiveAdmin.

Pra quem não conhece o ActiveAdmin é um framework que pode ser utilizado para administração de projetos feitos com Ruby on Rails, facilitando ainda mais o desenvolvimento.

Mas como nada é perfeito, o ActiveAdmin tem uma limitação de apenas dois níveis no menu superior. Só que eu precisava de um menu com três níveis.

Eu abri uma questão no StackOverflow mas até o momento sem nenhuma resposta que torne essa customização mais fácil. Eu pesquisei um bocado e fui juntando um pouco de tudo pra poder fazer o que precisava.

Entretanto deixo os comentários abertos caso alguém tenha encontrado uma forma mais simples e mais bonita 😉

Então vamos ao código!!!

A primeira coisa que precisamos fazer é informar ao ActiveAdmin que iremos utilizar um cabeçalho próprio. Para isto acrescente as linhas abaixo no arquivo config/initializers/active_admin.rb:

ActiveAdmin.setup do |config|
  ...
  # Define a classe que irá construir o menu.
  config.view_factory.header = CustomAdminHeader

  # Define o arquivo de CSS que será utilizado no menu.
  config.register_stylesheet 'novo_menu.css'
  ...
end

Agora precisamos criar nossa classe CustomAdminHeader que conterá o código que irá sobrescrever a construção do menu. Você pode criar esta classe dentro da pasta app/admin e nomear o arquivo como custom_admin_header.rb. No arquivo criado, adicione o código abaixo:

# encoding: UTF-8

class CustomAdminHeader < ActiveAdmin::Views::Header
  include Rails.application.routes.url_helpers

  def build(namespace, menu)
    div :id => 'tabs' do
      # Adiciona um item de menu sem filhos.
      ul do
        # Substitua rota_destino_path para a rota que deseja seguir quando o item receber o clique.
        li { link_to 'Item sem filhos', rota_destino_path }
      end

      # Adiciona um item de menu com 1 filho.
      ul do
        li do
          text_node link_to("Pai com 1 filho", "#")
          ul do
            li { link_to 'Filho sem filhos', rota_destino_path }
            # Caso queira adicionar mais filhos, inclua mais LIs aqui.
          end
        end
      end

      # Adiciona um item de menu com 1 filho e 1 neto.
      ul do
        li do
          text_node link_to("Avó com 1 filho", "#")
          ul do
            li do
              text_node link_to("Pai com 1 filho", rota_destino_path)
              ul do
                li { link_to 'Neto sem filhos', rota_destino_path }
                # Caso queira adicionar mais netos, inclua mais LIs aqui.
              end
            end
          end
        end
      end

    # Chama o método construtor da classe pai para colocá-lo todos juntos.
    super(namespace, menu)
  end
end

Quase lá. A estrutura do seu menu será criada por esta classe por isso as definições de menu utilizadas nas classes contidas na pasta app/admin não devem ser exibidas. Para isto você precisa adicionar o código a seguir em todas as classes:

ActiveAdmin.register SuaClasse do
  menu false
end

Por fim deixo o código CSS que utilizei para customizar o menu de forma que mantivesse o layout do menu parecido com o menu original. Você pode chamar o arquivo CSS de novo_menu.css (conforme adicionamos nas configurações do ActiveAdmin) e salvá-lo na pasta app/assets/stylesheets.

.site_title {
  position: absolute;
  left: 20px;
  top: 10px;
  font-size: 1.5em !important;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

#tabs {
  font-size: 1.0em;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  padding-left: 80px;
  background: #6a7176;
  background: -webkit-gradient(linear, left top, left bottom, from(#6a7176), to(#4d5256));
  background: -moz-linear-gradient(-90deg, #6a7176, #4d5256);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6a7176', endColorstr='#4d5256');
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6a7176', endColorstr='#4d5256');
}

#tabs ul {
  margin:0;
  padding:0;
  list-style:none;
}

#tabs ul li {
  float:left;
}

#tabs ul li a {
  float: left;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 3px;
  padding-bottom: 3px;
  text-decoration:none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#tabs li ul {
  background: #7b8389;
  border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  box-shadow: 0 1px 3px #444444;
  -moz-box-shadow: 0 1px 3px #444444;
  -webkit-box-shadow: 0 1px 3px #444444;
  left: -999em;
  margin: 25px 0 0;
  position: absolute;
  width: 200px;
  z-index: 1010;
}

#tabs li ul a {
  background: none;
  border: 0 none;
  margin-right: 0;
  width: 160px;
  padding-top: 3px;
  padding-bottom: 3px;
}

#tabs ul li a:hover,
#tabs ul li:hover > a {
  color: #fff;
  background: #7b8389;;
}

#tabs li ul a:hover,
#tabs ul li li:hover > a  {
  color: #fff;
  background: #7b8389;;
}

#tabs li:hover ul {
  left: auto;
}

#tabs li li ul {
  margin: 0px 0 0 200px;
  visibility:hidden;
}

#tabs li li:hover ul {
  visibility:visible;
}

Bom, é isso! Espero que possa ser útil.

Até breve 😉

Padrão
#desenvolvimento

Criando um site com Locomotive CMS


Olá pessoal.

Neste mês tive a oportunidade de conhecer e trabalhar um pouco com o LocomotiveCMS. Fiquei bastante interessada em saber mais sobre como ele funciona. Então resolvi seguir o Getting started disponibilizado pelo pessoal do Locomotive. Mas, para variar, a instalação não ocorreu exatamente como o descrito e foram necessárias algumas configurações adicionais.

Recomendo que tentem primeiro seguir o que está proposto no Getting started e caso não consigam tentem os passos a seguir.

Observação: Os passos foram feitos no Mac OS X Lion 10.7.5.

Vamos lá 😉

Crie uma aplicação Rails:

rails new nome_aplicacao --skip-active-record --skip-test-unit --skip-javascript --skip-bundle

Acesse a pasta criada com a sua aplicação:

cd nome_aplicacao

Edite o arquivo Gemfile deixando apenas o código abaixo:

source 'https://rubygems.org'
gem 'rails', '3.2.11'
gem 'locomotive_cms', '~> 2.0.0.rc11', :require => 'locomotive/engine'
gem 'unicorn', :group => 'development'
gem 'compass-rails', '~> 1.0.2', :group => 'assets'
gem 'sass-rails', '~> 3.2.4', :group => 'assets'
gem 'coffee-rails', '~>; 3.2.2', :group => 'assets'
gem 'uglifier', '~> 1.2.4', :group => 'assets'
gem 'devise'

Instale as dependências:

bundle install

Instale o LocomotiveCMS na sua aplicação:

bundle exec rails g locomotive:install

Atualize seu Brew:

brew update

Instale o MongoDB, caso não tenha:

brew install mongodb

Coloque o MongoDB pra iniciar no boot do sistema operacional:

ln -sfv /usr/local/opt/mongodb/*.plist ~/Library/LaunchAgents

Inicie o MongoDB:

launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mongodb.plist

Crie o arquivo de configuração do MongoDB:

rails g mongoid:config

Caso receba o erro:
conflict config/mongoid.yml
Overwrite /Users/monteirobrena/Dropbox/repositorio/brains4it/sites/schedule_class/config/mongoid.yml? (enter “h” for help) [Ynaqdh]

Pressione Y para forçar a sobrescrita do arquivo.

Inicie o servidor Unicorn:

bundle exec unicorn_rails

Feito isto basta acessar o endereço http://localhost:8080 para configurar o seu site 😉

Agora, crie a conta de administrador do site, informando o nome da conta, o e-mail e a senha.

Criar conta de administrador

Criar conta de administrador

Crie o site informando o nome do site e escolhendo o idioma da área administrativa.

Criar site

Criar site

Logue na aplicação com os dados informados no cadastro da conta.

Logar na aplicação

Logar na aplicação

E só! O Locomotive CMS está pronto para ser explorado.

Tela inicial

Tela inicial

Isso é tudo pessoal, espero que seja útil para quem quer conhecer e testar o Locomotive.

Até breve 😉

Padrão
#prosa

Como foi o Rails Girls BH 2012?


Olá pessoal.

Em primeiro lugar gostaria de agradecer a todos que colaboraram e participaram do Rails Girls BH 2012. Foi muito prazeroso poder participar do evento como coach, ainda mais sendo a única mulher da equipe de coaches 😉

Também tive a oportunidade de conversar com a Shirley Pacelli, réporter dos cadernos de Turismo e Informática do Jornal Estado de Minas, que publicou uma reportagem sobre o evento. A reportagem em formato digital pode ser acessada aqui no site do Estado de Minas.

Espero que todas e todos (sim, alguns rapazes participaram com suas namoradas) que tiveram a oportunidade de conhecer o Rails no evento estejam entusiasmados com as inúmeras possibilidades que o framework nos oferece.

Vejam as fotos e saibam mais sobre o que aconteceu no evento através do Twitter e do Facebook.

Até breve.

Padrão
#prosa

Rails Girls em Belo Horizonte


Olá pessoal.

Este é mais um post de divulgação dos eventos que irão acontecer em BH. Desta vez é um convite direcionado às mulheres interessadas em desenvolvimento web, e mais especificamente em Rails.

Nos dias 14 e 15 de dezembro acontecerá o Rails Girls aqui em Belo Horizonte \o/. A inscrição para participar do evento é gratuita e pode ser feita até o dia 8 de dezembro neste site.

E para quem já conhece o framework é uma ótima oportunidade de participar como voluntário.

Bons códigos, garotas 😉

[Editado]

Para quem não sabe irei participar do evento como coach e estou muito feliz por isto, valeu meninas \o/

Lista de coach do Rails Girls BH

Lista de coach do Rails Girls BH

[/Editado]

 

Padrão
#desenvolvimento

Instalando Project Fedena com RVM


Olá pessoal.

Conforme havia informado no post anterior sobre a instalação do Fedena, a melhor opção é instalar utilizando o RVM. Executei a instalação no Ubuntu Server 12.10 e irei compartilhar aqui 😉

Para começar atualize seu sistema operacional:

sudo apt-get update

Instale algumas dependências para facilitar:

sudo apt-get install build-essential openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev ncurses-dev automake libtool bison subversion nodejs

Instale o RVM:

curl -L https://get.rvm.io | bash -s stable --ruby

Após instalar o RVM é necessário atualizar o profile para que o comandodo RVM  fique disponível:

. ~/.profile

Com o RVM pronto para ser utilizado, vamos instalar a versão 1.8.7 do Ruby requerida pelo Fedena. Quando tentei instalar esta versão do Ruby tive problemas com algumas keys, por isso é importante informar o parâmetro “–verify-downloads 1” para que não faça verificações das chaves ao instalar.

rvm install 1.8.7 --verify-downloads 1

Defina a versão 1.8.7 como versão padrão:

rvm --default use 1.8.7

Crie um gemset para o Rails 2.3.5 exigido pelo Project Fedena:

rvm gemset create rails2.3.5

Selecione a gemset criada anteriormente para ser utilizada:

rvm gemset use rails2.3.5

Instale a versão 2.3.5 do Rails:

gem install rails -v 2.3.5

Verifique se o Rails foi instalado corretamente:

rails -v

Baixe o pacote do Fedena:

wget http://projectfedena.org/download/fedena-bundle-linux

Instale o Unzip para extrair o conteúdo do pacote:

sudo apt-get install unzip

Extraia o conteúdo do pacote:

unzip fedena-bundle-linux

Entre na pasta do Fedena:

cd fedena-v2.3-bundle-linux/

Ao executar o bundle ocorreu erro de dependências do MySQL, por isso antes de executar o bundle instale as dependências:

sudo apt-get install libmysqlclient18 libmysqlclient-dev

Execute o bundle para instalar as gems utilizadas no projeto:

bundle install --local

Edite o arquivo config/database.yml informando o seu usuário e senha do banco de dados.

Edite também o arquivo Rakefile incluindo mais um requisito para o Rake:

# Insira a linha abaixo antes de require 'rake'.
require 'thread'
require 'rake'

Crie os bancos de dados para o projeto:

rake db:create:all --trace

Instale a versão 1.3.7 do Rubygems:

rvm rubygems 1.3.7

Instale os plugins do Fedena:

rake fedena:plugins:install_all --trace

Inicie o servidor:

script/server

E pronto! Pelo browser acesse a página inicial do Fedena:

http://localhost:3000

Para logar utilize as credenciais:

Username: admin

Password: admin123

Compartilho o link de alguns posts que me ajudaram a instalar o RVM no Ubuntu:

https://github.com/danielvlopes/ruby-unix/blob/master/pt/ubuntu_12_04.md

http://www.compilando.org/wp/programacao/como-instalar-o-rvm-no-ubuntu-11-04-natty

http://gregoriomelo.com/2011/rvm-desenvolvimento-responsavel-em-ruby-e-rails/

Até breve 😉

Padrão
#desenvolvimento

Como adicionar botões de compartilhamento de redes sociais – Facebook


Olá pessoal.
Neste post iremos implementar o compartilhamento pelo Facebook utilizando um projeto RoR com HAML e Javascript. Com projeto criado iremos adicionar o código abaixo no arquivo index.html.haml:

/ Botão de compartilhamento pelo Facebook.
.span
  .fb-send{"data-font" => "arial", "data-href" => "http://#{request.host}:#{request.port}#{request.fullpath}"}
  #fb-root
    :javascript
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

Este botão do Facebook irá compartilhar o link da sua página que será formado por este código:

http://#request.host:#request.port#request.fullpath

Onde:
#{request.host} – Retorna o host da aplicação.
#{request.port} – Retorna a porta.
#{request.fullpath} – Retorna o caminho da página composto também pelas pastas.

Observação, o Facebook não permitiu o compartilhamento devido a aplicação está rodando localmente. Você pode publicar sua aplicação no Heroku para poder testar. Acesse este post e veja como realizar o deploy da aplicação no Heroku.

Para mais detalhes sobre o button share do Facebook acesse aqui.

Até breve 😉

Padrão