Play Framework workshop: full stack java web app
5 likes5,302 views
The document outlines the agenda and steps for a Play Framework workshop held in January 2014 in Tel Aviv, focusing on both Java and Scala applications. It includes detailed hands-on tasks related to building a web application, integrating Twitter Bootstrap, implementing a YouTube search feature, and using WebSocket for video playback. The workshop aims to teach developers about Play Framework's web application structure, RESTful APIs, and real-time data flow using Akka actors.
Play Framework workshop: full stack java web app
- 1. Play framework workshop January 2014, Tel Aviv
- 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. 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. 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. 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. 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. 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. 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. Step 4 • HTML forms in Play - MVC + validation + error reporting • Model - PlayerConnect.java • Controller - create, bind, check errors • View - show form, show errors
- 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. 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. 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. 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. 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. 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. 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. Thank you and let’s stay in touch! • [email protected] • http://tikalk.com/java • https://www.facebook.com/TikalKnowledge