Packaging a Sencha Touch App for iOS using Windows 7.

December 9, 2012

These are the steps I took, in detail, to package a Sencha Touch application for iOS using Windows 7. This means you can install the Sencha Touch app onto your iphone or ipad as a native application instead of browsing to it. The process is complex, involves several steps and took a few goes to get right. It may change as well depending on new releases of software particularly from Sencha. I’ll try to keep the instructions up to date as much as possible. But if anyone finds them to be incorrect or have found a better way then please add a comment. I have used the following posts as my own guide when packaging for the first time and this post just brings these instructions together, focusing on Sencha Touch.

Leslie Hanks post: iOS Development on Windows w/ PhoneGap Build

Emanuele Feronato’s blog post

I have also used Emanuele’s screenshots in this tutorial as they show exactly what I need. His post was the most helpful.

As with any of my posts I like to start from the presumption that you have none of the software and are starting from the very beginning. These are the steps you need to take:

1. Download and install Sencha software

2. Acquire an Apple Dev Member Login and get Device Name and UDID

3. Create a new Sencha Touch app

4. Build a production version of the Sencha Touch app

5. Download and install Open-Ssl

6. Login to Apple Developer Member Center

7. Generate a developer certificate signing request (.csr) file using Open-Ssl and upload to iOS Provisioning Portal

8. Use the cer downloaded from Apple to generate a .p12 file

9. Acquire a Development Provisioning Profile

10. Package the Sencha Touch app using Sencha Cmd Tools

11. Add the application to iTunes

1. Download and install Sencha software

To begin with, if you haven’t already done so, you need to download the latest Sencha Touch sdk, which, at the time of writing was 2.1.0. You can download it from here. The download is a zip file. Mine was named sencha-touch-2.1.0-commercial.zip. Once you have downloaded it, you can copy the contents of the zip to C:\inetpub\wwwroot\sencha or similar and browse to it at http://localhost/sencha. When browsing to the address you should see the sencha docs page as default. If the browser (chrome) throws an error such as “Failed to load resource: the server responded with a status of 404 (Not Found)”,then you need to add .json as a mime type to IIS.

The other Sencha tool to download is the Sencha Cmd tool.You can download this tool from here. At time of writing the version was 3.0.0.250. The download was named SenchaCmd-3.0.0.250-windows.exe.zip. Once downloaded you just need to double click on the exe and go through the installtion process. Once you have installed the tool you can open a command prompt (Start>cmd) and type in “Sencha”. You should get the following output:

Microsoft Windows [Version 6.1.7601]

Copyright (c) 2009 Microsoft Corporation. All rights reserved.

C:\Users\alex.graham>Sencha

Sencha Cmd v3.0.0.250

Options

* –debug, -d – Sets log level to higher verbosity

* –plain, -p – enables plain logging output (no highlighting)

* –quiet, -q – Sets log level to warnings and errors only

* –sdk-path, -s – sets the path to the target framework

Categories

* app – Perform various application build processes

* compile – Compile sources to produce concatenated output and metadata

* fs – A set of useful utility actions to work with files.

* generate – Generates models, controllers, etc. or an entire application

* manifest – Extract class metadata

* package – Packages a Sencha Touch application for native app stores

* theme – Builds a set of theme images from a given html page

Commands

* ant – Invoke Ant with helpful properties back to Sencha Command

* build – Builds a project from a JSB3 file.

* config – Loads a config file or sets a configuration property

* help – Displays help for commands

* js – Executes arbitrary JavaScript file(s)

* which – Displays the path to the current version of Sencha Cmd

C:\Users\alex.graham>

This means that it has installed ok. As you may have figured, Sencha Cmd is a command line tool from which you can run several processes related to Sencha Products. One of which is packaging the app for iOS or other mobile platforms.

Acquire an Apple Dev Member Login and get Device Name and UDID

Acquiring an Apple Developer login is a process covered in this blog post by Emanuele Feranato. You need to sign up and pay $99 to acquire a login that will enable you to access the iOS Provisioning Portal and acquire the necessary certificate and Provisioning Profile to make the app work with an Apple device.

At this point you can also get the UDID of the iphone(s) and ipad(s) that you wish to install the Sencha Touch app onto. You need to enter these into the iOS Provisioning Portal when logged into the Apple Dev Member Centre. To get the UDID you can either connect the device whilst in iTunes and click on the serial number for the device or install an app onto the device such as UDID sender. The UDID is 40 characters long. Also note down the Device’s name (e.g. “Peter’s iPhone”).

3. Create a new Sencha Touch app

The starting point with Sencha is to create a new boilerplate code template, which can be used to generate a production build, which in turn will be packaged into an iOS native app. To create a new app, open a command prompt and cd into the root of the Sencha Touch sdk (in my case C:\inetpub\wwwroot\sencha). Then type in “sencha generate app test .\test”. The Sencha Cmd tool will generate a new Sencha Touch application called “test” in the directory C:\inetpub\wwwroot\sencha\test”. You can test that the app works by browsing to http://localhost/sencha/test.

