Show TOC

Creating an Apache Cordova ProjectLocate this document in the navigation structure

To create an Apache Cordova 3.6 project for use with Kapsel, use the Cordova command line tool.

Prerequisites

Set up your development environment.

Context

You must run the commands from a Windows command prompt, or a terminal window on iOS. See http://cordova.apache.org/docs/en/3.0.0/guide_cli_index.md.html#The%20Command-line%20InterfaceInformation published on non-SAP site.

Procedure

  1. (Optional) Create a folder to hold your Kapsel Cordova projects.
    For example, on Windows, C:\Documents and Settings\<your_account>\Kapsel_Projects, or on OS X, ~/Documents/Kapsel_Projects.
  2. (Optional) Open a Windows command prompt or terminal and navigate into the project folder you created.
  3. At the command prompt, enter:

    cordova create <Project_Folder> <Application_ID> <Application Name> <Plugin_Search_Path>

    Use the appropriate delimiter for path names.

    This command may take a few minutes to complete, as an initial download of the template project that is used is downloaded to C:\Users\user\.cordova on Windows, or ~/users/user/.cordova on Mac.

    The parameters are:

    • (Required) <Project_Folder> – the directory to generate for the project.
    • (Optional) <Application_ID> – must match the Application ID as configured on SAP Mobile Platform Server for the application, which is reverse-domain style, for example, com.sap.kapsel.
      Note <Application_ID> cannot be too simple. For example, you can have "a.b" for an ID, but you cannot have "MyApplicationId." The ID is used as the package name (name space) for the application and it must be at least two pieces separated by a period, otherwise, you will get build errors.
    • (Optional) <Application_Name> – name for the application.
    • (Required) <Plugin_Search_Path> – when installing plugins, the CLI expects plugins to be installable from the hosted Apache Cordova plugins registry. The Plugin_Search_Path parameter provides a location where local plugins can be found. This parameter is required. In previous versions of Kapsel, a local .git folder was used to resolve the location of dependent Kapsel plugins.

      The search path value is stored in C:\Kapsel_Projects\LogonDemo\.cordova\config.json or ~/Documents/Kapsel_Projects/LogonDemo/.cordova/config.json. Note it is also possible to specify a search path when adding a plugin. Enter cordova help and examine the plugin add command for additional details.

      Specify the Plugin_Search_Path in the format of a JSON string "{\"plugin_search_path\":\"<path>/\"}". For example:

      • on a PC: "{\"plugin_search_path\":\"C:/SAP/MobileSDK3/KapselSDK/plugins/\"}"
      • on a Mac: "{\"plugin_search_path\":\"/Users/<username>/SAP/MobileSDK3/KapselSDK/plugins/\"}"

    In this example, you create a project folder named LogonDemo in the Kapsel_Projects directory. The Application ID is "com.mycompany.logon" and the application name is "LogonDemo." The plugin search path for finding local plugins is C:/SAP/MobileSDK3/KapselSDK/plugins/. Running cordova -d allows you to see the progress of the project creation.

    cordova create ~\Kapsel_Projects\LogonDemo com.mycompany.logon LogonDemo "{\"plugin_search_path\":\"C:/SAP/MobileSDK3/KapselSDK/plugins/\"}"

    Your new project includes scripts to build, emulate, and deploy your application.

    Note All of the Cordova command line interface commands operate against the current folder. The create command creates a folder structure for your Cordova projects while the remaining commands must be issued from within the project folder created by create.
  4. To add the platform, change to the folder you created in the previous step:
    cd <~Project_Name>
    This OS X example adds the Android , iOS, and Windows platforms.
    cd ~\Kapsel_Projects\LogonDemo 
    cordova platform add ios android windows
    Note Android is supported on both Windows and OS X, but iOS is supported only on OS X.
    Note You must add the platform before you add any Kapsel plugins.
    The project directory structure is similar to this:
    LogonDemo/
    |--.cordova/
    |-- merges/
    | |-- android/
    | `-- ios/
    |-- platforms/
    | |-- android/
    | `-- ios/
    |-- plugins/
    |-- www/
     -- config.xml
    `
    • .cordova – identifies the project as a Cordova project. The command line interface uses this folder for storing its lazy loaded files. The folder is located immediately under your user’s home folder (On Windows, c:\users\user_name\ , and on Macintosh, /users/user_name/.cordova).
    • merges – contains your Web application assets, such as HTML, CSS, and JavaScript files within platform-specific subfolders. Files in this folder override matching files in the www/ folder for each respective platform.
    • www – this folder contains the main HTML, CSS, and JavaScript assets for your application. The index.html file is the default page of the application. Once you finish editing your project's files, update the platform specific files using the cordova -d -prepare command.
    • config.xml – the config.xml file in the root directory contains meta data and native application information needed to generate the application.
    • platforms – native application project structures are contained in subfolders for the platforms you added to your application.
  5. (Optional) You can test your Cordova project by opening it in the respective development environment, for example, Xcode or Eclipse with the ADT plugins, and running it on the simulator or emulator.
  6. Add the plugins. See the detailed instructions for adding each plugin in Kapsel Plugins. For example, to add the Cordova console plugin and the Kapsel Logon plugin on Windows, enter:
    cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git
     cordova plugin add C:\SAP\MobileSDK3\KapselSDK\plugins\logon 
    Note The path you enter to the Kapsel plugin must be the absolute path (not relative path).
  7. Edit the Web application content in the project's www folder and use the cordova prepare command to copy that content into the Android, iOS, and Windows project folders:
    cordova prepare android
    cordova prepare ios
    cordova prepare windows