TweetFollow Us on Twitter

Developing for the iPhone

Volume Number: 23 (2007)
Issue Number: 08
Column Tag: iPhone

Developing for the iPhone

OR: how I learned to stop worrying and love Web 2.0

by Marc S. Ressl

Introduction

The iPhone has finally come to us. After several months of speculation, jokes, disappointments and surprises, the incredible device hit the streets. In this article we will talk a little bit about the recent developments in the iPhone scene, about the kind of applications you can write for the iPhone, and about the ways you can implement them. We'll also discuss some human interface aspects, so you can start writing intuitive applications that "just work".

The missing software development kit

Let's talk a little bit about history. It was January 9th, 2007, a beautiful Tuesday morning at the MacWorld conference in San Francisco when Steve Jobs introduced the "next big thing", the iPhone.

During the following months the hype and spin grew to epic proportions. Rumor had it that the iPhone would be capable of some sort of third-party application development.

But in June, at Apple's developer conference WWDC 2007, the unexpected happened. Based on the fact that the full Safari engine is inside the phone, Steve Jobs introduced a "very sweet solution" for developing apps. Web 2.0 applications can look and behave exactly like iPhone applications, he claimed.

Most people weren't expecting a full-blown SDK in a version 1.0 device. However, his announcement let down some developers, as Jobs was hardly telling anything new. This feeling was only exacerbated by Jobs' claims from a week before, when he said that "...you can't do that stuff in a browser", while discussing the iPhone's internal Google Maps client.

In spite of Apple's real reasons for not opening up the iPhone (yet), there are many advantages with web applications:

· Security. Keeping third-party web applications sand-boxed in Safari protects the device and networks from software pathogens. The https protocol provides secure communications over the Internet. A stolen iPhone is no security concern, as no sensitive application data is stored locally. There is also no need for an application certificate, as with Symbian.

· Installations. No installation is needed, as an application just exists as a URL, a username and a password. As a side-effect, applications get copy protection. Your code stays on the server.

· Updates. Web-apps only need to be updated on the server. Update once, update everywhere.

· Access. Being platform-agnostic, a web-app for the iPhone works on a regular web browser and on other mobile browsers as well, wherever you are.

· Usability. HTML controls, enhanced with JavaScript, provide all the flexibility you could expect from a traditional application. Besides, the pinch gesture always works as expected.

· New ways for earning revenue. You can charge for usage of your app. Another possibility is to add advertisements to it.

· Efficient data transmission. There has been some criticism that web-apps would have a large overhead. But Safari has a cache, and Web 2.0 apps can be highly optimized.

Of course, the list of disadvantages is also quite long:

· Web applications can't be stored on the local file system, they are not available offline. Forget widgets à la Mac OS X.

· No access to the iPhone's resources. No direct sound playback or recording, no direct access to the camera, no interfacing with Bluetooth, no direct access to the Internet, no direct access to the cellular network, no direct access to iPhone's sensors.

· Computationally intensive tasks are not possible. No sound, image or video processing.

· Limited access to the multi-touch interface.

· Containment. Since web-apps are contained in Safari, they cannot call your attention while Safari is out of focus.

· No direct links to the applications from the iPhone home screen. If you want to open an application you have to open a Safari bookmark, and this is odd.

· Bills. Data service bills might get pretty hefty when roaming.

· This is not confirmed at the time of this writing, but there appears to be no access to the data on the local file system.

I want to write an application for the iPhone

Want to write an app for the iPhone? You should ask yourself first if it is feasible.

It should be feasible if your requirements are not on the list of disadvantages we just mentioned. Particularly well suited are applications that demand permanent connection, like instant messengers, remote control or directory look-up services. Group collaboration tools, regular office applications, calculators, converters, RSS readers, news tickers, and mobile mini-games are also good candidates.

But sadly there are many things that can't be implemented: Skype-like VoIP (obviously not in the interest of cellular operators), a voice recorder (for voice blogging purposes, perhaps?), games (I certainly would love MAME or ScummVM for iPhone), third-party media players (like VLC or MPlayer) and VNC (this might be possible with Web 2.0, albeit slowly). And many futuristic applications using the camera, microphone, Bluetooth or motion sensors are just not possible at the time being.

