Rich Media Web App Dev I
Project 3 - HTML5 Web App Mashup of Awesomeness!
Individually, your mission is to create a useful and visually-rich HTML5 application that "mashes up" 2 or more Web services (XML- or JSON-based), and showcases your mastery of modern Web technologies. As before, you will be evaluated on your creativity in design, the quality of the experience you create, the extent in which you go beyond what we did in class, and the soundness of your programming.
Ideally the application will run in all modern browsers, but at a bare minimum it must run in Chrome on both Windows and Mac.
The assignment is worth 22% of your final grade, is graded out of 100 points, and no late submissions will be accepted, so post what you have before the due date to receive partial credit. An A grade will be awarded only for meeting the requirements below, and going sufficiently "above and beyond".
Option 1: Two Web Services
Use two separate web services (web APIs) that are XML or JSON based to create a mashup app. For example, maybe you use Google Maps and a places API to show where people can buy electronics in their area. Another example might be using a movies API and a recipe API to create an app that pairs movies with a food recipe.
The idea here is that you are using two separate AJAX APIs and combining them in an interesting way to create an interactive web app.
NOTE: YOU MAY NOTE USE GOOGLE MAPS & EVENTFUL TOGETHER BECAUSE WE DID THOSE IN CLASS. YOU MAY USE GOOGLE MAPS WITH ANOTHER API.
YOU MAY ALSO USE EVENTFUL WITH ANOTHER API. YOU JUST MAY NOT USE THOSE TWO TOGETHER.
Option 2: One Web Service and Custom Node Service
Please Note: If you choose the Node.js option, it MUST be hosted online at Heroku.com (free) or elsewhere. Otherwise, there will be a 30% deduction.
Use one web service (web API) that uses XML or JSON and create your own Node.js powered JSON API. Your Node.js API has to respond to GET requests with different JSON objects based on the URL or query from the AJAX request. Your external web service may be called by the client-side or through Node. That is, your client could make only requests to your Node app, and your Node app can do the AJAX request to the other service and combine it with its own custom JSON objects to send it back to the client.
An example of this might be having your client app make requests to your Node server to lookup a certain League player, your Node server makes a request to the League of Legends API and combines the searched player's data with your data and sends it back. Then the client receives a JSON object of the searched player's data and your data. Another example of this might be having your client use Google maps and your client sends a request to your Node server. Your Node server responds with a custom JSON object of locations around campus for HvZ and the client plots those points on the Google map. A third example of this might be having your client reach out to your Node server, have your Node server reach out to a random numbers API (or RPG API) and use that data to generate a random DnD character or character stats.
The idea here is that you have AT LEAST one external AJAX API and your own custom Node web service. Your client can talk directly to the external API and to your Node server, or your client can just talk to the Node server which will both talk to the external API and respond with its own custom data.
I. Web APIs
You must use 2 distinctive web service APIs (option 1) or one web service API with Node (option 2) in your completed project. The exact web services used are up to you, here are some ideas:
Please note: If you are using Node, you might be able to find API libraries for your API at https://www.npmjs.com/. Also just because there is a library for it does not mean it is a web API. A web API must be AJAX calls to get xml or json from a web service. Other node libraries would not count towards this requirement.
- Giant Bomb Game API and other Game APIs
- USGS Earthquake data visualized in Google Maps - here's an example JSONP call to the earthquake service.
- Book information
- Woot deals
- Movie Info - themoviedb.org
- Current weather and forecasts: openweathermap.org
- Business and start-up info: data.crunchbase.com
- Nearby gas stations
- League of Legends API - developer.riotgames.com
- Blizzard API - dev.battle.net
- Yelp API - yelp.com/developers/documentation/v3
- Anilist API - Anilist Anime API (documentation here)
- Tumblr API - tumblr.com/docs/en/api/v2
- Google Maps API - developers.google.com/maps/
- Eventful API - api.eventful.com
For lists of even more Web services, see:
- www.programmableWeb.com/apis has links to thousands of APIs - most free to use with sign-up.
- https://developers.google.com/products/ has over 50 APIs (search for API on the page)- sign up at then check out their API console. Firebase and Google maps will also count as APIs.
- github.com/toddmotto/public-apis (probably avoid OAuth ones) - but don't use the "F*** Off as a Service" one :-|
II. Browser Technologies
The most straightforward way to meet this requirement is to use the
localStorage API to save user data, for example the last term they searched for. Here's a helpful tutorial. On banjo, be sure to use unique key names (i.e. the "item names") like
abc1234 is your id, as we discussed in class.
NOTE: Using ES6/7/8 (ES2015/ES2016/ES2017) will count towards this requirement as long as it's chrome compatible. Just be aware that employers looking at this on a portfolio may not have the capability to run your app.
III. Interactivity and UI
It is required that you utilize CSS3 transforms/transitions/animations to improve the usability and interactivity of your web application. Your goal is to not create gratuitous effects, but instead "let the user know what's going on" with effects like; fade-ins, fade-outs, and slides.
Alternatively, you may use some of the features of the jQuery and jQuery UI libraries, such as accordions, progress bars and spinners. (Note: With jQuery, you must use additional effects besides
The user should be able to interact with your application in a variety of ways. Keyboard, buttons, sliders, pull-downs, check boxes or others - if appropriate for your application.
Other features that would be nice:
- hitting the enter key performs the search (making clicking the button unnecessary)
- (assuming your app has a map) tapping a button that is grouped with a particular search result zooms the map at the location of that result.
IV. Graphic Design Elements
- An attractive and functional page design backed by valid HTML5 markup and CSS
- HTML5 Web Fonts. Times New Roman need not apply!
2) Requirements and Grade Rubric
- 15% - Media Requirements:
- Images & Theme:
- Consistent theme or style
- Optimized bitmap Graphics (JPEG or PNG) must be used, NOT BMP, TIFF, and so on
- HTML/CSS Page Design:
- Text must be displayed in theme appropriate embedded Web Fonts - Times New Roman need not apply! Size the text so that it is easy to read. google.com/fonts and fontsquirrel.com have a wide variety of free fonts
- The page design should be pleasant and professional and done by you. If you are starting from a template for page layout, be sure to modify it heavily so it looks nothing like the template when you are done. Use a wide variety of CSS selectors and styling as needed.
- Ideally you will have used progressive enhancement/responsive techniques to make your app display nicely on a wide variety of devices. If not, be sure that the main idea of the app fits in an 800 x 600 pixel or so space (i.e. Don't just test it on a 20" monitor)
- Sound (optional):
- Subtle UI sound can be a nice extra
- Keep your sound file sizes as small as possible. Primarily use MP3's; WAV's are OK for short sound effects
- Canvas Drawing/Animation (optional):
<canvas>visualization of web service data can be a nice extra
- Drawing libraries such as Pixi.js, Three.js, Processing.js and D3.js are allowed
- Images & Theme:
- 20% - Interaction/Usability Requirements:
- See Interactivity and UI above
- CSS3 is used for UI effects (alternatively jQuery UI can be used)
- A variety of controls will allow the user to alter parameters of the app. The user should feel they have sufficient and satisfying control of the app
- The user should "know what's going on" as they use the application through the use of spinners, progress bars or other UI effects.
- Errors (such as no data returned from the web service) should be handled gracefully by notifying the user
- 20% - Web Services / Browser Technologies:
- See sections I. and II. above
- At least 2 web APIs are used OR one web API and a custom Node.js web service.
- An HTML5 technology that we didn't cover in class was used
- 15% - Impact:
- Does the app work as intended and do something useful?
- Is this project "portfolio quality" that you would not hesitate to show a potential employer?
- Is the app attractive and easy to use?
- 20% - OOP and Coding Standards:
- JS libraries (other than jQuery, PreloadJS and SoundJS) may be used with prior approval only.
- Code runs with no errors
- Code Conventions and Practices:
- Use the module pattern where possible. Not all APIs or libraries will allow this, but as much as you can use a module pattern, do
- D.R.Y. - Don't Repeat Yourself. Repeated blocks of nearly identical code should be factored out and placed in a separate function
"use strict"at the top of every JS file
- Function constructors that will be called with the
newoperator must be capitalized
- All other variable and function names must begin with a lowercase letter
- Every JS statement ends with a semi-colon - don't rely on the JS interpreter to insert them for you
- Well-commented code. Each and every function gets a comment indicating what it does
- Delete or comment out your
console.log()and debug calls
- You will only receive credit for code that you write beyond what you've inherited from our ICEs.
- Any borrowed libraries or code fragments must be credited (author and URL) in both your code comments, and in the final documentation of the project
- Must work in Chrome. Will be graded on Chrome! Ideally it will also run on the other major HTML5-friendly browsers
- 10% - Above and Beyond:
Doing the above requirements adequately means a 'B'. To get an 'A', you must go above and beyond.
- Does the app functionality and programming go beyond what we did in class?
- Does your app use any skills/techniques beyond the rest of the requirements of the project?
- You need to go sufficiently above and beyond to get full credit for section.
- If you opt for the Node app, then you may choose to have an additional API (a second external API) or if you are doing the two APIs, then you may opt for a Node API.
Additionally, you may opt to use Node.js as a proxy, for OAuth, or for other reasons. This would count as above and beyond if you have two external APIs.
- If you use Node.js, then your Node app MUST be hosted online at Heroku.com (free) or elsewhere, so that it is publicly hosted. Otherwise, there will be a 30% deduction.
- If you opt to use Node.js in addition to two APIs, it may not count as all of the above and beyond criteria, but it will be counted as a significant portion. You may opt to do further Node.js work or other work to maximize points in "above and beyond" work.
The following schedule will hopefully keep you on track.
Phase 1 – Online Design Doc (10% deducted from final project grade if not completely done.)
You need to submit a txt, doc, docx or PDF file to the dropbox DO NOT put your file into zip. Please upload the document directly to the dropbox.
Describe the following:
- The name of your project.
- A one sentence application definition statement - What's it do? Who's it for? Example: A Food Finder for hungry RIT students. OR An earthquake and extreme weather tracker for weather buffs.
- Which Web services it will utilize (including a custom Node one if you choose that option). Give names and URLs.
- A list of features you could possibly implement to meet the application requirements.
- If you already have a working prototype, put a link to it!
Submission: Your concept document must be posted to the dropbox. DO NOT zip your submission. Please upload the document directly to the dropbox.
Phase 2 – Prototype
A working prototype posted to the dropbox and online, viewable to the class. The functionality should be 50-60% done. Get some feedback from the prof and your classmates on what could be improved before the final submission.
Submission: Post this to the dropbox, and bring it to class to share. -10% deducted from final project grade if not completely done.
Phase 3 – All Done!
Submission: Post your app and documentation to the dropbox. Also post your app to the web and put a link to it on your online design doc.
- Web page, Word Doc, Google Doc or PDF:
- The product definition statement and a list of features (recycle from design doc)
- Design Decisions
- Technical Decisions
- Document which HTML5 Technology you used
- Document your Extras - (see below)
- Give Credit Where Credit is Due - (see below)
- Grade yourself and justify it. Grade out of 0%-100%
- -10% deducted from final project grade if documentation not completely done.
Give Credit Where Credit is Due
To avoid plagiarism charges and an F in the course, be sure to document (both in your final documentation AND in code comments) each and every instance of borrowed media, scripts, classes, functions, or JS libraries. Give a link back to the original code or page.
Don't forget to give yourself credit - document your extra work!
Any doubts about what's OK to borrow? Ask in advance.