Hi, my name is Timo Ernst and I am a web expert.

Posts Tagged ‘iPhone’

The perfect syncing solution for Android-based devices on Mac computers

Posted on: December 10th, 2010 by Timo

I own a HTC Desire for quite a while now (actually since it came out) and I’m still very happy with it – and YES, I used an iPhone before and I’d never trade it for my Desire. However, one thing that really annoyed me was that synchronization was not as smooth as on the iPhone, where you could just connect the device, fire up iTunes and that’s it. The reason for this is that HTC does not offer its software called “HTC Sync” for Mac computers (boooo, HTC!). Thus, I needed a decent synching solution for my Android phone that also works on a Mac.

The first attempt: DoubleTwist

So, I started googling around and the first thing that I found was DoubleTwist, which calls itself “iTunes for Android”. After giving it a chance for some days, I realized that this piece of software seems to be pretty buggy. Whenever I synced between my HTC Desire and the iTunes library, something went wrong, for example missing songs or even duplicates. To sum it up: It was unusable. On top of that, the integrated Amazon store, where you could buy and downloads songs from, is not available here in Germany. Epic fail, I’d say. At least it’s for free.

Salling Media Sync

After being disappointed by DoubleTwist, I had to manually sync my computer and smartphone by copying files between them. No need to say that this was definitely an unsatisfying solution. So, today I stumbled over a really nice tool called Salling Media Sync. It doesn’t include a music store. Instead, its only purpose is to sync your Android device to the iTunes library. Just what I needed, I thought and downloaded it right away. Installation was easy (since there is none). Just copy the *.app file to your application folder and that’s it. Once started, Media Sync instantly found my smartphone (wow!) and displayed some information about it (free disc space etc.). After selecting the media which I wanted to sync (music, podcasts, pictures) I pressed “sync” and that’s it. How easy is that? I was really impressed how simple Media Sync works.

The application itself is now available in the quick launch bar on the top right of your mac screen and automatically starts when the Mac has booted, so whenever you connect your Android device, Media Sync will check if synchronization is required and if yes, it will do that:

Costs

The basic version of Media Sync is free. You can just download and use it as long as you want. The only downside here is that whenever the application synchronizes your phone, it will copy all files, which is often not required and can take quite a while, especially if you carry a lot of gigabytes with you, like I do.
So, if you don’t want that, I recommend spending 15 EUR and purchase the full version which supports smart synching. That means, that Media Sync will only copy the files which are really necessary. This way, the whole synchronization process gets a lot faster.

I am really happy now with Media Sync. The 15 EUR are absolutely worth spending.

TwitterFacebookShare

Tutorial: A simple Twitter client with JQTouch

Posted on: August 4th, 2010 by Timo

Lately I have been doing a lot of coding for mobile devices, like iPhone or Android, but I was never really happy about the development environments. Objective C is a horrible and antique language while the Android SDK is quite nice (due to its Java roots) but does not give me the ability to create multi platform apps. So what’s left? Right. Web-technologies.

Luckily, I stumbled over a really nice framework called JQTouch which hat its roots in the JQuery library (as you probably already guessed). JQTouch enables the developer to create applications with some JavaScript and HTML usage without ever touching a weird iPhone compiler. It’s perfect for people who already have a decent amount of knowledge about these technologies and want to create mobile apps that run on multiple platforms.

In this mini-tutorial, we’ll create a simple Twitter app, which will display the tweets of a user. The final application is supposed to look like this:
JQTouch example screenshot of final version JQTouch example screenshot with twitter search results

All you need to create a simple application is:

  • JQuery
  • JQTouch
  • A text-editor or IDE of your choice. I like Netbeans due to its superior JavaScript support.
  • Apple’s Safari browser (Great for first tests since it behaves very similar to browsers on mobile devices)
  • The mobile devices you’d like to deploy for (for testing purposes)

Less blah, more code!

