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( "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 [...]... 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... 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ụ. .. 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. .. 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... 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ụ,... 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... 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 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. .. 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à... 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... ra các ý thích Mộ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 đó Quy định liệu ý thích được yêu cầu là yêu cầu No cần thiết do người ta thiết lập không (tức không rỗng) Khi sử dụng một kiểu nội dung url, sử urlparam No 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ụ . 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. 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. 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