รู้จัก Google Web Search API

Google Web Search API คืออะไร

Google ได้จัดเตรียม API ให้เราใช้งานเพื่อสำหรับการค้นหาใน Google อย่างกับที่เราทำในเว็บของ Google นั่นเละครับ เช่นถ้าสมมติว่าเราต้องการเอาระบบค้นหาของ Google มาใช้งานในโปรแกรมของเราไม่ว่าจะเป็น Web Application หรือ Window Application เราก็สามารถที่จะเอาผลลัพธ์ที่ Google แสดงมาแสดงบนโปรแกรมเราได้เหมือนกันครับ โดยทาง Google เองได้จัดเตรียมการเรียกใช้งาน API นี้ได้ 2 วิธีด้วยกันคือ

เรียกใช้งานผ่านทาง JavaScript
เรียกใช้งานผ่านทาง URL

Javascript

เรามาเริ่มที่การใช้งานผ่าน Javascript กันก่อนดีกว่าครับ โดยในขั้นแรก เราจะเรียนรู้จากตัวอย่างข้างล่างก่อนนะครับ เดียวผมจะอธิบายว่าแต่ละส่วนของโค็ดทำงานอย่างไรบ้าง

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Hello World - Google  Web Search API Sample</title>
    <script src="https://www.google.com/jsapi"
        type="text/javascript"></script>
    <script language="Javascript" type="text/javascript">
    //<!
    google.load('search', '1');

    function OnLoad() {
      // Create a search control
      var searchControl = new google.search.SearchControl();

      // Add in a full set of searchers
      searchControl.addSearcher(new google.search.WebSearch());
      searchControl.addSearcher(new google.search.VideoSearch());
      searchControl.addSearcher(new google.search.BlogSearch());
      searchControl.addSearcher(new google.search.NewsSearch());
      searchControl.addSearcher(new google.search.ImageSearch());
      searchControl.addSearcher(new google.search.BookSearch());
      searchControl.addSearcher(new google.search.PatentSearch());

      // tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"));

      // execute an inital search
      searchControl.execute("pstudiodev");
    }
    google.setOnLoadCallback(OnLoad);

    //]]>
    </script>
  </head>
  <body>
    <div id="searchcontrol">Loading</div>
  </body>
</html>

เมื่อเปิดดูไฟล์ HTML นี้ใน Browser ก็จะได้รูปร่างหน้าตาประมาณนี้ครับ

ทีนี้เรามาดูกันดีกว่าครับว่าแต่ละส่วนของโค๊ดทำงานอย่างไรบ้างนะครับ
เริ่มที่ส่วนแรกเป็นการเรียกไฟล์ API ของ Google ออกมาเพื่อใช้งานในหน้าเว็บเพจของเราก่อน

<script src="https://www.google.com/jsapi" 
           type="text/javascript"></script>

จากนั่นเราก็ทำงานโหลดโมดูล API ของ Google ที่เราต้องการใช้งานขึ้นมานะครับ เช่นในตัวอย่างในโค็ดนี้เราได้โหลดโมดูลการ ค้นหา โดยโหลดเวอร์ชั่น V1 ของ API นะครับ อันที่จริงแล้วเราสามารถจะโหลดโมดูลไหนเพิ่มก็ได้นะครับ เพียงแค่เพิ่มการโหลดเข้าไป เช่นต้องการใช้งาน API ของ Google Map ก็แค่ใส่ "maps", "2" ก็คือการโหลด Google Map API Version 2 นั่นเองครับ

แต่ในที่นี้เรากำลังสนใจเพียงแค่ผลลัพธ์การค้นหาจาก Google เท่านั่นเราจึงโหลดแค่ "search", "1" เท่านั่นครับ

google.load('search', '1');

ในส่วนของฟังก์ชั่น OnLoad จะถูกเรียกเมื่อเว็บเพจนี้ถูกโหลดครับ โดยคนที่โหลดมันก็คือ google.setOnLoadCallback(OnLoad); นั่นเองครับ ที่นี้เรามาดูเป็นส่วนๆ ในฟังก์ชั่น OnLoad กันดีกว่านะครับ

     function OnLoad() {
      // Create a search control
      var searchControl = new google.search.SearchControl();

      // Add in a full set of searchers
      searchControl.addSearcher(new google.search.WebSearch());
      searchControl.addSearcher(new google.search.VideoSearch());
      searchControl.addSearcher(new google.search.BlogSearch());
      searchControl.addSearcher(new google.search.NewsSearch());
      searchControl.addSearcher(new google.search.ImageSearch());
      searchControl.addSearcher(new google.search.BookSearch());
      searchControl.addSearcher(new google.search.PatentSearch());

      // tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"));

      // execute an inital search
      searchControl.execute("pstudiodev");
    }