Let’s get started by creating the user-interface. This is entirely done in HTML. For the moment, you’ll neither need a lot of JavaScript, nor CSS. All you gotta do is:

  1. Create a simple HTML template
  2. Import the JQuery and JQTouch librarys
  3. Define the UI

A template that you can always use to start a new jQTouch project could look as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Hello, jQTouch</title>

    <!-- include JQuery through Google API => Always have the latest version -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript"> google.load("jquery", "1.3.2"); </script>

    <!-- import JQTouch -->
    <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>

    <!-- Import JQTouch default style (iPhone look). Replace the string "themes/apple" with "themes/jq" for a neutral (black) theme -->
    <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
    <link type="text/css" rel="stylesheet" media="screen" href="themes/apple/theme.css">

    <!-- JavaScript goes here -->
    <script type="text/javascript">
      // Fire up JQTouch
      var jQT = $.jQTouch({
        statusBar: 'black'
      });
    </script>

    <!-- CSS styles -->
    <style type="text/css" >

    </style>
  </head>

  <!-- UI definition goes here -->
  <body>
  </body>
</html>

Hello World!

This markup doesn’t show anything yet if viewed in a web-browser, so let’s start adding some “Hello world!”-style info to it:

<!-- A simple JQTouch layout consisting of two views -->
<body>
  <!-- "Page 1" -->
  <div id="theform">
    <div class="toolbar">
      <h1>TweetMe</h1>
    </div>
    <ul class="rounded">
      <li>Hello World</li>
      <li><a href="#tweets">Go to view 2</a></li>
    </ul>
  </div>

  <!-- "Page 2" - Will contain the tweets found -->
  <div id="tweets">
    <div class="toolbar">
      <h1>Results</h1>
      <a class="button back" href="#">Back</a>
    </div>
    <ul id="results_ul" class="rounded">
      <li>This is page 2</li>
    </ul>
  </div>

</body>

Now, replace the empty <body></body> tags of our template with this UI definition and put everything into a new index.html file (together with the required libraries), then open it in Safari and you should already be able to see a simple user-interface in iPhone-look. You can click on the 2nd entry in the list and it should bring you to the “results” view. Click the back button on top and you should return to the point where you started. This is all handled through the JQTouch framework. Cool, eh?

JQTouch example screenshot 01 JQTouch example screenshot 02

In the BODY tag, you should see two DIV definitions, where each represents one view. The first one will be used to display a simple form for the user in order give him the opportunity to enter a Twitter user-name (currently there is just a place-holder with a Hello-World string and a link but we’ll change that in a second). After the “hypothetic form” (which doesn’t exist yet) was submitted, we want the app to “smoothly” slide to view 2 where the result data will be displayed.
Each DIV has an inner DIV with class “toolbar”. This is the blue header at the top of each view which also holds the back button. If you don’t want it, you can just remove that tag but I’d recommend to leave it there.
Also notice that both DIV’s have an id. This is important in order to easily switch between views. You can do this by simply adding a link, which references the id of the view to target via its HREF attribute with a ‘#’ character in front. So if you want to switch to a DIV/view which has the id “myview”, you can simply create a link which looks like this:
<a href="#myview">Go to the view</a>.
DAMN, that’s easy, isn’t it?

Defining the Twitter UI

So, let’s get started and replace the “Hello World” stuff with some serious markup. First of all we’ll replace the <ul> element, which holds the “Hello world”-content, with an input field and a button:

<ul class="rounded">
    <li><input type="text" placeholder="User name" name="username" id="username_input" autocapitalize="off" autocorrect="off" autocomplete="off"></li>
    <li class="arrow"><a href="#tweets">View tweets</a></li>
</ul>

In order to give the “View tweets”-button a look as it could be pressed, the surrounding list element gets the class “arrow”. This will display a nice little arrow at the right of the screen.

Now, if you hit the link, the app smoothly glides to the 2nd view. Since it may take a few seconds to load all tweets, we want to display a loading message to the user here:

<ul id="results_ul" class="rounded">
  <li>Loading...</li>
</ul>

