Web

Ask tech team
From QuickBlox Developers (API docs, code samples, SDK)
Jump to: navigation, search

The QuickBlox Web SDK is now available on GitHub and provides a JavaScript library making it even easier to access the QuickBlox cloud backend platform.

To download, head over to https://github.com/QuickBlox/quickblox-web-sdk

To see a live sample, check out http://quickblox.github.io/quickblox-web-sdk/examples/content/

Please note that the Web SDK is currently in beta - ask any questions on Stack Overflow using the tag "quickblox".

Contents

Usage

All you need to get going is to add QuickBlox.js to your HTML just before the </body> tag, like so:

<script src="~/quickblox.js"></script>

Then initialise QuickBlox application ID, authorization ID and authorization secret. To find these, follow this tutorial up until step 3.

You should end up with something like this with your credentials replacing the Xs:

QB.init(XXXX,'X-XXXXXX-XXXXXX','XXXXXXXXXXXXXXX');

Spec Runner

To use the Spec Runner, head over to the GitHub page - or if you download the Web SDK, you will find the Spec Runner in the /spec folder.

Getting started

For use inside browsers, a window scoped variable called QB is created.

Most, with the notable exception of init, take a callback parameter which gets called with an error and result parameter (ala node.js).

If the call was successful then result will contain the reply from the QuickBlox platform. Similarly, if something went wrong then the error parameter will give you a description of what the problem was.


Initialise the environment with my application id, authentication key and authentication secret:

 QB.init(3477,'ChRnwEJ3WzxH9O4','AS546kpUQ2tfbvv');

If you get quickblox.js from the development branch on GitHub, you can also initialise the environment with a token. This means the session is already generated, so you won't need to call on .createSession(). This may be useful if you want to open a page, from another source such as an app or email, and automatically authenticate the user without them having to type anything.

From an app, for instance, you could send the user to a URL like this:

http://site.com/#<token>

And it would seamlessly authenticate them. Or if you are concerned about code privacy, you can create a session with PHP (or your favourite server-side language) and init with the token.

<?php 
    // create token
?>

...

QB.init("<?php $token ?>")


Create an API session

 QB.createSession(function(err, result){
   if (err) { 
     console.log('Something went wrong: ' + err);
   } else {
     console.log('Session created with id ' + result.id);
   }
 });


Throughout the SDK, each method has a callback, returning either an error or result. The error return type indicates there was a problem with the data submitted (e.g. bad login details, authentication or permission errors) - you can then adjust the error code or message that the user receives. For testing, you can log the error to the console with console.log(err).

When the result is returned, this indicates the request was successful - in this case (creating a session), it means you can continue - such as QB.login().


For logging in with user authentication, you could use this code:

 var params { login: USERNAME_OR_EMAIL_HERE, password: PASSWORD_HERE }
 
 QB.createSession(params, function(err, result){
   if (err) { 
     console.log('Something went wrong: ' + err);
   } else {
     console.log('Session created with id ' + result.id);
     // QB.login(...)
   }
 });


List the users currently enrolled:

 QB.users.listUsers(function(err, response){
   for (var i=0; i < response.items.length; i++) {
      console.log('User ' + response.items[i].user.login + ' is registered');
   }
 });

Here is another sample demonstrating getting a QB token, creating a session and authorizing a user.

Swagger docs

You can access Swagger docs here.

Code snippets

We're still working on newer, better developer documentation for the Web SDK, but for now, hopefully this can help.

Create a session:

QB.createSession(function(error, response){
    if(error) {
        console.log(error);
    } else {
        // Success
    }
});

Create a session with user authentication:

QB.createSession({login: "JohnDoe", password: "Hello123"}, function(error, response){
    if(error) {
        console.log(error);
    } else {
        // Success
    }
});

Create a user:

QB.users.create({login: "JohnDoe", password: "password"}, function(error, response){
    if(error) {
        console.log(error);
    } else {
        // Success
    }
});

