User Experience

The attendees at Microsoft Tech Days can ask for help by pressing one of four physical buttons - one each for Azure, Windows, Office and Security. One click on a button means that you have a developer question, a double click that you need help from an IT Pro.

After clicking a button the request for an expert is listed on a screen next to the buttons together with the status of the request. When an expert is on their way the request status is updated with an estimated arrival time in minutes. Finally the expert arrives and help out solving problems and answer questions. Everyone lives happily ever after.

Ask Me status Testbild

Flow of Information

The buttons used are from Flic and when clicked the button sends a signal via Microsoft Flow to a .NET application. This application has a list of available experts for each area of expertise and sends out an SMS to each of the relevant experts using the 46elks SMS-API. The expert can respond to this SMS by sending back an SMS if they can help out or not. The response text message is sent via 46elks to the .NET application.

The first expert to respond gets assigned the request. All experts that have responded gets an update via SMS about if they got assigned the request or not. The .NET application shows the updated status of the request to the user in a simple web view.

Flow of Information

Handling buttons via Microsoft Flow

The advantage in using Flick buttons is that they have a Microsoft Flow connector, which makes it quick and easy to handle when someone presses a button. The Flic buttons have 3 types of actions - single click, double click and press & hold. Single and double clicks are configured in Microsoft Flow so Flow makes a call to the .NET application's API.

Microsoft Flow for Ask Me

Coordination in the .NET application

At the heart of everythinf sits a .NET application. Microsoft Flow sends a POST request to this application's API. The call contains information about what type of expert is wanted (Azure, Security etc). The application stores this request for an expert in its database, retrieves a list of available and relevant experts and sends a text message to these via the 46elks API. This application is also responsible to keep the status of the request updated to the user that needs help can see that experts have been contacted and the estimated time of arrival in minutes.

[HttpPost]
public async void Post(string topic)
{
    // adding new request - make sure it's in the opened state
    var request = new Request()
    {
        State = RequestState.Opened,
        CreatedAt = DateTime.UtcNow,
        Topic = topic.ToUpper(), 
        ResolvedAt = null,
        Name = null,
        ArrivesInMinutes = null
    };

    using (var db = new TD2017ExpertsContext())
    {
        db.Requests.Add(request);
        db.SaveChanges();

        // let's lookup all the experts that knows about this topic
        var experts = db.Experts.Where(e => e.Topics.Contains(request.Topic));
        if (!experts.Any())
        {
            // no expert available
            MarkRequestFailed(db, request, "No expert available.");
            return;
        }
        else
        {
            bool overallSuccess = false;

            foreach (var expert in experts)
            {
                var success = await SmsHelper.SendSmsRequest(expert.PhoneNo, request.Topic, request.Id);
                if (success)
                    overallSuccess = true;
            }

            if (!overallSuccess)
                MarkRequestFailed(db, request, "Couldn't reach any experts");
            else
                MarkRequestQuerying(db, request);
        }
    }
}

SMS communication with 46elks

The .NET application sends SMS to the experts and receives their SMS responses via the 46elks SMS API. In order to do this a 46elks account with an associated mobile phone number is needed. All SMS will be sent from this number (called senderPhoneNo in the code below). To send and SMS all you need is a username and password for the 46elks account and then send a POST request with the sender of the SMS (from), what number to send it to (to) and the content of the SMS (message) to api.46elks.com:

private static async Task<bool> SendSms(string phoneNo, string message)
{
    using (var client = new HttpClient())
    {
        client.BaseAddress = new Uri("https://api.46elks.com");
        client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue(
            "Basic",
            Convert.ToBase64String(
                System.Text.ASCIIEncoding.ASCII.GetBytes(
                    string.Format("{0}:{1}", user, password))));

        var content = new FormUrlEncodedContent(new[] {
                new KeyValuePair<string, string> ("from", senderPhoneNo),
                new KeyValuePair<string, string> ("to", phoneNo),
                new KeyValuePair<string, string> ("message", message),
            });

        HttpResponseMessage response = await client.PostAsync("/a1/SMS", content);
        return response.IsSuccessStatusCode;
    }
}

The experts can respond to a request for help but just responding to the SMS they receive. This response SMS is sent to the mobile phone number connected to the 46elks account. Microsoft has configured a callback URL for this number, which is a URL to the .NET application. When the experts response SMS arrives 46elks makes a POST to this callback URL. Included in this POST is text content of the experts SMS as well as some meta data describing who send the SMS. The .NET application receives this POST and interpret the content of the SMS.

[Produces("application/x-www-form-urlencoded")]
[Route("api/SmsCallback")]
public class SmsCallbackController : Controller
{
        [HttpPost]
        public async void HandleSms(SmsInfo sms)
        {
            var smsInfo = SmsHelper.ParseSms(sms);
            ...

Summary

Pressing a button and getting help is a good user experience. The implementation of this user experience is a great example of what can be done with the building blocks available to developers today. A small amount of code can generate a lot of functionality. The complex parts of the solution are handled by others (Flic, Microsoft and 46elks). The only thing the developer needs to do is to connect the building blocks and receive all the praise for a great application.

Get started with the 46elks API with this tutorial about how to send SMS with C# or one of the other tutorials.