forked from cherimarie/gdi-rails
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclass1.html
437 lines (374 loc) · 15.7 KB
/
class1.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
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
<!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">
<!-- <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">
<div class="slides">
<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>
<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>Welcome!</h3>
<div class = "left-align">
<p class = "blue">Tell us about yourself.</p>
<ul>
<li>Who are you?</li>
<li>What do you hope to get out of the class?</li>
<li>Who is your favorite Dinosaur?</li>
</ul>
</div>
</section>
<section>
<h3>What is Rails?</h3>
<div class = "left-align">
<ul>
<li>An open-source, full stack web application framework</li>
<li>Written in the <a href="https://www.ruby-lang.org/en/">Ruby language</a></li>
<li>First Released in 2004</li>
<li>Created by David Heinemeier Hansson (DHH)</li>
<li>Makes many kinds of apps much simpler to write</li>
<li>Has a thriving community, tons of resources</li>
</ul>
</div>
</section>
<section>
<h3>What we will cover today</h3>
<ul>
<li>Familiarize with Cloud9 IDE</li>
<li>Build your first Rails app!</li>
</ul>
</section>
<section>
<h3>Log In to Cloud9 IDE</h3>
<p>
https://c9.io/web/login
</p>
<img src="images/cloud9_login.png" alt="login to cloud9" />
</section>
<section>
<h3>Connect Cloud9 to Github</h3>
<p>
If you have a Github account, connect
</p>
<img src="images/cloud9_github_connect.png" alt="connect cloud9 to github" />
</section>
<section>
<h3>Create a New Workspace</h3>
<img src="images/create_new_workspace.png" alt="create workspace" />
</section>
<section>
<h3>Choose a Project Template</h3>
<p>
Pick "RailsTutorial.org"<br>
</p>
<img src="images/choose_workspace_template.png" alt="choose template" />
</section>
<section>
<h3>Hello Cloud9!</h3>
<img src="images/hello_cloud9.png" alt="cloud9 IDE homepage" />
</section>
<section>
<h3>Check Your Ruby and Rails Install</h3>
<p>Run these commands in the terminal.
<pre><code class="command-line">
$ ruby -v
> /usr/local/rvm/rubies/ruby-2.2.1/bin/ruby
$ rails -v
> Rails 4.2.1
</code></pre>
</section>
<section>
<h3>Make a Rails app!</h3>
<p>Navigate to a project directory in your terminal, then run:</p>
<pre><code class="command-line">
$ rails new test_app
$ cd test_app
$ rails server --binding $IP --port $PORT
</code></pre>
<p>Visit in the browser to view your app!</p>
<pre>
<code>
http://<workspacename>-<username>.c9.io
https://rails-tutorial-tester-joshuaburke.c9.io/
</code>
</pre>
</section>
<section>
<h3>Check it Out!</h3>
<img src="images/welcome_aboard.png" alt="welcome aboard you're riding rails!" />
</section>
<section>
<h3>Make a Rails App</h3>
<h4>What just happened?</h4>
<ol>
<li>We told Rails to build a new app called <strong>test_app</strong></li>
<li>Then navigated into it in the command line</li>
<li>Started a server so we could view it live</li>
<li>Sweet, awesome job!</li>
</ol>
</section>
<section>
<h3>Next Step:</h3>
<h4>Make App...</h4>
<img src="images/interesting.jpeg" alt="A cat pondering some grass" />
</section>
<section>
<h3>Step 1</h3>
<h4>Add a Student Model</h4>
<p>In the terminal, generate the model</p>
<pre>
<code class="command-line">
$ rails generate model student bio:string full_name:string
> invoke active_record
create db/migrate/20150623144213_create_students.rb
create app/models/student.rb
invoke test_unit
create test/models/student_test.rb
create test/fixtures/students.yml
</code>
</pre>
</section>
<section>
<h3>Then Migrate the Database</h3>
<pre>
<code class="command-line">
$ rake db:migrate
> == 20150623144213 CreateStudents: migrating =============
-- create_table(:students)
-> 0.0015s
== 20150623144213 CreateStudents: migrated (0.0016s) ====
</code>
</pre>
</section>
<section>
<h3>Migration Explanation</h3>
<p class="smalltext">Migrations are Ruby code that translate to SQL code. They’re how we setup, configure, and tune our database. </p>
<p class="smalltext">Some migrations are generated for you when you, for example, generate a new model. You will also create many of your own independently, to make changes to your database schema (adding or removing columns, changing names of columns, etc). </p>
<p class="smalltext">Find them in db/migrate/</p>
<p class="smalltext">Your app will not work as expected if you have pending migrations. They must be ‘run’ to ensure that your database is properly setup. Run them each as they’re created; run them all when resetting your database or installing the app on a new computer.
rake db:migrate
</p>
</section>
<section>
<h3>Step 2</h3>
<h4>Add a Student Record to the Database</h4>
<p>In the terminal, enter the rails console:</p>
<pre><code class="command-line">
$ rails console
</code></pre>
<p>Then, create a Student object:</p>
<pre><code class="command-line">
> Student.create(full_name: "Hermione Granger",
bio: "Dedicated student")
</code></pre>
<p>Note: close the console by entering the word 'quit'.</p>
</section>
<section>
<h3>Rails Console</h3>
<div class="smalltext">
<p>The Rails console is like IRB with your Rails app loaded in. Rad!</p>
<p>CRUD Operations:</p></div>
<pre><code class="command-line">
#Create
> Student.create
> Student.create(full_name: "Bert", bio: "Bestie of Ernie")
#Read
> Student.all
> Student.first
> student = Student.find(1)
#Update
> student.update_attributes(full_name: "Bert Bernard")
> student.update(bio: "Scrabble champ of Sesame Street")
#Destroy
> student.destroy
</code></pre>
</section>
<section>
<h3>Step 3</h3>
<h4>Create a Students Controller</h4>
<p class="smalltext">
In the terminal
</p>
<pre><code class="command-line">
$ rails generate controller Students
> create app/controllers/students_controller.rb
invoke erb
create app/views/students
invoke test_unit
create test/controllers/students_controller_test.rb
invoke helper
create app/helpers/students_helper.rb
invoke test_unit
invoke assets
invoke coffee
create app/assets/javascripts/students.coffee
invoke scss
create app/assets/stylesheets/students.scss
</code></pre>
<p class="smalltext">Generating this controller also creates an app/views/students directory. </p>
</section>
<section>
<h3>Step 3</h3>
<h4>Create a Students Controller</h4>
<p>In your text editor, open the generated app/controllers/students_controller.rb, and add an ‘index’ method to the class definition:</p>
<pre><code class="ruby">
def index
@students = Student.all
end </code></pre>
</section>
<section>
<h3>Model View Controller Architecture</h3>
<ul>
<li>Models hold logic about objects & interact with db.</li>
<li>Views are presentation.</li>
<li>Controllers coordinate the two. </li>
</ul>
<img src="images/mvc.gif" alt="Model View Controller Diagram" />
</section>
<section>
<h3>MVC Goal</h3>
<p>By isolating logic and presentation, you remove dependencies. </p>
<p>Views don’t need to know how their data is generated, and Models don’t need to know how their data is used. Changes to one won’t affect the other.</p>
</section>
<section>
<h3>MVC Explanation</h3>
<p>An app this basic doesn’t really have any logic to put in the model. The controller can handle basic database actions like finding Student.all. </p>
<p>Every view that your app has must have an associated controller method. This method will usually pass data to the view, but not necessarily. </p>
</section>
<section>
<h3>Step 4</h3>
<h4>Create views for student controller</h4>
<p>In the app/views/students directory, create a file called index.html.erb. Insert into it:</p>
<pre><code class="ruby">
<h1>Student List</h1>
<% @students.each do |student| %>
<%= student.full_name %>
<%= student.bio %>
<% end %>
</code></pre>
</section>
<section>
<h3>ERB Explanation</h3>
<p class="smalltext">ERB is Embedded RuBy. It’s a templating system that allows you to embed Ruby code into a text document, like HTML. It’s included in the standard Ruby library. </p>
<p class="smalltext green">Syntax:</p>
<p class="smalltext">Ruby is processed, but does not display anything:</p>
<pre><code class="ruby">
<% code %>
</code></pre>
<p class="smalltext">Ruby is processed, and outputs result to the page: </p>
<pre><code class="ruby">
<%= code %>
</code></pre>
</section>
<section>
<h3>Step 5</h3>
<h4>Add routes for Student views</h4>
<p>In your text editor, open config/routes.rb, and create resource routes for our student controller:</p>
<pre><code class="ruby">
resources :students
</code></pre>
</section>
<section>
<h3>Step 6</h3>
<h4>Change the root route</h4>
<p>In config/routes.rb, set the root route to our students#index controller:</p>
<pre><code class="ruby">
root 'students#index'
</code></pre>
</section>
<section>
<h3>Routing Explanation</h3>
<p class="smalltext">Routing for your app is controlled in the config/routes.rb file. The comments in this file are extremely helpful. </p>
<p class="smalltext">If a view doesn’t have a route, there’s no way for the browser to request and receive it. </p>
<p class="smalltext">Resource routes are a shortcut. They provide routes for all CRUD actions associated with a model, so you don’t have to spell them each out.</p>
</section>
<section>
<h3>What did we just do?</h3>
<ul>
<li>Made a new Rails application</li>
<li>Added a Student model, with bio & full_name attributes</li>
<li>Added a student record to the database, using Rails Console</li>
<li>Created a Students controller</li>
<li>Created a view for the Student controller's index action</li>
<li>Added routes for Student views</li>
<li>Changed the root to point to a Student view </li>
</ul>
</section>
<section>
<h3>Wow.</h3>
<img src="images/railsshibe.jpg" alt="Rails Shibe"/>
</section>
<section>
<h3>Homework</h3>
<p>Practice:</p>
<p><a href="http://tutorials.jumpstartlab.com/projects/blogger.html">Blogger tutorial from Jumpstart Labs</a>, Section I0 only!</p>
</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>