pickapp bar facebook application

Post on 24-Jan-2016

41 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

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

• Basic concept

• Technologies we have used

• The Design

• Problems, challenges & solutions

• Educational Gain

• 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

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

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

• 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

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

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

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

User logging into Facebook’s interface.

Running the application from

FaceBook applications

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

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

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.

• 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

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

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.

Experiencing Web software

development in WYSIWYG

environment

Design & Decision making

regarding software

implementation

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 !

top related