ส่วนแรกเราจะต้องสร้าง SearchControl ขึ้นมาตัวหนึ่งครับ ส่วนไอ้ตัว SearchControl มันคืออะไร จริงๆ แล้วมันก็คือตัว Control ที่ Google ได้สร้างเอาไว้เพื่อทำให้เราทำงานได้ง่ายขึ้นโดย SearchControl จะทำหน้าที่ในการจัดการเกี่ยวกับ

การจัดการเงื่อนไขในการค้นหาว่าต้องการจะค้นหาในหมวดหมู่ไหนบ้าง อะไรอย่างนี้ครับ ดังจะเห็นได้จาก ว่ามีการเพิ่มหมวดหมู่ที่เราต้องการค้นหาจาก เว็บ วีดีโอ ข่าว เป็นต้น
การแสดงผลจากการค้นหาว่าจะแสดงผลยังไง แบบไหน

จัดการหมวดหมู่ในการค้นหาเช่น

      // Add in a full set of searchers
      searchControl.addSearcher(new google.search.WebSearch());
      searchControl.addSearcher(new google.search.VideoSearch());
      searchControl.addSearcher(new google.search.BlogSearch());
      searchControl.addSearcher(new google.search.NewsSearch());
      searchControl.addSearcher(new google.search.ImageSearch());
      searchControl.addSearcher(new google.search.BookSearch());
      searchControl.addSearcher(new google.search.PatentSearch());

จัดการการแสดงผลเช่นด้านล่าง สามารถอธิบายได้ว่าเมื่อผลลัพธ์จากการค้นหาได้มาจาก Google แล้วตัว SearchControl เองจะนำเอาผลลัพธ์ทั้งหมดนั่นใส่ลงใน HTML Element ที่ชื่อว่า searchcontrol ดังเช่น <div id="searchcontrol">Loading</div>

      // tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"));

ต่อมาเราก็แค่เพียงเซ็ตว่า Keyword อะไรที่เราต้องการค้นหาจาก Google โดยเราจะใช้คำสั่งด้านล่างในการสั่งให้ตัว SearchControl ทำการค้นหา

// execute an inital search
searchControl.execute("pstudiodev");

หลังจากนั่นส่วนสุดท้ายก็คือส่วนที่จะเรียกใช้งานฟังก์ชั่น OnLoad เพื่อสั่งให้ Google API เริ่มทำงานเพียงเท่านี้เองครับ

google.setOnLoadCallback(OnLoad);

ตัว Google API เองยังมีลูกเล่นให้ใช้งานอีกเยอะนะครับยังไงลองดูใน Google API Link ด้านล่างอีกทีนะครับ ส่วนถ้าผุ้อ่านท่านใดที่ต้องการเพียงแค่ Google Search Result อย่างเดียวโดยไม่ให้ Google จัดการการแสดงผลให้ Google API เองก็สามารถทำได้นะครับ แต่อาจจะต้องศึกษาเพิ่มเติม เดียวผมว่างเมื่อไรจะมาเขียนเพิ่มในส่วนนี้นะครับ

URL

จากการเรียกใช้งานผ่าน Javascript ด้านบนจะเห็นได้เลยนะครับว่าไม่ยากอะไร แต่ถ้าเกิดโปรแกรมที่เขียนมันไม่ใช่ Web Application ละครับซึ่งไม่มี Javascript เราจะทำไง ไม่ยากครับเราสามารถเรียกใช้ผ่านทาง URL แล้วเราก็จะได้ข้อมูลที่เราค้นหาเลยครับ (จริงๆ แล้วเราก็สามารถใช้วิธีนี้สำหรับ Javascript ด้วยเช่นกัน เพราะฉะนั่น Javascript จะได้ประโยช์นมากหน่อยนะครับ) ดังในตัวอย่างต่อไปนี้ผมจะขอยกตัวอย่างด้วย ภาษา C# นะครับ

เรามาดูเรื่องแรกกันก่อนดีกว่าครับ เรื่องเกี่ยวกับข้อมูลที่ส่งกลับมาจาก Google นั่นจะเป็นรูปแบบของ JSON ตัวเจ้า JSON นี้ก็ทำงานคล้ายๆ กับ XML นั่นเละครับเพียงแต่มันเป็นรูปแบบของข้อมูลอีกแบบหนึ่งเท่านั่นเองครับ โดย Google จะเตรียม API Link ที่เราสามารถใช้งานได้ที่

https://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=pstudiodev

