As the latest in my series of blog posts on Ionic and MobileFirst, today I'm going to demonstrate how to use the remote logging feature of MobileFirst with Ionic. I recommend you read my initial post as quick guide on how to run Ionic apps inside the MobileFirst platform.

The "Remote Logging" feature is really just that - a logging service that stores data on your server (in this case, MobileFirst). What's nice from the client-side perspective is that it is incredibly simple to use. You send a log message and that's it. The API worries about when to send it and tries to wait till an opportune time before sending a bunch of log data. If you want, you can force it to send logs immediately, and by default, it will also send existing logs on application startup up. Let's begin by taking a look at the code.

I created an instance of the Ionic tabs template, one of the default "starter" templates you can use with the Ionic CLI. Just to give you some context, here are some screen shots of the app in action. (And again, all of this comes from the template.)

I decided to create a service that would log when each tab was activated for the first time. I also create a log event for loading a chat detail (see the second screen shot above) and for toggling the radio button (see the third screen shot). I began by modifying the services.js file from the template.

.factory('Logger', function() {

	var logger = WL.Logger.create({autoSendLogs:true});

	return {
		log:function(s) {
			logger.log('log', s);
		}
	}
})

Ok, not exactly rocket science, but hey, easy is good, right? I began by creating an instance of WL.Logger. You can find the full docs for that here. I set autoSendLogs to true, which does not mean that logs are sent immediately, but rather that I don't have to manually send them. This may be a bit confusing at first, but it's really just the API being very conservative about network traffic. Me setting it to true means that the service will send the logs automatically, but it will still wait until it feels like it has enough data to make it worthwhile, or until you restart the app and detects existing data.

You can be fairly complex about the logging you do - both with the log level, the types of messages, and other metadata. If you plan on making heavy use of this service, you'll want to be pretty precise with your logs so you can search them easier later. I'm a simple guy so I used the simplest version possible.

Back in my controllers.js file, I then added calls to this service in various places where it made sense for my demo.

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope, Logger) {

	Logger.log("DashCtrl opened");

})
.controller('ChatsCtrl', function($scope, Chats, Logger) {
	$scope.chats = Chats.all();
	$scope.remove = function(chat) {
		Chats.remove(chat);
	}

	Logger.log("ChatsCtrl opened");

})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats, Logger) {
  $scope.chat = Chats.get($stateParams.chatId);
  Logger.log("Chat "+$stateParams.chatId+ " loaded.");
})

.controller('AccountCtrl', function($scope, Logger) {
	$scope.settings = {
		enableFriends: true
	};

	$scope.$watchCollection("settings", function(newValue, oldValue) {
		Logger.log("Enable Friends set to "+$scope.settings.enableFriends);
	});
	
	Logger.log("AccountCtrl opened");

});

You can see where I've injected Logger and then make calls to the log method. One interesting thing about this service is that when you use the Mobile Browser Simulator (see my post for a demo) the log messages will be sent to dev tools. That's handy! But this is only done in the Mobile Browser Simulator. When you test with XCode, for example, the messages are available in the XCode debug output but will not show up if you debug with Safari Remote Debugging. If you really wanted it to show up there then in my specific case I'd just modify the service to add a console.log.

Ok, so that's the code, how does the server side look? When you have the MobileFirst console open, you can go to analytics by clicking the pretty little chart icon in the upper right nav.

In this dashboard, click Search to bring up the Client Log Search form:

At this point, it is pretty much what you expect. Set your filters and go crazy:

Each log entry can be expanded for even more data:

So - all in all - a fairly cool service - and only a small part of MobileFirst. Let me know what you think. I've also created a video demonstrating this.