unisys ClearPath eportal Developer 6.1 Unisys Multi-Device App Developer s Guide March 2015 8230 0898 001

unisys ClearPath eportal Developer 6.1 Unisys Multi-Device App Developer s Guide March 2015 8230 0898 001

NO WARRANTIES OF ANY NATURE ARE EXTENDED BY THIS DOCUMENT. Any product or related information described herein is only furnished pursuant and subject to the terms and conditions of a duly executed agreement to purchase or lease equipment or to license software. The only warranties made by Unisys, if any, with respect to the products described in this document are set forth in such agreement. Unisys cannot accept any financial or other responsibility that may be the result of your use of the information in this document or software material, including direct, special, or consequential damages. You should be very careful to ensure that the use of this information and/or software material complies with the laws, rules, and regulations of the jurisdictions with respect to which it is used. The information contained herein is subject to change without notice. Revisions may be issued to advise of such changes and/or additions. Notice to U.S. Government End Users: This is commercial computer software or hardware documentation developed at private expense. Use, reproduction, or disclosure by the Government is subject to the terms of Unisys standard commercial license for the products, and where applicable, the restricted/limited rights provisions of the contract data rights clauses. Unisys and ClearPath are registered trademarks of Unisys Corporation in the United States and other countries. All other brands and products referenced in this document are acknowledged to be the trademarks or registered trademarks of their respective holders.

Contents Section 1. Documentation Updates Section 2. Introduction Architecture... 2 1 Supported Operating Systems... 2 2 Section 3. Planning and Requirements Operating System... 3 1 Other Software Requirements... 3 1 Integrated Development Environment (IDE)... 3 2 Disk Space... 3 2 ios Developer Program Membership... 3 2 Section 4. Installation Verifying the Installation... 4 1 Section 5. Developing Your Multi-Device App Solution Creating a New Solution... 5 1 Opening an Existing Solution... 5 2 Understanding the Solution Structure... 5 2 Shared Project... 5 4 Configuring Your Application Settings... 5 5 Configuring Your Project Properties... 5 5 Developing a WebView Application... 5 5 Configuring a WebView Application... 5 6 Section 6. Managing Your Plugins Accessing the Unisys Multi-Device Application Plugin Browser...6 1 Installing a Plugin Using the Unisys Multi-Device Application Plugin Browser...6 1 Accessing Plugin Information... 6 2 Updating a Plugin Using the Unisys Multi-Device Application Plugin Browser... 6 2 8230 0898 001 iii

Contents Deleting a Plugin Using the Unisys Multi-Device Application Plugin Browser... 6 3 Synchronizing a Plugin Using the Unisys Multi-Device Application Plugin Browser... 6 3 Section 7. Testing Applications Locally Using the Unisys Multi-Device Simulator for Testing... 7 1 Windows Store Testing... 7 1 Windows Phone Testing... 7 2 Debugging the JavaScript... 7 2 Section 8. Working with the Unisys Multi-Device Simulator Accessing the Unisys Multi-Device Simulator... 8 1 Section 9. Code Signing Code Signing for Android Applications...9 1 Creating a Keystore File... 9 2 Using the Certificate for an Android Application... 9 3 Code Signing for ios Applications... 9 3 Code Signing: Creating a New Certificate... 9 5 Generating a P12 File... 9 5 Creating a P12 File by Importing an Existing Certificate... 9 6 Code Signing: Importing the P12 File and Provisioning Profile File... 9 6 Section 10. Building Your Application Building Your Application... 10 1 Section 11. Deploying Your Application Deploying Your Application on an Android Device... 11 1 Debugging on an Android Device... 11 2 Deploying Your Application on an ios Device... 11 2 Debugging on an ios Device... 11 2 Deploying Your Application on a Windows Phone Device... 11 3 Appendix A. Development Certificate Exporting a P12 file using Keychain... A 3 Appendix B. App ID and Provisioning Profile ios App ID... B 1 iv 8230 0898 001

Contents ios Provisioning Profile... B 1 Development Provisioning Profile... B 2 Distribution Provisioning Profile... B 2 Appendix C. Configuring Application Settings and Project Properties Configuring Application Settings... C 1 Configuring Project Properties... C 2 8230 0898 001 v

Contents vi 8230 0898 001

Figures 2 1. Unisys Multi-Device Build Service Architecture... 2 2 8230 0898 001 vii

Figures viii 8230 0898 001

Tables 5 1. Default Folders in a Solution... 5 3 5 2. Default Files in a Project... 5 4 8 1. Multi-Device Simulator Options... 8 2 9 1. Code Signing Methods... 9 4 A 1. Development Certificate Methods... A 1 C 1. Project Configuration Properties... C 3 8230 0898 001 ix

Tables x 8230 0898 001

Section 1 Documentation Updates This document contains all the information that was available at the time of publication. Changes identified after release of this document are included in problem list entry (PLE) 19045943. To obtain a copy of the PLE, contact your Unisys representative or access the current PLE from the Unisys Product Support website: http://www.support.unisys.com/all/ple/19045943 Note: If you are not logged into the Product Support site, you will be asked to do so. 8230 0898 001 1 1

Documentation Updates 8230 0898 001 1 2

