This SDK aims to help the development of integrations with Bynder that use JavaScript, providing an easy interface to communicate with Bynder's REST API and request the information required. For that purpose, many ES2015 features were used, as well as Promises notation to help dealing with asynchronous code.
In order to use this SDK, you'll need the following tools:
Node installation will include NPM, which is responsible for the dependencies management.
npm install @bynder/bynder-js-sdk
import Bynder from '@bynder/bynder-js-sdk';
- Checkout the repository
git clone git@github.com:Bynder/bynder-js-sdk.git
. - Go to the
bynder-js-sdk
directory. - Run
yarn install
. - Run
gulp build
. - Use the
bundle.js
file generated indist
folder to use the SDK in the browser. - Include it in your page like this:
<script src="path/to/bynder-js-sdk.js"></script>
. - Define the constructor like this:
const Bynder = Bynder.default;
As said before, this SDK relies heavily on Promises, making it easier to handle the asynchronous requests made to the API.
Besides that, it provides a Bynder
object containing several methods corresponding to the calls to be performed, which accept the parameters exactly according Bynder's API documentation.
This is a generic example of how to use the SDK, if you need specific details for a specific module, refer to samples folder.
Before executing any request, you need to call the constructor passing your credentials as parameters, making it possible to authorize the calls to the API:
const bynder = new Bynder({
consumer: {
public: "<public_consumer_key>",
secret: "<secret_consumer_key>"
},
accessToken: {
public: "<public_access_key>",
secret: "<secret_access_key>"
},
baseURL: "http://api-url.bynder.io/api/"
});
From this point on, you just need to call the methods made available to call the API and retrieve the data you're looking for. Following the Promises notation, you should use .then()
/.catch()
to handle respectively the successful and failed requests.
Except for some special cases, most of the calls only take an object as parameter. After that, you'll need to refer to the API to tune the query as intended.
bynder.getMediaList({
type: 'image',
limit: 9,
page: 1
})
.then((data) => {
// TODO stuff
})
.catch((error) => {
// TODO Handle the error
});
Here's a list of all the methods available, separated by module:
userLogin()
getRequestToken()
getAuthorisedURL(token, callback)
getAccessToken(token, secret)
getMediaList(queryObject)
getMediaInfo(queryObject)
getAllMediaItems(queryObject)
getMediaTotal(queryObject)
editMedia(object)
getMetaproperties(queryObject)
getMetaproperty(queryObject)
saveNewMetaproperty(object)
editMetaproperty(object)
deleteMetaproperty(object)
saveNewMetapropertyOption(object)
editMetapropertyOption(object)
deleteMetapropertyOption(object)
getCollections(queryObject)
getCollection(queryObject)
saveNewCollection(queryObject)
shareCollection(queryObject)
addMediaToCollection(queryObject)
getTags(queryObject)
getCategories(queryObject)
getCategory(queryObject)
getBrands()
uploadFile(fileObject)
If you wish to contribute to this repository and further extend the API coverage of the SDK, here are the steps necessary to prepare your environment:
- Clone the repository
- In the root folder, run
npm install
to install all the dependencies. - Create the file named
secret.json
to provide API tokens following this structure:
{
"consumer": {
"public": "<public_consumer_key>",
"secret": "<secret_consumer_key>"
},
"accessToken": {
"public": "<public_access_key>",
"secret": "<secret_access_key>"
},
"baseURL": "http://api-url.bynder.com/api/"
}
- Use any of these gulp tasks to:
gulp lint
- Run ESlint and check the code.gulp build
- Run webpack to bundle the code in order to run in a browser.gulp babel
- Run Babel to create a folder 'dist' with ES2015 compatible code.gulp jasmine
- Run Jasmine for all the spec files inside 'tests'.gulp doc
- Run JSDoc to create a 'doc' folder with automatically generated documentation for the source code.gulp webserver
- Deploy a web server from the root folder atlocalhost:8080
to run the html samples (in order to avoid CORS problems).