Chapter 12
Integrating with IOS Services
WHAT YOU WILL LEARN IN THIS CHAPTER:
- Tapping into IOS services and built-in apps within your app
- Sending email and SMS text messages
- Mapping href links to IOS services
One of the most intriguing ideas when creating a web app for IOS is integrating the application with core mobile services, such as dialing phone numbers or sending e-mails. After all, when you break through those inside-the-browser barriers, the application becomes more than just a web app and extends its functionality across the mobile device.
However, IOS service integration is a mixed bag; it’s a “good news, bad news” situation. On the upside, four of the most important mobile functions (Phone, Mail, SMS Messaging, and Google Maps) are accessible to the developer. On the downside, there are no means of tapping into other core services, such as Calendar, Address Book, Camera, Clock, Music, and Settings.
Also, the exact types of services available vary according to IOS device. iPhone includes all of these features, whereas iPad and iPod touch are both limited based on their device hardware capabilities (that is, neither offer phone or SMS capabilities).
MAKING PHONE CALLS FROM YOUR APP
Here’s a basic example to get your feet wet in the waters of IOS service integration. You can make a phone call from your application simply through a special telephone link. A telephone link is specified through the tel: protocol. The basic syntax is the following:
<a href="tel:1-507-555-5555">1-507-555-5555</a>
When a user clicks the link, the phone does not automatically dial. Instead, iPhone displays a confirmation box (see Figure 12-1) that enables the user to click Call or Cancel.
PHONE NUMBERS
Telephone links can go beyond ordinary numbers. iPhone provides partial support for the RFC 2086 protocol (www.ietf.org/rfc/rfc2806.txt), which enables you to develop some sophisticated telephone-based URLs. For example, the following link calls the U.S. Postal Service, pauses for two seconds, and then presses 2 to get a Spanish version:
<a href="tel:+1-800-ASK-USPS;pp2">USPS (Espanol)</a>
Note that p creates a 1-second pause, so pp causes a 2-second pause before continuing. Safari also automatically creates telephone links for you in your pages. Any number that takes the form of a phone number is displayed as a link. Therefore, if you ever have a situation in which you do not want to link a telephone number (or a number that could be interpreted as a phone number) then add the format-detection meta tag to the document head:
<meta name = "format-detection" content = "telephone=no">
For legacy support, you can also break up the number sequence using a span element. For example:
<p>Your ID is 5083212202.</p>
would become:
<p>Your ID is <span>5083</span>212202.</p>
TRY IT OUT: Creating a Call Link
For a demonstration of how to call from inside of your web app, use the following steps.
1. Create the following HTML document in your text editor and then save the document as BIDHJ-Ch12-Ex1.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>BIDHJ Example</title>
</head>
<body>
<h2>
Let's make a call.
</h2>
</body>
</html>
Code snippet Elements.xml
2. Add the following HTML code inside of the document body and then save the file:
<p>Apple: <a target="_self" href="tel:800-692-7753"
onclick="return (navigator.userAgent.indexOf('iPhone') != -1)">1-800-MY-APPLE</a>
</p>
<p>No one in particular: <a target="_self" href="tel:(765) 555-1212"
onclick="return (navigator.userAgent.indexOf('iPhone') != -1)">(765) 555-1212</a>
</p>
Code snippet Elements.xml
Figure 12-2 shows the page that displays.
How It Works
The a links use the tel: protocol in the href value. To degrade gracefully when running on iPod touch or iPad, the onclick handler ensures that the link works only if running on iPhone by evaluating the browser’s user agent string and checking to make sure that the string iPhone is located.
Then when the user presses the link, the telephone-enabled device launches the device’s Phone app, as shown in Figure 12-3.
Emails can also be sent from your application through links using the familiar mailto: protocol, as shown in the following example:
<a href="mailto:[email protected]">Jack Armitage</a>
If you’ve worked with HTML pages at all before, you are probably quite familiar with mail links. However, here’s what happens when an email link is clicked on an IOS device.
When the user presses this link, Mail opens and a new message window is displayed, as shown in Figure 12-4. The user can then fill out the subject and body of the message and send it. As you might expect, you cannot automatically send an email message using the mailto: protocol without user intervention. The mailto: protocol always takes the user to a new message window.
Following the mailto: protocol, you can also include parameters to specify the subject, cc address, bcc address, and message body. Table 12-1 lists these options.
TABLE 12-1: Optional mailto: Attributes
| OPTION | SYNTAX |
| Multiple recipients | , (comma separating email addresses) |
| Message subject | subject=Subject Text |
| Cc recipients | [email protected] |
| Bcc recipients | [email protected] |
| Message text | body=Message text |
NOTE Per HTTP conventions, precede the initial parameter with a? (such as? subject=) and precede any additional parameters with an &.
The mailto: protocol normally allows line breaks in the body attribute value using %0A for a line break and %0A%0A for a line break followed by a blank line. However, IOS devices ignore the %0A codes and put all the text on one line. IOS has a workaround, though, which is actually a pretty cool alternative. Read about the workaround in the following activity.
TRY IT OUT: Creating a Preformatted Email
For a demonstration of how to create your own predefined email in your web app, follow these steps.
1. Create the following HTML document in your text editor and then save the document as BIDHJ-Ch12-Ex2.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>BIDHJ Example</title>
</head>
<body>
<h2>
I am shy. I'd rather send an email than call anyone.
</h2>
</body>
</html>
Code snippet Elements.xml
2. Add the following HTML code inside of the document body and then save the file:
<p><a href="mailto:[email protected]">Blank Email to Jack</a></p> <p><a href="mailto:[email protected]?subject=Meeting&body=Dear Jack,<br/> I look forward to our upcoming meeting together <strong>this Friday at 8am.</strong><br/> Sincerely,<br/>Jason Malone&[email protected]">Reminder Email</a> </p>
Code snippet Elements.xml
How It Works
iOS enables you to embed HTML in your message body, therefore enabling you to add br tags for line breaks and even other tags (such as strong) for formatting. Combining several parameters, you can actually create your own canned email right inside the code.
When the page displays and the user clicks the Reminder Email link, an email page displays with all of the text and message settings. All the user needs to do is press the Send button. (See Figure 12-5.)
You can send SMS messages using the sms protocol in much the same way as you integrate email. For example, the following code launches the SMS application, addressing a text message to 765-545-1212:
<a href="sms:765-545-1212" onclick="return
(navigator.userAgent.indexOf('iPhone') != -1)">(765) 545-1212</a>
As Figure 12-6 shows, the user can enter the message using the keyboard and send it when finished.
Note, that as I did with Phone dial links, I added a check in the onclick handler to only jump to the SMS href link if the device running is an iPhone, not an iPod touch or iPad.
Alternatively, if you just want to launch the SMS app without a specific number to text, simply use a blank sms:.
<a href="sms:">Send SMS Message</a>
As you can see, with Phone, Email, and SMS support, your IOS web apps can support the normal capabilities of a contact management app. For example, suppose you combine each of these links into one page (BIDHJ-Ch12-Ex3.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>BIDHJ Example</title>
</head>
<body>
<h2>
James Armitage.
</h2>
<p><a href="tel:(765) 555-1212"
onclick="return (navigator.userAgent.indexOf('iPhone') != -1)">Call on phone</a>
</p>
<p><a href="mailto:[email protected]">Email message</a></p>
<p><a href="sms:765-555-1212" onclick="return
(navigator.userAgent.indexOf('iPhone') != -1)">SMS text</a></p>
</body>
</html>
Code snippet Elements.xml
Although Google Maps does not have its own custom href protocol, Safari on iPhone and iPad devices is smart enough to reroute any request to maps.google.com to the built-in Maps application rather than going to the public Google website. (On iPod touch, Safari links directly to the public Google website.) As a result, you can create a link to specify either a specific location or driving directions between two geographical points.
NOTE You cannot specify whether to display the map in Map or Satellite view. The location you specify displays in the last selected view of the user.
Keep in mind the basic syntax conventions when composing a Google Maps URL:
- For normal destinations, start with the q= parameter, and then type the location as you would a normal address, substituting + signs for blank spaces.
- For clarity, include commas between address fields.
Here’s a basic URL to find a location based on city and state:
<a href="http://maps.google.com/maps?q=Boston,+MA">Boston</a>
Here’s the syntax used for a full street address:
<a href="http://maps.google.com/maps?q=1000+Massachusetts+Ave,+Boston,+MA"> Jack Armitage's Office</a>
TRY IT OUT: Linking to the Maps App
How about rolling up your sleeves and diving further into the Maps integration? To do so, follow these steps.
1. Create the following HTML document in your text editor and then save the document as BIDHJ-Ch12-Ex4.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>BIDHJ Example</title>
</head>
<body>
<h2>
Route trip anyone? Let's go!
</h2>
</body>
</html>
Code snippet Elements.xml
2. Add the following Maps-related HTML code inside the document body and then save the file:
<p><a
href="http://maps.google.com/maps?q=1000+Massachusetts+Ave,+Boston,+MA+
(Jack+Armitage's+Office)">
Jack Armitage's Office</a></p>
<p><a
href="http://maps.google.com/maps?q=52.123N,2.456W">
Jack's Summer Retreat</a></p>
<p><a
href="http://maps.google.com/maps?saddr=
Holden+MA&daddr=1000+Massachusetts+Ave,+Boston,+MA">Directions To Office</a>
</p>
Code snippet Elements.xml
How It Works
As you can see, the example shows three different ways in which you can use Google Maps links in your web app.
When the address shown previously is located in Google Maps, the marker is generically labeled 1000 Massachusetts Ave Boston MA. However, as the first Maps link shows, you can specify a custom label by appending the URL with +(Label+Text). Figure 12-7 shows the updated label in the Maps app.
What’s more, instead of providing a street address, you can also get geeky with your GPS and specify a location using latitude and longitude coordinates as the second link demonstrates.
Finally, if you want to get directions rather than point to a spot on the map, you can use the saddr= parameter to indicate the starting address and daddr= parameter to specify the destination address, as shown in the third link.
Figure 12-8 shows the directions in the Maps app when that link is clicked.
NOTE Google Maps on its public website has an extensive set of parameters. However, except where noted previously, none of these are supported at this time. You cannot, for example, use the t= parameter to specify the Satellite map, the z= parameter to indicate the map zoom level, or even layer=t to turn on the Traffic display. The user needs to perform those steps interactively.
EXERCISES
1. When creating a web app that accesses IOS services, why would you want to identify the type of IOS device that is running the app?
2. What URL protocols should you use for the following links: a phone number, email message, and SMS message?
3. Do iPhone and iPod touch respond differently when a maps.google.com link is clicked in Safari? Explain.
Answers to the Exercises can be found in Appendix A.
• WHAT YOU LEARNED IN THIS CHAPTER
| TOPIC | KEY CONCEPTS |
| Making phone calls from your app | Use the tel: protocol for making phone calls. |
| Sending emails | Use the mailto: protocol for creating an email message and displaying the Mail app. Add optional attributes to your call to add a message subject, additional recipients (to, cc, or bcc), and message text. |
| Sending SMS messages | Use the sms: protocol for creating an SMS message and displaying the SMS app. Degrade gracefully on iPad and iPod touch. |
| Pointing on Google Maps | Plot an address or GPS location on a map and display it in a Google Map. |