en/subtitles/14. Persistence and Documents Demo.srt

﻿1
00:00:00,401 --> 00:00:04,603
[MUSIC]                         

2
00:00:04,671 --> 00:00:09,474
Stanford University.            
>> All right,                   

3
00:00:09,543 --> 00:00:14,046
well, welcome to lecture        
number 14 of Stanford CS193P,   

4
00:00:14,114 --> 00:00:18,884
fall of 2017, 18. So, I'm       
going to finish off the thing   

5
00:00:18,953 --> 00:00:22,254
we had about the documents      
last time, I was hoping to      

6
00:00:22,323 --> 00:00:24,489
have finished that last time.   
So we're kind of rushed for     

7
00:00:24,558 --> 00:00:27,025
time this time, especially      
since we're gonna get kicked    

8
00:00:27,093 --> 00:00:29,794
out again for a midterm right   
after. And then I'm gonna       

9
00:00:29,863 --> 00:00:32,364
launch into a long demo that's  
gonna basically demonstrate     

10
00:00:32,432 --> 00:00:35,300
all of the stuff we             
talked about on Monday.         

11
00:00:35,368 --> 00:00:39,504
All right, so we did all that   
stuff on Monday so that we      

12
00:00:39,573 --> 00:00:43,075
could easily take whatever      
our document-based app is,      

13
00:00:43,143 --> 00:00:45,743
and store it in a document.     
We went all the way through     

14
00:00:45,812 --> 00:00:49,314
having UIDocument write things  
out to the file system.         

15
00:00:49,383 --> 00:00:52,751
Now we're gonna add a really    
cool layer of UI in the front   

16
00:00:52,819 --> 00:00:55,754
of that, so that users can      
pick the documents they want.   

17
00:00:55,822 --> 00:00:59,024
Rename them, move them around,  
all that right inside your      

18
00:00:59,093 --> 00:01:02,327
app. And the UI for this, as    
you can see the screenshot of,  

19
00:01:02,395 --> 00:01:05,597
looks a lot like the files      
app in iOS 11. In fact,         

20
00:01:05,666 --> 00:01:09,034
the files app in iOS 11 is      
probably just a very thin       

21
00:01:09,103 --> 00:01:12,104
layer on top of this UI,        
or this API,                    

22
00:01:12,172 --> 00:01:15,340
the                             
UIDocumentBrowserViewControl-   

23
00:01:15,408 --> 00:01:17,709
ler. So                         
how does this thing work,       

24
00:01:17,777 --> 00:01:20,378
this view controller? Well,     
the most important thing to     

25
00:01:20,447 --> 00:01:22,447
understand is that it's         
just a view controller, but     

26
00:01:22,516 --> 00:01:25,183
it's always the root            
view controller of              

27
00:01:25,251 --> 00:01:27,452
your application. So in other   
words, in your storyboard,      

28
00:01:27,521 --> 00:01:30,122
it's always got the little      
arrow that points to it. And    

29
00:01:30,190 --> 00:01:31,323
when you run your app,          

30
00:01:31,391 --> 00:01:33,926
it's gonna be the view          
controller users see first.     

31
00:01:33,994 --> 00:01:37,062
Then they'll pick whatever      
document they want, and         

32
00:01:37,131 --> 00:01:38,797
then your UI will take over.    

33
00:01:38,865 --> 00:01:41,166
Your view controller will       
come up in front of this one,   

34
00:01:41,234 --> 00:01:43,769
do whatever it does to show     
your document. All right, so    

35
00:01:43,837 --> 00:01:47,305
that's the fundamental          
architecture of this thing.     

36
00:01:47,374 --> 00:01:50,676
And one thing that's important  
to tell this little document    

37
00:01:50,744 --> 00:01:54,446
browser view controller is      
what types of files you open,   

38
00:01:54,514 --> 00:01:56,080
and you do that on your         
project settings. So            

39
00:01:56,149 --> 00:01:59,451
if you go to project settings   
underneath the info tab,        

40
00:01:59,519 --> 00:02:01,686
you gotta select your target,   
not the project, but            

41
00:02:01,755 --> 00:02:04,155
the target. Go to the info      
tab, and then inside there,     

42
00:02:04,224 --> 00:02:06,225
there's a little section        
there called document types.    

43
00:02:06,293 --> 00:02:08,793
Well, that's the types of       
documents you open, and         

44
00:02:08,862 --> 00:02:09,961
you just fill out this.         

45
00:02:10,030 --> 00:02:12,564
You can have multiple types     
when you fill out this little   

46
00:02:12,633 --> 00:02:14,800
form, like that one.            
In here, for example,           

47
00:02:14,868 --> 00:02:17,468
I've shown how to have JSON     
files be a kind of file that    

48
00:02:17,537 --> 00:02:20,505
you open, and it's pretty       
straightforward there.          

49
00:02:20,574 --> 00:02:23,108
The little things at the        
bottom there, the BundleType    

50
00:02:23,177 --> 00:02:25,644
and the HandleRank, are         
basically just saying, well,    

51
00:02:25,712 --> 00:02:28,613
is this like a primary type     
of file that you open?          

52
00:02:28,682 --> 00:02:32,217
Are you the owner of this type  
of file, or is it just some     

53
00:02:32,285 --> 00:02:35,587
other type that you can,        
that you know how to open,      

54
00:02:35,656 --> 00:02:38,456
etc. Now, you can have          
your own document type,         

55
00:02:38,525 --> 00:02:39,824
for example, for emojiart,      

56
00:02:39,893 --> 00:02:42,594
I'm not gonna get to it today   
because of time constraints.    

57
00:02:42,662 --> 00:02:46,531
But emojiart really wants to    
have its own document type,     

58
00:02:46,599 --> 00:02:50,002
.emojiart or something like     
that. And you set that up in    

59
00:02:50,070 --> 00:02:52,704
the section right below         
the document types,             

60
00:02:52,772 --> 00:02:56,108
called exported UTIs, UTI       
stands for Universal Type and   

61
00:02:56,176 --> 00:02:58,610
Identifier. And                 
you can invent your own UTI,    

62
00:02:58,679 --> 00:03:00,578
as long as it's a nice,         
unique name.                    

63
00:03:00,647 --> 00:03:04,549
Like here, I've used the name   
edu.stanford.cs193p.emojiart,   

64
00:03:04,617 --> 00:03:08,153
that's very likely to be        
a unique type identifier.       

65
00:03:08,222 --> 00:03:09,955
I just have to specify          
a couple of things,             

66
00:03:10,023 --> 00:03:11,723
most notably at                 
the bottom there,               

67
00:03:11,792 --> 00:03:14,592
the file name extension that    
goes with an emoji art,         

68
00:03:14,661 --> 00:03:19,631
I picked emojiart, .emojiart.   
And then once you set this up,  

69
00:03:19,699 --> 00:03:22,400
you can go back up to the       
document types one at the top,  

70
00:03:22,469 --> 00:03:25,137
and add this as a document      
type that you open.             

71
00:03:25,205 --> 00:03:28,706
Just like that, and yeah, and   
I explained the UTI there.      

72
00:03:28,775 --> 00:03:33,845
Now we, you know,               
from the start of this class,   

73
00:03:33,914 --> 00:03:37,082
we always picked single view    
app as the type of app that we  

74
00:03:37,151 --> 00:03:39,617
opened. But we're actually,     
for document based apps,        

75
00:03:39,686 --> 00:03:41,452
we're going to use              
an Xcode template.              

76
00:03:41,521 --> 00:03:43,888
It doesn't really give us       
much in that template,          

77
00:03:43,957 --> 00:03:46,024
but it gives enough             
that it's worth doing.          

78
00:03:46,092 --> 00:03:47,959
So if you're gonna do           
a document based app,           

79
00:03:48,028 --> 00:03:52,430
I recommend going back and      
creating a new app,             

80
00:03:52,499 --> 00:03:55,200
a new project, using this as    
the template. And in fact,      

81
00:03:55,269 --> 00:03:57,635
I'm gonna do that in the demo,  
even though we're, you know,    

82
00:03:57,704 --> 00:03:59,037
80% of the way                  
through emojiart,               

83
00:03:59,106 --> 00:04:00,105
I'm still gonna go back and     

84
00:04:00,174 --> 00:04:01,539
create a new emojiart           
with this, and                  

85
00:04:01,608 --> 00:04:02,707
then just move my files over.   

86
00:04:02,776 --> 00:04:04,809
Because I want the things that  
come with the template, and     

87
00:04:04,878 --> 00:04:06,444
let's talk about what's         
in that template.               

88
00:04:06,513 --> 00:04:08,647
One thing is that               
it stubs out that               

89
00:04:08,716 --> 00:04:11,883
document types, and             
it doesn't do JSON files.       

90
00:04:11,952 --> 00:04:14,819
It does image files, but you    
can change it to JSON files or  

91
00:04:14,888 --> 00:04:17,622
add more types.                 
It also puts an entry in your   

92
00:04:17,690 --> 00:04:19,624
Info.plist which                
is very important,              

93
00:04:19,693 --> 00:04:22,594
called Supports Document        
Browser. And that's basically   

94
00:04:22,663 --> 00:04:25,263
just saying that the documents  
that are stored inside          

95
00:04:25,332 --> 00:04:28,132
your app sandbox are like real  
documents that people would     

96
00:04:28,201 --> 00:04:31,403
wanna open with like the files  
app or something like that. So  

97
00:04:31,472 --> 00:04:33,605
that's an important entry       
to put in your Info.plist,      

98
00:04:33,673 --> 00:04:35,574
we're actually going to put     
that into the demo manually,    

99
00:04:35,642 --> 00:04:37,308
just to emphasize it.           

100
00:04:37,377 --> 00:04:39,777
It has one method in            
AppDelegate, you know,          

101
00:04:39,846 --> 00:04:41,979
AppDelegate's that file that    
we're always moving out of      

102
00:04:42,048 --> 00:04:45,417
the way, into supporting        
files. So it has one method in  

103
00:04:45,485 --> 00:04:48,619
there that allows other apps,   
like the files app,             

104
00:04:48,688 --> 00:04:51,990
to ask your app to open your    
documents. And it's a very      

105
00:04:52,058 --> 00:04:54,292
simple little method, we're     
not really gonna look at it     

106
00:04:54,361 --> 00:04:57,195
today, but this template does   
throw that in there for you.    

107
00:04:57,264 --> 00:04:59,664
It also stubs out a subclass    
of UIDocument, which you        

108
00:04:59,733 --> 00:05:02,868
usually don't need, cuz you've  
already created that yourself.  

109
00:05:02,936 --> 00:05:05,970
And it also stubs out an MVC    
to show the document,           

110
00:05:06,039 --> 00:05:08,740
just this really dumb MVC. And  
you don't need that, usually,   

111
00:05:08,809 --> 00:05:11,609
either, because you obviously   
have an MVC that shows your     

112
00:05:11,678 --> 00:05:15,046
document, or you wouldn't be    
writing this app. And finally,  

113
00:05:15,115 --> 00:05:17,882
it gives a subclass of          
UIDocumentBrowserViewControl-   

114
00:05:17,951 --> 00:05:19,650
ler, which serves as            
its own delegate.               

115
00:05:19,719 --> 00:05:22,054
It just has like five methods   
in it that are really simple,   

116
00:05:22,122 --> 00:05:24,456
and we're gonna go over         
those in detail. So             

117
00:05:24,525 --> 00:05:26,891
after you create a project      
with this template,             

118
00:05:26,960 --> 00:05:29,094
what do you need to do to get   
your app working? Well, one,    

119
00:05:29,162 --> 00:05:31,929
you've gotta have your own      
UIDocument subclass, of         

120
00:05:31,998 --> 00:05:36,701
course. Two, you've gotta have  
your own document-viewing MVC,  

121
00:05:36,769 --> 00:05:38,703
right?                          
Like EmojiArtViewController,    

122
00:05:38,772 --> 00:05:40,872
or your                         
ImageGalleryViewController,     

123
00:05:40,941 --> 00:05:44,509
whatever from your homework.    
Then you have to add            

124
00:05:44,577 --> 00:05:48,046
a little bit of code to this    
UIDocumentBrowserViewContro-    

125
00:05:48,114 --> 00:05:51,282
ller subclass that comes        
with the template. In its       

126
00:05:51,351 --> 00:05:53,551
viewDidLoad, you're gonna       
configure it a little bit,      

127
00:05:53,620 --> 00:05:55,052
it has a couple of              
bars you can set,               

128
00:05:55,121 --> 00:05:58,289
we'll talk about that. You're   
also going to have to provide   

129
00:05:58,358 --> 00:06:01,493
the URL of a blank document.    
And                             

130
00:06:01,561 --> 00:06:03,962
this is so that when the user   
goes into the UI and            

131
00:06:04,030 --> 00:06:07,332
says, create a new document,    
you've got, it's gotta          

132
00:06:07,400 --> 00:06:10,902
copy some template, some blank  
version of your document,       

133
00:06:10,971 --> 00:06:13,705
to be that new document. So     
you just have to give the URL   

134
00:06:13,774 --> 00:06:17,141
of a blank document, so that    
you support document creation.  

135
00:06:17,210 --> 00:06:20,544
And then finally, the code      
you have to put in there is,    

136
00:06:20,613 --> 00:06:24,182
when someone wants to open one  
of your documents, you have to  

137
00:06:24,251 --> 00:06:28,019
write the code to put in MVC    
onscreen. And you don't do it   

138
00:06:28,088 --> 00:06:31,122
with segueing, so we're gonna   
learn a little bit new way to   

139
00:06:31,191 --> 00:06:35,694
put an MVC on screen that       
does not involve segues. And    

140
00:06:35,762 --> 00:06:37,528
the last thing you wanna do     
to the template, of course,     

141
00:06:37,597 --> 00:06:40,498
is update those types,          
the document types to be,       

142
00:06:40,567 --> 00:06:44,235
not be imaged, but              
to be JSON or emojiart type or  

143
00:06:44,304 --> 00:06:46,437
image gallery type for          
your homework, or whatever. So  

144
00:06:46,506 --> 00:06:49,240
those are the only four things  
you do, once you do those four  

145
00:06:49,308 --> 00:06:52,076
simple things, you'll get this  
full UI. So steps one and       

146
00:06:52,145 --> 00:06:55,313
two, you've probably            
already done in your app.       

147
00:06:55,381 --> 00:06:58,082
Step three looks like this,     
this is viewDidLoad of          

148
00:06:58,151 --> 00:07:01,519
the UIDocumentBrowser           
ViewController's subclass.      

149
00:07:01,588 --> 00:07:04,022
And you really have             
to the first thing,             

150
00:07:04,091 --> 00:07:06,291
which is set it as              
its own delegate.               

151
00:07:06,360 --> 00:07:09,293
Because it actually implements  
a lot of these opening          

152
00:07:09,362 --> 00:07:12,463
file methods and stuff using    
its own delegate methods.       

153
00:07:12,532 --> 00:07:15,566
Then you can have some things   
like, allowsDocumentCreation =  

154
00:07:15,635 --> 00:07:18,403
true. Do you allow people to    
create documents in your app,   

155
00:07:18,471 --> 00:07:21,639
or are you just a document      
viewer? Do you allow multiple   

156
00:07:21,708 --> 00:07:23,942
items to be picked, in other    
words, can the user go in and   

157
00:07:24,010 --> 00:07:27,612
like Shift + click, or          
whatever the equivalent is,     

158
00:07:27,681 --> 00:07:30,281
with the touch interface,       
to choose multiple items and    

159
00:07:30,350 --> 00:07:32,450
open them at once?              
Like Emoji Art can't do that,   

160
00:07:32,519 --> 00:07:34,519
it can only show one            
document at a time.             

161
00:07:34,587 --> 00:07:37,589
Then you can also tweak the     
look of the UI a little bit.    

162
00:07:37,658 --> 00:07:39,624
Change the colors,              
tint colors,                    

163
00:07:39,693 --> 00:07:42,360
things like that, to try and    
match your document controller  

164
00:07:42,428 --> 00:07:44,195
when it comes up to have        
the same kinda look.            

165
00:07:44,263 --> 00:07:46,932
So that's it, that's how you    
configure it in viewDidLoad,    

166
00:07:47,000 --> 00:07:48,933
that's mostly the settings      
that you can set.               

167
00:07:49,001 --> 00:07:52,337
And then you have to provide    
this template URL, you do it    

168
00:07:52,405 --> 00:07:55,807
kind in a weird way. There's    
this method, DocumentBrowser    

169
00:07:55,876 --> 00:07:59,077
didRequestDocumentCreationWit-  
hHandler. That's the method     

170
00:07:59,146 --> 00:08:01,779
that's saying, somebody wants   
to create a document of your    

171
00:08:01,848 --> 00:08:05,684
type in your app. What do       
you got to give me is a URL     

172
00:08:05,752 --> 00:08:08,386
to a template, to a blank.      
And the way it makes you        

173
00:08:08,455 --> 00:08:11,055
do that is it hands you         
a little function called        

174
00:08:11,124 --> 00:08:13,691
the importHandler.              
There it's called,              

175
00:08:13,760 --> 00:08:16,928
I guess I called it Handler     
to make it shorter.             

176
00:08:16,997 --> 00:08:19,164
But it's actually called        
importHandler and               

177
00:08:19,232 --> 00:08:22,100
it just takes a URL which is    
the URL of a blank document.    

178
00:08:22,169 --> 00:08:24,969
And then the import mode        
which is either copy this or    

179
00:08:25,038 --> 00:08:27,905
move it to create a new         
document. So, it would be move  

180
00:08:27,974 --> 00:08:30,441
if you created this thing       
every time this got called.     

181
00:08:30,510 --> 00:08:33,144
It's copy if you create it      
once and then you hand it       

182
00:08:33,213 --> 00:08:35,480
out every time someone          
says new document.              

183
00:08:35,548 --> 00:08:37,515
And that's it, all you have     
to do is call that handler,     

184
00:08:37,584 --> 00:08:41,585
super simple, you'll see that   
in the demo. Next, you have to  

185
00:08:41,654 --> 00:08:44,489
present your document MVC, so   
we have to take a little time   

186
00:08:44,558 --> 00:08:47,024
out and go to an aside and      
learn something different       

187
00:08:47,093 --> 00:08:51,596
which is how to put MVC on      
screen without segueing. So     

188
00:08:51,665 --> 00:08:54,633
how do we do that? It's         
quite easy. There's a method    

189
00:08:54,701 --> 00:08:57,936
in UIViewController             
called present animated.        

190
00:08:58,004 --> 00:09:01,472
You send it to yourself, if     
you're a ViewController, and    

191
00:09:01,541 --> 00:09:04,242
you give it an argument         
of another MVC, and it          

192
00:09:04,311 --> 00:09:07,545
presents it animated. And it    
presents it on screen modally,  

193
00:09:07,614 --> 00:09:11,082
which means it takes over       
the entire screen. Okay and     

