Futurice’s Riku Valtasola took some time last week to discuss how they created the Qt Developer Days app in QML, mirrored the functionality in an HTML5 web app, and the challenges they faced implementing OAuth in a mobile environment. The resulting service encapsulates an entire conference agenda in a custom XML structure, allows attendees to build their personal conference schedule, and collects session feedback from attendees.
Nokia and Futurice have worked together on several successful mobile apps, including WRC Live, the official FIA World Rally Championship application for Nokia Symbian^3, Series 40 and MeeGo Harmattan phones. Check out over 100 reviews of the app posted on Nokia Store and you’ll see why the Qt team selected Futurice for this project.
After initial consultation between Futurice designers and Qt Developer Days organizers, here are the primary features agreed for the initial (2011) release of the Qt Developer Days app:
- Detailed conference schedule with information on each session and speaker
- Qt version with QML UI that helps demonstrate Qt Quick Components and custom UI construction
- HTML5 web app version with local storage for attendees without compatible mobile phones
- Updates for both versions periodically fetched from a server so organizers can communicate late-breaking information
- User control over update timing and network bearer so international travelers don’t get surprised with an unexpected data bill
- User-created custom conference schedule via session tagging
- Add favorite sessions to device calendar (Symbian)
- Twitter and Facebook integration for sharing interesting sessions
- Conference area maps, session locations
- Session feedback forms
A major non-functional requirement for the application was that it must be possible to customize it relatively easily for future conferences. This requirement was satisfied through the architecture of the application, for example by designing a flexible and comprehensive XML format for modifying and storing the conference data.
The image above includes screen shots of the QML-based app. If you have worked with Qt Components you’ll recognize standard features such as page-based navigation and QML ToolBar.
- Users navigate through a day’s schedule by flicking a custom QML component created by Futurice (see the screen shot titled “Technical Track”).
- When the user finds a session of interest, he or she can touch the star icon to add it to a favorites list (second screen from left.)
- Shortly after a favorite session ends, the user is prompted to provide feedback via a combination of check boxes (one through five stars in several categories) and an open-ended text box.
Here is the architecture of the QML-based app:
Riku shared with us some of the architectural choices that needed to be made. At the highest level the decisions were easy:
- QML for UI and C++ for core logic and speed.
- Data models within the QML segment were a bit trickier. They went with XmlListModel for the conference agenda because it made parsing easy, but opted for JavaScript data models where possible because they’re faster to develop.
Integration with social media posed a particular challenge. Each user must authorize the Qt Developer Days app to access their Twitter or Facebook account the first time they want to share something. The required OAuth processing is quite tricky, and there are not yet standard components to deal with the complex handshake. “We use embedded QWebView for rendering the authentication pages of Twitter and Facebook and it works,” notes Riku, “but on Symbian this class eats a lot of memory and the user experience is not great.”
The resulting app is intuitive to use and offers just the right amount of graphic interest without getting between me and what I wanted to accomplish. I even encountered several surprises that “just worked” while attending Qt Developer Days in San Francisco without me thinking about them. During the conference, a bright red cross-hair shows current time when viewing the agenda. When I added my first session to my favorites list, the app asked if I wanted to add it to my Nokia N8’s calendar. When a session was over, the app popped up a polite “Feedback please” invitation to review the session.
Once the QML app was built and server-side infrastructure was in place, Futurice built an HTML5 web app that provides as much of the QML functionality as possible to users without a Qt-compatible phone. Because the web app uses the new local storage capability of HTML5, users do not need a current Internet connection when checking their agenda. However, because the UI is not built with QML, much of the “eye candy” is missing. Also missing is integration with the user’s device calendar.
With experienced agile developers on both sides of the relationship, Futurice and the Qt team approached this project as a timebox and deliberately specified more features than they expected to be able to implement given the time and resources available. While there is no fixed further development plan at this point, there are a lot of cool ideas and features in the backlog which may appear in the future versions of the app for upcoming conferences. Riku is already thinking of what’s next.
For more information about the Qt Developer Days app:
- Browse the HTML5 web app (note your browser’s message about local storage)
- Download the QML version
- Follow Riku @RikuJ
For more about Futurice’s experience with QML, check out this video with Michael Samarin, Head of Mobile Development at Futurice, talking about the Nokia Trailers, WRC Live, and Transformers 3 apps:
Source QtExperts
