1
00:00:08,050 --> 00:00:13,510
Hey buddy this is Caleb with Deb's Lopes dot com and in this video we're going to continue in our project

2
00:00:13,560 --> 00:00:15,190
our our next name or app.

3
00:00:15,190 --> 00:00:19,060
And so I'm going to go ahead and pull up in my simulator here just to remind you what we've done so

4
00:00:19,060 --> 00:00:19,870
far.

5
00:00:20,110 --> 00:00:28,120
We have basically created an app that we can type in values to a text field and the UI label above reacts

6
00:00:28,120 --> 00:00:30,550
to the data going in K and real time.

7
00:00:30,700 --> 00:00:31,970
That's about all we've done.

8
00:00:32,020 --> 00:00:33,390
Nothing super impressive.

9
00:00:33,400 --> 00:00:39,850
But in this video we're going to basically set up another asynchronous stream and other observable.

10
00:00:40,000 --> 00:00:45,670
And when we press submit we're going to go ahead and add values to that and present them down here below

11
00:00:45,670 --> 00:00:48,100
in the UI label down here.

12
00:00:48,100 --> 00:00:53,560
So let's go ahead let's minimize that and let's pull open our X code project like so.

13
00:00:53,950 --> 00:00:58,240
And as you remember this is what our code looks like I'm going to go ahead and stop that from running.

14
00:00:58,240 --> 00:01:05,630
So we don't waste resources and you don't what we're going to do is we're going to create a names array.

15
00:01:06,010 --> 00:01:10,540
But we're going to use the Eric swift variable type in order to hold those.

16
00:01:10,540 --> 00:01:16,440
So go ahead and below your disposed bag go ahead and type var names array.

17
00:01:16,870 --> 00:01:19,360
And we're going to make this of type variable.

18
00:01:19,360 --> 00:01:22,060
Now that's the swift variable type.

19
00:01:22,060 --> 00:01:28,150
And if you remember a variable type needs an explicit swift type to go with it.

20
00:01:28,150 --> 00:01:34,750
So we're going to go ahead and create some brackets and this variable is going to be of type array and

21
00:01:34,750 --> 00:01:37,030
that array is of type string.

22
00:01:37,030 --> 00:01:40,000
Now we're going to go ahead and instantiate it from the get go.

23
00:01:40,090 --> 00:01:43,260
So go ahead and type equals and type variable.

24
00:01:43,420 --> 00:01:48,760
Give it some parentheses and inside of those print the C's just set it to be empty right.

25
00:01:48,760 --> 00:01:49,960
Very cool.

26
00:01:49,960 --> 00:01:57,610
So now what we can do is we can take and we can set up our bind function to include something for the

27
00:01:57,610 --> 00:01:58,780
submit button.

28
00:01:58,780 --> 00:02:05,750
Now if you go back to main storyboard this Submit button here is linked to this IB outlet.

29
00:02:05,920 --> 00:02:06,420
OK.

30
00:02:06,640 --> 00:02:09,900
Now you're probably thinking to get the button to do something.

31
00:02:09,900 --> 00:02:14,050
We should use an IB action and you can it with Eric Swift.

32
00:02:14,050 --> 00:02:16,720
We can do something that's actually even cooler.

33
00:02:16,810 --> 00:02:20,170
So let's go ahead let's actually create a separate function.

34
00:02:20,170 --> 00:02:28,270
Let's call this bind textfield and below let's create a function called bind maybe bind the submit button

35
00:02:30,880 --> 00:02:32,840
would be a little more descriptive.

36
00:02:32,860 --> 00:02:33,490
Very good.

37
00:02:33,490 --> 00:02:36,630
So now whoops we need to fix our function here.

38
00:02:36,640 --> 00:02:38,410
Bind textfield.

39
00:02:38,410 --> 00:02:38,950
There we go.

40
00:02:38,950 --> 00:02:39,490
OK.

41
00:02:39,670 --> 00:02:47,260
So now we can do is we can call submit button and we can access re-active properties of AUI button.

