How to Add In-App Chat or Gamification Features to Your Mobile App

How to Add In-App Chat or Gamification Features to Your Mobile App

By GT December 6, 2017

Many successful apps allow users to interact, compete or build social relationships. Features like an in-app chat, a friend system or leaderboards help to increase app retention and engagement rates. This applies for games as well as apps. The SocialView makes it easy to add such features. It takes advantage of ready-made services and also offers e.g. user profiles & authentication, cloud storage and much more. If you think this sounds complex, don’t worry: This post shows you how to add such features without a hassle.

Using Social Services is Easy!

… at least with the SocialView, which includes many ready-made social features. This makes it easy for you to create apps with e.g. user profiles, leaderboards or a messaging and friend system. For example, this year’s conference management app for the Qt World Summit 2017 uses these services and allows you to:

  • Search conference attendees to schedule Business Meetings.
  • Store custom user data like the company, job position or main Qt interest.
  • View user details and find conference attendees that match certain criterias.
  • Log in via Facebook to synchronize your data across devices.
  • Become friends and get in touch with the included in-app chat.
  • See a leaderboard with a ranking of users that favor many talks and are active.

business-meet-and-chat

You can have a look and try out the features by downloading the app for iOS or Android:

App Store Google_Play_Badge-1

This is already a rich feature set, but there is much more you can do. The SocialView is extensible and allows to customize all features!

A cloud-based backend and easy-to-use client QML components build the core of the view. The SocialView integrates these cloud services so you can use them in your app. Among many other features, the SocialView services include:

  • User Profiles and Authentication: Each user registers with the social services as soon as he first opens your app. No registration required.
  • Social Leaderboards: You can let players compare against each other in a competitive way, keeping them playing.
  • Fully Customizable UI: With the strength of QML you can customize all views to your app and give an extra-polished look.
  • Integrated Cloud Storage: Store project-specific data for your users in the cloud.
  • Friend System: Add your friends or make new friends with other users you meet in-app.
  • In-App Chat & Push Notifications: You can chat with your friends, even if they’re not online. This makes it easy for your users to get in touch. They also receive Push Notifications for each incoming message.
  • Facebook Login & Account Synchronization: You can allow users to log-in with Facebook. This enables them to synchronize their profile and progress across devices.
  • Native Look and Feel: The view provides a native style and user experience on both iOS and Android.
  • Fully Cross-Platform: All features work cross-platform, so your iOS users can also connect or play with Android users.

mobile-chat

To see how to add such services, have a look at the Qt World Summit 2017 app. It shows how to use the SocialView and enriches it with custom features. The full updated source code is available for you on GitHub.

How to Add User Profiles or an In-App Chat with the SocialView

The SocialView offers a flexible usage for both games and apps. You can add user profiles, leaderboards or the messaging and friend system to any project.

Use the SocialView Standalone

The view contains several pages that each cover a certain use-case:

  • profilePage – shows the user profile a GameNetworkUser
  • leaderboardPage – shows the highscores for a certain leaderboard and time frame
  • inboxPage – shows the active chats of the currently logged-in user
  • chatPage – shows a chat of the logged-in user with another user
  • newMessagePage – shows a user search and allows to start a chat

If not specified otherwise, it shows the user profile of the logged-in user by default. This is how a minimum example setup for a full-featured SocialView integration looks like in QML:

import VPlay 2.0

GameWindow {
 VPlayGameNetwork {
   id: gameNetwork
   gameId: 285
   secret: "AmazinglySecureGameSecret"
   multiplayerItem: multiplayer
 }

 VPlayMultiplayer {
   id: multiplayer
   appKey: "dd7f1761-038c-4722-9f94-812d798cecfb"
   pushKey: "a4780578-5aad-4590-acbe-057c232913b5"
   gameNetworkItem: gameNetwork
 }

 SocialView {
   id: socialView
   gameNetworkItem: gameNetwork
   multiplayerItem: multiplayer
 }
}

No extra code needed. The view also is a full-featured NavigationStack type by itself. So you can configure the initialPage or e.g. push the default leaderboard with simple call to:

socialView.push(socialView.leaderboardPage)

This is the perfect way for integrating the view to V-Play Games.

Add SocialView Pages to your App Navigation

The SocialView contains several individual social pages. They are independent pages, but linked to the SocialView behind the scenes. Each page can work with any NavigationStack layout you might use in your existing V-Play App.

The following code snippet creates an app with two separate navigation tabs. One for the user profile, and one for showing the inbox of the friend and messaging service:

import VPlay 2.0
import VPlayApps 1.0

App {

 VPlayGameNetwork {
   id: gameNetwork
   gameId: 285
   secret: "AmazinglySecureGameSecret"
   multiplayerItem: multiplayer
 }

 VPlayMultiplayer {
   id: multiplayer
   appKey: "dd7f1761-038c-4722-9f94-812d798cecfb"
   pushKey: "a4780578-5aad-4590-acbe-057c232913b5"
   gameNetworkItem: gameNetwork
 }

 SocialView {
   id: socialView
   gameNetworkItem: gameNetwork
   multiplayerItem: multiplayer
   visible: false // hide social view, as we show the pages on custom NavigationStacks instead
 }

 // main navigation
 Navigation {

   // first navigation item: Profile
   NavigationItem {
     title: "Profile"
     icon: IconType.user

     NavigationStack {
       initialPage: socialView.profilePage
     }
   }

   // second navigation item: Chat Inbox
   NavigationItem {
     title: "Chat"
     icon: IconType.comment

     NavigationStack {
       initialPage: socialView.inboxPage
     }
   }
 }
}

This already shows the flexible usage possibilities of the new view. The approach in the above example works with the page properties of the SocialView. This is the fastest way for adding e.g. the own user profile or the default leaderboard to your app navigation.

You can also show a different user profile or leaderboard. The SocialView provides functions that let you pass your desired settings. For example, the following call displays the profile of a certain user:

socialView.pushProfilePage(gameNetworkUser, targetNavigationStack)

The function also allows to specify the target NavigationStack for adding the page. Similar functions exist for all available SocialView pages. So you can integrate the social pages anywhere in your app!

Customize the Features and Look of your Social Services

Each project is different and has its own unique style. To add your own style to the view, there are several customization options you can use. They allow to:

  • Match the view colors and fonts with your project style.
  • Enrich the UI with custom elements and features.
  • Introduce completely new social pages.

The V-Play Apps types build the core of the customizable SocialView UI. This means, it also comes with a native look and feel for Android and iOS and e.g. offers a native back navigation.

Change the View Colors and Fonts

The SocialView offers several properties for the general look of all social pages. It is possible to customize used fonts and colors to match your project style with a few lines of code.

The view tint matches the configured color of your app theme by default. No further adjustments needed if this is the color of your choice for the social pages.

The following example disables the user country feature and sets an orange tint. It also switches to the configured theme font instead of the default social view font:

SocialView {
   gameNetworkItem: gameNetwork
   multiplayerItem: multiplayer

   // custom styling
   tintColor: "orange"
   tintLightColor: Qt.lighter(tintColor, 1.2)
   countryCodeEnabled: false
   bodyFontName: Theme.normalFont.name
   headerFontName: Theme.normalFont.name
 }

Add Custom UI Elements with Delegates

The V-Play Game Network service allows to store project-specific data of your users. In your app, this data is available with the customData property. The Qt World Summit app also sets this field to store personal information, e.g. the Qt interest, on the profile page.

profile-custom-views

But how can you display the UI for editing or showing this information in the user profile?

The SocialUserDelegate type lets you provide the full QML code of such additions. It is set up to represent a single GameNetworkUser, which the view displays in the social pages.

Let’s say you allow users to enter a custom description text somewhere in your app, which you store as custom data. This simple code snippet allows you to display the description in the user profile:

SocialView {
   id: socialView
   gameNetworkItem: gameNetwork
   multiplayerItem: multiplayer

   // show custom user data in profile
   profileUserDelegate: SocialUserDelegate {
     AppText {
       text: gameNetworkUser.customData 

       x: dp(Theme.navigationBar.defaultBarItemPadding) // add indent / padding
       width: parent.width-x
       font.pixelSize: sp(14)
       wrapMode: AppText.WrapAtWordBoundaryOrAnywhere

       // add social view style to text
       font.family: socialViewItem.bodyFontName
       color: socialViewItem.bodyColor
     }
   }
 }

That is all you need! The new custom text now shows up in the user profile page:

Extend the profile page with a custom delegate.

