Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Cloud Endpoints _Polymer_ Material design by Martin Görner

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

Hier ansehen

1 von 25 Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie Cloud Endpoints _Polymer_ Material design by Martin Görner (20)

Anzeige

Weitere von European Innovation Academy (20)

Anzeige

Cloud Endpoints _Polymer_ Material design by Martin Görner

  1. 1. Cloud Endpoints Polymer Material design The Google stack infinitely scalable - positively beautiful
  2. 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. 3. For the past 15 years, Google has been building the most powerful cloud infrastructure on the planet.
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 13. Material Design and Material is the metaphor Bold, graphic, intentional Motion provides meaning Client-side
  14. 14. 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
  15. 15. 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.
  16. 16. 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>
  17. 17. 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.
  18. 18. 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
  19. 19. 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}
  20. 20. <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
  21. 21. 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.
  22. 22. 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
  23. 23. 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

Hinweis der Redaktion

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

×