194
00:09:11,151 --> 00:09:14,418
just owns the entire screen     
until it dismisses itself,      

195
00:09:14,487 --> 00:09:17,855
then it's back to you. Which    
is exactly what we want here.   

196
00:09:17,924 --> 00:09:23,695
So, the trick here though       
is how do I get a new MVC       

197
00:09:23,763 --> 00:09:25,413
I told you actually earlier     
that iOS has a few MVCs like    

198
00:09:25,414 --> 00:09:27,064
to present? And                 

199
00:09:27,133 --> 00:09:29,867
the camera take, picture        
taking MVC and somethings.      

200
00:09:29,936 --> 00:09:32,537
So it has some, but what if     
you have one of your own?       

201
00:09:32,605 --> 00:09:35,039
Okay well, it's really easy     
actually. You just put it in    

202
00:09:35,108 --> 00:09:38,242
your storyboard, it won't       
have any segues drawn to it,    

203
00:09:38,311 --> 00:09:41,412
but what you're going to do is  
name it. You're just going to   

204
00:09:41,481 --> 00:09:44,215
select it, go to your identity  
inspector, there's a little     

205
00:09:44,284 --> 00:09:46,250
storyboard ID in there,         
you give it a name and          

206
00:09:46,319 --> 00:09:49,754
then you use that name in       
your code like this. You get    

207
00:09:49,823 --> 00:09:52,323
an instance of your storyboard  
which you get by saying         

208
00:09:52,392 --> 00:09:55,926
UIStoryboard name. You that     
our storyboard has always been  

209
00:09:55,995 --> 00:09:58,496
called Main.storyboard. But we  
haven't talked about the fact   

210
00:09:58,565 --> 00:10:00,365
that you can actually have      
multiple storyboards,           

211
00:10:00,433 --> 00:10:04,101
probably legal. We always       
just have that main. And        

212
00:10:04,170 --> 00:10:06,571
bundle is almost nil there,     
cuz you got your main bundle,   

213
00:10:06,639 --> 00:10:08,306
and nil means your              
main bundle. So                 

214
00:10:08,375 --> 00:10:09,807
you get the storyboard,         
and then you ask                

215
00:10:09,876 --> 00:10:13,011
the storyboard to make you an   
MVC with that name by saying    

216
00:10:13,080 --> 00:10:15,013
instantiateViewControllerWith-  
Identifer.                      

217
00:10:15,082 --> 00:10:17,782
And that foo that you           
have there is the thing         

218
00:10:17,851 --> 00:10:20,684
that's in my identity           
inspector for that MVC for      

219
00:10:20,753 --> 00:10:24,389
the controller, top level       
controller of that MVC. And     

220
00:10:24,457 --> 00:10:26,691
that's it, now you just         
prepared that thing.            

221
00:10:26,759 --> 00:10:29,561
In this case, you know by       
setting its document and        

222
00:10:29,629 --> 00:10:32,396
then you just present it. So    
it's really, really easy and    

223
00:10:32,465 --> 00:10:34,832
instantiateViewControllerWith-  
Identifier is the key method    

224
00:10:34,901 --> 00:10:37,235
that you need without           
a storyboard.                   

225
00:10:37,303 --> 00:10:39,904
All right, so back to our       
present. So we need to be able  

226
00:10:39,973 --> 00:10:42,540
to write a function that        
presents it. And it's really    

227
00:10:42,608 --> 00:10:45,076
simple, we're just gonna get    
our storyboard, we're gonna     

228
00:10:45,144 --> 00:10:47,411
instantiate our ViewController  
from the storyboard.            

229
00:10:47,480 --> 00:10:50,749
Now, really importantly         
we're gonna set the document    

230
00:10:50,817 --> 00:10:53,317
of the document showing         
MVC that we just got            

231
00:10:53,386 --> 00:10:56,488
out of the storyboard,          
we're gonna set it to be a new  

232
00:10:56,556 --> 00:10:59,757
document with URL that's        
passed to us, because it's      

233
00:10:59,826 --> 00:11:03,260
presentDocument at url. Now     
this might be a new document,   

234
00:11:03,329 --> 00:11:05,596
it just created by              
copying that template or        

235
00:11:05,665 --> 00:11:07,798
it might be some                
document we're opening          

236
00:11:07,867 --> 00:11:09,801
that was created in the past.   
You don't know and              

237
00:11:09,870 --> 00:11:13,337
you don't care here. And        
then you just called present    

238
00:11:13,406 --> 00:11:16,340
of that document MVC.           
That's it,                      

239
00:11:16,409 --> 00:11:19,177
if you do all that, then it     
just will all work. Of course,  

240
00:11:19,246 --> 00:11:22,313
you wanna set the types that    
you do, JSON, Emoji Art,        

241
00:11:22,382 --> 00:11:25,383
whatever. And we're gonna       
see all of this happening       

242
00:11:25,452 --> 00:11:28,619
in Emoji Art. So let's jump     
right into the demo and         

243
00:11:28,688 --> 00:11:32,991
do this in Emoji Art. Now,      
Emoji Art is an obvious app     

244
00:11:33,059 --> 00:11:36,494
to want to turn into            
a document based app. Because   

245
00:11:36,562 --> 00:11:39,897
building these beautiful works  
of art with emoji, right?       

246
00:11:39,966 --> 00:11:42,533
And we certainly might want to  
do multiple of them, not just   

247
00:11:42,602 --> 00:11:46,404
have to constantly be working   
on the same one. So there's     

248
00:11:46,473 --> 00:11:50,407
something about our MVC,        
our EmojiArtViewController.     

249
00:11:50,476 --> 00:11:53,944
The view controller that        
shows our Emoji Art document.   

250
00:11:54,013 --> 00:11:57,415
It has no model, right? We      
have no model in this thing.    

251
00:11:57,483 --> 00:12:01,552
It's just all view. All the     
EmojiArtView especially. So     

252
00:12:01,621 --> 00:12:04,555
I'm going to add another        
section here at the top         

253
00:12:04,624 --> 00:12:07,925
to put my model. I'm going to   
put this in my Model section    

254
00:12:07,994 --> 00:12:10,528
right here. Everyone remember   
that these marks that you put,  

255
00:12:10,597 --> 00:12:11,396
that causes it so               

256
00:12:11,464 --> 00:12:13,398
that when you go up here        
to the top, you can,            

257
00:12:13,466 --> 00:12:15,867
these are like in sections.     
You see the sections there?     

258
00:12:15,935 --> 00:12:18,202
So I've added a new one         
up here, Model. And             

259
00:12:18,271 --> 00:12:21,839
you can click on them to jump   
to the different sections. So   

260
00:12:21,907 --> 00:12:24,676
my Model, it wants to be some   
sort of var, I'll call it       

261
00:12:24,744 --> 00:12:29,647
emojiArt. And it's gonna be     
of some type, like EmojiArt.    

262
00:12:29,715 --> 00:12:32,650
This type doesn't exist, but    
that's kind of what my model    

263
00:12:32,718 --> 00:12:37,822
wants to be. So, let's invent   
a struct here, or class or      

264
00:12:37,891 --> 00:12:40,924
struct, that represents         
an Emoji Art document.          

265
00:12:40,993 --> 00:12:43,194
Well, what's in                 
an Emoji Art document?          

266
00:12:43,263 --> 00:12:45,462
There's the URL in              
the background and              

267
00:12:45,531 --> 00:12:48,032
then there's all those emojis,  
what they are, and              

268
00:12:48,100 --> 00:12:50,034
where they are, and             
how big they are, right?        

269
00:12:50,103 --> 00:12:52,771
That's what an Emoji Art        
document looks like. So,        

270
00:12:52,839 --> 00:12:55,273
let's go create a model         
to do exactly that.             

271
00:12:55,342 --> 00:12:57,675
So I'm going to create a new    
file, just a model file.        

272
00:12:57,744 --> 00:13:00,144
So we're over here in Swift,    
not over here at Cocoa Touch,   

273
00:13:00,213 --> 00:13:03,481
we're over here with Swift      
File. I'm going to call it      

274
00:13:03,550 --> 00:13:07,185
Emoji Art. Makes perfect sense  
to call it that. Here it is,    

275
00:13:07,253 --> 00:13:11,055
I'm going to type it in         
really fast. There it is.       

276
00:13:11,123 --> 00:13:13,491
And so here it is. Makes        
perfect sense what it is,       

277
00:13:13,560 --> 00:13:17,828
right? URL, that's for          
the background, then an array   

278
00:13:17,897 --> 00:13:21,532
of these EmojiInfos which is    
this thing. And each EmojiInfo  

279
00:13:21,600 --> 00:13:25,235
is its position, x and y,       
the text that's like a bike or  

280
00:13:25,304 --> 00:13:28,373
the bee, or whatever the        
string is, and then the size,   

281
00:13:28,441 --> 00:13:31,142
which I'm gonna have be the     
font size. Notice I've made     

282
00:13:31,210 --> 00:13:33,911
these Ints instead of CG        
floats or whatever because      

283
00:13:33,980 --> 00:13:37,081
this is a model okay this       
is not a UI thing, it's our     

284
00:13:37,150 --> 00:13:39,984
model. So these could be Ints   
or they could be doubles but    

285
00:13:40,053 --> 00:13:42,754
I decided I want Ints because   
I want my JSON to look nice     

286
00:13:42,822 --> 00:13:45,456
and not have a lot of           
fractional numbers and          

287
00:13:45,525 --> 00:13:47,959
all that stuff, so I decided    
to make them into Ints.         

288
00:13:48,027 --> 00:13:50,528
And that's it, this fully       
represents an Emoji Art         

289
00:13:50,596 --> 00:13:53,131
document this is just           
initializer that initializes    

290
00:13:53,199 --> 00:13:57,534
those two things. Nothing else  
to it but this, all right.      

291
00:13:57,603 --> 00:14:00,872
Now let's think about our       
EmojiArtViewController back     

292
00:14:00,940 --> 00:14:04,408
here. What does it need to      
be able to interact with        

293
00:14:04,477 --> 00:14:08,612
the model? Well, it needs all   
those little UI labels that     

294
00:14:08,681 --> 00:14:11,049
are in its EmojiArtView.        
No problem. We can get those.   

295
00:14:11,117 --> 00:14:12,916
We're the controller.           
We can talk to our view and     

296
00:14:12,985 --> 00:14:16,054
get anything we want from it.   
But it also needs the URL and   

297
00:14:16,122 --> 00:14:19,257
currently we actually           
don't keep the URL for          

298
00:14:19,325 --> 00:14:20,524
the background image.           

299
00:14:20,593 --> 00:14:22,593
Let's go scroll down to         
where we get that image,        

300
00:14:22,661 --> 00:14:25,897
it's right at the bottom here.  
When we drop an image, and      

301
00:14:25,965 --> 00:14:28,766
you can see our image           
fetcher goes off and fetches    

302
00:14:28,835 --> 00:14:32,003
that url and image. But         
then we only use the image.     

303
00:14:32,071 --> 00:14:35,940
We don't use the URL. So,       
we're gonna start doing that.   

304
00:14:36,008 --> 00:14:37,875
And I'm gonna do it in          
a way just to show you          

305
00:14:37,943 --> 00:14:40,878
a little bit more kind of       
Swift program, which is         

306
00:14:40,947 --> 00:14:44,515
I'm gonna make this var,        
which is currently a UIImage,   

307
00:14:44,584 --> 00:14:48,185
be a tuple. And why would       
I make this a tuple? Well,      

308
00:14:48,254 --> 00:14:50,421
I'm gonna make it a tuple       
because I want the URL and      

309
00:14:50,490 --> 00:14:53,857
the image to always be set      
together. I would never want    

310
00:14:53,926 --> 00:14:56,494
to accidentally set the image   
and have the URL be different.  

311
00:14:56,563 --> 00:14:58,763
So I'm gonna always set them    
together. So I'm gonna change   

312
00:14:58,831 --> 00:15:01,032
this from being a UIImage       
to being a tuple.               

313
00:15:01,101 --> 00:15:02,699
So let's go find out            
where it's declared,            

314
00:15:02,768 --> 00:15:05,669
here it is.                     
It's currently a UIImage,       

315
00:15:05,738 --> 00:15:09,841
I'm gonna change it to be       
a tuple that has a URL and      

316
00:15:09,909 --> 00:15:12,743
an image as part of the tuple.  
And of course,                  

317
00:15:12,812 --> 00:15:15,579
changing this thing's type is   
gonna require me to change its  

318
00:15:15,648 --> 00:15:18,949
implementation a little bit.    
Like all these new values down  

319
00:15:19,018 --> 00:15:22,786
here aren't UIImages anymore,   
they're this tuple, so          

320
00:15:22,855 --> 00:15:27,224
we gotta say newValue.image     
when I want the image. And of   

321
00:15:27,293 --> 00:15:31,428
course when I'm returning it    
I can't just return the image   

322
00:15:31,497 --> 00:15:35,466
here I after return the tuple   
with some URL of some sort and  

323
00:15:35,534 --> 00:15:38,802
that UIImage and what URL       
am I gonna return. Well,        

324
00:15:38,871 --> 00:15:40,371
I'm gonna actually              
have to store that,             

325
00:15:40,440 --> 00:15:41,872
so I'm gonna make               
a little private var.           

326
00:15:41,941 --> 00:15:46,076
I'm gonna call                  
emojiArtBackgroundImageURL,     

327
00:15:46,145 --> 00:15:50,080
which is gonna be URL. And I'm  
gonna store it in there. Now,   

328
00:15:50,149 --> 00:15:51,982
I'm not gonna wanna             
set it from here,               

329
00:15:52,051 --> 00:15:53,351
I'm gonna always want           
to set it from here,            

330
00:15:53,419 --> 00:15:55,052
but I'm just gonna be           
using this as storage.          

331
00:15:55,121 --> 00:15:57,955
Some people might put an under  
bar in front of this here to    

332
00:15:58,024 --> 00:16:01,692
kind of emphasize, that         
this is background storage.     

333
00:16:01,761 --> 00:16:03,227
We're not gonna ever            
set this directly.              

334
00:16:03,296 --> 00:16:06,530
We set the URL here, so         
it's always set The same so     

335
00:16:06,599 --> 00:16:08,066
I'm gonna leave it              
under bar there too.            

336
00:16:09,101 --> 00:16:11,368
So this URL here                
then is this one.               

337
00:16:11,437 --> 00:16:14,839
So I'm just gonna return this   
URL. And of course when I set,  

338
00:16:14,907 --> 00:16:19,343
I need to set the URL to be     
this new values URL. Okay so    

339
00:16:19,412 --> 00:16:21,511
now I'm capturing               
the URL all the time,           

340
00:16:21,580 --> 00:16:25,048
I always have the URL anytime   
I have an image. That's good,   

341
00:16:25,117 --> 00:16:28,920
I need it for my model.         
Now let's talk about the model  

342
00:16:28,988 --> 00:16:33,424
here, we could have this model  
just stored like this and       

343
00:16:33,493 --> 00:16:35,827
then have some other            
functions that like go and      

344
00:16:35,895 --> 00:16:39,763
look at all of our UI           
labels and grab the URL and     

345
00:16:39,832 --> 00:16:41,666
build an emojiArt,              
but you know,                   

346
00:16:41,735 --> 00:16:46,770
I'm gonna do something fun.     
Watch this,                     

347
00:16:46,839 --> 00:16:52,910
I'm gonna make this             

348
00:16:52,979 --> 00:16:59,083
a computed property             

349
00:16:59,152 --> 00:17:04,488
be a perfect match              

350
00:17:04,557 --> 00:17:09,460
with my UI.                     
And that is a really            

351
00:17:09,529 --> 00:17:11,963
good thing to have in           
a controller is the model and   

352
00:17:12,031 --> 00:17:15,633
the UI always in sync. So,      
that's why I'm gonna do this.   

353
00:17:15,702 --> 00:17:18,369
And I think it'll work out      
nicely here. All right, so      

354
00:17:18,438 --> 00:17:21,772
what do I need to do get my     
model? I gotta return the URL,  

355
00:17:21,841 --> 00:17:25,008
and I gotta return all those    
little emoji infos, right?      

356
00:17:25,077 --> 00:17:28,679
I'm eventually gonna have       
to return some emoji art by     

357
00:17:28,748 --> 00:17:33,784
calling its initializer, url    
with some url, and the emojis   

358
00:17:33,853 --> 00:17:38,455
with some emojis. So we need    
these two vars to be created.   

359
00:17:38,524 --> 00:17:40,024
Well, the URL is really easy,   

360
00:17:40,093 --> 00:17:43,394
I'm just gonna say if           
I get let url = my              

361
00:17:43,462 --> 00:17:51,802
emojiArtBackgroundImage.        
URL that's it's URL.            

362
00:17:51,871 --> 00:17:55,472
If I can do that then I'm       
ready to return something       

363
00:17:55,541 --> 00:17:58,476
here. By the way if I can't do  
that then I'm going to return   

364
00:17:58,545 --> 00:18:03,581
Nil because for                 
me my emoji art is not really   

365
00:18:03,649 --> 00:18:07,084
well defined if it doesn't      
have a background. It doesn't   

366
00:18:07,153 --> 00:18:08,652
really make sense to have       
emoji art where there's like    

367
00:18:08,721 --> 00:18:10,688
a bee and                       
a bike on a plain background,   

368
00:18:10,756 --> 00:18:13,357
we don't really support that.   
So I'm just going to say,       

369
00:18:13,426 --> 00:18:15,993
if you ask for my model and     
I don't have a URL yet,         

370
00:18:16,062 --> 00:18:18,328
then I'm just going to say      
I don't have a model yet.       

371
00:18:18,397 --> 00:18:22,299
I'm not been created enough     
to say that I have one. So      

372
00:18:22,368 --> 00:18:25,535
that fixes the URL. How about   
this emojis thing right here?   

373
00:18:25,604 --> 00:18:29,907
We have to set this emojis var  
right here, so I'm just gonna   

374
00:18:29,975 --> 00:18:35,412
say, let emojis =. And          
essentially what I wanna do     

375
00:18:35,481 --> 00:18:40,584
here is go ask my emojiArtView  
for all its subviews.           

376
00:18:40,653 --> 00:18:43,420
But I really don't want all     
of them, I just want the ones   

377
00:18:43,489 --> 00:18:48,425
that I can get as a UILabel.    
I'm using map here, you         

378
00:18:48,494 --> 00:18:52,730
all know map. So this returned  
in array fo UI labels.          

379
00:18:52,798 --> 00:18:56,066
The only thing about this is,   
this might return nil. So       

380
00:18:56,135 --> 00:18:59,202
I actually want to use a        
different map called flat Map.  

381
00:18:59,271 --> 00:19:02,473
So flat Map is just like map,   
is just if the little function  

382
00:19:02,542 --> 00:19:06,410
returns nil it ignores it. So   
it flats it down not to have    

383
00:19:06,478 --> 00:19:10,447
the nil ones, all right. So     
now I have all my UI labels.    

