How to create a native iOS app for your WordPress site in just 2 hours!

Wordpress Objective-C

 

Sounds amazing, right?

Let’s create a native iOS app for your WordPress site in a record time!

Topics that we will cover (please follow chronologically):

  • Creating web services using JSON API plugin
  • Generate the data model using JSON Accelerator
  • Setting up CocoaPods
  • API communication using AFNetworking
  • Building the User Interface

 

Creating web services using JSON API plugin

Instead of hiring some backend developer to do all the web services for your site (which can cost you a lot more time and money), there is a plugin called JSON API  that will create web services for your app in a minute. The plugin is really good and creates various web services for posting and getting content from your website in a JSON format.

All you need to do is to install the plugin from the Plugins section located at your WP admin page, and then just Activate it. This will create a section in Settings where you can see all the web services that are created. This was quite simple, right?

 

Generate the data model using JSON Accelerator

Writing the data model manually can take us a lot of time, but luckily we have JSON Accelerator here to help us and save us BIG time. Let’s start by adding your get_posts web service that will return all the posts that you have created on WordPress (it uses pagination).

json-accelerator

This is how it will look like, so just click on Generate Files and it will generate all the data model files on your Desktop in a second.

Then create a folder in your project called DataModel and import the files inside…

datamodel

Imagine writing all these files manually, huh? 🙂

At this point, we have created a data model and web services in less than 5 minutes! 

 

Setting up CocoaPods

CocoaPods is a dependency manager for Swift and Objective-C, which will help us to easily install and organize the libraries we need. For more info how to install see here.

If you already know how to use CocoaPods, just copy this in your Podfile and run pod install:

platform :ios, '8.0'
inhibit_all_warnings!

pod 'AFNetworking'
pod 'SDWebImage'
pod 'NSDate+TimeAgo'

 

API communication using AFNetworking

I have already prepared a tutorial on how to use AFNetworking 3 in your app. In that tutorial, i have prepared a full solution for your API communication handling. We will create a Singleton class called Requests and copy that snippet inside that class. This is just our communication handler, now we need to do another class (let’s call it ParserEngine) which will parse all the web services that we need.

Here is an example of doing a request and also populating the data model that we have previously created:

-(void)getAllPostsWithSuccess:(void (^)(NSDictionary *response))completionBlock errorCallback:(void(^)(NSError*))errorBlock {
    
    if (!_posts){
        _posts = [[NSMutableArray alloc]init];
    }
    
    Requests *request = [Requests sharedInstance];
    
    NSString *endPoint = [NSString stringWithFormat:@"%@?page=%ld",GET_POSTS,_currentTutorialPage];
    _finishedLoading = NO;
    [request requestWithEnd:endPoint method:@"GET" params:nil callWithSuccess:^(NSDictionary *response){
        _tutorials = [[Tutorials alloc]initWithDictionary:response];
        if (_tutorials.pages >= _currentTutorialPage) {
            [_posts addObjectsFromArray:_tutorials.posts];
            _currentTutorialPage++;
        }
        _finishedLoading = YES;
        if (completionBlock) completionBlock(response);
    } errorCallback:^(NSError *error) {
        _finishedLoading = YES;
        if (errorBlock) errorBlock(error);
    }];
}

You will need a pagination as well, so here is a tutorial how to do it.

Now that we have covered the data handling lets show that data to the User Interface.

 

Building the User Interface

I have created a simple UI for my app, and I think it suits my needs. If you want to use some other design feel free to do that.

Here is a preview how the app looks like:

main-page-theappspace  web-view-theappspace

 

 

 

 

 

 

 

 

All of the components that you see use the same constraint logic:

  • Leading
  • Top
  • Proportional Width
  • Proportional Height

For the images, i use a caching image library called SDWebImage.
For the time posted (bottom left label), i use NSDate + TimeAgo.
For @3x, @2x and @1x artwork and app icon conversion use Prepo.


This tutorial covers everything you need to create a simple iOS app. I haven’t paid much attention to UI because I think you would like to have a different design, but the data handling is done and tested for many times, so I have created classes that I reuse everywhere.

I am using the same approach in my app that is live on AppStore, you can check it here and would appreciate your comments.

Thank you for your patience, hope this tutorial helped you!

Leave a Reply

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