Architect 2 Sencha Docs

Publishing, Packaging, and Simulating a Project

Contents

  1. Publishing a Project
  2. Creating a Certificate
  3. Packaging and Simulating a Sencha Touch Project
  4. Installing an App on an Android Device

Sencha Architect uses Sencha Cmd to package and simulate Sencha Touch and Ext JS applications. The Packaging interface leads you through installing Sencha Cmd, XCode, and Sencha Touch. For more information, see the Sencha Cmd Guide.

Important Sencha Cmd requires that you install Ruby 1.9.3 or earlier on your computer. Sencha Cmd does not work with Ruby 2.0. Mac OS: Ruby is pre-installed. You can test which version you have with the ruby -v command. If you have version 2.0, download the Ruby version manager (rvm) and use this command to download and install Ruby: rvm install 1.9.3 --with-gcc=clang and set your PATH variable to point to the Ruby 1.9.3 install directory. Windows: Download the open source 7-Zip archiver. Download Ruby 1.9.3.n from rubyinstaller.org. Set the Path environment variable to point to the directory in which you unzip the installer file. Ubuntu: Use sudo apt-get install ruby1.9.3 to download Ruby 1.9.3.

Sencha Cmd provides these features in Architect:

  • sencha app generate -- Initializes your Architect project to work with Sencha Cmd
  • sencha app package build -- Packages your app for iOS or Android
  • sencha app package run -- Packages and runs your app in the iOS Simulator or the Android Emulator

Use this guide to:

  • Publish a project - Copies your completed Ext JS or Sencha Touch project files to your web server so that others on your team can view your project.
  • Create a certificate - Describes use of the keytool command for creating a certificate for an Android app. Also provides information on obtaining an iOS development certificate.
  • Package an app - Lets you download software for packaging and view your project's packager.json parameter file.
  • Simulate an app - Lets you view a software representation of how your app appears on a mobile device. Simulating or emulating uses non-Architect software that you either purchase in the case of developing an app for iOS, or obtain for free for Android.
  • Build an app - Lets you build your application.
  • Install an app on an Android device - Lets you create a certificate for an Android app and establish communications between your computer and an Android device.

Important Save your project to enable the Publish and Package buttons. Do not save your project in your web server's directory from where you intend to serve your project.

Publishing a Project

Publishing copies your project files to a web server so that others can view your project. If you don't have a web server, you can get the free XAMPP.

To publish a project, on first use for a project, click the Settings button in the Architect task bar to set the path to your web server. Thereafter, click the Publish button to copy your project files to the web server directory:

With the project open, click Settings -> Project, and click Browse for the Publish path field. For XAMPP, browse to XAMPP's xamppfiles/htdocs directory and set the Publish path field to this location. Important Do not set the Publish path field to the location where you saved your project's files.

Click Publish in the Toolbar. Architect copies a deployable version of your application to the location you specified in the Publish path field.

Creating a Certificate

Before packaging your app, create a certificate. The information that follows applies to an Android app.

iOS requires signer identity for the certificate. For information on getting an iOS development certificate, see the MobiForge article, Deploying iPhone Apps to Real Devices.

  • Create a certificate for an Android app with the keytool command. Run this command from your /Users/your_login_directory - substitute the name of the keystore file and your alias.
  • After creating a certificate, edit the packager.json file and set the certificatePath parameter to point to the certificate file's location, and set the androidAPILevel parameter to an API level that you previously installed using the Android SDK Manager.

Note Store the password and company name according to your site's security policy.

The following example creates the my-release-key.keystore file for user "Polly Hedra" that contains a 2048-bit RSA key pair and a self-signed certificate, both of which are viable for 10,000 days:

$ keytool -genkey -v -keystore my-release-key.keystore -alias phedra -keyalg RSA -keysize 2048 -validity 10000
Enter keystore password: 
What is your first and last name?
  [Unknown]:  Polly Hedra
What is the name of your organizational unit?
  [Unknown]:  App Development
What is the name of your organization?
  [Unknown]:  MyCompany
What is the name of your City or Locality?
  [Unknown]:  Silicon City
What is the name of your State or Province?
  [Unknown]:  California
What is the two-letter country code for this unit?
  [Unknown]:  US
Is CN=MyPassword, OU=App Development, O=MyCompany, L=Silicon City, ST=California, C=US correct?
  [no]:  yes

Generating 2,048 bit RSA key pair and self-signed certificate (SHA1withRSA) with a validity of 10,000 days
    for: CN=MyPassword, OU=App Development, O=MyCompany, L=Silicon City, ST=California, C=US
Enter key password for 
    (RETURN if same as keystore password):  
[Storing my-release-key.keystore]
$

Packaging and Simulating a Sencha Touch Project

Packaging lets you install required software, simulate, and build your application. The Package button calls the Sencha Cmd Setup interface to prompt you through each step.

Notes

  • Packaging and simulating are not supported for Sencha Touch 2.0 projects. Upgrade your project to the current version of Sencha Touch to use these features.
  • You must save your Architect project to enable the Package button.
  • Packaging is not supported for use on Linux.
  • If you set up your project for Sencha Cmd, it creates an index.html file. If a blue screen displays with 3 dots, this is because you're running the default index.html. Remove the index.html file from the project root and have Architect create a copy of your app.html -> index.html (or do it yourself).
  • The Sencha Cmd Setup menu currently only supports iOS applications. You can package an Android app from the command line using the sencha app package build command. Before running the sencha app package build command, start the Android SDK Manager.

