apache usergrid for javascript developers

Dave Johnson Apigee

Apache Usergrid for JavaScript developers

© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 2

Agenda

» Overview: The why & whats of Usergrid » Exploring the Usergrid REST API » Usergrid for JavaScript developers » Creating an JavaScript app with Usergrid » Options for Running & Deploying Usergrid » Q & A

Usergrid Overview


Why Usergrid?

» Don’t build a server…

PHPRuby

Java

Node

MySQL PaaS

Services in the cloud

AppServer

Cloud


Why Usergrid?

» Focus on building your app


&

App Cloud


What is Usergrid?

» Complete Back-end as a Service (BaaS) » Graph Database wrapped in a REST API

» The three parts of Usergrid: » 1. Web application, provides REST API » 2. Comprehensive management portal » 3. Client SDKs

» iOS, Android, JavaScript, Node, Ruby, Java, Perl, PHP, .Net, Command-line, …


What is Usergrid?

» Core services you need to build apps: » JSON object indexing & query » Geo-location & geo-queries » Connections & Collections » Users, Groups, Social Graph » Authentication, Roles & Permissions » Asset & File Management

» Coming in 2.0: Push Notifications


Limitations

» No custom server-side logic or validation » If you need it, you’ll need a server

Your server or an “API Gateway”


&

App Cloud


Other factors…

» Usergrid is Open Source, literally. You build it. » (binary release is “on the road map”)

» Usergrid is software, not a service. You run it. » (or pay a BaaS provider to run it for you)


An Apache Incubator Project

Exploring the Usergrid API


Usergrid REST API

» JSON over HTTP » POST, GET, PUT and DELETE JSON Entities

» Entities have UUID, Name, Type » Entities have name/value properties

» All Entity properties are indexed » SQL-like syntax for Entity queries


Usergrid REST API

»Usergrid is multi-tenant »Multiple organizations »Each organization has multiple apps

»Each application has root URL like this »http:// host/${org}/${app}

» Entities exist in Collections »http:// host/${org}/${app}/${collection}


Usergrid REST API

» You can define Collections of custom Entities with any properties you want

» Plus special “built-in” Entity Collections: » http:// host/${org}/${app}/users » http:// host/${org}/${app}/groups » http:// host/${org}/${app}/roles » http:// host/${org}/${app}/activities » http:// host/${org}/${app}/assets


Connections

» No joins, but Entities can have Connections to other Entities

» For example, to get all Entities that Dave is connected to via a connection of type “pets”

» http:// host/${org}/${app}/users/dave/pets


Collecting Cats

» Portal Demo » Create User Dave with Default Role » Create Cats Collection » Setup “Dave has Cats” Connections

Usergrid for JavaScript developers

Thank youhttp://tinyurl.com/usergrid-js

README

http://tinyurl.com/usergrid-js

Thank youhttps://www.npmjs.com/package/usergrid

https://www.npmjs.com/package/usergrid

Thank youhttp://apigee.com/docs/api-baas

http://apigee.com/docs/api-baas

Thank you

Checkin app: Designing the data model


Example Checkin app

» A simple checkin app to demonstrate Usergrid features:

» Login & signup » Roles & Permissions » Following, Followers and Checkins » Usergrid JavaScript SDK

» Built with jQueryMobile & Cordova


Define the data model

» Usergrid provides the basic REST API

» You must decide: » What Entity Types / Collections » Which Entities will be connected » Roles & Permissions for each API path

» Think about the queries you want to make


Entities & Connections

» Entity Collections » Users » Checkins

» Entity Connections » Users Follow Users » Users Have Checkins


User Role: Guest

» User who has not signed up yet » Permissions User with Guest Role:

» Guest user POSTs to register or login » Usergrid takes care of account activation

