forked from cherimarie/gdi-rails
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclass4.html
382 lines (333 loc) · 14.6 KB
/
class4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Intro to Rails</title>
<meta name="description" content="This is an Intro to Rails course, intended for eventual inclusion in the Girl Develop It Core Curriculum. All material by Cheri Allen, inspired by Railsbridge.
The course is meant to be taught in four two-hour workshops. Each of the slides and practice files are customizable according to the needs of a given class or audience.">
<meta name="author" content="Girl Develop It">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="reveal.js/css/reveal.css">
<link rel="stylesheet" href="reveal.js/css/theme/gdicool.css" id="theme">
<link rel="stylesheet" href="overwrite.css">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="reveal.js/lib/css/light.css">
<!-- dark editor<link rel="stylesheet" href="reveal.js/lib/css/dark.css"> -->
<!-- If use the PDF print sheet so students can print slides-->
<link rel="stylesheet" href="reveal.js/css/print/pdf.css" type="text/css" media="print">
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</head>
<body>
<div class="reveal">
<!-- All of this class' project activity can be seen in the commits from June 24, 2014 here: https://github.com/cherimarie/worstsong/commits/master -->
<div class="slides">
<!-- Opening slide -->
<section>
<img src = "images/gdi_logo_badge.png" alt="Girl Develop It Logo">
<h3>Intro to Rails</h3>
<p>slides: http://gdibtv.github.io/gdi-rails</p>
</section>
<!-- Welcome-->
<section>
<h3>Welcome!</h3>
<div class = "left-align">
<p>Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.</p>
<p class ="green">Some "rules"</p>
<ul>
<li>We are here for you!</li>
<li>Every question is important</li>
<li>Help each other</li>
<li>Have fun</li>
</ul>
</div>
</section>
<section>
<h3>What we will cover today</h3>
<ul>
<li>More Rails Forms</li>
<li>Rubygems</li>
<li>Seed Data (time permitting)</li>
</ul>
</section>
<section>
<h3>Rails Forms</h3>
<h5>Forms are great!</h5>
<p>
Rails provides a variety of ways to make forms
</p>
<pre>
<code>
<%= form_tag do %>
Form contents
<% end %>
</code>
</pre>
<pre>
<code>
<form accept-charset="UTF-8" action="/" method="post">
<input name="utf8" type="hidden" value="&#x2713;" />
<input name="authenticity_token" type="hidden" value="J7CBxfHalt49OSHp27hblqK20c9PgwJ108nDHX/8Cts=" />
Form contents
</form>
</code>
</pre>
</section>
<section>
<h3>Rails Forms</h3>
<h5>Simple Form Helpers</h5>
<pre>
<code class="ruby">
<%= check_box_tag(:like_song) %>
<%= label_tag(:like_song, "I like this song") %>
</code>
</pre>
</section>
<section>
<h3>Rails Forms</h3>
<h5>Simple Form Output</h5>
<pre>
<code>
<input id="like_song" name="like_song" type="checkbox" value="1" />
<label for="like_song">I like this song</label>
</code>
</pre>
</section>
<section>
<h3>Rails Forms</h3>
<h5>Other Helpers</h5>
<pre>
<code>
<%= text_area_tag(:message, "Hi, nice site", size: "24x6") %>
<%= password_field_tag(:password) %>
<%= hidden_field_tag(:parent_id, "5") %>
<%= search_field(:user, :name) %>
<%= telephone_field(:user, :phone) %>
<%= date_field(:user, :born_on) %>
<%= datetime_field(:user, :meeting_time) %>
<%= datetime_local_field(:user, :graduation_day) %>
<%= month_field(:user, :birthday_month) %>
<%= week_field(:user, :birthday_week) %>
<%= url_field(:user, :homepage) %>
<%= email_field(:user, :address) %>
<%= color_field(:user, :favorite_color) %>
<%= time_field(:task, :started_at) %>
<%= number_field(:product, :price, in: 1.0..20.0, step: 0.5) %>
<%= range_field(:product, :discount, in: 1..100) %>
</code>
</pre>
</section>
<section>
<h3>Rails Forms</h3>
<h5>Model Forms</h5>
<pre>
<code class="ruby">
# Form Helper
<%= text_field(:artist, :full_name) %>
# Form Output
<input id="artist_full_name" name="artist[full_name]" type="text" value="ACDC"/>
</code>
</pre>
</section>
<section>
<h3>Rails Forms</h3>
<h5>Nested Resource Forms</h5>
<pre>
<code>
<%= form_for [ @artist, @song ] do |f| %>
<%= f.label :title %>
<%= f.text_field :title %>
<%= f.check_box :like_song %>
<%= f.submit 'Submit' %>
<% end %>
</code>
</pre>
</section>
<section>
<h3>Rails Forms</h3>
<h5>More About Forms</h5>
<img src="images/checkbox_form_helper.png" alt="checkbox form helper output" />
</section>
<section>
<h3>Rails Forms</h3>
<h5>Nested Model Forms Output</h5>
<pre>
<code>
<h2>Suggest a New Song</h2>
<form class="new_song" id="new_song" action="/artists/1/songs" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="&#x2713;" />
<input type="hidden" name="authenticity_token" value="K/DYug/8kXlH6G8L9Zym9KMsFnZ6hdINC66EfCSlxKLnJhTikezTC6QelJHqjynAHkl4lEYRAVUutXD2fMBycQ==" />
<label for="song_title">
Title
</label>
<input type="text" name="song[title]" id="song_title" />
<input type="submit" name="commit" value="Submit" />
</form>
</code>
</pre>
</section>
<section>
<h3>Gems</h3>
<ol>
<li><strong>Gems</strong> are ruby "libraries"</li>
<li>They provide functionality to your app with little effort</li>
<li>Gems are specified in your app's <strong>Gemfile</strong></li>
<li>Running 'bundle install' ensures you have all gems available locally, and updates your Gemfile.lock file</li>
<li>Gemfile groups correspond to Rails environments: test, development, production</li>
</ol>
</section>
<!-- Instructor and students work together through installing and using Devise, including discussion of Gems/Gemfile, Bundler, reading documentation, appraising quality of a gem, link_to in ERB, and before filters. Approx 60 minutes.-->
<section>
<h3>Devise</h3>
<p><a href="https://github.com/plataformatec/devise">Devise documentation</a></p>
<p>We are going to follow the documentation's instructions, as it is well maintained and accurate.</p>
</section>
<section>
<h3>Devise</h3>
<p>As of this writing, steps for Devise setup are:</p>
<ol>
<li>Add Devise to Gemfile</li>
<li>Bundle Install</li>
<li>Run Devise generator</li>
<li>Do the things suggested in setup message</li>
<li>Generate devise User model</li>
<li>Run 'rake db:migrate'</li>
<li>Create sign up/in/out links in application.html.erb</li>
<li>Add before filter for protected actions in a controller</li>
</ol>
</section>
<section>
<h3>Heroku</h3>
<p>Tool check!</p>
<pre><code class="command-line">
$ heroku --help
$ git --help
</code></pre>
<p>If you don't get help menus back, get a TA to help you install Heroku and Git correctly.</p>
</section>
<!-- BREAK and time for anyone lacking tools to catch up -->
<section>
<h3>Heroku</h3>
<p>Let's follow <a href="http://curriculum.railsbridge.org/intro-to-rails/deploying_to_heroku">Railsbridge's instructions</a>.</p>
<p>There is one correction- step 4 on the next slide.</p>
</section>
<!-- Instructor leads students in the steps necessary to deploy an app to Heroku, including discussion on different databases, groups in Gemfile, database configuration, the Heroku command line tools. Approx 25 minutes. -->
<section>
<h3>Heroku</h3>
<p>As of this writing, steps to deploy to Heroku are:</p>
<ol>
<li>Create Heroku app in command line</li>
<li>Edit the Gemfile to add Postgres to appropriate groups</li>
<li>Apply the Gemfile changes</li>
<li>Change the production group in config/database.yml to:
<pre><code class="ruby">
production:
adapter: postgresql
database: db/production
</code></pre></li>
<li>Add and commit changes with Git</li>
<li>Push to heroku</li>
<li>Run database migrations and seed data in terminal</li>
<li>Visit application, be super proud!</li>
</ol>
</section>
<!-- Seeds. Approx 15 minutes. -->
<section>
<h3>Seeds</h3>
<p>In db/seeds.rb, you can write code that will populate the database. Syntax is exactly like the Rails Console, so it should look familiar to you.</p>
<p>Whenever the app is setup on a new machine (your collaborator's, Heroku's servers, etc), 'rake db:seed' can be run, and the database will be populated with the data from seed file. Sweet!</p>
</section>
<section>
<h3>Seeds</h3>
<p>In my db/seeds.rb file, I added this: </p>
<pre><code class="ruby">
Artist.create(name: "Shonen Knife", hometown: "Osaka")
Artist.create(name: "Shakira", hometown: "Barranquilla")
Artist.create(name: "Beyonce", hometown: "Houston")
Artist.create(name: "Teagan and Sara", hometown: "Calgary")
</code></pre>
</section>
<section>
<h3>Seeds</h3>
<p>After saving db/seeds.rb, in the terminal run:</p>
<pre><code class="command-line">
$ rake db:seed
</code></pre>
<p>After pushing your changes to Heroku, in the terminal run:</p>
<pre><code class="command-line">
$ heroku run rake db:seed
</code></pre>
</section>
<!-- Questions/resources for further learning. Approx 10 mins. -->
<section>
<h3>Questions</h3>
<img src="questioncat.jpg" alt="Question Cat"/>
</section>
<section>
<h3>Further Resources</h3>
<table style="font-size: 24px; line-height: 1.5em;">
<tr>
<td><a href="http://www.ruby-doc.org/">Ruby-doc.org</a></td>
<td>Official Ruby documentation</td>
</tr>
<tr>
<td><a href="http://guides.rubyonrails.org/">Ruby on Rails Guides</a></td>
<td>Excellent documentation for Rails</td>
</tr>
<tr>
<td><a href="http://railscasts.com/">Rails Casts</a></td>
<td>Screencasts on how to do almost everything with Rails</td>
</tr>
<tr>
<td><a href="http://ruby.railstutorial.org/">The Rails Tutorial</a></td>
<td>Great free (HTML version) book with step-by-step instructions on building Rails apps</td>
</tr>
<tr>
<td><a href="http://rubygems.org/">RubyGems.org</a></td>
<td>Listing of all available Gems</td>
</tr>
<tr>
<td><a href="http://ruby.learncodethehardway.org/">Ruby the Hard Way</a></td>
<td>Fun, free (HTML version) book with great information about programming</td>
</tr>
<tr>
<td><a href="http://girldevelopit.com/">Girl Develop It</a></td>
<td>Local workshops, events, and coding sessions with awesome people <3</td>
</tr>
</table>
</section>
</div>
<footer>
<div class="copyright">
Intro to Rails
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div>
</footer>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal.js/plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>