Section 2 Introduction The Unisys Multi-Device Build Service is a mobile application development environment. It eliminates the complexity associated with cross-platform mobile development. The Unisys Multi-Device Build Service builds hybrid mobile applications in the cloud for ios and Android mobile platforms and uses the local build support platform for Windows 8.1 and Windows Phone 8.1 applications. The Unisys Multi-Device Build Service abstracts the platform dependencies, such as management and configuration of the development environment. This enables you to Focus on the ideas and content of the applications. Use your existing skills in HTML, CSS3, JavaScript, and TypeScript to build applications for the ios, Android, and Windows platforms. The Unisys Multi-Device Build Service leverages Apache Cordova, which is an open source framework for mobile devices. To learn more about the Apache Cordova framework, refer http://cordova.apache.org. Architecture The Unisys Multi-Device Build Service comprises the following components: Unisys Multi-Device Build Service extension for Visual Studio: A plugin for your existing Visual Studio environment. It allows you to create a project in HTML 5, JavaScript, and CSS3. Unisys Multi-Device Build Service: A web service hosted on the Unisys Cloud Servers. Based on your requirement, you can build mobile applications for ios, Android, and Windows platforms from the project that you have created using the App Extension for Visual Studio plugin. The following figure describes the components of the Unisys Multi-Device Build Service and how they are integrated with each other: 8230 0898 001 2 1

Introduction Figure 2 1. Unisys Multi-Device Build Service Architecture Supported Operating Systems The Unisys Multi-Device Build Service supports the following platforms: Android 2.2 and higher ios5 and higher Windows 8.1 Windows Phone 8.1 8230 0898 001 2 2

Section 3 Planning and Requirements This section provides you information about the resources required for installing and using the Unisys Multi-Device Build Service. Operating System Your system should run any one of the following operating systems: Microsoft Windows 8.1 (32-bit and 64-bit editions) Microsoft Windows 8 (32-bit and 64-bit editions) Microsoft Windows 7 SP1 (32-bit and 64-bit editions) Microsoft Windows Server 2012 R2 Microsoft Windows Server 2012 Microsoft Windows Server 2008 R2 SP1 Microsoft Windows Server 2008 SP2 (32-bit and 64-bit editions) Other Software Requirements If you want to develop the Unisys Multi-Device Applications that use plugins and are developing the applications on Windows 8.1 or later, install the following: Windows Node.js Apache Cordova Plugman To install Node.js and Apache Cordova Plugman 1. Download the Windows Node.js installer from http://nodejs.org/ and install it using the default settings. 2. Open command prompt and run the following command: npm install -g plugman Note: Windows 8.1 or higher is required to develop applications that target Windows Store or Windows Phone. Google Chrome or Internet Explorer 11 (or later) is required to run the Unisys Multi-Device Simulator. 8230 0898 001 3 1

Planning and Requirements Integrated Development Environment (IDE) Disk Space You must have installed one of the following IDEs: Microsoft Visual Studio Ultimate 2013 Update 4 or later Microsoft Visual Studio Premium 2013 Update 4 or later Microsoft Visual Studio Professional 2013 Update 4 or later Microsoft Visual Studio Community 2013 Update 4 or later Your system should have a minimum of 20 GB free space. ios Developer Program Membership If you are building an application that runs on the ios platform, you need to be a member of the Apple s ios Developer Program. To learn more about this program, see https://developer.apple.com/programs/ios/. 8230 0898 001 3 2

Section 4 Installation The Unisys Multi-Device Build Service extension for Visual Studio gets installed in your environment when you install the ClearPath eportal Developer 6.1. For installation instructions, refer to the release notes (readme file) for ClearPath eportal Developer at support.unisys.com. Verifying the Installation To verify if the Unisys Multi-Device Build Service is installed in your environment 1. From the Visual Studio menu bar, click TOOLS, and then click Extensions and Updates. The Extensions and Updates window appears. 2. Select Installed, and then click All. Unisys ClearPath eportal Developer should be listed in the available toolsets of your Visual Studio environment. 8230 0898 001 4 1

Installation 8230 0898 001 4 2

Section 5 Developing Your Multi-Device App Solution Using the Unisys Multi-Device Build Service, you can build applications for different mobile platforms from a single solution. Creating a New Solution To create a new Multi-Device App solution 1. From the Visual Studio menu bar, click FILE, point to New, and then click Project. The New Project Window appears. 2. In the New Project dialog box, under Unisys eportal Projects, select Mobile Application, and then select Unisys Multi-Device App to build a mobile application that is capable of accessing the native device features, such as a camera. 3. In the Name field, type a name for the Multi-Device App project. Note: There should be no space in the specified name. 4. In the Location field, specify the location where you want to save the project. Note: There should be no space in the specified path name. 5. In the Solution name field, type a name for the solution. The default value is the value that you have specified in the Name field. Notes: This field is available only if the Create directory for solution is selected. This option is selected by default. There should be no space in the solution name. 6. Click OK. 7. In the New Unisys Multi-Device App <project name> dialog box, select I accept the terms of the license, and then select any of the following: Blank Multi-Device App Multi-Device App that accesses a Unisys MVC Single Page App Multi-Device App that accesses other web app 8230 0898 001 5 1

