2015-02-10

[jacobthemyth]

API Mashup Part 1

Description

You will inventing and creating an app that combines data from two APIs. The only constraint is that it should be cool. Part 1 of this project involves planning the application.

Objectives

Learning Objectives

After completing this assignment, you should:

• Understand what type of logic belongs in a Backbone Router.

  Performance Objectives

After completing this assignment, you be able to:

• Plan a basic web application
• Write a Backbone Router from scratch, using the documentation on http://backbonejs.org/

  Details

  Deliverables

• A repo containing at least:
  • main.js
  • index.html

    Requirements

• No JSHint warnings or errors

  Normal Mode

  1. Choose two APIs that you would like to combine data from for your application. See Additional Resources for some ideas.
  2. Sketch out wireframes for the different screens / states of your application. See Additional Resources for tools if you don't want to do them by hand.
  3. Make CRC cards or Trello cards for the domain model. You will probably want to use the same vocabulary that the APIs you choose use.
  4. Plan the application states and the URLs for those states.
  5. Using a Backbone Router, create a basic prototype that can move through the app flow.

     Additional Resources

• Wireframing tools:
  • https://www.draw.io/
  • https://wireframe.cc/
• API Search Engine:
  • http://apis.io/
• Social APIs
  • meetup - http://www.meetup.com/meetup_api/
  • klout - https://klout.com/s/developers/v2
  • twitter - https://dev.twitter.com/
  • twitter "intents" (put interactive widgets on your page and have someone tweet/reply to you via twitter) - https://dev.twitter.com/docs/intents
  • twitter for websites (follow button, embed tweets on a page) - https://dev.twitter.com/docs/tfw
  • REST API (uses OAuth) - https://dev.twitter.com/docs/api/1.1
  • facebook - https://developers.facebook.com/
  • linkedin - https://developer.linkedin.com/apis
  • foursquare - https://developer.foursquare.com/
  • yelp - http://www.yelp.com/developers/documentation/v2/search_api
  • github - https://developer.github.com/v3/
• Food-related APIs
  • Yummly - https://developer.yummly.com/
• Government and Civil APIs
  • Capitol Words - http://capitolwords.org/term/code/?search=1
  • CDC - https://data.cdc.gov/ and http://wonder.cdc.gov/
  • Federal Data.gov project - https://www.data.gov/developers/apis
  • Sunlight Foundation - http://sunlightfoundation.com/api/
• Weather APIs
  • Forecast.io - https://developer.forecast.io/

• Google APIs

  Using the Google SDK (a .js file) may be necessary and the easiest way to get started with Google APIs

  - https://developers.google.com/api-client-library/javascript/start/start-js
  - https://developers.google.com/apis-explorer/#p/

  • maps, directions, geocoder, places, etc - https://developers.google.com/maps/documentation/javascript/
  • feed - https://developers.google.com/feed/v1/devguide
  • plus - https://developers.google.com/+/web/
  • static maps - just a url for an image, e.g.:

  http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284

  • streetview api - again just a url, e.g.: http://maps.googleapis.com/maps/api/streetview?size=400x400&location=40.720032,-73.988354&fov=90&heading=235&pitch=10
  • tasks - https://developers.google.com/google-apps/tasks/v1/reference/tasks/update
  • Google custom search engine - https://developers.google.com/custom-search/json-api/v1/overview

• Music and Video APIs
  • Spotify - https://developer.spotify.com/
  • Soundcloud - https://developers.soundcloud.com/
  • Deezer - http://developers.deezer.com/
  • Grooveshark - http://developers.grooveshark.com/
  • Rdio - http://www.rdio.com/developers/
  • YouTube - https://developers.google.com/youtube/v3/getting-started
  • Vimeo - https://developer.vimeo.com/
  • BandsInTown - http://www.bandsintown.com/api/overview
  • Dolby Audio - http://developer.dolby.com/
• Image APIs
  • Flickr - https://www.flickr.com/services/api/
  • PlaceKitten - http://placekitten.com/
  • PlaceBacn - http://placebacn.com/
  • LoremPixel - http://lorempixel.com/
• File and Data Storage APIs
  • Dropbox - https://www.dropbox.com/developers/datastore
  • also, embeddable JS widgets on your page -> https://www.dropbox.com/developers/dropins
  • AWS - http://aws.amazon.com/sdk-for-browser/
  • Firebase - https://www.firebase.com/how-it-works.html
  • User Auth with Firebase - http://jsfiddle.net/firebase/a221m6pb/
  • Parse - https://parse.com/docs/js_guide#javascript_guide - https://parse.com/downloads/javascript/parse-1.2.19.js
  • Meteor (has a deploy tool just like heroku, comes with front end and back end code) - http://docs.meteor.com/#top
