The last few months I was searching about some kind of mobile interface of Google Analytics for my Nokia e71. However I did not find one?! Please correct me if I’m wrong.

In the same time I knew there is a GA API, which is free to use, so finally I wrote a tiny web app allowing the reading of basic information about your Google Analytics accounts.

Note that your username and password are NOT SAVED! However it’s up to you to try.

An important note is that the API has a limitation in requests so yet again, it’s possible to be unavailable in case of too many requests.

Visit with Your Mobile Browser

this link:

http://www.stoimen.com/ga/

Note that I made it primary about my Nokia, so any screenshots will be welcomed as well.

It is still beta so be careful. In fact any suggestions are welcome. Either for improving the security and error handling as well as new data exports.

There are lots of things to be done, but this is really basic.

After Node.js is istalled, described in my previous post, I can simply run this command:

stoimenpopov:~# node server.js

and this will start the server with the code within server.js. But what’s the code of server.js?

Following the instructions of Node’s homepage and most of the tutorials I’ve found, I can simply copy/paste the code from the first lines of Node’s page:

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

There are several things I find interesting in this code, making it different from JavaScript as we know it. First of all what is

var http = require(‘http’)

and why I need it? What is the purpouse of 8124 and 127.0.0.1?

Node is built in modules and to use one of them you must first include it with require. Just like the example above with require(‘http’). In the same manner you can include every module of Node.

What are the Node’s modules are pretty well described in the API page. Well I’d like to say that the API page is quite insufficient. That is very bad, cause most of the code you’ll need developing a node.js applicatoin isn’t described/explained there.

However is more than obvious that 8124 is the port, while 127.0.0.1 is the IP address of the server, which in this case is the localhost. Thus after running the server and typing http://127.0.0.1:8124/ into your browser you’ll get “Hello World”. This is not enough when the server is running on a remote machine, while you’ve to access it from your local computer.

The first server

As I described the code above shows you an example server. In fact the API page shows a slightly different code:

var http = require('http');

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World\n');
}).listen(8124);

console.log('Server running at http://127.0.0.1:8124/');

Here the line:

}).listen(8124);

omits the address of the server. It appears to be non-required and the server is supposed to listen on this machine on the given port. To be honest I’m not sure why you’ve to write the server address, except for limit the possible address to this one. However in my case the server was installed on a remote machine indeed, while I was trying to access it from my local machine. So here are some base steps to do before accomplishing this.

1. Changing the IP address

First of all you can omit the IP address. This can help you move the code from one server to another without changing the code.

}).listen(8124, ip_address);

possibly a better solution is:

}).listen(8124);

Node can listen on whatever port you say so this is up to you to decide which port should be opened.

2. Opening the port

While everything’s on the localhost you wont have problems with port opening. If you’d like to access it remotely however, you’ve to open the port. In other words http://127.0.0.1:8124/ is OK without port opening, but http://example.com:8124/ – is not!

To open a port in UNIX/Linux you’ve to type this command in the terminal:

iptables -A INPUT -p tcp --dport 8124 -j ACCEPT

don’t forget to change the port number from 8124 to whatever port number you’re using.

3. The first AJAX call

We still cannot make the first AJAX call to the Node server. Here I’m using jQuery because of the easy AJAX interface.

$(document).ready(function() {
	$.ajax({
    	// setup the server address
        url : 'http://example:8124/',
        success : function(response) {
        	// on success
        	alert(response);
		},
        error : function() {
        	// on error
        }
    });
});

After executing this code in a browser there wont be a response. That is because of the remote AJAX calls restriction. To overcome this you’ve to change the returned header from the Node’s server, by adding this:

'Access-Control-Allow-Origin' : '*'

Now server.js will look like this:

var http = require('http');

http.createServer(function (request, response) {
	response.writeHead(200, {
		'Content-Type': 'text/plain',
		'Access-Control-Allow-Origin' : '*'
	});
	response.end('Hello World\n');
}).listen(8124);

you can now either load http://example.com:8124/ into your browser or to make the AJAX call. In both cases the answer will be “Hello World”

Summary

Now you have a very simple Node.js server. Well it is nothing special as it responses with “Hello World” on every request, but it works remotely.