Developing Your Multi-Device App Solution For more information about the last two choices, see Developing a WebView Application. 8. If you select Blank Multi-Device App, click OK; or if you select either Multi- Device App that accesses a Unisys MVC Single Page App or Multi- Device App that accesses other web app, enter the Web App Url under the Application Parameters section, and then click OK. The new solution along with all the project files appears in the Solution Explorer pane. The solution contains projects to build applications for specific platforms. The four platforms are Android ios Windows WindowsPhone Note: The Windows and WindowsPhone platforms are enabled only on machines with operating systems of Windows 8.1 or later. Opening an Existing Solution To open an existing solution 1. From the Visual Studio menu bar, click FILE, point to Open, and then click Project/Solution. The Open Project window appears. 2. Select the required folder that contains the solution, and then click Open. The files and folders in the selected solution appear. 3. Select the file with the Microsoft Visual Studio Solution (.sln) extension, and click Open. The selected solution along with all the project files appears in the Solution Explorer pane. Understanding the Solution Structure A Unisys Multi-Device solution contains files and folders in a hierarchical structure. The solution on creation has a project for each of the following platforms: Android ios Windows 8.1 WindowsPhone 8.1 In addition, the <project name>.shared project contains folders and files that are used by all four platforms. 5 2 8230 0898 001

Developing Your Multi-Device App Solution The following table describes the default folders that are generated when you create a new project by using the Unisys Multi-Device App templates. Table 5 1. Default Folders in a Solution Folder Description Css Images Plugins Installed Plugins Res Scripts It is a part of the <project name>.shared folder. It contains the style sheets. It is a part of the <project name> <platform> project, where <platform> is Windows or Windows Phone. It contains all the images of the project. Replace the placeholder images with your own custom images by using the same resolution as the placeholder images. It is a part of the <project name>.shared folder. It contains the plugins that can be added to the project by using the plugin browser. Note: This folder is reserved for Apache Cordova plugins. Do not delete this folder. Additionally, do not place any files in this folder or any subfolders unless they are part of an Apache Cordova plugin. It is a part of the <project name>.<platform> folder, where <platform name> is Windows or Windows Phone. It contains plugins that have been installed using the Cordova Plugman utility. Note: Do not add, delete, or modify files in the InstalledPlugins folder or any of its subfolders manually. Contains the following resource files: icons: Contains the icon images for Android and ios devices based on screen resolution. Replace the placeholder images with your own custom images by using the same resolution as the placeholder images. Screens: Contains the splash screens for Android and ios devices based on screen resolution. Replace the placeholder images with your own custom images by using the same resolution as the placeholder images. Splash screens are optional elements of the config.xml file. It is a part of the <project name>.shared folder. It contains JavaScript files. 8230 0898 001 5 3

Developing Your Multi-Device App Solution The following table describes the default files in the Unisys Multi-Device project folders: Table 5 2. Default Files in a Project File Description Cordova.js Pluginlist.xml config.xml index.html It contains common Cordova interface, platform-specific interface and plugin information. This is used by the Multi-Device App Simulator. Displays all the certified plugins for a particular Cordova version. It is a part of the <project name>.shared folder. It enables you to specify the metadata for your application. It is a part of the <project name>.shared folder. The execution of the application starts from this file. Note: When you create a new application by using the built-in templates, your code already contains references to scripts, style sheets, and frameworks that are part of the template. Shared Project The shared project is a special type of project that contains files shared by all the platform-specific projects. For example, the index.html file in the root of the shared project is shared by all the platforms. If you update index.html, the change applies to all the platforms. Conversely, if you need to add a file that applies to only some platforms, you can place the added file in the particular platform projects. If a file with the same name exists at the same relative path in both the shared projects and one of the platform projects, the file in the platform project takes precedence for that platform. The shared project has some characteristics that make it different from most Visual Studio projects: The shared project does not have any project properties. You cannot build the shared project. You cannot install NuGet packages to the shared project. If you need to use a NuGet package in your Multi-Device App, such as jquery, you must install the NuGet package in each of the platform projects. 5 4 8230 0898 001

Developing Your Multi-Device App Solution Configuring Your Application Settings The Unisys Multi-Device Build Service allows you to configure the application and domain access settings by editing the config.xml file. For more information about configuring your application settings, refer to Appendix C, Configuring Application Settings. Configuring Your Project Properties The Unisys Multi-Device Build Service allows you to configure certain properties of your project that affect the project globally. For more information about configuring your application settings, refer to Appendix C, Configuring Project Properties. Developing a WebView Application A WebView application is an application that accesses the logic implemented in an external web application. If the external web application is a Unisys MVC Single Page Application (AJAX), the MVC application can use Unisys Hybrid Application Responsive Web Extensions to access native device capabilities, such as contact lists and the camera for barcode scanning. If the external web application is not a Unisys MVC Single Page Application, you can still access it from your WebView application, but the web application cannot access native device capabilities. For example, you might have developed a mobile web application by using the Unisys Web Forms mobile controls. To develop a WebView application that accesses a Unisys MVC Single Page Application 1. Develop and test a Unisys MVC Single Page Application (AJAX). For more information, see the ClearPath eportal Developer Help. 2. Update the web.config file for the Unisys MVC Single Page Application (AJAX) to enable access from the Unisys Multi-Device Simulator. For more information, see the ClearPath eportal Developer Help. 3. Select build configuration as Debug and stage the Unisys MVC Single Page Application (AJAX). For more information, see the ClearPath eportal Developer Help. 4. Deploy the Unisys MVC Single Page Application (AJAX) using the ClearPath eportal Manager. 5. Ensure that the application can be accessed using an HTTPS URL. 6. Ensure that you can access the deployed application by using a desktop browser and the HTTPS URL. 7. Create a new Unisys Multi-Device application by selecting an Application Type of Multi-Device App that accesses a Unisys MVC Single Page Application and 8230 0898 001 5 5

