TAN'S Blog

if you obey all the rules you miss all the fun…


Leave a comment

Node.js async await vs promise vs callback

Normally Node.js invokes functions asynchronously. Node.js async await, promise and callback comes into picture when you want to execute one function after completion of another function execution.

All these features are introduced one by one in Node.js different version release. Before Node version 7.6, the callbacks were the only way provided by Node to run one function after another.

We will see all three concepts taking real case scenario:

Three Tomatoes with Shadows --- Image by © Royalty-Free/Corbis

Requirement is If you have sufficient balance then you can purchase. All examples below written can not be directly executed rather used here to show concept difference.

Ex:

let placeAnOrderAndDeliver = function(name, address) {
  // Send the item to Dear 'name' staying at this 'address'
}

let showWarningOrError = function(statusCode, error) {
  // Show warning message or error message if no sufficient balance
  // Or if any error happened
}

let checkSufficientBalanceInAccount = function(
    userName, password, balanceNeeded, callback) {
  if (logInCredentialValidated) {
    if (balanceInMyAccount > balanceNeeded) {
      callback(true);
    } else {
      callback(false);
    }
  } else {
    callback(false);
  }
}

let purchaseItem = function(itemName, itemCost) {
  try {
    checkSufficientBalanceInAccount('testUser', 'testPassword', itemCost,
        function(response) {
          if (response) {
            placeAnOrderAndDeliver('Name', 'Address');
          } else {
            showWarningOrError('402', 'Insufficient balance!')
          }
        })
  } catch (error) {
    showWarningOrError('400', error.message)
  }
}

Problem of above way is, for multiple callbacks it gets messy and cause lot of troubles.

Later promise and function chaining introduced in Node.js version:

So if you will refactor above functions into promise and function chaining, it will look like this:

let placeAnOrderAndDeliver = function(name, address) {
  // Send the item to Dear 'name' staying at this 'address'
}

let showWarningOrError = function(statusCode, error) {
  // Show warning message or error message if no sufficient balance
  // Or if any error happened
}

let checkSufficientBalanceInAccount = new Promise((resolve, reject) => {
  let successMsg = {
    status: '200',
    message: 'Successful transaction!'
  };

  let failureMsg = {
    status: '449',
    message: 'Unsuccessful transaction!'
  };

  let failureLoginMsg = {
    status: '401',
    message: 'Invalid credential!'
  };

  if (logInCredentialValidated) {
    if (balanceInMyAccount > balanceNeeded) {
      resolve(successMsg);
    } else {
      reject(failureLoginMsg);
    }
  } else {
    reject(failureMsg);
  }
});

let purchaseItem = function(itemName, itemCost) {
  try {
    checkSufficientBalanceInAccount('testUser', 'testPassword', itemCost).
        then((response) => {
          placeAnOrderAndDeliver('Name', 'Address');
        }).
        catch((reason) => {
          showWarningOrError(reason.status, reason.message);
        });
  }
  catch (error) {
    showWarningOrError('400', error.message);
  }
};

In this way code looks more clear and easily understandable. You can chain multiple functions by adding multiple .then

In Node v8 await gets released to deal with promise and chaining. Here no need to write .then, Simply you need to call prefix await before the function name and call next function usually you call the function. Unless await function executes the next function will not be executed.

Example using async/await:

let placeAnOrderAndDeliver = function(name, address) {
  // Send the item to Dear 'name' staying at this 'address'
}

let showWarningOrError = function(statusCode, error) {
  // Show warning message or error message if no sufficient balance
  // Or if any error happened
}

let checkSufficientBalanceInAccount = new Promise((resolve, reject) => {
  let successMsg = {
    status: '200',
    message: 'Successful transaction!'
  };

  let failureMsg = {
    status: '449',
    message: 'Unsuccessful transaction!'
  };

  let failureLoginMsg = {
    status: '401',
    message: 'Invalid credential!'
  };

  if (logInCredentialValidated) {
    if (balanceInMyAccount > balanceNeeded) {
      resolve(successMsg);
    } else {
      reject(failureLoginMsg);
    }
  } else {
    reject(failureMsg);
  }
});

let purchaseItem = async function(itemName, itemCost) {
  try {
    await checkSufficientBalanceInAccount('testUser', 'testPassword', itemCost);
    placeAnOrderAndDeliver('Name', 'Address');
  }
  catch (error) {
    showWarningOrError('400', error.message);
  }
};

