Category Archives: projects

Creating an Enterprise App Catalog

Leave a reply

Motive

One of the challenges faced with developing in-house (or “enterprise”) mobile applications is deployment. For public applications, deployment is handled almost exclusively through platform app stores, like the iOS App Store or the Google Play Store. Deploying apps to employees of a single company, without making use of those stores, is a difficult problem. Android apps can be deployed just by making the apk available, but browsing, versioning and updating is still a problem.

Many companies solve this problem through the use of a Mobile Device Management (MDM) server that includes app catalog or deployment capabilities. Good Mobile Manager and AirWatch are both popular and (according to Gartner) leading platforms for MDM. My company tried out AirWatch, but ultimately decided that it was a bit too buggy and high maintenance, without much benefit.

Without going too much off topic, here’s a brief overview of what AirWatch was, and wasn’t, for us. MDM servers often provide the ability to remotely encrypt and wipe devices, install or uninstall enterprise apps, enforce usage and security policies, and other things. AirWatch did none of these things well, and some didn’t work at all due to platform limitations *AHEM*android*AHEM*. What we really needed was a way for employees to have access to our in-house developed applications. We already had some security control via our exchange server and it’s policies, and we could enforce other levels of security through the apps themselves (i.e., verifying that the device is encrypted, or has a passcode set).

Idea

I designed, proposed, and implemented a custom enterprise app catalog for my company to solve this problem. This app catalog would meet our greatest need by enabling users to download our in-house applications. It also provides us with some statistical information through basic analytics (a combination of Google Analytics and my own user-agent tracking). It also provides us with security of downloads, by authenticating users and download requests against active directory. It does not provide any remote installation/updating/uninstallation, nor any remote wiping capabilities. Some of the other features include:

  • Automatic PLIST generation for iOS over-the-air installation
  • Token based authentication for iOS over-the-air installation (which doesn’t support authentication cookies)
  • Role based app availability (beta testers, for example)
  • User-to-device tracking
  • A management UI for adding or editing users and roles
  • A management UI for adding and editing apps
  • Automatic “compatible app” views based on detection of device platform and version
  • Mobile optimization including standalone “web app” mode on iOS

Implementation

Frameworks

The app catalog I built (cleverly named “App Catalog”) is built with ASP.NET MVC 3, SQL Server, Entity Framework 4, and jQuery Mobile. Honestly, I used Entity Framework because I wanted to try it out. It ended up being extremely useful, combined with linq-to-entities. I can let my entity data model diagram speak for itself about my design.

image

Authentication and Downloading

Unauthenticated users are redirected to a login page, which accepts domain credentials and authenticates against active-directory using forms authentication. I leverage forms authentication cookies to allow users to remain signed in for 14 days.

To explain the authentication of downloads on iOS, I need to take a brief tangent here and explain how iOS OTA installation works. For more information, check out this blog post. To trigger an iOS OTA download, the link must be formatted with a special itms-services:// protocol link. When clicked, it first requests a plist file (which must be returned with the mimetype text/xml) that includes information like the app package name, version, icon url, package url, and a few other various items (this plist file can be generated by Xcode by selecting “distrubute for enterprise” when archiving an application). Then, it uses the package url to download and install the application package. All of this is invisible to the user except for the initial “foo.com would like to install ‘Bar.’ would you like to continue?” message (which occurs between the plist and package (ipa) downloads). Unfortunately, this double-bounce OTA installation does not support cookies, or at least it does not use Safari’s cookies.

Because of this, if the plist or ipa files are behind an authentication wall, the download will fail. In order to authenticate the downloads, when the link to the plist is output on the app catalog page, it is a link to an unsecured action on my controller, with the current authenticated user’s unique download token as a parameter. Then, when the action is requested, that token is authenticated and the plist file is generated from a template (this killed two birds with one stone – authenticating the plist request, while making the plist dynamically generated. Managing the plists manually is a pain, especially with the weird caching that the OTA service does). The proper icon link, file link, app name, and package name are filled in, and returned as a plist file. The package link works the same way – it’s a link to a file download action, with the token as a parameter. When the request comes to this action, the token is verified again, and the app package file is returned (with mimetype application/octet-stream).

