To extend their current web-based modular FinTech solution, solution provider Finaeos adopted Xamarin.Forms to maximize C# code sharing based on the .NET platform, avoiding the need to build multiple native versions based on incompatible programming languages, SDKs, and skill sets. The mobile app was connected to the current Finaeos back end, which is built in ASP.NET, and the team also integrated HockeyApp in their solution to benefit from enhanced user analytics and simplified mobile deployment to Finaeos customers.

The core technical team

  • Tim Vasko (@Finaeos) – CEO, Finaeos
  • Peter Eng – Software Engineer, Finaeos
  • Nick Landry (@ActiveNick) – Senior Technical Evangelist, Microsoft
  • James Sturtevant (@aspenwilder) – Senior Technical Evangelist, Microsoft
  • Dave Voyles (@davevoyles) – Senior Technical Evangelist, Microsoft

Finaeos logo

Customer profile

Finaeos is a software solution provider for the financial services industry that delivers a rapid-deployment platform for FinTech adoption by enterprise and developers of solutions.

Finaeos Core is deployed on the Microsoft Azure cloud platform. The Finaeos platform as a service (PaaS) solution integrates all the required elements for emerging FinTech use cases—the innovators (from startups to enterprise investment banking and commercial banks) can build, host, and deliver modular user-interface nodes on their FinTech market portals.

Finaeos has redefined the business of providing solutions to easily curate FinTech solutions through

  • The Finaeos Core APIs available on Azure
  • Extensions through smart contracts on Ethereum blockchain
  • Dynamic user-interface models (now supported by Xamarin)
  • Onboarding, private IM, transaction processing, contact management, and e-commerce
  • Process flow chain compliance, offering a 100-percent audit trail on the Finaeos Core ledger

FinTech solutions call the Finaeos Core for connections to any infrastructure elements connected in the FinTech ecosystem, APIs, or libraries, enabling a rapid plug-and-play deployment across the stack for any FinTech solution to combine in the curated process, defined by user requirements, through Finaeos FinTech Node connections.

Problem statement

The Finaeos FinTech Nodes allow Finaeos to deliver a FinTech “app store” where (using a modular UI approach) developers can design and present nodes to customers. The nodes are self-contained user-interface widgets that carry out a task, look up and process data, capture user data via social or other feeds, process required data based on rules, and centralize node interaction with others, or between FinTech functions, based on activities tied to process flow chains.

The Finaeos Core app is a web-based solution built in C# using ASP.NET MVC. Finaeos Core is fully responsive in the web browser, so Finaeos customers can create custom node layouts for their users.

Customers were demanding a mobile solution, so Finaeos built a native iOS version; they used Xcode, Swift, and the native iOS SDK. They discovered that their implementation has limited capabilities; the UI is non-responsive because the nodes are “baked” in the app. This constrained the Finaeos trademark configurability. And after all their work, iOS was the only supported platform.

Finaeos had planned to implement an Android solution, but this was delayed because different programming skill sets are required for each mobile stack. Multiple, unique skill sets limit development agility, drive software engineering costs significantly higher, complicate the development lifecycle, and hinder future maintainability. They also limit developer knowledge sets of the Finaeos Core application being easily extended to mobile. This results in multiple groups with different skill sets needing to work together and explain their work each time a mobile customer app is created. This is a tedious process, so Finaeos sought a better approach for cross-platform apps.

“We were faced with a complex set of web services that provide dynamic UI experiences but that were not enabled in the iOS app we had created. Simply redesigning the UI experience on iOS would not solve the cross-platform issue, nor would it enable our team to approach their work simultaneously between web and mobile. Similarly, we wanted other developers who want to leverage our platform SDK and API services to be able to develop on our platform for both web and mobile using the same skills. Microsoft offered to help with this approach. We had a great experience at the Microsoft hackfest.” —Tim Vasko, Founder and CEO, Chief Technical Architect

Photo of Tim Vasko and Dave Voyles during hackfest

Solution overview