384
00:19:10,516 --> 00:19:14,318
Now I need to turn this         
into an array of these          

385
00:19:14,386 --> 00:19:17,154
emojiinfos. All right because   
that's what I'm doing, I'm      

386
00:19:17,223 --> 00:19:19,823
returning my model. So how the  
heck am I going to do that?     

387
00:19:19,892 --> 00:19:22,993
I'm definitely going to need a  
function that takes a UI label  

388
00:19:23,062 --> 00:19:25,429
and returns one of              
these emojiinfos.               

389
00:19:25,498 --> 00:19:26,497
You know what I'm gonna do,     

390
00:19:26,565 --> 00:19:29,700
I'm actually gonna do that      
by writing an extension         

391
00:19:29,769 --> 00:19:32,803
to this struck. And             
I'm gonna put that extension    

392
00:19:32,872 --> 00:19:36,340
over here in my controller      
because that extension          

393
00:19:36,409 --> 00:19:39,377
is gonna take a UI label        
as an argument and              

394
00:19:39,445 --> 00:19:42,279
return an emoji                 
info as the value.              

395
00:19:42,347 --> 00:19:45,249
And that UI label is a UI       
thing so that can not be in my  

396
00:19:45,318 --> 00:19:49,686
model. But it can be            
in my controller, and           

397
00:19:49,755 --> 00:19:52,056
this is my controller.          
And some people say, well,      

398
00:19:52,124 --> 00:19:56,593
wait a second. If you put an    
extension here to EmojiInfo,    

399
00:19:56,662 --> 00:19:59,296
you've just added               
UI to your model.               

400
00:19:59,365 --> 00:20:02,666
No, this is my controller.      
Not my model,                   

401
00:20:02,735 --> 00:20:05,769
the fact that my controller is  
implementing this with makes    

402
00:20:05,838 --> 00:20:08,572
extension, this extension       
lives in my controller so       

403
00:20:08,640 --> 00:20:11,409
that is perfectly legal to do   
and you'll see IOS do that      

404
00:20:11,477 --> 00:20:14,211
where you have something        
like NS attributed string,      

405
00:20:14,280 --> 00:20:16,513
which is actually in            
foundation, I think.            

406
00:20:16,582 --> 00:20:20,183
But, when you start adding      
attributes like fonts and so    

407
00:20:20,252 --> 00:20:22,286
like that now                   
becomes UI thing,               

408
00:20:22,354 --> 00:20:25,689
all that stuff is implemented   
the UI kit. By extension,       

409
00:20:25,758 --> 00:20:29,026
in NSAttributeString. We're     
doing the same thing here. So   

410
00:20:29,094 --> 00:20:30,795
I decided to do this,           
instead of with a function,     

411
00:20:30,863 --> 00:20:34,164
I actually add an extension     
that adds a new initializer     

412
00:20:34,233 --> 00:20:38,035
to EmojiInfo. Initializes it    
with a label, and if I can      

413
00:20:38,104 --> 00:20:41,071
get the attributedText out      
of there and get its font,      

414
00:20:41,140 --> 00:20:44,274
then I can make myself          
an EmojiInfo. If I can't,       

415
00:20:44,343 --> 00:20:48,112
I'm gonna return nil, so        
this is failable initializer,   

416
00:20:48,180 --> 00:20:53,551
this is how you fail out of     
a failable initializer. So,     

417
00:20:53,619 --> 00:20:55,152
now that I can do that so       
easily,                         

418
00:20:55,221 --> 00:20:58,289
I'm just gonna take this array  
of UI labels right here, and    

419
00:20:58,357 --> 00:21:02,059
I'm going to flat map that.     
And the thing here I'm gonna    

420
00:21:02,128 --> 00:21:06,664
say is return                   
an EmojiArt.EmoliInfo           

421
00:21:06,733 --> 00:21:11,234
using my nice new               
label initializer. And          

422
00:21:11,303 --> 00:21:17,474
remember that $0 right here is  
these UI labels. You got that?  

423
00:21:17,543 --> 00:21:21,044
It's kinda cool. All right,     
so that's our emoji has.        

424
00:21:21,113 --> 00:21:25,382
That is creating out EmojiArt,  
that's it. That's all we need   

425
00:21:25,451 --> 00:21:29,153
to do to get our model.         
How about the set side of it?   

426
00:21:29,221 --> 00:21:31,522
Well ,the first thing I wanna   
do when someone sets a new      

427
00:21:31,591 --> 00:21:34,658
EmojiArt is clear out what      
I've already got in there.      

428
00:21:34,727 --> 00:21:39,330
So I'm gonna set my EmojiArt    
Background image to nil,        

429
00:21:39,399 --> 00:21:41,031
it's a tuple, remember? And     

430
00:21:41,099 --> 00:21:44,568
I'm gonna set all of my         
emojiArtview.subviews, but      

431
00:21:44,637 --> 00:21:47,038
actually only the ones          
that are labels.                

432
00:21:50,643 --> 00:21:53,810
I'm gonna send a message        
to all of them for              

433
00:21:53,879 --> 00:21:57,882
each to remove themselves       
from their Superview.           

434
00:22:02,788 --> 00:22:05,122
Okay so I'm just taking all     
the labels in there and         

435
00:22:05,191 --> 00:22:08,458
removing them because somebody  
set a new model so I'm          

436
00:22:08,527 --> 00:22:12,663
clearing everything out here.   
As question mark, there we go.  

437
00:22:14,500 --> 00:22:17,034
So now I cleared everything     
out, now I need to put          

438
00:22:17,103 --> 00:22:19,770
this new thing in.              
Well, to put the URL in,        

439
00:22:19,839 --> 00:22:23,207
I'm gonna need to fetch it.     
So let's fetch it,              

440
00:22:25,077 --> 00:22:27,444
here is how I fetch right,      
here is my image fetcher,       

441
00:22:27,512 --> 00:22:30,548
doing the same thing, I did     
when some thing was dropped.    

442
00:22:30,616 --> 00:22:33,450
I'm gonna do this back on       
the main cube because now I'm   

443
00:22:33,519 --> 00:22:38,756
gonna update my UI with this    
URL when it came back. So       

444
00:22:38,825 --> 00:22:41,392
what am I gonna do when         
this thing comes back?          

445
00:22:41,460 --> 00:22:43,693
First of all, I got to set      
my background image. So         

446
00:22:43,762 --> 00:22:48,898
I'm gonna set my image,         
oops, my emoji Emoji art        

447
00:22:48,967 --> 00:22:53,537
image background equal to the   
URL and image that came back,   

448
00:22:53,606 --> 00:22:56,206
again this is a tuple. I'm      
setting it from here, coming    

449
00:22:56,275 --> 00:22:59,309
back from the ImageFetcher.     
And now I need to               

450
00:22:59,378 --> 00:23:03,280
add all those labels for all    
the emoji, right. The bees and  

451
00:23:03,349 --> 00:23:05,182
the bikes and everything        
that I've dragged down,         

452
00:23:05,250 --> 00:23:08,519
I've got to put all of those    
in there, so let's do that.     

453
00:23:08,587 --> 00:23:11,688
Probably the easiest way to     
do that, kinda conceptually,    

454
00:23:11,757 --> 00:23:14,191
I'm gonna take this new         
value of the emoji art,         

455
00:23:14,259 --> 00:23:16,226
and look through                
all of its emojis.              

456
00:23:16,295 --> 00:23:19,630
And for each of them,           
I kinda wanna just ask my       

457
00:23:19,699 --> 00:23:25,669
emojiArtView, to add a label    

458
00:23:25,737 --> 00:23:29,406
with the right arguments,       
whatever for each one, right?   

459
00:23:29,475 --> 00:23:31,842
This is conceptually what I     
wanna do. Well, actually,       

460
00:23:31,911 --> 00:23:34,544
I have add label in my emoji    
art view, but I made it         

461
00:23:34,613 --> 00:23:37,280
private. So I'm gonna go over   
to my emoji art view and make   

462
00:23:37,349 --> 00:23:42,452
that public. And remember that  
I'm the controller over there.  

463
00:23:42,521 --> 00:23:44,988
I can call anything I want in   
my view. My view can't call     

464
00:23:45,057 --> 00:23:47,624
anything at me without that     
blind structure communication,  

465
00:23:47,693 --> 00:23:49,126
but I can call                  
anything I want in it.          

466
00:23:49,195 --> 00:23:50,360
So in here, we have label and   

467
00:23:50,429 --> 00:23:52,195
it looks like it wants          
an attributed string and        

468
00:23:52,264 --> 00:23:56,132
the point. That makes sense,    
so let's go back over here and  

469
00:23:56,201 --> 00:24:02,239
do that. So,                    
the attributed Text,            

470
00:24:02,307 --> 00:24:07,077
is that what they called it?    
We want some attributed, no,    

471
00:24:07,146 --> 00:24:12,916
it's just with, I think,        
with attributed,                

472
00:24:12,985 --> 00:24:17,454
yeah. Attributed text,          
and centeredAt, actually,       

473
00:24:17,522 --> 00:24:22,425
I already know centeredAt.      
centeredAt is just a CG         

474
00:24:22,494 --> 00:24:27,831
point with the X                
being this $0.x.                

475
00:24:27,900 --> 00:24:32,035
And the y is this $0.y.         

476
00:24:32,104 --> 00:24:36,473
Because $0 is each of these     
emojis, so it's in EmojiInfo.   

477
00:24:36,542 --> 00:24:39,609
EmojiInfo, just to remind you,  
is this thing, so               

478
00:24:39,678 --> 00:24:43,146
the x and y, this is the x and  
y position. Now I need to deal  

479
00:24:43,215 --> 00:24:46,149
with the text and the size,     
so let's do that.               

480
00:24:46,218 --> 00:24:50,186
And we do that by letting that  
attributedText argument equals  

481
00:24:50,255 --> 00:24:53,590
the text converted to an        
attributed string. I actually   

482
00:24:53,659 --> 00:24:56,092
have this nice little function  
I wrote in utilities called     

483
00:24:56,161 --> 00:24:58,461
attributedString(withTextSty-   
le). And so                     

484
00:24:58,530 --> 00:25:03,133
I'm gonna make it .body font,   
of a certain size,              

485
00:25:03,202 --> 00:25:08,004
which is a CGFloat of the $0's  
size. So there we've set and    

486
00:25:08,073 --> 00:25:11,608
if now someone sets our model,  
boom! We've set everything.     

487
00:25:11,677 --> 00:25:14,811
Our UIs should match.           
Now we're in great shape,       

488
00:25:14,880 --> 00:25:17,947
because we've got an MVC here.  
Which has a model that we can   

489
00:25:18,016 --> 00:25:21,151
set and get that makes our UI   
work and all we need to do is   

490
00:25:21,220 --> 00:25:25,322
make it persistent. Make it     
store on disk. And we're gonna  

491
00:25:25,391 --> 00:25:28,559
make it persistent by having    
this EmojiArt thing here        

492
00:25:28,627 --> 00:25:31,928
become codable, and be able     
to turn itself into a JSON.     

493
00:25:31,997 --> 00:25:35,799
And then we're gonna use        
JSON as our file format. So     

494
00:25:35,868 --> 00:25:39,002
let's go back to                
EmojiArt over here, and         

495
00:25:39,070 --> 00:25:41,671
make this thing generate JSON.  
And                             

496
00:25:41,740 --> 00:25:45,475
we're gonna do that by just     
saying that it is Codable. And  

497
00:25:45,544 --> 00:25:47,878
when we put Codable on there,   
and we recompile.               

498
00:25:47,947 --> 00:25:50,981
We're gonna see if there's      
any problems with this and      

499
00:25:51,049 --> 00:25:54,151
see whether it is codable or    
not. So let's find out, and     

500
00:25:54,219 --> 00:25:57,554
it says it's not. It says it    
doesn't implement decodable     

501
00:25:57,623 --> 00:26:00,491
and encodable, which are the    
two protocols in this Codable   

502
00:26:00,559 --> 00:26:05,395
protocol, why not? This is      
codable, an array is codable,   

503
00:26:05,464 --> 00:26:09,332
no, this type is not codable,   
well,                           

504
00:26:09,401 --> 00:26:14,204
no problem, colon, Codable.     
We made that Codable, and now,  

505
00:26:14,272 --> 00:26:17,341
we'll let this thing            
recompile, and the error went   

506
00:26:17,409 --> 00:26:20,543
away, look at that,             
we just made EmojiArt codable.  

507
00:26:20,612 --> 00:26:23,346
And this is what I was telling  
you about, this codable stuff,  

508
00:26:23,415 --> 00:26:25,015
the new kind of                 
archiving is so easy.           

509
00:26:25,084 --> 00:26:27,384
Because you don't need to do    
all of that inits, and decode,  

510
00:26:27,453 --> 00:26:31,021
and encode, and all of that     
stuff. For 90% of all structs,  

511
00:26:31,090 --> 00:26:33,924
it'll just do it for            
you. Now, again,                

512
00:26:33,993 --> 00:26:37,527
our JSON keys are gonna be the  
same as our variable names.     

513
00:26:37,596 --> 00:26:39,295
When we do the JSON,            
which is good, in this case,    

514
00:26:39,364 --> 00:26:40,564
cuz they're all nice enough.    
But                             

515
00:26:40,633 --> 00:26:43,367
we could change it by adding    
that private enum coding keys,  

516
00:26:43,436 --> 00:26:44,868
colon string, remember that?    

517
00:26:44,937 --> 00:26:48,071
So I, we're not going to,       
but, but we could do that.      

518
00:26:48,140 --> 00:26:50,307
All right, now,                 
how about the JSON?             

519
00:26:50,375 --> 00:26:53,844
How do we get the JSON          
version of this? Well,          

520
00:26:53,913 --> 00:26:58,181
I'm actually gonna add a var    
to this EmojiArt called json.   

521
00:26:58,250 --> 00:27:01,351
And it returns a Data,          
optional, it's possible,        

522
00:27:01,420 --> 00:27:04,888
I guess, we might not be able   
to turn ourselves into JSON.    

523
00:27:04,957 --> 00:27:07,124
But I think 100% we would, but  

524
00:27:07,192 --> 00:27:11,628
I'll make it a Data just be     
clear. And I'm just going to    

525
00:27:11,697 --> 00:27:16,800
create a JSON out of myself     
by returning, trying            

526
00:27:16,869 --> 00:27:23,373
to use a JSONEncoder to encode  
my, self, and that's it.        

527
00:27:23,442 --> 00:27:26,343
That's either gonna return      
a data of myself, a JSON, or    

528
00:27:26,411 --> 00:27:28,845
nil if it couldn't do it,       
now this is never gonna         

529
00:27:28,914 --> 00:27:31,615
fail. I'm so confident this is  
never gonna fail, I could even  

530
00:27:31,684 --> 00:27:33,316
do try exclamation              
point right there and           

531
00:27:33,385 --> 00:27:34,485
not make that an optional.      

532
00:27:34,553 --> 00:27:39,256
Cuz these types are all         
100% encodable. But             

533
00:27:39,325 --> 00:27:42,392
I'll do this just to kind       
of be correct programming.      

534
00:27:42,461 --> 00:27:45,295
So now we have a way to turn    
this thing into EmojiArt.       

535
00:27:45,364 --> 00:27:48,765
So let's add a little bit of    
UI to our EmojiArt to have      

536
00:27:48,833 --> 00:27:52,603
a button I'm gonna call save.   
Which you press save, and       

537
00:27:52,672 --> 00:27:55,471
it's going to eventually        
save this JSON,                 

538
00:27:55,540 --> 00:27:58,175
this EmojiArt document          
to disk as JSON.                

539
00:27:58,243 --> 00:28:00,276
But first, we'll just have      
it print the JSON out on        

540
00:28:00,345 --> 00:28:02,512
the console, so we can just     
see what's going on here.       

541
00:28:02,581 --> 00:28:05,749
So let's do that, let's go to   
our storyboard and add a save   

542
00:28:05,818 --> 00:28:08,151
button here. Now if we look     
in our storyboard, look,        

543
00:28:08,219 --> 00:28:10,921
we've got a lot of junk in      
here. This is that table view   

544
00:28:10,990 --> 00:28:13,923
that we put to try and have     
our documents in a table view.  

545
00:28:13,992 --> 00:28:16,994
Hm, well, we're gonna have      
a significant upgrade here,     

546
00:28:17,062 --> 00:28:19,729
because we're gonna use         
that nice files app thing.      

547
00:28:19,798 --> 00:28:21,865
So I'm just going to            
delete this junk.               

548
00:28:21,933 --> 00:28:26,603
Get rid of all that, and I      
want to now put a save button   

549
00:28:26,672 --> 00:28:29,840
somewhere here in this UI.      
You know what I'm gonna do?     

550
00:28:29,909 --> 00:28:32,743
I'm gonna Embed this into       
Navigation Controller, so       

551
00:28:32,811 --> 00:28:34,945
that I get the little           
title bar at the top,           

552
00:28:35,014 --> 00:28:37,681
you see this little title       
bar that comes at the top?      

553
00:28:37,749 --> 00:28:40,284
Cuz that's a good place I       
could put a little save button  

554
00:28:40,352 --> 00:28:43,052
too. So throwing things         
in Navigation Controller,       

555
00:28:43,121 --> 00:28:45,588
you get that title bar,         
it's actually quite common and  

556
00:28:45,657 --> 00:28:49,492
a quite nice feature. So let's  
go down here and search for     

557
00:28:49,561 --> 00:28:52,162
Bar Button, Bar Button,         
here it is.                     

558
00:28:52,231 --> 00:28:54,764
We always use bar buttons       
in these bars, not regular      

559
00:28:54,833 --> 00:28:57,700
buttons. And I'm going to       
inspect that bar button and     

560
00:28:57,769 --> 00:29:00,804
make it be a Save,              
a standard button called Save,  

561
00:29:00,872 --> 00:29:04,140
there it is. Let's wire it up,  
target action,                  

562
00:29:04,209 --> 00:29:09,012
into our controller here. So,   
control drag, down here, it's   

563
00:29:09,080 --> 00:29:13,249
going to be an action, I'm      
going to call it save. That's   

564
00:29:13,318 --> 00:29:16,252
going to be a bar button item   
as its argument, there we go,   

565
00:29:16,321 --> 00:29:20,524
here it is. Let's go back to    
full screen so we can get the,  

566
00:29:20,592 --> 00:29:24,060
oops, get the full width        
here to do our save.            

567
00:29:24,129 --> 00:29:28,832
So this save, I just wanted to  
print my model out as JSON on   

568
00:29:28,901 --> 00:29:33,704
the console. So, to do that,    
I'm just gonna say,             

569
00:29:33,772 --> 00:29:37,807
if I can let json = my model,   
if I have one,                  

570
00:29:37,876 --> 00:29:44,081
it's json. Now I have           
the json, it's a data, though.  

571
00:29:44,149 --> 00:29:47,217
And I want to print it out,     
obviously, as a string. And     

