Building a Cordova App

In an earlier post I wrote about the golf score tracking application I created to learn ASP.NET Core and AngularJS. Since the initial inspiration was my son playing golf, I thought it would be good to put the application on his tablet so he could track his own scores. Cordova looked like the technology to allow me to turn my "experiment" into something my son could practically use.

I'm going to focus on my experience with Cordova and getting a mobile app running. (I'm writing this post mostly so that I don't forget the little things I ran into while getting things to work.)

Cordova is an Apache open-source project for building mobile applications using web-based technologies. I have heard about this technology for a few years at several tech conferences that I attend. The appeal of Cordova is that it should allow a developer to publish an application to multiple mobile platforms using the web-based technology that is already known. Cordova was born out of a technology called PhoneGap.

The Cordova utilities run on Node.js and can be installed using the Node Package Manager (NPM). The Getting Started page of the Cordova site has all of the basic steps necessary to get Cordova installed and the first application created. Here are the steps I followed:

1. Install Cordova.

   npm install -g cordova

2. Create a Cordova application.

   cordova create com.darrenhale.golfscoretracker golfscoretracker

   This step is different than the step listed on the Cordova Getting Started page. I was required to include the "com.darrenhale.golfscoretracker" portion to generate the application structure.
3. A Cordova application has to have "platforms" added for the deployment targets. I wanted my application to function in the browser, on Android, and on iOS

   cordova add platform browser android ios

4. Migrate the "web" application into the Cordova application structure. For me this meant:
   1. Copying my index.html page into the www folder of the Cordova application.
   2. Copying my Javascript files into www/js folder.
   3. Copying my bower_components folder into the www folder.
   4. Copying my css folder into the www folder.
   5. Copying my styles folder into the www folder.
   6. Making any path changes to the files referenced in index.html
5. At this point, I tried running the application in the browser.

   cordova run browser

Up to this point, things were great! The application worked when I called:

cordova run browser

I had also started my web API application to have a back-end process. Everything worked as expected! (I expected it to work since the AngularJS app worked in a browser already.) My next step was to run it for a mobile platform.

In my excitement, I quickly executed:

cordova run android

Guess what happened? Nothing. It was late, and I realized I was not thinking straight. It dawned on me that I needed an Android emulator to make this command work. Let the adventure begin!

At my next opportunity to work on the project, I immediately went to get the Android SDK and its corresponding emulator. I didn't realize how much the state of mobile development has changed, and I was surprised to find that the first thing I found was Android Studio. I really didn't want to download a full development environment. After some poking around I was able to find just the Android command line tools. I downloaded the package for Mac OS X and unzipped the package into a folder on my system.

I created a test device to emulate for running my application. Through trial and error, I came up with the following configuration:

• Targeted Android 6.0 - API Level 23
• CPU/ABI of ARM (armeabi-v7a)
• RAM of 512
• VM Heap of 32
• Internal Storage of 200 MiB
• Emulation Options: I selected Use Host GPU

I could now successfully start the Android emulator and interact with it. (It is important to note, the emulator is VERY SLOW to start completely. Give it time to start up.)

With the emulator running, I executed:

cordova run android

The Cordova utilities packaged my application, pushed it to the emulator, and started the application. It worked! My application started up and functioned! I realized I needed to adjust the CSS in the app to work on a smaller display, but those changes were straightforward to make. After a little more trial and error, I had an application that functioned on a mobile device.

The last change I needed to make was to replace the API calls in the application with calls to localstorage. I opted to use localstorage for two reasons: first, I wanted my son to be able to use this application without any network connectivity, and second, localstorage is a mechanism that a Cordova app can use across multiple platforms. Localstorage is essentially a key/value store using JSON as the storage mechanism. Most of the data in the golf score app is pretty simple, so I figured I could make this work. The localstorage object has a setItem() method for saving data and a getItem() method for retrieving data. I was able to replace my API calls with localstorage calls fairly easily, but the app didn't work right away. The trick I was missing was that I needed to convert my objects into a JSON format to save them and to parse JSON into my object when retrieving them. I accomplished this with JSON.stringify() and JSON.parse() respectively.

