In the last week Twitter did something interesting in order to quell the increasing noise from mobile and desktop app developers, that was – introducing xAuth to the wider web. Back in early February the Twitter API team announced the new xAuth authentication mechanism. Twitter hope it will fill the void of terrible user experiences mixed with web contexts into desktop and mobile apps experienced when using current authentication preference, OAuth.

Basic Authentication

Back when Twitter first launched it’s API they had what’s called Basic Authentication. A user of the API had to make all API calls directly with their username and password. iPhone apps such as Tweetie, Twitterrific and Birdfeed all use basic authentication. I myself used basic auth in Chirpie when I launched it 1 week ago.

From a dev perspective, basic auth is really simple – just make sure you store the username and password for an account, and re-use on every API call. However, Twitter deemed that from a security perspective, it wasn’t a great idea to be using the user’s credentials every single time they interacted with the API, they therefore decided to use OAuth. In addition, it’s required for any application that uses basic auth to store the username and password for re-use between sessions. Another no no apparently…

OAuth

I won’t go into the deep details of OAuth, but the basic premise is this, an application gets a request token, and sends the user off to the source website (in this case Twitter) for a set of authorized tokens which it gives back to the application, and subsequently uses to exchange with the API instead of the user:pass :

OAuth Process

The problem with this is the “via web” part. For mobile and desktop apps, you have to leave the comfort of your application, and into a web interface in order to authorize the request. In addition to this, Twitter penalised anyone using basic authentication by stopping them from publishing their application name unless using OAuth (hence the developer outcry for some months). Example:

Twitter Basic Auth Vs OAuth/xAuth

It’s worth noting here, that in the old days basic auth apps could publish tweets using “via application name“, however early in 2009 Twitter stopped accepting registrations for basic auth applications, which is why some basic auth apps still come from their app name, like Tweetie, where more recent ones come from “web”.

On iPhone, leaving the comfort of a native app into a web interface (which was until recently not optimized for mobile) was a huge loss – therefore most iPhone devs from recent times opted for basic auth in order to keep a good user experience.

Enter xAuth

So xAuth is here to save the day… xAuth takes some fundamentals from OAuth in the sense that you still use your authorised tokens to interact with the API, however it’s the process of getting that set of authorised tokens that has changed. Basic auth developers can now exchange the username and password of their users for an authorised token set in one API call. No web interface required. Essentially:

xAuth Process

This stumps alot of people at first, there’s no process involved to get a request token, that’s all out of the door – it’s simply get the user’s credentials, make an API call, receive authorised tokens in return.

The downside of this is that the application is interacting directly with the username and password (in the same way basic auth did), so in essence is losing a large chunk of the security effect of OAuth (OAuth apps never see the username and password of the user directly, only the tokens).

There are alot of arguments around the web on the effectiveness of xAuth – to me it seems like its just basic authentication with a bit of extra security because each API call isn’t using the user:pass every time – in fact, to even associate it with OAuth for me is a little bit crazy.

That said, I am extremely happy. As a recent iPhone app developer, I was gutted to find that I could no longer register Chirpie as a basic auth app with Twitter, and subsequently couldn’t promote the use of it within Twitter unless I used OAuth.

Using xAuth

Using xAuth couldn’t be simpler actually. First off though, you need to send an email to api@twitter.com and ask them to register your OAuth application to use xAuth. Once approved (you’ll get an email at time of writing) you make a call to the API method “https://api.twitter.com/oauth/access_token” and simply send it 3 parameters:

• x_auth_username -  The username of the user.
• x_auth_password – The password of the user
• x_auth_mode – Set this value to “client_auth” (without the quotes).

This one method then returns you the authorised access tokens in the same way the same method does for OAuth. You should store the tokens as they do not expire, and reuse the tokens for any subsequent API calls. The password can effectively be forgotten after the authorised access tokens are received (unless you need them for third party sites such as TwitPic etc..).

