Facebook Remote Volley Ball

Proposal

Team NGX(Next Generation eXperience)

presentation for capstone project

Ikwhan Chang(20060957) | Sangtae Lee(20115695) | Dongkyoung Jo(20112104)

INDEX• Team NGX

• Introduction

• How to Play

• System Architecture

• Requirements

• Schedule

• Q&A

2

Team NGXTeam 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

IntroductionProject Name

• Facebook Remote Volley Ball

What is this?

• Simple VolleyBall Game

• looks like Pikachu Volleyball

• Facebook In-App Game

• Remote Controlling

How to play? 51. Install on Facebook

How to play? 62. Add primary controller

Add to your controller

iphone5primary

+

How to play? 73. connect to game

Room list

vs

3 : 0

view

My InfoIkwhan 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

How to play? 84. make new room or join

create new room

room title :

time : 3min 5min

privacy : open hide

create back

How to play?5. ready and play

[3] fast volleyball play

chatUsers

Chang Lee

+

invite button

ready

PlayersIkwhan Chang

W : 30 L : 100

Sangtae Lee

W : 30 L : 100

How to play?5-1. invite friend

[3] fast volleyball play

chat

Users

Chang Lee

+

invite friend

idle idle idle idle

invite close

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

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

Client

System Environment 13Server

Development Environment14

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

Schedule15

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

Team NGX- 3rd weekend

Ikwhan Chang

- Github setting, JIRA setting, Jenkins setting

Sangtae Lee

- Intellij IDEA setting

Dongkyoung Jo

- Apache cordova setting, Presenter

16

Schedule17

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

Team NGXhttps://github.com/izie/FBVolleyBall

18

Github setting

-Setting the Git

Repository for colleting

source

Team NGXhttps://izectlab.atlassian.net 테스트 ID : tester PW : 123qwe!1

19

JIRA Setting

- Tool for Issue tracker, Bug report, Scheduling

Team NGXhttp://1.209.21.74:9090/jenkins/job/FBVolleyBall/

20

Jenkins setting

- Collecting our source

and send to the test

server automatically

Team NGX 21

Spring MVC is supported only in Ultimate Edition

For using the Spring MVC

Team NGX 22

Containing the Spring MVC

Team NGX 23

<Excuted by Android AVD>

Team NGX 24

Apache cordova can make Hybrid app

Team NGX- 4th weekend

25Ikhwan 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

Schedule26

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

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

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

Team NGX 29

We registered facebook app and waited for their approval

Team NGX 30

Finally today, it is approval.

https://apps.facebook.com/ngx_fbvol/

Team NGX

Test screen touch sensor

Distinguish the moving patterns (basic 4 directions)

Let’s see demo

31

Team NGX- 5th weekend

32Ikhwan 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

Schedule33

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

Team NGX 34 CLIENT : Make hybrid Apps

First time we makes controller for android and now we can easily

convert for iOS version

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

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

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

Team NGX 38 Demo

https://apps.facebook.com/ngx_fbvol/

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

Q&A

Github Repository :

https://github.com/izie/FBVolleyBall

thanks!