Developing Your Multi-Device App Solution entering the HTTPS URL used to access the MVC application on the New Unisys Multi-Device App dialog box. 8. Configure the Unisys Multi-Device WebView application as described in the section Configuring a WebView Application. 9. Test the Unisys Multi-Device WebView application locally. 10. Update the web.config file for the Unisys MVC Single Page Application (AJAX) to disable access from the Unisys Multi-Device Simulator and prepare for production. For more information, see the ClearPath eportal Developer Help. 11. Repeat steps 3 through 6, but select build configuration as Release. 12. Build the Unisys Multi-Device WebView application and test it with different devices. Configuring a WebView Application To configure your WebView application, do the following: 1. Use the config.xml editor to configure the application settings. For more information, see Configuring Application Settings. 2. If required, install any plugins that the MVC application requires. For example, if you are using the barcode control, install the plugins org.apache.cordova.camera and com.phonegap.plugins.barcodescanner. If you are using any of the contact controls, install the plugin org.apache.cordova.contacts. To install plugins, refer to Section 6, Managing Your Plugins. 5 6 8230 0898 001

Section 6 Managing Your Plugins The Unisys Multi-Device Plugin Browser enables you to search for and install plugins of your choice in the application. The plugin browser displays a list of plugins that are available in the plugin registry of Apache Cordova. The plugins in the registry have either MIT or Apache 2.0 licenses. Note: Unisys is not responsible for any plugins that are shared and published by the Apache Cordova community. In addition, Unisys does not control the availability of the plugin registry; the plugin registry may be down for maintenance or other reasons from time to time. Accessing the Unisys Multi-Device Application Plugin Browser To access the Unisys Multi-Device Application Plugin Browser From the Visual Studio menu bar, click MULTI-DEVICE, and select Manage Unisys Multi-Device App Plugins The Unisys Multi-Device App Plugin Browser dialog box appears with the following options: Installed Plugins: Displays all the installed plugins. Online: Displays a list of Cordova plugins. Cordova- version number displays all the plugins that are certified for that Cordova version; this is selected by default. Select All to see all plugins. Updates: Displays a list of updates available for all the installed plugins. Note: The search option is available for the Installed Plugins, Online plugins, and Updates. Installing a Plugin Using the Unisys Multi-Device Application Plugin Browser To install a plugin 1. From the Visual Studio menu bar, click MULTI-DEVICE, and select Manage Unisys Multi-Device App Plugins The Unisys Multi-Device App Plugin Browser dialog box appears. By default, the center pane displays the 25 most downloaded plugins. 2. In the left pane, click Online, and then click either All or Cordova-version number. 8230 0898 001 6 1

Managing Your Plugins 3. In the right pane, in the search box, type the name of the plugin that you want to install, and then click the search icon or press Enter. The center pane displays the search result. Note: To filter your search result based on the supported platforms, click the arrow button beside Platforms and select one more platforms. You can also sort the search results by selecting an option from the Sort by list. 4. Select the plugin that you want to install. The right pane displays the details of the selected plugin. 5. Click Install on the bottom right of the window. The Installed plugin successfully message appears on the status bar. The installed plugin appears in the plugins folder, under the <project name>.shared project. Accessing Plugin Information After you install a plugin, you can access the plugin information as follows: 1. In the Solution Explorer pane, under the Shared project, expand the plugins folder, and then expand the package folder. All the subfolders appear. 2. Expand the doc folder and double-click to open the index.md file. Detailed information about the installed plugin appears in the Visual Studio editor. Updating a Plugin Using the Unisys Multi-Device Application Plugin Browser The Unisys Multi-Device Application Plugin Browser allows you to update the plugins you have installed to the latest available version from the Apache Cordova plugins registry. To update an installed plugin 1. From the Visual Studio menu bar, click MULTI-DEVICE, and select Manage Unisys Multi-Device App Plugins. The Unisys Multi-Device App Plugin Browser dialog box appears. 2. In the left pane, click Updates. The center pane displays all the available updates of the installed plugins. 3. Select the required update for your plugin. 4. Click Update on the bottom right of the window to install the update. In the Solution Explorer pane, under the Shared project, in the plugins folder, you can find the updated plugin. 6 2 8230 0898 001

