0
1
00:00:00,370 --> 00:00:06,240
All right. So, now that we've added the basic functionality to our app which is simply displaying some
1

2
00:00:06,240 --> 00:00:13,660
text from array into a table view, the next step is to set it up so that we can start making some in-app
2

3
00:00:13,840 --> 00:00:14,760
purchases.
3

4
00:00:14,970 --> 00:00:22,170
Now in order to do that, I'm going to add a cell at the very bottom of all of our quotes that says, 
4

5
00:00:22,230 --> 00:00:23,200
"Buy more quotes."
5

6
00:00:23,340 --> 00:00:29,220
And when I click on that cell, it's going to trigger the purchasing process.
6

7
00:00:29,220 --> 00:00:30,900
So first things first,
7

8
00:00:30,900 --> 00:00:37,290
currently, we're only loading up six cells because we're looking at quotes to show and we're looking
8

9
00:00:37,290 --> 00:00:39,190
at the count which is six.
9

10
00:00:39,210 --> 00:00:45,540
Now, if we want to add that extra cell, then all we have to do is just add one. And now we'll always have
10

11
00:00:45,540 --> 00:00:50,110
one extra cell on top of all the cells we need to show the quotes.
11

12
00:00:50,160 --> 00:00:55,110
So, now that we have seven cells, but we only have data for six of them,
12

13
00:00:55,110 --> 00:01:05,100
so what we can do here is we can add an "if" statement that checks if the indexPath.row of the cell
13

14
00:01:05,100 --> 00:01:14,400
that we're trying to render the content form is less than quotesToShow.count, then we're going
14

15
00:01:14,400 --> 00:01:19,600
to populate it with text from the array that's quotesToShow.
15

16
00:01:19,890 --> 00:01:29,280
But if it's greater than that number, namely, if we've hit that last cell where indexPath is equal to
16

17
00:01:29,280 --> 00:01:29,660
6,j
17

18
00:01:29,670 --> 00:01:31,770
so remember we start counting from 0,
18

19
00:01:31,950 --> 00:01:41,550
so this one has an indexPath.row of 0, 1, 2, 3, 4, 5, 6, and that one is going to have a special cell text.
19

20
00:01:41,830 --> 00:01:48,670
So cell.textLabel.text is going to equal "Get More Quotes."
20

21
00:01:50,380 --> 00:01:53,380
And this is going to be our main Buy button.
21

22
00:01:53,380 --> 00:02:00,240
So in order to show that it's different from the rest of the cells, we're going to change its text color.
22

23
00:02:00,340 --> 00:02:08,680
So cell.textLabel.textColor = blue color, and we're going to use a Color Literal here.
23

24
00:02:08,680 --> 00:02:13,670
So if you start typing color and you can see you've got Color Literal being suggested,
24

25
00:02:13,750 --> 00:02:18,430
go ahead and double click on it, and you will get a little square.
25

26
00:02:18,440 --> 00:02:25,800
And now, if you double click on the square, we get a color picker including recently used colors.
26

27
00:02:25,900 --> 00:02:31,420
So I'm going to stick to the color that I've got in the theme of this app which is that kind of green
27

28
00:02:31,420 --> 00:02:36,840
bluey turquoise color, not very good at describing colors, but that one.
28

29
00:02:37,150 --> 00:02:40,060
And you can, of course, choose whatever it is that you wish,
29

30
00:02:40,180 --> 00:02:42,220
but make sure that it's visible.
30

31
00:02:42,400 --> 00:02:50,770
And then we're going to change the cell's accessoryType to something called a disclosureIndicator.
31

32
00:02:51,040 --> 00:02:54,910
And this has a control shaped like a chevron,
32

33
00:02:54,910 --> 00:03:02,800
so like a little right-angle bracket, and this control indicates the user that tapping the cell triggers
33

34
00:03:02,980 --> 00:03:04,090
an action.
34

35
00:03:04,090 --> 00:03:10,150
So that means that we can use this to indicate to the user that you can actually press on the cell and
35

36
00:03:10,150 --> 00:03:11,610
something will happen.
36