572
00:29:47,286 --> 00:29:50,787
when you have a data and you    
want to print it as a string,   

573
00:29:50,856 --> 00:29:54,257
you have to tell the system     
what the encoding is like,      

574
00:29:54,326 --> 00:29:58,461
is it ASCII? Or Unicode,        
some sort of Unicode thing?     

575
00:29:58,530 --> 00:30:02,965
Well, JSON is always UTF8,      
which is Unicode encoding,      

576
00:30:03,034 --> 00:30:04,634
eight bit encoding.             

577
00:30:04,702 --> 00:30:11,141
So, we're just going to let,    
if let jsonString = String,     

578
00:30:11,210 --> 00:30:15,078
constructor, with taking        
that json that I have.          

579
00:30:15,146 --> 00:30:18,481
And telling it what             
the encoding is, which is dot,  

580
00:30:18,550 --> 00:30:22,252
you can see there is a lot of   
different kinds of isoLatin1    

581
00:30:22,321 --> 00:30:26,923
and shiftJIS. And all these     
things, ascii right there, but  

582
00:30:26,992 --> 00:30:30,393
we're gonna do utf8.            
So if we're able to do that,    

583
00:30:30,462 --> 00:30:34,130
then I'm just gonna print it,   
print(jsonString). So,          

584
00:30:34,199 --> 00:30:36,332
now we're our save button       
is gonna print it out,          

585
00:30:36,401 --> 00:30:38,202
so let's go ahead and           
give this a try.                

586
00:30:39,838 --> 00:30:41,537
You see a little bit of         
warnings over there.            

587
00:30:41,606 --> 00:30:47,977
That's just because of that,    
yes that warning is             

588
00:30:48,046 --> 00:30:51,582
a good warning. Let's go look   
at this warning right here,     

589
00:30:51,650 --> 00:30:54,017
it says, unreachable            
part of our storyboard.         

590
00:30:54,085 --> 00:30:58,188
And indeed if we go look        
our storyboard over here,       

591
00:30:58,257 --> 00:31:01,390
here it is. We have no entry    
point to our storyboard, cuz,   

592
00:31:01,459 --> 00:31:03,260
remember, I deleted             
all of that junk?               

593
00:31:03,328 --> 00:31:06,229
Well, I deleted the entry       
point with it. So let's select  

594
00:31:06,297 --> 00:31:09,632
this Navigation Controller,     
and go over and inspect it,     

595
00:31:09,701 --> 00:31:13,403
and say, this is our initial    
View Controller. So you've got  

596
00:31:13,472 --> 00:31:16,540
to pay attentions to your       
warnings over here, right?      

597
00:31:16,608 --> 00:31:19,809
So let's bring our              
console back up,                

598
00:31:19,878 --> 00:31:24,014
make this as wide as possible,  
run, go back and                

599
00:31:24,083 --> 00:31:26,883
take a look here. All right,    
this time it's running.         

600
00:31:26,952 --> 00:31:29,753
So here's our EmojiArt right    
here, let's go ahead and        

601
00:31:29,821 --> 00:31:33,090
make a nice EmojiArt document.  
How about with this thing       

602
00:31:33,158 --> 00:31:36,893
right here, and let's put       
a little bicycle on the road,   

603
00:31:36,962 --> 00:31:39,796
right there.                    
Now I'm going to hit save, and  

604
00:31:39,865 --> 00:31:43,866
let's watch our console over    
there. Oops, save, look,        

605
00:31:43,935 --> 00:31:48,004
there it is. Here is our        
emoji, it's got the URL,        

606
00:31:48,073 --> 00:31:51,808
which is this really, really    
long Google image emoji.        

607
00:31:51,877 --> 00:31:53,376
And then it's got the emojis,   

608
00:31:53,445 --> 00:31:56,479
which is an array, that only    
has one thing, the bike in it.  

609
00:31:56,548 --> 00:31:59,982
So let's add another thing, my  
second favorite thing to add,   

610
00:32:00,051 --> 00:32:04,087
which is a bee, and save. And   
now JSON has the bee in it as   

611
00:32:04,156 --> 00:32:07,824
well. So                        
with very little work here,     

612
00:32:07,893 --> 00:32:11,060
just by making that thing       
codeable, we have made it so    

613
00:32:11,129 --> 00:32:14,197
we can save our document        
in JSON format. So              

614
00:32:14,266 --> 00:32:16,900
now let's add the file system   
code to actually write it out   

615
00:32:16,969 --> 00:32:19,236
to disk. And that's gonna       
be our next step here, so       

616
00:32:19,304 --> 00:32:23,206
let's go do that. Go back       
to our controller here.         

617
00:32:23,275 --> 00:32:25,542
So instead of printing          
this thing out as a JSON,       

618
00:32:25,611 --> 00:32:27,543
we're just going to             
write this to disk.             

619
00:32:27,612 --> 00:32:32,315
Now this is of type data,       
right? It's a data. So          

620
00:32:32,384 --> 00:32:39,022
I can just write it to disk     
with json.write[to: url].       

621
00:32:39,091 --> 00:32:41,625
Now, couple of things, one we   
have to say what url are we     

622
00:32:41,693 --> 00:32:43,659
gonna write it to.              
And of course this throws.      

623
00:32:43,728 --> 00:32:46,696
So you're gonna have to do      
both of those things. First,    

624
00:32:46,764 --> 00:32:49,332
let's talk about what url       
we're gonna write it to. Well,  

625
00:32:49,401 --> 00:32:51,968
any time you talk about the     
file system, what's the number  

626
00:32:52,036 --> 00:32:54,404
one thing you have to do when   
you're creating your url?       

627
00:32:54,473 --> 00:32:57,273
Find a directory in             
the sandbox to start.           

628
00:32:57,342 --> 00:32:59,675
Always do this. 100.0 percent   
at a time, you're going         

629
00:32:59,744 --> 00:33:01,878
to write something to the file  
system or read something from   

630
00:33:01,946 --> 00:33:04,514
the file system. You gotta      
figure out which sandbox        

631
00:33:04,583 --> 00:33:08,117
directory you're gonna start    
in. So this is a document, so   

632
00:33:08,186 --> 00:33:11,688
I'm gonna put it in my          
document directory. So, I,      

633
00:33:11,757 --> 00:33:16,292
let's type this in here. This   
is how we look up a sandbox     

634
00:33:16,361 --> 00:33:20,363
directory here, this default    
FileManager.default method      

635
00:33:20,431 --> 00:33:22,465
url. So we're looking for       
the document directory.         

636
00:33:22,534 --> 00:33:25,301
We always do userDomainMask.    
We're not replacing a file so   

637
00:33:25,370 --> 00:33:27,337
we don't care about that.       
And we want to create           

638
00:33:27,405 --> 00:33:30,340
the documents directory if it   
hasn't. And then I'm gonna      

639
00:33:30,408 --> 00:33:33,176
append the name of my file      
unto that URL for the document  

640
00:33:33,245 --> 00:33:37,614
directory. untitled.json,       
I'm gonna call it. So           

641
00:33:37,682 --> 00:33:40,683
now I have the URL. I can put   
this in here and write it.      

642
00:33:40,752 --> 00:33:43,353
Now I just have to deal with    
the fact that this throws.      

643
00:33:43,421 --> 00:33:47,357
So it means I have to put       
try in front of it. And         

644
00:33:47,425 --> 00:33:50,494
I'm going to actually           
catch errors in this.           

645
00:33:52,931 --> 00:33:58,035
Catch, oops, catch let error.   
And here if I get an error I'm  

646
00:33:58,103 --> 00:34:01,771
gonna say print("couldn't"),    
oops, couldn't.                 

647
00:34:01,840 --> 00:34:04,774
Save, and we'll put             
the error right in there, so    

648
00:34:04,843 --> 00:34:07,443
we can see what it is.          
But, if it doesn't fail,        

649
00:34:07,512 --> 00:34:10,881
then I'm gonna say              
saved successfully.             

650
00:34:13,685 --> 00:34:16,352
So, now when we run on our      
console, we should see,         

651
00:34:16,421 --> 00:34:19,222
either, saved successfully,     
or couldn't save.               

652
00:34:19,291 --> 00:34:23,426
So, let's go try this. Put all  
the code on here at the same    

653
00:34:23,495 --> 00:34:28,431
time so you can see it.         
Run again. Let's go out here,   

654
00:34:28,500 --> 00:34:35,805
see that. So one thing          
about our app, of course,       

655
00:34:35,874 --> 00:34:38,708
every time it starts, we, it    
doesn't load up the document.   

656
00:34:38,776 --> 00:34:39,609
So, it's always blank.          

657
00:34:39,677 --> 00:34:42,378
So we'll always have to start   
again. So here let's start      

658
00:34:42,447 --> 00:34:47,150
again with this one. Let's put  
an apple in the sky up here.    

659
00:34:47,219 --> 00:34:50,020
And I'm gonna hit save now and  
hopefully it will say saved     

660
00:34:50,088 --> 00:34:52,956
successfully in our console,    
ready? Woo hoo,                 

661
00:34:53,024 --> 00:34:57,193
saved successfully! Let's add   
another one, some coffee.       

662
00:34:57,262 --> 00:35:00,196
Saved successfully, it's        
working. But, this is not very  

663
00:35:00,264 --> 00:35:02,966
satisfying because, it's just   
saying saved successfully.      

664
00:35:03,034 --> 00:35:06,102
And you're like, yeah, sure,    
well you say it's saved. But    

665
00:35:06,171 --> 00:35:08,471
did it really save? But         
actually, we can go look and    

666
00:35:08,539 --> 00:35:11,174
see if it saved and             
go find this document. Because  

667
00:35:11,243 --> 00:35:15,178
we have the iOS 11 files app,   
which let's us look at          

668
00:35:15,246 --> 00:35:18,381
documents in apps that opt in.  
Now,                            

669
00:35:18,450 --> 00:35:21,684
the key there is apps that opt  
in. So we have to actually put  

670
00:35:21,753 --> 00:35:24,754
that little info.plist thing I  
was talking about that says we  

671
00:35:24,823 --> 00:35:27,590
are an app where you can look   
in our document directory and   

672
00:35:27,659 --> 00:35:29,325
see our document.               
So let's go do that.            

673
00:35:29,394 --> 00:35:32,528
We're just gonna jump over to   
our info.plist here. I'm gonna  

674
00:35:32,597 --> 00:35:35,698
do the same kind of thing that  
we did in your homework where   

675
00:35:35,767 --> 00:35:39,569
you added a row, remember       
that, to do the HTTP URL. So    

676
00:35:39,638 --> 00:35:45,341
I'm gonna add a row,            
Support Document Browser,       

677
00:35:45,410 --> 00:35:47,110
there it is.                    
Supports Document Browser, and  

678
00:35:47,179 --> 00:35:51,581
I'm gonna set that to yes. And  
that tells the system, okay,    

679
00:35:51,650 --> 00:35:53,416
you can look in my              
documents directory and         

680
00:35:53,485 --> 00:35:56,419
see my documents. So I have to  
run again because we have to    

681
00:35:56,488 --> 00:35:59,789
transfer the app back           
over to the iPad, so            

682
00:35:59,857 --> 00:36:02,525
it'll look at this info.plist   
over there. But actually,       

683
00:36:02,594 --> 00:36:04,727
I don't even need to create     
that untitled JSON again,       

684
00:36:04,796 --> 00:36:07,697
it's already there. So          
I swiped up from the bottom to  

685
00:36:07,765 --> 00:36:09,432
get this little thing to        
appear on the bottom here.      

686
00:36:09,500 --> 00:36:10,800
And I'm gonna click or          

687
00:36:10,869 --> 00:36:13,302
touch on this app right here.   
That is the files app.          

688
00:36:13,371 --> 00:36:16,539
And you're gonna see            
the UI here for files.          

689
00:36:16,608 --> 00:36:20,009
This is a lot what your UI is   
gonna look like in your app.    

690
00:36:20,078 --> 00:36:22,212
So it's got all these           
nice folders right here.        

691
00:36:22,280 --> 00:36:24,814
You can arrange them by date,   
and tags, and                   

692
00:36:24,883 --> 00:36:27,817
name. You can go put things on  
your iCloud Drive. You can put  

693
00:36:27,886 --> 00:36:31,354
things on you iPad. And here,   
I'm clicking iPad. Emoji Art    

694
00:36:31,422 --> 00:36:34,257
is the only app On my iPad      
currently that has a documents  

695
00:36:34,326 --> 00:36:38,160
directory, with documents that  
file is allowed to look at.     

696
00:36:38,229 --> 00:36:41,163
That's because this iPad is     
pretty much fresh install.      

697
00:36:41,232 --> 00:36:44,000
But here it is, my app. And if  
I click on this notice it puts  

698
00:36:44,069 --> 00:36:46,903
my app icon in, that's kinda    
nice. If I click on it,         

699
00:36:46,971 --> 00:36:50,173
woohoo, it's untitled.json.     
And I can long press on it,     

700
00:36:50,242 --> 00:36:53,375
and say info. And it'll even    
tell me look, this is the kind  

701
00:36:53,444 --> 00:36:56,612
of file, it's a*.json file.     
It has 656 bytes, that sounds   

702
00:36:56,681 --> 00:37:00,182
about right. That's about how   
many things we had in there.    

703
00:37:00,251 --> 00:37:02,885
And I can even click on         
it to view it. However,         

704
00:37:02,954 --> 00:37:08,057
look where it views it.         
In some sort of JSON,           

705
00:37:08,126 --> 00:37:11,093
viewing app of some sort.       

706
00:37:11,162 --> 00:37:14,364
Not in our app, so              
that's kinda weird.             

707
00:37:14,432 --> 00:37:17,733
Why is that? Well, because      
we're not a JSON viewing app,   

708
00:37:17,802 --> 00:37:20,770
we're an emoji art app.         
So the files app doesn't        

709
00:37:20,839 --> 00:37:23,306
know that we are the one to     
open there. And we can fix      

710
00:37:23,375 --> 00:37:25,875
that a little bit later. We're  
probably not gonna have time    

711
00:37:25,944 --> 00:37:27,176
to do it today with the demo.   

712
00:37:27,245 --> 00:37:29,679
But I will certainly do it in   
the code I post and show you.   

713
00:37:29,747 --> 00:37:32,882
And the fix to that is to       
define a new file type called   

714
00:37:32,950 --> 00:37:35,651
emoji art. And                  
then the files app will know,   

715
00:37:35,720 --> 00:37:37,053
that's an emoji art thing.      

716
00:37:37,121 --> 00:37:39,389
But right now, it looks at      
extension json and says well,   

717
00:37:39,458 --> 00:37:41,524
I'm gonna do the json thing.    

718
00:37:41,593 --> 00:37:42,926
And you can tell,               
see it's right though.          

719
00:37:42,994 --> 00:37:44,927
It's got the apple,             
it's got the coffee in there.   

720
00:37:44,996 --> 00:37:48,531
It's really small but you can   
see it. So, that's great. So,   

721
00:37:48,600 --> 00:37:50,867
we know it's actually saving.   
So let's go to the next step,   

722
00:37:50,935 --> 00:37:52,969
which is reading                
this document. So,              

723
00:37:53,038 --> 00:37:56,305
let's have our app, every time  
it puts its view controller     

724
00:37:56,374 --> 00:37:59,509
up, view will appear we'll      
do it in, it looks for          

725
00:37:59,578 --> 00:38:02,211
untitled.json, and              
loads it up.                    

726
00:38:02,280 --> 00:38:04,747
That way, every time we run     
our app, it won't be blank      

727
00:38:04,816 --> 00:38:07,517
every time. It'll just load     
the last document we were       

728
00:38:07,586 --> 00:38:10,620
working on untitled.json that   
we were working on. Okay, so    

729
00:38:10,689 --> 00:38:16,292
let's do that.                  
Go back to our controller.      

730
00:38:16,360 --> 00:38:20,763
Here's our view controller      
right here. So we're gonna do   

731
00:38:20,832 --> 00:38:26,869
that in viewWillAppear.         
super.viewWillAppear(animat-    

732
00:38:26,938 --> 00:38:31,674
ed). So, what do we need to     
do in here in viewWillAppear,   

733
00:38:31,742 --> 00:38:33,943
to get this to appear?          
It's pretty straightforward.    

734
00:38:34,012 --> 00:38:38,314
We just need to get that URL    
for the untitled.json. And      

735
00:38:38,383 --> 00:38:42,185
then look at the data and turn  
it back into an emoji art and   

736
00:38:42,253 --> 00:38:43,752
set that as our model.          

737
00:38:43,821 --> 00:38:47,323
Got that, so let's do that.     
Of course I need that URL.      

738
00:38:47,392 --> 00:38:50,994
So I'm gonna do the same        
thing that I did before.        

739
00:38:51,063 --> 00:38:54,030
What did I call that,           
let url, yeah. So               

740
00:38:54,099 --> 00:38:56,633
here's where I go get my        
document directory and          

741
00:38:56,701 --> 00:38:59,268
append the path component       
on untitled.json.               

742
00:38:59,337 --> 00:39:02,605
This is exactly what I did up   
here, no different cuz I want   

743
00:39:02,674 --> 00:39:07,677
the exact same url. But here,   
I'm going to say if I can let   

744
00:39:07,746 --> 00:39:12,515
jsonData equal trying to        
have Data contentsOf,           

745
00:39:12,584 --> 00:39:16,986
exactly the same thing. This    
Data contentsOf is exactly      

746
00:39:17,055 --> 00:39:20,356
what we did to get image        
urls over http, right?          

747
00:39:20,425 --> 00:39:23,793
So, contents of the file url,   
which is                        

748
00:39:23,861 --> 00:39:26,729
this untitled json file in      
our documents directory.        

749
00:39:26,798 --> 00:39:30,399
That's what this url is. So if  
I'm able to create a data out   

750
00:39:30,468 --> 00:39:33,937
of that file, now I need to     
create an emojiArt out of it,   

751
00:39:34,005 --> 00:39:38,073
and set that as my model.       
So emojiArt is my model,        

752
00:39:38,142 --> 00:39:42,811
let me say equal to. I need     
to create an EmojiArt from      

753
00:39:42,880 --> 00:39:47,950
some jsonData. Well, we don't   
have an initializer for         

754
00:39:48,019 --> 00:39:51,721
EmojiArt that creates           
an EmojiArt from jsonData.      

755
00:39:51,790 --> 00:39:53,823
But we can really               
easily write one.               

756
00:39:53,892 --> 00:39:55,992
Let's go back to                
EmojiArt over here.             

757
00:39:56,060 --> 00:39:58,327
And just like we wrote          
this to get the JSON,           

758
00:39:58,396 --> 00:40:00,629
we can certainly                
write an initializer,           

759
00:40:00,698 --> 00:40:02,698
which I'm also gonna            
have be failable,               

760
00:40:02,767 --> 00:40:07,336
that takes some JSON, which is  
a Data. And, Initializes and,   

