Skip to Content

Ok, so this is pretty much a cop-out blog 😀 . The solution is so simple it’s almost not worth blogging about. The key word here is “almost”. 😉

This is the fifth (I think!) blog in the series that Joanna Chan and I are putting together about our experiences and learnings in building a cloud based mobile app. Please check out our other blogs for more details.

RESTful APIs in SAP NetWeaver Cloud with a mobile device

Linking to and managing a mobile app using a simple solution in SAP NetWeaver Cloud

Building a cross platform hybrid mobile app with PhoneGap Part 1

Using OAuth as an alternate user authentication strategy for SAP NetWeaver Cloud

Whiteboards are awesome 🙂

As per my other blogs in this series I’ve thrown together a little video which explains with the help of some very badly drawn diagrams what I’m talking about in this blog. Again, I still haven’t figured out how to make SCN size the video decently, so you might need to open in it in a new window. http://www.youtube.com/watch?v=N_F8-isQJnc

What’s up?

Here’s the problem. We have our wonderful SAP NetWeaver Cloud based mobile app and we have published it to both the Apple App Store and Google Play. So how do we let our potential users know about it?

why use a qr code.png

(scan it I dare you!)

QR codes are quickly gaining acceptance as the de-facto method for quickly transferring small amounts of data to a device. They even have a built in web link standard allowing you to quickly redirect your user to a website.

Yes really this does happen

So the inevitable happens – I’ve broken the QR codes and hidden any identifiable details on these examples – but found them pretty easily on the web:

/wp-content/uploads/2013/01/bad3_178004.jpg

/wp-content/uploads/2013/01/bad2_178005.jpg

/wp-content/uploads/2013/01/bad1_178006.jpg

Behold a solution!

What we really want is just one QR code that redirects you depending on which phone you are using to scan it!

Now, I’m not the only one to think of this (indeed some people are making a business out of it) (NB linked post was only late Dec 2012, so perhaps people are only just thinking of it!) But when you’re a developer, there’s no need to pay someone else – especially not when you have a handy SAP NetWeaver Cloud nearby 🙂 .

What we need is some simple way to detect what type of phone the user is using and then redirect them.

User Agents

DonAdams.jpg

