how-to-test-online-code-examples-on-android-and-ios-with-live-code-reloading

Web Editor: Test Online Code Examples on Android and iOS with Live Code Reloading

By Alex

Did you ever wonder how to quickly test online code examples? Did you ever see a code example and thought “I would love to try that right away”?

V-Play got you covered! With the V-Play Web Editor, you can run code examples on your Android or iOS phone, right from your desktop browser. It’s a Cloud IDE for editing, running and debugging QML Code. You don’t need to install any native SDKs or development environment like Qt Creator on your computer. You don’t even need to install the V-Play SDK or Qt SDK. All you need is to download the V-Play Live Scripting app for Android or iOS.

1. Download the V-Play Live Scripting App

The V-Play Live Scripting app is available on Android and iOS. Download it to use Live Code Reloading from your browser or desktop.

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

2. Run Code Examples from Documentation and Blog with the V-Play Web Editor

You can find the V-Play Web Editor for Qml code at https://v-play.net/web-editor/.

web-ui

For convenience you can also find a button above all code examples in our documentation and on the blog. Click on it to open the example in the Web Editor. Here is an example that you can try right away (make sure you read this post on your desktop!):

import VPlayApps 1.0
import VPlay 2.0
import QtQuick 2.8

App {
  NavigationStack {
    Page {
      title: "My First App"

      AppButton {
        anchors.centerIn: parent
        text: "Celebrate"
        onClicked: {
          nativeUtils.displayAlertDialog("Yay", "That is so cool!")
        }
      }
    }
  }
}

There are some more cool examples at the end of this post, make sure to give them a try!

3. Test on Android and iOS at the Same Time

You can connect all your mobile phones to the Web Editor at the same time. This means you can test how an example looks on different platforms simultaneously.

The Web Editor also displays log output of your connected devices.

 

web-ui-clients

4. Live Code Reloading in your Browser

You would like to change the example code a bit? No problem!

You can edit the code in the Web Editor and click the run button, or hit CTRL+S (CMD+S on macOS). The code reloads on your mobile phone immediately and shows the new result.

It is also possible to write your own code, or copy/paste any example to the Web Editor. You get the full log output of any connected mobile phone, to find possible errors in your code.

Cloud IDE Benefits for You

The biggest benefit was already highlighted in the introduction of this post. You can test code examples right away on your mobile phone from the browser. This works without installing any SDK on your desktop.

Besides that, it is also useful for developers that already have everything installed. You save the effort to create a new project to test an example. You can explore the documentation and test any interesting example with only a button click.

With Live Code Reloading, you can tweak the example within your browser until it fits for you.

Live Code Reloading on Desktop, Android and iOS

You can also use the V-Play Live Scripting app for development on desktop. You can find more info about V-Play Live Code Reloading in this post.

 

What’s Next for the V-Play Cloud IDE for QML

Currently the run button might also be displayed for code examples in the documentation that will not run successfully.

The majority of examples and code snippets from the V-Play Apps documentation is working fine already, and while you’re reading this the games documentation is finalized as well. This means you can already start working with the Web Editor and start saving development time!

We will update the V-Play Live Scripting app next week with an improved user interface and a project cache. You will be able to open your projects on your mobile phone also when not connected to your desktop, to show it to friends, customers or to yourself. :)

The next steps are then support for autocompletion, integrated help and Git support. This allows you to work on the same project on Desktop (with Qt Creator or any other IDE you prefer) and the web, with the V-Play Cloud IDE for QML code.

More QML Code Examples

QML Map Example

web-editor-example-map

Displays a map using the MapBox service.

import VPlayApps 1.0
import QtLocation 5.5

App {
  NavigationStack {
  
    Page {
      title: "Map Example"
    
      // show the map
      AppMap {
        anchors.fill: parent
        plugin: Plugin {
          name: "mapbox"
          // configure your own map_id and access_token here
          parameters: [  PluginParameter {
              name: "mapbox.mapping.map_id"
              value: "mapbox.streets"
            },
            PluginParameter {
              name: "mapbox.access_token"
              value: "pk.eyJ1IjoiZ3R2cGxheSIsImEiOiJjaWZ0Y2pkM2cwMXZqdWVsenJhcGZ3ZDl5In0.6xMVtyc0CkYNYup76iMVNQ"
            },
            PluginParameter {
              name: "mapbox.mapping.highdpi_tiles"
              value: true
            }]
        }
      
      }
    }
  }
}

QML List Example

web-editor-example-listview

Shows a simple list with a button to add new list items.

import VPlayApps 1.0

App {
  NavigationStack {
  
    Page {
      id: page
      title: "Add List Items"
    
      // the data model for the list
      property var dataModel: [
        { text: "Item 1" },
        { text: "Item 2" },
        { text: "Item 3" }
      ]
    
     // button to add an item
      AppButton {
        id: button
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Add Row"
        onClicked: {
          // create and add new item
          var itemNr = page.dataModel.length + 1
          var newItem = { text: "Item "+itemNr }
          page.dataModel.push(newItem)
        
          // signal change in data model to trigger UI update (list view)
          page.dataModelChanged()
        }
      }
    
     // list view
      AppListView {
        id: listView
        anchors.top: button.bottom
        anchors.bottom: parent.bottom
        width: parent.width
      
        model: page.dataModel
        delegate: SimpleRow {}
      }
    }
  
  }
}

QML AdMob Ad Banner Example

web-editor-admob-banner-example

Shows the easy integration of a native AbMob ad banner.

import QtQuick 2.0
import VPlayApps 1.0
import VPlayPlugins 1.0

App {
  NavigationStack {
    Page {
      title: "AdMob"

      AdMobBanner {
        adUnitId: "ca-app-pub-3940256099942544/6300978111"
      }
    }
  }
}

QML Physics Example

web-editor-example-ball

Simple game example where gravity pulls a ball downwards.

import VPlay 2.0
import QtQuick 2.8

GameWindow {
  Scene {
    EntityManager {
      id: entityManager
    }

    // gravity will pull the ball down
    PhysicsWorld {
      gravity.y: 9.81
    }

    // just a simple ball shaped entity
    EntityBase {
      id: entity
      width: 20
      height: 20
      x: 160
      y: 240

      Rectangle {
        anchors.fill: parent
        color: "red"
        radius: 10
      }

      // the collider enables physics behavior
      BoxCollider {
        id: collider
        anchors.fill: parent
      }
    }

    // this timer resets the ball after 3 seconds
    Timer {
      running: true
      interval: 3000
      repeat: true
      onTriggered: {
        entity.x = 160
        entity.y = 240
        collider.linearVelocity = Qt.point(0,0)
      }
    }
  }
}

 

You can find more code examples everywhere in our documentation.

The code snippets page is a compilation of several useful code examples for apps.
Go to Code Snippets Page

 

 

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


feature

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

4 Responses

  1. senkal February 15, 2018                    

    Looks interesting.
    As I understand:

    1. It’s useful to one-file project, or there is an idea to extend the functionality to muti files support?
    2. How the git integration would work?
    3. I am curious where you want to go with this, considering more like DE features being added into the on line editor.
    3. What about assets, like images?
    Probably only online available assets support?
    4. Do you need to be on the same network, similar to V-Play live server or it is not needed but what needed is the live id only?
    It’s not about security then(you can guess somebody else live id), isn’t it?

  2. V-Play Game Engine February 15, 2018                    

    Hi Marcin, great questions!

    1: Multi-file support will be added
    2: You will be able to clone any git project and push code to it
    3: It is going to be a “complete” IDE featuring debugging, code completion, integrated help, etc.
    4: The assets will be loaded from the git repo
    5: You do not need to be on the same network, access is available via cloud. We’ll add an account login to the V-Play live app soon to make sure only you can access your projects. The live-id is just for quick trying QML code without requiring a V-Play account then.

  3. Guilherme Ceschiatti Barbosa M April 1, 2018                    

    If I integrate some java code in my app, I become restricted to Android or I can deploy under iOS too?

  4. V-Play Game Engine April 4, 2018                    

    Hi Guilherme,
    if you add Java/Kotlin code, this code will only work on Android. If you want to provide cross-platform code that also works for iOS, Desktop & embedded platforms, you can do this by using QML & JavaScript or using C++.

    If you have more questions for development, you can also head over to our support forum:
    https://v-play.net/developers/forums/

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