Google Web Tools « Intelligrape Groovy & Grails Blogs

Archive for the ‘ Google Web Tools ’ Category

Reading Google Drive Spreadsheet in Grails Application

Posted by on May 13th, 2013

OAuth is a secure mechanism to access google drive. In order to access google drive in your application you need to register your application at the google API console at Google API Console. Read the blog  Integrating Google plus in grails application by Vishal Sahu to see how to get client ID, client secret and redirect URL but in order to read google drive spreadsheets select Drive API in the services pane while registering your project.

Now to access your Google drive in your grails application you may save the client ID, client secret and redirect URL in Config.groovy like this:

 googleDrive{
  redirectURL = "Redirect Url"
  clientId  = "Client Id"
  clientSecret= "Client Secret"
}

Add following  dependencies in BuildConfig.groovy to import jars for accessing google documents and OAuth authorization:


compile "com.google.gdata:core:1.47.1"
compile "com.google.apis:google-api-services-drive:v2-rev72-1.14.2-beta"
compile "com.google.http-client:google-http-client-jackson:1.14.1-beta"

To access authorized user’s google drive, you need to get an authorization URL. User of the application must access this URL to authorize the application with Google and generate the authorization code. Following sample action generates the required authorization URL:


def index = {
   String clientId = grailsApplication.config.googleDrive.clientId
   String redirectURL = grailsApplication.config.googleDrive.redirectURL
   //List of scopes for which to request access
   List scopes =["https://spreadsheets.google.com/feeds", "https://docs.google.com/feeds"];
   String authorizationUrl =
   new GoogleAuthorizationCodeRequestUrl(clientId , redirectURL, scopes).build();
   redirect(url: authorizationUrl)
 }

The browser will redirect to the URL you specified in the redirectUrl parameter with the authorization code. Here is a sample redirect action which sets the authorization code in session.


def callback(String code) {
  HttpSession session = request.getSession();
  session.code = code;
  setCredential()
}

The setCredential() method generates the access token and sets its value in the session.

def setCredential() {
  HttpTransport transport = new NetHttpTransport()
  JacksonFactory jsonFactory = new JacksonFactory()
  String clientId = grailsApplication.config.googleDrive.clientId
  String clientSecret = grailsApplication.config.googleDrive.clientSecret
  String redirectUrl = grailsApplication.config.googleDrive.redirectURL
  GoogleTokenResponse response = new GoogleAuthorizationCodeTokenRequest
  (transport, jsonFactory, clientId, clientSecret,session.code, redirectUrl).execute();
  GoogleCredential accessToken = new GoogleCredential.Builder()
  .setClientSecrets(clientId, clientSecret)
  .setJsonFactory(jsonFactory).setTransport(transport).build()
  .setAccessToken(response.getAccessToken()).setRefreshToken(response.getRefreshToken());
  session.accessToken = accessToken
}

Once you have the access token you may access google drive. Following code snippet returns a list of all spreadsheets. Now you can view, edit, delete and manipulate your spreadsheets using Google Spreadsheet API.


SpreadsheetService service = new SpreadsheetService("MySpreadsheetService");
service.setOAuth2Credentials(session.accessToken)
URL sheetFeedUrl = new URL("https://spreadsheets.google.com/feeds/spreadsheets/private/full")
SpreadsheetFeed feed = service.getFeed(sheetFeedUrl,SpreadsheetFeed.class);
List spreadsheets = feed.getEntries()

Following is the code for reading data from first spreadsheet from the list retrieved above:


List worksheets = spreadsheets.get(0).getWorksheets();
worksheets.each{worksheet->
URL listFeedUrl = worksheet.getListFeedUrl();
ListFeed listFeed = service.getFeed(listFeedUrl, ListFeed.class);
listFeed.entries.each{row->
row.customElements.tags.each{tag->
   println "Column: ${tag} -- Value: ${row.getCustomElements().getValue(tag)}"
  }
 }
}

Helpful links:

https://code.google.com/apis/console/

https://developers.google.com/google-apps/spreadsheets/

Hope it helps!!
Paridhi Goel
paridhi@intelligrape.com

Posted in Google Web Tools

Vimium : Mouseless browsing

Posted by on February 28th, 2013

