1
00:00:07,140 --> 00:00:10,540
Hey everybody what's going on this is Caleb with devah slopes dot com.

2
00:00:10,540 --> 00:00:16,720
And in this video we're going to set up our data model for an item because we need actually to create

3
00:00:16,720 --> 00:00:19,290
the model layer before we can fill our collection view.

4
00:00:19,510 --> 00:00:24,550
So let's go ahead and let's create that model layer then we're going to go ahead and create a helper

5
00:00:24,550 --> 00:00:30,700
file that basically instantiates an array full of different food items and then we can use that to actually

6
00:00:30,700 --> 00:00:34,120
wire up our collection view and present cells of information.

7
00:00:34,120 --> 00:00:35,760
It's going to be super cool.

8
00:00:35,770 --> 00:00:40,410
So pull open your project and you know what we need to set up some folders here.

9
00:00:40,600 --> 00:00:43,230
We need to set up groups for Model View and controller.

10
00:00:43,240 --> 00:00:47,190
And eventually we're going to need it for extensions and enumerations et cetera et cetera.

11
00:00:47,230 --> 00:00:54,490
So create a new group call it controller and we can drag in both of our view controller files here just

12
00:00:54,490 --> 00:00:56,560
a way to organize them next.

13
00:00:56,560 --> 00:01:02,710
Let's go ahead and create a view group that will be for custom view subclasses right click newgroup

14
00:01:03,250 --> 00:01:06,190
model and that is where our model will go.

15
00:01:06,190 --> 00:01:08,140
Now I'm going to create another folder here.

16
00:01:08,380 --> 00:01:14,720
And let's go ahead and just say helper's you might want to say like utilities or helpers or whatever

17
00:01:14,980 --> 00:01:16,630
but it'll be helper files.

18
00:01:16,990 --> 00:01:23,010
And so let's first create our item model and then we're going to use that to create an array of items.

19
00:01:23,020 --> 00:01:31,450
So right click on model wups not like that like so click new file and go ahead and create a swift File.

20
00:01:31,480 --> 00:01:36,190
We're going to call this item because that's going to be the name of the class and create it.

21
00:01:36,320 --> 00:01:36,580
OK.

22
00:01:36,600 --> 00:01:43,300
Close the assistant editor and inside of this we're going to go ahead and type class item.

23
00:01:43,900 --> 00:01:45,870
And we're going to set three properties.

24
00:01:45,970 --> 00:01:53,170
If you think about it every item that we use are every every food item we want to display is going to

25
00:01:53,170 --> 00:01:55,640
have a picture a name and a price.

26
00:01:55,720 --> 00:01:58,840
So we're going to go ahead and create some variables here.

27
00:01:59,000 --> 00:02:01,190
Var image of you image.

28
00:02:01,210 --> 00:02:01,540
And.

29
00:02:01,560 --> 00:02:02,170
Whoops.

30
00:02:02,410 --> 00:02:07,390
We need to import UI kits so we have access to you image.

31
00:02:07,390 --> 00:02:08,660
There we go.

32
00:02:08,720 --> 00:02:09,730
That looks great.

33
00:02:09,760 --> 00:02:21,220
And now let's go ahead and set up var name of type string and var WIPs var price of type double K and

34
00:02:21,250 --> 00:02:23,550
that's great but it's not very safe.

35
00:02:23,560 --> 00:02:29,610
So we're going to go ahead and make these variables publicly available but privately set.

36
00:02:29,800 --> 00:02:33,180
OK so they can only be set within this class which is really neat.

37
00:02:33,190 --> 00:02:38,990
So go ahead and type public private set.

38
00:02:39,290 --> 00:02:45,770
And that basically denotes the variable is public it's publicly accessible but it's only settable in

39
00:02:45,770 --> 00:02:47,550
this class which is super awesome.

40
00:02:47,570 --> 00:02:52,300
Like I didn't know that you could do that for a long time and then when I discovered that I was like.

41
00:02:53,300 --> 00:02:53,750
Anyway.

42
00:02:53,900 --> 00:03:01,610
So let's go ahead and let's continue this make this one public private set going to go back and fix

43
00:03:01,610 --> 00:03:04,030
my spelling I'm having typing issues today.

44
00:03:04,430 --> 00:03:05,110
Geez.

45
00:03:05,240 --> 00:03:05,780
All right.

46
00:03:05,870 --> 00:03:11,460
So next public private set.

