Creating Hybrid Mobile Application Based on Polymer Client with Cordova and PhoneGap


The aim of this webinar is to create hybrid mobile application from the CUBA’s Polymer client using Apache Cordova framework and use PhoneGap service to build the application remotely.

Introduction

Nowadays web technologies are actively used for creation of mobile apps. Fundamentally there are several approaches on how it can be achieved:

  1. Progressive web applications also known as PWA - set of techniques to say to mobile browser and OS that application can be used on the mobile device. This approach assumes using browser APIs and does not require to build or compile native app, so it’s the most promising technology for web developers (because it eliminates all the hustle around tooling). As a result you have the same application for all platforms: desktop browsers, mobile devices. Unfortunately it’s under active development right now and many features like service workers are supported only in a cutting edge devices and platforms.
  2. Another growing in popularity approach is JavaScript to native. This approach is used by ReactNative and NativeScript for example. It is somehow related to web development because you use Javascript language and JS frameworks in order to create app but the thing is that your app is not being rendered by a browser engine, instead its UI compiles to a native code. This approach provides the smoothest User experience but the drawback is that you do not create a regular web application anymore, it cannot be displayed in browser and in most cases you have to develop separate apps for each platform (because you have different set of UI components for each platform).
  3. Hybrid mobile applications. This one is used by Apache Cordova. In this mature approach we still build web application which can be used in browser. What Cordova does is getting your app (static files and other assets), and wrapping it into native app (build process required) so that our web app is displayed in the WebView inside the native app. So you have a single code-base for all platforms. This approach in particular is used by the Ionic framework.
So main benefits of this approach:
  1. Currently it’s more reliable than PWA, for example it terms of working offline.
  2. We are able to use device APIs and functions by means of plugins. Cordova plugin is written in native code and works like a bridge between JavaScript and native APIs
  3. Our app still can be targeted to regular browsers.

The detailed info about Cordova is available on the official website: https://cordova.apache.org/

Requirements

Android SDK and Node.js should be installed on your machine.

Step-by-step Guide

  • Create Polymer client using CUBA Studio
  • Install cordova cli
    npm install -g cordova
  • Create Cordova App using cordova create command:
    cd <project dir>/modules/polymer-client/
    cordova create cordova com.example.demo Demo
    Cordova CLI will generate required directory structure in the cordova directory. Skeletal web application will be generated in the www sub-directory. In our approach we will replace it by assembled Polymer client in a build time.
  • Clear www directory
    rm -rf cordova/www/*
  • Add www directory to .gitignore:
    echo www/* > cordova/.gitignore
  • Add Android Platform to our Cordova project:
    cd cordova
    cordova platform add android
  • Add new build config to polymer.json:
     "builds": [
        ...
        {
          "name": "cordova",
          "preset": "es5-bundled",
          "addServiceWorker": false
        }
        ...
      ]
    
  • Remove <base> tag from index.html. For other build targets it will be added by polymer tooling automatically according to the basePath config option.
  • Add Cordova CLI as a devDependency in polymer-client/package.json:
    ...
      "devDependencies": {
        ...
        "cordova": "^7.1.0"
      }
    ...
    
  • Now it's time to tweak polymerClientModule in our main build.gradle: The following task installs cordova tooling:
    task installCordovaPackages(type: NpmTask) {
        args = ['install']
        execOverrides {
            it.workingDir = 'cordova'
        }
    }
    The following tasks copies assembled Polymer client into the cordova/www folder:
    task prepareCordova(type: Copy, dependsOn: [assemble]) {
        from file('build/cordova')
        into "cordova/www"
    }
    The following task runs cordova cli in order to build mobile app:
    task buildCordova(type: NodeTask, dependsOn: [prepareCordova, installCordovaPackages]) {
        script = file('node_modules/cordova/bin/cordova')
        args = ['build']
        workingDir 'cordova'
    }
    Now you should be able to build mobile app using gradle:
    ./gradlew buildCordova

Conclusion

The webinar demonstrates basic approach of creating mobile application based on CUBA Polymer client using Apache Cordova.

Source Code

https://github.com/cuba-labs/polymer-cordova

Questions?

Visit our forum: https://www.cuba-platform.com/discuss/