37
00:03:11,800 --> 00:03:15,870
So let's go ahead and run our app and see what that looks like so far.
37

38
00:03:21,360 --> 00:03:28,700
So we currently have six quotes and the very last cell is this button that says, "Get More quotes," with
38

39
00:03:28,710 --> 00:03:35,810
our little disclosureIndicator and our text color being the same as this one which looks pretty neat,
39

40
00:03:35,850 --> 00:03:37,230
I think.
40

41
00:03:37,260 --> 00:03:44,670
All right. So, now that we're done with that, the next step is to detect a touch on that cell.
41

42
00:03:44,700 --> 00:03:52,140
So I'm going to go ahead and delete all of the rest of this comment and template code that Apple gave
42

43
00:03:52,140 --> 00:03:54,100
us because it's not very useful,
43

44
00:03:54,240 --> 00:03:56,090
and we're going to write it ourself.
44

45
00:03:56,280 --> 00:04:01,930
So currently, we've got a pragma MARK up here that's the Table view data source method.
45

46
00:04:02,190 --> 00:04:08,100
And I'm just going to copy it and create another one down here which are going to be the Table view
46

47
00:04:08,390 --> 00:04:15,390
delegate methods. And one of the main delegate methods that we use all the time is, of course,
47

48
00:04:15,390 --> 00:04:24,130
tableView didSelectRowAt indexPath. And you can see that you've got two methods being suggested and they
48

49
00:04:24,130 --> 00:04:27,810
look pretty much identical on here.
49

50
00:04:27,910 --> 00:04:35,020
Now, they are actually not identical because if I hit enter on the top one, you can see that I get a normal
50

51
00:04:35,050 --> 00:04:37,750
function being autosuggested here.
51

52
00:04:37,900 --> 00:04:43,720
And I'll also get an error saying that I need to put the 'override' keyword.
52

53
00:04:43,750 --> 00:04:51,490
Now, whereas if I chose the one that is the second one in that list, then I get that override keyword for
53

54
00:04:51,490 --> 00:04:52,540
free.
54

55
00:04:52,540 --> 00:04:58,600
Now, if you remember the reason why we need that override keyword is because we're inheriting from 
55

56
00:04:58,600 --> 00:04:59,520
UITableViewController,
56

57
00:04:59,830 --> 00:05:07,170
and that class already has the method tableView, didSelectRowAt indexPath and we're overriding its
57

58
00:05:07,180 --> 00:05:11,130
functionality to provide our own functionality.
58

59
00:05:11,140 --> 00:05:14,070
So this is the line of code that we need.
59

60
00:05:14,080 --> 00:05:22,870
So inside here, we're going to check to see if the row that was selected has a indexPath.row
60

61
00:05:23,020 --> 00:05:26,110
of the last item in this table view.
61

62
00:05:26,110 --> 00:05:34,660
So that is, again, going to be number 6 because 0, 1, 2, 3, 4, 5, 6, and that is going to be equal to the number
62

63
00:05:34,750 --> 00:05:36,210
of quotes to show.
63

64
00:05:36,370 --> 00:05:44,860
So if indexPath.row is equal to quotesToShow.counts, then, in that case, we're pretty certain
64

65
00:05:44,860 --> 00:05:51,820
that this button got pressed, and then we're going to do something special. Before we do anything special,
65

66
00:05:51,820 --> 00:05:53,900
let's just check to make sure it works.
66

67
00:05:54,040 --> 00:06:00,720
Let's write print "Buy quotes clicked" and let's hit Run.
67

68
00:06:00,730 --> 00:06:04,560
And now if I click on this one, you can see "Buy quotes clicked."
68

69
00:06:04,600 --> 00:06:05,440
Perfect.
69

70
00:06:05,440 --> 00:06:07,660
So it's now working.
70

71
00:06:07,720 --> 00:06:15,370
If this line of code is at all confusing to you and why we're using quotes ToShow.count, then
71

72
00:06:15,460 --> 00:06:21,190
make sure that you haven't skipped any of the lectures before and you've completed all of the previous
72