If you will compare promise based example and async/await based example then you will find last function is the main difference where “let purchaseItem = async function” you can see async keyword before function keyword. Because await should be used inside async function.

Another difference is functions are called in an order, where function called after await function will not execute unless await function completes.

That is all about basic usage and main differences. If you want to know more about promise and async/await go through these references links:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Hope you like it!

Thanks for your time to go through this.

Advertisements


2 Comments

Use of realm object in realm Event handler

Before describing the deep concept of handling realm event handler changes, if you want to know about realm then please go through these links https://realm.io/ and https://realm.io/docs/javascript/latest/once.

Realm Platform:

They provide new standard in data synchronisation. Realm helps companies build engaging mobile applications with minimal development time. The Realm Platform enables any development team, no matter the size, to include difficult-to-build features like two‑way data sync and realtime collaboration. Devote more time to what makes your app truly unique and less time to maintaining services.

Realm object database is a simple alternative to SQLite and Core Data and proudly open source.

I can just share the benefits of realm database quickly:Screen Shot 2018-06-23 at 10.06.14 AM

Now let’s discuss about handling event handler changes:

This is an important and awesome feature which you will not find in any other mobile DB like sqlite, Oracle Lite, Tiny DB etc.

Once you setup realm database and connect to realm DB using Node JS then for any changes in database, the event fires for that change and you can capture that event change in callback.  If you have multiple databases or individual database for each user then you can set the path to register the event change for those databases.

So for each operation(Insertion, Modification and Delete) in database there will be event fired and in callback of that you can do your operation in Node Js. For example if there is data insertion in realm DB through mobile then in Node Js server you can catch the data and insert that data to MySql or move to AWS SQS or play with it.

A sample index.js file might look something like this. This example listens for changes to a user-specific private Realm at the virtual path /~/myuserDB. It will look for updated Coupon objects in these Realms, verify their coupon code if it wasn’t verified yet, and write the result of the verification into the isValid property of the Coupon object.

'use strict';
var Realm = require('realm'); 

// the URL to the Realm Object Server
var SERVER_URL = '//127.0.0.1:9080';

// The regular expression you provide restricts the observed Realm files to only the subset you
// are actually interested in. This is done in a separate step to avoid the cost
// of computing the fine-grained change set if it's not necessary.
var NOTIFIER_PATH = '^/([^/]+)/myUserDB$';

//declare admin user
let adminUser = undefined

// The handleChange callback is called for every observed Realm file whenever it
// has changes. It is called with a change event which contains the path, the Realm,
// a version of the Realm from before the change, and indexes indication all objects
// which were added, deleted, or modified in this change
var handleChange = async function (changeEvent) {
  // Extract the user ID from the virtual path, assuming that we're using
  // a filter which only subscribes us to updates of user-scoped Realms.
  var matches = changeEvent.path.match("^/([^/]+)/([^/]+)$");
  var userId = matches[1];

  var realm = changeEvent.realm;
  var coupons = realm.objects('Coupon');
  var couponIndexes = changeEvent.changes.Coupon.insertions;

  for (let couponIndex of couponIndexes) {
    var coupon = coupons[couponIndex];
    if (coupon.isValid !== undefined) {
      var isValid = verifyCouponForUser(coupon, userId);
      // Attention: Writes here will trigger a subsequent notification.
      // Take care that this doesn't cause infinite changes!
      realm.write(function() {
        coupon.isValid = isValid;
      });
    }
  }
}

function verifyCouponForUser(coupon, userId) {
    //logic for verifying a coupon's validity
}

// register the event handler callback
async function main() {
    adminUser = await Realm.Sync.User.login(`https:${SERVER_URL}`, 'realm-admin', '')
    Realm.Sync.addListener(`realms:${SERVER_URL}`, adminUser, NOTIFIER_PATH, 'change', handleChange);
}

main()

Note: In above code var realm = changeEvent.realm; where realm is the object which contains all rows, values which was changed in DB and other informations as well. So in event handler file no need to open realm to get realm object or to do any DB operation. You can use above realm object through out the event handler file carefully.

In past we did same mistake when dealing with realm object. Like

Realm.open({schema: [Car, Person]})
  .then(realm => {
    // ...use the realm instance here
  })
  .catch(error => {
    // Handle the error here if something went wrong
  });

So you no need to open realm in Event handler file unless you need it. As you can see the object realm already available var realm = changeEvent.realm;  globally.

