Easy Java Simulations Wiki | Main / How to create iOS and Android Apps

(Note: Applies to EJS Version 6.0 and beyond, and IONIC version 2.)

This short guide explains how to create an iOS or Android App from your current EJS simulation (i.e. the process to follow to correctly use the Create Single App option of EJS menu.)

The steps to follow are:

1. Install the software platform called IONIC in your computer that allows you to create APPS from a given project structure. IONIC provides tools to create JavaScript+HTML programs that run on mobile devices as if they were native apps.

2. Create a basic IONIC project.

3. Use EJS to overwrite the IONIC basic project with the simulation files. That is, EJS helps you modify the contents of the basic project to create an APP that displays your simulation.

4. Test your modified IONIC project.

5. Fine-tune and deploy your App.

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.)

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: At the moment of this writing Nodejs current version is 8.11.3.) (Note 2: If you are on a Mac computer, use sudo or follow these instructions.)
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

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 basic IONIC project for your app

We now exemplify the creation of an IONIC project called, say MyModelApp. In what follows, replace the word MyModelApp with 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.)

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

cd MyAppsFolder

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: Would you like to integrate your new app with Cordova to target native iOS and Android? (y/N) , you can answer no: n)
(When asked: Install the free Ionic Pro SDK and connect your app? (Y/n) , you can answer no: n)

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

cd MyModelApp

Add target platforms iOS and Android:

ionic cordova platform add ios
(Actually, this 'add' is not needed on Mac OSX.)

ionic cordova platform add android
(You may need to edit the /android/project.properties file, to set the correct Android target version for your device.)

Add particular plug-ins that we use in our projects:

npm install @ionic-native/keyboard --save

npm install @ionic-native/splash-screen --save

npm install @ionic-native/screen-orientation --save

Step 3: Use EJS to overwrite the basic project files

Load your favourite simulation in EJS and Select the Create Single App option in EJS menu. When prompted to select a directory, choose your newly created IONIC project folder (in our example, MyModelApp).

This is all there is. Your IONIC project now has all the simulations files in place to make your simulation run as an App.

Step 4: Test the app

You are now ready to test the app.

To test the APP:
ionic serve

This will show the app as a new page in your favourite browser in your computer. If you have the Ionic DevApp (available for free in your favourite App Store), you can also use test the app in your Device.

Exit the test server by clicking 'Control-c'.

Step 5: Fine tune and deploy the app

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

You may want to edit some of the entries in IONIC files of your project:
- ionic.config.json
- package.json
Change the icon and splash images in resources and type: ionic cordova resources (for IONIC to create platform specific images).
Make sure you use images of the same size of those you replace. The conversion may fail otherwise.
Note: The command may ask you to sign in Ionic Pro. You can sign in using the Ionic free option.
To test or deploy to an iOS device, follow these details on running an App in an iOS device
To test or deploy to an Android device, follow these details on running an App in an Android device