SlideShare une entreprise Scribd logo
1  sur  25
Cloud Endpoints
Polymer
Material design
The Google stack
infinitely scalable - positively beautiful
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
For the past 15 years, Google
has been building the most
powerful cloud infrastructure on
the planet.
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
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
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
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
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
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;
}
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
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>
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).
Material
Design
and
Material is the metaphor Bold, graphic, intentional Motion provides meaning
Client-side
Cloud Endpoints_Polymer_Material design by Martin Görner
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
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.
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>
Cloud Endpoints_Polymer_Material design by Martin Görner
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.
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
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}
<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
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.
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
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

Contenu connexe

Tendances

DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...DrupalCampDN
 
Google Cloud Endpoints - Soft Uni 19.06.2014
Google Cloud Endpoints - Soft Uni 19.06.2014Google Cloud Endpoints - Soft Uni 19.06.2014
Google Cloud Endpoints - Soft Uni 19.06.2014Dimitar Danailov
 
Desbravando Web Components
Desbravando Web ComponentsDesbravando Web Components
Desbravando Web ComponentsMateus Ortiz
 
React native introduction
React native introductionReact native introduction
React native introductionInnerFood
 
AngularJS in 60ish Minutes
AngularJS in 60ish MinutesAngularJS in 60ish Minutes
AngularJS in 60ish MinutesDan Wahlin
 
AngularJs presentation
AngularJs presentation AngularJs presentation
AngularJs presentation Phan Tuan
 
Laravel 8 export data as excel file with example
Laravel 8 export data as excel file with exampleLaravel 8 export data as excel file with example
Laravel 8 export data as excel file with exampleKaty Slemon
 
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...Caldera Labs
 
Building and deploying React applications
Building and deploying React applicationsBuilding and deploying React applications
Building and deploying React applicationsAstrails
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSmurtazahaveliwala
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular jsDifferent way to share data between controllers in angular js
Different way to share data between controllers in angular jscodeandyou forums
 
api-platform: the ultimate API platform
api-platform: the ultimate API platformapi-platform: the ultimate API platform
api-platform: the ultimate API platformStefan Adolf
 
AngularJS for designers and developers
AngularJS for designers and developersAngularJS for designers and developers
AngularJS for designers and developersKai Koenig
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS ArchitectureEyal Vardi
 

Tendances (20)

AngularJS Best Practices
AngularJS Best PracticesAngularJS Best Practices
AngularJS Best Practices
 
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...
 
Google Cloud Endpoints - Soft Uni 19.06.2014
Google Cloud Endpoints - Soft Uni 19.06.2014Google Cloud Endpoints - Soft Uni 19.06.2014
Google Cloud Endpoints - Soft Uni 19.06.2014
 
Desbravando Web Components
Desbravando Web ComponentsDesbravando Web Components
Desbravando Web Components
 
React native introduction
React native introductionReact native introduction
React native introduction
 
AngularJS in 60ish Minutes
AngularJS in 60ish MinutesAngularJS in 60ish Minutes
AngularJS in 60ish Minutes
 
AngularJs presentation
AngularJs presentation AngularJs presentation
AngularJs presentation
 
Extend sdk
Extend sdkExtend sdk
Extend sdk
 
Laravel 8 export data as excel file with example
Laravel 8 export data as excel file with exampleLaravel 8 export data as excel file with example
Laravel 8 export data as excel file with example
 
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
 
Building and deploying React applications
Building and deploying React applicationsBuilding and deploying React applications
Building and deploying React applications
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
 
Session 2- day 3
Session 2- day 3Session 2- day 3
Session 2- day 3
 
Day 5
Day 5Day 5
Day 5
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular jsDifferent way to share data between controllers in angular js
Different way to share data between controllers in angular js
 
Day seven
Day sevenDay seven
Day seven
 
Svelte JS introduction
Svelte JS introductionSvelte JS introduction
Svelte JS introduction
 
api-platform: the ultimate API platform
api-platform: the ultimate API platformapi-platform: the ultimate API platform
api-platform: the ultimate API platform
 
AngularJS for designers and developers
AngularJS for designers and developersAngularJS for designers and developers
AngularJS for designers and developers
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 

