capstone project final report

College�� Computer�� Science�� and�� Engineering��

Class�� Capstone�� Project�� Professor�� Name�� Kwon�� Young-Bin��

Student�� Name�� Ikwhan�� Chang�� 학번�� 20060957��

Student�� Name�� Sangtae�� Lee�� 학번�� 20115695��

Student�� Name�� Dongkyoung�� Jo�� 학번�� 20112104��

Assignment�� Capstone�� Project�� Final�� Report��

��

��

��

��

��

��

��

��

Final�� Report�� Team�� NGX��

��

��

��

��

��

��

��

��

��

��

��

1

Team Name

Team NGX

Team Members

Ikwhan Chang

Sangtae Lee

Dongkyoung Jo

Project Name

Facebook Remote Volley Ball

Introduction

Several weeks ago, there is a huge mobile conference in Barcelona, Spain which is called “MWC”.

Most of promising and massive mobile companies joined that event, showing their most advanced

mobile technologies. Samsung, a massive world’s well-known mobile device manufacturing

company, was also joined MWC, promoting the newest mobile device such as Galaxy S5, Galaxy

Gear Fit. Especially, Galaxy Gear Fit is focused on health-care society, collecting the owner’s

information: Heartbeat or Walk Steps and of course the owner can check their mobile information

like SMS, Phone, Calendar even though they cannot open their host device(in this case, Galaxy S5).

Moreover, many companies will join that competitive markets kind of wearable smart device.

In the era of high technology, most of IT companies focus on new technologies such as Cloud

Computing or N-Screen, which means most of people has two or more smart devices and they do

not want to make their data repeatedly for sharing in their devices so they want to OSMU(one-

source multi-use) their personal data.

Our Facebook Remote Valley Ball project will be based on these trends, making a simple

valley ball game in Facebook in-app platform. This game will be remote controlled using user’s own

smart devices such as Galaxy or iPhone and they can see their game play view through Facebook

in-app pages in their laptop or PC.

2

Aim

We make just simple volley ball game. The most important thing is user can

REMOTE control their game using their smart devices for playing game that will be played

in Facebook’s in -app pages. Also we make both Facebook in-app game using HTML5 and

smartphone Web-app using NginX for making hybrid native application.

Project Outline

-‐‑ Specification is as below.

-‐‑ Server

o Play! framework

o JSON : data format

o NginX WAS

o MySQL 5.5 : Database

-‐‑ Client

o KineticJS

o jQuery Mobile

-‐‑ Cooperat ion System

o Jenkins : Continuous Integration

o Github : Repository

o JIRA : Issue tracker, sharing TODO

-‐‑ Tools

o IntelliJ IDEA

Problems

l Server framework.

In our project, we need to push server for showing the object’s movement. If we

don’t use the push server, send the information regularly and it makes too much

load. Therefore we make push server for sending the information when the

changing is occurred.

First we choose the ‘Spring’ as our server framework. However it doesn’t support

3

the push server so we should change our server framework to ‘Play’.

This work is delayed so other works are delayed too. Beside, this work isn’t

including our plan. So we were confronting from pressure to meet the schedule.

l SSL(Secured Socket Layer)

Facebook requires to setup certification on server. However commercial SSL is

too expensive so we need to fine free SSL, StarSSL.com. It supports SSL freely

within 1 year.

Getting a SSL at StarSSL(www.startssl.com), it takes at least 1 month and it takes

too much time setup in server unexpectedly.

Modified

Architecture is changed.

l Server framework: Spring framework -> Play! Framework 2.2

We need to push server. However ‘Spring’ framework just supports push

technology in 4.0b M2 beta version. However we only have 3.2 version which not

support push technology. We should change the server framework for

implementing push technology.

‘Play’ framework is based on Scala language. It can easily make push server and

4

also can use freely.

l WAS(Web Application Server): Apache HTTP 2.1 à NginX

Secured WebSocket is working only HTTP 1.1 Protocol but our apache server

cannot serve SSL function. We tried to fix that using apache server environment,

but it is failed. Therefore, we didn’t have any choice that changing Apache HTTP

Server to NGINX and FIX

l Native app à Mobile HTML5 Web App.

We planned to make native app for using the smartphone as controller. However,

our app just needs to have very simple function such as login with Facebook,

sending user’s action from device to server. For that reason, we didn’t need to

make native app for our project.

Therefore, we don’t need to register our app each store. User just clicks our URL

address and then using their smartphone as the joystick of our volleyball game.

l Role changed

First, SangTae Lee was in charge of server part. We choose ‘Spring’ server

framework at first. Because he has used Java language and this server framework

