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
Friend’s
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 1’s controller player 2’s 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
<Excuted by Android AVD>

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 Chang’s 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)
 Let’s 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 server’s API and send user’s 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 user’s 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 user’s data and draw image
User‘s Data : {"ID":"izie","X":200,"Y":100}
Server‘s JSON Parser
User Entity Architecture

37. Not yet implemented
Finished
Team NGX 37 SERVER : Fixing user’s 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
 today’s 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.
 Server’s real-time notification
 We just using timer in client’s code. If there is some modified
data in server, then server notify all other clients automate

40. Q&A
Github Repository :
https://github.com/izie/FBVolleyBall

41. thanks!