1. Cloud Endpoints
Polymer
Material design
The Google stack
infinitely scalable - positively beautiful

2. Backend: App Engine - Cloud Endpoints
App Engine
your code
(Python or Java)
REST APIs
defined using
Cloud Endpoints
annotations
Client libraries
generated byCloud
Endpoints (with
authentication)
HTTP

3. For the past 15 years, Google
has been building the most
powerful cloud infrastructure on
the planet.

4. Tools to install
● JDK 7 (not JRE)
● Eclipse for Java EE Developers
● Google Plugin for Eclipse andGoogle App
Engine Java SDK available in
Eclipse: Help › Install New Software › Add…
http://dl.google.com/eclipse/plugin/4.3

5. First steps in the cloud
g > New Web Application Project
Name: Hello, package: com.name.helloUncheck GWT,
check AppEngine
Customise the HelloServlet
Run > Run As … > (g) Web Application

6. Java Web App Project: WAR
src: your classes
war: your html/css
WEB-INF/web.xml:
servlet URL mappings
WEB-INF/appengine-web.xml:
your cloud project id

7. Deploy !
● Create an account and an app on cloud.google.com
● Set the Project ID in WEB-INF/appengine-web.xml
● g > Deploy to App Engine
your application is live on
projectid.appspot.com

8. REST basics
HTTP verbs GET, POST, PUT, DELETE
simple URLs like http://newspaper.com/2014/politics
GET retrieve something idempotent no data
POST create and add something NOT
idempotent
with data
PUT update something idempotent with data
DELETE delete something idempotent no data

9. cloud endpoints: server-side
@Api(name = "greetings", version = "v1", description = "A polite API")
public class GreetingsAPI {
@ApiMethod(name = "hello")
public Greeting hello(@Named("who") String who) {
/* Compute a polite salutation */
return new Greeting(...);
}
}
public class Greeting {
public String text;
public Integer
avatarId;
}

10. Let’s try
Add a class Greeting
Add a class GreetingAPI
Implement them with cloud endpoints annotations
Google > Generate Cloud Endpoint Client Library
test using API explorer:
http://localhost:8888/_ah/api/explorer

11. cloud endpoints: client-side
(javascript)
<script>
function ready() {
gapi.client.greetings.hello( {'who': 'Mr. Jones'} ).execute( function(resp)
{
if (!resp.code)
alert(resp.text); // “Hello Mr. Jones”
})
}
function api_init() {
gapi.client.load('greetings', 'v1', ready, '//' + window.location.host + '/_ah/api');
}
</script>
<script src="https://apis.google.com/js/client.js?onload=api_init"></script>

12. Bonus: add a user login
and a NoSQL database.
App Engine has both built-
in (UserService and
Datastore). To use
Datastore, try the objectify
library (tutorial).
done !
we have an
API server
ready for
millions
of users
When you deploy and
test, use https otherwise
the api call will not work
(or change the
gapi.client.load call to
always use https for the
api).
Bonus: add OAuth access
to your API. Cloud
Endpoints handles it
automatically when you
register a client ID in the
cloud console and the
same client ID in the @Api
annotation (syntax).

13. Material
Design
and
Material is the metaphor Bold, graphic, intentional Motion provides meaning
Client-side

15. node.js and NPM (required by bower)
GIT (what? you do not have git yet ?)
bower: npm install -g bower
polymer:
go to your project directory
bower init
bower install --save Polymer/polymer
polymer core and paper elements:
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements
Tools to install
Bower is a package
manager for the web. It
downloads your
packages, keeps them
up to date and resolves
their dependencies. To
update your packages
type: bower update

16. Starter code
git clone https://github.com/mgorner/endpoints-polymer-material-
tutorial.git
Check that the endpoints part looks familiar
Change the ProjectID in WEB-INF/appengine-web.xml to your own
Start in the polymer_tutorial_start.html file
The finished app is index.html. Peek in when you are stuck.

17. Polymer: first steps
<script
src="polymer/platform/platform.js"></script>
…
<link rel="import" href="paper-card.html">
…
<paper-card title="Hello my friends">
<img src="images/avatar-1.svg">
</paper-card>

19. Create a card programmatically
function display_new_card(text, avatarId) {
var container = document.getElementById('container');
var icon = new Image();
icon.src = "images/avatar-" + (avatarId + 1) + ".svg";
var card = document.createElement('paper-card');
card.appendChild(icon);
card.title = text;
container.appendChild(card);
}
// To finish: modify the API call code made previously
// to use display_new_card instead of alert.

20. Anatomy of a polymer element
<polymer-element name="paper-card" attributes="z title selected" >
<template>
<style>
:host { border-radius: 2px; }
.card-header ::content img { width: 70px; border-radius: 50%; }
</style>
<paper-shadow z="{{z}}" animated="true"></paper-shadow>
<div class="card-header" layout horizontal center>
<content select="img"></content>
<h3>{{title}}</h3>
</div>
<content></content>
</template>
<script> Polymer('paper-card', {
selected: 0,
attached: function() { /* your initialisations here */ }
});
</script>
</polymer-element>
the name must have a “-”
published attributes
mandatory top-level template
tag
script: register element and
define custom functions and
attributes
script: called on init
content injection using select=
polymer expression
injecting all other content
data binding
SHADOW DOM

21. Polymer element CSS styling
In an element:
:host matches the
element itself
::content matches
injected content
From the outside:
::shadow matches the root of
the shadow dom of the element.
/deep/ punches through all
shadow dom limits, for example:
paper-input /deep/ #label
{color: red}

22. <body unresolved>
<core-header-panel>
<core-toolbar horizontal layout center>
<div flex>Welcome</div>
<paper-input label="Type your name here"></paper-
input>
<paper-fab icon="cloud"
onclick="do_call(document.querySelector('paper-input').value)">
</paper-fab>
</core-toolbar>
<div id="container" horizontal layout wrap></div>
</core-header-panel>
</body>
// + some CSS magic
More elements: a complete app

23. To go further, read about Polymer templates with data binding and implement a data
model element. Use it to make the “close” buttons on the cards functional.

24. Links
Creating polymer elements
Flex Box cheat sheet /
polymer flex layout
Styling Polymer elements
Cloud Endpoints tutorial
App Engine and datastore
tutorial
Material design principles
Polymer tutorial

25. Martin Görner
Google Developer relations
plus.google.com/+MartinGorner
goo.gl/j8veWp
This presentation:
The code of this tutorial is here:
git clone
https://github.com/mgorner/endpo
ints-polymer-material-
tutorial.git