Mobile Device and Application Management (MAM vs. MDM)

2017-12-20T00:00:00+00:00

Businesses of all sizes have been increasingly using mobile devices for all kinds of activities. Some of these activities are pretty common, like being able to read and respond to work email and manage work calendars. On the other hand, some companies are using mobile devices for more specific niche activities like checking in customers, using device cameras to read barcodes and UPC stickers, or even temporarily storing sensitive business related data.

As a result of the proliferation of mobile devices for work use, corporations and smaller businesses are finding the need the exhibit finer control over how their employees and customers use their devices. This is where mobile device management (MDM) and mobile application management (MAM) really shine and help solve many of these types of problems.

What is MDM?

Mobile device management (MDM) is a software solution that allows organizations to manage the maintenance, deployment, and configuration of mobile devices that are issued to members of the organization. All of this magic tends to be done via a store or portal application that users download onto their devices.

The app begins an enrollment process when the user enters their credentials that the organization previously issued to the user (usually the user’s email and password). After the device is enrolled, the user gets prompted to accept if the device should be managed as a work device. After the enrollment completes, the store app can push configuration, some device level policies for enforcement, and any required applications.

Some of the useful things you can do with MDM:

Install apps autonomously: Some corporations have their own suite of mobile applications that they require all employees to use. MDM allows organizations to push down required apps to a device. When a newer app is available, the new app gets pushed down to devices automatically. This makes it easier to deploy apps to all employees and ensure users have the latest apps on their devices.
Configuration: Push down sensitive or complex network configuration. Organizations can push down WiFi and VPN configurations. This is especially useful for allowing users to connect to work networks that have hidden SSIDs. You can also enforce use of PIN, and other security features.
Policy Enforcement: Set global policies that can affect all or a portion of devices; Prevent third party apps from being installed.
Auditing: See what devices have done, what versions of apps are deployed, and how a device has used your network.
Scale up: MDM scales up nicely for thousands of devices. If you find yourself updating devices one at time then you definitely need an MDM solution.

What is MAM?

Mobile application management (MAM) is a technology that primarily focuses on enforcing policies on mobile applications. To be able to have this finer level control over applications, an organization needs to wrap the application.

Wrapping is the process of injecting code into an application despite not even having access to the application’s source code. The injected code can then listen for events that are related to certain policies. For example, if an application is not allowed to open the camera application, then the injected code will listen for the corresponding events that will bring up the camera.

How this is done is different on Android and iOS because the platforms handle these kinds things quite differently.

Some of the useful things you can do with MDM:

Block certain applications from being able to handle certain types of data.
Enforce filesystem level encryption even if the application was never designed to use encryption.
Detect if an application is running on a rooted device and kill the app if desired.
Force an application to use a VPN all the time or when outside of the allowed networks.
Block devices from accessing the Internet or the local loop-back addresses (i.e. 127.0.0.1 or ::1).

What are some MAM and MDM vendors?

Some of the major vendors of MAM and MDM solutions are:

XenMobile and AirWatch are robust and mature MAM and MDM solutions. With respect to features, both offer single-sign on (SSO), a suite of productivity apps (email, browser, etc.), and mobile content management.

XenMobile’s email client is similar in capabilities to AirWatch’s email client. However, AirWatch also allows management of the native email clients on Android and iOS which tends to be buggier. Furthermore, AirWatch’s productivity apps may require additional VMware product licenses to unlock some of these capabilities.

In terms of the administration web app, XenMobile is a bit more complicated than AirWatch and may require a few tech support calls to get configured just right. Both products require mobile apps to be wrapped with a wrapping utility before they can be uploaded to the management console. And both offer SDKs that allow organizations to build apps that have MAM capabilities without needing to be wrapped.

Also, both products have great VPN capabilities. If your organization is already using Netscaler than it might make more sense to use XenMobile. Netscaler appears to be more feature-rich compared to VMware Tunnel, but Netscaler is also very hard to configure. With respect to price, AirWatch tends to be cheaper for smaller organizations than XenMobile because XenMobile offers fixed price tiers where as AirWatch has a per-device pricing model.

MobileIron is a bit less developed than XenMobile and AirWatch. However, this also makes it a bit more simpler and easier to administrate. In addition, MobileIron lacks a managed email application compared to XenMobile and AirWatch.