42
00:02:47,260 --> 00:02:53,650
So check this out submit button x and we can go Dot tap.

43
00:02:53,650 --> 00:03:01,450
And now every time our button is tapped we can call subscribe and do something when the button is tapped.

44
00:03:01,450 --> 00:03:02,820
How cool is that.

45
00:03:02,830 --> 00:03:05,420
So go ahead and on the submit button.

46
00:03:05,440 --> 00:03:08,300
Are X-Com tap call that subscribe.

47
00:03:08,380 --> 00:03:12,220
And you'll notice sometimes that doesn't pop up with the proper options.

48
00:03:12,400 --> 00:03:15,640
But we're going to go ahead and just call on next.

49
00:03:15,820 --> 00:03:18,840
Give a colon there and then some curly braces.

50
00:03:19,120 --> 00:03:27,090
And now inside of this subscribe block every time we tap the button the code inside here will be called.

51
00:03:27,100 --> 00:03:33,220
So what we want to do is we want to set up our button to basically take the the name value that's in

52
00:03:33,220 --> 00:03:40,210
the text field we want to add it to our name array and then we want to go ahead and display the text

53
00:03:40,210 --> 00:03:42,150
from that array in the label below.

54
00:03:42,310 --> 00:03:50,290
So what we're going to do first is we're going to go ahead and type if self name entry text feel text

55
00:03:50,350 --> 00:03:56,770
is not equal to an empty string meaning if there's text what we're going to do is we're going to go

56
00:03:56,770 --> 00:04:04,270
ahead and call self names array which is of type variable which is an array of type String kind of nested

57
00:04:04,270 --> 00:04:04,600
types.

58
00:04:04,600 --> 00:04:06,320
They're pretty interesting.

59
00:04:06,400 --> 00:04:09,690
And what we can do is type datt append what you're noticing.

60
00:04:09,700 --> 00:04:11,390
Why can't I append values there.

61
00:04:11,410 --> 00:04:17,110
It's not letting me call Dom append and that's because we can't append things like we can to an array

62
00:04:17,530 --> 00:04:18,820
on a variable type.

63
00:04:18,820 --> 00:04:26,320
So we need to actually access the array inside the variable and to do that we call names array value

64
00:04:26,440 --> 00:04:33,150
and you'll see value is of type array of type string or it is an array of type string.

65
00:04:33,220 --> 00:04:42,000
So we call self names or a value and now we can call append and let's append whatever is in the textfield.

66
00:04:42,000 --> 00:04:46,030
So go ahead and type self name entry textfield text.

67
00:04:46,060 --> 00:04:51,170
And since it's coming from a text field the string property is optional.

68
00:04:51,370 --> 00:04:56,380
But since we've already verified that we do have text coming in we can go ahead and force and wrap it

69
00:04:56,380 --> 00:04:57,610
safely.

70
00:04:57,610 --> 00:05:03,410
So now what we've done is we have added the name typed in the text field into our array.

71
00:05:03,430 --> 00:05:09,450
So now what we need to do is we need to call on next on the names label which is down at the very bottom

72
00:05:09,450 --> 00:05:10,400
with no data.

73
00:05:10,530 --> 00:05:16,870
We need to call the next property of that and pass in whatever the names or raise value is.

74
00:05:16,870 --> 00:05:18,030
Ok I'll show you what I mean.

75
00:05:18,030 --> 00:05:19,430
So below this.

76
00:05:19,430 --> 00:05:23,520
Go ahead and type self names label.

77
00:05:23,520 --> 00:05:24,300
There it is.

78
00:05:24,480 --> 00:05:31,740
And we need to go into our X property are X we can access the text property which you can see is of

79
00:05:31,740 --> 00:05:33,830
type UI binding observer.

80
00:05:34,020 --> 00:05:37,560
And with that we can go ahead and call on next.

81
00:05:37,560 --> 00:05:38,470
All right.

82
00:05:38,520 --> 00:05:42,350
And what we're going to do is we're going to pass it the names array.

