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 worlds 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 owners 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 users own smart devices such


2
as Galaxy or iPhone and they can see their game play view through Facebook in-app pages in their laptop or
PC.


3
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 Facebooks 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
- Cooperation System
o Jenkins : Continuous Integration
o Github : Repository
o JIRA : Issue tracker, sharing TODO
- Tools
o IntelliJ IDEA
Problems
Server framework.


4
In our project, we need to push server for showing the objects movement. If we dont 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 doesnt support 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 isnt including our
plan. So we were confronting from pressure to meet the schedule.

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.










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


5
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 also can
use freely.

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 didnt have any choice that changing Apache HTTP Server to NGINX and FIX

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 users action
from device to server. For that reason, we didnt need to make native app for our project.
Therefore, we dont 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.

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
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.


6
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 wont support complex control. So our game is as simple as possible.

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

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

Observer mode
Only game player can see the game screen, but we will add the observer mode which
people who doesnt play the game can see the game screen.

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.

Social Sharing
Game is ended, users 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 !
Result


7
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.



Making the volleyball game

- User can play volleyball game. It includes sound effect, ready and play button and users
profile.



Controller


8


- 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.


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 users information which they set on the own Facebook.




9
Conclusion
Learnt a lot of libraries
We use various libraries which we havent ever used like KineticJS, Web Socket, Scala
language and so on. It makes us get the else experience.

Learnt security on the internet
It is based on Facebook-app, thats why we satisfy thats secure policy. Therefore, we
adjust SSL. Unfortunately, it was hard to solve the SSL problem so we devised a lot of
measure.

Unexpected problems(SSL, Changing web framework), Schedule delayed
These problems werent included in our schedule. From our standpoint, it means that we
had to fulfill additional work. Therefore, out schedule was delayed entirely. Furthermore,
we couldnt 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 cant 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/)


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


10
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.


11
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
smartphones home screen using add to
bookmark button.





3. Connect to our Facebook game through Facebook on PC


12


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 rooms 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


13

- After room created, then another user can see that rooms information.

- If another player is joined, then room owner can see the players information(name). Before
another player is click the ready button, the play button is not enable.


- For play the game, the guest(owners 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


14
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 codes 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 frameworks 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-
windows-8-1-what-do-i-add-to-the-path
- After that, you can run our application using run command after you input play


15
command.
Getting Facebook applications 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.scala.htm
l s 55th,255th line : AppId should be changed your AppID
o https://github.com/izie/NEW_FBVOL_PLAY/blob/master/app/views/controller.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-pkg.html

- After installed, then you create your database : fbvol
- After create your database, you need to create four tables using belows queries.


16
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` int(11) unsigned NOT NULL AUTO_INCREMENT,
`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;

CREATE TABLE `roominfo` (
`seq` int(11) unsigned NOT NULL AUTO_INCREMENT,
`id_owner` varchar(512) NOT NULL DEFAULT '',
`id_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`)
) ENGINE=InnoDB AUTO_INCREMENT=87 DEFAULT CHARSET=utf8;



17
CREATE TABLE `userinfo` (
`seq` int(11) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(30) NOT NULL,
`email` 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`)
) ENGINE=InnoDB AUTO_INCREMENT=38 DEFAULT CHARSET=utf8;

- 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.conf s
64th line : change your mysql connect IP and URL.