Recent Changes - Search:




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:

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 simulations files. That is, EJS helps you modify the contents of the basic project to create an APP that displays a book with all your simulations.
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.)

  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.)
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 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).
$ cd MyAppsFolder
  1. Create a new blank IONIC project:
$ ionic start MyBookApp blank
This takes a few seconds... and creates a new directory (called MyBookApp) 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)
  1. Change to the newly create directory (again, replace MyBookApp with the name you used in the step before):
$ cd MyBookApp
  1. 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/ file, to set the correct Android target version for your device.)
  1. 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

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
Edit - History - Print - Recent Changes - Search
Page last modified on August 14, 2018, at 11:48 PM