Sencha Touch 2.1.0 Beta 3 – Package to Native iOS

Package an App to Native iOS

I suggest packaging the app first, as described in a previous article dedicated to generating a hello world app: Package an App using Sencha Cmd

Note:

Using Mac OSX Lion 1.7.4

Run in the iOSSimulator

Create a New Packaging Configuration File:
Have Sencha generate a new default configuration file with
$ sencha package generate [configname].json
Since we want to make one specifically for iOSSimulator, lets do this:

$ sencha package generate iossim.json

Without even changing any configuration file, you should be able to run with iOSSimulator using:

$ sencha package run iossim.json

Since the default platform in the configuration is iOSSimulator, this should launch iOSSimulator (iPhone) and run the app.

Package for Native iOS

Create a New Packaging Configuration File:

  1. Have Sencha generate a new default configuration file with this command:

    $ sencha package generate [configname].json
  2. Since we want to make one specifically for iOS, lets do this:

    $ sencha package generate ios.json
  3. Open the config ios.json file with your favorite text editor.
    Note: .json files have the same formatting as Javascript.

  4. For applicationName change this to the name of the app:

    "applicationName":"helloworld",
  5. For applicationId change this to what is used for your provisioning profile on iOS Provisioning Profile > Provisioning > Distribution, for example:

    "applicationId":"com.saggezza.helloworld",
  6. For bundleSeedId change to what is before the applicationId for your provisioning profile on iOS Provisioning Profile > Provisioning > Distribution, for example:

    "bundleSeedId":"B6K93G74A9",
  7. Leave versionStringas is for now, change this later, if desired:

    "versionString":"1.0",
  8. Remove versionCode just in case, since this only applies to Android

  9. For inputPath we can change this to ./builds/[appname]/package/ to point to the packaged build (see Package an App using Sencha Cmd). So for example:

    "inputPath":"./builds/helloworld/package/",
  10. Make sure your outputPath folder is located outside of your inputPath, not inside it.
    So any of these would work for example:

    "outputPath":"./builds/helloworld/native/"
    "outputPath":"../helloworld-build/"
  11. I chose to use:

    "outputPath":"./builds/helloworld/ios/",
  12. Keep configuration as Debug change it to Release before submitting Apple’s App Store for approval. (Keep Debugfor all else.)

    "configuration":"Debug",
  13. Change platform to iOS instead of iOSSimulator so:

    "platform":"iOS",
  14. Change certificatePath to the direct path to your .p12 Distribution certificate, which you can Export from Keychain Access. Open Keychain Access find the certificate in the My Certificates section and right-click > Export [cert name], export to .p12 and save a password. Remember this password. Name the certificate something memorable:

    "certificatePath":"~/iPhoneDistributionSaggezzaInc.p12",
  15. Change certificateAlias to iPhone Distribution: [company/First Last] so mine was:

    "certificateAlias":"iPhone Distribution: Saggezza, Inc",
  16. Add a line after certificateAlias for certificatePasswordwith your password used when creating the certificate. For example:

    "certificatePassword": "DummyPassword123",
  17. Remove any Android specific options, just in case (sdkPath, permissions, androidAPILevel, and versionCode which is near the top)

  18. Add minOSVersion, like:

    "minOSVersion": "4.0",
  19. Keep orientations as it is, try removing them as desired if need be later

    "orientations": [
    "portrait",
    "landscapeLeft",
    "landscapeRight",
    "portraitUpsideDown"
    ]
    
  20. Run this command to package to the configuration file:

    $ sencha package build ios.json
  21. This creates the .app file in your outputPath folder.
    Optionally run with the -d flag to have a more verbose debugging output:

    $ sencha -d package build ios.json
    [DEBUG] using path [long path string...]
    [DEBUG] executable located at /Applications/Sencha/Cmd/3.0.0.122/stbuild/stbuild
    [DEBUG] using workding directory .
    The application was successfully packaged
    The application was successfuly signed
    [DEBUG] exit code was : 0
    [DEBUG] exit code was : 0
    
  22. Navigate to your outputPath folder:

    $ cd ./builds/helloworld/ios/
  23. Download your Provisioning Profile, from iOS Provisioning Profile > Provisioning > Distribution, and name it descriptively. For example I saved mine to:

    ~/EnterpriseAppWildCard.mobileprovision
  24. Sencha ad-hoc native building had issues in previous versions. They now may support the provisioningProfile option in the configuration, but this isn’t documented yet. After some searching and playing around, what abicabot used worked best for me. We are essentially adding the provisioning profile to the app, and signing it using Terminal commands. Props to abicabot for posting it to the Sencha forums.
    Note: Just look, don’t run yet! Look at mine too and see what you need to use first, before running

    $ rm -r MyApp.app/_CodeSignature MyApp.app/CodeResources
    $ cp embedded.mobileprovision MyApp.app/
    $ codesign -f -vv -s "iPhone Distribution: Your Name" "MyApp.app"
    

    So mine was:

    $ rm -r helloworld.app/_CodeSignature
    $ cp ~/EnterpriseAppWildCard.mobileprovision helloworld.app/embedded.mobileprovision
    $ codesign -f -vv -s "iPhone Distribution: Saggezza, Inc" "helloworld.app"
    

    Note: I changed the first line to only rm -r MyApp.app/_CodeSignature instead of what that guy used because my .app/ did not have a .app/CodeResources folder, it was inside .app/_CodeSignature/CodeResources.
    You may be prompted access by Keychain, allow it each time, (I was not prompted though).

    If it is signed correctly, it will output something similar to this:

    MyApp.app: replacing existing signature
    MyApp.app: signed bundle with Mach-O universal (armv6 armv7) [com.whatever.myapp]
    

    My output was:

    helloworld.app: replacing existing signature
    helloworld.app: signed bundle with Mach-O thin (armv7) [com.saggezza.helloworld]
    
  25. If you want to make an .ipa file, this next step is a must. An .ipa file is basically a .zip file that has a specific structure. To make the .ipa file, use these commands:

    $ mkdir Payload
    $ mv helloworld.app Payload/
    $ zip -r helloworld.ipa Payload
    

    That should make an .ipa file.