For any DB operation like insertion, modification and delete operation you can use above realm object.

References:

https://realm.io/docs/javascript/latest/
https://academy.realm.io/posts/realm-sf-tim-oliver-event-handling-realm-object-server/https://docs.realm.io/platform/using-synced-realms/server-side-usage/data-change-events

Hope you like the post and stay tuned for my next post about “deep analysisof handling event handler for each DB operations”.

Thanks!


Leave a comment

Caching using zend framework(1sT sTEP tOWARDS zERO tO hERO)

In this blog we will discuss how to cache your whole project. When we run our project, php interpreter enters into the public/index.php file and after interpreted the project source code, again it comes out through index.php file.

ppt

 

As in above image we can see index.php is entry point and exit point so if we will start Caching and end Caching in index.php file then our whole project will be cached. We will see how it can be possible through demo.

DEMO

1st Step: 

You should have created project using zend framework. Here we are using zend framework 1.12 for easy understanding. If you want to install framework and create project so check these 2 links.

1. https://www.digitalocean.com/community/tutorials/how-to-install-zend-framework-on-an-ubuntu-12-04-vps

2. http://framework.zend.com/manual/1.12/en/learning.quickstart.create-project.html

2nd Step:

Create clone of the project from https://github.com/tbiswal/quickstart which we will use for demo.

3rd Step:

As we are caching whole project so we will follow #Zend_Cache_Frontend_Output method.

4th Step:

Create directory called cache inside public directory and give full read write permission to cache directory.

5th Step:

Add below code in mentioned files:-

1. quickstart/public/index.php

Add this code before $application->bootstrap()->run();


// auto loader
require_once 'Zend/Loader/Autoloader.php';
$autoloader = Zend_Loader_Autoloader::getInstance();
$autoloader->setFallbackAutoloader(true);

// config
$config = new Zend_Config_Ini(APPLICATION_PATH . '/configs/application.ini', 'production');
$registry = Zend_Registry::getInstance();
$registry->set('config', $config);

// Setup caching option
$frontendOptions = array(
    'lifetime' => 7200, // cache lifetime of 2 hours
    'automatic_serialization' => true
);
$backendOptions = array(
    'cache_dir' => 'cache/' // Directory where to put the cache files
);
$cache = Zend_Cache::factory('Output',
    'File',
    $frontendOptions,
    $backendOptions
);
$registry->set('appCacheObj', $cache);

$appCache = Zend_Registry::get('appCacheObj');

$cacheId = 'myCacheId'.str_replace("/", "_", $_SERVER['REQUEST_URI']);

if(strpos($cacheId, ".php") !== -1) {
    $cacheId = explode(".php", $cacheId)[0];
}

//Clear cache for dynamic page
if($_SERVER['REQUEST_URI'] == "/guestbook/sign") {
    $appCache->remove($cacheId);
}

//Cache start
if($appCache->start($cacheId)) {
    exit;
}

After $application->bootstrap()->run(); add below line:


    //Cache end
    if(!is_null($appCache)){
        $appCache->end();
    }

2. Add below code inside end of the public function save() of models/GuestbookMapper.php file:-


//Clear cache on save action to show new data to user instead of cached data
$appCache = Zend_Registry::get('appCacheObj');
$appCache->clean(Zend_Cache::CLEANING_MODE_ALL);

When you will browse http://quickstart.local/guestbook/sign you will get the page like below.

ppt2

You can check the cache directory which contains the cached files. After click on Sign Guestbook it will clear the cache 1st and then it will create new cached files.

FYI : So for your project you have to clear cache on any save action so that user will get new fetched records otherwise you can show data from cached records.

After completing all the above step when you will browse your project you will find that each page of your application is cached. Only the cached record will be cleaned if you click on any save action. So enjoy 🙂

/*Hope you will love it */


2 Comments

cACHING uSING zEND fRAMEWORK(zERO tO hERO)

In my previous post we have seen simple caching using plain PHP. Here we will learn how to implement caching using Framework. We will use ZendFramework-1.12.3. You might wonder that why I am using very old version framework for caching. Don’t worry I will make you zero to hero in caching step by step. In this version caching is very easy to understand also easy to implement. So let’s start!!

Analysis:

Note: You can also refer manual and for demo you can refer my blog.

