Firebase Plugin

Add Google's Firebase for user authentication and access to the Firebase Realtime Database.

Firebase User Authentication

Allow your app to know the identity of a user, securely save user data in the cloud and provide the same personalized experience across all of the user's devices.

Firebase Realtime Database

Store and retrieve user-specific data from the Firebase Realtime Database. Data is synced across all clients in realtime, and remains available when your app goes offline.

Overview

The Firebase plugin allows to use the Firebase e-mail authentication provider to create user accounts, log in and log out. Additionally, you can access the Firebase database and store and retrieve user-specific data with and without authentication.

Use Cases

User Authentication

Most apps need to know the identity of a user. Knowing a user's identity allows an app to securely save user data in the cloud and provide the same personalized experience across all of the user's devices.

Firebase Authentication provides backend services to authenticate users to your app. The plugin currently supports authentication using e-mail and passwords. Additionally, Firebase comes with a "forgot password" feature out of the box, which you can easily use in your application without tedious setup.

Support for popular federated identity providers like Google, Facebook and Twitter can be added to the plugin on request. Please contact us for more information.

You can design the login screen completely customized for your app. If you don't want to do that, we've got you covered as well: You can easily create a login page template using our wizard. Just click File -> New File or Project -> V-Play Apps -> Page and in the next step, select Login Page as Page Type.

Realtime Database

Store and sync data with the Firebase NoSQL cloud database. Data is synced across all clients in realtime, and remains available when your app goes offline.

The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and internally synchronized in realtime to every connected client.

When you build cross-platform apps with the Realtime Database, all of your clients share one Realtime Database instance. The Firebase backend automatically receives updates with the newest data as soon as the database is changed by one of the clients. Additionally, changes to the database are propagated to other clients and can be read by the clients in real time.

The plugin currently supports reading the Realtime Database using FirebaseDatabase::getValue(). Additionally, you can receive realtime updates for values in your database by adding their keys to the FirebaseDatabase::realtimeValueKeys or FirebaseDatabase::realtimeUserValueKeys.

Realtime Database vs. V-Play WebStorage

V-Play also comes with its own easy to use WebStorage, which connects to the V-Play backend. It is a simple key-value store which syncs across different devices and platforms via the V-Play Game Network Backend as a Service (BaaS).

So what's the difference?

V-Play WebStorage has many advantages compared to FireBase:

  • All platforms: V-Play WebStorage works not only on iOS & Android, but on all supported V-Play platforms. This also includes Desktop and embedded systems.
  • No authentication required: With V-Play WebStorage, you can access per-user data without your users having to log in.
  • Late authentication: Your users can authenticate later but start saving user data before this authentication. Once they do authenticate, their data is kept and merged to the new user profile.
  • Advanced merge conflict management: With V-Play WebStorage, you can modify the default merge conflict rules that may occur if your user stores to the same key from multiple devices at the same time. In Firebase, the last write is used, whereas in V-Play a merging of the data is tried first. Additionally, you can customize the merge behavior to your requirements with the WebStorage::dataConflictStrategy property.

These are the same features like Firebase has:

  • Offline usage: You can write and read values from the storage even if the user is offline. As soon as the user has Internet Connection again, the locally cached data is synchronized with the cloud.
  • Data synchronization: If the same user is authenticated on multiple devices, a change in the data is forwarded to all connected devices in realtime. This way, the user has the same data across all devices, even across platforms.

There is one restriction with WebStorage though: user access rights. With V-Play WebStorage, there are 2 access rules: per-app and per-user data. The per-user data cannot be shared with other users, and the per-app data cannot restrict its access to certain users. You can work around this restriction by adding custom fields to your per-app data that specifies to which user the app-wide data shall be available for. However, if you have advanced requirements for user rights & data management, the Firebase Realtime Database is the better solution as you can define access rules comprehensively.

For a quick summary: if you are only looking for a simple key-value store in the cloud that gets synced to multiple devices, you are better off with the V-Play WebStorage.

Firebase Examples

Plugin Demo App

To try the plugin or see an integration example have a look at the V-Play Plugin Demo app.

Please also have a look at our plugin example project on GitHub: https://github.com/V-Play/PluginDemo.

Example Usage