My path for learning Cordova is not unique, and I'm sure many of the challenges I have experienced aren't challenges for experienced mobile developers or Javascript developers. It was still a great learning experience and it has me excited to do more Javascript coding!

Innovation and Competition in St. Louis

I read Walter L. Metcalfe Jr.'s editorial this morning in the St. Louis Post-Dispatch. In his editorial, he calls on St. Louis to start a new competition similar to the one that brought us the Gateway Arch to spur collaboration and innovation. While reading this article, I couldn't help but think of hackathons.

Hackathons are generally time-limited competitions in which technology specialists work to create prototype solutions to problems. Sometimes these problems are business-oriented, but quite often the problems are civic focused. These competitions require teams of people to work together to solve the problem.

My company Clearent and the University of Missouri - St. Louis are partnering for a competition in the same spirit as Mr. Metcalfe is calling for, but on a smaller scale. We are sponsoring a hackathon called HackEdu. This is an inaugural event in which we are going to bring together educators, technology specialists, and business people to solve some of the most pressing challenges in education using cutting edge technologies. HackEdu has several goals in mind.

First and foremost, we want to introduce many different constituent groups to each other, and help them learn how to collaborate together effectively. Quite often we see divisions between educators, business people, and technologists. This division limits innovation, especially in the education sector. Within the context of the HackEdu, we want to help these different groups learn how to work together effectively.

Another goal of this event is to teach participants how to to function in a hackathon. Many participants in a hackathon don't have the tools necessary to implement a process that helps them effectively achieve their goals. During the HackEdu event, we plan to introduce participants to a methodology that Clearent uses to develop software. Our process focuses on business value, features, and functions. This approach allows us to break down business goals into smaller features and ultimately individual functions that allow us to incrementally release software that provides value quickly.

The obvious goal of the HackEdu event is to solve a problem related to education. A specific problem will be announced at the event, but it will focus on an educational need that could benefit from a technology-oriented solution.

Because much of the HackEdu event is directed toward teaching people how to collaborate and create functional solutions, we are offering the winners of the HackEdu tickets to Globalhack VI. Globalhack is an annual hackathon where numerous teams come together to solve a civic-oriented problem. Our hope is to prepare people to effectively compete in the Globalhack event this year.

I believe that the HackEdu competition and the Globalhack event are preparing people in St. Louis to participate in a competition like the one Mr. Metcalfe describes in his editorial. If nothing else, I think we are building the skills necessary to continue to build the St. Louis area as a colloborative, innovative community!

ASP.NET Core App with AngularJS

I've been trying to learn the new ASP.NET Core technology along with AngularJS. I always find it easier to learn new technology if I have some problem that I'm trying to solve. The problem that presented itself to me was a golf score tracking application. My middle son plays golf for his school team. I thought it would be great to build a mobile app to keep track of his golf score on the course. Since I've never been great at UI work, I thought this was a good opportunity to learn a front-end technology too.

