Ubuntu Touch on a Galaxy S7 & a Pixel 3a

2023-08-29T00:00:00+00:00

I have a shoebox in my closet I call my “phone graveyard.” At times I’ve had five or more old phones in there, in various states of decay—some have fully shattered screens, some broken USB ports, etc. But some still have quite usable hardware, their main drawback being how slowly they run modern versions of Android or iOS, and the lack of support for modern features.

It has always troubled me to have such incredible devices, with way more computing power than, say, a Raspberry Pi, gather dust because of software limitations. Even if I don’t use an old phone for daily use any more, what if I could use it as a DNS server (like a Pi-hole), or as a camera or media player?

When I heard about Ubuntu Touch, it seemed like the perfect OS to bring back some long-term functionality to these old devices. Originally created by Canonical, it was soon abandoned but revived by UBports, who started community development in 2015. They actively maintain the OS for around 80 devices, including two I have in my phone graveyard: a Samsung Galaxy S7 and a Google Pixel 3a.

Installation

Installing Ubuntu Touch is quite straightforward; the UBports installer does most of the heavy lifting. See the UBports website for instructions.

For the Pixel 3a, I had to flash an older version of the stock OS before running the UBports installer. The Ubuntu Touch device page for the Pixel 3a specifies which version to flash under “Preparatory Step,” but this seems to be in a different place for each device. Read the device-specific instructions carefully before installing.

Usability

The native app landscape for Ubuntu Touch is, as you would expect, pretty limited. You won’t be able to play most DRM content, and while there are web apps for Uber, Discord, and others, they tend to be various levels of buggy. You can see the apps, including helpful usability reports, at open-store.io.

There are plenty of bugs I encountered while briefly testing, like having no volume indicator when using volume keys and not seeing the Libertine installation which should’ve been there, making it hard to install programs with the terminal emulator.

Audio playback had fairly frequent interruptions, at least on my Pixel 3a, making it not viable as a music player. However, for audiobooks or podcasts this probably wouldn’t be a big deal.

However, most of the base functionality for web browsing, photos, and media playback seemed to work well.

The inclusion of a fully-featured terminal emulator expands the possibilities greatly, allowing your old phone to act in place of a Raspberry Pi for projects like a Pi-hole.

The system is, by default, in read-only mode, requiring containers (the intent is to run the custom container system, Libertine) to run most apps. However, you can change it to read-write for a more traditional Linux system. For more info on terminal capability, see the UBports blog.

While I wouldn’t want to run Ubuntu Touch as my only smartphone OS, it is an exciting option for secondary or old devices, especially if you want to contribute to open-source projects and help out the community!

Appium: Automated Mobile Testing

2021-06-30T00:00:00+00:00

First impressions are everything. You can have the best, most robust application in the world, but if it looks like it’s from 2004 most users won’t give it a second look. Automated testing can help ensure that the app the user sees is consistent and fully functional no matter the iteration.

Selenium, Cypress, and other automated testing suites have become more and more popular for webapps. This trend has not carried over to mobile native app testing. This may be a bit surprising, as a fully functional frontend can be the difference between a professional-feeling app and a hacky one.

There are many frameworks that can be used to test mobile applications (Appium, UI Automator, Robotium, XCUITest, SeeTest, and TestComplete to name a few), but today we’ll be focusing on Appium.

Appium is an open source framework that’s easy to use out of the box. It can be used to test many versions of many different mobile OSes. It’s a one-stop shop to ensure your users are on the same page, no matter the platform.

Installation and setup for Linux

General

We will be testing the To-Do List app from the Google Play Store. What we’re testing and for which platform isn’t important, since we’re here to learn about the Appium methodology that can be applied to any mobile app.

AVD Android emulator

We will be using an AVD (Android Virtual Device) to test our app. There are many out there but I recommend Android Studio’s.

Once it’s running, just click Configure > AVD Manager.

Either create a new AVD or use the default one and start it up.

Appium

Download Appium from GitHub.

Appium can be run through the command line but we’re going to use the desktop app here. This gives you the ability to record a session and capture elements for automated tests.

Once it’s running, all we have to do is click Start Server.

Ruby and RSpec

We will be using Ruby and RSpec to run our tests. At the top level of our project we need to add these lines to our Gemfile:

/Gemfile:

source 'https://www.rubygems.org'

gem 'appium_lib', '~> 11.2'
gem 'appium_lib_core', '~> 4.2'

Make sure Ruby is installed, then run:

$ gem install rspec
$ bundle install

We also need to configure RSpec to find the correct AVD and APK to test.

/spec/spec_settings.rb:

ANDROID_PACKAGE = 'io.appium.android.apis'
def android_caps {
  caps: {
    # These settings match the settings for your AVD. They can be found in the AVD Manager.
    platformName: 'Android',
    platformVersion: '11',
    deviceName: 'Pixel_3a_API_30_x86',
    #  This points to the apk you are testing
    app: './To-do_list.apk',
    automationName: 'UIAutomator2',
  },
  appium_lib: {
    wait: 60
  }
}
end

Finally we need to create our test. Since we don’t know the elements yet we can start with a blank template.

/spec/TaskCRUD:

require 'spec_settings'
require 'appium_lib'

describe 'Tests basic CRUD functions of Task application' do

  before(:all) do
    @driver = Appium::Driver.new(android_caps, true).start_driver
  end

  after(:all) do
    @driver&.quit
  end

  it '...' do

  end
end

Putting it all together

Let’s boot it up and make sure everything is running as expected.

Run an AVD from Android Studio
Start the Appium Server
Run rspec in the project root

Even though there is no test written it should still run and pass the template test. Running it the first time will save the APK into the AVD virtual memory. We can now access the app on the AVD emulator and record tests.

Recording a test with Inspector

Open the Appium window that has the server running and click Start Inspector Session:

Under Attach to Session... you will see a dropdown containing the RSpec test we just tried to run. If it’s not here try running rspec again. Select this and click the Attach to Session button.

We are now connected to the Android Emulator via the Inspector. We can click on elements to see their properties and interact with them.

If we click the top record button it will save our actions and allow us to import them into a test.

Running a test

Let’s take what we got from the Inspector and populate our template test.

/spec/TaskCRUD:

require 'spec_settings'
require 'appium_lib'

