v-play-2-14-1-live-reloading-windows-mac-linux-ios-android-qt

Release 2.14.1: Update to Qt 5.9.3 | Use Live Code Reloading on macOS and Linux

By Alex

V-Play 2.14.1 adds Live Code Reloading Support for macOS & Linux Desktop. With this addition, Live Code Reloading now allows to run and reload your projects on iOS and Android from all desktop platforms. No native iOS and Android build tools required.

V-Play 2.14.1 also introduces the new SocialView component for adding social features like user profile, leaderboard or even a full-featured messenger to your apps and games. It offers a cleaner and more customizable interface, compared to the more game-oriented VPlayGameNetworkView and VPlayMultiplayerView.

This update also adds support for Qt 5.9.3.

Live Code Reloading for Windows, macOS and Linux

Building your project takes some time. For mobile platforms, it can even take several minutes, depending on your development PC. This can become quite time-consuming. For example, if you are doing small iterations to fine-tune UI elements in apps. Same with animations, game-mechanics and so on. It slows down your development speed and therefore decreases your productivity.

V-Play Live reloads your project on every connected device, within seconds after code changes. This reduces the long compilation and deployment times, to only a couple of seconds. V-Play Live also allows you to run and test your applications on iOS from a Windows or Linux desktop. You don’t need to install any native SDKs for deployment with V-Play Live. See here for a quick demo:

 

This video shows a project opened in Qt Creator (left) on Windows. The project runs with V-Play Live. In the bottom right corner, the screens from an Android Nexus 7 and an iPhone 5s are shared with screen mirror tools so you can see what is going on there. In the center, you can see the desktop client. After connecting the 2 devices to the Live Server (top right), we change the code in Qt creator. After we save the changes, all connected clients update their view, within a second!

Qt Charts with V-Play Live

After some of you requested it, this update also contains the powerful Qt Charts module with V-Play Live. Including charts in your app could not be easier.

V-Play Live Reload Benefits

Save Time: Deploy and Test in Seconds

V-Play Live reduces deployment time, from several minutes to a couple of seconds. It deploys your code changes to all connected devices, automatically after saving.

Let’s play a bit with numbers. If you have a really decent development PC, you might be able to deploy your application to Android within one minute. With V-Play Live, it will take 1-2 seconds.

1 - newTime/oldTime = 1 - 2/60 = 0.9667

You just saved 96.67% of time for deployment. If you deploy only 10 times per hour, you spent 20 seconds deploying, instead of 10 minutes. That is 2 extra coffee breaks per hour. Or more time to spend productive.

In this demo, you see all connected clients (Desktop, Android and iOS) update within a second after clicking save in the development environment:

v-play-live-code-change-reload-windows-android-ios

Feel free to do the calculation with numbers that are more realistic in your own case.

More V-Play Live Benefits

You can find more benefits in last week’s blog post.

How to Use V-Play Live

1. Get the Latest Version of V-Play

If you haven’t installed V-Play yet, go get it on our download page. If you already have V-Play installed, see the update instructions below.

2. Start V-Play Live

To start V-Play Live for your active project, click on the LIVE-Run button in Qt Creator:

v-play-live-run-button

The V-Play Live Server (below right) will start, and open a local V-Play Live Client (below left).

vplay-live-server-and-client-ui

The Live Server allows you to:

  • Manage your connected clients, both desktop and mobile.
  • See the log output of each connected client in a separate tab.
  • Detect code changes and reload all connected clients.
  • Select the qml file you would like to run. The default is the main entry point.

3. Connect Live Clients

If you do not want to connect any mobile device now, you are already set and can start development with your local Client. To connect a mobile device, download the V-Play Live App, for Android or iOS.

Google_Play_Badge-1App Store
ic_launcherV-Play & QML Live Scripting App
Search in App Stores for: “V-Play Live Scripting”

V-Play Live uses your local network to communicate between server and clients. Make sure that your device is connected to the same network as your development PC running the Live Server, for example the same Wi-Fi. The V-Play Live App will try connecting to the server once you run it on your mobile device. The Live Server then displays this dialog for the connection request:

vplay-live-client-connection-requesti

Accept the mobile device connection on the Server. Now all code changes are automatically sent to your connected mobile device(s).

Add Social Features to your Apps with the SocialView

Custom social features in your app boost retention and engagement rates. Many successful apps allow users to interact, compete or build social relationships. This is because social features are one of the key drivers to build up your user base.

The V-Play Game Network and V-Play Multiplayer & Messaging services include many ready-made social services. This makes it easy for you to create apps with e.g. user profiles, leaderboards or a messaging and friend system. This year’s conference management app for the Qt World Summit 2017 uses these services and allows 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 criteria.
  • Log in via Facebook to synchronize your data across devices.
  • Become friends and get in touch with the included messenger.
  • See a leaderboard with a ranking of users that work with the app, 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

A cloud-based backend and easy-to-use client QML components allow to use these features. The VPlayGameNetworkView and VPlayMultiplayerView provide a default UI for your V-Play Apps. These types include several child views you can show or hide using view states. But there are several drawbacks to this approach. The new SocialView type completely changes the way you can use social services in your apps or games:

  • V-Play Apps Compatibility: The SocialView integrates with your App Navigation. You can show the available view pages anywhere in your app!
  • Easier Customization: Extend the view with QML elements to weave in your custom user data. Touching the QML source code of the view is not required.
  • Native Look and Feel: The default UI of the new view uses a native style and user experience on iOS and Android.
  • Clean Separation into App Pages: Each page instance works standalone and is a unique view. This also allows to introduce custom social pages to work with the V-Play social services.

mobile-chat

The Qt World Summit 2017 app shows how to use the SocialView and enriches it with custom features. The full updated source code is available for you on GitHub.

Dynamic App Navigation for Android and iOS

You don’t have to worry about how to show a drawer menu on Android, and a tab navigation on iOS. The V-Play App Navigation components take care of providing a native main menu.

But you also want change the general menu setup in some cases. For example to:

  • Only make certain features visible based on specific conditions.
  • Add more quick-links to your Android menu, as there’s more available space in the drawer than in the iOS tab bar.
  • Switch between different configurations of a certain menu item.

You can now set conditions for showing a menu item with NavigationItem::showItem. This allows to hide and show items in your main navigation without a hassle. For example, it is now easy to show different navigation entries for iOS and Android:

NavigationItem {
  title: "Only on iOS"
  icon: IconType.apple
  showItem: Theme.isIos

  // ...
}

 

Besides the highlights mentioned above, there are many other fixes and improvements for the SDK. For a full list of improvements and fixes to V-Play in this update, please check out our change log!

How to Update V-Play

Test out these new features by following these steps:

  • Open the V-Play SDK Maintenance Tool in your V-Play SDK directory.
  • Choose “Update components” and finish the update process to get this release as described in the V-Play Update Guide.

V-Play Update in Maintenance Tool

If you haven’t installed V-Play yet, you can do so now with the latest installer from here. Now you can explore all of the new features included in this release!

 

 

More Posts Like This

v-play-live-reloading-windows-mac-linux-ios-android-qt

Release 2.14.0: Live Code Reloading for Desktop, iOS & Android

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

How to Make a Qt app

No Responses

Leave a Reply

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