It’s important that we go through these steps to authenticate the plist and ipa files, because our Apple Enterprise Developer license only allows employees of the company to download applications signed with our certificate. If our apps were to be vulnerable to anonymous downloads, our certificate and license could be revoked. Much of this is specific to the iOS OTA installation; for Android, the download link points to the app package download action which authenticates the token and returns the app package directly.

Site Behavior

When a user first arrives at the site, they see our company’s in-house apps that are compatible with their device. This compatibility check is done in the request. A request’s user agent is parsed for platform (Android, iOS, Windows) and version, and I use linq-to-entities to get all apps that match the platform and are compatible with their version or lower. Other views allow viewing all apps, or public apps (like recommended applications in public app stores). The apps are presented in a mobile-friendly jQuery Mobile listview with icons, titles, and descriptions, and two-tap downloads (one to confirm).

image

Because we can check for Windows, we also have some listings for common Windows applications that our teams use, and we have a special page for Windows software stored on our network, which simply displays the path to find it on the network, as opposed to a download or installation link.

iOS Supports standalone web applications and webclip (shortcut) icons, so all of these are configured. This provides a more streamlined feel to the website, almost as if it’s an installed application.

Management

I put quite a bit of effort into the management UI for the app catalog. Naturally, we needed the ability to quickly create and update applications in the catalog, without manually copying files and editing the database. There’s an editor form for uploading new icons and app package files, as well as changing any of the properties of the apps, including availability, version, name, description, and platform/platform compatibility. Likewise, there’s a user manager page, where users can be assigned to roles like “tester” or “admin.” All of these management options allow extremely low overhead for updating applications. We even have a module for our apps that checks the app catalog with it’s catalog Id for newer versions, so when a new version goes up, the user is notified right away.

Conclusion

I’m sure there are some features that I’ve missed, or features that are purposely missing that would be deal breakers for others who might need an app deployment solution. For now, it’s been working pretty well. I’ve only had one logged error in the last 3 months, and we’ve hit 200 downloads (300 if you include all of our testers’ downloads) of apps in our company, from the app catalog. I’ve very open to feedback and questions!

7 Weeks of Senior Design

Leave a reply

What is it?

This quarter is my Senior Design Capstone class. This means 11 weeks of intensive design of an application and education in project management aspects such as source control, issue tracking, requirements elicitation, analysis, and change control.

Sound boring? Well some of it is. I recognize how valuable every aspect of the project, is, but with only 11 weeks to develop an app (in languages and platforms that we don’t know, no less), it isn’t trivial to manage every aspect of the project.  When we started the class, we were given a proposal and an initial draft of the requirements. From there, we were to modify the requirements based on a Q&A session with the client, and develop the application according the the requirements. This also entailed developing sequence and use-case diagrams, as well as tracking meeting minutes, build history, and lots of other information.

An unforeseen (by the professor) part of the project was the server API. Because the requirements given by the client required the server to be designed and built by the students, we decided to standardize the interface between application and server, to allow a “plug-and-play” compatibility between one team’s application and another’s server. A representative from each time came together to develop the standardized server API which has changed a bit throughout the quarter.  The design of the server and application must comply as closely as possible with this design. So far, my team has noticed a few flaws with the API design, but we’re adhering as closely to it as possible.

So… what is it?

It’s a game. It simulates stock markets, and allows the users to view information about the markets and stocks, and to buy and sell stock using virtual money to compete against other users for a largest increase in net worth.

So what have we developed so far?