The above example uses the profile user delegate, which is not set to a specific item by default.
Other delegates for e.g. the leaderboard and inbox page are already predefined. Each delegate item represents a single user of the displayed list in this case.

To customize these user lists, you can overwrite the used delegates. This example replaces each score entry of the leaderboard with a custom QML item:

SocialView {
   id: socialView
   gameNetworkItem: gameNetwork
   multiplayerItem: multiplayer

   leaderboardUserDelegate: SocialUserDelegate {
     height: col.height

     // show user name and score below each other
     Column {
       id: col
       anchors.centerIn: parent
       AppText {
         anchors.horizontalCenter: parent.horizontalCenter // center name horizontally
         text: gameNetworkUser.name
       }
       AppText {
         anchors.horizontalCenter: parent.horizontalCenter // center score horizontally

          // it is possible to access each response entry of the related API request using modelData
         text: "Score: " + modelData.value
       }
     }
   }
 }

The new social delegate system is the perfect way to customize the social pages to your liking! But that is not all, you can even throw in completely custom social pages.

How to Create New Social Pages

The ability to add your own delegates also opens another possibility. You can extend the view with custom social pages, which extend the new SocialPage base type. It works together with SocialView to:

  • Offer quick access to the Game Network and Multiplayer features.
  • Show a loading indicator in the navigation bar. Your users will see that there’s a loading process going on whenever there are pending API requests.
  • Apply the configured SocialView styling like the view tint color or body font.

Let’s upgrade the profile page and add a button. It will take us to a new social page, where we show the custom data of the user:

SocialView {
   id: socialView
   gameNetworkItem: gameNetwork
   multiplayerItem: multiplayer

   profileUserDelegate: SocialUserDelegate {
     id: userDelegate
     SocialViewButton {
       anchors.horizontalCenter: parent.horizontalCenter
       text: "Show User Details"
       onClicked: {
         // show custom social page and pass gameNetworkUser
         parentPage.navigationStack.push(userDetailPage, { gameNetworkUser: userDelegate.gameNetworkUser  })
       }
     }
   }
 }

Component {
   id: userDetailPage
   SocialPage {
     // add a property for the user we want to show on the page
     property GameNetworkUser gameNetworkUser: null

     // show custom data
     AppText {
       text: gameNetworkUser.customData

       x: dp(Theme.navigationBar.defaultBarItemPadding) // add indent/padding
       width: parent.width-x
       font.pixelSize: sp(14)
       wrapMode: AppText.WrapAtWordBoundaryOrAnywhere

       // add social view style to text
       font.family: socialViewItem.bodyFontName
       color: socialViewItem.bodyColor
     }
   }
 }

This addition uses the profileUserDelegate to extend the profile page. It adds a button, which takes us to a new custom social page:

Add buttons to integrate custom social pages.

That page only shows the plain string text value of customData. But of course you could do much more. The following example extends the above code to allow saving the favorite song and food for each user. The userDetailPage now shows input fields to edit and store the data for the logged-in user. When viewing the profiles of other users, it just displays the stored values:

import VPlay 2.0
import VPlayApps 1.0
import QtQuick 2.9