Need Help?

End Point has tons of experience with MAM and MDM. If your organization needs expert-level consulting then we are available to help you!

Simplifying mobile development with Ionic Framework

2014-11-06T00:00:00+00:00

My high school math teacher used to say that mathematicians are the laziest people on Earth. Why? Because they always look for clever ways to simplify their work.

If you stop and think about it, all that technology is, is just simplification. It’s taking the infinitely complex world and turning it into something sterile and simple. It’s all about producing simple models with a limited number of elements and processes.

Today I’d like to walk you through creation of a mobile app that could be used on iOS, Android or Windows Phone. We’ll use a very cool set of technologies that allow us to switch from using multiple languages and frameworks (Objective-C for iOS, Java for Android and C# for Windows Phone) to just using HTML, CSS and JavaScript.

Let’s start turning complex into simple!

PhoneGap and Ionic Framework

Creating the project

In order to be able to start playing along, you need to get yourself a set of toys. Assuming that you’ve got NodeJS and Npm installed already, all you have to do is:

$ npm install -g cordova ionic

Now you should be able to create the project’s scaffold. We’ll be creating a simple app that will list all the latest cartoons from the xkcd blog. Let’s call it Cartoonic.

Ionic comes with a handy tool called ‘ionic’. It allows you to create a new project as well as perform some automated project-structure-management tasks. The project creation task accepts a ‘skeleton’ name that drives an initial layout of the app. Possible options are: ‘blank’, ‘tabs’ and ‘sidemenu’.

We’ll be creating an app from scratch so:

$ ionic start Cartoonic blank

The framework gives you an option of whether you want to use Sass or just plain old Css. To turn Sass on for the project run:

$ cd Cartoonic && ionic setup sass

All went well, but now let’s see if it works well. For this, Ionic gives you an ability to test your app in the browser, as if it were a screen of your mobile device. To run the app in the browser now:

$ ionic serve

Working with the app layout

We need to let all users know what a cool name we’ve chosen for our app. The default one provided by the scaffold wouldn’t work well. Also we’d like the color of the header to be blue instead of the default white.

In order to do so you can take a look at the CSS documentation for different aspects of the UI:

https://ionicframework.com/docs/components/#header

--- a/www/index.html
+++ b/www/index.html
@@ -21,8 +21,8 @@
     <ion-pane>
-      <ion-header-bar class="bar-stable">
-        <h1 class="title">Ionic Blank Starter</h1>
+      <ion-header-bar class="bar-positive">
+        <h1 class="title">Cartoonic</h1>
       </ion-header-bar>
       <ion-content>
       </ion-content>

So far so good, now let’s play with the list of cartoons:

--- a/scss/ionic.app.scss
+++ b/scss/ionic.app.scss
+.cartoon {
+  text-align: center;
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+  width: 96%;
+  margin-left: 2%;
+  margin-top: 2%;
+  margin-bottom: 2%;
+
+  img {
+    width: 90%;
+  }
+}

--- a/www/index.html
+++ b/www/index.html
+        <ion-list>
+          <ion-item class="item-divider">Where Do Birds Go</ion-item>
+          <ion-item class="cartoon">
+            <img src="http://imgs.xkcd.com/comics/where_do_birds_go.png" alt="">
+          </ion-item>
+          <ion-item class="item-divider">Lightsaber</ion-item>
+          <ion-item class="cartoon">
+            <img src="http://imgs.xkcd.com/comics/lightsaber.png" alt="">
+          </ion-item>
+        </ion-list>
       </ion-content>

Alright, we’ve got the list that’s looking quite nice. The data behind is static, but for now we just wanted to make sure the look&feel is good.

Using AngularJS to manage the app

Ionic is built around the fantastic AngularJS framework. That’s our means of developing the logic behind. We need to make the list of cartoons use real data from the Xckd blog RSS feed. We also need to enable tapping on images to see the picture in the browser (so it can be zoomed in).

Let’s start with making the UI use dynamically bound data that we can operate on with JavaScript. In order to do so, we need to add a controller for our view. We also need to specify the data binding between the markup we’ve created previously and the variable in the controller that we intend to use as our data store.

--- a/www/index.html
+++ b/www/index.html
     <script src="js/app.js"></script>
+    <script src="js/controllers.js"></script>
   </head>
-  <body ng-app="starter">
+  <body ng-app="starter" ng-controller="CartoonsCtrl">

(...)

       <ion-content>
         <ion-list>
-          <ion-item class="item-divider">Where Do Birds Go</ion-item>
-          <ion-item class="cartoon">
-            <img src="http://imgs.xkcd.com/comics/where_do_birds_go.png" alt="">
-          </ion-item>
-          <ion-item class="item-divider">Lightsaber</ion-item>
-          <ion-item class="cartoon">
-            <img src="http://imgs.xkcd.com/comics/lightsaber.png" alt="">
+          <ion-item class="item-divider" ng-repeat-start="cartoon in cartoons">{{ cartoon.title }}</ion-item>
+          <ion-item class="cartoon" ng-repeat-end>
+            <img ng-src="{{ cartoon.href }}" alt="">
           </ion-item>
         </ion-list>
       </ion-content>

--- a/www/js/app.js
+++ b/www/js/app.js
-angular.module('starter', ['ionic'])
+angular.module('starter', ['ionic', 'starter.controllers'])

--- /dev/null
+++ b/www/js/controllers.js
+angular.module('starter.controllers', [])
+
+.controller('CartoonsCtrl', function($scope) {
+  $scope.cartoons = [
+    {
+      href: "http://imgs.xkcd.com/comics/where_do_birds_go.png",
+      id: 1434,
+      title: "Where Do Birds Go"
+    },
+    {
+      href: "http://imgs.xkcd.com/comics/lightsaber.png",
+      id: 1433,
+      title: "Lightsaber"
+    }
+  ];
+});

You can notice that “ng-controller” directive has been added to the body element. It points at the newly created controller, which we’re loading with a script tag and making available to the rest of the app by including its module (starter.controllers) in the ‘starter’ module’s dependencies list.

Let’s implement opening the picture upon the tap:

--- a/www/index.html
+++ b/www/index.html
       <ion-content>
         <ion-list>
           <ion-item class="item-divider" ng-repeat-start="cartoon in cartoons">{{ cartoon.title }}</ion-item>
-          <ion-item class="cartoon" ng-repeat-end>
+          <ion-item class="cartoon" ng-repeat-end ng-click="openCartoon(cartoon)">
             <img ng-src="{{ cartoon.href }}" alt="">
           </ion-item>
         </ion-list>

--- a/www/js/controllers.js
+++ b/www/js/controllers.js
@@ -13,4 +13,8 @@ angular.module('starter.controllers', [])
       title: "Lightsaber"
     }
   ];