• Payments, Credit Card Processing, and Shopping Carts
  • Stripe - https://stripe.com/docs/api - https://stripe.com/docs/stripe.js
  • Braintree - https://developers.braintreepayments.com/javascript+node/start/overview
  • Paypal - https://developer.paypal.com/docs/api/
  • Snipcart - https://snipcart.com/
  • Gumroad - "Buy button right on your site" - https://gumroad.com/overlay
  • also, embed a product widget right on site - https://gumroad.com/embed
  • https://gumroad.com/api
  • Helium - https://gethelium.com/
• Retail
  • BestBuy - https://developer.bestbuy.com/
• Other / HackerNews / Startup-y APIs
  • Producthunt - https://github.com/karan/Hook
  • Trello - https://trello.com/docs/
  • HackerNews - http://api.ihackernews.com/
  • https://github.com/HackerNews/API
  • Track Ships / Vessels - http://www.fleetmon.com/faq/public_api
  • Wikipedia - http://www.mediawiki.org/wiki/API:Main_page
  • Untappd - https://untappd.com/api/docs
  • BreweryDB - http://www.brewerydb.com/developers
  • 23andme - https://api.23andme.com/
  • NYT - http://developer.nytimes.com/docs
  • NPR - http://dev.npr.org/
  • EasyPost - Shipping integration and postage ordering with FedEx/UPS/USPS/DHL - https://www.easypost.com/
  • Wit - natural language processing - http://labs.wit.ai/demo/index.html
  • Nest - https://developer.nest.com/documentation/control
  • FlightAware - http://flightaware.com/commercial/flightxml/
  • IMDB / OMDB - http://www.omdbapi.com/
  • Hipchat API - https://www.hipchat.com/docs/apiv2
  • Zapier - https://zapier.com/developer/documentation/getting-started/
  • Evernote - https://dev.evernote.com/doc/
• Dictionary / Words / Thesaurus APIs
  • DictionaryAPI - http://dictionaryapi.com/ - example at http://whispering-island-7828.herokuapp.com/#magic
• GIFs
  • https://github.com/giphy/GiphyAPI
• Real Estate APIs
  • Trulia - http://developer.trulia.com/
  • Zillow - http://www.zillow.com/howto/api/PropertyDetailsAPIOverview.htm
  • http://www.getziptastic.com/
• Job APIs
  • USA jobs - http://search.digitalgov.gov/developer/jobs.html
  • current API you're using: http://www.authenticjobs.com/api/documentation/
  • possible XML API: http://www.indeed.com/jsp/apiinfo.jsp
  • JS-based API for LinkedIn Jobs: https://developer.linkedin.com/documents/getting-started-javascript-api
  • Stack Overflow XML feed: http://careers.stackoverflow.com/jobs/feed?searchTerm=javascript&location=tx&range=160&distanceUnits=Miles
• Transportation APIs
  • Uber - https://developer.uber.com/
• Real Devices
  • The LEAP Motion - https://www.leapmotion.com/ - https://developer.leapmotion.com/documentation/skeletal/javascript/index.html
  • Oculus - http://www.oculus.com/dk2/ - https://github.com/Instrument/oculus-bridge
  • Tessel - https://tessel.io/ - https://tessel.io/docs
  • Nest - https://nest.com/ - https://developer.nest.com/documentation/control - https://developer.nest.com/documentation/alert

[ATMartin]

Before I forget, CRC's & User Stories: https://atm-notecards.divshot.io/?set=homework-02-10

I'm having some trouble with the concept of CRC Classes - what's the scope there exactly? Is my user a class unto themselves? Do I need to break down portions of the app, like separate cards for data retrieval and local filtering? I feel like I'm either waay too granular or not granular enough.

[ATMartin]

Repo for ApiMashUp here: https://github.com/ATMartin/TIY-HW-17-ApiMashUp

Will implement router tomorrow. It's late. Sorry.

http://img.photobucket.com/albums/v380/poopII/butIamLeTired.jpg

[jacobthemyth]

CRC cards are just meant to be an exercise to help clarify the problem / jobs to be done. I usually make a User card, though not an App card. The actual implementation details (data retrieval, local filtering) would not be part of the CRC process. It's meant to develop a vocabulary that you could use to describe the problem the app solves without talking about the actual app (no UI, no ajax or network requests). Not sure if that helps.

[ATMartin]

Router added to that repo. Thanks!

[ATMartin]

Added full app & associated files. Thanks!