Hey, guys. 1
I hope you're excited about another app that we're going to build with SwiftUI. And in this app, we're 2
going to be building a Hacker News reader. 3
So we're going to be using the Hacker News API to get hold of the latest articles that are trending 4
on Hacker News which if you don't know, if you don't read it, then I definitely recommend it. 5
It's a forum of sorts that's created by Y Combinator and it has some really interesting articles that 6
people have submitted. 7
It's kind of like Reddit for people in technology, I guess. 8
And the way that Hacker News works is that anyone can post a link or a question to hack and use. 9
And when you click on it, it takes you to the actual question. And there's a lot of really fun discoveries 10
to be had on here and endless hours of distraction 11
If you are ever short of those things. 12
So what's covered in the upcoming lessons as we're building out this app? 13
We're going to be learning to work with SwiftUI Lists and the Identifiable Protocol. 14
We're going to use a Navigation View to navigate between the List and a detail view. 15
We're also going to be looking at Advanced State management techniques using the Observer Design Pattern. 16
And finally, we're going to be porting a UIKit component which is called WebKit into SwiftUI to be 17
able to display web pages in your app. 18
Now, I know a lot of you are really excited about this and you might have skipped to this lesson. 19
Just be aware that the upcoming lessons build on a lot of topics that we've covered in the Swift Deep Dives 20
and previous modules like Clima. In particular, 21
I'll be assuming that you're already familiar with closures, networking, JSON, protocols, computer properties, 22
and the delegate design pattern. 23
So if you need a refresher on any of those, I recommend completing the Clima module where we learn about 24
networking in detail before proceeding. 25
Otherwise, it's going to seem a little bit overwhelming. 26
So, I really recommend to complete the course in the order that it was created. 27
But if you're really excited and you already know quite a lot about Swift, then feel free to continue 28
if you're happy with those topics. 29
So speaking of networking, where does the Hacker News app going to get its data from? So the API that we're 30
going to be using is provided by Algolia. 31
And it's pretty simple to work with. 32
There's no registration required. 33
You don't even need an API key. 34
It just has a limit as to the number of requests that you can make. 35
So it limits you to 10,000 requests from the same IP per hour which is actually really generous. 36
So this is what we're going to be working with and it's going to be building on a lot of the skills 37
that you picked up in the Clima module where we worked with APIs and we use URL session to 38
make networking requests and also use the Jason Parser to get the data back as a Swift object. And the 39
end product at least in dark mode is going to look something like this. 40
So the interface is kept pretty simple. On the left-hand side, we've got the upvotes and we've got the 41
titles of the Hacker News posts in the middle. 42
And then when you click on it, it takes you to a web view and shows you the actual article in a browser 43
of sorts. And you can scroll through to read the full article, 44
so whenever you need to update yourself on all things tech news, then you could use your Hacker News 45
app. 46
So once you already get started by creating a new Xcode project, and I'm going to name mine H4X0R, but, 47
of course, written in leetspeak, or you can call your app whatever you like. 48
So mine is going to be called H4X0R News, and making sure that user interface is, again, still SwiftUI. 49
I'm going to go ahead and create this file. To start off, we're going to, again, create our user interface. 50
And the first thing that I want to build out is a list view. 51
So, so far we've been looking at vertical stacks, horizontal stacks, Z stacks, 52
but we actually haven't been looking at the list view 53
very much. So in iOS UIKit, 54
the list view is known as a table view, and it's basically just this format of a whole bunch of things 55
stacked one on top of each other. 56
And if you look inside your mail app or your settings, it's all set out like this. 57
So in our case, let's say that we had two text components: "Hello World" and "Good bye World." 58
And I wanted to put it inside a list view. 59
Well, all I would need to do is simply wrap these two components inside the list component like so. 60
And once I've indented these two things and hit command option P to update my preview, 61
then you can see I've now got a list that I've set up. 62
And as I add more components inside the list, they'll all get added into each of these cells. 63
Now, in addition to using a list in this app, I'm also going to add a NavigationView. Now, a NavigationView 64
allows us to navigate between screens, as you can imagine. 65
And it gives us the ability to go backwards really easily. 66
So, for example, in this demo app, you can see that once I've gone to the detail screen, I've still got 67
that top back button showing, so I can navigate straight back without having to create any of these buttons. 68
And it's all possible because both this screen and this screen is embedded inside a navigation stack. 69
And we create a navigation stack just by adding components inside the NavigationView. 70
So, now if I update, you should see that I have this top section that appears which allows me to go ahead 71
and add a navigation title. 72
So just before the NavigationView ends, we're going to write .navigationBarTitle and the title 73
is going to be a string. 74
And in my case, it's just going to be the name of my app, 75
So "H4X0R NEWS." And now you can see my navigationBarTitle show up here. 76
Now, at the moment, there's actually no way for us to be able to set the NavigationView's background color. 77
That's not something that we have access to as a modifier yet. 78
There are certain work arounds, but we'll wait and see if Apple actually adds these capabilities. 79
But for now, we're going to keep it relatively simple and we're going to keep our NavigationView looking 80
like so. 81
Now, the next thing I want to we have to setup is for our list to be able to render dynamic content, so that 82
we don't have to create a text component every single time when we want to show it in our app. And instead, 83
we would only need to use one text component, and then go through an array to pull out each item to put 84
inside a text component. 85
So, how can we do that? 86
Well, let's start out by creating a new struct. And this struct is going to be called a Post, 87
so it's going to be the structure for one of the hacker news posts. And each of these posts is going 88
to have an ID which is going to uniquely identify the post. 89
And it's also going to have a title which is going to be the title of each of these posts. 90
So I'm going to create both of these properties as let constants. 91
And whenever we initialize a new post object, we're going to have to fill in those two things. 92
In addition to that, I'm going to make my Post conform to a protocol called Identifiable. 93
And this is going to allow our list to be able to recognize the order of our Post objects based on this 94
ID. 95
So notice how if I delete this ID property, then I'm going to get an error saying that I don't conform 96
to the protocol identifiable, because for a structure to be identifiable, it must have a property code ID 97
that is a string. So, now let's create some posts and it's going to be an array of Post objects. 98
So the first one 99
is going to have an id of "1" and a title of "Hello." 100
And then let's add a comma and I'm going to paste in the next item and also a third item. 101
So I now have an array of three items and I'm gonna change this one to have an id of "2." 102
And this one, 103
"3." 104
And the title for this one is going to be "Hello" in French 105
and this one will be "Hello" in Spanish. 106
So, now I've got an array of posts, a total of three, and I want to be able to use this Post object to 107
show each of these titles in its own cell in my list. Instead of having just a list which needs items 108
added on one by one. 109
I want to have a single text item and only change the string that's going inside it. 110
So how can I do this? 111
Well, instead of using a normal list initializer like the way that we've done for our VStacks 112
and HStacks, I'm going to initialize the list in a different way. 113
I'm going to use the one which takes a piece of data, and then computes that row using that data. 114
And I'm going to provide a piece of data that conforms to the identifiable protocol. With this selected, 115
let's hit enter. And the data that we're going to use is this array of posts. And the raw content is going to 116
take a closure which inputs an identifiable piece of data and outputs a view. Because this closure is 117
the last one of the list, I can turn this into a trailing closure. So I can do that by closing off my 118
list of posts, and then opening a set of curly braces. 119
And after the curly braces, I'm going to name a single item. 120
So for every single item in my array of posts, each of them is going to be called a post in the singular 121
format, and then I'm going to add that "in" keyword which shows that this is the beginning of my closure. 122
And in between the "in" keyword and the closing brace is going to be the body of my closure. The way that 123
I would read this code is for every single post in our posts array. I'm going to use each of these posts 124
items to create a new Text object. And the text view is going to be populated using each post's title 125
property. Now, if I hit resume and get my preview to run itself again, 126
you can see I've now managed to put all three titles in my post's array into individual text views inside 127
my list. And I'm able to do that by tapping into the post.title which effectively corresponds to 128
each post inside our post array. 129
So, now that I've set up my list to loop through an array of posts, and for each post inside the posts 130
array, I've created a text component using the title property, 131
I'm now ready to do my networking. And that's exactly what we'll cover in the next lesson. 132
I'll see you there.