Similaire à Cloud Endpoints _Polymer_ Material design by Martin Görner

09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)Igor Bronovskyy
 
Parse cloud code
Parse cloud codeParse cloud code
Parse cloud code維佋 唐
 
Build an AI/ML-driven image archive processing workflow: Image archive, analy...
Build an AI/ML-driven image archive processing workflow: Image archive, analy...Build an AI/ML-driven image archive processing workflow: Image archive, analy...
Build an AI/ML-driven image archive processing workflow: Image archive, analy...wesley chun
 
Building Progressive Web Apps for Android and iOS
Building Progressive Web Apps for Android and iOSBuilding Progressive Web Apps for Android and iOS
Building Progressive Web Apps for Android and iOSFITC
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?Remy Sharp
 
e-KTP Information Extraction with Google Cloud Function & Google Cloud Vision
e-KTP Information Extraction with Google Cloud Function & Google Cloud Visione-KTP Information Extraction with Google Cloud Function & Google Cloud Vision
e-KTP Information Extraction with Google Cloud Function & Google Cloud VisionImre Nagi
 
AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014Dariusz Kalbarczyk
 
The Big Picture and How to Get Started
The Big Picture and How to Get StartedThe Big Picture and How to Get Started
The Big Picture and How to Get Startedguest1af57e
 
OSCON Google App Engine Codelab - July 2010
OSCON Google App Engine Codelab - July 2010OSCON Google App Engine Codelab - July 2010
OSCON Google App Engine Codelab - July 2010ikailan
 
Building Progressive Web Apps for Windows devices
Building Progressive Web Apps for Windows devicesBuilding Progressive Web Apps for Windows devices
Building Progressive Web Apps for Windows devicesWindows Developer
 
How to build crud application using vue js, graphql, and hasura
How to build crud application using vue js, graphql, and hasuraHow to build crud application using vue js, graphql, and hasura
How to build crud application using vue js, graphql, and hasuraKaty Slemon
 
Django + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar DjangoDjango + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar DjangoJavier Abadía
 
Using JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot appsUsing JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot appsYakov Fain
 
A I R Presentation Dev Camp Feb 08
A I R  Presentation  Dev Camp  Feb 08A I R  Presentation  Dev Camp  Feb 08
A I R Presentation Dev Camp Feb 08Abdul Qabiz
 
Reactive Type-safe WebComponents
Reactive Type-safe WebComponentsReactive Type-safe WebComponents
Reactive Type-safe WebComponentsMartin Hochel
 
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsHTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsRemy Sharp
 
