Building News App Using MVVM Design Pattern

Image for post
Image for post
https://cdn.architecturelab.net/wp-content/uploads/2015/01/763e771c1010af535d20e42439b9c04e.jpg

In my latest Udemy course “Building Real World iOS Apps Using Swift”, I demonstrated how to implement a complete News App integrated with NewsAPI.org. This post highlights some important concepts related to implementing iOS app using MVVM design pattern.

Before diving into the implementation make sure you have a NewsAPI account. The NewsAPI.org account will provide you with an apiKey which is integral for making successful requests against the API. For the sake of simplicity we will only be fetching and displaying top headlines from the API. The link to the top headlines is shown below:

https://newsapi.org/v2/top-headlines?country=us&apiKey=yourapikey

This results in the following JSON response.

Image for post
Image for post

Note: Since this is news your actual JSON response may differ. However the structure remains the same.

After setting up the NewsAPI account we are ready to make a request and populate JSON into our models. Looking at the JSON response you can see that we are interested in items inside the articles array. In order to get those items we must decode articles. Our Article class looks like the following:

Unfortunately, if you try to decode the response to Article or even [Article] it will fail. The reason is that you need to take into account the nested element “articles” in the JSON response. The easiest way to solve this issue is to create another structure which represents the JSON response with “articles” as the key. The ArticleList model implementation below shows the correct structure. The ArticleList can serve as the root of the JSON response. The articles property of the JSON response will be mapped to the array of Article model.

The web service class called “Webservice” consists of a single function getArticles, which is responsible for fetching and decoding the articles. The complete implementation of getArticle is shown below:

The purpose of View Model is to provide the data to the view and also bind any changes from the view back to the model. There are countless number of ways to implement your view model. In this article we created a parent view model which represents the entire view. This structure comes in handy when your view model is displaying more than the list of data i.e search bars, segmented controls etc. We will call our view model ArticleListViewModel.

ArticleListViewModel holds the list of all articles, along with some other helper functions that is going to provide data to the UITableView.

Each article which consists of title and description is represented by ArticleViewModel. The implementation of ArticleViewModel is shown below:

The ArticleViewModel exposes the title and description properties which utilizes the article model to return that information.

The NewsListTableViewController is responsible for displaying the articles in the UITableView control. Inside viewDidLoad we call our custom setup function which fetches articles from the web service.

Once, the articles are fetched we pass the array of articles to the ArticleListViewModel. Once the UITableView reloads, it fires the cellForRowAtIndexPath function which populates the cell with the ArticleViewModel.

The final result is shown in the screenshot below:

Image for post
Image for post

I really hope you enjoyed this article! If you want to learn more about creating iOS apps using MVVM Design Pattern then check out my course below:

https://www.udemy.com/building-real-world-ios-apps-using-swift/?couponCode=MEDIUM

[Source Code]

Thanks and happy coding!

iOS Developer, speaker and educator. Top Udemy and LinkedIn instructor. Lead instructor at DigitalCrafts. https://www.udemy.com/user/mohammad-azam-2/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store