Category Archives: HTML5

Updated: Parallax Effects in Hybrid/Web Apps

A while back I wrote about adding parallax effects to your HTML/JS experiences to make them feel a bit richer and closer to a native experience.  I’ve just added this subtle (key word *subtle*) effect to a new project and made a few changes I wanted to share here.

If you are wondering what I am talking about with “parallax effects” – Parallax movement is where objects in the background move at a different rate than objects in the foreground, thus causing the perception of depth.  Read more about it if you’re interested.

First, here’s a quick video of this latest app in action.  It’s a hybrid MobileFirst app, but this technique could be used in any Cordova/PhoneGap/MobileFirst/mobile web app experience.  The key is to keep it subtle and not too much “in your face”, and yes, it is very subtle in this video.  You have to watch closely.

The techniques that I wrote about in the previous post still apply – I’ve just added a bit more to cover more use cases.

First let’s look at the CSS.

body {
    background-image: url('../images/cloud_advisor_bkgd.png');
    background-attachment: fixed;
    background-position: center; 
    background-size: auto 120%;
}

This sets the background image and default position.  The distinct change here is that I set the background size to “auto” width and 120% height.  In this case, you can have a huge image that shrinks down to just slightly larger than the window size, or a small image that scales up to a larger window size.  This way you don’t end up with seams in a repeated background or a background that is too big to highlight the parallax effect effectively.

Next let’s take a quick look at the JS involved.

var position = "center";
var lastPosition = "center";
var contentCSS = "";
var body = $("body");
var content = $(".content");
window.suspendAnimation = false;


var xMovement = 15;
var yMovement = 30;
var halfX = xMovement/2;
var halfY = yMovement/2;

window.ondeviceorientation = function(event) {
 var gamma = event.gamma/90;
 var beta = event.beta/180;
 
 var temp = 0;
 
 //fix for holding the device upside down
 if ( gamma >= 1 ) {
  gamma = 2- gamma;
 } else if ( gamma <= -1) {
  gamma = -2 - gamma;
 }
 
 // shift values/motion based upon device orientation
 switch (window.orientation) {
  case 90:
   temp = gamma;
   gamma = beta;
   beta = temp;
   break;
  case -90:
   temp = -gamma;
   gamma = beta;
   beta = temp;
   break;

 }

 // update positions to be used for CSS
 var yPosition = -yMovement - (beta * yMovement);
 var xPosition = -xMovement - (gamma * xMovement);
 var contentX = (-xMovement - xPosition)/2;
 var contentY = (-yMovement - yPosition)/2;

 // generate css styles
 position = xPosition.toFixed(1) + "px " + yPosition.toFixed(1) + "px";
 contentCSS = "translate3d( " + (contentX.toFixed(1)) + "px, " + (contentY.toFixed(1)) + "px, " + " 0px)";
}


function updateBackground() {
  
 if (!window.suspendAnimation) {
  if ( position.valueOf() != lastPosition.valueOf() ) {
   
   body.css( "background-position", position);
   content.css( "-webkit-transform", contentCSS);
   lastPosition = position;
  }
 } else {
  lastPosition = "translate3d(0px, 0px, 0px)";;
 }
 
 window.requestAnimationFrame(updateBackground);
}

window.requestAnimationFrame(updateBackground);

The html where this would be used would be something like this:

<body>
  <div class="content">put your foreground stuff here.</div>
</body>

There are some subtle but important changes here:

  1. In the requestAnimationFrame loop, it only applies changes *if* there are changes to apply.  This prevents needless calls to apply CSS even if the CSS styles hadn’t changed.  In this, I also truncate the numeric CSS string so that it isn’t reapplying CSS if the position should shift by 0.01 pixels. Side note: If you aren’t using requestAnimationFrame for HTML animations, you should learn about it.
  2. If you used my old code and were holding the device upside down, it wouldn’t work.  Not even a little bit.  This has that fixed (see comments inline above).
  3. This moves the background in CSS, which doesn’t cause browser reflow operations, and moves the foreground content (inside of a div) using translate3d, which also doesn’t cause browser reflow operations.  This helps keep animations smooth and the UX performing optimally.
  4. I also added a global variable to turn parallax on and off very quickly, if you need it.