Let’s deploy this thing!

Open up XCode (I’m running XCode 4.3.1)
Plug in a device (iPad, iPhone, etc)
Open up Organizer inside of XCode with top menu: Window > Organizer
Find your device on the left, Devices panel. Expand the device, and click on Applications. Click the + Add button, and locate the .ipa file. This should add it to the device, without any error messages. Try it on the device to make sure it works.

Additionally, you can put the .ipa file on an in-house enterprise app store. For testing, or prototype client viewing purposes. This uses .plist to link to the .ipa location. The URL link to the .plist should be in this format:

itms-services:///?action=download-manifest&url=helloworld.plist

Donezo!

Now go sip on a(n) [insert favorite beverage here], you deserve it!

Matt

Written by Matt

6 Comments

  1. avatar
    tk
    January 24, 2013

    Excellent…exactly what i was looking for…thanks

    Reply
  2. avatar
    Dan
    February 8, 2013

    I get the following error: Failed to execute system command while signing application with error 256

    Reply
    • avatar
      Matt
      February 18, 2013

      Did you receive that error after executing step 20 (packaging) or step 24 (code signing)?

      Make sure your certificate file, alias and password, and mobile provisioning files all match up correctly.

      Also note the example used above uses a Distribution iOS Provisioning Profile, but in your case you may be using a Developer Provisioning Profile which requires some changes to the above example, using Developer certificates, and the alias “iPhone Developer: [first last]”.

      Reply
  3. avatar
    Mahesh
    February 28, 2013

    I could not create config.json

    i am getting following error.

    The package command has moved to ‘sencha app package’.

    Reply
  4. avatar
    Matt
    February 28, 2013

    Mahesh, you could not run: $ sencha package generate config.json in your Sencha apps’ root folder? Also, what version of Sencha CMD are you using? This article is for Sencha CMD 3.0.0.122 as noted in the previous article

    Reply

Leave a Reply

*