Create Native Applications in ExtJS 6

Introduction

This article covers build process of the ExtJS projects in native applications, under widespread mobile platforms (Android, iOS, Windows Phone) by means of Cordova/PhoneGap.

ExtJS — multifunction framework for creation of SPA applications. In the version (6.0) last at the moment there is an opportunity to use two different toolkit’a, namely classic and modern. Classic — is intended for creation of standard web applications. Modern — is intended for creation of mobile web applications, its difference in support of touch of events and adaptive imposition. It is necessary to mention that, some components in modern differ from classic, namely: name of events and kontrol. In this article build process of the native application only under Android (cloud and local build) with useof Modern toolkit is considered.

Creation of the ExtJS project

For creation of the first application we to be necessary to download and set software following:

We unpack archive with ExtJS 6. We create a directory in which there will be our project. Let’s create our application the following command:

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

Operability of the application can be checked command being in a root directory of the project:

sencha app watch
image
Sencha

In case of success webserver on port 1841 has to rise, it is possible to browse our created application in the mode of mobile viewing in the browser. Has to be that that reminding it:

Creation of native applications

For creation of native applications, it is possible to use two different tools: PhoneGap or Cordova. Both tools serve as a layer between the native OC and ExtJS environment. Installing different plug-ins for them, it is possible to get access to the OS native functions, for example access to the camera or to services of a geo-location. It is necessary to mention that PhoneGap is based on the source code Cordova, also PhoneGap allows to collect the application in a cloud that allows not to set different SDK from all target platforms. And it is indisputable plus because for example at assembly it is necessary to use applications in Windows under iOS remote build (the machine with set to Mac OS X and XCode has to be available). PhoneGap is free for the free applications located on github.com, it is free of charge allowed to have 1 private appendix. For the PhoneGap and Cordova installation it is necessary to set nodejs. For Windows nodejs it is necessary to download, in linux’e most likely it is if there is no Google in the help. Further we set PhoneGap and Cordova:

npm install cordova

 

npm install phonegap

Surely check installation by commands:

cordova -v

 

phonegap -v

Further, for assembly under Android it is necessary to download SDK and to set the following API Level (15, 16, 21, 22, 23). At will it is possible to configure test devices for emulation of Android’a (it is recommended to emulate Android x86, t.k emulation of ARM processors slower). Sencha Cmd has native support of cordova &phonegap.; For its adding in the project, we will make changes to a configuration file of our app.json application (we will add the section builds):

    "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 it is possible to execute command for assembly of apk:

sencha app build cordova-native

Collected debug apk has to be available on the next way \cordova\platforms\android\build\outputs\apk\android-debug.apk.
For assembly by means of PhoneGap it is necessary to create the local.properties file in a project root, it has to contain your login and the password for an input in build service PhoneGap:

phonegap.username=yourusername
phonegap.password=superpassword

Further it is possible to start assembly of the project in a cloud

sencha app build phonegap-native

 

Signing of the native Cordova applications

For a start you need to generate keystore the file the containing your private key for the publication:

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

Be attentive, do not forget passwords which you specified at generation and alias_name.

In order that release (signed) and debug apk automatically gathered, it is necessary to change file/.sencha/app/cordova-impl.xml, to find a line:

<x-shell reloadprofile="true" dir="${app.cordova.config.path}">
          cordova ${cordova.cli.options} build ${cordova.platforms.clean} 
</x-shell>

And to add after this tag, one more x-shell:

<x-shell reloadprofile="true" dir="${app.cordova.config.path}">
          cordova ${cordova.cli.options} build ${cordova.platforms.clean} --release
</x-shell>

Further it is necessary to create the /cordova/platforms/android/release-signing.properties file of the following contents:

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

Also for it is necessary to execute the operation zipalign for subhand-written apk, for this purpose it is necessary to make changes in / cordova/platforms/android/build.gradle:

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

Now it is possible to collect locally release and debug of assembly using command:

sencha app build cordova-native

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

Signing of the native PhoneGap applications

Here everything is simple, the file you have to load the keystore on the website, having also specified all passwords to it. After this PhoneGap will collect your application under all platforms which are available for it automatically (iOS, Android, Windows Phone) if you have for them keys.

(Visited 67 times, 1 visits today)
Intro to Java. Unit 2. Part 2. Intro to Git
Complete List of Useful Sencha Cmd Commands

Comments

comments

Leave a Reply

Your email address will not be published. Required fields are marked *