We have a decent looking application (screenshots below) and a functional server. The application has meaningful, but fake, data, such as stocks like Google, Apple, and Amazon, with prices that started from their actual prices. The fluctuations in prices have happened according to some price alteration functions on our server. Prices change every 5 minutes. Users can view, buy, and sell stock. Quantity of bought and sold stock alters the price accordingly.

Additionally, when a user first uses the app, a new profile can be created, and the user can login. Login persists on the device until the user logs out. There’s a neat scrolling area with collapsible exchanges containing stocks, and a swipe-able area that rotates between a trend chart, a details view, and a buy/sell hub.

Another product of our work so far is an administrator page, where an admin can login, create/edit/delete stocks/exchanges and change some other settings as well. This was done using jQuery, mostly.

So what’s next?

It’s been incredibly fun to program, and I’ve made a few good friends. Many thanks to my teammates Zack, Darren, and Brian. We’re developing the app under the MIT license, which means that we have full freedom to continue with our work, even after we hand over source code to the client at the end of the quarter. We (at least a few of us) intend to continue working and hopefully putting the app in the Marketplace.

There are a lot of optimizations and refactoring that we want to do, when we have more time (Again, the 11 week limit is severely limiting us. Next year, after the University transitions to semesters, this class will last an entire year). We want to multithread some parts of the application for increased speed, optimize and minimize the server calls, optimize sql queries, divide up php and mysql (there’s a lot of raw sql in the php – oh no!), and rewrite a lot of “hacky” code.

So you want some screenshots?

Well enough is enough. If you’ve made it this far, I applaud you, and thank you, for reading through. Here are some screenshots.

device-2011-10-19-234355device-2011-10-20-113735device-2011-10-20-222846device-2011-10-20-224634g66UZ

Programming the Windows 7 Taskbar in WPF

Leave a reply

This post is dedicated to features of the Windows 7 Taskbar in Windows Presentation Foundation (WPF) applications. Everything that I will show can be done in the code behind, but it can also be done within the xaml. Because the project in which I implemented these changes is written in the Model-View-Viewmodel pattern (MVVM), I have taken the xaml approach.

Some prerequisites and disclaimers:

I have not tested this code on any system other than Windows 7 yet, and my best guess is that some system requirement validation would need to be performed to prevent crashing.

This post assumes basic knowledge of WPF, and some knowledge of MVVM (maybe in the future I’ll include more info on these.) Some tools used are:

  1. Bindings
  2. Commands
  3. Value Converters

The Gist:

If you already know about what these features are, and just want to see how to implement them, skip this section.

I’ve used some of the special features of the Win7 taskbar in other applications (iTunes, Skype, Visual Studio, etc) and If you’ve used Windows 7, you probably have too. When using Skype recently, I became curious as how to implement some of these into my application. Some of these features are:

  • Thumbnail buttons
  • Progress bars
  • Jump Lists (not detailed here – see links below for more info)

Here’s an couple examples of these features in action (please excuse the pictures – my screenshot utilities close the thumbnail when activated):

Photo Jul 15, 4 36 12 PMPhoto Jul 15, 4 36 01 PM

As you can see, iTunes has buttons on the floating thumbnail to control the play, and skype has buttons to change your status. If you’ve used IE, Firefox, or Chrome to download a file, you’ve seen the icon progress bar, which fills the icon green as the download completes.

The Code

I have an existing WPF project written in MVVM pattern and using C#. My project generates random playlists through iTunes using the iTunes SDK, shows currently playing information, and provides controls to change/pause/skip songs in iTunes.

This means I have already implemented a progress bar, and controls in my Main Window. So how easy would it be, to extend these to the Taskbar? Well, it’s fairly easy.

If you want to do these things in your code behind, you’ll need to add a reference to the Windows API codepack. For xaml, you’re good to go.

Everything you’ll want to do will be within the Window.TaskbarItemInfo element. Within this element, you can set the Description (tooltip that shows when hovering), the ProgressState (Color of the progress bar), ProgressValue (a value from 0 to 1 representing percent complete), and ThumbButtonsInfo’s.

The example below shows a Window.TaskbarItemInfo element containing examples of each.

image

Progress Bar

Because I have already implemented a progress bar, and bound the Max and Value properties to properties in my viewmodel, I wanted to bind the same properties to the progress bar for the taskbar icon. For this, I set the value of the TaskbarItemInfo.ProgressValue element to a MultiBinding.

This multibinding works similar to regular bindings, but takes both values. The two bindings within represent the value of the progress bar, and the max value of the progress bar (in my app’s case, it is not constant) respectively.

The first binding in the multi binding is actually to a list, so its converter converts a list into an integer, by getting the count. The multi binding converter simply divides the two bound values, to provide the fraction (percentage) value required by the progress bar.

Note: If using the progress bar, remember to set the ProgressState. The default state is None. I’ve set mine to Normal, which renders a standard green progress bar.

The Thumb Buttons

The next element to create is TaskbarItemInfo.ThumbButtonInfos, with one child, ThumButtonInfoCollection, which will have multiple ThumbButtonInfo children, corresponding to buttons. I have not tested for a limit to the number of buttons that can be added.

The vital properties to set for each ThumbButtonInfo are: ImageSource and (in my case, with MVVM) Command. ImageSource is set to an ico file, and Command is bound to a command in my viewmodel. Because I have already implemented commands for my control buttons on my main window, I can recycle by binding these buttons to the same commands.

As you can see in the code, I have provided files for the ImageSource on two of my ThumbButtonInfo elements, but for the third (the middle, rather) I have bound the property to a property in my view model, and implemented a converter which will change the ico file depending on the boolean value. This allows the ico file to change depending on whether the music is playing or paused, to show the corresponding button.

So there you have it. If you have any questions, or would be interested in seeing how my Bindings or Converters work, I’d be happy to update with some of that information. Otherwise, I hope you enjoyed, and Happy Coding!

Links:

MSDN
- MS Dev (doc x) (docx)

My Source Code (project)
- Relevant XAML

A New Project

Leave a reply

I’ve come up with a new idea for a project

Main idea – A touch screen menu and ordering system for customers tied together with a touch screen order queue processing system for employees. Integration with user data (ID Card?), and payment system (credit card/gift card) is a goal.

Target users – Small businesses (restaurants), like coffee and sandwich shops.

Initial stack plan – C#, WPF, .NET 4.0, SQL Server, Windows 7 Tablets (Asus Slate?)

Foreseeable roadblocks – Costs of testing machines/equipment. I’d have to purchase at least one Windows 7 tablet, which will most likely run me $400-$1000 each. Additionally, for the ID card idea, and credit card integration, I’d need to purchase ID card readers/writers, and some blank cards. Initially, this has been priced as $500-$800. Another possible roadblock is integrating with existing credit card payment system. I have no idea how credit cards are processed, so I’ll need to do research here. Integrating this may be different for each customer, unless I can develop and out-of-box solution.

Possible project names - Order Pool, Ordering Pool, Coffee Pot, OrderEasy, YouOrder (yes, I suck at naming things)

Target start – Begin initial research, planning during spring quarter (April – June). Begin development by June. Hope to have a touch screen machine for testing by end of July.

Similar systems – Sheetz has a system for ordering, which creates a queue (backend?), but apparently is not integrated with payment system. I have not used this system.

What it doesn’t do - replace the cashier. The customers still have the option of ordering and paying with the cashier. Additionally, they would have the option of ordering with the touch screen system, and heading over to the counter to pay with cash. The system would just be a novel way of interacting with the menu and placing orders for customers, which could help shorten lines, expedite the ordering process, and entertain customers.

Another thing to note is is that it is a future goal (not the first version) to add online order support, to allow order placement from phones/personal computers.

I’m very open to feedback, ideas, criticism at this point. Also welcome are those interested in collaborating.