Xây dựng một ứng dụng pureXML và JSON, Phần 3: Tạo ra các tiểu trình OpenSocial dùng cho pureXML

Xác định, triển khai, và thử nghiệm các tiểu trình OpenSocial để tương tác với Các Dịch vụ Phổ dụng JSON

Với công nghệ Web 2.0 của các tiểu trình (gadget) OpenSocial, các nhà phát triển có thể dễ dàng gồm thêm các ứng dụng của họ vào các địa chỉ Web phổ biến, chẳng hạn như iGoogle, MySpace, Hi5, LinkedIn, và các địa chỉ khác. Trong bài này, hãy khảo sát các tiểu trình OpenSocial thông qua việc xây dựng thực hành một ứng dụng tận dụng các khả năng pureXML® của DB2®. Bài viết này là phần cuối cùng trong loạt bài ba phần, nó minh họa cách xây dựng một ứng dụng pureXML có giao diện người sử dụng là một tiểu trình mà bạn có thể triển khai trong bất kỳ địa chỉ Web tương thích với OpenSocial nào. Hãy làm theo các bước trong bài này để xây dựng một giao diện người sử dụng mà lưu trữ và lấy ra dữ liệu JSON đã mô tả trong bài viết đầu tiên thông qua Các Dịch vụ Phổ dụng JSON đã tạo ra trong bài thứ hai.

Han Nguyen, Kỹ sư phần mềm, IBM  

Photo of Han NguyenHan Nguyen là một kỹ sư phần mềm làm về các chuẩn đang nổi lên với sự tập trung vào Điện toán Xã hội qua các sản phẩm và ngành dọc của các ngành công nghiệp khác nhau. Trước đây bà đã làm về một số công nghệ cả về dịch vụ và khởi động phần mềm.



Andy Smith, Kỹ sư phần mềm, IBM

Andy Smith là một kỹ sư phần mềm làm về các tiêu chuẩn đang nổi lên với sự tập trung vào ứng dụng của Mạng Xã hội liên quan đến công nghệ qua các sản phẩm và các ngành dọc của các ngành công nghiệp khác nhau. Trước đây ông đã làm về các công nghệ Web và cổng cả về dịch vụ và khởi động phần mềm.



Mark Weitzel, Kiến trúc sư phân mềm, IBM

Mark Weitzel là một nhân viên kỹ thuật cấp cao tại IBM Software Group Emerging Standards và nhóm Mã nguồn Mở tập trung vào mạng xã hội. Trước đó, ông Weitzel, là một bộ phận của nhóm Điện toán Độc lập Tivoli, chịu trách nhiệm về một số sáng kiến quản lý hệ thống mã nguồn mở tại Eclipse và Apache.



22 01 2011

Nền tảng về OpenSocial

OpenSocial là một đặc tả định hướng cộng đồng, nó định nghĩa một mô hình thành phần dựa trên trình duyệt, được biết đến như là các tiểu trình (tạm dịch thuật ngữ tiếng Anh “gadget” – một vật dụng nhỏ, hấp dẫn bởi tính mới mẻ. Nhiều khi cũng tương tự như “widget” – N.D.), và một giao diện lập trình ứng dụng (API) để truy cập thông tin lược tả của người sử dụng, cũng như đồ thị xã hội của họ (gồm cả những điều như bạn bè và các hoạt động của họ). Các ứng dụng thực hiện các API này sẽ có khả năng liên tác làm việc với một tập hợp nhiều trang mạng xã hội như: iGoogle, MySpace, Yahoo, Orkut, Hi5, LinkedIn, và các trang khác. Trong bài này chúng tôi sẽ tập trung vào các tiểu trình OpenSocial và trình bày cách làm thế nào để chúng có thể là một biện pháp mạnh mẽ để mở rộng tầm với của ứng dụng của bạn trên Web.

Các thuật ngữ thường sử dụng

  • API: Giao diện lập trình ứng dụng
  • CSS: Các phiếu định kiểu đè lên
  • HTML: Ngôn ngữ Đánh dấu Siêu Văn bản
  • HTTP: Giao thức Truyền Siêu văn bản
  • JSON: Ký pháp Đối tượng JavaScript
  • SOA: Kiến trúc Hướng Dịch vụ
  • UI: Giao diện người sử dụng
  • URL: Mã Định vị Tài nguyên Đồng nhất
  • XML: Ngôn ngữ Đánh dấu Mở rộng