To see an example of what is feasible consider Google Docs & Spreadsheets. It is a powerful online office application that runs on the iPhone. And "iGoogle" is a personalized homepage with many customizable "Google Gadgets". It even accepts user-submitted gadgets.

It is clearly visible that Apple is heading in an open-standards, web-based direction. I myself can see many benefits in this move, as more and more online web applications might end up replacing traditional VPN systems with online, secure document viewing/editing and group collaboration tools. Might there be a big market about to be exploited?

The soul of a web application

How does one start writing a web application? Well, if you have something that serves web pages you are done, it'll work on the iPhone. I have always had a very good experience with AMP (Apache, mySQL and PHP), and do recommend it. You can easily find AMP (LAMP or MAMP) tutorials on the web. Other interesting frameworks are Ruby on Rails and Java+any application server.

As a first step, you should think about the web-app client-server communication. It will have a huge impact on people's patience (and maybe on their phone bills, too) if you transmit too much data. Remember the iPhone is GSM/EDGE.

The most straightforward approach is a classic HTTP request>response scheme. You display an HTML form, receive the variables from the form, and respond with the requested information. This simple approach works well for directory look-ups.

The problem with this scheme is complex interfaces that require minor screen updates (as a Web 2.0 office application certainly would). The overhead of HTML pages and forms will quickly render such a web-app unusable. Fortunately, one can use Ajax (Asynchronous JavaScript and XML) to solve this issue. JavaScript provides the XMLHttpRequest class that lets a web browser send asynchronous messages to a web server and receive a response. The JavaScript client on the browser can then update the page accordingly, with no reloading at all.

Let's see an example of a web page that automatically fills in a city name from a ZIP code. The HTML code for this example is:

<input type="text" id="zip" name="zip" onblur="getCityFromZip();"> <input type="text" id="city" name="city">

The onblur event starts the getCityFromZip() function when the user leaves focus of the zip field. Shown below is the JavaScript code that performs the look-up:

<script type="text/javascript" language="JavaScript">
// Create the HTTP object
function getHTTPObject() {
   var xmlhttp;
   if (typeof XMLHttpRequest != 'undefined') {
      try {
         xmlhttp = new XMLHttpRequest();
    } catch (e) {
         xmlhttp = false;
    }
   }
   return xmlhttp;
}
var http = new getHTTPObject();
// Look-up function
var url = "http://www.example.com/getCity.php?zip=";
function getCityFromZipcode() {
  var zip = document.getElementById("zip").value;
  http.open("GET", url+escape(zip), true);
  http.onreadystatechange = handleHttpResponse;
  http.send(null);
}
// HTTP response handler
function handleHttpResponse() {
  if (http.readyState == 4) {
    // Split the comma delimited response into an array
    document.getElementById('city').value = http.responseText;
  }
}
</script>

getHTTPObject() initializes the 'http' variable with an XMLHttpRequest object. A call to getCityFromZip() sets the request's http handler to handleHttpResponse(). It also starts a GET web request to:

   http://www.example.com/getCity.php?zip=[zipcode]

When the server answers, handleHttpResponse() takes over and updates the HTML element 'city' with the response from the GET request. In this example, the http response from the server is read directly. When you deal with complex data types an XML container might not be a bad idea.

How can you optimize your web-app? You can start by separating static and dynamic content. If static content is in a separate file it will be loaded only once, reducing data flow. You can get dynamic content with the XMLHttpRequest class described before. The same optimization can also be applied to JavaScript code. Consider creating a .js file for JavaScript code common to many URLs. Yet another optimization is to minimize the data flow of the dynamic requests: keep variable names short, keep URLs short. Try to bundle multiple dynamic requests to avoid HTTP overhead. Also, try to use HTTP GET requests, they have a smaller overhead than a POST (unless you have a lot of data). You can improve responsiveness by putting all user interface screens in a single .html file and using <DIV> styles to show only the one you currently need. It will take longer to load on the first time, but Safari caches content, so it will pay off soon. Final advise: enable gzip compression on the server, it helps when and if the browser allows it (Safari does). By following these guidelines, you will make many users happy.

The face of a web application

Now you know a little bit about the internals of good web-apps, but there is still something missing: the user interface.

It is unfortunate that so many developers disregard user interface design. Horrible, unintuitive apps are out there, and this is particularly true of mobile phone applications. I am sure you can make a difference. UIs are not just decor, they are what your users work with.