The goal of this project—dubbed 1to1Core—was to draw inspiration from the Finaeos Core web application and create a similar mobile experience using iOS and Android tablets and smartphones. The mobile apps needed to leverage the same UI themes and nodes as the web application and present them in a cross-platform mobile container. User mobile-app configuration is done on the website where Finaeos configures the final customer theme and layouts.

The following is a sample of nodes available in the web edition of Finaeos Core today:

  • Customer Relationship Management (CRM3)
  • Smart Calendar
  • Smart Contract
  • BlockCerts
  • Activity Zone
  • ToDo Tracker
  • Smart Notes
  • Smart File Storage
  • Private Instant Messaging (IM)
  • Response Tracker
  • Virtual Meeting
  • FinTech Curation App/API Store
  • And many more; see Finaeos Solutions for more details

The Finaeos team got together with Microsoft Developer Experience (DX) experts in late 2016 to conduct a private “hackfest” to build the foundation for this new Finaeos mobile app. Finaeos decided to extend their current web-based modular FinTech solution to mobile devices using the Xamarin platform–more specifically, Xamarin.Forms–and, thanks to C# code sharing based on the .NET platform, they had now an accelerated development cycle. With Xamarin.Forms, Finaeos could easily support Windows 10 computers, tablets, and smartphones in addition to iOS and Android. Embracing Xamarin meant that Finaeos cancelled their plans to build multiple native versions for iOS and Android based on incompatible programming languages, SDKs, and skill sets.

The mobile app relies on Finaeos Core to build the mobile UI experience. Using shared code across iOS, Android, and Windows, the 1to1Core app makes API calls to the current web services hosted on Azure to gather permissions and node layouts via XML responses. After a user’s configuration data is downloaded, the app dynamically loads views based on the XML response to provide a personalized experience. The first nodes that were implemented in the mobile app included Smart Notes and Smart File Storage.

The team also integrated HockeyApp in the mobile solution. HockeyApp provides Finaeos customers with enhanced user analytics, simplified device provisioning, and mobile deployment.

The following diagram shows a high-level view of the solution architecture.

Diagram of Finaeos 1to1Core architecture

This mobile initiative is critical to the Finaeos mission. It will positively impact several customers:

  • Investmentbank.com – a merger-and-acquisition (M&A) portal seeking to disrupt and streamline traditional M&A
  • Teck Capital – a SaaS lending company for innovative debt and working capital solutions for emerging technology, IoT, and technology innovation firms
  • EpigeneticsRX – a genetics e-health company, employing smart contracts and blockchain for distribution and payment of physician care and pharmaceuticals
  • Forentis Fund – a special-purpose private equity fund, investing in biotech and linking to institutional and family office investors
  • MIT FinTech – a capstone project currently underway at MIT that is based on the Finaeos Core and which will release a new RoboAdvisory and wealth-advisory client-engagement model that uses mobile devices.

Finaeos has a growing meetup group of 300 mobile-app developers and reaches a group of more than 1000 developers through broader affiliations like MIT.

“We had been contemplating using Xamarin for our mobile application due to the logic of the tools being in line with the skill sets of our core development team. It is increasingly critical for us to provide the native cross-platform capability of Xamarin across .NET, iOS, and Android. It has proven to be a great next step, as our core team can now enable services in both our solutions and the SDKs for other enterprise mobile app and web application developers on the Finaeos FinTech stack.” —Tim Vasko, Founder and CEO, Chief Technical Architect

Photo of Nick Landry, Tim Vasko, and Peter Eng whiteboarding during hackfest

Solution, steps, and delivery

To better understand how the Finaeos 1to1Core application was designed and built, here are the solution steps:

  1. Create a cross-platform Xamarin.Forms app with a dynamic modular interface
  2. Connect the Xamarin app to the Finaeos Core back-end API in Azure
  3. Capture mobile app usage metrics via HockeyApp integration
  4. Mobile DevOps: Set up deployment and provisioning via HockeyApp

Create a cross-platform Xamarin.Forms app with a dynamic modular interface

