40 |
--------------------------------------------------------------------------------
/_includes/other-guides.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ## Outros Guias
4 |
5 | - [Handy cheatsheet for Ruby, Rails, console etc.](http://www.pragtob.info/rails-beginner-cheatsheet/)
6 | - Guia 1: [Tutorial de Instalação para Rails Girls](/install) {% if include.page == 'install' %}(Você está aqui!){% endif %}
7 | - Guia 2: [Tutorial para criação da app Rails Girls](/app) {% if include.page == 'github' %}(Você está aqui!){% endif %}
8 | - Guia 3: [Como enviar para o GitHub](/github) {% if include.page == 'github' %}(Você está aqui!){% endif %}
9 | - Guia 4: Colocando seu app online em...
10 | - [Heroku](/heroku) {% if include.page == 'heroku' %}(Você está aqui!){% endif %}
11 | - [OpenShift](/openshift) {% if include.page == 'openshift' %}(Você está aqui!){% endif %}
12 | - [Anynines](/anynines) {% if include.page == 'anynines' %}(Você está aqui!){% endif %}
13 | - [Engine Yard](/engineyard) {% if include.page == 'engineyard' %}(Você está aqui!){% endif %}
14 | - Guia 5: [Funcionalidades de uma área de comentários para a app Rails Girls](/commenting) {% if include.page == 'commenting' %}(Você está aqui!){% endif %}
15 | - Guia 6: [Adicione design à sua aplicação com HTML e CSS](/design) {% if include.page == 'design' %}(Você está aqui!){% endif %}
16 | - Guia 7: [Thumbnails em listas de ideas](/thumbnails) {% if include.page == 'thumbnails' %}(Você está aqui!){% endif %}
17 | - Guia 8: [Autenticação (para usuários) com Devise](/devise) {% if include.page == 'devise' %}(Você está aqui!){% endif %}
18 | - Guia 9: [Adicionando Gravatar para a aplicação](/gravatar) {% if include.page == 'gravatar' %}(Você está aqui!){% endif %}
19 | - Guia 10: [Melhorando seu design da sua aplicação com HTML e CSS](/design-html-css) {% if include.page == 'design-html-css' %}(Você está aqui!){% endif %}
20 | - Guia 11: Continuous Deployment
21 | - [Testando seu app com RSpec](testing-rspec) {% if include.page == 'testing-rspec' %}(Você está aqui!){% endif %}
22 | - [CD with Travis-CI](/continuous-travis) {% if include.page == 'travis' %}(Você está aqui!){% endif %}
23 | - [CD with Codeship](/continuous) {% if include.page == 'continuous' %}(Você está aqui!){% endif %}
24 | - Guia 12: [Construindo um aplicativo de votação em Sinatra](/sinatra-app) {% if include.page == 'sinatra-app' %}(Você está aqui!){% endif %}
25 | - Guia 13: [Construa um diário em Ruby on Rails](diary-app) {% if include.page == 'diary-app' %}(Você está aqui!){% endif %}
26 | - Guia 14: [Adicione back-end ao seu aplicativo (páginas de administração)](/backend-with-active-admin) {% if include.page == 'active-admin' %}(Você está aqui!){% endif %}
27 | - Guia 15: [Acesse explicações adicionais do app Rails Girls](https://github.com/lbain/railsgirls/)
--------------------------------------------------------------------------------
/_layouts/default.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{ page.title }} - Rails Girls
6 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | {% include header.html %}
23 |
24 |
25 | {{ content }}
26 |
27 |
28 | {% include footer.html %}
29 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/_posts/2012-04-19-contributing.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Contribua com um tutorial
4 | permalink: contributing
5 | ---
6 |
7 | # Instruções para contribuir com um tutorial
8 |
9 | *Traduzido por Maujor, [site do Maujor](http://www.maujor.com)*
10 |
11 | O site de tutoriais usa a tecnologia [jekyll](https://github.com/mojombo/jekyll) para renderizar suas páginas e todos os documentos do site são escritos com uso da sintaxe [markdown](http://daringfireball.net/projects/markdown/). Para contribuir com um ou mais ( ;-) ) tutoriais siga os seguinte passos:
12 |
13 | 1. Dê um fork no [repositório do github](https://github.com/railsgirlsmaceio/railsgirlsguides) clicando no botão "Fork".
14 | 2. Execute o comando `git clone` no seu fork.
15 |
16 | ## Se você quer criar um novo tutorial
17 |
18 | - Crie um arquivo denominado `YYYY-MM-DD-nome_do_tutorial.markdown` e salve no diretório `_posts` do seu fork.
19 | - No início do arquivo recém criado use a sintaxe YAML para serializar alguns dados que são padronizados para os tutoriais. Veja um exemplo destes dados que se aplica a este documento que você está visualizando:
20 |
21 |
22 | ---
23 | layout: default
24 | title: Contribua com um tutorial
25 | permalink: contributing
26 | ---
27 |
28 |
29 | - A seguir escreva seu tutorial usando a sintaxe markdown.
30 |
31 | Você pode tomar como base para seu tutorial a estrutura do tutorial [Rails Girls App Tutorial](https://github.com/railsgirlsmaceio/railsgirlsguides/blob/gh-pages/_posts/2012-04-18-app.markdown).
32 |
33 | ## Se você quer melhorar um tutorial já existente:
34 | Faça as mudanças no arquivo que você quer mudar! Você não precisa criar um novo arquivo se você quer mudar alguma coisa em um arquivo que já existe.
35 |
36 | ## Depois...
37 |
38 | 1. Commit seu tutorial para o seu repositório.
39 | 2. Feito o commit envie-o para seu fork.
40 | 3. Finalmente abra um pull request e nele acrescente uma breve descrição do seu tutorial. Feito!
41 |
42 | Nossos mais efusivos agradecimentos por dedicar seu tempo em favor do enriquecimento dos conteúdos do site Rails Girls.
43 |
44 | {% include other-guides.md page="contributing" %}
45 |
--------------------------------------------------------------------------------
/_posts/2012-04-19-heroku.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Rails Girls — Heroku
4 | permalink: heroku
5 | ---
6 |
7 | # Publique sua aplicação com Heroku
8 |
9 | *Criado por Terence Lee, [@hone02](https://twitter.com/hone02)*
10 | *Traduzido por Maujor, [site do Maujor](http://www.maujor.com)*
11 |
12 | ### Observação importante
13 | O Heroku desde agosto de 2022 não oferece mais o serviço gratuito, porém dentro da plataforma existe uma alternativa para estudantes chamada [Heroku for Github Students](https://www.heroku.com/github-students), onde é necessário se cadastrar e enviar documentos necessários para a liberação de créditos dentro da plataforma.
14 |
15 | ### Instale Heroku
16 |
17 | Siga os passos intitulados "Introduction" e "Set up" constantes na página
18 | [Getting Started on Heroku with Ruby][heroku-guide] para se cadastrar, instalar Heroku CLI e fazer login.
19 |
20 | __INSTRUTOR(A)__: Fale sobre os benefícios do uso da plataforma Heroku para publicação vs uso de servidores tradicionais.
21 |
22 | [heroku-guide]: https://devcenter.heroku.com/articles/getting-started-with-ruby#introduction
23 |
24 | ### Preparando sua app
25 |
26 | #### Atualizando o banco de dados
27 |
28 | Em primeiro lugar precisamos fazer com que nosso banco de dados funcione na plataforma Heroku, que usa um banco de dados diferente. Altere o seguinte em Gemfile:
29 |
30 | {% highlight ruby %}
31 | gem 'sqlite3'
32 | {% endhighlight %}
33 |
34 | para
35 |
36 | {% highlight ruby %}
37 | group :development do
38 | gem 'sqlite3'
39 | end
40 | group :production do
41 | gem 'pg'
42 | end
43 | {% endhighlight %}
44 |
45 | Rode `bundle install --without production` para configurar suas dependências.
46 |
47 | Após isso, atualize o arquivo `config/database.yml`.
48 | Mude a seguinte parte do código:
49 |
50 | {% highlight yaml %}
51 | production:
52 | <<: *default
53 | database: db/production.sqlite3
54 | {% endhighlight %}
55 |
56 | para
57 |
58 | {% highlight yaml %}
59 | production:
60 | adapter: postgresql
61 | encoding: unicode
62 | database: railsgirls_production
63 | pool: 5
64 | {% endhighlight %}
65 |
66 | Não se esqueça de fazer `git add .` e `git commit -m "Utilizando postgres como banco de dados de producao"`
67 | para adicionar esta mudança ao seu branch master antes de enviar ao heroku mais tarde.
68 |
69 | __INSTRUTOR(A)__: Você pode falar sobre RDBMS e as diferenças para outros sistemas de gerenciamento bem como apresentar alguns detalhes das dependências em Heroku no PostgreSQL.
70 |
71 | #### Sistema de controle de versão
72 |
73 | Para começar vamos adicionar nosso código em um sistema de controle de versão. Você pode fazer isso executando os seguintes comandos no terminal:
74 |
75 | {% highlight sh %}
76 | git init
77 | git add .
78 | git commit -m "initial commit"
79 | {% endhighlight %}
80 |
81 | __INSTRUTOR(A)__: Agora é uma ótima oportunidade para falar sobre sistemas de controle de versão e git.
82 |
83 | ### Publicando sua app
84 |
85 | #### Criando a app
86 |
87 | Precisamos criar nossa aplicação heroku executando `heroku create` no terminal.
88 | Esta ação mostrará no terminal o seguinte:
89 |
90 | {% highlight sh %}
91 | Creating app... done, ⬢ young-reaches-87845
92 | https://young-reaches-87845.herokuapp.com/ | https://git.heroku.com/young-reaches-87845.git
93 | {% endhighlight %}
94 |
95 | Neste caso "young-reaches-87845" é o nome da sua aplicação
96 |
97 | #### Fazendo o pushing do código
98 |
99 | A seguir precisamos fazer o push do código para o heroku excutando `git push heroku master`. Você verá a saída do push como mostrado a seguir:
100 |
101 | {% highlight sh %}
102 | Counting objects: 115, done.
103 | Delta compression using up to 8 threads.
104 | Compressing objects: 100% (97/97), done.
105 | Writing objects: 100% (115/115), 25.62 KiB | 0 bytes/s, done.
106 | Total 115 (delta 10), reused 0 (delta 0)
107 | remote: Compressing source files... done.
108 | remote: Building source:
109 | remote:
110 | remote: -----> Ruby app detected
111 | remote: -----> Compiling Ruby/Rails
112 | remote: -----> Using Ruby version: ruby-2.2.4
113 | remote: -----> Installing dependencies using bundler 1.11.2
114 | remote: Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
115 | remote: Fetching gem metadata from https://rubygems.org/..........
116 | remote: Fetching version metadata from https://rubygems.org/...
117 | remote: Fetching dependency metadata from https://rubygems.org/..
118 | remote: Installing concurrent-ruby 1.0.2
119 | ...
120 | remote: -----> Launching...
121 | remote: Released v5
122 | remote: https://young-reaches-87845.herokuapp.com/ deployed to Heroku
123 | remote:
124 | remote: Verifying deploy... done.
125 | To https://git.heroku.com/young-reaches-87845.git
126 | * [new branch] master -> master
127 | {% endhighlight %}
128 |
129 | O envio estará terminado com êxito quando aparecer o texto “Launching…” como mostrado anteriomente.
130 |
131 | #### Migrando o banco de dados
132 |
133 | Precisamos migrar nosso banco de dados tal como fizemos localmente durante o workshop:
134 |
135 | {% highlight sh %}
136 | heroku run rake db:migrate
137 | {% endhighlight %}
138 |
139 | Depois que esse comando for executado você poderá acessar a app na sua URL. Para a aplicação que desenvolvemos nesse exemplo abra: .
140 | Opcionalmente, para visitar a página, você pode executar `heroku open` no terminal.
141 |
142 | #### Notas finais
143 |
144 | A plataforma Heroku tem suas peculiaridades. Nela os aplicativos são executados em tempo real dentro de um ambiente efêmero - isso significa que (exceto para informações armazenadas em seu banco de dados) quaisquer arquivos criados por seu aplicativo irá desaparecer quando ele for reiniciado (por exemplo, quando você atualiza para uma nova versão).
145 |
146 | ###### [Sistema de arquivos efêmero][ephemeral-filesystem]
147 |
148 | > Cada container dyno cria seu próprio sistema de arquivos efêmero contendo uma cópia
149 | > do mais recente código publicado. Durante o período de vida do dyno os processos nele rodando
150 | > usam um sistema de arquivos que são escritos em um rascunho temporário, contudo nenhum destes arquivos
151 | > são visíveis para processamento em qualquer outro dyno, tais arquivos serão
152 | > descartados no momento em que o dyno for parado ou restartado. Por exemplo, isso
153 | > acontece sempre que o dyno é substituído em decorrência uma implantação de aplicativos e, também,
154 | > em média uma vez por dia, pois assim está previsto pelo mecanismo de gestão nativo do dyno.
155 |
156 | No [tutorial para criação do App](app) a funcionalidade que prevê a gravação de arquivos em uma Idea, permite escrever arquivos no diretório `public/uploads` das suas aplicações . Você pode constatar o armazenamento efêmero em Heroku seguindo os seguintes passos:
157 |
158 | 1. Inicie a aplicação executando o comando `heroku open`
159 | 2. Adicione uma nova Idea e nela uma imagem
160 | 3. Reinicie a aplicação executando o comando `heroku restart`
161 | 4. Volte para a página da Idea e recarregue - a imagem não será mais visível
162 |
163 | [ephemeral-filesystem]: https://devcenter.heroku.com/articles/dynos#ephemeral-filesystem
164 |
165 | ##### Contornando o armazenamento efêmero
166 |
167 | É óbvio que armazenamento efêmero não é conveniente quando se trata de uma aplicação real, mas existem métodos para contornar o problema que são usados em muitos websites populares.
168 |
169 | O método mais comum consiste em se usar um serviço de hospedagem externo, tais como, Amazon S3 (Simple Storage Service) ou Rackspace CloudFiles para hospedar os *assets* da aplicação. Tais serviços disponibilizam (por um custo baixo - em geral $0.10 por GB) armazenamento 'na nuvem' (os arquivos podem ser hospedados em qualquer lugar) proporcionando um armazenamento persistente para sua aplicação.
170 |
171 | Não é do escopo deste tutorial detalhar a hospedagem 'na nuvem', mas se você estiver interessado em mais informações a respeito seguem alguns links úteis:
172 |
173 | * [How to: Make Carrierwave work on Heroku](https://github.com/carrierwaveuploader/carrierwave/wiki/How-to%3A-Make-Carrierwave-work-on-Heroku)
174 | * [Amazon S3 – The Beginner’s Guide](http://www.hongkiat.com/blog/amazon-s3-the-beginners-guide/)
175 |
176 | Como sempre, se você precisar de mais informações ou assistência pergunte aos seus instrutores(as).
177 |
178 | {% include other-guides.md page="heroku" %}
179 |
--------------------------------------------------------------------------------
/_posts/2012-04-30-commenting.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Funcionalidades de uma área de comentários para a app Rails Girls
4 | permalink: commenting
5 | ---
6 | # Área de comentários para a app Rails Girls
7 |
8 | *Criado por Janika Liiv, [@janikaliiv](https://twitter.com/janikaliiv)*
9 |
10 | *Traduzido por Maujor, [site do Maujor](http://www.maujor.com)*
11 |
12 | *Atualizado por Tayllan, [@mtayllan](https://github.com/mtayllan)*
13 |
14 | Vamos aprender como criar uma área de comentários para nossa app *railsgirls* ideas.
15 |
16 | As instruções para criar a app foram descritas [neste documento](/app).
17 |
18 | ## _1._ Criando o scaffold para a área de comentários
19 |
20 | Crie o scaffold para a área de comentários fazendo nele constar o nome de quem comenta, o corpo do comentário (conteúdo do comentário) e uma referência para a tabela ideas (`idea_id`).
21 | {% highlight sh %}
22 | rails g scaffold comment user_name:string body:text idea_id:integer
23 | {% endhighlight %}
24 | Esta ação criará um arquivo de migração que permitirá ao banco de dados conhecer a nova tabela de comentários. A seguir migre as alterações feitas no banco de dados digitando no terminal o seguinte:
25 | {% highlight sh %}
26 | rails db:migrate
27 | {% endhighlight %}
28 |
29 | ## _2._ Adicione relacionamentos aos modelos
30 |
31 | Você precisa assegurar que Rails seja capaz de identificar a conexão entre objetos (ideas e comentários). De vez que uma idea pode ter vários comentários precisamos assegurar que o modelo ideas sabe disso. Abra `app/models/idea.rb` e logo após a linha:
32 | {% highlight ruby %}
33 | class Idea < ApplicationRecord
34 | {% endhighlight %}
35 | acrescente o seguinte:
36 | {% highlight ruby %}
37 | has_many :comments
38 | {% endhighlight %}
39 |
40 | Um comentário precisa saber que ele pertence a uma idea. Assim, abra `app/models/comment.rb` e logo após a linha:
41 | {% highlight ruby %}
42 | class Comment < ApplicationRecord
43 | {% endhighlight %}
44 |
45 | acrescente a seguinte linha:
46 | {% highlight ruby %}
47 | belongs_to :idea
48 | {% endhighlight %}
49 |
50 | ## _3._ Mostrar o formulário de comentários e os comentários existentes
51 |
52 | Abra `app/views/ideas/show.html.erb` é depois da tag de imagem (`image_tag`)
53 | {% highlight erb %}
54 | <%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present? %>
55 | {% endhighlight %}
56 |
57 | acrescente a seguinte linha:
58 | {% highlight erb %}
59 |
96 | {% endhighlight %}
97 |
98 | Pronto! Visualize uma idea que você tenha acrescentado à sua aplicação e você verá ali o formulário para inserir um comentário bem como a funcionalidade para deletar comentários.
99 |
100 | {% include other-guides.md page="commenting" %}
101 |
--------------------------------------------------------------------------------
/_posts/2012-06-03-thumbnails.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Thumbnails em listas de ideas
4 | permalink: thumbnails
5 | ---
6 |
7 | # Criando thumbnails com Carrierwave
8 |
9 | *Criado por Miha Filej, [@mfilej](https://twitter.com/mfilej)*
10 | *Traduzido por Maujor, [site do Maujor](http://www.maujor.com)*
11 |
12 | __INSTRUTOR(A)__: Explicar qual o efeito de se definir a largura de uma imagem na marcação HTML como explicado no final do passo 4, constante do tutorial *Tutorial para criação da app Rails Girls*.
13 |
14 | ## *1.* Instalando ImageMagick
15 |
16 | * macOS: rode `brew install imagemagick`. Se o comando brew não estiver disponível no seu terminal, instale [install Homebrew here][in-homebrew].
17 | * Windows: faça o download e rode o [ImageMagick installer][im-win] (use o primeiro link do *download* ).
18 | * Linux: em Ubuntu e Debian, rode `sudo apt-get install imagemagick`. Use o gerenciador de package apropriado em lugar de `apt-get` para as demais distribuições Linux.
19 |
20 | [im-win]: http://www.imagemagick.org/script/binary-releases.php?ImageMagick=vkv0r0at8sjl5qo91788rtuvs3#windows
21 | [in-homebrew]: http://mxcl.github.io/homebrew/
22 |
23 | __INSTRUTOR(A)__: Explique o que é ImageMagick e qual a diferença para outras bibliotecas/gems que já usamos anteriormente?
24 |
25 | Abra `Gemfile` no seu projeto e acrescente o seguinte:
26 |
27 | {% highlight ruby %}
28 | gem 'mini_magick'
29 | {% endhighlight %}
30 |
31 | logo após a linha
32 |
33 | {% highlight ruby %}
34 | gem 'carrierwave'
35 | {% endhighlight %}
36 |
37 | No Terminal rode:
38 |
39 | {% highlight sh %}
40 | bundle
41 | {% endhighlight %}
42 |
43 | ## *2.* Dizendo para a app criar um thumbnail quando uma imagem for enviada ao servidor
44 |
45 | Abra `app/uploaders/picture_uploader.rb` e encontre a linha conforme mostrada a seguir:
46 |
47 | {% highlight ruby %}
48 | # include CarrierWave::MiniMagick
49 | {% endhighlight %}
50 |
51 | Remova o sinal `#`.
52 |
53 | __INSTRUTOR(A)__: Explicar o uso e finalidades da inserção de comentários nos códigos.
54 |
55 | Logo após a linha que você acabou de descomentar acrescente o seguinte:
56 |
57 | {% highlight ruby %}
58 | version :thumb do
59 | process :resize_to_fit => [50, 50]
60 | end
61 | {% endhighlight %}
62 |
63 | A partir de agora as imagens enviadas ao servidor serão redimensionadas para criar thumbnails, contudo aquelas já existentes no servidor não serão afetadas. Edite uma das ideas já existentes e reenvie a imagem para o servidor.
64 |
65 | ## *3.* Mostrando thumbnails
66 |
67 | Para verificar se uma imagem enviada ao servidor foi redimensionada abra
68 | `app/views/ideas/index.html.erb`. Altere a linha
69 |
70 | {% highlight erb %}
71 |
<%= image_tag idea.picture_url(:thumb) if idea.picture? %>
78 | {% endhighlight %}
79 |
80 | Dê uma olhada na lista das ideas, no navegador, para verificar se o thumbnail está ali.
81 |
82 | {% include other-guides.md page="thumbnails" %}
83 |
--------------------------------------------------------------------------------
/_posts/2012-11-01-devise.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Autenticação com Devise
4 | permalink: devise
5 | ---
6 |
7 | # Autenticação com Devise
8 |
9 | *Criado por Piotr Steininger, [@polishprince](https://twitter.com/polishprince)*
10 |
11 | *Atualizado por Ernesto Jimenez, [@ernesto_jimenez](https://twitter.com/ernesto_jimenez)*
12 |
13 | *Traduzido por Maujor, [site do Maujor](http://www.maujor.com)*
14 |
15 | **Esse guia assume que você já criou a app RailsGirls como mostrado no** [**tutorial para criação da app Rails Girls**](/app).
16 |
17 |
18 | ## *1.* Adicione a gem Devise
19 |
20 | Abra sua `Gemfile` e acrescente a seguinte linha de código:
21 |
22 | {% highlight ruby %}
23 | gem 'devise'
24 | {% endhighlight %}
25 | e execute
26 | {% highlight sh %}
27 | bundle install
28 | {% endhighlight %}
29 | para instalar a gem. **Não se esqueça de restartar o servidor Rails**.
30 |
31 | ## *2.* Configure devise na sua app
32 |
33 | Execute o seguinte comando no terminal:
34 |
35 | {% highlight sh %}
36 | rails g devise:install
37 | {% endhighlight %}
38 |
39 |
40 | ## *3.* Configure Devise
41 |
42 | Assegure-se de ter definido as opções default para URL no ambiente dos seus arquivos. Abra `config/environments/development.rb` e adicione a seguinte linha de código:
43 | {% highlight ruby %}
44 | config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
45 | {% endhighlight %}
46 |
47 | antes da palavra-chave `end`.
48 |
49 | Abra `app/views/layouts/application.html.erb` e adicione o seguinte:
50 |
51 | {% highlight erb %}
52 | <% if notice %>
53 |
<%= notice %>
54 | <% end %>
55 | <% if alert %>
56 |
<%= alert %>
57 | <% end %>
58 | {% endhighlight %}
59 | acima de
60 | {% highlight ruby %}
61 | <%= yield %>
62 | {% endhighlight %}
63 |
64 | Abra `app/views/ideas/show.html.erb` e remova a seguinte linha:
65 |
66 | {% highlight erb %}
67 |
<%= notice %>
68 | {% endhighlight %}
69 |
70 | Faça o mesmo em `app/views/comments/show.html.erb`. Aquelas linhas não são necessárias, pois nós acrescentamos notice no arquivo `app/views/layouts/application.html.erb`.
71 |
72 | ## *4.* Configure o modelo de usuários
73 |
74 | Usaremos um script gerador de empacotamento para criar o modelo de usuários.
75 | {% highlight sh %}
76 | rails g devise user
77 | rake db:migrate
78 | {% endhighlight %}
79 |
80 | **Instrutor(a):** Explicar qual foi o modelo de usuário criado. Qual a finalidade dos campos?
81 |
82 | ## *5.* Criando o primeiro usuário
83 |
84 | Agora que está tudo devidamente configurado podemos criar nosso primeiro usuário. Devise gera todos os códigos e caminhos necessários para criar contas, log in, log out, etc.
85 |
86 | Certifique-se de que o servidor rails está rodando, abra e crie uma conta de usuário.
87 |
88 | ## *6.* Crie links para cadastramento e login
89 |
90 | Agora só nos resta criar links e notificação de usuário logado no canto superior direito da barra de navegação.
91 |
92 | Para fazer isso edite `app/views/layouts/application.html.erb` e acrescente as seguintes linhas:
93 | {% highlight erb %}
94 |
114 | {% endhighlight %}
115 |
116 | Para finalizar force o usuário a ser redirecionado para a página de login se ele não estiver logado. Abra `app/controllers/application_controller.rb` e adicione a seguinte linha:
117 |
118 | {% highlight ruby %}
119 | before_action :authenticate_user!
120 | {% endhighlight %}
121 |
122 | depois de `class ApplicationController < ActionController::Base`.
123 |
124 | Abra seu navegador e execute as ações de login e logout.
125 |
126 | **Instrutor(a):** Falar sobre `user_signed_in?` e `current_user` helpers. Qual é a utilidade destas funcionalidades?
127 |
128 | ## O que vem a seguir?
129 |
130 | * Acrescente campos extras no modelo de usuários
131 | * Adicione relacionamentos entre usuários e ideas
132 | * Crie restrições de modo a permitir que usuários editem somente suas próprias ideas e apague seus próprios comentários
133 | * Permita expandir roles ou permissões para usuários (use uma das gem populares, tal como like CanCan)
134 |
135 | {% include other-guides.md page="devise" %}
136 |
--------------------------------------------------------------------------------
/_posts/2013-01-20-design.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Adicione design Usando HTML & CSS
4 | permalink: design
5 | ---
6 |
7 | # Adicione design Usando HTML & CSS
8 |
9 | *Criado por Alex Liao, [@alexliao](http://bannka.com/alex)*
10 |
11 | *Traduzido por José Viera [@NetoDevel](https://github.com/NetoDevel)*
12 |
13 | Agora o aplicativo está funcionando bem, mas ainda se parece com scaffold. Vamos adicionar algum design para torná-lo parecido com um site profissional. Quando terminar este tutorial, o aplicativo será parecido com [esse](http://railsgirlsapp.herokuapp.com/ideas).
14 |
15 | ## *1.* Delete CSS scaffold indesejado
16 |
17 |
18 | Abra `app/assets/stylesheets/application.css`, e substitua a linha
19 |
20 | {% highlight css %}
21 | body { padding-top: 100px; }
22 | {% endhighlight %}
23 |
24 | com
25 |
26 | {% highlight css %}
27 | body { padding-top: 60px; }
28 | {% endhighlight %}
29 |
30 | Finalmente, exclua o arquivo `app/assets/stylesheets/scaffolds.scss` porque nós realmente não precisamos do estilo padrão gerado pelo Rails.
31 |
32 | Agora vamos atualizar a página na url . Você não vai encontrar muita mudança, mas é uma boa preparação para as etapas seguintes.
33 |
34 | ## *2.* Refinar a navegação
35 |
36 | Considerando que "ideia" é o objeto mais importante na sua aplicação, nós vamos colocar o botão "New Idea" na barra de navegação para torná-lo sempre disponível.
37 |
38 | Abra `app/views/layouts/application.html.erb`, e abaixo da linha
39 |
40 | {% highlight erb %}
41 |
51 | {% endhighlight %}
52 |
53 | ## *3.* Design para a lista de ideias
54 |
55 | Agora é hora de fazer a página de listar ideias parecer mais profissional. Para isso, vamos substituir o layout da tabela com um layout div.
56 |
57 | **Instrutor(a):** Fale um pouco sobre a tabela vs div.
58 |
59 | Abra `app/views/ideas/index.html.erb` em seu editor de texto e substitua todas as linhas com
60 |
61 | {% highlight erb %}
62 |
74 | <% end %>
75 | {% endhighlight %}
76 |
77 | **Instrutor(a):** Explique o que o novo código significa linha por linha, e fale um pouco sobre o grid do Bootstrap
78 |
79 | Atualize! Nós ficamos com uma boa lista de ideias com design bonito. Clique no botão "New Idea", e crie mais ideias com o texto real e imagens bonitas, a página ficará muito melhor com o conteúdo. Há um princípio de web design contemporâneo: o conteúdo é a melhor decoração.
80 |
81 | ## *4.* Design para a página de detalhes da ideia
82 |
83 | Clique no título de uma ideia, e você será levado para a página de detalhes da ideia. Agora ainda é scaffold gerado pelo Rails, então vamos melhorar a página.
84 |
85 | Abra `app/views/ideas/show.html.erb` em seu editor de texto e substitua todas as linhas com
86 |
87 | {% highlight erb %}
88 |
105 | {% endhighlight %}
106 |
107 |
108 | **Instrutor(a):** Explique o que o novo código significa linha por linha.
109 |
110 | ## E agora?
111 |
112 | * Use o seu novo conhecimento para projetar um novo formulário para ideia
113 | * Adicione mais design para as páginas como você deseja
114 | * Siga os outros guias para aprender mais sobre Rails
115 |
116 | {% include other-guides.md page="design" %}
117 |
--------------------------------------------------------------------------------
/_posts/2013-04-14-github.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 |
4 | title: Como enviar para o GitHub
5 |
6 | permalink: github
7 | ---
8 |
9 | # Envie seu app para o GitHub
10 |
11 | *Criado por Alyson La, [@realalysonla](https://www.twitter.com/realalysonla)*
12 | *Traduzido por Marina Limeira, [@marinalimeira_](https://www.twitter.com/marinalimeira_)*
13 |
14 | ## O que você precisa antes de começar
15 |
16 | ### Git & GitHub
17 |
18 | * Verifique se o Git está instalado
19 | * No terminal digite `git --version` (preferível a versão 1.8 ou superior)
20 |
21 | * Se não, baixe o Git [aqui] (http://git-scm.com/downloads).
22 | Então, configure seu perfil Git localmente - No terminal:
23 | * Digite `git config --global user.name "seu-nome"`
24 | * Digite `git config --global user.email "seu-email"`
25 |
26 | * _Para checar se o Git já está configurado, você pode digitar_ `git config --list`
27 |
28 | * Crie uma conta gratuita no [GitHub](https://github.com) ou logue se você já possui uma
29 |
30 | **Instrutor(a):** Fale um pouco sobre git, controle de versão e open source
31 |
32 | ## Envie seu app para o GitHub utilizando a linha de comando
33 |
34 | No seu perfil do GitHub clique em "new repo"  de um nome (exemplo: rails-girls), breve descrição, escolha a opção "público", e clique em "Criar repositório".
35 |
36 | Na linha de comando (tenha certeza de que você entrou na sua pasta rails-girls utilizando `cd`) e insira:
37 |
38 | {% highlight sh %}
39 | git init
40 | {% endhighlight%}
41 |
42 | Isso inicializa um repositório git no seu projeto
43 |
44 | *Nota:* Se você já concluiu o [guia Heroku](/heroku), então você já inicializou um repositório git e pode prosseguir para os próximos passos.
45 |
46 | Depois, verifique se um arquivo chamado `README.rdoc` existe na sua pasta rails-girls:
47 |
48 |
49 |
50 | {% highlight sh %}
51 | ls README.rdoc
52 | {% endhighlight %}
53 |
54 |
55 | {% highlight sh %}
56 | dir README.rdoc
57 | {% endhighlight %}
58 |
59 |
60 |
61 | Se o arquivo não existe, você pode criá-lo digitando:
62 |
63 | {% highlight sh %}
64 | touch README.rdoc
65 | {% endhighlight %}
66 |
67 | Ou se você está utilizando Windows, digite o seguinte comando:
68 |
69 | {% highlight sh %}
70 | type nul > README.rdoc
71 | {% endhighlight %}
72 |
73 | **Instrutor(a):** Fale um pouco sobre README.rdoc
74 |
75 | Então digite:
76 |
77 | {% highlight sh %}
78 | git status
79 | {% endhighlight %}
80 |
81 | Isso irá listar todos os arquivos no seu diretório de trabalho.
82 |
83 | **Instrutor(a):** Fale um pouco sobre os seus comandos git favoritos
84 |
85 | Então digite:
86 |
87 | {% highlight sh %}
88 | git add .
89 | {% endhighlight %}
90 |
91 | Isso adiciona todos os seus arquivos e alterações numa área temporária.
92 |
93 | Então digite:
94 |
95 | {% highlight sh %}
96 | git commit -m "primeiro commit"
97 | {% endhighlight %}
98 |
99 | Isso commita todos os seus arquivos, adicionando a mensagem "primeiro commit"
100 |
101 | Então digite:
102 |
103 | {% highlight sh %}
104 | git remote add origin https://github.com/usuario/rails-girls.git
105 | {% endhighlight %}
106 |
107 | _A página do seu repositório GitHub mostrará a URL do seu repositório, então sinta-se a vontade para copiar e colar de lá, melhor do que inserir manualmente. Você pode copiar e colar o link da página do seu repositório GitHub clicando em "Clone or download"._
108 |
109 | Isso cria um remoto, ou _conexão_ chamado "origin" apontando para o seu repositório GitHub que você acabou de criar.
110 |
111 | Então digite:
112 |
113 | {% highlight sh %}
114 | git push -u origin master
115 | {% endhighlight %}
116 |
117 | Isso envia seus commits para sua branch "master" no GitHub
118 |
119 | Parabéns pelo seu primeiro app no GitHub! Você pode conferir utilizando a mesma url que você utilizou antes: https://github.com/usuario/rails-girls (sem a pasta .git)
120 |
121 | Se quiser continuar fazendo alterações e as enviando para o GitHub, você precisará utilizar os três seguintes comandos:
122 |
123 | {% highlight sh %}
124 | git add .
125 | git commit -m "digite sua mensagem de commit aqui"
126 | git push origin master
127 | {% endhighlight %}
128 |
129 | ## E agora?
130 |
131 | ### Seja parte da comunidade open source
132 |
133 | * Siga seus colegas e instrutores(as) do RailsGirls no GitHub
134 | * Favorite ou assista seus repositórios
135 | * Faça o [fork](https://help.github.com/articles/fork-a-repo) de um repositório, e então clone e envie alterações do seu fork. Compartilhe as alterações com o criador original o enviando um [pull request](https://help.github.com/articles/using-pull-requests)!
136 | * Crie uma issue em um projeto quando você encontrar um bug
137 | * Explore outros projetos open source - procure por alguma linguagem de programação ou palavra chave
138 |
139 | ### Aprenda mais sobre Git
140 |
141 | * Confira [trygit.org](http://try.github.io/)
142 | * Use um [Git Cheatsheet](https://github.github.com/training-kit/downloads/pt_BR/github-git-cheat-sheet/) ([PDF](https://github.github.com/training-kit/downloads/pt_BR/github-git-cheat-sheet.pdf))
143 | * Veja outros comandos Git em [git-scm.org](http://git-scm.com/)
144 |
145 | {% include other-guides.md page="github" %}
146 |
--------------------------------------------------------------------------------
/_posts/2013-05-10-EYDeploy.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Rails Girls no Engine Yard
4 | permalink: engineyard
5 | ---
6 |
7 | # Coloque sua aplicação online com Engine Yard
8 |
9 | *Criado por Mary Jenn, [@mfjenn](https://twitter.com/mfjenn)*
10 |
11 | *Traduzido por Letícia, [@_leticia](https://twitter.com/_leticia)*
12 |
13 | #### Certifique-se que você está utilizando PostgreSQL como banco de dados
14 |
15 | Você precisará fazer com que seu banco de dados funcione no Engine Yard, que
16 | utiliza um banco diferente do padrão do Rails. Por favor, substitua o seguinte
17 | código no arquivo `Gemfile`:
18 |
19 | {% highlight ruby %}
20 | gem 'sqlite3'
21 | {% endhighlight %}
22 |
23 | para
24 |
25 | {% highlight ruby %}
26 | group :development do
27 | gem 'sqlite3'
28 | end
29 |
30 |
31 | group :production do
32 | gem 'pg'
33 | end
34 | {% endhighlight %}
35 |
36 |
37 | Execute `bundle install --without production` para configurar suas
38 | dependências.
39 |
40 | #### Sistemas de controle de versão
41 |
42 | Você precisa adicionar sua aplicação ao seu repositório Git. Você pode fazer
43 | isso executando o seguinte no seu terminal:
44 |
45 | {% highlight sh %}
46 | git init
47 | {% endhighlight %}
48 |
49 | {% highlight sh %}
50 | git add .
51 | {% endhighlight %}
52 |
53 | {% highlight sh %}
54 | git commit -m "initial commit"
55 | {% endhighlight %}
56 |
57 | __TREINADORA__: Esta seria uma boa hora para falar sobre sistemas de versionamento e Git.
58 |
59 | ### Assegure que você tenha uma aplicação Rails em um repositório no GitHub
60 |
61 | Você precisará ter uma conta no GitHub e um repositório onde encontraremos sua
62 | aplicação. Siga estas instruções em [GitHub](https://help.github.com/articles/create-a-repo) para criar um repositório e submeter sua aplicação a ele. Se você não tem uma aplicação Rails funcionando, você pode fazer a cópia da [aplicação de exemplo da Engine Yard](https://github.com/engineyard/todo) para seu próprio repositório. Uma treinadora pode lhe ajudar se precisar.
63 |
64 | ### Registre-se para uma conta de teste grátis na Engine Yard
65 |
66 | Navegue até o [site](https://www.engineyard.com/) da Engine Yard e clique em "GET STARTED FREE" ("inicie gratuitamente") para obter suas 500 horas de teste grátis. O registro lhe enviará um e-mail de confirmação; verifique seu e-mail, clique no link e entre em sua conta. Clique no link sob "Your available applications" ("Suas aplicações disponíveis") que diz "Engine Yard Cloud". Isto leva ao seu painel.
67 |
68 | ### Crie sua conta Engine Yard Cloud
69 |
70 | 1. Escolha um nome para sua conta. Sugerimos escolher algo relevante a quem você é, seja como desenvolvedora ou uma organização, se você tem colaboradores. Clique no botão "Start Trial" ("Começar Teste Grátis").
71 |
72 | 2. Fique à vontade para explorar os menus, mas vamos usar os padrões por ora, já que eles estão alinhados com uma aplicação Rails básica.
73 |
74 | 3. No campo com o nome "Git Repository URI" ("URI do repositório Git"), cole o endereço de seu repositório GitHub. Assegure-se de utilizar o endereço da versão SSH de sua aplicação. DICA: O formato deve ser como o do texto em sua página da aplicação Engine Yard (ou como este: "git@github.com:mfjenn/blogotron.git")
75 |
76 |
77 | ### Colocando sua chave de deploy
78 |
79 | Você deve estar agora em uma página que diz "Permitir que a Engine Yard acesse
80 | seu repositório privado".
81 |
82 | 1. Copie o bloco de texto da caixa e navegue até a página de configurações do GitHub;
83 | 2. Vá até a página "SSH";
84 | 3. Clique no botão que diz "add a key" ("adicionar uma chave");
85 | 4. Cole o bloco de texto de sua página da Engine Yard no campo e salve;
86 | 5. Volte à sua página na Engine Yard e clique no botão que diz "My deploy key is in place" ("minha chave de deploy está correta").
87 |
88 | __TREINADORA__: Explique a diferença entre repositórios públicos e privados e quando utilizá-los.
89 |
90 | ### Criando e configurando seu ambiente
91 |
92 | Assim que você clicar no botão "My deploy key is in place" ("minha chave de deploy está correta"), você será levada a uma página que diz "Create New Environment for (Your Account Name) App" ("Criar um ambiente para a aplicação (sua conta)"). É aqui onde vamos configurar sua aplicação. Fique à vontade para explorar todas as opções nos menus, mas vamos usar as opções padrão por ora. Você não precisa escolher um domínio.
93 | * Clique no botão que diz "Create Environment" ("Criar ambiente").
94 |
95 | #### Configuração de Ambiente
96 |
97 | Nesta página, vamos selecionar a configuração de homologação (staging).
98 | * Clique em "Boot This Configuration" ("Inicie esta configuração"). Você será levada a uma nova página onde verá várias barras de progresso se movendo. Nossa plataforma estará provisionando suas instâncias. Nós precisamos esperar até que tudo vire pontinhos verdes. Isso normalmente leva uns 10 minutos, então, alguém precisa fazer um intervalo? É uma boa hora para um café ou água.
99 |
100 | __TREINADORA__: Fale sobre homologação (staging) vs. produção (production), e porque é importante ter réplicas. Fale sobre principal (master) e secundário (slave). Como o Failover da Engine Yard funciona? Por que isso é importante?
101 |
102 |
103 | #### Colocando sua aplicação no ar
104 |
105 | 1. Assim que todos os pontinhos estiverem verdes, clique em "Deploy".
106 | 2. Assim que ver a frase "SEU NOME successfully deployed HEAD" ("SEU NOME fez o deploy de HEAD"), você saberá que seu código está no ar! Parabéns!
107 | 3. Clique no link que diz "View your application" ("Visualize sua aplicação") para visitar sua aplicação;
108 | 4. Se você receber uma notificação vermelha que diz que seu deploy falhou, nós só teremos alguma depuração a fazer. Levante a mão e uma treinadora te ajudará com isso.
109 |
110 |
111 | #### Parando suas instâncias para economizar suas horas de teste grátis
112 |
113 | Assim que você tiver sua aplicação rodando, certifique-se de clicar no botão "stop" ("parar") para parar suas instâncias, assim você não usa suas horas em vão. Você sempre pode reiniciá-las.
114 |
115 | ### Recursos adicionais
116 | * [Um tutorial em vídeo (em inglês)](https://support.cloud.engineyard.com/entries/21009937-Video-Tutorial-Set-up-an-Account-and-Deploy-an-Application)
117 |
118 | * [Outro tutorial do site da Engine Yard (em inglês)](https://support.cloud.engineyard.com/entries/20996751-Tutorial-How-to-Deploy-the-ToDo-Application-on-a-Trial-Account)
119 |
120 | {% include other-guides.md page="engineyard" %}
121 |
--------------------------------------------------------------------------------
/_posts/2013-07-23-bundlerfordevelopment.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Bundler para Desenvolvimento
4 | permalink: bundlerfordevelopment
5 | ---
6 |
7 | *Traduzido por Roberta Schmitz Mayer, [@robsmayer](https://github.com/robsmayer)*
8 |
9 |
10 | # Como configurar o _Bundler_ para Desenvolvimento
11 |
12 | 1. Fork do _Bundler_
13 |
14 | Vá para o Github do _Bundler_ [https://github.com/bundler/bundler](https://github.com/bundler/bundler)
15 |
16 | Clique no botão Fork.
17 |
18 | Fork _Bundler_ para que possa criar _pull requests_ com suas mudanças
19 |
22 |
23 | 
24 |
25 |
29 | 2. Faça Download de uma cópia do seu fork do _Bundler_
30 |
31 | {% highlight sh %}
32 | $ git clone https://github.com/user_name/bundler.git
33 | {% endhighlight %}
34 |
35 | 3. Mude para o diretório do _Bundler_
36 |
37 | {% highlight sh %}
38 | $ cd bundler
39 | {% endhighlight %}
40 |
41 | 4. Configure o remote
42 |
43 | {% highlight sh %}
44 | $ git remote add upstream https://github.com/bundler/bundler.git
45 | {% endhighlight %}
46 |
47 | Isto conecta seu repositório local com o repósitorio __upstream__ no Github.
48 |
49 | 5. Instale as dependências de desenvolvimento do _Bundler_
50 |
51 | {% highlight sh %}
52 | $ rake spec:deps
53 | {% endhighlight %}
54 |
55 | O que é rake? [http://rake.rubyforge.org/](http://rake.rubyforge.org/)
56 |
57 | 6. Rode o teste de validação do _Bundler_
58 |
59 | {% highlight sh %}
60 | $ rake spec
61 | {% endhighlight %}
62 |
63 | Isto deve demorar uns 15 minutos.
64 |
65 | {% include other-guides.md page="bundlerfordevelopment" %}
66 |
--------------------------------------------------------------------------------
/_posts/2013-07-25-videos.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Rails Girls em vídeos
4 | permalink: videos
5 | ---
6 |
7 | # Rails Girls é felicidade no mundo inteiro
8 |
9 | *Traduzido por Maujor, [site do Maujor](http://www.maujor.com)*
10 |
11 | Aqui você encontra uma seleção de vídeos da Rails Girls produzidos no mundo todo. Você tem um vídeo para compartilhar? Publique ele aqui.
12 |
13 | ### Rails Girls em Ljubljana 2014
14 |
15 |
78 |
--------------------------------------------------------------------------------
/_posts/2013-10-16-remote-pairing-for-the-win.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Para a vitória com o compartilhamento remoto!
4 | permalink: remote
5 | ---
6 |
7 | # Tutorial Rails Girls sobre compartilhamento remoto
8 |
9 | *Created by Ed Drain, [@SoldierCoder](https://twitter.com/soldiercoder)*
10 | Traduzido por Bomfim Jr, @bomfimjr_
11 |
12 | ## Por que compartilhamento remoto é tão formidável?
13 |
14 | Primeiro as primeiras coisas. O que me motivou a escrever este tutorial? Se você está lendo ié porque está consciente do poder do [Rails Girls](http://railsgirls.com). Mas, caso tenha dúvidas sobre este poder, vou lhe dar alguns fatos. Rails Girls é uma organização que intruduz as mulheres no desenvolvimento web com Ruby on Rails. Para muitas mulheres ao redor do mundo, isso é uma **poderosa experiência emocional** que mostra que elas podem criar algo novo para a web e que elas podem contar com a ajuda de outras mulheres que já se envolveram com a tecnologia.
15 |
16 |
17 | Eu disse "ao redor do mundo", não disse? Realmente, Rails Girls está em **todos os continentes** e em **mais de 130 cidades!** Eu sei que isso só se tornou realidade graças a generosidade do Ryan Bates ([@RBates](https://twitter.com/rbates)), eu mesmo tive a honra de distribuir cupons gratuitos do [Railscasts](railscasts.com), durante três meses para muitas destas cidades. Isso faz parte dos objetivos do Rails Girls -- proporcionar as mulheres de todo mundo, ainda que se encontrem em circunstâncias adversas, a possibilidade de estudar e com seu próprio esforço e dedicaçar alcançar o sucesso -- em um emprego bem remunerado e onde sejam **respeitadas por suas criações**.
18 |
19 | ## Mas, por que compartilhamento remoto é tão formidável?
20 |
21 | Compartilhamento remoto é tão formidável porque pessoas podem contar com ajuda de outras pessoas mais experientes sem nem menos estarem próximas a elas. Eu sei disso, porque como treinador do [Rails Girls Summer of Code](http://railsgirlssummerofcode.org), eu morava na Virginia e treinava times que moravam em Londres e na Pennsylvania. Se não existisse compartilhamento remoto eu teria que pegar um avião ou dirigir por doze horas apenas para mostrar como escrever um "hello, world!" em um exemplo de app!
22 |
23 | ## OK, Estou convencida! O que eu preciso para participar de um compartilhamento remoto?
24 | * Uma conexão com a internet.
25 | * Uma ou mais amigas programadoras dispostas a participar de um compartilhamento remoto com você
26 | * [Madeye](https://madeye.io) -- muito importante! Essa ferramenta vai possibilitar que você e suas amigas trabalhem no mesmo código e VEJAM o que a outra pessoa está alterando ASSIM QUE a alteração for feita!
27 | * Opcionalmente poderá usar uma conta Google Hangouts ou Skype ou qualquer outro programa para que você e suas amigas possam conversar entre si.
28 |
29 |
33 | ## Como instalar Madeye?
34 | 1. Instale [Node.js](http://howtonode.org/how-to-install-nodejs)
35 |
36 | 2. Se estiver usando Linux/MAC, abra o terminal e execute o comando:
37 | {% highlight sh %}
38 | curl https://madeye.io/install | sh
39 | {% endhighlight%}
40 |
41 | Se estiver usando Windows abra o prompt e digite o comando:
42 | {% highlight sh %}
43 | npm install -g madeye
44 | {% endhighlight%}
45 |
46 | 3. Pronto! Madeye está instalado!
47 |
48 | 4. A seguir, no terminal, vá ao diretório que você deseja compartilhar e digite `madeye`.
49 |
50 | 5. Madeye vai mostrar, no terminal, o URL para compartilhamento com as suas companheiras de equipe e todas podem abrir o endereço nos seus navegadores e começar a editar o código.
51 |
52 | Estando em modo de compartilhamento no navegador, você e seu treinador poderão ver no lado esquerdo da tela seus ícones em diretórios, sub-diretórios e arquivos. Navegando pelos arquivos você será capaz de visualizar o curso do seu treinador enquando ele edita os arquivos e vice-versa. É **muito** fácil!
53 |
54 | ## Alternativas para Madeye
55 |
56 | Eu, autor deste tutorial, acredito que Madeye é o melhor programa para compartilhar programação remota. Contudo, esse tutorial expressa minha opinião e é minha contribuição para você leitora e para suas possíveis companheiras de compartilhamento. Mas, indico um link onde você encontrará outras opções de softwares de compartilhamento: [PairProgramWith.Me](http://pairprogramwith.me). Espero que você possa encontrar um ótimo caminho para você e suas companheiras de programação em pares.
57 |
58 | ## Considerações finais
59 | A comunidade Ruby é um bom exemplo de pessoas que ajudam outras pessoas. Basta olhar para as pessoas laureadas todos os anos com o título de [Ruby Heros](http://rubyheroes.com/) para constatar esta afirmação. Quão grandioso e generoso seria o mundo, se todos nós compartilhassemos um pouco do nosso conhecimento com pessoas em busca de conhecimentos. Isto seria como estar em um mundo que refletisse a palavra mais comum, que provavelmente você ira ouvir nas reuniões locais Ruby/Rails: "MINSWAN" -- Matz é bom, então nós somos bons! Vamos começar a ser boms com os outros
60 |
61 | {% include other-guides.md page="remote" %}
62 |
--------------------------------------------------------------------------------
/_posts/2013-12-18-add-gravatar.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Adicionando Gravatar para a aplicação
4 | permalink: gravatar
5 | ---
6 |
7 | # Adicionando Gravatar para a aplicação
8 |
9 | *Criado por Catherine Jones*
10 | *Traduzido por Anderson Fernandes, [@andersonfernandes](https://github.com/andersonfernandes)*
11 |
12 | Este tutorial assume que você já construiu uma aplicação do Rails Girls seguindo este [tutorial](http://guides.railsgirls.com/app) e adicionou autenticação usando o [Devise](http://guides.railsgirls.com/devise/).
13 |
14 | ### Importante
15 |
16 | Você precisa ter um endereço de e-mail cadastrado com o Gravatar para isso funcionar. Se ainda não tem, você pode ir em [gravatar.com](http://br.gravatar.com/).
17 |
18 | ## *1.* Adicione a gem Gravtastic
19 |
20 | Abra seu gemfile e abaixo da gem `devise` adicione
21 |
22 | {% highlight ruby %}
23 | gem 'gravtastic'
24 | {% endhighlight %}
25 |
26 | No terminal rode
27 |
28 | {% highlight sh %}
29 | bundle install
30 | {% endhighlight %}
31 |
32 | Isto irá instalar a gem gravtastic. Então lembre de reiniciar seu servidor do rails.
33 |
34 | ## *2.* Configurando o Gravatar na sua aplicação
35 |
36 | Abra `app/models/user.rb`, e adicione essas linhas
37 |
38 | {% highlight ruby %}
39 | include Gravtastic
40 | gravtastic
41 | {% endhighlight %}
42 |
43 | logo após a primeira linha.
44 |
45 | ## *3.* Configure o Gravatar
46 |
47 | Abra `app/views/layouts/application.html.erb` e na seção
48 |
49 | {% highlight erb %}
50 | <% if user_signed_in? %>
51 | {% endhighlight %}
52 |
53 | antes do
54 |
55 | {% highlight erb %}
56 | <% else %>
57 | {% endhighlight %}
58 |
59 | adicione
60 |
61 | {% highlight erb %}
62 | <%= image_tag current_user.gravatar_url, :class => "gravatar" %>
63 | {% endhighlight %}
64 |
65 | E coloque o código abaixo no final do arquivo `app/assets/stylesheets/application.css`:
66 |
67 | {% highlight css %}
68 | .gravatar {
69 | height: 30px;
70 | width: auto;
71 | }
72 | {% endhighlight %}
73 |
74 | Agora abra sua aplicação no navegador e faça login com um endereço de e-mail associado com um Gravatar. Você será capaz de ver seu Gravatar.
75 |
76 | {% include other-guides.md page="gravatar" %}
77 |
--------------------------------------------------------------------------------
/_posts/2014-01-05-design-using-html-and-css-chinese.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: 使用HTML和CSS美化你的应用
4 | permalink: design-html-css-chinese
5 | ---
6 |
7 | 1.美化header样式
8 |
9 | + 打开文件 `app/assets/stylesheets/application.css` 并在最底端添加：
10 |
11 | ```
12 | .navbar {
13 | min-height: 38px;
14 | background-color: #f55e55;
15 | }
16 | ```
17 |
18 | 刷新页面，查看样式有什么变化。 此处解释什么是css选择器，学员可以尝试修改header的颜色，字体等。 简单的颜色选取参考网站： [http://color.uisdc.com/](http://color.uisdc.com/)
19 |
20 | **教练：**解释`display`的属性，什么是内联元素，什么是块级元素
21 |
22 | + 在文件底部加入下面的代码：
23 |
24 | ```
25 | .navbar a.brand { font-size: 18px; }
26 | .navbar a.brand:hover {
27 | color: #fff;
28 | background-color: transparent;
29 | text-decoration: none;
30 | }
31 | ```
32 |
33 | **教练：**解释css中链接的四种状态
34 |
35 |
36 | 2.美化表格样式
37 |
38 | + 对于表格，我们可以使用[Bootstrap](http://www.bootcss.com/)的表格样式。打开`app/views/ideas/index.html.erb`文件，找到：
39 |
40 | ```
41 |
42 | ```
43 |
44 | 将其改为
45 |
46 | ```
47 |
48 | ```
49 |
50 | + 修改图片大小，找到这段代码
51 |
52 | ```
53 | <%= image_tag(idea.picture_url, :width => 600) if idea.picture.present? %>
54 | ```
55 |
56 | 尝试修改width
57 |
58 |
59 | + 打开文件`app/assets/stylesheets/ideas.css.scss`，加入以下代码：
60 |
61 | ```
62 | .container a:hover {
63 | color: #f55e55;
64 | text-decoration: none;
65 | background-color: rgba(255, 255, 255, 0);
66 | }
67 | ```
68 |
69 |
70 | + 尝试为页面添加背景图片，使用`background-image`属性，背景纹理资源参考此网站[http://subtlepatterns.com/](http://subtlepatterns.com/)
71 |
72 |
73 | 3.footer样式调整
74 |
75 | + 打开文件 `app/assets/stylesheets/application.css` 并在最底端添加：
76 |
77 | ```
78 | footer {
79 | background-color: #ebebeb;
80 | padding: 30px 0;
81 | }
82 | ```
83 |
84 | 尝试在`footer`中加入更多内容，并调整位置
85 |
86 | 4.按钮样式
87 |
88 | + 打开[http://localhost:3000/ideas/new](http://localhost:3000/ideas/new)页面，可以看到页面上的`Create Idea`按钮。
89 |
90 | 在文件`app/assets/stylesheets/ideas.css.scss`最后加入
91 |
92 | ```
93 | .container input[type="submit"] {
94 | height: 30px;
95 | font-size: 13px;
96 | background-color: #f55e55;
97 | border: none;
98 | color: #fff;
99 | }
100 | ```
101 |
102 | **教练：**解释css中`border`的使用，学员可以尝试修改按钮样式，加圆角，阴影，颜色等。
103 |
--------------------------------------------------------------------------------
/_posts/2014-01-05-design-using-html-and-css.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Adicione design à sua aplicação com HTML e CSS
4 | permalink: design-html-css
5 | ---
6 |
7 | # Adicione design à sua aplicação com HTML e CSS
8 | *Traduzido por [@MADPT](https://github.com/MADPT) aka [Miguel Ângelo](http://www.miguelangelo.io)*
9 |
10 | **Esse guia assume que você já construiu o app do Rails Girls** [**seguindo o tutorial de desenvolvimento do app**](/app).
11 |
12 | 1.Desenhe o cabeçalho
13 |
14 | + Coloque o seguinte código na parte inferior do arquivo `app/assets/stylesheets/application.css`:
15 |
16 | {% highlight css %}
17 | .navbar {
18 | min-height: 38px;
19 | background-color: #f55e55;
20 | }
21 | {% endhighlight %}
22 |
23 | Agora atualize a página e verifique as mudanças. Você pode tentar alterar a cor ou fonte do cabeçalho. Você pode verificar a referência de cor aqui [http://color.uisdc.com/](http://color.uisdc.com/).
24 |
25 | **Instrutor(a):** fale sobre a propriedade `display`, `inline` e `block`.
26 |
27 | + Em seguida, coloque estas linhas na parte inferior:
28 |
29 | {% highlight css %}
30 | .navbar a.brand { font-size: 18px; }
31 | .navbar a.brand:hover {
32 | color: #fff;
33 | background-color: transparent;
34 | text-decoration: none;
35 | }
36 | {% endhighlight %}
37 |
38 | **Instrutor(a):** explique os 4 estados de um link
39 |
40 |
41 | 2.Desenhe a tabela
42 |
43 | + Nós simplesmente usamos o Twitter [Bootstrap](http://getbootstrap.com/) para polir a nossa tabela. Encontre esta linha no arquivo `app/views/ideas/index.html.erb` e substitua:
44 |
45 | {% highlight html %}
46 |
47 | {% endhighlight %}
48 |
49 | com
50 |
51 | {% highlight html %}
52 |
`
53 | {% endhighlight %}
54 |
55 | + Modifique o tamanho da imagem usando as seguintes linhas
56 |
57 | {% highlight erb %}
58 | <%= image_tag(idea.picture_url, :width => 600) if idea.picture.present? %>
59 | {% endhighlight %}
60 |
61 | Tente mudar a largura e veja o que vai acontecer
62 |
63 |
64 | + Adicione as seguintes linhas à parte inferior do arquivo `app/assets/stylesheets/ideas.css.scss`:
65 |
66 | {% highlight css %}
67 | .container a:hover {
68 | color: #f55e55;
69 | text-decoration: none;
70 | background-color: rgba(255, 255, 255, 0);
71 | }
72 | {% endhighlight %}
73 |
74 |
75 | + Tente adicionar algum estilo ao fundo com a propriedade `background-image`, use como referência
76 | [http://subtlepatterns.com/](http://subtlepatterns.com/) para alguns padrões.
77 |
78 |
79 | 3.Adicione estilo ao rodapé
80 |
81 | + Adicione as linhas ao fundo do ficheiro `app/assets/stylesheets/application.css`:
82 |
83 | {% highlight css %}
84 | footer {
85 | background-color: #ebebeb;
86 | padding: 30px 0;
87 | }
88 | {% endhighlight %}
89 |
90 | Tente adicionar mais coisas em `footer`, depois ajuste sua posição.
91 |
92 | 4.Adicione estilo ao botão
93 |
94 | + Abra [http://localhost:3000/ideas/new](http://localhost:3000/ideas/new) e encontre o botão `Create Idea`.
95 |
96 | Adicione estas linhas ao ficheiro `app/assets/stylesheets/ideas.css.scss`
97 |
98 | {% highlight css %}
99 | .container input[type="submit"] {
100 | height: 30px;
101 | font-size: 13px;
102 | background-color: #f55e55;
103 | border: none;
104 | color: #fff;
105 | }
106 | {% endhighlight %}
107 |
108 | **Instrutor(a)** explique como usar `border` em css, tente modificar o estilo do botão como em volta da esquina, adicione sombra ou cor, etc.
109 |
110 | {% include other-guides.md page="design-html-css" %}
111 |
--------------------------------------------------------------------------------
/_posts/2014-01-30-anynines.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Rails Girls no anynines
4 | permalink: anynines
5 | ---
6 |
7 | # Coloque seu app online com anynines
8 |
9 | *Criado por Floor Drees, [@floordrees](https://twitter.com/floordrees)*
10 |
11 | *Traduzido por [Júlio Fortunato](https://github.com/JulioFortunato)*
12 |
13 | __INSTRUTOR(A)__: Fale sobre os benefícios de fazer o deploy para o anynines vs utilizar outros data centers.
14 |
15 | ### Pegue um pouco de anynines para você
16 |
17 | 1. [Crie uma conta do anynines](http://anynines.com/).
18 |
19 | 2. [Faça o download e instale a Interface de Linha de Comando](https://anynines.zendesk.com/entries/60241846-How-to-install-the-CLI-v6) para interagir com o anynines.
20 |
21 | 3. Agora selecione o endpoint da api do anynines como destino e autentique-se usando suas credenciais:
22 |
23 | {% highlight sh %}
24 | cf api https://api.de.a9s.eu
25 | cf login -u [seu@email] -p [suasenha]
26 | {% endhighlight %}
27 |
28 | Ou, se isso não funcionar para você, use:
29 |
30 | {% highlight sh %}
31 | cf login
32 | {% endhighlight %}
33 |
34 | ... que solicitará seu endereço de email e senha.
35 |
36 | Se perguntando o que `cf` significa? É um atalho para [Cloud Foundry](http://www.cloudfoundry.com/), um sistema que o anynines usa nos bastidores.
37 |
38 | ### Envie seu app online
39 |
40 | Vamos enviar o código-fonte da sua máquina local para o anynines:
41 | {% highlight sh %}
42 | $> cf push [nome-do-app-de-sua-escolha]
43 | {% endhighlight %}
44 |
45 | Isso falhará miseravelmente, já que a aplicação precisa de um banco de dados MySQL para iniciar. Então, vamos criar um! O comando abaixo vai criar um serviço do MySQL com o plano gratuito. Depois do nome do plano, você precisa especificar um nome para a instância do serviço. Esse nome será usado em comandos futuros para se referir a essa instância do serviço:
46 |
47 | {% highlight sh %}
48 | $> cf create-service mysql Pluto-free [nome-do-servico-de-sua-escolha]
49 | {% endhighlight %}
50 |
51 | (Sério, você pode usar qualquer nome. Faça valer a pena!)
52 |
53 | Em seguida, vinculamos a instância do serviço MySQL à aplicação, para conceder à aplicação acesso à instância do MySQL, digite:
54 | {% highlight sh %}
55 | $> cf bind-service [nome-do-app-que-você-escolheu-acima] [nome-do-serviço-que-você-escolheu-acima]
56 | {% endhighlight %}
57 |
58 | Por fim, temos que reiniciar a aplicação para garantir que o vínculo do serviço funcionou:
59 | {% highlight sh %}
60 | $> cf restart [nome-do-app-que-você-escolheu-acima]
61 | {% endhighlight %}
62 |
63 | Você verá isto:
64 | {% highlight sh %}
65 | Creating service postgresql-d2197... OK
66 | Binding postgresql-d2197 to railsgirls... OK
67 | {% endhighlight %}
68 |
69 | Terminando com... `Push successful! App 'railsgirls' available at railsgirls.de.a9sapp.eu`. Score!
70 |
71 | ### Controle de Versão
72 |
73 | Nós precisamos adicionar nosso novo código ao controle de versão. Você pode fazer isso executando o seguinte comando no terminal:
74 |
75 | {% highlight sh %}
76 | git status
77 | git add .
78 | git commit -m "add anynines deployment"
79 | {% endhighlight %}
80 |
81 | __INSTRUTOR(A)__: Este será um ótimo momento para falar sobre sistemas de controle de versão e git, se ainda não o fez.
82 |
83 | ### Ajuda
84 |
85 | Você pode checar todos os sub-comandos do cf disponíveis digitando `cf help`.
86 | No caso de seu terminal não ter todas as respostas, a equipe do anynines certamente terá. Apenas envie um email para eles em support@anynines.com.
87 |
88 | Bons deploys!
89 |
90 | {% include other-guides.md page="anynines" %}
91 |
92 |
--------------------------------------------------------------------------------
/_posts/2014-01-30-continuous-codeship.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Deploy contínuo - muito menos complicado
4 | permalink: continuous
5 | ---
6 |
7 | # Deploy contínuo com _Codeship_
8 |
9 | *Created by Floor Drees, [@floordrees](https://twitter.com/floordrees)*
10 | *Traduzido por Bárbara Barbosa [@bahbbc](https://twitter.com/bahbbc)*
11 |
12 | ### O que é esse tal de deploy contínuo?
13 |
14 | Deploy contínuo é parte de um 'movimento' de entrega contínua. A ideia por trás da entrega contínua é a automação do máximo possível do processo de entrega de software.
15 |
16 | Com um ambiente de deploy contínuo funcionando é possível implantar Deploys via Git (Deverá ser realizado o _commit_ de tudo antes de testar e tudo deve ser testado antes do deploy), tornando a colaboração mais fácil e o deploy mais rápido. Então você pode focar em fazer o seu aplicativo ainda mais legal!
17 |
18 | Existem algumas empresas muito legais velejando a onda do deploy contínuo, nesse guia nos iremos configurar um ambiente de deploy contínuo para um aplicativo Ruby on Rails do Github para o Heroku, usando o [_Codeship_](http://www.codeship.io).
19 |
20 | __INSTRUTOR(A)__: Falar sobre os benefícios do deploy contínuo.
21 |
22 | ### Conta no _Codeship_
23 |
24 | Primeiramente, você vai precisar de [uma conta no _Codeship_](https://www._codeship_.io/). Inscreva-se no _Codeship_ com o Github. O _Codeship_ precisa de acesso aos seus repositórios do Github para aprontá-los, então tenha certeza de garantir o acesso.
25 |
26 | Voltando no _Codeship_, vamos criar o nosso primeiro projeto. O primeiro passo para isso é selecionar o Github como o seu providor de repositório. Na lista dos seus repositórios do Github, busque o repositório que você quer configurar e selecione-o. No nosso caso, é o que está escrito algo tipo "railsgirls".
27 |
28 | Agora o seu repositório está conectado e você pode configurar os seus comandos de teste. Nós criamos uma aplicação Ruby on Rails. Então selecione "Ruby on Rails" como o framework que usaremos. Isso configura os comandos de inicialização e os comandos de testes para você. Deletando a cerquilha (`#`) você pode descomentar os comandos de teste que você quiser usar para a sua aplicação. Por enquanto você não deve ter testes para configurar ainda, então você pode pular esse passo e voltar a ver isso depois.
29 |
30 | Agora vamos finalizar a configuração e ir para o painel de controle. Você pode ativar o chamado 'novo _build_' (new _build_) para a sua aplicação mudando alguma coisa e dando _push_ no seu repositório:
31 |
32 | {% highlight sh %}
33 | git add .
34 | git commit -m "teste integracao Codeship"
35 | git push origin master
36 | {% endhighlight %}
37 |
38 | Você pode acessar os detalhes da construção do app (_build_) clicando na seta da direita. Aqui você pode acompanhar o _build_ enquanto ele ainda está rodando. Melhor que Big Brother - eu prometo.
39 |
40 | ... e alguns segundos depois o seu _build_ está completo! Você pode ver todos os comandos que rodaram. Depois de alguns comandos iniciais de preparação o _Codeship_ roda os comandos os comandos que você especificou há alguns momentos atrás. Você pode ver a saída de um único comando clicando nele.
41 |
42 | Você já mandou um _push_ no seu repositório, viu o log do seu _build_ e recebeu um _build_ verde. Então você pode finalizar o assistente no começo clicando no botão "Clique para finalizar" ("click to finish").
43 |
44 | ### Configurando o deploy contínuo
45 |
46 | Agora vamos fazer o deploy da nossa aplicação no Heroku. Vá para a configuração do seu projeto no ícone de configuração no menu do _Codeship_. Então navegue até a seção "Deployment". Como você quer fazer deploy no Heroku, clique no botão "Heroku".
47 |
48 | Você precisará colocar o nome da sua aplicação no Heroku e a sua chave da API. Espero que você a tenha escrito em algum lugar! Coloque o nome da sua aplicação e a sua chave da API (para recuperar a sua chave da API, vá para a sua conta no Heroku e clique _"Show API key"_) e save a sua configuração de deploy.
49 |
50 | De agora em diante o _Codeship_ irá fazer deploy automática do seu aplicativo no Heroku, toda vez que você fizer um _push_ no seu repositório do Github. Da hora!
51 |
52 | ### Faça um teste
53 | Agora vamos fazer um _push_ com uma mudança e ver o que foi para deploy. Mude alguma coisa na sua aplicação primeiro, e depois faça um _commit_ e um _push_ com a mudança.
54 |
55 | {% highlight sh %}
56 | git add .
57 | git commit -m "isso muda tudo"
58 | git push
59 | {% endhighlight %}
60 |
61 | E imediatamente outro _build_ começará a rodar no _Codeship_. Volte ao seu projeto e você verá os comandos que nós já conhecemos do seu primeiro _build_. Bônus: A sua aplicação vai subir no Heroku e deve estar online depois de um minuto ou dois.
62 |
63 | {% include other-guides.md page="continuous" %}
64 |
--------------------------------------------------------------------------------
/_posts/2014-01-30-ruby-game.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Crie um jogo simples com Ruby!
4 | permalink: ruby-game
5 | ---
6 |
7 | # Crie um jogo simples com Ruby!
8 |
9 | *Criado por Patrick Huesler, [@phuesler](https://twitter.com/phuesler) & Floor Drees, [@floordrees](https://twitter.com/floordrees) para o [Rails Girls The Hague](http://railsgirls.com/thehague)*
10 | *Traduzido por Daniel Barreto, [@danielfsbarreto](https://github.com/danielfsbarreto)*
11 |
12 | [gosu](http://www.libgosu.org/) é uma biblioteca de desenvolvimento de jogos 2D. Gosu provê interfaces amigáveis e fáceis de usar para jogos com gráficos 2D e texto (acelerado por hardware 3D), amostras de áudio e música, bem como suporte a entrada de comandos através de teclado, mouse e gamepad/joystick. Também inclui demos para integração com RMagick, Chipmunk e OpenGL.
13 |
14 | Seus códigos-fonte, wiki, rastreadores de defeitos, etc. estão todos [disponíveis no GitHub](http://github.com/jlnr/gosu/). O melhor ponto de entrada para a documentação do Gosu é a [página principal da wiki](http://github.com/jlnr/gosu/wiki).
15 | Instale:
16 | {% highlight sh %}
17 | gem install gosu
18 | {% endhighlight %}
19 |
20 | ou adicione `gem "gosu", "~> 0.7.48"` ao seu Gemfile e execute `bundle`.
21 | Brinque com os jogos de exemplo:
22 | {% highlight sh %}
23 | cd $GEM_HOME/gems/gosu-0.7.48/examples
24 | {% endhighlight %}
25 |
26 | e então: `ruby CptnRuby.rb`
27 |
28 | ou: `ruby RMagickIntegration.rb`
29 |
30 | ou: `ruby Tutorial.rb`
31 |
32 | ### Já tive o suficiente desses exemplos!
33 |
34 | Copie o repositório através de uma nova aba do seu terminal. Se você esteve trabalhando no aplicativo do Rails Girls nesse meio tempo, tenha certeza que você está no seu diretório home rodando `cd`.
35 |
36 | Agora execute
37 | {% highlight sh %}
38 | git clone https://github.com/FloorD/gosu_tutorial_RG_TH.git
39 | {% endhighlight %}
40 |
41 | e vá para o diretório apropriado através do comando
42 | {% highlight sh %}
43 | cd gosu_tutorial_RG_TH/jumpingem
44 | {% endhighlight %}
45 |
46 | ### Rode!
47 |
48 | Para jogar nosso joguinho, abra-o usando o terminal:
49 | {% highlight sh %}
50 | ruby game.rb
51 | {% endhighlight %}
52 |
53 | ### Então, como ele funciona?
54 |
55 | Que tal inspecionarmos um pouco de código? Abra `game.rb` no seu editor de texto. Consegue ver o trecho
56 |
57 | {% highlight ruby %}
58 | !/usr/bin/env ruby -w
59 | require 'rubygems'
60 | require 'gosu'
61 | include Gosu
62 | {% endhighlight %}
63 |
64 | ... logo no começo do arquivo? Aqui nós garantimos que 'chamamos' as gems necessárias, daí então podemos mover para nossa `class` (ou múltiplas classes).
65 | Mais adiante temos nossa
66 |
67 | {% highlight ruby %}
68 | class Game < Window
69 | end
70 | {% endhighlight %}
71 |
72 | ... rolando. Os `def`'s que você vê dentro da classe Game são métodos. Neles nós **def**inimos quais instruções o programa deve seguir. Apenas dê uma olhada no seguinte trecho de código:
73 | {% highlight ruby %}
74 | def draw
75 | draw_quad 0, 400, Color::WHITE, 640, 400, Color::WHITE, 640, 500, Color::WHITE, 0, 500, Color::WHITE
76 | if @dir == :left then
77 | offs_x = -25
78 | factor = 1.0
79 | else
80 | offs_x = 25
81 | factor = -1.0
82 | end
83 | @cur_image.draw(@x + offs_x, @y - 49, 0, factor, 1.0)
84 | end
85 | {% endhighlight %}
86 |
87 | Quer brincar um pouco? Copie o conteúdo de `game.rb` em um novo arquivo `.rb`. Salve-o e nomeie-o como preferir. Agora tente mudar algumas coisas no jogo e rode-o no seu terminal para ver as mudanças na prática.
88 |
89 | Acha que tem mais habilidades gráficas que Patrick (você provavelmente tem)? Então você pode tentar criar um novo `sprites.png`! Não esqueça de chamá-lo aqui:
90 |
91 | {% highlight ruby %}
92 | def initialize
93 | super(640, 480, false)
94 | self.caption = "Jump 'n Run"
95 | @standing, @walk1, @walk2, @jump = *Image.load_tiles(self, "sprites.png", 100, 160, false)
96 | @x, @y = 400, 0
97 | @vy = 0
98 | @dir = :left
99 | @cur_image = @standing
100 | end
101 | {% endhighlight %}
102 |
103 | Está vendo o código `Game.new.show`? Ele cria uma nova instância do jogo. Ela não tem memória, então quando você ficar preso em um jogo, apenas comece um novo. Divirta-se!
104 |
105 | #### Créditos
106 |
107 | Os assets utilizados em vim adventures podem ser encontrados [aqui](http://www.lostgarden.com/2007/05/dancs-miraculously-flexible-game.html)
108 |
109 | Os sons utilizados você vai encontrar em [Matthew Klingensmith (www.matthewklingensmith.com)](http://opengameart.org/content/matts-creative-commons-music)
110 |
111 | {% include other-guides.md page="ruby-game" %}
112 |
--------------------------------------------------------------------------------
/_posts/2014-01-30-testing.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Melhor você checar seu app, antes de quebrá-lo
4 | permalink: testing-rspec
5 | ---
6 |
7 | # Teste sua aplicação com RSpec
8 |
9 | *Criado por Clemens Helm, [@clemenshelm](https://twitter.com/clemenshelm) e Floor Drees, [@floordrees](https://twitter.com/floordrees)*
10 |
11 | *Traduzido por Marina Limeira, [@marinalimeira_](https://www.twitter.com/marinalimeira_)*
12 |
13 | *Atualizado por Ana Schwendler, [@anaschwendler](https://twitter.com/anaschwendler)*
14 |
15 | **Esse guia assume que você já criou a app RailsGirls como mostrado no** [**tutorial para criação da app Rails Girls**](/app).
16 |
17 | [RSpec](https://github.com/rspec/rspec-rails) é um framework para testes em Ruby, que descreve o comportamento da nossa aplicação em uma sintaxe que não se parece muito com Ruby. Ele irá mostrar o resultado dos testes no seu terminal, então você testará suas habilidades de leitura também.
18 |
19 | __INSTRUTOR(A)__: Fale sobre testes e Desenvolvimento Guiado por Comportamento (Behavior Driven Development).
20 |
21 | ## *1.* Adicione a gem RSpec
22 |
23 | Abra o seu `Gemfile` e adicione esta linha aos grupos`:development` e `:test`, acima da tag final:
24 |
25 | {% highlight ruby %}
26 | group :development, :test do
27 | ...
28 | gem 'rspec-rails', '~> 3.8'
29 | end
30 | {% endhighlight %}
31 |
32 | e rode
33 |
34 | {% highlight sh %}
35 | bundle install
36 | {% endhighlight %}
37 |
38 | para instalar a gem.
39 |
40 | Em seguida, rode o comando abaixo para gerar as pastas do rspec:
41 |
42 | {% highlight sh %}
43 | rails generate rspec:install
44 | {% endhighlight %}
45 |
46 | Isso adiciona os seguintes arquivos usados para configuração:
47 |
48 | - `.rspec`
49 | - `spec/spec_helper.rb`
50 | - `spec/rails_helper.rb`
51 |
52 | ## *2.* Crie seu primeiro teste!
53 |
54 | Rubystas frequentemente utilizam as palavras 'teste' e 'especificação' da mesma maneira, e é por isso que você irá armazenar seus testes no diretório 'specs'.
55 | Para fazer isso, execute os seguintes passos:
56 |
57 | Vamos criar um teste para o nosso modelo `idea`, para fazer isso de maneira elegante em Rails:
58 |
59 | * Crie uma pasta `models` na sua pasta `spec`, rodando no terminal:
60 | {% highlight sh %}
61 | mkdir spec/models
62 | {% endhighlight %}
63 |
64 | * Salve seu teste como `idea_spec.rb` (` _spec.rb`).
65 |
66 | Dentro desse novo arquivo, em nosso primeiro teste, queremos garantir que uma ideia tenha um nome. Para fazer isso, vamos descrever uma de nossas especificações:
67 |
68 | {% highlight ruby %}
69 | require "rails_helper"
70 |
71 | RSpec.describe Idea, type: :model do
72 | it "tem um nome" do
73 | skip
74 | end
75 | end
76 | {% endhighlight %}
77 |
78 | No seu terminal rode:
79 |
80 | {% highlight sh %}
81 | rspec spec/models/idea_spec.rb
82 | {% endhighlight %}
83 |
84 | qual será o resultado que seu teste está pendente, pois ainda não está implementado.
85 |
86 | __INSTRUTOR(A)__: Fale sobre 'googlear' a saída do terminal
87 |
88 | Vamos fazer algo sobre isso!
89 |
90 | {% highlight ruby %}
91 | require "rails_helper"
92 |
93 | RSpec.describe Idea, type: :model do
94 | it "tem um nome" do # sim, você pode user 'it' (lê-se como 'isso tem um nome')
95 | idea = Idea.create!(name: "Minha ideia maravilhosa") # criando uma nova ideia
96 | expect(idea.name).to eq("Minha ideia maravilhosa") # esperamos que seja salvo com o nome correto
97 | end
98 | end
99 | {% endhighlight %}
100 |
101 | deve gerar uma saída mais adequada.
102 |
103 | ## *3.* Refatorando
104 |
105 | Você pode criar duas ideias, para ter certeza de que nosso projeto está criando ideias da maneira certa:
106 |
107 | {% highlight ruby %}
108 | require "rails_helper"
109 |
110 | RSpec.describe Idea, type: :model do
111 | it "tem um nome" do # sim, você pode user 'it' (lê-se como 'isso tem um nome')
112 | idea = Idea.create!(name: "Minha ideia maravilhosa") # sim, você pode user 'it' (lê-se como 'isso tem um nome')
113 | second_idea = Idea.create!(name: "Minha segunda ideia maravilhosa") # criando uma nova ideia
114 | expect(second_idea.name).to eq("Minha segunda ideia maravilhosa") # esperamos que a segunda ideia seja salva corretamente
115 | end
116 | end
117 | {% endhighlight %}
118 |
119 | que testa mais coisas.
120 |
121 | __INSTRUTOR(A)__: Fale um pouco sobre a refatoração.
122 |
123 | ## *4.* Marcando os testes como a fazer
124 |
125 | Sim! Listas de coisas a fazer. Maravilhoso.
126 | Uma boa funcionalidade do RSpec é a possibilidade de marcar alguns testes como pendente. Em outras palavras, primeiro você pensa sobre o que a implementação deve realizar, em seguida, escreve um teste para verificar se está funcionando.
127 |
128 | Vamos criar nosso próximo teste, adicionando as linhas abaixo ao nosso `idea_spec.rb`
129 |
130 | {% highlight ruby %}
131 | it "tem uma descricao"
132 | {% endhighlight %}
133 |
134 | retornará que o teste está pendente.
135 |
136 | Você consegue completar este teste? Você consegue pensar em outros testes?
137 |
138 | ## *5.* Desenvolvimento Guiado por Comportamento (BDD)
139 |
140 | __INSTRUTOR(A)__: Fale um pouco sobre Desenvolvimento Guiado por Comportamento (BDD).
141 |
142 | Agora você pode criar mais testes sozinho.
143 | Sinta-se à vontade para falar com o seu instrutor(a) para fazer isso ou maneiras de criar mais testes.
144 |
145 | Feliz testes!
146 |
147 | {% include other-guides.md page="testing-rspec" %}
148 |
--------------------------------------------------------------------------------
/_posts/2014-01-30-trucker.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Rails Girls on Trucker
4 | permalink: trucker
5 | ---
6 |
7 | # Publique sua aplicação com Trucker.io
8 |
9 | *Created by Floor Drees, [@floordrees](https://twitter.com/floordrees) for [Rails Girls Leiden](http://railsgirls.com/leiden)*
10 |
11 | ### Instale o Trucker
12 |
13 | Siga os passos 1 a 3 do [Getting Started guide](http://developers.trucker.io/Getting-Started) para criar uma conta, instalar a ferramenta de linha de comando e login.
14 |
15 | Para instalar o `trucker-cli` (linha de comandos da ferramenta), execute:
16 | {% highlight sh %}
17 | $ gem install trucker-cli
18 | {% endhighlight %}
19 |
20 | #### Fazendo login no Trucker
21 |
22 | Você pode criar e gerenciar aplicativos usando o painel de controle do Trucker. No entanto, você também precisará fazer login usando o cliente de linha de comando.
23 |
24 | {% highlight sh %}
25 | $ truck target https://api.ie.trucker.io
26 | Setting target to https://api.ie.trucker.io... OK
27 |
28 | $ truck login
29 | email>
30 | password>
31 | {% endhighlight %}
32 |
33 | Neste ponto, o cliente Trucker vai exigir que você escolha um espaço para trabalhar. Os espaços são ambientes cuja finalidade é organizar as suas aplicações baseadas em seu estágio do ciclo de vida. A sua conta Trucker vem equipada com os seguintes espaços:
34 |
35 | {% highlight sh %}
36 | 1: development
37 | 2: production
38 | 3: staging
39 | Space>
40 | {% endhighlight %}
41 |
42 | __INSTRUTOR(A)__: Fale sobre os benefícios da implantação de Trucker.io (e ter datacenters na Europa, em vez de os EUA).
43 |
44 | ### Controle de Versão
45 |
46 | Nós precisamos adicionar em nosso código o controle de versão. Você pode fazer isso executando os seguintes comandos no terminal:
47 |
48 | {% highlight sh %}
49 | git init
50 | git add .
51 | git commit -m "initial commit"
52 | {% endhighlight %}
53 |
54 | __INSTRUTOR(A)__: Este seria um grande momento para falar sobre os sistemas de controle de versão e git.
55 |
56 | ### Publicando sua aplicação para o Trucker
57 |
58 | #### Fazendo pushing de sua aplicação para o Trucker.io
59 |
60 | Primeiro vamos executar o comando `push` e depois digite o nome que você quer que sua aplicação tenha (nós usaremos `railsgirls`).
61 | {% highlight sh %}
62 | $ truck push
63 | Name> railsgirls
64 | {% endhighlight %}
65 |
66 |
67 | {% highlight sh %}
68 | Instances> 1
69 |
70 | 1: 128M
71 | 2: 256M
72 | 3: 512M
73 | 4: 1G
74 | Memory Limit> 256M
75 |
76 | Creating railsgirls... OK
77 |
78 | 1: railsgirls
79 | 2: none
80 | Subdomain> railsgirls
81 |
82 | 1: ie.trucker.io
83 | 2: none
84 | Domain> ie.trucker.io
85 |
86 | Creating route railsgirls.ie.trucker.io... OK
87 | Binding railsgirls.trucker.io to railsgirls... OK
88 | {% endhighlight %}
89 |
90 | Em seguida, adicione o MySQL como seu banco de dados:
91 |
92 | {% highlight sh %}
93 | Create services for application?> y
94 |
95 | 1: rds-mysql n/a, via aws
96 | 2: redis 2.6
97 | 3: user-provided , via
98 | What kind?> 1
99 |
100 | Name?> rds-mysql-aa0d6
101 |
102 | 1: 100mb: Shared service, 100MB storage, 10 connections
103 | Which plan?> 1
104 |
105 | Creating service rds-mysql-aa0d6... OK
106 | Binding rds-mysql-aa0d6 to trucker-rails... OK
107 | {% endhighlight %}
108 |
109 | __INSTRUTOR(A)__: Fale sobre MySQL.
110 |
111 |
112 | Nós não queremos adicionar outros serviços, você pode responder às seguintes perguntas com `n`:
113 | {% highlight sh %}
114 | Create another service?> n
115 |
116 | Bind other services to application?> n
117 | {% endhighlight %}
118 |
119 | Depois salve sua aplicação
120 | {% highlight sh %}
121 | Save configuration?> y
122 |
123 | Saving to manifest.yml... OK
124 | Uploading trucker-rails
125 | {% endhighlight %}
126 |
127 | e seu aplicativo estará publicado. A saída no seu terminal deve ser algo como isto:
128 |
129 | {% highlight sh %}
130 | Uploading railsgirls... OK
131 | Preparing to start railsgirls... OK
132 | -----> Downloaded app package (40K)
133 | -----> Using Ruby version: ruby-1.9.3
134 | -----> Installing dependencies using Bundler version 1.3.2
135 | (...)
136 | Checking status of app 'railsgirls'...
137 | 1 of 1 instances running (1 running)
138 | Push successful! App 'railsgirls' available at http://railsgirls.ie.trucker.io
139 | {% endhighlight %}
140 |
141 | Sua aplicação agora está disponível em http://railsgirls.ie.trucker.io!
142 |
143 | {% include other-guides.md page="trucker" %}
144 |
--------------------------------------------------------------------------------
/_posts/2014-03-24-alternative-dev-environment.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Ambiente de desenvolvimento alternativo usando VirtualBox
4 | permalink: virtual-machine
5 | ---
6 |
7 | # Introdução
8 |
9 | Um ambiente de desenvolvimento é a soma de todas as aplicações e ferramentas, com as quais uma desenvolvedora pode trabalhar diariamente. Além de um navegador e de um editor de código, todos os programas necessários para rodar e servir nossa aplicação estão incluídos no ambiente. Para desenvolvimento em Ruby on Rails, certamente precisaremos de Ruby e do framework Rails, além de um banco de dados, um servidor para aplicações web, etc.
10 | Uma desenvolvedora experiente, por padrão, instalaria todas essas ferramentas em seu ambiente, mas isso é uma tarefa avançada. Além disso, se vocês estão trabalhando em sistemas operacionais diferentes, a maioria de vocês está trabalhando no Windows, onde instalar um ambiente adequado de desenvolvimento com Ruby é um problema enorme.
11 |
12 | Considerando tudo o que falamos acima, criamos um ambiente de desenvolvimento virtual para o primeiro evento Rails Girls - Budapeste, com a esperança de que poderíamos facilitar a experiência de cada participante.
13 |
14 |
15 |
16 | ## Máquina Virtual
17 |
18 | Uma [máquina virtual (VM)](http://en.wikipedia.org/wiki/Virtual_machine) é uma emulação de um computador, baseada em software.
19 |
20 | ### Limitações
21 |
22 | Para virtualizar um sistema operacional diferente, seu computador precisará usar uma certa quantidade de capacidade de energia e memória. Não recomendamos a virtualização se o seu computador não tem mais do que um núcleo de CPU, e pelo menos 2GB de memória RAM.
23 |
24 | # Instalando o ambiente de desenvolvimento
25 |
26 | ## Ambiente virtual
27 |
28 | Criamos uma máquina virtual para você, com todos os programas e ferramentos necessários pré-instalados. Para aquelas que estiverem interessadas nos parâmetros: trata-se de uma máquina 32 bits rodando Ubuntu 12.04, sem nenhum gerenciador de janelas (você não precisa disso agora). Com essa solução, todas serão capazes de escrever o código necessário em seu ambiente normal, é possível usar seu navegador favorito, e a máquina virtual só será necessária quando você quiser rodar comandos Rails no terminal. Você poderá fazer isso no navegador também, como você verá mais adiante.
29 |
30 | ### VirtualBox
31 |
32 | VirtualBox é a plataforma de virtualização da Oracle, que pode ser baixada em todos os sistemas operacionais suportados (Windows, macOS, Linux). Vamos baixar o instalador a partir do endereço [https://www.virtualbox.org/wiki/Downloads](https://www.virtualbox.org/wiki/Downloads), e vamos instalá-lo em seguida.
33 |
34 | ### Máquina virtual das Rails Girls
35 |
36 | Por favor baixe a máquina virtual criada para esse evento [aqui](http://www.digitalnatives.hu/demos/railsgirls/railsgirls_virtualbox_vm.zip). Após o download, por favor descompacte o arquivo, e coloque os conteúdos desse arquivo em uma pasta.
37 | Vamos abrir a VirtualBox que já foi instalada. Por favor encontre o comando Machine/Add (Máquina/Adicionar) no menu.
38 | Procure a pasta criada anteriormente, que contém nossa VM, e selecione o arquivo que tem a extensão *vbox*.
39 | Se você configurou tudo certinho, uma nova VM apareceu na barra à esquerda, com o nome *RailsGirls*.
40 | Podemos, então, iniciá-la pela primeira vez!
41 |
42 | 
43 |
44 | #### Iniciando
45 |
46 | Selecione a máquina virtual desejada e pressione o botão *start* (iniciar)! Se tudo estiver certo, uma janela preta deve aparecer, na qual, após 10-60 segundos, o rótulo `precise32 login:` aparecerá. Isso significa que a nossa VM está ligada e rodando! Não vamos precisar dessa janela depois, mas não feche-a, porque ela deve continuar sendo executada enquanto estivermos codando.
47 |
48 | #### Desligando
49 |
50 | Quando você não precisa mais de uma VM, você pode desligá-la. Para isso, feche a janela descrita acima, e selecione *Shut down* (desligar) das opções disponíveis. Depois que ela desligar, a VM não usará mais nenhum recurso do seu computador além de algum espaço no disco.
51 |
52 | #### O mouse invisível
53 |
54 | Ao clicarmos nessa janela da VirtualBox, ela pega nosso ponteiro do mouse, e ele desaparece sem deixar vestígios. Você pode recuperar seu ponteiro: no canto inferior direito da janela você consegue ver a combinação de teclas que você tem que pressionar (no macOS é esquerda-cmd, e em outras plataformas é direita-ctrl).
55 |
56 | ### Uso
57 |
58 | Agora que nossa VM está ligada e rodando, vamos fazer login nela. Podemos logar a partir da janela de VirtualBox descrita acima, mas isso não é muito confortável de fazer (já que essa janela não está reconhecendo nosso layout de teclado e nenhum atalho como copiar-colar vai funcionar, etc.). Também poderíamos logar remotamente (com uma conexão SSH), mas o Windows não tem um cliente de SSH pré-instalado, e instalar um seria muito trabalhoso.
59 | Por causa disso, você pode logar na sua VM usando um navegador. Abra seu navegador favorito (Chrome :) ), e digite o endereço [http://localhost:57575](http://localhost:57575).
60 | Se tudo estiver certo, devemos ver uma borboleta:
61 |
62 | 
63 |
64 | Nós vamos nos referir a essa aba do seu navegador como um terminal, e você deverá digitar todos os comandos destinados ao Rail aqui.
65 |
66 | #### Colando texto
67 |
68 | No Linux e no Windows, você não conseguirá colar qualquer código copiado com a combinação normal de Ctrl+V. Em vez disso, por favor use shift-inserir, porque deve funcionar.
69 |
70 | ### Login
71 |
72 | Vamos logar na nossa VM com as seguintes credenciais (por favor ESTEJA CIENTE de que você não verá nada mudar enquanto estiver digitando a senha, e que isso é totalmente normal):
73 |
74 | {% highlight sh %}
75 | login: vagrant
76 | password: vagrant
77 | {% endhighlight %}
78 |
79 | Após ter feito login com sucesso, você deve ver o seguinte rótulo:
80 |
81 | {% highlight sh %}
82 | vagrant@precise32:~$
83 | {% endhighlight %}
84 |
85 | IMPORTANTE: sempre que estivermos logadas na VM, não se esqueça de digitar a seguinte linha em seguida: `/bin/bash --login`!!!
86 |
87 | ### Diretório compartilhado
88 |
89 | A parte mais difícil já acabou, e nosso ambiente de desenvolvimento está quase pronto. Só falta uma coisa: temos que compartilhar uma pasta, que deve ser lida pelo nosso sistema operacional normal e pela nossa VM, já que vamos escrever código na primeira, mas vamos ler o código na última.
90 |
91 | Vamos criar uma nova pasta chamada *railsgirls* na nossa máquina virtual (na nossa pasta inicial de usuário).
92 | Vamos desligar nossa VM, como descrito acima. Após o desligamento da máquina, selecione a VM no VirtualBox, e pressione *Settings*. Clique na aba Arquivos Compartilhados (Shared Folders), e clique no ícone de + pequeno, à direita.
93 | Na janelinha que aparecerá, procure pela pasta *railsgirls* como um caminho de pasta (Folder Path). Dê à pasta o nome (foldername) de *railsgirls*, e também selecione a opção *Auto Mount* (todas as outras opções devem estar não-selecionadas).
94 | Inicie a VM novamente, e faça login nela com o processo já conhecido:
95 |
96 | * abra [http://localhost:57575](http://localhost:57575)
97 | * faça log in com vagrant / vagrant
98 | * não se esqueça de executar `/bin/bash --login`
99 |
100 | #### Checagem de sistema
101 |
102 | A pasta compartilhada pode ser encontrada no caminho */media/sf_railsgirls*. Vamos verificar se tudo está funcionando conforme esperdo. Por favor entre no diretório:
103 |
104 | {% highlight sh %}
105 | $ cd /media/sf_railsgirls
106 | {% endhighlight %}
107 |
108 | Vamos criar um arquivo vazio:
109 |
110 | {% highlight sh %}
111 | $ touch teste.txt
112 | {% endhighlight %}
113 |
114 | Agora vamos checar, no nosso sistema operacional normal, se a pasta compartilhada contém um arquivo chamado *teste.txt*. Se o arquivo existir, isso significa que nosso ambiente de desenvolvimento virtual está pronto.
115 |
116 | ## Editor
117 |
118 | O editor de código é, na verdade, um editor de texto muito esperto, no qual vamos escrever todo o código da nossa aplicação. Nós gostamos muito do Sublime Text, que você pode baixar de [http://www.sublimetext.com/3](http://www.sublimetext.com/3).
119 |
120 | {% include other-guides.md page="virtual-machine" %}
121 |
--------------------------------------------------------------------------------
/_posts/2014-05-10-sinatra-html.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Mostrando a lista de Café
4 | permalink: sinatra-html
5 | ---
6 |
7 | # Mostrando a lista de Café
8 |
9 | *Criado por Tim McEwan, [@tjmcewan](https://twitter.com/tjmcewan)*
10 |
11 | *Traduzido por Marina Limeira, [@marinalimeira_](http://twitter.com/marinalimeira_)*
12 |
13 | Utilizar `.inspect` funciona para depurar, mas nós não queremos utilizá-lo em produção. Por um motivo, é muito difícil estilizar a saída. Vamos colocar nossa lista de cafés dentro do HTML correto.
14 |
15 | ## 1. Configuração
16 |
17 | Primeiro vamos fazer um método que irá retornar nossos café dentro de tags HTML. Nós iremos nomear o método `coffees_html`, e o que ele faz é meio óbvio. Defina ele como:
18 |
19 | {% highlight ruby %}
20 | def coffees_html
21 | # construa o HTML aqui
22 | end
23 | {% endhighlight %}
24 |
25 | E no seu template altere a linha `#{ $coffees.inspect }` para chamar nosso novo método:
26 |
27 | {% highlight ruby %}
28 | #{ coffees_html }
29 | {% endhighlight %}
30 |
31 | ## 2. Adicione algum HTML
32 |
33 | Escreva alguma coisa para tornar a variável global `$coffees` em HTML que pareça assim:
34 |
35 | {% highlight HTML %}
36 |
Flat White $3.50
37 |
38 |
Cappuccino $2.50
39 | {% endhighlight %}
40 |
41 | **Dica:** Lembre-se, a variável `$coffees` é um array de hashes.
42 |
43 | Nós queremos iterar o array `$coffees` e transformar cada hash em uma string HTML, dentro de `
`s, que deveriam ser todos separados por ` `s. Nós também queremos ter certeza de estar retornando uma string.
44 |
45 | Para alguma ideias de solução, [cheque isto](http://tjmcewan.github.io/coffeecalc/snippets/coffees_html.rb.txt).
46 |
47 | {% include other-guides.md page="sinatra-html" %}
48 |
--------------------------------------------------------------------------------
/_posts/2014-05-29-touristic-autism_basic-app.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: App para turismo de autismo amigável
4 | permalink: touristic-autism_basic-app
5 | ---
6 |
7 | # Aplicação Web Básica
8 |
9 | *Criado por Myriam Leggieri, [@iammyr](https://twitter.com/iammyr)*
10 | *para o projeto [Rails Girls Galway](https://github.com/RailsGirlsGalway)*
11 |
12 | *Traduzido por Luiz Santos, [@santosluiz](https://github.com/santosluiz)*
13 |
14 | Os tutoriais básicos que foram mesclados e adaptados são: [Tutorial Ruby on Rails](http://www.railstutorial.org/book), [App RailsGirls](http://guides.railsgirls.com/app/) e o tutorial para [criação de thumbnails](http://guides.railsgirls.com/thumbnails), [autenticando usuários](http://guides.railsgirls.com/devise/), [adicionando um design](http://guides.railsgirls.com/design), [implementando com o OpenShift](http://guides.railsgirls.com/openshift/) e [adicionando comentários](http://guides.railsgirls.com/commenting).
15 |
16 | ## Conheça as ferramentas
17 |
18 |
19 |
20 |
21 |
22 |
Editor de Texto
23 |
24 |
Sublime Text, Komodo Edit, Vim, Emacs, e Gedit são exemplos de editores de texto que você pode usar para codar e editar arquivos.
25 |
26 |
27 |
28 |
Terminal (conhecendo os comandos do Prompt no Windows)
29 | Onde você irá iniciar o servidor rails e rodar os comandos.
30 |
31 |
32 |
33 |
Navegadores - Browsers
34 | (Firefox, Safari, Chrome) para visualizar sua aplicação.
35 |
36 |
GitHub
37 | [Slides - por Kevin Lyda @]()
38 |
39 |
40 |
41 | ### Importante
42 |
43 | É importante que você selecione as instruções específicas do seu sistema operacional - os comandos que você roda no Windows são superficialmente diferentes dos comandos do Mac ou do Linux. Se você estiver tendo algum problema, verifique o comutador do sistema operacional no rodapé dos comandos.
44 |
45 |
46 | ## 1. Criando a aplicação
47 |
48 | Nós iremos criar um novo app Rails chamado *railsgirls-galway*.
49 |
50 | Primeiro, vamos abrir o terminal:
51 |
52 | * macOS: Abra o Spotlight, digite *Terminal* e clique em *Terminal*.
53 | * Windows: Clique no Menu Iniciar e digite *Prompt* e clique em *Command Prompt with Ruby and Rails*.
54 | * Linux (Ubuntu/Fedora): Procure por *Terminal* no dashboard e clique em *Terminal*.
55 |
56 | Próximo, digite estes comandos no terminal:
57 |
58 |
60 | {% highlight sh %}
61 | mkdir projetos
62 | {% endhighlight %}
63 |
64 |
66 | Você pode verificar o diretório `projetos` (que acabou de ser criado), utilizando o comando: `ls`. Se tudo ocorreu bem, você deverá ver o diretório `projetos` na listagem. Agora, devemos acessar o conteúdo do diretório `projetos` que acabamos de criar, utilizando o seguinte comando:
67 |
69 |
70 | {% highlight sh %}
71 | cd projetos
72 | {% endhighlight %}
73 |
74 |
76 | Você pode verificar se está em um diretório vazio utilizando o comando `ls`. Agora, você pode criar uma nova aplicação chamada `railsgirls-galway` com o comando:
77 |
79 |
80 | {% highlight sh %}
81 | rails new railsgirls-galway
82 | {% endhighlight %}
83 |
84 |
86 | Este comando irá criar uma nova aplicação na pasta `railsgirls`. Então, nós devemos sair do diretório atual para entrarmos no diretório principal da nossa aplicação. Podemos fazer isso com o seguinte código:
87 |
89 |
90 | {% highlight sh %}
91 | rvm rubygems latest
92 | cd railsgirls-galway
93 | {% endhighlight %}
94 |
95 |
97 | Se você digitar o comando `ls` dentro do diretório, você deverá ver as pastas `app` e `config`. Então, você pode iniciar o servidor Rails com o comando:
98 |
100 |
101 | {% highlight sh %}
102 | rails server
103 | {% endhighlight %}
104 |
105 |
106 |
109 |
110 | Acesse [http://localhost:3000](http://localhost:3000) no seu navegador. Deverá aparecer a página de boas-vindas: "Welcome aboard". Isso significa que a sua aplicação em Rails está funcionando perfeitamente.
111 |
112 | Perceba que nesta janela, o prompt de comando não está visível porque você está em um servidor Rails. O prompt de comando será mais ou menos assim:
113 |
114 |
126 |
127 | Enquanto o prompt de comando não estiver visível, você não poderá executar novos comandos. Se você tentar inserir algum comando como `cd` ou algum outro comando, ele não irá funcionar. Para retornar ao prompt de comando normal:
128 |
129 | Pressione Ctrl+C no terminal para sair do servidor.
130 |
131 | **Instrutor(a):** Explique o que cada comando faz.
132 | [O que é um servidor e uma aplicação web - Slides por @]()
133 | O esqueleto gerado por `rails new` reflete o padrão de arquitetura [Model-View-Controller(MVC) - Slides por @]().
134 |
135 | {% include other-guides.md page="touristic-autism_basic-app" %}
136 |
137 |
--------------------------------------------------------------------------------
/_posts/2014-05-29-touristic-autism_continuous-deployment.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: App para turismo de autismo amigável
4 | permalink: touristic-autism_continuous-deployment
5 | ---
6 |
7 | # Deploy Contínuo
8 |
9 | *Criado por Myriam Leggieri, [@iammyr](https://twitter.com/iammyr)*
10 | *para [Rails Girls Galway](https://github.com/RailsGirlsGalway)*.
11 | Os guias básicos que foram unidos e adaptados são o [Tutorial de Ruby on Rails](http://www.railstutorial.org/book), o [RailsGirls app básico](http://guides.railsgirls.com/app/) e os tutoriais para [criar thumbnails](http://guides.railsgirls.com/thumbnails), [autenticar usuários](http://guides.railsgirls.com/devise/), [adicionar design](http://guides.railsgirls.com/design), [deploy ao OpenShift](http://guides.railsgirls.com/openshift/) e [adicionar comentários](http://guides.railsgirls.com/commenting).
12 | Traduzido por Renan Muliterno, [rmuliterno](https://github.com/rmuliterno).
13 |
14 |
15 |
16 | Nós iremos realizar o deploy da nossa(ainda vazia) aplicação Rails, para produção. Realizar o deploy cedo e com frequência nos permite captar problemas de deploy no começo do nosso ciclo de desenvolvimento, caso contrário podemos ter problemas durante a fase de integração.
17 | Vários hosts compartilhados, servidores virtuais privados, empresas de deploy de serviços inteiros e serviços de deploy em nuvem, todos fornecem ferramentas que facilitam o deploy de aplicações Rails.
18 |
19 | OpenShift é um dos serviços de deploy em nuvem que oferecem tais ferramentas. É uma plataforma de computação em nuvem como um serviço (Paas) que facilita o deploy de aplicativos online. É de código aberto e escrito em Ruby.
20 |
21 |
22 |
23 | [Criar uma conta no OpenShift](https://openshift.redhat.com/app/account/new?web_user[promo_code]=railsgirls), nos permite colocar 3 aplicações online de graça. Após entrar com sua conta, instale o OpenShift RHC Client Tools (Ferramentas do Cliente RHC OpenShift) adicionando a gema rhc no ambiente de produção. Adicione o seguinte código para o arquivo Gemfiile (que é escrito em Ruby ndr):
24 |
25 |
26 | {% highlight ruby %}
27 | group :production do
28 | gem 'rhc'
29 | end
30 | {% endhighlight %}
31 |
32 |
33 |
34 | Se você não está usando o RVM ou o RailsInstaller então siga [esse guia](https://www.openshift.com/developers/rhc-client-tools-install)
35 | (você talvez precise executar o comando `sudo gem install rhc`).
36 |
37 | Então rode no terminal:
38 |
39 |
47 | A opção `--without production` previne a instalação local de alguma gema de produção.
48 |
49 | Se o Bundler mostrar algum erro na leitura, tente adicionar gem `rb-readline` para o seu Gemfile.
50 |
51 | Como as únicas gemas que nós adicionamos estão restritas à um ambiente de produção, no momento esse comando não instala nenhuma gema local adicional, mas esse comando é necessário para atualizar o arquivo `Gemfile.lock`. Agora, vamos realizar o commit dessas alterações ao GitHub!
52 |
53 | **Instrutor(a):** Explique os benefícios do deploy em um PaaS, como o OpenShift, ao invés de servidores tradicionais. O que "produção" quer dizer. Falar sobre SSH e por quê temos que subir uma chave pública para realizar comunicações com segurança.
54 | [Slides por Gerry Kavanagh @gerryk]()
55 |
56 | Navegue para a pasta `projects`. Rode no prompt:
57 |
58 |
65 |
66 | Precisamos do diretório `.openshift` e do arquivo `config/database.yml` da aplicação de exemplo para o nosso app em Rails rodar no OpenShift.
67 | Copie isso do diretório `openshiftapp` para o diretório `railsgirls`.
68 |
69 |
77 | Agora adicione e realize o commit dessas mudanças no Git!
78 |
79 |
80 | OpenShift usa o banco de dados PostgresSQL, o que significa que devemos adicionar a gema `pg` no ambiente de produção para permitir que o Rails se comunique com o Postgres. Note, também, a adição da gema `rails_12factor`, que é usada para servir recursos estáticos como imagens e folhas de estilo.
81 | Substitua `gem sqlite` no Gemfile com o seguinte código:
82 |
83 |
92 | Agora faça um bundle excluíndo as gemas em produção.
93 |
94 | Em algumas plataformas, isso pode gerar versões de plataformas específicas das suas Gems o que pode causar problemas quando você colocar seu app na nuvem. Para prevenir isso, abra o seu arquivo Gemfile.lock e cheque as versões das Gems `sqlite3` e `pg`. Se elas possuem um sufixo específico de plataforma como `-x86mingw32`, remova-os (por exemplo troque `pg (0.16.0-x86-mingw32)` para `pg (0.16.0)` e `sqlite3 (1.3.8-x86-mingw32)` para `sqlite3 (1.3.8)`).
95 | Salve e feche o arquivo, então rode o comando de bundle novamente antes de prosseguir.
96 |
97 | Adicione e realize o commit dessas mudanças no Git!
98 |
99 | **Instrutor(a):** Fale sobre banco de dados relacionais e as diferenças entre o SQLite e o PostgreSQL
100 |
101 |
102 | Agora estamos prontos para fazer o deploy do app Rails Girls para o OpenShift. Nós precisamos especificar para o nosso repositório Git aonde enviar o código. Para pegar a localização do seu repositório OpenShift, rode o seguinte comando e copie a URL do Git da resposta.
103 |
104 |
105 |
106 | {% highlight sh %}
107 | rhc app show openshiftapp
108 | {% endhighlight %}
109 |
110 |
111 |
112 | Agora rode os seguintes comandos, trocando a string SSH com o seu URL do Git. Estamos usando `-f` para forçar porque é bom limpar o histórico do atual repositório OpenShift, que contém o app Rails de exemplo. Ao enviar mudanças futuras, poderá apenas usar um `git push`.
113 |
114 |
122 | Reinicie o app no seu navegador para ver o resultado.
123 | Se o app falhar (500 Internal Server Error) ou, geralmente (error from the rhc tail openshiftapp : "Missing `secret_key_base` for 'production' environment, set this value in `config/secrets.yml`").
124 |
125 | O seguinte vai resolver:
126 | Pegue um segredo com o `rake secret` e o designe para a variável de ambiente `SECRET_KEY_BASE` e exporte a variável para `~/.bash_profile`.
127 | O OpenShift (o Heroku também) precisa servir recursos estáticos como imagens e CSS:
128 |
129 |
140 | Apenas use isso se o OpenShift falhar. Iremos falar sobre `rake` e `assets` mais pra frente.
141 |
142 | Quando enviamos uma nova versão da aplicação, qualquer coisa armazenada na cópia do repositório OpenShift será limpada para liberar espaço para os novos arquivos. Isso inclui alguns arquivos de registros e imagens subidas por usuários. Para consertar isso, podemos armazenar esses arquivos em diretórios persistentes no OpenShift; o caminho das localizações que precisamos estão armazenadas em variáveis de ambiente.
143 |
144 | Para trocar a localização do registro de produção, abra `config/environments/production.rb`. Logo abaixo da linha de comentário:
145 |
146 |
163 |
164 | Usuários do Rails 3: Trocar `ActiveSupport::Logger` por `ActiveSupport::BufferedLogger`.
165 |
166 | Você pode monitorar os registros de sua aplicação com o comando `rhc tail openshiftapp` (o retorno da mudança que você acabou de fazer não será exibido até que o novo arquivo seja commitado e enviado para o OpenShift).
167 |
168 | **Instrutor(a):** Discutir a importância de registros da aplicação.
169 |
170 | {% include other-guides.md page="touristic-autism_continuous-deployment" %}
171 |
--------------------------------------------------------------------------------
/_posts/2014-05-29-touristic-autism_git.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: App para turismo de autismo amigável
4 | permalink: touristic-autism_git
5 | ---
6 |
7 | # Controle de Vesão com o Git
8 |
9 | *Criado por Myriam Leggieri, [@iammyr](https://twitter.com/iammyr)*
10 | *para [Rails Girls Galway](https://github.com/RailsGirlsGalway)*
11 | *Traduzido por Luiz Santos, [@santosluiz](https://github.com/santosluiz)*
12 |
13 | Os tutoriais básicos que foram mesclados e adaptados são: [Tutorial Ruby on Rails](http://www.railstutorial.org/book), [App RailsGirls](http://guides.railsgirls.com/app/) e o tutorial para [criação de thumbnails](http://guides.railsgirls.com/thumbnails), [autenticando usuários](http://guides.railsgirls.com/devise/), [adicionando um design](http://guides.railsgirls.com/design), [implementando com o OpenShift](http://guides.railsgirls.com/openshift/) e [adicionando comentários](http://guides.railsgirls.com/commenting).
14 |
15 |
16 | Navegue até o diretório principal do primeiro app e inicialize um novo repositório:
17 |
18 |
25 |
26 | Antes de adicionar o projeto ao repositório, vamos dizer ao Git quais arquivos ele deve ignorar listando no arquivo .gitignore. O comando "rails new" já cria o arquivo .gitignore, mas vamos estendê-lo com seguinte comando:
27 |
28 |
29 |
30 | {% highlight sh %}
31 | # Ignore outros arquivos desnecessários.
32 | database.yml
33 | # Ignore a documentação do Rails
34 | doc/
35 | # Ignore Vim e Emacs
36 | *.swp
37 | *~
38 | .project
39 | # Ignore (para usuários de macOS) o diretório .DS_Store criado pelo Mac Finder application
40 | .DS_Store
41 | .idea
42 | .secret
43 | {% endhighlight %}
44 |
45 |
46 |
47 | Adicione as alterações (recursivamente, adicionando todos os sub-diretórios).
48 |
55 |
56 | O comando `git add`, adiciona os arquivos do projeto área de stage, onde contém as alterações pendentes no seu projeto; Você pode ver quais arquivos estão na área de stage utilizando o comando status:
57 |
58 |
59 |
60 | {% highlight sh %}
61 | $ git status
62 | {% endhighlight %}
63 |
64 |
65 |
66 | Agora, faça o commit justificando o motivo de tal ação:
67 |
73 | Os commits do Git são locais. Eles são gravados apenas na máquina utilizada, na máquina em que os commits ocorrem. Você pode ver a lista com todos os commits com o `git log`, digitando `q` para sair.
74 |
75 |
76 | Agora, queremos enviar nossas alterações para um repositório remoto:
77 | [Criando um repositório](http://github.com/new) chamado "railsgirls-galway" e inserindo informações. Não inicie um repositório com o arquivo "README", pois o comando `rails new` já cria automaticamente.
78 | Envie as alterações locais para o repositório remoto desta forma:
79 |
80 |
87 | O resultado é uma página no GitHub (por exemplo, [aqui está o meu](https://github.com/iammyr/railsgirls-galway-2014)) para o repositório da nossa aplicação, que fornece renderização agradável, compartilhando funcionalidades e estatísticas. Veja aqui: https://github.com//railsgirls-galway
88 |
89 |
90 | **Instrutor(a):** Explique como funciona o branch, edit, commit e merge no GitHub: altere seu projeto adicionando uma descrição no README.
91 | ([Slides por Myriam Leggieri @iammyr]())
92 |
93 | {% include other-guides.md page="touristic-autism_git" %}
94 |
--------------------------------------------------------------------------------
/_posts/2014-05-29-touristic-autism_google-map.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Aplicativo de Pontos Turísticos amigável para autistas
4 | permalink: touristic-autism_google-map
5 | ---
6 |
7 | # Mostrar todo os lugares no Google Map
8 |
9 | *Criado por Myriam Leggieri, [@iammyr](https://twitter.com/iammyr)*
10 | *para [Rails Girls Galway](https://github.com/RailsGirlsGalway)*
11 | *Traduzido por Elaine Martins, [@astronomaelaine](https://twitter.com/astronomaelaine)*
12 |
13 | 59/5000
14 | Os guias básicos que foram mesclados e adaptados são o [Ruby on Rails Tutorial](http://www.railstutorial.org/book), o [RailsGirls app básico](http://guides.railsgirls.com/app/) e os tutoriais para [criar thumbnails (miniaturas)](http://guides.railsgirls.com/thumbnails), [autenticando usuários](http://guides.railsgirls.com/devise/), [adicionando visual](http://guides.railsgirls.com/design), [deploying para OpenShift](http://guides.railsgirls.com/openshift/) e [adicionando comentários](http://guides.railsgirls.com/commenting).
15 |
16 |
17 | É preciso instalar um software que permite visualizar e interagir com o Google Maps.
18 |
19 | Abra `Gemfile` no diretório do projeto utilizando o editor de texto de sua preferência e adicione as linhas
20 |
21 | {% highlight ruby %}
22 | gem 'gmaps4rails'
23 | {% endhighlight %}
24 |
25 |
26 | Agrupe como o de costume. Depois, adicione as linhas abaixo a um novo arquivo `app/model/marker.rb`:
27 |
28 | {% highlight ruby %}
29 | class Marker
30 |
31 | include ActiveModel::Validations
32 | include Gmaps4rails::ActsAsGmappable
33 |
34 | acts_as_gmappable :position => :location
35 |
36 | attr_accessor :location
37 |
38 | def gmaps4rails_infowindow
39 | 'foo'
40 | end
41 |
42 | end
43 | {% endhighlight %}
44 |
45 | Depois, adicione a `config/application.rb`, dentro do bloco do seu projeto:
46 |
47 | {% highlight ruby %}
48 | config.active_support.escape_html_entities_in_json = true
49 | config.encoding = "utf-8"
50 | config.filter_parameters += [:password]
51 | config.assets.enabled = true
52 | config.assets.version = '1.0'
53 | {% endhighlight %}
54 |
55 | Crie o seu `app/controllers/google_controller.rb`:
56 |
57 | {% highlight ruby %}
58 | class GoogleController < ApplicationController
59 | def index; end
60 |
61 | def markers
62 | @marker ||= (1..10).map {
63 | m = Marker.new
64 | m.location = [ (Random.new.rand(-5000..5000) / 100.0),(Random.new.rand(-5000..5000) / 100.0) ]
65 | m
66 | }.to_gmaps4rails
67 | end
68 | helper_method :markers
69 |
70 | end
71 | {% endhighlight %}
72 |
73 | Crie o seu `view/google/index.html.erb`:
74 |
75 | {% highlight erb %}
76 |
86 |
87 |
88 | <%= gmaps("markers" => {"data" => markers},
89 | "map_options" => {
90 | "center_on_user" => true,
91 | "detect_location" => true,
92 | "provider" => "openlayers", :id => 'openlayer_map'}) %>
93 | {% endhighlight %}
94 |
95 | Adicione as linhas abaixo em `app/views/application.html.erb` depois de `<%= yield %>`:
96 |
97 | {% highlight erb %}
98 | <%= yield :scripts %>
99 | {% endhighlight %}
100 |
101 | Para finalizar, adicione as linhas abaixo em `config/routes.rb`:
102 |
103 | {% highlight ruby %}
104 | get '/google' => 'google#index'
105 | root :to => 'google#index'
106 | {% endhighlight %}
107 |
108 | {% include other-guides.md page="touristic-autism_google-map" %}
109 |
--------------------------------------------------------------------------------
/_posts/2014-05-29-touristic-autism_image-upload.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Touristic Autism-friendly Spots App
4 | permalink: touristic-autism_image-upload
5 | ---
6 |
7 | # Upload de imagens e miniaturas
8 |
9 | *Criado por Myriam Leggieri, [@iammyr](https://twitter.com/iammyr)* *para [Rails Girls Galway](https://github.com/RailsGirlsGalway)*
10 |
11 | *Traduzido por Rafael Vianna, [@RFerreiraVianna](https://twitter.com/rferreiravianna)
12 |
13 | Os guias básicos que foram mesclados e adaptados são os [Ruby on Rails Tutorial](http://www.railstutorial.org/book), o [basic RailsGirls app](http://guides.railsgirls.com/app/) e os tutoriais são: [creating thumbnails](http://guides.railsgirls.com/thumbnails), [authenticating users](http://guides.railsgirls.com/devise/), [adding design](http://guides.railsgirls.com/design), [deploying to OpenShift](http://guides.railsgirls.com/openshift/) e [adding comments](http://guides.railsgirls.com/commenting).
14 |
15 | Nós precisamos instalar uma nova Gem que nos permita fazer upload de arquivos no Rails.
16 |
17 | Abra `Gemfile` na sua pasta do projeto usando seu editor de texto e adicione:
18 |
19 | {% highlight ruby %}
20 | gem 'carrierwave'
21 | {% endhighlight %}
22 |
23 | No terminal execute:
24 |
25 | {% highlight sh %}
26 | bundle
27 | {% endhighlight %}
28 |
29 | Agora podemos gerar o código para a execução do upload. No terminal, execute:
30 |
31 | {% highlight sh %}
32 | rails generate uploader Picture
33 | {% endhighlight %}
34 |
35 | Nesse momento você irá **precisar reiniciar o servidor do Rails** no terminal.
36 |
37 | Precione Ctrl+C no terminal para parar o servidor. Uma vez parado, você pode apertar a seta pra cima no seu teclado para encontrar o último comando executado, então pressione o enter para iniciar o servidor novamente.
38 |
39 | Isso é necessário para que o app carregue a biblioteca adicionada.
40 |
41 | Abra `app/models/place.rb` e adicione:
42 |
43 | {% highlight erb %}
44 | mount_uploader :picture, PictureUploader
45 | {% endhighlight %}
46 |
47 | Abra `app/views/places/_form.html.erb` e mude:
48 |
49 | {% highlight erb %}
50 | <%= f.text_field :picture %>
51 | {% endhighlight %}
52 |
53 | para:
54 |
55 | {% highlight erb %}
56 | <%= f.file_field :picture %>
57 | {% endhighlight %}
58 |
59 |
60 | Algumas vezes você pode obter um *TypeError: can't cast ActionDispatch::Http::UploadedFile to string*.
61 |
62 | Se isso acontecer, no arquivo `app/views/places/_form.html.erb` mude a linha:
63 |
64 | {% highlight erb %}
65 | <%= form_for(@place) do |f| %>
66 | {% endhighlight %}
67 |
68 | para:
69 |
70 | {% highlight erb %}
71 | <%= form_for @place, :html => {:multipart => true} do |f| %>
72 | {% endhighlight %}
73 |
74 | Agora, se você executar o seu servidor e tentar adicionar um novo local com uma imagem, você notará que a imagem não parece bonita porque mostra apenas um caminho para o arquivo. Vamos consertar isso.
75 |
76 | Abra `app/views/places/show.html.erb` e mude:
77 |
78 | {% highlight erb %}
79 | <%= @place.picture %>
80 | {% endhighlight %}
81 |
82 | para:
83 |
84 | {% highlight erb %}
85 | <%= image_tag(@place.picture_url, :width => 600) if @place.picture.present? %>
86 | {% endhighlight %}
87 |
88 | Agora recarregue seu navegador para ver a mudança.
89 |
90 | **Instrutor(a):** Fale um pouco sobre HTML.
91 |
92 | __Instrutor(a)__: Explique o que especifica a largura da imagem em HTML no final da etapa
93 | 4 e como ele difere do redimensionamento de imagens no servidor.
94 |
95 | ## Instalando ImageMagick
96 |
97 | * macOS: Execute `brew install imagemagick`. Se você não tiver o comando brew, você pode [instalar aqui][in-homebrew].
98 | * Windows: Baixe e execute [ImageMagick installer][im-win] (use o primeiro
99 | *download* link de download). Depois reabra o Shell de comando do Rails.
100 | * Linux: No Ubuntu e Debian, execute `sudo apt-get install imagemagick`. Use o gerenciador de pacote apropriado ao invés de usar `apt-get` para outras distribuições.
101 |
102 | [im-win]: http://www.imagemagick.org/script/binary-releases.php?ImageMagick=vkv0r0at8sjl5qo91788rtuvs3#windows
103 | [in-homebrew]: http://mxcl.github.io/homebrew/
104 |
105 | __Instrutor(a)__: O que é ImageMagick e o que difere das bibliotecas usadas anteriormente?
106 |
107 | Abra `Gemfile` no projeto e adicione:
108 |
109 | {% highlight ruby %}
110 | gem 'mini_magick', '3.5.0'
111 | {% endhighlight %}
112 |
113 | No terminal execute:
114 |
115 | {% highlight sh %}
116 | bundle
117 | {% endhighlight %}
118 |
119 | ## Fazendo nosso app criar miniaturas quando uma imagem é adicionada
120 |
121 | Abra `app/uploaders/picture_uploader.rb` e ache a seguinte linha:
122 |
123 | {% highlight ruby %}
124 | # include CarrierWave::MiniMagick
125 | {% endhighlight %}
126 |
127 | Remova o `#`.
128 |
129 | __Instrutor(a)__: Explique o conceito de comentários no código..
130 |
131 | Abaixo da linha que você acabou de alterar, adicione:
132 |
133 | {% highlight ruby %}
134 | version :thumb do
135 | process :resize_to_fill => [50, 50]
136 | end
137 | {% endhighlight %}
138 |
139 | As imagens carregadas a partir de agora serão redimencionadas, mas as imagens que já foram feitas não serão afetadas.
140 | Então, edite um dos lugares existentes e volte a adicionar uma imagem.
141 |
142 | ## Mostrando as thumbnails
143 |
144 | Para ver se a imagem carregada foi redimencionada abra,
145 | `app/views/places/index.html.erb`. Mude a linha:
146 |
147 | {% highlight erb %}
148 |
<%= image_tag place.picture_url(:thumb) if place.picture? %>
155 | {% endhighlight %}
156 |
157 | Dê uma olhada no seu navegador para ver se a miniatura está lá.
158 |
159 | {% include other-guides.md page="touristic-autism_image-upload" %}
160 |
--------------------------------------------------------------------------------
/_posts/2014-05-29-touristic-autism_intro.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: App para turismo de autismo amigável
4 | permalink: touristic-autism_intro
5 | ---
6 |
7 | # Rails Girls Tutorial de uma aplicação turística para Autistas
8 |
9 | *Criado por Myriam Leggieri, [@iammyr](https://twitter.com/iammyr)*
10 | *para [Rails Girls Galway](https://github.com/RailsGirlsGalway)*
11 |
12 | *Traduzido por Luiz Santos, [@santosluiz](https://github.com/santosluiz)*
13 |
14 | Este tutorial mescla, adapta e extende alguns dos guias básicos do RailsGirls **para o cenário de**: descrever, exibir e comentar locais turísticos e avaliá-los com o autismo amigável. Esta aplicação foi solicitada por [Galway Autism Partnership](http://www.galwayautismpartnership.com/) para ajudar autistas adultos em suas viagens.
15 |
16 | A extensão é composta de **novas funcionalidades**:
17 |
18 | * Tutorial de TDD
19 | * Avaliação de Recurso
20 | * Configuração de permissão para usuário autenticado (via devise)
21 |
22 | Os tutoriais básicos que foram mesclados e adaptados são: [Tutorial Ruby on Rails](http://www.railstutorial.org/book), [App RailsGirls](http://guides.railsgirls.com/app/) e o tutorial para [criação de thumbnails](http://guides.railsgirls.com/thumbnails), [autenticando usuários](http://guides.railsgirls.com/devise/), [adicionando um design](http://guides.railsgirls.com/design), [implementando com o OpenShift](http://guides.railsgirls.com/openshift/) e [adicionando comentários](http://guides.railsgirls.com/commenting).
23 |
24 |
25 | ### [0. Instalação](/install)
26 |
27 | **Certifique-se de que você possui o Rails e o Git instalados.** [**Siga o tutorial de instação**](/install), em seguinda [**Instale o Git**](http://www.git-scm.com/book/en/Getting-Started-Installing-Git). Então, configure o GitHub inserindo estes comandos no terminal:
28 |
29 | {% highlight sh %}
30 | $ git config --global user.name "Seu Nome"
31 | $ git config --global user.email seu.email@example.com
32 | {% endhighlight %}
33 |
34 |
Etapas de configuração do GitHub.
35 |
36 | Crie uma [conta grátis no GitHub](https://github.com/signup/free), caso você ainda não possua uma.
37 |
38 |
39 | ### [1. Aplicação Web Básica](touristic-autism_basic-app)
40 |
41 | ### [2. Controle de versão com Git](touristic-autism_git)
42 |
43 | ### [3. Modelagem de Recursos](touristic-autism_resource-modeling)
44 |
45 | ### [4. Avaliação de Recursos](touristic-autism_resource-rating)
46 |
47 | ### [5. Design](touristic-autism_design)
48 |
49 | ### [6. Upload de imagens e Thumbnails](touristic-autism_image-upload)
50 |
51 | **Opcional - para Garotas Rails avançadas:**
52 | ### [7. Implatanção Contínua](touristic-autism_continuous-deployment)
53 |
54 | ### [8.Teste e Integração Contínua](touristic-autism_static-pages-tdd)
55 |
56 | # Anexo
57 | ## Desfazendo Coisas
58 |
59 | O Rails possui ferramentas que facilitam bastante a recuperação de erros.
60 |
61 | Por exemplo, você pode decidir alterar o nome do controller. Uma vez que, ao gerar o controller, o Rails cria muito mais arquivos que o controller. Desfazer essa operação, significa a remoção de um conjunto de arquivos. No Rails, isso pode ser feito com o `rails destroy`. Em particular, estes dois comandos cancelam um ao outro:
62 |
63 | {% highlight sh %}
64 | $ rails generate controller FooBars baz quux
65 | $ rails destroy controller FooBars baz quux
66 | {% endhighlight %}
67 |
68 | De uma forma análoga, depois geramos um modelo assim:
69 |
70 | {% highlight sh %}
71 | $ rails generate model Foo bar:string baz:integer
72 | {% endhighlight %}
73 |
74 | Isso pode ser desfeito utilinzado:
75 |
76 | {% highlight sh %}
77 | $ rails destroy model Foo
78 | {% endhighlight %}
79 |
80 | As migrações alteram o estado do banco de dados:
81 |
82 | {% highlight sh %}
83 | $ rake db:migrate
84 | {% endhighlight %}
85 |
86 | Podemos desfazer uma única migração utilizando:
87 |
88 | {% highlight sh %}
89 | $ rake db:rollback
90 | {% endhighlight %}
91 |
92 | Para voltar ao início, basta inserir:
93 |
94 | {% highlight sh %}
95 | $ rake db:migrate VERSION=0
96 | {% endhighlight %}
97 |
98 | Como você pode imaginar, substituindo o 0 por qualquer outro número, vai fazer com que a migração ocorra para aquela versão. Onde os números de versão listam as migrações sequencialmente.
99 |
100 | Para apagar a table do banco de dados, digite:
101 |
102 | {% highlight sh %}
103 | $ rails console
104 | {% endhighlight %}
105 |
106 | Então, basta inserir o comando:
107 |
108 | {% highlight sh %}
109 | ActiveRecord::Migration.drop_table(:)
110 | {% endhighlight %}
111 |
112 | Você pode acessar o banco de dados diretamente (caso seja sqlite3, digite ".quit" para sair), utilizando:
113 |
114 | {% highlight sh %}
115 | $ rails db
116 | {% endhighlight %}
117 |
118 | {% include other-guides.md page="touristic-autism_intro" %}
119 |
--------------------------------------------------------------------------------
/_posts/2014-05-29-touristic-autism_resource-rating.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: App para turismo de autismo amigável
4 | permalink: touristic-autism_resource-rating
5 | ---
6 |
7 | # Avaliação de Recurso
8 |
9 | *Criado por Myriam Leggieri, [@iammyr](https://twitter.com/iammyr)*
10 | *para [Rails Girls Galway](https://github.com/RailsGirlsGalway)*
11 |
12 | *Traduzido por Beatriz Rezener, [@beatrizrezener](https://github.com/beatrizrezener)*
13 |
14 | Os tutoriais básicos que foram mesclados e adaptados são: [Tutorial Ruby on Rails](http://www.railstutorial.org/book), [App RailsGirls](http://guides.railsgirls.com/app/) e os tutoriais para [criação de thumbnails](http://guides.railsgirls.com/thumbnails), [autenticando usuários](http://guides.railsgirls.com/devise/), [adicionando design](http://guides.railsgirls.com/design), [implantando com o OpenShift](http://guides.railsgirls.com/openshift/) e [adicionando comentários](http://guides.railsgirls.com/commenting).
15 |
16 | O que queremos que nosso app faça? Primeiramente, nós gostaríamos de:
17 | * autenticar **usuários**
18 | * permitir usuários autenticados a criar uma nova descrição de **local** turístico
19 | * permitir usuários autenticados a **comentar** esses lugares
20 | * permitir usuários autenticados a **avaliar** até que ponto esses locais são ou não amigáveis ao autismo.
21 |
22 | Até então, nós modelamos e implementamos recursos de comentários, usuários e locais. Vamos agora habilitar a avaliação para lugares.
23 |
24 | ## Avaliando Locais
25 |
26 | ## Passo 0: Adicionar a gem letsrate
27 |
28 | Abra o seu `Gemfile` e adicione a linha:
29 |
30 | {% highlight ruby %}
31 | gem "letsrate", :git => "git://github.com/iammyr/letsrate.git"
32 | {% endhighlight %}
33 | e execute
34 | {% highlight sh %}
35 | bundle install
36 | {% endhighlight %}
37 | para instalar a gem. **Além disso, lembre-se de reiniciar o servidor Rails**.
38 |
39 | ## Passo 1: Configure o letsrate em seu app
40 |
41 | Execute o comando a seguir no terminal (estamos assumindo que já habilitamos a autenticação de usuários usando a gem `Devise`).
42 |
43 | {% highlight sh %}
44 | rails g letsrate user
45 | {% endhighlight %}
46 |
47 | ## Step 2: Aplique letsrate a seu recurso
48 |
49 | Você deve adicionar a função `letsrate_rateable`, com sua opção de dimensões, ao modelo do recurso que você deseja avaliar, por exemplo, local. Você pode ter múltiplas dimensões.
50 |
51 | Em `app/models/place.rb` adicione
52 |
53 | {% highlight ruby %}
54 | letsrate_rateable "autismo_amigavel", "geral"
55 | {% endhighlight %}
56 |
57 | Então você precisa adicionar uma chamada a `letsrate_rater` no modelo de usuário:
58 |
59 | {% highlight ruby %}
60 | letsrate_rater
61 | {% endhighlight %}
62 |
63 | ## Step 3: Render the Views
64 |
65 | Há um método auxiliar chamado `rating_for` para adicionar as estrelas de avaliação. Por padrão, `rating_for` irá mostrar a média das avaliações e aceitará uma nova avaliação de um usuário autenticado.
66 |
67 | Abra `app/views/places/show.html.erb` e adicione
68 |
69 | {% highlight erb %}
70 |
81 |
82 | {% endhighlight %}
83 |
84 | Você pode usar o método auxiliar `rating_for_user` para mostrar a avaliação de estrelas para o usuário.
85 |
86 |
87 | É isso aí! ^__^
88 | Experimente reiniciar o servidor, dê um add, commit e push no GitHub. Se tudo estiver funcionando, você também pode implantar ;)
89 |
90 | {% include other-guides.md page="touristic-autism_resource-rating" %}
91 |
--------------------------------------------------------------------------------
/_posts/2015-08-16-sinatra-app-tutorial-in-bulgarian.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Rails Girls приложение със Sinatra
4 | permalink: sinatra-app-bg
5 | ---
6 |
7 | # Създайте сайт за гласуване със Sinatra
8 |
9 | *Базирано на [това ръководство](http://guides.railsgirls.com/sinatra-app/) от Piotr Szotkowski, [@chastell](https://twitter.com/chastell)*
10 |
11 | We will create a little voting app from scratch using a web development framework for Ruby called Sinatra, which is much like Ruby on Rails. Just another tool to get the job done really, and a fun one too!
12 |
13 | Imagine your group of friends is figuring out what to order for your weekly movie watching marathon. With the many fast food options out there, this can become quite a discussion. This is where our app comes into play!
14 |
15 | __INSTRUTOR(A)__: Explain shortly what [Sinatra](http://www.sinatrarb.com) is.
16 |
17 | ## Install Sinatra
18 |
19 | Remember how we needed to install Ruby on Rails? Similarly we need to install Sinatra:
20 |
21 | `gem install sinatra`
22 |
23 | ### Create your first Sinatra app
24 |
25 | Create a `suffragist.rb` file with the following contents:
26 |
27 | {% highlight ruby %}
28 | require 'sinatra'
29 |
30 | get '/' do
31 | 'Hello, voter!'
32 | end
33 | {% endhighlight %}
34 |
35 |
36 | You can actually call your Ruby file whatever you'd like. `vote.rb` for instance would totally work as well, when used consistently. But [suffragist](http://www.vocabulary.com/dictionary/suffragist) actually references to a super important event in the women's rights movement, so let's just go with that for now!
37 |
38 |
39 | ### Run your app
40 |
41 | Go to the directory where you put your app and run `ruby suffragist.rb`.
42 | Now you can visit [localhost:4567](http://localhost:4567). You should
43 | see a ‘Hello, voter!’ page, which means that the generation of your new
44 | app worked correctly. Hit Ctrl+C in the terminal to quit the server.
45 |
46 | __INSTRUTOR(A)__: Explain POST and GET methods, and how to communicate with the browser.
47 |
48 |
49 |
50 | ### Add the index view
51 |
52 | To keep everything in order let’s make
53 | a directory for our views (and name it `views`).
54 |
55 | Put this code into an `index.erb` file in the `views` directory:
56 |
57 | {% highlight erb %}
58 |
59 |
60 |
61 |
62 | Suffragist
63 |
64 |
65 |
66 |
What's for dinner?
67 |
80 |
81 |
82 | {% endhighlight %}
83 |
84 | And into `suffragist.rb`:
85 |
86 | {% highlight ruby %}
87 | Choices = {
88 | 'HAM' => 'Hamburger',
89 | 'PIZ' => 'Pizza',
90 | 'CUR' => 'Curry',
91 | 'NOO' => 'Noodles',
92 | }
93 | {% endhighlight %}
94 |
95 | Change the `get` action:
96 |
97 | {% highlight ruby %}
98 | get '/' do
99 | erb :index
100 | end
101 | {% endhighlight %}
102 |
103 | Run `ruby suffragist.rb`, check your
104 | results and quit the server with Ctrl+C.
105 |
106 | __INSTRUTOR(A)__: Talk a little about HTML and erb. Explain
107 | templates. Explain what global constants are.
108 |
109 |
110 |
111 | ### Templates
112 |
113 | Adjust the `index.erb` file in the `views`
114 | directory and add the `
163 |
164 |
165 | {% endhighlight %}
166 |
167 | __INSTRUTOR(A)__: Explain how POST works. How to catch what
168 | was sent in the form? Where do `params` come from?
169 |
170 |
171 |
172 | ### Factor out a common layout
173 |
174 | Create a `layout.erb` file in the `views`
175 | directory. Put the following in there:
176 |
177 | {% highlight erb %}
178 |
179 |
180 |
181 |
182 | Suffragist
183 |
184 |
185 |
186 |
<%= @title %>
187 | <%= yield %>
188 |
189 |
190 | {% endhighlight %}
191 |
192 | Remove the above part from the other two templates
193 | (`index.erb` and `cast.erb` in the `views` directory).
194 |
195 | __INSTRUTOR(A)__: Talk about the structure of HTML documents and how factoring
196 | out common code work in general. Explain what `yield` does.
197 |
198 |
199 |
200 | ### Add the results route and the results view
201 |
202 | Paste the following code into `suffragist.rb`:
203 |
204 | {% highlight ruby %}
205 | get '/results' do
206 | @votes = { 'waw' => 7, 'krk' => 5 }
207 | erb :results
208 | end
209 | {% endhighlight %}
210 |
211 | Create a new file in the `views` directory, called `results.erb`.
212 |
213 | {% highlight erb %}
214 |
7 |
8 |
15 |