q=pstudiodev คือคนที่เราต้องการค้นหาครับ เช่นถ้าเราต้องการค้นหาว่า C#.Net เราก็แค่ใส่เป็น q=c#.Net เพียงเท่านี้ครับ
ต่อไปเราจะมาดูข้อมูลที่ Google ส่งกลับมานะครับจะได้ข้อมูลเป็น JSON ดังด้านล่างครับ

{
 "responseData": 
 {
  "results": [
   {
    "GsearchResultClass":"GwebSearch",
    "unescapedUrl":"http://pstudiodev.blogspot.com/",
    "url":"http://pstudiodev.blogspot.com/",
    "visibleUrl":"pstudiodev.blogspot.com",
    "cacheUrl":"http://www.google.com/search?q\u003dcache:JOQ1uGC9nugJ:pstudiodev.blogspot.com",
    "title":"\u003cb\u003epStudioDev\u003c/b\u003e, Software \u0026amp; Network Development",
    "titleNoFormatting":"pStudioDev, Software \u0026amp; Network Development",
    "content":"17 เม.ย. 2012 \u003cb\u003e...\u003c/b\u003e \u003cb\u003epStudioDev\u003c/b\u003e, Software \u0026amp; Network Development. C++, C#, VB.Net, PHP, Java,   Javascript, AJAX, JQuery, HTML5, WPF, Linux, Cisco, Server and \u003cb\u003e...\u003c/b\u003e"
   },
   {
    "GsearchResultClass":"GwebSearch",
    "unescapedUrl":"http://pstudiodev.blogspot.com/2012/04/visual-studio-2010.html",
    "url":"http://pstudiodev.blogspot.com/2012/04/visual-studio-2010.html",
    "visibleUrl":"pstudiodev.blogspot.com",
    "cacheUrl":"http://www.google.com/search?q\u003dcache:EY7CFVnPV9gJ:pstudiodev.blogspot.com",
    "title":"\u003cb\u003epStudioDev\u003c/b\u003e, Software \u0026amp; Network Development: ทริกในการดีบักโดย \u003cb\u003e...\u003c/b\u003e",
    "titleNoFormatting":"pStudioDev, Software \u0026amp; Network Development: ทริกในการดีบักโดย ...",
    "content":"8 เม.ย. 2012 \u003cb\u003e...\u003c/b\u003e ทริกในการดีบักโดย Visual Studio 2010. วันนี้ผมจะมาบอกเล่าวิธีที่จะทำให้เราสามารถดีบัค  โปรแกรมของเราได้ง่ายๆ โดยการใช้ Visual Studio 2010 นะครับ \u003cb\u003e...\u003c/b\u003e"
   },
   {
    "GsearchResultClass":"GwebSearch",
    "unescapedUrl":"http://www.facebook.com/PStudioDev",
    "url":"http://www.facebook.com/PStudioDev",
    "visibleUrl":"www.facebook.com",
    "cacheUrl":"http://www.google.com/search?q\u003dcache:ahDJlHJ-mBEJ:www.facebook.com",
    "title":"PStudio Development Store | Facebook",
    "titleNoFormatting":"PStudio Development Store | Facebook",
    "content":"Facebook is a social utility that connects people with friends and others who work  , study and live around them. People use Facebook to keep up with friends, \u003cb\u003e...\u003c/b\u003e"
   },
   {
    "GsearchResultClass":"GwebSearch",
    "unescapedUrl":"http://www.facebook.com/PStudioDev/posts/173792722743228",
    "url":"http://www.facebook.com/PStudioDev/posts/173792722743228",
    "visibleUrl":"www.facebook.com",
    "cacheUrl":"http://www.google.com/search?q\u003dcache:4UgMQcH2sTIJ:www.facebook.com",
    "title":"วันนี้เรามาดูวิธีการ... | Facebook",
    "titleNoFormatting":"วันนี้เรามาดูวิธีการ... | Facebook",
    "content":"Facebook is a social utility that connects people with friends and others who work  , study and live around them. People use Facebook to keep up with friends, \u003cb\u003e...\u003c/b\u003e"
   }
  ],
  "cursor":
  {
   "resultCount":"29",
   "pages": [
    {
     "start":"0",
     "label":1
    },
    {
     "start":"4",
     "label":2
    },
    {
     "start":"8",
     "label":3
    },
    {
     "start":"12",
     "label":4
    },
    {
     "start":"16",
     "label":5
    },
    {
     "start":"20",
     "label":6
    },
    {
     "start":"24",
     "label":7
    },
    {
     "start":"28",
     "label":8
    }
   ],
    
   "estimatedResultCount":"29",
   "currentPageIndex":0,
   "moreResultsUrl":"http://www.google.com/search?oe\u003dutf8\u0026ie\u003dutf8\u0026source\u003duds\u0026start\u003d0\u0026hl\u003den\u0026q\u003dpstudiodev",
   "searchResultTime":"0.12"
  }
 }, 
 "responseDetails": null, 
 "responseStatus": 200
}

