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

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