When we start developing a new application there’s the possibility that you don’t have the API ready yet. But you want to start doing the UI, so you want to code your app in a way that when API is available the integration will be easier to do and won’t affect the code done so far.

In this article, I will show you how to abstract your code to simplify api integration when available.

We are going to use the following simple mockup as the proof of concept:

As you can see in the picture above we have a login screen and a home screen with a dog list.

Based on this mockup, we can identify that our API will have two endpoints, one for the login and another one for the dog list.

So here is how can we abstract our code:

Let’s do it step by step 

1-Create your models 

Based on what we identified we will have two models:

• User
• Dog

We are adding JsonProperty attribute to all our properties, so that if our API fields name change we don’t have to change the name of the properties in our model.

2-Create our IApiManager 

We are going to create a new interface called IApiManager which defines the methods for handling our API calls.

3-Implement your IApiManager 

We are going to create two classes that implement our IApiManager interface, one that just returns mock data and the other one to consume the real API.

• ApiMockManager – Implementation that returns the mock data.

• ApiManager – Implementation for consuming real API calls.

If you want to know more on how to do API abstractions check this article.

You can generate the data by using this site, it will generate a JSON that you can later deserialize into an object based on your model.

Note: Make sure to escape the JSON generated by replacing ” for \”

4-Use it 

Create a BaseViewModel class with an IApiManager property and assign it to a new instance of your mock data manager.

When the API is ready you can assign the Api ViewModel property to a new instance of your real API manager.

PRO TIP: A better way to do this, is by using dependency injection and injecting the IApiManager interface in your ViewModels.

In your ViewModels inherit from BaseViewModel and use the property Api to handle api calls.

5-Create a build configuration for mocking data 

Before to build the application using the mock data manager or the real API one you would have to uncomment/comment the line, a better option might be to create a build configuration and a variable. That way it will set right API manager based on the configuration that the application was built.

1-Right click in your Solution and then click on Options

2-In the Build Configuration section, click on add to set your configuration name

Click on add again and now select the IPhoneSimulator platform, so that you can build your config on the iOS simulators too.

The result would be something like this:

3-In your common project click on Options, select Compiler, choose the configuration created before called “Mock” and add a new symbol called MOCK which creates a config variable.

4-Check the config variable created using conditional compilation to assign the right IApiManager based on the selected build configuration.

Check this article for more information.

Result:

Another options

• You can use a mock Api: To get a fake json response
• You can use unit testing for adding the data.
• Use a local database to save your data.

That’s all for now.

Check the full source code here.

Happy coding!