Tiểu trình OpenSocial là gì?

  • Tiểu trình OpenSocial là một trình diễn nhỏ của một ứng dụng Web, nó thực hiện một tập hợp riêng các API. Một tiểu trình được mô tả bởi một tài liệu XML tuân thủ đặc tả OpenSocial. Định nghĩa này bao gồm giao diện người sử dụng như HTML, các phiếu định kiểu CSS, và JavaScript dành cho logic xử lý nghiệp vụ, và siêu dữ liệu bổ sung thêm dành cho tác giả, tiêu đề, v.v.
  • Một trang web thực hiện đặc tả OpenSocial và có thể là chủ chứa các ứng dụng gọi là một thùng chứa OpenSocial (OpenSocial container). Điều này có nghĩa là nó có thể xử lý các định nghĩa tiểu trình bằng XML, và cung cấp HTML thích hợp cho trình duyệt. Điều quan trọng là cần nhận thấy rằng các định nghĩa tiểu trình không nhất thiết phải được chứa trong trang web là thùng chứa OpenSocial đó. Hơn nữa, các tiểu trình thường đưa ra một dịch vụ từ một trang hoàn toàn khác. Thùng chứa cung cấp các cơ chế, chẳng hạn như các yêu cầu HTML đã ký (signed HTML requests), để mang lại một mức độ bảo đảm rằng các cuộc gọi có nguồn gốc từ tiểu trình trong trang web của mình. Là một thùng chứa OpenSocial, một trang web có thể cung cấp một cách dễ dàng để gộp nhóm một tập hợp các dịch vụ từ khắp các nơi trên Web.

Tạo ra tiểu trình

Trang này cung cấp cho người sử dụng một phương tiện để kiểm tra tập hợp cơ sở các hàm do Các Dịch vụ Phổ dụng cung cấp và hiển thị kết quả cho người sử dụng

Hình 1 là một ảnh chụp màn hình của ứng dụng kiểm thử mẫu. Nó sẽ được dùng làm khuôn mẫu mà bạn sử dụng để xây dựng tiểu trình OpenSocial mẫu. Điều này cung cấp cho người sử dụng các khả năng về giao diện người dùng (UI) cơ bản cần có để tương tác với Các Dịch vụ Phổ dụng.

Hình 1. Ứng dụng kiểm thử mẫu
Ứng dụng kiểm thử mẫu để bắt giữ các đầu vào của người dùng có một danh sách các dịch vụ Web, đầu vào, và các hành động

Trước tiên, bạn sẽ tạo ra một vài hàm JavaScript để cung cấp các truy vấn cơ sở điều khiển các kết nối với dịch vụ pureXML. Sau đó, bạn sẽ bổ sung hỗ trợ HTML cùng với đặc tả tiểu trình này. Cuối cùng, bạn xem cách làm thế nào để tạo và triển khai ứng dụng này.

Các hàm JavaScript để kết nối với các dịch vụ pureXML

Liệt kê 1 cung cấp JavaScript mẫu đã được tạo ra để xử lý các yêu cầu.

Liệt kê 1. Các hàm JavaScript PureJSON
var prefs = new gadgets.Prefs();
function getPrimaryKeys()	{
	var args = {};
	doPOST("getPrimaryKeys",args,displayJSONobj);  
};
function getJSONDocumentByKey(key)	{
	var args = {
	  id: key
	};
	doPOST("getDocumentByKey",args,displayJSONobj);  
};
function insertJSON(key, data)	{
	var args = {
	  id: key,
	  doc: data
	};
	doPOST("insert",args,response);  
};
function updateJSON(key, data)	{
	var args = {
	  id : key,
	  doc : data
	};
    doPOST("update",args,response);    
};
function deleteDocument(key)	{
	var args = {
	  id : key
	};
    doPOST("delete",args,response);
};
function doPOST(command,args,processResponseCallback)	{
	var url = "http://" + prefs.getString("pureXMLHostAddress") + 
			"/" + prefs.getString("contextRoot") + "/query/"+command;
	var params = {};
	postdata = gadgets.io.encodeValues(args);
	params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
	params[gadgets.io.RequestParameters.POST_DATA]= postdata;
	gadgets.io.makeRequest(url, processResponseCallback, params);
};
function response(obj)	{
	alert("Gadget implementation responsibility.");
};
function displayJSONobj(obj)	{
	alert("Gadget implementation responsibility.");
};

