1) Overview

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

Project Options

• 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
• Crime
• 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 :-|

Note: This is a Web programming class so I expect you to "roll your own" when it comes to adding Web service capability to your pages. That means that JavaScript "widgets" that display (for example) Twitter feeds or the current weather are expressly forbidden. You have the knowledge to write these yourself if you desire this sort of functionality in your project.

II. Browser Technologies

You will also be required to utilize at least one HTML5 Javascript Web application technology, that we did not cover in class, in a significant way. A list of these are at https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 (just make sure it's a JS technology) or the JS API section of CanIUse. Note that utilizing jQuery does not meet this requirement. You must implement the technology without the use of a library like jQuery.

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_search_term or abc1234_username, where 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 fadeIn() and fadeOut() )

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!

V. Impact

• Your app should do something useful, and be attractive and easy to use
• Need a name for your app? Check out the Web 2.0 Name Generator or the Dotomator

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

3) Deliverables

The following schedule will hopefully keep you on track.