Sunday, January 17, 2010

Sathyam cinemas online booking using greasemonkey


I wrote a simple JavaScript tweak for greasemonkey users (or non-users!) to alert/play a sound when bookings are open for movies released at sathyam Cineplex (http://thecinema.in) at Chennai. Ever since online booking has been facilitated here, it has become easier for IT professionals to book movie tickets sitting at their desk. But as more and more people started to use this service, we had to keep a watch on the ticket portal minute by minute when the bookings are open so as get the “first come first serve” service. So this involved numerous page refreshes by midnight on tuesday’s (normal booking open day). Even the starting time for booking won’t be officially confirmed / announced by the theater authorities.
So what I needed was a script which checks the portal for ticket availability for a particular movie and for a particular show like noon/matinee/night and if found alerts me with a sound so that I can lock my PC and sleep for the night rather than keep my eyes on my PC screen for tickets by refreshing the portal every minute.
Thecinema.in
Since this portal uses web services for each and every screen, it was easier for me to write the code. I’ve pasted the code below:
// ==UserScript==
// @name         Satyam
// @namespace     http://thecinema.in/
// @description   script to play sound if ticket is available
// @include       http://thecinema.in/*
// @resource      GMwavaudio http://gmflowplayer.googlecode.com/files/notify.wav
// ==/UserScript==

var oggB64 = GM_getResourceURL("GMwavaudio");
var au = document.createElement('audio');
var ausrc = 'data:audio/wav;base64,'+oggB64.split('data:application/octet-stream;base64,')[1];
au.setAttribute('src', ausrc);
au.setAttribute('id', 'GMwavaudio');
document.body.appendChild(au);

var intval='';
console.log('scriptloaded1');
intval=setInterval(function()
{
var http = new XMLHttpRequest();
var url = '/webWCF/AjaxBackService.svc/GetTicketDetail';
var params = '{"movieID":"ST00001265","date":"Friday |18 December"}';

http.open("POST", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/json");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {//Call a function when the state changes.
                if(http.readyState == 4 && http.status == 200) {

                                var json=eval('(' +http.responseText+')');
                if(json&&json.d&&json.d.length>0)
                {
                    for(var i=0;i<json.d.length;i++)
                    {
                        if(json.d[i].DaySessionNo=="4"&&json.d[i].TicketTypes)
                        {
                            for(var j=0;j<json.d[i].TicketTypes.length;j++)
                            {
                               au.play();
                               
                                 if(intval!="")
                                  clearInterval(intval);

                                var ticket=json.d[i].TicketTypes[j]; 
                                if(ticket)
                                {             
                                    console.log(ticket.SessionID);
                                    console.log(ticket.SessionName);
                                    console.log(ticket.TicketDetail);
                                    console.log(ticket.Time);
                                }
                            }
                        }
                    }
                }
                else
                {
                    console.log('NA at '+Date());
                }
                }
}
http.send(params);
}
,30000);

If anybody doesn’t know what is greasemonkey? It’s just another Firefox add-on which makes it easier for us to run our JavaScript on any website.  Greasemonkey can be installed from https://addons.mozilla.org/en-US/firefox/addon/748.
The above given script can be added to greasemonkey user scripts for the domain Thecinema.in.
For further help please read the greasemonkey manual at:  http://wiki.greasespot.net/Greasemonkey_Manual:Installing_Scripts

Customizing the user script:
You can change the sound played when tickets are available by just editing the script (@resource) at the top.  The day of booking and the movie ID should be changed. To get the movie ID you can use greasemonkey or firebug JavaScript command line to execute the below given script. This will print out the movie ID’s for all the movies available for that day. I know this may sound raw, but definitely worth a try if you are a JavaScript user. Happy scripting!
 var params = '{"date":"Sunday |17 January"}';
var http = new XMLHttpRequest();
var url = '/webWCF/AjaxBackService.svc/GetMovieInfo';
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/json");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function()
{
  if(http.readyState == 4 && http.status == 200)
  {
    var json=eval('(' +http.responseText+')');
    if(json&&json.d&&json.d.length>0)
    {
       for(var i=0;i<json.d.length;i++)
       {
        if(i>8)
        {
            if(i%9==0)
             {       console.log("movieID:"+json.d[i]+" for movie:"+json.d[i+4]);
             }

        }
       }
    }
  }
}
http.send(params);

Wednesday, April 16, 2008

Tools and utilities for JavaScript development

For many people, developing web applications with JavaScript seems to be an irritating task. But the reason maybe that they don’t use firefox and its hugely popular extensions to improve their development time period. In the early stages, developers used alert boxes to debug JavaScript. For this they put alert boxes on each and every line where they wanted to know the value of a variable. Now everything has changed!

Firebug:

Leading the bandwagon is firebug, an extension of firefox. One of the many exciting features of firebug is JavaScript debugging. We can place breakpoints in JavaScript code and watch the variable values just inside our browser itself. Walking through array values can’t be much easier as in firebug. Keyboard shortcuts for debugging are also similar to widely used Ides’. Selecting the JavaScript files used in a web page for viewing can be done with ease. To search the JavaScript code a simple text box is also provided.

The Console shows the logged messages for each web page. It will show any JavaScript, CSS and XML errors and even warnings. You can also test JavaScript functions by calling them in the command line given below the console. The output will be displayed in the console. This command line can also be expanded to accommodate batch statements of JavaScript. One case in which the console will be much useful is during the Ajax application development. Whenever any Ajax (Asynchronous JavaScript and XML) request is sent, the console displays the request header, response header, request parameters and response XML every time. This can be helpful in debugging and analyzing the Ajax enabled web application.

A mini HTML editor is also attached with firebug. It enables us to travel through the HTML node tree and inspect the elements and their attributes. We can even edit the html, delete the html, edit the attribute of any element and create new attributes for elements. Styles of elements can also be edited on the right hand side box. There you can edit, delete or disable any style attribute. Whenever you select any html element in a page the element will be highlighted in firefox browser. On the right hand side box there is also an option to show the layout of the element. It is a graphical representation of the border, margin and padding attributes of an element. There is also a DOM inspector where you can walkthrough the node tree.

Any http connection made through the browser can be viewable in the “network” tab of firebug. This shows connections made for resources such as images, web pages, scripts, style sheets and flash objects. Each connection detail comprises of headers, parameters and the response data. The size of each resource is also shown along with the time taken for loading them. We can also preview any images or icons in this network tab just to cross check if that is the correct one. Apart from this one special feature of firebug is that you can profile JavaScript runtime. That is we can peek into the JavaScript calls and their execution time with call counters.


Web Developer:

A perfect web developer tool, that’s how this can be described. The menus provided by web developer are listed below:

  • Manage HTML
  • Manage CSS
  • Manage cookies
  • Manage images
  • Manage forms

You will be wondering, what’s the use for JavaScript developers. In the case of web developer, JavaScript utilities are limited. But it’s useful! For example, we can disable JavaScript directly in firebug. We can change the form element values directly on the browser screen. We can display the web page response headers and other useful information easily. Apart from this outlining group of elements are the main advantages of the web developer firefox extension. All kinds of validation can be done through this tool. Other tools include page magnification and page ruler. We can also view the generated source i.e. the source dynamically changed by JavaScript using the web developer extension.


Greasemonkey:

This is a cool JavaScript utility which makes use of JavaScript functions to make dynamic changes to web pages viewed in our browser. These scripts can be customized such as they run for a particular domain only. The Greasemonkey extension also adds some functionality to the JavaScript API. One of them is the console class through which we can log warnings, messages or error details. The Greasemonkey is one dream tool, by which you can entirely change the way you browse the internet. You can develop scripts for any website such as to make your view more attractive or faster or compact and ask Greasemonkey to embed your script for that particular website.

I’ve even tried a simple Greasemonkey hack. I wrote a JavaScript function to listen to keyboard input event if the current focus is in password and then recorded the input in the console log. And then I added this function to Greasemonkey user scripts. So whenever anybody uses my browser to logon to any website, their password will be recorded in the console along with other details such as cookies, page title and web URL!

Saturday, February 2, 2008

Client-side scripting

All about scripting javascripts for web browsers!