Ok, so this is pretty much a cop-out blog :grin: . The solution is so simple it's almost not worth blogging about. The key word here is "almost". :wink:
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 :smile:
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?
(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:
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 :smile: .
What we need is some simple way to detect what type of phone the user is using and then redirect them.
User Agents
(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.17By 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.
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/
Press the generate button... and
Have a scan - test it out :smile:
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 :wink: ). 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...
It's nice to have an employer that's flexible about these things :smile: .)
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 :wink: ) 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.moy3's instead. I'm sure he won't mind :wink: . )
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.
- SAP Managed Tags:
8 Comments
