Skip to content

Instantly share code, notes, and snippets.

@pereiragislene
Last active August 29, 2015 14:01
Show Gist options
  • Save pereiragislene/ccce3468a93ea047bd8f to your computer and use it in GitHub Desktop.
Save pereiragislene/ccce3468a93ea047bd8f to your computer and use it in GitHub Desktop.
Programar meu futuro - Workshop Guide

###Olá!

Este guia irá lhe ajudar na criação de uma aplicação web utilizando Ruby on Rails!

Você será guiado desde a instalação das ferramentas necessárias para o desenvolvimento, até termos nossa aplicação rodando localmente. Usaremos também uma gem para incluir o twitter-bootstrap na nossa app de maneira bem fácil. O bootstrap disponibiliza uma gama de opções de estilo para o nosso site, sem precisar gastar muito tempo em arquivos CSS e HTML.

Se desejar baixar a versão final, este é o nosso repositório no GitHub:

https://github.com/pereiragislene/sos_denuncia

Divirta-se! :)

####SOS Denúncia

O SOS Denúncia é um projeto que tem o objetivo de facilitar e incentivar a realização de denúncias de casos de homofobia, violência contra a mulher, racismo, pedofilia, entre outros. Dando a devida visibilidade e atenção para os casos, podemos minimizar a impudinidade e aumentar a realização de ações preventivas para diminuir ou até acabar com estas ocorrências.

Achou a ideia bacana e quer ajudar a fazer um mundo melhor? Que tal desenvolver uma app bem legal pra ajudar nisso? :)

Vamos pôr a mão na massa! Mas do que precisamos?

####1. Instalação

É a maneira mais rápida para começarmos a desenvolver em Ruby on Rails. Ele inclui tudo o que precisaremos para iniciar o nosso projeto: Ruby 1.9.3, Rails 3.2, Bundler, Git e Sqlite.

Ah, iremos precisar de um editor de texto. Recomendamos o Sublime, mas pode ser o que você preferir.

####2. Criando a aplicação

Para criarmos nossa aplicação, faremos uso de um terminal de comandos. Se você estiver utilizando o Windows, use o PowerShell. Se estiver no Mac ou Linux, utilize o Terminal.

Execute os comandos abaixo:

Para criar nossa aplicação:

> rails new sos_denuncia

Acesse o diretório da app que acabamos de criar:

> cd sos_denuncia

Precisamos instalar as gems do nosso projeto:

> bundle install

Vamos iniciar o servidor para rodar a app:

> rails server

Verifique que sua app está no ar. No navegador de sua preferência, acesse:

http://localhost:3000

No momento você deverá ver apenas uma página de boas vindas do Rails. Mas em breve criaremos nossa própria página o/

Dica: para interromper a execução da app, execute Ctrl+C no terminal.

Se você conseguiu abrir a página com sucesso, vamos para o próximo passo.

Abra sua aplicação no Sublime Text e dê uma olhada na estrutura de diretórios que o Rails gerou para nós.

####3. Adicionando uma nova gem (Bootstrap) Uma gem é um pacote ou uma aplicação que podemos adicionar ao nosso projeto Ruby para adicionar novas funcionalidades. O Rails é uma gem, inclusive.

Queremos deixar nossa app com uma apresentação amigável. E para isso utilizaremos uma gem que nos poupará bastante trabalho, adicionando o plugin twitter-bootstrap ao nosso projeto.

Para isso, abra o arquivo Gemfile (está dentro do sos_denuncia) e adicione a linha abaixo no final do arquivo:

gem 'bootstrap-generators', '~> 3.1.1'

OBS: Para mais detalhes sobre essa gem, acesse o repositório no GitHub: https://github.com/decioferreira/bootstrap-generators

Após adicionar a gem, precisamos realizar a instalação dela através do bundler. Execute o comando abaixo no terminal (dentro do diretório sos_denuncia):

> bundle install

Feita a instalação, iremos gerar o bootstrap na nossa aplicação. Isso fará com que sejam adicionados arquivos de estilo CSS e javascript.

> rails generate bootstrap:install -f

4. Criando o scaffold

O scaffold nos permite iniciar uma aplicação MVC, ou seja, com arquitetura baseada em Modelo, Visão e Controladora. Ele nos gera também um script para criação da base de dados que utilizaremos na app.

DICA:* Antes de executarmos o scaffold, se você desejar utilizar um nome em português, será necessário alterar o arquivo inflections.

config/initializers/inflections.rb

Isso porque o Rails foi desenvolvido para trabalhar com palavras em inglês e ele não está pronto para flexionar palavras em português.

No arquivo inflections, adicione o trecho de código abaixo:

ActiveSupport::Inflector.inflections do |inflect|
   inflect.irregular 'ocorrencia', 'ocorrencias'
end

