Logo

Hendrick Motorsports, which fields several prominent NASCAR teams, worked with Microsoft to expand the capabilities of its race crew chiefs with a cross-platform mobile app that can help them keep track of crucial race details.

Key technologies used

Core team

  • Shahed Chowdhuri – Senior Technical Evangelist, Microsoft
  • Dave Voyles – Senior Technical Evangelist, Microsoft
  • Blain Barton – Senior Technical Evangelist, Microsoft
  • Dave Hood – Data Scientist, Hendrick Motorsports


Cars


Customer profile

Since 1984, Hendrick Motorsports (HMS) has earned a record 11 car owner championships in NASCAR’s premier division, the Sprint Cup Series. The organization fields four full-time Chevrolet teams on the Sprint Cup circuit with drivers Jimmie Johnson, Chase Elliott, Dale Earnhardt Jr., and Kasey Kahne.

Problem statement

Crew chiefs for Jimmie Johnson 48 and Dale Earnhardt Jr. 88 needed better communication and organization on the production team so that they could more efficiently assemble the cars and correct issues between races. The crew chiefs envision an app that would track issues and progress, enabling the entire team to see the status of every detail for every car at any time.

A mobile app would be useful to quickly provide communication and feedback every week with physical attributes and goods and a go-to tool for every car, every day in the shop. The Hendrick team members possess both iOS and Android phones, while they run Windows 10 on their work computers. This creates a need for a cross-platform app.

Currently, an existing web app (Shop Insights) uses the following technologies and platforms:

  • Web Framework: ASP.NET 5 RC1
  • Authentication: Active Directory
  • Client-side: JavaScript, including jQuery, C3.js
  • Database: SQL Server
  • Cloud: Microsoft Azure

This web app follows over 1,100 tasks to complete a car as well as information for the crew chief from past race events so they can build that same car and add in what they learned from the last race. There may be six months between races, so a crew chief might not be notified of important feedback from one race to the next until the week of the next race. HMS wants to be able to bring the app up for a past Sonoma Road Race and know what happened during the race to that car and what they might add, such as a certain style of brakes.

Intro


Areas of improvement

The form for post-race feedback can be used by a crew chief and team to enter 1,100 tasks to be completed for a car from assembly to becoming race-ready. However, it is a very cumbersome web-based form that could use some improvement. As race season approaches every September, it becomes even more important to have a fluid user interface that is easy to use.

Hotlist


Solutions, steps, and delivery

Based on what we learned about Hendrick’s goals and objectives, we agreed that building a modern, cross-platform application in Xamarin and Azure would enable the team to keep track of crucial race details and ensure that refinements and repairs are completed on time.

The mobile app won’t need to enter a new vehicle with all 1,100 data points, but just update an existing vehicle entry with some post-race feedback: the car number, photo, and feedback text. Initially, the app should be able to submit a “Hot List Post,” the simplest type of feedback submission that would be useful to the crew chiefs.

Suggestions for improvement:

  1. Building a better UI to alleviate the headaches of entering an extensive web-based form and reduce human error.
  2. Introducing new features typically available in popular smartphone apps: photo capture and upload, notifications, and portability. This would also allow more people to use the app, whether they are at their desk or on the shop floor.

Why Xamarin?

Consider the following:

  • Both iPhones and Android phones are used at Hendrick Motorsports.
  • The current web app is too complex to be mobile-friendly.
  • A mobile app would be useful to the crew chiefs to ease the entry and retrieval of important information about cars being prepared for a race.
  • The C# programming language is already in use by some developers at HMS.

Xamarin (recently acquired by Microsoft) can be used to create a cross-platform mobile app built in a single development environment (Visual Studio) with a single programming language (C#). There are a couple of different options for creating Xamarin apps, but the newer Xamarin.Forms is a good candidate for the functionality that Hendrick Motorsports needs because it enables their crew chiefs to make important car-related information more readily available to their team members.

Xamarin.Forms is best for:

  • Apps that require little platform-specific functionality.
  • Apps where code sharing is more important than platform-specific UI.
  • Developers comfortable with XAML.
  • Source: Xamarin.Forms

Given the needs of the mobile application, Xamarin.Forms is the best choice for the reasons mentioned earlier. Developers at HMS are already familiar with the Microsoft stack of technologies, such as C# and XAML. This makes it easier for their developers to continue development of the application beyond the initial release. Furthermore, a single codebase for multiple platforms makes it more manageable for the development team to maintain and improve the app.

Architecture diagram

Architecture

Assumptions and exclusions

Following are some additional suggestions for improvement that are out of scope during the initial release:

  • Integrate mobile app into environment with authentication.
  • Add real-time functionality—for example, for car placement in web UI (with SignalR).
  • Add metrics dashboard so crew chiefs can quickly see overall progress (use Power BI).
  • Add automation with IoT support—for example, for cars moving in/out of slots.
  • Link hot list items and actual photos in the mobile application.
  • Integrate the mobile client with Active Directory.
  • Push notifications to the mobile client.
  • Complete layout change of the mobile client to make the application scalable.
  • Integrate mobile backend into existing SQL Database for the Shop Insights web application.
  • Integrate offline use for the mobile client.
  • Unit tests for both mobile client and backend Azure mobile app.
  • Implement relationships in the backend database.

iOS Android



iOS UWP


Code snippets

Code snippet: single XAML page used for cross-platform app

Cross Platform


Code snippet: send mobile app data to Azure via mobile app service

Save Task


Code snippet: send email notification to predefined recipients

Send grid


Code snippet: save captured image to Azure Blob storage

Create and upload


Conclusion

As a result of this project, both Hendrick Motorsports and Microsoft benefited from the partnership and learned some lessons along the way. HMS now has a proof-of-concept of a cross-platform mobile app that can be expanded with more features and eventually deployed into production. Microsoft technical evangelists have gained hands-on experience in building a Xamarin mobile app with Azure support for a real-world scenario, from which the lessons can be shared both internally and externally.

General lessons

Most of the insights gained from the partnership resulted from troubleshooting unexpected issues that arose during development.

  • iOS Emulator: This requires connecting a Windows development environment to a Mac build agent. This link may become disconnected during development. Toggling the Mac’s Wi-Fi connection and firewall setting is a workaround that enabled the connection to work again.
  • Android Emulator: This requires the proper API Level to be set up. However, the setup process may not install the necessary version, so a Xamarin project may not automatically work in a new dev environment. Manually installing a newer API Level and Device Profile allows the Android Emulator to load properly. Also, it is important to change the project’s setting to support API 19 as the minimum for more reach among users.
  • Windows UWP: The project may not compile in 64-bit mode (x64) even on a 64-bit developer machine. Switching it to 32-bit (x86) allowed the project to compile and run.
  • Azure support: There are multiple Azure packages available via NuGet. These have to be manually added to the main Xamarin.Forms project, as well as individual platform-specific projects. Adding the incorrect Azure package may result in app crashes for one or more platforms without any specific error messages.
  • Static variables: Organizing the C# classes in the code resulted in unexplained crashes in the iOS app, which was not easily resolvable. The workaround was to move classes from specific subfolders to the root folder, even though the code worked without errors on other platforms.
  • Hardware features: After going through at least seven different code samples for camera features, the camera feature did not work through several iterations. In the end, we used the Xamarin Media plugin that allowed us to enable the camera feature for all platforms, through trial and error.
  • Email notifications: We chose SendGrid as our third-party solution for sending email notifications via the Azure mobile app service. However, following the instructions in the official documentation did not produce working code that would compile with the latest API. By trial and error, we were able to write new code that would send emails correctly.

All of the above lessons can be applied or reused in other environments or for other customers. The lessons learned can also be used to create a starter kit for anyone to quickly create a cross-platform mobile app with Xamarin.Forms.

Video walkthrough

Additional resources