Play Framework workshop: full stack java web app

4,819 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
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,819
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

×