|
| 1 | +# OpenAura JavaScript SDK |
| 2 | + |
| 3 | +The OpenAura JS SDK provides simple access to the OpenAura API via a |
| 4 | +simple JavaScript interface. |
| 5 | + |
| 6 | +## Installation |
| 7 | + |
| 8 | +Download the minified JS |
| 9 | +[here](https://github.com/openaura/api-docs/blob/deanh/js/javascript/oa-all.min.js) and include |
| 10 | +it in your HTML via a script tag. |
| 11 | + |
| 12 | +## Usage |
| 13 | + |
| 14 | +### Setting up your API Key |
| 15 | + |
| 16 | +The SDK will load the OA modules into the OA variable in your global |
| 17 | +namespace. You can access the ArtistInfo and Aura modules from within |
| 18 | +this namespace. |
| 19 | + |
| 20 | +To start, you'll need to initialize the client libs with your API |
| 21 | +key. This can be done by passing your API keys to the initialize |
| 22 | +method: |
| 23 | + |
| 24 | + OA.initialize({ |
| 25 | + stream_key: "YOUR_STREAM_KEY", |
| 26 | + info_key: "YOUR_INFO_KEY" |
| 27 | + }) |
| 28 | + |
| 29 | +*Note if you have an evaluation API key, it should work for both the |
| 30 | + stream and info APIs.* |
| 31 | + |
| 32 | +### Artist Info API |
| 33 | + |
| 34 | +The Info API is designed to provide you with access to data and assets |
| 35 | +which can be used to provide quality artist profile experiences to |
| 36 | +your users. Artist info responses typically include the following |
| 37 | +information about a given artist: |
| 38 | + |
| 39 | +* Bio |
| 40 | + |
| 41 | +* Artist Profile Image |
| 42 | + |
| 43 | +* Style Tags |
| 44 | + |
| 45 | +* An Artist Fact Card |
| 46 | + |
| 47 | +* Artist "Cover" Photos (large format, landscape images which can be used as a background). |
| 48 | + |
| 49 | +In the JS SDK, you make queries into the Artist Info API with the |
| 50 | +ArtistInfo module. The ArtistInfo module provides three "fetch" |
| 51 | +methods which allow you to access ArtistInfo objects via: OpenAura |
| 52 | +artist id, Musicbrainz GID, or OpenAura anchor ID. |
| 53 | + |
| 54 | +All fetch queries all follow the same general format. Each takes an ID |
| 55 | +and a callback function that takes an ArtistInfo object as a |
| 56 | +parameter, which is executed once the API returns. |
| 57 | + |
| 58 | +Here's a simple example, using OpenAura artist id 71 (Pearl Jam): |
| 59 | + |
| 60 | + OA.ArtistInfo.fetchByOaArtistId(71, function (artistInfo) { |
| 61 | + console.log(artistInfo.name()); |
| 62 | + }); |
| 63 | + |
| 64 | +See the reference for details on working with ArtistInfo objects. |
| 65 | + |
| 66 | +### Stream API |
| 67 | + |
| 68 | +Once the SDK is initialized, you can also make queries into an |
| 69 | +artist's aura or stream using the stream API. Here we make a query |
| 70 | +against OpenAura artist id 47 (Taylor Swift). In the callback, we grab |
| 71 | +the PartcicleCollection from the returned Aura, and call its each() |
| 72 | +method, printing the id of each returned particle: |
| 73 | + |
| 74 | + OA.Aura.fetchByOaArtistId(47, function (aura) { |
| 75 | + aura.particles().each(function(x) { |
| 76 | + console.log(x.id()); |
| 77 | + }); |
| 78 | + }); |
| 79 | + |
| 80 | + 5286c81576f96fcc3100054c |
| 81 | + 5286c81576f96fcc31000551 |
| 82 | + 5293c7a776f96f73ce000301 |
| 83 | + 52b0e6a0aea68d506c01d1c0 |
| 84 | + 52b0e6a0aea68d506c01d1cc |
| 85 | + 52b0e6a0aea68d506c01d1d0 |
| 86 | + 52b0e6a1aea68d506c01d1d6 |
| 87 | + 52cda30aaea68d23720014a1 |
| 88 | + 52cda30aaea68d23720014a5 |
| 89 | + 52cf1bc8aea68dca30059505 |
| 90 | + |
| 91 | +In this next example, we use make the same query, but in this case, we |
| 92 | +use the ParticleCollection's filterByProvider method to only return |
| 93 | +those particles which origined from the artist's Twitter account: |
| 94 | + |
| 95 | + OA.Aura.fetchByOaArtistId(47, function (a) { |
| 96 | + a.particles().filterByProvider("twitter").each(function(x) { |
| 97 | + console.log(x.id()); |
| 98 | + }); |
| 99 | + }); |
| 100 | + |
| 101 | + 52cda30aaea68d23720014a1 |
| 102 | + 52cda30aaea68d23720014a5 |
| 103 | + 52cf1bc8aea68dca30059505 |
| 104 | + |
| 105 | +In this last example, we use the ParticleCollection's withMediaWithin |
| 106 | +method to only return particle which have media (most likely video or |
| 107 | +images) within a certain range of pixel sizes. In this case, we're |
| 108 | +filtering for particles that have media objects which are at least 0x0 |
| 109 | +pixels, and at most 1000x3000 pixels: |
| 110 | + |
| 111 | + OA.Aura.fetchByOaArtistId(47, function (a) { |
| 112 | + a.particles().withMediaWithin(0, 0, 1000, 3000).each(function(x) { |
| 113 | + console.log(x.id()); |
| 114 | + }); |
| 115 | + }); |
| 116 | + |
| 117 | + 5286c81576f96fcc3100054c |
| 118 | + 5286c81576f96fcc31000551 |
| 119 | + 5293c7a776f96f73ce000301 |
| 120 | + 52cda30aaea68d23720014a1 |
| 121 | + |
| 122 | +## Building |
| 123 | + |
| 124 | +This project has the following setup: |
| 125 | + |
| 126 | +* www/ - the web assets for the project |
| 127 | + * app.js - the top-level config script used by index.html |
| 128 | + * app/ - the directory to store project-specific scripts. |
| 129 | + * lib/ - the directory to hold third party scripts. |
| 130 | +* tools/ - the build tools to optimize the project. |
| 131 | + |
| 132 | +To build, run: |
| 133 | + |
| 134 | + node tools/r.js -o tools/build.js && cp www-built/app/all.js oa-all.min.js |
| 135 | + |
| 136 | +That build command creates minified version of the project in a |
| 137 | +**www-built** directory. The app/all.js file will be optimized to |
| 138 | +include all of its dependencies, and is copied to the main dir for |
| 139 | +distribution. |
| 140 | + |
| 141 | +The example-all.html file in the main directory loads the minified |
| 142 | +file, so you can expeiment with it in your browser console. |
| 143 | + |
| 144 | +For more information on the optimizer: |
| 145 | +http://requirejs.org/docs/optimization.html |
| 146 | + |
| 147 | +For more information on using requirejs: |
| 148 | +http://requirejs.org/docs/api.html |
0 commit comments