761
00:40:07,405 --> 00:40:10,807
if I can't initialize it,       
then I'm going to fail and      

762
00:40:10,875 --> 00:40:14,811
return nil. So what does it     
look like to do this? Again,    

763
00:40:14,879 --> 00:40:18,447
really easy. I'm just gonna     
say, if I can let new value,    

764
00:40:18,516 --> 00:40:21,183
that's gonna be my new value    
that I pull out of there,       

765
00:40:21,252 --> 00:40:28,190
equal try to JSONDecoder.       

766
00:40:28,259 --> 00:40:30,493
And what am I trying to         
decode out of that data?        

767
00:40:30,562 --> 00:40:34,730
I'm trying to decode            
an EmojiArt object.             

768
00:40:34,799 --> 00:40:38,200
And from what data?             
The JSON that you passed in.    

769
00:40:38,269 --> 00:40:39,435
So if I'm able to do that,      

770
00:40:39,504 --> 00:40:42,871
if I'm able to decode it out    
of there, now I have it.        

771
00:40:42,940 --> 00:40:45,642
The new thing in new value,     
and so I'm just gonna say,      

772
00:40:45,710 --> 00:40:49,044
self = newValue, right? I       
mean, an initializer here. So,  

773
00:40:49,113 --> 00:40:51,581
I'm just going to initialize    
myself, and I'm gonna fail      

774
00:40:51,650 --> 00:40:54,917
otherwise by returning nil.     
Now, this ones much more        

775
00:40:54,986 --> 00:40:58,554
likely to fail, because you     
could imagine corrupted JSON,   

776
00:40:58,623 --> 00:41:02,324
just playing the wrong JSON     
file. An empty JSON file, all   

777
00:41:02,393 --> 00:41:04,360
of these things would cause     
this to fail, and that's fine.  

778
00:41:04,429 --> 00:41:05,761
It's just this will             
not initialize,                 

779
00:41:05,830 --> 00:41:10,166
this is only gonna initialize.  
If this is valid about JSON     

780
00:41:10,235 --> 00:41:13,969
encoded, something from this    
basically that's the only way   

781
00:41:14,038 --> 00:41:18,474
it will succeed. So now our     
code will work over here,       

782
00:41:18,543 --> 00:41:21,277
right?                          
We've got this implemented, so  

783
00:41:21,346 --> 00:41:25,414
now when we quit and go back    
our document should be there.   

784
00:41:25,483 --> 00:41:29,152
So let's do that let's run and  

785
00:41:29,220 --> 00:41:33,456
then show it to you.            
Here it is and                  

786
00:41:33,525 --> 00:41:37,226
sure enough look at that,       
it already picked up that       

787
00:41:37,295 --> 00:41:41,730
untitled.json and if I add      
a dog to this and hit Save.     

788
00:41:41,799 --> 00:41:47,369
Then quit and run again,        

789
00:41:47,438 --> 00:41:50,773
comes back with the dog.        
So we're both saving it,        

790
00:41:50,841 --> 00:41:53,109
with the Save button,           
and view will appear,           

791
00:41:53,177 --> 00:41:55,612
we are loading it up.           
So this is excellent.           

792
00:41:55,680 --> 00:41:57,847
We are really making            
a lot of progress here.         

793
00:41:57,915 --> 00:42:00,450
But now it is time to take      
this to the next level,         

794
00:42:00,518 --> 00:42:03,552
which is to be able to do that  
files app kind of UI. And       

795
00:42:03,621 --> 00:42:07,423
to do that, to make that easy,  
and to simplify our existing    

796
00:42:07,492 --> 00:42:11,694
code actually, we need to       
use UIDocument. UIDocument      

797
00:42:11,763 --> 00:42:14,930
encapsulates a document in      
just this really beautiful      

798
00:42:14,999 --> 00:42:17,900
way, really nice API.           
And that's what we need to do.  

799
00:42:17,969 --> 00:42:19,402
Now we could just               
do that here.                   

800
00:42:19,470 --> 00:42:22,204
All you have to do is create    
a UIDocument subclass,          

801
00:42:22,273 --> 00:42:25,174
and implement the two methods   
I talked about in lectureon     

802
00:42:25,243 --> 00:42:27,176
Monday. But this where          
we're gonna step in and         

803
00:42:27,245 --> 00:42:30,146
use that template. We're gonna  
throw that template in here     

804
00:42:30,214 --> 00:42:36,319
for document base. So I'm       
gonna stop my app right here.   

805
00:42:38,456 --> 00:42:41,390
And I'm going to rename         
my existing EmojiArt.           

806
00:42:41,459 --> 00:42:45,094
I'm just gonna call it          
EmojiArtOLD. And then I'm       

807
00:42:45,162 --> 00:42:49,031
gonna go back to Xcode and      
create a new project. On this   

808
00:42:49,100 --> 00:42:51,767
two project I'm gonna use this  
Document Based App right here.  

809
00:42:51,836 --> 00:42:53,836
I'm wanna call this             
still EmojiArt,                 

810
00:42:53,905 --> 00:42:56,705
basically this gonna be         
the same app which gonna have   

811
00:42:56,774 --> 00:43:00,243
this build on this template.    
I'm gonna put the same place,   

812
00:43:00,311 --> 00:43:02,545
I put everything else,          
here it is.                     

813
00:43:02,614 --> 00:43:06,048
Let's quickly look at           
the things this created.        

814
00:43:06,117 --> 00:43:09,184
It's just a normal kind         
of Xcode app, of course,        

815
00:43:09,253 --> 00:43:12,422
it has assets, a launch         
screen, an app delegate.        

816
00:43:12,490 --> 00:43:15,958
And so I'm gonna put these      
three things in a little        

817
00:43:16,027 --> 00:43:20,729
supporting file like I always   
do. However, I'm gonna          

818
00:43:20,798 --> 00:43:25,701
take a moment to first take     
a look at the AppDelegate.      

819
00:43:25,770 --> 00:43:28,203
Because the AppDelegate         
is not just a bunch of          

820
00:43:28,272 --> 00:43:30,573
empty methods with              
just comments only,             

821
00:43:30,642 --> 00:43:32,975
it also now has                 
this actual method.             

822
00:43:33,044 --> 00:43:36,579
This method is called open      
inputURL. This is sent          

823
00:43:36,648 --> 00:43:38,847
to your application by          
other applications,             

824
00:43:38,916 --> 00:43:42,618
like files, that say, I wanna   
open up one of your documents.  

825
00:43:42,687 --> 00:43:45,154
Now, this is only gonna get     
called if we have an EmojiArt   

826
00:43:45,223 --> 00:43:47,556
document, not a JSON document,  
cuz we're not an,               

827
00:43:47,625 --> 00:43:50,326
JSON opening app.               
But this is how that happened.  

828
00:43:50,394 --> 00:43:52,661
It's pretty simple code, I'm    
not gonna go through it, but    

829
00:43:52,730 --> 00:43:55,231
this is where that's going on.  
And we're gonna talk all about  

830
00:43:55,299 --> 00:43:59,034
AppDelegate, all this stuff,    
next week, all right.           

831
00:43:59,103 --> 00:44:01,236
So we got supporting files.     
What else came over there?      

832
00:44:01,305 --> 00:44:03,940
Well, we have this              
UIDocument subclass             

833
00:44:04,008 --> 00:44:05,608
called Document. Well,          

834
00:44:05,677 --> 00:44:10,479
this is going to eventually     
be our EmojiArtDocument.        

835
00:44:10,548 --> 00:44:14,883
EmojiArt, so you can rename     
the name of the file to be      

836
00:44:14,952 --> 00:44:19,488
EmojiArt. So this has got       
those two functions, right?     

837
00:44:19,557 --> 00:44:21,691
The one that converts           
from out model to a data,       

838
00:44:21,759 --> 00:44:23,493
and from a data to a model,     
back and forth.                 

839
00:44:23,561 --> 00:44:25,861
That's all we have to           
implement to make this work.    

840
00:44:25,930 --> 00:44:27,396
So we'll do that                
in a little bit.                

841
00:44:27,465 --> 00:44:30,132
Then there's this,              
DocumentViewController,         

842
00:44:30,201 --> 00:44:33,135
is basically like               
EmojiArtViewController, right?  

843
00:44:33,204 --> 00:44:36,072
It's just the stub for          
a DocumentViewController.       

844
00:44:36,140 --> 00:44:38,040
And, of course, we have         
EmojiArtViewController so       

845
00:44:38,109 --> 00:44:38,741
we don't need this.             

846
00:44:38,809 --> 00:44:41,911
So I am just going to           
right-click on it and           

847
00:44:41,980 --> 00:44:44,413
delete it. So I'm gonna delete  
this DocumentViewController.    

848
00:44:44,482 --> 00:44:47,750
I don't need it, I have my      
EmojiArtViewController. And     

849
00:44:47,819 --> 00:44:50,218
then there's this               
DocumentBrowserViewController   

850
00:44:50,287 --> 00:44:53,188
thing right here.               
This is the subclass            

851
00:44:53,257 --> 00:44:56,358
UIDocumentBrowserViewControl-   
ler. Here's that viewDidLoad I  

852
00:44:56,427 --> 00:44:58,928
was telling you we were gonna   
configure it. Here's the place  

853
00:44:58,996 --> 00:45:02,264
where we're gonna call this     
import handler to copy          

854
00:45:02,333 --> 00:45:05,100
a template. Here's some other   
methods that we are not even    

855
00:45:05,169 --> 00:45:05,902
going to have to touch,         

856
00:45:05,970 --> 00:45:08,070
they just get's called          
when it's time to open          

857
00:45:08,139 --> 00:45:10,639
a document. And then            
there's this one down here      

858
00:45:10,708 --> 00:45:13,308
presentDocument, which          
I'm gonna delete most of.       

859
00:45:13,377 --> 00:45:15,912
This is just an internal        
method that's called from all   

860
00:45:15,980 --> 00:45:19,916
those other things that says,   
present your MVC for this       

861
00:45:19,984 --> 00:45:24,320
document at this URL. So we'll  
be implementing that soon.      

862
00:45:24,389 --> 00:45:26,021
And then, of course we've       
got our story board.            

863
00:45:26,090 --> 00:45:27,222
Let's see what's in             
our story board.                

864
00:45:27,291 --> 00:45:31,127
I'm gonna make our story board  
look like more like an iPad.    

865
00:45:31,195 --> 00:45:33,963
It's a little more              
familiar to us. Although,       

866
00:45:34,032 --> 00:45:35,898
our app will work on iPhone,    
by the way.                     

867
00:45:35,967 --> 00:45:38,433
After all this I will           
show you that hopefully,        

868
00:45:38,502 --> 00:45:41,537
if we have time. So there's     
only two view controllers       

869
00:45:41,606 --> 00:45:44,607
here in this storyboard,        
one is this one.                

870
00:45:44,676 --> 00:45:46,642
That's the                      
DocumentBrowserViewController.  

871
00:45:46,711 --> 00:45:50,212
That's the thing that looks     
like the files app. And         

872
00:45:50,281 --> 00:45:53,182
notice that's                   
where we come in.               

873
00:45:53,251 --> 00:45:56,084
We arrive into this app there.  
Then there's this,              

874
00:45:56,153 --> 00:45:58,888
this is going to be our         
EmojiArtViewController.         

875
00:45:58,956 --> 00:46:01,156
In fact, I'm going to delete    
the one that comes in here,     

876
00:46:01,225 --> 00:46:02,424
cuz it's just a little          
place holder.                   

877
00:46:02,493 --> 00:46:05,227
And I'm gonna put my            
EmojiArtViewController here,    

878
00:46:05,296 --> 00:46:06,662
and lets go do it right now.    

879
00:46:06,731 --> 00:46:10,899
In fact, I'm gonna go back      
to EmojiArt.old here.           

880
00:46:10,968 --> 00:46:12,801
I'm gonna go to                 
its storyboard.                 

881
00:46:12,870 --> 00:46:15,938
And one thing that's really     
cool about storyboards is that  

882
00:46:16,007 --> 00:46:18,841
you can copy and paste from     
one storyboard to another,      

883
00:46:18,910 --> 00:46:22,278
because all the connections     
to the code are made by name.   

884
00:46:22,347 --> 00:46:23,579
It's only just the names, so    

885
00:46:23,648 --> 00:46:25,548
as long as the names            
are the same in both ways,      

886
00:46:25,616 --> 00:46:28,584
places it works. So I'm just    
gonna select all of this and    

887
00:46:28,652 --> 00:46:33,155
hit copy. Then go back          
to my new one here and          

888
00:46:33,224 --> 00:46:37,292
hit paste. Zoom out a little    
bit, so I can see it all.       

889
00:46:37,361 --> 00:46:43,198
Go to our document outline,     
make this look nice here.       

890
00:46:43,267 --> 00:46:44,166
Now, one thing to notice,       

891
00:46:44,235 --> 00:46:46,334
I know this is a little hard    
to see on this screen, so       

892
00:46:46,403 --> 00:46:47,369
I'll try and zoom in more.      

893
00:46:47,438 --> 00:46:50,305
But you notice there's no       
segue between here, right?      

894
00:46:50,374 --> 00:46:53,275
These live on their own,        
this one lives on its own. And  

895
00:46:53,344 --> 00:46:56,278
that's why we have to do this   
manual presenting. The other    

896
00:46:56,347 --> 00:46:58,814
thing I'm gonna do for now is   
I'm gonna have the entry point  

897
00:46:58,882 --> 00:47:01,883
be our existing view            
controller. We'll add this one  

898
00:47:01,952 --> 00:47:04,586
in once we get the UIDocument   
stuff working, cuz we have to   

899
00:47:04,655 --> 00:47:08,123
have UIDocument working before  
we can really leverage this.    

900
00:47:08,192 --> 00:47:10,092
So we're just going to          
have our old UI for now.        

901
00:47:10,160 --> 00:47:12,828
And I'm gonna try and get our   
existing app as we had it       

902
00:47:12,897 --> 00:47:14,663
before working                  
with UIDocument.                

903
00:47:14,732 --> 00:47:16,265
So it's gonna be                
the exact same thing, but       

904
00:47:16,334 --> 00:47:18,567
just working with UIDocument    
instead of directly accessing   

905
00:47:18,635 --> 00:47:22,304
the file system there. So       
of course we also need to have  

906
00:47:22,373 --> 00:47:25,207
all of our files from the old   
one. So let's go back to old    

907
00:47:25,276 --> 00:47:30,378
EmojiArt here. And get all of   
our stuff out of there, oops!   

908
00:47:30,447 --> 00:47:33,916
This, getting these two things  
on the screen at the same time  

909
00:47:33,984 --> 00:47:36,651
on this very small screen can   
be a challenge, all right.      

910
00:47:36,720 --> 00:47:42,658
So I'm going to bring over my   
controller, my model, my view.  

911
00:47:42,726 --> 00:47:45,595
Some of the supporting          
files like the cells,           

912
00:47:45,663 --> 00:47:48,964
the gesture recognizer stuff.   
The utilities,                  

913
00:47:49,033 --> 00:47:52,368
the stuff I did, I'm not        
bringing over the AppDelegate,  

914
00:47:52,436 --> 00:47:56,271
because that came with the      
template. So I don't wanna do   

915
00:47:56,340 --> 00:47:59,374
that and I'm not bringing over  
my TableViewController either.  

916
00:47:59,443 --> 00:48:01,644
That's what under junk here,    
that's the TableViewController  

917
00:48:01,713 --> 00:48:03,145
that was suppose to be          
the documents thing, but        

918
00:48:03,213 --> 00:48:05,614
we said forget that, we're      
using this new files thing So   

919
00:48:05,682 --> 00:48:10,185
I'm just gonna drag these over  
here. Copy them all in and      

920
00:48:10,254 --> 00:48:13,688
one other thing I wanna bring   
over actually from here is my   

921
00:48:13,757 --> 00:48:17,560
app icon. I got this nice app   
icon, I don't wanna lose that.  

922
00:48:17,628 --> 00:48:21,630
So I'm gonna go over here to    
my assets and my new one and    

923
00:48:21,699 --> 00:48:26,201
get rid of the blank app icon   
and just drag this app icon     

924
00:48:26,270 --> 00:48:31,340
over here. So that's it. So     
I've essentially brought over   

925
00:48:31,409 --> 00:48:35,644
everything from my old emoji    
art to the new emoji art. But   

926
00:48:35,712 --> 00:48:38,581
what we're gonna                
do first is go and              

927
00:48:38,649 --> 00:48:41,283
make this emoji art             
document business work.         

928
00:48:41,352 --> 00:48:43,753
So let's go do that. Where's    
our emoji art document?         

929
00:48:43,821 --> 00:48:45,921
It's right here. This is        
the thing I just renamed.       

930
00:48:45,990 --> 00:48:49,324
And there is only these two     
methods that are doing stuff,   

931
00:48:49,393 --> 00:48:50,659
we know exactly how to do it,   

932
00:48:50,728 --> 00:48:53,462
we were just doing this.        
One thing about this is,        

933
00:48:53,531 --> 00:48:56,932
is you notice the contents      
returns an Any not a Data,      

934
00:48:57,001 --> 00:49:00,069
that's because this Any could   
be a file wrapper. A directory  

935
00:49:00,137 --> 00:49:02,905
full of files is a way to       
represent a document just like  

936
00:49:02,973 --> 00:49:06,075
is a data is. But usually this  
is going to return a Data.      

937
00:49:06,143 --> 00:49:09,211
In fact, look, the default      
returns a blank Data. So here,  

938
00:49:09,279 --> 00:49:11,680
to do either of these,          

939
00:49:11,749 --> 00:49:15,918
we actually need that model     
passed to us in the document.   

940
00:49:15,986 --> 00:49:18,854
So, I'm gonna have a var        
emojiArt over here as well      

941
00:49:18,923 --> 00:49:20,990
which is going to               
be an EmojiArt. And             

942
00:49:21,058 --> 00:49:24,693
any time I wanna save my model  
from my controller, I just      

943
00:49:24,761 --> 00:49:28,497
take my controller's model and  
put it in the document and      

944
00:49:28,566 --> 00:49:31,567
then the document knows         
what to do from there.          

945
00:49:31,636 --> 00:49:34,936
So let's go ahead and           
return this emojiArt.json and   

946
00:49:35,005 --> 00:49:37,640
if it doesn't have              
JSON representation,            

947
00:49:37,708 --> 00:49:41,877
then we'll return Data,         
which is a blank document.      

948
00:49:41,946 --> 00:49:44,080
Empty document and              
we know how to deal with that,  

949
00:49:44,148 --> 00:49:46,982
because our documents           
always come up empty.           

950
00:49:47,051 --> 00:49:50,485
And then this is the other way  
around, here we're having one   

951
00:49:50,554 --> 00:49:54,323
passed to us. A data pass to    
us and we want to turn it into  

