pickapp bar facebook application

23

Upload: hina

Post on 24-Jan-2016

41 views

Category:

Documents


0 download

DESCRIPTION

PickApp BAR FaceBook Application. By Yaniv Kesner & Amir Darmon. Presentation Content. Basic concept Technologies we have used The Design Problems, challenges & solutions Educational Gain. Basic concept. Basic concept. FaceBook application based on - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: PickApp BAR FaceBook Application
Page 2: PickApp BAR FaceBook Application

• Basic concept

• Technologies we have used

• The Design

• Problems, challenges & solutions

• Educational Gain

Page 3: PickApp BAR FaceBook Application
Page 4: PickApp BAR FaceBook Application

• FaceBook application based on

FaceBook’s developers environment

• Multi-User web chat, where only

FaceBook’s users can use.

• users can chat with their friends / or make

new friends – “social networking”

• GUI looks like a virtual bar

Page 5: PickApp BAR FaceBook Application

• Besides chating in a public “Main room”

the users can chat in private messaging

• user can identify another user by exploring

his/hers FaceBook’s profile.

• Each user can play his favorite song,

using a built in “Juke Box”.

Page 6: PickApp BAR FaceBook Application
Page 7: PickApp BAR FaceBook Application

• FaceBook’s Developer suite –

providing a full API to users data

• All user’s data that was extracted from

facebook & all chat logs & management

data is being stored and organized

by MySQL server.

• Server-Side processes & functions were

programmed with PHP.

Page 8: PickApp BAR FaceBook Application

• Client-Side functions were implemented

with JAVA Script & HTML Tags.

• Client-Server communication using

AJAX technology , inverting DB to XML

data.

• Multimedia introduction by Adobe FLASH.

• Full compatibility with MS-IE7 & FireFox

Mozilla 2.0.0.14

Page 9: PickApp BAR FaceBook Application
Page 10: PickApp BAR FaceBook Application

• studying the FaceBook’s Developers

environment. (FBML, canvas, IFrames) and

it’s capabilities.

• Setting up a stand alone web server

outside the faculty, connected 24 hr. to the

Internet. (studying of PHP & SQL)

• Determine the application’s features and

characteristics.

Page 11: PickApp BAR FaceBook Application

• Dividing tasks to files & methods.

• Setting up SQL tables after ERD design,

& decisions about primary keys &

performance trade-offs.

• Implementing a first simple draft , without

GUI, only functionality.

• After first implementation Debug & test,

expanding functionality & GUI.

Page 12: PickApp BAR FaceBook Application

so, How do things work ? (in steady sate…)

User logging into Facebook’s interface.

Running the application from

FaceBook applications

Page 13: PickApp BAR FaceBook Application

The relevant user record in the SQL

USERS table is getting

ONLINE status

After watching the intro the user is logged

into the application and ready to use it

Page 14: PickApp BAR FaceBook Application

When user typing in

a message and press enter The message is

being transferred to the server

Message: Hello world!

JS Function ChatMsgToDB in functions.php file, preparing AJAX post transaction to the server

Transaction is being sent to the server

msgToDB.php file connecting to SQL server (using connectToDB.php function)

Message is being inserted into CHATLOG table @ SQL

Page 15: PickApp BAR FaceBook Application

In the background an endless loop running JS function

named GetMsgFromDB from functions.php file, which

generates AJAX request for the message.

PHP file – GetMsgFromDB retrieves message data from CHATLOG SQL

table, and send it to GetMsgFromDB function .

The message is being parsed out of the AJAX transaction, and displayed

in the messages window.

Page 16: PickApp BAR FaceBook Application

• Of course that in the background many

more processes and functions are being

executed :

Online users updates

song play / stop play

private chats being opened

users logging in & out

users changing seats

Page 17: PickApp BAR FaceBook Application
Page 18: PickApp BAR FaceBook Application

Problem Description

Solution Implemented

How to update server / DB without calling a new php /

html page ?

How to update elements without refreshing the whole page ?

Using AJAX - Creating

asynchronous transaction

AJAX updater transaction + XML

DATA Tags.

How to identify a situation where user closed the browser and terminated the

application ?

Creating server-side Process that checks the delta time in which the user is not active & setting the online to be 0

Page 19: PickApp BAR FaceBook Application

Problem Description

Solution Implemented

Implementing private chats without

holding different chat log to each one

Showing the user only the latest messages, preventing massive transport of SQL

transactions

updating a time stamp to each user, every constant cycle, & keeping track of last message

seen.

Setting id tag to each messeage. Id=0

means main room message. Id≠0

means sender id.

Page 20: PickApp BAR FaceBook Application
Page 21: PickApp BAR FaceBook Application

Experiencing Web software

development in WYSIWYG

environment

Design & Decision making

regarding software

implementation

Page 22: PickApp BAR FaceBook Application

work with SQL & DB queries

Programming in PHP

Programming in Java Script

AJAX as “thinking way”

software development as a team

motivation - more than 70 users,

and up !

Page 23: PickApp BAR FaceBook Application