Tại Google, tiện ích là các ứng dụng HTML và JavaScript có thể nhúng vào các trang web và các ứng dụng khác, bao gồm cả Sites. Các tiện ích này có thể đưa nội dung động và bên ngoài vào trang web của bạn, chẳng hạn như các ứng dụng thu nhỏ và danh sách dựa trên cơ sở dữ liệu, được kết hợp với văn bản và hình ảnh để mang lại trải nghiệm liền mạch cho người dùng.
Mỗi trang Sites là một vùng chứa tiện ích tiềm năng. Hơn nữa, Sites còn cung cấp một API dữ liệu có thể được dùng cùng với các tiện ích để tạo ra những ứng dụng mạnh mẽ. Tức là là một nhà phát triển tiện ích, bạn có thể tận dụng API Sites cũ để tạo các công cụ hấp dẫn cho các nhà phát triển web khác và đối tượng của họ, cũng như cho mục đích sử dụng của riêng bạn.
Khi bạn tạo một tiện ích cho Sites, tiện ích đó sẽ được cung cấp cho hàng triệu người dùng đang hoạt động. Chỉ cần gửi tiện ích của bạn cho chúng tôi và tiện ích đó sẽ xuất hiện ở nơi người dùng có thể dễ dàng duyệt qua, định cấu hình và thêm tiện ích của bạn vào Sites của họ.
Giờ bạn đã biết {sites_name_short} là một nền tảng phân phối tuyệt vời cho tiện ích của bạn, bạn còn chần chừ gì nữa? Bắt đầu tạo tiện ích cho Sites ngay bây giờ!
Tổng quan về tiện ích Sites
Nhìn chung, các tiện ích là những tiện ích nhỏ giúp tạo hoặc lấy thông tin bên ngoài vào các trang web. Nói một cách đơn giản, tiện ích là một tệp .xml nhỏ dùng để truy xuất thông tin và có thể đưa thông tin đó lên nhiều trang web cùng một lúc. Trong Sites, việc đưa vào một tiện ích sẽ dẫn đến một iframe đóng vai trò là đường dẫn cho thông tin bên ngoài này. Một số tiện ích đơn giản hơn như các iframe truyền qua thông tin từ một trang web khác.
Các tiện ích nâng cao khác thu thập nội dung động và cung cấp cho các ứng dụng tương tác trong các trang web của bạn. Xem Tiện ích mẫu.
Tiện ích bao gồm các thành phần sau:
- Tệp thông số tiện ích – Tệp .xml bao bọc các hàm HTML và JavaScript.
- Trang vùng chứa – Trang web nơi tiện ích được chèn, trong trường hợp này là trang web tạo bằng Google Sites.
- Nguồn dữ liệu bên ngoài – Đây là không bắt buộc và có thể nằm ở cùng một vị trí với tệp .xml nhưng thường được thông số tiện ích gọi qua HTTP để cung cấp kết quả.
Tất cả người xem trang web đều có thể sử dụng các tiện ích được tạo cho Sites. Các thành phần này có xu hướng tương tác, tập trung vào việc thu hút nội dung động thay vì phần trình bày và được thiết kế để bổ sung cho nội dung của trang web.
Tiện ích lịch là một ví dụ hay về sự khác biệt này. Theo mặc định, tiện ích lịch được cá nhân hoá trong có thể hiển thị lịch của người dùng đã đăng nhập, trong khi tiện ích lịch trong Sites có thể cho phép cộng tác viên chọn từ nhiều lịch khác nhau theo vị trí cụ thể.
Tiện ích Sites cho phép bạn trình bày nhiều thông tin từ các nguồn bên ngoài (chẳng hạn như biểu đồ trực tiếp từ các trang tổng quan về hiệu suất riêng biệt nhưng có liên quan) trên một trang cùng với văn bản giải thích được xuất bản trực tiếp trong Sites. Điều này giúp tiết kiệm không gian hình ảnh trong khi thu thập các thông tin khác nhau về cùng một chủ đề trong cùng một chế độ xem. Các tiện ích cũng cho phép bạn đưa vào nội dung động mà quy trình kiểm tra bảo mật của Sites sẽ ngăn chặn.
Cảnh báo: Các tiện ích được tạo bằng API tiện ích cũ có thể hoạt động trong Sites nhưng không được hỗ trợ chính thức. Các tiện ích tích hợp sẵn và tiện ích dựa trên nguồn cấp dữ liệu cũng không được hỗ trợ tương tự. Do đó, bạn nên xây dựng tất cả tiện ích trên Sites bằng cách sử dụng tiện ích.* hiện tại API. Hãy xem bài đăng này để biết nội dung giải thích:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html
Tiện ích mẫu
Dưới đây là một Bao gồm tiện ích đơn giản nhưng phổ biến, ngoài việc cung cấp iframe để truyền qua nội dung web khác:
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Include gadget (iframe)" title_url="http://sites.google.com/"
description="Include another web page in your Google Site"
thumbnail="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-thumb.png"
screenshot="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-ss.png"
height="800" width="600" author="Google">
<Require feature="dynamic-height"/>
</ModulePrefs>
<UserPref name="iframeURL" display_name="URL to content" required="true"/>
<UserPref name="scroll" display_name="Display scrollbar" default_value="auto" datatype="enum">
<EnumValue value="auto" display_value="Automatic"/>
<EnumValue value="no" display_value="No"/>
<EnumValue value="yes" display_value="Yes"/>
</UserPref>
<Content type="html" view="default,canvas">
<div id='dest'><img src="http://www.google.com/ig/images/spinner.gif"></div>
<script type="text/javascript">
gadgets.util.registerOnLoadHandler(doRender);
function doRender(){
// setup variables
var prefs = new gadgets.Prefs();
var iframeURL = prefs.getString('iframeURL');
var scroll = prefs.getString('scroll');
var height = 800;
var width = 600;
if (gadgets.window) {
var viewport = gadgets.window.getViewportDimensions();
if (viewport.width) {
var width = viewport.width;
}
if (viewport.height) {
var height = viewport.height;
}
}
var iframe = document.createElement('iframe');
iframe.setAttribute('width', width + 'px');
iframe.setAttribute('height', height + 'px');
iframe.setAttribute('frameborder','no');
if(scroll){
iframe.setAttribute('scrolling', scroll);
}
iframe.setAttribute('src', iframeURL);
// set the slideshow to the placeholder div
var dest = document.getElementById('dest');
dest.innerHTML = '';
dest.appendChild(iframe);
}
</script>
</Content>
</Module>
Hãy xem phần Bắt đầu: tiện ích.* API để xem mô tả đầy đủ về thẻ tiện ích và nội dung dự kiến.
Lưu trữ tiện ích của bạn
Bất kể tiện ích của bạn làm gì, các tệp của tiện ích đó phải nằm trên World Wide Web để có thể tìm thấy và sử dụng được. Mọi vị trí trực tuyến có thể truy cập qua HTTP mà không cần xác thực sẽ truy cập được. Chỉ cần nhớ rằng, tiện ích của bạn sẽ phải được xuất bản trong thư mục công khai để được chọn. Nếu không, người dùng phải nhúng chế độ xem bằng cách chèn trực tiếp URL của chế độ xem.
Dưới đây là các tuỳ chọn lưu trữ tiện ích:
- App Engine – Có thể lưu trữ tất cả các tệp mà tiện ích của bạn yêu cầu. Bạn cần thực hiện một số bước thiết lập, cụ thể là tạo dự án và tải tệp lên. Tuy nhiên, chiến dịch này sẽ dễ dàng mở rộng sang một số lượng lớn người dùng. Bạn có thể tạo một ứng dụng để lưu trữ tất cả các tiện ích và một ứng dụng khác để phân phối các tệp tĩnh, trong đó có một tệp app.yaml tương tự như:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
Nếu đặt tất cả các tệp tiện ích vào thư mục tĩnh, bạn có thể chỉnh sửa các tệp này trong thư mục cục bộ và triển khai cho App Engine mỗi khi thực hiện thay đổi. Nếu bạn có tệp /static/customize.xml, URL của tệp sẽ là: http://<your-app-name>.appspot.com/static/widget.xml
- Bất kỳ vị trí trực tuyến nào bạn chọn – Hoàn toàn thuộc quyền kiểm soát của bạn và cũng hoàn toàn chịu trách nhiệm của bạn. Thời gian ngừng hoạt động trên máy chủ có thể làm người dùng các tiện ích của bạn bị ngừng hoạt động.
Tạo tiện ích của bạn
Các tiện ích chỉ là HTML và JavaScript, Flash hoặc Silverlight (không bắt buộc) được bao bọc trong XML. Hướng dẫn dành cho nhà phát triển tiện ích cung cấp tất cả thông tin chi tiết cần thiết để tạo tiện ích của riêng bạn. Ngoài ra, các mẫu OpenSocial có thể được dùng để tạo nhanh các ứng dụng xã hội trong các tiện ích.
Dưới đây là các bước cấp cao để tạo tiện ích cho Sites:
- Quyết định nơi tiện ích của bạn sẽ được lưu trữ. Xem phần Lưu trữ tiện ích của bạn để biết mô tả về các tùy chọn của bạn.
- Tạo một tệp .xml mới. Tệp này sẽ đóng vai trò là thông số kỹ thuật của bạn bằng cách sử dụng trình chỉnh sửa văn bản bạn chọn.
- Quyết định loại nội dung (HTML hoặc URL) rồi chỉ định loại nội dung đó trong tệp .xml của tiện ích như sau:
<Content type="html">
Thường thì định dạng này sẽ là HTML, giả định rằng tất cả nội dung đều được cung cấp trực tiếp trong tệp .xml. Nhưng nếu bạn định cung cấp nội dung trong một tệp riêng, hãy sử dụng loại nội dung URL. Hãy xem bài viết Chọn loại nội dung để biết nội dung mô tả chi tiết về sự khác biệt giữa các loại nội dung đó. - Tạo nội dung trong tệp .xml của tiện ích hoặc trong các tệp riêng biệt được gọi theo thông số kỹ thuật. Xem phần Xem tiện ích mẫu để biết các cách kiểm tra các tiện ích hiện có.
- Xác định các lựa chọn ưu tiên cơ bản cho tiện ích mà người dùng có thể thay đổi. Xem Xác định tùy chọn người dùng để được hướng dẫn. Để cung cấp cấu hình nâng cao hơn, hãy xem phần Cho phép cấu hình người dùng nâng cao.
- Xác định các tuỳ chọn mô-đun mà chỉ tác giả tiện ích mới có thể thay đổi. Xem phần Xác định tuỳ chọn tiện ích để biết thêm chi tiết.
- Kiểm tra tiện ích. Xem phần Kiểm thử tiện ích của bạn để biết hướng dẫn.
Nhúng tiện ích của bạn
Bạn có thể nhúng các tiện ích vào các trang Sites bằng cách chọn tiện ích đó từ thư mục tiện ích Sites (được đồng bộ hoá với thư mục tiện ích iGoogle) hoặc bằng cách trực tiếp đưa vào URL của tiện ích đó.
Để nhúng tiện ích trong Sites:
- Truy cập trang Trang web chứa tiện ích mới.
- Mở trang để chỉnh sửa.
- Chọn Chèn > Tiện ích khác.
- Tìm tiện ích, chọn tiện ích từ các danh mục bên trái hoặc nhấp vào Thêm tiện ích theo URL rồi dán URL vào tệp .xml của bạn. Sau đó nhấp vào Thêm.
Lưu ý: Bạn có thể dùng tính năng Thêm tiện ích bằng phương thức URL này để nhúng các tiện ích từ iGoogle và bất kỳ nơi nào khác trên mạng. - Chỉ định kích thước của tiện ích, chọn trong số các chế độ cài đặt có sẵn rồi nhấp vào OK. Tiện ích này sẽ được thêm vào trang của bạn.
- Hãy lưu trang để xem và kiểm tra tiện ích của bạn trên trang web.
Kiểm tra tiện ích của bạn
Sau khi tạo tiện ích, bạn nên kiểm thử kỹ lưỡng tiện ích trước khi sử dụng và cho phép người khác làm tương tự. Kiểm tra tiện ích của bạn theo cách thủ công bằng cách tạo một hoặc nhiều trang web kiểm tra trên Google Sites và nhúng tiện ích của bạn. Xem phần Nhúng tiện ích để biết các bước chính xác. Chức năng và giao diện của tiện ích phụ thuộc vào trang web chứa tiện ích đó. Do đó, cách tốt nhất để gỡ lỗi tiện ích của bạn là kiểm tra tiện ích đó trong ngữ cảnh của một trang web thực tế trên Google Sites. Thử chuyển đổi giữa nhiều chủ đề Sites khác nhau để đảm bảo tiện ích của bạn hiển thị chính xác trong mỗi chủ đề.
Khi kiểm thử tiện ích, chắc chắn bạn sẽ phát hiện lỗi và cần sửa tệp .xml của tiện ích. Bạn nên tắt tính năng lưu tiện ích vào bộ nhớ đệm trong khi chỉnh sửa XML. Nếu không, các thay đổi của bạn sẽ không xuất hiện trên trang. Thông số của tiện ích được lưu vào bộ nhớ đệm trừ khi bạn yêu cầu Trang web không làm vậy. Để bỏ qua bộ nhớ đệm trong quá trình phát triển, hãy thêm đoạn mã này vào cuối URL trang web chứa tiện ích (không phải URL của tệp .xml thông số tiện ích):
?nocache=1
Sites cung cấp giao diện người dùng chuẩn để thêm và định cấu hình các tiện ích. Khi bạn thêm một tiện ích, tiện ích đó sẽ hiển thị bản xem trước và cho thấy mọi tham số UserPref có thể định cấu hình. Thử nghiệm việc cập nhật nhiều giá trị cấu hình và thêm tiện ích vào trang web thử nghiệm. Xác nhận rằng tiện ích của bạn hoạt động như mong đợi trên chính trang web đó. Bạn nên kiểm tra để đảm bảo rằng
quản trị viên trang web có thể định cấu hình chính xác cho bất kỳ UserPref nào mà bạn đã xác định.
Sau đó, tham khảo phần Chuẩn bị cho việc xuất bản trên trang Xuất bản Tiện ích của bạn để thực hiện các thử nghiệm khác.
Cho phép cấu hình người dùng nâng cao
Tất cả tiện ích đều có thể cung cấp khả năng đặt các tuỳ chọn cơ bản của người dùng. Bạn có thể thực hiện việc này thông qua phần UserPref của tệp thông số tiện ích. Các lỗi này thường ảnh hưởng đến kích thước, thanh cuộn, đường viền, tiêu đề và các chế độ cài đặt dành riêng cho tiện ích, như mô tả trong ảnh chụp màn hình dưới đây:
Tuy nhiên, trong nhiều trường hợp, các tiện ích được hưởng lợi từ những lựa chọn ưu tiên nâng cao hơn so với những thành phần UserPref tiêu chuẩn. Các lựa chọn ưu tiên thường cần bao gồm các tính năng như logic kinh doanh tuỳ chỉnh, quy trình xác thực hoặc bộ chọn. Giao diện được tạo từ các phần của tiện ích UserPref hỗ trợ một số ít kiểu dữ liệu (chuỗi, enum, v.v.). Vì vậy, không thể xác thực dữ liệu đầu vào như URL hoặc ngày.
Hơn nữa, trong các vùng chứa như iGoogle nơi trình xem và trình chỉnh sửa giống nhau, tác giả tiện ích có thể mở rộng cấu hình dưới dạng một phần của chế độ xem chuẩn. Trong Sites, người xem không phải lúc nào cũng là người chỉnh sửa, do đó tác giả tiện ích không thể đảm bảo người dùng xem tiện ích có quyền truy cập để cập nhật các tùy chọn. Các vùng chứa trên mạng xã hội như Sites không thể cho phép bất kỳ người dùng nào sửa đổi các tùy chọn, mà chỉ có tác giả.
Trong Sites, giao diện cơ bản của lựa chọn ưu tiên về tiện ích do UserPref tạo có thể được thay thế bằng chế độ xem cấu hình. Tại đây, bạn có thể cung cấp nhiều lựa chọn ưu tiên và loại dữ liệu bổ sung, như trong ảnh chụp màn hình dưới đây:
Chế độ xem cấu hình xuất hiện thay cho chế độ cài đặt của UserPref tại thời điểm chèn hoặc thời điểm chỉnh sửa và cho phép bạn thiết lập lựa chọn ưu tiên của người dùng thông qua giao diện tuỳ chỉnh. Và bạn có thể có các phần tử đầu vào tuỳ chỉnh, chẳng hạn như để chọn một vị trí trên bản đồ thay vì nhập toạ độ bản đồ.
Nhà phát triển có thể sử dụng các API setprefs tiêu chuẩn để lưu các lựa chọn ưu tiên trong khung hiển thị này. Xem Tài liệu tham khảo XML về tiện ích và phần Lưu trạng thái trong bài viết Kiến thức cơ bản dành cho nhà phát triển để biết thêm chi tiết. Những khung hiển thị này cho phép ứng dụng vùng chứa cung cấp thông tin bổ sung về cấu hình và được thiết lập trong các tệp thông số kỹ thuật .xml của tiện ích theo sau phần UserPref với thẻ mở giống như:
<Content type="html" view="configuration" preferred_height="150">
Ví dụ: tiện ích news.xml cung cấp chế độ xem cấu hình ở trên có chứa phần sau:
<Content type="html" view="configuration" preferred_height="300">
<style type="text/css">
.config-options {
margin: 10px;
}
.label {
font-weight: bold;
width: 35%;
vertical-align: top;
}
.gray {
color:#666666;
}
html {
font-family:arial,sans-serif;
font-size:0.81em;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.5;
}
a:link, a:visited, a:active { text-decoration: none }
</style>
<img alt="Google Web Elements" src="http://www.google.com/webelements/images/web_elements_logo.gif"/>
<table class="config-options">
<tr>
<td align="left" class="label">Size:</td>
<td align="left">
<select id="size" onchange="Update()">
<option selected="selected" value="300x250">Medium rectangle (300x250)</option>
<option value="728x90">Leaderboard (728x90)</option>
</select>
</td>
</tr>
<tr>
<td align="left" class="label">Select sections:</td>
<td align="left">
<table>
<tbody><tr>
<td><input type="checkbox" onclick="Update()" id="sec_h" value="h"/> Top Stories</td>
<td><input type="checkbox" onclick="Update()" id="sec_w" value="w"/> World</td>
<td><input type="checkbox" onclick="Update()" id="sec_b" value="b"/> Business</td>
</tr><tr>
<td><input type="checkbox" onclick="Update()" id="sec_p" value="p"/> Politics</td>
<td><input type="checkbox" onclick="Update()" id="sec_n" value="n"/> Nation</td>
<td><input type="checkbox" onclick="Update()" id="sec_e" value="e"/> Entertainment</td>
</tr><tr>
<td><input type="checkbox" onclick="Update()" id="sec_t" value="t"/> Technology</td>
<td><input type="checkbox" onclick="Update()" id="sec_s" value="s"/> Sports</td>
<td><input type="checkbox" onclick="Update()" id="sec_m" value="m"/> Health</td>
</tr></tbody>
</table>
</td>
</tr>
<tr>
<td align="left" class="label">Or create one:</td>
<td align="left">
<input type="text" id="query" onchange="Update()"/>
<br/>
<span class="gray">Example: 2010 Olympics</span>
</td>
</tr>
<tr>
<td colspan="2">
<div id="preview" style="margin-top:10px;overflow:auto;width:100%;">
<iframe id="preview_ifr" frameborder="0" marginwidth="0" marginheight="0" border="0"
style="border:0;margin:0;"
scrolling="no" allowtransparency="true"></iframe>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
var prefs = new gadgets.Prefs();
function getSelectedTopics() {
var selected = [];
var topics = ['h', 'w', 'b', 'p', 'n', 'e', 't', 's', 'm'];
for (var i = 0; i < topics.length; i++) {
if (document.getElementById('sec_' + topics[i]).checked) {
selected.push(topics[i]);
}
}
return selected.join(',');
}
function setSelectedTopics(selected) {
if (selected && selected.length >= 0) {
var topics = selected.split(',');
for (var i = 0; i < topics.length; i++) {
document.getElementById('sec_' + topics[i]).checked = true;
}
}
}
function Update() {
var topic = getSelectedTopics();
var query = document.getElementById('query').value;
var size = document.getElementById('size').value;
var url = 'http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&' +
'format=SIZE&element=true';
var iframe = document.getElementById('preview_ifr');
url = url.replace(/SIZE/, size);
if (topic.length > 0) {
url += '&topic=' + topic;
}
if (query.length > 0) {
url += '&q=' + encodeURIComponent(query);
}
iframe.src = url;
if (size == '728x90') {
iframe.style.width = '728px';
iframe.style.height = '90px'
} else {
iframe.style.width = '300px';
iframe.style.height = '250px';
}
prefs.set('size', size);
prefs.set('topic', topic);
prefs.set('query', query);
gadgets.window.adjustHeight();
}
function Initialize() {
var size = '__UP_size__';
if (size.length > 0) {
document.getElementById('size').value = size;
}
var query = '__UP_query__';
if (query.length > 0) {
document.getElementById('query').value = query;
}
setSelectedTopics('__UP_topic__');
Update();
}
gadgets.util.registerOnLoadHandler(Initialize);
</script>
</Content>
Bạn có thể tìm thấy ví dụ này và các tiện ích khác dành riêng cho Sites có chế độ xem cấu hình tại đây:
https://www.gstatic.com/sites-gadgets/news/news.xml
http://gadgets.pardonmyzinger.org/static/qrcode.xml
https://www.gstatic.com/sites-gadgets/news/youtube_news.xml
Làm theo các phương pháp hay nhất cho tiện ích Sites
Người dùng trang web muốn trang web trông đẹp mắt trên web. Hãy làm theo các phương pháp hay nhất này để tiện ích của bạn kết hợp liền mạch với nhiều chủ đề dùng trong Sites. Xem Tổng quan về tiện ích để biết chi tiết về cách tạo tiện ích. Phần còn lại của phần này trình bày các nguyên tắc dành riêng cho các tiện ích Sites.
- Đừng đưa thông tin nhạy cảm vào thông số kỹ thuật hoặc tiêu đề của tiện ích vì công chúng có thể xem tiện ích của bạn. Ví dụ: Đừng thêm tên nội bộ của dự án.
- Để giảm thiểu chế độ hiển thị cho tiện ích của bạn, không gửi tiện ích tới thư mục tiện ích iGoogle hoặc bất kỳ dịch vụ danh sách công khai nào khác. Thay vào đó, hãy yêu cầu tất cả người dùng chỉ đưa dữ liệu đó vào bằng URL. Ngoài ra, bạn có thể tạo tiện ích kiểu URL (thay vì loại HTML thông thường chứa tất cả nội dung) chỉ gọi tệp khác cho nội dung của tiện ích. Với tuỳ chọn chuyển qua này, chỉ URL của tệp thứ hai được hiển thị. Xem Chọn phần Loại nội dung trong kiến thức Nguyên tắc cơ bản dành cho nhà phát triển để biết những khác biệt giữa tiện ích HTML và URL và phần Tiện ích ở chế độ công khai về Viết tiện ích riêng của bạn để biết những cách khác để che giấu tiện ích của bạn.
- Quan trọng nhất, hãy kiểm tra tiện ích của bạn trên nhiều trang web khác nhau. Sửa đổi màu nền, màu văn bản và kiểu phông chữ của trang web để đảm bảo tiện ích của bạn phù hợp với nhiều mẫu.