describe 'Tests basic CRUD functions of Task application' do

  before(:all) do
    @driver = Appium::Driver.new(android_caps, true).start_driver
  end

  after(:all) do
    @driver&.quit
  end

  it 'creates a task and verifies its name' do
   el1 = @driver.find_elements(:id, "todolist.scheduleplanner.dailyplanner.todo.reminders:id/zk")
    el1.click
    el2 = @driver.find_elements(:id, "todolist.scheduleplanner.dailyplanner.todo.reminders:id/xd")
    el2.click
    el3 = @driver.find_elements(:id, "todolist.scheduleplanner.dailyplanner.todo.reminders:id/wt")
    el3.send_keys "task_1"
    el4 = @driver.find_elements(:id, "todolist.scheduleplanner.dailyplanner.todo.reminders:id/wr")
    el4.click
    el5 = @driver.find_elements(:xpath, "/hierarchy/android.widget.FrameLayout/android.widget.LinearLayout/androidx.recyclerview.widget.RecyclerView/android.widget.LinearLayout[3]/android.widget.TextView")
    el5.click
    el6 = @driver.find_elements(:id, "todolist.scheduleplanner.dailyplanner.todo.reminders:id/wo")
    el6.click
    el7 = @driver.find_elements(:xpath, "/hierarchy/android.widget.FrameLayout/android.widget.LinearLayout/android.widget.FrameLayout/android.widget.LinearLayout/android.widget.FrameLayout/android.widget.RelativeLayout/androidx.recyclerview.widget.RecyclerView")
    el7.click
    el8 = @driver.find_elements(:id, "todolist.scheduleplanner.dailyplanner.todo.reminders:id/xl")
    expect(el8.text).to eql 'Test-text-1'
  end
end

If we run it with the rspec command we can watch the test in progress on the AVD and then we receive a success message!

What’s next?

Additional tests

Tests should be written to cover as many aspects of the app as possible. The main focus should be on parts of the app that don’t change very often. Tests written for something in progress or that is due for a facelift will need to be rewritten when the time comes.

Test with other devices

An app can look perfect on a Galaxy S20 but look awful on a Pixel 5. That’s why it’s important to try many different AVD versions for your app. Android allows you to create many phone types that run many different firmware versions.

CI/CD integration

Manual testing is great but nothing beats automation. These tests should ideally be integrated into a continuous integration and continuous delivery (CI/CD) platform. This way each build will be automatically vetted for bugs.

For more info, check out this guide for integrations with CircleCI.

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!

Case Study: Responsive Design Return on Investment

2016-07-21T00:00:00+00:00

Responsive design has been a hot topic in the e-commerce world for several years now. End Point has worked on many sites over the last few years to transition clients to a responsive design website model. While many large sized retailers have already transitioned to a responsive design, there are many smaller e-commerce sites that are still on an older design model and I would like to show that the return on investment for those stores is still noteworthy.

The lead of our Interchange team, Greg Hanson, led a responsive design project and I’d like to summarize that work on our blog. For confidentiality, I am leaving out the client’s name in this case.

Why Go Responsive?

There are two main reasons every e-commerce website, even a small one, needs to become responsive:

Your customers
Google

The march toward mobile sales at this point is undeniable and unstoppable. As more and more people become comfortable using their phones and tablets to purchase things, the bigger this market share will become. Also, Google has begun de-prioritizing websites that do not cater to mobile users. If you are waiting to go responsive because of budget, you might surprised to learn how dramatically the mobile revenue increased for the customer in this case.

Goals

This client is a small e-commerce business with a heavy ‘on’ season and ‘off’ season where the business owners could focus on this project. They wanted:

To accommodate the increasing mobile user base; they knew it was there from looking at their Google Analytics.
To increase revenue from mobile users. They could see that they had a 10% mobile user base, but they were converting only a small percentage.

End Point’s strategy

Our strategy with this small client, to minimize impact to the business and cost was to:

Use Bootstrap

Bootstrap is one of many front end frameworks that allows you to create a design template and roll that out to all the pages within a website without having to re-code each and every page in a website. This dramatically increases the speed and decreases cost.

Break up the work into segments

In this case, we had a three phase approach:

Phase I, redesign the site using Bootstrap but still at fixed width
Phase II, site checkout sequence changed to responsive
Phase III, entire site responsive

The Project

Converting the site to Bootstrap was the biggest chunk of the time and money spent on this project. Since we knew this would be the foundation for the changes to come, we took our time getting it right, keeping the client involved every step of the way. We didn’t want to get in the way of their busy season either, so we completed that project and waited a half a year to begin the next piece.

The second step was updating checkout sequence to be responsive since this was arguably the hardest part about using the non-responsive site on a mobile device. The client considered this piece top priority. Plus, since it was only a few pages, it allowed us all to better understand the scope of coding the rest of the site and give the client an accurate picture of the budget.

Last, once we had a responsive checkout sequence, we changed the rest of the internal pages to be responsive and rolled out the entire site as responsive and mobile friendly.

Results

The first time we looked at the analytics following the responsive conversion, we were shocked! Using a small sample period, from just a year prior, we saw a 280% increase in mobile purchases.

The timeframe for these comparison numbers was August 2014 before the responsive transition and August of 2015, after the transition.

To sanity check those numbers, we just re-ran some of the analytics recently and in May of 2016, revenue from mobile users is still up over 90% and the clients total revenue year-over-year is up 12%.

We also ran some numbers on the growth of mobile revenue as a percentage of overall revenue through this process. As you can see, two years ago mobile revenue was less than 1% and is now near 12%.

In this case, I didn’t go into all the ways to slice and dice the numbers in Google Analytics. However I’m happy to speak with you if you want to know more about mobile users, this client’s data, or how responsive design might help grow your e-commerce business.

The Lesson

The lesson here is that any store will benefit from going responsive. Having an experienced partner like End Point that can work with your budget and timeline can make this is a doable project for any size store and budget.

Zurb Foundation 5: Applying Styles Conditionally Based on Viewport Size

2016-02-08T00:00:00+00:00

The Zurb Foundation 5 front-end framework provides many convenient features such as the ability to control the visibility of HTML elements for different browser window sizes using CSS classes. Foundation CSS classes like “show-for-small-only” and “hide-for-large-up” (full list at https://get.foundation/sites/docs-v5/components/visibility.html) make it easy to add mobile-specific content to your page or prevent certain page elements from being displayed on mobile devices.

Having an easy way to show/hide elements based on viewport size is nice, but what if you want to style an element differently based on the size of the browser that’s viewing the page? Foundation has you covered there, too, though the method is less obvious. It’s possible to use Foundation’s media query SCSS variables when writing your own custom styles in order to apply different styling rules for different viewport sizes.

For example, if you have an element that you want to offset with a margin in a large window but be flush with the left edge of a small window, you can use the Foundation media query variables to apply a styling override that’s specific to small windows:

#element {
    margin-left: 100px;

    @media #{$small-only} {
        margin-left: 0;
    }
}