83
00:05:42,540 --> 00:05:45,720
So go ahead and call self names array.

84
00:05:45,840 --> 00:05:47,840
And remember to get the actual array.

85
00:05:47,880 --> 00:05:49,490
We need to call that value.

86
00:05:49,770 --> 00:05:54,180
But at this point it would just print an array with the brackets and the quotes and the commas.

87
00:05:54,270 --> 00:06:00,450
We don't want that we just want to show the name and we want to actually probably show like a list right.

88
00:06:00,450 --> 00:06:05,960
If I added two names we would want to see just the name maybe Bob comma space.

89
00:06:06,150 --> 00:06:11,640
CHRIS comma space Julie right we want to see all the values but we want to make it in a nice friendly

90
00:06:11,640 --> 00:06:12,930
visual way.

91
00:06:12,930 --> 00:06:17,510
And so what we can do is on an array we can call the DOT join the function.

92
00:06:17,520 --> 00:06:23,840
So go ahead and call DOT joined and you'll notice we can just join them into one giant string.

93
00:06:23,880 --> 00:06:27,220
But we want to join them with a separator.

94
00:06:27,260 --> 00:06:34,920
OK so called Dot joined with a separator of type string and what we can do is we can set what string

95
00:06:34,920 --> 00:06:39,630
value was going to go in the middle of all of these elements in our array.

96
00:06:39,630 --> 00:06:42,260
So I wanted it to be a comma and a space.

97
00:06:42,270 --> 00:06:43,230
So check it out.

98
00:06:43,380 --> 00:06:46,950
If I put a string there I just type comma space.

99
00:06:47,100 --> 00:06:54,840
And now every element in my array is going to be separated or I guess individually pulled out separated

100
00:06:54,840 --> 00:06:58,620
with a comma and space and put into one singular string.

101
00:06:58,620 --> 00:07:01,290
It's really really cool actually how it works.

102
00:07:01,330 --> 00:07:04,220
Now let's think about what else we need to do at this point.

103
00:07:04,220 --> 00:07:06,050
We have added a name to the array.

104
00:07:06,210 --> 00:07:11,670
We have updated the names label with everything in the array separated by common space.

105
00:07:11,670 --> 00:07:15,450
Now what we need to do is we need to go ahead and clear out the textfield.

106
00:07:15,450 --> 00:07:21,700
So a new name can be entered and we also we want to clear out the text field so we can enter a new name.

107
00:07:21,750 --> 00:07:30,060
So down below what we're going to do is we're going to type self name entry textfield are ex text.

108
00:07:30,090 --> 00:07:34,710
And we're going to pass in a new value but that value is just going to be an empty string because we

109
00:07:34,710 --> 00:07:36,010
want to clear out the text field.

110
00:07:36,010 --> 00:07:42,310
So go ahead and type on next and we're going to pass it an empty string just like I said.

111
00:07:42,360 --> 00:07:48,050
So now we are passing in the names updating the label with all the names added and clearing up the text

112
00:07:48,050 --> 00:07:48,360
field.

113
00:07:48,360 --> 00:07:54,030
Now what we're doing is we are updating our array with the names when we add a name with the submit

114
00:07:54,030 --> 00:07:54,650
button.

115
00:07:54,720 --> 00:08:01,350
We are filling the label with all the text from the names array turned into a string and separated each

116
00:08:01,350 --> 00:08:03,040
element with a comma and a space.

117
00:08:03,240 --> 00:08:08,130
And then we are resetting the name entery textfield to be blank again so that we can continue to use

118
00:08:08,130 --> 00:08:08,730
it.

119
00:08:08,760 --> 00:08:14,370
Now at the very end of course since we are subscribing we need to go ahead and call add two disposable

120
00:08:14,760 --> 00:08:19,770
and pass it into our dispose bags so that the memory can be properly deallocated.

121
00:08:19,770 --> 00:08:22,240
Now let's go ahead and do some cleanup work here.

122
00:08:22,260 --> 00:08:24,900
Let's set that down below.

