Category Archives: Home

Deploying My Perl Application to dotCloud

dotCloud provides an easy way for you to show your Web application to the world.

This is how I deployed my Moving Company Travel Time Calculator on dotCloud.

Create the dotCloud application.

traveltime > dotcloud create traveltime
    ==> Creating a live application named "traveltime"
    ==> Application "traveltime" created.
        Connect the current directory to "traveltime"? [Y/n]: Y
    ==> Connecting with the application "traveltime"
    ==> Connected with default push options: --rsync

It looks like the application has been created. I then created a configuration file, “dotcloud.yml”.

www:
  type: perl
  approot: traveltime
  requirements:
    - App::cpanminus

Then connect..

traveltime > dotcloud connect traveltime
    ==> Connecting with the application "traveltime"
    ==> Connected with default push options: --rsync

I need to tell “app.psgi” who my Dancer2 script is.


traveltime > echo "require 'bin/app.pl';" > app.psgi
  

Then deploy the application


traveltime > dotcloud push
    ==> Pushing code with rsync from "./" to application traveltime
        building file list ... done
        ./
        dotcloud.yml
        .dotcloud/
        .dotcloud/config
        traveltime/
        traveltime/Changes
        traveltime/MANIFEST
        traveltime/MANIFEST.SKIP
        traveltime/Makefile.PL
        traveltime/README.pod
         ...
         14:34:17.360184: [www] Successfully installed Dancer2-0.04
         14:34:17.539632: [www] <== Installed dependencies for .. Finishing.
         14:34:17.540369: [www] 49 distributions installed
         14:34:22.529592: [www] Build completed successfully. Compiled image size is 11MB
         14:34:22.548716: [www] Build successful for service (www)
         14:34:22.563869: --> Application (traveltime) build is done
         14:34:22.582326: --> Provisioning services... (This may take a few minutes)
         14:34:22.599485: [www] Using default scaling for service www (1 instance(s)).
         14:34:22.651213: [www] Using limits for service "www": ram=64M
         14:34:22.696068: [www.0] Provisioning service (www) instance #0
         14:34:27.002331: --> All services' instances have been provisioned. Installing code...
         14:34:27.015045: [www.0] Installing build revision rsync-1371306712243 for service (www) instance                    #0
         14:34:34.852233: [www.0] Running postinstall script...
         14:34:35.582842: [www.0] Launching...
         14:34:36.905954: [www.0] Waiting for the instance to become responsive...
         14:34:37.910787: [www.0] Re-routing traffic to the new build...
         14:34:38.031666: [www.0] Successfully installed build revision rsync-1371306712243 for service  (www) instance #0
         14:34:38.039928: [www.0] Installation successful for service (www) instance #0
         14:34:38.043176: --> Application (traveltime) fully installed
    ==> Application is live at http://traveltime-aibistin.dotcloud.com
    [10:34 - 0.20]
    traveltime > 


I then checked the URL http://traveltime-aibistin.dotcloud.com, which gave me an error.

"uWSGI Error
Perl application not found"

So off to the log files to check what went wrong.

 traveltime > dotcloud logs www
[www.0] ==> /var/log/supervisor/supervisord.log <==
...
cloud/rsync-1371314776610/traveltime/config.conf: Cannot load /home/dotcloud/rsync-1371314776610/traveltime/config.conf: required support modules are not available.
[www.0] Please install Config::General at /home/dotcloud/perl5/lib/perl5/Dancer2/Core/Role/Config.pm line 97
[www.0]  at (eval 35) line 19
[www.0] BEGIN failed--compilation aborted at bin/app.pl line 3.
...
[www.0] ==> /var/log/nginx/access.log <==

So it looks like dotCloud couldn’t find Config::General CPAN module. It looks like I didn’t do such a good job managing my modules dependencies. I could have used the Behemoth of Module creation Dist::Zilla to do this. However as this is not an app that I wish to upload to CPAN, or install on my laptop I wanted an easier way.

I came across this new “Bundle I searched the CPANfor another way. r for Perl” developed by the prolific and excellent Pearl developer Tatsuhiko Miyagawa. So I figured it must be good. And it is. I won’t bore you with the details here, as you can read his documentation yourself.

I now seem to have all my dependencies in order and I ran the “dotcloud push” command again. I ran into another problem. I was running Perl 5.12 on my Ubuntu laptop, and dotCloud needs at least Perl 5.14. Well I guess it was about time that I upgraded my Perl version. This took a while, as I decided to load perlbrew to manage my Perl installations.

I ran into a few glitches here and there, but I finally got it working with lots of help from KENTNL’s perlbrew blog,and a little help from DA Golden’s blog.
So, it’s time to try again from scratch.


traveltime > dotcloud destroy
    Destroy the application "traveltime"? [y/N]: y
    ==> Destroying "traveltime"


