Xây dựng các công cụ Google, Phần 1: Cơ sở của các công cụ Google doc

Xây dựng các công cụ Google, Phần 1: Cơ sở của các công cụ Google
Học cách tạo các công cụ của chính bạn
John Muchow, Tác giả
Tóm tắt: Trong loạt bài phát triển Web mới này, hãy tìm hiểu cách phát triển các
công cụ Google. Công cụ là các ứng dụng nhỏ mà bạn có thể thêm vào bất kỳ
trang Web nào như một phương tiện để đưa ra nội dung động và giàu có. Google
có nhiều công cụ để chọn. Tuy nhiên, mặt hấp dẫn nhất của các công cụ là ở chỗ
bạn có thể viết ra chúng để cho chính bạn sử dụng và sau đó xuất bản chúng trên
Google, nơi các nhà phát triển khác có thể tích hợp công việc của bạn vào các dự
án Web của mình.
Trước khi bạn bắt đầu
Các mục sau đây đưa ra một số thông tin nền để giúp bạn hoàn thành tốt hướng
dẫn này.
Về loạt bài này
Loạt bài này cung cấp nền vững chắc để bạn bắt đầu viết ra các công cụ Google
của chính mình.
Về hướng dẫn này
Hướng dẫn này là một tổng quan cơ sở để tạo các công cụ Google. Với thông tin
này trong tay, bạn có thể tiến hành Phần 2, cho phép đưa vào nhiều đặc tính tiên
tiến hơn sẵn có cho các nhà phát triển công cụ, chẳng hạn như các giao diện được
đánh dấu (tabbed interfaces) và hỗ trợ kéo-và-thả.
Mục tiêu
Trong hướng dẫn này, bạn sẽ tìm hiểu việc tạo và cá nhân hoá một trang Google,
khám phá các kiểu nội dung sẵn có cho các nhà phát triển công cụ, xem xét các
chức năng JavaScript sẵn có ở thư viện cốt lõi Google JavaScript, và viết ra công
cụ đầu tiên của bạn.
Các điều kiện tiên quyết
Hướng dẫn này được viết cho các nhà phát triển quen thuộc với XML, làm các
giao diện lập trình ứng dụng (APIs), và mã hóa trong ngôn ngữ JavaScript. Để lĩnh
hội được tốt nhất hướng dẫn này, bạn phải có hiểu biết chung về các khái niệm
này.

Các yêu cầu hệ thống
Để xây dựng và chạy các thí dụ trong hướng dẫn này, bạn không cần gì khác ngoài
bộ soạn thảo văn bản, kết nối Internet, và sự say mê về mã hoá và gỡ lỗi.
Nội dịch
Trước khi bắt đầu, chúng ta cần phải sắp đặt một nền cơ sở nào đó. Mục này định
nghĩa hai kiểu công cụ sẵn có, sau đó chỉ cho bạn biết cách tạo và tuỳ chỉnh một
trang Google cá nhân hoá.
Các công cụ vạn năng và công cụ desktop
Google đưa ra 2 kiểu công cụ: kiểu desktop và kiểu vạn năng. Như bạn mong đợi,
các công cụ desktop chỉ duy nhất dùng cho Google desktop, nó là một ứng dụng
mà bạn chạy trên máy tính của bạn, cho phép bạn tìm kiếm các tài liệu của bạn
(chẳng hạn như thư điện tử và các tài liệu xử lý văn bản) và cho phép tùy biến nội
dung chẳng hạn như các đường dẫn truyền RSS (Rich Site Summary), thời tiết, và
truyện tranh. Bạn có thể chạy các công cụ Google vạn năng trên Google desktop,
trang chủ Google, và hầu hết các trang Web. Trọng tâm của hướng dẫn này là về
cách tạo các công cụ vạn năng. Đặc biệt nó tập trung vào phát triển công cụ cho
trang Web Google được cá nhân hoá.
Thêm các công cụ vào bất kỳ trang Web nào
Mặc dù hướng dẫn này tập trung vào việc bổ sung các công cụ vào một trang chủ
Google cá nhân hoá, bạn có thể bổ sung các công cụ vào gần như bất kỳ trang
Web nào. Bạn có thể chọn một công cụ mà bạn quan tâm bằng cách vào trang Các
Công cụ Google Cho Trang Web Của Bạn (xem Tài nguyên để được nhiều thông
tin hơn), biên tập các sở thích sẵn có (chẳng hạn như màu nền và phông chữ), và
sao chép và dán các mã được cung cấp vào HTML trên trang Web của chính mình.
Tài khoản trang chủ được cá nhân hoá
Trước khi khám phá cách phát triển các công cụ, tôi sẽ cho bạn thấy cách tạo một
trang chủ Google được cá nhân hoá. Bắt đầu bằng cách thăm trang chủ Google.
Chú ý rằng trong góc trên bên phải của trang Web Google là một liên kết để Sign
in (Đăng nhập) (xem Hình 1).