[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova
[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova
[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache CordovaHazem Saleh
 

Similaire à Cloud Endpoints _Polymer_ Material design by Martin Görner (20)

09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
 
Parse cloud code
Parse cloud codeParse cloud code
Parse cloud code
 
Build an AI/ML-driven image archive processing workflow: Image archive, analy...
Build an AI/ML-driven image archive processing workflow: Image archive, analy...Build an AI/ML-driven image archive processing workflow: Image archive, analy...
Build an AI/ML-driven image archive processing workflow: Image archive, analy...
 
Building Progressive Web Apps for Android and iOS
Building Progressive Web Apps for Android and iOSBuilding Progressive Web Apps for Android and iOS
Building Progressive Web Apps for Android and iOS
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?
 
e-KTP Information Extraction with Google Cloud Function & Google Cloud Vision
e-KTP Information Extraction with Google Cloud Function & Google Cloud Visione-KTP Information Extraction with Google Cloud Function & Google Cloud Vision
e-KTP Information Extraction with Google Cloud Function & Google Cloud Vision
 
AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014
 
Play!ng with scala
Play!ng with scalaPlay!ng with scala
Play!ng with scala
 
The Big Picture and How to Get Started
The Big Picture and How to Get StartedThe Big Picture and How to Get Started
The Big Picture and How to Get Started
 
OSCON Google App Engine Codelab - July 2010
OSCON Google App Engine Codelab - July 2010OSCON Google App Engine Codelab - July 2010
OSCON Google App Engine Codelab - July 2010
 
Building Progressive Web Apps for Windows devices
Building Progressive Web Apps for Windows devicesBuilding Progressive Web Apps for Windows devices
Building Progressive Web Apps for Windows devices
 
How to build crud application using vue js, graphql, and hasura
How to build crud application using vue js, graphql, and hasuraHow to build crud application using vue js, graphql, and hasura
How to build crud application using vue js, graphql, and hasura
 
Progressive What Apps?
Progressive What Apps?Progressive What Apps?
Progressive What Apps?
 
Angular js
Angular jsAngular js
Angular js
 
Django + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar DjangoDjango + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar Django
 
Using JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot appsUsing JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot apps
 
A I R Presentation Dev Camp Feb 08
A I R  Presentation  Dev Camp  Feb 08A I R  Presentation  Dev Camp  Feb 08
A I R Presentation Dev Camp Feb 08
 
Reactive Type-safe WebComponents
Reactive Type-safe WebComponentsReactive Type-safe WebComponents
Reactive Type-safe WebComponents
 
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsHTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & sockets
 
[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova
[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova
[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova
 

Plus de European Innovation Academy

Workshop - Crafting a Pitch Deck - Tomas Caeiro.pptx
Workshop - Crafting a Pitch Deck - Tomas Caeiro.pptxWorkshop - Crafting a Pitch Deck - Tomas Caeiro.pptx
Workshop - Crafting a Pitch Deck - Tomas Caeiro.pptxEuropean Innovation Academy
 
EIA - Startup Financials - Daniel Vila Boa - 2023-07-31.pptx
EIA - Startup Financials - Daniel Vila Boa - 2023-07-31.pptxEIA - Startup Financials - Daniel Vila Boa - 2023-07-31.pptx
EIA - Startup Financials - Daniel Vila Boa - 2023-07-31.pptxEuropean Innovation Academy
 
Keynote SEO for StartUps from Kristof Tomasz.pptx
Keynote SEO for StartUps from Kristof Tomasz.pptxKeynote SEO for StartUps from Kristof Tomasz.pptx
Keynote SEO for StartUps from Kristof Tomasz.pptxEuropean Innovation Academy
 
Growth-mindset-growth-hacking_EIA-Portugal_pptx.pptx
Growth-mindset-growth-hacking_EIA-Portugal_pptx.pptxGrowth-mindset-growth-hacking_EIA-Portugal_pptx.pptx
Growth-mindset-growth-hacking_EIA-Portugal_pptx.pptxEuropean Innovation Academy
 
Show Me the Money_ Unveiling the Secrets of Revenue Models - ZT (1).pptx
Show Me the Money_  Unveiling the Secrets of Revenue Models - ZT (1).pptxShow Me the Money_  Unveiling the Secrets of Revenue Models - ZT (1).pptx
Show Me the Money_ Unveiling the Secrets of Revenue Models - ZT (1).pptxEuropean Innovation Academy
 
"FALL in LOVE with the Problem, not the solution" by Anna de Stefano
"FALL in LOVE with the Problem, not the solution" by Anna de Stefano "FALL in LOVE with the Problem, not the solution" by Anna de Stefano
"FALL in LOVE with the Problem, not the solution" by Anna de Stefano European Innovation Academy
 

Plus de European Innovation Academy (20)

Fundraising - Angela Lee
Fundraising - Angela LeeFundraising - Angela Lee
Fundraising - Angela Lee
 
EIA Pitch Keynote_Dirk Lehmann.pptx
EIA Pitch Keynote_Dirk Lehmann.pptxEIA Pitch Keynote_Dirk Lehmann.pptx
EIA Pitch Keynote_Dirk Lehmann.pptx
 
Workshop - Crafting a Pitch Deck - Tomas Caeiro.pptx
Workshop - Crafting a Pitch Deck - Tomas Caeiro.pptxWorkshop - Crafting a Pitch Deck - Tomas Caeiro.pptx
Workshop - Crafting a Pitch Deck - Tomas Caeiro.pptx
 
EIA - Startup Financials - Daniel Vila Boa - 2023-07-31.pptx
EIA - Startup Financials - Daniel Vila Boa - 2023-07-31.pptxEIA - Startup Financials - Daniel Vila Boa - 2023-07-31.pptx
EIA - Startup Financials - Daniel Vila Boa - 2023-07-31.pptx
 
Business Models - Angela Lee.pptx
Business Models - Angela Lee.pptxBusiness Models - Angela Lee.pptx
Business Models - Angela Lee.pptx
 
Kristi - Sales Keynote 28.07.23
Kristi - Sales Keynote 28.07.23Kristi - Sales Keynote 28.07.23
Kristi - Sales Keynote 28.07.23
 
Zero-budget-marketing_EIA_230723.pptx.pptx
Zero-budget-marketing_EIA_230723.pptx.pptxZero-budget-marketing_EIA_230723.pptx.pptx
Zero-budget-marketing_EIA_230723.pptx.pptx
 
Do's and Don't of Corporate.pdf
Do's and Don't of Corporate.pdfDo's and Don't of Corporate.pdf
Do's and Don't of Corporate.pdf
 
Keynote SEO for StartUps from Kristof Tomasz.pptx
Keynote SEO for StartUps from Kristof Tomasz.pptxKeynote SEO for StartUps from Kristof Tomasz.pptx
Keynote SEO for StartUps from Kristof Tomasz.pptx
 
Landing pages Gilles.pptx
Landing pages Gilles.pptxLanding pages Gilles.pptx
Landing pages Gilles.pptx
 
Neuroscience in marketing.pptx
Neuroscience in marketing.pptxNeuroscience in marketing.pptx
Neuroscience in marketing.pptx
 
26.07_Marketing Tools ( IN AI ERA).pptx.pdf
26.07_Marketing Tools ( IN AI ERA).pptx.pdf26.07_Marketing Tools ( IN AI ERA).pptx.pdf
26.07_Marketing Tools ( IN AI ERA).pptx.pdf
 
What is marketing_EIA.pptx
What is marketing_EIA.pptxWhat is marketing_EIA.pptx
What is marketing_EIA.pptx
 
Growth-mindset-growth-hacking_EIA-Portugal_pptx.pptx
Growth-mindset-growth-hacking_EIA-Portugal_pptx.pptxGrowth-mindset-growth-hacking_EIA-Portugal_pptx.pptx
Growth-mindset-growth-hacking_EIA-Portugal_pptx.pptx
 
PMF_EIA23 by Giles DC
PMF_EIA23 by Giles DCPMF_EIA23 by Giles DC
PMF_EIA23 by Giles DC
 
Show Me the Money_ Unveiling the Secrets of Revenue Models - ZT (1).pptx
Show Me the Money_  Unveiling the Secrets of Revenue Models - ZT (1).pptxShow Me the Money_  Unveiling the Secrets of Revenue Models - ZT (1).pptx
Show Me the Money_ Unveiling the Secrets of Revenue Models - ZT (1).pptx
 
Product-market- fit__Gilles DC_EIA23.pptx
Product-market- fit__Gilles DC_EIA23.pptxProduct-market- fit__Gilles DC_EIA23.pptx
Product-market- fit__Gilles DC_EIA23.pptx
 
"Building a Successful Team" - Jorim
"Building a Successful Team" - Jorim"Building a Successful Team" - Jorim
"Building a Successful Team" - Jorim
 
"FALL in LOVE with the Problem, not the solution" by Anna de Stefano
"FALL in LOVE with the Problem, not the solution" by Anna de Stefano "FALL in LOVE with the Problem, not the solution" by Anna de Stefano
"FALL in LOVE with the Problem, not the solution" by Anna de Stefano
 
Design Thinking Stages - Kaarel Mikkin
Design Thinking Stages - Kaarel Mikkin Design Thinking Stages - Kaarel Mikkin
Design Thinking Stages - Kaarel Mikkin
 

Dernier

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 

Dernier (20)

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 

Cloud Endpoints _Polymer_ Material design by Martin Görner

  • 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

Notes de l'éditeur

  1. PaaS frees you from system operations chores and gives you automatic scaling, but only if your application fits within the App Engine platform constraints
  2. Customize this