The Firebase items can be used like any other QML item. Here are two simple and one more advanced example of how to integrate the plugin into your V-Play app or game.

These examples show off some of the use-cases of the Firebase plugin. The first and second examples demonstrate the authentication and database functions. The third example is more advanced and shows how to use the FirebaseAuth and FirebaseDatabase items in combination to store user-specific values in the database. It also shows how to use the built-in password-reset mechanism.

Firebase Authentication Example

This example shows how to register, log in and logout a test user with the FirebaseAuth item, and how to use the FirebaseAuth::authenticated property to react to the authentication state.

 import VPlayPlugins 1.0
 import VPlayApps 1.0
 import QtQuick 2.0

 App {

   Page {
     // make the background red if the user is logged out,
     // and green if logged in
     backgroundColor: firebaseAuth.authenticated ? "green" : "red"

     FirebaseAuth {
       id: firebaseAuth

       onAuthenticatedChanged: {
         console.log("Authenticated changed " + authenticated)
       }

       onUserRegistered: {
         console.debug("User registered: " + success + " - " + message)
       }

       onLoggedIn:  {
         console.debug("User login: " + success + " - " + message)
       }

     }

     Column {
       anchors.fill: parent

       AppButton {
         text: "Register User"
         onClicked: firebaseAuth.registerUser("test@test.com", "thebestpassword")
       }

       AppButton {
         text: "Log in"
         onClicked: firebaseAuth.loginUser("test@test.com", "thebestpassword")
       }

       AppButton {
         text: "Log out"
         onClicked: firebaseAuth.logoutUser()
       }

       AppText {
         // shows the email address if the user is logged in
         text: firebaseAuth.email + " " + firebaseAuth.authenticated
       }
     }
   }//Page
 }//App

Firebase Realtime Database Example

This example shows how to read and write public data with the FirebaseDatabase item. If you want only authenticated users to access your database, have a look at the Advanced Firebase Example

 import VPlayPlugins 1.0
 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   Page {

     FirebaseDatabase {
       id: firebaseDb

       onReadCompleted: {
         if(success) {
           console.debug("Read value " +  value + " for key " + key)
           output.text = value
         } else {
           console.debug("Error: "  + value)
         }
       }

       onWriteCompleted: {
         if(success) {
           console.debug("Successfully wrote to DB")
         } else {
           console.debug("Write failed with error: " + message)
         }
       }
     }

     Column {
       anchors.fill: parent

       AppButton {
         text: "Save Value"
         anchors.horizontalCenter: parent.horizontalCenter
         onClicked: firebaseDb.setValue("public/teststring", "test")
       }

       AppButton {
         text: "Get Value"
         anchors.horizontalCenter: parent.horizontalCenter
         onClicked: firebaseDb.getValue("public/teststring")
       }

       AppText {
         anchors.left: parent.left
         anchors.right: parent.right
         horizontalAlignment: AppText.AlignHCenter
         id: output
         text: "The value read from the database will be displayed here!"
       }
     }

   }// Page
 }// App

Advanced Firebase Example