is based on that language. However as above-mentioned, we should change server

and Ikwhan Jang has more experience to treat server than SangTae so they

exchange the each role.

To be implement

l Other Game

In this project, main goal is that user plays the game through their smartphone.

Because of that, we focus on ‘well control by smartphone’ than other elements.

5

We will improve our game elements. For example, add the item, make another

game mode such as challenge or practice and so on.

Also we try to make another game such as air hockey, Head Football.

Characteristic of our project, we won’t support complex control. So our game is as

simple as possible.

l Chatting

We plan to add the chat function so player will be able to chat with each other.

l Inviting

Friend list will be appeared in game screen and user can invite if he or she is

room’s owner.

l Observer mode

Only game player can see the game screen, but we will add the observer mode

which people who doesn’t play the game can see the game screen.

l New way of control

Now, user plays the game just touching the screen and clicking the button. We will

make another way to control by using gyro sensor or acceleration sensor.

l Social Sharing

Game is ended, user’s win or lose status will be posted in their timeline. This

function is already implemented but not yet approval from Facebook about

permission

è They will be implementing in Capstone Project 2 !

6

Result

l Room

-‐‑ User makes the room for playing the game. It serves pagination, showing room list

and searching room. And also, it considers New game, Help, Friends list and activity.

l Making the volleyball game

-‐‑ User can play volleyball game. It includes sound effect, ready and play button and

user’s profile.

7

l Controller

-‐‑ User needs to social log-in(Facebook). It supports ‘Move’, ‘Jump’ and ‘Shoot’ action.

And also, user can add to bookmark which user can access to our controller.

l Facebook In-App game

-‐‑ It is based on Facebook platform. Therefore, if someone wants to play out game,

should log-in the Facebook. We use user’s information which they set on the own

Facebook.

8

Conclusion

l Learnt a lot of libraries

We use various libraries which we haven’t ever used like KineticJS, Web Socket,

Scala language and so on. It makes us get the else experience.

l Learnt security on the internet

It is based on Facebook-app, that’s why we satisfy that’s secure policy. Therefore,

we adjust SSL. Unfortunately, it was hard to solve the SSL problem so we devised

a lot of measure.

l Unexpected problems(SSL, Changing web framework), Schedule delayed

These problems weren’t included in our schedule. From our standpoint, it means

that we had to fulfill additional work. Therefore, out schedule was delayed entirely.

Furthermore, we couldn’t effectively use our free time with flexible especially

national holiday. As the project progresses, we were pressed to meet a deadline.

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.

Manual

1. Install facebook application on your account(before that, user should have

their own Facebook account)

a. Searching NGX VolleyBall (Now, we can’t approve our app from Facebook

yet, so if you want to play our game, please access this URL directly:

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

9

2. To access this URL for using your device as the controller: c.matthewlab.com,

also you can add to bookmark for accessing more easily.

è Here is more detail how to install controller

Step Screenshot Description

1) access

c.matthewlab.

com using

your

smartphone.

If you connected c.matthewlab.com, this

screen will be appeared. And you should

login using login button.

2) facebook login

screen is appeared

Login with your facebook account.

10

3) After you did login

After your facebook account name is

appeared, it means that login with your

device is success.

4) Add to Bookmark

You can also add our controller app at your

smartphone’s home screen using add to

bookmark button.

3. Connect to our Facebook game through Facebook on PC

11

4. Make new room or Join room which has just one player

a. User also join room which is already started for just looking game(they can

make a chat)

- New Room menu is located inside Menu

- write down room’s title and max score

5. Ready and Play

a. If user use their own device(e.g. iPhone) for controlling their game, they can

also use chatting, video, audio through their device

12

-‐‑ After room created, then another user can see that room’s information.

-‐‑ If another player is joined, then room owner can see the player’s information(name).

Before another player is click the ready button, the play button is not enable.

-‐‑ For play the game, the guest(owner’s enemy) should ready to game. For that, guest

need to click the ready button located top.

-‐‑ After game owner click the play button, then finally game will start. (Warning : User

should using his own device which is already turn on and login his own account. If

not, then user cannot move or jump their character!!)

-‐‑ After game is finished, the alert message which is show who is win is appeared

6. Game finish and writing post in their own Facebook timeline about results.

Source Code & How to Install

13

Clone our source code

- Repository : https://github.com/izie/NEW_FBVOL_PLAY

-‐‑ You can clone our source code using git or IntelliJ IDEA.

Install Play! Framework and add to path environment

-‐‑ For run our application, you need to install play framework :

http://www.playframework.com