(image thank to Wikipedia – http://en.wikipedia.org/wiki/File:DonAdams.jpg)


Sounds like it should be some sort of secret business , but user agents are being used all over the web every day. They are, in the context of web browsers, the way in which a browser can inform a web page of what it is capable of displaying.

The user agent string of my desktop browser is, as an example :

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17

By checking the user agent string of a visiting browser, we can determine what type of browser it is.

JavaScript and determining your user agent string

Pretty much every browser that supports JavaScript, supports the navigator.userAgent property. It returns the user agent string of the browser. e.g. :

<script>
 alert("User-agent: " + navigator.userAgent);
</script>


Redirection

So if we have the user agent string and we can somehow use that to figure out what device we’re using, how do we then redirect?

Simple – we use some more JavaScript –

window.location.replace(newURL);

So let’s put that all together

First let’s build a target page for our QR code to direct to, in it we’ll call the JavaScript to check what phone type is being used, and if we can’t figure it out, redirect to a general website where the user can make the choice.

Here’s some example code that could be used by John Moy for his myHelp app

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>John Moy's myHelp App Redirect Page</title>
<script>
       function redirect() {
              var uA = navigator.userAgent;
              if (uA.indexOf("iPhone") != -1 || uA.indexOf("iPad") != -1) {
                     //iOS
                     window.location
                                  .replace("https://itunes.apple.com/au/app/myhelp-for-sap-professionals/id390887003?mt=8&uo=4");
              } else {
                     if (uA.indexOf("Android") != -1) {
                           // Android
                           window.location                        
                                    .replace("https://play.google.com/store/apps/details?id=com.johnmoy.myhelp");
                     } else {
                           // I don't know, redirect and let user decide
                           window.location.replace("http://www.johnmoy.com/myhelp/");
                     }
              }
       }
</script>
</head>
<body onload="redirect()">
       <p>Detecting device...
       <p>
       <p>
              If browser does not automatically redirect <a
                     href="http://www.johnmoy.com/myhelp/">click here.</a>
       </p>
</body>
</html>

Take this file and save it in your NWCloud project:

e.g.

redirect html file.jpg

Now deploy your application to the Internet in the cloud – you should have a URL for the page

e.g. http://wombling.com/John_Moy_apps.html

And now the QR code generation

Now we need to generate a QR code for this address. That is as simple as a Google search – or, just visit http://zxing.appspot.com/generator/

QR code generator.jpg

Press the generate button… and

/wp-content/uploads/2013/01/john_moy_app_redirect_178010.png

Have a scan – test it out 🙂

Disclaimers, ramblings, and wrap up

The above code, examples etc. are supplied with no guarantee to them actually being fit for use (although if you’ve just scanned the QR code and it works, there’s a reasonable bet that it does work 😉 ). Use at your own risk! If your name is John Moy and you want to incorporate this code and QR code onto your web site, please do! At some point in the future I’ll probably refresh the wombling.com website – don’t expect it to be there forever! Any errors, omissions or chocolate biscuit crumbs are mine and shouldn’t be taken as representative of the wonderful people who work for my amazing employer, who is so lovely as to give me the time to write these blogs (although it is actual 12:37am currently – but I did go to the beach today with my daughter…

SorrentoBeach.jpg

It’s nice to have an employer that’s flexible about these things 🙂 .)

This was a very simple blog which really didn’t demonstrate any particular SAP NetWeaver Cloud functionality, it just brought together some pretty well know web standards. But what you should be aware of, is the inherent flexibility that SAP NetWeaver Cloud has. Rather than hosting the redirect page on a random web server (like wombling.com 😉 ) it is a simple matter to tie your redirects into the same framework as the rest of your application. This makes it easier to maintain, distribute and update. This is what we’ve done for our time sheet mobile web application (as the apps haven’t yet made it to the various stores, I’ve demoed with John‘s instead. I’m sure he won’t mind 😉 . )

I’m loving 😘 the cloud and really enjoying writing these blogs about the various steps we’ve gone through to get our cloud based mobile application up and running. I hope you’re liking them too. I hope people don’t mind me posting this in the Cloud section of SCN – I think it’s most relevant there!

If you’ve got any comments, thoughts, suggestions about this QR code redirection or (heaven forbid) you’ve found an error in my code, please let me know.

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. Robin van het Hof

    Great blog, thanks for sharing!

    I have used the “QR-code redirection” approach in one occasion before, in order to determine — in Google Analytics — how many users entered a particular website via URL/Google etc, and how many used the scanned QR-code (and in addition from which type of device)

    (0) 
    1. Chris Paine

      Thanks Robin,

      yes, it would be a simple matter to tie this together with an AJAX call from the redirect page to store some stats… You could easily do that with NWCloud 🙂

      Glad you liked the blog – even if you already knew how to do it!

      (0) 
  2. John Moy

    Hi Chris,

    Thanks for this blog, the mention of my app (and apologies about the website … It’s over two years old and looking tired), and the advice on QR codes.

    I’ll be interested to see if my app downloads increase over the next couple of days!

    Cheers

    John

    (0) 
    1. Chris Paine

      No worries John, I was very happy that you let me use your application as an example, linking to Angry Birds just wouldn’t have been the same 😉

      Do let me know if you get an increase in hits!

      Cheers,

      Chris

      (0) 
  3. Simon Kemp

    Thanks Chris, I am enjoying reading your (and Jo’s) posts 🙂 . I recently watched a very informative podcast on QR codes that I’d like to share in case anyone wants to find out a bit more:

    http://twit.tv/show/security-now/382

    It covers the history and some of the basic features of these clever little codes (They have been around for 20 years or so I think). I was amazed at how much error correction could be incorporated into them, I think they said enough to allow nearly 60% of the code to be obscured/un-readable – but the code will still work.

    Cheers,

    Simon

    (0) 

Leave a Reply