Soon I’ll describe how to change the server so it can waits to respond until some event is emitted – which is the real power of Node.js.

Have you ever seen the famous message on YouTube: “This video has been removed by the user.”, but what if you’re trying to grab that video via the Zend_Gdata_YouTube?

That can happen when you’re reading the feed for a channel or a user’s list of videos. In the feed everything’s OK – once the video is uploaded it appears into the feed. After that the user removes the video and visiting the link from the feed you’ll get the message above.

Actually what happens when you try to read this “video entry” within a Zend Framework’s application. There must be some way to catch this message?

Trying to Catch

The answer is pretty simple! Zend_Gdata_YouTube’s throwing an exception and it can be easily cached. Here’s some source code:

$apiKey = 'your_api_key';
$client = new Zend_Http_Client();
$gdata = new Zend_Gdata_YouTube($client, 'my-app', null, $apiKey);
try {
       $gdata->getVideoEntry($video_id);
} catch(Zend_Gdata_App_Exception $e) {
       echo $e->getMessage();
}

The task is to read the entire Gdata from a YouTube’s channel. It may sound easy, but as you may know Gdata is based on the Atom publishing protocol, and it naturally gives you only the latest few items.

Of course Zend Framework has a large set of classes dealing with Google’s Gdata services, one of them is the Zend_Gdata_YouTube.

It gives you the power to iterate/paginate over the entire set of YouTube user’s/channel’s videos. In that example let’s assume you have a protected function doing the reading of a single portion:

protected function _process(Zend_Gdata_YouTube_VideoFeed $videoFeed)
{

    /* @var $entry Zend_Gdata_YouTube_VideoEntry */
    foreach ($videoFeed as $entry) {
        /* @var $published Zend_Gdata_App_Extension_Published */
        $published = $entry->getPublished();
        $thumbnails = $entry->getVideoThumbnails();

        // set date format
        $date = new Zend_Date($published->getText());

        // array
        $tags = $entry->getVideoTags();

        $data['title'] = $entry->getVideoTitle();
        $data['description'] = $entry->getVideoDescription();
        $data['date'] = $date->get('Y-MM-d hh:mm:ss');
        $data['thumb'] = @$thumbnails[3]['url'];
        $data['id'] = $entry->getVideoId();
        $data['flash_player'] = $entry->getFlashPlayerUrl();
        $data['tags'] = implode(',', $tags) . ', ' . $entry->getVideoCategory();
        // do whatever you want with the data
    }

}

The only thing left is to iterate over the “pages” of the feed. This can be done with getNextFeed() method.

public function readRssAction()
{
    $userId = 'some_user';
    $client = new Zend_Http_Client();
    $gdata = new Zend_Gdata_YouTube($client, 'my-app', null, $this->_apiKey);
    $videoFeed = $gdata->getUserUploads($userId);

    // save the last items
    $this->_process($videoFeed);

    try {
        while ($videoFeed = $videoFeed->getNextFeed()) {
            $this->_process($videoFeed);
        }
    } catch (Zend_Gdata_App_Exception $e) {
        echo $e->getMessage();
    }
}

You’ll get an exception when there is no more feeds to process!

To combine all this into a single controller and to complete the code here’s the entire source:

class YoutubeController extends Zend_Controller_Action
{
    protected $_apiKey = 'your_api_key_goes_here';

    protected function _process(Zend_Gdata_YouTube_VideoFeed $videoFeed)
    {

        /* @var $entry Zend_Gdata_YouTube_VideoEntry */
        foreach ($videoFeed as $entry) {
            /* @var $published Zend_Gdata_App_Extension_Published */
            $published = $entry->getPublished();
            $thumbnails = $entry->getVideoThumbnails();

            // set date format
            $date = new Zend_Date($published->getText());

            // array
            $tags = $entry->getVideoTags();

            $data['title'] = $entry->getVideoTitle();
            $data['description'] = $entry->getVideoDescription();
            $data['date'] = $date->get('Y-MM-d hh:mm:ss');
            $data['thumb'] = @$thumbnails[3]['url'];
            $data['id'] = $entry->getVideoId();
            $data['flash_player'] = $entry->getFlashPlayerUrl();
            $data['tags'] = implode(',', $tags) . ', ' . $entry->getVideoCategory();
            // do whatever you want with the data
        }
    }