เห็นแล้วอาจจะดูมันยุ่งๆ นะครับ แต่ที่จริงแล้วมันมีที่สำคัญไม่กี่อย่างเองครับ ในที่นี้ผมขอสนใจเพียงแค่ URL, Title และ Content เท่านั่นนะครับ หลังจากที่เราได้ Format ของข้อมูลที่ Google ส่งมาให้เราแล้วเราก็มาเริ่มลงมือเขียนโปรแกรมเพื่ออ่านข้อมูลเหล่านี้กันเลย โดยการพิมพ์โค็ดด้านแล้วแล้วกด Run เลยครับ

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Net;
using System.IO;
using Newtonsoft.Json;

namespace CSHARPJSON
{
    class Program
    {
        static void Main(string[] args)
        {
            // Request search data from Google.
            WebRequest myRequest = WebRequest.Create("https://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=pstudiodev");
            WebResponse myResponse = myRequest.GetResponse();
            
            // Convert stream to string.
            StreamReader r = new StreamReader(myResponse.GetResponseStream());
            string strResponse = r.ReadToEnd();

            // Parse by JSON parser.
            Newtonsoft.Json.Linq.JObject obj = Newtonsoft.Json.Linq.JObject.Parse(strResponse);
            foreach(var o in obj["responseData"]["results"])
            {
                string url = (string)o["url"];
                string title = (string)o["title"];
                string content = (string)o["content"];
                Console.WriteLine("URL: " + url);
                Console.WriteLine("Title: " + title);
                Console.WriteLine("Content: " + content);
                Console.WriteLine("-------------------------------\n");
            }
            Console.Read();
        }
    }
}

เมื่อกด Run แล้วผลลัพธ์จะได้ประมาณนี้ครับ

จากตัวอย่างเราจะเห็นได้ว่านะครับ โปรแกรมจะไปทำการดึงข้อมูล JSON จาก Key ที่ชื่อว่า url, title และ content จากข้อมู,ที่ส่งกลับมาจาก Google นะครับ ที่นี้เราก็สามารถที่จะน้ำข้อมูลเหล่านี้ไปเขียนโปรแกรมต่อ หรือว่าจะไปใช้งานอะไรก็สุดแล้วแต่แล้วละครับ ส่วนเรื่องรายละเอียดสำหรับการใช้งาน JSON กับ .NET นี้เดียวผมมีเวลาว่างจะเขียนเป็นอีกบทความนะครับ เรื่องมันยาวครับ :-)

ถ้าอ่านแล้วชอบอย่าลืมช่วยกด Like ที่ http://www.facebook.com/PStudioDev ด้วยนะครับ ขอบคุณครับ

Reference: https://developers.google.com/web-search/docs/, https://developers.google.com/loader/

3 comments

Balas

allaremore-arm

30 January 2013 at 16:47

ผมสงสัยอยู่อย่าง1หน่ะครับ ในกรณีแรก ถ้าเกิดว่าเราไม่ได้กำหนด keyword ไว้ แล้วพอเวลาผู้ใช้กรอก keyword มาแล้วเราต้องการนำ keyword นั่นไปแปลงเป็นค่าๆหนึ่งก่อน จะสามารถทำได้อย่างไรครับ ตัวอย่างนะครับ

เช่นว่า ผู้ใช้กรอก keyword มาว่า "ผู้หญิง" แต่พอเวลาไปค้นหาจริงๆ เราต้องการแปลงคีย์ word นี้ว่า "ผู้หญิงหลายใจ" ประมาณนี้อ่าครับ

pStudioDev

30 January 2013 at 23:23

ก็น่าจะแค่เอา string "ผู้หญิง" มาต่อกับคำว่า "หลายใจ" แต่เราต้องทำ Form เองนะครับถ้าใช้จาก Google API ที่ให้มาจะปรับแต่งไม่ได้มากครับต้องเขียน Form เองจากนั่นก็ใช้

searchControl.execute("ผู้หญิง" + "หลายใจ");

เท่านี้เองครับ

Unknown

1 September 2014 at 00:59

พี่คะ ถ้าต้องการให้ google แสดงผลลัพธ์ มาแค่ 20 อันดับ สามารถทำได้อย่างไรคะ

Google Web Search API คืออะไร

Javascript

Share this

3 comments