-‐‑ And then, you need to find our source code’s location using your shell prompt(or

command in Windows), and you can run using command “play” where is our source

located.

-‐‑ You must add your play framework’s location in your path environment.

o You can see on your MAC OSX :

http://stackoverflow.com/questions/12327317/add-the-play-script-to-your-

path-in-mac

o You can see on your Windows :

http://stackoverflow.com/questions/20960942/installing-play-framework-on-

14

windows-8-1-what-do-i-add-to-the-path

-‐‑ After that, you can run our application using “run” command after you input “play”

command.

Getting Facebook application’s App ID

-‐‑ Before running our source code, you must get your Facebook App ID (for getting

that, connect developer.facebook.com and add your own application).

-‐‑ After you add your application in facebook, then you can check your app ID

-‐‑ (Warning : the app id is just working in special URL)

-‐‑ And you should change App ID in our source code as below

o https://github.com/izie/NEW_FBVOL_PLAY/blob/master/app/views/main.sca

la.html ‘s 55th,255th line : AppId should be changed your AppID

o https://github.com/izie/NEW_FBVOL_PLAY/blob/master/app/views/controlle

r.scala.html ‘s 167th line : AppId should be changed your AppID

Make Database

-‐‑ You need to install MySQL 5.5 : http://dev.mysql.com/downloads/mysql/

o Select your platform, then download install version(Mac : dmg ver, Win : msi

ver)

o (Windows) : http://dev.mysql.com/doc/refman/5.0/en/windows-install-

wizard.html

o (Mac) : http://dev.mysql.com/doc/refman/5.5/en/macosx-installation-

15

pkg.html

-‐‑ After installed, then you create your database : fbvol

-‐‑ After create your database, you need to create four tables using below’s queries.

CREATE TABLE `devices` (

`seq` int(11) unsigned NOT NULL AUTO_INCREMENT,

`device_name` varchar(512) DEFAULT NULL,

`user_token` varchar(512) DEFAULT NULL,

`is_primary` int(11) DEFAULT 'ʹ0'ʹ,

PRIMARY KEY (`seq`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

CREATE TABLE `gameinfo` (


`seq_room` int(11) NOT NULL,

`turn` int(11) NOT NULL DEFAULT 'ʹ0'ʹ,

`score_owner` int(11) NOT NULL DEFAULT 'ʹ0'ʹ,

`score_enemy` int(11) NOT NULL DEFAULT 'ʹ0'ʹ,

PRIMARY KEY (`seq`)

) ENGINE=InnoDB AUTO_INCREMENT=81 DEFAULT CHARSET=utf8;

16

CREATE TABLE `roominfo` (


ìd_owner` varchar(512) NOT NULL DEFAULT 'ʹ'ʹ,

ìd_player` varchar(512) DEFAULT NULL,

`title` varchar(1024) NOT NULL DEFAULT 'ʹ'ʹ,

`time` int(11) NOT NULL COMMENT 'ʹ분단위 'ʹ,

`privacy` int(11) NOT NULL COMMENT 'ʹ1 : 공개 2 : 비밀 'ʹ,

`game_status` int(11) NOT NULL COMMENT 'ʹ0 : 없는방 1 :

방만들어짐 2 : 플레이중 'ʹ,

PRIMARY KEY (`seq`)


CREATE TABLE ùserinfo` (


`name` varchar(30) NOT NULL,

èmail` varchar(50) NOT NULL,

`pic_url` varchar(512) NOT NULL DEFAULT 'ʹ'ʹ,

`win` int(11) NOT NULL DEFAULT 'ʹ0'ʹ,

`lose` int(11) NOT NULL DEFAULT 'ʹ0'ʹ,

`total` int(11) NOT NULL DEFAULT 'ʹ0'ʹ,

`token` varchar(40) NOT NULL,

`joinDate` varchar(256) NOT NULL DEFAULT 'ʹ'ʹ,

`current_location` int(11) NOT NULL DEFAULT 'ʹ0'ʹ COMMENT 'ʹ0 offline

1 room 2 into the room(player) 3 into the room(watcher)'ʹ,

`location_x` int(11) NOT NULL DEFAULT 'ʹ0'ʹ,

`location_y` int(11) NOT NULL DEFAULT 'ʹ0'ʹ,

`seq_current_room` int(11) NOT NULL DEFAULT 'ʹ0'ʹ,

PRIMARY KEY (`seq`)


17

-‐‑ After success to create tables, you need to change connecting information on our

source code.

o https://github.com/izie/NEW_FBVOL_PLAY/blob/master/conf/application.co

nf ‘s 64th line : change your mysql connect IP and URL.

capstone project final report

Documents