73
00:06:21,190 --> 00:06:23,530
modules before you got to this current module.
73

74
00:06:23,530 --> 00:06:28,750
I know that it's really tempting to just go straight for the one that you really need right now.
74

75
00:06:28,750 --> 00:06:31,110
But without understanding everything,
75

76
00:06:31,180 --> 00:06:34,660
it's very difficult to implement this into your own app.
76

77
00:06:34,660 --> 00:06:40,860
So I recommend going through all of the modules in the order that they are in the curriculum.
77

78
00:06:40,920 --> 00:06:42,440
It's really important.
78

79
00:06:42,460 --> 00:06:46,280
I can't stress enough that you don't skip the modules.
79

80
00:06:46,510 --> 00:06:46,990
Okay.
80

81
00:06:47,050 --> 00:06:54,920
Either way, we've now determined that the last button got clicked and we can delete this print statement.
81

82
00:06:55,050 --> 00:07:02,290
And now this is the place where we are going to implement the buying of our in-app purchase.
82

83
00:07:02,320 --> 00:07:09,470
So I'm going to call a method called buyPremiumQuotes and this method doesn't yet exist,
83

84
00:07:09,490 --> 00:07:12,280
so let's go ahead and create it down him.
84

85
00:07:12,280 --> 00:07:17,310
Now, in order to create it, I'm going to create a new section. So I'm going to create a new pragma MARK
85

86
00:07:17,350 --> 00:07:24,820
and this one is going to be called the in-app purchase methods, and here I'm going to create that function
86

87
00:07:25,110 --> 00:07:28,790
called buyPremiumQuotes.
87

88
00:07:28,930 --> 00:07:34,630
And let's just make sure that we spelled it right by checking to see that this actually changes color
88

89
00:07:35,320 --> 00:07:42,940
and we don't get any errors by hitting command B to just force a build and compile all of our code to
89

90
00:07:42,940 --> 00:07:45,390
make sure that everything is working. Okay.
90

91
00:07:45,400 --> 00:07:53,530
So, now when the user clicks on this button, then this part triggers and this function will get called.
91

92
00:07:53,530 --> 00:08:00,220
Now, there's just one slight problem here and that's when you press on this button, the cell does not
92

93
00:08:00,220 --> 00:08:06,460
get deselected automatically. And it looks a bit weird because, normally, when you click on a cell, it
93

94
00:08:06,460 --> 00:08:09,510
should turn gray, and then quickly turn back to white.
94

95
00:08:09,550 --> 00:08:12,810
That looks a lot better than having it permanently selected.
95

96
00:08:12,970 --> 00:08:19,700
And we can, of course, get rid of that by simply adding a line of code that says 
96

97
00:08:19,970 --> 00:08:27,740
tableView.deselectRow at indexPath, and that's, of course, the current indexPath, 
97

98
00:08:27,790 --> 00:08:28,440
animated.: true.
98

99
00:08:28,640 --> 00:08:36,220
And now when we select that cell, it will de-select itself automatically with a quick animation and that
99

100
00:08:36,220 --> 00:08:41,820
just makes it so much nicer in terms of the user experience.
100

101
00:08:42,040 --> 00:08:49,050
Okay. So, in this lesson, we have set up our cell that has the text of "Get More Quotes."
101

102
00:08:49,150 --> 00:08:55,990
We change its color and disclosureIndicator to make it look like it's clickable. And we've also got
102

103
00:08:56,050 --> 00:09:02,290
a delegate method that gets triggered when it gets pressed, and we're using it to trigger a function
103

104
00:09:02,290 --> 00:09:07,570
called buyPremiumQuotes so that we can start processing the in-app purchases.
104

105
00:09:07,600 --> 00:09:15,340
Now, in the next lesson, we're going to be looking at StoreKit and the StoreKit API in order to query
105

106
00:09:15,370 --> 00:09:22,360
the Apple databases and implement the code to buy our premium quotes in-app purchase.
106

107
00:09:22,370 --> 00:09:25,660
So for all of that and more, I will see you on the next lesson.