Develop E-Commerce iOS application in 24h

In my previous tutorials I have explained more then once how to create new application using XCode and Swift and implement some components. Using the knowledge from the previous tutorials we’ll try to implement one basic e-commerce application.

Required previous knowledge:

We’ll start with defining requirements for this application and how each of them can be implemented, which components and which navigation we’ll use also which frameworks we’ll use.


  • Navigation
  • Products listing
  • Product details
  • News
  • About
  • Terms and conditions

In this tutorial we’ll show the whole concept behind one basic e-commerce application and some of the logic how is implemented and some of the screens, the rest of the screens like News View Controller ( which is similarly implemented like Home View Controller ), About and Terms will be left for the user to implement them like in example from the GitHub.


There are different navigational patterns which can be used like side menu, tab based, dashboard, or mixing two navigation patterns for much more complex solutions, for some of them how can be implemented please check my previous tutorials. For our e commerce application we will use tab bar navigation with 4 tabs for main view controllers and navigation controller for accessing view controllers not accessible from the tab bar navigation. The first tab will display the list of products, the second tab is reserved for displaying news, like events, discounts… , in the third tab we’ll display some short info for us and in the forth tab are displayed terms and conditions.

The second decision is how to display the list of products in our application. We’ll display the products in grid 2 products in row using UICollectionView component.

Next, we need to design custom cell that will fit in our concept. First we need to decide what we will display in this cell, which are the relevant product information we want to display to the customer and how the cell will look like. For the simplest cell we need main product image, product name and product price. The main image will occupy the whole cell background and at the top of the cell we will put another view where we will display the product name and the product price. If the customer touch some of the listed products we’ll display product details view.

The logic behind this Home View Controller is to load all products ( or load for specific category ) from the API, and display it in UICollectionView. While loading the products from the API we’ll display one progress bar which is default functionality to inform the customer that the application is working. Loaded products will be stored globally for easy access from different view controllers. Because the complete product data will be stored in object we can easy send that product object in Product Details View Controller for displaying all details when the customer choose some product from Home View Controller. If we have some menu for listing categories we can load the products for selected category from the API and overwrite the global saved product objects. In our example we have in the top right corner one button for displaying categories menu.

Basically we have finished with product listing, next we will design mockup for product details.


Product details

Product details view will show the complete product details including product name and product price. For navigation between Home view where the products are listed in UICollectionView component and Product Details, we are using UINavigationController for navigation which give us option Home tab to have separate navigation stack from UITabBar component where UITabBar component have own navigation stack with predefined views controllers for each tab.

At the top of the view we’ll have one view where the product name and product price are displayed as labels, right after this view we will place UIImageView and after the image view where the product image will be displayed we will place one UITextView for product details. At the bottom of the image in the right corner we will put two buttons vertical positioned, where the blue one will trigger share functionality and the red one will trigger sending mail form to the to the predefined email address. Product Details View Controller will display selected product object from the previous view controller – Home View Controller.

Next image shows the application Storyboard with all view controllers designed and connected.



The first thing what we should do is create new pod file and save the configuration from bellow into the new created pod file and in the terminal run the command

$ pod install


We will use Alamofire framework for network communication, SVProgressHUD for animated progress bar while loading data from the API, PMJSON for easy JSON processing, SDWebImage for image loading and caching, GTToast for displaying short animated messages, DPDropDownMenu for categories menu, TPKeyboardAvoiding in case we need to implement form with multiple text fields and UIColor_Hex.

On the next image is shown application project structure.


As I mention earlier, most of the code is easy to implement following my previous tutorials in this tutorial I will show the most interesting part of the application which is network communication and objects serialization. Good practice is to implement layered application structure where we’ll have all network operations as separate network layer in the application so later we can make better abstraction using different type of connectivity and data aggregation from the API.

Our API client is singleton and is using Alamofire and PMJSON frameworks.




The rest of the code for this example can be checked from the GitHub.

Because the most popular method for implementing web services this days is Restful this application is using simple restful service for storing the products data and aggregating as encoded json data. Just for testing purpose we can check the project ‘pfservice’ which is mockup micro service based on yaml config files for fast and easy simulating the real products API for the application with simple configuration but I will write another tutorial for how to use this service for creating products API micro service.


Print Friendly, PDF & Email

Leave a Comment

Your email address will not be published. Required fields are marked *