952
00:49:54,392 --> 00:49:57,226
an emoji art. So I'm going to   
say if I can let the json =,    

953
00:49:57,295 --> 00:49:59,461
the contents that were          
passed to me as a data,         

954
00:49:59,530 --> 00:50:01,964
because I don't deal            
with file wrappers.             

955
00:50:02,033 --> 00:50:05,233
If this were a file wrapper,    
I don't deal with that.         

956
00:50:05,302 --> 00:50:08,336
Then I'm gonna set my           
emojiArt equal to, again,       

957
00:50:08,405 --> 00:50:11,773
using that constructor that     
I did to take the data and      

958
00:50:11,842 --> 00:50:13,408
turn it into an EmojiArt.       

959
00:50:13,477 --> 00:50:17,212
And this might fail and that's  
fine. And this will be nil and  

960
00:50:17,281 --> 00:50:20,449
then it won't save the          
document. It can't save a nil   

961
00:50:20,517 --> 00:50:25,187
document. And, I talked about   
this ofType in both these       

962
00:50:25,255 --> 00:50:29,892
cases. This is a UTI.           
Like public.json is a UTI or    

963
00:50:29,960 --> 00:50:35,030
edu.standford.cs193.emojiart    
could be a UTI.                 

964
00:50:35,099 --> 00:50:36,998
A unique identifier             
of the type.                    

965
00:50:37,067 --> 00:50:40,102
Now we don't really care        
because we only open one thing  

966
00:50:40,171 --> 00:50:43,171
or anything we open, JSON or    
an emojiArt or whatever,        

967
00:50:43,240 --> 00:50:46,074
is all just a JSON data anyway  
to us. So we don't care about   

968
00:50:46,143 --> 00:50:48,744
the type, but some apps might   
open multiple different types.  

969
00:50:48,813 --> 00:50:50,646
They might need to know         
what type it is in order to     

970
00:50:50,715 --> 00:50:53,715
successfully open it or save    
it. And that's it, this is all  

971
00:50:53,784 --> 00:50:57,286
we need to do to do an          
emojiArt document. We're done,  

972
00:50:57,355 --> 00:51:00,489
now we can use all the API of   
UIDocument like, let's say,     

973
00:51:00,558 --> 00:51:03,659
synchronous opening and         
saving, working over iCloud,    

974
00:51:03,727 --> 00:51:06,928
automatics, auto saving, all    
that stuff just all work for    

975
00:51:06,997 --> 00:51:09,331
free as long as we              
implement these things.         

976
00:51:09,399 --> 00:51:13,235
So let's use all those          
things back in our emojiArt     

977
00:51:13,304 --> 00:51:16,939
view controller here to         
replace the places where we're  

978
00:51:17,008 --> 00:51:20,842
actually accessing the file     
system directly here. So        

979
00:51:20,911 --> 00:51:25,513
we want to get rid of this,     
so let's delete all that. And   

980
00:51:25,582 --> 00:51:28,017
let's delete all this. And      

981
00:51:28,085 --> 00:51:32,254
we're gonna replace this with   
stuff from using the same       

982
00:51:32,323 --> 00:51:35,690
primitives, but using           
the document. Now, to do this,  

983
00:51:35,759 --> 00:51:38,560
we obviously need to have       
a var which is the document     

984
00:51:38,629 --> 00:51:40,228
cos we have to be able to       
talk to our own document.       

985
00:51:40,297 --> 00:51:42,665
And so we're just gonna         
have a var called               

986
00:51:42,733 --> 00:51:45,500
document which is a type        
EmojiArtDocument. This is       

987
00:51:45,569 --> 00:51:49,938
going to be set in that code    
from the file chooser, right?   

988
00:51:50,007 --> 00:51:51,439
When the file chooser           
chooses a file,                 

989
00:51:51,508 --> 00:51:53,875
we're gonna set our             
document in our new MVC and     

990
00:51:53,944 --> 00:51:57,012
then it's just gonna magically  
show its stuff using all        

991
00:51:57,081 --> 00:51:59,648
the document API.               
So let's talk about,            

992
00:51:59,717 --> 00:52:03,151
view will appear first.         
When our first document first   

993
00:52:03,220 --> 00:52:05,587
appears, we need to             
open our document.              

994
00:52:05,656 --> 00:52:10,091
So we do that by just saying,   
document?.open. And that's all  

995
00:52:10,160 --> 00:52:12,695
we have to say. It does come    
with a completion handler       

996
00:52:12,763 --> 00:52:16,064
that will tell you whether it   
was successful doing that.      

997
00:52:16,133 --> 00:52:18,833
And we usually want to check    
this, and say, if we're,        

998
00:52:18,902 --> 00:52:21,303
there were success, then        
we're going to do some stuff.   

999
00:52:21,372 --> 00:52:23,639
What might we want to do here,  
maybe want to set               

1000
00:52:23,708 --> 00:52:30,912
our title equal to the          
documents localized name. This  

1001
00:52:30,981 --> 00:52:33,749
localized name just come from   
the URL, it's like the last     

1002
00:52:33,817 --> 00:52:35,851
part of the URL without the     
file extension put in there,    

1003
00:52:35,919 --> 00:52:38,386
so that's nice. We need         
self in there of course to      

1004
00:52:38,455 --> 00:52:40,989
insert a closure. But the most  
important thing we wanna        

1005
00:52:41,058 --> 00:52:46,361
do if we successfully open the  
document is to set our model    

1006
00:52:46,430 --> 00:52:51,567
to the model that the document  
was able to get by              

1007
00:52:51,635 --> 00:52:56,438
opening that file. So the       
document has an emoji art that  

1008
00:52:56,507 --> 00:53:01,176
it got from the file. We have   
our model. We want to get it.   

1009
00:53:01,245 --> 00:53:04,212
So that's the main thing we     
are doing in all of these       

1010
00:53:04,281 --> 00:53:07,582
document things, is for         
setting, getting our model.     

1011
00:53:07,651 --> 00:53:10,819
Now what about save? Well,      

1012
00:53:10,888 --> 00:53:17,259
we actually don't really        
do save, we do autosave.        

1013
00:53:17,328 --> 00:53:21,529
So how do we do autosave? The   
only thing that's important     

1014
00:53:21,598 --> 00:53:25,868
with autosave is that you tell  
the UIDocument that something   

1015
00:53:25,936 --> 00:53:28,437
has changed. Otherwise, it's    
not going to waste its time     

1016
00:53:28,505 --> 00:53:31,239
autosaving something            
that hasn't changed. And        

1017
00:53:31,308 --> 00:53:36,111
you do that by first telling    
the document to look            

1018
00:53:36,180 --> 00:53:40,849
at your model, so               
we wanna set it to our model.   

1019
00:53:40,918 --> 00:53:44,186
And then you tell the document  
that a change has happened.     

1020
00:53:44,255 --> 00:53:47,723
So you update the change count  
and you say that that change    

1021
00:53:47,791 --> 00:53:51,593
is done. By the way, this done  
can be undo, redo or done.      

1022
00:53:51,662 --> 00:53:53,728
So we're not talking about      
the undo manager, so            

1023
00:53:53,797 --> 00:53:56,531
I can't really show you that.   
But the other option is done,   

1024
00:53:56,600 --> 00:53:58,333
because meaning                 
the change is done.             

1025
00:53:58,402 --> 00:54:01,636
And by the way, I'm only going  
to do this is the document's    

1026
00:54:01,705 --> 00:54:05,140
emojiArt is not nil. Okay, if   
we haven't actually started up  

1027
00:54:05,208 --> 00:54:08,343
a document, it's useless to     
be updating its change count    

1028
00:54:08,412 --> 00:54:13,816
there. Now this is strange,     
because we are saying and       

1029
00:54:13,884 --> 00:54:16,084
noting that our                 
document changed,               

1030
00:54:16,152 --> 00:54:20,522
because the user pressed the    
save button. That is weird.     

1031
00:54:20,591 --> 00:54:23,925
Really, we should notice        
change when anything changes.   

1032
00:54:23,994 --> 00:54:26,494
Someone dragged out another     
emoji, they resized it,         

1033
00:54:26,563 --> 00:54:29,230
they put a different            
background URL. That's when     

1034
00:54:29,299 --> 00:54:31,834
we should "save". And really,   
this method shouldn't even be   

1035
00:54:31,902 --> 00:54:34,069
called save, it should be       
called document change.         

1036
00:54:34,138 --> 00:54:37,339
Well, unfortunately, the time,  
one of the number one thing     

1037
00:54:37,408 --> 00:54:39,041
it's gonna cut off              
that I can't get done,          

1038
00:54:39,110 --> 00:54:40,509
because of this midterm         
coming in here,                 

1039
00:54:40,578 --> 00:54:45,079
is putting that saving, or the  
document change tracking in.    

1040
00:54:45,148 --> 00:54:47,182
And why is that                 
an interesting thing?           

1041
00:54:47,251 --> 00:54:52,086
Well, because that's being      
tracked in our view, right?     

1042
00:54:52,155 --> 00:54:54,957
Our view is what knows when     
we've resized something or      

1043
00:54:55,025 --> 00:54:55,958
dragged something in.           

1044
00:54:56,026 --> 00:54:58,861
So our view needs to talk back  
to our controller and say,      

1045
00:54:58,929 --> 00:55:02,430
hey, something changed. Well,   
it can't talk back to our       

1046
00:55:02,499 --> 00:55:05,400
controller, except for blind    
and structured, right? So       

1047
00:55:05,469 --> 00:55:08,503
how would we, any of you here,  
how would you suggest that we   

1048
00:55:08,572 --> 00:55:11,506
talk from our view back to our  
controller to tell it, hey,     

1049
00:55:11,575 --> 00:55:14,510
this document has changed,      
this document has changed.      

1050
00:55:14,578 --> 00:55:16,712
What would you suggest,         
mechanism?                      

1051
00:55:23,653 --> 00:55:26,154
So one suggestion is,           
let's have a variable in our    

1052
00:55:26,223 --> 00:55:29,157
view that's a reference         
to our controller. And          

1053
00:55:29,226 --> 00:55:32,060
that's not allowed by MVC,      
right? View can't talk          

1054
00:55:32,129 --> 00:55:37,366
to its controller that way.     
So let's try delegation.        

1055
00:55:37,434 --> 00:55:40,035
The same way a table view       
talks back to its controller,   

1056
00:55:40,103 --> 00:55:42,704
it's a delegation, scroll       
view it uses delegation,        

1057
00:55:42,773 --> 00:55:45,573
that's how we would have to     
do. So we are going to set up   

1058
00:55:45,642 --> 00:55:48,410
our own delegation where        
we have an emojiArt view        

1059
00:55:48,479 --> 00:55:50,745
delegate. That's what we        
would do. Unfortunately,        

1060
00:55:50,814 --> 00:55:52,314
I don't have time to do that,   
but that's what we would do.    

1061
00:55:52,382 --> 00:55:54,115
So I don't want you to get      
the idea here that you should   

1062
00:55:54,184 --> 00:55:56,017
have save buttons               
in document apps.               

1063
00:55:56,086 --> 00:55:57,719
You should never                
have a save button.             

1064
00:55:57,788 --> 00:55:59,354
It should know when             
things change and               

1065
00:55:59,423 --> 00:56:03,091
just call this                  
updateChangCount.               

1066
00:56:03,160 --> 00:56:05,627
But since we don't have that,   
we will have our save button,   

1067
00:56:05,696 --> 00:56:09,865
we will just tell it when it    
saves. All right? What else do  

1068
00:56:09,934 --> 00:56:12,600
we have to do here? How         
about closing our document.     

1069
00:56:12,669 --> 00:56:16,004
Right now we only have one      
document, untitled.json, but    

1070
00:56:16,073 --> 00:56:18,606
we're just about to ask, add a  
file chooser that's gonna let   

1071
00:56:18,675 --> 00:56:20,508
us choose lots of               
different documents. So         

1072
00:56:20,577 --> 00:56:22,610
we need a way to close          
this document so                

1073
00:56:22,679 --> 00:56:24,312
we can open another document.   

1074
00:56:24,381 --> 00:56:29,284
So I'm gonna go back and        
add a close button to our UI.   

1075
00:56:29,352 --> 00:56:32,354
I'm gonna put it right here     
on the other side from save     

1076
00:56:32,423 --> 00:56:36,525
over there. We're gonna go      
in here. Bar Button again,      

1077
00:56:38,261 --> 00:56:40,862
Bar Button up here. There's     
actually a standard one for     

1078
00:56:40,931 --> 00:56:42,864
that.                           
It's actually called Done,      

1079
00:56:42,933 --> 00:56:47,068
cuz you're done with this       
document, right there. And      

1080
00:56:47,137 --> 00:56:52,106
we are then going to            
control-drag, and               

1081
00:56:52,175 --> 00:56:55,978
I'll put it right in here. And  
I'm gonna have an action here.  

1082
00:56:56,046 --> 00:56:58,713
I'm gonna call it close,        
I could call it done, but       

1083
00:56:58,782 --> 00:57:02,851
I'll call it close.             
And now let's go back           

1084
00:57:02,920 --> 00:57:08,189
to full width here, go back     
over to here. All right,        

1085
00:57:08,258 --> 00:57:11,093
so what are we gonna do in our  
close? Well, for a document     

1086
00:57:11,161 --> 00:57:15,564
app, it's easy. You're just     
gonna say document?.close().    

1087
00:57:15,632 --> 00:57:18,666
Now, it also has a success      
completion handler, but         

1088
00:57:18,735 --> 00:57:22,037
I don't really care because     
I'm not gonna do anything.      

1089
00:57:22,106 --> 00:57:23,471
Whether it's successful or      
not,                            

1090
00:57:23,540 --> 00:57:25,907
I'm just going to try to close  
it, and hope it will be, and    

1091
00:57:25,976 --> 00:57:28,476
99% of the time it's going      
to be. I could, you know,       

1092
00:57:28,545 --> 00:57:31,613
catch your errors and stuff     
like that. Having problems for  

1093
00:57:31,682 --> 00:57:33,682
some reason, the closing and    
having problems, but            

1094
00:57:33,750 --> 00:57:35,350
the best we can really do       
is just try to close and        

1095
00:57:35,419 --> 00:57:37,251
see what happens. The other     
thing I'm gonna do is I'm       

1096
00:57:37,320 --> 00:57:40,788
gonna save() right before, now  
because I don't have automatic  

1097
00:57:40,857 --> 00:57:43,892
change tracking, I wanna save   
before I close. If I had        

1098
00:57:43,961 --> 00:57:47,362
automatic change tracking, I    
wouldn't do save here. I would  

1099
00:57:47,431 --> 00:57:49,330
delete this line of code. And   
in fact I am going to delete    

1100
00:57:49,399 --> 00:57:52,234
this line of code when I post   
this code after lecture,        

1101
00:57:52,302 --> 00:57:54,369
because I'm going to have that  
change tracking in there.       

1102
00:57:54,438 --> 00:57:56,237
Now notice I did save           
with no argument,               

1103
00:57:56,306 --> 00:57:57,472
because save takes a bar        

1104
00:57:57,541 --> 00:58:00,208
button item and I don't have    
one. Here's a cool trick.       

1105
00:58:00,277 --> 00:58:01,809
I'm gonna make this             
an optional and                 

1106
00:58:01,878 --> 00:58:05,814
have it default to nil.         
By doing that, now I can call   

1107
00:58:05,882 --> 00:58:08,050
save with nothing and           
it defaults to nil and          

1108
00:58:08,118 --> 00:58:10,151
I don't use this bar            
button item in here so,         

1109
00:58:10,220 --> 00:58:15,156
all is well. Everybody          
got all that? Okay, now,        

1110
00:58:15,225 --> 00:58:17,659
to test all of this, this is    
it. See how we've replaced all  

1111
00:58:17,728 --> 00:58:20,796
that stuff in our, that was     
file system now with all this   

1112
00:58:20,864 --> 00:58:23,298
nice code that is very          
understandable and readable?    

1113
00:58:23,367 --> 00:58:26,602
Open our document, close our    
document, update the document.  

1114
00:58:26,670 --> 00:58:30,238
I'm going to, in my view        
did load, set my document       

1115
00:58:30,307 --> 00:58:33,174
to be Untitled.json.            
Eventually, it's going to be    

1116
00:58:33,243 --> 00:58:35,277
that chooser thing, but for     
now it's going to be that.      

1117
00:58:35,345 --> 00:58:37,145
So in viewDidLoad, just a,      
this is just as a test.         

1118
00:58:37,214 --> 00:58:38,780
I'm going to take this          
right out of here,              

1119
00:58:38,849 --> 00:58:40,415
right after we do this test.    
And                             

1120
00:58:40,484 --> 00:58:45,320
all I'm going to do             
here is get that,               

1121
00:58:45,388 --> 00:58:50,092
that json url again.            
You can see why I put that in,  

1122
00:58:50,160 --> 00:58:51,659
those codes in there,           
because I have to type it so    

1123
00:58:51,728 --> 00:58:54,729
many times. And all I'm         
going to do here is just        

1124
00:58:54,798 --> 00:58:56,497
set my document, right?         

1125
00:58:56,566 --> 00:59:00,302
That's this bar right here. It  
has to be an EmojiArtDocument,  

1126
00:59:00,370 --> 00:59:04,038
I'm going to set that           
equal to an EmojiArt,           

1127
00:59:04,107 --> 00:59:07,242
well we're running out of       
battery there. Document, and    

1128
00:59:07,311 --> 00:59:11,713
remember that UIDocuments       
only have one initializer,      

1129
00:59:11,781 --> 00:59:16,384
it's the URL.                   
So this is fileURL,             

1130
00:59:16,453 --> 00:59:22,557
the URL. Make sense there?      

1131
00:59:22,626 --> 00:59:26,261
Have my close, curly braces,    
there we go. So that's it.      

1132
00:59:26,330 --> 00:59:29,664
So I'm only doing that          
just as a test. So now,         

1133
00:59:29,732 --> 00:59:33,535
when we launch our app, it      
should load that Untitled.json  

1134
00:59:33,604 --> 00:59:36,104
up because we're immediately    
setting that as our document,   

1135
00:59:36,173 --> 00:59:37,739
and the document                
just does its thing.            

1136
00:59:37,808 --> 00:59:41,242
So let's go ahead and           
take a look at that here.       

1137
00:59:41,311 --> 00:59:44,713
Run, and                        
let you see what's going on.    

1138
00:59:51,554 --> 00:59:54,823
Okay, look, it loaded           
up Untitled.json. And           

1139
00:59:54,892 --> 00:59:57,759
let's put a little airplane     
flying across there, and        

1140
00:59:57,827 --> 01:00:01,195
I'm gonna hit Save to let it    
know that there was a change    

1141
01:00:01,264 --> 01:00:06,801
to the document, and then       
hit Done. Now if I quit and     

1142
01:00:06,870 --> 01:00:11,439
run again.                      
Hopefully, we'll see            

