In this series, we will cover:
- Setting up sample project for native packaging
- Packaging as Web Application
- Packaging for iOS Simulator
- Packaging for iOS device
- Packaging for Android Emulator
- Packaging for Android device
- Android Developer Tools (ADT) Bundled Eclipse – required for Android development
- Apache Cordova 2.4.0 – required for using device features and packaging the application for different platforms
- Sencha Touch 2.2.1 library – Sencha Touch SDK
- XCode 4 – required for iOS development
- Blackberry WebWorksSDK– required for Blackberry development
While Apache Cordova provides the complete packaging capabilities, it may not be desirable in all the cases. As an alternative, we can use Sencha Cmd that is offered by Sencha as a convenient command line tool to manage various project related tasks, including native packaging. This is a good news because – (1) it breaks the dependency on the Cordova libraries (2) it ensures that the framework and applications, built using it, can evolve independent of Cordova’s capabilities.
Sencha Cmd tool helps us do the following:
- Create Sencha Touch project – this creates the complete project structure for the project based on MVC architecture outlined in Sencha Touch
- Create Sencha Touch class – create a model/view/controller/store class
- Build the package for the Website
- Native packaging and test using Android Simulator
- Native packaging and test using iOS Simulator
- Native packaging for Android
- Native packaging for iOS
In this chapter, we will see how we can package our application for different target platforms and test them.
At the time of writing this chapter, Sencha Cmd does not have the support for Windows Phone 8 and Blackberry. Hence, if you target those devices, you may have to read their specific documentation to understand how you can package your application for those platforms.
The instructions mentioned here are based on Mac but they apply to Windows and Linux, as well. I would highlight the differences, wherever applicable.
Setting up sample project for native packaging
Before we try to package the applications for different platforms, it is important that we setup Sencha Cmd and the sample project, which we would use later for native packaging.
Sencha Touch comes along with examples. We would be using device example as the sample example that you can find in <sencha touch skd installation folder on your drive>/examples/device.
Download and install Sencha Cmd from Sencha’s website. We will refer the folder where Sencha Cmd is installed as CMD_HOME. You may refer to Introduction to Sencha Cmd guide that comes along with the Sencha Touch SDK for more detail.
Note down the path of your Sencha Touch sdk installation. We will refer the folder as TOUCH_HOME
How to do it…
Follow the below mentioned steps:
- Open the terminal
- Go to TOUCH_HOME folder
- Run the following command to create a sample project:
sencha generate app –-sdk-path <TOUCH_HOME> --name TouchApp –path <your project folder>/native/TouchApp
- Remove the following files and folders
- app folder
- resources folder
- Copy the following files and folders from <TOUCH_HOME>/examples/device folder:
- app folder
- resources folder
- Update the path of Sencha Touch SDK source in app.js to:
- ‘Ext’: ‘./touch/src’
- Add the following script tag in index.html, before the microloader script:
How it works…
In the above steps, we created a sample Sencha Touch project using Sencha Cmd tool. The tool creates a complete project structure with the files and folders as shown below:
The following tables describes the main files and folders:
|app||Application folder containing the source code for the model, view, controller, and store. This structure is created as per the MVC Architecture|
|app.js||Contains application entry point code and also the path setting on the loader from where the Sencha Touch source file shall be loaded|
|app.json||File containing the project dependencies, caching information, various build target, which is used by Sencha Cmd for build and packaging|
|packager.json||Contains iOS Simulator packaging configuration, which is used by Sencha Cmd to create target package and run the application|
|resources||Contains application specific CSS, SASS files and related images|
|touch||Sencha Touch SDK|
After the sample project is created, we removed the sample application specific files and folders and copied the files from <TOUCH_HOME>/examples/device folder. This way we would be able to build the Device API example and demonstrate the same on different devices.
The project demonstrates the usage of the following Sencha Device APIs:
- Ext.device.Purchases – Shows products available for In-App purchases purchase a product and show In-App purchases
- Ext.device.Notification – shows how to use the device APIs for showing notifications and vibrate a phone
- Ext.device.Push – Push notification and link them to alert message, badge text, and audio
- Ext.device.Contacts – Shows phone contacts
- Ext.device.Camera – Allows user to capture a live photo using the camera and also select a photo from the phone photo library
- Ext.device.Orientation – Shows how to make use of alpha, gamma, and beta values in an application to change the visual orientation of an entity
- Ext.device.Connection – Shows if the phone is online and what kind of connection it is using
- Ext.device.Geolocation – Links the phone’s geo location reading to the Google Map. For this part of the code we included Google’s Map API script file in the index.html
This ensures that our project is ready for us to package it for different target platforms and run them.
In the next part of the series we will leverage this setup to package the applications.
- Sencha Cmd Product – http://www.sencha.com/products/sencha-cmd/
- Sencha Touch Documentation for Sencha Cmd – http://docs.sencha.com/touch/2.2.1/#!/guide/command