forked from RailsGirlsAuckland/Rails-Girls-Training
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
674 lines (643 loc) · 46.4 KB
/
index.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
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Build your first app</title>
<meta name="description" content="Get excited and build things">
<meta name="author" content="Rails Girls Auckland">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="assets/css/reveal.min.css">
<link rel="stylesheet" href="assets/css/theme/bootstrap.css" id="theme">
<link rel="stylesheet" href="assets/css/custom.css">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="assets/css/zenburn.css">
<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write( '<link rel="stylesheet" href="assets/css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Introduction to Rails Girls Apps-->
<div class="slides">
<section class="title" data-background="images/red-hearts.png">
<h1>Build your first app</h1>
<h3>Get excited and make things</h3>
<h5>
<strong>Created by <a href="http://twitter.com/natdudley">Nat Dudley</a> for <a href="http://railsgirls.com">Rails Girls Auckland</a> / <a href="http://twitter.com/railsgirlsakl">@railsgirlsakl</a></strong>
</h5>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<h3>Directions</h3>
<p>Use the <strong>right arrow</strong> to go to the next step.</p>
<p>In some sections, you'll have the option of reading more information. Use the <strong>down arrow</strong> to read this, and when you're finished, use the right arrow to move on to the next step.</p>
<p>If you get lost, <strong>hit the escape key (ESC)</strong> to see an overview of the course, <br>or ask a coach for help.</p>
</section>
<section class="title" data-background="images/red-hearts.png">
<h2>Get Ready</h2>
<p> To build apps and other things with Ruby on Rails, you need to set up <strong>2 accounts</strong>.
</p>
<p>We need somewhere for you to write code and run a server, and we need somewhere for you to store and share your code so you can work with other people.
</p>
<aside class="notes">
Notes placeholder
</aside>
</section>
<!-- Setup GitHub Account -->
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<h2>GitHub</h2>
<p>First, let's set you up with GitHub account.</p>
<p><strong>Do you have one already?</strong></p>
<p><a href="#" class="navigate-right">Yup! I've got one</a></p>
<p><a href="#" class="navigate-down">Nope!</a>
</p>
<a href="#" class="image navigate-down">
<img src="images/femalecodertocat.png" alt="GitHub">
</a>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<h2>GitHub</h2>
<p> GitHub is a way to store and share your code.</p>
<p> With Github, you can keep track of all the changes you make and collaborate with other people.</p>
<p><strong><a href="http://github.com" target="_blank">Go to Github.com</a></strong></p>
<p>Tell GitHub your email address, pick a username and password, and sign up.</p>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<h2>GitHub: Done!</h2>
<p>If you want to know more about Git and GitHub, <strong><a href="#" class="navigate-down">keep reading.</a></strong></p>
<p><a href="#" class="navigate-right">Otherwise, <strong>move on</strong> to the next step.</a></p>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<p>GitHub is a service that helps you to store and track your code. It runs using a system called 'Git'.</p>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<p>Git manages your project, including all the files you make, as they change over time.</p>
<p>Git stores this information in something called a 'repository'.</p>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<p>A repository stores a copy of your project. It also records every change you make to your project. These changes are called 'commits'.</p>
<p>This means you can look at your commit history, to see what changes you've made to your project, and when you made them.</p>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<p>When you first create your project, you've got the only copy of it. This is bad, because if something happened to your computer, you might lose everything you've made.</p>
<p>Committing your project using Github (via Git) means you've got a backup copy just in case anything goes wrong.</p>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<p>The other great thing about this is that you can always go back to an old version of your project, so if you make a mistake, or change your mind about something you've done, you can easily fix it.</p>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<p>GitHub also allows you to collaborate on projects. If you and your friend wanted to build something together, you could work on your own computers, committing changes to GitHub as you made them.</p>
<p>GitHub lets you know if you've both tried to change the same thing, so you can pick which copy you want to use.</p>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<p>Once we've done some work on our project, we'll commit it to GitHub. However, if you want to try out some of the commands you'll be using, <a href="https://try.github.io" target="_blank">check out this tutorial.</a>
<p><strong><a href="#" class="navigate-right">When you're ready, move to the next step.</a></strong></p>
</section>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<h2>Nitrous.io</h2>
<p>Every craftsman needs a certain set of tools in his workshop.</p>
<p>Normally, developers install software on their computer and use Terminal and a text editor to write code. This is perfectly OK, but it takes a bit more time to set up.</p>
<p>We're not making you obtain the necessary tools and build your own workshop just for this demonstration. Instead, we'll let you use a fully working workshop, with all the necessary tools already available. This means we can start making magic straight away.</p>
<p>We're going to use a shortcut by coding in Nitrous.io.</p>
<p>Set up your <a href="http://railsgirls-my.github.io/nitrous/" target="_blank">Nitrous.io account by following this guide</a>.</p>
<p>When you're ready, log in to your account and then come back here.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<h2>Finishing the setup</h2>
<p>Open <a href="https://www.nitrous.io/app#/n2o/bonus">this page</a> and click "connect GitHub". You'll be asked to authorise Nitrous.io to access your GitHub account.</p>
</section>
<section class="title" data-background="images/red-hearts.png">
<h2>In HTML We Trust</h2>
<p>Before we dive into creating a real application, let's play with the main building block of the web first – <strong>HTML</strong>.</p>
<p>Let your coach guide you through the very basics of HTML and CSS.</p>
<p>Write your first HTML document. Learn what's the purpose of HTML and what is CSS used for.</p>
<p>When you're ready, get back here to start with your app.</p>
</section>
<!-- Setup Nitrous Account. You'll need to replace this if you're doing a traditional install -->
<!-- Our attendees have these pre setup
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<h2>Nitrous.io</h2>
<p>Next, we need a Nitrous.io account.</p>
<p>Normally, developers install software on their computer and use Terminal and a text editor to write code. This is perfectly OK, but it takes a bit more time to set up.</p>
<p>We're going to use a shortcut by coding in Nitrous.io.</p>
<p>This means we can start making magic straight away.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p><strong><a href="http://nitrous.io" target="_blank">Go to Nitrous.io</a></strong>.</p>
<p>Tell Nitrous your email address. Pick a username and choose a password.</p>
<p>Click the signup button.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>You'll receive a confirmation email. Click the confirmation link.</p>
<p>You will be taken back to Nitrous.io. Click <strong>'Open Dashboard'</strong></p>
</section>
-->
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>In Nitrous, open the dashboard, and start a new box</p>
<p>We're coding using Ruby on Rails, so <strong>pick the Ruby/Rails template.</strong></p>
<ul>
<li>Choose a name (like rgakl-rails).</li>
<li>Tell Nitrous where you are.</li>
</ul>
<p>Leave the GitHub repo box blank.</p>
<p>You're now ready to start making your app!</p>
</section>
<!--
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Click <strong>'Connect GitHub'</strong>.</p>
<p>You'll be asked to authorise Nitrous.io to access your GitHub account. <br>
<strong>Click 'Authorize Application'.</strong></p>
<p>Then, in Nitrous.io, click <strong>'Next'</strong>.
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>We don't need a special app (we'll use your browser), but later,<br> you might like use the Nitrous app with a text editor instead. <br>Or, you might like to <a href="http://guides.railsgirls.com/install/" target="_blank">set up a full installation</a>.</p>
<p>Click the <strong>'Take me to my box'</strong> button.</p>
<p>You're now ready to start making your app!</p>
</section>
-->
<!-- Create project files and app directories -->
<section class="title" data-background="images/red-hearts.png">
<h2>Setting up</h2>
<p>First, we're going to make somewhere to store our app.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>In Nitrous, the boxes at the bottom of the page are your Terminal.</p>
<p>Your Terminal is used to write commands that control the server, <br>the files you're creating and your database.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>We need to create some folders to store our app in.</p>
<p>In the terminal type:</p>
<pre><code>mkdir projects</code></pre>
<p>The 'mkdir' command means 'make directory'. So, we've made a directory called 'projects'.
</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Now, we need to access the directory we made.</p>
<p>In the terminal type:</p>
<pre><code>cd projects</code></pre>
<p>The 'cd' command means 'change directory'. We're now in the 'projects' directory.</p>
<p>The 'projects' directory is usually used to store all your different coding projects.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>We're going to make an app called Rails Girls.</p>
<p>In the terminal type:</p>
<pre><code>rails new railsgirls -m http://railsgirls.com/simple_scaffold.rb</code></pre>
<p>The '<code>rails new</code>' command creates a new rails app.</p>
<p>The <code>-m http://railsgirls.com/simple_scaffold.rb</code> part tells Rails to download a special template from railsgirls.com which makes the files a bit simpler and easier for beginners to understand.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Let's change directory into our new app.</p>
<p>In the terminal type:</p>
<pre><code>cd railsgirls</code></pre>
</section>
<!-- Test Server -->
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>To check we've set up our app correctly, let's start the server.
</p>
<p>In the terminal, type:</p>
<pre><code>rails server</code></pre>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Our server will now start up. You'll notice that the terminal now looks a bit different. Instead of our directory name, it just shows this:
</p>
<pre><code>◽ </code></pre>
<p>While the server is running in this page of the terminal, we can't type any other commands in. We can open a second tab in the terminal by clicking the <strong>'+'</strong> button.
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Let's check to make sure our server is running properly.</p>
<p>In the menu bar at the top of the Nitrous window, click <strong>'preview'</strong>, and choose <strong>'Port 3000'</strong>.</p>
<p><img width="600" src="images/serverpreview.png"></p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>A new tab will open in your browser.
</p>
<p>This should say "Welcome Aboard".
</p>
<p><strong>Don't have this? Get a coach to help check it out.</strong>
</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Great. We now have a working server. Let's shut it down (for now) and start work.</p>
<p>Go back to the Nitrous.io tab.</p>
<p>Click the terminal, and hit <strong>Ctrl+C</strong>.</p>
<p>This will stop the server.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<section class="title" data-background="images/red-hearts.png">
<h2>How do web apps work?</h2>
<p>When we create websites, we store them on a server. When you go to view a website, <br>a bunch of different things happen to show you the page.</p>
<p><strong>Know how websites work already?</strong></p>
<p><a href="#" class="navigate-right">Yes</a></p>
<p><a href="#" class="navigate-down">No</a></p>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<ol>
<li>You type the address in (or click a link) in your browser (Chrome, Safari, Firefox, Internet Explorer).</li>
<li>Your browser asks a server for the information that makes up that page.</li>
<li>The server sends the information back to your browser.</li>
<li>Your browser shows you the page.</li>
</ol>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<p>When we're building our website, we're making the stuff on the server (step 3). <br>Our web app will also need to store data, so it will have a database.</p>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<p>Our web app needs to:</p>
<ul>
<li>Listen for requests from browsers.</li>
<li>Store and retrieve any information the browser sends to it.</li>
<li>Send back the information required. This might include retrieving things stored in our database.</li>
</ul>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<p>The information we send back to the browser has to be in a format the browser can read and display. This is normally HTML, as well as some CSS (to make our page look pretty, and Javascript (to make things like forms work).</p>
<p><a href="#" class="navigate-right">Let's get on with making our app.</a></p>
</section>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Let's take a look at what's in the app we just set up.
</p>
<p>In the terminal, type:</p>
<pre><code>ls</code></pre>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>You'll see a list of all the different things in your new app.</p>
<pre><code>app bin config config.ru db Gemfile Gemfile.lock lib localhost:3000 log public Rakefile README.md README.rdoc test tmp vendor </code></pre>
</section>
<section class="title" data-background="images/red-hearts.png">
<h2>Let's get building.</h2>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>One of the great things about Rails is that it comes with some built-in things that make it super easy to get going. One of these is scaffolds. Scaffolds let you easily add new concepts (like users, posts and comments) in one command.</p>
<p>The scaffold command creates all the necessary code files you need to work with that concept. This includes database tables to store information in, and instructions for how it needs to interact with other parts of your app.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>In the terminal, type:<p>
<pre><code>rails generate scaffold idea name:string description:text picture:string</code></pre>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>You've now created a concept (model) called 'idea' that includes:</p>
<ul>
<li>A name.</li>
<li>A description.</li>
<li>A picture.</li>
</ul>
<p>The 'string' and 'text' parts tell the app what type of data it will be.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>There are lots of different types of data you might include, such as:</p>
<ul>
<li><code>:binary</code> - stores data such as images, audio files or movies.</li>
<li><code>:boolean</code> - stores true or false values (such as whether a particular user is an administrator of an application or not).</li>
<li><code>:date</code> - stores only a date (year, month, day).</li>
<li><code>:datetime</code> - stores both a date and a time.</li>
<li><code>:integer</code> - stores whole numbers.</li>
</ul>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>When we add new concepts like these to our app, we need to update our database. This is called a migration.</p>
<p>In the terminal, type:</p>
<pre><code>rake db:migrate</code></pre>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>There's also a command to reverse the migration if you make a mistake: </p>
<pre><code>rake db:rollback</code></pre>
<p>If you've heard developers talking about a 'rollback', this is what they mean.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Let's restart our server and see what that made.</p>
<p>In the terminal, type:</p>
<pre><code>rails server</code></pre>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p><strong>Open the preview on Port:3000</strong> again.</p>
<p>The address in the browser will be yourappname.nitrousbox.com. <br><strong>Add '/ideas' to the end of the URL</strong>.</p>
<p>You'll now be able to see the basics of the app you're creating!</p>
<p>If you can't see your app, ask a coach for help.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>It looks pretty plain right now, but click around and explore what you've built.</p>
<p>Once you've had a play, go back to your Nitrous.io editor.</p>
<p>Stop the server by clicking in the terminal and typing <strong>Ctrl+C</strong>.</p>
</section>
<!-- Design/Front-end -->
<section class="title" data-background="images/red-hearts.png">
<h2>Making things beautiful </h2>
<h4>(or, the front-end)</h4>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>In a Ruby on Rails application, the user interface (what someone visiting the website will see), is often written in HTML with Embedded Ruby (ERB) code.</p>
<p>This code is contained in a specific directory called ‘views’, located in the app folder of your Rails application directory.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p> HTML (HyperText Markup Language) is the main language used to write the things displayed in a web browser. HTML includes content, and tags to structure the content. <br>These tags come in pairs (an open and a close tag). <br>For example, the main heading on your page will have <code><h1>tags</h1></code> around it.</p>
<p>HTML tags use angular brackets <code> < ></code>.</p>
<p>Your web browser uses the tags to understand how to display content.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>ERB is a system supplied by Ruby that allows you to insert pure Ruby code into files written in other languages, such as Javascript or HTML. The Ruby code is contained within specific angle brackets <code><%</code> and <code>%></code> which instruct the system to execute the contents.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>If an = sign accompanies the angle brackets <code><%=</code> and <code>%></code>, <br>then the contents are executed and rendered on the page.</p>
<p>For example, if you had 25 active ideas in your application, the code:</p>
<pre><code>There are currently <%= Idea.count %> active ideas</code></pre>
<p>would render as: There are currently 25 active ideas.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Earlier, we ran a scaffold command to set up our app. <br>As well as creating our model, it also created a controller, and a view.</p>
<p>When someone connects to your Rails website, the request the browser sends to the server hits the controller you've created. The controller communicates with the model (and the model with the database) to get the information needed. It then sends that information to the view, which returns the HTML to the requesting browser, so they can see your site.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>All the things we've talked about so far involve the content of our website, <br>and the structure of that content.</p>
<p>The next piece of the puzzle is CSS (Cascading Style Sheets). CSS is used to format/style <br>our website, so that it looks beautiful and is nice to use.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>In Nitrous.io, the left side of the page has a tree menu. Use this to open <code>app/views/layouts/application.html.erb</code> in your text editor. <br>This is a default layout file. You can use this to create default formatting for your app.
</p>
<p>Find the line <code><%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %></code>. Above this line, add this code:</p>
<pre><code><link rel="stylesheet" href="//railsgirls.com/assets/bootstrap.css" />
<link rel="stylesheet" href="//railsgirls.com/assets/bootstrap-theme.css" /></code></pre>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>The <code>rel="stylesheet"</code> tells us the type of link we've just added (called the link relation). The <code>href=</code> tells us the address of the file (this is called the hypertext reference). We're using a stylesheet called 'Bootstrap', made by Twitter. It's a free and easy way to style your app.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Replace <code><%= yield %></code> with:</p>
<pre><code> <div class="container">
<%= yield %>
</div></code></pre>
<p>The <code><div></code> tag is used to divide your code into parts.</p>
<p>You can also assign a class. This allows you to apply the same styling <br>to all the things with this class. We've called ours 'container'.</p>
<p><code class=" hljs xml"><%= yield %></code> is a way of adding the unique content we'll have on each page into the container. This helps make sure our styling is consistent.
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>We want to have a navigation bar at the top of our page, so that people using our app can find their way around. We also want to have a footer at the bottom of the page. <br>In the same file, under <code><body></code> add:</p>
<pre><code class=" hljs xml"><nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">The Idea app</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/ideas">Ideas</a></li>
</ul>
</div>
</div>
</nav></code></pre>
<p>Make sure you scroll down to get all the code! This is the navigation bar.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Let's add the footer too. Before <code></body></code>, add:</p>
<pre><code class=" hljs xml"><footer>
<div class="container">
Rails Girls Sofia 2015
</div>
</footer>
<script src="//railsgirls.com/assets/bootstrap.js"></script></code></pre>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Finally, we're going to make some changes to the way our ideas display. We want to space them out a bit. Open <code>app/assets/stylesheets/application.css</code> <br>and at the bottom, add:
<pre><code>body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }</code></pre>
<p>Make sure you save the file. There's a 'Save' button at the top of the text editor box.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>So, what did that CSS do?</p>
<p><code>body</code> - this part is known as the selector and refers to the HTML element you wish to style.</p>
<p><code>{ padding-top: 100px; }</code> - this part is known as the declaration; each declaration has a property which is the style attribute you wish to change <code>(padding-top)</code>, <br>and an associated value <code>(100px)</code>.</p>
<p>Declarations always end with a semicolon and declaration groups <br>are always enclosed by curly brackets.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Let's start the server again, and check out our progress. In the terminal, type:</p>
<pre><code>rails server</code></pre>
<p>Open the preview on Port:3000 again.</p>
<p>Don't forget to add '/ideas' to the end of the URL</p>
<p>When you're finished looking, stop the server again by hitting <strong>Ctrl+C</strong>.</p>
</section>
<!-- Images -->
<section class="title" data-background="images/red-hearts.png">
<h2>Images</h2>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>In our app, we want to be able to upload images. At the moment, we can't do that.</p>
<p>Rails has lots of useful add ons you can use. In programming, these are usually called libraries, but in Rails, we call them gems. Gems contain pre-written code and help to reduce errors and duplication in your code.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>In your project menu, you'll see something called <code>Gemfile</code>. <br>This has all the gems that came with the application we created.</p>
<p>Open gemfile so you can edit it in the text editor. Under the line <code>gem 'sqlite3'</code>, add:</p>
<pre><code>gem 'carrierwave'</code></pre>
<p>The <code>sqlite3 gem</code> interfaces with our database, and <code>carrierwave</code> <br>makes it easier to upload images.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>In the terminal, run:</p>
<pre><code>bundle</code></pre>
<p>This runs Rails' Bundler software, which fetches the gems you have <br>added from the <a href="https://rubygems.org" target="_blank">https://rubygems.org</a> website, and installs them.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Now, we can generate the code for uploading pictures. In the terminal, type:</p>
<pre><code>rails generate uploader Picture</code></pre>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Now, we need to customise the form we use for editing and uploading ideas.</p>
<p>We're using the same bit of code to edit and upload. This is found in <code>app/models/idea.rb</code>.</p>
<p>This code snippet is used in both <code>edit.html.erb</code> and <code>new.html.erb</code>, as the two forms are basically identical. This saves us some work! If you look at either of those pages, <br>rather than form code, it just says <code><%= render 'form' %></code>.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Open <code>app/models/idea.rb</code>. Under the line <code>class Idea < ActiveRecord::Base</code>, add:
<pre><code>mount_uploader :picture, PictureUploader</code></pre>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Open <code>app/views/ideas/_form.html.erb</code>. This file creates our form HTML.</p>
<p>At the top, you'll see <code>form_for(@idea)</code>. This starts our form code for the idea form.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Find <code><%= f.text_field :picture %></code> and change it to:</p>
<pre><code><%= f.file_field :picture %></code></pre>
<p>This changes the code from asking for a text input to asking for a file input, which makes it easier for our users to upload an image.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>In the terminal, start the server again by typing:</p>
<pre><code>rails server</code></pre>
<p>Refresh the browser window you're viewing your app in to see the changes, <br>and add a new idea.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Did you get an error?</p>
<p><a href="#" class="navigate-right">No.</a></p>
<p><a href="#" class="navigate-down">Yes.</a>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<p>In <code>app/views/ideas/_form.html.erb</code>, change <code><%= form_for(@idea) do |f| %></code> to:</p>
<pre><code><%= form_for @idea, :html => {:multipart => true} do |f| %></code></pre>
</section>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>You'll notice that the image didn't display; instead, it showed the path to the image. <br>Let's fix that.</p>
<p>Open <code>app/views/ideas/show.html.erb</code> and change <code><%= @idea.picture %></code> to:
<pre><code><%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %></code></pre>
<p>Refresh your browser, and you should now see the image.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Want to know more about what that code change did?</p>
<p><a href="#" class="navigate-right">I'm good; let's keep going.</a></p>
<p><a href="#" class="navigate-down">Yes, please! Explain what this code means.</a>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<p>Let's take a closer look at <code>app/views/ideas/show.html.erb</code>.</p>
<p>
In the code <code><%= @idea.picture %></code>, @idea is what we call an 'instance variable'. Instance variables are start with an @ symbol. Each view file (what we're looking at now), has a corresponding controller action, where the instance variables' are set.</p>
<p>In our code, @idea is set in the ‘show’ action of the Ideas controller. It's set with the code <code>@idea = Idea.find(params[:id])</code>.</p>
<p>This allows us to use it in the view <code>show.html.erb</code>. It uses the Rails 'Find' method to get the ideas for our app from our database.</p>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<p>The code that follows the <code>@idea</code> variable (<code>.picture</code>) tells Rails to access the ‘picture’ attribute of our resource (idea). </p>
<p>Our new code, <code><%= image_tag(@idea.picture_url...)</code>, uses the Ruby image_tag helper. This gives us an HTML <code><img></code> tag, but retrieves the image we want to display from the folder 'public/images' where our uploaded images are stored.</p>
</section>
<section data-background="images/halftone.png" data-background-repeat="repeat" data-background-size="100px">
<p>We also set a default width for each image (<code>width: 600</code>).</p>
<p>The final part of that line of code, <code>if @idea.picture.present?</code> checks if there is an image available before executing the code before it.</p>
</section>
</section>
<!-- Routes -->
<section class="title" data-background="images/red-hearts.png" >
<h2>Fine-tuning the routes</h2>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>One part of our app's job is to listen to requests from the browser and return the correct information. In Rails, we have a system called 'routing' that does this.</p>
<p>The browser requests information using HTTP* methods. There are four main methods it uses:</p>
<ul>
<li>GET</li>
<li>PUT</li>
<li>POST</li>
<li>DELETE</li>
</ul>
<p><small>*HTTP (Hypertext Transfer Protocol) defines how information is formatted and transmitted on the Internet.</small></p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Rails' routing system ensures the app knows what to do when it receives each of those methods for any of the resources in your app.</p>
<p>For example, <code>GET /ideas/new</code> will give you the form for adding a new idea.</p>
<p><code>POST /ideas</code> will create a new idea.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>We're going to change some of the routes we have set up. When you open the localhost:3000 page, it still has the Ruby 'Welcome Aboard' message. <br>We had to manually go to /ideas.</p>
<p>Open <code>config/routes.rb</code>. After the first line, add:</p>
<pre><code>root to: redirect('/ideas')</code></pre>
<p>This changes the default page (root) that is returned when a browser requests your app to the /ideas page. Try it out now (don't forget to save your changes first, and <br>restart the server if you've stopped it).</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Lastly, we're going to add a static page to our app. This one is going to <br>provide information about the author of the app - you!</p>
<p>In the terminal, type:</p>
<pre><code>rails generate controller pages info</code></pre>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>This created a new folder called 'pages', which you can find under <code>app/views</code>.</p>
<p>In that folder, you'll see a page called <code>info.html.erb</code>. Open it up.</p>
<p>You can customise the information in this page. <br>If you add /pages/info to your app URL now, you'll see this page.</p>
</section>
<section class="title" data-background="images/red-hearts.png">
<h2>Push your app to GitHub</h2>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px"> <p>Earlier, you created a GitHub account.</p>
<p>Now, we're going to add your new app to GitHub.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Open the GitHub website and log in.</p>
<p>Click the <a href="https://github.com/new" target="_blank"><img src="images/newrepo.png"></a> button.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Give the repository a name, such as rails-girls.</p>
<p>You can also add a description.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px"> <p>Choose the 'Public Repository' option and make sure you tick the 'Initialize this repository with a README' box.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>This creates a new repository (a place to store your app). It then initializes the repository, which allows you to record revisions of the project, and finally, it creates a read-me document. In most projects, this is where you'd write a brief description of the project, so that other people understand what you're building.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Go back to Nitrous.io. Make sure you're still in your project directory.</p>
<p>You can check this by looking at the terminal. It should show something like this:</p>
<pre><code>action@railsgirls-rails-98616:~/projects/railsgirls$</code></pre>
<p>If you're not, use the <code>cd</code> command you learned earlier to change back into that directory.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>In the terminal, type:</p>
<pre><code>git init</code></pre>
<p>This initializes your local git repository. Remember: git runs on your computer; GitHub stores your code online.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Let's add your code to your local repository. In the terminal, type:</p>
<pre><code>git add .</code></pre>
<p>The <code>.</code> means all files. So, this command will get us ready to add all our files to our computer's repository.</p>
<p>Git has an intermediary stage before it saves any changes. This is called 'staging', and it allows you to make sure everything is correct, so you can commit (save) them.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>You're now ready to make your first commit! In the terminal, type:</p>
<pre><code>git commit -m "first commit"</code></pre>
<p>This commits all of your files to your computer's git repository. The words between the <code>"</code><code>"</code> is your commit message. This tells other people looking at your code what you are doing.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px"> <p>Now, you need to send the code to GitHub, so you can share it and collaborate on it if you want. In the terminal type:</p>
<pre><code>git remote add origin https://github.com/yourusername/yournewrepositoryname.git</code></pre>
<p>This makes a remote connection to the GitHub repository you've typed. We normally call this 'origin', as it's the original version.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<p>Now the two repositories are connected, you need to push your computer's code to GitHub. In the terminal, type:</p>
<pre><code>git push -u origin master</code></pre>
<p>Your code is now on GitHub! On the GitHub website, open up the repository you created, and admire all your work there.</p>
</section>
<section data-background="images/brushed.png" data-background-repeat="repeat" data-background-size="100px">
<h2>Congratulations! You've built your basic app.</h2>
<p>So, what next?</p>
<ul>
<li><a href="http://guides.railsgirls.com/commenting" target="_blank">Allow comments</a></li>
<li><a href="http://guides.railsgirls.com/devise" target="_blank">Add authentication</a></li>
<li><a href="http://guides.railsgirls.com/design" target="_blank">Improve your design</a></li>
<li><a href="http://guides.railsgirls.com/thumbnails" target="_blank">Resize images using Carrierwave*</a> </li>
</ul>
<p><small>*If you'd like to do this one, you won't need to complete the 'brew install imagemagick' step. Nitrous comes with this already!</small></p>
</section>
</div>
</div>
<script src="assets/js/head.min.js"></script>
<script src="assets/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,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
// parallaxBackgroundSize: '2100px 900px',
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'assets/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'assets/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'assets/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'assets/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'assets/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'assets/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>