dotcloud create traveltime
    ==> Creating a live application named "traveltime"
    ==> Application "traveltime" created.
    Connect the current directory to "traveltime"? [Y/n]: y
    ==> Connecting with the application "traveltime"
    ==> Connected with default push options: --rsync

OK, looking good so far. Now, I have my dotCloud “traveltime” application up and running. I’m not too happy with the domain name that I have been issued by dotCloud, “http://traveltime-aibistin.dotcloud.com”.
So, I decided to change this to one that I already have.


TravelTime > dotcloud domain add www www.carryonmoving.net
    ==> domain "www.carryonmoving.net" created for "www"
    ==> Now please add the following DNS record:
        www.carryonmoving.net. IN CNAME gateway.dotcloud.com.

Then update my DNS settings on CloudFlare and I’m done.

The “finished” (well almost) App Moving Company Travel Time Calculator can be viewed here.

Useful Links

This is where I got lots of helpful advice for this endeavour.

  1. dotCloud Perl Tutorial
  2. Dancer2 Deployment With dotCloud
  3. Marco Fontani’s Dancer Deployment with dotCloud piece, on blogs.perl.org
  4. Perl Mongers dotCloud Presentation (which I just found)
  5. Phillip Smith’s Catalyst with dotCloud piece, on blogs.perl.org

New York City Household Furniture Moving Travel Time Calculator

My next project is to create a travel time calculator application using Dancer2. Hopefully, this would be useful to any household furniture moving company operating in New York City.
When charging for the travel time between two locations, many New York City Moving companies use the following DOT guidelines.

  1. 1/2 an hour within any borough.
  2. 3/4 an hour from one borough to another.
  3. 1 hour for the first 20 miles between locations that either start or end within New York City
  4. 1 hour for each 40 miles after the first 20 miles, which is equivalent to 15 minutes for each 10 miles.

Most of the information that I need to get the distances between locations is freely available from Google’s Distance Matrix API. I checked out CPAN to see if there was a suitable module available to access this API. There were some that partially did what I required, but not all of what I required.
I decided to write my own, which you can read about here.

Forms:

Form To Input Addresses

There are two methods of User Input that I wanted to experiment with. The first is by means of a form where you would enter the exact origin and destination addresses. I describe this in detail here.
The second method, using jQuery autocomplete, I discuss here.

Dancer2 Application TravelTime

The Perl App that implements the Travel Time Calculator

I used the Perl Dancer2 framework for building this application. Dancer2 bills itself as a “Lightweight yet powerful web application framework”, which I guess is true. It works well for me and is not too complex. I did run into a few bugs which seem to have been ironed out in the very latest version. So, it does have an active group of developers who are maintaining and upgrading this software. Thank you for that.
Here is an excerpt from this module, showing one particular route handler. This particular one handles an Ajax call to provide a list of cities that match a specific search criteria. The Dancer2::Plugin::Ajax helps out with this method. The caller in this case is a JavaScript program that I use to implement a jQuery autocomplete input field. You can read about this here