App {
 VPlayGameNetwork {
   id: gameNetwork
   gameId: 285
   secret: "AmazinglySecureGameSecret"
   multiplayerItem: multiplayer
 }

 VPlayMultiplayer {
   id: multiplayer
   appKey: "dd7f1761-038c-4722-9f94-812d798cecfb"
   pushKey: "a4780578-5aad-4590-acbe-057c232913b5"
   gameNetworkItem: gameNetwork
 }


 SocialView {
   id: socialView
   gameNetworkItem: gameNetwork
   multiplayerItem: multiplayer

   profileUserDelegate: SocialUserDelegate {
     id: userDelegate
     SocialViewButton {
       anchors.horizontalCenter: parent.horizontalCenter
       text: "Show User Details"
       onClicked: {
         // show custom social page and pass gameNetworkUser
         parentPage.navigationStack.push(userDetailPage, { gameNetworkUser: userDelegate.gameNetworkUser  })
       }
     }
   }
 }

 Component {
   id: userDetailPage
   SocialPage {
     title: "User Details"
     // add a property for the user we want to show on the page
     property GameNetworkUser gameNetworkUser: null

     // parse the JSON data stored in customData property, if it is set
     property var userCustomData: !!gameNetworkUser && !!gameNetworkUser.customData ? JSON.parse(gameNetworkUser.customData) : {}

     // for logged-in user, allow editing the custom fields
     Column {
       x: dp(Theme.navigationBar.defaultBarItemPadding) // add indent
       y: x // padding top
       width: parent.width-x
       spacing: x
       visible: gameNetworkUser.userId === gameNetworkItem.user.userId // only show if profile of logged-in user

       AppText {
         text: "Edit the fields below to set your details."
       }
       AppTextField {
         id: songInput
         text: !!userCustomData.song ? userCustomData.song : ""
         placeholderText: "Enter your favorite song."
       }
       AppTextField {
         id: foodInput
         text: !!userCustomData.food ? userCustomData.food : ""
         placeholderText: "Enter your favorite food."
       }
       SocialViewButton {
         text: "Save"
         onClicked: {
           var customData = JSON.stringify({ "song": songInput.text, "food": foodInput.text })
           gameNetworkItem.updateUserCustomData(customData)
         }
       }
     }

     // for other users, show data of custom fields
     Column {
       x: dp(Theme.navigationBar.defaultBarItemPadding) // add indent
       y: x // padding top
       width: parent.width-x
       spacing: x
       visible: gameNetworkUser.userId !== gameNetworkItem.user.userId // only show if profile of other user

       AppText {
         text: "Favorite Song: "+(!!userCustomData.song ? userCustomData.song : "")
       }
       AppText {
         text: "Favorite Food: "+(!!userCustomData.food ? userCustomData.food : "")
       }
     }
   }
 }
}

 

The detail page now allows to enter and store the custom data:
The final userDetailPage allows to enter your favorite song and food.

You can see all customization features in action with the Qt World Summit 2017 app on GitHub:

GitHub - Qt World Summit 2017 app

Now it is up to you to add customized social features to your apps – the SocialView is definitely the right tool for it!

 

 

More Posts Like This

 

Release 2.14.1: Update to Qt 5.9.3 | Use Live Code Reloading on macOS and Linux
V-Play Update 2.12.1: Qt Quick Designer Improvements

How to Make Cross-Platform Mobile Apps with Qt – V-Play Apps

How to Make a Qt app

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support
Sign up for Free and start developing right away!
I want to make Games
I want to make Apps
Game Development
Cross-Platform, Any Resolution

Use one IDE to deploy to all supported platforms, including iOS and Android, from a single code base.

Support all screen resolutions, aspect ratios and sizes with auto-adapting UI elements, smart scene scaling and memory efficient asset selection.

Learn More

V-Play ranked #1 at research2guidance cross-platform tool benchmarking 2014 by 2188 developers comparing 40 leading tools.

Multiplayer

V-Play Multiplayer supports both real-time and turn-based gameplay, so you can use it to make many different types of cross-platform multiplayer games. It's perfect for making player-vs-player games like 'Words with Friends' or games for a large amount of players, such as 'Clash of Clans'.

Learn More Video

Highscores & Achievements

The V-Play Game Network is a cross-platform gaming service that allows players around the world to compare game highscores and achievements. Players can also challenge each other across multiple platforms and share their progress on Facebook.

Learn More

QML & JavaScript

Qt Meta Language is a highly intuitive reactive language, which is super easy to learn, yet it's extremely powerful and flexible. Mix it with JavaScript to create awesome stuff, with just a few lines of code.

import QtQuick 2.0
import VPlay 2.0

GameWindow {
  Scene {
    
    SimpleButton {
      anchors.centerIn: parent
      text: "Press Me"
      onClicked: {
        console.debug("Wow you pressed me!")
      }
    }
  }
}

Learn More

Monetize & Analyze

With V-Play, you can use many 3rd party services for ads, in-app purchases, analytics and more, with just a few lines of code. All of these plugins work cross-platform, which allows you to maintain a single code base.

Learn More

Level Editor

The LevelEditor can be used during development to create and modify levels for your game, which you can then bundle in your final publishing build. Additionally, you can also integrate the in-game level editor to your published game and let your gamers create new levels.

Learn More Video

Card Game like UNO, Hearthstone or Poker

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/OneCard/OneCard.pro

Match-3 like Candy Crush Saga

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/JuicySquash/JuicySquash.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/JuicySquashAdvanced/JuicySquashAdvanced.pro