123
00:08:24,900 --> 00:08:30,140
This is just conventional with Eric Swift is to separate these functions on their own line.

124
00:08:30,240 --> 00:08:34,110
And now all we need to do is call bind submit button from view to load.

125
00:08:34,110 --> 00:08:42,120
So beneath bind textfield go ahead and call bind submit button like so now go ahead and let's us build

126
00:08:42,120 --> 00:08:46,530
and run this to the simulator Let's go test to see if it works and make sure that everything looks and

127
00:08:46,530 --> 00:08:48,740
works the way that we are wanting it to.

128
00:08:49,350 --> 00:08:50,760
That's a great plan.

129
00:08:50,760 --> 00:08:52,150
So here we go.

130
00:08:52,350 --> 00:08:53,910
Our app is now open.

131
00:08:53,940 --> 00:08:59,380
So when I come in here I should be able to type a name and when I press submit what's going to happen

132
00:08:59,970 --> 00:09:06,780
well it should add the name down here to my label let's give it a try three to one click and it worked

133
00:09:06,780 --> 00:09:08,150
it cleared out my textfield.

134
00:09:08,190 --> 00:09:09,970
But I do notice a problem.

135
00:09:10,050 --> 00:09:12,100
It still says hello Caleb.

136
00:09:12,150 --> 00:09:16,340
Now there's a way that I can fix this and it's actually really easy.

137
00:09:16,350 --> 00:09:19,440
All I need to do is to go down here and what's the name of that again.

138
00:09:19,440 --> 00:09:21,570
It's called Hello label.

139
00:09:21,630 --> 00:09:25,280
All I need to do is to go ahead and type self.

140
00:09:25,380 --> 00:09:26,530
Hello label.

141
00:09:26,580 --> 00:09:30,060
Our X-Com text on next.

142
00:09:30,060 --> 00:09:31,750
And I just need to pass it.

143
00:09:31,770 --> 00:09:39,980
Type your name below OK because that's the default message that's the message when the app opens.

144
00:09:39,980 --> 00:09:45,070
So let's build and run this again and let's make sure that that gets updated on the label when we submit

145
00:09:45,070 --> 00:09:46,190
a name.

146
00:09:46,750 --> 00:09:49,260
Riego it's running looking good.

147
00:09:49,340 --> 00:09:51,600
All right let's do it again Caleb.

148
00:09:51,770 --> 00:09:53,740
Submit perfect.

149
00:09:53,750 --> 00:09:57,890
OK let's make sure that the comma and space are working then we add more than one element.

150
00:09:57,890 --> 00:10:01,160
How about Chris look at that.

151
00:10:01,160 --> 00:10:01,780
That's so cool.

152
00:10:01,780 --> 00:10:05,630
This is coming from our Auray which is inside of our variable.

153
00:10:05,630 --> 00:10:08,890
Next let's go ahead and type Julie.

154
00:10:09,160 --> 00:10:17,840
Sean this is so cool guys we are able to react and add elements in real time using reactive swift swift

155
00:10:18,110 --> 00:10:19,360
reactive programming.

156
00:10:19,520 --> 00:10:22,700
So so cool awesome guys will.

157
00:10:22,740 --> 00:10:24,380
This app is almost done.

158
00:10:24,380 --> 00:10:25,950
We're actually going to move on.

159
00:10:26,030 --> 00:10:32,570
And then the next video I'm going to show you how using observables you can communicate between multiple

160
00:10:32,630 --> 00:10:38,150
view controllers just like you would with a Segway or protocols you can do it with reactive programming

161
00:10:38,180 --> 00:10:40,250
in a really really easy way.

162
00:10:40,250 --> 00:10:41,540
And I'm really excited to show you.

163
00:10:41,540 --> 00:10:46,210
So let's head over to the next video where we're going to do that and I'm really excited to show you

164
00:10:46,240 --> 00:10:46,970
so let's do it.

165
00:10:46,970 --> 00:10:47,970
Let's head over to the next video.