vplay-2-17-0-firebase-cloud-storage-downloadable-resources-and-more

Release 2.17.0: Firebase Cloud Storage, Downloadable Resources at Runtime and Native File Access on All Platforms

By Alex June 12, 2018

V-Play 2.17.0 introduces Firebase Cloud Storage to store local files in the cloud easily & fast. You can use it to create photo or document sharing apps without any server-side code, or even the next Facebook? It also adds downloadable resources at runtime to reduce initial package size, or to load specific resources only on demand. FileUtils give you convenient access to the native device file system. You can check out two new app demos for using C++ with QML, use new Qt modules with V-Play Live and much more. This is a big update, don’t miss it!

New Firebase Storage to Upload Local Files to the Cloud

With the new FirebaseStorage item you can upload files to the Firebase Cloud Storage. It uploads local files to the cloud file system and returns the public download URL. With Firebase, you can create content sharing apps like Facebook or Snapchat without additional server-side code.

Examples for local files you can upload are:

Here is a code example, that shows how to upload an image taken with the camera. After the image is uploaded, we display it in the app.

vplay-camera-picker-and-firebase-cloud-storage-upload

NOTE: This example uses a public Firebase storage instance, don’t upload any sensitive data!

import QtQuick 2.0
import VPlayApps 1.0
import VPlayPlugins 1.0

App {
  
  NavigationStack {
    Page {
      title: "Firebase Storage"
      
      FirebaseStorage {
        id: storage
        
        config: FirebaseConfig {
          id: customConfig
          
          projectId: "v-play-live-client-test-db"
          databaseUrl: "https://v-play-live-client-test-db.firebaseio.com"
          storageBucket: "v-play-live-client-test-db.appspot.com"
          
          //platform dependent - get these values from the google-services.json / GoogleService-info.plist
          apiKey: Qt.platform.os === "android" ? "AIzaSyD3Pmw89NHhdG9nGIQWwaOB55FuWjcDSS8" : "AIzaSyCheT6ZNFI4mUwfrPRB098a08dVzlhZNME"
          applicationId: Qt.platform.os === "android" ? "1:40083798422:android:ed7cffdd1548a7fa"  : "1:40083798422:ios:ed7cffdd1548a7fa"
          
        }
      }
      
      AppFlickable {
        anchors.fill: parent
        
        Column {
          width: parent.width
          anchors.margins: dp(12)
          
          AppButton {
            text: "Capture image + upload"
            onClicked: nativeUtils.displayCameraPicker()
          }
          
          AppText {
            id: status
            text: "Idle"
          }
          
          // this will display the image after it's uploaded
          AppImage {
            id: img
            width: parent.width
            fillMode: AppImage.PreserveAspectFit
            autoTransform: true
          }
        }
      }
    }
  }
  
  Connections {
    target: nativeUtils
    onCameraPickerFinished: {
      if(accepted) {
        //picture taken with camera is stored at path - upload to Firebase Storage
        storage.uploadFile(path, "test-image" + Date.now() + ".png", function(progress, finished, success, downloadUrl) {
          if(!finished) {
            status.text = "Uploading... " + progress.toFixed(2) + "%"
          } else if(success) {
            img.source = downloadUrl
            status.text = "Upload completed."
          } else {
            status.text = "Upload failed."
          }
        })
      }
    }
  }
}

Download Resources at Runtime

DownloadableResource allows downloading app and game assets on demand during runtime. You no longer need to include all resources like images or videos in the app binary. This results in smaller downloads from the app stores. Cut down your 500MB training app to e.g. only 30MB, and let the user download your workout videos on demand!

The most popular use cases for downloadable packages are:

  • You want to keep your app store binary as small as possible for the first download, to increase the download numbers of your app or game with a smaller download size.
  • You want to download additional content packages after in-app purchases.
  • Keep your initial app size below the store limits:
    • On Google Play, your initial apk size must be below 100MB, after that you need to use Android expansion files. To avoid that, you can just use DownloadableResource and download the additional files at a later time.
    • On iOS, your initial binary size limit is 150MB for mobile network downloads. If your binary is bigger, the user can only download your app over WiFi. Downloading additional resources later also helps you to avoid this limit.
    • With the V-Play DownloadableResource component, you can create a cross-platform solution to work with downloadable resources, that works for both iOS AND Android. It even works on Desktop too, with a single source code for all platforms! This way, you do not need to deal with Android expansion files and can create a working solution for all platforms instead.

Here is a small example how you could use it: it downloads and extracts a zip archive including an image to the default location after 5 seconds. Then it replaces the placeholder image with the downloaded image:

import VPlayApps 1.0
import QtQuick 2.0
import VPlay 2.0

