Monday, April 28, 2014

[Lab] Google Chrome App for Polycom DMA

In the last two articles, I demonstrated you how to leverage Polycom DMA & CloudAXIS APIs within Google Chrome App & Extension.
Now, I will show you how to create your first Chrome Application to list all users and create a new user on your Polycom DMA.

The main advantage of a Chrome Application is you can develop via Web technology without a web server, and do easy demo very quickly. You will work from the skeleton of a Chrome Application. You can download the application from here and you want to unzip it.

Installation of the application
  1. Open your Chrome browser
  2. Extensions that you download from the Chrome Web Store are packaged up as .crx files, which is great for distribution, but not so great for development. Recognizing this, Chrome gives you a quick way of loading up your working directory for testing. Let's do that now.
  3. Visit chrome://extensions in your browser (or open up the Chrome menu by clicking the icon to the far right of the Omnibox. and select Extensions under the Toolsmenu to get to the same place).
  4. Ensure that the Developer mode checkbox in the top right-hand corner is checked.
  5. Click Load unpacked extension… to pop up a file-selection dialog.
  6. Navigate to the directory in which your extension files live, and select it.
Access to Chrome Apps
  1. In a new Chrome tab, type chrome://apps
  2. You should now see a new icon with the Polycom logo.
  3. Click on it, you will see a new web page with just a title

We will now start to work on the user interface of the application.

Part 1: Retrieve the list of users

We will only work on two files – index.html, app.js. In a first time, we will work on the user interface (UI) of the application.
  • Open, with your preferred source code editor (in my case Notepad++), index.html. 
We will have a form to let the user enter Polycom DMA hostname and the credentials.

  • Add the following lines in the section “Retrieve the list of users”:
<form>
DMA Hostname: <input type="text" name="dma" id="dma" ><br>
Login: <input type="text" name="login" id="login" ><br>
Password: <input type="password" name="password" id="password"><br>
<input type="submit" value="Retrieve info"></input></br>
Your DMA users: <span id="room_id"></span> <br /><br>
</div>
</for>


  • Go back to the Web page with the blank application and right-click on the page and choose “Reload App” or if you have closed the app, reopen it. The application has been updated with three inputs fields and on button.

But, if you click on the button “Retrieve Info”, nothing will happen, because we don’t have written the business logic, yet.

We will write the business logic using Javascript.
  •  Open the file app.js which will contain all the business logic.


The file is not empty, because I have already set up several variables we will use the rest of the code, and a function to encode in Base64 the authentication string.
  • Add the following code in the section “Code to retrieve users”
var form = document.querySelector('form'); //define the object Form we have created in the HTML page.
form.addEventListener('submit', function(ev) {
                //Definition of variables to retrieve the info you put in the form
                dma = document.getElementById('dma').value;
                login = document.getElementById('login').value;
                pass = document.getElementById('password').value;
                user_id = document.getElementById("room_id");
                // URL Definitions
                url_init="https://" + dma + ":8443";
                url = url_init + '/api/rest/users';
   
               
                var xhr = new XMLHttpRequest();
                xhr.open('GET',url);
                auth = make_base_auth(login,pass);
                xhr.setRequestHeader("Authorization", auth); //Authentication Header
                xhr.send(); // send of the REST Command
                xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
                                   if (xhr.status === 200) {
                               
                                var items = xhr.responseXML.querySelectorAll("username"); //Selection of Username elements in the XML File
                                var name = "";
                                for (var n = 0; n < items.length; n++) {
                                                if(name=="")
                                                {
                                                name = items[n].textContent; // Retrieve the value of the Username element
                                                }
                                                else
                                                {
                                                                name = name + ", " + items[n].textContent;
                                                }
                                                user_id.innerHTML=name; //Display of the list of users
                                                }
        } else
{
            console.error("Something went wrong!");
}
    }
                console.log("Nom : " + name);
};
});

  • Go back to the Web page with the blank application and right-click on the page and choose “Reload App” or if you have closed the app, reopen it.
  • Enter your Polycom DMA hostname and Admin credentials.

Congratulations, you have written your first Web-like application leveraging Polycom DMA APIs.

Part 2: Create a new user on Polycom DMA

Now, we will enhance the application, the user will be able to create a new user on Polycom DMA. Like, we just did, you have to modify the Index.html file (UI) and app.js (Business logic). I will let you do it by yourself.
  • Modify Index.html and app.js with the following codes
HTML Code:

<div style="color: white; font-size: 15px;">
New user Creation:<br /><br>
<form name='myForm2' id='myForm2'>
First Name: <input type="text" name="first_name" id="first_name"><br>
Last Name: <input type="text" name="last_name" id="last_name"><br>
Username:&nbsp <input type="text" name="username" id="username"><br>
Password:&nbsp&nbsp <input type="text" name="password2" id="password2"><br><br>
<input type="submit" value="Create user"></input></br>
<span id="Update_good"></span> <br />
</form>
</div> 

Business Logic:

var form2 = document.getElementById('myForm2');
                form2.addEventListener('submit', function(ev) {
                dma = document.getElementById('dma').value;
                url_init="https://" + dma + ":8443";
                var url_final_user = url_init + "/api/rest/users";
               
                var first_name = document.getElementById("first_name").value;
                var last_name = document.getElementById("last_name").value;
                var username = document.getElementById("username").value;
                var password = document.getElementById("password2").value;
                login = document.getElementById('login').value;
                pass = document.getElementById('password').value;
                auth = make_base_auth(login,pass);

//Creation of the XML Message wichi contains all information about the new user you want to create like username, password           
                var XML_Message =
                                "<plcm-user xmlns=\"urn:com:polycom:api:rest:plcm-user\">\r\n" +
                                "<username>"+ username +"</username>\r\n" +
                                "<first-name>"+ first_name +"</first-name>\r\n" +
                                "<last-name>"+ last_name +"</last-name>\r\n" +
                                "<password>"+ password +"</password>\r\n" +
                                "</plcm-user>\r\n";
               
                                var req = new XMLHttpRequest();
                                req.open('POST', url_final_user);
                                req.setRequestHeader("Content-Type","application/vnd.plcm.plcm-user+xml");
                                req.setRequestHeader('Authorization', auth);
                                req.withCredentials = true;
                                req.send(XML_Message);

                                req.onreadystatechange = function() {
                                if (req.readyState === 4) {
                                                if (req.status === 201) {
                                                                Update_good.innerHTML="User Created :) ...";                                                                               
                                                } else {
                                                                console.error("Something went wrong!");          
                                                }
                                }
}
});
  • Go back to the Web page with the blank application and right-click on the page and choose “Reload App” or if you have closed the app, reopen it.
  • Enter your Polycom DMA hostname, Admin credentials and user details, then click on “Create User”
PS: POST instead of GET
In that code, we send data to the Polycom DMA describing the user (username, password…). 
Most of the type, POST Call contains a XML content describing the object we want to create like a conference room, conference or a reservation on RPRM.

Congratulations, you have improved by adding a new function to create a new user.