The 1to1Core mobile app is a cross-platform Xamarin.Forms solution built in C#. It natively runs on iOS, Android, and Windows 10. The 1to1Core UI is optimized for smartphones, phablets, and small tablets in portrait mode; with Windows 10 support (via the Universal Windows Platform [UWP] codebase), 1to1Core will provide a unified experience across Windows 10 computers and devices, including Surface tablets and Windows 10 Mobile phones.

Xamarin.Forms allowed the team to share more than 95 percent of the code while still providing a clean and dynamic user interface composed of modular nodes.

All common code was structured in a Shared Project to facilitate UI format tuning across various platforms via conditional compilation directives (#if … #endif). This Shared Project includes Views, ViewModels, Models, Services, Helpers, and Extensions.

Screen shot of Finaeos dynamic home screen

The Finaeos Core solution has a configurable UI based on widgets (nodes) in which each user gets a personalized view based on his or her role and needs. 1to1Core Mobile needed to follow this tenet, so the UI design had to reflect it. Xamarin.Forms uses XAML as the markup language for UI design, and a user interface is defined by using either static XAML code or C# code-behind to dynamically build the UI at run time. It’s also possible to combine the static XAML code and C# code-behind approaches, and that’s what we did in 1to1Core.

The home page is where users land after logging in to the app. We wanted a grid of buttons to load dynamically based on the user’s node configuration. The following XAML code shows how the home page uses a Grid layout with a definition of three equally spaced rows and columns on screen. The Grid is defined as a static XAML element, but it is empty because we’ll use C# code to dynamically load it with the right buttons.

<StackLayout  Padding="12">
  <!-- The source for this image is set in code since it is dynamic -->
  <Image x:Name="imgLogo" Margin="12" />
  <!-- Widget Grid that will be loaded dynamically based on the user config
        downloaded from the cloud. -->
  <Grid x:Name="WidgetGrid" 
        VerticalOptions="FillAndExpand">
    <Grid.RowDefinitions>
      <RowDefinition Height="1*" />
      <RowDefinition Height="1*" />
      <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="1*"/>
      <ColumnDefinition Width="1*"/>
      <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
      
    <!-- See code-behind for the dynamic loading of widgets-->
  </Grid>
</StackLayout>

The home page Grid content is built in the C# code-behind. We first step through the logged-in user’s home page XML configuration to extract the home screen widgets (or nodes). How this XML configuration is downloaded from the Finaeos Core web API is covered in the next section.

The following C# code shows how we iterate through all the home page widgets—known as “Tabs” in the Web view—and we perform the following for each node:

  1. Extract the node name to be used as a button label
  2. Create a new Xamarin.Forms Button object
  3. Tweak the value of FontSize on the Button object based on the current device platform. Xamarin.Forms lets us use conditional compilation directives because we are using a Shared Project. By using Device.GetNamedSize(), we can tap into predefined font sizes for that platform instead of using hardcoded values.
  4. Set the BackgroundColor property on the Button to a consistent color across all platforms because styling may vary. For example, on iOS, all UIButton objects appear borderless with a transparent background, looking more like a web hyperlink than a button. This allows Finaeos to provide consistent branding across platforms.
  5. Set the Button label via the Text property.
  6. Attach an event handler to the Button based on the widget type. The options are limited because Finaeos is in the process of writing the implementation for their many node types. The Files node was used in this sample during the hackfest.
  7. Add the new Button object to the Children collection on the home page Grid.
private void InitializeWidgetGrid()
{
    // Extract the Home Page Tabs from the user configuration XML which
    // was downloaded from the Web API
    uiTabsTabTabsTab[] homePageTabs = 
                    App.CurrentConfigurationModel.tabs.tab[0]?.tabs.tab;

    int WidgetCount = homePageTabs.Length; // This will come from the server
    if (WidgetCount > 9)
    {
        WidgetCount = 9;
    }

    int currentWidget = 0;
    string currentLabel = string.Empty;

    Button btnWidget;
    // Start in top left corner
    int row = 0, col = 0;
    for (int i = 0; i < WidgetCount; i++)
    {
        // Use the widget name from the XML config as a label for our button
        currentLabel = 
            homePageTabs[currentWidget]?.name ?? homePageTabs[currentWidget]?.id;
        // Create a new button to be added to the home page grid
        btnWidget = new Button();

        //btnWidget.Image = CrossHelper.GetOSFullImagePath("notes.png");
#if __ANDROID__
        btnWidget.FontSize = Device.GetNamedSize(NamedSize.Micro, 
                                                 typeof(Button));
#else
        btnWidget.FontSize = Device.GetNamedSize(NamedSize.Small, 
                                                 typeof(Button));
#endif        
        btnWidget.BackgroundColor = Color.FromHex("F2F2F2");  // Very pale gray

        btnWidget.Text = currentLabel;
        if (currentLabel.ToLower() == "files")
        {
            btnWidget.Clicked += GoToDocumentPage;
        }
        //TODO: wire up handlers for other types.

        WidgetGrid.Children.Add(btnWidget, col, row);
        col++;

        // If column contains more than 3 objects, create a new row
        if (col > 2)
        {
            col = 0;
            row++;
        }
        currentWidget++;
    }
}

The rest of the main application user interface is based on a navigation model with a “hamburger” menu—a button with three parallel horizontal lines (displayed as ☰). Selecting this button displays a menu (sliding out or popping up), which distinguishes it from a menu bar, which is always on display.

The Android project uses the FormsAppCompatActivity class and features additional Nuget packages to provide support for Material Design in KitKat (Android 4.4) devices.

Photo of Nick Landry and Tim Vasko discussing dev strategy during hackfest

Connect the Xamarin app to the Finaeos Core back-end API in Azure

To fully integrate into the Finaeos Core solution, the 1to1Core app accesses the existing ASP.NET custom API. The Finaeos Core web API is hosted in Azure App Service and exchanges XML documents over HTTP to

  • Authenticate users
  • Retrieve UI node personalization details for specific users
  • Perform specific data-related tasks in individual nodes

Modern mobile applications access their back end via a REST API and exchange JSON documents. Authentication is typically done using OAuth to log in users via Microsoft Account, Google ID, Active Directory, and other providers. Finaeos didn’t adopt all those methods because they want to use their existing web system. Because Finaeos Core has an existing back end, and Finaeos wanted to reuse as much of the back end as possible, we preserved two key mobile-app requirements:

  • Logging in users via the existing Finaeos Core custom web authentication scheme
  • Preserving the XML configuration format to customize the mobile user experience

Finaeos is considering new authentication schemes based on OAuth and building a new JSON-based REST API for mobile users, but for business agility and to get version 1 of 1to1Core Mobile to market as quickly as possible, we reused as much of the current infrastructure as possible.

The current login process uses a RestClient object from RestSharp, a simple REST and HTTP API client for .NET. RestSharp makes it easy to build HTTP requests, including custom heads and parameters. The username and password are embedded in the request body and secured over an HTTPS connection. When the request is executed, an authentication token is returned to the client.

private void Login(string username, string password)
{
    var client = new RestClient(CoreAPIUrlSetting); 
                                                              
    var request = new 
        RestRequest("/auth/Token", Method.POST); //(requestUrl, Method.POST);
    request.AddHeader("Content-Type", "application/json");

    request.AddParameter("username", username, ParameterType.RequestBody);
    request.AddParameter("password", password, ParameterType.RequestBody);

    var response = client.Execute<LoginModel>(request);

    Console.WriteLine($"user was authenticated {response.Data.authenticated}");
    this.authToken = response.Data.access_token;
}

In the next step, we authorize the user and retrieve the XML configuration for their role. This configuration data is parsed with an XmlSerializer and contains the user’s home page nodes that were extracted and displayed dynamically in the preceding section.

public RoleConfigurationModel GetRole()
{
    var client = new RestClient(CoreAPIUrlSetting);

    var request = new RestRequest("api/role", Method.GET);
    request.AddHeader("Content-Type", "application/json");

    request.AddHeader("Authorization", $"Bearer {this.authToken}");

    var response = client.Execute<RoleModel>(request);

    Console.WriteLine($"user was authenticated {response.Data.FileName}");

    var roleConfigurationModel = RoleSerializer.Serialize(response.Data.Config);

    return roleConfigurationModel;
}

Screen shot of Finaeos 1to1Core login screen

Capture mobile app usage metrics via HockeyApp integration

HockeyApp is a Mobile DevOps solution for iOS, Android, OSX, and Windows apps to provide beta distribution, crash reporting, user metrics, feedback, and powerful workflow integrations. The Finaeos team used HockeyApp to capture app usage metrics for all three mobile clients. Finaeos can then identify patterns and narrow down potential issues in critical code paths during development.

To review the portal crash reports, we integrated HockeyApp in the 1to1Core app. To get better insights into how testers and Finaeos customers use the app, we used a common interface to access the Xamarin.Forms Dependency Service to examine the shared client code metrics collection. Each client implemented the IMetricsManagerService interface (shown in the following code) to wrap the platform-specific implementation of the HockeyApp MetricsManager class. We easily inserted calls to track events from the shared cross-platform code. This technique was used to access the HockeyApp SDKs because no common Nuget package existed when this app was built.

// Common interface for the HockeyApp MetricsManager in the Shared Project
public interface IMetricsManagerService
{
    void TrackEvent(string eventName);
}

// Xamarin.Android-specific implementation of the HockeyApp MetricsManager
using HockeyApp;
[assembly: Xamarin.Forms.Dependency(typeof(_1to1Core.Droid.MetricsManagerService))]
namespace _1to1Core.Droid
{
    class MetricsManagerService : IMetricsManagerService
    {
        public void TrackEvent(string eventName)
        {
            MetricsManager.TrackEvent(eventName);
        }
    }
}

// HockeyApp initialization in the Android Main Activity OnCreate() event
CrashManager.Register(this, Settings.HockeyAppId);
MetricsManager.Register(Application, Settings.HockeyAppId);
// Required to initiate HockeyApp metrics reporting on Android
MetricsManager.EnableUserMetrics(); 

// Xamarin.iOS-specific implementation of the HockeyApp MetricsManager
using HockeyApp;
[assembly: Xamarin.Forms.Dependency(typeof(_1to1Core.iOS.MetricsManagerService))]
namespace _1to1Core.iOS
{
    class MetricsManagerService : IMetricsManagerService
    {
        public void TrackEvent(string eventName)
        {
            MetricsManager.TrackEvent(eventName);
        }
    }
}

// HockeyApp initialization in the iOS AppDelegate FinishedLaunching() event
var manager = BITHockeyManager.SharedHockeyManager;
manager.Configure(Settings.HockeyAppId);
manager.StartManager();
manager.Authenticator.AuthenticateInstallation();

// UWP-specific implementation of the HockeyApp MetricsManager
using Microsoft.HockeyApp;
[assembly: Xamarin.Forms.Dependency(typeof(_1to1Core.UWP.MetricsManagerService))]
namespace _1to1Core.UWP
{
    class MetricsManagerService : IMetricsManagerService
    {
        public void TrackEvent(string eventName)
        {
            HockeyClient.Current.TrackEvent(eventName);
        }
    }
}

// HockeyApp initialization in the UWP App.xaml.cs App() constructor
Microsoft.HockeyApp.HockeyClient.Current.Configure(Settings.HockeyAppId);

The HockeyApp portal lets Finaeos team members and administrators review events and crash reports. The portal information provides critical insights during development, and valuable intelligence on how the Finaeos pilot users work with the app before going to production. Finaeos will continue to gather these metrics after the app releases to a customer. Using the metrics, Finaeos will be able to tell which modules are more popular and how the users navigate them. They can discover potential problems and preemptively deal with them.

Photo of Dave Voyles and Peter Eng during hackfest

Mobile DevOps: Set up deployment and provisioning via HockeyApp

Testing is a critical step in all software development projects, but especially so in cross-platform mobile projects where countless numbers of devices, brands, models, and form factors can be used. To test the application across multiple platforms, the Finaeos team uses a combination of emulators and physical devices for manual UI testing. The emulators include a variety of available configurations of iOS Simulator, Visual Studio Emulator for Android, Android Virtual Devices (AVD) by Google, Windows 10 Mobile emulator, and native Windows 10 execution.

For testing on physical devices, Finaeos catalogues all the iOS, Android, and Windows 10 devices used by the team and customer testers, and captures the device brand, model/name, screen resolution, RAM, and OS version. Finaeos can match their device to the emulator testing plan (based on the known devices); this allows them to identify the configurations that were well tested, and help the team run additional tests on various emulator configurations to fill the gaps.

For OS versions, the goal was to limit support to Windows 10, version 1511 (build 10586); iOS 7; and Android 4.4 (KitKat) or later versions, but not to include any beta versions. Although Xamarin.Forms supports iOS 6, we chose to cut off support at iOS 7 given the drastic user interface changes made by Apple with iOS 7 when skeuomorphism was dropped in favor of a flatter design language. Android was cut off at version 4.4 to limit compatibility issues on older Jelly Bean (Android 4.1 to 4.3) devices. This still provides potential compatibility with more than 80 percent of all Android devices in use today.

HockeyApp gathers analytics from the mobile clients during development, internal unit tests, and customer testing, both in beta and eventually in production too. This helps identify potential crashes and usability issues as well as untested areas to maximize stability for a successful customer deployment. But HockeyApp also has a critical deployment component. Because 1to1Core is an “enterprise app” (meaning that it’s not meant to be deployed to any of the public mobile-app stores like Apple App Store, Google Play Store, or Windows Store), Finaeos needs an easy way to provision their customer devices with the various 1to1Core iOS, Android, and Windows app packages for their respective devices.

HockeyApp empowers the Finaeos team to upload beta versions of 1to1Core to HockeyApp so testers can install them using a self-service approach. HockeyApp serves as an “in-house” app store where administrators can invite testers through the easy-to-use dashboard. Every time a new build is uploaded to HockeyApp for iOS, Android, or Windows, HockeyApp can notify current users and testers so they can immediately install the new version and begin testing. The notifications pop up on their phones automatically; the users are also notified to download the new update whenever they try to launch the app from the HockeyApp interface on their devices.

Screen shot of HockeyApp dashboard

Conclusion

The 1to1Core mobile app meets the goal of extending the Finaeos Core solution to mobile users. It extends the app beyond iOS to Android and Windows 10 users. The Xamarin Platform foundation built in this hackfest now allows the Finaeos development team to iterate faster as they bring new features and develop new UI nodes without requiring custom platform-specific code.

This project also addresses the limitations of the original native iOS application that relied on a “baked” non-configurable UI. The technique demonstrated earlier lets any Xamarin developer combine static XAML markup with dynamic UI elements injected in C# code-behind to create fully configurable user interfaces at run time.

Moving forward, the Finaeos team is actively working on building more node implementations in mobile form, extending the functionality to support more theming features and porting more functionality from Finaeos Core to the mobile app. On the DevOps side, Finaeos is extending the HockeyApp event logging by adding calls to each new node, and they are exploring the use of Xamarin Test Cloud to facilitate application testing on a wide range of mobile devices.

“We discovered the Xamarin solution’s power and architecture to be ideal for the Fineaos 1to1Core platform. Because we operate in both the FinTech and eHealth sectors, the need to provide developers a mobile set of services and tools they can use to integrate into enterprise systems, and the logical structure of Xamarin that we learned during the hackfest with Microsoft enabled us to understand and clearly define how we’d roll out our platform SDK and APIs to a larger audience. We expect our full solution set to be available to enterprise mobile app and web app developers on Microsoft Azure API services and Xamarin for FinTech in summer 2017. The dedicated Microsoft engineering team paved the way for our architecture and approach.”

Photo of Finaeos and Microsoft dev teams during hackfest

Additional resources