Google Custom Search      Rashi Dhing
Our web application today• Build  a web application for searching    SML definitions from the SML Basis    Standard Library...
The Google APIs
The Google Custom Search API➡   Use the Google Custom Search API to search over a website    or a collection of websites a...
3 ways to use Google Custom search•   Google snippet•   Google Javascript API (client side)•   Google Python API (server s...
The Google Snippet
Step 1 - go to Google Custom Search
Step 2 - sign in with your Google account
Step 3 - Setup a search engine
Step 3 - Copy the generated code snippet
Step 4 - Paste the code snippet in your page                                                                     engine/te...
Step 4 - Paste the code snippet in your page                                                                     engine/te...
Step 4 - Paste the code snippet in your page                                                                     engine/te...
Result
Advantages and Limitations✓   Very easy to use๏   The results are shown in a new tab/window➡   We want the results to be e...
Solution➡   On the client side    1. query the Google search using the Google Javascript API    2. process the results usi...
The Google Javascript API
Get your Google API key from the API Console
Search Request                                                                search/static/js/script.jsfunction client(){...
Search Request                                                                search/static/js/script.jsfunction client(){...
Search Request                                                                search/static/js/script.jsfunction client(){...
Search Request                                                                search/static/js/script.jsfunction client(){...
Search Request                                                                search/static/js/script.jsfunction client(){...
The callback method➡   The call method (called hndlr in the example) defines    what to do with the search results
Example                                                                search/static/js/script.jsfunction hndlr(response){...
Example                                                                 search/static/js/script.jsfunction hndlr(response)...
Example                                                                            search/static/js/script.jsfunction hndl...
Result
Problem๏   Nothing happens when you click on the link➡   No bug shown except ...
Problem๏   Nothing happens when you click on the link➡   No bug shown except ...                                   This is...
Cross Domain restriction (aka Same Origin Policy) ”The policy permits scripts running on pages originating from the same s...
Solution - use an iframe•   An <iframe> can contains another HTML document possibly    coming from another domain➡   Like ...
Solution - use an iframe•   An <iframe> can contains another HTML document possibly    coming from another domain➡   Like ...
Solution - use an iframe•   An <iframe> can contains another HTML document possibly    coming from another domain➡   Like ...
Solution to our problem                                     search/static/js/script.jsfunction hndlr(response){     page =...
Result
Advantages and Limitations✓   Using an iframe is secure๏   We cannot modify the page contained in the iframe➡   We want th...
Solution➡   On the server side    1. query the Google search using the Python Google API    2. process the results using P...
The Google Python API
The Python Google API•   Download the last release from        http://code.google.com/p/google-api-python-client/downloads...
Example                                                                  search2/views.pyfrom apiclient.discovery import b...
Upcoming SlideShare
Loading in …5
×

Google

1,008 views
920 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,008
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Google

    1. 1. Google Custom Search Rashi Dhing
    2. 2. Our web application today• Build a web application for searching SML definitions from the SML Basis Standard Library✓ We will use Google custom search for building this app ... because we know you like SML!
    3. 3. The Google APIs
    4. 4. The Google Custom Search API➡ Use the Google Custom Search API to search over a website or a collection of websites and to embed the results in your web application
    5. 5. 3 ways to use Google Custom search• Google snippet• Google Javascript API (client side)• Google Python API (server side)
    6. 6. The Google Snippet
    7. 7. Step 1 - go to Google Custom Search
    8. 8. Step 2 - sign in with your Google account
    9. 9. Step 3 - Setup a search engine
    10. 10. Step 3 - Copy the generated code snippet
    11. 11. Step 4 - Paste the code snippet in your page engine/templates/engine/index.html...<body> <div id="cse-search-form" style="width: 100%;">Loading</div> <script src="//www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load(search, 1, {language : en, style : google.loader.themes.SHINY}); google.setOnLoadCallback(function() {var customSearchControl = new google.search.CustomSearchControl(004982958264606934300:2o52rkqdfaw);customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);var options = new google.search.DrawOptions();options.setSearchFormRoot(cse-search-form);customSearchControl.draw(cse, options); }, true); </script> <div id="cse" style="width:100%;"></div><body></html>
    12. 12. Step 4 - Paste the code snippet in your page engine/templates/engine/index.html... Your Custom Search Identifier<body> (aka CX or CSEid) <div id="cse-search-form" style="width: 100%;">Loading</div> <script src="//www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load(search, 1, {language : en, style : google.loader.themes.SHINY}); google.setOnLoadCallback(function() {var customSearchControl = new google.search.CustomSearchControl(004982958264606934300:2o52rkqdfaw);customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);var options = new google.search.DrawOptions();options.setSearchFormRoot(cse-search-form);customSearchControl.draw(cse, options); }, true); </script> <div id="cse" style="width:100%;"></div><body></html>
    13. 13. Step 4 - Paste the code snippet in your page engine/templates/engine/index.html... Your Custom Search Identifier<body> (aka CX or CSEid) <div id="cse-search-form" style="width: 100%;">Loading</div> <script src="//www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load(search, 1, {language : en, style : google.loader.themes.SHINY}); google.setOnLoadCallback(function() {var customSearchControl = new google.search.CustomSearchControl(004982958264606934300:2o52rkqdfaw);customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);var options = new google.search.DrawOptions();options.setSearchFormRoot(cse-search-form);customSearchControl.draw(cse, options); }, true); </script> The div element where to <div id="cse" style="width:100%;"></div> show the results<body></html>
    14. 14. Result
    15. 15. Advantages and Limitations✓ Very easy to use๏ The results are shown in a new tab/window➡ We want the results to be embedded in the same page
    16. 16. Solution➡ On the client side 1. query the Google search using the Google Javascript API 2. process the results using Javascript 3. show the results in the page
    17. 17. The Google Javascript API
    18. 18. Get your Google API key from the API Console
    19. 19. Search Request search/static/js/script.jsfunction client(){ $(#result).html(<script src="https://www.googleapis.com/customsearch/v1? key=AIzaSyDBrtHVzXjrvKus_qGpPbTm9rJppIhjxvM& cx=004982958264606934300:2o52rkqdfaw& q=+$(#inp).val()+& callback=hndlr"></script>);}function hndlr(response){ ....}
    20. 20. Search Request search/static/js/script.jsfunction client(){ $(#result).html(<script src="https://www.googleapis.com/customsearch/v1? key=AIzaSyDBrtHVzXjrvKus_qGpPbTm9rJppIhjxvM& Your API key cx=004982958264606934300:2o52rkqdfaw& q=+$(#inp).val()+& callback=hndlr"></script>);}function hndlr(response){ ....}
    21. 21. Search Request search/static/js/script.jsfunction client(){ $(#result).html(<script src="https://www.googleapis.com/customsearch/v1? key=AIzaSyDBrtHVzXjrvKus_qGpPbTm9rJppIhjxvM& Your API key cx=004982958264606934300:2o52rkqdfaw& q=+$(#inp).val()+& Your custom search engine id callback=hndlr"></script>);}function hndlr(response){ ....}
    22. 22. Search Request search/static/js/script.jsfunction client(){ $(#result).html(<script src="https://www.googleapis.com/customsearch/v1? key=AIzaSyDBrtHVzXjrvKus_qGpPbTm9rJppIhjxvM& Your API key cx=004982958264606934300:2o52rkqdfaw& q=+$(#inp).val()+& Your search query Your custom search engine id callback=hndlr"></script>);}function hndlr(response){ ....}
    23. 23. Search Request search/static/js/script.jsfunction client(){ $(#result).html(<script src="https://www.googleapis.com/customsearch/v1? key=AIzaSyDBrtHVzXjrvKus_qGpPbTm9rJppIhjxvM& Your API key cx=004982958264606934300:2o52rkqdfaw& q=+$(#inp).val()+& Your search query Your custom search engine id callback=hndlr"></script>);}function hndlr(response){ Your callback method ....}
    24. 24. The callback method➡ The call method (called hndlr in the example) defines what to do with the search results
    25. 25. Example search/static/js/script.jsfunction hndlr(response){ page = “” for (var i = 0; i < response.items.length; i++) { var item = response.items[i]; var link = item.link; page += "<br/><div><a onclick="go("+link+");" href=#>" +item.htmlTitle +"</a><br/>" +item.htmlSnippet+ + "<br/><a onclick="go("+link+");" href=#>" +link+"</a></div><br/>"; } $(#result).html(page); $(#result).show();}
    26. 26. Example search/static/js/script.jsfunction hndlr(response) For each search result ...{ page = “” for (var i = 0; i < response.items.length; i++) { var item = response.items[i]; var link = item.link; page += "<br/><div><a onclick="go("+link+");" href=#>" +item.htmlTitle +"</a><br/>" +item.htmlSnippet+ + "<br/><a onclick="go("+link+");" href=#>" +link+"</a></div><br/>"; } $(#result).html(page); $(#result).show();}
    27. 27. Example search/static/js/script.jsfunction hndlr(response) For each search result ...{ page = “” for (var i = 0; i < response.items.length; i++) { var item = response.items[i]; var link = item.link; page += "<br/><div><a onclick="go("+link+");" href=#>" +item.htmlTitle +"</a><br/>" +item.htmlSnippet+ + "<br/><a onclick="go("+link+");" href=#>" +link+"</a></div><br/>"; } $(#result).html(page); ... display the search result but change the target url $(#result).show(); address so that the link opens in the current page rather than opening a new one}
    28. 28. Result
    29. 29. Problem๏ Nothing happens when you click on the link➡ No bug shown except ...
    30. 30. Problem๏ Nothing happens when you click on the link➡ No bug shown except ... This is a Cross Domain error
    31. 31. Cross Domain restriction (aka Same Origin Policy) ”The policy permits scripts running on pages originating from the same site to access each others methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites.” Wikipedia
    32. 32. Solution - use an iframe• An <iframe> can contains another HTML document possibly coming from another domain➡ Like a webpage inside a webpage✓ An iFrame is acting like a fence between the two documents <html> ... <iframe> <html> </html> </iframe> ... </html>
    33. 33. Solution - use an iframe• An <iframe> can contains another HTML document possibly coming from another domain➡ Like a webpage inside a webpage✓ An iFrame is acting like a fence between the two documents <html> ... Javascript code from the inner document cannot <iframe> access the resources from the main document <html> </html> </iframe> ... </html>
    34. 34. Solution - use an iframe• An <iframe> can contains another HTML document possibly coming from another domain➡ Like a webpage inside a webpage✓ An iFrame is acting like a fence between the two documents <html> ... Javascript code from the inner document cannot <iframe> access the resources from the main document <html> </html> </iframe> ... and vice versa </html>
    35. 35. Solution to our problem search/static/js/script.jsfunction hndlr(response){ page = “” for (var i = 0; i < response.items.length; i++) { var item = response.items[i]; var link = item.link; page += "<br/><div><a onclick="go("+link+");" href=#>" +item.htmlTitle +"</a><br/>" +item.htmlSnippet+ + "<br/><a onclick="go("+link+");" href=#>" +link+"</a></div><br/>"; } $(#result).html(page); $(#result).show();}
    36. 36. Result
    37. 37. Advantages and Limitations✓ Using an iframe is secure๏ We cannot modify the page contained in the iframe➡ We want the define new CSS and Javascript controls for the result document
    38. 38. Solution➡ On the server side 1. query the Google search using the Python Google API 2. process the results using Python 3. return the results to the client
    39. 39. The Google Python API
    40. 40. The Python Google API• Download the last release from http://code.google.com/p/google-api-python-client/downloads/list• Install $ tar xvzf google-api-python-client-1.0beta6.tar.gz $ cd google-api-python-client-1.0 $ python setup.py install
    41. 41. Example search2/views.pyfrom apiclient.discovery import buildfrom BeautifulSoup import BeautifulSoupimport urllib2import re@csrf_exemptdef find(request): try: service = build("customsearch","v1", developerKey="AIzaSyDBrtHVzXjrvKus_qGpPbTm9rJppIhjxvM") res = service.cse().list(q=request.POST[key], cx=004982958264606934300:2o52rkqdfaw).execute() page = urllib2.urlopen(res[items][0][link]) soup = BeautifulSoup(page).body except: return HttpResponse("error") else: return HttpResponse(soup)

    ×