Apache Usergrid for JavaScript Developers
-
Upload
david-m-johnson -
Category
Software
-
view
136 -
download
3
Transcript of 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
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 4
Why Usergrid?
» Don’t build a server…
PHPRuby
Java
Node
MySQL PaaS
Services in the cloud
AppServer
Cloud
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 5
Why Usergrid?
» Focus on building your app
Services in the cloud
&
App Cloud
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 6
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, …
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 7
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
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 8
Limitations
» No custom server-side logic or validation » If you need it, you’ll need a server
Your server or an “API Gateway”
Services in the cloud
&
App Cloud
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 9
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)
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 10
An Apache Incubator Project
Exploring the Usergrid API
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 12
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
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 13
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}
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 14
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
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 15
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
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 16
Collecting Cats
» Portal Demo » Create User Dave with Default Role » Create Cats Collection » Setup “Dave has Cats” Connections
Usergrid for JavaScript developers
Thank youhttps://www.npmjs.com/package/usergrid
Thank youhttp://apigee.com/docs/api-baas
Thank you
Checkin app: Designing the data model
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 23
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
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 24
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
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 25
Entities & Connections
» Entity Collections » Users » Checkins
» Entity Connections » Users Follow Users » Users Have Checkins
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 26
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 🚫 ✅ 🚫 🚫
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 27
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
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 30
Get setup in an IDE
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 31
jQueryMobile
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 32
Apache Cordova
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 33
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
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 37
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
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 44
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
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 49
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
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");
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 57
Apache Cordova
» Demo time
» Use Cordova to launch the app in iOS
$ cd ~/src/checkin $ cordova emulate iOS
Thank you
Running & Deploying Usergrid
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 60
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
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 61
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
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 62
Deployment Architecture UG1
Mobile
Cassandra Cluster
Load Balancer
Web Tomcats
(shared nothing)
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 63
Deployment Architecture UG2
Mobile
Cassandra Cluster
Load Balancer
ElasticSearch Cluster
Web Tomcats (shared nothing)
Distributed Queue
Wrapping up…
© 2013 Apigee Confidential – All Rights ReservedThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.© Copyright Apigee 65
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
Thank you