This will apply a specific set of styling to the element for small viewports and a different set for medium and larger viewports (with the definitions for “small”, “medium”, etc. corresponding to the same values used by Foundation’s visibility classes like “show-for-small-only” which were mentioned at the start of this post).

It wasn’t immediately obvious to me how to apply conditional styling using Foundation’s own definitions of small, medium, etc. viewport sizes but luckily the variable definitions provided by the SCSS framework make it easy to do so.

Mobile-friendly sites or bust!

2015-03-23T00:00:00+00:00

A few weeks ago, Google announced that starting on April 21 it will expand its “use of mobile-friendliness as a ranking signal” which “will have a significant impact in our search results”.

The world of search engine optimization and online marketing is aflutter about this announcement, given that even subtle changes in Google’s ranking algorithm can have major effects to improve or worsen any particular site’s ranking. And the announcement was made less than two months in advance of the announced date of the change, so there is not much time to dawdle.

Google has lately been increasing its pressure on webmasters (is that still a real term‽) such as with its announcement last fall of an accelerated timetable for sunsetting SSL certificates with SHA-1 signatures. So far these accelerated changes have been a good thing for most people on the Internet.

In this case, Google provides an easy Mobile-Friendly Site Test that you can run on your sites to see if you need to make changes or not:

So get on it and check those sites! I know we have a few that we can do some work on.

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:

Mooving to the Mobile Web

2013-11-21T00:00:00+00:00

With the rise of the myriad of mobile phones, tablets and other devices that are connected to the internet, the potential users for a given website have both increased in number and morphed in their needs in terms of a user experience. As anyone who has attempted to use a website not designed for a mobile phone browser with frantic pinch-zooms to find a tiny page control, right next to four other controls that do something totally different in a menu, can attest this is really not ideal.

And meanwhile from the other perspective, for web developers, the notion of a fragmented user base over everything from a desktop PC with a modern browser to an embedded PC built into my new LCD TV needing to view your pages gracefully can be a scary prospect. The thought of maintaining independent versions of your web infrastructure that fit each of these major use cases would likely scare everyone in your company, especially the finance people cutting all the checks.

So what is a company facing this new reality of the modern web to do? One particular solution can help to alleviate one of the more troublesome issues with new devices browsing the Internet, mobile phone display. While the phones themselves are starting to come with resolutions comparable to a modern desktop or laptop PC, the screen size relative to your finger that is selecting inputs, leaves a far less precise pointer than a mouse. This is precisely the problem described earlier, as those page control designs with multiple options in a menu, comes from the design era when a precise mouse click as the input method was the norm. Additionally, with the smaller screen size, it is necessary to more prominently highlight certain aspects of the page design, like images of featured products, to keep the same level of emphasis of those images on the user who will view them.

One firm that is implementing a version of this solution that I recently helped implement for a client is Moovweb. For web developers, this technology will allow them to accomplish those goals of making page controls more usable on mobile phones, make featured elements of page layout stand out more effectively on a mobile phone browser, without actually maintaining a separate version of their site, optimized for mobile users. Moovweb will make a request to your site, optimize the content for mobile (behind the scenes) and the send that optimized response back to the user’s device. In this manner, the page contents will always be updated automatically for the mobile sites, based on what is present on your current live site. Which page elements are selected to be displayed on the mobile page, and how they are displayed are all configurable options within Moovweb’s controls, and you are also able to use a number of pre-built templates based on web software packages that are common.

Technical Details

How does Moovweb accomplish this sleight of hand—tailoring the response based on the device requesting the information? The secret lies both in JavaScript and DNS. Firstly, in order to setup your domain for Moovweb, you need to create a sub-domain that requests from mobile devices would be forwarded to, which would actually point to Moovweb with a CNAME record. Here is an example from the setup documentation:

If your domain was example.com, and the mobile sub-domain you had selected was m.example.com you would create a CNAME record for:

m.example.com. IN CNAME m.example.com.moovdns.net.

This would point any request to m.example.com over to the Moovweb servers, which will then carry out the forwarding of the requests back to the mobile browser of the user once the template had been applied to the page design and crafted the mobile version of the site.

For the JavaScript setup, a <script> tag must be added to the design of each page’s tag in order to perform redirection of requests for mobile browsers. This script that is added is created for each customer by Moovweb, and is used to match the User-Agent setting of each request against a list of known mobile browsers. Conceivably, with this in place on every page, whether the user is attempting to load the main page, or perhaps a deeper link to something like a product page or category page, every request from the mobile browsers should be automatically redirected to the mobile domain that we setup the CNAME record for.

How it looks

When working on deploying Moovweb for a client, tigerdistrict.com, I was introduced to the technology for the first time, and I was impressed with the mobile site experience. The page controls that were modified to make them easier to tap with your finger, and also making the page layout more portrait which fits the mobile phone form factor. Here are some examples of the mobile and non mobile site:

Desktop Version

Mobile Version

One of my favorite features was how Moovweb could handle page navigation menus, like the one you see on the left margin of the page in the desktop version. On a mobile device, attempting to get a precise enough point to select only the correct one of those options, and not mistakenly clicking others, would be painful to say the least. However after the site has been converted to the mobile version, two new page elements are added to the bar at the top of the page. There is a cart icon representing the all important shopping cart, and one of the legendary “Hamburger button” controls that opens up the page navigation menu. Here is what it looks like on the mobile browser:

No Dialing Wand Needed

As you can see, it replicates the same menu tree, with the same ability to expand into any of the available categories, or use the text search, all within an interface that is easy to use within a mobile browser.

The Future of the Web — Devices, Devices, Devices

One thing is clear from the rise of mobile devices and tablets on the web over the past few years, is that these devices are here to stay, and if anything will continue to grow and dominate the marketplace. For developers seeking to harness, or even to just stay ahead of this trend, will need to address the problems of mobile browsers and the limitations of the devices themselves.

Creating websites that provide a desirable user experience to these many flavors of devices can be a daunting challenge, but in a way this shows us that the true issue is not the fragmentation itself. The real benefits from this type of mobile web development take advantage of your existing infrastructure, and gives you a method to tailor it as best you can to fit each of these new device’s abilities. Duplicating effort is wasteful and maintaining multiple versions the the same content with slightly different presentation is an example of this wasted effort. Reusing the current web infrastructure already available and already being invested in the maintenance of, allows the presentation of these multiple user experiences in a cost effective way.

Dynamically adding custom radio buttons in Android

2013-05-09T00:00:00+00:00

