CS6320:  SW Engineering of Web Based Systems
Instructor Outline Syllabus Projects Links  

 

 

Project 1 - Social Web Portal/ Application on GAE using GAE datastore

Facebook Application

 

215 points

(30 interface, 60 documentation, 125 app), 20 for Bitbucket.org

Due dates -

  • Application and Documentation Due May 22, start of class

You will be working to create Social Network Application on Facebook. This app will feature the non-trivial use of data via the GAE datastore. For this you will be implementing a Twitter application. You will collect data from the user and store all TweetFriends in the GAE datastore. You should be using data from the datastore as well as collecting new data from the user. Along with tweets you should present the user with their name, user profile image all from Facebook api call. Also, you should present them the ability to 1) post the tweet on their facebook page/timeline and 2) send a direct message to friends with the tweet they just made as a content.

 

The instructor AND assistant should be included as a “developer” on any of your deployments (otherwise we can not run it or grade it).

 

Code - Languages

you must produce your application using:

  • Java for main app --- JSP, servlets

  • Facebook Javascript

  • Other supporting technologies like html, css, javascript, xml, etc.

  • Your group is to create both local and remote Git repositories inside of Eclipse. The remote repository is Bitbucket and you need to publish this.



Interface (30 Points)              

Interface

 

  • Navigation bar along top on ALL pages (5 points) - Tweet, Friends, Top Tweets

  • Tweet Page (15 points) - this is the page that presents the user with A) the ability to create a new tweet and B) a SCROLLABLE list of their tweets which they can delete if they choose to. NOTE: when creating a new tweet they have the option to

    • 1) post the tweet on their facebook page/timeline (hint see read here about sharing and note the use of quote attribute to set your own text message)

    2) set direct message to friends with their tweet.

    read here to learn about facebook javascript api to send message. Note you will have to send as a link to an individual Tweet page. The link will look something like https://****/display_tweet?id=1234 OR
    https://*****?action=display_tweet&id=1234

    where 1234 is the id of the tweet you want to display and should be returned. The two forms of URLs reflect how you might handle your requests -by different jsps or by a jsp that reads in parameter display_tweet to invoke appropriate servlet and pass it its parameter to get the results.

  • Friends Page (5 points) - this is the page that shows all the user's friends of this app and in a scrollable list all their Friend's tweets. NOTE: each time a freind's tweets are accessed to be displayed on a Friends Page you increment a visited counter (friend_page_Visited_counter) for that tweet.

  • Top Tweets (5 points) - this page displays in order of the most popular Tweets based on the friend_page_visited_counter

 

 

Documentation (0 to 60 points --- without this no evalution possible)

   

You will create a wiki page with your last name as its name (e.g. for me it would be GREWE) and it should contain the inofrmaiton about how the facebook application works, links to your code and MANY screen shots showing it working. You must have the following sections on your page:

Section Heading Contents you should have

1) Intro and Purpose

Evaluation: 0 to 5 points   
  • Name your Application
  • URL to published (inside Facebook not on GAE)

2) Code Description

Evaluation: 0 to 5 points
  • Give listing of source code files
  • For EACH file give a desciption of what it does
  • LINK each filename above to the actual source code

3) Demonstration of Application working

Evaluation: 0 to 5 points
  • SHOW A SEPERATE SCREEN SHOT FOR each new screen a user sees in using your application.
4) GAE issues AND GAE Datastore

Evaluation: 0 to 5 points
  • Part 1: You should discuss ay special issues or modifications you made
  • Part 2: You must discuss what data is stored and what is retrieved using GAE datastore, Specifiy in detail each Entity, all its Keys/properties, How data is added, updated and removed from datastore from your app or by you the admin. Specify Querries done from the app.
  • YOU MUST SHOW real screen shots of your GAE dashboard and tools showing useage as well as datastore

One screen shot showing app useage ---you should show multiple views on dashboard!!!

 

One screenshot showing DataStore for the Entity called University (there are over 20 as you can see)

One screeshot showing INSUFFICIENT AMOUNT OF DATA STORED For a students App for Entity called Person
(only 5 so far???)

YOU need to show for every Entity you have created.

5) Java Code Classes
Evaluation: 0 to 5 points
  • List each Java class and list for each the name of the class variables and methods and describe for each what they do.
  • Below is an example Template you should use

class User

// used to represent the user of the Facebook app