1143
01:00:11,508 --> 01:00:13,975
the airplane there and we did.  
Okay, so UIDocument is doing    

1144
01:00:14,044 --> 01:00:16,177
all of the things the file      
system stuff was doing for      

1145
01:00:16,246 --> 01:00:18,413
us. But                         
now that we have UIDocument,    

1146
01:00:18,481 --> 01:00:21,149
we can have our                 
app launch instead              

1147
01:00:21,218 --> 01:00:23,151
of launch and                   
show this, launch and           

1148
01:00:23,220 --> 01:00:25,420
show that file choosing thing,  
the document browser thing,     

1149
01:00:25,488 --> 01:00:28,222
like the files app.             
So let's go put that piece of   

1150
01:00:28,291 --> 01:00:31,526
the puzzle in here.             
Before I do anything,           

1151
01:00:31,595 --> 01:00:34,763
I'm going to make sure I        
remove this viewDidLoad.        

1152
01:00:34,832 --> 01:00:37,298
I'm going to take that away     
because I'm not gonna be        

1153
01:00:37,367 --> 01:00:41,436
setting my document to this     
Untitled.json, I'm going to be  

1154
01:00:41,505 --> 01:00:44,272
setting it to whatever          
the document view browser       

1155
01:00:44,340 --> 01:00:48,110
wants me to have it be.         
All right, so here we are.      

1156
01:00:48,178 --> 01:00:50,578
This is the document            
browser view controller,        

1157
01:00:50,647 --> 01:00:53,414
this is thing where all         
the magic happens, here.        

1158
01:00:53,483 --> 01:00:57,419
One thing we have to do to get  
this guy in the loop is to go   

1159
01:00:57,487 --> 01:01:01,622
back to our storyboard and      
have the entry point no longer  

1160
01:01:01,691 --> 01:01:05,993
be our MVC. Instead it's going  
to be this. And we're gonna be  

1161
01:01:06,062 --> 01:01:09,664
responsible from getting from   
here to presenting this on top  

1162
01:01:09,733 --> 01:01:12,333
of this to show our documents.  
So, let's see how we do that.   

1163
01:01:12,402 --> 01:01:15,770
All right, so let's do all      
the parts I talked about in     

1164
01:01:15,838 --> 01:01:18,840
the slides here. Let's do       
viewDidLoad. Let's configure.   

1165
01:01:18,908 --> 01:01:22,744
So, of course, we want or       
delegate = self, we need that.  

1166
01:01:22,813 --> 01:01:25,513
Also, we are not going to       
allow picking of multiple       

1167
01:01:25,581 --> 01:01:28,015
items, cuz we only know how     
to show one EmojiArtDocument    

1168
01:01:28,084 --> 01:01:32,454
at a time. Allows               
documentation to be true, hm,   

1169
01:01:32,522 --> 01:01:36,224
yeah for now. And then here     
is things, tint color,          

1170
01:01:36,293 --> 01:01:38,059
I'm not gonna change            
the color or the look of it.    

1171
01:01:38,128 --> 01:01:40,996
You can play around with that,  
see what you like there.        

1172
01:01:41,064 --> 01:01:43,264
So, we're gonna come            
back to viewDidLoad and         

1173
01:01:43,333 --> 01:01:44,765
address this in just a moment.  

1174
01:01:44,834 --> 01:01:48,002
But now let's go down here to   
didRequestDocumentCreationWit-  

1175
01:01:48,071 --> 01:01:51,372
hHandler. This is where it's    
saying, give me the URL of      

1176
01:01:51,441 --> 01:01:53,508
a blank document, because       
someone wants to create one.    

1177
01:01:53,577 --> 01:01:55,943
And I'm gonna make this         
really easy on us here.         

1178
01:01:56,012 --> 01:01:58,013
I'm gonna delete all            
of that in there, and           

1179
01:01:58,081 --> 01:02:00,948
just call this importHandler    
that it gave me.                

1180
01:02:01,017 --> 01:02:04,186
See, it's giving me this        
importHandler? It takes a URL,  

1181
01:02:04,254 --> 01:02:07,221
and either copy or move.        
And I'm gonna copy,             

1182
01:02:07,290 --> 01:02:12,293
call it with a template, which  
is gonna be a URL, and .copy.   

1183
01:02:12,362 --> 01:02:19,467
And all I have to do is make    
a URL, var template: URL.       

1184
01:02:19,536 --> 01:02:21,936
Make this template point        
to some blank document.         

1185
01:02:22,005 --> 01:02:26,707
And I'm gonna do that in        
viewDidLoad right here. And     

1186
01:02:26,776 --> 01:02:28,943
I type that over here. And      

1187
01:02:29,012 --> 01:02:30,779
to do that I'm just             
going to get a URL.             

1188
01:02:30,847 --> 01:02:33,147
This time not into my           
documents directory because     

1189
01:02:33,216 --> 01:02:35,350
this is the blank document I'm  
copying all the time. I don't   

1190
01:02:35,419 --> 01:02:38,753
want it to appear in the        
documents when the guy goes     

1191
01:02:38,822 --> 01:02:41,856
and looks there. So I'm gonna   
put it in applicationSupport.   

1192
01:02:41,924 --> 01:02:44,125
So, applicationSupport's a      
great place to put things that  

1193
01:02:44,194 --> 01:02:46,928
are kind of behind the scenes.  
But they're permanent.          

1194
01:02:46,997 --> 01:02:48,529
I want this template            
to stick around.                

1195
01:02:48,598 --> 01:02:50,265
I don't want it to be in        
the caches and get deleted,     

1196
01:02:50,334 --> 01:02:52,033
although I probably could       
put it in caches cuz            

1197
01:02:52,102 --> 01:02:54,669
I can always recreate           
it here in viewDidLoad.         

1198
01:02:54,738 --> 01:02:56,138
But anyway, so                  
this is the URL.                

1199
01:02:56,206 --> 01:02:58,206
I'm going to call it            
Untitled.json, just for         

1200
01:02:58,274 --> 01:02:59,040
old time's sake.                

1201
01:02:59,109 --> 01:03:01,642
I'm putting it in my            
applicationSupportDirectory.    

1202
01:03:01,711 --> 01:03:04,712
And all I wanna do here,        
though, is make sure I create   

1203
01:03:04,781 --> 01:03:07,382
this file. So I've got the URL  
to it. So to create it,         

1204
01:03:07,451 --> 01:03:11,486
I'm gonna say, if the template  
is not nil. In other words,     

1205
01:03:11,554 --> 01:03:14,389
I was able to create the URL,   
which I should be able to.      

1206
01:03:14,458 --> 01:03:18,126
I'm gonna now set               
allowDocumentCreation.          

1207
01:03:18,194 --> 01:03:20,795
This var up here,               
instead of it being true.       

1208
01:03:20,864 --> 01:03:23,665
I am going to set it to         
be the result of asking         

1209
01:03:23,734 --> 01:03:26,334
the FileManager,                
the default FileManager,        

1210
01:03:26,403 --> 01:03:30,371
to create that file. So it has  
a method called createFile,     

1211
01:03:30,440 --> 01:03:33,608
give it the path to the file,   
the template's path, and        

1212
01:03:33,677 --> 01:03:35,009
you create it with              
some contents.                  

1213
01:03:35,078 --> 01:03:37,745
I'm gonna make it empty cuz     
it's just a blank document, or  

1214
01:03:37,814 --> 01:03:40,481
an empty document, and I don't  
even need any file attribute,   

1215
01:03:40,550 --> 01:03:43,184
so let's get rid of that. Now   
createFile is a nice way to     

1216
01:03:43,253 --> 01:03:45,353
create a file because           
it doesn't throw or             

1217
01:03:45,421 --> 01:03:48,389
anything like that, and it      
returns a Boolean whether that  

1218
01:03:48,458 --> 01:03:50,659
file either got created or      
already exists,                 

1219
01:03:50,727 --> 01:03:52,460
which is exactly                
what I want here.               

1220
01:03:52,529 --> 01:03:55,797
And if it's true, then I will   
allow document creation.        

1221
01:03:55,865 --> 01:03:57,131
Otherwise, I'm not              
gonna allow it,                 

1222
01:03:57,200 --> 01:04:00,301
cuz I couldn't create the       
template. See why I'm doing     

1223
01:04:00,370 --> 01:04:03,905
that right there? So that's a   
nice little trick to kinda do.  

1224
01:04:03,973 --> 01:04:05,840
When you're creating            
your template,                  

1225
01:04:05,909 --> 01:04:09,377
if you fail to create it for    
some reason, you can do that.   

1226
01:04:09,446 --> 01:04:12,547
So now this importHandler will  
just work. I'm passing it to    

1227
01:04:12,615 --> 01:04:15,383
this template that I created    
up here, and having it copy     

1228
01:04:15,451 --> 01:04:18,386
out of application support      
into the documents directory.   

1229
01:04:18,454 --> 01:04:21,089
These other things over here    
we don't need to even touch.    

1230
01:04:21,158 --> 01:04:23,791
These are the things that get   
called when people click on     

1231
01:04:23,860 --> 01:04:26,026
documents,                      
didPickDocumentURLs.            

1232
01:04:26,095 --> 01:04:29,363
didImportDocument is when some  
other app, like the files app,  

1233
01:04:29,432 --> 01:04:31,566
asks you to open up             
one of your documents.          

1234
01:04:31,634 --> 01:04:34,469
And notice that they are both   
doing the same one liner,       

1235
01:04:34,537 --> 01:04:37,272
which is, please present        
the document at that URL.       

1236
01:04:37,340 --> 01:04:41,008
That means, put up your         
ViewController to show it.      

1237
01:04:41,077 --> 01:04:44,545
Okay, so we, and there's a,     
by the way, an error one here,  

1238
01:04:44,614 --> 01:04:46,681
see, failedToImportDocumentAt.  

1239
01:04:46,749 --> 01:04:48,316
You really should put           
up an alert here, but           

1240
01:04:48,385 --> 01:04:49,884
I haven't shown you             
how to put up alerts.           

1241
01:04:49,953 --> 01:04:51,318
I'm gonna show you next week,   

1242
01:04:51,387 --> 01:04:53,988
so you can't do it. But that,   
you really should put an alert  

1243
01:04:54,057 --> 01:04:55,790
that says,                      
couldn't load document, or      

1244
01:04:55,858 --> 01:04:58,192
couldn't open document, or      
whatever. All right, so         

1245
01:04:58,261 --> 01:05:00,728
here's presentDocument, that's  
going to present it. And        

1246
01:05:00,797 --> 01:05:03,665
I'm gonna basically do what I   
showed you in the slides right  

1247
01:05:03,733 --> 01:05:06,100
here, which is,                 
I'm gonna get my storyBoard.    

1248
01:05:06,169 --> 01:05:08,870
There was already code to       
get the storyBoard in here      

1249
01:05:08,939 --> 01:05:12,206
from that template. And I'm     
going to use the storyBoard to  

1250
01:05:12,275 --> 01:05:14,409
get the ViewController          
that I want to present.         

1251
01:05:14,478 --> 01:05:16,144
Now, it's a little              
tricky here,                    

1252
01:05:16,212 --> 01:05:19,080
the ViewController that I want  
to present is actually not      

1253
01:05:19,149 --> 01:05:22,383
my emoji art ViewController.    
It's the navigation controller  

1254
01:05:22,452 --> 01:05:24,785
it's in, does everyone          
understand that? So             

1255
01:05:24,854 --> 01:05:27,922
I have to somehow instantiate   
this navigation controller,     

1256
01:05:27,991 --> 01:05:29,523
which will also bring this in.  

1257
01:05:29,592 --> 01:05:32,226
So I need to give this guy      
a name, so I'm just going to    

1258
01:05:32,295 --> 01:05:35,296
select it, go to the Identity   
Inspector and give it a name.   

1259
01:05:35,364 --> 01:05:40,301
I'm gonna call it, my           
DocumentMVC. It could be any    

1260
01:05:40,370 --> 01:05:43,671
name we want, but DocumentMVC   
is kind of what that is,        

1261
01:05:43,740 --> 01:05:46,174
at the top of my                
DocumentMVC mechanism.          

1262
01:05:46,243 --> 01:05:50,946
So now that I have this name,   
I can go back here and say-     

1263
01:05:54,718 --> 01:05:57,285
Let my documentVC               

1264
01:05:57,354 --> 01:06:03,524
= the                           
storyBoard.instantiateViewCon-  

1265
01:06:03,593 --> 01:06:11,099
troller(withIdentifier:         
"DocumentMVC").                 

1266
01:06:11,168 --> 01:06:13,101
So now we have                  
our DocumentMVC.                

1267
01:06:13,170 --> 01:06:17,038
And now I'm just going to       
configure it, and then I'm      

1268
01:06:17,106 --> 01:06:21,508
going to present it by saying   
present the (documentMVC),      

1269
01:06:21,577 --> 01:06:25,146
VC rather. And animated: true,  
I want animated: true in case   

1270
01:06:25,215 --> 01:06:28,116
someone clicked on it in the    
file, we want it to slide up,   

1271
01:06:28,184 --> 01:06:29,884
right? We don't just            
want it to just appear,         

1272
01:06:29,953 --> 01:06:31,219
we want it to slide             
up from the bottom.             

1273
01:06:31,287 --> 01:06:33,754
There's even a way to make      
this like grow out of the icon  

1274
01:06:33,823 --> 01:06:35,790
in the files thing,             
which is really cool.           

1275
01:06:35,859 --> 01:06:36,991
It's not even that hard, but    

1276
01:06:37,060 --> 01:06:39,460
unfortunately I don't have      
time to show it to you, but     

1277
01:06:39,529 --> 01:06:42,096
just know that there's a way    
to do it. This is gonna be      

1278
01:06:42,165 --> 01:06:45,299
the normal slide up from        
the bottom presentation. But    

1279
01:06:45,368 --> 01:06:48,570
this DocumentMVC has an         
emojiViewController in it that  

1280
01:06:48,638 --> 01:06:50,471
we need to set                  
the document of. So             

1281
01:06:50,540 --> 01:06:52,907
I'm going to do the same kind   
of thing we do in a prepare.    

1282
01:06:52,976 --> 01:06:57,912
I'm going to say, if I can      
let my emojiViewController      

1283
01:06:57,980 --> 01:07:02,517
= the documentViewController,   
its contents.                   

1284
01:07:02,585 --> 01:07:05,419
Remember that contents, I       
showed you that before, let's   

1285
01:07:05,488 --> 01:07:08,255
go look at it just to remind    
you, I have this in Utilities.  

1286
01:07:08,324 --> 01:07:12,092
The contents is a UI            
ViewController method right     

1287
01:07:12,161 --> 01:07:17,265
here, that just says, if I'm a  
navigation controller, return   

1288
01:07:17,334 --> 01:07:20,468
my contents. Otherwise, if I'm  
not a navigation controller,    

1289
01:07:20,536 --> 01:07:22,437
just return myself.             
So this will make it so         

1290
01:07:22,505 --> 01:07:24,639
that this code that I           
just wrote will work,           

1291
01:07:24,707 --> 01:07:28,042
whether it's wrapped in a       
navigation controller or not.   

1292
01:07:28,111 --> 01:07:34,282
So get the contents as          
an EmojiArtViewController.      

1293
01:07:34,350 --> 01:07:42,257
So, if I can get                
the EmojiArtViewController,     

1294
01:07:42,325 --> 01:07:45,860
I guess I should call this      
EmojiArtViewController just to  

1295
01:07:45,929 --> 01:07:48,963
be nice there.                  
Then I can set its document,    

1296
01:07:49,032 --> 01:07:52,233
EmojiArtViewController.docu-    
ment = and                      

1297
01:07:52,302 --> 01:07:55,536
what does the document equals?  
It means,                       

1298
01:07:55,605 --> 01:07:59,106
= a new EmojiArtDocument,       
which we know                   

1299
01:07:59,175 --> 01:08:03,478
the constructor is fileURL,     
and what's the URL?             

1300
01:08:03,546 --> 01:08:08,883
It's the URL they want us       
to present, documentURL.        

1301
01:08:13,289 --> 01:08:19,794
This is saying Instance         
member, capital E,              

1302
01:08:19,862 --> 01:08:24,566
there we go. I thought it       
wanted a static method there.   

1303
01:08:26,602 --> 01:08:29,603
One other thing we need to      
do is the types. Right now,     

1304
01:08:29,672 --> 01:08:32,540
if we go look at our project    
settings right here,            

1305
01:08:32,609 --> 01:08:35,743
I'm gonna go over and           
look at our project settings.   

1306
01:08:35,812 --> 01:08:37,812
And we look at the info here,   

1307
01:08:37,880 --> 01:08:42,683
the Document Types that we      
can open are images. And        

1308
01:08:42,752 --> 01:08:47,521
we don't open images, we open   
JSON files. public.JSON.        

1309
01:08:47,590 --> 01:08:51,759
And, like I say, when I post    
the code after lecture,         

1310
01:08:51,828 --> 01:08:54,762
I'll also do this               
Exported UTIs down here. And    

1311
01:08:54,831 --> 01:08:57,632
make a new type of emoji art,   
and then put that as our type.  

1312
01:08:57,701 --> 01:09:02,503
But, for now, we'll say         
that we do JSON files.          

1313
01:09:02,572 --> 01:09:04,972
Okay, so if I haven't           
forgotten anything here,        

1314
01:09:05,041 --> 01:09:10,111
it should work.                 
Okay, look at that,             

1315
01:09:10,180 --> 01:09:12,246
already you can see that        
our app is quite different.     

1316
01:09:12,314 --> 01:09:18,018
It is showing us a UI that      
looks just like the files app,  

1317
01:09:18,087 --> 01:09:20,855
right? It's got the folders     
and all that stuff,             

1318
01:09:20,924 --> 01:09:22,724
we can even go over             
here to iCloud Drive.           

1319
01:09:22,792 --> 01:09:26,160
We can go on my iPad, there     
it is, EmojiArt, let's look     

1320
01:09:26,228 --> 01:09:30,964
inside. Okay, there is our      
Untitled.JSON, let's open it.   

1321
01:09:31,033 --> 01:09:36,470
Woo, it works! Let's close      
this one, it doesn't close,     

1322
01:09:36,539 --> 01:09:39,673
look, I'm pressing Done,        
it doesn't close.               

1323
01:09:39,742 --> 01:09:43,311
When our MVC comes up, it       
takes over the whole screen,    

1324
01:09:43,379 --> 01:09:45,746
because we presented            
it right here,                  

1325
01:09:45,815 --> 01:09:50,118
how do we make it go away? How  
do we dismiss it, essentially?  

1326
01:09:50,186 --> 01:09:52,987
Well, we do that in             
the ViewController itself, or   

1327
01:09:53,056 --> 01:09:56,724
the ViewController that         
wants to dismiss itself.        

1328
01:09:56,792 --> 01:09:58,893
And the way we're gonna         
do that is in close,            

1329
01:09:58,962 --> 01:10:01,028
when you hit that Done          
button right there.             

1330
01:10:01,097 --> 01:10:03,464
And we're going to save, but    

1331
01:10:03,533 --> 01:10:08,269
then we're going to say         
dismiss(animated). So           

1332
01:10:08,338 --> 01:10:11,939
dismiss(animated: true) is      
how you dismiss yourself.       

1333
01:10:12,008 --> 01:10:14,642
If you've been presented,       
you can dismiss yourself.       

1334
01:10:14,711 --> 01:10:17,178
This also has                   
a completion handler, and       

1335
01:10:17,246 --> 01:10:20,681
in that completion handler,     
I'm going to close. So          

1336
01:10:20,750 --> 01:10:23,250
I'm gonna wait until I've been  
dismissed. The animation has    

1337
01:10:23,319 --> 01:10:26,587
happened, then I'll close my    
document. And, of course,       

1338
01:10:26,656 --> 01:10:31,059
now I'm in a closure, so I can  
say, self. So let's try that.   

1339
01:10:45,107 --> 01:10:47,742
So here I'm gonna               
open Untitled again.            

1340
01:10:47,811 --> 01:10:49,576
Now I'm gonna close it and      
I'm back here,                  

1341
01:10:49,645 --> 01:10:51,446
now I'm gonna create            
a document, ready?              

1342
01:10:51,514 --> 01:10:54,681
Create, it copies that          
template, it's blank.           

1343
01:10:54,750 --> 01:10:57,085
Now I'm gonna drag              
a document in here,             

1344
01:10:57,153 --> 01:10:59,953
let's see if we can find        
something good here,            

1345
01:11:00,022 --> 01:11:05,158
something like that. Put        
an apple on the tree, I'd say,  

1346
01:11:05,227 --> 01:11:10,498
like that. Now, I'm going to,   
I'll save just to note that it  

1347
01:11:10,566 --> 01:11:14,368
has changed, again, we should   
do that automatically. And      

1348
01:11:14,437 --> 01:11:17,838
then I'm going to say Done.     
And now I have two documents,   

1349
01:11:17,907 --> 01:11:20,574
and now I can go back to        
the other one, right?           

1350
01:11:20,643 --> 01:11:23,711
Click there, go to this one,    
put that one, now,              

1351
01:11:23,779 --> 01:11:26,780
what if want to put these       
things on iCloud Drive?         

1352
01:11:26,849 --> 01:11:30,618
Watch what happens when I go    
to iCloud Drive for emoji art,  

1353
01:11:30,687 --> 01:11:32,486
Create Document, see, look.     

1354
01:11:32,555 --> 01:11:34,889
I can create a document         
on iCloud Drive.                

1355
01:11:34,958 --> 01:11:37,958
So this is actually created on  
the network, I'll be able to    

1356
01:11:38,027 --> 01:11:40,461
see on all my devices, so       
make another one here,          

1357
01:11:40,529 --> 01:11:45,299
something like this. Put a bee  
out there, a big bee, and       

1358
01:11:45,367 --> 01:11:49,703
mark saved, and then Done.      
And now we have this document   

1359
01:11:49,772 --> 01:11:52,140
Untitled right here that        
you see is on iCloud Drive.     

1360
01:11:52,208 --> 01:11:55,042
Se still have the Untitled      
ones on our device, and         

1361
01:11:55,111 --> 01:11:58,479
we have the one here on iCloud  
Drive. So, we click on it and   

1362
01:11:58,547 --> 01:12:00,380
we get to see it. Now,          

1363
01:12:00,449 --> 01:12:04,818
the next thing I'm gonna do is  
make it so that this UI looks   

1364
01:12:04,887 --> 01:12:09,289
a lot better. Because look      
at the icons there. I mean,     

1365
01:12:09,358 --> 01:12:11,659
is that the world's ugliest     
looking icons? We're gonna      

1366
01:12:11,727 --> 01:12:13,861
go from the world's ugliest     
looking icons to the world's    

1367
01:12:13,930 --> 01:12:16,697
best looking icons.             
Because with UI document,       

1368
01:12:16,765 --> 01:12:20,535
you can have each document      
have it's own icon. And         

1369
01:12:20,603 --> 01:12:23,303
I'm gonna set the icon to       
be miniature version of         

1370
01:12:23,372 --> 01:12:25,405
the document, a thumbnail       
image of the document. That     

1371
01:12:25,474 --> 01:12:28,275
way I can easily see which one  
was the one with the apple and  

1372
01:12:28,344 --> 01:12:29,543
which one had the bee.          
It'll be,                       

1373
01:12:29,612 --> 01:12:30,511
I'll be able to see             
it right in here.               

1374
01:12:30,580 --> 01:12:33,381
So let's do that. That turned   
out to be super simple to do    

1375
01:12:33,449 --> 01:12:35,883
in the UI document. So I'm      
gonna go back to my Emoji Art   

1376
01:12:35,951 --> 01:12:38,486
document here.                  
This simple guy. And            

1377
01:12:38,554 --> 01:12:43,124
I'm just gonna add one method,  
which I'm gonna override.       

1378
01:12:43,192 --> 01:12:46,260
Called file attributes to       
right. And this is essentially  

1379
01:12:46,328 --> 01:12:48,896
just returning a dictionary     
of the file attribute,          

1380
01:12:48,964 --> 01:12:51,799
like is this file hidden,       
those kind of things. So        

1381
01:12:51,867 --> 01:12:54,001
I'm gonna get those attributes  
from my super class,            

1382
01:12:54,070 --> 01:12:55,069
cuz I'm overriding this.        

1383
01:12:55,138 --> 01:12:58,306
So when you get this and then   
I'm gonna add one attribute     

1384
01:12:58,374 --> 01:13:00,908
which is this kinda             
complicated thing called        

1385
01:13:00,976 --> 01:13:03,978
a thumbnailDictionaryKey.       
Actually the value is another   

1386
01:13:04,046 --> 01:13:08,182
dictionary. And                 
you put this other key here,    

1387
01:13:08,250 --> 01:13:10,618
Thumbnail1024x1024SizeKey.      
Don't let that fool you.        

1388
01:13:10,686 --> 01:13:13,020
It can be any size you want.    
Although if it's too small,     

1389
01:13:13,089 --> 01:13:14,655
it'll use the document          
icon again. So                  

1390
01:13:14,724 --> 01:13:17,257
make sure it's big enough to    
actually being an improvement   

1391
01:13:17,326 --> 01:13:19,860
on that. And I need to          
put a thumbnail in there.       

1392
01:13:19,929 --> 01:13:22,863
So I am gonna add a var         
to be that thumbnail.           

1393
01:13:22,932 --> 01:13:26,934
UIImage. Thumbnail's            
just a UIImage. And             

1394
01:13:27,003 --> 01:13:29,770
now I'm gonna set this          
thumbnail image in my document  

1395
01:13:29,838 --> 01:13:31,172
every time I close. So          

1396
01:13:31,240 --> 01:13:34,007
when I close I am just gonna    
make another snapshot of it.    

1397
01:13:34,076 --> 01:13:36,310
So let's go do that             
to my controller.               

1398
01:13:36,378 --> 01:13:41,348
Here's where I close, right     
after I save. I'm gonna say     

1399
01:13:41,417 --> 01:13:46,587
that my documents.thumbnail =   

1400
01:13:46,656 --> 01:13:52,126
myemojiArtview.snapshot. So     

1401
01:13:52,195 --> 01:13:56,130
snapshot is a little var that   
I wrote, I put in utilities.    

1402
01:13:56,199 --> 01:13:58,665
You can go a look at it. It's   
only three or four lines of     

1403
01:13:58,734 --> 01:14:02,102
code that just takes the view   
and snapshots it, grabs it as   

1404
01:14:02,171 --> 01:14:06,107
a UI image. And I'm only        
gonna do this by the way if,    

1405
01:14:06,175 --> 01:14:09,343
again, if my documents          
emojiArt is not nill.           

1406
01:14:09,411 --> 01:14:11,645
Cuz I don't wanna snapshot      
a blank document.               

1407
01:14:11,714 --> 01:14:14,615
But what I should do here       
is do the snapshot and          

1408
01:14:14,684 --> 01:14:18,552
then if this thing is nil, I    
should come up with some other  

1409
01:14:18,621 --> 01:14:22,923
nice thumbnail for it.          
But I'm not doing that. So      

1410
01:14:22,992 --> 01:14:26,861
let's make sure it rebuilds     
everything here. So             

1411
01:14:26,929 --> 01:14:30,598
let's run again. Go over here,  
see what this looks like.       

1412
01:14:32,635 --> 01:14:34,601
It actually ran even though it  
said it had an error there,     

1413
01:14:34,670 --> 01:14:38,338
but it did run successfully.    
All right, so                   

1414
01:14:38,407 --> 01:14:40,140
let's open one of               
our documents.                  

1415
01:14:40,209 --> 01:14:42,175
Remember we set our             
thumbnails when we close,       

1416
01:14:42,244 --> 01:14:45,947
so here's one. Let's go         
ahead and close it. And         

1417
01:14:46,015 --> 01:14:48,416
look, we get this               
beautiful thumbnail of it.      

1418
01:14:48,484 --> 01:14:49,983
How about this other            
one over here?                  

1419
01:14:50,052 --> 01:14:53,820
This guy? Let's close that      
one. And this even works on     

1420
01:14:53,889 --> 01:14:56,390
the iCloud drive. It might be   
a little delayed on the iCloud  

1421
01:14:56,458 --> 01:14:58,359
drive because it has to         
upload it, but let's try.       

1422
01:14:58,428 --> 01:15:01,395
Let's see how fast, pretty      
quick network right here.       

1423
01:15:01,464 --> 01:15:03,864
I don't know if you can         
see in the iCloud drive,        

1424
01:15:03,932 --> 01:15:06,767
it actually had the little      
cloud symbol there briefly as   

1425
01:15:06,836 --> 01:15:08,368
it was downloading              
it back from                    

1426
01:15:08,437 --> 01:15:10,104
the clouds which                
is kind of cool.                

1427
01:15:10,172 --> 01:15:13,808
In this UI that you see here,   
is all the full files UI.       

1428
01:15:13,876 --> 01:15:17,511
So not only can you do things   
like I did before we check      

1429
01:15:17,580 --> 01:15:19,846
the info, but                   
you could move it,              

1430
01:15:19,915 --> 01:15:23,984
like I could move this from my  
iCloud back to my local device  

1431
01:15:24,053 --> 01:15:26,754
or copy here I guess. And       
it's asking here if I wanna     

1432
01:15:26,823 --> 01:15:29,055
keep both or replace it cuz     
they're both called Untitled,   

1433
01:15:29,124 --> 01:15:32,292
so I'll keep both. So now if I  
go back to my iPad here, now I  

1434
01:15:32,361 --> 01:15:35,162
have three items, including     
this one here. And again,       

1435
01:15:35,231 --> 01:15:38,432
sometimes you get a delay when  
you move things from iCloud,    

1436
01:15:38,501 --> 01:15:40,834
getting the thumbnails,         

1437
01:15:40,903 --> 01:15:43,737
cuz the thumbnails can be       
kind of big at times. And so    

1438
01:15:43,806 --> 01:15:45,806
slogging them around can take   
a little bit of time here and   

1439
01:15:45,875 --> 01:15:49,009
there. You can also             
rename your files, so           

1440
01:15:49,078 --> 01:15:53,346
you know, this is apple in      
the sky. So let's rename it,    

1441
01:15:53,415 --> 01:15:58,418
let's call it Sky Apple.        
So you can rename your files,   

1442
01:15:58,487 --> 01:16:01,488
all that stuff. And the user    
can do it in here without       

1443
01:16:01,557 --> 01:16:05,225
having to go over to            
the files app to do that.       

1444
01:16:05,294 --> 01:16:07,160
I have a couple                 
minutes left so I'm             

1445
01:16:07,229 --> 01:16:10,164
gonna show you one other thing  
which is running this on        

1446
01:16:10,232 --> 01:16:14,068
iPhone. So let's go run         
this on the iPhone.             

1447
01:16:14,137 --> 01:16:17,171
I'm just gonna go run it        
in the simulator, iPhone X,     

1448
01:16:17,239 --> 01:16:22,709
let's see what this looks       
like in the iPhone X. So        

1449
01:16:22,778 --> 01:16:26,747
this whole document view        
browser, it all works just as   

1450
01:16:26,815 --> 01:16:30,551
well in the iPhone, as it does  
on the iPad. There's only       

1451
01:16:30,620 --> 01:16:32,986
a couple of things we have to   
think about when we try and     

1452
01:16:33,055 --> 01:16:36,156
make this app work on the       
iPhone, as you'll see here.     

1453
01:16:36,225 --> 01:16:39,292
Once this gets fired up.        
So there it is. See, you can,   

1454
01:16:39,361 --> 01:16:41,962
we can look on                  
iCloud Drive here.              

1455
01:16:42,031 --> 01:16:44,698
We can even see that document,  
a document that we've created   

1456
01:16:44,767 --> 01:16:49,469
before on iCloud Drive. And     
in open end, we can open stuff  

1457
01:16:49,538 --> 01:16:53,807
off of iCloud Drive. So I can   
open it. Now On iPhone, I'd     

1458
01:16:53,876 --> 01:16:57,377
really like to still be able    
to drag some emojis in and      

1459
01:16:57,446 --> 01:17:01,115
work on this document, right.   
One thing I can't do, though,   

1460
01:17:01,184 --> 01:17:03,817
is create a new document.       
Do you see why? Because on      

1461
01:17:03,886 --> 01:17:07,821
iPhone, you can't drag from     
Safari to drag in new things.   

1462
01:17:07,890 --> 01:17:11,591
So it's really misleading that  
it says Create Document here.   

1463
01:17:11,660 --> 01:17:13,694
Because if I hit                
Create Document,                

1464
01:17:13,763 --> 01:17:16,196
I can't really create           
an actual document,             

1465
01:17:16,265 --> 01:17:19,232
because I can't drag anything   
in. So I really don't want it   

1466
01:17:19,301 --> 01:17:22,336
to say Create Document on       
iPhone. The other thing is,     

1467
01:17:22,405 --> 01:17:27,074
I want my collection view to    
work. I can't drag. I'm trying  

1468
01:17:27,143 --> 01:17:30,144
to push down and drag.          
Why does drag not work? Well,   

1469
01:17:30,213 --> 01:17:32,746
drag doesn't work because       
collection view by default      

1470
01:17:32,815 --> 01:17:35,982
on iPhone does not allow        
dragging. But we can turn it    

1471
01:17:36,051 --> 01:17:38,485
on. So let's go fix both of     
those things in our code.       

1472
01:17:38,554 --> 01:17:41,454
We're gonna fix                 
the problem with                

1473
01:17:41,523 --> 01:17:45,425
the misleading create by just,  
this part here where we go and  

1474
01:17:45,494 --> 01:17:48,762
create the template. I'm just   
not gonna do that on iPhone.    

1475
01:17:48,831 --> 01:17:51,431
So I'm, that's gonna leave      
this to be false, and           

1476
01:17:51,500 --> 01:17:53,367
So how do I check my code to    
see if I'm on an iPad? And      

1477
01:17:53,368 --> 01:17:55,235
it's not do it.                 

1478
01:17:55,304 --> 01:18:00,206
you do that this way.           
You say if UIDevice.current,    

1479
01:18:00,275 --> 01:18:03,644
that's my current device,       

1480
01:18:03,713 --> 01:18:10,383
has a userInterfaceIdiom        

1481
01:18:10,452 --> 01:18:14,187
of .pad. And                    
the other option is             

1482
01:18:14,256 --> 01:18:17,724
.phone so I'm only gonna do     
this template thing, which is   

1483
01:18:17,793 --> 01:18:20,527
the only thing that can set     
this to true on the iPad.       

1484
01:18:20,596 --> 01:18:23,030
So I'm never gonna have create  
document on the iPhone.         

1485
01:18:23,099 --> 01:18:23,831
That's good.                    

1486
01:18:23,900 --> 01:18:26,233
Now, what about the dragging    
of the Collection View?         

1487
01:18:26,302 --> 01:18:29,536
Well, that's in my controller.  
I'm gonna go down here          

1488
01:18:29,605 --> 01:18:32,373
to where I create my            
Collection View. This is my     

1489
01:18:32,441 --> 01:18:34,641
Collection View outlets that    
are here. And I'm gonna set     

1490
01:18:34,710 --> 01:18:39,112
this thing in Collection View   
called draginteractionenabled.  

1491
01:18:39,181 --> 01:18:43,717
Now this is true by default on  
iPad. And false by default on   

1492
01:18:43,786 --> 01:18:45,819
my iPhone. But if I set         
it to true everywhere,          

1493
01:18:45,887 --> 01:18:46,854
now it will make it so          

1494
01:18:46,922 --> 01:18:49,656
I can drag in my collection     
vew on the iPhone, as well.     

1495
01:18:49,725 --> 01:18:53,861
So when we go here, we won't    
see the create button and       

1496
01:18:53,930 --> 01:18:57,431
we also will be able to         
work on our document.           

1497
01:19:02,104 --> 01:19:04,071
So let's open this document     
right here. Here it is.         

1498
01:19:04,139 --> 01:19:08,408
Now look, I can drag. Drag      
around my Collection View and   

1499
01:19:08,477 --> 01:19:10,910
I can also pull things          
out of here and                 

1500
01:19:10,979 --> 01:19:14,948
into my picture. I can either   
mark it as saved and done, and  

1501
01:19:15,017 --> 01:19:17,985
if I want it back to my iPad,   
I'll be able to see it over     

1502
01:19:18,053 --> 01:19:21,421
there. So the only two things   
I'm gonna do post lecture       

1503
01:19:21,490 --> 01:19:23,957
here that you're not gonna      
be able to watch me do          

1504
01:19:24,026 --> 01:19:26,694
is the delegation thing.        
So that we don't have to        

1505
01:19:26,762 --> 01:19:29,362
have that save button           
anymore cuz we hate that and    

1506
01:19:29,431 --> 01:19:32,632
also adding the new type emoji  
art. Which really is only two   

1507
01:19:32,701 --> 01:19:35,769
things I'm gonna change. I'm    
gonna add the emoji art thing   

1508
01:19:35,838 --> 01:19:38,805
in that settings that I         
was telling you about.          

1509
01:19:38,874 --> 01:19:40,941
And then I'm gonna              
change this right here,         

1510
01:19:41,010 --> 01:19:44,444
my empty template to be         
untitled dot emoji art. That's  

1511
01:19:44,513 --> 01:19:47,281
only change I'm gonna make to   
make it be using the emoji art  

1512
01:19:47,349 --> 01:19:52,519
documents instead of JSON.      
All right. That is it. I        

1513
01:19:52,588 --> 01:19:55,255
will see you all next Monday.   
>> For                          

1514
01:19:55,324 --> 01:19:59,126
more, please visit              
us at stanford.edu              