GET POST PUT DELETE/users/* 🚫 ✅ 🚫 🚫

/token 🚫 ✅ 🚫 🚫


User Role: Default

» Permissions for User with Default Role:

GET POST PUT DELETE/users/${user}/** ✅ ✅ ✅ ✅

/activities/* ✅ 🚫 🚫 🚫

/users/* ✅ 🚫 🚫 🚫

/users/${user} ✅ 🚫 ✅ 🚫

Thank you

Checkin app: Getting started


Get setup in an IDE


jQueryMobile


Apache Cordova


First steps…

» Installed Cordova via npm $ sudo npm install -g cordova

» Created a skeleton app $ cd ~/src $ cordova create org.usergrid.examples checkin

» Added iOS platform $ cd checkin $ cordova platform add iOS

Thank you

Thank you

and Usergrid SDK

Added jQuery Mobile

Checkin app: Adding Login & Signup


Usergrid Authentication

» Application login » POST a JSON object to app’s /token» With username and password » For example:

curl -X POST -i -H "Content-Type: application/json" "https://host/test-org/test-app/token" -d '{"grant_type":"password","username":"dave","password":"XXX"}'

Thank youvar client = new Usergrid.Client({ appName: 'checkin1', orgName: 'test-organization', URI: 'http://10.1.1.161:8080', }); $(document).on("mobileinit", function() { console.log("Entering mobileinit"); var username = localStorage.getItem("username"); var access_token = localStorage.getItem("access_token"); var expires_in = localStorage.getItem("expires_in"); var login_date = localStorage.getItem("login_date"); if (username && access_token && expires_in && login_date) {

// to be continued

Thank you if (username && access_token && expires_in && login_date) { var id = {"username": username, type: “user"}; client.getEntity(id, function(err, response, entity) { if (err) { // send to login page logout(); localStorage.removeItem("access_token"); localStorage.removeItem("expires_in"); $(“:mobile-pagecontainer") .pagecontainer("change", "#login-page", { transition: ‘flow', reload: true }); } else { user = entity; } }); } else { // send to login page $(“:mobile-pagecontainer") .pagecontainer("change", "#login-page", { transition: ‘flow', reload: true }); } });

Thank you

Thank you<div data-role="page" id="login-page" data-theme="a"> <div data-role="header" data-theme="a"> <h2>Login to Checkinv1</h2> </div> <div data-role="content"> <h2>Please Login</h2> <form name="loginForm"> <label for="login-username">Username</label> <input id="login-username" type="text" name="username" > <label for="login-password">Password</label> <input id="login-password" type="password" name="password" > <a id="btn-login" data-role="button" data-inline="true" onclick="login()">Login</a> </form> <p>Or <a href="#signup-page">sign-up</a> for a new account</p> </div> <div data-role="footer" data-theme="a"> <h2>Powered by Apache Usergrid</h2> </div> </div>

Thank youfunction login() { var username = $("#login-username").val(); var password = $("#login-password").val(); client.login(username, password, function(err, response, entity) { if (err) { alert(err); } else { // login successful, send to checkin-list page user = entity; localStorage.setItem("username", username); localStorage.setItem("access_token", response.access_token); localStorage.setItem("expires_in", response.expires_in); localStorage.setItem("login_date", new Date()); document.loginForm.username.value = ""; document.loginForm.password.value = ""; $(“:mobile-pagecontainer") .pagecontainer("change", "#checkin-list-page", { transition: ‘flow', reload: true }); } }); }

Checkin app: Adding Checkins


Checkins as Activities

» Usergrid supports notion of Activity » And supports a “Following” Connection

» Users post Activities to their own Collection » POST /users/${user}/activities

» Users can see Activities those they follow » GET /activities

Thank you

Thank you<div data-role="page" id="add-page" data-control-title="Add Checkin"> <div data-theme="a" data-role="header"> <h1>Check-in</h1> </div> <div data-role="content"> <form name="checkinForm"> <label for="content">What's up?</label> <textarea id="content"></textarea> <label for="location">Location</label> <textarea id="location"></textarea> </form> <a href="#list-page" data-role="button" data-rel="back" data-theme="c" data-inline="true" >Cancel</a> <button id="create-button" data-inline="true" onclick="checkin()">Complete Check-in</button> </div> <div data-role="footer" data-theme="a"> <h4>Powered by Apache Usergrid</h4> </div> </div>

Thank youfunction checkin() { var content = document.checkinForm.content.value; var location = document.checkinForm.location.value; var data = { type: "checkin", content: content, location: location, verb: "post", actor: { username: user.get(“username") } }; client.createUserActivity(user.get("username"), data, function( err, response, activity ) { if (err) { alert("Error on check-in"); } else { buildCheckinList("#checkin-list"); document.checkinForm.content.value = ""; document.checkinForm.location.value = ""; $(“:mobile-pagecontainer") .pagecontainer("change", "#checkin-list-page", { transition: ‘flow', reload: true }); } }); }

Checkin app: Add Follower relationships


Usergrid Social Graph

» Usergrid provides Social Graph features including Following and Groups

» Fred can follow Barney: » POST /users/fred/following/barney

» Fred can see his followers: » GET /users/fred/followers

Thank you

Thank you<div data-role="page" id="user-list-page" data-theme="a"> <div data-role="navbar"> <ul> <li><a href="#checkin-list-page">Check-ins</a></li> <li><a href="#" class="ui-btn-active">Users</a></li> </ul> </div> <div data-role="header" data-theme="a"> <h2>Users</h2> </div> <div data-role="content"> <ul id="user-list" data-role="listview"></ul> </div> <div data-role="footer" data-theme="a"> <h2>Powered by Apache Usergrid</h2> </div> </div>

Thank youfunction buildUserListPage() { $(“#user-list”).empty(); users = new Usergrid.Collection({"client": client, "type": "user" }); users.fetch( function(err, response, self) { if (err) { alert("read failed"); } else { while ( users.hasNextEntity() ) { var u = users.getNextEntity(); $("#user-list").append( "<li data-theme='c'>" + "<a onclick='showUserPage(\"" + u.get("uuid") + "\")'>" + "<h2>" + u.get("name") + "</h2>" + "<p>" + u.get("username") + "</p>" + "</a>" + "</li>"); } if ( $('#user-list').hasClass('ui-listview')) { $('#user-list').listview('refresh'); } else { $('#user-list').trigger('create'); } } }); }

Thank youfunction followUser() { var followee = $(“#view-user-username").html(); var follower = user.get("username"); // No SDK call for this, use generic HTTP request var options = { method: 'POST', endpoint: 'users/'+ follower+'/following/users/'+ followee; }; client.request(options, function (err, data) { if (err) { alert("Unable to follow user " + target); } else { alert("Followed user " + target); } }); }

Checkin app: Package & run your app

Thank you// as page loads, wait for both jQuery Mobile and Cordovavar deviceReadyDeferred = $.Deferred(); // Cordova var jqmReadyDeferred = $.Deferred(); // jQueryMobile

document.addEventListener("deviceReady", deviceReady, false); function deviceReady() { deviceReadyDeferred.resolve(); } $(document).on("mobileinit", function () { jqmReadyDeferred.resolve(); }); $.when(deviceReadyDeferred, jqmReadyDeferred) .then(doWhenBothFrameworksLoaded);

function doWhenBothFrameworksLoaded() { var username = localStorage.getItem("username"); var access_token = localStorage.getItem("access_token"); var expires_in = localStorage.getItem("expires_in"); var login_date = localStorage.getItem("login_date");


Apache Cordova

» Demo time

» Use Cordova to launch the app in iOS

$ cd ~/src/checkin $ cordova emulate iOS

Thank you

Running & Deploying Usergrid


Running Usergrid on 127.0.0.1

» “Built-in” all-in-one Usergrid Launcher » Includes Web server, Cassandra and Usergrid. Uses demo portal. » http://usergrid.readthedocs.org/en/latest/getting-up-and-running-locally.html

» Run Usergrid via Vagrant or Docker » Some examples:

» https://github.com/snoopdave/usergrid-vagrant » https://github.com/r3b/usergrid-vagrant » https://github.com/johnament/usergrid-launcher-docker

» Roll it yourself… » Install and configure Tomcat, Cassandra & Usergrid yourself. » http://usergrid.readthedocs.org/en/latest/deploy-local.html

http://usergrid.readthedocs.org/en/latest/getting-up-and-running-locally.html

https://github.com/snoopdave/usergrid-vagrant

https://github.com/r3b/usergrid-vagrant

https://github.com/johnament/usergrid-launcher-docker

http://usergrid.readthedocs.org/en/latest/deploy-local.html


Running Usergrid in production

» Roll it yourself…

» Install, configure and maintain Tomcat, Cassandra & Usergrid yourself

» AWS Cloud Formation fans, take a look at Usergrid’s AWS Cluster scripts: » Automatically launch full cluster of Tomcat & Cassandra nodes » See stack/awscluster in the Usergrid two-dot-o branch

» Or let somebody else run it for you » e.g. Apigee’s API BaaS service » http://apigee.com/about/products/apigee-edge-and-apis/edge-api-services#api-baas

http://apigee.com/about/products/apigee-edge-and-apis/edge-api-services#api-baas


Deployment Architecture UG1

Mobile

Cassandra Cluster

Load Balancer

Web Tomcats

(shared nothing)


Deployment Architecture UG2

Mobile

Cassandra Cluster

Load Balancer

ElasticSearch Cluster

Web Tomcats (shared nothing)

Distributed Queue

Wrapping up…


Questions?

»Apache Usergrid » http://usergrid.incubator.apache.org » http://twitter.com/usergrid

»Apigee API BaaS » http://apigee.com/about/products/apigee-edge-and-apis/edge-api-services#api-baas

»Dave Johnson » https://github.com/snoopdave/ » http://twitter.com/snoopdave » http://rollerweblogger.org/roller

http://usergrid.incubator.apache.org

http://twitter.com/usergrid

http://apigee.com/about/products/apigee-edge-and-apis/edge-api-services#api-baas

https://github.com/snoopdave/

http://twitter.com/snoopdave

http://rollerweblogger.org/roller

Thank you

apache usergrid for javascript developers

Software