Hãy xem mục đích của từng hàm:

  • getPrimaryKeys gửi một yêu cầu getPrimaryKeys đến dịch vụ để lấy ra toàn bộ các khóa chính từ bảng DB2 và hiển thị kết quả bằng cách sử dụng hàm gọi ngược displayJSONobj khi giao dịch hoàn tất.
  • getJSONDocumentByKey sử dụng một giá trị khoá để gửi một yêu cầu getDocumentByKey đến dịch vụ để lấy ra một bản ghi JSON đơn lẻ với khóa chính khớp với giá trị đầu vào. Nó hiển thị kết quả bằng cách sử dụng hàm gọi ngược displayJSONobj.
  • insertJSON chờ hai thông số đầu vào: giá trị khoá duy nhất dành cho khóa chính và dữ liệu hàng dưới khuôn dạng JSON. Nó gửi một yêu cầu đến dịch vụ để tạo ra một hàng mới trong bảng DB2, và xác nhận tình trạng chèn khi giao dịch trả về bằng cách sử dụng hàm gọi ngược response.
  • updateJSON cung cấp khả năng gửi một yêu cầu đến dịch vụ để cập nhật một bản ghi JSON với khóa chính khớp với giá trị khoá đầu vào, và dữ liệu cập nhật được xác định như là dữ liệu đầu vào ở khuôn dạng JSON. Nó cũng sẽ gọi ra hàm gọi ngược response để xác nhận cập nhật đó khi giao dịch hoàn tất.
  • deleteDocument cung cấp khả năng gửi một yêu cầu đến dịch vụ để cập nhật một bản ghi JSON với khóa chính khớp với giá trị khoá đầu vào, và dữ liệu cập nhật được xác định như là dữ liệu đầu vào ở khuôn dạng JSON. Nó cũng sẽ gọi ra hàm gọi ngược response để xác nhận cập nhật đó khi giao dịch hoàn tất.
  • displayJSONobj là một hàm trừu tượng JavaScript mang lại một móc treo cho các nhà phát triển để cung cấp các cách tiếp cận khác nhau để biểu hiện các kết quả cuộc gọi trong trình duyệt.
  • response là một hàm có thể xử lý các giá trị trả về mà không phải là JSON. Nó đi theo một chiến lược tương tự như displayJSONobj bằng cách chờ các nhà phát triển viết các triển khai thực hiện riêng của chính họ đè lên hàm đó.

Các hàm nói trên gọi hàm doPOST để đệ trình các yêu cầu của chúng. Hàm doPOST chờ đợi lệnh truy vấn của dịch vụ, các giá trị đầu vào của truy vấn, và một hàm gọi ngược để xử lý kết quả trả về từ các dịch vụ đó. Nó sử dụng các thông số đầu vào này để xây dựng các cuộc gọi gadgets.io.makeRequest đến các dịch vụ. gadgets.io.makeRequest là một hàm các tiểu trình OpenSocial cung cấp việc hỗ trợ cho các tiểu trình để nhận dữ liệu từ và gửi dữ liệu đến các trang web bên thứ ba. Chữ ký của nó trông giống như thế này: gadgets.io.makeRequest(url, callback, opt_params)

Các thông số là:

  • url - Một chuỗi ký tự chứa URL của trang web mà bạn muốn gửi yêu cầu đến. Bạn có thể thấy rằng để xây dựng URL thì hàm doPOST lấy ra hai chuỗi ký tự từ đối tượng prefs bằng cách sử dụng phương thức getString. (Các thông số, pureXMLHostAddresscontextRoot, tham chiếu đến các tên phần tử trong định nghĩa tiểu trình, chúng tôi sẽ trình bày trong phần tiếp theo.) Hai chuỗi ký tự này được nối với /query/ và tên lệnh (insert, getDocumentByKey, update, delete, v.v...). Thí dụ, khi hàm insertJSON() gọi doPOST, URL là:
    http://xmlim.watson.ibm.com:9080/JSONUniversalServices/query/insert
  • callback - Một tham chiếu đến một hàm mà sẽ được gọi khi yêu cầu trả về kết quả. Thí dụ, response là một hàm gọi ngược hiển thị trạng thái của một giao dịch, và displayJSONobj là một hàm gọi ngược hiển thị đối tượng JSON được trả về hoặc một thông báo nếu đối tượng đó rỗng.
  • opt_params - Một đối tượng JavaScript chứa các thông số bổ sung cho cuộc gọi (phương thức HTTP và dữ liệu POST). Chúng ta đặt phương thức HTTP yêu cầu là gadgets.io.MethodType.POST để cho biết nó là một phương thức POST. Chúng tôi cũng chuyển dữ liệu gửi lên trong đối tượng postdata (được chỉ rõ như là một đối tượng chứa các cặp khóa/giá trị bằng cách sử dụng gadgets.io.encodeValues() để định dạng đầu vào args).