Managing Your Plugins Deleting a Plugin Using the Unisys Multi-Device Application Plugin Browser The Unisys Multi-Device Application Plugin Browser allows you to delete the plugins you have installed if you do not require them in your application. To delete an installed plugin 1. From the Visual Studio menu bar, click MULTI-DEVICE, and select Manage Unisys Multi-Device App Plugins. The Unisys Multi-Device App Plugin Browser dialog box appears. 2. In the left pane, select Installed Plugins. The center pane displays all the installed plugins. 3. Select the plugin that you want to delete and click Delete on the bottom right. The plugin is removed from the list of Installed Plugins and from the project structure in the plugins folder, under the <project name>.shared project. Synchronizing a Plugin Using the Unisys Multi- Device Application Plugin Browser Whenever you install, delete, or update a plugin using the Plugin Browser, the plugin is automatically synchronized with the Windows and Windows Phone projects. However, in some cases, you may need to explicitly perform plugin synchronization. Some cases when you need to perform synchronization of the plugins are as follows: When you manually install or author a plugin in the shared project without using the plugin browser When an error occurred during the plugin synchronization operation, and you wish to retry the synchronization of the plugin When you cancel the plugin synchronization operation before it is completed When you upgrade your system from a previous Windows version to Windows 8.1 or later To explicitly perform plugin synchronization, from the Visual Studio menu bar, click MULTI-DEVICE, and select Synchronize Unisys Multi-Device App Plugins. The Windows and Windows Phone projects are updated to install, delete, or update all plugins as needed. Notes: Before synchronizing a plugin, you must install Node.js and Apache Cordova Plugman on your development system. After synchronizing a plugin, you are prompted to reload projects. Select Reload All. 8230 0898 001 6 3

Managing Your Plugins Synchronizing plugins applies only to the Windows and Windows Phone projects. Therefore, this step does not apply if you are developing your application on a platform earlier than Windows 8.1, since these projects are disabled. 6 4 8230 0898 001

Section 7 Testing Applications Locally You can test the applications locally on your development machine. This section provides information about how to test applications built for different platforms. Note: When testing your application locally, ensure that Debug is selected from the Solutions Configurations list on the Visual Studio standard toolbar. Using the Unisys Multi-Device Simulator for Testing The Unisys Multi-Device Simulator is a browser-based simulator that can be used to test the application locally in the browser before actually building the application. The Unisys Multi-Device Simulator option is active only for Android and ios projects. To use the Unisys Multi-Device Simulator for testing applications 1. Right-click the Android or ios project, and select Set as StartUp Project. 2. Select the project, and click Unisys Multi-Device Simulator from the toolbar. Notes: The simulator launches the application in the selected browser. For more information about the Unisys Multi-Device Simulator, see Section 8,, Working with the Unisys Multi-Device Simulator.. If you are using the simulator to test a WebView application, configure the referenced Unisys MVC Single Page Application (AJAX) to allow access from the simulator. For more information see Section 5, Developing a WebView Application. Windows Store Testing If you have Windows 8.1 installed on your development machine, you can test a Windows Store application locally. Follow this procedure 1. In the Solution Explorer pane, right-click the Windows project, and select Set as StartUp Project. 2. From the toolbar, select Local Machine to test locally. 3. Click the green triangle icon to start debugging. 8230 0898 001 7 1

Testing Applications Locally The application is launched locally. 4. To stop debugging, select the red square stop button on the toolbar. Windows Phone Testing If you have Windows 8.1 installed on your development machine and your hardware supports it, you can install Windows Phone emulators. With these emulators, you can test a Windows Phone application locally. For more information about installing Windows Phone emulators, see http://www.microsoft.com/en-us/download/details.aspx?id=43719 After the emulators are installed, use the following procedure: 1. In the Solution Explorer pane, right-click the Windows Phone project, and select Set as StartUp Project. 2. Select the desired emulator from the toolbar. 3. Click the green triangle icon to start debugging. The application is launched locally in the phone emulator. 4. To stop debugging, select the red square stop button on the toolbar. Debugging the JavaScript If your application does not work as you expect, there may be a problem in the JavaScript code. Examine the JavaScript Console to see if there are any unexpected error messages. To perform more advanced debugging, set breakpoints in the JavaScript code and examine the values of variables at run time. When you are testing a Windows Store or Windows Phone application locally, you can use the JavaScript debugging capabilities integrated with Visual Studio. To view the JavaScript console, start debugging, click Debug on the menu bar, click Windows, and then select JavaScript Console. To set a breakpoint, open the JavaScript code file in the editor, and click the left margin to set a breakpoint. See http://msdn.microsoft.com/enus/library/windows/apps/hh924759.aspx for more information. When you are testing an Android or ios application locally using the Unisys Multi- Device Simulator, you can use the JavaScript debugging capabilities integrated with the browser that launches the simulator. In particular, the Chrome browser has extensive developer tools for viewing the JavaScript console, setting breakpoints in JavaScript code, and examining the values of runtime variables. For more information about Chrome developer tools, see https://developer.chrome.com/devtools. 8230 0898 001 7 2

