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
8 comments:
Hi Hogashi,
Nếu thực là vì cái onLoad mà làm hư navbar, thì trong widget ta bỏ luôn cái fungtion là xong, khỏi phải gọi chi cho lôi thôi, để tôi làm thử nha.
Còn về việc dịch thì tôi đã tự hứa là mỗi khi viết xong một bài tiếng Anh, chỉnh sửa hoàn chỉnh rồi thì dịch nó lại tiếng Việt luôn, cũng là một hình thức ôn lại cách viết văn tiếng mình. Lúc trước hoctro nghĩ không có ai coi bài tiếng việt hết, nay thì có người coi như bạn và chuyenvanganh chẳng hạn, dịch mới bõ công. :-)
Bạn Bảo Hoàng nói sao mình không hiểu? Blogger là để tạo blog chứ không phải là website cá nhân đâu bạn ạ. Nhưng nếu bạn biết chút ít về HTML và đã quen với các thành phần của Blogger thì bạn cũng dễ dàng biến trang blog riêng của mình thành một website cá nhân được đấy. Bạn có thế tham khảo thêm một số mẹo làm blog của anh hoctro để làm cho trang blog của mình thêm "hấp dẫn" hơn.
Have Fun ^^
À anh hoctro ơi, hôm nay em search trên google em thấy anh có nhắc đến em trong trang hoctro's place, em cảm thấy rất vui ^^
Bây giờ thì em hiểu rồi, thay vì đặt các đoạn mã đó trong hàm OnLoad thì ta nên để nó ra ngoài thì tốt hơn, để em test thử cho blog của em mới được.
Anh hoctro ơi, em dự định tạo 2 liên kết với tên là "Danh sách" và "Tab" dùng cho AJAX Search, khi người dùng click vào Danh sách thì kết quả sẽ hiển thị dạng một danh sách còn nếu click vào Tab thì kết quả sẽ được trình bày theo từng tab. Nhưng khó khăn là khi tìm được kết quả mà muốn chuyển sang kiểu hiển thị khác thì kết quả vừa tìm được lại biến mất và giá trị trong khung search cũng mất. Vậy có cách nào giữ lại kết quả mà chỉ hiển thị nó theo cách khác được không ạ?
Hogashi,
Cái này phải dùng Javascipt làm một cookie. Không khó nhưng hoctro chưa có dịp đọc code mẫu trong sách để thử. Từ từ rồi sẽ xem tới cái cookie hack này nhé.
Hogashi cứ đưa code lên để tôi coi thử nhé.
Trong tag <div id='searchcontrol'> em thêm vào thuộc tính onkeypress để gọi
hàm getChar(), nó như sau:
<div id='searchcontrol' onkeypress='getChar(envent)'>
Đây là code của hàm getChar, em nghĩ tốt nhất nên đặt ở phần <head>...</head>:
<script language='javascript'>
var str;
str = '';
function getChars(e)
{
var keynum;
if(window.event) // IE
{
keynum = e.keyCode;
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which;
}
str += String.fromCharCode(keynum);
return;
}
</script>
Chỉ như vậy thôi, sau đó ta viết một code để thay đổi chế độ hiển thị của
GSearch (cái này trong cái examples của nó có nên em sẽ không nói về phần này)
và gọi phương thức execute thực thi biến str: objGSearch.execute(str). Nhưng mà
rắc rối ở chỗ phải thiết lập lại biến str cho thành chuỗi rỗng nếu muốn tìm kiếm
với từ khóa mới và em chưa thử search với tiếng Việt.
Mình đã áp đụng thành công hướng dẫn của bạn vào trong blog của mình. Cảm ơn hoctro.
Post a Comment