Tutorial - Application Packager

Exporting the project

You can now export projects as zip files through the editor. Make sure the project you want to export is the currently opened project and that you had a successful build
Then on the right hand side menu, choose project/package


Mobile Application Packaging

Download zip file

Make sure you wait that export complete, this could take up to a few tens of seconds depending on size of project, as it has to be recompiled and all assets compressed into zip file
If you had a clean build beforehand you should be able to download the zip file once packaging completed
If you want to publish on web, you just have to unpack on your webserver and call the project through the index.html file
If you want to package to iphone/ipad, android, wp8, windows 10 and chrome application, you have now to use Intel XDK that you can download freely here : Intel XDK


Intel XDK Application Packaging

Create an Intel XDK project

Once you have install Intel XDK, create a new project on the top left corner of main window


Cordova Application Packaging

Standard HTML5 Blanck project

Choose as project template standard HTML5 blanck project. Soon we will offer plugins for adding ad networks, in-app purchases, socials, multi-player etc.. and you will use HTML5 + Cordova, but at the moment we will just use Standard HTML5
Create a folder on your file system that you will use as repository for all you Sprite Basic Projects Packaging and give your project a name
In our case, the Sprite Basic downloaded is INTROS (it is the demos on home screen of site), we will use same name for XDK project (but you can use different one, add versioning etc..)


HTML5 Application Packaging

The Editor

In the project directory created under you project repository, locate the www folder. Copy the zip file download from Sprite Basic website, unzip it, then delete zip file.
You should now have a directory named according to your Sprite Basic project within the www directory


Javascript to Mobile Application Packaging

Set the Intel XDK source folder

In Intel XDK, click on 'Projects' on the top left corner, then change the source directory from 'www' to 'www/projectname'


Mobile Devices Application Packaging

The Emulate Tab

You can now check your project in the 'Emulate' tab


Basic Application Packaging

Android Build Setting Window

On the project pane, locate the Android Build Settings and enter a package name for your project. Leave checked 'Android Cordova WhiteList'


Intel XDK Packager

Signing Android Project

You have now to sign you project with a your developer certificate. If you don't have any, you can create one through Intel XDK. Personnaly i had created previously a certicate using Windows commands window, imported it and used it for all of my projects.
To import a certificate, you have to first place it in your source directory. Details on how to create a signing certificate using Keytool can be found here http://lessons.livecode.com/m/4069/l/32674-how-do-i-create-a-self-signed-certificate-for-an-android-app
You will need to have Java JDK installed on your computer
When you create your certificate, you will have to enter a passphrase, make sure to save it safely as you will be prompted for it upon build


Cordova Packager

Signing iOS Project

To publish on iphone/ipad, you also have to sign your project, with a developer certificate. If you don't have one, you can create one through Intel XDK
Personnaly, i used a certificate created on Mac. Details on how to do can be found here https://software.intel.com/en-us/xdk/articles/walkthrough-obtain-ios-dev-cert
You will need to be a registered as an iOS developer to do so, which you need to be also to publish on App Store
Then you need to create still from https://developer.apple.com/ a provisonning profile and place it in your source directory
To test on your device, create an AdHoc profile, to publish on AppStore, create a Production Profile


HTML5 Packager

Building Projects

Once you signed correctly on android and set a correct profile on iOS, you can now go to the build tab and check the devices you want to build on. You will need to unlock your certificates by entering the passphrase set upon certificate creation.
Then just click start builds and you will received your packaged applications through your mail box. You'll just have to click on links to install on your devices or save them to publish on App Stores. Same process can be used to package for WP8, Windows 10, Chrome Apps.
Happy packaging !


Web GL Mobile Application