    public function readRssAction()
    {
        $userId = 'some_user';
        $client = new Zend_Http_Client();
        $gdata = new Zend_Gdata_YouTube($client, 'my-app', null, $this->_apiKey);
        $videoFeed = $gdata->getUserUploads($userId);

        // save the last items
        $this->_process($videoFeed);

        try {
            while ($videoFeed = $videoFeed->getNextFeed()) {
                $this->_process($videoFeed);
            }
        } catch (Zend_Gdata_App_Exception $e) {
            echo $e->getMessage();
        }
    }
}

Note: here you’ve to substitute the API key with the one you’ve for your development.

Zend Framework gives you the possibility to interact with Gdata services, which are provided by most of the Goolge services. You can find more on the docs page of Zend_Gdata. The basic principle is that you can connect a service with you API key, given by Google. What I’m about to show you is how do connect such a service.

In theory Zend_Gdata depends on Zend_Http_Client and you’ve to connect it with an instance of this class.

// 1. setup API key
$apiKey = 'your_api_key_here';

// 2. retrieve videos via GData Atom
$client = new Zend_Http_Client();
$gdata = new Zend_Gdata_YouTube(null, 'my-app', null, $apiKey);

Note that you’ve to replace your API key in the chunk above.

Now once that you’ve connected the YouTube service you can iterate through the entries from the video feed.

$videoFeed = $gdata->getUserUploads('username');
foreach ($videoFeed as $entry) {
    echo $entry->getTitle();
}

The thing is that you can modify a bit the code above. As ZF docs says if you don’t setup a Zend_Http_Client a default with default configuration, so you can omit this and simple write:

// 1. setup API key
$apiKey = 'your_api_key_here';

// 2. retrieve videos via GData Atom
$gdata = new Zend_Gdata_YouTube(null, 'my-app', null, $apiKey);

Although my impression is that most of the web developers use Firefox and most of them are using Firebug, I’m not sure that they use the full potential of this brilliant software.

Firebug’s console view

Firebug is a very powerful tool helping those like me doing his job. But what’s behind the mostly used Firebug’s tools and what’s in the API.

console.log()

For a typical JavaScript programmer the console.log() function is one of his best friends. It can dump useful information in the console tab of the Firebug making everything quite clear. But have you ever asked yourself how to improve your code, how to measure its performance against some constructions.

Performance of JavaScript

I’m sure many of us have read enough articles out in the web about JS performance. Nowadays when the web apps become bigger and bigger, this topic is rising from the bottom of the interesting topics pool. Now everybody’s concerned about it’s app performance and speed.

You’ve probably heart about some basic advices. What to use, what not to use. In a short example I’ll mention only that everybody knows that .appendChild is far slower than the innerHTML. But why is that? How can be sure it’s true.

As I wrote recently you should instantiate your new arrays in javascript with the following construction:

var a = [];

instead of:

var a = new Array();

but as I’ll write here that’s not always true.

console.profile()

One of the useful methods of the Firebug’s console object is the profile() method. It gives you the power to measure timing and performance of any JS function. As described in the Firebug’s web page:

The high-fi approach is to use the JavaScript profiler. Just call console.profile() before the code you want to measure, and then console.profileEnd() afterwards. Firebug will log a detailed report about how much time was spent in every function call in between.

With the simple construction like:

<html>
<body>
<script>
    myFunc = function() {
        var a = [];
    }				

   console.profile();
   myFunc();
   console.profileEnd();
</script>
</body>
</html>

Firebug’s profile output

The simple problem is that thus you cannot just measure some code that’s not a function. This will result in empty profile output in the console’s view:

But hopefully there comes the other method of the console object.

console.time()

It gives anything you’d like to know even if it’s not closed into a function.

Note: remember that both profile and time methods goes with their related profileEnd and timeEnd methods. You’re supposed to enclose the chunk of code you measure with that to be sure that the Firebug’s console will stop the profilers on time.

Now you can simply ask the profiler: what is faster?

It’s good that the community responded so quickly to the new release!