• View
• Edit
• History
• Print

How to create iOS and Android BookApps

(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 that looks like a book with a number of previously packaged (ZIP) simulations (i.e. the process to follow to correctly use the Create Book App option of EJS menu.)

Important note: Before you start with the process, please make sure that you generated all the models with the following Export option checked:

• Write Javascript in a separate file. If you don't, we have detected that some (but not all) models may fail to run as Apps.

The steps to follow are:

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

3. The next two commands install specific packages that we will use in our particular projects:

Step 2: Create a basic IONIC project for your app

We now exemplify the creation of an IONIC project called, say MyBookApp. In what follows, replace the word MyBookApp with the name you chose for your new book 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).

2. Create a new blank IONIC project:

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

4. Add target platforms iOS and Android:

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

Step 3: Use EJS to overwrite the basic project files

Select the Create Book App option in EJS menu and use the creation dialog to configure your Book App. When ready, click OK and, when prompted to select a directory, choose your newly created IONIC project folder (in our example, MyBookApp).

This is all there is. Your IONIC project now has all the simulations files in place to make all your simulations configure a Book 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