Zend_Cache provides a generic way to cache any data. Caching in Zend Framework is operated by frontends while cache records are stored through backend adapters (File, Sqlite, Memcache…) through a flexible system of IDs and tags. Using those, it is easy to delete specific types of records afterwards (for example: “delete all cache records marked with a given tag”).

The core of the module (Zend_Cache_Core) is generic, flexible and configurable. Yet, for your specific needs there are cache frontends that extend Zend_Cache_Core for convenience: Output, File, Function and Class.

Example #1 Getting a Frontend with Zend_Cache::factory()

Zend_Cache::factory() instantiates correct objects and ties them together. In this first example, we will use Core frontend together with File backend.


    $frontendOptions = array(
        'lifetime' => 7200, // cache lifetime of 2 hours
        'automatic_serialization' => true
    );

    $backendOptions = array(
        'cache_dir' => './tmp/' // Directory where to put the cache files
     );

    // getting a Zend_Cache_Core object
    $cache = Zend_Cache::factory('Core',
        'File',
        $frontendOptions,
        $backendOptions
    );

Note: Frontends and Backends Consisting of Multiple Words Some frontends and backends are named using multiple words, such as ‘ZendPlatform’. When specifying them to the factory, separate them using a word separator, such as a space (‘ ‘), hyphen (‘-‘), or period (‘.’).

Example #2 Caching a Database Query Result

Now that we have a frontend, we can cache any type of data (we turned on serialization). for example, we can cache a result from a very expensive database query. After it is cached, there is no need to even connect to the database; records are fetched from cache and unserialized.


    // $cache initialized in previous example
    // see if a cache already exists:
    if( ($result = $cache->load('myresult')) === false ) {

        // cache miss; connect to the database

        $db = Zend_Db::factory( [...] );

        $result = $db->fetchAll('SELECT * FROM huge_table');

        $cache->save($result, 'myresult');

        } else {

            // cache hit! shout so that we know
            echo "This one is from cache!\n\n";

    }

    print_r($result);

Example #3 Caching Output with Zend_Cache Output Frontend

We ‘mark up’ sections in which we want to cache output by adding some conditional logic, encapsulating the section within start() and end() methods (this resembles the first example and is the core strategy for caching).

Inside, output your data as usual – all output will be cached when execution hits the end() method. On the next run, the whole section will be skipped in favor of fetching data from cache (as long as the cache record is valid).

$frontendOptions = array(
    'lifetime' => 30, // cache lifetime of 30 seconds
    'automatic_serialization' => false // this is the default anyways
);

$backendOptions = array('cache_dir' => './tmp/');

$cache = Zend_Cache::factory('Output',
    'File',
    $frontendOptions,
    $backendOptions
);

// we pass a unique identifier to the start() method
if(!$cache->start('mypage')) {
    // output as usual:
    echo 'Hello world! ';
    echo 'This is cached ('.time().') ';
    $cache->end(); // the output is saved and sent to the browser
}

echo 'This is never cached ('.time().').';

Simple Demo: I assume that you have installed zend framework 1.12. Here we will use concept of Example #3 for caching. We will use File as backend adapter to store cache records. So create a directory called “cache” inside public folder with read write permission.

Step 1: Add below code in public/index.php before $application->bootstrap() ->run();


    // auto loader
    require_once 'Zend/Loader/Autoloader.php';
    $autoloader = Zend_Loader_Autoloader::getInstance();
    $autoloader->setFallbackAutoloader(true);

    // registry
    $registry = Zend_Registry::getInstance();

    $frontendOptions = array(
        'lifetime' => 7200, // cache lifetime of 2 hours
        'automatic_serialization' => true
    );

    $backendOptions = array(
        'cache_dir' => 'cache/' // Directory where to put the cache files
    );

    $cache = Zend_Cache::factory('Output',
        'File',
        $frontendOptions,
        $backendOptions
    );
    $registry->set('appCacheObj', $cache);

Step 2: Add below code in indexAction() inside indexController.php


    $appCache = Zend_Registry::get('appCacheObj');
    $cacheId = 'myBigLoop';
    //If cache record is not present then caching will be started from this code
    if($appCache->start($cacheId)) {
        exit;
    }
    $data = '';
    for ($i = 0; $i < 10000; $i++) {
        $data = $data . $i." ";
    }
    $this->view->data = $data;

Step 3: Add below code in index.phtml inside view folder.


<?php
$appCache = Zend_Registry::get('appCacheObj');
    echo $this->data;