In Architect, click the Package button in the Architect task bar:

Packaging Steps:
1. Use Install plug-ins to install Sencha Cmd and XCode
2. Set Up a Project with Sencha Cmd
3. Use Package Settings to View packager.json
4. Test Your Project with Simulate
5. Build Your Project

Package Step 1: Use Install Plug-ins to Install Sencha Cmd and XCode

  1. Click Install plug-ins to install Sencha Cmd and XCode.
  2. If you have not previously installed Sencha Cmd, click Install plug-ins -> Sencha Cmd -> Download to Install. This button opens the Sencha Cmd download page. If you already installed Sencha Cmd, click Browse and select the path to the version directory. For example on a Mac, the default path is /Users/my_login/bin/Sencha/Cmd/cmd_version.
  3. Click Save to save the changes to your project. You can optionally, click Verify to open a new window and verify the Sencha Cmd options.
  4. Click Download to Install which opens Apple's XCode web site. Either create or supply your Apple ID to download XCode. You can use XCode's iOS Simulator to simulate an iOS mobile device. XCode is available for free with an Apple ID from Apple.

Package Step 2: (Optional) Set Up a Project with Sencha Cmd

  1. Click the Setup project with Cmd tab.
  2. If you have not installed Sencha Touch, click Download Touch to download Sencha Touch and extract it to a directory.
  3. If you previously downloaded Sencha Touch, click Browse to locate the Sencha Touch installation directory.
  4. After the path appears in the edit box, click Setup Project with Cmd to run a script to configure the build for your app. A Terminal opens and runs commands to prepare your project.

Package Step 3: Use Package Settings to View packager.json

Click Package Settings. The packager.json parameter file displays in the Sencha Architect Code window in read only mode. You can edit the file directly from your project's directory.

For example:

{
  /**
  * @cfg {String} applicationName
  * 
  * This is the name of your application, which is displayed on the device 
  * when the app is installed. On IOS, this should match
  * the name of your application in the Apple Provisioning Portal.
  */
  "applicationName": "LifeOfPieChart",
    
  /**
  * @cfg {String} applicationId
  * 
  * This is the name namespace for your application. On IOS, this should 
  * match the name of your application in the Apple Provisioning Portal.
  */
  "applicationId": "com.mycompany.myAppID",
...

Package Step 4: Test Your Project with Simulate

Note If you are simulating an Android application, start the Android SDK Manager: * If you are using a Mac, use Finder to locate the Android installation folder where you unzipped the Android software distribution and double-click android-sdk-macosx > tools > android. * If you are using Windows, click Start > All Programs > Android SDK Tools. Right-click SDK Manager and click Run as Administrator. * Create an Android virtual device (AVD) by clicking Tools > Manage AVDs.

In Architect, if you are not already in the Sencha Cmd Setup menu, click the Package button in the task bar. If the Package button is gray, save your project, and then proceed:

If you have not done so, complete the three steps in the Sencha Cmd Setup menu so that the the circle controls are green:

Click Simulate in the Sencha Cmd Setup menu to test your project:

You can simulate from the command line by changing directory to your application's root folder and typing:

sencha app package build packager.json
sencha app package run packager.json

iOS Simulation

To simulate an iOS app, download XCode and the XCode Simulator from Apple.

Exit the simulator before each simulate.

Android Emulation

  • To emulate an Android app, browse to the Android SDK software, click DOWNLOAD FOR OTHER PLATFORMS at the lower part of the page, click the SDK Tools Only section for Windows or Mac, and install the software on your computer.
  • To use the Android Emulator, create an Android virtual device (AVD) using the AVD Manager. In Mac, open a Terminal and type the android command. In the Android SDK Manager, click Tools -> Manage AVDs to create an AVD. Click the AVD and Start to open the emulator.

Package Step 5: Build Your Project

If you are not already in the Sencha Cmd Setup menu, click the Package button in the Architect task bar (you have to first save your project before the Package button is active):

If you have not done so, complete the three steps in the Sencha Cmd Setup menu so that the the circle controls are green:

After all interface lights are green, click Build in the Sencha Cmd Setup menu to build your project. A new Terminal window opens and Sencha Cmd compiles your project. The following messages indicate that the build completed successfully:

Sencha Cmd v3.1.nnn

logout

[Process completed]

Installing an App on an Android Device

  • For Windows, install the Google USB Driver from the Android SDK Manager to help install your app on your mobile device. Locate the usb_driver_r04-windows.zip file on the web for the device on which you are installing your app. This file contains Android drivers and contains a device ID for the mobile device. In Windows 8, disable driver signature enforcement to install Android drivers for Windows. Search the web for information on this step.

  • To get the Android ADB command to communicate with your device, connect the device to your computer and type these commands at the command line:

android update adb
adb kill-server
adb start-server
adb devices

Notes

  • Mac and Linux users should use sudo android update adb for the first command.
  • If the adb devices command succeeds, it lists the serial number of the mobile device