11436 SSO

A Cloud Enabled To-do App with Apigee Edge

mazimi
Mar 05, 2014

Want to make your AngularJS app data automatically sync across your clients? Apigee Edge makes it easy. We’ll show you by using an AngularJS version of the TodoMVC project as a sample application for adding the API BaaS (formerly known as "App Services").

TodoMVC, a project that offers the same Todo task-list application implemented using MV* concepts in most of the popular frameworks, employs HTML5 local storage to make your list of to-do tasks persistent on your browser. This works fine if you want to use this app only in one browser, but if you want to store this data in the cloud and have access from any device or browser, you should store the list of to-do items in a remote server. Apigee Edge helps you to add a backend to your app; in this example, we’ll replace the HTML5 local storage mechanism with the Apigee Edge data store.

In very short order, you’ll be able to cloud-enable an app using the API BaaS component to sync a user’s data across multiple devices. You can find a completed version of the sample we’ll be working through here: https://github.com/mohsen1/ApigeeSDKSample.

To get started, you’ll need an Apigee account (if you don’t have one, visit www.apigee.com to create one), your organization name, and the app name for this tutorial.

You can download the AngularJS version of the TodoMVC project from here. Note that this project includes many different architectures, but here we’re focusing on the AngularJS architecture. Make sure you have Python installed. After downloading and unzipping the project in your terminal application, go to the TodoMVC folder and change your directory to architecture-examples/angularjs. Then run a simple HTTP server in that directory:

python -m SimpleHTTPServer

 

To begin our process:

  1. Download and include the Apigee JavaScript SDK in the sample app.

  2. Find apigee.min.js under the lib folder and copy it to your project folder.

  3. Put it in the js/lib folder (If you don’t have the  lib folder in your js folder, create it).

  4. Add a reference to the SDK file in your index.html file, by putting this line right before the app.js reference:

<script src="js/lib/apigee.min.js"></script>

 

The main file that we are going to edit is todoStorage.js. This file saves and stores to-do items. First, we need to create a client for our application.

Inside the todoStorage factory, add these lines to create a client:

todoStorageFactory = todomvc.factory('todoStorage', function ($q) {

var dataClient = new Apigee.Client({

       orgName: APIGEE_ORG,

       appName: APIGEE_APP

   });

return {

Replace APIGEE_ORG and APIGEE_APP with your own Apigee org name and app name. As you might noticed, we have added $q dependency to this module. The reason for this is that the Apigee SDK will return your request asynchronously and the Q Library is the best way of managing asynchronous APIs.

Next up, we need to replace the GET method in this module to add backend support to our app. The new GET method should look like this:


get: function () {

           var deferred = $q.defer();

           dataClient.request({

               endpoint: 'todo'

           }, function(err, data, errMsg){

               if(err) return deferred.reject(errMsg);

               deferred.resolve(data.entities);

           });

           return deferred.promise;

}


In the code above, we used the request method of our dataClient to get all the to-do elements in our to-do collection and pass it via a deferred object. This basically makes a GET request to our to-do endpoint to get all the elements in the to-do collection. Don’t worry if you don’t have a to-do collection—Apigee Edge will take care of this later.

Now that the GET method is returning a promise, we need to update our todoCtrl.js file to adopt the new approach.

todomvc.controller('TodoCtrl', function TodoCtrl($scope, $routeParams, todoStorage, filterFilter) {


function fetchTodos () {

todoStorage.get().then(function (data) {

todos = $scope.todos = data;

});

}


var todos = [];

fetchTodos();

As you may have noticed, we removed this line:

var todos = $scope.todos = todoStorage.get();

 

Because we are loading to-dos asynchronously, we can’t just assign to-dos from the GET function. Instead we used our promise’s then method to assign todos and $scope.todos when they become available. We will use fetchTodos later in our code.

At this point, your app should work like it was working before. You will see a network call to  Apigee for getting your to-do collection but because that collection is empty, it will simply return an empty collection.

Now, you’ll need to update the PUT method to add Apigee support.

put: function(todos) {

           todos = todos.forEach(function(todo) {

               todo.type = 'todo';

               var entity = new Apigee.Entity({

                   client: dataClient,

                   data: todo

               });

               entity.save(logError);

           });

       },

This will save each new item that is updated in the Apigee servers.

To cloud-enable all the actions in the to-do app, you will need to add these three methods:

       addOne: function (todo) {

           todo.type = 'todo';

           dataClient.createEntity(todo, logError);

       },


       updateOne: function (todo){

           todo.type = 'todo';

           var entity = new Apigee.Entity({

               client: dataClient,

               data: todo

           });

           entity.save(logError);

       },


       deleteOne: function (todo) {

           todo.type = 'todo';

           var properties = {

               client: dataClient,

               data: todo

           }

           var entity = new Apigee.Entity(properties)

           entity.destroy(logError);

       }

These methods are necessary for making proper requests for updating and deleting to-dos. We also need to edit todoCtrl.js a little to make use of our newly added methods:


$scope.addTodo = function () {

var newTodo = $scope.newTodo.trim();

if (!newTodo.length) {

return;

}


todoStorage.addOne({

title: newTodo,

completed: false

});

fetchTodos();


$scope.newTodo = '';

};


...


$scope.doneEditing = function (todo) {

$scope.editedTodo = null;

todo.title = todo.title.trim();


if (!todo.title) {

$scope.removeTodo(todo);

} else {

todoStorage.updateOne(todo);

}

};

...

$scope.removeTodo = function (todo) {

todos.splice(todos.indexOf(todo), 1);

todoStorage.deleteOne(todo);

};


Now that we have added our custom methods and used them in our controller, everything should work. Go ahead and try your app. You should be able to see each to-do item that you add to your to-do list displayed in the admin console. The SDK automatically captures performance metrics.

In less than 10 minutes, you’ve cloud-enabled an app using the API back-end component of Apigee Edge to sync a user’s data across multiple devices. Again, you can find a completed version of this sample here: https://github.com/mohsen1/ApigeeSDKSample

From this point, you could add multiple collections for each category of to-dos and a selector in your app for choosing each collection.

Happy hacking!

API Management Decision-Making Kit

Next Steps

 
 

Resources Gallery

News