Hình 1. Trang chủ Google

Sau khi chọn liên kết Sign in (Đăng nhập), Google sẽ đưa bạn đến trang có thể
đăng nhập vào trang chủ được cá nhân hoá, nếu bạn có tài khoản, hoặc chọn tạo
một tài khoản nếu bạn là mới đối với Google (xem góc dưới bên phải Hình 2).

Hình 2. Tạo một trang chủ cá nhân hoá

Dù bạn tạo một tài khoản mới hay đăng nhập theo tài khoản hiện hành, nơi đến sẽ
vẫn chỉ là một trang chủ cá nhân hoá của chính bạn. Hình 3 hiển thị trang chủ
không được cá nhân hóa, không có gì đi kèm, theo mặc định khi tạo tài khoản mới.

Hình 3. Trang chủ cá nhân hoá mặc định

Nếu xem chi tiết, bạn sẽ nhận thấy rằng trang chủ mới trông gần giống với trang
Google gốc mà bạn đã vào (xem Hình 1).Tuy nhiên có hai khác biệt chính. Thứ
nhất, trang được cá nhân hoá này cho thấy mã nhận dạng đăng nhập được liên kết
(hãy để ý địa chỉ email của tôi trên đầu Hình 3). Khác biệt thứ hai là tuỳ chọn để
tuỳ chỉnh trang này bằng cách thêm vào các công cụ Google. Nếu bạn quan sát ở
gần giữa bên phải Hình 3, bạn sẽ thấy một liên kết có tiêu đề Add stuff (Thêm Tư
liệu). Liên kết nhỏ vô hại này là lối vào của bạn đến miền đất của các công cụ
Google.
Cá nhân hoá nội dung của bạn
Tiếp sau liên kết Add stuff bạn sẽ có cơ hội bổ sung bất kỳ số lượng công cụ nào
vào trang chủ cá nhân của bạn. Bạn có thể tìm kiếm các công cụ theo loại (ví dụ,
Tài chính hoặc Thể thao) hoặc tìm kiếm các công cụ theo tên. Theo cách nào thì
bạn cũng sẽ tìm ra một tập hợp lớn các công cụ để làm cho trang chủ của bạn là
duy nhất cho các lợi ích của bạn.
Rõ ràng lý do bạn ở đây là để tìm hiểu cách viết ra các công cụ của chính mình.
Tại một điểm nào đó, bạn thậm chí có thể quyết định xuất bản công cụ của bạn để

cho những người sử dụng khác có thể bổ sung công cụ của bạn vào trang được cá
nhân hoá của họ.
Công cụ đầu tiên của bạn
Để bắt đầu, hãy quan sát khối mã ngắn trong Liệt kê 1, nó sẽ trở thành công cụ đầu
tiên của bạn.

Liệt kê 1. XML cho công cụ đầu tiên của bạn

