• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Google
 

Google

on

  • 903 views

 

Statistics

Views

Total Views
903
Views on SlideShare
903
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Google Presentation Transcript

  • Google Custom Search Rashi Dhing
  • 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!
  • The Google APIs
  • 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
  • 3 ways to use Google Custom search• Google snippet• Google Javascript API (client side)• Google Python API (server side)
  • 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/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>
  • 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>
  • 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>
  • Result
  • 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
  • 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
  • The Google Javascript API
  • Get your Google API key from the API Console
  • 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){ ....}
  • 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){ ....}
  • 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){ ....}
  • 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){ ....}
  • 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 ....}
  • 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){ 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();}
  • 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();}
  • 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}
  • 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 a Cross Domain error
  • 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
  • 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>
  • 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>
  • 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>
  • 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();}
  • Result
  • 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
  • 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
  • The Google Python API
  • 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
  • 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)