This example demonstrates advanced usage of the Firebase plugin, like authorized access to the database, a simple login form and storing and retrieving values from the database. Additionally, it shows how to use the "Forgot Password" functionality of Firebase.

 import VPlayPlugins 1.0
 import VPlayApps 1.0
 import QtQuick 2.0

 App {

  Page {

   FirebaseAuth {
     id: firebaseAuth

     onUserRegistered: {
       console.debug("User registered: " + success + " - " + message)
       output.text = message
     }

     onLoggedIn:  {
       console.debug("User login: " + success + " - " + message)
       output.text = message
     }

     onPasswordResetEmailSent: {
       console.debug("Email Sent: " + success + " - " + message)
       output.text = message
     }
   }

   FirebaseDatabase {
     id: firebaseDb

     onReadCompleted: {
       if(success) {
         console.debug("Read value " +  value + " for key " + key)
       } else {
         console.debug("Error: "  + value)
       }
       output.text = value
     }

     onWriteCompleted: {
       if(success) {
         console.debug("Successfully wrote to DB")
         output.text = "Successfully wrote to DB"
       } else {
         console.debug("Write failed with error: " + message)
         output.text = "Write failed with error: " + message
       }
     }
   }

   Column {
     spacing: dp(20)

     AppTextField {
       id: email

       visible: !firebaseAuth.authenticated
       text: "E-Mail"
       showClearButton: true
     }

     AppTextField {
       id: pw

       visible: !firebaseAuth.authenticated
       text: "Password"
       showClearButton: true
       echoMode: TextInput.PasswordEchoOnEdit
     }

     AppButton {
       text: "Log in"
       visible: !firebaseAuth.authenticated
       onClicked: {
         if(email.text.length > 0 && pw.text.length > 0) {
           firebaseAuth.loginUser(email.text, pw.text)
         } else {
           output.text = "Please enter an e-mail adress and a password!"
         }
       }
     }

     AppButton {
       text: "Register"
       visible: !firebaseAuth.authenticated
       onClicked:
       {
         if(email.text.length > 0 && pw.text.length > 0) {
           firebaseAuth.registerUser(email.text, pw.text)
         } else {
           output.text = "Please enter an e-mail adress and a password!"
         }
       }
     }

     AppButton {
       text: "Send Password Link"
       visible: !firebaseAuth.authenticated
       onClicked: {
         if(email.text.length > 0) {
           firebaseAuth.sendPasswordResetMail(email.text)
         } else {
           output.text = "Please enter an e-mail adress!"
         }
       }
     }

     AppButton {
       visible: firebaseAuth.authenticated
       text: "Save Private Value"
       onClicked: firebaseDb.setValue("teststring", "test")
     }

     AppButton {
       visible: firebaseAuth.authenticated
       text: "Get Private Value"
       onClicked: firebaseDb.getValue("teststring")
     }

     AppButton {
       visible: firebaseAuth.authenticated
       text: "Log out"
       onClicked: firebaseAuth.logoutUser()
     }

     AppText {
       id: output
       text: ""
     }
   }

  }// Page
 }// App

For the full source code, see the plugin example project on GitHub: https://github.com/V-Play/PluginDemo

Available QML Items

FirebaseAuth

Item allows user registration and authentication with the email/password authentication provider

FirebaseDatabase

Item allows to read and write user-specific and public data from and to the Firebase Realtime Database. Data is synced across all clients in realtime, and remains available when your app goes offline. As soon as the user goes online again, the changes are synced up to the Firebase cloud backend

Adding and Activating Plugins

How to Add a V-Play Plugin to your App or Game

When you create a new project, you can choose the Plugin Application template to get your own version of the V-Play Plugin Demo with the plugins you want to include. Open Qt Creator and choose “File / New File or Project”, then select Plugin Application in the V-Play Apps section or Game with Plugins in the V-Play Games section to start the project wizard.

Then select the platforms you want to run your application on. The plugins are available for both iOS & Android. There is a fallback functionality in place on Desktop platforms so your project still works when you call methods of the plugins. This allows you to do the main development on your PC, and for testing the plugin functionality you can run the project on iOS and Android.

After the Kit Selection, you can choose which of the plugins you’d like to add to your project:

Then complete the wizard, your project is now set up with all the correct plugin dependencies for Android & iOS automatically. This includes:

  • Setting up the .gradle file for Android.
  • Setting up the .plist file for iOS.
  • Setting up the .pro file to include the plugin libraries for iOS.

Note: Additional integration steps are still required for most plugins, for example to add the actual plugin libraries for iOS to your project. Please have a look at the integration steps described in the documentation for each of the used plugins.

If you have an existing V-Play application, follow these steps to include a plugin to your app or game:

In Qt Creator, select “File / New File or Project” and choose either V-Play Games or V-Play Apps from Files and Classes. Then select V-Play Plugin and press Choose.

You can now select the plugin you want to add:

The plugin item, which contains the chosen plugin and a short usage example, is now added to your project. To use the item in your project, simply perform these steps:

  • Include the created item (use the name you entered in the template before) in your main.qml file.
  • Modify the .pro file & .plist file for iOS usage. See the iOS integration guide of the chosen plugin for more information.
  • Modify the the .gradle file for Android usage. See the Android integration guide of the chosen plugin for more information.

Note: If you have an existing Qt application, you can also add V-Play Plugins to your app! See here how to do this.

Activating Plugins with a License Key

You can test all plugins as soon as the required integration steps and plugin configuration are completed.

