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.
Project Description & Requirements
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"
-
(STEP1+2) APP -> Retrieve User Photos [UP] from their facebook account.
-
(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]
-
(STEP 4) store Hash to "Google Database" [user name, photo url + outputXXX] --> Storage Record YYY
-
(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 resultsRequest: see the photos field being requestedme?fields=id,name,photos,friends,gender,email
|
Analytics REQUIREMENT(50 points)
Analytics Implementation & Comparison
Application Completion (200 points )
-
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)
Documentation (95 points --- without this no evalution possible
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 |
|
2) Description Evaluation: 0 to 5 points |
|
3) Demonstration of Application working Evaluation: 0 to 10 points |
|
4)
"Google Database"
Evaluation: 0 to 20 points |
|
5) Code Styling and Comments Evaluation: 0 to 20 points |
|
6) Code Evaluation: 0 to 5 points |
|
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:
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:
|
8) Analytics Evaluation: see Analytics Report |
|
Deliverables -- see due dates at top
- 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
- 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 1
You must fully test (with IE, Safari and Chrome)!! NOTE: see above for details of what is needed in wiki pages. - 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
- 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.