47
00:03:11,600 --> 00:03:16,340
And this is just like when we do data encapsulation but it saves you from having to create duplicate

48
00:03:16,340 --> 00:03:18,560
variables with a little underscore.

49
00:03:18,740 --> 00:03:21,430
It just saves you a lot of code and extra time.

50
00:03:21,440 --> 00:03:28,270
So now we can go ahead and create an initialiser type init and pass in the parameters image of type

51
00:03:28,280 --> 00:03:35,880
you I image name of type string and price of type double.

52
00:03:35,960 --> 00:03:36,950
Lovely.

53
00:03:36,950 --> 00:03:37,250
Next.

54
00:03:37,250 --> 00:03:37,820
Go ahead and type.

55
00:03:37,850 --> 00:03:47,360
Self image equals image self name equals name and self-doubt price equals price of course we're referring

56
00:03:47,570 --> 00:03:51,600
to these variables with self and setting the ones that are coming in from our function.

57
00:03:51,650 --> 00:03:53,970
So our item class is now finished.

58
00:03:53,960 --> 00:03:56,090
If you build and run you'll see that error goes away.

59
00:03:56,090 --> 00:04:01,940
Now that we have initializers which is super helpful and now we're going to go ahead and create six

60
00:04:01,940 --> 00:04:07,280
food items and an array of all of those food items that we can use to present our data in our class.

61
00:04:07,280 --> 00:04:11,600
Now this of course is static data just for the simplicity of this course to make sure that we're not

62
00:04:11,600 --> 00:04:17,400
having to do a bunch of fancy server calls and that we can focus on the main focus which is in-app purchases.

63
00:04:17,630 --> 00:04:21,380
So go ahead and right click on helper's and let's create that swift file.

64
00:04:21,390 --> 00:04:30,990
Now go ahead and click new file swift file and we'll call this food items like so press create.

65
00:04:31,130 --> 00:04:35,510
And now we're going to create six instances of item for our different food items.

66
00:04:35,510 --> 00:04:40,420
Now I don't know if you looked carefully at our food here but we have salmon.

67
00:04:40,550 --> 00:04:41,170
OK.

68
00:04:41,510 --> 00:04:45,340
We've got a burger a burrito.

69
00:04:45,440 --> 00:04:48,260
Spaghetti pizza and salad.

70
00:04:48,260 --> 00:04:51,860
I don't know if your mouth is watering after that but I was looking at these photos like oh I need to

71
00:04:51,860 --> 00:04:53,030
go on lunch.

72
00:04:53,270 --> 00:04:54,040
But no.

73
00:04:54,200 --> 00:04:55,370
The course must come first.

74
00:04:55,370 --> 00:04:57,890
So let's go ahead and let's create these instances.

75
00:04:57,890 --> 00:04:58,950
Let's start with the salmon.

76
00:04:58,970 --> 00:05:04,960
So let salmon equals item and the image if you remember was food one.

77
00:05:04,970 --> 00:05:12,800
So let's go ahead and type you image and we can do your image named and pass it a string value of food

78
00:05:12,800 --> 00:05:13,720
one.

79
00:05:13,730 --> 00:05:20,230
Now of course we need to unwrap it and we need to give it a name which of course is going to be salmon.

80
00:05:20,300 --> 00:05:22,260
The price we're going to use 999.

81
00:05:22,460 --> 00:05:23,390
OK.

82
00:05:23,720 --> 00:05:27,920
Now I'm going to actually use this price repeatedly so I'm going to create a variable or a constant

83
00:05:27,920 --> 00:05:36,380
here called default price and I'll add it to 999 and I'll pass in the default price here just makes

84
00:05:36,380 --> 00:05:38,460
it a little easier.

85
00:05:38,510 --> 00:05:45,380
It says use of unresolved identifier Oh we need to also set up you a kit here and now we have access

86
00:05:45,380 --> 00:05:46,040
to that.

87
00:05:46,100 --> 00:05:51,350
Now this is lame of me but I'm going to go ahead and just copy and paste this six times and then change

88
00:05:51,350 --> 00:05:56,590
the names to cheeseburger cheeseburger was food too.

89
00:05:56,630 --> 00:06:02,110
The name is cheeseburger and the price is going to be the same.

90
00:06:02,150 --> 00:06:04,500
Next is burrito.

91
00:06:04,520 --> 00:06:05,350
That is food.

92
00:06:06,230 --> 00:06:10,260
The name is burrito and price same.

