Recent Changes - Search:





Creating Single Apps

Steps to create an App from an EjsS prepackaged model


This short guide explains how to create an iOS or Android App from your prepackaged model (i.e. from the ZIP file you obtained with the Prepackage for App option of EjsS menu.)


You need to install a software platform called IONIC in your computer that allows you to do so. IONIC provides tools to create JavaScript+HTML programs that run on mobile devices as if they were native apps. EjsS just helps you prepare the contents of such a program to boost your IONIC process.


Step 1: Install IONIC in your computer (if you haven’t done so before)


The tasks in this step need to be done only once, no matter how many IONIC Apps you create.
(Note: You need Internet connection for this.)


  1. Before we start, make sure you have Node.js installed in your system. This you have to do by following the indications provided in the Node.js site (follow the link). (Note: Use Nodejs version 6 or later.) (Note 2: If you are on a Mac computer, you may want to follow these instructions.)


  1. The next two commands install the generic cordova and ionic platforms:
    (Note: Enter the command as indicated below. We exemplify the procedure for Mac OSX - which requires a sudo prefix.)
sudo npm install -g cordova
sudo npm install -g ionic


  1. The next two commands install specific packages that we will use in our particular projects:
sudo npm install angular-ui-router
sudo npm install angular-sanitize


Step 2: Create a new IONIC project for your app


We now exemplify the creation of an IONIC project called, say MyModelApp. In what follows, replace the word MyModelApp by the name you chose for your new app.


The tasks below need to be done once per model App you create.
(Note: You need Internet connection for this.)


  1. Go to a directory of your choice where you will create the new APP (called here MyAppsFolder).
cd MyAppsFolder


  1. Create a new blank IONIC project:
ionic start MyModelApp blank
This takes a few seconds… and creates a new directory (called MyModelApp) in your hard disk.
(When asked: Create an account to send Push Notifications and use the Ionic View app?, you can answer no: n)


  1. Change to the newly create directory (again, replace MyModelApp with the name you used in the step before):
cd MyModelApp


  1. Add target platforms iOS and Android:
ionic platform add ios
(Actually, this ‘add’ is not needed on Mac OSX.)
ionic platform add android
(You may need to edit the /android/ file, to set the correct Android target version for your device.)


  1. Add particular plug-ins that we use in our projects:
cordova plugin add cordova-plugin-screen-orientation
cordova plugin add cordova-plugin-inappbrowser
cordova plugin add cordova-plugin-wkwebview-engine
(This last one is optional. Might improve speed on speed-savvy simulations.)


Step 3: Copy files from your prepackage to the IONIC project


Now, we will extract the prepackaged files created with EjsS and work to modify the www folder of your project:


  • UNZIP the file you created with EjsS (typically called


  • From the extracted folder copy all files and subfoldersinto your project’s www folder, even if this means replacing existing files and folders. (Actually, only the project’s libfolder will remain unchanged.)


Step 4: Test and build the app


You are now ready to test and build the app


  • To test the APP:
    ionic serve


  • Exit the test server by entering q.


  • Fine tunning the APP: You may want to manually revise the following files in your IONIC project:
    (This one may not be present if your description pages had no external links.)


  • You can always re-test the APP using:
    ionic serve


Step 5: Deploying the app


There are a few final steps required to deploy your App to your mobile device.


  • You may want to edit the following entries in IONIC files of your project:
    • bower.json: Change the name property.
    • config.xml: Change the name, description and author entries.
    • package.json: Change the name and description entries.


  • Change the icon and splash images in resources and type: $ ionic resources (for IONIC to create platform specific images.)
    Make sure you use images of the same size of those you replace.


  • To create an XCode project for iOS, type: $ ionic build ios
    • Open the platform/ios/MyModelApp.xcodeproj file with XCode.
    • You can run on your iPad (connect it with a cable to your Mac) and it should work.
    • Before exporting you may need to do a number of things:
      • Add this line to your Build Settings → Header Search Paths:
      • Prepare a distributable archive (for registered iOS devices): Product : Archive


  • To test for Android, type: $ ionic build android
    This process can produce a number of errors. Mainly because you need to install the Android SDK tools required for compilation of Androids apps for the target version indicated by the Ionic project. For this, you may need to run the Android SCK Manager and install a number of packages.
    When successful, the last message will tell you where is the android-debug.apk file that was generated. Send this file to your Android devide and install it. It should work.

to package for Google Play Store, try to release version, instead of a debug.apk



Step 6: Publishing in Google Play Store

$ ionic build android - - release
to overcome the zipalign problem with submitting to Google Play store, try to download earlier versions of Android SDK and copy the file zipalign.exe to the same directory of SDK23 depending on which latest version of the SDK you are using to compile the apk. It should work but it is not tested yet by @lookang
this link should be useful

Step 7: Publishing in Apple Store

to be filled in


And that’s it!!!

Edit - History - Print - Recent Changes - Search
Page last modified on December 19, 2016, at 10:11 PM