• Finally got around to updating this blog to 2014. Now, if only I could find some time to do some actual blogging. Who knows, this new design might just inspire me.

How to debug REST/JSON services

I recently had to write a webservice in PHP that were to be used by iPhone/Android apps to post data and images to. With standard HTTP POSTS I’ve usually just created a quick dummy html to post data to the server to test, but this time I had to do some research on how to quickly test the services while developing… Just writing it down here so I don’t forget :-)

cURL to the rescue

So, let’s say I have a service that requires a session_id, title and comment_text. This can be called from the command line with cURL like this:

curl -X POST -d '{"session_id":"2399024390","title":"This is my title","comment_text":"Some text"}' http://example.com/api/method

You’ll get the response on the command line right there so it makes it quick to debug stuff while developing.

What about posting files?

I had a challenge where one of the services were to accept a base64_encoded image in the JSON post, so the simple curl example above wouldn’t suffice. My friend Frode had the idea of using PHP on the command line to save the JSON request array to a file and then posting that request using cURL afterwards. That did the trick!

So, to create the JSON array to POST to the server I ran this PHP code:

php -r 'file_put_contents("json.txt", json_encode(array("session_id" => "3d6e4871170d4c1c2d91a18264904587b2c8ee0d","image_caption" => "This is an image","sender_email" => "[email protected]","sender" => "My nick", "image_base64" => base64_encode(file_get_contents("gmail.png")))));'

Notice the “image_base64″ key in the JSON array there. The server expects to receive a base64 encoded binary image (this is how I got it from the apps that were interacting with the webservice). So that code would read gmail.png which was located in the same folder, base64 encode it and add it to the JSON array.

With a complete JSON array all that remained was the actual POST:


curl -X POST -d @json.txt http://example.com/gallery/api/image/post

And the server returned {“status”:”ok”} and all was well!

There are probably better ways and some awesome tools for doing this out there so please hit me with those in the comments ;-)

Minimal HTML5 iPad Offline Cache Test

I just pushed a HTML5 template called “Minimal HTML5 iPad Offline Cache Test” to github:

https://github.com/bjornbjorn/minimal_html5_offline_test

Basically it’s a demo of a simple webpage that can be cached offline on an iPad. It also contains the meta tags required to make it work as a so-called “webclip”, that is you can add it to the homescreen on an iPad and it will open in fullscreen without the URL bar at top and without any other safari elements.

You can try out a demo here: http://dev.bybjorn.com/ipadoffline/

Testing the demo

To test it on your iPad navigate to the demo and click the icon with the arrow to the left of the URL bar and then click “Add to Home Screen” in the menu:

After that you should see the icon on your homescreen:

The Minimal HTML5 Offline Cache Test added to homescreen


Click the icon and it should look like this:

Sweet. No trace of Safari – it looks like a native app (or it could if we just styled it).

Now, let’s test it offline. Set your iPad in “Airplane mode” and click the icon again to test. You should see this:

Don’t worry, that popup means that everything works. You’re in offline mode, so Safari is not able to cache anything. You’ll find the code for listening to these window.applicationCache errors in offlinetest.js .. you do not have to load that file if you do not want to.

If you’re not able to use the page linked above offline on your iPad the problem is most likely with your iPad.

Troubleshooting – what if it does not work

The template above should work, if it doesn’t work something is most likely wrong with either your iPad or your webserver (or your files..)

Here’s some quick troubleshooting pointers:

  • If the demo page does not work for you, try upgrading your iPad software. I was running 4.2.2 and had problems getting offline caching to work but after upgrading to 4.3.5 everything worked perfectly.
  • If the demo works, but it does not work when you upload on your own server, it might be that the .htaccess does not work on your server so that the cache.manifest file isn’t getting sent to the browser with the “text/manifest” mime-type. Try out the manifest validator.

Also, note this (from “Dive Into HTML5″):

The first is something you just read, but I bet it didn’t really sink in, so here it is again: if even a single resource listed in your cache manifest file fails to download properly, the entire process of caching your offline web application will fail. Your browser will fire the error event, but there is no indication of what the actual problem was.

Download the files from github: https://github.com/bjornbjorn/minimal_html5_offline_test

Good luck! :-)