Sau khi để ra khoảng một tuần để thử giao diện lập trình tìm kiếm không đồng bộ (Ajax API Search) của Google, tôi đem những tìm tòi ra đây để chia xẻ với bạn, hy vọng chúng sẽ hữu ích cho bạn.
Nói chung là tôi dùng cách học từ bước căn bản nhất, coi thử coi Google dọn cỗ cho ta ăn ra sao. May mắn thay, trang nhà Google cho rất nhiều thí dụ. Tôi lấy ngay cái đầu tiên đem về làm thử. Nó có tên là "Hello World", bắt chước tên gọi của bài minh họa lập trình đầu tiên của hai ông Brian Kernighan và Dennis Richie, đồng tác giả quyển "Lập trình với Ngôn ngữ C" rất nổi tiếng.
Các bạn có thể xem các thí dụ về các bài tập theo liên kết sau:
http://code.google.com/apis/ajaxsearch/samples.html
Mã dùng để viết "Hello World" cũng rất đẹp và gọn ghẽ:
http://www.google.com/uds/samples/apidocs/helloworld.html
Tôi muốn đem bài tập trên về trên máy tôi, nhưng biến đổi đôi chút, tôi muốn nó trở thành một phụ tùng (widget) để sau này đổi từ mẫu thiết kế này sang thiết kế khác dễ dàng hơn. Tôi thấy phụ tùng "HTML/JavaScript" rất thích hợp, vì nó cho phép ta sau này thay đổi từ hay chỗ tìm kiếm mà không phải lục lọi trong mã nguồn.
Đây là kết quả trên máy:
http://deconstructingbetablogger.blogspot.com/
Nếu bạn thích làm thử thì hãy theo sát các chỉ dẫn sau:
1. Lấy một chìa khóa:
http://code.google.com/apis/ajaxsearch/signup.html
2. Tạo một phụ tùng "HTML/Javascript":
Đi tới Template->Page Elements. Ấn vào nút "Add Page Element", rồi ấn vào "HTML/JavaScript". Điền vào một địa chỉ trong ô tựa bài, rôi một từ tìm kiếm trong phần nội dung, rồi ấn vào "save changes" (lưu trữ những thay đổi.)
3. Tới Template->Edit HTML (nhớ ấn vào nút đề Expand Template Widgets)
a) Thêm vào dòng mã in đậm:
]]></b:skin>
<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>
</head>
b) Tìm phụ tùng bạn vừa làm ở bước 2, có tên đại khái như "HTML1", rồi thay hoàn toàn đoạn mã (thay luôn cả hai thẻ <b:widget> and </b:widget> ) với mã sau:
<b:widget id='HTML1' locked='false' title='New York, NY' type='HTML'>
<b:includable id='main'>
<div id='searchcontrol'>Loading .....</div>
<script src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAA3JLs6Hnniw7MynpQ' type='text/javascript'/>
<script type='text/javascript'>
var local="<data:title/>";
var initSearch="<data:content/>";
// Create a search control
var searchControl = new GSearchControl();
// Add in a full set of searchers
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
// Set the Local Search center point
localSearch.setCenterPoint(local);
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));
// execute an inital search
searchControl.execute(initSearch);
</script>
</b:includable>
</b:widget>
c) thế đoạn chữ in đậm ở bước 3b với cái khóa bạn xin được ở bước 1.
Đây là kết quả trên trang thử của tôi.
Bây giờ nếu bạn muốn đổi chỗ hay từ tìm kiếm (New York, NY và World Trace Center,) hãy sửa nó ở trong giao diện Page Element, mà khỏi phải sửa bằng cách lục lọi trong mã nguồn của trang thiết kế.
Hoctro
10/12/06