{"componentChunkName":"component---src-templates-legacy-tutorial-page-js","path":"/oa/tutorials/product-hunt-api-tutorial/update-view-controllers/","result":{"pageContext":{"tutorial":{"id":"T0E6OlR1dG9yaWFsLTE3MQ==","slug":"product-hunt-api-tutorial","title":"Product Hunt API Tutorial","previewText":"A client wants to build a simple wrapper around Product Hunt.s\n","heroImagePath":"https://raw.githubusercontent.com/MakeSchool-Tutorials/Product-Hunt-API-Tutorial/master/cover.png","heroImageFile":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAD6ElEQVQ4y42RX0xcRRTGLwu+YKxGk1ZD60N3Gl7qCwoxmmqkaGO0aXzQxNYHHzSxPmliNBqNYrVWU+auRYnWSA1SoYFuNPhQ2vLn3pUWUigiKBQKhYXddZe1bFl22b33zvnMzN1rtm2aOMnkzJw553e+c0YDkZZzRAkAuTVB9AkRrViOiIAoBhRvxIgoZjkiCqKkI8SrMgdA6T9ZSyMi7ToYgE+JCAAhmbVRP7iMdwcSeG8ggZe6w9jdNY83jSiylgMSQsUBeKUYqhXDImkLx/5MOQAJgKh/MUN1wUV65MQ83fbVBG1pnqILsYyqmM7ZzuHQHK6tW9dBNQ+2mnew71TUecuMq7JZy1H2YnwdO0+G8UDrNGaurksXcrYg2cmO7wbFC22jcJRaF6pg0TUL+3v/FjXtC/Th+WX5SN/8kUTH9IoChJbWMJbIqnPrZAq/RTIqZk/rCG6vPy1e7hzD1UxeQSUw8svsKh4+sWDVBRfx/rll1dLBC3GUN02gL5yGt7rm0jIOxpILfPbHYdr8RS/uOnAm1z+XlL5+zXKoGsBqy2QKVT/N2x+ccxXqo8vkaxzH5uZJ9ITT6F7IoC4YxmMdYalQFX2mZRgbPj5tdYxHZc5Mat26vzBDF/r12AreMOK2fG0YSVB50wTdc/QvbG+Zws72GezuiuLxjgVygYQnvh+yjo0syvDLa3m7wpthWeFjqgXR6nBczcoOjC6jtHGcqtrm6KnOK9imm6htn6ba4BINqBkKazCsZnw574iKAqPM+2UFJZJKSQ3t0HDC3tJ8Cc/9GqFdJ+eJcYMqdYOqW6bQv5S1CmOdXcs7FcUMzXEcr23lSGYd1f7P7kfZe7oieLLzClUGTNp6uA/3ft5njcbWlLKpZKbiBkGqZQUVQkiHehDCnem34yvY0RG2nw7Oq5Y3HuyxWkeXFOxazlUmcyRIbqVQLnnxoJ5SOVMA6aMTKdQcn7XvO9TrwWZzDv2nzIMpdcXLgxa3AHKVNo4k8MPFiFKWyORvavMmWDHUtm+Agh4CkAJwKWs5/x92C2iptFlbbF3JWpuKfbeEMW74GDel1Rg3S+T9bApa+Ufd2oYDZ3zHf4+U5QsFmgYXyk5NJ7TKgOlTeYEBmVfq50Ypc7fPA8ntY3rIvQeGpC3xc0Or1E2tvnemTHvwiDpv01WiG/fleWX93p0bUqG5l+mhOxVMD93NuPkiOzJUUii0l3HzUVVQD21k3HzeTTZrGTdeY4GBOxg33mHc+IxxQ5e5khpj3GjzN/TJc5BxI+Jv6JGATYW3s37eL+9V8sy4uY9xY4Rxs4bpoe2MG3N+brzu58bbjBu7/gWOSk/VhPcKJgAAAABJRU5ErkJggg=="},"images":{"fallback":{"src":"/mediabook/static/a69ceb219f4e17b4f09e707a84068da8/5aead/cover.png","srcSet":"/mediabook/static/a69ceb219f4e17b4f09e707a84068da8/e9fba/cover.png 50w,\n/mediabook/static/a69ceb219f4e17b4f09e707a84068da8/15e42/cover.png 100w,\n/mediabook/static/a69ceb219f4e17b4f09e707a84068da8/5aead/cover.png 200w,\n/mediabook/static/a69ceb219f4e17b4f09e707a84068da8/d6138/cover.png 400w","sizes":"(min-width: 200px) 200px, 100vw"},"sources":[{"srcSet":"/mediabook/static/a69ceb219f4e17b4f09e707a84068da8/b79cb/cover.avif 50w,\n/mediabook/static/a69ceb219f4e17b4f09e707a84068da8/6d0de/cover.avif 100w,\n/mediabook/static/a69ceb219f4e17b4f09e707a84068da8/f2685/cover.avif 200w,\n/mediabook/static/a69ceb219f4e17b4f09e707a84068da8/4ff31/cover.avif 400w","type":"image/avif","sizes":"(min-width: 200px) 200px, 100vw"},{"srcSet":"/mediabook/static/a69ceb219f4e17b4f09e707a84068da8/dbc4a/cover.webp 50w,\n/mediabook/static/a69ceb219f4e17b4f09e707a84068da8/d8057/cover.webp 100w,\n/mediabook/static/a69ceb219f4e17b4f09e707a84068da8/2e34e/cover.webp 200w,\n/mediabook/static/a69ceb219f4e17b4f09e707a84068da8/416c3/cover.webp 400w","type":"image/webp","sizes":"(min-width: 200px) 200px, 100vw"}]},"width":200,"height":200}}},"pages":{"nodes":[{"id":"T0E6OlBhZ2UtMTYyNg==","title":"Get Started.","slug":"getting-started","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tODE4OA==","title":"Get Started.","htmlContent":"

You just got hired to develop an app that shows the currently featured apps on Product Hunt 🎉

The first feature the client wants you to implement is the feed, which displays all of today's featured products on Product Hunt. The goal for this tutorial is to build a quick prototype to show the client all the core features in action.

"},{"id":"T0E6OlNlY3Rpb24tODE4OQ==","title":"Why is this important?","htmlContent":"

You'll want the app you're building to interact with APIs, or be able to communicate with them, then you need to know how to build a Network Layer, as well as how to code/decode data from APIs to your app and vice versa. This is common functionality that iOS engineers should expect to do in their careers, so learning the fundamentals around it now will make you that much more prepared for that upcoming gig.

"},{"id":"T0E6OlNlY3Rpb24tODE5MA==","title":"Learning Outcomes","htmlContent":"

By the end of this tutorial, you should be able to:

    \n
  1. Work with APIs interacting with an iOS app.
    2. \n
  2. Build a Network Layer in Swift.
    3. \n
  3. Decode JSON into Swift models.
    4. \n
  4. Take advantage of mock data.
    5. \n
  5. Display data in tableviews with custom UI.
    6. \n
"},{"id":"T0E6OlNlY3Rpb24tODE5MQ==","title":"Technical Planning","htmlContent":"

Here's what we need to do to get this feed up and running:

    \n
  1. Inspect the Product Hunt API
    2. \n
  2. Build the Feed View
    3. \n
  3. Create the Post Model
    4. \n
  4. Build the Post Cell
    5. \n
  5. Create the Post Cell Class
    6. \n
  6. Test the Feed Table View
    7. \n
  7. Allow the Post Model to work with network requests
    8. \n
  8. Create the network layer
    9. \n
  9. Retrieve data from the PH API
    10. \n
  10. Build the Comments View
    11. \n
  11. Pull Comments data from the API
    12. \n
  12. Update the view controllers to hook everything up
    13. \n
"},{"id":"T0E6OlNlY3Rpb24tODE5Mg==","title":"What We're Building","htmlContent":"

Here's what the prototype app will look like:

\n \"Preview\n

User Stories

As a user...

"},{"id":"T0E6OlNlY3Rpb24tODE5Mw==","title":"Implementation Plan","htmlContent":"

We're going to start with the UI of the app and then moving on to the networking layer.

This makes it quick and easy to build out the app and test some of its features before making requests to the API.

"},{"id":"T0E6OlNlY3Rpb24tODE5NA==","title":"Using Git/GitHub","htmlContent":"

As you go through this tutorial, you will also be making commits after completing milestones. This is a requirement, you must make a commit whenever the tutorial prompts you. This not only further enforces best practices for software engineering, but also will help you more easily figure out where a bug originated from if you break your progress up into discrete, trackable chunks.

When prompted to commit, you'll see a sample commit message. Feel free to use your own message, so long as it clearly and concisely covers the work done.

Lastly, the commit prompts in this tutorial should be the minimum amount of times you commit. If you want to do more commits, breaking your chunks into even smaller chunks, that is totally fine!

"}]},"next":{"id":"T0E6OlBhZ2UtMTYyNw==","slug":"product-hunt-api","title":"Inspecting The Product Hunt API"},"previous":{"id":"T0E6OlBhZ2UtMTYyNw==","slug":"product-hunt-api","title":"Inspecting The Product Hunt API"}},{"id":"T0E6OlBhZ2UtMTYyNw==","title":"Inspecting The Product Hunt API","slug":"product-hunt-api","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNzE1Mg==","title":"Inspecting The Product Hunt API","htmlContent":"

Product Hunt is an amazing platform to discover new apps and projects. We'll be making it much easier to discover the best ones that have been released recently.

"},{"id":"T0E6OlNlY3Rpb24tNzE1Mw==","title":"Checkout Product Hunt","htmlContent":"

You will need to sign up for Product Hunt, register an application, and generate the token needed to use the API in our app.

When you get the chance, explore the Product Hunt for cool projects and ideas.

\n

\nGo to Product Hunt and create an account.

\n\n

If you already have a Product Hunt account then navigate to the API Dashboard from the drop-down menu under your account tab.

\n

With an account created you can now register an application, which will allow us to access the API.

\n

\nCheck out the API docs; this gives you all the information you need to use the API.

\n
"},{"id":"T0E6OlNlY3Rpb24tNzE1NA==","title":"Create An Application","htmlContent":"

In order to use the API, we'll have to register our application in the API Dashboard

From the API Docs page,

\n

\nClick the link at top right labeled \"API Dashboard\" to navigate to the API Dashboard.

\n\n

Click on ADD AN APPLICATION.

\n\n

Give your application a name and the following redirect URI:\nhttps://localhost:3000/users/auth/producthunt/callback

\n\n

Click on CREATE APPLICATION to create the application

\n\n

On the same page click CREATE TOKEN to generate the access token you'll use later in this tutorial. Keep this page open for later use.

\n\n

Your dashboard should now look similar to this:\n\n \"API\n

\n
"},{"id":"T0E6OlNlY3Rpb24tNzE1NQ==","title":"Make a GET Request with Postman","htmlContent":"

Now that we have access to the API, let's check out the structure of the data we'll be receiving. To do this, we'll use Postman.

Postman is an API Development Environment (ADE) and an awesome tool for any developer working with APIs. We'll be using it in this tutorial to test making requests to the Product Hunt API and analyze the data we get to model the data in Swift.

\n

\nDownload the Postman desktop app from their website if you don't have it already. You don't need an account to use it.

\n

Upon opening Postman, you should see this welcome screen:\n\n \"Postman\n

If you don't immediately see this screen, you can navigate to it by clicking on the + NEW button located towards the top of the screen.

\n

\nChoose Request under building blocks to create a new request called GET Posts and save it a new collection called Product Hunt.\nAfter clicking + SAVE you'll be brought to the homepage. Paste this URL into the URL field at the top of the window: https://api.producthunt.com/v1/posts/all?sort_by=votes_count&order=desc&search[featured]=true&per_page=20

\n

Let's break down the URL into the important pieces so that we know what's actually going on during this call:

Lastly, we need to include our access token in our request. You can find your token key from the same site as earlier located under the Developer Token section from when you last clicked CREATE TOKEN on the API Dashboard on Product Hunt.

Under Authorization, select Bearer Token in the drop down and paste your access token. Be sure to hit Preview Request.

\n

\nHit send. You should receive is the data from Product Hunt as a response to your request. This is what you should see:

\n\n

\n \"JSON\n

\n
"},{"id":"T0E6OlNlY3Rpb24tNzE1Ng==","title":"Analyzing the Response","htmlContent":"

What you received from your request is known as JSON (Javascript Object Notation), a text format that is completely language independent and easy to read.

How the data in the JSON response is organized is extremely important, especially for our app. We'll need to understand the hierarchy of the data so that we can accurately model the data in Swift.

See if you can find a product's name, tagline, number of votes, and screenshot URL. Take note of where these are located:

\n \"Structure\n

The beginning of the JSON response objects is indicated by the opening bracket { and ends with the closing bracket } on the same level. This object only contains one object which is an array of posts, where we will get all the information we need to display today's featured posts on our app.

The posts array contains the products that match the parameters given in our request. We asked for 20 of today's featured products in descending order of vote count, so we received an array with the first post being today's featured product with the highest votes.

The properties of the post object also have a hierarchy of objects. We are only interested in comments_count, id, name, tagline, and screenshot_url. You can search up these terms in Postman by using the shortcut CMD + F and typing the name of the property in the search field that appears.

Take some time to look through Postman and see what's in the API response. This is the very beginning of learning how to work with APIs

"}]},"next":{"id":"T0E6OlBhZ2UtMTYyOA==","slug":"build-feed-view","title":"Building the Feed View"},"previous":{"id":"T0E6OlBhZ2UtMTYyOA==","slug":"build-feed-view","title":"Building the Feed View"}},{"id":"T0E6OlBhZ2UtMTYyOA==","title":"Building the Feed View","slug":"build-feed-view","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTIwOTM=","title":"Building the Feed View","htmlContent":"

In order to avoid context switching and to reduce development time, we'll be building this app starting with the UI and layout of the app, and then ending with the networking layer.

Your first goal should be to get a working prototype. The client wants the feed screen working first, so let's start with that.

"},{"id":"T0E6OlNlY3Rpb24tMTIwOTQ=","title":"Project Setup with Xcode","htmlContent":"

Create a new Single View App. Check that the Language is set to Swift and the User Interface is set to Storyboard.

When you are building prototypes, it's very useful to use Storyboards (If you are using UIKit). You can put together a working app with simple constraints in minutes. Try to resist the temptation to make complex or good looking UI this early, it might only slow you down. You'll get an opportunity later on to polish and upgrade the app to your liking.

For now you do not need to check any of the boxes like Core Data or UITests for this tutorial.

\n \"Preview\n

We'll name the project Product Hunt Example but feel free to name it as you please.

\n \"Preview\n

"},{"id":"T0E6OlNlY3Rpb24tMTIwOTU=","title":"Creating the Main Screen","htmlContent":"

The FeedView consists of a table view with custom cells that display information about products retrieved from Product Hunt.

The UI itself is simple, for now let's just build the UI and connect it to a Swift file.

By the end of Part 4, here's what our storyboard will look like:

\n \"Preview\n

This view is intentionally simple so that we can get it up and running fast.

We'll be using a navigation controller for this app.

\n

\nA navigation controller is a container view controller that manages one or more child view controllers in a navigation interface.\nYou'll get more exposure to this

\n
\n

\nOpen Main.storyboard and click on the View Controller located within the View Controller Scene.

\n

A shortcut for adding a navigation controller in storyboard is to embed a view-controller in one.

\n

\nOn the menu bar select Editor, then Embed in and finally Navigation Controller to quickly wrap the view controller in a navigation controller.\n\n \"Embedded\n

\n\n

Select the Navigation Item under the View Controller Scene and set the Navigation Item's title to Feed.\n\n \"Set\n

\n

A perk of keeping things simple in the beginning is that you don't have to spend a lot of time configuring the UI.

\n

\nAdd a table view to the view controller, name it Feed Table View, and pin it to all 4 sides.\n\n \"Add\n

\n
"},{"id":"T0E6OlNlY3Rpb24tMTIwOTY=","title":"Prepare the Swift file","htmlContent":"

To adhere to good coding conventions, rename the ViewController.swift to FeedViewController.swift to better reflect what it's used for.

\n

\nChange the name in the file inspector, for the class, and in the comments at the top of your file.\n\n \"Rename\n

\n\n

We don't have any data yet, but let's add the functions that we'll be using to update cells.

\n\n

Add an extension for UITableViewDataSource at the bottom of FeedViewController to separate code needed to fill the table view with data.

\n
class FeedViewController: UIViewController {\n  ...\n}\n\n// MARK: UITableViewDataSource\nextension FeedViewController: UITableViewDataSource {\n   /// Determines how many cells will be shown on the table view.\n   func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {\n       return 3\n   }\n\n   /// Creates and configures each cell.\n   func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {\n       return UITableViewCell()\n  }\n}\n
\n
\n

\nExtensions add new functionality to an existing class, struct, enum, or protocol type.\nThis includes the ability to extend types for which you do not have access to the original source code (known as retroactive modeling).

\n
\n

\nAdd an extension for UITableViewDelegate right below that.

\n
...\n\n// MARK: UITableViewDelegate\nextension FeedViewController: UITableViewDelegate {\n  // Code to handle cell events goes here...\n}\n
\n

We'll use this later to setup selecting and deleting cells.

\n

\nOpen your Main.storyboard file and locate the Feed View within the Feed Scene of your file structure. In the identity inspector, update the view's class from View Controller to FeedViewController.\n\n \"Rename\n

\n\n

Using CTRL + drag, create an IBOutlet from the Feed Table View to FeedViewController. Name the IBOutlet feedTableView.\n\n \"Connect\n

\n

Because the FeedViewController conforms to both the UITableViewDataSource and UITableViewDelegate in the extensions, we can set the feedTableView's data source and delegate to be the FeedViewController.

\n

\nSet the delegate and dataSource for the table-view by typing the following code in your viewDidLoad method:

\n
feedTableView.dataSource = self\nfeedTableView.delegate = self\n
\n

The table view is fully connected and working. You can run the app to see the one cell created thanks to the lines of code we put in the UITableViewDataSource.

We're going to be working a lot more with these views later on in the tutorial, but now you've got a sense of how to display data in tableviews with custom UI!

"},{"id":"T0E6OlNlY3Rpb24tMTIwOTc=","title":"Set up Git/GitHub","htmlContent":"
\n

\nMake your first commit

\n
$ git init\n$ git add .\n$ git commit -m 'project init'\n
\n

Now go to GitHub and create a public repository called Product-Hunt-API, and now associate it as a remote for your local git project and then push to it.

\n

\nPush it!

\n
$ git remote add origin GITHUB-REPO-URL\n$ git branch -M main\n$ git push -u origin main\n
\n
"}]},"next":{"id":"T0E6OlBhZ2UtMTYyOQ==","slug":"post-model","title":"Creating The Post Model"},"previous":{"id":"T0E6OlBhZ2UtMTYyOQ==","slug":"post-model","title":"Creating The Post Model"}},{"id":"T0E6OlBhZ2UtMTYyOQ==","title":"Creating The Post Model","slug":"post-model","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNzE2MQ==","title":"Creating The Post Model","htmlContent":"

Let's model the information we will receive for each post. The properties we need are the product's ID, name, tagline, number of votes, and number of comments.

\n

\nCreate a new Swift file and call it Post.swift.

\n

We'll use a struct to define the variables we want to get from the Product Hunt API.

\n

\nCreate a Struct called Post.

\n
/// A product retrieved from the Product Hunt API.\nstruct Post {\n\n}\n
\n

Give Post variables that will hold a product's id, name, tagline, number of votes, number of comments, and screenshot url.

\n
/// A product retrieved from the Product Hunt API.\nstruct Post {\n   // Various properties of a post that we either need or want to display\n   let id: Int\n   let name: String\n   let tagline: String\n   let votesCount: Int\n   let commentsCount: Int\n}\n
\n

There's more we will need to add to this file to allow it to work effortlessly with network calls. We'll leave it like this for now and move on to create the UI that will show this data.

"},{"id":"T0E6OlNlY3Rpb24tNzE2Mg==","title":"Now Commit","htmlContent":"
$ git add .\n$ git commit -m 'Created Post model'\n$ git push\n
"}]},"next":{"id":"T0E6OlBhZ2UtMTYzMA==","slug":"build-post-cell","title":"Building The Post Cell"},"previous":{"id":"T0E6OlBhZ2UtMTYzMA==","slug":"build-post-cell","title":"Building The Post Cell"}},{"id":"T0E6OlBhZ2UtMTYzMA==","title":"Building The Post Cell","slug":"build-post-cell","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTIwOTg=","title":"Building The Post Cell","htmlContent":"

The default cell only has room for a string of text. We need it to display more than that.

We will need 4 labels, for the name, tagline, number of votes, and comments, which will be grouped together in a stack view. We'll also add an image view to display the product's screenshot.

"},{"id":"T0E6OlNlY3Rpb24tMTIwOTk=","title":"Updating Storyboard with Custom Cell","htmlContent":"

Lets create a new cell in the Storyboard that we can customize.

\n

\nOpen storyboard and open the table view's Attribute Inspector to give it a Dynamic Prototype Cell.\n\n \"Prototype\n

\n

The Table View Cell is a bit too small at the moment, but we can easily increase the size.

\n

\nClick on the Table View Cell on the storyboard or in the file structure. Increase the size of the Table View Cell to 250 in the Size Inspector\n\n \"Increase\n

\n

We'll use the view that comes with the cell, labeled Content View in Storyboard, as the cell's background; so leave that transparent. We'll add a new UIView which will act as a container for all the views that will display information about the product.

"},{"id":"T0E6OlNlY3Rpb24tMTIxMDA=","title":"Add UIView to Cell","htmlContent":"
\n

\nDrag a UIView into the prototype cell and pin it on all 4 sides of the Content View. You can make sure it's constaining to the Content View by clicking the down arrow in the Add New Constraints window.\n\n \"Constraints\"\n

\n
"},{"id":"T0E6OlNlY3Rpb24tMTIxMDE=","title":"Add Labels & Constraints to Cell","htmlContent":"

Now we can add the necessary labels. Let's start with the name label

\n

\nAdd a UILabel pinned to the top and left of the newly added Container View.

\n\n

Give the label the text \"Name\" so we can see it better in the Storyboard.

\n

Then the add 2 more labels: one comments label named \"Comments: 0\" and one votes label named \"Votes: 0\".

Implement Constraints

\n

\nPin a horizontal UIStackView to the top and right of the Container View

\n\n

Place the comments and votes labels inside and make comments the left label and votes the right label.

\n\n

Give the labels some spacing by selecting the stack view and setting the Spacing to 8.

\n

To give the text some room to display information, we can reduce the font size of both labels to 12.

\n

\n Select both labels in the stack view and change their font size to 12 in the Attribute Inspector.

\n

For names that have a longer names, we have to constrain the right side of the name label to not extend longer than the stack view containing the comment and vote counts.

\n

\n Select the name label and create a right horizontal spacing constraint with a spacing of 12 from the Add a Constraint pop over. This will constraint the label to its nearest neighbor which is the horizontal stack view.

\n\n

Select the name label, go to the Size Inspector and scroll down to Content Hugging Priority and change the value for Horizontal from 251 to 250. This allows the name label to take up the extra horizontal space the comment label and votes label didn't take up.

\n

Next up is the label for the tagline.

\n

\nAdd a label pinned to the left, bottom, and right of the Container View and change its Text to say \"Tagline\".

\n\n

Set the font size of this label to 12.

\n

The last thing we'll add is the UIImageView which will display the product's screenshot.

"},{"id":"T0E6OlNlY3Rpb24tMTIxMDI=","title":"Add UIImageView to Cell","htmlContent":"
\n

\nAdd an UIImageView (name it Preview Image View) to the center of the cell and pin it to all 4 sides of the Container View with the following constraints:\n\n \"Pin\n

\n\n

You can set the image of the image view to whatever you want. Download free placeholder images here. Add this to your Assets.xcassets file in your Xcode project and rename the file to placeholder.png. Finally, select placeholder.png as the Image for the UIImageView under the Attribute Inspector.

\n\n

Lastly, select the image view update the Content Hugging Priority value for Vertical from 251 to 250. This allows the image view to take up the extra vertical space the Name label and tagline label didn't take up.

\n

To be able to use this custom cell in code it needs to have an identifier.

\n

\nSet the Identifier of the cell to postCell in the cell's Identity Inspector.

\n
"},{"id":"T0E6OlNlY3Rpb24tMTIxMDM=","title":"Product So Far","htmlContent":"

Now we have all the UI built out to display the information we'll be getting from the API. We're getting more comfortable with displaying data in tableviews with custom UI as well as beginning to learn how to take advantage of mock data through using the placeholder image. We'll keep working on each of those as we continue.

Check out the completed custom cell below. Note that your constraints may not exactly match what is shown below. The important thing is that the layout matches, and that you followed the constraints properly as described in this section.

\n

\nClick on the image if you want to see all the information on the Project Navigator:\n\n \"Completed\n

\n
"},{"id":"T0E6OlNlY3Rpb24tMTIxMDQ=","title":"Now Commit","htmlContent":"
$ git add .\n$ git commit -m 'Completed Post Cell view'\n$ git push\n
"}]},"next":{"id":"T0E6OlBhZ2UtMTYzMQ==","slug":"create-post-cell-class","title":"Creating the Post Cell Class"},"previous":{"id":"T0E6OlBhZ2UtMTYzMQ==","slug":"create-post-cell-class","title":"Creating the Post Cell Class"}},{"id":"T0E6OlBhZ2UtMTYzMQ==","title":"Creating the Post Cell Class","slug":"create-post-cell-class","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNzE2NQ==","title":"Creating the Post Cell Class","htmlContent":"

In order to access the custom cell's views in code, a custom class is needed.

We'll call this custom class PostTableViewCell and place all the methods related to keeping the cell up-to-date in here.

Start by creating the file.

\n

\nCreate a new file using the Cocoa Touch Class template.

\n\n

Name the Class PostTableViewCell and make it a Subclass of UITableViewCell from the dropdown menu.

\n\n

\n \"Create\n

\n

In the new file we just created, we won't be needing the awakeFromNib() and setSelected(:, animated:) methods. So, you can delete those (or keep them, there's no harm done).

Next we'll set the Prototype Cell we created in Storyboard to use this class.

\n

\nGo to Storyboard and select the cell we created in the previous chapter (be sure to select the UITableViewCell and not the contentView or the Container View we created).

\n\n

In the Identity Inspector, change the Class field to PostTableViewCell.

\n

Now we can connect the IBOutlets to the class we created.

\n

\nCreate weak IBOutlets for the labels and image view inside PostTableViewCell.swift\nName them nameLabel, taglineLabel, commentsCountLabel, votesCountLabel, and previewImageView

\n

To make updating these views quick and easy, we'll use a property observer on a Post object.

\n

\nProperty observers watch and respond to changes in a property's value and are called every time a new value is set.

\n
\n

\nBelow your IBOutlets create a new optional Post var called post

\n\n

Now add the property observer didSet

\n
...\n\nvar post: Post? {\n   didSet {\n\n   }\n}\n
\n

Any code we place inside didSet {} will execute every time the post variable is set. This is a good place to update the labels and image view.

\n

\nAdd the following lines to update the views inside the property observer:

\n
// Runs every time the post variable is set\ndidSet {\n   // make sure we return if post doesn't exist\n   guard let post = post else { return }\n   // Assign our UI elements to their post counterparts\n   nameLabel.text = post.name\n   taglineLabel.text = post.tagline\n   commentsCountLabel.text = \"Comments: \\(post.commentsCount)\"\n   votesCountLabel.text = \"Votes: \\(post.votesCount)\"\n   // We'll write this next!\n   updatePreviewImage()\n}\n
\n
"},{"id":"T0E6OlNlY3Rpb24tNzE2Ng==","title":"Placeholder Images","htmlContent":"

Next create the updatePreviewImage() method. For now it will be very simple and give every post a placeholder image.

\n

\n
...\n\nfunc updatePreviewImage() {\n   // make sure we return if post doesn't exist\n   guard let post = post else { return }\n   // assign the placeholder image to the UI element\n   previewImageView.image = UIImage(named: \"placeholder\")\n}\n
\n

Now the custom cell is ready to be used by a UITableView. Make sure your variable names match up with your Storyboard!

\n

\n
class PostTableViewCell: UITableViewCell {\n  // All of our UI elements we'll use for our view that relate to properties of a post\n  @IBOutlet weak var nameLabel: UILabel!\n  @IBOutlet weak var taglineLabel: UILabel!\n  @IBOutlet weak var commentsCountLabel: UILabel!\n  @IBOutlet weak var votesCountLabel: UILabel!\n  @IBOutlet weak var previewImageView: UIImageView!\n\n  var post: Post? {\n    // Runs every time the post variable is set\n    didSet {\n       // make sure we return if post doesn't exist\n       guard let post = post else { return }\n       // Assign our UI elements to their post counterparts\n       nameLabel.text = post.name\n       taglineLabel.text = post.tagline\n       commentsCountLabel.text = \"Comments: \\(post.commentsCount)\"\n       votesCountLabel.text = \"Votes: \\(post.votesCount)\"\n       // We'll write this next!\n       updatePreviewImage()\n    }\n  }\n\n  func updatePreviewImage() {\n     // make sure we return if post doesn't exist\n     guard let post = post else { return }\n     // assign the placeholder image to the UI element\n     previewImageView.image = UIImage(named: \"placeholder\")\n  }\n}\n
\n
"},{"id":"T0E6OlNlY3Rpb24tNzE2Nw==","title":"Now Commit","htmlContent":"
$ git add .\n$ git commit -m 'Created custom class for Posts'\n$ git push\n
"}]},"next":{"id":"T0E6OlBhZ2UtMTYzMg==","slug":"test-feed-view","title":"Testing Feed Table View"},"previous":{"id":"T0E6OlBhZ2UtMTYzMg==","slug":"test-feed-view","title":"Testing Feed Table View"}},{"id":"T0E6OlBhZ2UtMTYzMg==","title":"Testing Feed Table View","slug":"test-feed-view","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNzg4Mw==","title":"Testing Feed Table View","htmlContent":"

With our custom cell setup, we now have all the UI elements we need to see the Feed View in action. However, we won't be making any network requests just yet; instead we'll use mock data to emulate the data that we will receive from an API request.

"},{"id":"T0E6OlNlY3Rpb24tNzg4NA==","title":"Test UI Without Data","htmlContent":"

First let's test things without using any real data from Product Hunt's API.

\n

\nOpen FeedViewController.swift and go to the UITableViewDataSource extension to update the body of the second tableView method using the code below (check the parameters so that you're sure you're updating the right method):

\n
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {\n   // dequeue and return an available cell, instead of creating a new cell\n   let cell = tableView.dequeueReusableCell(withIdentifier: \"postCell\", for: indexPath) as! PostTableViewCell\n\n   return cell\n}\n
\n

We dequeue a cell using the postCell identifier we provided in Storyboard earlier and simply return it.

\n

\nThe first line in the above function uses the method dequeueReusableCell(withIdentifier:)

\n\n

This is used for performance reasons as it dequeues any available cells and returns it as the table-view cell associated with the identifier provided, skipping a lot of the overhead needed to create an entirely new cell.

\n

We also need to update the size of the cell in our FeedViewController.

\n

\nGo to the UITableViewDelegate extension and add the following method

\n
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {\n  // provide a fixed size\n  return 250\n}\n
\n

Run the app to see how it looks 👌

You should see something awesome like this:\n\n \"Feed\n

"},{"id":"T0E6OlNlY3Rpb24tNzg4NQ==","title":"Use Mock Data To Display Information","htmlContent":"

Using Mock Data allows us to easily test our app without having to create an entire networking layer. We'll simply create an array with Post objects and provide the data for each post ourselves.

\n

\nCreate an array of Posts in FeedViewController, below your IBOutlet feedTableView using a closure.

\n
...\n\n// Array of Post objects to simulate real data coming in\n// Make sure each property that we're assigning to a UI element has a value for each mock Post.\nvar mockData: [Post] = {\n   var meTube = Post(id: 0, name: \"MeTube\", tagline: \"Stream videos for free!\", votesCount: 25, commentsCount: 4)\n   var boogle = Post(id: 1, name: \"Boogle\", tagline: \"Search anything!\", votesCount: 1000, commentsCount: 50)\n   var meTunes = Post(id: 2, name: \"meTunes\", tagline: \"Listen to any song!\", votesCount: 25000, commentsCount: 590)\n\n   return [meTube, boogle, meTunes]\n}()\n
\n

The data is essentially fake, so you can create whatever product you want!

We can now use this array as a datasource for the table view, allowing us to provide data for the labels in the custom cell we created.

\n

\nUpdate the following methods in the UITableViewDataSource extension:

\n
// Determines how many cells will be shown on the table view.\nfunc tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {\n  return mockData.count\n}\n\n// Creates and configures each cell.\nfunc tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {\n  // Grab an available cell\n  let cell = tableView.dequeueReusableCell(withIdentifier: \"postCell\", for: indexPath) as! PostTableViewCell\n\n  // Grab a post from our \"data\"\n  let post = mockData[indexPath.row]\n  // Assign a post to that cell\n  cell.post = post\n\n  return cell\n}\n
\n

Because we used a property observer to update the labels, we only need to set the cell's post property to give it the data it needs.

"},{"id":"T0E6OlNlY3Rpb24tNzg4Ng==","title":"Product So Far","htmlContent":"

Run the app again to see how it looks. You should see the cell's filled with the information provided by our mock data:\n\n \"Feed\n

We've successfully integrated the use of mock data into our app! We are now ready to get into networking! But first we need to update our model.

"},{"id":"T0E6OlNlY3Rpb24tNzg4Nw==","title":"Now Commit","htmlContent":"
$ git add .\n$ git commit -m 'Tests with mock data'\n$ git push\n
"}]},"next":{"id":"T0E6OlBhZ2UtMTYzMw==","slug":"update-post-model","title":"Updating Post Model"},"previous":{"id":"T0E6OlBhZ2UtMTYzMw==","slug":"update-post-model","title":"Updating Post Model"}},{"id":"T0E6OlBhZ2UtMTYzMw==","title":"Updating Post Model","slug":"update-post-model","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNzE3Mg==","title":"Updating Post Model","htmlContent":"

In order for this model to work well with network requests, we will make it decodable. Making our model decodable means that we can take information from external resources (such as the Product Hunt API) and transform it into something that works with our models, like our Post model!

"},{"id":"T0E6OlNlY3Rpb24tNzE3Mw==","title":"Getting Started","htmlContent":"

First, let's add a variable for the preview image url:

\n

\nAdd previewImageUrl variable at the bottom of Post model located in the Post.swift file.

\n
 ...\n let previewImageURL: URL\n}\n
\n

This will hold the link to the screenshot of the product and will allow us to download the image later on.

Next, let's make Post decodable by conforming to the Decodable protocol.

\n

\nCreate an extension at the bottom of your Post model that makes it decodable. We're extending it for ease of readability since we're going to be adding more code later.

\n
struct Post {\n    // current code\n}\n\n// MARK: Decodable\nextension Post: Decodable {\n\n}\n
\n
\n

\n\n

This tutorial describes Decodable at a high level. If you want to dive deeper into the inner workings of what's going on, Greg Heo's JSON to Swift with Decoder and Decodable article does a fantastic job of explaining the inner workings!

\n
"},{"id":"T0E6OlNlY3Rpb24tNzE3NA==","title":"Add Coding Keys","htmlContent":"

We'll need to define coding keys to tell Swift exactly where to find the information to fill the model's variables. However, we actually only need this because the Product Hunt API uses a different naming convention for it's properties.

\n

\nCreate an enum called PostKeys with the raw type as String and conforms to CodingKey and place it inside the Post: Decodable extension.

\n
extension Post: Decodable {\n    // properties within a Post returned from the Product Hunt API that we want to extract the info from.\n    enum PostKeys: String, CodingKey {\n        // first three match our variable names for our Post struct\n        case id\n        case name\n        case tagline\n        // these three need to be mapped since they're named differently on the API compared to our struct\n        case votesCount = \"votes_count\"\n        case commentsCount = \"comments_count\"\n        case previewImageURL = \"screenshot_url\"\n    }\n}\n
\n

\n \"Post\n

\n

Note how votesCount, commentsCount, and previewImageUrl are the only variables that are set to a string. This is because in the JSON we receive from the request, these variables are named differently (using snake_case, rather than camelCase which is the recommended practice for Swift).

In fact, if we did not plan to collect these variables from the JSON, we would not need to create any coding keys.

Also, there are cases where you simply want to rename the property differently, such as for the previewImageUrl. We'll create a coding key for that as well and put it in our Post: Decodable extension:

\n

\nAdd a CodingKey for the preview image in the same file.

\n
enum PreviewImageURLKeys: String, CodingKey {\n   // for all posts, we only want the 850px image\n   // Check out the screenshot_url property in our Postman call to see where this livesx\n   case imageURL = \"850px\"\n}\n
\n

\n \"Preview\n

\n
"},{"id":"T0E6OlNlY3Rpb24tNzE3NQ==","title":"Initializing A Decodable","htmlContent":"

Now that we have all our necessary coding keys, the next step will be to setup the initializer for our model.

\n

\nAdd this initializer inside the Post: Decodable extension, below the enums you made earlier:

\n
init(from decoder: Decoder) throws {\n\n}\n
\n

We'll first need to extract the properties from the post object that we get back from the Product Hunt API. This is done using containers which uses CodingKeys:

\n

\nContainers allow the decoders to return their data based off of the provided CodingKeys

\n
\n

\nAdd this to the body of the init you just created:

\n
// Decode the Post from the API call\nlet postsContainer = try decoder.container(keyedBy: PostKeys.self)\n
\n

Now that we have stored the post object in a container, we can go in and grab all the information we need from it!

\n

\nBelow the postsContainer line, set the variables of the Post using the postContainer you just created.

\n
  ...\n  // Decode each of the properties from the API into the appropriate type (string, etc.) for their associated struct variable\n  id = try postsContainer.decode(Int.self, forKey: .id)\n  name = try postsContainer.decode(String.self, forKey: .name)\n  tagline = try postsContainer.decode(String.self, forKey: .tagline)\n  votesCount = try postsContainer.decode(Int.self, forKey: .votesCount)\n  commentsCount = try postsContainer.decode(Int.self, forKey: .commentsCount)\n}\n
\n

\n \"Posts\n

\n

Finally, we need to set the previewImageURL. The actual URL that we need from screenshot_url is nested within the screenshot_url object in the API response, so we'll need to access it through a nested container (more info on those here) using the PreviewImageURLKeys:

\n

\nAdd this add the bottom of the initializer:

\n
   ...\n\n   // First we need to get a container (screenshot_url/previewImageURL) nested within our postsContainer.\n   // If it only had a single value like the other properties, we wouldn't need to use nestedContainer\n   let screenshotURLContainer = try postsContainer.nestedContainer(keyedBy: PreviewImageURLKeys.self, forKey: .previewImageURL)\n   // Decode the image and assign it to the variable\n   previewImageURL = try screenshotURLContainer.decode(URL.self, forKey: .imageURL)\n}\n
\n

\n \"Screenshot\n

\n

Now the model is ready to go! But there's one more thing we need to add to make things easier.

The products we retrieve from the API are inside the array called \"posts\". We can model this using a Struct:

\n

\nAdd this below your Post Struct, and above your extension Post: Decodable:

\n
struct Post {\n...\n}\n\n// Have a matching decodable array in our struct for the array of posts we get back from the API\nstruct PostList: Decodable {\n   var posts: [Post]\n}\n\nextension Post: Decodable {\n...\n}\n
\n
\n

\n\n

What if we want to decode a nested JSON file? See answer in Code Different's Stack Overflow

\n

We just went through a lot of important stuff! We learned how to decode JSON into our Swift models, and also learned a bit more on how to work with APIs in order to get data flowing into our app!

We can't get our data flowing just yet though, since we have don't have a way to interface with the Product Hunt API. To do so, we'll need a networking layer, so let's get to it!

"},{"id":"T0E6OlNlY3Rpb24tNzE3Ng==","title":"Now Commit","htmlContent":"
$ git add .\n$ git commit -m 'Decodable model'\n$ git push\n
"}]},"next":{"id":"T0E6OlBhZ2UtMTYzNA==","slug":"create-networking-layer","title":"Creating The Networking Layer"},"previous":{"id":"T0E6OlBhZ2UtMTYzNA==","slug":"create-networking-layer","title":"Creating The Networking Layer"}},{"id":"T0E6OlBhZ2UtMTYzNA==","title":"Creating The Networking Layer","slug":"create-networking-layer","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTIxMDU=","title":"Creating The Networking Layer","htmlContent":"

With our model prepared, the networking layer will be pretty simple to create.

"},{"id":"T0E6OlNlY3Rpb24tMTIxMDY=","title":"Introduction to Network Managers","htmlContent":"

In this section, we'll be creating the network layer of the app. You may be wondering what a network manager is or even what networking in general is. Lets take a closer look before diving into code.

\n \"Networking\n

Networking (aka computer networking) is how information and data get transported and exchanged between various information systems.

Looking at the diagram, the client (in our case, the iphone or simulator) makes a request of some sort (typially some sort of information like text, images, videos, etc) to a server, the server then takes in the request and handles its response before sending the information to the client.

Here are a few note-worthy key-terms to help you understand the parts of the networking proccess better:

Client: a computer in a network that uses the services provided by a server.

Server: a piece of computer hardware or software (computer program) that provides functionality for other programs or devices (ie clients)

API: part of the server that receives requests and sends responses.

Network Manager / Networking Layer: a well-structured chunk of code used to make API requests and handle its responses from an external server.

What we'll be doing moving forward in this section is creating a custon networking layer that communicates with the Product Hunt API. In doing so, this is how we will be populating data in our storyboard instead of having mock data.

The information you take away from this section will be especially helpful the further you grow in tech as majority of apps eventually communicate with the internet in some way and this is where it all starts.

"},{"id":"T0E6OlNlY3Rpb24tMTIxMDc=","title":"Create Manager Class","htmlContent":"

Now that you're a master of the fundamentals of networking, let's get started!

\n

\nStart by creating a new Swift file named NetworkManager.swift

\n

We'll keep everything in a class called NetworkManager

\n

\nCreate a NetworkManager class with the following variables. Remember to replace the value of token with your Product Hunt API token!

\n
class NetworkManager {\n    // shared singleton session object used to run tasks. Will be useful later\n    let urlSession = URLSession.shared\n\n    var baseURL = \"https://api.producthunt.com/v1/\"\n    var token = \"replace-me-with-your-token-from-product-hunt-api-dashboard-🙏\"\n}\n
\n

This is what we'll use to create the network request.

"},{"id":"T0E6OlNlY3Rpb24tMTIxMDg=","title":"Get Posts Method","htmlContent":"

Next we'll create the method that handles the request.

\n

\nCreate a getPosts() method in your new NetworkManager class

\n
func getPosts() {\n\n}\n
\n

Because network requests require continuous data flow, this can result in different speeds depending on the network. To account for this, we'll use an escaping closure as a completion handler in order to return data.

Using the normal function return would result in inconsistent results, as the data retrieved from a request might not always be prepared before the method returns. We need to adjust the parameter list for our getPosts method.

\n

\nAdd an escaping closure to getPosts() as a parameter.

\n
func getPosts(completion: @escaping ([Post]) -> Void)\n
\n

The escaping closure allows the compiler to continue on to other code—escaping the method—and return later on when the data is ready to be returned.

Constructing The Request

\n

\nAdd the following lines in the body of getPosts(completion:)

\n
// our API query\nlet query = \"posts/all?sort_by=votes_count&order=desc&search[featured]=true&per_page=20\"\n// Add the baseURL to it\nlet fullURL = URL(string: baseURL + query)!\n// Create the request\nvar request = URLRequest(url: fullURL)\n
\n

This uses the baseURL of the API in addition to the parameters we established earlier to construct a request instance.

We'll configure the request before we send it off.

\n

\nAdd these lines underneath the previous 3 for getPosts(completion:)

\n
...\n\n// We're sending a GET request, so we need to specify that\nrequest.httpMethod = \"GET\"\n// Add in all the header fields just like we did in Postman\nrequest.allHTTPHeaderFields = [\n   \"Accept\": \"application/json\",\n   \"Content-Type\": \"application/json\",\n   \"Authorization\": \"Bearer \\(token)\",\n   \"Host\": \"api.producthunt.com\"\n]\n
\n

To send the request we'll use the dataTask method on our urlSession

\n

\nAdd the following to the bottom of getPosts

\n
  ...\n\n  let task = urlSession.dataTask(with: request) { data, response, error in\n\n  }\n\n
\n

The dataTask method executes the request provided and the completion handler returns the result as data, a response, and an error if there is any reasons for an incomplete request. This method returns us a URLSessionDataTask object (task) which we can invoke cancel(), suspend() or resume(). We can also check its progress.

We'll check to see if there is an error first and then if there is any data to decode.

\n

\nAdd the following inside the dataTask(with:) completion handler

\n
let task = urlSession.dataTask(with: request) { data, response, error in\n   // error check/handling\n   if let error = error {\n       print(error.localizedDescription)\n       return\n   }\n\n   // make sure we get back data\n   guard let data = data else {\n       return\n   }\n}\n
\n

These lines make sure that we have data to work with and that no error occurred. If either of those are not true, then we return.

Once we get past those checkpoints, we can decode the data.

\n

\nUse JSONDecoder to decode the data retrieved into a PostList

\n
let task = urlSession.dataTask(with: request) { data, response, error in\n   ...\n\n   // Decode the API response into our PostList object that we can use/interact with\n   guard let result = try? JSONDecoder().decode(PostList.self, from: data) else {\n       return\n   }\n}\n
\n
\n

\nJSONDecoder().decode automatically decodes any Decodable.

\n

If the Post is modeled correctly, JSONDecoder().decode(...) will continue on to the next step: returning the result as an array of posts!

\n

\nAdd the following to the bottom of the dataTask completion Handler

\n
let task = urlSession.dataTask(with: request) { data, response, error in\n   ...\n\n   let posts = result.posts\n\n   // Return the result with the completion handler.\n   DispatchQueue.main.async {\n       completion(posts)\n   }\n}\n
\n

Since our getPosts(...) method performs a network call on a separate queue – a background queue – we therefore need to execute our completion handler on the main queue since all UI code must execute on the main queue.

\n

\nWe use the main queue for UI-related tasks, whereas any other time-consuming tasks should run on background queues. This is done so that the UI doesn't freeze up for the user while the app is running other tasks.

\n

One last thing we need to do is resume the dataTask. By default, dataTasks are paused. We'll have to resume it to start the task:

\n

\n
let task = urlSession.dataTask(with: request) { data, response, error in\n    ...\n\n}\n\ntask.resume()\n
\n

Networking layer is now complete (for now) 👌

\n

\n
class NetworkManager {\n let urlSession = URLSession.shared\n var baseURL = \"https://api.producthunt.com/v1/\"\n var token = \"replace-me-with-your-token-from-product-hunt-api-dashboard-🙏\"\n\n func getPosts(completion: @escaping ([Post]) -> Void) {\n   // Construct the URL to get posts from API.\n   let query = \"posts/all?sort_by=votes_count&order=desc&search[featured]=true&per_page=20\"\n   let fullURL = URL(string: baseURL + query)!\n   var request = URLRequest(url: fullURL)\n\n   request.httpMethod = \"GET\"\n   // Set up header with API Token.\n   request.allHTTPHeaderFields = [\n     \"Accept\": \"application/json\",\n     \"Content-Type\": \"application/json\",\n     \"Authorization\": \"Bearer \\(token)\",\n     \"Host\": \"api.producthunt.com\"\n   ]\n\n   let task = urlSession.dataTask(with: request) { data, response, error in\n     // Check for errors.\n     if let error = error {\n       print(error)\n       return\n     }\n\n     // Check to see if there is any data that was retrieved.\n     guard let data = data else {\n       return\n     }\n\n     // Attempt to decode the data.\n     guard let result = try? JSONDecoder().decode(PostList.self, from: data) else {\n       return\n     }\n\n     let posts = result.posts\n\n     // Return the result with the completion handler.\n     DispatchQueue.main.async {\n         completion(posts)\n     }\n   }\n\n   task.resume()\n }\n}\n
\n

Alright! We just learned how to build a network layer in Swift! Now we can start removing our mock data and put in real data from Product Hunt!

Let's use our getPosts(...) method in the FeedViewController to do so! But first...

"},{"id":"T0E6OlNlY3Rpb24tMTIxMDk=","title":"Now Commit","htmlContent":"
$ git add .\n$ git commit -m 'Created networking layer'\n$ git push\n
"}]},"next":{"id":"T0E6OlBhZ2UtMTYzNQ==","slug":"finish-feed-view","title":"Finishing Feed View"},"previous":{"id":"T0E6OlBhZ2UtMTYzNQ==","slug":"finish-feed-view","title":"Finishing Feed View"}},{"id":"T0E6OlBhZ2UtMTYzNQ==","title":"Finishing Feed View","slug":"finish-feed-view","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNzg4OA==","title":"Finishing Feed View","htmlContent":"
    \n
  1. Look at the Product Hunt API
    2. \n
  2. Build the Feed View
    3. \n
  3. Create the Post Model
    4. \n
  4. Build the Post Cell
    5. \n
  5. Create the Post Cell Class
    6. \n
  6. Test the Feed Table View
    7. \n
  7. Allow the Post Model to work with network requests
    8. \n
  8. Create the network layer
    9. \n
  9. \nRetrieve data from the PH API\n\n
      \n
    1. Replace the mock data with real data
      2. \n
    2. Update Posts List With NetworkManager
      3. \n
    \n
    10. \n
  10. Build the Comments View
    11. \n
  11. Pull Comments data from the API
    12. \n
  12. Update the view controllers to hook everything up
    13. \n

Now that the network manager is complete, we can retrieve real data from Product Hunt through their API!

The next step would be to tie it in with our UI and have the main feature of our app (browsing featured products on Product Hunt) completed.

Let's start by adding a NetworkManager to FeedViewController

\n

\nOpen FeedViewController.swift and add a NetworkManager property below your mockData list.

\n
var mockData: [Post] = {\n    ...\n}()\n\nvar networkManager = NetworkManager()\n
\n
"},{"id":"T0E6OlNlY3Rpb24tNzg4OQ==","title":"Replace Mock Data","htmlContent":"

Now we can replace mockData with the list that will be holding the products retrieved from the API.

\n

\nReplace the mockData list with an empty posts list.

\n
...\n\nvar posts: [Post] = []\n\n...\n
\n

We can use another property observer here to update the feedTableView every time the posts is updated.

\n

\nAdd a didSet property observer to posts to update the view.

\n
var posts: [Post] = [] {\n   didSet {\n       feedTableView.reloadData()\n   }\n}\n
\n

Next we'll update the places where mockData was used to use our newly created posts list.

\n

\nUpdate the the following methods in the UITableViewDataSource extension to use posts rather than mockData list.

\n
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {\n // return the actual number of posts we receive\n return posts.count\n}\n\nfunc tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {\n let cell = tableView.dequeueReusableCell(withIdentifier: \"postCell\", for: indexPath) as! PostTableViewCell\n\n // retrieve from the actual posts, and not mock data\n let post = posts[indexPath.row]\n cell.post = post\n return cell\n}\n
\n

Now we can tie everything together.

"},{"id":"T0E6OlNlY3Rpb24tNzg5MA==","title":"Update Posts List With NetworkManager","htmlContent":"

We'll use a method that runs inside viewDidLoad to update the feed of the app.

\n

\nCreate the method updateFeed() below viewDidLoad() method.

\n
...\n\nfunc updateFeed() {\n\n}\n
\n

All we have to do is update the posts list with the data retrieved from a request to the API.

\n

\nUse getPosts() method to update posts list.

\n
func updateFeed() {\n  // call our network manager's getPosts method to update our feed with posts\n   networkManager.getPosts() { result in\n       self.posts = result\n   }\n}\n
\n

Add updateFeed() at the bottom of viewDidLoad()

\n
   ...\n\n   updateFeed()\n}\n
\n
"},{"id":"T0E6OlNlY3Rpb24tNzg5MQ==","title":"Product So Far","htmlContent":"

That's it 👏 Run the app to see it in action.

\n \"Finished\n

Notice that we still don't have images for each of the cells. If we look at PostTableViewCell, we're still using placeholder for our image. We'll revisit updating this towards the end of this tutorial, so don't worry about it for now!

Instead, celebrate the fact that not only did we apply our learning of how to build a network layer into Swift, decode JSON into Swift models, and work with APIs, but we also have now completed the first 2 user stories:

"},{"id":"T0E6OlNlY3Rpb24tNzg5Mg==","title":"Now Commit","htmlContent":"
$ git add .\n$ git commit -m 'Users can browse products'\n$ git push\n

Let's move on to the final user story!

"}]},"next":{"id":"T0E6OlBhZ2UtMTYzNg==","slug":"comments-view","title":"Building The Comments View"},"previous":{"id":"T0E6OlBhZ2UtMTYzNg==","slug":"comments-view","title":"Building The Comments View"}},{"id":"T0E6OlBhZ2UtMTYzNg==","title":"Building The Comments View","slug":"comments-view","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNzg5Mw==","title":"Building The Comments View","htmlContent":"

Now we can move on to the second part of the app. The CommentsView which will show the comments of a tapped product.

This view is much simpler than the FeedView and doesn't require much work to get it setup with the API, but we will be refactoring some of our code to improve its quality and reduce repetitive code.

"},{"id":"T0E6OlNlY3Rpb24tNzg5NA==","title":"Building The UI","htmlContent":"

The CommentsView is also a view which utilizes a UITableView with a custom made cell to display an array of information.

We'll start by creating both the view and the cell.

\n

\nOpen Storyboard and add a new UIViewController scene from the Object Library. Rename the UIViewController to be Comments

\n\n

Add a UITableView to the Comments UIViewController and pin it to all sides of its view. Name it Comments Table View.

\n

The cell will consist of a single UITextView that fills the cell with padding on the sides.

\n

\n\n

Add a UITableViewCell with the identifier commentCell to the Comments Table View. Go to the Size Inspector and give the cell a row height of 125

\n\n

If you need a refresher on building and customizing a cell, review chapter 5 of this tutorial

\n\n

Next add a UITextView to commentCell with 15 points of padding on all sides. Name it Comments Text View.

\n\n

At this point your Comments View should look like this:\n\n \"Comments\n

\n

Lastly, we don't want to make comments editable, so let's disable that for Comments Text View.

\n

\nDisable Editable behavior for the text-view in its Attribute Inspector.\n\n \"Disable\n

\n

And that's it! We've got our comments view! Now let's wire it up.

"},{"id":"T0E6OlNlY3Rpb24tNzg5NQ==","title":"Create CommentsViewController","htmlContent":"

Setting up the CommentsViewController is going to be very similar to what we've already done for FeedViewController. We'll go through what's needed for the setup, but you'll be writing the code yourself based on the instructions. If you get stuck, look at the work you did for FeedViewController and see how it can map over to CommentsViewController.

\n

\nFirst step is to create a new UIViewController class (remember to use a Cocoa Touch Class file), and name it CommentsViewController

\n

Connect the storyboard items to the view-controller.

\n

\nSet the class of the Comments view controller to CommentsViewController and its Storyboard ID to commentsView in the Identity Inspector.

\n

Connect the table-view to the class.

\n

\nCreate an IBOutlet for the UITableView named commentsTableView, then set its delegate and dataSource to self in the viewDidLoad method.

\n

Create an implicitly unwrapped optional array of strings to hold the comments and updates the table-view.

\n

\nAdd variable var comments: [String]! to CommentsViewController with a didSet property observer. We'll leave this blank for now, but once we add real data, we'll need to have it refresh the commentsTableView.

\n

Make TableView Functional

Next we setup the necessary methods for our commentsTableView to work.

\n

\nCreate extensions for CommentsViewController which inherit from UITableViewDataSource and add the methods to pull information from the comments list

\n
// All methods here operate the same way we did for Posts\n\n// MARK: UITableViewDatasource\nextension CommentsViewController: UITableViewDataSource {\nfunc tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {\n   return comments.count\n }\n\n func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {\n   let cell = tableView.dequeueReusableCell(withIdentifier: \"commentCell\", for: indexPath) as! CommentTableViewCell\n\n   let comment = comments[indexPath.row]\n   cell.commentTextView.text = comment\n   return cell\n }\n}\n\n// MARK: UITableViewDelegate\nextension CommentsViewController: UITableViewDelegate {\n    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {\n        return 125\n    }\n}\n
\n

Next we'll create the CommentTableViewCell that will allow the last method to work with a custom cell.

"},{"id":"T0E6OlNlY3Rpb24tNzg5Ng==","title":"Create CommentTableViewCell","htmlContent":"

This cell is much simpler and requires very little code.

\n

\nCreate a new UITableViewCell class named CommentTableViewCell. Set commentCell to this new class.

\n\n

Once the class has been updated, Connect an IBOutlet from Comments Text View to CommentTableViewCell.

\n
class CommentTableViewCell: UITableViewCell {\n  @IBOutlet weak var commentTextView: UITextView!\n}\n
\n

All this cell class needs is one line for the IBOutlet.

\n

Now we can test it with mock data.

"},{"id":"T0E6OlNlY3Rpb24tNzg5Nw==","title":"Connect The Views","htmlContent":"

Now we can setup the tap handler for our table-view to present the comments of a post.

The method that allows us to do this is from the UITableViewDelegate which gives us access to the cell that a user selects.

Navigate to FeedViewController.swift and add the following:

\n

\nAdd the tableView(tableView: didSelectRowAt:) method to the UITableViewDelegate extension in FeedViewController.

\n
...\nextension FeedViewController: UITableViewDelegate {\n    ...\n\n    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {\n       let post = posts[indexPath.row]\n    }\n}\n
\n

We don't have the method necessary to get the comments of a post, so instead we'll use mock data to to test how everything looks first.

\n

\nAdd this to tableView(tableView: didSelectRowAt:) method to present a CommentsViewController with fake comments.

\n
 ...\n\n// Get the storyboard\n let storyboard = UIStoryboard(name: \"Main\", bundle: Bundle.main)\n// Get the commentsView from the storyboard\n guard let commentsView = storyboard.instantiateViewController(withIdentifier: \"commentsView\") as? CommentsViewController else {\n   return\n }\n // add mock comments\n commentsView.comments = [\"Blah blah blah!\", \"Good app.\", \"Wow.\"]\n navigationController?.pushViewController(commentsView, animated: true)\n}\n
\n
"},{"id":"T0E6OlNlY3Rpb24tNzg5OA==","title":"Product So Far","htmlContent":"

Run the app and test it out to see how it looks!\n\n \"Mock\n

You can check your implementation with the below solutions for CommentTableViewCell and CommentsViewController:

\n

\n CommentTableViewCell

\n
 import UIKit\n\nclass CommentTableViewCell: UITableViewCell {\n    @IBOutlet weak var commentTextView: UITextView!\n\n  // Below functions are not needed, they were auto-generated\n    override func awakeFromNib() {\n        super.awakeFromNib()\n        // Initialization code\n    }\n\n    override func setSelected(_ selected: Bool, animated: Bool) {\n        super.setSelected(selected, animated: animated)\n\n        // Configure the view for the selected state\n    }\n\n}\n
\n

CommentsViewController

\n
import UIKit\n\nclass CommentsViewController: UIViewController {\n\n    @IBOutlet weak var commentsTableView: UITableView!\n\n    var comments: [String]! {\n        didSet {\n            // TODO: fill in later when we have real data\n        }\n    }\n\n    override func viewDidLoad() {\n        super.viewDidLoad()\n        commentsTableView.dataSource = self\n        commentsTableView.delegate = self\n    }\n\n}\n\n// MARK: UITableViewDatasource\nextension CommentsViewController: UITableViewDataSource {\n    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {\n        return comments.count\n    }\n\n    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {\n        let cell = tableView.dequeueReusableCell(withIdentifier: \"commentCell\", for: indexPath) as! CommentTableViewCell\n\n        let comment = comments[indexPath.row]\n        cell.commentTextView.text = comment\n        return cell\n    }\n}\n\n// MARK: UITableViewDelegate\nextension CommentsViewController: UITableViewDelegate {\n    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {\n        return 125\n    }\n}\n
\n

We've gotten more practice at displaying data in tableviews with custom UI as well as with using mock data to stub views out! Let's fix up our network layer to not only make our code more efficient, but also to include pulling in comment data!

"},{"id":"T0E6OlNlY3Rpb24tNzg5OQ==","title":"Now Commit","htmlContent":"
$ git add .\n$ git commit -m 'Built Comments view and controller'\n$ git push\n
"}]},"next":{"id":"T0E6OlBhZ2UtMTYzNw==","slug":"networking-layer","title":"Reconstructing Networking Layer"},"previous":{"id":"T0E6OlBhZ2UtMTYzNw==","slug":"networking-layer","title":"Reconstructing Networking Layer"}},{"id":"T0E6OlBhZ2UtMTYzNw==","title":"Reconstructing Networking Layer","slug":"networking-layer","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNzE5MQ==","title":"Reconstructing Networking Layer","htmlContent":"

Now that we have a working CommentsViewController the next step will be to build the methods necessary to pull data from the API.

Going back to the API documentation, you'll find how to send a pull request to retrieve a specific post's comments.

\n

\nOpen Postman and send a GET request with this URL\nhttps://api.producthunt.com/v1/comments?sory_by=votes&order=asc&per_page=20&search[post_id]=1

\n\n

Note: be sure to use the same request sent with the correct headers such as authorization or this request will not work

\n
"},{"id":"T0E6OlNlY3Rpb24tNzE5Mg==","title":"Create Comment Model","htmlContent":"

Let's start by creating the model that will hold the id and body of a comment retrieved from the API.

\n

\nCreate a Decodable model called Comment with an Int id and String body.

\n
struct Comment: Decodable {\n let id: Int\n let body: String\n}\n
\n

And the struct to represent the API response from the pull request.

\n

\nCreate the CommentApiResponse struct within your Comment model that has a list of Comment objects to model the JSON we will retrieve from the API. This will need to be Decodable as well.

\n
struct CommentApiResponse: Decodable {\n   let comments: [Comment]\n}\n
\n

Because our variables match the properties of the JSON retrieved from the API we do not need to set up coding keys or an initializer. The Comment model is ready to go 👍

"},{"id":"T0E6OlNlY3Rpb24tNzE5Mw==","title":"EndPoints","htmlContent":"

We'll do some major refactoring to the networking layer to improve the overall quality of the code and reduce repetitive code.

Using enums is a great way to do this. An enumeration defines a common type for a group of related values and gives us access to those values in a way that is type-safe.

\n

\nSomething is considered type-safe if an operation checks that it can be performed on a specific data type before it attempts to do so. For example, preventing a function from calling the append method on an Int before it actually executes the call.

\n

We'll have a case for each endpoint from the API that we want to access.

\n

\nCreate enum EndPoints with cases for posts and comments inside the NetworkManager class

\n
class NetworkManager {\n...\n  enum EndPoints {\n   case posts\n   case comments(postId: Int)\n  }\n}\n
\n

We'll have a method for each part of the URLRequest necessary to build the pull request to get posts and comments.

\n

\n Create a method get the path of the posts and comments.

\n
enum EndPoints {\n  ...\n  // determine which path to provide for the API request\n  func getPath() -> String {\n      switch self {\n      case .posts:\n          return \"posts/all\"\n      case .comments:\n          return \"comments\"\n      }\n  }\n}\n
\n

Create a method to get the http method in a type-safe way.

\n
enum EndPoints {\n ...\n // We're only ever calling GET for now, but this could be built out if that were to change\n func getHTTPMethod() -> String {\n   return \"GET\"\n }\n}\n
\n

Create method to get headers.

\n
enum EndPoints {\n ...\n // Same headers we used for Postman\n func getHeaders(token: String) -> [String: String] {\n   return [\n      \"Accept\": \"application/json\",\n     \"Content-Type\": \"application/json\",\n     \"Authorization\": \"Bearer \\(token)\",\n     \"Host\": \"api.producthunt.com\"\n   ]\n }\n}\n
\n

Create method to get parameters

\n
enum EndPoints {\n ...\n // grab the parameters for the appropriate object (post or comment)\n func getParams() -> [String: String] {\n   switch self {\n   case .posts:\n     return [\n       \"sort_by\": \"votes_count\",\n       \"order\": \"desc\",\n       \"per_page\": \"20\",\n\n       \"search[featured]\": \"true\"\n     ]\n\n   case let .comments(postId):\n     return [\n       \"sort_by\": \"votes\",\n       \"order\": \"asc\",\n       \"per_page\": \"20\",\n\n        \"search[post_id]\": \"\\(postId)\"\n      ]\n   }\n }\n}\n
\n

Create method to convert the params array into a connected string.

\n
enum EndPoints {\n ...\n func paramsToString() -> String {\n   let parameterArray = getParams().map { key, value in\n     return \"\\(key)=\\(value)\"\n   }\n\n   return parameterArray.joined(separator: \"&\")\n }\n}\n
\n

Now you can use this to quickly and efficiently create a network request to the Product Hunt API.

"},{"id":"T0E6OlNlY3Rpb24tNzE5NA==","title":"Use EndPoints To Construct Request","htmlContent":"

Now we can clean up the code in NetworkManager

\n

\nAdd a private method makeRequest to the NetworkManager class.

\n
// All the code we did before but cleaned up into their own methods\nprivate func makeRequest(for endPoint: EndPoints) -> URLRequest {\n  // grab the parameters from the endpoint and convert them into a string\n  let stringParams = endPoint.paramsToString()\n  // get the path of the endpoint\n  let path = endPoint.getPath()\n  // create the full url from the above variables\n  let fullURL = URL(string: baseURL.appending(\"\\(path)?\\(stringParams)\"))!\n  // build the request\n  var request = URLRequest(url: fullURL)\n  request.httpMethod = endPoint.getHTTPMethod()\n  request.allHTTPHeaderFields = endPoint.getHeaders(token: token)\n\n  return request\n}\n
\n

We'll also use an enum to create a Result type that allows us to easily handle different responses from the API.

\n

\nCreate an enum Result inside the NetworkManager class with success case for returning decoded data, and failure case for returning error messages from the response.

\n
enum Result<T> {\n case success(T)\n case failure(Error)\n}\n
\n

HOLD UP What is <T>? What is < > and what is this T?

The generic version of the function uses a placeholder type name (called T , in this case) instead of an actual type name (such as Int , String , or Double). The < > are what makes the class generic.

\n

\nGeneric code enables you to write flexible, reusable functions and types that can work with any type, subject to requirements that you define. You can write code that avoids duplication and expresses its intent in a clear, abstracted manner.

\n\n

You can read more about generics here

\n

And an enum to define all the errors we wish to handle in code.

\n

\nCreate an enum EndPointError and add this inside the NetworkManager class

\n
enum EndPointError: Error {\n  case couldNotParse\n  case noData\n}\n
\n
"},{"id":"T0E6OlNlY3Rpb24tNzE5NQ==","title":"Update Get Posts Method","htmlContent":"

Now we can update the getPosts method to use the enums we created to build requests and handle responses from the API.

\n

\nUpdate the getPosts method parameters to use the Result type.

\n
func getPosts(_ completion: @escaping (Result<[Post]>) -> Void) {\n
\n

Replace the body of the getPosts method to use the enums we created and reduce the redundancy that it currently has:

\n
func getPosts(_ completion: @escaping (Result<[Post]>) -> Void) {\n   let postsRequest = makeRequest(for: .posts)\n   let task = urlSession.dataTask(with: postsRequest) { data, response, error in\n       // Check for errors.\n       if let error = error {\n           return completion(Result.failure(error))\n       }\n\n       // Check to see if there is any data that was retrieved.\n       guard let data = data else {\n           return completion(Result.failure(EndPointError.noData))\n       }\n\n       // Attempt to decode the data.\n       guard let result = try? JSONDecoder().decode(PostList.self, from: data) else {\n           return completion(Result.failure(EndPointError.couldNotParse))\n       }\n\n       let posts = result.posts\n\n       // Return the result with the completion handler.\n       DispatchQueue.main.async {\n           completion(Result.success(posts))\n       }\n   }\n\n   task.resume()\n}\n
\n
"},{"id":"T0E6OlNlY3Rpb24tNzE5Ng==","title":"Create Get Comments Method","htmlContent":"

Now it should be relatively easy to send a request to get a post's comments> [action]

\n

\nCreate method to get comments for a post:

\n
func getComments(_ postId: Int, completion: @escaping (Result<[Comment]>) -> Void) {\n  let commentsRequest = makeRequest(for: .comments(postId: postId))\n  let task = urlSession.dataTask(with: commentsRequest) { data, response, error in\n    // Check for errors\n    if let error = error {\n      return completion(Result.failure(error))\n    }\n\n    // Check to see if there is any data that was retrieved.\n    guard let data = data else {\n      return completion(Result.failure(EndPointError.noData))\n    }\n\n    // Attempt to decode the comment data.\n    guard let result = try? JSONDecoder().decode(CommentApiResponse.self, from: data) else {\n      return completion(Result.failure(EndPointError.couldNotParse))\n    }\n\n    // Return the result with the completion handler.\n    DispatchQueue.main.async {\n      completion(Result.success(result.comments))\n    }\n  }\n\n  task.resume()\n}\n
\n

Well done! We got more practice here in decoding JSON into Swift models, building out our network layer, and working with an API!

Unfortunately we have a problem: If we try to build right now, we'll get errors since we still need to update our view controllers to utilize what we've written in NetworkManager. Once we do that though, we'll have our very own Product Hunt Reader!

"},{"id":"T0E6OlNlY3Rpb24tNzE5Nw==","title":"Now Commit","htmlContent":"
$ git add .\n$ git commit -m 'Integrate comments API'\n$ git push\n
"}]},"next":{"id":"T0E6OlBhZ2UtMTYzOA==","slug":"update-view-controllers","title":"Updating View Controllers"},"previous":{"id":"T0E6OlBhZ2UtMTYzOA==","slug":"update-view-controllers","title":"Updating View Controllers"}},{"id":"T0E6OlBhZ2UtMTYzOA==","title":"Updating View Controllers","slug":"update-view-controllers","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNzkwMA==","title":"Updating View Controllers","htmlContent":"

Now we have everything we need to have the full app working and ready to show to the client.

First let's update the FeedViewController to use the refactored networking methods.

"},{"id":"T0E6OlNlY3Rpb24tNzkwMQ==","title":"Update FeedViewController","htmlContent":"
\n

\nChange updateFeed method to use new getPosts method.

\n
func updateFeed() {\n   networkManager.getPosts() { result in\n       switch result {\n       case let .success(posts):\n         self.posts = posts\n       case let .failure(error):\n         print(error)\n       }\n   }\n}\n
\n

Instead of setting the comments list to mock data when pushing a CommentsViewController onto the navigationController, we'll send in the id of the post that was tapped.

\n

\nUpdate the tableView(tableView: didSelectRowAt:) in our FeedViewController.swift

\n
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {\n   ...\n   guard let commentsView = storyboard.instantiateViewController(withIdentifier: \"commentsView\") as? CommentsViewController else {\n     return\n   }\n   // set the post id for the comments\n   commentsView.postID = post.id\n   navigationController?.pushViewController(commentsView, animated: true)\n}\n
\n
"},{"id":"T0E6OlNlY3Rpb24tNzkwMg==","title":"Update CommentsViewController","htmlContent":"
\n

\nUpdate comments to fill in its didSet method, add a postID, and add a NetworkManager. Be sure to update the comment var to an array of Comments and not an array of Strings:

\n
class CommentsViewController: UIViewController {\n ...\n\nvar comments: [Comment] = [] {\n    didSet {\n        commentsTableView.reloadData()\n    }\n}\n\n var postID: Int!\n\n var networkManager = NetworkManager()\n\n}\n
\n

Add a method to pull comments from networkManager called updateComments

\n
func updateComments() {\n   // Similar to what we did for posts\n   networkManager.getComments(postID) { result in\n       switch result {\n       case let .success(comments):\n         self.comments = comments\n       case let .failure(error):\n         print(error)\n       }\n   }\n}\n
\n

Add the updateComments() method to the CommentsViewController's viewDidLoad()

\n
override func viewDidLoad() {\n...\n\n   updateComments()\n}\n
\n

Update the tableView(tableView: cellForRowAt:) method to use the properties of our Comment model.

\n
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {\n   ...\n\n   let comment = comments[indexPath.row]\n   cell.commentTextView.text = comment.body\n   return cell\n}\n
\n
"},{"id":"T0E6OlNlY3Rpb24tNzkwMw==","title":"Product So Far","htmlContent":"

Done! Now you have a completed product ready to show the client 😄

\n \"Final\n

\n \"Final\n

Congratulations! As you go through this MOB course, see how you can relate what you've learned here to the material in class!

"},{"id":"T0E6OlNlY3Rpb24tNzkwNA==","title":"Now Commit","htmlContent":"
$ git add .\n$ git commit -m 'Completed PH Reader'\n$ git push\n
"},{"id":"T0E6OlNlY3Rpb24tNzkwNQ==","title":"Feedback and Review - 2 minutes","htmlContent":"

We promise this won't take longer than 2 minutes!

Please take a moment to rate your understanding of learning outcomes from this tutorial, and how we can improve it via our tutorial feedback form

"},{"id":"T0E6OlNlY3Rpb24tNzkwNg==","title":"Stretch Challenges","htmlContent":"

If you're still hungry for more, here are some stretch challenges to improve upon your product:

\n

\n\n\n
"}]},"next":null,"previous":null}]}},"page":{"id":"T0E6OlBhZ2UtMTYzOA==","title":"Updating View Controllers","slug":"update-view-controllers","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNzkwMA==","title":"Updating View Controllers","htmlContent":"

Now we have everything we need to have the full app working and ready to show to the client.

First let's update the FeedViewController to use the refactored networking methods.

"},{"id":"T0E6OlNlY3Rpb24tNzkwMQ==","title":"Update FeedViewController","htmlContent":"
\n

\nChange updateFeed method to use new getPosts method.

\n
func updateFeed() {\n   networkManager.getPosts() { result in\n       switch result {\n       case let .success(posts):\n         self.posts = posts\n       case let .failure(error):\n         print(error)\n       }\n   }\n}\n
\n

Instead of setting the comments list to mock data when pushing a CommentsViewController onto the navigationController, we'll send in the id of the post that was tapped.

\n

\nUpdate the tableView(tableView: didSelectRowAt:) in our FeedViewController.swift

\n
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {\n   ...\n   guard let commentsView = storyboard.instantiateViewController(withIdentifier: \"commentsView\") as? CommentsViewController else {\n     return\n   }\n   // set the post id for the comments\n   commentsView.postID = post.id\n   navigationController?.pushViewController(commentsView, animated: true)\n}\n
\n
"},{"id":"T0E6OlNlY3Rpb24tNzkwMg==","title":"Update CommentsViewController","htmlContent":"
\n

\nUpdate comments to fill in its didSet method, add a postID, and add a NetworkManager. Be sure to update the comment var to an array of Comments and not an array of Strings:

\n
class CommentsViewController: UIViewController {\n ...\n\nvar comments: [Comment] = [] {\n    didSet {\n        commentsTableView.reloadData()\n    }\n}\n\n var postID: Int!\n\n var networkManager = NetworkManager()\n\n}\n
\n

Add a method to pull comments from networkManager called updateComments

\n
func updateComments() {\n   // Similar to what we did for posts\n   networkManager.getComments(postID) { result in\n       switch result {\n       case let .success(comments):\n         self.comments = comments\n       case let .failure(error):\n         print(error)\n       }\n   }\n}\n
\n

Add the updateComments() method to the CommentsViewController's viewDidLoad()

\n
override func viewDidLoad() {\n...\n\n   updateComments()\n}\n
\n

Update the tableView(tableView: cellForRowAt:) method to use the properties of our Comment model.

\n
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {\n   ...\n\n   let comment = comments[indexPath.row]\n   cell.commentTextView.text = comment.body\n   return cell\n}\n
\n
"},{"id":"T0E6OlNlY3Rpb24tNzkwMw==","title":"Product So Far","htmlContent":"

Done! Now you have a completed product ready to show the client 😄

\n \"Final\n

\n \"Final\n

Congratulations! As you go through this MOB course, see how you can relate what you've learned here to the material in class!

"},{"id":"T0E6OlNlY3Rpb24tNzkwNA==","title":"Now Commit","htmlContent":"
$ git add .\n$ git commit -m 'Completed PH Reader'\n$ git push\n
"},{"id":"T0E6OlNlY3Rpb24tNzkwNQ==","title":"Feedback and Review - 2 minutes","htmlContent":"

We promise this won't take longer than 2 minutes!

Please take a moment to rate your understanding of learning outcomes from this tutorial, and how we can improve it via our tutorial feedback form

"},{"id":"T0E6OlNlY3Rpb24tNzkwNg==","title":"Stretch Challenges","htmlContent":"

If you're still hungry for more, here are some stretch challenges to improve upon your product:

\n

\n\n\n
"}]},"next":null,"previous":null}}},"staticQueryHashes":[]}