An intro to RSS and how you can use it to do awesome things with mobile

We often get clients who want to create mobile applications such as walking tours, location-sensitive audio tours, or the like.

We’re going to, in this post, show you how you can do this, and help you ensure you have the skills to be successful in the endeavor.

The first thing that clients typically forget is that the data has to come from somewhere. If you want to make a walking tour of a city, there has to be some data about that city for you to give the mobile user. Often, that data has rights attached to it, by the author or publisher, so you can’t just go out and take it. This is one of the most overlooked facets of creating an app – the data does not just magically appear. All of that content about what restaurants to go to, or what monuments to see, etc., was created by someone, and if you use it, they’re going to want you to get their permission first. Maybe you want to take content from your website and put it into an iPhone app.

Assuming you can get access to the data, the next step is to transfer the data to the phone in some manner. RSS is a great way to do this. If you’ve never heard of RSS, you can learn about it here. Think of RSS as the “telephone line” that’s going to transport your data from a computer server to the phone. It keeps you from having to cram your whole site into a tiny mobile browser by letting us extract all the relevant information.

Next, you have to create an RSS feed. If you’re a little more advanced and you want to manually create an RSS feed, here’s a good tutorial for doing it (you’ll at the very least need HTML skills to do this). However, the absolute easiest way to create an RSS feed is just to use Wordpress.com to get a free blog. When you write blog posts, Wordpress will automatically create the RSS feed for you. Then you can pull that information into a cohesive application that is neatly packaged.

Next, you’ll need to display the RSS feed on the phone. Luckily, PointAbout can help you here. We’ve developed an RSS reader template that we can customize to taste. We can even make the RSS feed location aware. If you’re building your own RSS feed you’ll want to make sure you format it correctly for us. You should end up with a simple-to-use app!

Here, each relevant section or article on your site is listed as an item of content which the user can browse at their own leisure. When you select one of the listed items, you’ll get more in-depth content, like a complete article. This will most closely resemble articles as viewed on your site when using a computer.

It’s that easy to translate a well-organized webpage to a fast, useful, versatile application. And, with AppMakr, you can build an app just like this one, on your own, in 27 seconds. From there, we can meet with you on a consulting basis to customize your application with fonts, colors, icons, and unique functions that extend and reinforce your brand identity.

And if RSS is still too confusing, just contact us at right and we’ll set up a consulting project to take care of the details for you!

Python Exception Logging

This took me a little while to figure out so I thought I’d post it incase somebody else has the same issue.  Python has try/except blocks which allow you to catch and handle exceptions.  This is great however, what happens when you’re unsure the exception that is going to be throw?  And once its thrown and you have an idea as to what it is, how do you get more details? Here is the code to get it done:

try:

.
... your exception here
.
.
except Exception, ex:
logger.error("error:" + str(ex) )

Thats it.   The object ‘ex’ is of the super-type “Exception” but has a built-in type of something more concrete.  Python’s has a built-in Exception types documentation on their website here: http://www.wingware.com/psupport/python-manual/2.4/lib/module-exceptions.html

Pick up where iPhone and flash left off

Great methods used in webkit (available in iPhone safari browser) that allows users to achieve flash like animations. See more and some code in action @

http://www.maclife.com/article/news/css_animation_kick_flashes_butt_iphone

http://webkit.org/blog/324/css-animation-2/

Specifying animations is easy. You first describe the animation effect using the @-webkit-keyframes rule.

@-webkit-keyframes bounce {
 from {
   left: 0px;
 }
 to {
   left: 200px;
 }
}

A @-webkit-keyframes block contains rule sets called keyframes. A keyframe defines the style that will be applied for that moment within the animation. The animation engine will smoothly interpolate style between the keyframes. In the above example we define an animation called “bounce” to have two keyframes: one for the start of the animation (the “from” block) and one for the end (the “to” block).

Once we have defined an animation, we apply it using -webkit-animation-name and related properties.

div {
 -webkit-animation-name: bounce;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: alternate;
}

The above rule attaches the “bounce” animation, sets the duration to 4 seconds, makes it execute a total of 10 times, and has every other iteration play in reverse.

Now, suppose you want to party like it is 1995 and make your own super-blink style. In this case we specify an animation with multiple keyframes, each with different values for opacity, background color and transform.

@-webkit-keyframes pulse {
 0% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
 33% {
   background-color: blue;
   opacity: 0.75;
   -webkit-transform: scale(1.1) rotate(-5deg);
 }
 67% {
   background-color: green;
   opacity: 0.5;
   -webkit-transform: scale(1.1) rotate(5deg);
 }
 100% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
}

.pulsedbox {
 -webkit-animation-name: pulse;
 -webkit-animation-duration: 4s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-in-out;
}

The HTML Canvas tag

The relatively new HTML <canvas> tag in HTML5 is a great way to create scriptable graphics and animation in lieu of Flash on the iPhone.  It is currently being supported in the newest versions of Opera, Safari, Firefox and of course iPhone’s version of Safari.  Apple originally created the <canvas> tag to create  Dashboard widgets for Mac OS X but it worked so well it found it’s way into the HTML5 specifications.

The canvas tag allows a developer to do ray-casting using Javascript, animations and more complex image transformations such as rotations, translation and scaling than is originally allowed by javascript and HTML.  Since all this is part of iPhone’s Safari browsers its included in PointAbout’s springboard.

You can find examples of <canvas> here:
http://www.benjoffe.com/code/games/torus/
http://iterationsix.com/particle_fountain/particle_fountain.html

The tutorial from mozilla.org will help you get started:
https://developer.mozilla.org/En/Canvas_tutorial

