1. Facebook Remote Volley Ball Proposal Team NGX(Next Generation eXperience) presentation for capstone project Ikwhan Chang(20060957) | Sangtae Lee(20115695) | Dongkyoung Jo(20112104)

2. INDEX Team NGX Introduction How to Play System Architecture Requirements Schedule Q&A 2 3. Team NGX Team NGX Next Generation eXperience Team Member & Role 3 Name Part Ikwhan Chang Facebook In-App Game(using Adobe Edge or Unity Engine), iPhone Apps Sangtae Lee I/O Server, Game Server(Main), Database Dongkyoung Jo Hybrid Client, Game Server(Assistance), Facebook API 4. Introduction Project Name Facebook Remote Volley Ball What is this? Simple VolleyBall Game looks like Pikachu Volleyball Facebook In-App Game Remote Controlling 5. How to play? 5 1. Install on Facebook 6. How to play? 6 2. Add primary controller Add to your controller iphone5 primary + 7. How to play? 7 3. connect to game Room list vs 3 : 0 view My Info Ikwhan Chang W : 30 L : 100 Friends Activities vs 3 : 0 view new room vs 3 : 0 view . . . playing idle playing playing playing playing playing setting 8. How to play? 8 4. make new room or join create new room room title : time : 3min 5min privacy : open hide create back 9. How to play? 5. ready and play [3] fast volleyball play chat Users Chang Lee + invite button ready Players Ikwhan Chang W : 30 L : 100 Sangtae Lee W : 30 L : 100 10. How to play? 5-1. invite friend [3] fast volleyball play chat Users Chang Lee + invite friend idle idle idle idle invite close 11. How to play? 5. ready and play [3] fast volleyball play chat Users Chang Lee + ready character moving area shooting or jumping area player 1s controller player 2s controller shaking phone(use motion sensor) chattin g 12. System Architecture 12 Controller 1 (iphone or android) Controller 2 (iphone or android) Wi-Fi Connected Server : I/O , Game Logic Processing, Push Database Server MySQL Viewing Data Facebook OAuth Login Facebook User Data (Friend list, Profile Image..)Wi-Fi Connected User Data Maintenance (facebook token, game data, etc..) Facebook In-App Store 13. Client System Environment 13 Server 14. Development Environment 14 Lee Jo IntelliJ IDE Eclipse w/ STS Eclipse w/ Android Testing Server changes Jenkins Continuou s Integration JIRA Issue Trackershare Issue/Bug/TODO Chang Git Repository 15. Schedule 15 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 UI / layout class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Set-up Facebook JSON Parser JSON I/O Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integratin g rooming gaming game control convert iPhone 1st test Final Test 16. Team NGX - 3rd weekend Ikwhan Chang - Github setting, JIRA setting, Jenkins setting Sangtae Lee - Intellij IDEA setting Dongkyoung Jo - Apache cordova setting, Presenter 16 17. Schedule 17 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 UI / layout class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Set-up Facebook JSON Parser JSON I/O Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integratin g rooming gaming game control convert iPhone 1st test Final Test 18. Team NGXhttps://github.com/izie/FBVolleyBall 18 Github setting -Setting the Git Repository for colleting source 19. Team NGXhttps://izectlab.atlassian.net ID : tester PW : 123qwe!1 19 JIRA Setting - Tool for Issue tracker, Bug report, Scheduling 20. Team NGXhttp://1.209.21.74:9090/jenkins/job/FBVolleyBall/ 20 Jenkins setting - Collecting our source and send to the test server automatically 21. Team NGX 21 Spring MVC is supported only in Ultimate Edition For using the Spring MVC 22. Team NGX 22 Containing the Spring MVC 23. Team NGX 23 24. Team NGX 24 Apache cordova can make Hybrid app 25. Team NGX - 4th weekend 25 Ikhwan Chang - Github setting, Jenkins setting, register Facebook App, support other settings. SangTae Lee - Complete setting Intellij IDEA, Spring MVC environment study, Json parsing study, Presenter DongKyoung Jo - Distinguish screen touch pattern 26. Schedule 26 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova JSON Parser JSON I/O Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation Set-up Facebook UI / layout 27. Team NGX Select Intellij IDEA Cannot find any alternative tool. Use Ikhwan Changs previous version tool license. Spring MVC environment study Spring is unaccustomed framework. Study spring MVC part with 3.1 27 28. Team NGX 28 Practice some spring MVC pattern and json parsing http://1.209.21.74:8080/FBVOL_SERVER/Character/printUser 1.209.21.74:8080/FBVOL_SERVER/Character/Move/%7B"ID":"izie","X":200,"Y":100%7D 29. Team NGX 29 We registered facebook app and waited for their approval 30. Team NGX 30 Finally today, it is approval. https://apps.facebook.com/ngx_fbvol/ 31. Team NGX Test screen touch sensor Distinguish the moving patterns (basic 4 directions) Lets see demo 31 32. Team NGX - 5th weekend 32 Ikhwan Chang - Trying to pushing server, support other settings. SangTae Lee - Spring MVC environment study, Design to Model for MVC pattern DongKyoung Jo - Call to servers API and send users touch data 33. Schedule 33 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now 34. Team NGX 34 CLIENT : Make hybrid Apps First time we makes controller for android and now we can easily convert for iOS version 35. Team NGX 35 CLIENT : Sending users touch data via AJAX 1. Convert coordinates to JSON format 2. Send to server using Ajax {"ID":"izie","X":200,"Y":100} http://1.209.21.74:8080/FBVOL_SERVER/Character/Move/ %7B"ID":"izie","X":200,"Y":100%7D 36. Team NGX 36 SERVER : Get users data and draw image Users Data : {"ID":"izie","X":200,"Y":100} Servers JSON Parser User Entity Architecture 37. Not yet implemented Finished Team NGX 37 SERVER : Fixing users coordinates and notification all clients which is connected to server Controller 1 (iphone or android) Controller 2 (iphone or android) Wi-Fi Connected Server : I/O , Game Logic Processing, Push Database Server MySQL Viewing Data Facebook OAuth Login Facebook User Data (Friend list, Profile Image..)Wi-Fi Connected User Data Maintenance (facebook token, game data, etc..) Facebook In-App Store 38. Team NGX 38 Demo https://apps.facebook.com/ngx_fbvol/ 39. Team NGX 39 Problem Smooth moving todays demo is just point-to-point moving. We need to smooth move characters. There is no looks like game. We need to make game user interface. Servers real-time notification We just using timer in clients code. If there is some modified data in server, then server notify all other clients automate 40. Team NGX - 6th weekend 40 Ikhwan Chang - Support other settings, making the movement SangTae Lee - Studying Spring MVC environment, Making MVC pattern and DB table scheme DongKyoung Jo - Call to servers API and send users touch data, Moving the character smoothly 41. Schedule 41 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now 42. Team NGX 42 CLIENT : Sending users touch data via AJAX 1. Convert coordinates to JSON format 2. Send to server using Ajax {"ID":"izie","X":200,"Y":100} http://1.209.21.74:8080/FBVOL_SERVER/Character/Move/ %7B"ID":"izie","X":200,"Y":100%7D 43. Team NGX 43 $(document).bind('touchmove', function(e) { var event = e.originalEvent; var canvas_x = event.touches[0].pageX; var canvas_y = event.touches[0].pageY; var json = '{"ID":"'+id+'","X":'+canvas_x+',"Y":'+canvas_y+'}'; $.callAjax(json); event.preventDefault(); }); When user move the finger while touching the screen, the x-coordinate and y-coordinate are sent to server through the JSON format 44. Team NGX 44 KineticJS -HTML5 Canvas JavaScript framework -Almost free (except support of technology) -Using the game engine DB -Managing users information -Using the JDBC for connecting with DB -Token needs to communicate with Facebook apps 45. Team NGX 45 Problem Sending the absolute coordinate value Character moves point to point when user inputs the first touch Considering the relative position Movement is unnatural Cant make a push server yet 46. Team NGX - 9th weekend 46 Ikhwan Chang - Making natural movement, Making default UI, Making default game rule. SangTae Lee - Making actions and rooming, Calculate natural physical phenomenon DongKyoung Jo - Divide mobile screen between moving section and shooting section. 47. Schedule 47 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now 48. Play mode 49. Team NGX 49 Demo https://apps.facebook.com/ngx_fbvol/ 50. Team NGX 50 Problem Characters are free from gravity. Ikwhan and SangTae exchange role each other. Cant make a push server yet We will make rooms and basic game forms like lobby and chatting box etc. 51. Team NGX - 11th weekend 51 Ikhwan Chang - Change Server Module from spring framework to Play framework using Scala language - Design Flow Chart - Design default game UI SangTae Lee - Making jumping action - Implementation to default physics engine DongKyoung Jo - Implementation to shooting action. 52. Schedule 52 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now 53. change server framework Ikwhan Chang tried to make a push server. But spring framework support push technology upper latest beta version. (current beta version : 4.0b M2, our version : 3.2) After role is changed(between Lee and Chang) there is no specific reason to use spring framework because spring framework is based on Java language and Lee is used to this language. Play framework is based on Scala language. Play framework is free and it can easily make push server. 54. Setup SSL Certification on server Facebook required us to setup certification on server (SSL) 55. Setup SSL Certification on server commercial SSL is too expensive for us. We try to find free SSL 56. Setup SSL Certification on server We find Startssl.com its totally free. But for getting a SSL, it takes at least 1 month. We requested to provide SSL 1 months ago, and last week we got a single free SSL certification. 57. facebook application flow chart-1 58. facebook application flow chart-2 59. facebook application flow chart-3 60. Team NGX 60 Problem SSL (Secure Socket Layer) is not yet setup in server We got SSL just last week and it takes a long time unexpectedly. Rooming is delayed For push server, we changed server framework. As a result, rooming is delayed. Gaming is delayed Gaming is clients role. But server is not yet implement so client is just waiting for finishing server-side. 61. Team NGX - 12th weekend 61 Ikhwan Chang - Change Server Module from spring framework to Play framework using Scala language - Design default UI SangTae Lee - Making natural movement and default game rule DongKyoung Jo - Managing game controler - Presenter 62. Schedule 62 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now 63. change server framework Ikwhan Chang tried to make a push server. But spring framework support push technology upper latest beta version. (current beta version : 4.0b M2, our version : 3.2) After role is changed(between Lee and Chang) there is no specific reason to use spring framework because spring framework is based on Java language and Lee is used to this language. Play framework is based on Scala language. Play framework is free and it can easily make push server. 64. https://apps.facebook.com/ngx_fbvol/ 65. Team NGX 66 Game rule(Draft) -One on one matching system -User can select 15, 18, 21 points as condition for win -Passing a ball over a net within three touches -User can give up during the game -No time limit 66. Team NGX 67 Problem Delay Changing the server Just waiting for finishing server-side Complete Controler Checking more detail elements Way to move, hit, jump Moving speed, jump height etc 67. Team NGX - 13th weekend 68 Ikhwan Chang - Making create and delete room function - Implement detail UI - Presenter SangTae Lee - Making detail game state and modify bugs in our game. DongKyoung Jo - Add buttons on controller. - Prepare final report 68. Schedule 69 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now 69. Controller UI Native app -> Web hybrid app Dont need to install app, Just service controllers URL. 70. Controller UI in IOS 71. Controller UI in Android 72. Main GameUI 73. Creating room 74. Main GameUI 75. Main GameUI 76. Main GameUI 77. Team NGX 78 WebSocket on SSL Layout Secured WebSocket is working only HTTP 1.1 Protocol but our apache server cannot server that. Change Apache HTTP Server to NGINX and FIX 78. Team NGX 79 Problems Gamming Shooting needs to more various direction. Client Chatting, Inviting function is delayed. 79. Team NGX 80 This week we will Integrate all parts and debug whole project. Play with our friends many time to find error and supplement gamming. 80. Team NGX - 14th weekend 81 Ikhwan Chang - All default and detail function for Rooming, gaming, and chatting. - Presenter SangTae Lee - Making more detailed user action, add restriction and rule - Add sound effect - Tester DongKyoung Jo - Tester 81. Schedule 82 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now 82. Team NGX Team NGX Next Generation eXperience Team Member & Role(revised) 83 Name Part Ikwhan Chang Facebook In-App Game(using Adobe Edge or Unity Engine), iPhone Apps Web Server, Push Server, Database, Facebook API Sangtae Lee I/O Server, Game Server(Main), Database Main Game Client(using KineticJS + HTML5) Dongkyoung Jo Hybrid Client, Game Server(Assistance), Facebook API HTML5 Mobile Web App 83. Introduction Project Title NGX FBVOL (Facebook Remote Volley Ball) What is this? Simple VolleyBall Game looks like Pikachu Volleyball Facebook In-App Game Remote Controlling Push GameServer API 84. Proposal 85 Main focus : One Source Multi Use Client Side : Our game is made by HTML5 which is provide cross-browsing function Server Side : We implement main I/O(with mySQL database) and push server and it can be adopted easily any kind of game. Controller : We made controller by HTML5 mobile web application which is looks like native-app. 85. Modify 86 ClientServer 86. Modify 87 ClientServer Server o/s HTTP Proxy Server I/O, Push Server Database Javascript Library Mobile UI Library Web UI Library Social API Modern Web API Data standard 87. Modify 88 Removed function Primary device select : user can use their own any device which is login via facebook account. Room privacy : not important 88. Method Model 89 class User(seq:Pk[Long], name:String, email:String, pic_url:String, win:Int, lose:Int, total:Int, token:String,joinDate:String, current_location:Int, location_x:Int, location_y:Int, seq_current_room:Int) class Room(seq:Pk[Long], id_owner:String, id_player:Option[String], title:String, time:Int, privacy:Int, game_status:Int,gameinfo:Game, owner:User, player:User=null, watcher:Seq[User]=null) class Game(seq:Pk[Long], seq_room:Int, turn:Int, score_owner:Int, score_enemy:Int) 89. Method WebSocket 90 ChatRoom$ join() makeRoom() quitRoom() ChatRoom() receive() notifyAll() notifyAll_Makeroom() notifyAll_Quitroom() ChatRoom QuitRoom() JoinRoom() MakeRoom() Join() Quit() Talk() NotifyJoin() Connected() CannotConnect() GameRoom$ join() quit() move() jump() shoot() GameRoom() receive() notifyAll() notifyAll_Move() PlayGame() ReadyGame() ShootGame() JumpGame() MoveGame() JoinGame() QuitGame() TalkGame() NotifyJoinGame() NotifyRoomOwner() 90. Method View/Action 91 Application$ Index() controller() Privacy() chatRoom() chatRoomJs() chat() gameRoom() gameRoomJS() game() javascriptRoutes() Room$ getRooms() getPlayersProfile() addRoom() delRoom() User$ addUser() getUser() setUserStatusByToken() setUserCurrentRoom() setUserPosition() setUserXY() JumpUser() ShootUser() 91. Problems 92 SSL(Secured Socket Layer) unexpected(11th week) For making a Facebook canvas based game, facebook required SSL layer for all developers. We tried to fix that using previous server environment, but it failed(using Apache HTTP) Fix it : Web server change (Apache HTTP 2.1 -> NginX) 92. Problems 93 Push server implementation (expected, but it took a long time) 11th week spring framework support push technology upper latest beta version (current beta version : 4.0b M2, our version : 3.2) fix : web framework change (Spring Framework -> Play Framework) 93. Problems 94 Hybrid Application(unexpected) 13th week Our controller app is required just tiny part of function(eg. login with facebook, sending users action from device to server) 94. Result Facebook Platform 95 95. Result - Room 96 Room list, pagination, search New game Help Friend list and activity 96. Result - Game 97 View players profile Main game Sound effect Ready & start button 97. Result - Controller 98 Add to Bookmark(using our own icon) Social login Move/Jump/Shoot 98. Demo 99 https://www.facebook.com/games/?app_id=2362202 53168811&fb_source=100 99. To be implementation 10 0 Chatting : chatting with each users Inviting Friend : friends list will be appeared in game screen and user can invite if he is rooms owner. Social Sharing : After game is ended, users win or lose status will be posted in their timeline. (it already implemented but not yet approval from facebook about permission) 100. To be implementation 10 1 Various Controllers action : shaking, gyro sensor.. Chatting using their own device or video chat : maybe..? very hard things to do. Another Game : maybe.. Football? Some small game can adapt our platform easily. Maybe we can make that next term(capstone project 2) 101. Conclusion 10 2 Learnt a lot of libraries : KineticJS, Web Socket, Scala language.. Learnt security on the internet(SSL, Secured-WebSocket) At first, we thought that for making volley ball, it will easy to build. But a lot of functions is needed. Unexpected problems : SSL, Changing web framework.. Schedule delayed : we cannot use our free time with flexible especially national holiday. Server-side technology is well done implemented but client-side technology is normal implemented. Because of server-side is done, we can focus on make game next term.. 102. Q&A Github Repository : https://github.com/izie/NEW_FBVOL_PLAY 103. thanks!