It really is that simple, just one step. As long as you remember this key point (that it’s one API call, no request tokens needed etc), you will be setup really quickly. The Twitter documents aren’t so clear on this, and hopefully they will clarify a bit better shortly.

I managed to get xAuth implemented into Chirpie in about an hour, and submitted to the App Store. Such a small change, which I hope will make a huge difference to the effectiveness of Chirpie in Twitter.

Update – xAuthTwitterEngine

For those hoping to get xAuth working on an iPhone, Aral Balkan has just launched xAuthTwitterEngine, which is an update to the excellent MGTwitterEngine from Matt Gemmell, via an OAuth implementation of that by Ben Gottlieb.

I haven’t used xAuthTwitterEngine in Chirpie, however my implementation was exactly the same, a re use of Ben’s OAuth code, removing the web authentication interface and replacing with a user:pass API call. I just wasn’t brave enough to release it to the world as I’m still learning! Anyway, have fun!

Yes folks, one week after the launch of Chirpie 1.0, version 1.1 is now in the App Store to download. This update brings a few nice features and fixes:

• New clean and awesome Tweetview UI
• Added new control to switch status updates to Twitter, Facebook or Both.
• Application now remembers if you enabled/disabled twitter in tweet view.
• Added ability to paste an image and upload from the clipboard
• Added direct link to Chirpie Pro in the App Store from Chirpie (free) version.
• Added ability to follow @ChirpieApp from the about page.
• Fixed bug with mis-placed facebook button in turbo mode.
• Fixed memory bug when exiting out of camera would sometimes break tweet view.

New Interface

Chirpie 1.1 Interface

Chirpie has been updated with a really nice, clean interface with the help of Nicolas Thomsen. Nicolas runs apporacle.com, check out the site for some great examples of Nicolas’s work.

As part of the redesign, the bottom buttons have been given a brand new glassy look, with the scrolling avatars sitting nicely on top. We’ve also added a new central section with a brand new control, the service switch.

The service switch was an idea from @jonguntrip, allowing users to send to Twitter, Facebook or both. The app now remember where you left the toggle, except if you left it on Facebook only. This will always default back to both.

Paste Images form Clipboard

Also another brand new feature with Chirpie 1.1 is the ability to paste images from the clipboard. Either by setting the app to auto paste on launch, or by selecting the Photo button, you are now able to paste any PNG or JPEG image that is on the clipboard.

This means you can effectively copy any image from any application, and paste it into Chirpie. Once pasted, the app automatically uploads it to YFrog or TwitPic (depending on your prefs). All seamless, nothing for you to worry about!

Pimp Chirpie

Thanks to everyone for the support on Chirpie so far – and letting your friends know how awesome it is! We’ve had well over 1000 downloads already in the past 7 days – it’s been excellent to work with you all. As always, get in contact with us via @ChirpieApp on twitter for the latest news on Chirpie, and to let us know about features and feedback.

Chirpie 1.1 (free version) is available from the App Store here.

Chirpie Pro 1.1 is also available from the App Store here.

Cheers! – Chirpie Team

This is it folks, the day we’ve all been waiting for, the day Chirpie for iPhone makes it to the App Store!

Chirpie 1.0 comes in two versions, a free app simply called “Chirpie“ which is feature complete, but limited to 1 Twitteraccount and 1 Facebook account. The second version is called “Chirpie Pro“ which is exactly the same, however you can add as many Twitter accounts as you wish. Chirpie Pro is priced at $0.99/59p.

The Chirpie Interface

Chirpie for iPhone lets you dual update, meaning you can send a status update to both a Twitter and Facebook account at one time, or just Twitter if you’re that way inclined.

To coincide with the launch of the application, we’ve also launched a refreshed chirpieapp.com which features everything you need to know about Chirpie – including screenshots, feature list and FAQs.

Chirpie (free version) is available from the App Store here.