Hãy ghi lưu Liệt kê 1 dưới tên là PureJSON.js. Bạn sẽ xây dựng định nghĩa tiểu trình và nạp tệp tin này trong bước tiếp theo.

Định nghĩa tiểu trình OpenSocial

Lúc này bạn đã có JavaScript cần thiết, bạn sẽ tạo ra định nghĩa tiểu trình.

Tạo ra một tài liệu XML định nghĩa tiểu trình

Bạn cần một định nghĩa tiểu trình đơn giản. Liệt kê 2 cung cấp định nghĩa tiểu trình mẫu. Mỗi định nghĩa tiểu trình được bao bọc trong thẻ <Module>. <ModulePrefs> xác định thông tin và tính năng cơ bản của tiểu trình này.

Liệt kê 2. Định nghĩa XML cho tiểu trình OpenSocial
<?xml version="1.0" encoding="UTF-8"?>
<Module>
 <ModulePrefs title="Universal Services">
   <Require feature="opensocial-0.8"/>
   <Require feature="dynamic-height"/>
   <Require feature="minimessage"/>
 </ModulePrefs>
 <UserPref name="pureXMLHostAddress" 
 	  display_name="PureXML Host Address" 
 	  default_value="xmlim.watson.ibm.com:9080"/>
 <UserPref name="contextRoot" 
 	  display_name="Context Root" 
 	  default_value="JSONUniversalServices"/>

 <Content type="html">
 <![CDATA[
	<!-- Note: We will add more code and expand this section later  -->
  ]]>
 </Content>
</Module>

Điều đầu tiên bạn sẽ để ý thấy trong định nghĩa tiểu trình là thuộc tính <title> của phần tử <ModulePrefs>. Bạn có thể quy định các thuộc tính xác định thông tin cho tiểu trình như tiêu đề, tác giả, thư điện tử, v.v.... Nhằm phục vụ cho bản trình diễn này, chúng tôi sẽ chỉ sử dụng thuộc tính title. Tuy nhiên điều quan trọng là cần lưu ý rằng một số thùng chứa đòi hỏi các thuộc tính nhất định phải được cung cấp để triển khai sống (live). Bạn sẽ cần tham khảo tài liệu của nhà phát triển nền để tìm thông tin này.

Bạn cũng sẽ cung cấp các đặc tính mà tiểu trình đòi hỏi. Tiểu trình mẫu sẽ nạp các đặc tính sau đây:

  • opensocial-0.8 - Tiểu trình này sử dụng các API cài đặt OpenSocial version 0.8 và do đó nó có thể được triển khai trên các thùng chứa có hỗ trợ đặc tả OpenSocial v0.8.
  • dynamic-height - Với đặc tính này, nhà phát triển tiểu trình có khả năng thay đổi lại kích thước chiều cao tiểu trình khi nội dung được thêm vào hoặc loại bớt. Đặc tính này được gọi ra khi bạn hiển thị hoặc loại bỏ các thông báo giao dịch DB2 trong tiểu trình.
  • minimessage - Đặc tính này cung cấp một tập hợp các API để tạo và hiển thị các thông báo cho những người sử dụng trong tiểu trình. Chúng ta sử dụng minimessage để tạo ra các thông báo tình trạng giao dịch DB2 trong thí dụ này.

Bạn cũng đã định nghĩa một tập hợp các sở thích của người sử dụng (<UserPref>) để thiết lập động điểm cuối Các Dịch vụ Phổ dụng pureXML và đường dẫn ngữ cảnh của ứng dụng mà tiểu trình sẽ được triển khai lên. Các phần tử <UserPref> đã định nghĩa được trưng ra như là đầu vào của người sử dụng trong giao diện tiểu trình khi nó được biểu hiện. Người sử dụng sau đó có thể biên tập và sửa đổi các thiết lập này một cách phù hợp. Lưu ý rằng thuộc tính name của các phần tử <UserPref> ấy cũng chính là các tên được sử dụng trong hàm JavaScript doPOST trong Liệt kê 1 để nhận các chuỗi ký tự đã dùng để xây dựng URL của điểm cuối.

