How to Write an iOS App That Uses a Web Service

Web Services + iPhone Apps Rule!

Web Services + iPhone Apps Rule!

As an iOS developer, you often need to use a web service from your app.

Sometimes you need to use a web service that someone else has written, and sometimes you need to use one of your own!

In this tutorial, you’ll get hands-one experience with using web services, by writing an iOS app that communicates with a simple web service that allows you to redeem promo codes to unlock extra content.

This tutorial is the second and final part of a two part series on custom web services. If you are curious how to develop the web service yourself, check out the first part of the series for full details!

You don’t necessarily have to set up the web service yourself for this tutorial – you can use the one I’ve already set up if you’d like.

This tutorial assumes you have basic familiarity with programming for iOS. If you are new to iOS development, you may wish to check out some of the other tutorials on this site first.

The Choice

This tutorial requires you to create a new View-based application and integrate three frameworks into it: the JSON framework, ASIHTTPRequest, and MBProgressHUD. You also have to make a basic UI for the app so the user can enter in a code to redeem.

But that’s a lot of work, so I thought we’d start this tutorial out with a choice. Are you like this guy?

If so, then just download this starter project with the libraries pre-integrated and the UI pre-made and skip the next two sections :]

Otherwise, read on DIYer! :]

Do It Yourself!

If you want to create everything yourself, start up Xcode and go to File\New\New Project, select iOS\Application\View-based Application, and click Next. Enter PromoTest for the Product Name, click Next, and save it somewhere.

To add the JSON framework, first download it from its github page. Once you have it downloaded, right click your PromoTest project entry in groups and files, select New Group, and name the new group JSON. Then drag all of the files from the JSON\Classes directory (JSON.h and several others) into the new JSON group. Make sure “Copy items into destination group’s folder (if needed)” is selected, and click Finish.

To add ASIHTTPRequest, first download it. Once you have it downloaded, right click your PromoTest project entry in groups and files, select New Group, and name the new group ASIHTTPRequest. Then drag all of the files from the ASIHTTPRequest\Classes directory (ASIAuthenticationDialog.h and several others, but IMPORTANT! don’t add the subfolders such as ASIWebPageRequest, CloudFiles, S3, and Tests.) into the new ASIHTTPRequest group. Make sure “Copy items into destination group’s folder (if needed)” is selected, and click Finish.

Also repeat this for the two files in ASIHTTPRequest\External\Reachability, as these are dependencies of the project.

To add MBProgressHUD, first download it. Once you have it downloaded, right click your PromoTest project entry in groups and files, select New Group, and name the new group MBProgressHUD. Then drag MBProgressHUD.h and MBProgressHUD.m into the new MBProressHUD group. Make sure “Copy items into destination group’s folder (if needed)” is selected, and click Finish.

The last step is you need to link your project against a few required frameworks. To do this, click on your PromoTest project entry in Groups & Files, click the PromoTest target, choose the Build Phases tab, and expand the Link Binary with Libraries section. Click the plus button in this section, and choose CFNetwork.framework. Then repeat this for SystemConfiguration.framework, MobileCoreServices.framework, and libz.1.2.3.dylib.

Compile your project just to make sure you’re good so far, and now we’re back to the fun stuff!

Implementing the Interface

Let’s make a quick and simple interface to test this web service. As a refresher, the web service takes three parameters:

1. rw_app_id: The unique identifier for the app. If you’ve been following along with the previous tutorial, there should be only one entry so far, App ID #1.
2. code: The code to attempt to redeem. This should be a string that’s entered by the user.
3. device_id: The device ID that is attempting to redeem this code. We can get this with an easy API call.

So basically, all we need is a text field for the user to enter the code (they’ll tap “Go” on the keyboard to start the redemption process), a label for the text field, and a text view to write the result out to.

So click on PromoTestViewController.xib, bring up the Object library by selecting the third tab in the View toolbar (Utilities) and selecting the third tab in the library toolbar (Object library), as shown in the screenshot below.

From the Object library, drag a UILabel, UITextField, UITextView into the main view. Double click the UILabel and change the text to read “Enter promo code:”. Then double click the text view and delete all the text inside, and optionally change the background color of the UITextField to clear in the Attributes Inspector.

You also may find it useful to go to Editor\Canvas\Show Bounds Rectangles so you can see the bounds of the text view.

At this point your layout should look similar to the screenshot below:

Next, you need to set the File’s Owner as the Text Field’s delegate so you can get a callback when the return button is clicked on the keyboard. To do this, control-click on the Text Field, and drag a line from the delegate entry to the File’s Owner.

Also, you need to connect the text view to an outlet so you can set it later. To do this in the cool new Xcode 4 way, first turn on the Assistant Editor (the second button in the Editor tab) and make it show up on the bottom with View\Assistant Layout\Assistant Editors on Bottom. Make sure it’s set to Automatic and that PromoTestViewController.h is visible.

Then select the Text View and control-drag a line from the text view down to right above the @end keyword, set Connection tou Outlet, the Name to textView, and click Connect, as you can see in the screenshot below.

At this point Xcode will automatically create a textView property and instance variable for you.

Finally, open PromoTestViewController.h and mark the class as implenting UITextFieldDelegate as follows:

@interface PromoTestViewController : UIViewController <UITextFieldDelegate> {

Then switch to PromoTestViewController.m and implement textFieldShouldReturn as follows:

- (BOOL)textFieldShouldReturn:(UITextField *)textField {
    NSLog(@"Want to redeem: %@", textField.text);
    return TRUE;
}

Compile and run your app, tap the text field, enter a code, and tap the return button, and you should see a message in your console output similar to the following:

2011-03-28 15:37:05.342 PromoTest[44350:207] Want to redeem: test

OK – all the setup is done, and you’re ready to start communicating with the web service!