Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Play Framework workshop: full stack java web app

5,038 views

Published on

The slides of Play Framework workshop from the meetup on Google Campus Tel Aviv on January 2014. Includes 5 hands-on assignments mixed with 5 additional steps to create a full application for remotely controlling YouTube on another computer. Demonstrates usage of AngularJS, Twitter Bootstrap, WebSockets. Discusses forms-based and single page web applications.

Published in: Technology, Education
  • Be the first to comment

Play Framework workshop: full stack java web app

  1. 1. Play framework workshop January 2014, Tel Aviv
  2. 2. Agenda • Session One: play for web developers (java) • • Templates, URL mapping, reverse mapping • Forms, validation • RIA, REST, async responses (node.js style) • • Play web application structure WebSocket Session Two: play beyond web app (scala) • Compossible futures • Iteratee with friends (Enumerator and Enumeratee) • Akka actors • Akka dataflow
  3. 3. Setup • git clone https://github.com/skibaa/play-meetup-jan14 • cd play-meetup-jan14/youtube-play-java • play (or play debug) • eclipse or idea • run • http://localhost:9000
  4. 4. Day one workshop steps 1. Replace the generic app home page with ours (hands-on) 2. Add Twitter Bootstrap, upgrade query 3. Add /player action and view (hands-on) 4. Add /remote action, view and HTML form 5. RIA, javascript routes 6. Implement YouTube search, make HTML dynamic with Angular.js 7. Show search results properly (hands-on) 8. ‘Play video’ server side place holder (hands-on) 9. WebSocket 10.Implement ‘Play video’ server side (hands-on)
  5. 5. Step 1 (hands-on) • Change index.scala.html and/or main.scala.html, save, refresh browser • Make errors in Application.java, routes, index.scala.html - see the error reporting facilities of Play • Play with view parameters (add a new one, show it in HTML) • Run tests, fix them by editing ApplicationTest.java and IntegrationTest.java
  6. 6. Checkout step1 complete • see your changes • • • git status git diff | view - clean work dir • git stash #put your changes aside, apply them later with git stash apply • git commit -m “any commit message” #will need to merge • git checkout -- . #DANGER: removes all your changes • option - create a local branch: git checkout -b step1 • go to step1 complete: git pull origin step1 • option - checkout to a separate dir: git clone -b step1 http://github.com/skibaa/play-meetupjan14.git step1
  7. 7. Step 2 • Open http://getbootstrap.com/css/ • Find the documentation for img-rounded, col-lg-5, btn • Change col-lg-5 to col-lg-4, see the effect • Play with styles as you wish
  8. 8. Step 3 (hands-on) • Add a ‘player’ action to Application.java, similar to ‘index’ • Add a URL mapping to routes • Add an ‘onClick’ event to Player button in HTML, opening /player in a new browser window • Create a new view player.scala.html, copy content from https:// developers.google.com/youtube/iframe_api_reference#Getting%20started • Generate a random int in the ‘player’ action, and show it in the view at the top • After hands-on: how to pass more sections to the main template (in addition to @contents)
  9. 9. Step 4 • HTML forms in Play - MVC + validation + error reporting • Model - PlayerConnect.java • Controller - create, bind, check errors • View - show form, show errors
  10. 10. Step 5 • What is a single page application? • REST controllers in Play, producing JSON • javascript routes - why? • javascript routes - how? • Documentation: missing for Java, use Zentask documentation http://www.playframework.com/ documentation/2.2.x/JavaGuide6
  11. 11. Step 6 • YouTupe search API: https://developers.google.com/ youtube/v3/docs/search/list#try-it • Mandatory parameter ‘part’. We will use ‘part=snippet’ • Search parameter ‘q’ • API key parameter ‘key’ • Read https://developers.google.com/places/documentation/ • Get your own key at https://cloud.google.com/console/ project
  12. 12. Step 6 cont. • AngularJS - why? • MVC in a single page application • <p>1 + 2 = {{ 1 + 2 }}</p> • $scope • Two-way binding • http://docs.angularjs.org/tutorial/step_02: ng-repeat
  13. 13. Step 7 (hands-on) • Run queries on https://developers.google.com/ youtube/v3/docs/search/list#try-it • Look at the result JSON • Remove searchResults.push from controllers.js, substitute results with the real ones • Correct remoteSearch.scala.html to loop on results in the format, created by controllers.js
  14. 14. Step 8 (hands-on) • Create a new action ‘playVideo’ in Application.java • Add it to routes and to javascript routes • Add a videoId and thumbnailUrl parameters to playVideo • add onPlay in controllers.js and ng-click=‘onPlay(…)’ with videoId and thumbnail • Make AJAX call from onPlay to playVideo on server side. • Return from the server side JSON, including thumbnailUrl • Display “Video is playing” with thumbnail of current video
  15. 15. Step 9 • WebSocket - don’t call us, we’ll call you • Player passively waits for the videoId to be sent from server • onMessage: make player.loadVideoById call, provided by YouTube API • Server-side: looks similar (onReady, onMessage, onClose)
  16. 16. Step 10 (hands-on) • Add playerId parameter to the Application.playVideo • Do not forget to add playerId also in routes, remoteSearch.scala.html, controllers.js ;) • Find PlayerInfo by playerId • call playerInfo.outSocket.write with JSON containing videoId • only if that succeeds, return JSON with status “playing” • Bonus question: why there are exceptions on the server console? (hint: “WS is open” starts with “W”)
  17. 17. Thank you and let’s stay in touch! • andrew@tikalk.com • http://tikalk.com/java • https://www.facebook.com/TikalKnowledge

×