Thứ tư, phần nội dung <Content> định nghĩa kiểu nội dung của tiểu trình là HTML. Trong phần CDATA (dữ liệu ký tự), bạn định nghĩa chính nội dung của tiểu trình, ở đây một bảng HTML được tạo ra để nắm giữ đầu vào của người sử dụng, kết hợp với minimessage, các sở thích của người sử dụng, và các hàm JavaScript để trở thành một tiểu trình đang chạy. Bạn sẽ mở rộng phần này trong bước tiếp theo để xây dựng một trình khách kết nối với các dịch vụ pureXML.

Thêm nội dung vào tiểu trình

Trong phần CDATA của định nghĩa tiểu trình mô tả trong bước trước đây, bây giờ hãy bổ sung thêm bảng HMTL mẫu và các hàm JavaScript để nắm giữ đầu vào và các hành động của người sử dụng.

Đầu tiên, thêm phiếu định kiểu sẽ dùng trong bảng HTML như trong Liệt kê 3.

Liệt kê 3. Phiếu định kiểu được sử dụng cho bảng
  <style type="text/css">
   table.layout {border:0; width:50%;}
   td.green {background-color:#BFFF80; 
      font-family:sans-serif, verdana;}      
   td.white {background-color:#FFFFFF; 
      font-family:sans-serif, verdana;}      
   th.green {background-color:#BFFF80; 
      font-family:sans-serif, verdana;}   
   th.white {background-color:#FFFFFF; 
      font-family:sans-serif, verdana;}   
   td.row-bright{background-color:#FFFFBF; 
      font-family:sans-serif, verdana; 
      text-align:center;}
   td.row-dark {background-color:#FFFF8C; 
      font-family:sans-serif, verdana; 
      text-align:center;}
   tr.row-bright {background-color:#FFFFBF; 
      font-family:sans-serif, verdana;}
   tr.row-dark {background-color:#FFFF8C; 
      font-family:sans-serif, verdana;}
   tr.empty {background-color:#FFFFFF; 
      height: 10px;}
   tr.empty-small {background-color:#FFFFFF; 
      height: 5px;}
  </style>

Thứ hai, bao gồm thêm tệp tin JavaScript, PureJSON.js từ Liệt kê 1. Vào lúc tiểu trình được nạp, PureJSON.js sẽ được gộp vào trang này, làm cho tất cả các hàm yêu cầu POST sẵn dùng đối với các hành động trong bảng HTML.

Liệt kê 4. Nạp tệp tin JavaScript
    <script type="text/javascript" src="./PureJSON.js"></script>

Thứ ba, bổ sung một thẻ <script> khác như trong Liệt kê 5. Mỗi hàm JavaScript khớp với một hành động của người sử dụng khai báo trong bảng HTML (mà bạn sẽ định nghĩa trong phần tiếp theo), và gọi một trong các hàm được định nghĩa trong PureJSON.js từ Liệt kê 1. Khi khối mã này được nạp, một đối tượng minimessage được tạo ra bằng cách sử dụng new gadgets.MiniMessage(_MODULE_ID_). Hàm gadgets.util.registerOnLoadHandler(gadgets.window.adjustHeight), nằm ở dưới cùng của thẻ, được gọi để đăng ký tiểu trình với thùng chứa OpenSocial, báo cho nó sửa đổi khung cho vừa với nội dung tiểu trình vào lúc biểu hiện. Trong phạm vi thẻ <script> này, chúng ta cũng viết đè lên các hàm responsedisplayJSONobj để hiển thị kết quả truy vấn cho người sử dụng.

