Hey guys this is Caleb with Debb slopes dot com and this is it.
We're going to use our swift to set up our table view with real API data.
It's going to be amazing.
Let's do it.
Let's pull open our X code project and in the Laks last video we basically just set up our functions
here to work the way we need figured out some some issues squashed some bugs show them who's boss.
And now we're going to go ahead and set up our trending feed b.s. so click on that.
And of course delete these we do not need them.
And you know what we're actually going to go ahead and comment out our table view data source and table
you delegate delegate methods and we're actually going to get rid of the conformance appear to those
protocols because we're going to set this up the are x swift way.
So go ahead and import our X swift go ahead and import our X cocoa and we can actually get rid of all
of these here.
Bye bye.
And what we can do is we can go ahead and set up our R x y data types.
So first of all we're going to need a Dispose bag of type.
Dispose.
Bag.
OK.
Just like everything else we've done in our X swift and what we're going to do is we're going to set
up a data source for our table view.
But we're going to use a published subject because when we download all of our trending repo's we're
going to pass it in to our published subject and then basically the table view is going to be able to
react in real time.
So as soon as we push it in the table view we'll just update.
It's amazing.
So go ahead and type var data source and that data source is going to be like I said of type publish
subject and we need to give it a type here and it's going to be an array of Ribault we can use our own
custom type which is really neat.
So let's go ahead and instantiate this.
And now we have a table view source that's ready for us to go.
So let's get rid of our old school methods.
And guys I just want to show you how unbelievably easy it is for us to get this data into our table
view.
Check it out.
Let's create a function called fetch data so phunk fetch data.
OK.
And we're going to go ahead and type download service instance and we already wrote the function to
do this.
So we're just going to go ahead and call download trending repo's K which returns an array of repo which
is what our published subject needs.
So go ahead and push enter.
And this is going to be the trending repo array.
What we're going to do.
We're going to call data source data on next and pass in the trending repots array.
I kid you not.
That is exactly what we need to do to pass in the values.
Now of course we're in a closure.
So we need to call self.
But seriously that is it to download the data to pass it in to our data source.
Now we do need to set up our table view to accept this data source and we're going to do that in view
to load.
So on our publish subject we're going to call data source and remember this is just an ordinary data
source and we can call bind too and we can use our bind to function to actually bind this to the table
view.
Check it out.
Call bind 2 and inside we can go ahead and bind it to the table view but we can call our X and we can
access the reactive properties of this table view thanks to our swift and Ark's cocoa.
So go ahead and call DOT items and check it out.
We can access the items with a cell identifier we already have a cell identifier of trending feed cell
right or I guess trending repo's cell.
We should probably check to make sure we're doing the right one but go ahead and select items and the
cell identifier as we were using was trending feed cell or trending repulsor so I'm not sure we need
to double check to be extra safe.
OK.
It's trending Ribault cell.
So let's go ahead and copy that and head back to trending feed D.C. Now the identifier is trending repots
cell and the cell type is just our cell type right.
Ribault or I guess trending Ribault cell.
There we go.
All right.
Super super cool.
So we now have bound our table view cells the exact way that we need to.
And inside of this bind function it's actually a closure and we can go ahead and put some curly brackets
there but we need to set up some properties and you know what these properties are really neat and it's
yelling at us saying in our table view does not conform to protocol re-active compatible.
I think it's just mad at us just go ahead and build and let's set this up first let's see if it's still
yelling at us and then we'll fix it.
But basically the items property is going to go ahead and give us three different properties we can
access the specific row of the table view we can access the individual repo from the published subject
and we can access the cell.
So let's go ahead and put some parentheses and we can access Roe.
We can access the repo like so of type Ribault we can access the cell of type trending Ribault cell.
And then of course since this is the closure we're going to go ahead and call in at the very end now.
Oops.
Now inside our binding this is where we can access the cell.
And this is where we can configure it with the repo that comes from our published subject so go ahead
and call sell configure sell.
And the cool thing is this is already cast as a training repo so we can pass it the Ribault that comes
in from our published subject.
And then at the very end since we are binding this we can call datt add disposable too and we can pass
it to our dispose bag.
Really really cool.
Now it's still yelling at us let's figure out why.
Oh you know what.
Sorry we should not be calling the one with the cell type if you go back to items you'll notice that's
let's see there's one that includes one with out without the cell type Let's just call that one and
where we have an extra parentheses there and we're just going to call trending repo's cell.
OK just like that.
And now you'll notice that air goes away.
So we have now used our datasource to bind our cell here to our table view the way we want and we have
access to all the stuff we've configured the cell we've added it to the Dispose bag so it's automatically
going to be deallocating memory for us.
And seriously our table view is done.
So let's go ahead and let's call fecche data because that's going to download the data first and push
in the repo array to our published subject then we're going to go ahead and bind that data to our table
view and add it toward postbag.
This is it guys we're going to basically be able to do all of our cells and load them automatically
with this little bit of code.
Let's build and run.
And let's go check out how we did.
This is one thing I love about Ark's cocoa is it really cuts down on the amount of boilerplate code
you have to write.
And it also minimizes your requirement of like conforming to certain delegates and protocols.
So let's check it out.
Let's see we are loading.
But guys look at this.
Oh my gosh.
We get it.
We get the data.
There's all the information there's Alamo fire.
Awesome iOS reactive Cocco swift guide Swiftie Jaison awesome swift so so cool.
Now I am noticing a bit of a problem.
We are definitely overlapping here on our images and I know how to fix that.
Go into Maine but storyboard select your image view.
There it is.
And select clips to bounce and I notice that the background here sometimes is transparent.
So let's go ahead and set a background color of white so that it always comes in as white.
That will make it look really nice.
And let's go build and run it again.
And then we can see how our work really looks.
That should perfect the process.
But guys we just downloaded everything and loaded it in.
It's so cool so so so very cool.
Here we go loading loading.
That's it guys.
That is it.
Boom we have all of our values right there.
Super super cool.
Although you know what we are definitely getting squished here.
And I think that's due to the stack you just being set to center if we choose Phil. It's going to spread
it out a little bit.
But let's go ahead and let's set some constraints on this.
Well no maybe not some constraints but maybe let's just do some cushioning on the sides.
Maybe now let's go ahead and set a constraint because really we're not going to be getting that crazy
of data.
I'll just set it to be maybe 300.
No that's too wide.
Maybe 250 to narrow.
Oh no guys I'm sorry you know what.
With constraint is not going to do it.
We're going to need to I think set some invisible views in here.
Let's go ahead and let's copy and paste of you put it on top of that stack view.
There we go.
Let's do it again.
Copy and paste and put that at the bottom.
That will give us some tips.
That's not right.
That's still not right.
There we go.
OK.
And of course we can choose both of those and set their background color to be clear.
And that's going to go ahead and push in those a little bit from the left and right.
But now let's go ahead and build let's make sure that our image is going to extend the fall outside
of our cell.
And guys we are so so close to being done.
Let's let's check this out.
So it loads it downloads everything.
There we go look at that.
Really cool.
That is amazing.
So our images are filling it to the full outside edge of the border but our button is now super stretched.
That is not what we want.
So we're going to go ahead.
Maybe we will just remove the button from the stack view and just put it in.
Down below.
Although you know what we need to fix the stack a few constraints first because they are extending to
the full outside edge.
Let's go ahead and let's just remove the bottom constraint for now and let's move it out of the way
we'll fix it in a second guys.
Let's take the button here.
Pull it out of the stack view and we're going to go ahead and just constrain this with a with constraint
and a height constraint and then we'll pin it maybe 10 from the bottom and we're going to go ahead and
horizontally pendant in the container.
And you'll notice that it fixes itself there and then the stack view we can drag it back down.
We can position it right above the button there and then we can go ahead and update the constraints
to have a bottom constraint of 10 which will space it nicely and make everything look super pretty So
let's build and run.
This is just kind of make the button look really nice and we won't have that weird extra wide stretching
issue.
Probably should have done that from the beginning but let's just see how we did
right.
Look at this we are getting everything coming in the way we want.
This is amazing guys.
Super duper cool.
I do also notice that the text is going way out here to the outside edge.
I don't like that.
So let's choose our stack view.
Let's set the trailing space to be 10 and the leading space to also be 10.
And that will keep that from touching the outside borders.
Let's see I noticed that some of these come in with a nice capital letter and some of them come in with
just stay you know like underscored name.
Well I guess that's fine because that's how the original contributor intended it.
And that's great.
So let's just leave it that way.
But you know what.
This is awesome.
This looks so good.
We're downloading all of our data.
The only thing I could think of is to add a refresh control so that we can automatically reload that
data however we want.
So let's go ahead and let's set that up because it's pretty easy in order to do that.
We're going to just go ahead and create an instance of you I refresh control like so let refresh control
equal UI refresh control and then we're going to basically just set the table view to have a refresh
control.
So Table View refresh control equals refresh control.
Now it has one.
And now we're just going to customize the refresh controls view.
So go ahead and type refresh control dot tint color and we use a color literal because that will let
us get our exact color of dark blue.
So that's what the spinner will look like it will be dark blue.
Then what else let's think we're going to go ahead and set refresh control to have an attributed title
of type and attribute title or I guess NASA attributed string is what I meant to say.
And as you look through here we can pass in a string and attributes.
That's exactly what we want.
Now we want it to say fetching hot get Herb repo's.
Whoops repo's.
And you know what just for fun.
Let's go ahead and drop in a fire emoji by the way.
I did a control command and space to bring up the emoji bar but sometimes there are issues so I'll just
search for fire and click on fire.
Beautiful.
There we go.
And now our attributes we're going to go ahead and just call.
Let's see we need to set the foreground color although it might not let us access that we might need
to type an s attributed string key to get to that.
Yeah that's right.
And the color is going to be a color literal.
We're going to use our blue cane.
That's great.
What else.
Next we need to set the font OK because we want it to have the same font as the rest of our app.
So then type and s attributed string key dot font and.
It's a dictionary.
So give it a colon there and we're going to use UI font and it's going to be a huge font.
We're going to use the initializer here with a name.
OK.
Get rid of the initialiser and then yes the font.
Of course we're going to use Avenir next Demi bold.
That's how you have to type it with a UI font.
And we want it to be size sixteen point zero which is pretty sweet.
That will return it the way we want.
Now of course attributed strings need to be forced wrapped because that's how we're actually going to
set the you know attributed title to be equal to the right thing.
Although you know what it looks like it's not going to make me it looks like it's mad at me for doing
that.
So let's go ahead and just set it to be and as a tribute attributed string just like so.
And next up we're going to go ahead and just type refresh control.
And this is how we're going to basically determine what the refresh control actually controls.
OK.
And so we're going to type add target and this is basically like setting up like a tap gesture recognizer.
We're going to pass it a function and every time we refresh it's going to call that function.
So go ahead and for the target that's going to be self the action is going to be a selector.
So we're going to do the pound selector and then this is where we pass in the function K and the UI
control events.
Basically we're going to go ahead and call value changed.
So any time the value changes meaning if we pull down the value changes it's going to refresh and call
the right function.
So the selector we need to pass in our function and thankfully we have a fetch data function which is
really cool.
So it's going to let us basically add that as the function that is called whenever we pull the refresh
control although it's yelling at us we need to expose this function to Objective-C.
So click fix.
It adds at 0 BJC to fetch data.
And that should allow us to go ahead and refresh that data whenever we pull down on it.
Now it's yelling at us that C-y.
Oh so it looks like we do need to force on.
Are you a font there.
We're basically saying I promise that that font is there.
So we now have added a refresh control change the color set up its title and add in the target.
So whenever we pull it's going to reload that data.
So let's go ahead and let's build and run.
Let's see how we did and let's check it out and see if we actually have a cool UI refresh control.
Launching our app
here we go OK so it's loading.
Very cool so if I pull you'll notice that there is our refresh controller and it just reloaded with
new data and there's new data but it's still showing up here.
So I think what we should do is inside our fetch data function basically after we push in the array
we should tell the refresh control to stop refreshing.
So go ahead and call self that refresh control.
And refreshing and that's basically going to cancel it and pull back the table view.
Let's let's test it let's build and run.
See how it looks.
Pretty cool.
OK there we go.
Loads the data.
When I pull to refresh.
All right cool.
So it downloads everything and it refreshes the data.
I really like that.
That's awesome.
So that's exactly what we need.
Looks like we're good when we pulled down it fetches everything and reloads it just for a test.
I'm going to actually turn off my Wi-Fi for a second and I'm going to pull down to see if we can refresh.
And as you can see if it's not connected it's not going to refresh for anything but the second I turn
the Wi-Fi back on.
It's not going to reconnect.
But basically if I were to quit the app go back in you'll notice that it is working and we could set
it up so that if you know connectivity is lost then it could automatically reload.
We could set that up in the app delegate.
But for this app we're not necessarily going to do that although we certainly could.
So right for now we can pull down and it can reload new data for us.
So amazing.
Guys this is really really cool.
And you know what a lot of the code that we already wrote is going to go into our search function we're
going to do it even more reactively in search Visi So we're going to go ahead and head over to the next
video where we're going to build out search AVC we're going to make it look really cool and we might
even tweak some of trending feed visi.
I noticed.
Actually you know if you look really close you can see between each cell there is that little dividing
line.
I think that's ugly.
And also if you tap on a cell it kind of permanently graze it out and we don't want that.
So we're going to go ahead and fix those things and build out search Visi in the next video.
Let's head over there now.