93
00:06:10,280 --> 00:06:13,370
Next is spaghetti food for

94
00:06:16,210 --> 00:06:19,150
spaghetti for the name and default price.

95
00:06:19,240 --> 00:06:21,400
Pizza is food.

96
00:06:21,400 --> 00:06:27,240
Five pizza is the name with a capital letter and then we're going to do.

97
00:06:27,250 --> 00:06:27,890
What's the last one.

98
00:06:27,890 --> 00:06:28,820
Salad.

99
00:06:29,170 --> 00:06:31,110
And that's food six.

100
00:06:31,210 --> 00:06:34,490
And of course the name is salad.

101
00:06:34,960 --> 00:06:39,470
And now we have six instances of item that we can use in our class.

102
00:06:39,550 --> 00:06:41,490
But we need to create an array.

103
00:06:41,500 --> 00:06:45,000
We're going to use this as the array that collection you pulls from.

104
00:06:45,190 --> 00:06:54,850
So go ahead and type Let us with one food items items which is we need to explicitly tell it that it

105
00:06:54,850 --> 00:06:59,770
is of type item an array of type item and we're going to go ahead and pass in all of our items so we're

106
00:06:59,770 --> 00:07:11,910
going to start with whip's salmon then cheeseburger then burrito then spaghetti then pizza then salad

107
00:07:12,800 --> 00:07:14,090
K super fun.

108
00:07:14,090 --> 00:07:16,140
So there are our food items.

109
00:07:16,180 --> 00:07:17,180
Are good to go.

110
00:07:17,330 --> 00:07:22,040
We have all six here and we can use this right now it's publicly accessible since it's not inside the

111
00:07:22,040 --> 00:07:27,740
scope of another class and I don't know about you but I really want to go try this out.

112
00:07:27,980 --> 00:07:33,380
Let's go ahead and let's go back to storefront Visi and what we're going to do is we're going to go

113
00:07:33,380 --> 00:07:35,060
ahead and basically

114
00:07:39,500 --> 00:07:41,270
I don't know about you but I want to try this out.

115
00:07:41,270 --> 00:07:45,970
So we're going to build the subclass for our collection if you sell.

116
00:07:46,130 --> 00:07:51,290
And we're going to use that subclass to instantiate our cells present them in our view controller and

117
00:07:51,290 --> 00:07:52,110
more.

118
00:07:52,190 --> 00:07:57,430
So go ahead and are right click on the View folder like so click new file.

119
00:07:57,560 --> 00:08:00,810
And this one's going to be a cocoa touch class just to help us out.

120
00:08:00,840 --> 00:08:07,730
Going to use you collection view cell like so and we'll just call this item sell because it's going

121
00:08:07,730 --> 00:08:13,340
to use the item subclass so press next click Create.

122
00:08:13,340 --> 00:08:19,640
And now inside our class we need to basically set up some IVI actions and we are sorry some IB outlets

123
00:08:19,940 --> 00:08:25,910
and to do that go to make that storyboard we're going to go ahead and open the assistant editor click

124
00:08:26,000 --> 00:08:30,560
click on a storefront Visi and we need to actually go ahead and find.

125
00:08:30,860 --> 00:08:32,180
Well you know what.

126
00:08:32,210 --> 00:08:33,110
Sorry.

127
00:08:33,110 --> 00:08:34,060
Click on your collection.

128
00:08:34,070 --> 00:08:35,930
You sell in the document outline.

129
00:08:36,170 --> 00:08:43,340
And we're going to set the identity to be items sell like so then while we're at it go ahead and go

130
00:08:43,340 --> 00:08:48,280
into the reuse identifier member it was yelling at us about that earlier type items sell.

131
00:08:48,380 --> 00:08:52,820
It's traditional to use a lowercase I for the identifier.

132
00:08:53,180 --> 00:08:54,130
So just do that.

133
00:08:54,290 --> 00:09:01,580
And now when we go in we should be able to maybe do a clean and build and you know what we might have

134
00:09:01,580 --> 00:09:07,910
to actually go out of the storyboard go back in choose our items sell and look at that.

135
00:09:07,910 --> 00:09:11,250
Now we have well we did let it go.

136
00:09:11,480 --> 00:09:15,910
We just had access what craziness.

137
00:09:15,930 --> 00:09:16,160
OK.

138
00:09:16,170 --> 00:09:22,660
Go back and go back like so select the cell and we should.

