Skip to content

Cordova Chat code sample - How To guide

Here we explain how to run origin Chat code sample for browser on Cordova/PhoneGap environment

Complete Chat API integration guide for Web/Javascript and Hybrid apps is here

Integration details

  1. Make sure you have the latest Cordova installed:
Terminal window
cordova --version

The output will be something like this:

Terminal window
9.0.0

If Cordova is not installed - run the following command:

Terminal window
npm install -g cordova
  1. Create Cordova app:
Terminal window
cordova create sample-chat-cordova com.sample.chat SampleChatCordova

You can use the Create your first Cordova app guide to get more info how to create your 1st Cordova app.

  1. Change directory to newly created Cordova app:
Terminal window
cd sample-chat-cordova
  1. Add platforms:
Terminal window
cordova platform add ios --save && cordova platform add android --save
  1. Install cordova-plugin-device plugin:
Terminal window
cordova plugin add cordova-plugin-device
  1. Install cordova-custom-config plugin
Terminal window
cordova plugin add cordova-custom-config

Then add the following lines into config.xml (for iOS 10+, to support files attachments in sample):

<platform name="ios">
...
<custom-config-file parent="NSPhotoLibraryUsageDescription" platform="ios" target="*-Info.plist">
<string>Access to photo library for file attachments</string>
</custom-config-file>
<custom-config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
<string>Access to camera for file attachments</string>
</custom-config-file>
</platform>

And the following for Android:

<platform name="android">
...
<custom-preference name="android-minSdkVersion" value="21" />
<custom-preference name="android-targetSdkVersion" value="28" />
<custom-config-file parent="/*" target="AndroidManifest.xml">
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-feature android:name="android.hardware.camera" />
</custom-config-file>
</platform>

Also, don’t forget to put the xmlns:android="http://schemas.android.com/apk/res/android" attribute in the root widget element.

More info on Android permissions.

  1. Install cordova-plugin-android-permissions plugin
Terminal window
cordova plugin add cordova-plugin-android-permissions

Then add a code to ask Android users for permissions. You can copy the needed code from the file: https://github.com/ConnectyCube/connectycube-cordova-samples-materials/blob/master/sample-chat-cordova/cordova-permissions.js

  1. Install iOS Deployment Tools if you want to launch iOS app on iOS device.

  2. Copy content from sample-chat-web folder to www folder of your Cordova app. The following command can be used for it:

Terminal window
cp -r sample-chat-browser/* sample-chat-cordova/www/
  1. Connect cordova.js at your index.html file:
<script type="text/javascript" src="cordova.js"></script>
  1. Finally, use the following commands to run the sample:
Terminal window
cordova clean ios && cordova run ios --device # for run on device
cordova clean ios && cordova emulate ios # for run on emulator
Terminal window
cordova clean android && cordova run android --device # for run on device
cordova clean android && cordova emulate android # for run on emulator

The complete config.xml, package.json and cordova-permissions.js are available at GitHub repository

Debugging

The following tools will help you debug your Cordova application:

Can’t build yourself?

Got troubles with building Cordova code sample? Just create an issue at Issues page - we will create the sample for you. For FREE!