Chirpie Pro is also available from the App Store here.

Any problems, please contact us on support[at] chirpieapp.com or via our twitter account @ChirpieApp.

Chirpie 1.1 is currently in the works, with version 1.0.1 about to hit Apple sometime in the next day or so.

Followers of my Twitter feed will have yesterday seen that I am very close to launching a new Twitter client for iPhone, called Chirpie (see chirpieapp.com). So what is Chirpie? Will it beat the skitch out of Twitterrific, Tweetie or Echofon? The short answer is not just yet, the longer answer is this:

Chirpie has been developed with one simply idea in mind:

Empower the user to tweet quickly, do it simply, let it have flexibility.

With this simple notion as the backbone of the app, I’ve developed something which I find a bit of a gem. An app that lets me tweet pretty much instantly. No heavy waiting sessions whilst you wait for a Twitter timeline to load, no navigating through views to get to the tweet window.

Sounds simple right? Well, it kind of is, but it has some nice twists:

• An intuitive way to reply to friends, and handle new friends.
• Quick access to common functions such as the Camera, URL shortening, Geo Tweet etc
• Tweet Persistence, when switching accounts, and when leaving the app
• Pasteboard functionality to speed up your flow
• Advanced app settings, one being switching Chirpie into Turbo-Mode

You’ll be able to tweet straight off the bat, send, done. Or, you can take some time, play with the toolkit, send or just save for later.

Chirpie has a simple, clean interface when tweeting, no buttons all over the place for all the different functionality with icons that make no sense, just one simple way to reveal what you need.

But this is just the start, I want Chirpie break free of it’s little egg – build on these foundations to bring a Twitter client with a difference. Let’s see how we go.

Beta Testers Required

So when can you get your hands on it? Well my friends, very, very soon. We’re currently looking for Beta testers, so head on over and friend us up on twitter (@ChirpieApp), or keep an eye on our teaser site http://chirpieapp.com for more. Spread the word about Chirpie and you may find your way up that list

And the sweet spot?

Chirpie will be a free download to all. Coming Soon!

Ajax is a wonderful technology that is heavily used in many places nowdays. Ajax is run in the browser using javascript to call a URL, and usually receive data back. One of the key restrictions of using Ajax to get data from a remote URL is that you cannot make cross-domain calls. This meaning, you cannot make an ajax call to domain1.com from domain2.com because of browser security restrictions. The workaround, is to make the cross domain ajax calls from your web server rather than the browser, and all is fine!

That was, until the introduction of JSON, and more importantly JSONP which allows you to make ajax calls to 3rd party domains from within the browser itself. What this means for you is that you can get data from JSONP supported APIs from within the browser itself, rather than telling your web server to do it for you.

This is also important for Twitter API usage. One of the key restrictions with the Twitter API is that any client IP address can only make x number of API calls per hour. If you’re making these API calls from your web server (which obviously only a static IP address), you could quickly use up your hourly allocation on a busy site. Twitter does allow you to “whitelist” your web application to give you a better hourly rate, but here’s a better way:

Use the clients, ie your users, to make the API calls from their browsers.

Admittedly, my example below is for any API calls that do not require authentication, however what it does enable you to do is to empower your user to make Twitter API calls in the browser using jQuery. So without further ado, here’s the code snippet:

$.getJSON("http://twitter.com/statuses/user_timeline.json?screen_name=SteveReynolds&callback=?",

function(data){

$.each(data, function(i,item){
$("#tweets").append(item.text + "<BR/>");

});

});

What the code above assumes is that you have a <div id=”tweets”> or something where you can append the results, in this case the object in the JSON response “item.text” which is the tweet itself. You could for example, get “item.user.name” which would return the username for each tweet (which is useless as you know it’s all my tweets ) – but you get the idea. You also need to make sure you have previously called the jQuery library.