139
00:09:22,860 --> 00:09:26,740
Sometimes it doesn't like he doesn't like me very much.

140
00:09:27,030 --> 00:09:32,850
Well you know what sometimes if this happens you can just save and quit X could actually go back into

141
00:09:32,850 --> 00:09:38,090
X code Bayda and pull open your project.

142
00:09:38,100 --> 00:09:39,440
Here we go.

143
00:09:41,150 --> 00:09:42,970
Go ahead and select the cell again.

144
00:09:42,990 --> 00:09:45,030
And now we should be able to access.

145
00:09:45,030 --> 00:09:45,540
There we go.

146
00:09:45,540 --> 00:09:50,220
Access the project go into there and choose items so lovely.

147
00:09:50,550 --> 00:09:55,230
So now we're going to go ahead and our image of you we're going to right click and drag and we're going

148
00:09:55,230 --> 00:09:58,600
to go ahead and call this item image view.

149
00:09:59,120 --> 00:10:00,080
OK.

150
00:10:00,300 --> 00:10:04,050
We're going to go ahead and right click and drag from the label and call this item

151
00:10:06,740 --> 00:10:14,920
name label right click and drag from item pricings call item price label.

152
00:10:15,540 --> 00:10:17,300
And now we are all connected.

153
00:10:17,300 --> 00:10:21,740
So what we need to do in order to actually configure the data and present it in this cell is create

154
00:10:21,740 --> 00:10:24,410
a function called configure cell.

155
00:10:24,410 --> 00:10:32,090
Now go ahead and return down and type that function now phunk configure cell and we're going to go ahead

156
00:10:32,120 --> 00:10:40,040
and call configure cell for item which is going to let us basically pass in an instance of item and

157
00:10:40,040 --> 00:10:44,010
then set all of our properties here which is perfect because that's exactly the subclass we have.

158
00:10:44,210 --> 00:10:49,520
Now for item doesn't make sense for the parameter so I'm going to use just item as an internal parameter

159
00:10:50,000 --> 00:10:52,750
and then that's going to be of type item.

160
00:10:53,190 --> 00:10:53,800
OK.

161
00:10:54,170 --> 00:10:57,120
So now to set this up we can just call item image view.

162
00:10:57,140 --> 00:11:08,510
Image equals item dot image item name label text is going to it's going to be equal to item name and

163
00:11:08,540 --> 00:11:13,080
item price label dot text.

164
00:11:13,230 --> 00:11:17,510
It's going to be equal to item price.

165
00:11:17,530 --> 00:11:22,400
But if I build this you'll notice cannot assign type double type strength.

166
00:11:22,540 --> 00:11:23,260
That makes sense.

167
00:11:23,260 --> 00:11:29,770
So what we're going to use is string and inside of the string class we can go ahead and call describing

168
00:11:30,550 --> 00:11:36,080
and pass in anything and it will basically create a string that describes whatever value that is.

169
00:11:36,100 --> 00:11:38,560
So we are now ready to use this cell.

170
00:11:38,560 --> 00:11:40,990
We set up an identifier we set up everything else.

171
00:11:41,110 --> 00:11:45,250
So let's do that now we're going to go ahead and return.

172
00:11:45,250 --> 00:11:47,320
Remember this is number of items in section.

173
00:11:47,320 --> 00:11:50,020
This tells it how many cells it should produce.

174
00:11:50,080 --> 00:11:55,110
We can use food items because remember that's an array of all of the items we want to show.

175
00:11:55,300 --> 00:11:59,780
And we can call DOT count because that will return the number of elements in that section.

176
00:11:59,780 --> 00:12:02,400
Now we need to configure the cell so to do that.

177
00:12:02,410 --> 00:12:04,900
I like to use guard because it's very safe.

178
00:12:04,980 --> 00:12:12,130
We're going to use guard light like so guard let cell equals and we can use our collection view to dequeue

179
00:12:12,130 --> 00:12:13,330
a reusable cell.

180
00:12:13,480 --> 00:12:20,710
So go ahead and type collection view dequeue reusable cell with identifier for index path.

181
00:12:20,720 --> 00:12:22,720
Now we have a reuse identifier.

182
00:12:22,840 --> 00:12:28,750
It's a string and item cell is that which is the one that we just created and the index path we can

183
00:12:28,750 --> 00:12:29,870
just get from the function.

