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

Jun 23, 2011 by

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

Related Posts

Tags

Share This

  • Frank

    So after these steps, how exactly do you “DEPLOY” the app??.. No where on the internet have I found ANY definitive answers or instructions to this question.
    Your  tutorial is EXACTLY what what I’ve been looking for and have also created a “webapp” with iwebkit, but would just like to know the next step please.
    Do I still need to get a developers licence ($99) from apple to get the physical app to actually deploy? I am only interested in the app being posted to Cydia, not the App Store.

    • To do so, you would still need the $99 program to sign your apps.

      • Frank

        This is not an option for me, as it looks like once you “Deploy” your app with xcode as a developer, your only allowed to share with 100 “testers”(unless I am wrong)?.. 
        This is apple rule is ridiculous and not what I want to do. I have seen several tricks out there which stop code signing from happening, unfortunately they are all a little old and I am using xcode 4 and developing for iphone4 (and below).
        I would just like to create and somehow deploy the app and place it on Cydia for free.
        By the way, this script seems to do exactly what I want as far as displaying my “Webapp” live in an app! Which is perfect!!! Thank you for that!!

  • digitallife

    Man you should really do an update of this for xcode 4 as a ton of this has changed…running this is xcode 4 only leads to a ton of errors