|
By John Fronckowiak (john@idcc.net), President, IDC Consulting, Inc., and Clinical Assistant Professor, Medaille College
Amazon.com offers a variety of web services, collectively called Amazon Web Services, or AWS. Using AWS, developers get direct access to the same technology platform used by Amazon.com on its web sites. This article specifically focuses on mobile monitoring and administration of the Amazon Elastic Compute Cloud Beta (Amazon EC2™) and Amazon Simple Storage Service (Amazon S3) web services.
The Apple iPhone has been one of the most anticipated mobile computing platforms in years. It provides a web browser experience previously found only on traditional computing platforms. This article demonstrates the development of an Amazon EC2/Amazon S3 monitoring and administration application, optimized for the iPhone, using familiar web development tools—PHP and JavaScript.
iPhone Web Applications
Developing web applications for the iPhone is likely a familiar project for developers experienced with basic web development techniques. In fact, the development of the iPhone Amazon Web Services (AWS) Manager
web application uses technologies that should be familiar to any typical web application developer—PHP, JavaScript, and Cascading Style Sheets (CSS). PHP is the mechanism used to access the AWS management APIs for Amazon EC2 and Amazon S3. CSS and JavaScript provide the underpinnings of the familiar iPhone application user interface. These will be discussed in detail later in this article.
It’s important to note that the iPhone provides two mechanisms for Internet access: AT&T's EDGE network and, if available, wireless access. Because it is lightweight as a web application, the iPhone AWS Manager is designed to work using either type of connectivity, making it a truly mobile administration platform.
iPhone Web Development Guidelines
Developing web applications that are compliant with Apple's iPhone is really no different than developing other
traditional web applications. Relying on tried-and-true design practices, iPhone design guidelines include:
- Stick with web application standards, including HTML 4.01, XHTML 1.0, CSS 2.1 and partial CSS3, JavaScript, and W3C Document Object Model (DOM) Level 2
- Separate HTML, CSS, and JavaScript
- Use only valid HTML
- Avoid using framesets
- Include only the resources that are necessary for your application
All of the pages in the iPhone AWS Manager establish an iPhone viewport using the following tag:
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
One of the most important considerations when developing iPhone-optimized web applications is to understand the primary input device—namely, your fingers. With limited screen real estate and the imprecise nature of your fingers as pointing devices, the key to highly usable web applications for the iPhone is to keep the user interface simple. A key to optimizing the user experience in the iPhone AWS Manager is the selection of a user interface library, which I will discuss shortly.
iPhone Development Tools
A key to iPhone web development is having a great set of tools. Although the technologies used for the iPhone AWS Manager are tried-and-true, I chose the development tools specifically because they are iPhone-friendly. Two primary tools I used for development are Aptana and iPhoney.
Aptana
The Aptana integrated development environment (IDE) is an Eclipse-based, open-source development environment
designed for building web applications, with a focus on HTML, CSS, and JavaScript. Aptana includes an iPhone development plug-in that provides web developers with a set of tools that assist in the development of iPhone-optimized web applications. Aptana, which provides a free community edition, also offers a free iPhone development plug-in at http://www.aptana.com/iphone/. Using this plug-in, you can preview your iPhone applications, and the plug-in supports debugging and logging, as well. Aptana is a cross-platform, Java-based application.
iPhoney
iPhoney offers developers a pixel-accurate web-browsing environment in which to test their web applications. iPhoney is free and open source, and I used it to take all the screen shots of the iPhone AWS Manager in this article. iPhoney is a Mac OS X-only application.
iPhone User Interface Libraries
As I discussed earlier, a key to optimizing the iPhone AWS Manager web application is the familiar iPhone user interface. iUI is a JavaScript and CSS bundle developed by Joe Hewitt, the creator of Firebug (a Firefox web development plug-in that provides access to web development tools within Firefox). The iUI library provides an easy way for developers to create standard iPhone navigational menus for web applications. iUI functionality is provided to a web application simply by including the iUI CSS and JavaScript files in the page header; this is done on every page in the web application.
<style type="text/css" media="screen">@import "lib/iui/iui.css";</style>
<script type="application/x-javascript" src="lib/iui/iui.js"></script>
iUI does all of the heavy lifting for developers. iUI breaks down the user interface into simple, unordered HTML lists. Each menu item is an item of the unordered list. To provide the hierarchical menu effect, an item is linked to another unordered list on the same page, or on another page. The Set Credentials and Create Bucket forms are displayed at the top of the page when selected, leaving room for the iPhone virtual keyboard.
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<ul id="home" title="AWS Manager" selected="true">
<!— each menu item is a list item -->
<li class="group">Settings</li>
<li><a href="#creds">Set Credentials</a></li>
<li class="group">EC2 Management</li>
<li><a href="amis.php">Available AMIs</a></li>
<li><a href="instances.php">Your Instances</a></li>
<li class="group">S3 Management</li>
<li><a href="getbuckets.php">Available Buckets</a></li>
<li><a href="#bucket">Create Bucket</a></li>
<li class="group">About</li>
<li><a href="about.php">About</a></li>
</ul>
<form id="creds" class="dialog" action="<?php echo $PHP_SELF; ?>" method="POST">
<fieldset>
<h1>Set Credentials</h1>
<a class="button leftButton" type="cancel">Cancel</a>
<a class="button blueButton" type="submit">Save</a>
<label>Key:</label>
<input type="text" name="accessKey" value="<?php echo $HTTP_SESSION_VARS["AMAZON_KEY"]; ?>"/>
<label>Secret:</label>
<input type="text" name="secretKey"/>
</fieldset>
</form>
<form id="bucket" class="dialog" action="create.php" method="POST">
<fieldset>
<h1>Create Bucket</h1>
<a class="button leftButton" type="cancel">Cancel</a>
<a class="button blueButton" type="submit">Create</a>
<label>Name:</label>
<input type="text" name="bucketName"/>
</fieldset>
</form>
</body>
Amazon Web Services Management APIs
AWS provides complete APIs for the management and administration of its web services. All AWS products provide access based on SOAP (Simple Object Access Protocol) and REST (Representational State Transfer). If you're unfamiliar with the AWS APIs for Amazon EC2 and Amazon S3, I suggest reading the article "Introduction to AWS for PHP Developers" at http://developer.amazonwebservices.com/connect/entry.jspa?externalID=847&categoryID=100.
The iPhone AWS Manager web application builds on the PHP-AWS library developed in that article. The PHP-AWS library provides classes that give access to Amazon EC2 and Amazon S3 management methods. The iPhone AWS Manager specifically extends the Amazon EC2 class to provide additional information from the management methods.
Amazon EC2 Management and Administration
The iPhone AWS Manager application provides administrators with the ability to monitor and manage their Amazon EC2 and Amazon S3 accounts. Specifically, using the iPhone AWS Manager users can:
- View available Amazon Machine Images (AMIs)
- Create an instance by launching an AMI
- View the current status of launched instances
- Reboot an instance
- Terminate an instance
Viewing Available AMIs
When a user clicks Available AMIs on the main menu, a list of each available AMI is displayed. An Amazon EC2 object is created, and the available images are retrieved. For each image that is retrieved, an <li> item is created, which creates a new menu item for each available image. Note that a link is created for each item that calls run.php to launch the selected instance, and a parameter is included in the run.php URL, indicating the ID of the instance to launch.
<ul id="amis" title="Available AMIs" selected="true">
<?php
// create a new EC2 object
$ec2 = new EC2($HTTP_SESSION_VARS["AMAZON_KEY"], $HTTP_SESSION_VARS["AMAZON_PRIVATE_KEY"]);
// retrieve the images
$images = $ec2->getImages();
// images available?
if (count($images) == 0) {
echo "<li>There are no images available!</li>";
} else {
// loop through each available image
foreach ($images as $image_item) {
// when an image is selected - launch it!
echo "<li><a href='run.php?imageId={$image_item['imageId']}'>{$image_item['location']}</a></li>";
}
}
?>
</ul>
</body>
Viewing Instance Status
You can view launched instances when you click the Your Instances main menu item. The ID, state, and Domain Name Service (DNS) of each instance you have launched is displayed. A menu for each instance that has not been terminated is created; you can choose to either reboot or terminate the instance.
<body>
<ul id="instances" title="Your Instances" selected="true">
<li class="group">Instance ID // State // DNS</li>
<?php
// create an EC2 object
$ec2 = new EC2($HTTP_SESSION_VARS["AMAZON_KEY"], $HTTP_SESSION_VARS["AMAZON_PRIVATE_KEY"]);
// retrieve the available instances
$instances = $ec2->getInstances();
// are there any instances?
if (count($instances) == 0) {
echo "<li>There are no instances available!</li>";
} else {
// loop through each instance
foreach ($instances as $instances_item) {
// if it hasn't been terminated - provide a sub menu
if ($instances_item['state'] != "terminated") {
echo "<li> <a href='#{$instances_item['instanceId']}'>{$instances_item['instanceId']} // {$instances_item['state']} // {$instances_item['dns']}</a></li>";
} else {
echo "<li> {$instances_item['instanceId']} // {$instances_item['state']} // {$instances_item['dns']}</li>";
}
}
echo "</ul>";
// create a submenu for each instance to reboot and terminate
foreach ($instances as $instances_item) {
if ($instances_item['state'] != "terminated") {
// provide the reboot and terminate menu items for each non-terminated instance
echo "<ul id={$instances_item['instanceId']} title='Manage {$instances_item['instanceId']}'>";
echo "<li><a href='reboot.php?instanceId={$instances_item['instanceId']}'>Reboot</a></li>";
echo "<li><a href='terminate.php?instanceId={$instances_item['instanceId']}'>Terminate</a></li>";
echo "</ul>";
}
}
}
?>
</body>
Amazon S3 Management and Administration
In addition, the iPhone AWS Manager provides basic Amazon S3 management and administration. Specifically, using the iPhone AWS Manager users can:
- View available buckets
- Create a bucket
- Get the size of a bucket
- Delete a bucket
- Retrieve the contents of a bucket
- Delete an object in a bucket
Creating an Amazon S3 Bucket
When a user clicks the Create a Bucket menu item, the Create Bucket form is displayed. What is not shown in the iPhoney screen shot is that on the actual iPhone a virtual keyboard is displayed, which allows the users to provide a bucket name. The create.php page accepts the bucket name provided by the user, and calls the Amazon S3 create bucket method.
<body>
<ul id="create" title="Create Bucket" selected="true">
<?php
// create an S3 object
$s3 = new S3($HTTP_SESSION_VARS["AMAZON_KEY"], $HTTP_SESSION_VARS["AMAZON_PRIVATE_KEY"]);
// retrieve the bucket name
$bucket_name = $_POST['bucketName'];
// create the bucket
if ($s3->createBucket($bucket_name)) {
echo "<li>$bucket_name has been created.</li>";
} else {
echo "<li>Error creating $bucket_name.</li>";
}
?>
</ul>
</body>
Viewing Available Buckets
Clicking the Available Buckets menu item displays the buckets that have previously been created. For each bucket that is retrieved, a menu item is created, along with a submenu that provides the ability to retrieve the size of the bucket, delete the bucket, or retrieve the contents of the bucket. For each submenu the name of the bucket is passed as a parameter to the page.
<body>
<ul id="buckets" title="Your Buckets" selected="true">
<li class="group">Bucket Name</li>
<?php
// create an S3 object
$s3 = new S3($HTTP_SESSION_VARS["AMAZON_KEY"], $HTTP_SESSION_VARS["AMAZON_PRIVATE_KEY"]);
// retrieve the available buckets
$buckets = $s3->getBuckets();
// are there any buckets?
if (count($buckets) == 0) {
echo "<li>There are no buckets available!</li>";
} else {
// list each bucket - provide a menu link for each
foreach ($buckets as $bucket_name) {
echo "<li><a href='#$bucket_name'>$bucket_name</a></li>";
}
echo "</ul>";
// for each bucket
foreach ($buckets as $bucket_name) {
// create a menu for each bucket to retrieve the size, delete the bucket, and retrieve the contents
echo "<ul id='$bucket_name' title='Manage $bucket_name'>";
echo "<li><a href='size.php?bucket=$bucket_name'>Size</a></li>";
echo "<li><a href='delete.php?bucket=$bucket_name'>Delete</a></li>";
echo "<li><a href='contents.php?bucket=$bucket_name'>Contents</a></li>";
echo "</ul>";
}
}
?>
</body>
Bucket Management
When an available bucket is selected, the user can view the size of the bucket, delete the bucket, or view the contents of the bucket. For each content item, a menu item is created, providing the ability to delete that object through a call to the deleteobj.php page. The bucket name and item name are passed as parameters to the deleteobj.php page.
<body>
<ul id="contents" title="Contents" selected="true">
<?php
// create an S3 object
$s3 = new S3($HTTP_SESSION_VARS["AMAZON_KEY"], $HTTP_SESSION_VARS["AMAZON_PRIVATE_KEY"]);
// retrieve the bucket name
$bucket_name = $_GET['bucket'];
// get the contents of the bucket
$items = $s3->getBucketContents($bucket_name, str_replace("//", "/", "/$path/"), "/");
// is the bucket empty?
if (count($items) == 0) {
echo "<li>$bucket_name is empty.</li>";
} else {
// loop through each bucket item
foreach ($items as $item) {
// allow each item to be deleted
echo "<li><a href='deleteobj.php?bucket=$bucket_name&item={$item["name"]}'>{$item["name"]}</a></li>";
}
}
?>
</ul>
</body>
Conclusion
Apple's iPhone offers web developers a full-featured mobile platform for web application development. This article demonstrates how developers can use the iPhone to manage and monitor their Amazon EC2 and Amazon S3 resources, using very traditional web application development techniques. Certainly there are many ways the iPhone AWS Manager could be improved, and more features can be added. With that in mind, I've made the entire source code of the iPhone AWS Manager available in a Google Code Repository at http://code.google.com/p/iphone-aws-manager/. I look forward to working with the community to continue development of this project!
Learning More About AWS
This article highlights a few aspects of working with AWS. Here are a few more resources available to PHP developers to help you learn more.
Resources
About the Author
John Fronckowiak (john@idcc.net) is the President of IDC Consulting, Inc., providing consulting and technical writing. John is also a Clinical Assistant Professor in Information Systems at the Adult Learning Program of Medaille College (http://www.medaille.edu/alp). He is also the author of several books about programming, database design and development, and networking.
|
Sign in to the AWS Management Console
Create an AWS Account
