Building native applications in ExtJS 6

Introduction

Good evening, this article highlights the process of building ExtJS projects into native applications, for common mobile platforms (Android, iOS, Windows Phone) using Cordova / PhoneGap .

ExtJS is a multifunctional framework for creating SPA applications. In the latest version currently (6.0), it is possible to use two different toolkits, namely classic and modern . Classic - designed to create standard web applications. Modern- Designed to create mobile web-applications, its differences in support for touch events and adaptive layout. It should be noted that some of the components in modern differ from classic, namely: the name of events and controls. This article describes the process of building a native application only for Android (cloud and local build) using the Modern toolkit .

Creating an ExtJS Project

To create the first application, we need to download and install the following software:

• Sencha cmd
• ExtJS 6 (GPL v3)

Unpack the archive with ExtJS 6. Create a directory in which our project will be located. Let's create our application with the following command:

sencha -sdk "\path\to\framework" generate app -modern TestApp "\path\to\application"

The health of the application can be checked by the command from the root directory of the project:

sencha app watch

If successful, webserver should rise on port 1841, you can view our created application in mobile viewing mode in a browser. There must be something reminiscent of this:

Creating native applications

To create native applications, you can use two different tools: PhoneGap or Cordova. Both tools serve as a layer between the native environment of OC and ExtJS. By installing various plugins for them, you can access the native functions of the OS, for example access to the camera or to geolocation services. It should be noted that PhoneGap is based on the source code of Cordova, and PhoneGap also allows you to build the application in the cloud, which allows you to not install various SDKs from all target platforms. And this is an undeniable plus, because for example, when building an application on Windows for iOS, you will have to use remote build (a machine with Mac OS X and Xcode installed must be available). Phonegap is free for free apps located on github.com, it is free to have 1 private application. To install PhoneGap and Cordova, you need to install nodejs. For Windows, nodejs must be downloaded , in linux it most likely is, if there is no google to help. Next, install PhoneGap and Cordova:

npm install cordova

npm install phonegap

Be sure to check the installation with the commands:

cordova -v

phonegap -v

Next, to build for Android, you need to download the SDK and install the following API Level (15, 16, 21, 22, 23). Optionally, you can configure test devices to emulate Android'a (it is recommended to emulate Android x86, because emulation of ARM processors is slower). Sencha Cmd has native cordova & phonegap support. To add it to the project, make changes to the configuration file of our app.json application (add the builds section):

    "builds": {
        "cordova-native": {
            "packager": "cordova",
            "cordova": {
                "config": {
                    "platforms": "android", // Для cordova указывать целевые платформы через пробел
                    "id": "com.test.test"
                }
            }
        },
        "phonegap-native": {
            "packager": "phonegap",
            "phonegap" : {
                "config": {
                    "platform": "android",
                    "remote": true, // Сборка в облаке
                    "id": "com.test.test"
                }
            }
        },
        "modern": {
            "toolkit": "modern",
            "theme": "theme-triton"
        }
    },

After that, you can run the command to build apk:

sencha app build cordova-native

The assembled debug apk should be available at the following path \ cordova \ platforms \ android \ build \ outputs \ apk \ android-debug.apk.
To build using PhoneGap, you need to create the local.properties file in the root of the project, it must contain your username and password to enter the build service PhoneGap :

phonegap.username=yourusername
phonegap.password=superpassword

Next, you can start building the project in the cloud

sencha app build phonegap-native

Signing Cordova Native Applications

First you need to generate a keystore file containing your private key for publication:

keytool -genkey -v -keystore my-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Be careful, do not forget the passwords that you specified when generating and alias_name.

In order for release (signed) and debug apk to be automatically collected, you need to change the /.sencha/app/cordova-impl.xml file, find the line:

          cordova ${cordova.cli.options} build ${cordova.platforms.clean} 

And add after this tag, another x-shell:

          cordova ${cordova.cli.options} build ${cordova.platforms.clean} --release

Next, you need to create the file /cordova/platforms/android/release-signing.properties with the following contents:

storeFile=/relative/path/to/keystore/file
keyAlias=alias_name
storeType=jks
keyPassword=mypwd
storePassword=mypwd2

Also, for it is necessary to perform the zipalign operation for the signed apk, for this it is necessary to make changes to /cordova/platforms/android/build.gradle:

buildTypes {
          release {
                    signingConfig signingConfigs.release
                    zipAlignEnabled true
                  }
}

Now you can locally build release and debug builds using the command:

sencha app build cordova-native

The resulting apk files will be available in \ cordova \ platforms \ android \ build \ outputs \ apk \.

Signing PhoneGap Native Applications

Everything is simple here, you must upload your keystore file on the site, also indicating all the passwords for it. After that, PhoneGap will collect your application for all the platforms it has automatically (iOS, Android, Windows Phone) if you have keys for them.