Section 8 Working with the Unisys Multi-Device Simulator The Unisys Multi-Device Simulator is a browser-based, virtual version of a mobile device on a computer. It allows you to run applications and use features on the computer like you would on your mobile device. It also enables you to test websites to see how well it loads on different mobile devices. It enables you to analyze content in real time and locate errors in the code. Note: If you are using the simulator to test a WebView application, configure a referenced Unisys MVC Single Page Application (AJAX) to allow access from the simulator. For more information, see Section 5, "Developing a WebView Application." Accessing the Unisys Multi-Device Simulator To access the Unisys Multi-Device Simulator 1. In the Solution Explorer pane, right-click the project that you want to simulate (Android or ios), and select Set as StartUp Project. The selected project gets highlighted. 2. On the Visual Studio standard toolbar, click Unisys Multi-Device Simulator. The Unisys Multi-Device Simulator opens in your web browser. The following table describes the options available in the Unisys Multi-Device Simulator. 8230 0898 001 8 1

Working with the Unisys Multi-Device Simulator Table 8 1.Unisys Multi-Device Simulator Options Options URL Address Bar Device Zoom Reset Simulator Orientation Theme Description Enables you to enter the URL of the website that you want to view on the simulator. Note: All websites do not open as the simulator loads the pages into an iframe. Some pages and websites use a concept called 'framekiller' or 'framebuster' to make sure that the websites do not load into the iframe. Common examples of websites using this concept are Google, Yahoo, and MSDN. Enables you to choose from a variety of simulator devices. You can also select Custom and specify a custom device height and width in CSS pixels and zoom in percentage. Example: Nexus4, Nexus5, iphone 5s Enables you to zoom the simulator device according to your preference. Enables you to reset the Simulator to default values that were shipped with the simulator. Note: Refresh the webpage after using the Reset Simulator option. Enables you to toggle the orientation between Portrait and Landscape. Enables you to change the theme of the simulator between Dark Theme and Light Theme. The theme is set to light by default. Notes: You can select the browser of your choice from the Debugging option of the configuration properties of the project. For more information, see Table C-1. The applications are best viewed in Google Chrome browser. 8230 0898 001 8 2

Section 9 Code Signing The code signing process enables you to digitally sign the applications and scripts to confirm the identity of the software author. It also ensures that the code has not been altered or corrupted. Code Signing for Android Applications The Android system requires that all installed applications be digitally signed with a certificate whose private key is held by the application's developer. The Android system uses the certificate as a means of identifying the author of an application and establishing trust relationships between applications. The important points to understand about signing Android applications include the following: All applications must be code signed. The system does not install an application on a device if it is not signed. When you are ready to release your application for end-users, you must sign it with a suitable private key. In application code signing, the private key is used to encrypt the hashes manifest. The operating system uses the public key to decrypt the manifest. The public key is stored in a certificate. You can use self-signed certificates to sign your applications. No certificate authority is required. The system tests a signer certificate's expiration date during installation. If an application's signer certificate expires after the application is installed, the application continues to function normally. You can use standard tools, such as Keytool and Jarsigner, to generate keys and sign your application.apk files. Code Signing Process The Android build process signs your application differently depending on which build mode you use to build your application. Debug Mode Debug mode is used to develop and debug applications. When you build an application in this mode, the Android SDK build tools create a debug key using the Keytool utility. This debug key is then used to automatically sign the.apk file. As the 8230 0898 001 9 1

Code Signing alias name and password are known to the Android SDK build tools, you are not required to enter these details. This is called self-signing. This self-signed certificate has an expiration date 365 days from the date of its creation. Release Mode Release mode is used to release applications that can be distributed to users or published in an App store, such as Google Play. When you build an application in release mode, use your own private key to sign the application. You can create a private key using the Keytool utility. As the alias name and password are created by you, you are required to manually enter these details. Switching between the modes Based on your requirement, you can choose to switch between the debug mode and release mode. To do this, on the Standard toolbar, from the Solution Configurations list box, choose the Debug or Release option. Note: You can also customize the build mode. To do this, on the Standard toolbar, choose Configuration Manager from the list. Creating a Private Key Creating a private key also involves creating a Keystore file and signing the Android application file. Prerequisites Ensure that the bin folder of Java is in your PATH variable. Java version 6 or later is installed in your environment. The Keytool utility and Jarsigner utility are available in the JDK. Creating a Keystore File Keystore is a repository of security certificates that are used to provide security over the Internet. Keystores are managed by using a utility called Keytool. The Keytool utility stores the keys and certificates in a Keystore. Note: Remember the credentials that you provide while creating the keystore file. This information is required for building the Android application from your project. To create a Keystore file 1. On the Start menu, point to All Programs, click Accessories, and then click Command Prompt. The Command Prompt window appears. 2. Type the following command in the command prompt: keytool -genkeypair -keysize 2048 -keyalg RSA -alias <alias-name> -keystore <keystore-name> -validity 10000 9 2 8230 0898 001