The result is a faster experience that is more efficient and less of a strain on CPU and battery.  Feel free to test this technique out on your own.

If you use the code above, you can modify the xMovement and yMovement variables to exaggerate the parallax effect.

Getting Started with IBM Bluemix Mobile Services (MBaaS)

I recently wrote an overview of IBM Bluemix’s Mobile Back-end as a Service offerings. I wanted to elaborate on the offerings, plus provide in-depth technical and implementation details, so I decided to produce this 5 part video series on Getting Started with IBM Bluemix Mobile Services.

This post specifically covers native iOS, though there are also Android and hybrid options available. This should have everything you need to get started. It covers all aspects from creating the app, to updating the back end, to leveraging Cloudant storage, push notifications, and monitoring & logging.

So, without further ado, let’s get started…

Part 1: Getting Started with Bluemix Mobile Services

In this first video I show how to create a new mobile app on Bluemix, connect to the cloud app instance, and implement remote logging from the client application. This process is covered in more detail in the Getting Started docs, but below are the basics from my experience.

You’ll first need to sign into your Bluemix account. If you don’t already have one, you can create a trial account for free. Once you’re signed in, you just need to create a new mobile app instance.

The process is very simple, and there is a “wizard” to guide you. The first thing that you need to do is create a new app by clicking the big “Create an App” button on your bluemix dashboard.

Create a new app from IBM Bluemix Dashboard
Create a new app from IBM Bluemix Dashboard

Next, select which kind of app you’re going to create. For MBaaS, you’ll want to select the “Mobile” option.

Select the type of app
Select the type of app

Next you’ll need to select your platform target. You can choose either “iOS, Android, Hybrid”, or the “iOS 8 beta” target. In this case I chose the iOS 8 beta, but the process is similar for both targets. Hybrid apps are built leveraging the Apache Cordova container.

Select your platform target
Select your platform target

Next, just specify an app name and click “Finish”.

Give your app a name
Give your app a name

Once your app is created, you will be presented with instructions how to connect the app in Xcode. I’ll get to that in a moment…

Now that your app has been created, you’ll be able to see it on your Bluemix dashboard. This app will consist of several components: a Node.js back-end instance, a Cloudant NoSQL database instance, an Advanced Mobile Access instance, and a Push instance. The Advanced Mobile Access component provides you with app analytics, user auth management, remote logging, and more. The Push component gives you the ability to manage and send push notifications (either manually, or with a rest-based API).

You app has been created
You app has been created – here are the components and the activity

Once your app has been created, you will need to setup the mobile app to connect to Bluemix to consume the services. Again, this is a very straightforward process.

The next step is to register your client application. Once your app is created, you will be presented with a screen to do this. If you don’t complete it right away, you can always come back later and register an application. You’ll need to specify the Bundle ID and version of your app, then you can setup any authentication (if you choose).

Register your app's bundle ID and version
Register your app’s bundle ID and version

Once your app has been registered, you need to configure Xcode. You’ll first need to create a new project in Xcode. There are two options for configuring your Xcode project: 1) automated installation using CocoaPods, or 2) manual installation. I used the CocoaPods installation simply because it is easier and manages dependencies for you.

If you aren’t familiar with CocoaPods, it is much like NPM… CocoaPods is a dependency manager for Cocoa projects. It helps you configure the Bluemix libraries and manages dependencies for you.

If you’ve got Xcode up and running, then close it and install CocoaPods, if you don’t already have it. Next open up a terminal/command prompt, go to the directory that contains your Xcode project and initialize CocoaPods using the “setup” command:

pod setup

This will create a new file called “podfile”. Open this file in any text editor and paste the following (note: you can remove any lines that you don’t want to actually use):

source 'https://github.com/CocoaPods/Specs.git'
# Copy the following list as is and
# remove the dependencies you do not need
pod 'IMFCore'
pod 'IMFGoogleAuthentication'
pod 'IMFFacebookAuthentication'
pod 'IMFURLProtocol'
pod 'IMFPush'
pod 'CloudantToolkit'

Save the changes to the “podfile” file, and close the text editor. Then go back to your command promprt/terminal  and run the installation process:

pod install

Your project will be configured, and all dependencies will be downloaded automatically. Once this is complete, open up the newly created .xcworkspace file (Xcode Workspace).

You have to initialize the Bluemix inside of your application to connect to the cloud service to be able to take advantage of any Bluemix features (logging, data access, auth, etc…). The best place to put this is inside of your AppDelegate.m class application didFinishLaunchingWithOptions method because it is the first code that will be run within your application:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.

    // initialize SDK with IBM Bluemix application ID and route
    IMFClient *imfClient = [IMFClient sharedInstance];
    [imfClient
        initializeWithBackendRoute:@"your route"
        backendGUID:@"your guide"];

    return YES;
}

One of the first features I wanted to take advantage of was remote collection of client-side logs. You can do this using the IMFLogger class, in much the same fashion as you do with OCLogger in MobileFirst Foundation server. Once great feature that requires almost no additional configuration is the captureUncaughtExceptions method, which automatically configures the Advanced Mobile Access component to collect information for all app crashes.

// capture and record uncaught exceptions (crashes)
[IMFLogger captureUncaughtExceptions]; 

// change the verbosity filter to "debug and above"
[IMFLogger setLogLevel:IMFLogLevelDebug]; 

// create a logger instance
IMFLogger *logger = [IMFLogger loggerForName:@"AppDelegate"];

// log a message
[logger logDebugWithMessages:@"This is a log message from app launch."];

//send logged message to the server
[IMFLogger send];

Next, launch your app in the iOS simulator, or on a device, and you’ll see everything come together. Log into your Bluemix dashboard, and you’ll be able to monitor app analytics and remote logs.

Note: If you experience any issues connecting to the Bluemix mobile app from within the iOS simulator, just clear the iOS Simulator by going to the menu command “iOS Simulator -> Reset Content and Settings…”, and everything should connect properly the next time you launch the app.

Part 2: Configuring the Node.js Backend

In the next video, I demonstrate how to grab the code for the backend Node.js application, create a git repository on IBM JazzHub, then pull the code for local development.

There are two ways to push new backend Node.js code: 1) Using the Cloud Foundry command line API, or 2) by updating a git repository and leveraging automatic deployment from the git repo commits.

When the app is created, you’ll see an “add git” link under the app name. Using this link, you can create a git repository for the backend code.

Add a git repository
Add a git repository

Once your git repo has been created, you can check out the code using any Git client (I used the CLI). You’ll need to use the “npm install” command to pull down all the app dependencies. The biggest thing you need to know is that it uses express.js for the web application framework.  You can make any changes that you want, and they will be automatically deployed to your Bluemix server instance upon commit. Yes, this workflow is also configurable b/c this process may not work for everyone.

One other thing that you will need to watch out for if you are doing local development: You will want to wrap the following code on line 6 in a try/catch block, otherwise you will hit errors in the local environment which will prevent your app from launching locally:

try {
    passport.use(new ImfBackendStrategy());
} catch ( e ) {
    console.log(e);
}

Protected content behind the /protected url endpoint may not be accessible locally with this workaround, but you’ll be able to work on other pieces of your back end.

You can read more about the backend node instance for Bluemix mobile apps in the developer documentation.

Part 3: Consuming Data from Cloudant

Another part of Bluemix mobile applications is the Cloudant NoSQL database. The Cloudant NoSQL database is a powerful solution that gives you remote storage, querrying, and client-side data storage mechanisms with automatic online/offline synchronization, all with monitoring/analytics capabilities.

By default, objects within the Cloudant data store are treated as generic objects (over-simplification: think of it is an extremely powerful JSON store in the cloud). However you can also serialize your objects to strong data types within the client code configuration.

In your AppDelegate class application didFinishLaunchingWithOptions method, you’ll also want to initialize the IMFDataManager class, which is the class used for interacting with all Cloudant data operations.

IMFDataManager *manager =
    [IMFDataManager sharedInstance];

In my sample, I setup the database manually with open permissions, but you’ll probably want something more secure. Once your database is created, you can create indexes, search for data, create data, etc…

In the following code, I create a search index and query for data from the remote Cloudant database. You really only need to create the index if it doesn’t already exist. You can do this either through the mobile app code, or manually through the Cloudant database’s web interface. I did this inline in the following code, just for the sake of simplicity:

//access the remote data store
[[IMFDataManager sharedInstance] remoteStore:@"insurancedb" completionHandler:^(CDTStore *store, NSError *error) {
    // Remote store will be passed into the control handler if no errors occurred.

    // create a search index
    // this is an asynch operation
    [store createIndexWithName:@"customerNameIndex" fields:@[@"customer"] completionHandler:^(NSError *error) {
        // an error is set if index creation failed.

        // Next, we search...
        // Create a query with an NSPredicate
        NSPredicate *queryPredicate = [NSPredicate predicateWithFormat: @"(customer > '')"];
        CDTCloudantQuery *query = [[CDTCloudantQuery alloc] initDataType:@"Claim" withPredicate:queryPredicate];

        [store performQuery:query completionHandler:^(NSArray *results, NSError *error) {
            // results is an array of CDTMutableDocumentRevision objects that are returned by the query

            // convert to a NSArray of NSDictionary objects
            // you could also serialize this to an array of strongly typed objects
            NSMutableArray *array = [[NSMutableArray alloc] init];

            for (CDTMutableDocumentRevision *revision in results) {
                NSDictionary *body = [revision body];
                [array addObject:body];
            }

            // do something with the data (this is specific to my app)
            claimsData = array;

            // reload my data table in the main thread
            dispatch_async(dispatch_get_main_queue(), ^{
                [self reloadData];
            });

        }];
    }];
}];

Be sure to also read up on more of the Cloudant capabilities:

Part 4: Push Notifications

The IBM Bluemix mobile services app also contains a component for managing push notifications within your mobile applications. With this service, you can send push notifications to a specific device, a group of devices using tags, or all devices, and you can send push notifications either manually via the web interface, or as part of an automated workflow using the REST API.

You will first need to configure your app for push notifications. Apple systems using Apple’s Push Notification Service, and Android systems use Google Cloud Messaging. You must configure these hooks per the service providers.

For iOS apps, here are the basic steps for setting up the Push service. It also helps to be familiar with Local and Remote notifications in iOS.

  1. Create an App ID and enable Push Notifications
  2. Create a server certificate for sending push notifications
  3. Upload the server certificate to the Bluemix Push instance
  4. Setup the Xcode project to receive push notifications

In Xcode, open your AppDelegate class again. First you’ll need to register for remote notifications in application didFinishLaunchingWithOptions:

//register for push notifications (iOS 8-specific)
[[UIApplication sharedApplication] registerUserNotificationSettings:
    [UIUserNotificationSettings settingsForTypes:
        (UIUserNotificationTypeSound |
          UIUserNotificationTypeAlert |
          UIUserNotificationTypeBadge)
        categories:nil]];
[[UIApplication sharedApplication]
    registerForRemoteNotifications];

Next, setup the didRegisterForRemoteNotificationsWithDeviceToken callback to register this device with the Bluemix Push service:

-(void) application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken{

    // get Push instance
    IMFPushClient* push = [IMFPushClient sharedInstance];

    // set current working environment
    push.environment = @"sandbox";

    [push registerDeviceToken:deviceToken completionHandler:^(IMFResponse *response, NSError *error) {

        IMFLogger *logger = [IMFLogger loggerForName:@"AppDelegate"];

        if (error){
            [logger logErrorWithMessages:@"error registering for push notifications: %@", error.description];
        } else {
            [logger logDebugWithMessages:@"registered for push notifications."];
        }
    }];
}

Next do something with the data whenever you receive a push notification inside of the didReceiveRemoteNotification method:

-(void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo {
    //userInfo dictionary will contain data sent from server.

    NSDictionary *notification = [[userInfo objectForKey:@"aps"] objectForKey:@"alert"];
    NSString *body = [notification objectForKey:@"body"];

    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Notification Received"
                                                    message:body delegate:self cancelButtonTitle:@"OK"
                                          otherButtonTitles:nil, nil];
    [alert show];
}

Part 5: Monitoring and Logging

Did I mention that every action that you perform through Bluemix Mobile Services can be monitored? Analytics are available for the Advanced Mobile Access component, the Cloudant NoSQL data store, and the Push Notifications service. In addition, you also have remote collection of client logs and crash reports. This provides  unparalleled insight into the health of your applications.

Need more info? You can find what you’re looking for here:

…. and of course, don’t forget the full 5-part video series available at https://www.youtube.com/playlist?list=PL0U4cUwfUs26kSKY0X-qdDNO5gKj6Lr6q

Ready to get started? Just head over to bluemix.net and create your first app!

MBaaS – IBM Mobile Cloud Services, Bluemix & MobileFirst

MBaaS, or Mobile Backend as a Service, seems to be a particularly hot topic these days. MBaaS generally refers to backend services for mobile applications that provides data storage, user management, push notifications, and other pertinent mobile APIs.  mbaas

This is more than just “Cloud Services” which more generally refer to a scalable virtual cluster of computing or storage resources.  Bluemix is IBM’s suite of cloud service offerings, and covers lots of use cases:

Bluemix is an open-standards, cloud-based platform for building, managing, and running apps of all types, such as web, mobile, big data, and smart devices. Capabilities include Java, mobile back-end development, and application monitoring, as well as features from ecosystem partners and open source—all provided as-a-service in the cloud.

You can view the full catalog of Bluemix service offerings here.

Rather, MBaaS back-ends include services for data management, user management, notifications, and possibly more depending on the provider – all geared towards powering applications on mobile devices.

Why is it a hot topic? MBaaS enables growth of mobile applications with seamless (and virtually endless) scalability, all without having to manage individual systems for the application server, database, identify management, push notifications, or platform-specific services.

I’ve been writing a lot about IBM MobileFirst lately for a seamless API to deliver mobile apps to multiple platforms; though it has been in the context of an on-premise installation.  However, did you know that many of the exact same MobileFirst features are available as MBaaS services on IBM Bluemix?

IBM’s Mobile Cloud Services includes device management, user authentication, offline and back-end data storage, push notifications, operational analytics, and provides APIs for native iOS, native Android, hybrid apps, web apps, and even node.js clients for custom backend services.

MobileCloudServices

Here’s a bit more detail on what is currently exposed in IBM’s Mobile Cloud Services:

  • Mobile Data – The mobile data service includes a NOSQL database (powered by IBM Cloudant), file storage capabilities, and appropriate management and analytics features to measure the number of calls, storage usage, time/activity, and OS distribution.
  • Push Notifications – The push notification service allows you to easily push data to the right people at the right time on either Apple APNS or Google GCM platforms – all with a single API. Notifications can be sent by either an app or backend system, and can be sent to a single device, or a group of devices based on their tags/subscriptions.  Of course, with appropriate analytics for monitoring activity, distribution, and engagement.
  • Mobile Application Security – The mobile application security service enables you to provision or block any devices and/or users using your application, provides user authentication, and provides analytics for app/device usage, OS distribution, and time/activity.

Before starting development with IB’s Mobile Cloud Services, be sure to check out the following resources:

… and don’t forget the platform-specific developer guides:

Ready to get started?

Many of these are the exact same features that you can host in your own on-premise IBM MobileFirst Platform Foundation server – the difference is that you don’t have to maintain the infrastructure.  You can scale as needed through the Bluemix cloud offering.

 

Unified Multi-Platform Push Notifications with IBM MobileFirst

Push notifications, love them or hate them, are everywhere and there’s no getting around it. Push notifications are short messages that can be sent to mobile devices regardless of whether the apps are actually running. They can be used to send reminders, drive engagement with the mobile app, notify completion of long running processes, and more. Push notifications send information to you in real time, rather than you having to request that information.

Regardless of the platform or native/hybrid development approach, push notifications have to leverage the messaging infrastructure of the platform. iOS apps that have push notifications must use APNS (Apple Push Notification Service), Android apps must use GCM (Google Cloud Messaging), Windows Phone apps use MPNS (Microsoft Push Nofitication Service), and others use SMS gateways.

If you are building a back-end infrastructure to manage your application’s data, and you want to leverage push notifications, then guess what? You also have to build the hooks to manage subscription and distribution of push notifications for each platform.

If you’re building your app with IBM MobileFirst, guess what? You already have a unified API to communicate with all of these platform push notification services with a single API. Yes, you read that correctly – in addition to operational analytics, remote logging, simple data adaptersmobile application sharing, app management, encrypted offline storage, SSO, and support for both native and hybrid paradigms, IBM MobileFirst also has a single, unified multi-platform push notification API that simplifies your development effort for subscribing and managing push notifications on numerous platforms. Check out the video below for additional detail.

The unified push notification API allows you to develop your app against a single API, yet deliver push notifications to multiple platforms, and it works with both hybrid (HTML/CSS/JS) apps, as well as native apps.

MobileFirst Push Notification Mechanism
MobileFirst Push Notification Mechanism

 

The IBM MobileFirst push architecture supports numerous scenarios, including user targeted or broadcast messages.

You will still have to build the logic to subscribe devices for messaging, and dispatch push notification messages, but you’ll only have to do it once against the unified API – not once for each platform.

The apps that I showed in the video above are sample apps taken straight from the IBM MobileFirst platform developer guide for iOS and Android, and can be accessed in their entirety (with both client and server code) using the links below:

The client-side code will vary slightly depending on the native platform or hybrid approach, but the server-side implementation will be exactly the same.

When configuring your server for sending push notifications, be sure to follow the platform-specific steps to provision the apps/server for sending and receiving push notifications.

Within an adapter service on the MobileFirst server, you need to define an event source for push notifications.

WL.Server.createEventSource({
 name: 'PushEventSource',
 onDeviceSubscribe: 'deviceSubscribeFunc',
 onDeviceUnsubscribe: 'deviceUnsubscribeFunc',
 securityTest:'PushApplication-strong-mobile-securityTest'
});

On the client app, you’ll need to subscribe for messages from the event source. See the hybrid or native code linked to above for syntax and examples.

Once your clients are subscribed, you can use a single server-side implementation to distribute messages to client apps. Below is an excerpt from the sample application which demonstrates sending a push notification to all devices for a particular user (on any platform):

function submitNotification(userId, notificationText){
	var userSubscription =
		WL.Server.getUserNotificationSubscription('PushAdapter.PushEventSource', userId);

	if (userSubscription==null){
		return { result: "No subscription found for user :: " + userId };
	}

	var badgeDigit = 1;

	var notification =
		WL.Server.createDefaultNotification(notificationText, badgeDigit, {custom:"data"});

	WL.Logger.debug("submitNotification >> userId :: " + userId + ", text :: " + notificationText);

	WL.Server.notifyAllDevices(userSubscription, notification);

	return {
		result: "Notification sent to user :: " + userId
	};
}

From the MobileFirst console, you will be able to monitor and manage event sources, platforms, and the devices that are consuming push notifications.

Push Notifications on the MobileFirst Console
Push Notifications on the MobileFirst Console

 

If you were wondering, yes, these can be cloud-hosted on IBM BlueMix and yes, it can also be installed on-premise on your own server in your data center.  You have the option to configure your physical or cloud servers however you want.

Not sure where to go next? Maybe these will help:

IBM MobileFirst & Remote Client Side Logging in Mobile Apps

One of the many popular feature of IBM MobileFirst SDK is the ability to capture client-side logs from mobile devices out in the wild in a central location (on the server).  That means you can capture information from devices *after* you have deployed your app into production.  If you are trying to track down or recreate bugs, this can be incredibly helpful. Let’s say that users on iOS 7.0, specifically on iPhone 4 models are having an issue.  You can capture device logs at this level of granularity (or at a much broader scope, if you choose).

The logging classes in the MobileFirst Platform Foundation are similar in concept to Log4J.  You have logging classes that you can use to write out trace, debug, info, log, warn, fatal, or error messages.  You can also optionally specify a package name, which is used to identify which code module the debug statements are coming from.  With the package name, you’ll be able to see if the log message is coming from a user authentication manager, a data receiver, a user interface view, or any other class based upon how you setup your loggers.  Once the log file reaches the specified buffer size, it will automatically be sent to the server.

On the server you can setup log profiles that determine the level of granularity of messages that are captured on the server.  Let’s say you have 100,000 devices consuming your app.  You can configure the profiles to collect error or fatal messages for every app instance.  However, you probably don’t want to capture complete device logs for every app instance; You can setup the log profiles to only capture complete logs for a specific set of devices.

As an example, take a look at the screenshot below to see how you can setup log collection profiles:

Configuring Log Profiles on the MobileFirst Server
Configuring Log Profiles on the MobileFirst Server

When writing your code, you just need to create a logger instance, then write to the log.

If you’re curious when you might want a trace statement, vs. a log statement, vs. a debug statement, etc… Here is the usage level guidance from the docs:

  • Use TRACE for method entry and exit points.
  • Use DEBUG for method result output.
  • Use LOG for class instantiation.
  • Use INFO for initialization reporting.
  • Use WARN to log deprecated usage warnings.
  • Use ERROR for unexpected exceptions or unexpected network protocol errors.
  • Use FATAL for unrecoverable crashes or hangs.

For hybrid apps, you use the WL.Logger class in JavaScript:

var logger = WL.Logger.create({pkg: 'mynamespace.mymodule'});

logger.trace('trace', 'another mesage');
logger.debug('debug', [1,2,3], {hello: 'world'});
logger.log('log', 'another message');
logger.info('info', 1, 2, 3);
logger.warn('warn', undefined);
logger.error('error', new Error('oh no'));
logger.fatal('fatal', 'another message');

For native iOS apps, you will use the OCLogger class:

OCLogger *logger = [OCLogger getInstanceWithPackage:@"UserManager"];

[logger trace:@"this is a trace message"];
[logger debug:@"this is a debug message"];
[logger log:@"this is a log message"];
[logger info:@"this is an info message"];
[logger warn:@"this is a warning message"];
[logger error:@"this is an error message"];
[logger fatal:@"this is a fatal message"];

For native Android apps, you will use the com.worklight.common.Logger class:

private final static Logger logger = Logger.getLogger(MyClass.class.getName());

logger.trace('trace mesage');
logger.debug('debug message');
logger.log('log message');
logger.info('info message');
logger.warn('warn message');
logger.error('error - OH NOES!');
logger.fatal('fatal - Oops, you broke it');

Then on the server, you can go into the analytics dashboard and access complete logs for a device, or search through all client-side logs with the ability to filter on application name, app versions, log levels, package name, environment, device models, and OS versions within an optional date range, and with the ability to search for keywords in the log message.

Log Search Results within the MobileFirst Analytics Dashboard
Log Search Results within the MobileFirst Analytics Dashboard

For a complete reference and additional detail, be sure to check out the latest docs on client side logging with the MobileFirst platform.