Liệt kê 5. Bổ sung các hàm tiểu trình
    <script type="text/javascript" src="./PureJSON.js"></script>   

    <script type="text/javascript">

    var msg = new gadgets.MiniMessage(__MODULE_ID__);

    function displayJSONobj(obj)	{
      var str = "The returned record is empty, it might not exist";
      if(obj.text!=""){
      	str = obj.text;
      }
      msg.createDismissibleMessage(str);
      gadgets.window.adjustHeight();
    };

    function callGetJSONDoc()	{
      getJSONDocumentByKey(document.getElementById("key1").value);
    };

    function getJSONDocumentByKeyReturn(obj)	{
      var str = obj.text;
      msg.createDismissibleMessage(str);
      gadgets.window.adjustHeight();
    };

    function callInsertJSON()	{
      insertJSON(document.getElementById("key2").value,
         document.getElementById("document1").value);
    };

    function callUpdateJSON()	{
      updateJSON(document.getElementById("key3").value, 
         document.getElementById("document2").value);
    };
    
    function callDeleteDoc()	{
      deleteDocument(document.getElementById("key4").value);
    };
    
   function response(obj)	{
     var str = gadgets.json.parse(gadgets.util.unescapeString(obj.text));

  if(str.updateCount == 1){
    var successMsg = msg.createDismissibleMessage(
        "Received returned code = 1. Transaction successful!");
    successMsg.style.color = "green";
  }
  else	{
   var failMsg = msg.createDismissibleMessage(
    "Did not receive returned code = 1. Transaction may have failed!");
      failMsg.style.color = "red";
  }
  gadgets.window.adjustHeight();
 };

  gadgets.util.registerOnLoadHandler(gadgets.window.adjustHeight);

  </script>

Cuối cùng, bổ sung bảng HTML này để nắm giữ đầu vào và hành động của người sử dụng. Liệt kê 6 hiển thị mã HTML. Hãy ghi lưu định nghĩa tiểu trình với tên JSONclient.xml. Ảnh chụp màn hình trong Hình 1 là biểu hiện của bảng này.

Liệt kê 6. Bảng HTML
<table class="layout" cellspacing="2">
  <tr>
    <th class="green">Web Service</th>
    <th class="green" colspan="2">Input</th>
    <th class="green">Action</th>
  </tr>
  <tr class="row-bright">
    <td>getPrimaryKeys</td>
    <td colspan="2" align="center">none</td>
    <td align="center">
      <input type="submit" value="Invoke" onClick="getPrimaryKeys()"/>
    </td>
  </tr>
 <tr class="row-dark" >
  <td>getJSONDocumentByKey</td>
  <td align="right">ID:</td>
  <td align="center"><input type="text" id="key1" size="40" /></td>
  <td align="center">
   <input type="submit" value="Invoke" onClick="callGetJSONDoc()"/>
  </td>
 </tr>
 <tr class="row-bright">
   <td rowspan="2">insertJSON</td>
   <td align="right">ID:</td>
   <td align="center"><input type="text" id="key2" size="40" /></td>
   <td align="center" rowspan="2">
     <input type="submit" value="Invoke" onClick="callInsertJSON()"/>
   </td>
 </tr>
  <tr class="row-bright">
    <td align="right">Document:</td>
    <td align="center">
      <textarea id="document1" cols="30" rows="5" ></textarea>
    </td>
  </tr>
  <tr class="row-dark" >
    <td rowspan="2">updateJSON</td>
    <td align="right">ID:</td>
    <td align="center"><input type="text" id="key3" size="40" /></td>
    <td rowspan="2" align="center">
	    <input type="submit" value="Invoke" onClick="callUpdateJSON()"/>
    </td>
  </tr>
  <tr class="row-dark">
    <td align="right">Document:</td>
    <td align="center">
     <textarea id="document2" cols="30" rows="5" ></textarea>
    </td>
  </tr>
  <tr class="row-bright">
    <td>deleteDocument</td>
    <td align="right">ID:</td>
    <td align="center"><input type="text" id="key4" size="40" /></td>
    <td align="center">
      <input type="submit" value="Invoke" onClick="callDeleteDoc()"/>
    </td>
  </tr>
</table>

Triển khai và kiểm thử

Bây giờ bạn sẽ triển khai tiểu trình và sau đó là kiểm thử tiểu trình đó.

Triển khai tiểu trình