I’ve been writing a timesheet tracking app for End Point. In working on various features of this app, I’ve had more than a few problems to work through, since this project is one of my first on Android and I’ve never used many of the Android features that I’m now using. One particularly fun bit was setting up a scrollable list of radio buttons with numbers from 0 – 23 (no, we don’t often have people working 23 hours on a project in a day, but just in case!) when the user is creating an entry, as a prettier and more backward-compatible alternative to using a number picker to indicate how many hours were spent on this particular job.

In Android, view layouts are usually defined in XML like this:

layout/activity_hour_picker.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >
  <Button android:id="@+id/button"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:onClick="doStuff"
    android:text="Hello World!" />
</RelativeLayout>

Simple. But, as you can imagine, not so fun when you’re adding a list of 24 buttons—so, I decided to add them dynamically in the code. First, though, a ScrollView and RadioGroup (ScrollView only allows one child) need to be defined in the XML, no point in doing that programmatically. Let’s add those:

layout/activity_hour_picker.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >
   <HorizontalScrollView
        android:id="@+id/hour_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fillViewport="true"
        android:scrollbars="none" >
        <RadioGroup
            android:id="@+id/hour_radio_group"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">
            // This is where our buttons will be
        </RadioGroup>
    </HorizontalScrollView>
</RelativeLayout>

Okay. So, now, in our Activity, we need to override onCreate if we haven’t already and add the following code:

src/com/example/HourPickerActivity.java

@Override
public void onCreate(Bundle icicle) {
  super.onCreate(icicle);
  setContentView(R.layout.activity_hour_picker);  // This adds the views from the XML we wrote earlier
  ViewGroup hourButtonLayout = (ViewGroup) findViewById(R.id.hour_radio_group);  // This is the id of the RadioGroup we defined
  for (int i = 0; i < RANGE_HOURS; i++) {
    RadioButton button = new RadioButton(this);
    button.setId(i);
    button.setText(Integer.toString(i));
    button.setChecked(i == currentHours); // Only select button with same index as currently selected number of hours
    button.setBackgroundResource(R.drawable.item_selector); // This is a custom button drawable, defined in XML
    hourButtonLayout.addView(button);
  }
}

And this is what we get:

It scrolls horizontally like we want, but there’s a problem—we don’t want the default radio button selector showing up, since we’ve already got custom button graphics showing. And we can’t forget that we’re still missing the code to make everything within the RadioGroup work properly—In other words, the buttons won’t do anything when a user clicks them. So, let’s add a listener to each button as it’s created:

src/com/example/HourPickerActivity.java

<font color="#969696">button.setId(i);</font>
button.setBackgroundResource(R.drawable.item_selector); // This is a custom button drawable, defined in XML
button.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View view) {
            ((RadioGroup) view.getParent()).check(view.getId());
            currentHours = view.getId();
        }
    });
<font color="#969696">button.setText(Integer.toString(i));</font>

So now the currently selected value is ready in our static variable currentHours for whenever the user is finished. Now we need to get rid of the standard radio button graphics. The solution I found is to use selector XML, with just one item that points to a transparent drawable:

drawable/null_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
  <item android:drawable="@android:color/transparent" />
</selector>

Set each button to use it (and to center the text) like this (R.drawable.null_selector is our selector XML):

src/com/example/HourPickerActivity.java

<font color="#969696">button.setText(Integer.toString(i));</font>
button.setGravity(Gravity.CENTER);
button.setButtonDrawable(R.drawable.null_selector);
<font color="#969696">button.setChecked(i == currentHours); // Only select button with same index as currently selected number of hours  </font>

Now, let’s see how this all has pulled together.

There—that looks much better! And it works great.

Code School: Journey into Mobile Review

2012-07-06T00:00:00+00:00

Yesterday, I took the Journey into Mobile course over at Code School, an online training program with a handful of web technology courses. I just started a large mobile project for Paper Source, so this was good timing. Because a paid membership to Code School is required to participating in the training, I won’t share too many of the course details here. But I’ll share a few tidbits that will hopefully interest you in taking the course or learning more about mobile development.

The course was divided into 5 high level lessons (or levels):

Relative Font Size
Fluid Layouts
Adaptive Design
Responsiveness Adventures
Responsive Media

The first two topics covered working with proportional font sizes and content regions, and how to convert your existing layout to proportions (percentage or ems) to create a fluid layout which included proportional font sizes. In the Adaptive Design lesson, the CSS3 supported @media query was introduced. I’ve used the media query on the responsive design for The Best Game Apps and will be using it for Paper Source. Some examples of @media queries include:

@media (min-width: 655px) and (max-width: 1006px) {
  # styles specific to browser width 655-1006 pixels
}
@media only screen and (device-width: 768px) {
  # styles specific to browser width 768 pixels
}
@media (min-device-width: 320px) and (max-device-width: 655px) {
  # styles specific to browser width 320-655 pixels
}
@media (min-device-width: 450px) and (orientation:landscape) {
  # styles specific to browser width 450 pixels and landscape orientation
}

For each of the above @media queries, specific “break points” are determined to adjust styles as certain elements break as the browser width changes. For example, if elements begin to overlap as the screen narrows, the browser width at which this begins to happen is one break point, and new styles are defined for that width.

The last two levels of the training course covered Responsiveness Adventures and Responsiveness Media. Responsive design also leverages the @media query to design responsively for changing browser widths. One interesting topic covered in the Responsive Media lesson was how Retina Images are addressed on devices where the pixel density is 1.5-2 times regular pixel density. This was a topic I hadn’t come across in mobile development. The lesson presented a couple of options for dealing with Retina images, including use of the @media query and picture HTML tag.

Overall, it was a decent course with a good overview. I would recommend it to anyone planning to get involved in mobile development.

Three Things: ImageMagick, RequestBin, Responsivness

2012-06-28T00:00:00+00:00

It’s been a while since I wrote a Three Things blog article, where I share tidbits that I’ve learned that don’t quite make it into a full blog post, but are still worth sharing!

Image Stacking via Command Line

I recently needed to stack several images to CSS spritify them. I did some quick searching and found the following ImageMagick command line functionality:

convert add.png add_ro.png -append test.png
convert add.png add_ro.png +append test.png

The -append argument will stack the images vertically, and +append will stack the images horizontally.

RequestBin

Recently, I needed to quickly examine the contents sent during a payment transaction. Richard pointed me to RequestBin a neat and quick tool for examining the contents of an external request. I was testing the Elavon payment gateway integrated in an application using Piggybak. In my code, I made the following change:

class ElavonGateway < ViaklixGateway
  self.test_url = 'https://demo.myvirtualmerchant.com/VirtualMerchantDemo/process.do'
  self.live_url = 'https://www.myvirtualmerchant.com/VirtualMerchant/process.do'
+ self.test_url = 'http://requestb.in/abc1def2'