How To Use the Camera Functionality With PointAbout’s Springboard

Using the camera functionality is very simple using PointAbout’s Springboard.  Using a few lines of javascript you can initiate the camera functionality.

initPA = function() {
Device.init();
Device.Image.uploadUrl = "http://www.example.com/upload_photo?";
Device.Image.callback = imageDoneUploading;
}

imageDoneUploading = function(response) {
document.getElementById("message_box").innerHTML = "Photo has been attached!";

}

Let’s review the code:

line 02:  Here we init the device and tells the Springboard to set device variables
line 03:  Define an upload URL which will accept the POST of the image selected by the user
line 04:  Tell PointAbout’s Springboard to send the callback message to the supplied function

line 07:  define the callback function which we assigned to the Device.Image.callback earlier.
line 08: once we get the callback tell the user the image has been uploaded.

Now thats almost all of it, except now we need to tell the Image controller class to allow the user to take a picture.

Device.Image.getFromPhotoLibrary();

That should bring up the Image picker from the photo library.  Thats it!

<body onload="initPA()" >

lastly we need to call our initialization function “initPA()” with the body’s onload.

Feel free to leave any comments or suggestions below.

Acquiring Location With the PointAbout Springboard

You can easily acquire location by using the PointAbout Springboard using JavaScript.

First import the interface script:

<script type="application/x-javascript" src="http://www.pointabout.com/static/mobile_interface/X.X/js/basic_interface.js"></script>

please make sure to change the X.X with the correct version number which has been given to you.  You code should look similar to the one below:

<script type="application/x-javascript" src="/static/mobile_interface/1.5/js/basic_interface.js"></script>

The javascript interface allows PointAbout’s Springboard to communicate with your webpage by passing messages using JavaScript.    Next we’ll create callbacks so that when the Springboard recieves an update in location from the phone it will be passed into your scripts.   This file can be hosted on either your server or you can keep calling the version on our server.

initPA = function() {

Device.init();
Device.Location.callback = updateLocation;
Device.Location.init();

}
updateLocation = function(lat,lon) {
currLat = lat;
currLon = lon;
}

So let’s take a look at what’s really going on.

line 1:  we’re creating a function that can be called on the document’s onload.
line 3:  Here we init the device and tells the Springboard to set device variables
line 4:  Set the callback function which is defined later.  This is the function that is called everytime the device recieves either a    new location for the device or a more accurate location.
line 4:  This will initialize the GPS radios on the device.  This may take a few moments since the radios are not always on so we can preserve battery life.

line 8:  Define a new function that is the callback for the location function.  The function will receive two parameters, lat and long.
line 9 & 10:  Assign the new lat and long to a variable to use.

<body onload="initPA()" >

lastly we need to call our initialization function “initPA()” with the body’s onload.

Feel free to leave comments below if you run into any problems.

Getting the Test App On Your Phone

iPhone Application Testing Requirements:

1. You must be running iTunes 8.0 or greater.
2. Your application can be tested on any iPhone, First Generation or 3G.
3. Your iPhone firmware must be up to date
4. We need your device id to load a test copy of your application. Here are steps to find your device id (you can SKIP steps 1-5 below by downloading an app called UDID from iTunes which will grab your ID and email it to us.  This is the easiest approach.  Otherwise, proceed below.):

(click on the images at left to enlarge)

Step 1: Connect your iPod Touch or iPhone to iTunes on your local computer

Step 2: Then make sure that you are looking at the Devices -> iPod / iPhone -> Summary tab screen.  It should look something like this…

Step 3: Click on the words “Serial Number:”  All of a sudden, this label and number will switch to read “Identifier: ” and a  really long number will all of a sudden appear. It will look something like this…

Test App Installation Instructions

Please watch the video above, and then read the instructions below!

After submitting your device ID (see above) we will email you a zip file containing your mobile application, to be installed in iTunes.  Note:  Apple didn’t make the process of testing non-public apps out very easy or intuitive, so follow these instructions carefully, and let us know if you need help. You should have received a zip file from us via email.  This zip file contains the application we’ve createdfor you.  First, unzip the file and find “[your_brand].app” within the unzipped folder (on a Mac this is usually your “Downloads” folder; on a PC it is wherever you set your zip program to send unzipped files, possibly your desktop). Open iTunes.  You should see a section on the left that says “Library”.

If you have a Mac: You will need to CTRL+Click on the application name (which will end with “.app”) and choose “show package contents”.  There will be a file called “embedded.mobileprovision”.  Drag just that file that into your iTunes library (pic at left).

If you have a PC: Click on the application (it’ll be a folder) and choose the file “embedded.mobileprovision” and drag just that file into your iTunes library (pic at left). Also, it’s very likely you may have to drag the “embedded.mobileprovision” file into iTunes two or three times. If you get an error after dragging the file in the first time, try dragging it in again several times until iTunes asks you if you “want to replace” the file. That’s when you know it’s worked.

Now, drag the entire “[your_brand].app” file (or folder, if you’re on a PC) into the “Library” section of your iTunes as as illustratd here above.  (At this point you might think it doesn’t make much sense that you had to drag the provisioning file separately into iTunes, when you’re dragging the whole thing into iTunes anyway, but that’s how Apple set it up!) Your application should now be in your iTunes Applications window. Now you’ll have to sync your iPhone with your computer to transfer the application to your iPhone.  Note that in iTunes, the application’s icon will not show up, but on the phone, it will. Note: These instructions are the same for the iPod Touch as the iPhone.

Very important: If you get an “app cannot be verified” error, try deleting the app in iTunes and repeating the process above.  95% of the time this will solve your problem.

Where can I learn about UI standards for iphone web development?