This post highlights a feature of Testpad that I think could be used a lot more across web apps in general - that of using QR codes as a convenient way to move a browser session from a desktop to a mobile. It’s fairly simple to implement and is surprising it's not used more.
The idea is mainly useful for web apps (as opposed to native apps) that have both a big-screen (laptop/desktop) version and a complementary small-screen (phone/tablet) version, and the problem is one of convenience when switching between the two.
Imagine using a web app on your laptop, all logged in and in the middle of some session. Then consider the steps needed to pick up this session on your tablet's browser:
- launch or switch to the browser
- enter the URL or load the bookmark (requires prior step of making a bookmark)
- enter username and password if not cached, remembering that this happens on a touch screen, often prompting with inappropriate spelling corrections
- navigate within the app to the item/action of interest
This can easily add up to dozens of taps and tens of seconds, i.e. it's fiddly and can be very frustrating.
Testpad’s solution
Testpad is a web app for writing and running checklists to help with the manual testing of software, especially in agile development environments. It's aimed at teams looking to do better than hacking a spreadsheet/wiki but without going for heavyweight “waterfall-inspired” Test Case Management.
The big-screen UI is for composing checklists with a slick keyboard-driven outline editor. These can then be stepped through by a human on either the same big-screen UI or on the complementary mobile phone/tablet UI.
For Testpad's users, the mobile UI makes for a very convenient way of separating the app that's under test from the app that's managing the test run.
Instead of getting the user of a mobile to login and then navigate to the relevant account/script/test run, Testpad offers a QR code as a shortcut from within the big-screen UI. The QR code contains a URL like:
https://<account>.ontestpad.com/script/2/run/1?auth=<token>
which, when loaded by the mobile browser, takes the user straight to the UI for running those tests.
Now, instead of dozens of taps, the relevant part of the mobile version of Testpad can be reached in as little as one tap - which is the tap required to launch the scanner app (and assuming the scanner goes straight to scan mode, like Optiscan does).
There are more screenshots of Testpad’s tablet and mobile UI if you scroll down a bit on the Testpad home page.
If you want to try this for yourself, take advantage of the free starter plan. Simply create an account, open the “Hello World” script and click on the QR code button as illustrated above.
Implementation Notes
The simplest way to use a QR code in your web app is to include a fixed code that acts as a mobile bookmark. Google search for “qr code generator” for several online services that can generate a static image of a QR code.
However, it’s more interesting if your app can generate dynamic QR codes that are specific to the current context and user of the app.
For several years now, the easiest option here has been to use Google’s Infographics API for QR codes. Simply serve an <img> element with a ‘src’ attribute pointing to this API, with the desired URL encoded as a parameter (along with other options). Sadly, Google have announced the retirement of this service in April 2015 (see the deprecation notice at the top of their page). Nevertheless, it might still be worth using this API for now because its integration is so quick, and replacing it with a DIY solution if the product/feature is proving its worth in a year or two.
Alternatively, for in-browser solutions, take a look at these JavaScript generators:
http://www.d-project.com/qrcode/index.html (renders as an image with a data URL)
https://github.com/jeromeetienne/jquery-qrcode (renders in a canvas tag or table tag)
And similarly for server-side generators, there’s the Java zxing project, or a pure Python library pyqrnative. For the Python library, StackOverflow have a question on serving dynamically generated images in Django which might be helpful.
Security caution: if also encoding an authorisation token in the URL that can automatically log someone in, don't forget you probably want to implement an expiry date for the token. As depending on the sensitivity of the app and its data, this is a magic key that logs in anyone in possession of (or in line of sight of) the QR code on the screen!
For bonus points, the URL you put into the QR code can easily also include tracking parameters for stats and analysis. It's always useful to know if, how, and by whom, your QR codes are being used.
Email alternative
As cool as QR codes are, there is another alternative that doesn’t even need a third party scanning app, and that's having the web app send the user an email containing a link to the relevant mobile URL. Most email clients in mobiles will let the user tap the link and cause the browser to load the page. This is not quite as instant as a QR code as you have to wait for the email to deliver, but it’s still faster than trying to get there by hand. Testpad therefore goes for both methods for transferring to mobile: the QR code or an email link.
So if you haven’t already, check it out on Testpad. The starter plan is free and takes only moments to register for.
Follow me on Twitter @testpadapp