The iPhone screen

The iPhone screen is 320x480 pixels. At 160 pixels per inch, this is two by three inches. But HTML page width is not important, as iPhone's Safari is resolution independent (it adjusts page width automatically). It is nevertheless a good idea to limit HTML page width to 480 pixels, as this is the iPhone's largest native resolution.

You should also consider that your application can be viewed in either portrait or landscape mode. When viewed in portrait mode, an application gets approximately 320x355 visible pixels. In landscape mode, about 195x480 pixels are visible. When scrolling down, additional 60 or so pixels get available from the top of the title/address bar.

You should always choose font sizes that are easy to read in both portrait and landscape modes.

Controls

A great user interface is grandmother-proof. iPhone has one, so make no exception! A typical finger is 1/2 inch thick, so you should never pack more than 4 or 5 buttons in a row. The buttons should also be approximately the size of a finger.

When selected, text-entry fields open up the virtual keyboard. Consider resizing all HTML input elements so that they are easily accessible on the iPhone's screen.

In order to send an email from a form, link to a mailto: [email address] URI. At the time of this writing, this is unconfirmed, but most likely you can start a phone call by linking to a tel: [phone number here] URI (RFC 2806 standard).

Interaction

This is probably the most important, but also the hardest aspect to achieve, as it depends on the application. General guidelines are: keep everything as clean as possible. Never have more than eight user interface elements visible at the same time. The human brain is not good at dealing with more than eight things at once. You can use an <iframe> to emulate the iPhone's scrolling center part of the screen. Attempt to use the same symbols and logic as in the rest of the phone. Consider the flow of the different screens of your user interface. Is everything as simple as possible? Is it possible to accommodate your user interface so that users don't have to re-learn things they know from somewhere else?

Always keep asking yourself how your UI can be improved. And read Apple's Human Interface Guidelines, they are an excellent reference.

Eye candy

If you want to create a nice user experience, attempt to integrate your style with the iPhone's UI style. Split content and presentation with HTML/CSS (this will also reduce data flow). You can do pretty amazing animations in JavaScript. Check out this site for some examples: http://script.aculo.us/

An example under the spotlight

This article came to be because I was looking for an iPhone ssh client and simply couldn't find one. So, I started developing a Web 2.0 ssh client, as this was the one thing from keeping me buying an iPhone.

Luckily, I found the open-source Ajaxterm project. They were doing something similar to what I had in mind. Only the user interface had to be adapted.

So how does Ajaxterm work? It consists of a web client written in JavaScript, and a web server running in python. The web client periodically polls the server for screen updates. The web client also sends any key presses to the server.

What was needed to adapt Ajaxterm to the iPhone?

Ajaxterm gets key events through the JavaScript "onkeypressed" event. Unfortunately, this is not supported on the iPhone. Therefore, I added a text input control below the console screen, and several buttons for cursors, control and other special keys. The UI elements were arranged so the most common keys are close to where you actually work. The least used key combinations are hidden behind an alternative button control.

You can test the ssh client as well as download the source code at this URL:

http://www-personal.umich.edu/~mressl/webshell

What does the future hold?

In my opinion Web 2.0 (JavaScript + Ajax + XML + XHTML + RSS) is much more powerful than many believe. There are lots of limitations: no local storage, no access to iPhone's resources, limited computing resources, limited access to the multi-touch interface. But except for the applications discussed previously, I can't find a serious software limitation for iPhone.

Nevertheless, I hope that we will soon see a native iPhone software development kit. It will trigger a whole new generation of applications that we are not even capable of dreaming right now. Just imagine what a multi-touch controller with accelerometers and Bluetooth could do to a mobile game...


Marc S. Ressl is a senior developer in the cell phone business. He presently designs web applications using open-source technologies. He is also experienced in computer security and user interface design. You can reach him at mressl@umich.edu.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