App {
  
  // uncomment this to remove the resources on startup, so you can test the downloading again
  //Component.onCompleted: resource1.remove()
  
  // after 5 seconds, we download the resources
  Timer {
    running: true
    interval: 5000
    onTriggered: {
      resource1.download()
    }
  }
  
  NavigationStack {
    Page {
      title: "Downloadable Resource"
      
      DownloadableResource {
        id: resource1
        
        extractAsPackage: true // true for zip archives
        source: "https://v-play.net/web-assets/girl.zip"
      }
      
      AppImage {
        width: parent.width
        fillMode: AppImage.PreserveAspectFit
        // as long as the resource file is not available, we use a placeholder image
        // (the example placeholder is actually also from a web url, to be usable with the web editor)
        // if the resource is available, we get the extracted file url and set it as new image source
        // on your next app start (or live reload) the resource will be available immediately and not downloaded again
        source: resource1.available ? resource1.getExtractedFileUrl("girl.jpg") : "https://v-play.net/web-assets/balloon.png"
      }
    }
  }
}

You have full information about the download, with properties like status, progress and available. You know exactly when resources are available or when to show a loading indicator.

DownloadableResource can load files from any HTTP(S) web addresses. You can add a secret to protect and restricts downloads to your app or game only. You can download single files or entire .zip-archives, which are automatically extracted.

Once a resource is downloaded, you can use it like any other asset. On your next app start, the resource will be available right away.

FileUtils Class for Cross-Platform Native File Access

You can use the new FileUtils context property to open, read, copy or delete files and folders on any device.

This is an example to download a PDF file and then open it with the native PDF viewer application, using FileUtils::openFile():

vplay-download-pdf-and-open-native-viewer

import VPlayApps 1.0
import QtQuick 2.0
import VPlay 2.0

App {
  id: app
  // uncomment this to remove the resources on startup, so you can test the downloading again
  //Component.onCompleted: pdfResource.remove()
  NavigationStack {
    Page {
      title: "Download PDF"
      
      Column {
        anchors.centerIn: parent
        
        AppButton {
          text: "Download / Open"
          onClicked: {
            if(pdfResource.available) openPdf()
            else pdfResource.download()
          }
        }
        AppText {
          text: "Status: " + pdfResource.status
        }
      }
    }
  }
  DownloadableResource {
    id: pdfResource
    source: "http://www.orimi.com/pdf-test.pdf"
    storageLocation: FileUtils.DocumentsLocation
    storageName: "pdf-test.pdf"
    extractAsPackage: false
    // if the download is competed, available will be set to true
    onAvailableChanged: if(available) openPdf()
  }
  function openPdf() {
    // you can also open files with nativeUtils.openUrl() now (for paths starting with "file://")
    //nativeUtils.openUrl(pdfResource.storagePath)
    // with V-Play 2.17.0 you can also use fileUtils.openFile()
    fileUtils.openFile(pdfResource.storagePath)
  }
}

Two New App Examples How to Integrate C++ with QML

You can check out and copy parts from two brand-new app demos that show how to integrate C++ with QML!

Exposing a C++ Class to QML

The first example shows the different forms of C++ and QML integrations. This example is the tutorial result from How to Expose a Qt C++ Class with Signals and Slots to QML.

Path to the app demo: <Path to V-Play>/Examples/V-Play/appdemos/cpp-qml-integration

Display Data from C++ Models with Qt Charts

The second example shows how to combine a C++ backend that provides the model data for a frontend created in QML. The data is displayed with QML with Qt Charts for both 2D and 3D charts. It also includes shader effects, because, why not?

vplay-cpp-backed-charts-example

Path to the app demo: <Path to V-Play>/Examples/V-Play/appdemos/cpp-backend-charts-qml

Live Client Support for Bluetooth, NFC and Pointer Handlers

The V-Play Live Client now supports the Qt modules for Bluetooth, NFC and Pointer Handlers.

Network Adapter Selection in Live Server

You can now change the used network adapter in the Live Server. This fixes a possible issue that the mobile Live Client stalls in the “Connected – Loading Project” screen. If you also face this issue, here is how to fix it.

Open the settings screen from the lower left corner of your Live Server:

vplay-live-server-settings-icon

Now you can change the selected network adapter:

vplay-live-server-network-adapter-settings

This IP is sent to the Live Client to establish the connection. You can try to select different adapters, the IP of the Live Server and Live Client should be in the same network.

More Features, Improvements and Fixes

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!

For a full list of improvements and fixes to V-Play in this update, please check out the change log!

 

 

 

More Posts Like This

 

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

vplay-update-2.16.1-live-client-module-live-code-reloading-custom-cpp

Release 2.16.1: Live Code Reloading with Custom C++ and Native Code for Qt

teaser-iphonex-support-and-runtime-screen-orientation-change-705px

Release 2.16.0: iPhone X Support and Runtime Screen Orientation Changes

new-firebase-qt-features-live-code-reloading-qt-5-10-1-vplay-release-2-15-1
Release 2.15.1: New Firebase Features and New Live Code Reloading Apps | Upgrade to Qt 5.10.1 & Qt Creator 4.5.1

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