1 <?xml version="1.0" encoding="UTF-8" ?>
2 <Module>
3 <ModulePrefs title="IBM developerWorks!" height="150"
author="Your name here" />
4 <Content type="html">
5 <![CDATA[
6 <script type="text/javascript">
7 <!
8 function popup_windows()
9 {
10 window.open( "
"myWindow",
11 "status = 1, height = 800, width = 600, toolbar = 1,
resizable = 1")
12 }
13 // >
14 </script>
15 <body>
16 <br>
17 <form>
18 <input type="button" onClick="popup_windows()"
value="Visit IBM.com!">

19 </form>
20 <p onClick="popup_windows()">Click this text to visit
IBM.com!</p>
21 </body>
22 ]]>
23 </Content>
24 </Module>

XML theo từng dòng
Trọng lượng chỉ 24 dòng, công cụ ngắn này cung cấp số lượng kha khá các chức
năng. Tôi duyệt từng mục để bạn có thể tìm hiểu nhiều hơn về công việc bên trong
của một công cụ.
Dòng 1: Dòng này quy định các nội dung của hồ sơ như là XML.
Dòng 2: Bạn sử dụng thẻ <Module> để chỉ ra rằng tệp XML này chứa một công
cụ.
Dòng 3: Như tên này ngầm định, thẻ <ModulePrefs> cho phép bạn định nghĩa các
tham chiếu khác nhau liên quan đến nhà phát triển.
Dòng 4: Sử dụng thẻ <Content type="html">, bạn bầu chọn sử dụng HTML như
một kiểu nội dung.
Các dòng 5-22: Với kiểu nội dung của công cụ này quy định như là HTML, bạn
sử dụng <![CDATA[> để chỉ định khởi động của mã HTML (hoặc các ngôn ngữ
kịch bản lệnh khác được phép bên trong HTML, chẳng hạn như JavaScript).
Các dòng 23 và 24: Các thẻ trên 2 dòng này biểu thị phần cuối của các mục tương
ứng.
Viết mã
Liệt kê 2 hiển thị mã cho công cụ đầu tiên của bạn một lần nữa mà không có các
số dòng. Sao chép và dán mã này vào một trình soạn thảo văn bản và lưu tệp với
tên gadget-1.xml.

Liệt kê 2. XML không có số dòng

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="IBM developerWorks!" height="150" author="Your name
here" />
<Content type="html">
<![CDATA[
<script type="text/javascript">
<!
function popup_windows()
{
window.open( " "myWindow",
"status = 1, height = 800, width = 600, toolbar = 1, resizable = 1")
}
// >
</script>
<body>
<br>
<form>
<input type="button" onClick="popup_windows()" value="Visit
IBM.com!">
</form>
<p onClick="popup_windows()">Click this text to visit IBM.com!</p>
</body>
]]>
</Content>
</Module>

Tải lên mã
Trước khi bổ sung công cụ vào trang chủ của bạn, tải tệp XML mà bạn vừa mới

tạo lên một máy chủ Web truy cập qua Internet. Ghi lại nơi bạn tải lên tệp để có
thể tham chiếu địa chỉ khi bổ sung công cụ vào trang chủ cá nhân hoá của bạn
trong phần tiếp theo. Thí dụ nếu bạn tải tệp lên r-Web-
server.com/uploads, đường dẫn đầy đủ đến tệp sẽ là r-Web-
server.com/uploads/gadgets-1.xml.
Nếu bạn không có quyền truy cập đến một máy chủ, bạn có thể sử dụng tệp XML
mà tôi đã tạo trong hướng dẫn này bằng cách truy cập qua tài khoản Google Page
Creator của tôi. Google Page Creator đưa ra một bộ công cụ để tạo và xuất bản các
trang Web. Để theo tiếp cận này, hãy đánh dấu và sao chép liên kết
Bạn sẽ sử dụng liên kết
này lúc bổ sung công cụ vào trang Web Google cá nhân hoá của bạn.
Bổ sung công cụ vào trang chủ của bạn
Với công cụ có thể truy cập ngay trên internet, bạn có thể bổ sung nó vào trang
chủ cá nhân hoá của bạn. Hãy truy cập Trang chủ Cá nhân hoá Google, Sign in
nếu cần thiết, và chọn liên kết Add stuff, như Hình 4.

Hình 4. Trang chủ cá nhân hoá của bạn

Từ trang “Add stuff”, bạn muốn bổ sung một tham chiếu đến công cụ của bạn
bằng cách sử dụng một URL. Nhấn vào liên kết có tiêu đề Add by URL như thể
hiện ở góc trên bên phải Hình 5.

Hình 5. Bổ sung bằng URL

Bạn đã gần như ở đó rồi. Nếu bạn đang sử dụng công cụ được chủ quản lý của tài
khoản Bộ tạo Trang Google (Google Page Creator) của tôi, hãy dán URL mà bạn
đã sao chép trước đây vào hộp văn bản, như Hình 6. Nếu bạn đã tải công cụ lên
máy chủ Web của chính mình, gõ nhập đường dẫn đầy đủ đến công cụ vào chỗ
trống đã cho.

Hình 6. Nhập công cụ URL

Google sẽ hiện thông điệp cảnh báo, như trong Hình 7, cho biết sắp bổ sung một
đặc tính vào trang chủ của bạn mà không được tạo bởi Google. Do biết xuất xứ
của công cụ bạn đang cài đặt, nhấn OK để thực hiện.

Hình 7. Cảnh báo Google

Khi trở lại trang chủ của bạn (nhấn vào liên kết có tên Trở lại trang chủ (Back to
homepage), bạn sẽ trông thấy công cụ mới này, như Hình 8. Khi bạn nhấn vào nút
hoặc văn bản hiển thị trong công cụ, một cửa sổ thả xuống sẽ xuất hiện với trang
Web IBM hiển thị trong cửa sổ trình duyệt mới.

Hình 8. Cảnh báo Google

Các kiểu nội dung công cụ
Có 3 kiểu nội dung được hỗ trợ mà bạn có thể sử dụng khi viết một công cụ. Mục
này đưa vào các kiểu nội dung này.
html
Kiểu nội dung html cho bạn sự linh hoạt nhất và là kiểu khuyến cáo sử dụng nếu
bạn không có các đặc tính riêng mà bạn không thể thực hiện bằng cách sử dụng
HTML. Với kiểu này, bạn có thể gộp vào hầu hết mọi thứ mà có thể được trả về
bên trong một trình duyệt Web (xem Liệt kê 3).

Liệt kê 3. Kiểu nội dung html

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="html content type example" />
<Content type="html">

<![CDATA[
Gadgets are your friend!
]]>
</Content>
</Module>

html-inline
Nếu công cụ của bạn cần thay đổi bất kỳ nội dung nào trong trang cha (nghĩa là
trang chủ cá nhân hoá của bạn), bạn sẽ cần phải sử dụng kiểu nội dung html-inline.
Với kiểu này, công cụ không được trả lại bên trong một iframe, như với kiểu nội
dung html. Đúng hơn là, công cụ mã hoá được nhúng trong HTML của trang cha,
nếu bạn thực hiện.
Triển vọng của việc sử dụng html-inline là ở chỗ bạn có thể thay đổi nội dung
riêng của trang cha một tính năng tiện dụng khi cần thiết. Tuy nhiên, có các hạn
chế với kiểu này, và nếu bạn không phải thực hiện một đặc tính riêng như là một
phần của công cụ của bạn, nó không phải là tiếp cận khuyến cáo sử dụng (xem
Liệt kê 4).
iframe
Một iframe là một hộp văn bản cuộn, nó hiển thị các nội dung từ một trang Web ở
xa. Nội dung trong một iframe là hoàn toàn tách rời trang cha và không có phương
tiện tương tác nào giống như vậy. Bạn có thể đọc nhiều hơn bằng cách điểm lại
Đặc tả HTML 4 (xem mục Tài nguyên).

Liệt kê 4. Kiểu nội dung html-inline

<?xml version="1.0" encoding="UTF-
8"?>
<Module>
<ModulePrefs title="inline content type
example"/>

<Content type="html-inline">
<![CDATA[
Change the font to monospace
<script type="text/javascript">
_IG_RegisterOnloadHandler(function
()
{
document.body.style.fontFamily =
"monospace";
});
</script>
]]>
</Content>
</Module>

url
Với kiểu nội dung url công cụ nội dung tồn tại dựa vào một trang Web ở xa được
tham chiếu bởi một URL trong tệp XML công cụ. Chỉ nội dung trong tệp XML là
tham chiếu đến URL (xem thí dụ trong Liệt kê 5).

Liệt kê 5. Kiểu nội dung url

<Module>
<ModulePrefs />
<Content type="url" href=" />
</Module>

Cũng như với kiểu nội dung html-inline tiếp cận này chỉ nên áp dụng nếu bạn cần
các đặc tính riêng mà bạn không thể thực hiện được với HTML. Ví dụ, nếu bạn có
một ngôn ngữ kịch bản lệnh thay thế mà bạn thích (nghĩa là hơi khác với

JavaScript), kiểu này có lẽ là lựa chọn tốt.
Caveat
Hãy nhớ rằng lựa chọn của bạn về kiểu nội dung sẽ xác định đặc tính API nào bạn
có thể sử dụng trong công cụ của bạn. Ngoài ra, kiểu nội dung xác định cách công
cụ của bạn sẽ được trả về trên màn hình hiển thị nghĩa là nó được hiển thị trong
một iframe (html), như là bộ phận của trang cha (html-inline), hay nằm dưới sự
điều khiển của bạn như nơi phát triển công cụ (url).
Các mục công cụ
Có ba mục trong một tệp công cụ XML, hai trong số đó mà tôi đã giới thiệu:
ModulePrefs và Content. Ngoài việc cung cấp một sự điểm lại ngắn, tôi sẽ giới
thiệu mục UserPrefs.
ModulePrefs
Nếu bạn thích gộp vào thông tin về công cụ của bạn, chẳng hạn như tên của bạn,
một trang Web, địa chỉ của bạn, hoặc các thuộc tính khác, bạn sẽ làm như vậy
trong mục ModulePrefs (xem Liệt kê 6).

Liệt kê 6. ModulePrefs

<Module>
<ModulePrefs title="Gadget title here"
title_url=""
author="John Muchow"
description="This gadget is useful for "
author_location="Minnesota"/>
<UserPref name="theName" display_name="Name"
required="true"
default_value="Your name here"/>
<UserPref name="theSign" display_name="Astrological Sign"/>

<Content type="html">

<![CDATA[
Content goes here
]]>
</Content>
</Module>

Nội dung
Có một vài điều cần giới thiệu liên quan đến mục Content (Nội dung) mà tôi chưa
đề cập đến. Như trong Liệt kê 6, mục này là nơi bạn quy định kiểu (html, html-
inline, url) và và làm theo với nội dung phù hợp. Đối với cả html và html-inline,
nội dung được bao hàm trong tệp XML công cụ. Đối với url, bạn quy chiếu tệp
chứa logic công cụ của bạn.
UserPrefs
Mục UserPrefs cho phép người sử dụng tuỳ chỉnh một công cụ theo ý thích của
chính mình. Chẳng hạn họ có thể có tuỳ chọn lấy múi giờ, ngôn ngữ, ý thích về
màu sắc,.… của họ. Liệt kê 6 hiển thị một vài thí dụ.
Trong phần tiếp theo của hướng dẫn này, tôi sẽ giải thích chi tiết mục UserPrefs.
Các ý thích của người dùng
Mục trước đưa ra ý niệm về thiết lập các ý thích của người sử dụng trong công cụ
XML. Tại điểm này, chúng ta sẽ đi sâu tới khả năng lựa chọn công cụ của người
dùng. Như với hầu hết bất kỳ phần mềm nào, người ta chờ đợi một phương tiện
lập cấu hình người sử dụng. Khi bạn bắt đầu khám phá các công cụ do người khác
viết, bạn sẽ nhận thấy rằng việc cắt may, ngay khi không được yêu cầu, thường
nằm trong ý đồ sử dụng công cụ.
Thí dụ, tôi có một công cụ dựa trên thời tiết trên trang chủ cá nhân hoá của tôi cho
biết thời tiết ở khu vực của tôi, dựa trên một thiết lập theo ý thích của người sử
dụng, được cấu hình với mã ZIP của tôi. Một công cụ khác hiển thị giá cổ phiếu
cho các đầu tư trong danh mục đầu tư của tôi. Một lần nữa, điều này dựa trên các ý
thích của người sử dụng, lần này với danh sách các biểu tượng máy điện báo của
các chứng khoán mà tôi sở hữu hoặc đang cân nhắc việc mua chúng.

Các thuộc tính
Chúng ta sẽ bắt đầu với xem xét các thuộc tính khác nhau sẵn có khi làm việc với
các ý thích của người sử dụng. Như bạn thấy trong Bảng 1, tất cả các thuộc tính
đều là tuỳ chọn với một ngoại lệ.

Bảng 1. Thuộc tính UserPref
Các ý thích của người sử dụng
Thuộc tính
Yêu
cầu

Mô tả