Vimium is a chrome extension that provides keyboard shortcuts for web page navigation. So, if you also love mouseless browsing just like me, then you will definitely find vimium useful. Just to give an insight, for example, pressing f key will show a shortcut key corresponding to every link on the web page. Pressing the indicated shortcut key will open the corresponding link in the current tab (going through F will open the same link in new tab).

If you also use vim editor of linux, then you will find yourself at home with vimium. The reason is, almost all the keyboard shortcuts that are available in vim editor are also available in vimium.

Here are few shortcuts that are used quite often :


    ?       show the help dialog for a list of all available keys
    j       scroll down
    k       scroll up
    f       open a link in the current tab
    r       reload the page
    gs      view source in new tab
    /       enter find mode -- type your search query and hit enter to search or esc to cancel
    n       cycle forward to the next find match
    N       cycle backward to the previous find match
    t       opens a new empty tab

The above list is just the tip of the iceberg. We can do lot more with vimium. The full list of shortcut keys is available on the vimium details page on chrome web store. Vimium also supports regular expressions.

Vimium can be added to chrome from here

Raj Gupta
raj.gupta@intelligrape.com
@rajdgreat007

Posted in Google Web Tools

Integrating Google plus in grails application

Posted by on December 6th, 2011

In my current project, i needed to integrate Google+ in the application using server-side API. Google uses OAuth2.0 protocol for authorization when our application tries to access the data. All we require is an access token to fetch data from Google using REST calls which serves data in JSON format.

I implemented it using Web Server Applications API and thought it worth sharing.



There are basically 3 steps to fetch data from Google.



1. Register an application.

We need to register an application at Google API Console. Go to the Google console page using the link provided and create an aplication.



Steps involve in registering an application are:-



a.) Create project by providing name to the project.





b.) Turn ON the service required, in our case it is Google Plus API.





c.) Create a Oauth 2.0 Client ID.





d.) Create the OAuth 2.0 ClientId and provide the callback URL where google will send the authorization token.





e.) Note down Client ID and Client Secret as generated in the above step.





2. Obtain an Access Token from the Google Authorization Server.



Obtaining an access token involves 2 steps.



a.) Request for Authorization Code.



In this step, we will request the Google server for authorization code by providing registered application client ID in the URL to Google server.

I created an action to redirect to Goolge, when someone want to connect to google plus.

String CLIENT_ID =client_id_obtained from registered app
String CALLBACK_URL = callback_url_as_mentioned in the registered app.
String GOOGLE_PLUS_SCOPE='https://www.googleapis.com/auth/plus.me'    // scope is the permissions we are requesting.


Action code is as:

def registerOnGooglePlus = {
String authorizeUrl = "https://accounts.google.com/o/oauth2/auth?scope=${GOOGLE_PLUS_SCOPE}&
redirect_uri=${CALLBACK_URL}&response_type=code&client_id=${CLIENT_ID}&access_type=offline"
URL urlForGooglePlus = new URL(authorizeUrl)
redirect(url: urlForGooglePlus)
}

The Redirect will take user to permissions page, if the user is already logged-in or will take to login page and then permissions page.

After approving the required permissions, user will redirect back to the application’s registered Callback URL with the authorization code.





b.) Request for Access Token with the authorization code obtained from the above action.



Access Token can be received by a POST request using the Client Secret and authorization code received.

The POST call requires 5 properties to be send in the body of the request in the encoded form.


	code : The authorization code returned from the initial request
	client_id : The client_id obtained during application registration
	client_secret : The client secret obtained during application registration
	redirect_uri : The URI registered with the application 
	grant_type : authorization_code

// Sample action to receive authorization code

