(For more resources on iPhone JavaScript, see here.)

Introduction

The mashup applications allow us to exchange data with other web applications or services. Web 2.0 applications provide this feature through different mechanisms.

Currently, some of the most popular websites like YouTube, Flickr, and Twitter provide a way for exchanging data through their API's. From the point of view of the user interfaces, mashups allow us to build rich interfaces for our application.

The first recipe for this article will cover embedding a standard RSS feed information. Later in our application we'll delve into YouTube, Facebook, Twitter, and Flickr and build some interesting mashup web applications for the iPhone.

Embedding an RSS feed

Our goal for this recipe will be to read an RSS feed and present the information provided n our application. In practice, we're going to use a feed offered by The New York Times newspaper, where each item provides a summary and a link to the original web page where the information resides. You could also choose another RSS feed for testing this recipe. The code for this recipe can be found at code/ch10/rss.html in the code bundle provided on the Packtpub site.

Getting ready

Make sure iWebKit is installed in your computer before continuing.

How to do it...

1. As you've learned in the previous recipes, you need to create an XHTML file with the required headers for loading the files provided by iWebKit:

   <link href="../iwebkit/css/style.css" rel="stylesheet" 
     media="screen" type="text/css" />
   <scriptsrc="../iwebkit/javascript/functions.js" 
     type="text/javascript"></script>

2. The second step will be to build our simple user interface containing only a top bar and an unordered list with one item. The top bar is added with the following lines:

   <div id="topbar">
     <div id="title">RSS feed</div>
   </div>

3. To add the unordered list , use the following code:

   <div id="content">
     <ul class="pageitem">
       <li class="textbox">
         <p>
           <script src="http://rssxpress.ukoln.ac.uk/lite/
             viewer/?rss=http://www.nytimes.com/services/xml/
             rss/nyt/HomePage.xml" type="text/javascript"></script>
         </p>
       </li>
     </ul>
   </div>

4. Finally, you should add the code for closing the body and html tags and save the new file as rss.html. After loading your new application, you will see a screen, as shown in the screenshot:

   

5. If you click on one of the items, Safari Mobile will open the web page for the article, as shown in the following screenshot:

   

How it works...

For avoiding complexity and keeping our recipe as simple as possible, we used a free web service provided by RSSxpress. This service is called RSSxpressLite and it works by returning a chunk of JavaScript code. This code inserts an HTML table, containing a summary and a link for each item provided by the referenced RSS feed. Thanks to this web service, we don't need to parse the response of the original feed; RSSxpressLite does the job for us. If the mentioned web service returns the code that we need, you should only write a small line of JavaScript code referring to the web service through its URL and pass as a parameter the RSS feed for displaying information.

There's more...

For learning more about RSSxpressLite, take a look at http://rssxpress.ukoln.ac.uk/lite/include/.

Opening a YouTube video

It is safe to say that everyone who uses the Internet knows of YouTube. It is one of the most popular websites in the world. Millions of people use YouTube to watch videos through an assortment of devices, such as PC's, tablets, and smartphones. Apple's devices are not an exception and of course we can watch YouTube videos on the iPhone and iPad.

In this case, we're going to load a YouTube video when the user clicks on a specific button. The ink will open a new web page, which allows us to play it.

The simple XHTML recipe can be found at code/ch10/youtube.html in the code bundle provided on the Packtpub site.

Getting ready

This recipe only requires the UiUIKit framework f or building the user interface for this application. You can use your favorite YouTube video for this recipe. By default, we're using a video provided by Apple introducing the new iPad 2 device.

How to do it...

1. Following the example from the previous recipe, create a new XHTML file called youtube.html and insert the standard headers for loading the UiUIKit framework. Then add the following CSS inside the <head> section to style the main button:

   <style type="text/css">
     #btn {
       margin-right: 12px;
     }
   </style>

2. Our graphical user interface will be completed by adding the following XHTML code:

   <div id="header">
     <h1>YouTube video</h1>
   </div>
   <h1>Video</h1>
   <p id="btn">
     <a href="http://m.youtube.com/watch?v=Z_d6_gbb90I" 
       class="button white">Watch</a>
   </p>

3. After loading the new application on your device, you will see a screen similar to the following screenshot:

   

4. When the user clicks on our main button, Safari Mobile will go to the web page of the video at YouTube, as shown in the following screenshot:

   

5. After clicking on the play button, the video will start playing. We can rotate our device for a better aspect ratio, as shown in the following screenshot:

   

How it works...

This recipe is pretty simple; we only need to create a link to the desired YouTube video. The most important thing to keep in mind is that we'll use a mobile-specific domain for loading our video to mobile devices. The URL is simply http://m.youtube.com, instead of the regular URL http://www.youtube.com.

Posting on your Facebook wall

The application developed for this recipe shows how to authenticate with Facebook and how to write a post on your public wall. If everything is successful, an alert box is used to report it to the user.

Although there are myriad complex applications with better functionalities that can be built for Facebook, we will focus on simple posting in this recipe. This application will only allow you to post on your wall. For this you need to hardcode your Facebook account for posting. This is to keep the recipe as simple as possible and to get a good understanding of all the complex processes involved in dealing with the OAuth protocol used by Facebook. However, thanks to this open protocol, it is easier to allow secure authentication of APIs from web applications.

Also, this recipe requires using a real Internet domain and a server with public access. Thus, you cannot test this application on your local machine. Our application needs to use a server- side language for which we'll use PHP. Currently, it's very easy to find hosting services for PHP applications. You can also find very cheap services for hosting your PHP code.

You can find the complete code for this recipe at code/ch10/facebook/ in the code bundle provided on the Packtpub site.

Getting ready

To bu ild the application for this recipe, you need to have a public server with an Internet domain linked to it. Also, you must install a web server with a PHP interpreter and have the UiUIKit framework ready to use. You need to install the cURL library, which allows PHP to connect and communicate to many different types of servers. Two interesting resources for this issue are:

• http://www.php.net/manual/en/book.curl.php
• http://www.php.net/manual/en/curl.setup.php