Tại Google, tiện ích là các ứng dụng HTML và JavaScript có thể nhúng vào web và các ứng dụng khác, bao gồm cả Sites. Các tiện ích này cung cấp khả năng đưa các dữ liệu bên ngoài và nội dung động trong 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, 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 cung cấp API dữ liệu có thể được sử dụng cùng bằng các tiện ích để tạo ra các ứng dụng mạnh mẽ. Điều đó có nghĩa là với vai trò là 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ọ, như hiệu quả cho mục đích sử dụng của bạn.
Khi bạn tạo một tiện ích cho Sites, tiện ích đó sẽ có sẵn cho hàng triệu người dùng người dù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 tại 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 Trang web.
Giờ bạn đã biết {sites_name_short} là nền tảng phân phối tuyệt vời cho tiện ích của bạn, những gì bạn đang chờ? Bắt đầu tạo tiện ích cho Sites ngay bây giờ!
Tổng quan về tiện ích Sites
Nói chung, tiện ích là những tiện ích nhỏ có chức năng tạo hoặc kéo thông tin bên ngoài vào trang web . Ở dạng đơn giản nhất, tiện ích là một tệp .xml nhỏ truy xuất thông tin bằng khả năng hiển thị quảng cáo trên nhiều trang web cùng một lúc. Trong Sites, bao gồm cả kết quả tiện ích trong iframe đóng vai trò là đường dẫn cho thông tin bên ngoài này. Một số tiện ích đã ngừng hoạt động hơn thế, 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 sẽ thu thập nội dung động và cung cấp cho các ứng dụng tương tác bên trong trang Sites của bạn. Xem Tiện ích mẫu.
Tiện ích bao gồm những thành phần sau:
- Tệp thông số kỹ thuật về tiện ích - Một 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 của Google.
- Nguồn dữ liệu bên ngoài – Đây không phải là yêu cầu 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ố kỹ thuật của tiện ích gọi qua HTTP để cung cấp kết quả.
Tiện ích dành cho Tất cả người xem của một trang web đều có thể sử dụng trang web. Chúng có xu hướng tương tác, tập trung vào việc kéo trong nội dung động chứ không phải khi trình bày và được thiết kế để bổ sung cho nội dung của của bạn.
Tiện ích lịch là một ví dụ điển hình cho sự khác biệt này. Một 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 theo mặc định trong khi tiện ích lịch trong Sites có thể cho phép cộng tác viên chọn trong số nhiều lịch dành riêng cho từng vị trí.
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 (ví dụ: các 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) trong một trang duy nhất cùng với nội dung giải thích được xuất bản trực tiếp trên Sites. Thao tác này giúp lưu không gian hình ảnh trong khi thu thập nhiều thông tin khác nhau về cùng một chủ đề trong cùng một quan điểm. Tiện ích cũng cho phép bạn đưa vào nội dung động mà lẽ ra sẽ bị chặn bởi các hoạt động kiểm tra bảo mật của Sites.
Cảnh báo: Tiện ích được xây dựng dựa trên cũ
API tiện ích có thể hoạt động trong Sites nhưng không được hỗ trợ chính thức. Tiện ích tích hợp và dựa trên nguồn cấp dữ liệu
tương tự cũng không được hỗ trợ. Do đó, Google khuyên bạn nên tạo tất cả các tiện ích Sites bằng cách sử dụng
tiện ích.* hiện tại API. Xem bài đăng này để được 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. Thao tác này chỉ cung cấp iframe để truyền qua nội dung khác trên web:
<?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>
Xem phần Bắt đầu: tiện ích.* API để biết 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à gì, các tệp của tiện ích đó phải nằm trên World Wide Web để được tìm thấy và đã sử dụng. 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ẽ làm. Chỉ cần nhớ, tiện ích của bạn sẽ phải được xuất bản trong một danh mục công khai để được chọn. Nếu không, người dùng phải nhúng tệp bằng cách chèn trực tiếp URL của tệp.
Dưới đây là các tuỳ chọn lưu trữ tiện ích của bạn:
- 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. 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 tiếp theo. Tuy nhiên, giải pháp này sẽ dễ dàng mở rộng cho 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ả tiện ích của mình và một ứng dụng khác để phân phối các tệp tĩnh, bao gồm một tệp app.yaml có dạng như sau:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
Nếu bạn đặt tất cả các tệp tiện ích vào thư mục tĩnh, khi đó bạn có thể chỉnh sửa các tệp trên thư mục cục bộ của mình và triển khai cho App Engine mỗi khi bạn thực hiện thay đổi. Nếu bạn có tệp /static/withgoogle.xml, URL của tệp sẽ là: http://<your-app-name>.appspot.com/static/EEA.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 nhưng cũng hoàn toàn chịu trách nhiệm. Thời gian ngừng hoạt động trên máy chủ của bạn có thể khiến người dùng tiện ích của bạn bị gián đoạn.
Xây dựng tiện ích của bạn
Các tiện ích chỉ là HTML và JavaScript (không bắt buộc) và JavaScript, Flash hoặc Silverlight đượ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ả chi tiết cần thiết để xây dựng 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.
Sau đây là các bước nâng 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 để hoạt động dưới dạng thông số kỹ thuật 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 và chỉ định loại nội dung đó trong tệp .xml của tiện ích, như sau:
<Content type="html">
Giao diện này hầu như luôn là HTML, giả định 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 tham khảo bài viết Chọn loại nội dung để xem thông tin mô tả đầy đủ về sự khác biệt giữa hai loại nội dung này. - 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ách kiểm tra các tiện ích hiện có.
- Xác định các tuỳ chọn cơ bản cho tiện ích mà người dùng có thể thay đổi. Xem hướng dẫn trong phần Xác định lựa chọn ưu tiên của người dùng. Để 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 tùy chọn mô-đun mà chỉ tác giả tiện ích mới có thể thay đổi. Xem Xác định tùy chọn tiện ích để biết thêm chi tiết.
- Kiểm tra tiện ích. Xem phần Kiểm tra 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 tiện ích trong các trang trên 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 của GOOGLE) hoặc bằng cách đưa trực tiếp URL của tiện ích vào.
Để nhúng tiện ích trong Sites:
- Chuyển đến trang Sites chứa tiện ích mới.
- Mở trang để chỉnh sửa.
- Chọn Insert > Tiện ích khác.
- Tìm kiế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 vào tệp .xml của bạn. Sau đó, nhấp vào Thêm.
Mẹo: Bạn có thể sử dụng cùng một tiện ích Thêm bằng phương pháp URL này để nhúng các tiện ích từ AdX và bất kỳ nơi nào khác trực tuyến. - 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 đã được thêm vào trang của bạn.
- 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 tra tiện ích kỹ lưỡng trước khi sử dụng và cho phép người khác cũng 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 Google Sites thử nghiệm và nhúng tiện ích của bạn. Xem phần Nhúng tiện ích của bạn để biết các bước chính xác. Chiến lược phát hành đĩa đơn chức năng và giao diện của tiện ích phụ thuộc vào trang web chứa nó. 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 bối cảnh trang web thực sự của Google. Thử chuyển đổi giữa các 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 tra tiện ích, bạn chắc chắn sẽ phát hiện ra lỗi và cần phải chỉnh sửa vào 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 khi bạn đang tinh chỉnh 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ố kỹ thuật của tiện ích được lưu vào bộ nhớ đệm trừ phi bạn yêu cầu Sites không lưu. Để 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 của trang Sites có chứa tiện ích (chứ không phải URL của tệp .xml thông số tiện ích):
?nocache=1
Trang web cung cấp giao diện người dùng chuẩn để thêm và định cấu hình 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ể được đị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 của bạn vào trang web thử nghiệm. Xác nhận tiện ích của bạn hoạt động như mong đợi trên
trang web đó. Bạn nên kiểm tra xem
mọi UserPref mà bạn đã xác định đều có thể được quản trị viên trang web định cấu hình chính xác.
Sau đó, hãy tham khảo phần Chuẩn bị xuất bản cho việc Xuất bản tiện ích của bạn để thực hiện các kiểm tra khác.
Cho phép cấu hình nâng cao dành cho người dùng
Tất cả tiện ích có thể cung cấp khả năng đặt các tùy chọn cơ bản của người dùng, được thực hiện thông qua phần UserPref của tệp thông số kỹ thuật tiện ích. Các yếu tố này thường ảnh hưởng đến kích thước, thanh cuộn, đường viền, tiêu đề và các cài đặt dành riêng cho tiện ích, như được 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ừ các lựa chọn ưu tiên nâng cao hơn so với các thành phần UserPref tiêu chuẩn. Các lựa chọn ưu tiên thường cần phải bao gồm các tính năng như logic nghiệp vụ tuỳ chỉnh, xác thực hoặc bộ chọn. Giao diện được tạo từ các phần UserPref của tiện ích hỗ trợ một số lượng hạn chế các loại dữ liệu (chuỗi, enum, v.v.), do đó không thể tiến hành việc xác thực các mục nhập như URL hoặc ngày.
Hơn nữa, trong các vùng chứa như IMA có trình xem và trình chỉnh sửa như nhau, tác giả tiện ích có thể mở rộng cấu hình như 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 nên tác giả tiện ích không thể đảm bảo người dùng đang xem có quyền truy cập để cập nhật tùy chọn. Vùng chứa xã hội như Sites không thể cho phép bất kỳ người dùng nào sửa đổi tùy chọn, chỉ có tác giả.
Trong Sites, giao diện tùy chọn tiện ích cơ bản do UserPref tạo có thể được thay thế bằng chế độ xem cấu hình, trong đó nhiều tùy chọn và loại dữ liệu bổ sung có thể được cung cấp, như trong ảnh chụp màn hình được hiển thị dưới đây:
Chế độ xem cấu hình sẽ xuất hiện thay cho chế độ cài đặt UserPref tại thời điểm chèn hoặc thời điểm chỉnh sửa, đồng thời cho phép bạn thiết lập các lựa chọn ưu tiên cho người dùng thông qua một 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 chuẩn để lưu các lựa chọn ưu tiên trong thành phần hiển thị này. Xem Tài liệu tham khảo XML về tiện ích và phần Trạng thái lưu trong trang Kiến thức cơ bản dành cho nhà phát triển để biết thêm chi tiết. Các khung hiển thị này cho phép ứng dụng vùng chứa cung cấp thông tin cấu hình bổ sung 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 các phần UserPref có 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 chứa phần này:
<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 với 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 dành cho tiện ích Sites
Người dùng trang web muốn giao diện đẹp mắt trên web. Hãy làm theo các phương pháp hay nhất sau đây để tiện ích kết hợp liền mạch với nhiều chủ đề được sử dụng trong Sites. Xem Tổng quan về tiện ích để biết thông tin 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 được 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 khả năng hiển thị tiện ích của bạn, không gửi tiện ích tới thư mục tiện ích của AdX 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 vào qua URL. Ngoài ra, bạn có thể tạo tiện ích kiểu URL (chứ không phải kiểu 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 tệp đó. Với tuỳ chọn truyền qua này, chỉ URL của tệp thứ hai được hiển thị. Xem phần Chọn loại nội dung trong phần Kiến thức cơ bản dành cho nhà phát triển để biết những điểm khác biệt giữa tiện ích HTML và URL và phần Tiện ích là công khai trong phần Viết tiện ích của riêng bạn để biết những cách khác nhằm che giấu tiện ích của bạn.
- Quan trọng nhất là hãy kiểm tra tiện ích của bạn trên một số 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.