I created an MVC 6 web API that exposes REST endpoints for working with a golf score. My intention with the application is to mimic a golf score card. The API went together pretty quickly. I kept the API simple: I have a single controller that exposes GET, PUT, POST, and DELETE methods on the Score object. The Score object holds some basic information about a round of golf (i.e. the course name and a description) along with a collection of scores for holes. The controller is saving data to a text file. I used a text file instead of a database to simplify the learning process. (Another motivation for saving to a text file instead of a database was because DNX Beta 4 did not have the ability to work with a SQL Server database, and I didn't want to hunt down a compatible technology.) Over the last several months, I've upgraded the back-end portion of the app to stay up-to-date with the ASP.NET Core changes, bringing it up to RC1.

The front-end of the application is an AngularJS application using Bootstrap for styling. At the time I created the initial application, I also wanted to learn some of the modern web tooling, including Bower. I used Bower to lay down the initial AngularJS application, but I quickly abandoned keeping up with Bower becase I had my hands full just learning AngularJS and Bootstrap.

I experienced two main difficulties creating the web application. First, I had a difficult time understanding AngularJS routes, views, controllers, and the relationships between them. Once I started to "get" how things were wired together, I was able to I went through several passes to get an application functional. The Javascript code is not pretty and probably not well organized. My focus was on understanding learning AngularJS and not making things "pretty."

I'm not a developer that is good at creating large amounts of documentation for my code. I generally want code to stand for itself. To that end, this project is in Github here. Hopefully the code does actually speak for itself.

In future passes, I would like to clean up the Javascript and add unit testing to both the API and Angular pieces. I also plan on upgrading this app to RC2 of ASP.NET Core when it is released. (I may try to do this sooner if time allows.)

Running GUI Apps in Docker on Mac OS X

I've been trying to figure out how to run GUI apps in a Docker container on my Mac running OS X El Capitan. As a developer, I try out many different software packages and configurations. I would love to be able to try out certain things in a well-contained environment where I won't leave bits and pieces lying around if something doesn't work or if I get bored with the package. I have also been enamored with using Docker for development environments to make them portable and self-contained. After many searches and experiments, I finally stumbled on what I needed to do.

I am using the Docker Toolbox to run Docker on my Mac. I have also used Boot2Docker, but the Docker Toolbox experience is a little smoother. Either option will work to get Docker containers running on your system.

One of the required pieces I had to install was XQuartz. This is an X11 windowing system that runs on the Mac. I was originally worried about installing this package, concerned that it would interfere with the X11 windowing system built into OS X. So far, I haven't had any trouble with it.

To try out a GUI app, I wanted a basic Linux container with an obvious GUI app that is not installed on my Mac. I created a basic Dockerfile defining an image based on the latest distribution of Ubuntu. I then install Firefox into the image. The image starts up at a bash prompt, which allows me to run programs. Here is that docker file:

FROM ubuntu:latest

RUN apt-get update && apt-get install -y firefox

CMD /bin/bash

Getting Docker to create an image and run a container based on that image was pretty straightforward with the Docker Toolbox for Mac OS X. The hardest part was trying to get the running container to bind the DISPLAY environment variable to the XQuartz server. This link finally broke things open for me. A comment from slobo on January 22, 2015 has the secret sauce. In an xterm window started under XQuartz, run the command

socat TCP-LISTEN:6000,reuseaddr,fork UNIX-CLIENT:\"$DISPLAY\"

Then, when starting the container, set the DISPLAY environment variable to the IP of the Docker virtual machine. (This IP address is usually a 192.168.x.x value.) I found this IP address on my Mac by typing

ifconfig

and locating the vboxnetn entry (where n is 0 - 9). For me, it looked like:

Using the IP address 192.168.99.1, I ran the following command to start a running container:

docker run -it -e DISPLAY=192.168.99.1:0 firefox

(firefox is the image name for the Ubuntu image running Firefox I defined with the Dockerfile above.) When I got to the bash prompt inside the running container, I ran Firefox, and the UI appeared like another window in OS X!

I am just starting my journey with Docker, but I'm excited about the possibilities it offers.

UPDATE:

Benny Cornelissen (@whieee) has a blog post that does a really good job integrating XQuartz and the instantiation of containers into the bash shell.

Setting Future File Permissions in Linux

Here is a link to a StackOverflow article outlining how to do this.

I actually found something that so far does what I asked for, sharing here so anyone who runs into this issue can try out this solution:

sudo setfacl -Rdm g:groupnamehere:rwx /base/path/members/
sudo setfacl -Rm g:groupnamehere:rwx /base/path/members/

R is recursive, which means everything under that directory will have the rule applied to it. d is default, which means for all future items created under that directory, have these rules apply by default. m is needed to add/modify rules.

The first command, is for new items (hence the d), the second command, is for old/existing items under the folder. Hope this helps someone out as this stuff is a bit complicated and not very intuitive.

Traversing TFS Links

Recently, Team Foundation Server (TFS) has added some new features that my team is using. One of these features is the new Epic work item. We are using epics to track high-level business initiatives, with features underneath the epics to track user requirements. Underneath the features, we have user stories, which are self-contained units of work that can be tested and deployed independently. My team works with user stories and tracks everything through user stories. I need to drive my reporting by user stories but relate the data to the epics that they are under.

The built-in reporting capabilities of TFS are pretty good, but they don't handle the kind of roll-up reporting I need. A consultant friend shared some code snippets with me that use the TFS API to pull data from the TFS database. I'm building out my custom reporting using the TFS API. One of the first challenges I've run into is starting with a user story and determining the epic that contains that story.

I struggled trying to understand how to follow the links that are available on a TFS WorkItem object. This link pushed my understanding forward quickly. It helped me understand how to identify the "type" of link that I was seeing.

"The tricky bit" for me is identifying the type of link I'm dealing with. Here is the code snippet to do that:

if (link.LinkTypeEnd.Name == "Parent")

In this code snippet, I am filtering on links that are of type "Parent." One could easily filter on other types of links based on need.

As I develop my TFS reporting capability, I will document what I'm doing to make it less mysterious for others.

Pinewood Derby and Arduino Coding

My middle son's Pinewood Derby for Cub Scouts was about a month ago. His pack usually has an "outlaw" division for dads, siblings, and other family members to submit cars. Usually I don't submit a car for the derby, but this year I decided to create a car powered by Arduino.

My original idea was to put a motion sensor on the car, have the Arduino detect that the car was moving, and start up a motor with a propeller. The way the project played out, I got the Arduino kit about 3 days before the Pinewood Derby, so I had to throw something together very quickly.

I cut the car into a basic platform, with a cut-out intended for the motor. I slapped some black paint on it to cover the wood and mounted the wheels. I didn't put any time into making it faster or straight because my intention was not to win a race.

Next I had to do something with the Arduino. I purchased the Arduino Uno with a basic electronics kit. The kit came with jumper wires, resistors, and numerous sensors. It was perfect! I spent a few hours installing the Arduino IDE and playing around with sample sketches. Now I was ready for my project.

My initial idea of driving a motor with the Arduino was doomed to fail. First off, I needed a 5V battery to power the Arduino. I really didn't have room on the car for the Arduino board, battery, and motor. (If I had more time, I would have used an Arduino micro.) Second, not being an electrical engineer, I didn't realize I needed a relay switch to power the Arduino and the motor from the same battery. This realization put my whole project in jeopardy.

At this point I was frantically scrambling to come up with something I could do for this project. I settled on mounting the active buzzer component, with a ball switch. I found a sketch that set up all the notes on the scale and played a melody repeatedly through the buzzer. I wired the buzzer into the Arduino board with the ball switch so that the melody only played when the car was angled downward. (This ensured that the car wasn't annoying everyone unless it was perched for a race.)

The project came together as a family effort. My oldest son helped me mount the board to the car while I figured out how to get the electronic components mounted. My middle son helped me figure out the first few notes of the Imperial March (think Darth Vader theme song) so I could program that into the sketch. I used the space for the motor to mount the battery, and was able to get something together. Here is a picture of the car.

The code I downloaded and modified to play the Imperial March is here on Github.

Even though the project didn't come out as I expected it, it had the desired effect. Numerous adults and scouts asked me about the car. They were all interested in how it worked and what it did. This was exactly the purpose of the project.

I wanted to show the scouts that something like the Pinewood Derby could be looked at through a different lens. I wanted to show the kids that technology can be used in different ways, even on a wooden block with wheels. Although it wasn't perfect, I'm still proud of my first IoT project!