Part 1/6 – Native packaging using Sencha Cmd


In this series, we will cover:

Software Requirement

  • 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

Introduction

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.

Getting ready

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:

  1. Open the terminal
  2. Go to TOUCH_HOME folder
  3. Run the following command to create a sample project:
    1. sencha generate app –-sdk-path <TOUCH_HOME> --name TouchApp –path <your project folder>/native/TouchApp
  4. Remove the following files and folders
    1. app folder
    2. app.js
    3. resources folder
  5. Copy the following files and folders from <TOUCH_HOME>/examples/device folder:
    1. app folder
    2. app.js
    3. resources folder
  6. Update the path of Sencha Touch SDK source in app.js to:
    1. Ext.Loader.setPath({
    2. ‘Ext’: ‘./touch/src’
    3. });
  7. Add the following script tag in index.html, before the microloader script:
    1. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></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.

References

Co-founder of Walking Tree, Speaker, Sencha Trainer, Author of Sencha Charts Essentials, Sencha Touch Cookbook, Sencha MVC Architecture, and ADempiere Cookbook.

Tagged with: , , , , , ,
Posted in Sencha Touch

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: