Project 2 - A EAN/ERN Web App(SPA) featuring Facebook w/ Photos , Google SaaS, Google PaaS w/"Database"

365 points

Points: 20 proposal, 200 ApplicationCompletion/function, 95 Documentation+,50 Analytics

 

GROUP Work

 

Due dates -

• Proposal (GROUP)- App Purpose + interface due start of class October 22 (you will need to research what Google Vision API can do)

• Application and Documentation and Analsytics Report (GROUP) Due Dec. 2 @ 11pm, Dec3 or 5 your group will present

***PEER Grading ---(INDIVIDUAL) Details to be discussed in class. DUE 6pm Dec. 6, start of class (note: I will take off up to 40 points from your INDIVIDUAL score if you do not evaluate groups appropriately/fairly) *******

*******Facebook APP Regulations (YOU search for latest)*******

---

You will be working to create a SPA(single page application) Web application that will feature the non-trivial use Google SaaS Computer Vision analysis of Facebook User Photos and Storage of results to the a Google Cloud "Database"(Datastore, Firestore) and deployed on a Google PaaS platform (Google Cloud Run or GAE). This Web application should be launched from your Project 1 static site.

 

 

 

GOAL/OBJECTIVES: Design a SPA web application that uses Images from Facebook and the Google Vision API in a "unique" NON trivial way. It should be more than some kind of simple image processing application. Be creative.

 

• CLOUD: Use your choice of Google Cloud Run or GAE as a Platform as a Service cloud to deploy your Web Application.

• FRAMEWORK: USe EAN (Express, Angular, NodeJS) OR ERN (Express, React, NodeJS) +Cloud Database code to implement your Web Application as a Single Page Application. Note that you can choose to use Angular or ReactJS

• IMAGES CONTENT You will use JavaScript to perform Facebook Authentication to allow a user to Login into their Facebook account to get their images (and any other social data you wish to use).

• GOOGLE VISION API: You are required to learn about (on your own) the Google Vision API that is accessible via HTTP request and use it to process images towards the "goal/objectives" of your application.

 

 

The Concept - System Stages AND the PROPOSAL PHASE

 

PROPOSAL PHASE: your group will need to submit a proposal to Canvas->DiscussionBoard->Project2 Proposals. That shows a interface mockup that discusses how the results generated and stored/retrieved from the "Database" for a user are used in the interface of your application (the purpose of the application)? What is the output?

 

"GENERAL STEPS"

1. (STEP1+2) APP -> Retrieve User Photos [UP] from their facebook account.

