Mobile Web app to native iOS app with just 5 lines of code

Jun 23, 2011 by Will Coughlin

HTML Web applications can easily be turned into native iOS apps with just five lines of Objective-C. However, one thing to keep in mind is that the user must be connected to the Internet, whether by cellular network or WiFi, to use it.

What you’ll need

A Mac with Xcode and the latest iOS SDK
A mobile web application hosted on a Web server, I will be using the iWebkit demo

Creating your Xcode project

You will need to open up Xcode and create a new project. Select iOS, then View-based Application.

For the purpose of this tutorial, I have named my app iWebkit Demo.

Creating and Synthesizing the IBOutlet

On your left-hand side you will be presented with a file browser. Select the ViewController.h file.

Just outside of the curly brackets and above the @end, we will need to create our IBOutlet. We will call ours appView.

After creating our IBOutlet we will need to synthesize it. It simplest terms this will allow us to use it in the ViewController.m file. So let’s head on over to that file, it will have the same name but with the .m extension.

We will synthesize our IBOutlet right below the line that starts the @implementation.

Programming the UIWebView

Still in the ViewController.h file, we will need to un-comment the viewDidload by erasing the /* and */ above and below it.

Next we will create the path to the Webpage we want to display. The URL I will be using is http://snippetspace.com/iwebkit/demo/

This stores the iWebkit demo’s URL in a variable called “path”. Next we will create an HTTP request on the url that was stored in the “path” variable.

Here we have just created a variable called “request”, and when called upon it will load a request to the URL we defined in the “path” variable.

Ok, now we are almost done with the programming, now we must tell the program to load the request in the UIWebView we have named “appView”.

Building the Interface

Now to set up what the user will actually see. Open the ViewController.xib file.

Open up the right-side panel with this button in the top-right:

Then on the bottom section of the toolbar, scroll down to find the UIWebView and drag it onto the view.

Be sure the WebView fills out the window.

Now all that’s left to do is link up the IBOutlet to the UIWebView. Control-click the File’s Owner button (yellow cube to the left) and be sure you see our IBOutlet named “appView”.

Connect the appView outlet to the UIWebView by dragging from the circle to the right of “appView” to the WebView. After they are linked, the File’s Owner box should look like this:

Here you see that the outlet called appView has been connected to the Web View we have just placed.

Running your Application

Select your desired device and iOS version and click Run.

See, creating iOS applications doesn’t required you to be an Objective-C expert. If you can write Web apps, you can write native apps, with just 5 lines of code. This is also useful in more complicated applications that require webpages to be seen. You are probably familiar with Cydia, who’s familiar main view uses a UIWebView to display http://cydia.saurik.com/.

Troubleshooting – Common problems and likely solutions

“Expected ‘;’ before ‘-’ token”/”Expected * before *” This is caused when a programmer forgets the line terminating semi-colon, ; , at the end of a line. All lines of code typed in this tutorial had this. This may cause a number of other errors as well.
My IBOutlet doesn’t show up in the menu when control-clicking File’s Owner. Be sure you have typed all code in the ViewController files, not the AppDelegate ones.
My URL doesn’t load when I run the app.
- Double-check all code; read back through the article
- Be sure you are connected to the Internet
- Make sure you edited the ViewController.xib file, not MainWindow.xib

Subscribe to our RSS feed to get the latest posts from TechSpheria!

Like us on Facebook and follow us on Twitter for the latest posts on your favourite social network!

Follow @TechSpheria

The written portions of this journalistic piece are copyrighted © TechSpheria unless quoted or otherwise stated. Unauthorized use of such content is subject to international copyright law and may result in legal action at the discretion of the administrator.