(For more resources on iPhone JavaScript, see here.)
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.
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.
Make sure iWebKit is installed in your computer before continuing.
<link href="../iwebkit/css/style.css" rel="stylesheet"
media="screen" type="text/css" />
<scriptsrc="../iwebkit/javascript/functions.js"
type="text/javascript"></script>
<div id="topbar">
<div id="title">RSS feed</div>
</div>
<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>
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.
For learning more about RSSxpressLite, take a look at http://rssxpress.ukoln.ac.uk/lite/include/.
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.
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.
<style type="text/css">
#btn {
margin-right: 12px;
}
</style>
<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>
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.
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.
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: