The Dynamic Programmer

Adding a logo to ReactBootstrap NavBar.

2015-03-10T00:00:00-04:00

This is very simple, but for whatever reason I struggle for a bit. So I’m posting it here in case somebody else finds it helpful.

I wanted to add an icon as the logo to the navigation bar while using ReactBootstrap

The examples on the ReactBootstrap site use a string as the brand attribute.

I took me a bit of trying different things until I decided to take a look at the code of the library.

After a quick look, the solution to this was obvious. The `brand` attribute is of type `React.PropTypes.node`

In other words you can do this.



  var icon = (
    <span class="logo">
      <a href="/">
        <img src="/awesome-logo.png" height="33" width="120" alt="text here" /></a>
    </span>
  );

  ...
    <Navbar brand={icon} toggleNavKey={0}>
  ...

Et voila! It works!

Not sure if this idiomatic React, so if you know of a better way, please leave a comment below.

The DevOps trap, we should all embrace DevOps.

2015-03-06T00:00:00-05:00

It all starts with the undeniable need and benefits of bringing the different practices and areas of software development together. Agile practices allow us to move faster and adapt to change.

XP practices promote code quality and better (or just more reliable) products for the end users.

The idea of cross-functional teams help us to identify problems in our approach to solve issues and pinpoint bad architectural decisions.

DevOps is one of the newest practices on the Agile arsenal. In reality is not that new, but we have been hearing about it more and more in the last three to four years and now, even the enterprise is starting to notice.

According to Wikipedia DevOps is:

DevOps (a portmanteau of “development” and “operations”) is a concept dealing, among other things with software development, operations and services. It emphasizes communication, collaboration and integration between software developers and information technology (IT) operations personnel. DevOps is a response to the interdependence of software development and IT operations.

That is a definition that I can agree with.

Notice that there are no mentions in the wikipedia article to “developers” doing “operations”. That is not a requisite of DevOps.

It’s all about communication and collaboration. In time this usually means that some or all the developers in the team will have access to and help with whatever scripts, recipes, modules or method of deployment and configuration is used.

The focus is on transparency and predictability. Automation and the introduction of better management tools to reduce the amount of manual, repetitive and (let’s face it) boring work is a big focus of the practice.

This collaboration will naturally bring some of the developers more interested with the operations, network and hardware side of things into a tighter collaboration with the “operations team”. This results in a “good” vicious circle and big gains for the company that adopt the practice.

The trap

As with all social practices, the trap is trying to force DevOps into people. This can take many forms but the one that I keep seeing popping around is the idea of having developers double up as operation people and thus not having a proper operations team.

Don’t get me wrong. I think that the goal should be not having “teams” and having polyskills people that can perform in different areas as needed or as they (as individuals) want to grow into.

This is the same trap we got into with other Agile practices, like “architecture” or much rather “no architecture”. Since we don’t have glorify architects in an agile team, sometimes this is portrayed as “we don’t need no stinking architecture”.

We should all embrace DevOps

We should certainly embrace DevOps and QaDev and DevProd and whatever new practice comes along that help us remove the barriers for collaboration. That encourage open and high bandwidth communication between all the members of the team and between chickens and pigs

Specially, between chikens and pigs!

But we should also recognize the need for strong operation people as part of the team tacking charge and helping the team move forward faster and safer. Enabling many deployments a day and achieving the somehow elusive holly grail of Continuous Delivery.

Distro transports plug-ins.

2014-06-04T00:00:00-04:00

distro-redis

I yanked the support for Redis from the Distro module and moved into distro-redis. This makes distro lightweight and remove dependencies on third party modules on the code (for now).

If you want to use redis you will need to add dependencies no only on distro but also on distro-redis and when creating the distro factory pass the module to the create method.


	
	var distro = require('distro');
	var distroRedis = require('distro-redis')

	var server = distro.create(distroRedis).server(options);

	//Or

	var client = distro.create(distroRedis).client(options);

A complete overhaul and tones of improvements on Distro.

2014-05-28T00:00:00-04:00

What’s distro?

The distro module is intended to simplify the way services communicate with each other. It abstracts several different transports while providing a consistent interface. It also specifies a message format and comes with some helper factories to create and parse those messages.

It comes with some prepackaged transports for udp4 and udp6, tcp and redis (using pub-sub).
You can easily create your own transports as plug-ins (more details below).
Note that there is not interoperability between transports. Both clients and servers have to use the same transport to be able to talk to each other.

Updates on version 0.3.1

Message goes mainstream.

Before you needed to call the create() method of the distro module before creating a new message.


	
	var distro = require('distro');
	distro.create().message(headers, payload);

That makes no sense, specially with the new semantics of the create method (see below). The message method can be called directly from the module now.



	var distro = require('distro');
	distro.message(headers, payload);

Added support for Redis (pub-sub) as a transport.

If you don’t want to use udp or tcp to pass messages around and you prefer using a queue, distro have you covered now.
Just use the redis transport and use pub-sub underneath.

Fixed big oversight from previous versions.

Before v 0.3.0 you registered callbacks directly on the verbs and the Uri filtering was done by the sever. This is sub-optimal to say the least.

Now, all the registration methods (except receive) take the Uri as the first parameter.


	
	server.receive(callback);
	server.get("/path/", callbackGet);

This keeps the same functionality as before for all the methods, even the receive method. All callbacks registered with receive will be called each time a message is processed by the server regarding verb or Uri.

New transports and you can implement your own.

Transports are implemented as plug-ins. You can implement your own transport that respond the same API and inject the module as the first argument of the create() method.


	
	var distro = require('distro');
	var myTransport = require('smoke-signals-transport');

	var server = distro.create(myTransport).sever();

Better error messages.

Not just better error messages but a few more error checking in place to try to avoid the most common problems.

Much better test coverage due to the new design.

Yes.

Plans for the future.

I’m planning on changing a few more things fairly soon in the way message headers are constructed and how back and forth communication takes place.

Calculating distance and speed with the GeoLocation API - PhoneGap (Part 9).

2014-05-23T00:00:00-04:00

Code for this series is available on Github

Home screen changes.

I decided to change the data displayed on Home screen to provide information regarding distance as well.

I also made a few changes on the way we are using the Geo location plug-in. I decided to stop calling watchPosition() and instead use the angular $interval service and call getCurrentPosition() once every second.

I’m not sure if this will work for sports where speed is hight (ski, biking) and I may have to either short the time or revert this changes.

The changes where fairly easy to do and didn’t required many changes on the consumers.


	
	/* globals angular */
	angular.module('dynamic-sports.services')
	  .factory('geoLocationService', ['$interval', function ($interval) {
	    'use strict';
	    var watchId;

	    return {
	      start: function (success, error) {
	        watchId = $interval(function () {
	          navigator.geolocation.getCurrentPosition(success, error, {enableHighAccuracy: true});
	        }, 1000);
	      },
	      stop: function () {
	        if (watchId) {
	          $interval.cancel(watchId);
	        }
	      }
	    };
	  }]);

Calculating distances between coordinates.

This is a solved problem, so a quick Google search and a quick visit to this website provides the answer.

It translates to two functions. The meat of the calculation is done inside the calculateDistance function. As a convention, I return -1 in case there is an error due to invalid data.


	
	function toRad(value) {
	  var RADIANT_CONSTANT = 0.0174532925199433;
	  return (value * RADIANT_CONSTANT);
	}

	function calculateDistance(starting, ending) {
	  var KM_RATIO = 6371;
	  try {      
	    var dLat = toRad(ending.latitude - starting.latitude);
	    var dLon = toRad(ending.longitude - starting.longitude);
	    var lat1Rad = toRad(starting.latitude);
	    var lat2Rad = toRad(ending.latitude);
	    
	    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
	            Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1Rad) * Math.cos(lat2Rad);
	    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
	    var d = KM_RATIO * c;
	    return d;
	  } catch(e) {
	    return -1;
	  }
	}

The trick to display distance traveled is to use an accumulator for the distance traveled each time the interval function is called.


	
	function setSpeed(coords) {
	  var KMS_TO_KMH = 3600;
	  if (!prevCoord) {
	    prevCoord = coords;
	  }
	  $scope.session.distance += calculateDistance(prevCoord, coords);
	  if (duration.asSeconds() > 0) {
	    $scope.session.avgSpeed = ($scope.session.distance / duration.asSeconds()) * KMS_TO_KMH;
	  }
	  prevCoord = coords;
	}

The setSpeed function takes the coordinates received from getCurrentPosition(). I think the code is pretty self explanatory.

Some things that may not be obvious are that prevCoord is an interval variable of the controller and keeps track of the previous position.

You may be wandering where the duration object is coming from. We create it when we click the start button. It’s a moment.js duration object, and the asSeconds method returns the total number of seconds in the interval.

The distance is calculated in kilometers so we need to convert kilometers per second to kilometer per hour. It’s easily done by multiplying by 3600.

We did change the view to reflect this changes as well, and the session object now looks like this.


	
	$scope.session = {avgSpeed: 0, distance: 0, elapsed: "00:00"};

Accuracy.

The Geo location API accuracy is just not there yet. It’s understandable and it will depend on many factors, like location, satellite coverage, interference from buildings and more. In any case I did enable high accuracy and so far the results have been mixed.

I need to do some more testing in real conditions to see how things work. May be this week-end.

Deleting files with PhoneGap (Part 8).

2014-05-22T00:00:00-04:00

Code for this series is available on Github

Cleaning up

In our application we are uploading the files with the data from a session into our server. The problem is that we are not removing the files from the device.
So the next time that you want to upload files, you will be uploading all the files again.

It’s not that much that we forgot about this, but we decided to move on to other things at the time. It’s time to come back and clean up this part of the code.

It’s surprisingly simple.

Our code is given list of fileEntry objects to the upload method. Each fileEntry have a remove method that will delete the entry from the device.

We need to call this method after the upload succeed. We could add the code into the serverService.upload method, but I don’t think it belongs there.

I think the consumer of this method should be responsible from deciding what to do with the file.

We need to modify the upload method a bit to return the fileEntry to the consumer on success.


	
	...

	function savedFile(file, cb) {
	  return function () {
	    cb(file);
	  };
	}

	return {
	  upload: function (files, onSuccess, onError) {
	    var ft =  new FileTransfer();
	    for (var i = 0; i < files.length; i++) {
	      var file = files[i];
	      ft.upload(file.toURL(), encodeURI("http://server.com/uploads"), savedFile(file, onSuccess), onError, getFileUploadOptions(file.fullPath));
	    }
	  }
	};

	...

Now the consumer can call the remove method directly.


	
	function filesSaved(file) {
	  if (file.remove) {
	    file.remove();
	  }
	  $timeout(function () {
	    $scope.totalFiles -= 1;
	    checkUploadFinished();
	  }, 100);
	}

Just in case we do a quick check to verify the argument respond to the remove method, before calling it.

You can add some callbacks to the remove method to react on success or error if you want.

progeny

2014-05-21T00:00:00-04:00

Displaying current and max speed with PhoneGap and Ionic (Part 7).

2014-05-21T00:00:00-04:00

Code for this series is available on Github

Max and current speed.

We want to start displaying the maximum and current speed in the home page. The numbers need to be big enough to read easily. we also want to show the duration for the active session.

UI

We will change the home page once more. We will remove the Uploading files message since the badge numbers on the upload icon provide enough feedback.

We will accommodate the three boxes for the counters near the top of the application and we will move the start/stop button a tiny bit closer to the bottom.
The HTML for the home.html page now look like this.



	<ion-view title="New session">
	  <ion-nav-buttons side="right">
	      <button class="button button-clear icon ion-ios7-cloud-upload" ng-click="upload()" ng-disabled="uploadDisabled"></button>
	      <span class="count-badge" ng-show="totalFiles"></span>
	  </ion-nav-buttons>
	  <div class="status slide" ng-class='{"status-success-visible": uploadSucceded, "status-error-visible": uploadErrored}'></div>
	  <ion-content class="center-child" has-header="true" padding="true">
	    <div class="speedometer-container">
	        <div class="instrument">
	            <small class="icon-left ion-ios7-speedometer"> max speed</small><br/>
	            <div class="instrument-figure"> <span></span> <small>km/h</small></div>
	        </div>
	        <div class="instrument">
	            <small class="icon-left ion-ios7-speedometer-outline"> curr. speed</small><br/>
	            <div class="instrument-figure"> <span></span> <small>km/h</small></div>
	        </div>
	        <div class="instrument">
	            <small class="icon-left ion-ios7-stopwatch-outline"> duration</small><br/>
	            <div class="instrument-figure no-units"> <span></span> <small></small></div>
	        </div>
	    </div>
	    <div class="duration-container">
	    </div>
	    <play-stop-button class="play-button" click-handler="recording"></play-stop-button>
	  </ion-content>
	</ion-view>

We are going to clean up the CSS significantly. Mostly re-structuring the sass file and removing the center button hack. We will be using absolute positioning for now.



	.center-child {
	  .scroll {
	    .speedometer-container {
	      margin-bottom: 24px;
	      margin-top: 12px;
	      position: relative;
	      text-align:center;
	      .instrument {
	        border: solid 2px $balanced;
	        display: inline-block;
	        min-width: 90px;
	        padding: 3px 6px;
	        .instrument-figure {
	          font-size: 24px;
	          &.no-units {
	            height: 25px;
	          }
	          small {
	            font-size: 12px;
	          }
	        }
	      }
	    }
	    .play-button {
	      position: relative;
	      top: 70px;
	    }

	....

Controller abuse.

I’m abusing the HomeCtrl here and it’s pretty obvious that a service wants to spawn out from this code.
we are adding a new object on the $scope, the session object, that contains three properties; maximum speed, current speed and duration.

We injected the $interval service to the controller to calculate duration and display it every second. We are also adding the great moment.js library to calculate and display duration easily.

Take a look at the stopTimer method. We need to make sure we de-register the interval and we destroy the times to avoid memory leaks.



	/* globals angular, console */
	angular.module('dynamic-sports.controllers')
	  .controller('HomeCtrl', ['$scope', '$timeout', '$interval', '$ionicPlatform', 'geoLocationService', 'fileService', 'serverService',
	    function ($scope, $timeout, $interval, $ionicPlatform, geoLocationService, fileService, serverService) {
	    'use strict';
	    var fileName;
	    var elapsedTimer;
	    var duration;
	    $scope.uploading = false;
	    $scope.uploadDisabled = false;
	    $scope.uploadErrored = false;
	    $scope.uploadSucceded = false;
	    $scope.uploadMessage = "";
	    $scope.totalFiles = 0;

	    function resetSession() {
	      $scope.session = {maxSpeed: 0, curSpeed: 0, elapsed: "00:00"};
	    }

	    function toKmPerHour(meterPerSecond) {
	      return String(meterPerSecond * 3.6).substring(0, 3);
	    }

	    function setSpeed(speed) {
	      if (speed > 0) {
	        $scope.session.curSpeed = toKmPerHour(speed);
	      }
	      if (speed > $scope.session.maxSpeed) {
	        $scope.session.maxSpeed = toKmPerHour(speed);
	      }
	    }

	    function onChange(newPosition) {
	      var data = newPosition.coords;
	      data.timestamp = newPosition.timestamp;
	      setSpeed(data.speed);
	      fileService.save(fileName, data, function () {}, function (error) { alert("Error file save");});
	    }

	    function toolTip() {
	      if (!$scope.uploading) {
	        $scope.uploadErrored = $scope.erroredCount > 0;
	        $scope.uploadSucceded = $scope.erroredCount === 0;
	        $scope.uploadMessage = ($scope.uploadSucceded) ? "Upload completed" : "Failed to upload " + $scope.erroredCount + " files";
	        $timeout(function () {
	          $scope.uploadErrored = false;
	          $scope.uploadSucceded = false;
	        }, 3000);
	      }
	    }

	    function checkUploadFinished() {
	      $scope.uploading = ($scope.totalFiles > $scope.erroredCount);
	      $scope.uploadDisabled = $scope.totalFiles === 0 || $scope.uploading;
	      toolTip();
	    }

	    function errHandler(error) {
	      $scope.erroredCount += 1;
	      checkUploadFinished();
	    }

	    function filesSaved() {
	      $timeout(function () {
	        $scope.totalFiles -= 1;
	        checkUploadFinished();
	      }, 100);
	    }

	    function uploadFiles(files) {
	      $scope.uploading = true;
	      $scope.uploadDisabled = true;
	      filesToUpload(files);
	      $scope.erroredCount = 0;
	      checkUploadFinished();
	      $timeout(function () {
	        serverService.upload(files, filesSaved, errHandler);
	      }, 100);
	    }

	    function checkUploadDisabledStatus() {
	      $scope.uploadDisabled = $scope.totalFiles === 0;
	    }

	    function setTotalFilesTo(qty) {
	      $scope.totalFiles = qty;
	      checkUploadDisabledStatus();
	    }

	    function filesToUpload(files) {
	      $timeout(function () {
	        setTotalFilesTo(files.length);
	      }, 10);
	    }

	    function padTime(val) {
	      if (val < 10) {
	        return "0" + val;
	      }
	      return val;
	    }

	    function displayDuration() {
	      var hours = padTime(duration.get('hours'));
	      var minutes = padTime(duration.get('minutes'));
	      var seconds = padTime(duration.get('seconds'));
	      if (hours === "00") {
	        $scope.session.elapsed = minutes + ":" + seconds;
	      } else {
	        $scope.session.elapsed = hours + ":" + minutes + ":" + seconds;
	      }
	    }

	    function startTimer() {
	      duration = moment.duration(0);
	      elapsedTimer = $interval(function () {
	        duration.add(1, 's');
	        displayDuration();
	      }, 1000);
	    }

	    function stopTimer() {
	      if (angular.isDefined(elapsedTimer)) {
	        $interval.cancel(elapsedTimer);
	        elapsedTimer = undefined;
	      }
	      resetSession();
	    }

	    $scope.upload = function () {
	      fileService.list(uploadFiles, errHandler);
	    };

	    $scope.recording = function (on) {
	      if (on) {
	        fileName = geoLocationService.start(onChange, function (err) { alert("Error geolocation service"); });
	        startTimer();
	      } else {
	        geoLocationService.stop();
	        setTotalFilesTo($scope.totalFiles + 1);
	        stopTimer();
	      }
	    };

	    $ionicPlatform.ready(function () {
	      fileService.list(filesToUpload, errHandler);
	    });

	    resetSession();
	  }]);

Speed conversion.

The Geo-location service reports speed in meters per second and we want to display kilometers per hour. The conversion is easily done multiplying the speed by 3.6
We also make sure that we only display 3 characters for speed, so we use the substring method of the String object.

We encapsulates all the logic in the toKmPerHour function.

How it looks.

This video was taken directly from my iPhone.

water planter

2014-05-20T00:00:00-04:00

blooming

2014-05-20T00:00:00-04:00

A few different ways to improve user feedback in our Ionic application (Part 6).

2014-05-16T00:00:00-04:00

Code for this series is available on Github

Showing upload progress.

We want to report the progress of uploaded files with a simple message and a counter indicating how many have been uploaded. In the case there is an error with a file we want to show all errors at the end of the process.

Since the name of the file is not important (the user have no control on the file and there is not much he can do about the files itself), we will just indicate the number of files that erred uploading.

Once the process finishes we want to show a message that slides down from the top that indicates the result.

The code

We can start with a very simple UI element in the home page to indicate that the upload process started.

We are also moving the upload button into the navbar and adding a small badge icon to display the number of files.
If we have no files we want to disable the button and hide the badge.



	<ion-view title="New session">
	  <ion-nav-buttons side="right">
	      <button class="button button-clear icon ion-ios7-cloud-upload" ng-click="upload()" ng-disabled="uploadDisabled"></button>
	      <span class="count-badge" ng-show="totalFiles"></span>
	  </ion-nav-buttons>
	  <ion-content class="center-child" has-header="true" padding="true">
	    <div class="info-message" ng-show="uploading">Uploading files...</div>
	    <play-stop-button click-handler="recording"></play-stop-button>
	  </ion-content>
	</ion-view>

And we need to do a few changes to the HomeCtrl as well to keep track of success and failures.



	/* globals angular, console */
	angular.module('dynamic-sports.controllers')
	  .controller('HomeCtrl', ['$scope', '$timeout', '$ionicPlatform', 'geoLocationService', 'fileService', 'serverService',
	    function ($scope, $timeout, $ionicPlatform, geoLocationService, fileService, serverService) {
	    'use strict';
	    var fileName;
	    $scope.uploading = false;
	    $scope.uploadDisabled = false;

	    function onChange(newPosition) {
	      var data = newPosition.coords;
	      data.timestamp = newPosition.timestamp;
	      fileService.save(fileName, data, function () {}, function (error) {});
	    }

	    function checkUploadFinished() {
	      $scope.uploading = ($scope.totalFiles > $scope.erroredCount);
	      $scope.uploadDisabled = $scope.totalFiles === 0 || $scope.uploading;
	    }

	    function errHandler(error) {
	      $scope.erroredCount += 1;
	      checkUploadFinished();
	    }

	    function filesSaved() {
	      $timeout(function () {
	        $scope.totalFiles -= 1;
	        checkUploadFinished();
	      }, 100);
	    }

	    function uploadFiles(files) {
	      $scope.uploading = true;
	      $scope.uploadDisabled = true;
	      filesToUpload(files);
	      $scope.erroredCount = 0;
	      checkUploadFinished();
	      $timeout(function () {
	        serverService.upload(files, filesSaved, errHandler);
	      }, 100);
	    }

	    function filesToUpload(files) {
	      $timeout(function () {
	        $scope.totalFiles = files.length;
	        $scope.uploadDisabled = $scope.totalFiles === 0;
	      }, 10);
	    }

	    $scope.upload = function () {
	      fileService.list(uploadFiles, errHandler);
	    };

	    $scope.recording = function (on) {
	      if (on) {
	        fileName = geoLocationService.start(onChange, errHandler);
	      } else {
	        geoLocationService.stop();
	        $scope.totalFiles += 1;
	        $scope.uploadDisabled = false;
	      }
	    };

	    $ionicPlatform.ready(function () {
	      fileService.list(filesToUpload, errHandler);
	    });
	  }]);

We check for the number of files once we load the home page and we keep track of the number of created and uploaded files.

Changes on the file service.

During testing I found that the emulator reads not only the files we created but a few others from the root of the file sytem. We will create an specific folder for the tracking files to avoid problems.

We do that adding a private method on our fileService that creates a Directory if it doesn’t exist.


	
	function getCreateDir(entry, successCb, errorCb) { 
	  entry.getDirectory("dynsports", {create: true, exclusive: false}, successCb, errorCb); 
	}

We replace all calls to fileSystem.root.getFile() with the result of calling this new function. For example our write function instead of using the root system directly:



	function write(fileName, data, successCb, errorCb) {
	  return function (fileSystem) {
	    fileSystem.root.getFile(fileName, {create: true, exclusive: false}, gotFileEntry(data, successCb, errorCb), errorCb);
	  };
	}

It now looks like this.



	function write(fileName, data, successCb, errorCb) {
	  return function (fileSystem) {
	    getCreateDir(fileSystem.root, function (dir) {
	      dir.getFile(fileName, {create: true, exclusive: false}, gotFileEntry(data, successCb, errorCb), errorCb);
	    }, errorCb);
	  };
	}

We also need to add a method to delete the files once upload finishes successfully.

The new method looks like this.

We will call it from the HomeCtrl inside the success call back for the upload method.

Tool-tip

Adding the tool-tip is easy. We only need a few lines of html and this css.
In the home.html file we add the div that will be our sliding tool-tip.



	<div class="status slide" ng-class='{"status-success-visible": uploadSucceded, "status-error-visible": uploadErrored}'></div>

We will use CSS transitions to slide it down and up again. We are using two different classes for success and error to show the tool-tip in different colours.


	
	.slide {
	  color: #fff;
	  height: 22px;
	  position: absolute;
	  width: 100%;
	  text-align: center;
	  top: 0;
	  z-index: -1;
	  -webkit-transition: all 1s;
	  -moz-transition: all 1s;
	}
	.status-success-visible {
	  background-color: $balanced;
	  top: 64px;
	}
	.status-error-visible {
	  background-color: $energized;
	  top: 64px;
	}

We need to set the message and change those scope variables to true or false in the controller. We add a new private function that we will call when we check for upload completion.

	

	function toolTip() {
	  if (!$scope.uploading) {
	    $scope.uploadErrored = $scope.erroredCount > 0;
	    $scope.uploadSucceded = $scope.erroredCount === 0;
	    $scope.uploadMessage = ($scope.uploadSucceded) ? "Upload completed" : "Failed to upload " + $scope.erroredCount + " files";
	    $timeout(function () {
	      $scope.uploadErrored = false;
	      $scope.uploadSucceded = false;
	    }, 3000);
	  }
	}

Adding TCP support to Distro.

2014-05-15T00:00:00-04:00

I took a bit of time to add TCP support to distro

Now you can create a network of client servers with TCP, UDP4 and UDP6.

The TCP servers use the same Message types.

I took the time to improve the documentation (I think is completed now).

I also added two more examples (server and client) for TCP.

As part of the effort the code was refactored a bit allowing for easier extensibility.

Enjoy!

tree waiting

2014-05-12T00:00:00-04:00

red wing

2014-05-12T00:00:00-04:00

butterflies

2014-05-12T00:00:00-04:00

bon voyage

2014-05-10T00:00:00-04:00

Ionic new serve task.

2014-05-10T00:00:00-04:00

I’m not sure when these tasks have been introduced but I just installed Ionic 1.0.0 beta 4 and after running the ionic command I saw three new tasks that you can run:



    serve - Start a local development server for easy app development and testing
    login - Login to the Ionic Platform
    upload - Upload an Ionic project to the Ionic Platform (requires login)

I really appreciate the serve task that make running a development server a bit easier than running python -m SimpleHTTPServer 8000 from inside the www folder of the project.

Now you just run ionic serve from the root of the project and your default browser will open with the application loaded in it. It will also run a a live reload server, so when you change the files in your project the browser window will reload with the changes.

This should improve your development cycle without having to set up any of this on your own.

The other two task are related to the upcoming Ionic Platform.

Uploading files with PhoneGap and Angular (Part 5).

2014-05-09T00:00:00-04:00

Code for this series is available on Github

In the previous to last post we created a series of files, each one with data from a recorded session. We want to upload that data into a server for further processing.

In this post we will add the upload mechanism and we will build a simple web server that will receive the data.

From this post one we will only show the code for the implementation and left the test code out of the posts unless there is something specially interesting on it.
You can always get the code with all the tests in the github repository for this project.

Getting the saved files

Before uploading any of the files we need to get a list of files available for upload.
We use the cordova file plugin that we already added previously to the project.
We will add a list method to our fileService

We expose a public list function and we move the implementation into a private function.


    
    function list(successCb, errorCb) {
      return function (fileSystem) {
        var reader = fileSystem.root.createReader();
        reader.readEntries(successCb, errorCb);
      };
    }

    ... 

    list: function (successCb, errorCb) {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, list(successCb, errorCb), errorCb);
    },

The server

We need to upload the files to a server, for this exercise we created a simple web server using Express and we deploy it to Heroku. I’m not implementing any type of authentication or security at this point. We will do that later.

The code for the web server can be found on Github. You can clone and use it as a starting point if you wish.

And the server service

We start by installing the cordova file-transfer plug-in.


    
    cordova plugin add org.apache.cordova.file-transfer

Once the plug-in is installed we can write our upload method. We want to pass an array of FileEntry objects and send each one to the server.

We also want to report back success or error for each entry individually what makes our implementation very simple.



    /* globals angular */
    angular.module('dynamic-sports.services')
      .factory('serverService', function () {
        'use strict';

        function getFileUploadOptions(fileURI) {
          var options = new FileUploadOptions();
          options.fileName = fileURI.substr(fileURI.lastIndexOf('/')+1);
          options.mimeType = "text/plain";
          return options;
        }
        return {
          upload: function (files, onSuccess, onError) {
            var ft =  new FileTransfer();
            for (var i = 0; i < files.length; i++) {
              var file = files[i];
              ft.upload(file.toURL(), encodeURI("http://app.herokuapp.com/uploads"), onSuccess, onError, getFileUploadOptions(file.fullPath));
            }
          }
        };
      });

We hook everything together on the HomeCtrl after injecting the new service



    .controller('HomeCtrl', ['$scope', 'geoLocationService', 'fileService', 'serverService',
      function ($scope, geoLocationService, fileService, serverService) {

    ....

    function filesSaved() {
      alert("Saved");
    }

    function uploadFiles(files) {
      serverService.upload(files, filesSaved, errHandler);
    }

    $scope.upload = function () {
      fileService.list(uploadFiles, errHandler);
    };

And we add a button to the home page that calls the upload() function.


    
    <button class="button button-block" ng-click="upload()">Upload</button>

Next Steps

We will add some feedback to the user regarding the upload process and we will improve the UI for the Home page.

PhoneGap errorCode 1 on FileTransfer upload.

2014-05-07T00:00:00-04:00

FileTransferError.code = 1

This seems to be a common error (at least for all the questions about it in the Internet).
I hope this short post will save some time to others.

When you follow the documentation for the FileTransfer plug-in you end up with code that looks like this.


	
	var ft =  new FileTransfer();
    ft.upload(fileEntry.fullPath, encodeURI("http://domain.com/uploads"), onSuccess, onError, getFileUploadOptions(fileEntry.fullPath));

If you do this you will get an error with code 1.

The solution can actually be found in the documentation of the file plug-in. They introduced a new method to the FileEntry object to help with this problem.

The new revised code looks like this.


	
	var ft =  new FileTransfer();
    ft.upload(fileEntry.toURL(), encodeURI("http://domain.com/uploads"), onSuccess, onError, getFileUploadOptions(fileEntry.fullPath));

You will notice that for the first argument to the upload method we now use the toURL() method of the FileEntry, everything else stays the same.

Refactoring the js code structure PhoneGap and Angular (Part 4).

2014-05-06T00:00:00-04:00

Code for this series is available on Github

The last time we created our first services, controllers and directives. We can see that if we keep adding controllers to the controller.js file things are going to get out of control soon.

What we want is to create each entity on it’s own file and concatenate all the js files together as part of the build process.
We are going to create a js folder under the root of the project and inside it three subfolders for each type of entity.


	
	js
	|-controllers
	|-directives
	|-services

We are going to move the files from www/js inside the new folders. The app.js file will be at the root of the new structure and the other files inside each folder.

We will create a new home_controller.js file and copy the code for the HomeController to it.

We will do the same for the service and diretcives.

Concatenation

We open the gulpfile.js file and we add a new task.


	
	gulp.task('scripts', function() {
	  gulp.src(['./js/*.js', './js/**/*.js'])
	    .pipe(concat('all.js'))
	    .pipe(gulp.dest('./www/js/'));
	});

We will need to modify the paths object as well since the sass property doesn’t make a lot of sense anymore.


	
	var paths = {
  		all: ['./scss/**/*.scss', './js/*.js', './js/**/*.js']
	};

And we will add the new scripts task to the watch and default tasks.


	
	gulp.task('watch', function() {
	  gulp.watch(paths.all, ['sass', 'scripts']);
	});

	gulp.task('default', ['sass', 'scripts']);

We will also need to modify the package.json file to call the default gulp task.


	
	"ios": "gulp && ionic emulate ios"

Modify our karma.config.js file for our test to load the new files.



	files: [
    	'lib/ionic/js/ionic.bundle.js',
      	'lib/ionic/js/angular/angular-mocks.js',
      	'../js/*.js',
      	'../js/**/*.js',
      	'../tests/**/*_spec.js'
    ],

Finally, we need to use the new concatenate file on our index.html and remove the script tags for the all files.


	
	<script src="js/all.js"></script>

Next steps.

We want to send the information we recorded to a server for saving and processing, but we can only do that while connected to a network. We will also want to give the user the option to only upload files when the device is using a Wi-Fi connection.