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
- Open your Chrome browser
- 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.
- 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).
- Ensure that the Developer mode checkbox in the top right-hand corner is checked.
- Click Load unpacked extension… to pop up a file-selection dialog.
- Navigate to the directory in which your extension files live, and select it.
Access to Chrome Apps
- In a new Chrome tab, type chrome://apps
- You should now see a new icon with the Polycom logo.
- 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.
- 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: 
<input type="text" name="username"
id="username"><br>
Password:  
<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.
No comments:
Post a Comment