def callBack={
StringBuilder sb = new StringBuilder("code=");
sb.append(URLEncoder.encode(code, "UTF-8"));
sb.append("&client_id=");
sb.append(URLEncoder.encode(clientId, "UTF-8"));
sb.append("&client_secret=");
sb.append(URLEncoder.encode(clientSecret, "UTF-8"));
sb.append("&redirect_uri=");
sb.append(URLEncoder.encode(callbackUrl, "UTF-8"));
sb.append("&grant_type=");
sb.append(URLEncoder.encode('authorization_code', "UTF-8"));

String URL_TO_REQUEST_TOKEN= 'https://accounts.google.com/o/oauth2/token'

URL url = new URL(URL_TO_REQUEST_TOKEN);
HttpURLConnection connection = (HttpURLConnection) url.openConnection();
try {
connection.setRequestMethod("POST");
connection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
connection.setRequestProperty("Content-Length", "" + sb.toString().length());
connection.setRequestProperty("Host", "accounts.google.com");
OutputStreamWriter outputStreamWriter = new OutputStreamWriter(connection.getOutputStream());
outputStreamWriter.write(sb.toString());
outputStreamWriter.flush();
log.debug("Response code ${connection.responseCode} , Message : ${connection.responseMessage}")
String resultData = connection.content.text
def responseJson = JSON.parse(resultData)
String ACCESS_TOKEN = responseJson?.access_token
}
catch (Exception e) {
e.printStackTrace()
}
}


3. Calling Google API.

Now, with the help of access token, we can call google API to fetch Data by appending the access token in the GET request.

Example:



To fetch person’s profile data

GET :  https://www.googleapis.com/oauth2/v1/userinfo?access_token=ACCESS_TOKEN 


To get list of profile acitivties

 GET :  https://www.googleapis.com/plus/v1/people//activities/public?access_token=ACCESS_TOKEN


References:-
http://code.google.com/apis/accounts/docs/OAuth2WebServer.html

http://code.google.com/apis/accounts/docs/OAuth2.html



Hope this helps..!!!



Vishal Sahu
vishal[at]intelligrape[dot]com
www.intelligrape.com

How to get Google Indexed Pages Count, and/or do Google searches through AJAX/programmatically

Posted by on September 27th, 2011

Hi,
Recently i had to get the count of the Pages Google has Indexed for a perticular web Site progmatically.
In the process i found that Google offers an AJAX Search API to perform Google Searches.
.
Hence i Implemented a Class which does the same for me easily(Ajax Search in Google).
And this Solution Does Google Searches programmatically and Also Give us the Indexed Pages Count.
Note: Its Groovy Implementation, Similar can be done in JavaScript using Ajax though intent will remain the same.
The class has been named GoogleAjaxSearch because it uses the Google AJAX Search API ;)

Use Cases Are As Follows:

//Case 1 Simple Search
String searchQuery = "my search Query"
GoogleAjaxSearch googleAjaxSearch = new GoogleAjaxSearch(searchQuery)
println googleAjaxSearch.results //Type List<Expando>, Just print it to see available properties

//Case 2: Get Number Of Indexed Pages in Google
String searchQuery = "site:intelligrape.com"
GoogleAjaxSearch googleAjaxSearch = new GoogleAjaxSearch(searchQuery)
println googleAjaxSearch.estimatedResultCount

//Case 3: Redo a search with same SearchQuery or a different Search Query
String searchQuery = "search string"
GoogleAjaxSearch googleAjaxSearch = new GoogleAjaxSearch(searchQuery)
googleAjaxSearch.redo() //Re-Search with same query
googleAjaxSearch.redo("New Query") // Re-Search With New Query

//Case 4: All Details Available
String searchQuery = "site:intelligrape.com"
GoogleAjaxSearch googleAjaxSearch = new GoogleAjaxSearch(searchQuery)
println googleAjaxSearch.estimatedResultCount //Gives the result count, indexed pages count
println googleAjaxSearch.currentPageIndex    //Search result server side pagination - current page
println googleAjaxSearch.results  //List<Expando> containing results
println googleAjaxSearch.responseStatus //HTTP Status Code
println googleAjaxSearch.responseDetails //Details for response, if any
println googleAjaxSearch.searchQuery     //Search Query 
println googleAjaxSearch.moreResultsUrl // Url to hit for next Page of results
println googleAjaxSearch.jsonResult // Complete raw JSON Result from google
println googleAjaxSearch.pages  // Pagination Pages Details

The Class Code Is As Follows:


package myPackage.googleSearch

import grails.converters.JSON

class GoogleAjaxSearch {

    public String searchQuery
    public String responseDetails
    public String moreResultsUrl
    public String jsonResult

    public Integer responseStatus
    public Integer currentPageIndex
    public Integer estimatedResultCount

    public def pages

    public List<Expando> results = []