I ran through a single checkout, then visited the RequestBin inspect URL to examine the variables passed to the payment gateway, to see the following data (the text overwrites itself in Chrome):

RequestBin example output.

A Responsiveness Tool

I’ve been working on responsiveness for a couple of sites recently. One of my clients pointed out responsivepx, which allows you to toggle the width of your browser to review various responsive layouts.

Popular Mobile Apps from Brian and Adam

2012-06-15T00:00:00+00:00

In our last lightning talk of the conference, Brian Dillon and Adam Vollrath shared some of their favorite mobile apps. Brian queried the room to see the phone type divide in the room. Here was our split: 33%—iPhones, 33%—Androids, 33%—unsmart phones.

Brian likes pure simplicity for iPhone apps:

Dropkick, categorization, syncing, require account creation
Simplenote: same thing, but for notes

Adam has an Android “because Google owns him”:

Google Goggles: Rumored Google technology is integrated into this. Google tries to ad-hoc identify logos, book covers, automatic translation of images, images, QR codes.
K9 Mail: email client
Andchat: IRC client
WiFi Analyzer: provides site survey on network traffic
SpeedTest

Using Gmail at Work

2011-12-15T00:00:00+00:00

The Short Story

For those who don’t care about why, just how…

Create a new Gmail account
Setup Mail Fetcher
Setup send email from another account;and make it your default
Verify you send and receive as your corporate address by default using the web client
Setup your mobile
From your mobile go to m.google.com/sync and Enable “Send Mail As” for this device (tested only on iOS)
Verify you send and receive as your corporate address by default using your mobile client
Setup Google Authorship with your domain’s email address

The Long Story

Here at End Point there are a lot of opinions about email clients. Our hardcore folks like Alpine while for most people Evolution, Thunderbird, or Outlook will do. As a Gmail user since September 2004, I found I needed to figure out how get our corporate email system to work with my preferred client.

My first reaction was to have Gmail act as an IMAP client. I found (as many others had) that Gmail does not support IMAP integration with other accounts. However, Gmail does have a POP email client known as Mail Fetcher. I found that Gmail does support encrypted connections via POP, so use them if your email server supports them. When combined with the HTTPS by default, access to the Gmail web client seemed sufficiently secure.

I now needed to send email not as my Gmail address, but as my End Point address. Google has well documented how to send email from another account. Again encrypted SMTP is supported and is strongly recommended. Also be sure to make your corporate email account the default account so you will always use your corporate email address and not the Gmail address.

After verifying I was sending and receiving email properly, I needed to get my mobile setup. There are a variety of options available for all the mobile platforms. On my iPhone, I had several other accounts already setup and found the native client to be acceptable. I decided I would configure the native iPhone email app to access Gmail, as well as Contacts and Calendar using Google’s support for Microsoft’s ActiveSync protocol, which Google has licensed and rebranded as Google Sync.

I had used Google Sync for other Exchange accounts at my previous job and found it worked very well. However, there are some known issues, like not being able to accept event invitations recieved via POP. It’s worth checking these issues out to see if there are any blockers for you.

After setting up “Google Sync” on my iPhone, I tested again, and found that by default, it would use my Gmail account as my default outgoing email account, despite the setting in the Gmail web client. I needed to use my corporate address here at End Point for sending mail from mobile; I thought I was sunk!

Fortunately, it seems I over looked a section in the Google Sync setup documentation, labeled “Enable Send Mail As feature”. This feature solved my problem by having me go to m.google.com/sync from my iOS device and check Enable “Send Mail As” for this device. This would tell Google Sync to use the default outgoing account I had specified in the web client.

One requirement here at End Point which this configuration does not meet is support for PGP encryption/decryption of messages. There is a Chrome plugin that claims to offer support, but as the authors from this post highlight:

*There may also be resistance from crypto users – who already are a security-conscious lot – to trusting private keys and confidential messages to a set of PGP functions folded inside some JavaScript running inside a browser. *

I’d have to say I agree. After following the instructions to install the plugin, I balked when it asked for my private key; I just didn’t feel comfortable. Despite this shortfall, most End Point email isn’t encrypted end-to-end. However, I can feel good knowing that my “last mile” connection to End Point’s servers are encrypted, end-to-end using encrypted POP, SMTP, and HTTPS.

Christmas Tree Commerce in 2011

2011-12-09T00:00:00+00:00

Took a bit of a break today to get one of those perennial activities out of the way, the great Christmas tree shop. Much hasn’t changed about this time honored tradition, don the hats and gloves (well, at least until global warming takes over), pile the family in the car, and hit the ATM to get a bundle of cash to pass “under the table.” Not so fast, this is 2011 and Christmas tree lots aren’t what they used to be.

Rest assured much of the experience hasn’t changed, you still get to wade up and down aisles of freshly cut firs. Trying to select just the right balance of fat vs. thin, tall vs. short, density vs. ornament hanging potential, and there is still some haggling over price (if you are lucky) and the inevitable chainsawing, bundling, and twining to the top of the old station wagon (well, SUV). But today did have a big difference, and one that our e-commerce clients and more so our bricks and mortar clients should be particularly mindful, the “cash box” with the flip up lid and stacks of tens and twenties had been replaced by an iPad with a card reader. This Christmas tree lot has gone high tech, all the way. The iPad totaled the order, and with card reader attached, took my payment, allowed me to sign the screen with a finger, and e-mailed me my receipt.

As much as I appreciated the simplicity and convenience of paying it is a tough argument to make that it is that much better from the consumer side, paying in cash was pretty simple before too, but the secret here is for the vendor. This particular vendor (not exactly Apple) has eight tree lots around town, but what the iPad has done for this little, short lived merchant is provide real time inventory tracking, supply management, resource management, and the underpinnings of customer relationship management. In an instant they are able to see which lots are having the most foot traffic, which lots trend at which times, which are running low on a particular sort of tree, and make adjustments to stock and resourcing accordingly. I will be quite surprised if I don’t receive an e-mail from them next year reminding me just where their lot is located, and that it is time to buy the centerpiece of holiday decorations.

Of course next year it will be 2012, and credit card mag strips are really so 2011, so if I need to bring anything other than my cellphone I’ll be just a little disappointed. (Did I mention they provide delivery? I guess in case you drive a smart car.)

@Happy_Holidays!

Google 2-factor authentication

2011-03-14T00:00:00+00:00

About a month ago, Google made available to all users their new 2-factor authentication, which they call 2-step authentication. In addition to the customary username and password, this optional new feature requires that you enter a 6-digit number that changes every 30 seconds, generated by the Google Authenticator app on your Android, BlackBerry, or iPhone. The app looks like this:

