Here's how to integrate Apigee functionality into your HTML5/JavaScript application using the Apigee SDK for JavaScript.

1. Create an Apigee account

Sign in or create a new account if you do not already have one. You won't need it to install the SDK, but you'll need it to create apps.

For more about Apigee accounts, see Creating an Apigee Account.

After you've signed up, you'll see that you have a sandbox application to experiment with. For more information about that, see Using a Sandbox Application.

2. Download the Apigee JavaScript SDK

Download the Apigee JavaScript SDK and expand the ZIP file.

When you expand the ZIP file, you should see the following structure:

apigee-javascript-sdk-master
    /lib
    /samples
    /source
    /tests
    README.md
    build_release_zip.sh

What's included

The SDK includes the following:

File or Directory Description
/lib Minified version of the SDK (apigee.js).
/samples Sample apps that you can run to explore Apigee features.
/source Source code for JavaScript functions in the SDK.
/tests For SDK development only. HTML and JavaScript for testing the SDK functions.
build_release_zip.sh Builds SDK outputs and packages them into a ZIP file.

3. Import the SDK into your HTML

To enable support for Apigee-related functions in your HTML, you'll need to include apigee.js in your app. To do this, add the following to the head block of your HTML:

<script type="text/javascript" src="path/to/js/sdk/apigee.js"></script>

4. Instantiate Apigee.Client

Apigee.Client initializes the Apigee SDK, and gives you access to all of the Apigee SDK methods.

You will need to pass a JSON object with the UUID or name for your API BaaS organization and application when you instantiate it.

var client_creds = {
        orgName:'your-org',
        appName:'your-app'
    }

//Initializes the SDK. Also instantiates Apigee.MonitoringClient
var dataClient = new Apigee.Client(client_creds);  

Optional parameters

You may also pass these optional properties with your client credentials:

  • logging:true: Produces verbose debugging output on the console to quickly see where your application code is crashing.
  • buildCurl:true: All API calls the SDK makes will be logged to the console when they are made.
  • logoutCallback:function(err, response): Sets a callback function that will be called anytime the OAuth access token sent with the request is invalid. Normally you would specify a callback that redirects the user to the log in page of your app.
  • _callTimeourCallback:function(err, response): Sets a callback function that will be called if any call to API BaaS takes longer than 30 seconds to complete. This is useful for setting a default request timeout message to be displayed to the user.

5. Verify SDK installation

Once initialized, the SDK will also automatically instantiate Apigee.MonitoringClient and begin logging usage, crash and error metrics for your app.

To verify that the SDK has been properly initialized, run your app, then go to 'Monitoring' > 'App Usage' in the API BaaS admin portal to verify that data is being sent.

It may take up to two minutes for data to appear in the admin portal after you run your app.

Installation complete! Try these next steps

Call additional SDK methods in your code

Use dataClient or dataClient.monitor to call SDK methods:

  • dataClient: Used to access the data methods of the Apigee SDK, including those for push notifications, data store, and geolocation.
  • dataClient.monitor: Used to access the app configuration and monitoring methods of the Apigee SDK, including advanced logging, and A/B testing.

Add API BaaS features to your app

With Apigee's API BaaS you can quickly add valuable features to your mobile or web app, including push notifications, a custom data store, geolocation and more. Check out these links to get started with a few of our most popular features:

  • Push notifications: Send offers, alerts and other messages directly to user devices to dramatically increase engagement. With Apigee's API BaaS you can send 10 million push notification per month for free!
  • App Monitoring: When you initialize the Apigee SDK, a suite of valuable, customizable application monitoring features are automatically enabled that deliver the data you need to fine tune performance, analyze issues, and improve user experience.
  • Geolocation: Keep your app highly-relevant by targeting users or returning result sets based on user location.
  • Data storage: Store all your application data on our high-availability infrastructure, and never worry about dealing with a database ever again.
  • User management and authentication: Every app needs users. Use Apigee's API BaaS to easily implement registration, login and OAuth 2.0-compliant authentication.

Check out the sample apps

The SDK includes samples that illustrate Apigee features. To look at them, open the index.html file for each. You'll find the samples in the following location in your SDK download:

apigee-javascript-sdk-master
...
/samples		

The samples include the following:

Sample Description
booksSample.html An app for storing a list of books that shows Apigee database operations such as reading, creating, and deleting.
messagee An app for sending and receiving messages that shows Apigee database operations (reading, creating).
monitoringSample.html Shows basic configuration and initialization of the HTML5 app monitoring functionality. Works in browser, PhoneGap, Appcelerator, and Trigger.io.
readmeSample.html A simple app for reading data from an Apigee database.

Help or comments?

  • Something's not working: See Apigee Support
  • Something's wrong with the docs: Click Send Feedback in the lower right.
    (Incorrect? Unclear? Broken link? Typo?)