Code Signing Where, <alias-name> is the alias name for the application and <keystore-name> is the name for the Keystore file that you want to create; the recommended extension for the Keystore file is.jks or.keystore. 3. Type the following details when prompted: Password for the Keystore password and then confirm Your first name and last name Name of your organizational unit Name of your organization Name of your city or locality Name of your state or province Two-letter country code for your unit 4. Type yes to confirm the details that you have provided. 5. Type an alias password, which can be different from the Keystore password, and then confirm this password. The Keystore file is created in your system. Using the Certificate for an Android Application The Unisys Multi-Device Build Service allows you to integrate the certificate with the application during the build process. To integrate the certificate for an Android application, see Table C-1. Code Signing for ios Applications All mobile applications that run on ios devices must be signed with a code signing certificate for security and authenticity. To code sign your ios application, you require an App ID and provisioning profile. For more information, see Appendix B, App ID and Provisioning Profile. The Unisys Multi-Device Build Service provides intuitive code signing methods for different types of developers. 8230 0898 001 9 3

Code Signing The following table describes the various code signing methods. Table 9 1. Code Signing Methods If you are An experienced developer familiar with code signing Use this method 1. Select the required project template and build an application. The.ipa file is generated without code signing and provisioning profile. For more information, see, Section 10, Building Your Application. 2. Complete the code signing before you publish the application. A developer with an Apple Mac system 1. Create a.csr file and a private key by using the Keychain. Keychain is Apple s password management system available with Mac Operating System. For more information on using Keychain Access, see Table A-1. 2. Upload the.csr file to the Apple s ios Developer Program website. 3. Download the ios Certificate and the provisioning profile from the Apple s ios Developer Program website to your system. 4. Using the Generate ios Certificate dialog box, generate the P12 file and build the application. Optionally, you can also export the P12 file using the Keychain utility. For more information, see Appendix A, Development Certificate. A developer without an Apple Mac system 1. Create a.csr file using the Generate ios Certificate dialog box. 2. Generate a Development Certificate using the.csr file in the ios Developer Program website of Apple. 3. Generate a P12 file using the Generate ios Certificate dialog box. For more information, see Table A-1. 9 4 8230 0898 001

Code Signing Code Signing: Creating a New Certificate A P12 file is a combined file format that holds the private key and certificate which is used to sign the applications. The Unisys Multi-Device Build Service allows you to generate a P12 file by Creating a new certificate Importing an existing certificate Generating a P12 File 1. From the Visual Studio menu bar, click MULTI-DEVICE, select Configure Code Signing for ios Apps. The Generate ios Certificate dialog box appears. 2. Select Create a new certificate to generate a P12 file, and then click Next. 3. Type the appropriate values in the Name, Email, Password for P12 file, and Confirm Password fields, and then click Next. Note: You must remember the values that you have typed in this step. The Certificate Signing Request (CSR) file is successfully generated. 4. (Optional) To ensure that the CSR file is successfully created, click the view CSR file in folder link. The folder that contains the CSR file appears. 5. Click the Apple Developer Portal link and upload the CSR file that you created to generate a Development certificate. For more information on the Development Certificate, see Appendix A, Development Certificate. Note: Do not close the Generate ios Certificate wizard. You must have already enrolled to the ios Developer Program to upload the CSR file. For more information, visit https://developer.apple.com/programs/ios/. 6. In the Generate ios Certificate wizard, click to import the ios provisioning portal certificate. A message confirming that the P12 file is successfully generated appears. 7. (Optional) To ensure that the P12 file is successfully generated, click the Show P12 file in a folder link. The folder that contains the P12 file appears. 8. Click Finish. See Code Signing: Importing the P12 File and Provisioning Profile File to specify the location of the P12 file and provisioning profile file. 8230 0898 001 9 5

Code Signing Creating a P12 File by Importing an Existing Certificate To create a P12 file by using an existing ios certificate 1. From the Visual Studio menu bar, click MULTI-DEVICE, and then select Code Signing for ios Apps 2. Select Import an existing cer with private key to generate a P12 file, and then click Next. 3. Browse and select the Import CER file. 4. Browse and select the Import Private key. 5. Enter the password and confirm the password. 6. Click Next. A message confirming that the P12 file is successfully generated appears. See Code Signing: Importing the P12 File and Provisioning Profile File to specify the location of the P12 file and provisioning profile file. Code Signing: Importing the P12 File and Provisioning Profile File To import an existing P12 file to your project 1. In the Solution Explorer pane, right-click the ios project, and select Properties. The <project name> Property Pages dialog box appears. 2. In the left pane, click Configuration Properties, and then click Unisys Multi- Device Code Signing. 3. Choose the required configuration from the Configuration list; if you want the same settings to apply to multiple configurations, you can select All Configurations. 4. Browse and select the P12 File. 5. Enter the P12 Password. 6. Browse and select the Provisioning Profile File. 7. Click OK. The selected certificate gets integrated when you build the ios application. 9 6 8230 0898 001