Để kiểm thử Các Dịch vụ Phổ dụng mới này, bạn chỉ cần triển khai cả PureJSON.js và JSONclient.xml lên một máy chủ HTTP. Khi mà các tập tin đã sẵn sàng thông qua một URL, thùng chứa OpenSocial sẽ có thể lấy ra đặc tả tiểu trình và biểu hiện nội dung tương ứng. Một máy chủ OpenSocial có một số tùy chọn đối với cả triển khai cục bộ đang sẵn có thông qua các dự án mã nguồn mở cũng như các nền hệ thống chủ chứa bên ngoài. Để đơn giản hoá, bạn sẽ triển khai tiểu trình mẫu này lên hộp cát (sandbox) iGoogle, là thùng chứa OpenSocial.

  1. Đăng nhập http://www.google.com/ig/sandbox
  2. Khi đã đăng nhập, chuyển đến liên kết Add stuff trong phần trên bên phải của trang. Thao tác này sẽ liên kết đến một trang cung cấp các khả năng tìm kiếm các tiểu trình hiện đã đăng ký. Xem Hình 2. Chú ý rằng URL phải truy cập được từ Web. Thí dụ, nếu bạn đang chạy phía sau một tường lửa, thì bản triển khai của bạn có thể không làm việc vì thùng chứa OpenSocial, trong trường hợp này là iGoogle, không thể tải và xử lý được định nghĩa tiểu trình, (Xem bản lớn hơn của Hình 2).
    Hình 2. Bổ sung các ứng dụng cho hộp cát iGoogle của bạn
    Màn hình bắt giữ iGoogle sandbox để bạn có thể thêm các ứng dụng vào đó
  3. Tiếp theo bạn cần bổ sung tiểu trình mới này bằng URL. Trong phần dẫn hướng bên trái, bạn sẽ thấy một liên kết đến Add feed or gadget (Thêm nguồn cấp hoặc tiểu trình). Liên kết này sẽ mở ra một hộp thoại mà bạn sẽ cần để nhập vào URL đầy đủ cho JSONclient.xml. Xem Hình 3.
    Hình 3. Bổ sung một tiểu trình OpenSocial cho hộp cát iGoogle
    Màn hình bắt giữ trường thêm một OpenSocial gadget tới iGoogle sandbox
  4. Bây giờ bạn sẽ có thể quay lại trang chủ iGoogle của bạn và xem tiểu trình vừa được bổ sung trên trang của bạn.

Kiểm thử tiểu trình

Hình 4 cho thấy tiểu trình đã được biểu hiện trong iGoogle.

Hình 4. Tiểu trình được biểu hiện trong iGoogle
Màn hình bắt giữ gadget trải qua thử nghiệm sau khi triển khai
  1. Để biên tập các thiết lập cài đặt tiểu trình, chọn biểu tượng hình tam giác để mở danh sách thả xuống các tùy chọn. Chọn Edit settings.
  2. Cập nhật địa chỉ máy chủ chứa pureXML và đường dẫn gốc ngữ cảnh để chỉ đến các dịch vụ phổ dụng của bạn.
  3. Trong trường getJSONDocumentByKey, nhập vào một khoá tài liệu để lấy ra một bản ghi JSON, sau đó nhấn Invoke. Để kiểm thử các giao dịch khác, lặp lại bước này.
  4. Minimessage hiển thị kết quả. Để loại bỏ các thông báo, chọn x ở cuối hàng này.

Kết luận

Trong bài này, chúng tôi đã cung cấp một tập hợp mã mẫu, nó di trú ứng dụng Web kiểm thử truyền thống thành một ứng dụng khả chuyển và có thể cấu hình được, có thể triển khai nhanh chóng đến một số nền trên Web. Mặc dù ứng dụng tự nó tương đối đơn giản, mẫu tham khảo này có thể được sử dụng để lắp ráp và làm bản mẫu các ứng dụng mới một cách nhanh chóng. Trình khách tiểu trình OpenSocial cung cấp cho người sử dụng một cách tiện lợi để kết nối động với bất kỳ Các dịch vụ Phổ dụng pureXML nào thông qua sự hỗ trợ của UserPrefs. Với POST makeRequest, các nhà phát triển tiểu trình chỉ cần tạo ra các truy vấn kết nối với các dịch vụ để thực hiện các giao dịch cơ sở dữ liệu của mình. Người tiêu dùng tiểu trình có thể bổ sung tiểu trình vào bất kỳ thùng chứa OpenSocial nào không phân biệt vị trí nơi nó được triển khai vật lý và chứa ở đó, tránh cho người tiêu dùng không phải quản lý nội dung và cơ sở hạ tầng.


Các tải về

Mô tảTênKích thước
JavaScript POST request functionsPureJSON.js.zip1KB
OpenSocial gadget definition XMLJSONclient.xml.zip2KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Information Management, Nguồn mở, SOA và dịch vụ Web
ArticleID=618686
ArticleTitle=Xây dựng một ứng dụng pureXML và JSON, Phần 3: Tạo ra các tiểu trình OpenSocial dùng cho pureXML
publish-date=01222011