Setting up the development environment

It is important to understand the development environment setup to start developing a Ashera application. Ashera Native has various scripts which aids in cross platform development.

Some of these scripts have to be executed when a particular action has been performed and few others scripts have to be running continuously in the background.

Lets us understand the complete dev setup required.

IDE Setup

It is recommended to Android Studio as the ide for ui development.

Use android studio to open the android folder of cordova as shown below:

Development Tips

Open two terminals in Android Studio and run the following commands:

npm run generate-platform-js
npm run generate-platform-res

This will ensure that resources and index js file are continuously updated.

If you add image in drawable-xxxhdpi folder,

npm run generate-platform-drawable or restart npm run generate-platform-res

If you are removing android platform, ensure that you back up and restore android files in res and tsc folder.

npm run backup-android
npm run restore-android

It is recommended to Visual Studio Code as the ide for js development.

Use Visual Studio Code to open the tsc folder in android platform as shown below:

Development Tips

The webview fragment has to be created for every top level ui xml created in android studio. Also backing command for every widget has to be written using the @Inject.

To automate this, ashera provides useful tags when declared will auto generate this:

fragment="CatHello"

By using this tag in top level ui xml, you create a file named CatHello.ts automatically.

autoInject="true"

By using this tag in top level ui xml, you create a @Inject tag in the CatHello.ts automatically.

Development Tips

Do not modify code written between //start and //end. This will be overwritten by the scripts which generate ts code.

Running app

To run the app on the platform use the following:

Android

To run app on Android, use Android Studio run button by creating a emulator or on your device. This is the recommended approach for Android :)

Alternately use cordova run android

Ios

To run app on Ios, open <project>.xcworkspace in XCode. Run the app on emulator or on your device. This is the recommended approach for ios :)

Alternately use cordova run ios

Swt

To run app as desktop application, use npm run swt

Browser

To run app on browser, use npm run browser Type http://localhost:8080 in browser, to access the application.