-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·1287 lines (1190 loc) · 64.2 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
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Intro to iOS ~ Girl Develop It</title>
<meta name="description" content="This is an introduction to iOS development.">
<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="css/reveal.css">
<link rel="stylesheet" href="css/theme/gdidefault.css" id="theme">
<link rel="icon" href="favicon.ico">
<!-- For syntax highlighting -->
<!-- light editor<link rel="stylesheet" href="lib/css/light.css">-->
<!-- dark editor--><link rel="stylesheet" href="lib/css/dark.css">
<!-- If use the PDF print sheet so students can print slides-->
<link rel="stylesheet" href="css/print/pdf.css" type="text/css" media="print">
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<img src = "images/gdi-boston-logo.png" style="width: 30%; height:30%;">
<h3>Introduction to iOS</h3>
<a href="#/install-night">Install Night</a><br>
<a href="#/class-1">First Class</a><br>
<a href="#/class-2">Second Class</a><br>
<a href="#/class-3">Third Class</a><br>
<a href="#/class-4">Fourth Class</a>
</section>
<!-- ************* -->
<!-- Install Night -->
<!-- ************* -->
<section id="install-night">
<br></br>
<br></br>
<h1>Install Night</h1>
</section>
<section data-background-iframe="https://developer.apple.com/xcode/downloads/">
<h2>Install Xcode</h2>
<p>Head on over to: https://developer.apple.com/xcode/downloads/</p>
<img style="max-width:370px; min-width:330px;" src="https://devimages.apple.com.edgekey.net/xcode/images/downloads_2x.png">
</section>
<section>
<p>To ensure Xcode was installed properly, open your terminal and run</p>
<pre><code>xcode-select -p</code></pre>
<br></br>
<p>You should see</p>
<pre><code>/Applications/Xcode.app/Contents/Developer</code></pre>
</section>
<section>
<h2>CocoaPods</h2>
<ul>
<li>Manages library dependencies for Xcode projects</li>
<li>Dependencies are specified in a single text file called a Podfile</li>
<li>Resolves dependencies between libraries, fetches the required source code and links everything together in an Xcode workspace to build your project</li>
</ul>
<p>Reference: </p> <a href="https://guides.cocoapods.org/using/getting-started.html">https://guides.cocoapods.org/using/getting-started.html</a>
</section>
<section>
<h2>Installing CocoaPods</h2>
<ol>
<li>Open Terminal and enter:</li>
<pre><code>sudo gem install cocoapods</code></pre>
</ol>
<p>NOTE: CocoaPods is built with Ruby and it will be installable with the default Ruby available on OS X</p>
</section>
<section>
<h2>Let's run a sample app</h2>
<p>Download the sample app </p><a href="http://bit.ly/gdi-sample-ios-app">http://bit.ly/gdi-sample-ios-app</a>
<br></br>
<ol>
<li>Navigate to your project's folder</li>
<li>In Terminal, where the directory the Podfile is located, run the following:
<pre><code>pod install</code></pre>
</li>
<li>Now open the xcworkspace
<pre><code>open Sample\ iOS\ Project.xcworkspace/</code></pre>
</li>
</ol>
</section>
<!-- ************ -->
<!-- First Class -->
<!-- ************ -->
<section id="class-1">
<h2>Introduction to iOS App Development</h2>
<h4>First Class</h4>
<p>Elliot Schrock</em></p>
</section>
<section>
<h4>Agenda</h4>
<p class="fragment">How this course will be taught</p>
<p class="fragment">Motivation</p>
<p class="fragment">Introduction to programming fundamentals</p>
<p class="fragment">Tour of Xcode</p>
<p class="fragment">Introduction to MVC</p>
</section>
<section>
<h4>This course</h4>
<p class="fragment">1 class = 1 instructor</p>
<p class="fragment">Misunderstanding = our fault</p>
<p class="fragment">Please please PLEASE ask questions</p>
<p class="fragment">[email protected]<br/>@GDI.Question!</p>
<p class="fragment">My email: [email protected]</p>
<aside class="notes">
Let students write it down!
</aside>
</section>
<section>
<h4>Why should I care about programming?</h4>
<p class="fragment">It's MAGIC!</p>
<aside class="notes">
It is the closest us muggles have to being wizards
</aside>
<aside class="notes">
Think about mobile: spells for finding things, bringing them to you, turning on/off lights, info from one person to another
</aside>
</section>
<section>
<p>Like anything in the wizarding world, it takes precision</p>
<iframe width="420" height="315" src="https://www.youtube.com/embed/fx2zLgdkJpk" frameborder="0" allowfullscreen></iframe>
</section>
<section>
<h4>List of Commands</h4>
<p class="fragment">Each command is like a spell</p>
<aside class="notes">
it has to be right or you'll stab an eye out
</aside>
<p class="fragment">Generally one command per line:</p>
<pre class="fragment"><code data-trim>[someObject doSomething];
[anotherObject doSomethingElse];
someObject.someProperty = anotherProperty;</code></pre>
<aside class="notes">
Build up these commands into 'objects'
</aside>
</section>
<section>
<h4>Object Oriented Programming (OOP)</h4>
<p class="fragment">Create 'objects' that do things</p>
<aside class="notes">
"Create" (write code describing)
</aside>
<p class="fragment">In OOP, (almost) everything is an object</p>
<aside class="notes">
"OOP" specifically Obj-C. In fact, how many have heard of C? "Objective" C is an object oriented version of C (kind of)
</aside>
<p class="fragment">Description of:</p>
<ul>
<li class="fragment">What the object can do</li>
<li class="fragment">What other objects it owns</li>
</ul>
<p class="fragment">Write this description in its own file (kind of)</p>
</section>
<section>
<h4>Examples</h4>
<p class="fragment">Dog</p>
<aside class="notes">
Has: collar, tail, tongue, legs, nose, ears, Can: walk, run, pant, bark
</aside>
<p class="fragment">Pen</p>
<aside class="notes">
Has: a cap, a grip, a tip, ink Can: make a mark
</aside>
<p class="fragment">Arm</p>
<aside class="notes">
Ask the class for examples of properties and functions
</aside>
</section>
<section>
<h4>Objects</h4>
<p class="fragment">Type of object = Class</p>
<p class="fragment">The object itself = instance</p>
<aside class="notes">
Give example: Chair class is a description of all chairs; this chair right here is an 'instance' of that class
Uppercase vs lowercase
</aside>
</section>
<section>
<h4>Properties</h4>
<p class="fragment">Access a property using a 'dot'</p>
<pre class="fragment"><code> arm.hand;<br> arm.elbow;</code></pre>
<p class="fragment">Can even chain them together:</p>
<pre class="fragment"><code> arm.hand.pinkieFinger;</code></pre>
</section>
<section>
<h4>Functions</h4>
<p>Functions = actions</p>
<p class="fragment">Tell an object to do something with brackets:</p>
<pre class="fragment"><code> [hand open];<br> [hand close];</code></pre>
<p class="fragment">They can be given some number of things (called 'arguments'):</p>
<pre class="fragment"><code> [student takeThisPen:pen];</code></pre>
<pre class="fragment"><code> [student putThisInkCartridge:cartridge intoThisPen:pen];</code></pre>
<p class="fragment">Or they can be combined with properties:</p>
<pre class="fragment"><code> [arm.hand.pinkieFinger wiggle];</code></pre>
</section>
<section>
<h4>Defining a function</h4>
<pre class="fragment"><code>- (void)open<br>{<br> //do something<br>}</code></pre>
<p class="fragment">Functions with arguments:</p>
<pre class="fragment"><code>- (void)takeThisPen:(Pen *)thisPen
{
myPen = thisPen;
}</code></pre>
<pre class="fragment"><code>- (void)putInkCartridge:(InkCartridge *)cartridge intoPen:(Pen *)pen
{
pen.cartridge = cartridge;
}</code></pre>
<p class="fragment">Functions can 'return' things:</p>
<pre class="fragment"><code>- (Pen *)giveMeYourPen<br>{<br> return myPen;<br>}</code></pre>
<aside class="notes">
'=' means make the thing on the left equal to what's on the right.
'Pen' is the type of object.
'thisPen' is the name of the object.
You could name it something other than 'thisPen'. 'Mac'? Example: Gwyneth Paltrow's child is named 'Apple' ...You can do that, it's just weird
(please name things logically!)
We'll get into this more later
</aside>
</section>
<section>
<h4>Putting it all together</h4>
<pre class="fragment"><font color="white">-</font> <font color="green">(Pen *)</font><font color="yellow">pen:</font><font color="red">(Pen *)pen</font> <font color="yellow">withInkCatridge:</font><font color="red">(InkCartridge *)cartridge</font></pre>
<pre class="fragment">{
[<font color="red">pen</font> <font color="blue">open</font>];
<font color="red">pen</font>.<font color="pink">inkCartridge</font> = <font color="red">cartridge</font>;
[<font color="red">pen</font> <font color="blue">close</font>];
return <font color="green">pen</font>;
}</pre>
</section>
<section>
<h4>Hand.h</h4>
<aside class="notes">
h stands for 'header'
Lots here you aren't supposed to understand, just don't want to show you something wrong.
Just incantations
</aside>
<pre class="fragment"><code>
#import <Foundation/Foundation.h>
#import "Finger.h"
@interface Hand : NSObject
@property (nonatomic, strong) Finger *indexFinger;
@property (nonatomic, strong) Finger *middleFinger;
@property (nonatomic, strong) Finger *ringFinger;
@property (nonatomic, strong) Finger *pinkieFinger;
- (void)open;
- (void)close;
@end
</code></pre>
<aside class="notes">
Go through each line again
</aside>
</section>
<section>
<h4>Arm.h</h4>
<pre><code>
#import <Foundation/Foundation.h>
#import "Hand.h"
@interface Arm : NSObject
@property (nonatomic, strong) Hand *hand;
- (void)extend;
- (void)retract;
@end
</code></pre>
<aside class="notes">
Go through each line and explain:
@interface = how to "interface" with Arm objects
property (incantation, incantation) an object of class Hand, named hand
two functions that return nothing and take no arguments
</aside>
</section>
<section>
<h4>Exercise</h4>
<pre><code>#import <Foundation/Foundation.h>
#import "Hand.h"
@interface Arm : NSObject
@property (nonatomic, strong) Hand *hand;
- (void)extend;
- (void)retract;
@end</code></pre>
<pre><code>#import <Foundation/Foundation.h>
#import "Finger.h"
@interface Hand : NSObject
@property (nonatomic, strong) Finger *indexFinger;
@property (nonatomic, strong) Finger *middleFinger;
@property (nonatomic, strong) Finger *ringFinger;
@property (nonatomic, strong) Finger *pinkieFinger;
- (void)open;
- (void)close;
@end</code></pre>
<aside class="notes">
Here are the .h files for both classes. Walk through creating them in Xcode. Now let's implement the following together... (next slide)
</aside>
</section>
<section>
<h4>Exercise Function</h4>
<pre><code>
- (void)pickUpPen:(Arm *)arm
{
}
</code></pre>
<aside class="notes">
Demonstrate this function physically, the walk through writing it in Xcode.
</aside>
</section>
<section>
<h4>A Solution</h4>
<pre class="fragment"><code>
- (void)pickUpPen:(Arm *)arm
{
[arm.hand open];
[arm extend];
[arm.hand close];
[arm retract];
}
</code></pre>
</section>
<section>
<h4>Exercise Function</h4>
<pre><code>
- (void)putDownPen:(Arm *)arm
{
}
</code></pre>
<aside class="notes">
Have them implement this on their own, and play Harry Potter theme in the background
</aside>
</section>
<section>
<h4>A Solution</h4>
<pre class="fragment"><code>
- (void)putDownPen:(Arm *)arm
{
[arm extend];
[arm.hand open];
[arm retract];
[arm.hand close];
}
</code></pre>
</section>
<section>
<h2>Break time!</h2>
</section>
<section>
<h4>Implementation</h4>
<aside class="notes">
Two files per class
</aside>
<p class="fragment">Header (.h) = how others interact with an instance.</p>
<p class="fragment">Implementation (.m) = what happens when they do.</p>
<p class="fragment">Recall <code>pickUpPen</code>. In the header:<br>
<pre class="fragment"><code>#import <Foundation/Foundation.h>
@interface Arm : NSObject
- (void)pickUpPen:(Arm *)arm;
@end</code></pre></p>
<p class="fragment">In the implementation:<br>
<pre class="fragment"><code>#import "Arm.h"
@implementation Arm
- (void)pickUpPen:(Arm *)arm {
[arm.hand open];
[arm extend];
[arm.hand close];
[arm retract];
}
@end</code></pre></p>
</section>
<section>
<h4>Self</h4>
<p class="fragment">The "self" keyword refers to the current instance</p>
<p class="fragment">Example: rewrite of <code>pickUpPen:</code></p>
<pre class="fragment"><code>#import "Arm.h"
@implementation Arm
- (void)pickUpPen
{
[self.hand open];
[self extend];
[self.hand close];
[self retract];
}
@end</code></pre>
</section>
<section>
<h4>A Short Digression: Memory</h4>
<p class="fragment">Instances are stored in memory (RAM)</p>
<aside class="notes">
RAM = random access memory. Means there's no plan for where something will be. (This is slightly more complicated than what I'm describing)
</aside>
<p class="fragment">Each instance has an address in memory</p>
<p class="fragment">That address is how the computer refers to the object</p>
</section>
<section>
<h4>The Dentist Example</h4>
<aside class="notes">
I am an instance of the class person. I have a dentist. Sometimes, that dentist will change.
</aside>
<p class="fragment">I have a contact in my phone called 'Dentist'</p>
<p class="fragment">Move to a new city, need a new dentist</p>
<p class="fragment">Find a new one and replace the old dentist's phone number with the new one</p>
<pre class="fragment"><code>- (void)setDentist:(Dentist *)newDentist
{
self.dentist = newDentist;
}</code></pre>
<aside class="notes">
This is how equals works - I'm replacing the address I have in self.dentist by the address stored in newDentist
</aside>
</section>
<section>
<h4>Variables</h4>
<p class="fragment">Create a variable like so:</p>
<pre class="fragment"><code> Dentist *myDentist;</code></pre>
<aside class="notes">
right now, nothing in it. empty bucket. no object in it... kind of
</aside>
<p class="fragment">Right now, <code>dentist</code> is equal to <code>nil</code></p>
<aside class="notes">
nil is the nothing object. lot of neat properties, but specifically, if you try to call a function it won't do anything, or it will return nil
</aside>
<p class="fragment">Usually we'll <i>instantiate</i> the object at the same time as we create the variable:</p>
<pre class="fragment"><code> Dentist *myDentist = [[Dentist alloc] init];</code></pre>
<aside class="notes">
lot to unpack here. Should recognize left side. Should recognize brackets. Alloc = allocate memory. Init = initialize
also note, variables and functions start with lowercase. classes = uppercase
</aside>
<p class="fragment">PM me on Slack with how to create a variable of class <code>Arm</code> named <code>someonesArm</code></p>
<pre class="fragment"><code> Arm *someonesArm = [[Arm alloc] init];</code></pre>
</section>
<section>
<h4>Person</h4>
<aside class="notes">
Have them create this class
</aside>
</section>
<section>
<h4>Scope</h4>
<p>Variables have a shelf life</p>
<aside class="notes">
scope is basically how long it will last. if variables are buckets to hold things, you only have so much room in your house. at some point, you'll have to get rid of some. that's scope, more or less: rules that determine how long a variable is valid for.
</aside>
<p class="fragment">Scope of a variable is where it is valid</p>
<pre class="fragment"><code>- (void)setDentist:(Dentist *)newDentist
{
self.dentist = newDentist;
}</code></pre>
<aside class="notes">
What happens when dentist office has no patients: if closes. Same thing with variables: when no one is using it, get rid of it. Variable 'newDentist' is the paper on which the phone number is stored on. Once it's copied into self.dentist, don't need newDentist any more. Scope: can only use newDentist in that one function. (Explain where this is happening? That is, the implementation file?)
</aside>
<pre class="fragment"><code>- (void)makeAppointmentWithDentist
{
DentistAppointment *appointment = [[DentistAppointment alloc] init];
appointment.dentist = self.dentist;
appointment.patient = self;
[appointment confirm];
}</code></pre>
<p class="fragment">Rule of thumb: only valid between the curly braces in which it was born</p>
</section>
<section>
<h4>Primatives</h4>
<aside class="notes">
keep saying 'almost' everything is an object. primatives are not object. so small, they don't need pointers.
</aside>
<p class="fragment"><code>int</code> - integers</p>
<p class="fragment"><code>BOOL</code> - boolean values (<code>YES</code> and <code>NO</code>)</p>
<p class="fragment"><code>float</code> - decimal numbers</p>
<p class="fragment">Don't need * because not an address</p>
<p class="fragment">Math operations work as you'd expect:</p>
<pre class="fragment"><code> int myLuckyNumber = 5 + 4;
myLuckyNumber = 86 - 77;
myLuckyNumber = 3 * 3;
myLuckyNumber = 81 / 9;
myLuckyNumber = 103 % 47;</code></pre>
</section>
<section>
<h4>Exercise</h4>
<p>Let's write a function that adds two integers together and returns the result.</p>
<pre class="fragment"><code>- (int)add:(int)firstNumber to:(int)secondNumber
{
return firstNumber + secondNumber;
}</code></pre>
<aside class="notes">
create a Utility class in which to implement this. Then do so.
</aside>
<p class="fragment">Now you: write a function that subtracts one int from another and returns the result.</p>
</section>
<section>
<h4>Booleans</h4>
<p>Recall that <code>BOOL</code> is a boolean value (either <code>YES</code> and <code>NO</code>)</p>
<aside class="notes">
introduce a few things at once. if/then, and boolean operations
</aside>
<pre class="fragment"><code> int myLuckyNumber = 9;
if (myLuckyNumber == 7){
//do something only if myLuckyNumber is 7
}</code></pre>
<pre class="fragment"><code> int myLuckyNumber = 9;
if (myLuckyNumber != 7){
//do something only if myLuckyNumber is NOT 7
}</code></pre>
</section>
<section>
<h4>Subclassing</h4>
<p class="fragment">Add functionality to a class by subclassing it (extending it)</p>
<p class="fragment">It 'inherits' all the functions of its super class</p>
<p class="fragment">Plus you can add your own functions</p>
<p class="fragment">Suppose I have a class called <code>Automobile</code></p>
<p class="fragment"><code>Automobile</code> has wheels, a driver's seat, can brake, can accelerate...</p>
<pre class="fragment"><code>#import "Automobile.h"
@interface Truck : Automobile
@property (nonatomic, strong) FlatBed *flatBed;
- (void)haul:(NSObject *)something;
@end</code></pre>
<aside class="notes">
this is actually what we've been doing all along: all classes so far have subclassed NSObject.
</aside>
</section>
<section>
<h1>Break time!</h1>
<iframe width="420" height="315" src="https://www.youtube.com/embed/zCNHVMIYqiA" frameborder="0" allowfullscreen></iframe>
</section>
<section>
<h4>Real Live App</h4>
<p>https://github.com/schrockblock/boston-ios</p>
<p>Download zip, extract it</p>
<p>Run <code>pod install</code></p>
<p>Open the workspace</p>
<aside class="notes">
this is app is not my best work, but it'll do. run it, show that what it does. open finder and show all the files. this is why we need mvc. explain mvc.
</aside>
</section>
<section>
<h4>Homework</h4>
<p>https://github.com/schrockblock/gdi-homework-1</p>
<p>I accidentally deleted a class! Use Xcode to figure out which one, and re-create it so that the project runs.</p>
</section>
<section>
<h1>Thank you!</h1>
</section>
<!-- ************ -->
<!-- Second Class -->
<!-- ************ -->
<section id="class-2">
<h2>Introduction to iOS App Development</h2>
<h4>Second Class</h4>
<p>Vineet Sathyan</em></p>
<p class="fragment">My email: [email protected] </p>
<aside class="notes">
Brief introduction + reminder to please continue to ask questions. Last class we did great.
</aside>
</section>
<section>
<h4>Agenda</h4>
<p class="fragment">Introduction to MVC</p>
<p class="fragment">Basic Tour of Xcode</p>
<p class="fragment">Basic User Interface</p>
<p class="fragment">Programming Basics cont.</p>
<aside class="notes">
Switching to UI to get a breather from pure coding and then we will come back to it :).
</aside>
</section>
<section>
<h4>Model</h4>
<p class="fragment">objects that store data</p>
<aside class="notes">
stores the current 'state' of the application
</aside>
<p class="fragment">Database : CoreData, sqlite, etc.</p>
<p class="fragment">NSObjects</p>
<aside class="notes">
What we implemented- ask a question after MVC is introduced.
</aside>
</section>
<section>
<h4>View</h4>
<p class="fragment">User Interface : what the user sees</p>
<p class="fragment">views, buttons, labels</p>
<aside class="notes">
What we implemented- ask a question after MVC is introduced.
</aside>
</section>
<section>
<h4>Controller</h4>
<p class="fragment">'controls' views and models</p>
<p class="fragment">UIViewController</p>
<p class="fragment">UITableViewController, UINavigationController, custom</p>
<aside class="notes">
acts as the intermediary between models and views. models and views should never be aware of each other.
</aside>
</section>
<section>
<h4>Xcode</h4>
<p class="fragment">IDE</p>
<p class="fragment">Menu Items</p>
<p class="fragment">Quick Help</p>
<p class="fragment">Interface Builder</p>
<aside class="notes">
Don't want to overwhelm, just pointing out a few helpful things for right now. And we will learn more as we go.
</aside>
</section>
<section>
<h4>Interface Builder</h4>
<aside class="notes">
allows you to design a user-interface without writing any code.
</aside>
<p class="fragment">Live Example</p>
<p class="fragment">Lots of 'drag and drop'</p>
<aside class="notes">
make a new project, add a label, connect the label to a IBOutlet, then output custom text to that label.
Add a button, conect it to IBAction, change the text of that label.
</aside>
<aside class="notes">
What is the M, V, C?
</aside>
</section>
<section>
<h4>UIViews</h4>
<p class="fragment">UIView</p>
<aside class="notes">
basic canvas of the view hierarchy.
holds subviews- any sort of views: UIViews, label, buttons, images, etc.
Handles interactions and layout of all its subviews
</aside>
<p class="fragment">UILabel</p>
<p class="fragment">UIButton</p>
<p class="fragment">UIImageView</p>
<aside class="notes">
add an image to the project, add a UIImageView, load the UIImageView with the image resource object.
</aside>
</section>
<section>
<h4>Calculator</h4>
<p class="fragment">Make a simple calculator</p>
<aside class="notes">
make all the buttons for a simple integer calculator and connect them to the controller
+ - , 0-9, = , output Label
</aside>
<p class="fragment">Optional Homework- extend the calculator.</p>
<aside class="notes">
to implement multiplying, dividing, decimal points, "stack" of operations
</aside>
<aside class="notes">Break? </aside>
</section>
<section>
<h4>Programming Basics cont.</h4>
<p class="fragment">Previously</p>
<aside class="notes">
went over objects, Class, instance, properties, variables, primitives, functions, scope, alloc, init.
</aside>
</section>
<section>
<h4>Today</h4>
<p class="fragment">arrays</p>
<p class="fragment">dictionaries</p>
<p class="fragment">constants</p>
<p class="fragment">loops</p>
</section>
<section>
<h4>NSArray</h4>
<p class="fragment">Inherits from NSObject</p>
<p class="fragment">array = [1,2,3,4,5]</p>
<p class="fragment">ordered collection of objects</p>
<p class="fragment">Mutable?</p>
<aside class="notes">
list of items in order. show live code
</aside>
</section>
<section>
<h4>NSDictionary</h4>
<p class="fragment">Inherits from NSObject</p>
<p class="fragment">dictionary = { name : Arya, pet : Nymeria, sword: Needle }</p>
<p class="fragment">keys and values</p>
<p class="fragment">Mutable</p>
<aside class="notes">
objects associated with keys, very common in API's passing information back and forth.
</aside>
</section>
<section>
<h4>Constants</h4>
<p class="fragment">Primitives</p>
<p class="fragment">NSString</p>
<aside class="notes">
useful to declare constants which will never change in the application (name, Text, number, etc).
</aside>
</section>
<section>
<h4>Loops</h4>
<p class="fragment">For-loop</p>
<p class="fragment">While - loop</p>
<aside class="notes">
for now just focusing on those. Helps perform action, functions on a collection of objects.
Be careful to avoid infinite loops.
</aside>
</section>
<section>
<h4>Homework/Classwork</h4>
<p class="fragment">https://github.com/vsathyan/IB-example</p>
<p class="fragment">https://github.com/vsathyan/Calculator</p>
<p class="fragment">Build out each project more</p>
</section>
<!-- ************ -->
<!-- Third Class -->
<!-- ************ -->
<section id="class-3">
<h2>Third Class</h2>
<p>Jeff O'Leary</p>
</section> <section>
<h4>Agenda</h4>
<p class="fragment">Quick refresher</p>
<p class="fragment">Navigation</p>
<p class="fragment">Break time!</p>
<p class="fragment">Auto Layout</p>
</section>
<section>
<h4>Goals</h4>
<p class="fragment">What is a navigation stack</p>
<p class="fragment">Who coordinates and controls navigation</p>
<p class="fragment">How to navigate throughout an app</p>
<p class="fragment">What is Auto Layout</p>
<p class="fragment">What is the benefit of Auto Layout</p>
<p class="fragment">How do I use Auto Layout</p>
<aside class="notes">
The goal of this class is by the end of the night, you will understand...
</aside>
</section>
<section>
<h4>Goals</h4>
<p class="fragment">If these goals aren't met, I'm doing something wrong. Please help me be a better teacher, ask any and all questions!</p>
<br/>
<p class="fragment">Any follow up questions or clarification, feel to use the anonymous email provided - [email protected]<br/>@GDI.Question!</p>
<br/>
<p class="fragment">my email - [email protected]</p>
</section>
<section>
<p>Xcode has tons of panels and toolbars </p>
<p class="fragment">Here is a great cheat sheet reference that provides a thorough tour of Xcode in just a few slides</p>
<a href="http://bit.ly/1BcjmI5" class="fragment">http://bit.ly/1BcjmI5</a>
<p class="fragment">(will put it in Slack chat as well)</p>
</section>
<section>
<h2>What we've already covered</h2>
<p class="fragment">Objects</p>
<p class="fragment">Class vs. Instance</p>
<p class="fragment">Properties vs. Functions</p>
<p class="fragment">Subclasses</p>
<aside class="notes">
We'll be going over these core concepts and how they apply to what we'll be learning tonight.
Class is like a "type" of something, the instance is an object of that Class or "type". Properties are something an instance HAS while functions are something an instance DOES. Subclasses for example, UILabel is a subclass of UIView. A subclass inherits everything from its parent class and more can be added to it.
</aside>
</section>
<section>
<h2>Navigation</h2>
<p class="fragment">Navigation Interface</p>
<p class="fragment">UINavigationController</p>
<p class="fragment">StoryBoard Segues</p>
<p class="fragment">UITabBarController</p>
</section>
<section>
<br/>
<br/>
<br/>
<h2>Navigation Interface</h2>
</section>
<section>
<p class="fragment">The views of a navigation interface</p>
<img class="fragment" src="images/NavigationViews_2x.png" style="width: 100%; height:100%;">
<aside class="notes">
UIWindow class (window in the image) provides an area for displaying an app's views and to distribute events to the views.
Usually, an app has only one window and the window contains a root view controller which is the first view controller in the navigation stack.
The navigation view here is the part of the UINavigationController and can send events to the navigation controller.
The tab bar view is part of the UITabBarController and can send events to the tab bar controller.
^^All provided by iOS and customizable, however, the positioning of where they are layered should not be altered.
Lastly, there are the views you have created and can navigate to/from.
</aside>
</section>
<section>
<br/>
<br/>
<br/>
<h2>UINavigationController</h2>
</section>
<section>
<p>UINavigationController</p>
<img class="fragment" src="images/nav_controllers_objects.jpg" style="width: 100%; height:100%;">
<aside class="notes">
UINavigationController creates and is responsible for the navigation bar and tool bar. The navigation controller sets itself as the navigation bar's delegate so it can receive messages such as, "back button touched."
The navigation controller manages the navigation stack, which is a "last-in, first-out" collection of custom view controller objects. The first item added to the stack becomes the <i>root view controller</i> which never gets 'popped' off the stack.
The navigation controller’s primary responsibility is to respond to user actions by pushing new content view controllers onto the stack or popping content view controllers off of the stack.
Each content view controller in the stack configures and pushes the content view controller that is on top of it in the stack.
The navigation controller provides a back button on the navigation bar that pops the topmost view controller automatically when the user taps it.
</aside>
</section>
<section>
<p>Creating a navigation interface in code:</p>
<pre class="fragment" style="width :1100px"><code>
- (void)applicationDidFinishLaunching:(UIApplication *)application
{
UIViewController *myViewController = [[MyViewController alloc] init];
UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:myViewController];
self.window.rootViewController = navigationController;
[self.window makeKeyAndVisible];
}
</code></pre>
<aside class="notes">
First line, we allocate and initialize our main view controller. Then, we set the main view controller as the root view controller (the very first viewcontroller in the navigation stack) while we allocate and initialize our UINavigationController.
Next, we take our app's UIWindow, which is provided to us by Xcode when we create our app and set the root view controller as the navigation controller. Doing this allows the navigation controller access to the window's navigation stack. Think of the outline of your screen as the window.
The UIWindow class defines an object known as a window that manages and coordinates the views an app displays on a device screen. Unless an app can display content on an external device screen, an app has only one window.
"makeKeyAndVisible" - This is a convenience method to make the receiver the main window and displays it in front of other windows at the same window level or lower. You can also hide and reveal a window using the inherited hidden property of UIView.
</aside>
</section>
<section>
<p class="fragment">User selects an item from a list and expects a detailed view of that item</p>
<pre class="fragment" style="width :1100px"><code>
UIViewController *itemDetailViewController = [UIViewController alloc] init];
[self.navigationController pushViewController:itemDetailViewController animated:YES];
</code></pre>
<br/>
<p class="fragment">User wants to return to the previous screen</p>
<p class="fragment"><i>(If the user used the back button, the navigation controller would do that for us)</i></p>
<pre class="fragment" style="width :1100px"><code>
[self.navigationController popViewControllerAnimated:YES];
</code></pre>
</section>
<section>
<p>Back up farther than the last screen</p>
<p class="fragment">Pop every view in the stack until you reach the root view controller</p>
<pre class="fragment"><code>
[self.navigationController popToRootViewControllerAnimated:YES];
</code></pre>
<p class="fragment">Remove a number of view controllers at a time</p>
<pre class="fragment" style="width :1200px"><code>
[self.navigationController popToViewController:viewControllerPositioned4thIntheStack animated:YES];
</code></pre>
<aside class="notes">
First example, removes all but the root view controller from the navigation stack.
Second example, use to back up more than one level at a time, use the popToViewController:animated: method. You might use this method in situations where you use a navigation controller to manage the editing of custom content (rather than presenting content modally). If the user decides to cancel the operation after you have pushed multiple edit screens, you can use this method to remove all of the editing screens at once, rather than one at a time.
The view controller that you want to be at the top of the stack. This view controller must currently be on the navigation stack.
</aside>
</section>
<section>
<p>Using UIViewController methods to display new screens</p>
<p class="fragment">Display a new view controller over the current view controller's content</p>
<pre class="fragment" style="width :1100px"><code>
[self presentViewController:viewControllerToDisplay animated:YES completion:nil];
</code></pre>
<p class="fragment">Then dismiss it</p>
<pre class="fragment"><code>
[self dismissViewControllerAnimated:YES completion:nil];
</code></pre>
</section>
<section>
<br/>
<br/>
<br/>
<h2>StoryBoard Segues</h2>
</section>
<section>
<p>StoryBoard Segues</p>
<p class="fragment">The simplest way to create and facilitate navigation throughout an iOS app</p>
<p class="fragment">All in one place! No code needed! Wow!</p>
<aside class="notes">
Storyboards allow adding a button to one view controller within the storyboard and control-select-dragging from that button to another view controller within the same storyboard. This connects the two view controllers through a segue. There are different options as to how the next view controller is displayed.
</aside>
</section>
<section>
<p>How to add segues in the StoryBoard</p>
<p class="fragment">Our pal "control+select+drag" is back and ready to make it happen!</p>
<img class="fragment" src = "images/interface_builder_adding_segue_2x.png" style="width: 100%; height:100%;">
<aside class="notes">
We have seen the control+select+drag action before to create our Interface Builder outlets for our buttons, labels and other subclasses of UIView. We can also use the control+select+drag to make segue connections between UIViewControllers within the same StoryBoard.
</aside>
</section>
<section>
<img class="fragment" src = "images/StoryboardSegues.png" style="width: 100%; height:100%;">
</section>
<section>
<p>Types of Segues</p>
<p class="fragment">Show</p>
<p class="fragment">Show Detail</p>
<p class="fragment">Present Modally</p>
<p class="fragment">Popover Presentation</p>
<p class="fragment">Custom</p>
<aside class="notes">
Show - Pushes the destination view controller onto the navigation stack, moving the source view controller out of the way (destination slides overtop from right to left), providing a back button to navigate back to the source - on all devices
Example: Navigating inboxes/folders in Mail
Show Detail - Replaces the detail/secondary view controller when in a UISplitViewController with no ability to navigate back to the previous view controller
Example: In Mail on iPad in landscape, tapping an email in the sidebar replaces the view controller on the right to show the new email
Present Modally - Presents a view controller in various different ways as defined by the Presentation option, covering up the previous view controller - most commonly used to present a view controller that animates up from the bottom and covers the entire screen on iPhone, but on iPad it's common to present it as a centered box overtop that darkens the underlying view controller and also animates up from the bottom
Example: Tapping the + button in Calendar on iPhone
Popover Presentation - When run on iPad, the destination appears in a small popover, and tapping anywhere outside of this popover will dismiss it. On iPhone, popovers are supported as well but by default if it performs a Popover Presentation segue, it will present the destination view controller modally over the full screen.
Example: Tapping the + button in Calendar on iPad (or iPhone, realizing it is converted to a full screen presentation as opposed to an actual popover)
Custom - You may implement your own custom segue and have control over its behavior.
</aside>
</section>
<section>
<p>Let's take a look at an example</p>
<a href="https://github.com/joleary1987/autolayout-example">https://github.com/joleary1987/autolayout-example</a>
<aside class="notes">
Open autolayout-sample Xcode project and show how to add another UIViewController, add a button to a previous UIViewController and how to connect them via Segue outlet (control+select+drag)
</aside>
</section>
<section>
<br/>
<br/>
<br/>
<h2>UITabBarController</h2>
</section>
<section>
<p class="fragment">Display a new view controller over the current view controller's content</p>
<img class="fragment" src = "images/tabbar_controllerviews.jpg" style="width: 100%; height:100%;">
<aside class="notes">
Each tab of a tab bar controller interface is associated with a custom view controller. When the user selects a specific tab, the tab bar controller displays the root view of the corresponding view controller, replacing any previous views.
You should never access the tab bar view of a tab bar controller directly. To configure the tabs of a tab bar controller, you assign the view controllers that provide the root view for each tab to the viewControllers property.
The order in which you specify the view controllers determines the order in which they appear in the tab bar. When setting this property, you should also assign a value to the selectedViewController property to indicate which view controller is selected initially. (You can also select view controllers by array index using the selectedIndex property.)
Tab bar items are configured through their corresponding view controller. To associate a tab bar item with a view controller, create a new instance of the UITabBarItem class, configure it appropriately for the view controller, and assign it to the view controller’s tabBarItem property. If you do not provide a custom tab bar item for your view controller, the view controller creates a default item containing no image and the text from the view controller’s title property.
If you assign a value to this view controller’s restorationIdentifier property, it preserves a reference to the view controller in the selected tab. At restore time, it uses the reference to select the tab with the same view controller.
</aside>
</section>
<section>
<p>Creating and setting the view controllers for each tab in code</p>
<pre class="fragment"><code style="width :900px">
UIViewController *firstTabViewController = [[UIViewController alloc] init];
UIViewController *secondTabViewController = [[UIViewController alloc] init];
UIViewController *thirdTabViewController = [[UIViewController alloc] init];
UIViewController *fourthTabViewController = [[UIViewController alloc] init];
UITabBarController *tabBarController = [[UITabBarController alloc] init];
tabBarController.viewControllers = @[firstTabViewController, <br/>secondTabViewController, thirdTabViewController, fourthTabViewController];
</code></pre>
<aside class="notes">
Here, we are allocating and initializing (4) UIViewControllers and (1) UITabBarController. viewControllers is a property of type NSArray on the UITabBarController class. We can use the following syntax to declare an array full of our view controllers.
</aside>
</section>
<section>
<p>Creating and using UITabBarControllers in Interface Builder</p>