    private static final String ajaxSearchTarget = "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=###SEARCHQUERY###&filter=0"

    public GoogleAjaxSearch(String searchQuery) {
        this.searchQuery = searchQuery
        search()
    }

    public GoogleAjaxSearch() {
        this(null)
    }

    public void redo() {
        search()
    }

    public void redo(String newSearchQuery) {
        this.searchQuery = newSearchQuery
        search()
    }

    private void search() {
        if (searchQuery) {
            URL url = new URL(ajaxSearchTarget.replace('###SEARCHQUERY###', searchQuery))
            URLConnection connection = url.openConnection()
            connection.setDoInput(true)
            InputStream inStream = connection.getInputStream()
            BufferedReader searchResultContent = new BufferedReader(new InputStreamReader(inStream))
            jsonResult = searchResultContent.getText()
            parseJsonAndPopulateObject()
        }
    }

    private void parseJsonAndPopulateObject() {
        def jsonArray = JSON.parse(jsonResult)
        this.responseStatus = Integer.parseInt(jsonArray.responseStatus as String, 10)
        this.responseDetails = jsonArray.responseDetails
        this.moreResultsUrl = jsonArray.responseData.cursor.moreResultsUrl
        this.currentPageIndex = Integer.parseInt(jsonArray.responseData.cursor.currentPageIndex as String, 10)
        this.pages = jsonArray.responseData.cursor.pages
        this.estimatedResultCount = Integer.parseInt(jsonArray.responseData.cursor.estimatedResultCount as String, 10)
        results = jsonArray.responseData.results.collect {
            new Expando(
                    content: it.content,
                    GsearchResultClass: it.GsearchResultClass,
                    titleNoFormatting: it.titleNoFormatting,
                    title: it.title,
                    cacheUrl: it.cacheUrl,
                    unescapedUrl: it.unescapedUrl,
                    url: it.url,
                    visibleUrl: it.visibleUrl
            )
        }
    }
}

Hope That Helps :)
Regards
Kushal Likhi

Using Google Analytics for tracking Multiple Steps of a Webflow

Posted by on February 28th, 2011

In one of our projects, we are using a webflow for an order wizard. We needed to track the number of users converting a draft to a confirmed order using Google Analytics. This would have been simple if the URLs were different for each step. However, that is not the way webflows work and a similar URL is generated for multiple steps. After some searching around, we found that we could call a trackPageView method in Google Analytics API and set a name for the page being tracked. This could be done using

<script type="text/javascript">
    try {
        var pageTracker = _gat._getTracker("<ANALYTICS-KEY>");
        pageTracker._trackPageview("/enterDetails.html");
    } catch(err) {
    }
</script>

Replacing “/enterDetails.html” in each page with the corresponding step name did the trick. However, this is an old version of the Google Analytics API. Our application uses a newer version of the JavaScript code provided by Google.

In this, we had to use Virtual Page Tracking, which is a method explained in the Google Analytics API Docs under the section, Virtual Page Views. We had to write something like