However, the plugins are only available as Trial Versions if they are not activated with a valid license. When you are using unlicensed plugins, a dialog is shown and a watermark overlays your application to notify you about the testing state of the plugin.

All monetization plugins are free to use in all licenses, other plugins are only fully usable if you have purchased the Indie or Enterprise license. To activate plugins and enable their full functionality it is required to create a license key. You can create such a key for your application using the license creation page.

This is how it works:

  • Choose the plugins you want to include in your license key:

  • Click on “Generate License Key” and set the app identifier & version code of your application. You can see that the AdMob plugin was enabled in this license key:

  • Copy the generated licenseKey to your GameWindow or App component.

  • You can now fully use the selected plugins!

Integration

To use the Firebase plugin in your project, add the platform-specific native libraries for each platform to your project.

iOS Integration Steps

  1. Download our PluginDemo from https://github.com/v-play/PluginDemo/archive/master.zip and unzip it.
  2. Copy the following frameworks from the ios sub-folder to a sub-folder called ios within your project directory.
    • FirebaseAnalytics.framework
    • FirebaseAuth.framework
    • FirebaseDatabase.framework
    • FirebaseCore.framework
    • FirebaseInstanceID.framework
    • GoogleToolboxForMac.framework
    • GTMSessionFetcher.framework
  3. Add the following lines of code to your .pro file:
     ios {
       VPLAY_PLUGINS += firebase
     }

Android Integration Steps

  1. Open your build.gradle file and add the following lines to the dependencies block:
     dependencies {
       compile 'net.vplay.plugins:plugin-firebase:2.+'
     }

    Note: If you did not create your project from any of our latest wizards, make sure that your project uses the Gradle Build System like described here.

Firebase Account

In order to use Firebase in your project, set up a Firebase project at https://firebase.google.com/ for your app or game.

Note: Create a Google account first if you don't have one yet.

Go the Firebase console (https://console.firebase.google.com/). You will be greeted with the welcome screen.

Now, you can create your first Firebase project. Proceed with the following steps:

  • Click "Add Project"
  • Enter a name for your project and select your preferred region

  • Click "Create Project"

Back on the Dashboard for your Firebase project, proceed with adding the platforms you want to use.

iOS

  • Click "Add Firebase to your iOS app" or "Add another app" if you already created one for Android.
  • Enter the iOS Bundle ID. It is equal to the "App Identifier" which you entered when creating your V-Play project.
  • Click "Register App" and download the GoogleService-Info.plist on the next page.

  • Copy the GoogleService-Info.plist into the ios subfolder of your project.
  • You can ignore the next steps of the wizard, we already did those steps for you. Just click "Continue" and "Finish".

Android

  • Click "Add Firebase to your Android app" or "Add another app" if you already created one for iOS.
  • Enter the package name. It is equal to the "App Identifier" which you entered when creating your V-Play project.
  • Click "Register App" and download the google-services.json.

  • Copy the google-services.json into the android subfolder of your project.
  • You can ignore the next steps of the wizard, we already did those steps for you. Just click "Continue" and "Finish".

Firebase Realtime Database Setup

By default, anyone can access your Firebase database. This is not desirable in many cases. Therefore, you should restrict your database so your users can only access data that is allowed for them.

To change the Realtime Database rules, select "Database" in the Firebase Console.

Then, select the "Rules" tab in the top. You will see the Firebase default rules.

Now, you can replace the default rules with the following code:

 // These rules grant access to a node matching the authenticated
 // user's ID from the Firebase auth token
 // Additionally, they grant access to everyone for the "public" branch
 {
   "rules": {
     "users": {
       "$uid": {
         ".read": "$uid === auth.uid",
         ".write": "$uid === auth.uid"
       }
     },
     "public": {
       "$uid": {
         ".read": true,
         ".write": true
       }
     }
   }
 }

These rules grant everyone access to all child nodes of the public branch. In addition, with these rules, an authenticated user can access data that is stored in the users/<individual-user-id> branch of the database.

To learn more on Database Rules, we recommend to read up on the topic in the Firebase Docs.

Used Firebase SDK Versions

iOS 7.14.0
Android Google Play Services 11.2.2

Note: Other SDK versions higher than the stated ones might also be working but are not actively tested as of now.

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