Puzzle like 2048 or Threes!

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/2048/2048.pro

Casino like Big Win Slots

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/FlaskOfRum/FlaskOfRum.pro

Side Scroller like Jetpack Joyride or Flappy Bird

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/FlappyBird/FlappyBird.pro

Tower Defense like Castle Defense or Bloons TD

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/Squaby/Squaby.pro

Falldown & Jump like Doodle Jump or Mega Jump

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/ChickenOutbreak/ChickenOutbreak.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/ChickenOutbreak2/ChickenOutbreak2.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/DoodleJump/DoodleJump.pro

Platformer like Super Mario or Lep's World

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/Platformer/Platformer.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/PlatformerWithLevelEditor/PlatformerWithLevelEditor.pro

Action like Angry Birds, Fruit Ninja, Cut the Rope

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/StackTheBoxWithCommunityEditor/StackTheBoxWithCommunityEditor.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/BalloonPop/BalloonPop.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/CarChallenge/CarChallenge.pro

Arcade like Arkanoid or Space Invaders

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/ZombieBreak/ZombieBreak.pro

Community like Super Mario Maker or Minecraft

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/examples/Squaby/Squaby.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/StackTheBoxWithCommunityEditor/StackTheBoxWithCommunityEditor.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/PlatformerWithLevelEditor/PlatformerWithLevelEditor.pro

Any other Idea? let us know how we can help you

You are looking for another demo?

The V-Play SDK includes many open-source demos for different game genres. You can use their source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

If you do not find your game genre in this list and wonder if V-Play is the right choice, just contact us, we are happy to help!

Contact Us

App Development
Better Apps, Less Effort

Develop feature-rich, cross-platform mobile apps from a single code base.

V-Play apps look, feel and perform exactly like native iOS, Android and Desktop apps. With less code & much faster development time.

Learn More Highlights Video

V-Play ranked #1 at research2guidance cross-platform tool benchmarking 2014 by 2188 developers comparing 40 leading tools.

Save Time, Code & Money

Save up to 90% source code with V-Play, compared to frameworks like Xamarin, Titanium, React Native and others.

Learn More

QML & JavaScript

Qt Meta Language is a highly intuitive reactive language, which is super easy to learn, yet it's extremely powerful and flexible. Mix it with JavaScript to create awesome stuff, with just a few lines of code. QML also allows you to easily create smooth and complex animations.

import QtQuick 2.0
import VPlayApps 2.0

App {
  Page {
    
    AppButton {
      anchors.centerIn: parent
      text: "Press Me"
      onClicked: {
        console.debug("Wow you pressed me!")
      }
    }
  }
}

Learn More

Monetize & Analyze

With V-Play, you can use many 3rd party services for ads, in-app purchases, analytics and more, with just a few lines of code. All of these plugins work cross-platform, which allows you to maintain a single code base.

Learn More

Native Sensors & More

V-Play Apps harness the power of Qt, the leading cross-platform development framework used by over 1,000,000 developers.

This gives your access to native device features like sensors, camera, file system as well as multimedia, networking, localization and much more.

Learn More

Responsive Design

V-Play has built in responsive design capabilities, you can target phones and tablets with the same source code.

Learn More

Highly Extensible

You have existing JavaScript, C++ or native code? You want to add any 3rd party SDK that we do not offer already?

No worries, you can add any JS, C++, Java or Objective-C code to your project.

Learn More

Component Showcase App shows the most important V-Play features and components

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/showcase/Showcase.pro

Qt World Summit Conference App a full-featured conference management app made by V-Play

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/qtws2016/QtWS2016.pro

Twitter App how to build layouts like in the official Twitter app for iOS and Android

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/twitter/Twitter.pro

Maps App displays free bikes or boxes at bike stations for Vienna's bike sharing service Citybike Wien

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/maps/Maps.pro

Messaging App demonstrates how to create the UI of a Facebook Messenger like app

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/messaging/Messaging.pro

Weather App how to include powerful animations into your user interface

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/waether/Weather.pro

Any other Idea? let us know how we can help you

You are looking for another app demo?

The V-Play SDK includes many open-source demos for different app types. You can use their source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play..

If you do not find your app type in this list and wonder if V-Play is the right choice, just contact us, we are happy to help!

Contact Us