Christian Feldbacher, V-Play [Qt Technology Partner]

Qt World Summit Conference App – Tech Stack

Published Friday October 6th, 2017
Comments Off on Qt World Summit Conference App – Tech Stack
Posted in Biz Circuit & Dev Loop, Qt World Summit

After the Qt World Summit 2017 App Release last week, we will show some of the new features in the latest update and how we developed them. This allows you to use these tips and the source code of the conference app to copy these features in your own apps too.

To get the latest version from the app stores, download them here:

App Store Google_Play_Badge-1

Schedule Business Meetings

In the latest app update, you are able to see all conference attendees who opted in to provide additional infos, like the company name, job role, Qt experience and Qt interest. You can enter these details voluntarily in the new Profile Page. You can then send a chat message to the people you’d like to schedule a meeting with, or to the ones you’d like to start a conversation.
business-meet-and-chat

To narrow down your search, you can fine-tune the filters and for example look for people who have chosen “Mobile” as their main Qt interest. Or show the “Qt Newcomers” attending the conference and write a message to those.

You can see all the messages you sent or received in the built-in chat. The chat also allows you to send new messages directly by searching for a user’s name, just like in Facebook Messenger or WhatsApp.
mobile-chat

To get messages in real-time, you receive a push notification to notify you about the new message. If you have the app currently opened, an in-app notification dialog will let you know there’s a new message and you can directly jump to the chat by clicking on this dialog.

Become Friends :)

The Qt World Summit app further allows you to send friend requests to other users. After your friend request was accepted (this is done via an “Accept” action button in the chat), your new friend will be listed on top of all lists where you can browse users, like in the new chat page or the business meet page. There is also an own top section in the leaderboard that shows your ranking in comparison with your friends.
friendsIn the conference app, you get points for adding talks to your agenda, for opening the app, and when you rate a talk. You can use similar gamification elements in your app too – let’s see how you can add this to your app.

How to use this Social System in Your Apps

We have developed the above features with the V-Play Game Network & V-Play Messagingcomponents. These consist of a backend and a set of client components available in QML. This allows you to easily customize the views, style them to your needs and extend them as you like. To achieve the business meeting feature, we used the customData property that can be stored to a user and set this field if the user decides to share his information on the profile page.

profile-custom-views

In summary all that was needed for the whole featureset explained above was to:

  • Customize the profile page to let the user change his Qt interests.
  • Customize the user row that is shown in the Business meet page and the new chat view to also include the customData.
  • Customize the user row shown on the leaderboard to also include the customData.

Here is an example code how we implemented setting the company name for the customData property of a user in the profile page:

import VPlay 2.0
import VPlayApps 1.0
import QtQuick 2.0

Item { // ProfileView section

  // these are set from the outside
  property VPlayGameNetwork gameNetworkItem
  property GameNetworkUser gameNetworkUser

  GnViewButton {
    text: qsTr("Set Company Name")
    onClicked: {
      NativeDialog.inputText(
        qsTr("What is your company name?"), "",
        qsTr("Your company name"),
        gameNetworkUser.customData["companyName"],
        function(ok, text) {
          if(ok) {
            updateCustomDataField("companyName", text)
          }
      })
    }
  }

  function updateCustomDataField(fieldName, newText) {
    var newUserData = gameNetworkUser.customData
    newUserData[fieldName]= newText
    gameNetworkItem.updateUserCustomData(JSON.stringify(newUserData))
  }

}

The remaining parts are all handled by the client & server components automatically, including:

  • Chat system with push notifications for iOS & Android
  • User search
  • Friend system
  • Leaderboards & Achievements
  • Optional user authorization with Facebook
  • Default views for all the above features
  • Navigation between these views with a navigation stack
  • Support for all platforms supported by Qt, including Mobile, Desktop & Embedded

To add a social system or only parts of it (like the chat) to your new or existing app, see the app’s source code or the documentation for more examples and details. And if you get stuck somewhere, you can ask us for integration help.

QR Attendee Badge Scanning

Usually at conferences, you exchange business cards after talking to someone. After the conference, it is hard to remember when and where you met somebody and what your conversation was about.

To help with this, we added a QR Code Scanning feature to this year’s app. It allows you to simply scan the conference attendee badge with a QR code on it, and all the important information of the guy you have been talking to is stored in the app. The details include the name, email, company name, work address and the phone number (if these were entered at conference registration).

You can then add these contacts to your phone’s address book. Or send all of them as a csv file to yourself via email after the conference, so you can import all contacts in one go to your CRM or to an Excel / Google sheet for further processing.

We used the excellent QZXing library for the actual QR code scanning, which comes with QML components for the ZXing C++ library. You can find the source code how we implemented the scanning in the ContactsScanPage here.

qr-code-scanning-qt

Rate Talks

After a talk is finished, you’ll have the option to rate it 1-5 stars. There will be a follow-up post after the conference to announce the winners. All talks of the conference will be video-recorded and published as well, so the rating results make up for a nice prioritized playlist to watch after the conference.

Feedback Dialog & App Store Rating Dialog

After the user opened the app 5 times, he will be shown a Feedback dialog if he likes or dislikes the app. If he likes it, we show a dialog leading to the app store to rate the app. Getting ratings for an app is very important, because the ratings are a key factor for app store rankings. If he dislikes it, he can still send feedback which helps you to improve your app based on it. You can find the source code of these 3 dialogs in the linked texts.

feedback-dialog-and-app-store-rating-dialog

Cloud Storage & Cross-Platform Data Syncing

Consider this use case: you have an iPad at home and schedule your sessions. However, at the conference you have an Android phone with you. With the WebStorage component, you can store key/value data in a cloud storage. This data is then synced automatically across devices for the same logged in user. If there is a syncing error because the same key was written simultanely, you can choose which of the merge scenarios should be done.

For user authentication across devices, Facebook authentication is supported out of the box, and Email/password authentication is on the way. A nice benefit of the WebStorage and also VPlayGameNetwork is, that you do not need to create an account or connect with Facebook initially: a user is created automatically at the first app start which supports the full functionality.

If you then would like to connect multiple users to synchronize your data (in this case the session schedule) at a later point, you can connect both of your devices with Facebook to start cross-platform and multi-device data syncing.

This is very important for your first app start experience, because there would otherwise be a huge user drop-off if an app requires to create a user account before you see its value.

More Mobile App Best Practices

There are many more best practices like an offline cache for images & for the schedule or push notifications for session reminders. You can find all of these in the app’s source code.

Single Source Code – Native iOS & Android App

Although the Screenshots were created on an iOS device, the app has a native UI & UX on Android as well. On Android, the navigation is different: instead of the bottom tabs, a navigation drawer is used. Also, the page transitions are native ones, you have native scrollbars and list bounce behavior, native fonts, material design, and a lot more details you’ll realize as an Android user.

However, the source code for both iOS & Android is still the same! The V-Play componentsinternally make sure your app will look & feel native on both platforms. We encourage you to download the app on Github, and use the parts useful for your mobile app projects.

cross-platform conference app ios android qt world summit 2017

If you were lucky enough to get a ticket for Qt World Summit (it is sold out as of today!), you can also join our technical session for more tips, code snippets and best practices for mobile app development with Qt. We’ll also announce a new feature we’ve been using internally for making this app faster. Here’s a little teaser about it:

Rapid iOS deployment from Mac, Windows & Linux

See you at the conference, and if you’d like to meet, just send an in-app message with the business meet feature.

:)

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Biz Circuit & Dev Loop, Qt World Summit

Get started today with Qt Download now