2. (STEP 3)

       3a) From Retrieved User Photos [UP] keep only the ones that do not have their URLs listed as already processed resultings in entries inside "Google Database" --> [UP']

       3b) for remaining User Photos [UP'] cycle through each Image i and --> process using Google Vision API calls--> output XXX --> store in some datastructure like Hash[Image i Facebook URL] = {user name, photo url, output XXXX]

3. (STEP 4) store Hash to "Google Database" [user name, photo url + outputXXX] --> Storage Record YYY
   

4. (STEP 5) Retrive ALL/MOST/??? Storage Records YYY for user--> PROPOSED App PURPOSE should determine what results you present.
   

Below shows you non-coding results of Steps 1,2 and 3 which process retrieve a user's facebook photos using Graph API on and the Google SaaS Computer Vision API processing results on one of these photos. STEP 1: ask using Facebook Graph API for access to user's photos ---for example for the user of the app ("me" id) this would be the request and the results Request: see the photos field being requested me?fields=id,name,photos,friends,gender,email      Result: see the list of photos with ids for them(note have cut out real id information) -- you get a JSON list with the information including photos as an array.   STEP 2: Then for each returned Photo in the JSON array above grap the ID (suppose it is 101XXXXX707)and make a request like 101XXXXX707?fields=link     and you will get the results: { "link": "https://www.facebook.com/photo.php?fbid=1015XX3XXXX7707&set=a.101547382939824899ype=3", "id": "101XXXXX707" } You can use the URL to retrieve the image ---here is one of my images   STEP 3: lets pass this image to the Google Cloud Computer Vision API and see the results (okay this is not from code but, done manually) --> WHAT CAN YOU DO WITH THIS INFORMATION???

 

 

 

 

Analytics Implementation & Comparison

 

 

 

 

• Create a GitHub remote repository that hosts both your code and has a wiki to document creation, delivery, testing of your application.

• Required: use GitHub Issues for your grou work on this project. You must have a unique issue for each component / code file of your applicaiton

• Interface = 20 points (both function and style), App Deployment to Cloud (40 points), App Use of Google "Database" (40 points), App Fully Functioning(60 points), App use of Computer Vision API (40 points)

 

 

 

 

   Create shared Github repository (should be open for me and others to look at given URL) that contains BOTH the code and Documentation. Regarding the Wiki documentation you must have the following PAGES (keep these titles)

 

 

 

 

Page names in github wiki	Contents you should have
1) IIntro Evaluation: 0 to 5 points	Name your Application URL of deployed application (make a link)
2) Description Evaluation: 0 to 5 points	Screen shot showing history of commits 5 screenshots taken over time showing the changes in your Issue board as work was done on the project. List each major code file and describe its function.
3) Demonstration of Application working Evaluation: 0 to 10 points	SHOW A SEPERATE SCREEN SHOT showing results for each user in your team (minimum 2 people must be demonstrated) SHOW A SCREEN SHOT after adding a new image to the facebook account and the resulting change in output when running the Application Screenshots of the data stored in "Google Database" Screenshots showing how the application uses the Google Vision API and what calls are made and example of returned results
4) "Google Database" Evaluation: 0 to 20 points	Part 1: You should discuss the setup of the chosen "Googel Database" (firestore or datastore) and structure of stored data. Part 2: show how data is added, updated and removed while using your app. Specify Querries done from the app.
5) Code Styling and Comments Evaluation: 0 to 20 points	Consisten CamelCase styling All code must be FULLY commented. This is a graduate class.... I expect comments everywehere throughout the code.
6) Code Evaluation: 0 to 5 points	THIS just refers use to URL of code in the github repository. This must include ALL code, HTML, images, media and any other supporting files. EVERYTHING!
7) 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: Group members nfull names Course Number Name of Application 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. Discuss choice or ERN/EAN. Discuss your choice of Google PaaS (Cloud Run or GAE). Discuss choice of Google Database (Firestore or Datastore). . Discuss how Vision API is used and results. . Discuss what data is stored and displaed. 3) GitHub: : show your remote repository commits and on wiki the history of changes to the issues board. 4) RUN DEMONSTRATION: Now run your app, go over each functionality of your app and fully demonstrate it working (see 6) 5)GAE DASHBOAD: Bring up the Google Cloud PaaS Console ( either Google CLoud Run or GAE)- show the useage information of your web app. 6) GAE "Database" USEAGE show a picture of the data that is stored. 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.
8) Analytics Evaluation: see Analytics Report	Post the PDF described in the Analytics Report for this project on this wiki page in your github repostiory.

 

 

 

 

1. PROPOSAL (20 points) : Create github for project and create in the wiki a page called "proposal" that you document the purpose of your app and give a mockup of the interface(s) showing how the user would use the app and any results displayed. Turn in github URL to Canvas->Discussion Board->Project 2 Proposal
2. COMPLETION: Code and Documentation to be present on github. ALL documentation including Analytics report to on github AND Deliver github URL to Canvas->Projects->Project 2
   You must fully test (with IE, Safari and Chrome)!! NOTE: see above for details of what is needed in wiki pages.
3. DEMONSTRATION: 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
4. PEER EVALUATON (INDIVIDUAL) : due 6pm Dec 6, YOU WILL BE GRADED ON DOING THIS WELL. This can account for up to 40 points taken off of your individual grade.