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.)
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: Use Nodejs version 6 or later.) (Note 2: If you are on a Mac computer, you may want to 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 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.)
- Go to a directory of your choice where you will create the new APP (called here 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: Create an ionic.io account to send Push Notifications and use the Ionic View app?, you can answer no: n)
- Change to the newly create directory (again, replace MyModelApp with the name you used in the step before):
- 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.)
- 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 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:
- Exit the test server by entering q.
- You can always re-test the APP using:
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!!!