The other important factor of the code above is the URL we are using to call Twitter. We have appended “&callback=?” onto the end of it. This is to allow the jQuery call to pass the returned data to a callback function, which in this case is simply called “data” for the returned data, and “function()” for the callback.

Download the code here.

So, that’s it. It really is that simple. In my next tutorial I will show you how to do the above, but ajax it back to your server and save it to your database – in effect getting your users to do a lot of the hard work for you in the browser, and simply sending back the relevant results to your database.

BuildABrand.com is a new online service available shortly which will empower you to create and develop your brand, be it for yourself, your company, or whatever. The basic premise is, you give the app a bunch of details about the brand, such as the industries it relates, plus other related info, and the app will quickly generate some brand designs (ie a logo and font design) for use anywhere you want, as well as some pre canned options which we’ll discuss later.

BuildABrand say that the ease and speed of creating a new brand is as fast and simple as registering a domain name. I’m gonna test that, so here’s how it works:

Step 1 – Related Industries

The first thing you have to give BuildABrand is some idea of what industries your brand relates to (that is, after you’ve told the app the name of your brand). The app uses a simple horizontal scroll navigation for you to cycle through the industry sectors. When clicking on a specific sector you are given various options within it to select.

The navigation is smooth and sleek, the icons have been well chosen, giving clarity to what you’re looking at.

I think one area I’d love to see modified slightly would be to allow you to see all the sectors you can choose from, rather than blindly scrolling through them, not knowing what’s coming next, and if it’s relevant. A minor tweak though

Step 2 – Some more detail about your brand

So next up is giving the app some more pointers around your brand, such as Tone, Style, Outlook etc. You select an image from each category which most relates to your brand, with additional helpful keywords explaining your choice to make sure it’s relevant. Very easy, and very quick.

Again, I think one minor tweak that could be made would be to label the images up with their names from the start (perhaps underneath, or as part of the image), so you can instantly see which images are more relevant to you in the gallery. Otherwise though, this is a pretty intuitive way to make your selections, no horrible forms to fill in, no drop downs etc – all easy to press buttons.

Step 3 – Choose a symbol

Now I get to choose a symbol out of a vast gallery presented to me. These symbols are recommendations from BuildABrand based on the decisions I had made in steps 1 & 2. As you can see in the screenshot above, I have 21 pages of 15 symbols, so the choice is quite large. That said, the designs are really good, the team at BuildABrand have worked with some talented folk to get some really interesting designs.

The navigation here works seemlessly with some lovely ajax goodness. It uses a similar effect to that of Panic’s Coda website. Horizontal scrolling is all the rage right now, and BuildABrand have implemented it well.

I am told that the gallery of symbols above is not limited, meaning that designers will be adding to the pool of symbols over time, so it should grow with more and more relevant results. The key for the development team will be to try and give the users enough choice over symbols, but not kill them with too much choice.

So anyway, you select a symbol, and move on. At this point you should ignore the colour scheme presented to you, that is coming up next

Step 4 – Select Colour and Font

The final piece to the puzzle is the font and colour scheme selections. Again, the selections and options presented to you are recommendations from BuildABrand which are most relevant to your brand and symbol you have previously chosen. You can spend 30 seconds here, 30 minutes, or hours depending on how picky you are about it – either way, you’ll have a preview in the middle of what your brand could look like instantly.

That’s it. It’s that simple. As long as you are clear in your mind what you want out of your brand, and what it is, using these 4 steps should give you something very sweet in a really small amount of time.

Brand Created.

What happens next is excellent, you get to see your brand in situ in various ways around the site, inspiring you with different ways you can use it. Banner ads on the site use your new logo and font – for example – one for creating business cards which is 100% relevant to you.

In addition to this, BuildABrand will soon offer WordPress templates pre-built for you with your brand and colour scheme, or you can simply go ahead and download your logo and use it wherever you want. With each download you use up credits, which is the way BuildABrand are monetizing the website.

Business Card Creator

As I said above, the stand out feature for me (well at this stage of the first beta anyway! There is much more to come!!), is the business card creator. The live previews of your business cards are brilliant, as you swap out designs for front and back, as well as adding information such as telephone numbers etc to the card – it’s all there for you to preview instantly.

I don’t think I can say much more about how cool this actually is, other than I seriously considered getting personal business cards at one point – they had me!! I think the only way I could possibly foresee an improvement here is for the ability to edit the information on the card inline, rather than through a web form.

Conclusion

At the start of this article I said I would test BuildABrand’s theory that creating a brand should be as quick and easy as registering a domain. My verdict? Domain registration should be this fun! The app met all expectations in this area, the 4 simple steps really were simple.

What’s really exciting about BuildABrand is the simple fact that this is just the start. Having the ability to build a brand, design business cards, build a wordpress blog template, all from one place is instantly an exciting prospect – and you did it all yourself. I can’t wait to see what the guys come up with next for the app.

If you haven’t already, sign up to get on the beta if you can – otherwise the site will be launching soon.

Follow @buildabrand on Twitter for more or check them out at http://buildabrand.com.

In the last few minutes Tweetie 2 has been released on the App store. It’s an immense update, some tweaks you may not read about:

• Edit your profile – Yes that’s right – you can actually edit your Twitter profile from within the app itself – this includes your profile pic!
• Search – This will bring in and sync your saved searches from twitter.com – excellent!
• Shortcut: Swipe a tweet from left to right for numerous options
• To refresh the timeline, goto the top of the feed, drag it down until a message appears and release:

Tweetie 2 Refresh Mechanism

• When adding a new tweet, click the character count for loads of options:

New Tweet Options

• You can search your entire feed spotlight style at the top of the feed:

Tweetie 2 Spotlight Feed Search

Download Tweetie 2 here from the Apple iTunes App Store.

Apple has today released the iPhone 3.1.2 version of their OS.

Details of the release included:

- Resolves sporadic issue that may cause iPhone to not wake from sleep
- Resolves intermittent issue that may interrupt cellular network services until restart
- Fixes bug that could cause occasional crash during video streaming

In addition to this there is also a AT&T carrier update file.

I’ve just installed it, there doesn’t seem to be much difference to anything else – maybe it’s snappier

Today I am kick starting a new experiment, replacing my RSS subscriptions with Twitter follows. Over the past few months I’ve begun following various interesting people, my Twitter feed getting more and more rich with content that I am interested in. Really using it as a source of what’s going on in the technology industry rather than a way to communicate, but anyway….

When running through my RSS feed subscriptions I found that around 80% of them are on Twitter in one shape or another, as well as publishing said RSS content in their own Twitter feeds. With that, I’m now effectively duplicating my subscriptions in Google Reader, and also on Twitter.

The difference though is Twitter is two way. Whilst some Twitter accounts are purely setup as one way publishing, most engage back with their user base which is something you just don’t get with RSS. Also, the viral power of Twitter feeds is huge compared to RSS – the sharing (retweeting) ability has an instant impact. I’m getting to the point now that I think using Twitter has a much richer experience for the user, and without a doubt far more engaging.

Therefore, I’m currently replacing all my rss feeds with Twitter follows. There are still gaps, some people still don’t use Twitter, or don’t publish their content via Twitter. You also lose the ability to read entire articles via twitter without clicking a link, but most of my subscriptions are only a preview anyway. It’ll be interesting, but hopefully a great time saver.

Very interested if anyone else is doing this?

Back in the early part of this year I posted an article around how to get MySQL data out of the database and into a web page via jQuery and Ajax. The tutorial was okay, but I made some rookie mistakes – specifically around the creation of XML data with PHP – This time, I hope to rectify that!

So this article will focus on getting data from a database using PHP, converting that to an XML document, and reading that XML in through jQuery via Ajax calls. Seems complex, but is in fact, very easy.