Adobe Pepper Flash Player 32.0.0.142 - P...
Adobe Pepper Flash Player is a cross-platform, browser-based application runtime that provides uncompromised viewing of expressive applications, content, and videos across browsers and operating... Read more
Duet 2.0.5.0 - Use your iPad as an exter...
Duet is the first app that allows you to use your iDevice as an extra display for your Mac using the Lightning or 30-pin cable. Note: This app requires a $9.99 iOS companion app. Version 2.0.5.0:... Read more
Thunderbird 60.5.1 - Email client from M...
As of July 2012, Thunderbird has transitioned to a new governance model, with new features being developed by the broader free software and open source community, and security fixes and improvements... Read more
OnyX 3.5.7 - Maintenance and optimizatio...
OnyX is a multifunction utility that you can use to verify the startup disk and the structure of its system files, to run miscellaneous maintenance and cleaning tasks, to configure parameters in the... Read more
Sketch 53.1 - Design app for UX/UI for i...
Sketch is an innovative and fresh look at vector drawing. Its intentionally minimalist design is based upon a drawing space of unlimited size and layers, free of palettes, panels, menus, windows, and... Read more
Vivaldi 2.3.1440.48 - An advanced browse...
Vivaldi is a browser for our friends. We live in our browsers. Choose one that has the features you need, a style that fits and values you can stand by. From the look and feel, to how you interact... Read more
Hopper Disassembler 4.5.6- - Binary disa...
Hopper Disassembler is a binary disassembler, decompiler, and debugger for 32- and 64-bit executables. It will let you disassemble any binary you want, and provide you all the information about its... Read more
Civilization VI 1.2.0 - Next iteration o...
Sid Meier’s Civilization VI is the next entry in the popular Civilization franchise. Originally created by legendary game designer Sid Meier, Civilization is a strategy game in which you attempt to... Read more
Parallels Desktop 14.1.2 - Run Windows a...
Parallels allows you to run Windows and Mac applications side by side. Choose your view to make Windows invisible while still using its applications, or keep the familiar Windows background and... Read more
Chromium 72.0.3626.109 - Fast and stable...
Chromium is an open-source browser project that aims to build a safer, faster, and more stable way for all Internet users to experience the web. Version 72.0.3626.109: A list of changes is... Read more

Latest Forum Discussions

See All

Everything you need to know to win in Kn...
Knights of the Card Table is a really clever, solitaire dungeon crawler that's not just crammed to the gills with monsters to fight and loot to find, it's also got one of the biggest hearts of any game we've seen on the App Store. We definitely... | Read more »
A quick beginner’s guide to Final Blade
Final Blade was developed by newcomer SkyPeople studio, with help from localisation guru Glohow. After two years exclusively in the hands of South Korean and Chinese players, the game is now celebrating its global launch. Hurrah! But if you’re a... | Read more »
The best games for iPhone and iPad that...
How is it already Thursday again? My oh my, doesn't time fly when you're playing the very best mobile games out there? We certainly hope it does, because we've gone ahead and written a list of what we think are the top 5 best games for iPhone and... | Read more »
Three games for iPad and iPhone to keep...
On Monday we told you that Apex Legends is, all being well, eventually going to end up on the App Store. That means you'll be able to play one of the best new battle royale shooters in months in the palm of your hand. However, it hasn't happened... | Read more »
Why you should be excited about Apex Leg...
You've no doubt heard of Apex Legends by now. It's a new take on the battle royale genre developed by Respawn, and published by EA. It went live on EA Origin, PS4, and Xbox One last week, and it's already been generating a lot of buzz around the... | Read more »
Epic fantasy RPG Final Blade celebrates...
Now is a great time for RPG fans the world over as Final Blade has, well, finally got its global release for iOS and Android. The grand-scale RPG developed by Skypeople Inc in association with Glowhow, the has been quite the hit over in Taiwan and... | Read more »
Airheart launches on Nintendo Switch, de...
You’d be forgiven for thinking a game about harpooning fish and fighting pirates would be set on the high seas. But the action in Airheart is entirely airborne. Following up on its PC and Playstation release last year, this award-winning game has... | Read more »
Innovative match-3 puzzler Ingot Rush ha...
Match-3 games are pretty darn popular on mobile, and with so many innovative takes on the core concept, it’s easy to see why. Today we present you Ingot Rush for iOS, a colourful, globetrotting adventure that brings plenty of its own fresh ideas to... | Read more »
The top 5 best games for iPhone and iPad...
It's that time again - Thursday has rolled around which means the latest batch of new mobile games has landed on the App Store. There's loads of them, like there always is, so we've taken steps to make sure you know which are the best games that... | Read more »
The top 5 best word games for iPhone and...
Word games can be a tricky genre to pin down. There are so many variations out there that sometimes it's hard to decide whether or not a game fits into the little pocket you're trying to push it into. That doesn't bother us though, because it's our... | Read more »