Agora podemos gerar nosso scaffold Ocorrencia e o Rails saberá que o plural correto é Ocorrencias. Se não alterarmos o arquivo de inflections, ele irá gerar um Model chamado Ocorrencium (estranho, né?).

No terminal, execute o comando abaixo:

> rails generate scaffold Ocorrencia tipo_ocorrencia:string descricao:text nome_vitima:string logradouro:string bairro:string cidade:string estado:string  nome_contato:string telefone_contato:string

Verifique que foi criada uma migration em db/migrate. Esse arquivo contém um script que irá criar uma tabela chamada ocorrencia.

Acesse a página no navegador:

http://localhost:3000/ocorrencias

Recebeu uma mensagem de erro? Pois é... Antes de acessar os dados, precisamos criar o banco de dados e executar o arquivo de migration.

> rake db:create
> rake db:migrate

Acesse http://localhost:3000/ocorrencias novamente. Funcionou? Boa! :)

5. Setando a página inicial da app

Agora vamos fazer com que nossa aplicação seja acessível sem ter que digitar /ocorrencias.

No arquivo config/routes.rb, adicione a linha abaixo:

root 'ocorrencias#index'

Isso fará com que o root* da nossa aplicação seja o caminho ocorrencias/index (que é a página que lista as ocorrências).

  • root é a raiz ou ponto inicial do projeto.

Acesse http://localhost:3000 e verifique que a página de boas vindas do Rails não é mais exibida.

6. Adicionando validações

Pensa que estranho uma ocorrência sem nenhuma informação cadastrada ou um número de telefone com letras?! Por isso, precisamos validar as informações de uma ocorrência antes de adicioná-la à aplicação (e salvar no banco de dados).

Primeiro, vamos impedir que a ocorrência seja registrada com campos em branco. O validates_presence_of é o responsável por fazer essa mágica pra gente! :D Legal, né?

No arquivo app/models/ocorrencia.rb adicione o trecho de código abaixo:

validates_presence_of :tipo_ocorrencia, :message => " - deve ser preenchido"
validates_presence_of :descricao, :message => " - deve ser preenchido"
validates_presence_of :nome_vitima, :message => " - deve ser preenchido"
validates_presence_of :logradouro, :message => " - deve ser preenchido"
validates_presence_of :bairro, :message => " - deve ser preenchido"
validates_presence_of :cidade, :message => " - deve ser preenchido"
validates_presence_of :estado, :message => " - deve ser preenchido"
validates_presence_of :nome_contato, :message => " - deve ser preenchido"
validates_presence_of :telefone_contato, :message => " - deve ser preenchido"  

Esse trecho fará com que todos os campos do formulário sejam validados ao tentar adicionar uma ocorrência. Caso um ou mais campos não tenham sido preenchidos, ao clicar no botão para salvar a ocorrência, é exibida uma mensagem de erro para que o usuário saiba qual a informação que está faltando e preencha o formulário corretamente.

Para validar que o campo de telefone só possui números e 10 dígitos, adicione as duas linhas de código abaixo no arquivo app/models/ocorrencia.rb:

validates_format_of :telefone_contato, :with => /\A[\d]+\z/, :message => " - deve ser um numero", :allow_blank => true
validates_length_of :telefone_contato, :is => 10, :message => " - deve ter 10 digitos", :allow_blank => true

7. Adicionando máscara no telefone

Ao gerarmos o scaffold, o rails criou também um arquivo ocorrencias_helper.rb Um arquivo helper nos permite adicionar métodos que serão utilizados por arquivos de visão (views). Adicione o código abaixo no arquivo app/helpers/ocorrencias_helper.rb:

module OcorrenciasHelper
	def formata_telefone(numero_telefone)
	  tel_formatado = "("
	  tel_formatado << numero_telefone[0..1]
	  tel_formatado << ")"
	  tel_formatado << numero_telefone[2..5]
	  tel_formatado << "-"
	  tel_formatado << numero_telefone[6..9]
	  tel_formatado
	end
end

E no arquivo app/views/ocorrencias/index.html.erb, adicione a chamada do método no campo telefone_contato. A linha onde tínhamos:

<td><%= ocorrencia.telefone_contato %></td>

Deve se tornar:

<td><%= formata_telefone(ocorrencia.telefone_contato) %></td>

Note que ao visualizar a lista de ocorrências na página inicial, o telefone para contato com a vítima é apresentado no formato definido no helper. Imagine que o telefone de contato da vítima seja 8499998888, mas veremos (84)9999-8888.

7. Adicionando autenticação de usuário

...

@kalilmvp
Copy link

kalilmvp commented Jul 2, 2014

Muito interessante o projeto Programar meu Futuro com o com o CodeGirl. Mas Gislene, queria saber se você continou esse tutorial em outro Gist ou não. Ou se é só pra gente ficar na vontade mesmo, hahah!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment