1 00:00:08,110 --> 00:00:13,530 Everybody what's going on this is Caleb with deps slopes dot com and I'm so excited for this video because 2 00:00:13,530 --> 00:00:16,770 we're going to actually use our Nick Swift in a real app. 3 00:00:16,790 --> 00:00:23,310 And I'm going to show you how we can use it with our ex Coco as well to create observable sequences 4 00:00:23,310 --> 00:00:28,440 using some of the properties of standard cocoa touch controls which is really cool. 5 00:00:28,440 --> 00:00:34,020 So let's begin by pulling open our project and we're going to actually close the assistant editor. 6 00:00:34,080 --> 00:00:37,220 We don't need it anymore but we do an interview controller. 7 00:00:37,380 --> 00:00:43,710 So what we're going to do to begin and this is kind of what I like to do with any Arc's project is I 8 00:00:43,710 --> 00:00:51,450 like to create my dispose bag first because I will need to dispose of subscriptions at the end and it's 9 00:00:51,450 --> 00:00:53,150 just good to create it from the beginning. 10 00:00:53,160 --> 00:01:01,360 So beneath your outlets go ahead and just type let dispose bag equals dispose back just like that. 11 00:01:01,380 --> 00:01:06,380 And now we have a Dispose bag that is available for us to use when we need to. 12 00:01:06,420 --> 00:01:08,370 So get rid of this comment. 13 00:01:08,370 --> 00:01:09,810 Here we don't need it. 14 00:01:09,810 --> 00:01:15,540 And what we're actually going to start with for the Arek stuff is we're going to go down beneath feuded 15 00:01:15,540 --> 00:01:20,260 load and we're going to put everything into a function called bind. 16 00:01:20,280 --> 00:01:23,280 So go ahead and type phunk bind. 17 00:01:23,430 --> 00:01:30,810 And the reason for that is we are basically taking our textfield and we are going to capture the text 18 00:01:30,810 --> 00:01:32,750 property of the textfield. 19 00:01:32,940 --> 00:01:37,670 We're going to modify it and we're going to bind it to the label. 20 00:01:37,710 --> 00:01:38,160 OK. 21 00:01:38,250 --> 00:01:44,860 That is something we can do and are as swift as we can bind values to a UI element using Ark's cocoa. 22 00:01:45,060 --> 00:01:52,290 So inside of our bind feature what we're going to do is we're going to access name entry textfield and 23 00:01:52,290 --> 00:01:56,730 I want to show you what happens when I type Dot are x. 24 00:01:56,730 --> 00:02:01,470 Do you see that it shows that we have access to re-active extensions. 25 00:02:01,510 --> 00:02:03,000 K that's really cool. 26 00:02:03,150 --> 00:02:10,620 And what I can do is inside the R X category I can access all of the reactor bowl or reactive elements 27 00:02:10,650 --> 00:02:11,820 inside of this. 28 00:02:11,820 --> 00:02:17,790 We're going to be using text because we want the text input to be causing our reaction. 29 00:02:17,790 --> 00:02:22,890 So go ahead and type a name entry textfield dot our X text. 30 00:02:22,890 --> 00:02:29,880 Now what this means we have basically created an observable that is going to pay attention to every 31 00:02:29,880 --> 00:02:32,340 character we type in a text field. 32 00:02:32,340 --> 00:02:38,370 So we have basically set it up so that whenever we type a character that value is passed in as an observable. 33 00:02:38,370 --> 00:02:39,660 Really really cool. 34 00:02:39,660 --> 00:02:45,270 So go ahead and after this what we're going to do is we're going to use map our transformation function 35 00:02:45,870 --> 00:02:47,950 to change what the message says. 36 00:02:47,970 --> 00:02:48,600 OK. 37 00:02:48,720 --> 00:02:56,280 So go ahead and dot map and inside of dot map what we're going to do is we're basically going to just 38 00:02:56,280 --> 00:03:04,000 return hello and then whatever was inside the textfield using dollar sign 0. 39 00:03:04,170 --> 00:03:04,700 OK. 40 00:03:04,800 --> 00:03:08,810 Now we've used this closure property for a while now. 41 00:03:09,000 --> 00:03:15,240 And what that actually means is that whatever is passed into the textfield here is going to be passed 42 00:03:15,240 --> 00:03:22,440 in through map and then we can basically return this new string to map and on the other side what we 43 00:03:22,440 --> 00:03:31,590 can do is we can call DOT bind to pretty cool and we can bind this to an observable of type string. 44 00:03:31,590 --> 00:03:35,910 So we got a new string here that says hello and then whatever name we pass in. 45 00:03:35,910 --> 00:03:39,500 Let's go ahead and actually put a period at the end there like there should be. 46 00:03:39,590 --> 00:03:41,640 And now we can use bind. 47 00:03:41,640 --> 00:03:46,770 Now I don't know if you read that I'm going to delete it and type it again but if you look at DOT bind 48 00:03:46,770 --> 00:03:54,630 to that the explanation says subscribes to observable sequence using custom binder function. 49 00:03:54,630 --> 00:04:01,680 And what that binder function is going to do is it's going to set the text property of something that 50 00:04:01,680 --> 00:04:03,740 has a text property like a label. 51 00:04:03,750 --> 00:04:05,280 So watch this. 52 00:04:05,280 --> 00:04:14,560 If we bind it to our helo label our X dot text that is and observable of type string. 53 00:04:14,570 --> 00:04:21,180 So we can bind the value coming in from our text field to this label and it will show up in our label. 54 00:04:21,180 --> 00:04:22,490 How cool is that. 55 00:04:22,530 --> 00:04:29,010 So of course let's do some cleanup here for map let's go ahead and put that down below and let's enter 56 00:04:29,070 --> 00:04:31,590 that in a little ways for bind. 57 00:04:31,590 --> 00:04:33,210 Let's put that underneath. 58 00:04:33,300 --> 00:04:39,930 And now if I leave it as is it's going to say result of call bind 2 is unused. 59 00:04:39,930 --> 00:04:44,720 Now of course it's being bound to the label but afterwards what happens. 60 00:04:44,820 --> 00:04:50,710 We don't need it anymore so we can go ahead and call DOT add disposable to dispose bag. 61 00:04:51,060 --> 00:04:53,390 And you'll notice that error goes away. 62 00:04:53,760 --> 00:04:59,340 Now let's go ahead and let's think what we've done here we have taken our textfield we have reacted 63 00:04:59,340 --> 00:05:05,920 to the text inside the textfield and whenever that happens it's whenever we type in the textfield. 64 00:05:06,030 --> 00:05:13,270 Think of it like next being called we're passing in a new value into this observable we are using map 65 00:05:13,390 --> 00:05:18,240 to change the message that's coming in we are binding that message to the label. 66 00:05:18,250 --> 00:05:21,130 So every time we type the label should update. 67 00:05:21,180 --> 00:05:24,680 Now you don't see me conforming to any kind of delegate or protocol. 68 00:05:24,760 --> 00:05:31,810 I haven't used the text field delegate I haven't used the you I label it anything. 69 00:05:31,820 --> 00:05:33,300 I'm this is all reactive. 70 00:05:33,310 --> 00:05:38,020 That's the coolest thing is that Arc's Swift gives you all these amazing extensions for stuff you already 71 00:05:38,020 --> 00:05:38,840 do. 72 00:05:38,860 --> 00:05:41,960 Now the only thing we need to do is call our bind function. 73 00:05:42,010 --> 00:05:42,910 When the app loads. 74 00:05:42,940 --> 00:05:49,330 So in view load go ahead and call bind and let's go build and run to see how we did go ahead and build 75 00:05:49,330 --> 00:05:50,590 and run that. 76 00:05:50,590 --> 00:05:56,200 And you'll notice we're getting a little warning here and you'll see why that warning is there in just 77 00:05:56,200 --> 00:05:57,430 a moment. 78 00:05:57,460 --> 00:05:58,830 So here is our app. 79 00:05:58,840 --> 00:05:59,930 It is built. 80 00:05:59,980 --> 00:06:04,580 And look at that it says hello optional and an empty string. 81 00:06:04,600 --> 00:06:14,320 Now that's because the string coming in from our textfield is optional but we know that it is definitely 82 00:06:14,350 --> 00:06:15,550 going to have a value. 83 00:06:15,550 --> 00:06:20,170 So we're going to go ahead and force on wrap it for now and then in a moment we're going to do some 84 00:06:20,170 --> 00:06:25,840 conditional handling so that if there's nothing typed it we'll just continue to display that type your 85 00:06:25,840 --> 00:06:28,030 name below or or whatever it was. 86 00:06:28,030 --> 00:06:33,220 So now that we have force on Raptor you'll notice that warning goes away and let's build and run again 87 00:06:33,430 --> 00:06:35,220 and let's see what happens. 88 00:06:35,230 --> 00:06:36,120 Lots of projects here. 89 00:06:36,130 --> 00:06:37,050 Geez. 90 00:06:37,260 --> 00:06:37,750 OK. 91 00:06:37,780 --> 00:06:38,740 So here we go. 92 00:06:38,740 --> 00:06:43,980 It's open and it says hello comma and nothing of course because we haven't handled what happens if there's 93 00:06:43,980 --> 00:06:44,680 nothing. 94 00:06:44,830 --> 00:06:46,950 But when I open my textfield watch this. 95 00:06:46,940 --> 00:06:48,010 This is the coolest part. 96 00:06:48,010 --> 00:06:50,450 This is literally a singular line of code. 97 00:06:50,560 --> 00:06:54,670 If I wanted to I could remove all these returns and I could make it just one line of code. 98 00:06:54,670 --> 00:06:55,990 Now watch when I type. 99 00:06:56,110 --> 00:07:01,440 See it says hello C A L E B it's reacting to the data. 100 00:07:01,450 --> 00:07:07,960 When I call on next by using our reactive extension here it is basically taking this data that is passed 101 00:07:07,960 --> 00:07:15,040 in converting it into this string binding that string to the label and then disposing of it when I don't 102 00:07:15,040 --> 00:07:15,950 need it anymore. 103 00:07:16,090 --> 00:07:17,410 That's the coolest thing. 104 00:07:17,410 --> 00:07:20,050 Seriously this is why our swift is so amazing. 105 00:07:20,050 --> 00:07:26,950 We can do all kinds of fancy stuff without needing any of the protocol can conformance or any of the 106 00:07:27,030 --> 00:07:30,630 boilerplate type code that you would need to get this kind of reactivity. 107 00:07:30,670 --> 00:07:32,530 It's just built into our swift. 108 00:07:32,710 --> 00:07:37,710 So this is great but when we open the app it says hello comma blank. 109 00:07:37,810 --> 00:07:38,470 That's not good. 110 00:07:38,470 --> 00:07:39,370 We don't want to say that. 111 00:07:39,370 --> 00:07:44,620 So we're going to set up some conditional code in our map function. 112 00:07:44,620 --> 00:07:51,860 Basically if the text coming in is like an empty string we're going to just return type your name below. 113 00:07:51,970 --> 00:07:55,060 Otherwise we will pass the name and the proper label. 114 00:07:55,060 --> 00:07:59,710 So let's do that now let's go ahead and stop it from running so we don't waste resources. 115 00:07:59,890 --> 00:08:06,010 And inside of map go ahead and type if Dollar Signs zero meaning if the value coming from the textfield 116 00:08:06,460 --> 00:08:16,430 is equal whip's equal to an empty string we're going to go ahead and return type your name below. 117 00:08:17,680 --> 00:08:18,390 Otherwise. 118 00:08:18,400 --> 00:08:24,010 Or else we're going to go ahead and return what we just typed. 119 00:08:24,010 --> 00:08:24,670 OK. 120 00:08:25,180 --> 00:08:33,070 So basically what we're saying is if the text coming in is empty we should just type your name below. 121 00:08:33,250 --> 00:08:38,300 Otherwise we should say hello and whatever letter we type K. 122 00:08:38,320 --> 00:08:42,070 You'll notice that I'm just kind of connecting these functions together in a second I'm going to show 123 00:08:42,070 --> 00:08:48,160 you a really really cool function that will let us delay the text as it comes in. 124 00:08:48,280 --> 00:08:50,130 But for now let's go ahead and build and run this. 125 00:08:50,140 --> 00:08:55,960 And let's see how we did it should show type your name below because initially the text field is empty. 126 00:08:57,430 --> 00:09:00,860 Ok good type your name below let's go ahead and type. 127 00:09:01,040 --> 00:09:02,260 Caleb caid updates. 128 00:09:02,260 --> 00:09:02,700 Awesome. 129 00:09:02,710 --> 00:09:06,690 And let's delete when I go back to being empty watch what happens. 130 00:09:06,790 --> 00:09:07,800 Type your name below. 131 00:09:07,840 --> 00:09:11,620 It goes back to what it was that is so cool. 132 00:09:11,620 --> 00:09:12,220 That's amazing. 133 00:09:12,220 --> 00:09:12,990 Seriously. 134 00:09:13,210 --> 00:09:13,680 OK. 135 00:09:13,780 --> 00:09:18,490 So like I said I was going to show you a very cool thing and what it is. 136 00:09:18,490 --> 00:09:20,320 It is called debauches. 137 00:09:20,530 --> 00:09:22,390 And I'm actually going to go ahead and type it right here. 138 00:09:22,390 --> 00:09:24,020 It's called Debe bounce. 139 00:09:24,280 --> 00:09:24,740 OK. 140 00:09:24,850 --> 00:09:31,840 And inside of debauches we have what's called due time and a schedule or so do time is basically the 141 00:09:31,840 --> 00:09:34,660 amount of time that is going to be delayed. 142 00:09:34,660 --> 00:09:41,240 So if I type a character it's going to delay a certain amount of due time before it then proceeds. 143 00:09:41,470 --> 00:09:47,590 The scheduler is just main schedular instance so I'm going to actually go ahead and set this for 0.5 144 00:09:47,710 --> 00:09:53,590 seconds and the schedular main scheduler datt instance is basically the scheduler you're going to use 145 00:09:53,590 --> 00:09:56,750 for almost everything unless you're doing some really technical stuff. 146 00:09:56,980 --> 00:10:00,970 If you want to dive in deeper to this you can see this is part of our EQ Swift. 147 00:10:00,970 --> 00:10:02,500 It's basically just the dispatch. 148 00:10:02,510 --> 00:10:05,880 Q Just the main dispatch queue handler. 149 00:10:06,010 --> 00:10:10,510 So we're going to actually go ahead and set this so that it is before the map. 150 00:10:10,840 --> 00:10:17,770 So text d bounce and what this is going to do is it's going to delay when we type before it updates 151 00:10:17,770 --> 00:10:20,140 the message and you'll see why this is cool in a second. 152 00:10:20,140 --> 00:10:25,460 So build and run this is just an example of one of the really cool things that you can do and are equipped. 153 00:10:25,470 --> 00:10:29,910 You can just change these functions together and give all kinds of crazy functionality. 154 00:10:29,920 --> 00:10:33,640 So let's go ahead and let's see why this is cool. 155 00:10:33,670 --> 00:10:34,950 I'm going to type. 156 00:10:35,200 --> 00:10:38,230 Caleb did you notice how it didn't change. 157 00:10:38,230 --> 00:10:48,140 Watch if I delete it updates every point five seconds so if I were to type really quickly it would show 158 00:10:48,140 --> 00:10:48,440 up. 159 00:10:48,470 --> 00:10:49,400 I'm delaying it. 160 00:10:49,460 --> 00:10:55,220 Now this is super helpful for if you're using an API so that you don't make an API call every single 161 00:10:55,220 --> 00:11:02,600 time you type a letter and you can bounce it so that it basically only passes it in after point five 162 00:11:02,600 --> 00:11:06,470 seconds of a delay before another character comes in. 163 00:11:06,470 --> 00:11:09,630 Which is pretty cool it's a nice way to prevent API spamming. 164 00:11:09,650 --> 00:11:11,960 Now there are lots of other little functions. 165 00:11:11,960 --> 00:11:15,380 For instance there's another one called distinct until changed. 166 00:11:15,470 --> 00:11:21,100 That basically prevents like let's say that I typed Calleigh oops V Caleb V. 167 00:11:21,190 --> 00:11:26,640 If I were to type the wrong letter if I were to change it and then change it back nothing would happen. 168 00:11:26,690 --> 00:11:32,870 As you can see since our bounce time is pretty long it's not showing those changes because I'm changing 169 00:11:32,870 --> 00:11:35,820 it before it can actually be point five seconds. 170 00:11:35,840 --> 00:11:38,630 But if I wait long enough you'll see that it changes. 171 00:11:38,630 --> 00:11:41,630 So that's just one of the really cool things about our X Swift. 172 00:11:41,630 --> 00:11:46,370 I'm actually going to get rid of that just because I wanted to show you the cool reactiveness and the 173 00:11:46,370 --> 00:11:48,400 cool ability to add in those functions. 174 00:11:48,410 --> 00:11:50,260 But we don't need it for now. 175 00:11:50,390 --> 00:11:52,710 So guys this is really really cool. 176 00:11:52,730 --> 00:11:58,400 This is one part of our app in the next video we're going to go ahead and set this button to be functional. 177 00:11:58,400 --> 00:12:02,650 We're going to set it so that when we tap on the button it's going to clear our textfield. 178 00:12:02,990 --> 00:12:09,470 Update our label back to say typed your name below and add in the names down here by passing the value 179 00:12:09,470 --> 00:12:14,810 of an array all using arke Swift and a really cool subscribe function. 180 00:12:14,810 --> 00:12:17,730 So let's go ahead and head over to that video and let's do that now.