Recent Changes - Search:

Information

Installation

Documentation

 

Create Book Apps

Steps to create an BookApp from a collection of EjsS prepackaged models

 

This short guide explains how to create an iOS or Android App which looks like a book and contains a number of  prepackaged models (i.e. from the ZIP file you obtained with the Prepackage for BookApp option of EjsS menu.)

 

Important note: Before you start with the process, please make sure that you generated all the models with the following Export options 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.
  • Include full JS library. This saves space.

 

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:
    (Notes: The $ character indicates the operating system prompt. 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 MyBookApp blank
This takes a few seconds… and creates a new directory (called MyModelApp) in your hard disk.
(When asked: Create an ionic.io 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 MyBookApp

 

  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/project.properties 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 ejss_app_XXX.zip)

 

  • 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 lib folder 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:
    www/other_pages/about.html
    www/other_pages/copyright.html
    www/other_pages/cover.html
    www/other_pages/references.html
    www/other_pages/title_page.html

 

  • 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/MyBookApp.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:
        ”$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include”
      • 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 successfull, 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.

 

And that’s it!!!



Edit - History - Print - Recent Changes - Search
Page last modified on August 10, 2016, at 07:41 PM