<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'ANALYTICS-KEY']);
_gaq.push(['_trackPageview', '/enterDetails.html']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

For usage on grails, we used a template, which takes in the pageName and uses /${controllerName}/${actionName}/${pageName} to  generate the virtual page name which is tracked. Now we are successfully tracking the conversions.

Hope this helps.

Vivek

http://in.linkedin.com/in/svivekkrishna

What is Google Web Optimization, How to use or apply it in your project?

Posted by on August 12th, 2010

Recently as part of POC, I need to apply the google web optimizer on various parts of page to determine which content user respond to best and will be most effective in getting conversions. For this you need to keep track of the various conversions, but how? Thats where google web optimizer come handy, providing reports based on experiments specified by you on various parts of page and also suggesting action to optimize your site for better business results.

Steps to apply google web optimization in your project :

1. Create an account in google web optimizer and sign in.

2. Then take some time to determine which aspect or parts of page you want to test and how.(for more valuable and better results).

3. Create an experiment in google web optimizer :

  • 3.1 Choose algo for experiment: Multivariate test or A/B test.
    • 3.1.1 Multivariate test allow you to apply variations on various part of same page.
    • 3.1.2 A/B test allow you to apply conversion between two pages. (Not on various part of page).
    • **In my case i choose multivariate test.
  • 3.2 Fill in details : Give your experiment unique name, specify the tracking page public URL on which various parts optimization is to be done and also specify the conversion page public URL on which user will be directed after successful conversion.(Very useful in term of form submission).

4. Tag Pages -> Now the optimizer provide you several tags, How to apply scripts/tags on your page for that particular experiment :

  • 4.1 Control Script : Randomly control the variations on parts of page. (Must Applied in header tag of page)
    	<!-- Google Website Optimizer Control Script -->
    	<script>
    	function utmx_section(){}function utmx(){}
    	(some script......................................................
    	length+1,j<0?c.length:j)}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
    	d.write('<sc'+'ript src="'+
    	'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'...........
    	................................. some more script text here
    	</script>
    	<!-- End of Google Website Optimizer Control Script -->
  • 4.2 Tracking Script : Track the user behaviour. (Applied at bottom of the page within body tag).
    	<!-- Google Website Optimizer Tracking Script -->
    	<script type="text/javascript">
    	Some script text here...................................
    	........................................................
    	<script type="text/javascript">
    	try {
    	var gwoTracker=_gat._getTracker("....some id for tracker..........");
    	gwoTracker._trackPageview("...tracker page.....");
    	}catch(err){}</script>
    	<!-- End of Google Website Optimizer Tracking Script -->
  • 4.3 How to apply Variation Script : Applied just before the part of code to be tested(headline, image, promotext, button) i.e. on which variation is to be applied and at the end of that code part “noscript” tag need to be applied to specify the region for variation and unique tag names for particular variation section.
    	<script>utmx_section("payment")</script>
    		Test Drive our product in <b>$10</b>
    	</noscript>
  • 4.4 Conversion Script : To be applied in body tag at bottom of converision page you specified.
    	<!-- Google Website Optimizer Conversion Script -->
    	    <script type="text/javascript">
    	    some script.....................................................
    	    '.google-analytics.com/ga.js"></sc'+'ript>')</script>
    	    <script type="text/javascript">
    	    try {
    	    var gwoTracker=_gat._getTracker("....some id for tracker..........");
    	    some script code here.....................................
    	    }catch(err){}</script>
    	<!-- End of Google Website Optimizer Conversion Script -->

5. Validate Pages -> First apply all the tags on your page as specified above and then validate the page with optimizer validate page link, that all the script are applied correctly.

  • 5.1 If you use validate pages button then it will use the public URL you specified for tracking and conversion page.
  • 5.2 To validate the pages offline, Optimizer provide option to manually provide pages that are to be validated.

Note : All the test need to be passed to apply optimization on your page.

6. Create a Variations -> After applying tags, create variations for the various part of page. Variation can include any type of string(it can be a html code, text, script etc).

Example : Within payment tag :

Original Variation : Test Drive our product in $10 (specified in your page)
Variation 1 named “Classic” :

		Test Drive our product in <b>$50</b>

Variation 2 named “Executive” :

		Test Drive our product in <b>$100</b> with additional privileges

7. Review and Launch the Experiment, in Google web optimizer.

Example :

	<html> 
	<head>   
	    <!-- Google Website Optimizer Control Script -->
		<script>
		function utmx_section(){}function utmx(){}
		some script.....................................................
		length+1,j<0?c.length:j)}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
		d.write('<sc'+'ript src="'+
		some code here ...............................................
		+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
		'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
		</script>
		<!-- End of Google Website Optimizer Control Script -->
	</head>
	<body>
             ............body code start here............................................................................
             ....................................................................................................................
	    <script>utmx_section("offer")</script>
			Secure your child future in <b>$10</b>
	    </noscript>
           ....................................................................................................................
           ....................................................................................................................
 
 
	    <!-- Google Website Optimizer Tracking Script -->
		<script type="text/javascript">
		some script.....................................................
		'.google-analytics.com/ga.js"></sc'+'ript>')</script>
		<script type="text/javascript">
		try {
		some code...................................................
		}catch(err){}</script>
		<!-- End of Google Website Optimizer Tracking Script -->
 
	</body>
	</html>

Hope this will help to improve your site business ;)

Regards,
Tarun Pareek
Intelligrape Software

Comments Off