#-------------------------------------------------------------------------------
#    Get a list of city, states and counties.
#-------------------------------------------------------------------------------
ajax '/city_states' => sub {
    
    #------ Trim  whitespace from lhs and append the '%' SQL match char.
    #       This will handle searches like 'Sunn,      New York' (Sunnyside, New York)
    #       or                             'Kew Gar,      New York' (Kew Gardens,  New York)
    #       or                             'Kew,New York'
    my @find_params =
      map { $_ =~ s/^\s+//; s/\s+\z//; $_ . '%' }
      split( ',', params->{find} );
    debug 'The find params array now contains : ' . dump @find_params;

    my $csc_arr;

    #------ Allow some short cuts for the Big Apple
    if ( $find_params[0] =~ /^(nyc|manhattan|base)%\z/i ) {
        $csc_arr->[0] = [ 'New York City', 'New York', 'New York County' ];
    }
    else {

        #----- Search DB for City and Counties matching the search params.
        connect_to_cities() unless $DBH;
        process_error( { Error => 'Unable to connect to the City, State,
                county database! Please try later!', } ) unless $DBH;
        $csc_arr = select_city_state_cty( $DBH, \@find_params );
    }

    #------ Returns sorted list of Cities, States and Counties to
    #       city-states.js
    { city_states => $csc_arr };
};

Have a look at the entire Application code on GitHub.
For a live demo, here is the Moving Truck Travel Time Calculator application running on the dotCloud hosting service.
This is how I deployed my Dancer2 Application to dotCloud.

City, State, County Selection With Bootstrap 2 Typeahead

This is a demonstration of how I implemented an Ajax call to a Perl Dancer2 Application using jQuery and the Bootstrap Typeahead function.

As part of my TravelTime App , I wanted to create and easy way to select the start and end locations using the jQuery Autocomplete component. Bootstrap 2 has its own version of this which they call Typeahead.
I just found out that the latest version of Bootstrap will not include this Typeahead functionality. Instead it will be replaced with typeahead.js I hope to check this out in the future.
Anyway, I will be using Perl, Dancer2 with Template Toolkit to render this form.
I also needed to customise the Typeahead to complete an Ajax call to my Perl Dancer2 application. The Dancer2 application will then provide the sorted list of City,States and Counties based on the search parameters passed to it.

The Template::Toolkit Form

Exerpt from travel_time_quick.tt

<div class="span11">
        <span class="text-info">
            <abbr title='Enter the starting location'>Start Location</abbr>
        </span>
        <div class="control-group">
        <!-- Bootstrap Typeahead -->
            <label class="control-label" for="address-[% loop.count %]">[% warning_message %]</label>
            <div class="controls">
                <input type="text"
                    class="cityStatesTypeahead span9 input-append"
                    name="address-[% loop.count %]"
                    id="address-[% loop.count %]" value="[% address %]"
                    placeholder="City/Town, State" 
                    autocomplete="off"
                    data-provide="typeahead"
                    required="required" 
                    autofocus
                    />
                    <span class="addQmark"><i class="iconic-question-mark"></i></span>
            </div>
            <input type="hidden"
                name="h-address-[% loop.count %]"
                id="h-address-[% loop.count %]"
                value=""
                />
            </div>
        </div> <!-- /span11 -->

The entire template can be seen here on GitHub.
The highlighted fields are the ones that are pertinent to the activation of the Bootstrap Typeahead.
In order to customise the Bootstrap Typeahead, I found this very useful website by FusionGrokker, for which I am thankful (You could also check out the jQuery docs for the original concept).

Here is my JavaScript to implement the Typeahead Ajax call.

The jQuery

Excerpt from city-states.js

var hiddenId;
// Get the hidden address field associated with the current
// address field
$('.cityStatesTypeahead').bind('focus',  function(){
   hiddenId =  $(this).attr('id'); 
});

$(".cityStatesTypeahead").typeahead({
  items: 10, 
  minLength : 3, 
  source:  function(query, process) {
      //Call Perl App to find the sorted list of City, States and Counties
      return searchForPlaces(query, process);
 },  
  highlighter: function(item){
    return highLightSelect(item);
},  

matcher: function () { return true; }, 
 
updater: function (item) {
    return updateField(item);
}, 

});
// Ajax call to Perl Dancer Script, which returns an Array Ref
// of sorted City, State and County data.
var debounceWait = 100;
// Use Underscore JS function '_debounce' to ensure that the
// search waits for specific number of milliseconds before running again.
var cityStates = {};
var cityNames = [];
var searchForPlaces = _.debounce(function( query,  process ){
    $.post("/city_states",{ find : query}, function(data){
    cityStates = {};
    cityNames = [];
        var counter = 0;
        _.each( data.city_states,  function( item,  ix,  list ){
        item.label = item + '-' + (counter++);
         // console.log('Got this item from AJAX : ' + item);
        cityStates[item.label] = {
                city : item[0],   
                state : item[1],  
                county : item[2]
        };
        //add selected items to diaplay array
        // console.log('Add this to the array ' + item.label);
        cityNames.push(item.label);

    });
    // Let Bootstrap and jQuery process the list
    // for display in the input box
    process( cityNames );
});
},  debounceWait);

//Highlighter Function
var highLightSelect = function(item){
    // console.log("      Item inside highlighter " + item);
   var c = cityStates[item];
   return ''
       + "<div class='typeahead_wrapper'>"
       + "<div class='typeahead_labels'>"
       + "<div class='typeahead_primary'>" + c.city + ', ' + c.state + "</div>"
       + "<div class='typeahead_secondary'><strong>County: </strong>"  + c.county + "</div>"
       + "</div>"
       + "</div>";
};

// Updater Function
// Add the required data into the input field
var updateField = function(item){
   var c = cityStates[item];
   //Hidden field will contain all the valuable data
    $( "#h-" + hiddenId ).val( c.city + ',' + c.state + ',' + c.county );
   //This is the data for display on input box
   return c.city + ', ' + c.state + "  County: " + c.county ;
};

//      END BOOTSTRAP TYPEAHEAD


Have a look at line 34 for the actual Ajax call to the Perl module. It sends a request to TravelTime.pm’s ‘/city_state’ route. As the Typeahead attribute ‘minLength’ is set to 3, it passes at least the first three letters of the requested City to the Dancer2 application. The city_states database is then searched for a city beginning with this search string. The Dancer2 application will return a sorted list of these cities with their corresponding state and county names. The application can also accept two search strings separated by a comma. This will search the database for cities beginning with the first string and corresponding states beginning with the second string.
“city-states.js” receives this sorted list of cities, states and counties.
The Typeahead displays (items: 10) items in the dropdown list.The “highLightSelect” highlighter function formats this list into a more readable format.
When an item is selected “theupdateField” populates the hidden fields.

More details of what is happening in TravelTime.pm will be left for another post.
Have a look at the TravelTime App in action.
I hope that this blog post may useful to some developer out there.