Journey for Cordova

Cordova plugin for using Journey. This plugin uses the native SDK Android and iOS.

Actually, it's not possible to use Journey for Cordova with a Tab Bar (iOS) or a Bottom Navigation (Android)

Requirements

This plugin uses native SDKs. Since those SDKs are private, you will need to get access credentials to our artifactory. This plugin uses Cocoapods to manage dependencies for iOS, please install it first: https://cocoapods.org.

Credentials configuration

Once you have credentials to access our artifactory, one further step is required before installing the plugin. Please follow one of these steps to configure the credentials properly. The <YOUR_ARTIFACTORY_USERNAME> and <YOUR_ARTIFACTORY_PASSWORD> should be replaced with your username and password!

Using Config.xml preferences

In the Config.xml file of your project, add these lines:

<widget>
	.
	.
	<preference name="KISIO_ARTIFACTORY_USERNAME" value="<YOUR_ARTIFACTORY_USERNAME>" />
    	<preference name="KISIO_ARTIFACTORY_PASSWORD" value="<YOUR_ARTIFACTORY_PASSWORD>" />
</widget>

Using environment variables

Define two global environment variables as follows:

KISIO_ARTIFACTORY_USERNAME=<YOUR_ARTIFACTORY_USERNAME>
KISIO_ARTIFACTORY_PASSWORD=<YOUR_ARTIFACTORY_PASSWORD>

Using global properties files (MacOS users only)

iOS

In the Home directory, open .netrc file (if not found, create a new file) and add this line:

machine kisiodigital.jfrog.io login <YOUR_ARTIFACTORY_USERNAME> password <YOUR_ARTIFACTORY_PASSWORD>

Android

In the ~/.gradle directory, open gradle.propertiesfile (if not found, create a new file) andd these lines:

kisio_artifactory_username=<YOUR_ARTIFACTORY_USERNAME>
kisio_artifactory_password=<YOUR_ARTIFACTORY_PASSWORD>

Installation

Use this command to install the plugin cordova plugin add cordova-plugin-navitia-sdk-ui

Setup for Android platform

This plugin uses Google Maps and requires a Google API key in case you're targeting the Android platform with your cordova application. You can get your own API key using this link: https://developers.google.com/maps/documentation/android-api/signup

You need to update your config.xml file as follows:

<widget ......... xmlns:android="http://schemas.android.com/apk/res/android">
    .
    .
    <platform name="android">
        .
        .
        <config-file parent="/manifest/application" target="AndroidManifest.xml">
            <meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_API_KEY" />
        </config-file>
    </platform>
    .
    .
</widget>

Note that you have to change YOUR_API_KEY with your own API key!

Usage

Configuration - NavitiaSDKUI.init(config, success, failure)

Environments

For the supported environments, please check the table below:

Custom titles

You can customize the screens titles. A string ressource ID is required and should be passed within the CustomTitles Object.

Example

var config = {
    environment: 'CUSTOMER',
    token: 'my-token',
    coverage: 'my-coverage',
    backgroundColor: '#e67e22',
    originColor: '#2980b9',
    destinationColor: '#d35400',
};

NavitiaSDKUI.init(config, function() {}, function(error) {
    console.log(error);
});

Example with custom form and custom titles

var transportModes = [{
      title: 'Metro',
      type: 'metro',
      icon: NavitiaSDKUI.TransportModeIcon.METRO,
      selected: true,
      firstSectionMode: [ NavitiaSDKUI.SectionMode.WALKING ],
      lastSectionMode: [ NavitiaSDKUI.SectionMode.WALKING ],
      physicalMode: ['physical_mode:Metro'],
    },{
      title: 'Bus',
      type: 'bus',
      icon: NavitiaSDKUI.TransportModeIcon.BUS,
      selected: true,
      firstSectionMode: [ NavitiaSDKUI.SectionMode.WALKING ],
      lastSectionMode: [ NavitiaSDKUI.SectionMode.WALKING ],
      physicalMode: ['physical_mode:Bus'],
    },{
      title: 'Train',
      type: 'train',
      icon: NavitiaSDKUI.TransportModeIcon.TRAIN,
      selected: true,
      firstSectionMode: [ NavitiaSDKUI.SectionMode.WALKING ],
      lastSectionMode: [ NavitiaSDKUI.SectionMode.WALKING ],
      physicalMode: ['physical_mode:RapidTransit', 'physical_mode:LocalTrain', 'physical_mode:Train', 'physical_mode:Shuttle'],
    },{
      title: 'Bike',
      type: 'bike',
      icon: NavitiaSDKUI.TransportModeIcon.BIKE,
      selected: false,
      firstSectionMode: [ NavitiaSDKUI.SectionMode.BIKE ],
      lastSectionMode: [ NavitiaSDKUI.SectionMode.BIKE ],
      physicalMode: ['physical_mode:Bike'],
    },{
      title: 'BSS',
      type: 'bss',
      icon: NavitiaSDKUI.TransportModeIcon.BSS,
      selected: false,
      firstSectionMode: [ NavitiaSDKUI.SectionMode.BSS ],
      lastSectionMode: [ NavitiaSDKUI.SectionMode.BSS ],
      physicalMode: ['physical_mode:Bss'],
      realTime: true,
    },{
      title: 'Car',
      type: 'car',
      icon: NavitiaSDKUI.TransportModeIcon.CAR,
      selected: false,
      firstSectionMode: [ NavitiaSDKUI.SectionMode.CAR ],
      lastSectionMode: [ NavitiaSDKUI.SectionMode.CAR ],
      physicalMode: ['physical_mode:Car'],
      realTime: true,
    }];
    
var customTitles = {
     form: "form_screen_title",
     journeys: "journeys_screen_title",
     roadmap: "roadmap_screen_title",
     ridesharing: "ridesharing_screen_title",
     autocomplete: "autocomplete_screen_title"
};

var config = {
    token: 'my-token',
    primaryColor: '#e67e22',
    secondaryColor: '#2980b9',
    destinationColor: '#d35400',
    transportModes: transportModes,
    customTitles: customTitles
};

NavitiaSDKUI.init(config, function() {}, function(error) {
    console.log(error);
});

Journeys request - NavitiaSDKUI.invokeJourneyResults(params, success, failure)

Example

var journeyParams = {
    originId: '2.3665844;48.8465337',
    destinationId: '2.2979169;48.8848719',
    originLabel: 'My Home',
    firstSectionModes: [NavitiaSDKUI.SectionMode.WALKING, NavitiaSDKUI.SectionMode.CAR, NavitiaSDKUI.SectionMode.BIKE, NavitiaSDKUI.SectionMode.BSS, NavitiaSDKUI.SectionMode.RIDESHARING],
    addPoiInfos: ['bss_stand', 'car_park'],
    count: 5,
};

NavitiaSDKUI.invokeJourneyResults(journeyParams, function() {}, function(error) {
    console.log(error);
});

Public transport

var journeyParams = {
    originId: '2.3665844;48.8465337',
    destinationId: '2.2979169;48.8848719',
};

Bike

var journeyParams = {
    originId: '2.3665844;48.8465337',
    destinationId: '2.2979169;48.8848719',
    forbiddenUris: ['physical_mode:Bus', ‘physical_mode:Tramway’, ‘physical_mode:Metro’]
    firstSectionModes: [NavitiaSDKUI.SectionMode.BIKE],
    lastSectionModes: [NavitiaSDKUI.SectionMode.BIKE],
};

BSS

var journeyParams = {
    originId: '2.3665844;48.8465337',
    destinationId: '2.2979169;48.8848719',
    forbiddenUris: ['physical_mode:Bus', ‘physical_mode:Tramway’, ‘physical_mode:Metro’]
    firstSectionModes: [NavitiaSDKUI.SectionMode.BSS],
    lastSectionModes: [NavitiaSDKUI.SectionMode.BSS],
    addPoiInfos: ['bss_stand'],
};

Car

var journeyParams = {
    originId: '2.3665844;48.8465337',
    destinationId: '2.2979169;48.8848719',
    firstSectionModes: [NavitiaSDKUI.SectionMode.CAR],
    addPoiInfos: ['car_park'],
};

Ridesharing

var journeyParams = {
    originId: '2.3665844;48.8465337',
    destinationId: '2.2979169;48.8848719',
    firstSectionModes: [NavitiaSDKUI.SectionMode.RIDESHARING],
    lastSectionModes: [NavitiaSDKUI.SectionMode.RIDESHARING],
};

Colors configuration

Actually, three color parameters can be customized for the SDK. These parameters must be added to the "config" object as indicated in the table above.

Customize icons

Some module icons can be customized using a JSON configuration. Please note that all ressources should be added to the platform main assets/bundle folder.

Transport

Lines

Modes

Commercial

Providers

Example

var transportConfiguration = `{
    "lines": [
      {
        "code": "6",
        "icon_res": "ic_metro_6",
        "commercial": {
          "name": "Métro",
          "id": "commercial_mode:Metro"
        }
      }
    ],
    "modes": [
      {
        "icon_res": "ic_metro",
        "commercial": {
          "name": "Métro",
          "id": "commercial_mode:Metro"
        }
      }
    ],
    "providers": [
        {
          "id": "ridesharing_provider",
          "icon_res": "ic_ridesharing"
        }
    ]
}`

var config = {
    token: 'my-token',
    primaryColor: '#e67e22',
    secondaryColor: '#2980b9',
    destinationColor: '#d35400',
    transportConfiguration: transportConfiguration
};

NavitiaSDKUI.init(config, function() {}, function(error) {
    console.log(error);
});

Troubleshooting

Force gradle wrapper version before build

In terminal, before building :

export CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL=https://services.gradle.org/distributions/gradle-6.0.1-all.zip

Specific android tools version : 29

In case you are having problems building and getting this kind of problems :

platforms/android/build/intermediates/res/merged/debug/values-v24/values-v24.xml:3: AAPT: Error retrieving parent for item: No resource found that matches the given name ...

You may try to override your android compiler environment variables :

export ORG_GRADLE_PROJECT_cdvCompileSdkVersion=android-28
export ORG_GRADLE_PROJECT_cdvBuildToolsVersion=29.0.0

More information on Cordova website

Manifest merger issue

This usually happens if you change the API key in the config.xml file. The build fails and you're getting this kind of error:

Element meta-data#com.google.android.geo.API_KEY at AndroidManifest.xml:xx:xx-xx duplicated with element declared at AndroidManifest.xml:xx:xx-xx

You may try to remove the Android platform and add it back again.

Android building problem : Cannot read property ‘replace’ of undefined

In the file /platforms/android/cordova/lib/emulator.js, replace :

var num = target.split(’(API level ‘)[1].replace(’)’, ‘’);

By :

var num = target.match(/\d+/)[0];

License

Check out the Cordova plugin License here.