//Caching will be ended here
if(!is_null($appCache)){$appCache->end();}
?>

Before caching:

When you will browse your index page( EX: http://localhost/quickstart/public/index.php) 1st time you will get the result 0 to 10000 as output. Now if you will check your cache directory you will find Binary file named “zend_cache—myBigLoop” where myBigLoop was your cacheId. If you will check the time taken to get your output it will be at least more than 70ms.

before_caching

After caching:

When you will browse index page next time you will get your output from cached files. The time taken to generate output will be 3-4 times faster than previous result.

after_caching

For time being you can delete your cached record manually from cache folder and experiment on it. We will deal with little complex demo in my next blog and also we will clear cached record through code.

Reference:

http://framework.zend.com/manual/1.12/en/manual.html

/*Hope you will love it */


Leave a comment

Get Images in 16 : 9 Format

After lots of searching in Goggle, Stack exchange finally I am able to generate images in 16:9 format for youtube, dailymotion and vimeo. So lets have a look how can we simply get the thumb images from dailymotion, vimeo and youtube API.

Dailymotion

Step 1:
From the http://www.dailymotion.com/us if you will click on any video you will get the url in this format for that video:

http://www.dailymotion.com/video/<video_id>

Ex: Here is my url http://www.dailymotion.com/video/x267cnn_pree-two-feet-shy-indmusic-in-the-great-outdoors_music

Step 2:
To get the thumb image in 16:9 format, request dailymotion API in this format:

https://api.dailymotion.com/video/<video_id>?fields=thumbnail_360_url&thumbnail_ratio=widescreen

Ex: https://api.dailymotion.com/video/x267cnn_pree-two-feet-shy-indmusic-in-the-great-outdoors_music?fields=thumbnail_360_url&thumbnail_ratio=widescreen

Step 3:
In Step 2 you will get response like this: {“thumbnail_360_url”:”http:\/\/s2.dmcdn.net\/HphZA\/640×360-E1L.jpg”}

Reconstruct the thumbnail_360_url:
EX: http://s2.dmcdn.net/HPhZA/640×360-E1L.jpg

Image:

640x360-E1L

  640×360(16:9)



Vimeo

Step 1:
Get the vimeo video URL. Ex: http://vimeo.com/831365

Step 2:
To get data about a specific video, use the following url:

http://vimeo.com/api/v2/video/video_id.output

video_id : The ID of the video you want information for. output Specify the output type. VIMEO currently offer JSON, PHP, and XML formats.

So getting this URL http://vimeo.com/api/v2/video/831365.xml:


<videos>
  <video>
    [skipped]
    <thumbnail_small>http://i.vimeocdn.com/video/52914011_100x75.jpg</thumbnail_small>
    <thumbnail_medium>http://i.vimeocdn.com/video/52914011_200x150.jpg</thumbnail_medium>
    <thumbnail_large>http://i.vimeocdn.com/video/52914011_640.jpg</thumbnail_large>
   [skipped]
  </video>
</videos>

Parse this for every video to get the thumbnail.

Here’s approximate code in PHP:


<?php
  $videoid = 831365;

  $hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$videoid.php"));

  $hash = $hash[0]['thumbnail_large'];

  $pieces = explode("_", $hash);

  echo "Your Image is here: " . $pieces[0] . "_640x360.jpg";
?>

O/P:
Your Image is here: http://i.vimeocdn.com/video/52914011_640x360.jpg

Image:-

52914011_640x360

     640×360(16:9)


Youtube

Step 1:
Get the youtube video url. Ex: http://www.youtube.com/watch?v=10OTg6lD4Jc

Step 2:
Request youtube API for 16:9 format:

http://img.youtube.com/vi/<video_id>/mqdefault.jpg or http://img.youtube.com/vi/<video_id>/maxresdefault.jpg

Ex(Medium quality image):
http://img.youtube.com/vi/10OTg6lD4Jc/mqdefault.jpg

Image:

mqdefault

320×180(16:9)

Ex(High quality image):
http://img.youtube.com/vi/10OTg6lD4Jc/maxresdefault.jpg

7788_91393518121913073

 1280×720(16:9)

References:
http://stackoverflow.com/questions/25740034/show-dailymotion-video-and-thumbnail-in-correct-169-format
http://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api
http://stackoverflow.com/questions/1361149/get-img-thumbnails-from-vimeo

/* Hope You will love it */