//class variables

String first_name = indicates the first name of the user

String last_name = indicases last name of user

String id = represents unique ID of user, utilize facebook ID for user id

Date last_used = represents last date user used the facebook app

String get_first_name()= returns first name

void set_first_name(String f) = sets first name

void set_last_used(Date d) = sets value of last_used

String toString() = returns formated string of user information

// and SO ON

 

6) Code zipped up

Evaluation: 0 to 5 points
  • This is a zip file of all your code files described in #2 above.
  • This must include ALL code, HTML, images, media and any other supporting files. EVERYTHING!

7) Link to YouTube Video (must be unlisted not private)

Evaluation: 0 to 30 points

CONTENTS of video in THIS ORDER (USE THIS PPT AS INTRODUCTION TO EACH SECTION OF THE VIDEO)

1) Introduction: Showing a page (you can video a typed up page you display on your computer) including:

  • Your Name
  • Course Number
  • Project 1
  • Status: Breif description of what is and is not working as it relates to your proposal

2) PROPOSAL: Go over your proposal: Bring up document of your proposal and show the text and talk about what you were able to achieve and not

3) DEPLOYMENT: Go to the Facebook developer page and show the deployed URL pointing to your GAE webapp (you had better had a GAE url under the canvas url(s) ). AND show your remote repository commits and code that is on Bitbucket.org

4) RUN DEMONSTRATION: Now run your Facebook app, go over each functionality of your app and fully demonstrate it

5)GAE DASHBOAD: Bring up the Google App Engine Dashboard - show the useage information of your webapp.

6) GAE DATASTORE USEAGE: Discuss the GAE Datastore useage and show a picture of the data the is collecting/using. . NEXT, show the actual implemented Datastore data. SHOW the GAE datastore data from the GAE tools directly!!!! Show before and affter when data is altered/created (if you app does this)

7) SUMMARY:

  • If you had and problems that didn't work, show them (the results if any) and discuss why you think it didn't work
  • Discuss how you might improve this app
  • Discuss what you learned from making this app- what were the challenges, what you learned, how you can help others.

 

 

Code Requirements and Social Web Requirements (125 points -see eval below)   

While it may be possible to implement an application in different languages you are required to either use Java and deploy and use Google App Engine

As such you will be creating Servlets/JSP code in java. For static you will use HTML and CSS for styling. You will use JavaScript to perform Facebook Authentication and to get any Social Data that your JSP code will have access to (the Javascript will be in the same file)

    Requirements of Social Network Applications

    • Application must have
      • TWEET: as described above ability to create a new Tweet.
      • TWEET: as descriped above posting to Facebook user's page a newly created tweet
      • TWEET as described above ability for Facebook user to send tweet to friends via a URL to that tweet.
      • TWEET ability to display an individual tweet given its unique id passed as a parameter
      • TWEET Retrieve user's name and profile image that should be displayed along with each tweet
      • FREIND: ability to display friends tweets and increment counter (friend_page_Visited_counter) for each tweet displayed
      • TOP TWEET: displays in order of the most popular Tweets based on the friend_page_visited_counter
      • Purposeful GUI design
      • You will need to do social network authentication to your server code as required by the social network.

      note here is what the kind of thing you will see with the messaging of a friend except instead of the CS6825 link info it will be a Tweet info

    Code Sharing

    Your work should be your own. If you copy blocks of code from others this is considering cheating.

    Implementing, Testing and Deploying your Application

    Create your application, deploy and test. Setup on either campus servers (shared server not great solution for real deployment but, for us okay). Implement calls to viral channels and social data use to gather information about user (base) to use in application

    You must present your results in class and get feedback and evaluation from your peers.

    Documentation and Code Deposit

    document all work in ALL phases using tools you wish for Process Management

 

Summarized break down of points from above

 

 

Deliverables       

  1. Code and Documentation - All Wiki Page (BB->Wiki->Project 1****) DOCUMENTAITON , link to YOUTUBE, Code zipped as attachment, all other programming code must be uploaded to server(s) and tested. You must fully test (with IE, Firefox and Chrome)!! NOTE: see above for details of what is needed in wiki page.
     
  2. Give demonstration of system working for instructor -- as requested. YOU MUST HAVE A YOUTUBE DEMONSTRATION OR WILL GET A 0 and it MUST BE COMPLETE

 
© Lynne Grewe