Section 10 Building Your Application The Unisys Multi-Device Build Service allows you to build applications for multiple platforms by using a single set of code in a shared project. You can simultaneously build applications for devices that run on Android, ios, and Windows platforms. Building Your Application You should have appropriate code signing certificates for the platforms for which you are building the application. For more information, see, Section 7, Code Signing. Once we upload the code signing certificates that are provided in the Unisys Multi- Device Code Signing section of the <poject name> Property Pages dialog box, the application is automatically configured based on the code signing certificates that are provided. You can build your application in any of the following configurations: Debug configuration: Use this configuration to debug your project after the build. Release configuration: Use this configuration for the final release build. Use this configuration when you plan to publish your app to the various App stores. For ios, use your Distribution profile certificate. To build your application for a single platform 1. Decide the configuration on which you want to build your application by selecting Debug or Release from the Solutions Configurations list on the Visual Studio standard toolbar. By default, Debug is selected. 2. Right-click the project corresponding to the platform that you want to build, and then select Build/Rebuild. The Output window displays the build details. To simultaneously build your application for multiple platforms 1. Click Build on the Visual Studio menu bar, and select Batch Build. The Batch Build window appears. 2. Under the Build column, check the required platforms, and click Build/Rebuild. The Output window displays the build details. 8230 0898 001 10 1

Building Your Application 8230 0898 001 10 2

Section 11 Deploying Your Application This section provides information on deploying your application on various mobile devices for testing. Notes: When testing your application, make sure that Debug is selected from the Solutions Configurations list on the Visual Studio standard toolbar. To deploy your application to an App store, make sure that Release is selected from the Solutions Configurations list on the Visual Studio standard toolbar. Refer to the following web page for more information on deploying the Android applications to the App stores: http://developer.android.com/distribute/tools/launch-checklist.html Refer to the following web page for more information on deploying the ios applications to the App stores: https://developer.apple.com/library/ios/documentation/ides/conceptual/appdistributionguide/introduction/introduction.html Refer to the following web page for more information on deploying the Windows applications to the App stores: http://msdn.microsoft.com/en-us/library/hh454036.aspx Deploying Your Application on an Android Device Prerequisite: Ensure that your Android device allows installation of applications from unknown sources. To install your Android application 1. Connect your Android device to the host computer using the USB cable, and enable USB Storage option on your device. 2. Copy the appropriate.apk file from the computer to your device. 3. On your device, using a file manager application, open the file and choose install when prompted. The Android application gets installed on your device. 8230 0898 001 11 1

Deploying Your Application Debugging on an Android Device In some cases, you may encounter problems when running the application on a real device that did not occur during local testing. If your Android device is running Android 4.4 or later, you can perform remote debugging of your application using Chrome installed on your development system. To use remote debugging, ensure that Debug is selected from the Solutions Configurations list on the Visual Studio standard toolbar when you build the Android project. For more information on using remote debugging, refer to the following web page: https://developer.chrome.com/devtools/docs/remote-debugging Deploying Your Application on an ios Device Prerequisite: Install itunes on your windows development machine. To install your ios application 1. On your Windows development machine, open itunes. 2. Under Library, drag the appropriate.ipa file from the computer to Apps folder on your device. The ios application gets installed when you synchronize your device. Debugging on an ios Device In some cases, you may encounter problems when running the application on a real device that did not occur during local testing. If your ios device is running ios 6 or later and you have access to a Mac, you can perform remote debugging of your application using Safari installed on the Mac system. To use remote debugging, ensure that Debug is selected from the Solutions Configurations list on the Visual Studio standard toolbar when you build the ios project. For more information on using remote debugging, refer to the following web page: http://phonegap-tips.com/articles/debugging-ios-phonegap-apps-with-safaris-webinspector.html. 11 2 8230 0898 001

Deploying Your Application Deploying Your Application on a Windows Phone Device Prerequisites You must be a registered Windows developer. Your device must be registered. For more information on registration, see http://msdn.microsoft.com. To install your Windows application 1. Connect the device to the host computer using the USB cable, and unlock your device s screen. 2. In the Solution Explorer pane, right-click Windows Phone 8.1 project and select Set as StartUp Project. 3. From the Visual Studio toolbar, select Device to deploy the application on the Windows Phone 8.1 device. The windows application gets installed on your device. 8230 0898 001 11 3

Deploying Your Application 11 4 8230 0898 001

Appendix A Development Certificate A Development Certificate is required to run applications on your ios devices. You can generate and download these certificates only from the Apple Developer Portal. The Unisys Multi-Device Build Service provides intuitive code signing methods for different types of developers. Developers can generate the Development Certificate by using methods that are appropriate for them. Prerequisites You must be a registered ios Developer. You must have already created the.csr file and saved it on your system. The following table describes the different methods of generating the Development Certificate. Table A 1. Development Certificate Methods If you are a A developer with an Apple Mac system Use this method 1. Log on to the Apple Developer Portal, and click Member Center. The Developer Program Resources page appears. 2. Under Developer Program Resources, click Certificates, Identifiers & Profiles. The Certificates, Identifiers & Profiles page appears. 3. Under ios Apps, select Certificates. The ios Apps appears in the left pane and ios Certificates appears in the right pane. 4. In the left pane, click Certificates. A list of all of the certificates that you created appears. 5. To create a new certificate, click. 6. On the Select Type tab, select ios App Development for Development Certificate, and then click Continue. 7. On the Request tab, click Continue. The Generate tab appears. 8. In your Mac system, in Applications, under Utilities, open Keychain Access. 9. On the Quick Access bar, select Keychain Access, point to Certificate Assistant, select Request a Certificate From a Certificate Authority, and then click Save. The Certificate Information wizard appears. 10. In the Certificate Information wizard, type the appropriate values in 8230 0898 001 A 1