Price Scanner via MacPrices.net

B&H offers 2018 13″ 2.3GHz 4-Core Apple M...
B&H Photo has new 2018 13″ 2.3GHz Quad-Core Touch Bar MacBook Pros on sale for $150 off MSRP. These are the same MacBooks sold by Apple in their retail and online stores. Shipping is free: – 2018... Read more
President’s Day Weekend Sale: B&H offers...
B&H Photo has dropped prices on new 2018 15″ 6-Core Touch Bar MacBook Pros with models now on sale for $300-$400 off MSRP, starting at $2099. These are the same models sold by Apple in their... Read more
President’s Day Weekend Sale: New 2018 13″ Ap...
B&H Photo has new 2018 13″ MacBook Airs on sale for $100-$200 off MSRP this weekend, starting at only $1049. Shipping is free: – 13″ 1.6GHz/128GB MacBook Air Space Gray: $1099.99. $100 off MSRP... Read more
New Sprint promotion: Get iPhone 7 preowned f...
Sprint is offering the 32GB iPhone 7, preowned, for $3 per month when combined with a Sprint 18 month Flex lease. Offer is valid from 2/15/19 to 2/21/19. The iPhone cost is applied as a $9 bill... Read more
New Emoji Update Version 12.0 Another Example...
COMMENTARY: 02.15.19- A slew of 15 new emojis reflecting people with disabilities is forthcoming in the version 12.0 update for smartphone devices including the iPhone but whose idea was it in the... Read more
13″ 2.3GHz MacBook Pros available at Apple st...
In the market for a 13″ MacBook Pro and looking for the lowest prices you can find? Apple’s refurbished prices are the lowest available for each model from any reseller. An standard Apple one-year... Read more
People Profiles: This Apple Fan Owns A Collec...
FEATURE: 02.14.19- We Apple fans love almost everything that the Cupertino, California-based tech company doles out to the masses and one particular fellow who has amassed a complete personal... Read more
Update: Amazon now selling Apple Watch Series...
Get an Apple Series 3 Watch today for up to a massive $100 off MSRP at Amazon. That’s up from $50 off previously. Choose Amazon as the seller rather than a third-party, and note that Amazon stock... Read more
Adorama offers new 2018 15″ 6-Core MacBook Pr...
Adorama has new 2018 15″ 6-Core Touch Bar MacBook Pros on sale today for $164-$224 off MSRP. Shipping is free, and Adorama charges sales tax for NY & NJ residents only: – 2018 15″ 2.2GHz Space... Read more
Deal Alert! Get a 256GB 11″ WiFi Apple iPad P...
Amazon has the new 2018 Apple 11″ 256GB WiFi iPad Pro in stock today and on sale for $150 off MSRP. Shipping is free: – 11″ 256GB WiFi iPad Pro: $799.99 $150 off Their price is the lowest available... Read more

Jobs Board

*Apple* Mobile Master - Best Buy (United Sta...
**673204BR** **Job Title:** Apple Mobile Master **Job Category:** Store Associates **Location Number:** 001514-Hutchinson-Store **Job Description:** **What does a Read more
Geek Squad *Apple* Master Consultation Agen...
**673307BR** **Job Title:** Geek Squad Apple Master Consultation Agent **Job Category:** Services/Installation/Repair **Location Number:** 001011-Spulvda Read more
*Apple* / Mac Support Technician - CompuCom...
Previous Apple / Mac Support Technician Next **Ref No.:** 19-00493 **Location:** Richfield, Minnesota As part of a leading IT managed services specialist with more Read more
Operations Associate - *Apple* Blossom Mall...
Operations Associate - Apple Blossom Mall Location:Winchester, VA, United States- Apple Blossom Mall 1850 Apple Blossom Dr Job ID:1044618 Date:February 11, Read more
Cashier - *Apple* Blossom Mall - JCPenney (...
Cashier - Apple Blossom Mall Location:Winchester, VA, United States- Apple Blossom Mall 1850 Apple Blossom Dr Job ID:1042611 Date:February 11, 2019 Job Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.