List users (by ID in this example):

QB.users.listUsers({ filter:{ type: 'id', value: ID_HERE }}, function(error, response){
    if(error) {
        console.log(error);
    } else {
        // Success
    }
});

Update a user:

QB.users.update({ id: user_creds.user_id, website: "http://quickblox.com"}, function(error, response){
    if(error) {
        console.log(error);
    } else {
        // Success
    }
});

Delete a user:

QB.users.delete(result.id, function(error, response){
    if(error) {
        console.log(error);
    } else {
        // Success
    }
});

Upload a location:

QB.location.geodata.create({ latitude:"51.523170", longitude: "-0.111215" }, function(error, response){
    if(error) {
        console.log(error);
    } else {
        // Success
    }
});

Create a place:

QB.location.places.create({ geo_data_id: geo_data_obj.id, title: "Quickblox HQ", address: "8 Warner Yard, Clerkenwell, London, EC1R 5EY" }, function(error, response){
    if(error) {
        console.log(error);
    } else {
        // Success
    }
});

Create content:

QB.content.create({name: "Test file", content_type: "image/png", 'public': true}, function(err, response){
    if (err) {
        console.log('Error creating blob: ' + JSON.stringify(err));
    } else {
        // Success
    }
});

List content:

QB.content.list(function(error, response){
    if(error) {
        console.log(error);
    } else {
        // Success
    }
});

Create a custom object:

var data = {
    field: "value"
}
 
QB.data.create("ClassName", data, function(err, response){
    if (err) {
        console.log(err);
    } else {
        // Success
    }
});

Update a custom object record:

var data = {
    _id: data._id,
    Hello: "Goodbye, World!"
}
 
QB.data.update("ClassName", data, function(err, response){
    if (err) {
        console.log(err);
    } else {
        // Success
    }
});

List all custom objects:

QB.data.list("ClassName", function(err, response){
    if (err) {
        console.log(err);
    } else {
        // Success
    }
});

Delete a custom object:

QB.data.delete("ClassName", data._id, function(err, response){
    if (err) {
        console.log(err);
    } else {
        // Success
    }
});

Code samples

Title APIs used Description
Simple Web Chat code sample Chat, Users The Chat sample connects and socializes your users with the chat module. Features include: Peer to Peer Chat; Group chat.


QB Group Chat Room widget Chat The XMPP chat was built to demonstrate how the QuickBlox API is compatible with the web as well as iOS, Android and WP7. Users login with Facebook Connect and are then put straight into the chatroom. It has also been extended into a Wordpress plugin with location integration. You can check it out on GitHub here, see the demo in action here or access the key generator here.


Web blog sample CustomObjects This sample demonstrates how to build your own web blog for 2 hours.

SDK test sample Users This sample demonstrates getting a QB token, creating a session and authorizing a user.


Wordpress MapChat plugin Location, Chat MapChat plugin is built on Location API which has special location_data object. The plugin has over 1400+ downloads.



Simple Facebook Location code sample Location, Users This is a sample of web application using QuickBlox for Facebook. The application uses the QuickBlox modules Location and Users. Using this application the user can send emoticons to their friends on Facebook. All users are displayed on the map.


Simple Web Location code sample Location, Users There is a simple web application that demonstrates the main features of the modules QuickBlox Location and QuickBlox Users.


Web/Facebook Map Chat code sample Chat, Location, Users This is a complex sample of a Web application using QuickBlox. The application uses the QuickBlox modules Location and Users. Using this application, the user can see other users on the map. Users can use Chat to communicate with each other.


Simple PhoneGap Location code sample Location, Users This code sample describes the process of development HTML/JavaScript application as part of PhoneGap infrastructure.


Simple PhoneGap Users code sample Users This code sample describes the process of development HTML/JavaScript application as part of PhoneGap infrastructure.


Comments

Feel free to comment on this page using the form below.

blog comments powered by Disqus