4. Build a production version of the Sencha Touch app

Using the Sencha Cmd tool again, you can build a production version of the app. This is bascially a slimmed down version of the same app with all the debug code removed and only the required files included. This step is necessary as you don’t want to copy an unnecessarily big application onto your phone. You can get a production build by cd ing to the test application root (C:\inetpub\wwwroot\sencha\test) then typing in “sencha app build production”. This will build the application into C:\inetpub\wwwroot\sencha\test\build\production). Again you can browse to http://localhost/sencha/test/build/production to test that this has worked. You should see the same page as when you browsed to http://localhost/sencha/test but the production build is probably noticeably quicker to load.

5. Download and install Open-Ssl to generate the Developer Certificate

So now we have a Sencha Touch production built app ready for packaging. And this is where the process becomes more complex, bringing in other software to help with the task. You need to download and install Open-ssl, which will enable you to generate the .p12 Developer certificate that must be used when packaging the Sencha Touch application. To download Open-ssl you need to go here. I downloaded the Visual C++ 2008 Redistributables and Win32 OpenSSL v1.0.1c installs and installed them in this order. One other thing to do is to set the config path for openssl by entering the following command:

set OPENSSL_CONF=c:\[PATH TO YOUR OPENSSL DIRECTORY]\bin\openssl.cfg