Database Design

This tutorial assumes you know how to connect to your database. It also assumes that you have a table setup called “people” with 3 columns: “title”, “firstname” and “surname”. Please enter some data into this table as it will be required.

The XML structure

So, the point of this tutorial is to read some XML with an Ajax call from jQuery, therefore we need to structure our data correctly. Here is an example of the structure our XML document will generate:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<people>
<person>
<firstname title="Mr">Steve</firstname>
<surname>Reynolds</surname>
</person>
<person>
<firstname title="Mr">David</firstname>
<surname>Grohl</surname>
</person>
</people>

I won’t go into anymore details other than that is what our PHP script will generate for us for each row entry in the database.

The PHP

First up, we’ll get the data from the database, and then iterate through each row result to generate the XML for that particular entry. We’ll do that by using the PHP function DOMDocument() which creates an XML document for us, and also allows us to add nodes and children to the XML on the fly.

$query = "SELECT title,firstname,surname FROM people";
$result = mysql_query($query);

$doc = new DomDocument('1.0');

// create root node
$root = $doc->createElement('people');
$root = $doc->appendChild($root);

while($array = mysql_fetch_array($result)) {

	// add node for each row
	$occ = $doc->createElement('person');
	$occ = $root->appendChild($occ);

	$child = $doc->createElement('firstname');
	$child = $occ->appendChild($child);
	$child->setAttribute('title', $array['title']);
	$value = $doc->createTextNode($array['firstname']);
	$value = $child->appendChild($value);

	$child = $doc->createElement('surname');
	$child = $occ->appendChild($child);
	$value = $doc->createTextNode($array['surname']);
	$value = $child->appendChild($value);

}

Next up we need to form that into an XML file. The way we do this is tell the PHP file to save the XML document with the saveXML() function, get the PHP script to respond with an XML type header, therefore anything that is echoed out will be interpreted by the browser as XML. So after the code above, add this:

$xml_string = $doc->saveXML();

header('Content-Type: application/xml; charset=ISO-8859-1');

echo $xml_string;

So, the header part tells the browser that this is an XML content type, and the rest is simply echoing out the XML data structure as mentioned previously.

Hopefully now, when you run that PHP script you should return a valid XML document…

Ajax with jQuery

The last piece to this puzzle is getting that XML data into an HTML page using jQuery and ajax. Again, it’s pretty easy to do, here is the basic HTML structure I am using for this tutorial:

<html>
<head>
<title>The HTML</title>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="thejs.js"></script>
</head>
<body>
<div id="container"></div>
<input type="submit" id="getData" name="getData" value="Get Data!" />
</body>
</html>

You need to obviously include the jQuery library, I am also including an external javascript file for our jQuery code. So go ahead and create a javascript file called thejs.js and put the code below into it:

$(document).ready(function() {
$("#getData").click(function(){
var data = "";
$.get("thephp.php", function(theXML){
$('person',theXML).each(function(i){

var title = $(this).find("firstname").attr("title");
var firstname = $(this).find("firstname").text();
var surname = $(this).find("surname").text();

data = data + title + " " + firstname + " " + surname + "<br>";
});
$("#container").html(data);
});
});
});

So this code is firstly wiring up a click event on a button, and then making a GET Ajax call to the PHP script we made earlier. Once it receives some XML data it iterates through each “person” node.

Notice, I am returning two different data sources from the XML, the data in between the <firstname> and <surname> tags, as well as also returning the data for an XML node attribute, in this case “title”. This doesn’t really make much sense in this context, but what it does show you is how you can access attribute information with the function.

Download

Download

So that’s it! You can see a working demo of this here. Download all the sourcecode by clicking the box icon on the left hand side. The code is fully working, you just need to add your database connection code to the PHP script. Feel free to leave feedback and comments in the section below!

Tools to help you learn…

Learning jQuery 1.3	PHP MySQL Development	jQuery UI 1.6