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

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.

John Muchow, Tác giả

John Muchow tâm huyết với việc phát triển phần mềm từ năm 1988, làm việc với nhiều vai, từ nhà phát triển đến trưởng kiến trúc sư phần mềm rồi đến Tổng Giám sát Công nghệ (CTO). Từ năm 2000, ông tập trung vào công nghệ di động, và trong thời gian này đã có cơ hội làm việc sát cánh với nhiều doanh nghiệp nổi tiếng gồm Nokia, Sony Ericsson, Symbian, Sprint/Nextel, Sun Microsystems, giữa những doanh nghiệp khác. Ông cũng là tác giả của cuốn sách của nhà phát triển không dây Công nghệ J2ME Cốt lõi bán chạy nhất mà vẫn đang được xuất bản bằng một số tiếng. Ông viết về công nghệ di động, từ quan điểm của nhà phát triển, trên blog 360Mobile.us của ông.



18 12 2009

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
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á
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
Trang chủ cá nhân hoá

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( "http://www.ibm.com/developerWorks", "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( "http://www.ibm.com/developerWorks", "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 http://www.your-Web-server.com/uploads, đường dẫn đầy đủ đến tệp sẽ là http://www.your-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 http://technical.tutorials.googlepages.com/gadget-1.xml. 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
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ổ 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
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
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ả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="http://some-url.com/filename.xyz" />
</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: ModulePrefsContent. 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="http://technical.tutorials.googlepages.com"
    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ả htmlhtml-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ínhYêu cầuMô tả
datatype (kiểu dữ liệu)NoQuy định kiểu dữ liệu.
default_value (giá trị mặc định)NoGiá trị mặc định, nếu người sử dụng không quy định một giá trị.
display_name (tên hiển thị)NoMột nhãn duy nhất để nhận ra thuộc tính khi soạn thảo ra các ý thích.
tênMột tên biến duy nhất đại diện cho giá trị của ý thích của người sử dụng đó.
yêu cầuNoQuy định liệu ý thích được yêu cầu là cần thiết do người ta thiết lập không (tức không rỗng).
urlparamNoKhi sử dụng một kiểu nội dung url, sử dụng ý thích này để thiết lập giá trị của URL.

Liệt kê 7 trình bày cách sử dụng của vài thuộc tính. Hình 9 hiển thị các thuộc tính hiển thị trong một công cụ.

Liệt kê 7. Các thuộc tính
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Setting Preferences" height="300" />
  <UserPref name="theName" display_name="Name" required="true" 
            default_value="Your name here"/>
  <UserPref name="theSign" display_name="Astrological Sign"/>
  <UserPref name="thePrefs" display_name="Save?" datatype="bool" default_value="true"/>
  <UserPref name="thePrefs2"                     datatype="bool" default_value="true"/>
  <Content type="html">
    <![CDATA[
      Testing...
    ]]>
  </Content>
</Module>
Hình 9. Các thuộc tính
Các thuộc tính

Cho tôi dành chút thời gian để điểm lại vài điều. Hãy để ý trong Liệt kê 7 xuất hiện name trong mỗi lựa chọn của người sử dụng. Việc này như đã được thông báo, vì đây là trường duy nhất được yêu cầu. Ngoài ra, hãy chú ý đến việc sử dụng các giá trị mặc định và cách những cái này được hiển thị trong công cụ. Cuối cùng, nếu quan sát việc khai báo mã cho thePrefs2, bạn sẽ nhận thấy rằng tôi không quy định thuộc tính display_name. Xem Hình 9 một lần cuối để biết cách công cụ xử lý việc này như thế nào, và so sánh cái này với khai báo cho thePrefs.

Các kiểu dữ liệu

Bạn có thể sử dụng sáu kiểu dữ liệu trong một công cụ:

  1. boolean (logic).
  2. enum (liệt kê).
  3. hidden (ẩn).
  4. list (danh sách).
  5. location (địa chỉ).
  6. string (chuỗi).

booleanstring có khả năng tự giải thích. hidden có nghĩa rộng hơn tương tự như nó thực hiện trong HTML -- nghĩa là nó là một chuỗi mà người sử dụng không thể nhìn thấy hoặc biên tập lại (ít nhất không quan sát mã nguồn HTML). Các mục sau đây trình bày các thí dụ ngắn giải thích về cách sử dụng enum, list, và location.

enum

Các dữ liệu đánh số được định nghĩa như trong Liệt kê 8.

Liệt kê 8. Thí dụ về bảng liệt kê
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Enum Example" height="100" />
 <UserPref name="theStyle" display_name="Beer Style" 
           default_value="Stout" datatype="enum" >
    <EnumValue value="Altbier" />
    <EnumValue value="Belgian" />
    <EnumValue value="India Pale Ale (IPA)" />
    <EnumValue value="Kolschs" />
    <EnumValue value="Lambic" />
    <EnumValue value="Pale Ale" />
    <EnumValue value="Pilsner" />
    <EnumValue value="Stout" />
    <EnumValue value="Weizenbier" />
  </UserPref>
  <Content type="html">
    <![CDATA[
      Test the Enumeration
    ]]>
  </Content>
</Module>

Một bảng liệt kê trong một công cụ xuất hiện như một danh sách thả xuống, như bạn thấy trong Hình 10. Chú ý rằng giá trị mặc định xác định trong mã ("Stout") xuất hiện như giá trị hiện tại được chọn trong danh sách không hoạt động (xem phần trên đầu Hình 10) cũng như giá trị được chọn khi bạn gọi ra danh sách thả xuống (xem bên dưới Hình 10).

Hình 10. Bảng liệt kê hiển thị trong một danh sách thả xuống
Bảng liệt kê hiển thị trong một danh sách thả xuống

danh sách

Ngược lại với một enum, chứa một tập hợp các giá trị cố định, list danh sách là một kiểu dữ liệu động được tạo dựa trên dữ liệu người dùng nhập vào. Liệt kê 9 cho thấy XML để tạo một danh sách cơ sở.

Liệt kê 9. Thí dụ về danh sách
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs
    title="List example"
    scrolling="true"/>
  <UserPref name="theList"
    display_name="Ingredients"
    datatype="list"/>
  <Content type="html">
  <![CDATA[
  Testing list
  ]]>
  </Content>
</Module>

Hình 11 hiển thị một danh sách của các mục mà tôi đã tạo cho các thành phần để có thể kết hợp cho mẻ rượu nhà nấu. Bằng cách chọn nút Save (Lưu), các mục trong danh sách sẽ được ghi lại; sau mỗi lần truy cập trang chủ cá nhân của bạn các giá trị đó sẽ vẫn còn có hiệu lực.

Hình 11. Bổ sung các phần tử mới vào một danh sách
Bổ sung các phần tử mới vào một danh sách

Các kiểu dữ liệu list là khá mạnh ở chỗ bạn có thể truy cập theo chương trình các mục cũng như bổ sung các giá trị vào một list.

địa chỉ

Bạn có thể gộp nội dung từ giao diện chương trình ứng dụng Google Maps (API Google Maps) bằng cách sử dụng kiểu dữ liệu location (địa chỉ). Quan sát Liệt kê 10 để thấy bao hàm một ánh xạ trong công cụ dễ như thế nào.

Liệt kê 10. Ví dụ về địa chỉ
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Map of __UP_theZip__" height="300" />
  <UserPref name="theZip"
    display_name="Zip Code"
    datatype="location"
    required="true" />
  <Content type="html">
  <![CDATA[
    <script src="http://maps.google.com/maps?file=js" type="text/javascript"></script>
    <div id="map" style="width: 100%; height: 100%;"></div>

    <script type="text/javascript">

    // Get the user preferences (ZIP code in this case)
    var prefs = new _IG_Prefs(__MODULE_ID__);

    // Create a new Google map object
    var map = new GMap(document.getElementById("map"));

    // Add Pan and Zoom controls to map
    map.addControl(new GSmallMapControl());

    // Allow choice of map or satellite view
    map.addControl(new GMapTypeControl());

    // Show map
    // Note: using the getString() method with the user preference (zip), 
    // we can get longitude and latitude
    map.centerAndZoom(new GPoint(prefs.getString("theZip.long"), 
                      prefs.getString("theZip.lat")), 6);

    </script>

  ]]>
  </Content>
</Module>

Khi bạn thêm công cụ này vào trang chủ cá nhân hoá của bạn, bạn được nhắc mã ZIP (xem Hình 12). Quay lại mã này, dòng required="true" trong mục UserPref ứng với khả năng này, cho phép yêu cầu người dùng bổ sung giá trị đối với lựa chọn riêng của mình. Chú ý thông báo hiển thị ngay phía dưới công cụ, nói rõ rằng công cụ này sẽ không được hiển thị cho đến khi mọi thiết lập yêu cầu được hoàn tất.

Hình 12. Nhắc về vị trí (mã ZIP)
Nhắc về vị trí (mã ZIP)

Khi bạn nhập vào một mã ZIP và lưu lại trong công cụ, một ánh xạ được hiển thị, như trong Hình 13. Một lần nữa, tham chiếu trở lại mã trong Liệt kê 10, quan sát hai dòng gọi map.addControl(). Chỉ với hai cuộc gọi đến API ánh xạ này, công cụ của bạn sẽ cho phép những người sử dụng xoay chuyển (trái và phải, lên và xuống), phóng to và thu nhỏ, và thay đổi giữa khung nhìn ánh xạ (map view) và khung nhìn vệ tinh (satellite view).

Hình 13. Ánh xạ của mã ZIP
Ánh xạ của mã ZIP

Công cụ này đưa ra một số chức năng quan trọng trong ít hơn 30 dòng mã. Nếu không có gì khác thì nó là một bằng chứng cho sức mạnh của giao diện chương trình ứng dụng Google Maps. Xem mục Tài nguyên để có một liên kết đến giao diện chương trình ứng dụng Google Maps.


Các thư viện JavaScript

Có hai kiểu thư viện JavaScript sẵn có khi mã hoá các công cụ: thư viện lõi và thư viện có đặc tính riêng. Mục này đưa vào các chức năng thư viện cốt lõi, không có gì khác là các chức năng để thực hiện các phép toán chuẩn về ý thích của người sử dụng. Phần 2 của hướng dẫn này sẽ khám phá các giao diện dựa trên phiếu, chức năng kéo và thả, và các đặc tính sẵn có khác qua các thư viện có đặc điểm riêng.

Các chức năng JavaScript cốt lõi

Bảng 2 trình bày một danh sách các chức năng cốt lõi, cùng với một mô tả ngắn gọn của từng chức năng. Trong các mục tiếp theo, tôi chia các chức năng này thành 3 nhóm: hàm dựng, nhận các giá trị, và thiết lập các giá trị. Tôi xem xét từng nhóm kỹ lưỡng và gộp cả các mẫu mã để chứng minh cách sử dụng của chúng.

Bảng 2. Các hàm JavaScript cốt lõi
Các hàm
HàmMô tả
_IG_Prefs(gadgetId)Hàm dựng
dump()Hiển thị các ý thích (dùng để sửa lỗi).
getArray(userpref)Trả về các nội dung của một kiểu dữ liệu List như là một mảng.
getBool(userpref)Trả về các nội dung của một ý thích của người sử dụng như một giá trị Boolean.
getInt(userpref)Trả về các nội dung của một ý thích của người sử dụng như là một giá trị Integer.
getString(userpref)Trả về các nội dung của một ý thích của người sử dụng như là một giá trị String.
set(userpref, value)Thiết lập ý thích của người sử dụng ở một giá trị quy định.
setArray(userpref, [values])Thiết lập ý thích của người sử dụng là một kiểu dữ liệu List ở một mảng các giá trị quy định.

Hàm dựng

Bằng cách sử dụng chức năng hàm dựng, bạn có thể truy cập các ý thích của người sử dụng trong mã của bạn. Khi bạn gọi ra hàm dựng, chuyển qua __MODULE_ID__. Khi công cụ được nạp, bộ định danh duy nhất đối với công cụ của bạn sẽ được thay thế cho giá trị này (xem Liệt kê 11). Mục tiếp theo trình bày chức năng này.

Liệt kê 11. Gọi ra hàm dựng
<script type="text/javascript">
  ...
  var user_prefs = new _IG_Prefs(__MODULE_ID__);
  ...
</script>

Nhận các giá trị

Có bốn hàm để nhận các giá trị, mỗi hàm cho một kiểu dữ liệu: boolean, integer, arraystring. Tám dòng đầu tiên của mã trong Liệt kê 12 là từ Liệt kê 7, nơi bạn đã nhắc những người sử dụng về ký hiệu chiêm tinh của họ và hỏi họ có thích lưu giá trị được nhập vào không. Các dòng từ 16 đến 20 hiển thị các cuộc gọi JavaScript để nhận các giá trị của hai ý thích của người sử dụng này.

Liệt kê 12. Nhận các giá trị của các ý thích của người sử dụng
1   <?xml version="1.0" encoding="UTF-8" ?>
2   <Module>
3     <ModulePrefs title="Setting Preferences" height="300" />
4     <UserPref name="theName" display_name="Name" required="true" 
               default_value="Your name here"/>
5     <UserPref name="theSign" display_name="Astrological Sign"/>
6     <UserPref name="thePrefs" display_name="Save?" datatype="bool" 
               default_value="true"/>
7     <UserPref name="thePrefs2" datatype="bool" 
               default_value="true"/>
8     <Content type="html">
9       <![CDATA[
10
11       ...
12
13        <script type="text/javascript">
14          var user_prefs = new _IG_Prefs(__MODULE_ID__);
15
16          // Get the user preference to save (or not)
17          var bSave = user_prefs.getBool("thePrefs");
18
19          // Get the astrological sign
20          var sSign = user_prefs.getString("theSign");
21
22          ...
23
24        </script>
25
26        ...
27
28      ]]>
29    </Content>
30  </Module>

Các giá trị thiết lập

Bạn có thể thay đổi giá trị về ý thích của người sử dụng qua lời gọi đến set() hoặc setArray(). Hàm đầu tiên là dùng cho kiểu dữ liệu boolean, hidden, integer hoặc string. Hàm sau chỉ duy nhất sử dụng khi làm việc với kiểu dữ liệu list.

Trước khi bạn có thể gọi ra hàm đặt nào thì bạn phải gộp cả thư viện setprefs trong mã của bạn. Liệt kê 13 hiển thị một ví dụ về việc gọi ra hàm setArray().

Liệt kê 13. Các giá trị thiết lập của các ý thích của người sử dụng
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Setting Preferences" height="300" />
  <UserPref name="theList" datatype="list" display_name="List"/>

  <Content type="html">
    <![CDATA[

      <script type="text/javascript">
        var user_prefs = new _IG_Prefs(__MODULE_ID__);

        ...

        // Set list contents
        user_prefs.setArray("theList", ["Stout", "IPA", "Brown Ale", "ESB"]);

        ...

      </script>

    ]]>
  </Content>
</Module>

Các hàm JavaScript bổ sung mà không thực hiện một cách riêng với các ý thích của người sử dụng là sẵn có để sử dụng trong các công cụ của bạn. Bạn có thể xem xét tất cả các hàm cốt lõi bằng cách làm theo liên kết trong mục Tài nguyên.


Công cụ hiển thị thời gian

Hướng dẫn này đã bao hàm lượng kha khá các khái niệm cơ sở. Lúc này là lúc viết ra một công cụ để chứng minh một số điều bạn đã học được.

Kéo vào với nhau

Công cụ tiếp theo mà bạn sẽ tạo là đồng hồ cơ sở được viết bằng mã JavaScript (xem Hình 14).

Hình 14. Đồng hồ
Đồng hồ

Loạt các ảnh chụp màn hình có ý nghĩa khi nhìn từ trên xuống đáy. Tôi đề cập đến điều này vì việc hiển thị các giây đồng hồ là sự đảo ngược của truyền thống. Ví dụ, thường khi bạn xem thời giờ hiển thị như 03:06:14 chiều, giây tiếp theo sẽ là 03:06:15 chiều, v.v... Trong một cố gắng để hiển thị một cái gì đó độc đáo, tôi đã quyết định thay đổi các giây đồng hồ sang một bộ định thời đếm ngược, nó đếm ngược từ 60 đến 0, lúc đó giá trị phút được cập nhật. Xem lại Hình 14, một lần nữa, và bây giờ điều này sẽ có lý.

Mã công cụ đồng hồ

Liệt kê 14 hiển thị mã cho công cụ. Như bạn đã kiểm tra bộ mã, hãy chú ý đặc biệt đến các thiết lập UserPref. Bạn sẽ nhìn thấy các giá trị đó được sử dụng trong một vài ảnh chụp màn hình trong mục tiếp theo.

Liệt kê 14. Công cụ đồng hồ
<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Current time" author="John Muchow"
                  description="Gadget to demonstrate stuff"  height="30"/>

  <ModulePrefs title="The time in __UP_sName__'s world" />
  <UserPref name="sName" display_name="Your name" required="true" />
  <UserPref name="eBackgroundcolor" display_name="Background color"
                    default_value="Blue" datatype="enum" >
    <EnumValue value="Red" />
    <EnumValue value="Green" />
    <EnumValue value="Blue" />
  </UserPref>

  <Content type="html">
  <![CDATA[

    <!-- Set div.  Text below is shown while clock is getting/formatting time -->
    <div id="content_div" style="font-size:12px; font-family:Arial, Helvetica;
      font-weight:bold; color:white; text-align:center;">

    Formatting the time, please wait...

    <script type="text/javascript">

      // Get user preferences
      var userprefs = new _IG_Prefs(__MODULE_ID__);

      // Set user specified preference for background color
      var element = document.getElementById('content_div');
      element.style.backgroundColor = userprefs.getString('eBackgroundcolor');

      // The clock
      var clock = _gel('content_div');

      // Called repeatedly to update the clock
      function showClock()
      {
        var date = new Date();
        var hour = date.getHours();
        var min = date.getMinutes();
        var countdown = date.getSeconds();
        var indicator;
        var displaytime;

        // Check for am or pm
        if (hour > 12)
        {
          hour -= 12;
          indicator = 'pm';
        }
        else
          indicator = 'am';

        // Add leading 0 to minutes, if necessary (e.g. 09 minutes)
        if (min < 10)
          min = '0' + min;

        // Convert seconds (1 2 3...) to countdown (59 58 57...)
        countdown = (60 - countdown);

        // Create string that will be displayed
        displaytime = hour + ':' + min + ' ' + indicator + ' - ' + countdown + ' seconds';

        // Display time
        clock.innerHTML = displaytime;
      }

      // Every second (1000 milliseconds), update the window/clock.
      window.setInterval("showClock()", 1000);

    </script>

    ]]>
    </Content>
</Module>

Công cụ đồng hồ khi đang hoạt động

Lúc này mã đã đầy đủ, bạn cần phải tải mã lên một máy chủ Web, như đã trình bày trước đó. Bạn có thể tham khảo bộ mã được tải lên tại địa chỉ này: http://technical.tutorials.googlepages.com/clock.xml. Bước cuối cùng là bổ sung công cụ vào trang Web Google cá nhân hoá của bạn. Khi đã cài đặt, công cụ sẽ trông giống như Hình 15.

Hình 15. Công cụ được cài đặt
Công cụ được cài đặt

Một vài bình luận trước khi đi tiếp: Thứ nhất, chú ý cách công cụ hiển thị các dấu ??? như là tiêu đề. Khi bạn gõ nhập tên của bạn (trong hộp văn bản trên công cụ) và lưu lại công cụ, tiêu đề sẽ được cập nhật. Còn nhiều điều khi chúng ta kiểm tra lại bộ mã. Thứ hai, chú ý thông báo dưới đáy của công cụ về các thiết lập được yêu cầu. Hộp văn bản để nhập tên là trường được yêu cầu, như vậy công cụ sẽ không được hiển thị cho đến khi có giá trị nhập vào.

Trong Hình 16, tôi đã nhập vào tên tôi và cũng thay đổi ý thích về màu sắc của tôi về nền công cụ.

Hình 16. Thiết lập các ý thích
Thiết lập các ý thích

Với các lựa chọn đã thay đổi và nút Save (Lưu) được chọn, công cụ sẽ được hiển thị. Nó mất khoảng thời gian ngắn để chạy mã và định dạng thời gian. Trong khoảng tời gian tạm dừng ngắn này, một thông báo được hiển thị, như trong Hình 17.

Hình 17. Nạp công cụ
Nạp công cụ

Hình 18 hiển thị công cụ đang chạy một lần nữa.

Hình 18. Đồng hồ đang chạy
Đồng hồ đang chạy

Bên trong công cụ

Mục này điểm lại tất cả các mã dùng cho công cụ đồng hồ và mô tả ngắn gọn việc đang xảy ra.

Kê khai các ý thích

Liệt kê 15 hiển thị mục của mã dành riêng cho việc kê khai công cụ và các ý thích của người sử dụng.

Liệt kê 15. Kê khai các ý thích
<Module>
  <ModulePrefs title="Current time" author="John Muchow"
               description="Gadget to demonstrate stuff"  height="30"/>

  <ModulePrefs title="The time in __UP_sName__'s world" />
  <UserPref name="sName" display_name="Your name" required="true" />
  <UserPref name="eBackgroundcolor" display_name="Background color"
            default_value="Blue" datatype="enum" >
    <EnumValue value="Red" />
    <EnumValue value="Green" />
    <EnumValue value="Blue" />
  </UserPref>

Trong phần trước tôi đã chỉ ra 3 dấu ??? hiển thị khi nạp công cụ. Trong Liệt kê 15, chú ý biến title gồm cả __UP_sName__. UP là một (từ cấu tạo từ các chữ cái đầu), của một loại, từ UserPref. Giá trị sName là biến/giá trị sẽ được thay thế vào lúc chạy. Khi người sử dụng điền vào một tên trong hộp văn bản các ý thích (xem Hình 15), công cụ sẽ thay thế giá trị sName vào tiêu đề.

Cũng chú ý kê khai biến eBackgroundcolor. Kiểu liệt kê này được đưa vào với 3 lựa chọn màu sắc khác nhau. Bạn có thể quan sát cách những kiểu này được hiển thị như thế nào bằng cách xem lại Hình 16.

Các thuộc tính kiểu dạng

Chuyển sang mục nội dung của công cụ, bước đầu tiên của bạn là định nghĩa các thuộc tính kiểu dạng (xem Liệt kê 16).

Liệt kê 16. Định nghĩa các thuộc tính kiểu dạng
<Content type="html">
<![CDATA[

  <!-- Set div.  The text below is shown while clock is getting/formatting time -->
  <div id="content_div" style="font-size:12px; font-family:Arial, Helvetica;
      font-weight:bold; color:white; text-align:center;">

  Formatting the time, please wait...

Mã này định nghĩa kích thước, hệ thống, độ đậm nhạt (đậm) và gióng hàng (căn giữa) của phông chữ. Các thuộc tính này được sử dụng để hiển thị thời gian trong công cụ. Ngoài ra, hãy chú ý đến thông báo bằng văn bản được hiển thị như là các việc nạp công cụ.

Truy cập các ý thích

Bước tiếp theo là gọi ra phương thức hàm dựng JavaScript để tạo một cá thể của đối tượng ưa chọn của người dùng (xem Liệt kê 17). Chú ý tham chiếu đến __MODULE_ID__, nó trả về định danh duy nhất cho công cụ này, cho phép truy cập đến các ý thích của người sử dụng mà bạn đã kê khai ra trước đó trong mã.

Liệt kê 17. Mã hoá để thiết lập màu nền theo ý thích của người sử dụng
  <script type="text/javascript">

    // Get user preferences
    var userprefs = new _IG_Prefs(__MODULE_ID__);

    // Set user specified preference for background color
    var element = document.getElementById('content_div');
    element.style.backgroundColor = userprefs.getString('eBackgroundcolor');

Bước cuối cùng là thiết lập màu nền của công cụ bằng cách sử dụng giá trị eBackgroundcolor. Một lần nữa, nếu bạn trở lại Hình 16, bạn sẽ thấy cách người sử dụng có thể chọn giá trị này.

Định dạng đồng hồ

Khối mã dùng cho đồng hồ nằm trong hàm showClock(), như thể hiện trong Liệt kê 18.

Liệt kê 18. Mã định dạng thời gian
// The clock
var clock = _gel('content_div');

// Called repeatedly to update the clock
function showClock()
{
  var date = new Date();
  var hour = date.getHours();
  var min = date.getMinutes();
  var countdown = date.getSeconds();
  var indicator;
  var displaytime;

  // Check for am or pm
  if (hour > 12)
  {
    hour -= 12;
    indicator = 'pm';
  }
  else
    indicator = 'am';

  // Add leading 0 to minutes, if necessary (e.g. 09 minutes)
  if (min < 10)
    min = '0' + min;

  // Convert seconds (1 2 3...) to countdown (59 58 57...)
  countdown = (60 - countdown);

  // Create string that will be displayed
  displaytime = hour + ':' + min + ' ' + indicator + ' - ' + countdown + ' seconds';

Phần lớn mã trong Liệt kê 18 có tính tự giải thích. Điểm duy nhất đáng đề cập đến là mã nơi bạn chuyển đổi các giây đồng hồ sang một giá trị đếm ngược. Thay cho việc hiển thị các giây đếm tăng dần (1, 2, 3…), như hầu hết tất cả các đồng hồ đang chạy, bạn chọn sử dụng một bộ định thời đếm ngược (60, 59, 58…). Việc đảo ngược đơn giản như việc trừ giá trị hiện tại của các giây khỏi giá trị 60. Bạn có thể trông thấy kết quả cuối cùng bằng cách xem lại Hình 14.

Hiển thị đồng hồ

Một vài dòng cuối cùng của mã (xem Liệt kê 19) gán chuỗi hiển thị mà bạn đã tạo và gọi ra hàm showClock() gán chuỗi hiển thị mà bạn đã tạo và gọi ra hàm setInterval() để cập nhật hiển thị, showClock() Với việc gọi setInterval() từng giây một, showClock() được gọi, đến lượt nó lại cập nhật thời gian trong công cụ. Một giá trị báo trước đáng đề cập đến ở đây là: mặc dù làm việc rất trơn tru, đây không phải là phương tiện hay nhất (hoặc hiệu quả nhất) để hiển thị một đồng hồ trong một trình duyệt. Tuy nhiên, nhằm ý định trình diễn các điểm cơ bản của công cụ, đủ để nói rằng mã này sẽ làm được.

Liệt kê 19. Mã để hiển thị và cập nhật đồng hồ
// Display time
clock.innerHTML = displaytime;

...

// Every second (1000 milliseconds), update the window/clock.
window.setInterval("showClock()", 1000);

Những thứ tiếp theo

Hướng dẫn này đã bao hàm rất nhiều nền cơ sở, từ việc đăng ký một trang Web Google cho đến việc viết ra công cụ đầu tiên của bạn. Bây giờ bạn đã quen với các kiểu dữ liệu nội dung sẵn có, các mục của tệp XML mà tạo nên một công cụ, và cách kê khai và truy cập các ý thích của người sử dụng. Nền này là cần thiết, vì nó cung cấp các cơ sở mà bạn cần khám phá ra các đặc tính tân tiến hơn của công cụ phát triển này.

Tiếp tục loạt bài này

Phần 2 của hướng dẫn công cụ này sẽ xây dựng trên những thứ mà bạn đã tìm hiểu cho đến nay. Danh sách sau đây là một cái nhìn lướt qua những gì bạn sẽ nghiên cứu kỹ lưỡng khi bạn khám phá nhiều hơn nữa về việc tạo các công cụ Google:

  • Công cụ của nhà phát triển.
  • Giao diện người sử dụng được đánh dấu.
  • Hỗ trợ kéo và thả.
  • Các thông báo nhỏ.
  • Các mách nước và mẹo.

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=Nguồn mở, Công nghệ Java
ArticleID=457904
ArticleTitle=Xây dựng các công cụ Google, Phần 1: Cơ sở của các công cụ Google
publish-date=12182009