This was straightforward to set up and has worked well for me in the past month. It would thwart bad guys who intercept your password in most cases. It would also lock you out of your Google account if you lose your phone and your emergency scratch codes. :)

I was happy to see this is all based on some open standards under development, and Google has made this even more useful by releasing an open source PAM module called google-authenticator. With that PAM module, a Linux system administrator can require a Google Authenticator code in addition to password authentication for login.

I tried this out on a CentOS x86_64 system and found it fairly straightforward to set up. I ran into two minor gotchas which were reported by others as well:

The Makefile calls sudo directly, which it shouldn’t—I was running a minimal installation without sudo installed, and in any case the administrator should decide when to become root and how. (Issue 17)
The Makefile installs into /lib/security instead of /lib64/security. This has since been fixed. (Issue 6)

After build and installation it was easy to generate a secret key for each individual user account. The key is stored in the user’s home directory, which Issue 4 notes has some downsides, and the resolution to Issue 24 provides a partial workaround for this. The home directory seems like a nice default to me.

In the end, I found the google-authenticator module isn’t suitable for my regular ssh use due to no fault of its developers. I normally use SSH public key authentication and that’s handled by OpenSSH natively, separately from PAM, and thus bypasses 2-factor authentication entirely. So I can have 2-factor authentication with password authentication, but not with public key authentication, which is really what I want.

Does anyone know of a way to configure things that way? I wasn’t able to find a way, so I’m not planning on using this for shell logins right now. But it’s still a nice option for Google logins right now, and I expect the google-authenticator project will advance over time.

API gaps: an Android MediaPlayer example

2011-03-02T00:00:00+00:00

Many programming library APIs come with several levels of functionality, including the low-level but flexible way, and the high-level and simpler but limited way. I recently came across a textbook case of this in Android’s Java audio API, in the MediaPlayer class.

We needed to play one of several custom Ogg Vorbis audio files in the Locate Express Android app to alert the user to various situations.

Getting this going initially was fairly straightforward:

In this simplified version of our PlaySound class we pass in the app resource ID of the sound file, and using the MediaPlayer.create() method is about as simple as can be.

We keep a map of playing sound files so that external events can stop all playing sounds at once in a single call.

We set an OnCompletionListener to clean up after ourselves if the sound plays to its end without interruption.

Everything worked fine. Except for a pesky volume problem in real-world use. MediaPlayer uses Android’s default audio stream, which seemed to be STREAM_MUSIC. That plays the audio files fine, but has an interesting consequence during the actual playing: You can’t turn the volume down or up because the volume control outside of any specific media-playing contexts affects the STREAM_RING volume, not the one we’re playing on. Practically speaking, that’s a big problem because if the music stream was turned up all the way and the alert goes off at full volume in a public place, you have no way to turn it down! (Not a hypothetical situation, as you may guess …)

Switching to STREAM_RING would be the obvious and hopefully simple thing to do, but calling the MediaPlayer.setAudioStreamType() method must be done before the MediaPlayer state machine enters the prepared state, which the MediaPlayer.create() does automatically. The convenience is our undoing!

Switching over to the low-level way of doing things turns out to be a bit of a pain because:

There’s no interface to pass an Android resource ID to one of the setDataSource() methods. Instead, we have to use a file path, file descriptor, or URI.
The easiest of those options seemed to be a URI, and doing a little research, the format comes to light: android.resource://package.name/resource_id
We have to handle IOException which wasn’t throwable using the higher-level MediaPlayer.create() invocation.

Putting it all together, we end up with:

It’s not so hard, but it’s not the one-line addition of MediaPlayer.setAudioStreamType() that I expected. This is an example of how the API lacking a MediaPlayer.setDataSource(Context, int) for the resource ID makes a simple change a lot more painful than it really needs to be—especially since the URI variation could easily be handled behind the scenes by MediaPlayer.

I later took a look at the Android MediaPlayer class source to see how the create() method does its work:

Instead of creating a URI, the authors chose to go the file descriptor route, and they check for exceptions just like I had to. It seems more cumbersome to have to open the file, get the descriptor, and manually call getStartOffset() and getLength() in the call to setDataSource, but perhaps there’s some benefit there.

This gap between low-level and high-level interfaces is another small lesson I’ll remember both when using and creating APIs.

There’s one final unanswered question I had earlier: Was STREAM_MUSIC really the default output stream? Empirically that seemed to be the case, but I didn’t see it stated explicitly anywhere in the documentation. To find out for sure we have to delve into the native C++ code that backs MediaPlayer, in libmedia/mediaplayer.cpp, and sure enough, in the constructor the default is set:

mStreamType = AudioSystem::MUSIC;

My experience with Android so far has been that it’s well documented, but it’s been very nice to be able to read the source and see how the core libraries are implemented when needed.

DROID 2 review

2011-01-24T00:00:00+00:00

I got a Motorola DROID 2 phone a couple of months ago and have assembled here my notes about how it has worked out so far. First, some background.

This is my second Android phone. My first was the Google Ion, basically the same as the HTC Magic. That was running standard Android 1.5 (Cupcake), while the DROID 2 runs Android 2.2 (Froyo) tweaked somewhat by Motorola. I’ve used several other Android phones belonging to friends and relatives.

Overall I like the Android operating system fairly well. Like everything, it can be improved. It’s been advancing at a fairly quick pace. It’s mostly free software. Too many phones are locked down and have to be broken into to change the operating system, but Android’s still a freer computing environment than most phones have and I hope the situation will improve over time.

I take for granted much of Android’s feature set: The excellent system-wide notification bar that many apps hook into and which is always easy to get to. The solid multitasking. Automatic screen adjustment for using the phone in landscape vs. portrait mode. The ability to mount the normal filesystem on the SD card from another computer via USB or by removing the SD card. The freedom to run any applications I want, downloaded from wherever, not just the Android Market.

For one of our clients, I’m currently developing an Android application in Java that uses geolocation, JSON web services, and Urban Airship’s AirMail Push for push notifications. So I’m using the phone both as my main mobile phone and as an app developer.

Keyboard

This is the first phone I’ve had with a full slide-out QWERTY keyboard. I wasn’t sure if I’d use it often or just stick with the touchscreen keyboard. So far I use the real keyboard most of the time. But it’s nice to be able to use either the hard keyboard or touchscreen keyboard, whichever’s more convenient.

I like the keyboard a lot, especially that its rows are offset like a normal keyboard and not a straight aligned grid:

The real keyboard makes using ssh (via the ConnectBot app) on the phone much easier than with the touchscreen keyboard, because the real keyboard doesn’t use up any screen real estate.

The biggest annoyance for me has been the keyboard’s microphone key which launches the voice commands function. I don’t use voice commands, so this has never been what I’ve wanted and is highly annoying when accidentally pressed.

Third-party alternative touchscreen keyboards for European languages, Hebrew, Arabic, and others work pretty well too.

Touchscreen

I really miss having physical buttons for menu, home, back, and search, as I had on the HTC Magic:

On the DROID 2 they’re touchscreen buttons and it’s annoying and error-prone to have to look at the phone and carefully press one. Much better to have real buttons for those core functions used by all apps.

However, good riddance to the trackball.

The DROID 2 screen itself is higher resolution, bright, and responds well to touch, swipe, and multitouch, as you’d expect.

Battery

Battery life on the DROID 2 is not great, especially when using GPS heavily. But that’s a problem on most phones.

I later got the optional extended-life battery. It isn’t much bigger or heavier, and does add a lot more life to the phone. It wouldn’t be necessary if I weren’t doing heavy GPS & web service interaction with my own Android app under development.

Audio

The DROID 2 has a normal 1/8" stereo headphone jack, which is nice. The HTC Magic needed a special adapter to use normal headphones, which was a pain.

Audio playback is usually fine, though on a couple of occasions it’s stuttered, presumably while contending with other apps for CPU. Audio playback when the screen is off doesn’t drain the battery much at all.

Calling and Contacts

There have been a few isolated incidents, perhaps involving switching off Bluetooth, where I couldn’t turn down the call volume in the middle of the call. That could’ve been either a generic Android problem, or the Motorola Android build; I’m not sure.

I didn’t much like the special Motorola apps that shipped on the phone, but simply not using them has made them no problem.

An exception to that is the Contacts app that integrates with Facebook and Twitter. That’s a lot more helpful than I imagined it would be, though when you have many contacts it can sometime slow down on opening an individual contact, when I imagine it tries to fetch the latest details from social networks.

The in-call screen’s “Mute” button is small and way too close to the “End call” button:

That’s led to me accidentally hanging up during conference calls a couple of times. The stock open source Android call screen is arguably less pretty, but equally-sized buttons makes it easier to use:

Because I’m using Verizon for the first time with this phone, I’ve been introduced to the sad problem of not being able to use voice and data at the same time on CDMA. I used to laugh about that when I was using AT&T because it seemed silly. Now I find it really does get in the way fairly often.

The normal Skype app doesn’t allow using a Bluetooth headset or using the cell network for calls (in the US). The special Verizon Skype app burns voice minutes and won’t let you use wifi for calling (in the US). The combination of proprietary software plus controlling phone carriers is bad for users! Because of the limitations I use Skype mostly for text chat on my phone.

GPS

As I mentioned, the GPS uses a lot of battery. But it works well. The GPS on my HTC Magic sometimes took a very long time to get a location fix, but on the DROID 2 it’s fast and works very well. Given the location-aware app I’m working on, I’ve had more opportunity to notice this than I otherwise might have.

There was one funny problem with the GPS, though. Once when the battery got down to 5% or so, the GPS started to report hilariously wrong data to my app, and thus to the web service it reported to. For example, it reported every second that my phone, which was sitting on my nightstand, was traveling at 121 m/s (270 mph), and the point in latitude and longitude moved quickly. This continued even after I’d plugged the phone back in. I haven’t seen it happen since, but it was strange.

Useful apps

I don’t spend a lot of time trying out new apps, but I’ve found several to be very useful: K-9 Mail for multiple mail accounts (reviewed yesterday on Ars Technica), Yaaic (an IRC client), 3G Watchdog (bandwidth monitor), TweetsRide (Twitter client), Google Sky Map, and My Tracks. I haven’t found a great music player yet, but the built-in Android Music app and Winamp are both fine.

Security

I’ve long used crypto filesystems on desktop and laptop computers, and feel the lack on Android. A phone needs a solid cryptofs option more than normal computers even, and I hope that’ll be available soon.

The end (for now)

I’m probably forgetting lots of things, but this is already longer than I’d expected, so I’ll stop now and put any afterthoughts in the comments. In short, I like the phone, but it’s hard to avoid looking forward to a brighter future when it comes to mobile devices.

Google Voice first impressions

2009-08-13T00:00:00+00:00

I’ve been using Google Voice on and off for about a week now, and wanted to share my first impressions.

Google Voice is still available only by invite, but I only had to wait about 3 days to get access. Signup was quick and easy, and doesn’t cost any money. The hardest part was selecting a phone number – you can choose one from most anywhere in the United States, but as far as I know you can’t change it later, at least not easily. I finally got the Montana phone number I’ve always wanted!

Simultaneous multiple call forwarding: The feature I was most aware of beforehand is having your Google Voice number forward calls to as many other numbers as you want. This is actually better than I expected, because it calls the other numbers simultaneously, not in series, so there’s very little delay to the caller compared with directly calling. Whichever phone you answer first and tell the robot lady “1”, is the one that takes the call.

Android integration (not VoIP): I was most excited to use Google Voice as a VoIP client on my Android phone, but that is a feature I apparently imagined all by myself. The Android Google Voice client still uses cell phone minutes and goes through the cell network, but it routes the calls through Google’s infrastructure and shows caller ID as your Google Voice number. The point of this is to save money on international calls because you are only making a domestic call to your Google Voice number as far as your cell phone provider is concerned, and then Google routes the international call and charges you a few cents a minute. (This is the only part of Google Voice that costs money at the moment, as far as I know.) That’s a neat feature, but what I really wanted was a completely VoIP client that I can use on wifi or a 3G data network to make calls entirely outside the cell phone network. Any Google Voice developers reading: Here’s my enthusiastic vote for that! I would use it all the time if it existed.

Google Contacts integration: Because I’m using an Android phone and its native contact management, my contacts are synced with my Google account and thus appear in Google Voice automatically. That is convenient. It means the GOOG has all my contact info. That’s more or less the case with anyone routing phone calls for me anyway.

Free SMS: Google Voice does free SMS text messages, both sending and receiving, even if you have no cell phone. If you do have a cell phone configured with it, it also forwards incoming SMS to your phone. Very handy. Every cell phone SMS someone has sent me has made it, but for some reason I haven’t been able to get Skype’s SMS to go to Google Voice at all. That keeps me for now from having SkypeOut calls show a Google Voice number as the caller ID, unfortunately.

Free domestic long distance: Another nice feature I hadn’t known about before is Google Voice’s ability to initiate two outgoing calls, one to one of my configured phones, and the other to anyone else, and connect us. This makes it possible to use no long distance but call whoever you want. A feature I haven’t tried yet is having others call the Google Voice number and conferencing them in.

Volume attenuation problem: The biggest problem I’ve noticed with Google Voice call quality so far is a serious attenuation of sound volume. When talking one-on-one with someone it’s tolerable, and many people may not notice it. But when I called into a conference call with Google Voice people could barely hear me at all, when I talked loudly. I could hear them ok, but they couldn’t hear me. I use that conference call facility all the time with regular phones, cell phones, and SkypeOut, and have no problems there. If Google could somehow boost the call volume to compensate for the extra connections, that might help. But for now I simply can’t use it for conference calls, where I spend a fair amount of time every week.

Silent participants dropped: The second-biggest problem is that Google Voice apparently intentionally drops the call without warning whenever one side is silent for more than a few minutes. I haven’t seen this documented anywhere, and Google doesn’t tell you in any way, but it’s pretty clear that’s what’s happening. As long as both sides are talking fairly frequently it’s fine, but on conference calls I often have to stay muted for many minutes while others are talking, and then I’m unceremoniously dropped. So that’s strike two against using Google Voice for conference calls right now.

Voice mail transcription: Voice mail left at Google Voice is available via the Android app, the web app, can be emailed to you, but most amazingly, if in English, is automatically transcribed and sent via SMS text message! It was hard to imagine this would work very well. I had Kiel test it for me. Compare his voice mail recording to the transcription:

A little cutie of the corner told me to leave you not Grandmama call messages and so the core in based cheese card test, kittens From, trucking, and you know from getting to fat until all the super caliper at July 6th and if that’s not ballistic. I don’t even know it’s realistic. Because let’s just face it. Corn is, where’s that. See you.

Note that it displays the transcription lighter or darker depending on its level of confidence in each word. The transcription is not perfect, and Kiel deliberately chose words and phrases to be difficult to decode, but it’s definitely close enough to give an idea of what the message is about without having to listen to the recording. Very useful if you’re somewhere you can only peek at the phone for a few moments and can decide if the message warrants excusing yourself from the room or not.

Listen in: I haven’t used this yet, but can imagine I would. You can let people start leaving voice mail but listen to it in real time and decide to take the call, just as with old answering machines.

Switch phones: I haven’t used this yet either, but you can switch phones during a call from a land line to a cell phone or vice versa.

In summary, it is not the be-all and end-all of phone services that I may have hoped for, but it’s a very useful addition to the world of phone services, is easy to get going with, and is mostly free of charge. It’ll be fun to see where Google takes this.

Look Ma, I made an iPhone Enterprise Application!

2009-08-03T00:00:00+00:00

One of our clients recently came to us for help with implementing an iPhone Enterprise application. This particular application involved deploying specific signed mail configurations for customers with iPhones. This was primarily a server-side application, although the front-end interface was created using the DashCode development tools from Apple. Although this was a web application, the DashCode integration enabled us to create the interface in a way that it appeared to be a native application on the iPhone. Client-side validation was performed in a way that for all intents and purposes appeared native.

The backend was a traditional CGI script which generated the .mobileconfig configuration payloads to easily integrate the customer’s mail server information into the iPhone’s Mail application. The backend was written to support any number of accounts deployed per customer, and the resulting payload was signed and verified by the customer’s PEM key.

We integrated openssl’s pkcs12 support to transparently sign the generated dynamic mobileconfig. This was keyed off of the client’s deployment key, so all of the generated keys were automatically indicated as trusted and registered by the client when installed on the iPhone.

Action shots:

Gmail Contacts Notes Converter

2009-07-21T00:00:00+00:00

As I mentioned previously, I recently got a Google Ion phone running Android. I recently began using it as my main mobile phone, and thus needed to finally migrate the contacts from my Nokia 6126 phone to Android.

This is apparently easy to do by first copying all the contacts from the Nokia 6126 internal memory to the SIM card, then moving the SIM card to the Ion and importing the contacts. But that only works if all your contacts fit on the SIM card. If not, they’re truncated, and you have to delete many contacts on the Nokia to fit more, which would be a nonreversable move.

Several posts describe ways to do the export and import, such as this one that didn’t really apply to my phone, and this one that involves VCF export & import which I didn’t see a way to do.

Ultimately I found an article that described Nokia’s PC Suite software that I’d never heard of before, which I downloaded on an old Windows machine and used to download the contacts from the phone via Bluetooth, then export to a CSV file and import into Gmail. So far, so good.

Except as this post and another post describe, then all the contact data showed up in a single Notes field, useless for dialing or emailing.

I decided it would be easiest to convert the Notes data into normal phone fields since I already had some contact information in the phone and couldn’t find any other reasonable way.

I came up with this Gmail Contacts Notes Converter script to solve the problem. It takes Gmail-exported CSV as input, converts any Notes field data into standard Work or Personal contacts, and outputs CSV that can be re-imported into Gmail. It requires Perl 5.10.0 and I’ve only tested it on Linux. (It could be modified to work with earlier Perl versions fairly easily.)

Perhaps it will be useful to someone else as well.

Ubuntu Touch on a Galaxy S7 & a Pixel 3a

Installation

Usability

Appium: Automated Mobile Testing

Installation and setup for Linux

General

AVD Android emulator

Appium

Ruby and RSpec

Putting it all together

Recording a test with Inspector

Running a test

What’s next?

Additional tests

Test with other devices

CI/​CD integration

Mobile Device and Application Management (MAM vs. MDM)

What is MDM?

What is MAM?

What are some MAM and MDM vendors?

Need Help?

Case Study: Responsive Design Return on Investment

Why Go Responsive?

Goals

End Point’s strategy

Use Bootstrap

Break up the work into segments

The Project

Results

The Lesson

Zurb Foundation 5: Applying Styles Conditionally Based on Viewport Size

Mobile-friendly sites or bust!

Simplifying mobile development with Ionic Framework

PhoneGap and Ionic Framework

Creating the project

Working with the app layout

Using AngularJS to manage the app

Mooving to the Mobile Web

Technical Details

How it looks

The Future of the Web — Devices, Devices, Devices

Dynamically adding custom radio buttons in Android

Code School: Journey into Mobile Review

Three Things: ImageMagick, RequestBin, Responsivness

Image Stacking via Command Line

RequestBin

A Responsiveness Tool

Popular Mobile Apps from Brian and Adam

Using Gmail at Work

The Short Story

The Long Story

Christmas Tree Commerce in 2011

Google 2-factor authentication

API gaps: an Android MediaPlayer example

DROID 2 review

Keyboard

Touchscreen

Battery

Audio

Calling and Contacts

GPS

Useful apps

Security

The end (for now)

Google Voice first impressions

Look Ma, I made an iPhone Enterprise Application!

Gmail Contacts Notes Converter

CI/CD integration