Once Open-ssl is installed you can test by opening a command prompt, cd ing to the bin directory of openssl (in my case C:\openssl-win32\bin and typing in “openssl”. You should get an openssl>prompt.

6. Login to Apple Developer Member Center

With Open-Ssl installed, you can generate the .p12 certificate for the Sencha Touch “test” application. To begin with you need to generate a certificate signing request that you will upload to the Provisioning Portal, so make sure you are logged in to the Apple Developer Center. Once logged in you need to click on the iOS Provisioning Portal section.

You then need to click on the certificates link in the left hand navigation.

7. Generate a developer certificate signing request (.csr) file using Open-Ssl and upload to iOS Provisioning Portal

So you have an Open-Ssl prompt and you also are logged in to Apple Dev Center and are on the Certificates page of the iOS Provisioning Portal. You now need to generate a .certSigningRequest file to upload which will cause the Apple site to generate a .cer file which you then download and convert into a .p12 file. To generate the .csr file at the openssl> prompt type:

openssl>genrsa -out private.key 2048

This is to generate the private key to use to sign the certificateSigningRequest file.

You should get output similar to

Generate Private Key

Loading ‘screen’ into random state – done

Generating RSA private key, 2048 bit long modulus

….+++

….+++

e is 65537 (0×10001)

next you need to enter the command to generate the .certSigningRequest file, which is:

openssl>req -new -key private.key -out CertificateSigningRequest.certSigningRequest -subj “/emailAddress=test@mail.com, CN=Alex Graham, C=UK

The output should be

Loading ‘screen’ into random state – done

Note that the emailAddress, CN (your name) and C (country) parameters are required but I don’t think you have to put anything in here that ties into your details entered when creating your Apple login. Its just info that’s used by Apple to create the .cer. So what I’m saying is this info can be anything you want it to be.

Look in the bin folder of open-ssl (C:\openssl-win32\bin) and you should now see a CertificateSigningRequest.certSigningRequest file.

Go back to your logged in Apple screen currently at the certificates page. You should see something similar to this:

…A screen with no certificates listed. Click on the Request Certificate button. You should now see a screen asking you to upload a file:

Browse to the CertificateSigningRequest.certSigningRequest file and upload this file. The page after the file uploads should now look like:

with the request “Pending”, refresh the browser and the page should change to this:

Where you can download the certificate from Apple, which is a file called “ios_development.cer”. Download the file and move it to the C:\openssl-win32\bin folder.

8. Use the cer downloaded from Apple to generate a .p12 file

You now just have to enter two more commands into Openssl to generate the.p12 file. First of all, a command to convert the .cer file into a .pem file:

openssl>x509 -in ios_development.cer -inform DER -out ios_development.pem -outform PEM

Then finally the command to generate the .p12 file:

openssl>pkcs12 -export -inkey private.key -in ios_development.pem -out ios_development.p12

At this point you will be asked to enter and re-enter a password for the .p12 file. Enter a pasword and note it down as this will be used in the packaging process. For this example I will use the password “elbow”.

You now have the ios_development.p12 file in the bin folder. Create a folder called “cert”  in your Sencha test app ( C:\inetpub\wwwroot\sencha\test\cert).  Move the .p12  file to this new “cert” folder.

9. Acquire a Development Provisioning Profile

Once you have the .p12 certificate, you can create the Provisioning Profile on the Apple Provisioning Portal. Before you can do this you need to go through a few other steps on the Portal.

The first one is the development certificate, which has been created in the steps taken above.

The next step is to register the devices that you want to put the application on to test with. So on the left hand navigation, click on Devices. You should see  a screen similar to below

You then add a device

Enter the devices name and UDID as it appeared in iTunes

And that’s it, your device is registered.

Repeat the steps above for each device you wish to add.

The last step before creating the Provisioning Profile is to create the AppID for the Sencha Touch application.

To create the AppID, click on App IDs in the left hand navigation of the portal.

You should see the following page

Click on the New App ID button, and enter the required details. these comprise of:

Description: this can be anything but try and make it meaningful such as “SenchaTest”

Bundle Seed ID: This is generated by Apple. Note this for your packaging process.

Bundle Identifier: This is recommended to use a reverse domain style so enter something like “com.exampledomain.senchaTest”

Once the details have been entered, click on Submit and you should see that the AppID has been registered in the following screen:

With the AppID, and Devices registered you can now generate the Provisioning Profile. Click on “Provisioning” on the left hand navigation. You should see this screen:

Click on New Profile and enter the required info.

Name: Again, can be anything but for consistency make it “SenchaTestProfile”

Certificates: The certificate created earlier should be selected as default

AppID: The AppID just created should be selected as default.

Devices: The Devices entered earlier should be ticked as default.

If all is ok, click on Submit. The screen should change to say the profile is pending

Refresh the browser and the Profile should be ready to download

Download the file and add it to the root of your Sencha Test (production build) app at C:\inetpub\wwwroot\sencha\test\build\production. Rename the file to embedded.mobileprovision

10. Package the Sencha Touch app using Sencha Cmd Tools

We are almost there. To package the app for iOS, you now need to run the package command using Sencha Cmd tools but before you do,  you need to edit the packager.json file, which Sencha Cmd will use to do the packaging. This should have been created in the test app root folder (C:\inetpub\wwwroot\sencha\test). Browse to this folder and open the file in a text editor. You need to edit it so it contains references to the.p12 file and Provisioning profile that you created, as well as other info. An example of the packager.json file is as follows

{

	"applicationName":"SenchaTest",

	"applicationId":"com.xxxx.SenchaTest",

	"bundleSeedId":"xxxxxxxx",

	"versionString":"1.0",

	"versionCode":"1",

	"icon": {

		"57":"resources/icons/Icon.png",

		"72":"resources/icons/Icon~ipad.png",

		"114":"resources/icons/Icon@2x.png",

		"144":"resources/icons/Icon~ipad@2x.png"

	},

	"inputPath":"./build/production",

	"outputPath":"../packagedTest",

	"configuration":"Debug",

	"platform":"iOS",

	"deviceType":"iPhone",

	"certificatePath":"./cert/ios_development.p12",

	"certificatePassword": "elbow",

	"provisionProfile":"./build/production/embedded.mobileprovision",

	"orientations": [

		"portrait",

		"landscapeLeft",

		"landscapeRight",

		"portraitUpsideDown"

	]

}

If you followed this example exactly as described then you only have to change the following

applicationName: Set this to what you called the app in the AppID Description

applicationId: This should be what you entered as the reverse domain for the Bundle Identifier in the AppID

bundleSeedId: Enter the 10 digit string that was generated in the App ID by Apple, e.g. YUUIO898PO

certificatePassword: This is the password you entered when generating the .p12 file. in this example it was “elbow”.

Now the packager.json file is ready you can now package the app. Open a command prompt and cd to the Sencha test folder :

>cd C:\inetpub\wwwroot\sencha\test

Then enter the sencha package command:

>sencha package build packager.json

If you get no output at all and a prompt appears after a few seconds this means that the app packaged succesfully. You should find it in the following location; C:\inetpub\wwwroot\sencha\packagedTest. The folder name should be SenchaTest.app.

Worth adding here is that I asked about the no output from package build command on the Sencha Forums. Svenna responded by suggesting I use >sencha app build native command instead. I have not tried this but will do and will edit this blog if it works for me.

11. Add the application to iTunes

Plug the device that you registered  into your computer and open iTunes. For this example I presume you have plugged in your iphone.  Whilst in iTunes click on “File” in the menu and select “Add Folder to library”. Browse to the SenchaTest.app folder and select it. Now select the phone whilst in iTunes so you see the phone details in the main screen. Select the Apps tab for the phone. You should see the SenchaTest app listed on the list of apps on the left hand side and a view of the Phone’s screens on the right  hand side. Tick the SenchaTest app and click on sync. You will see iTunes syncing the application to the phone and in a few seconds you should see the app on your iphone.

Congratulations! Now have a cup of tea to celebrate

Hope this post helps anyone doing the same thing on their windows 7 machine. If you have anything to add or any helpful comments then please add them in the comments section

 

About these ads

Written by lalexgraham Posted in Code Tagged with Sencha Touch