These modifications get us the final version of the user-interface:
JQTouch example screenshot 03 JQTouch example screenshot 04

Calling the Twitter service

That’s it for the moment with HTML. Now we need some application logic to call the Twitter REST service and retrieve the data of the user. In order to get this done, all we need to do is to fire up an ajax call to:
http://api.twitter.com/1/statuses/user_timeline.json?screen_name=USERNAME
The result will be a JSON object as described in the Twitter API documentation. For the ajax call, we’ll use JQuery’s built-in ajax() method.

In order to accomplish this, we first must attach a click listener to the “submit”-button so we can fire the ajax call. To do this, we add an id to the anchor like this:
<a id="submitButton" href="#tweets">View tweets</a>

Then, we’ll set an init function, which should be called once the body has loaded:
<body onload="init()">

Finally, inside the init function, we can attach the event listener:

/**
 * Will be called after all the markup in <body> was loaded
 */
function init(){
  $("#submitButton").bind(clickEvent, function(e){
    getTweets();
  });
}

If the link is now triggered, the method getTweets(), which I’ll explain later, gets called. You might have noticed that the the .bind(event, function)-method gets a variable called clickEvent instead of the usually used string “click”. The reason for this is that some touchscreen-based devices, like the iPhone for example, do not trigger the “click”-event. Instead, they use “tap”. Thus, it is important to check the user-agent of the browser and examine, which event should be fired:

// Determine if iPhone, Android or Desktop OS and setup the right click-event ("tap" vs "click").
var userAgent = navigator.userAgent.toLowerCase();
var isiPhone = (userAgent.indexOf('iphone') != -1 || userAgent.indexOf('ipod') != -1) ? true : false;
clickEvent = isiPhone ? 'tap' : 'click';

The variable clickEvent is now globally available and can be used whenever a click/tap event on a link must be triggered or catched.

Regarding the ajax call itself, there is an important thing you have to know about the so called “Cross Domain Policy”. This is a security feature, which lets the website you’re currently viewing not call remote urls which are running on servers from a different domain than the website you’re looking at. In other terms: We cannot directly call the Twitter API unless you can deploy your mobile application to Twitter.com. There are various ways to work around this. One is to use Flash, which can ignore the cross domain policy. Since we cannot rely on the fact that every user has a Flash plugin (especially the iPhone boys out there), we’ll go for a server-side solution by simply creating a proxy service using PHP which tunnels the ajax call and thus does the API call for us. Since the PHP file will run on the same server the mobile app runs on, we can call this script easily via ajax. Sounds complicated? It isn’t. Believe me.

(Note: Of course, you can use any other server-side technology of your choice like J2EE or ruby. I personally like PHP, so I’ll go for that one but any other language will do the job too.)

Now, let’s create a new file called service.php, which accepts a url parameter (the url to the Twitter API), calls it and then dumps the response back to its caller:

<?php
  $url = $_GET["url"];
  $handle = fopen($url, "rb");
  $content = stream_get_contents($handle);
  fclose($handle);
  echo $content;
?>

Now, we can call this script via the JQuery method ajax():

/**
 * Does an ajax call and retrieves the tweets of the user specified in the
 * input field "username_input"
 */
function getTweets(){
  // Show a loading message
  var results_ul = document.getElementById("results_ul");
  results_ul.innerHTML = "<li>Loading...</li>";

  // Get the username from the input field
  var username = document.getElementById("username_input").value;
  // Prepare the Twitter url, so it can be passed as a GET parameter
  var twitterUrl = escape("http://api.twitter.com/1/statuses/user_timeline.json?screen_name=" + username);

  // Do the ajax call
  $.ajax({
    url: "service.php?url=" + twitterUrl,
    // Callback (onsuccess)
    success: function(d, status, req){
      // Convert the JSON result to an array of tweets
      var tweets = eval('(' + d + ')');
      // Display the tweets
      showTweets(tweets);
    },
    // Error handler
    error: function(req, status, err){
      // Alert the user that something went wrong
      var results_ul = document.getElementById("results_ul");
      results_ul.innerHTML = "<li>An error occured. Tweets could not be loaded<br>"+status + ": " + err + "</li>";
    }
  });
}