184
00:12:29,890 --> 00:12:34,310
So go ahead and pass in the index path like so now with guard let.

185
00:12:34,330 --> 00:12:40,710
We need to basically create a secondary condition in case this is not possible we need to return something.

186
00:12:40,720 --> 00:12:42,780
So go ahead and call.

187
00:12:42,810 --> 00:12:49,540
Else and we're going to just go ahead and return an empty collection to you sell because it does ask

188
00:12:49,540 --> 00:12:50,600
us to return one.

189
00:12:50,620 --> 00:12:53,220
So if we can't do this we'll just return an empty cell.

190
00:12:53,340 --> 00:12:53,890
It's safe.

191
00:12:53,890 --> 00:12:56,020
It keeps the app from crashing.

192
00:12:56,020 --> 00:13:00,710
So it's giving us an error here what's the deal says must have optional binding.

193
00:13:00,730 --> 00:13:02,070
Oh yes that's right.

194
00:13:02,080 --> 00:13:04,590
So we are cueing it as a reusable cell.

195
00:13:04,600 --> 00:13:09,660
But if you look at only D cues AUI collection vessel not an item cell.

196
00:13:09,730 --> 00:13:11,020
That's the subclass we just made.

197
00:13:11,020 --> 00:13:20,020
So let's go ahead and let's cast it as like so optionally as an item cell K because remember this operates

198
00:13:20,020 --> 00:13:23,570
under the condition of if it's possible it's going to do it.

199
00:13:23,740 --> 00:13:29,830
So we're basically taking an optional and using guard let if there's a value we turn it into a non-optional

200
00:13:29,830 --> 00:13:30,920
which is pretty cool.

201
00:13:31,180 --> 00:13:32,050
So that's great.

202
00:13:32,050 --> 00:13:33,510
We now have a cell.

203
00:13:33,550 --> 00:13:39,910
Now we just need to configure it so go ahead and call sell configure sell for item but where are we

204
00:13:39,910 --> 00:13:41,520
going to get the item.

205
00:13:41,680 --> 00:13:43,280
Our food items array.

206
00:13:43,300 --> 00:13:49,320
So let's go ahead and let's create a constant here called Let item equal food items.

207
00:13:49,540 --> 00:13:53,220
But how are we going to pull out the right one at the right place.

208
00:13:53,230 --> 00:13:58,870
We use our index path so if the index path is zero meaning the first item it will pull out the item

209
00:13:58,870 --> 00:14:00,720
at index 0 for food items.

210
00:14:00,730 --> 00:14:08,020
So just call index path but in order to actually get an integer number we need to call index path row.

211
00:14:08,290 --> 00:14:13,330
And that will give us the exact number for the cell which is perfect when this cell is configured will

212
00:14:13,330 --> 00:14:15,330
pass in the item like so.

213
00:14:15,550 --> 00:14:19,570
And then at the very end we just return the cell.

214
00:14:19,750 --> 00:14:22,480
Now if I build and run we shouldn't see any errors.

215
00:14:23,950 --> 00:14:26,040
Let's just double check.

216
00:14:26,200 --> 00:14:27,520
OK let's go test this.

217
00:14:27,520 --> 00:14:28,600
Let's see if it worked.

218
00:14:28,600 --> 00:14:34,360
We're going to build and run it to the simulator and we're going to go see if this works our table view

219
00:14:34,480 --> 00:14:37,560
should pop up it should load full of cells.

220
00:14:37,600 --> 00:14:42,350
Let's see how we did boom.

221
00:14:42,470 --> 00:14:43,100
Look at that.

222
00:14:43,100 --> 00:14:44,270
We have an app.

223
00:14:44,360 --> 00:14:45,350
Guys we just built an app.

224
00:14:45,350 --> 00:14:46,120
Look at that.

225
00:14:46,160 --> 00:14:51,530
We have a table view cell here that we have all of these cells filled with images filled with a name

226
00:14:51,560 --> 00:14:54,110
and description et cetera et cetera.

227
00:14:54,150 --> 00:14:54,890
Whew.

228
00:14:55,100 --> 00:15:00,650
In the next video we're going to set up did select sell an index path or did select road index path

229
00:15:00,920 --> 00:15:02,660
whatever it is for the collection view.

230
00:15:02,870 --> 00:15:07,400
And we're going to enable it to present detail VC and pass in all this good data.

231
00:15:07,400 --> 00:15:10,830
So let's head over to the next video and let's do that now.