+
+  $scope.openCartoon = function(cartoon) {
+    window.open(cartoon.href, '_blank', 'location=no');
+  };
 });

That was simple wasn’t it? We’ve just added the ng-click directive making the click/tap event bound to the openCartoon function from the scope. This function in turn is using window.open passing ‘_blank’ as target. Et voilà!

Now, let’s implement loading images from the real feed:

--- a/www/index.html
+++ b/www/index.html
     <script src="cordova.js"></script>
+    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
+    <script type="text/javascript">
+      google.load("feeds", "1");
+    </script>

     <!-- your app's js -->
     <script src="js/app.js"></script>
     <script src="js/controllers.js"></script>
+    <script src="js/services.js"></script>
   </head>
   <body ng-app="starter" ng-controller="CartoonsCtrl">

--- a/www/js/app.js
+++ b/www/js/app.js
-angular.module('starter', ['ionic', 'starter.controllers'])
+angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

--- a/www/js/controllers.js
+++ b/www/js/controllers.js
-angular.module('starter.controllers', [])
+angular.module('starter.controllers', ['starter.services'])

-.controller('CartoonsCtrl', function($scope) {
-  $scope.cartoons = [
-    {
-      href: "http://imgs.xkcd.com/comics/where_do_birds_go.png",
-      id: 1434,
-      title: "Where Do Birds Go"
-    },
-    {
-      href: "http://imgs.xkcd.com/comics/lightsaber.png",
-      id: 1433,
-      title: "Lightsaber"
-    }
-  ];
+.controller('CartoonsCtrl', function($scope, cartoons) {
+  $scope.cartoons = [];

   $scope.openCartoon = function(cartoon) {
     window.open(cartoon.href, '_blank', 'location=no');
   };
+
+  $scope.$watch(function() {
+    return cartoons.list;
+  }, function(list) {
+    $scope.cartoons = list;
+  });
 });

--- /dev/null
+++ b/www/js/services.js
@@ -0,0 +1,26 @@
+angular.module('starter.services', [])
+
+.factory('cartoons', function($rootScope) {
+  var self = {
+    list: [],
+    url: "http://xkcd.com/rss.xml",
+
+    fetch: function() {
+      var feed = new google.feeds.Feed(self.url);
+      feed.load(function(result) {
+        $rootScope.$apply(function() {
+          if(result.status.code == 200) {
+            self.list = result.feed.entries.map(function(entry) {
+              return {
+                href: entry.content.match(/src="[^"]*/g)[0].substring(5, 100),
+                title: entry.title
+              }
+            });
+          }
+        });
+      });
+    }
+  };
+  self.fetch();
+  return self;
+});

Okay, a couple of comments here. You may wonder why have we loaded Google APIs? That’s because if we were to try to load the xml that comes from the blog’s feed, we would inevitably fail because of the “Same Origin Policy”. Basically, the Ajax request would not complete successfully and there’s nothing we can do locally about it.

Luckily, Google has created a service we can use as a middleman between our in-browser JavaScript code and blog’s web server. Long story made short: when you load the feed with Google’s Feed API - the data’s there and it’s also already parsed.

We’re also adding a custom service here. The service fetches the entries upon its initialization. And because the controller’s depending on this service - we’re guaranteed to get the data as soon as the controller is initialized. The controller is also using the $watch function to make sure it has the most recent copy of the entries list.

References:

Implementing Background Fetch in iOS 7

2014-03-11T00:00:00+00:00

With the iOS7 being out and gaining market share, great features it introduced are becoming available to more and more users.

One such new feature is a set of so-called “background modes”.

States the application can be in, in iOS

To explain this new set of modes, let me give you a really quick intro to what modes are.

In iOS, at a given point in time, an app can be in one of the following states:

Not running

There is no process for the app in the system.

Inactive

The app is running in the foreground but currently is not receiving any events. (It may be executing other code though.) An app usually stays in this state only briefly as it transitions to a different state.

Active

The application is running and is receiving user input. The main user interface is visible on the display.

Background

The application is running. It’s not receiving user input. Its code is being executed but it will be switched to the suspended state very soon by the system.

Suspended

The app remains in memory, but it’s not being executed. It remains dormant until a user chooses to activate it again or a system switches it back to a background state to allow it to process certain kinds of data.

Background modes

The last paragraph described certain kinds of data an app may want to process even if it’s not a receiver of user’s actions.

This makes sense - there are apps that use GPS or audio system even when they aren’t active. In fact those along with the VOIP were one of scenarios iOS creators designated as special in the previous versions of the system.

Inactive applications were allowed to run certain parts of their code in response to GPS or VOIP events. They were also allowed to play or record audio content.

Those scenarios are what are called background modes. This just refers to situations under which iOS brings an app from the suspended state to background, to allow it to run its code.

Other background modes available in pre iOS 7 systems are:

Newsstand downloads
External accessory communication
Bluetooth networking
Bluetooth data sharing

New background modes in iOS 7

With the newest version of the system, Apple introduced two new modes:

Background fetch
Remote notifications

The first one allows apps to periodically access web servers to download data. The second one allows apps to create notifications for users that some new content can be downloaded.

A little bit about the use case I was working on

I was implementing the background fetch mode recently in the iOS application for the Locate Express platform. The platform allows its users to search in real time for service providers when they need e. g. to repair something at their homes.

One of the business rules in the system is that providers who are not actively using the application to make themselves available for searches - are marked as pending, which effectively excludes them from the results. The problem with this logic was that the client app would stop talking to the Locate Express system as soon as it entered the suspended state. The remedy for this was using the location updates background mode. The problem with this in turn was that iOS devices would quickly run out of battery. The location updates mode can be configured to report small changes, but it can also be configured only to report significant ones. Given that many service providers do not change their location significantly while they are at work - we were in need of a different solution.

The app itself, receives information about so called service requests from the web based portal located at www.locateexpress.com. The natural path then was to use the new background fetch mode to improve user’s experience by periodically synchronizing the list of requests. This allowed us to:

present always up-to-date list of requests even when a user did not access the app from the remote notification that was bringing the information about any new request
avoid any waiting time for the list of requests to refresh
mark a provider as active frequently, without draining the battery

The background fetch mode setup

Like any other background mode, you have to make few steps first to make the app able to use it.

In Xcode, Go to your project’s settings by clicking on it and then accessing the “Capabilities” pane
Turn “Background Modes” on if it’s not already
Check the “Background fetch” checkbox

How frequently will the fetch be executed?

You can control this frequency only to some extent. In fact, to be able to fetch any data you still have to run the following code, some time when initializing your AppDelegate:

[[UIApplication sharedApplication] setMinimumBackgroundFetchInterval:UIApplicationBackgroundFetchIntervalMinimum];

This sets the value telling iOS the minimum interval in which you want it to run the background fetch code. There is no maximum hint though. It means that you can tell iOS not to run the fetch more frequent than some time span. You cannot tell it to run not rarely than some other value.

The frequency is managed by iOS. You give it a hint with the above snippet of code and returning information if you were able to get any new data with the current fetch. Based on that in part - it is able to compute the most optimal (from its own stand point) frequency value.

Implementing the fetching method

Last step is to implement the following method in your AppDelegate:

(void) application:(UIApplication *)application performFetchWithCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  NSLog(@"Background Fetch!");
  // fetching the data here ...
  if(failedFetch) { // use your own flag here
    completionHandler(UIBackgroundFetchResultFailed);
  }
  else {
    if(newDataFetched) { // use your own flag here
    completionHandler(UIBackgroundFetchResultNewData);
  }
  else {
    completionHandler(UIBackgroundFetchResultNoData);
  }
}

Getting navigation bar to look good in iOS 7

2013-12-17T00:00:00+00:00

Apple has recently released iOS 7—a major upgrade to its operating system for mobile devices. Whether users like it or not—developers have to treat it seriously. There is nothing worse in the world of technology than being viewed as passé.

From the point of view of users, the new look and feel resembles somewhat the overall movement in the user interface design. The flat UI style is the new hotness nowadays.

On the developers’ side of the fence though, this means lots of hard work. Apple has introduced lots of changes so that many iOS apps had to be changed and even redesigned to look acceptable in iOS 7.

Some applications have already dropped support for older versions of iOS

One of them is… Evernote! Its team has decided that supporting older systems would be too costly and that they have decided to dump it. The only way to have the Evernote app is to have it installed before the release of its latest version.

One issue I encountered while working on an iOS app lately was that the app started to display oddly. The top bar was overlapping with the contents of the views.

The reason is because now the top bar overlaps with the UI underneath. It applies a blur on whatever there is behind, making apps look a bit more integrated with the OS.

Solution hidden in the XIB designer

If you were using only the designer—you’re very lucky. In the latest Xcode, there is an option to set deltas for UI element positions.

The UI delta is nothing more than a value that a particular measurement should be modified by if the app is being run on an iOS version lower than 7.

So keeping in mind that the top bar with the navigation view buttons area take 64 points of height—you have to provide -64 as y delta value. So that the UI in the designer looks great and it will also look nicely on a pre iOS 7 device.

What about views consisting purely of code?

In my case, I had to resort to some workarounds in the code. Most views in the application I was working on were created dynamically. There were no *.xib files to edit with the editor, hence—no way to set those deltas.

The easiest solution I found was to just edit view’s frame values. Making the y of the frame at 64 points.

CGRect frame = tableViewController.view.frame;
frame.origin.y = 64;
tableViewController.view.frame = frame;

Supporting older versions in code

The last step was to simulate the behavior of the designer and allow the code to apply changes based on the iOS system version on which the app is currently being executed:

float topValue = 0;
if([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0f)
{
    topValue = 64;
}
CGRect frame = tableViewController.view.frame;
frame.origin.x = 0;
frame.origin.y = topValue;
tableViewController.view.frame = frame;