Cordova (PhoneGap) Sample App Guide

This guide is targeted at Mac OS X users.

What is Cordova?
Cordova is a framework that allows you to build native mobile applications using HTML, CSS, and Javascript.

About this Guide:
This guide is meant to get you up and running with our sample app in order to quickly show how to create a Cordova app, and to demonstrate the basic functionalities of the Urban Airship service.

You will be installing and using Cordova from the Command Line. In Mac OS X, this is the Terminal application. Using the Command Line is the best way to manage your Cordova projects.

This guide is not a comprehensive development resource for Urban Airship and Cordova, and if you need more information, please see our Cordova/PhoneGap Documentation.

 

The Guide:

Install Node.js (via nodejs.org or homebrew)

  1. Install Cordova:
    $ sudo npm install -g cordova
  2. Install platform dependencies:

    $ npm install -g ios-deploy
  3. Create project (using a unique ProjectName and com.bundle.id):

    $ cordova create project-folder com.bundle.id ProjectName
  4. Change directory after creating project:

    $ cd project-folder
  5. Add platforms to project:

    $ cordova platform add ios android
  6. Install Device Plugin:

    $ cordova plugin add cordova-plugin-device
  7. Install UA Cordova/Phonegap plugin:

    $ cordova plugin add urbanairship-cordova
  8. Add UA preferences to your config.xml file inside <widget></widget> (and add your app key and app secret to the appropriate lines.):

     <!-- Urban Airship app credentials -->
    <preference name="com.urbanairship.production_app_key" value="Your Production App Key" />
    <preference name="com.urbanairship.production_app_secret" value="Your Production App Secret" />
    <preference name="com.urbanairship.development_app_key" value="Your Development App Key" />
    <preference name="com.urbanairship.development_app_secret" value="Your Development App Secret" />

    <!-- Required for Android. -->
    <preference name="com.urbanairship.gcm_sender" value="Your GCM Sender ID" />

    <!-- If the app is in production or not -->
    <preference name="com.urbanairship.in_production" value="true | false" />

    <!-- Optional config values -->

    <!-- Enable push when the application launches -->
    <preference name="com.urbanairship.enable_push_onlaunch" value="true | false" />

    <!-- Enable Analytics when the application launches -->
    <!-- Warning: Features that depend on analytics being enabled may not work properly if analytics is disabled (reports, location segmentation, region triggers, push to local time). -->
    <preference name="com.urbanairship.enable_analytics" value="true | false" />

    <!-- Urban Airship development log level defaults to debug -->
    <preference name="com.urbanairship.development_log_level" value="none | error | warn | info | debug | verbose" />

    <!-- Urban Airship production log level defaults to error -->
    <preference name="com.urbanairship.production_log_level" value="none | error | warn | info | debug | verbose" />

    <!-- Override the Android notification icon -->
    <preference name="com.urbanairship.notification_icon" value="ic_notification" />

    <!-- Override the Android notification large icon -->
    <preference name="com.urbanairship.notification_large_icon" value="ic_notification_large" />

    <!-- Override the Android notification sound (sound file should be in res/raw)-->
    <preference name="com.urbanairship.notification_sound" value="push" />

    <!-- Specify the notification accent color for Android API 21+ (Lollipop) -->
    <preference name="com.urbanairship.notification_accent_color" value="#0000ff" />

    <!-- Clear the iOS badge on launch -->
    <preference name="com.urbanairship.clear_badge_onlaunch" value="true | false" />

    <!-- Enables/disables auto launching the message center when the corresponding push is opened. -->
    <preference name="com.urbanairship.auto_launch_message_center" value="true | false" />

    <!-- iOS 10 alert foreground notification presentation option -->
    <preference name="com.urbanairship.ios_foreground_notification_presentation_alert" value="true | false"/>

    <!-- iOS 10 badge foreground notification presentation option -->
    <preference name="com.urbanairship.ios_foreground_notification_presentation_badge" value="true | false"/>

    <!-- iOS 10 sound foreground notification presentation option -->
    <preference name="com.urbanairship.ios_foreground_notification_presentation_sound" value="true | false"/>
  9. (iOS Only) Add your Apple Developer Account Team ID to the build.json file.
     {
    "ios": {
    "debug": {
    "developmentTeam": "XXXXXXXXXX"
    },
    "release": {
    "developmentTeam": "XXXXXXXXXX"
    }
    }
    }
  10. Replace the www folder with the Example folder from plugins/urbanairship-cordova.
    This will replace your app with the Urban Airship Cordova/PhoneGap Sample App.

  11. Build your app:

    $ cordova build
  12. Test your app with a device attached via USB:

    $ cordova run ios --device

Now you're ready to test drive the Urban Airship platform using our Sample App.

By default, the Urban Airship Cordova Sample App will not display notifications when the app is in the foreground.

Related Content:

Comments