If the ajax call fails, an error message is being displayed to the user. On success, the method showTweets(tweets) will be called passing over an array of tweets. We’re almost there! Can you smell it already?

The last step is simple. Just iterate over the result array and dump out the tweets:

/**
 * Outputs the received tweets to the user-interface
 * @param tweets The tweets as an array. Each element represents one tweet and can be accessed via tweets[i].text
 */
function showTweets(tweets){
  var results_ul = document.getElementById("results_ul");
  results_ul.innerHTML = "";

  if (tweets.length <= 0){
    results_ul.innerHTML += "<li>User not found. Please press 'back' and try again.</li>";
  }
  else{
    for (var i=0; i<tweets.length; i++){
      results_ul.innerHTML += "<li>" + tweets[i].text + "</li>";
    }
  }
}

Update: The "proxy-technique" shown here is not the only way to bypass the cross domain policy. Another possibility is to use JSONP, which allows ajax calls to services on other domains without any backend-service (Thanks to Luis for the hint!) through a technique which retrieves the JSON data by abusing the <script> tag, which seems to ignore the cross domain policy. However, if you choose to use this technique, you have to be aware about two things:

  1. The server must support JSONP. Twitter can handle it but you might encounter a service which cannot. In this case you'll have to fallback to a proxy solution as shown here.
  2. Since it is possible to do XSS attacks (= Cross site scripting attacks) through JSONP, it is strongly recommended to use jQuery's ajax() method by passing the additional parameter dataType: "jsonp". This will add JSONP support to the ajax call and also automatically evaluate the result as JSON, so no extra eval(data) is necessary! (I am not 100% sure if jQuery handles the XSS issue correctly when evaluating the JSON data, so be careful!)

Simulating a form-submit event

If you run your app now, you should already be able to see a first working result. Enter a Twitter username, hit "View tweets" and you should encounter a list of what that person had for breakfast today. However, if you just hit your enter key instead of clicking on the search-link, nothing will happen. That's because we haven't taken care of that yet, so let's get this done in order to make this thing perfect. The easiest way to do is to simply attach a listener to the input field and check if the enter key was pressed:

/**
 * Event-listener. Gets called if the user presses a button on his keyboard
 * in the input field.
 * @param keynum The pressed key (as an ASCii value)
 */
function keydown(keynum){
    // 13 = The ASCii value of the return key on your keyboard
    if (keynum == 13){
        $("#submitButton").trigger(clickEvent);
    }
}

Don't forget to register the listener:

<input onkeydown="keydown(event.which);" type="text" placeholder="User name" name="username" id="username_input" autocapitalize="off" autocorrect="off" autocomplete="off">

There are some important things you have to know about this:

  1. Don't use a <form> element because a) it won't validate and b) it simply won't work because ordinary form submit events reload the full page. We don't want that.
  2. In order to switch to view #2, you shouldn't do something like:
    window.location.href="#tweets";
    It will mess up jQTouch's navigation logic. Always define a link for this purpose and trigger it using the .trigger(event)-method.
  3. $("#submitButton").click(); will not work :-)
  4. It is important that you take care about this issue! Mobile phone users usually use a virtual keyboard. Once they entered a username, they often press "return". If you don't catch this event, nothing will happen and the virtual keyboard will remain while the visitor has to hide it manually and then press the "View tweets" link. This is a usability nightmare for sure.

The final app

If you now search for the user "timo_ernst" for example (or any other Twitter user), you should see some like this:
JQTouch example screenshot with twitter search results

Now, that was damn easy, wasn't it?
Check out the full running thing at http://www.timo-ernst.net/tweetme.
Download the full source as a ZIP file here.

To prove that this app runs across multiple platforms, I made a photo of it on iPhone OS 4.0 (right) and a HTC Desire with Android 2.2 "Froyo" (left):

jQTouch working on iPhone and Android

Am I the only one who thinks that the Desire's AMOLED display is truly magnificent? :-)

Note

I am aware of the fact that there is already a Twitter app out there for WebOS called "TweetMe". Since I just needed a quick name for this demo application, I choose the first best thing that came to my mind. Of course, this demo is not meant to be a real, commercial project. Its only purpose is to demonstrate the capabilities of JQTouch and not to be a competitor to WebOS TweetMe. If the author of that app is offended by this in any way, please contact me and I'll rename this thing. At the moment, I simply feel a bit to lazy :-)

TwitterFacebookShare

Please, HTC. Build me my perfect phone.

Posted on: April 10th, 2010 by Timo

Dear HTC,

this month I wanted to buy myself a new android smartphone.

After scanning the market for several weeks, I ended up with your HTC Legend and HTC Desire phones.

So I had to make a decision based on the pro and cons:

The Legend definately looks damn sexy. Its aluminium-body makes it feel like a rock-solid piece of art, but in the same time it comes to my mind that this phone would be a little lighter if made of plastic. Android 2.1 is great but since the Desire also comes with this version of Google’s operating system, this is not a plus.
The screen is a bit smaller compared to the Desire and the processor is 400 MHz slower, which leads to lack of fps when playing back Flash videos.

The Desire definitely has the better tech specs: A 400 MHz faster processor, more RAM and a bigger AMOLED display. That’s great. But although its case is made of plastic, it seems to be heavier and almost as thick as the Legend. But the biggest contra for me personally against the Desire is the design. That thing looks as it came directly from the 90′s. David Hasselhoff could have used it while driving KITT in an episode of Knight Rider.

So, please HTC. Since I don’t want to buy an iPhone, build a phone for me with the following specs:

  • Sexy and slim aluminium body like on the HTC Legend
  • The phone should be really slim (About the dimensions of an iPod Touch).
  • It should weight only about 80% of the current Desire’s weight
  • Technical specs (Processor, RAM, Display size, Android 2.1) should be the similar to the ones of the desire (or even better!).

I simply want a fast, light and slim smartphone that I can put into my pocket without the feeling of having an iron bar in there.

That’s all. Thank you very much HTC.

TwitterFacebookShare

Can’t wait for Flash CS5

Posted on: February 25th, 2010 by Timo

I absolutely hate programming in Objective C using XCode in order to deliver apps for the iPhone.

The upcoming Flash CS5 seems to make it possible to create Flash applications and export ‘em right into native iPhone apps. It’s really incredible.

I hope, this also works using the FlexBuilder/FlexAPI since I absolutely hate using the Flash Designer application.
Update: Seems like it’s possible but not recommended since Flex was optimized for desktop deployment and not for mobile devices. I really hope, Adobe’s gonna get this to work. Seems like they’re trying to fix this issue with a framework called Slider, which is expected to be released in an early version somewhere in 2010.

Can’t wait to get my hands on it!

TwitterFacebookShare

Why use Flash instead of HTML5?

Posted on: February 16th, 2010 by Timo

The golem.de guys had an interview with Adrian Ludwig, Flash Group Manager at Adobe Systems, and asked him what’s the benefit of the Flash platform compared to HTML5 and if Flash would ever come to the iPhone.

The answers are quite interesting.
After watching the video, I gotta say that Ludwig didn’t really have an answer to the question, what the benefit of Flash is (compared to HTML5). He mumbled something about “content-protection” (whatever he means by that), fast updating cycles (within 12 months?) and features which won’t be available even in newer versions of HTML (.. which would be?).

As much as I like to code using the Flex API, I think that the Flash Player has no future. It’s slow and has some serious security issues which makes it vulnerable for various exploits.

The only thing why Flash could be currently useful would be webcam support, but as far as I know, this feature has already been suggested for further versions of HTML.

So, at the moment I think that I’d more go for GWT instead of the Flash Builder to create Rich Internet Applications of any kind.

Update: Found the answer ;-)

TwitterFacebookShare