JabbR

This repo is forked from the original repo here: https://github.com/JabbR/JabbR and is designed as a starting point for a hands-on-lab with Azure.

JabbR is a chat application built with ASP.NET using SignalR.

Hands on Lab

Part 1: Deploy the Application

To get started follow these steps:

1. Clone (or download) this repo

2. Open the JabbR.sln file in Visual Studio 2015 or 2017 (ignore the warning about SQL Express if you don't have it).

3. Restore the nuget packages (right click the solution and choose restore nuget packages)

4. Build the solution and validate it succeeds.

5. Create a blank Azure SQL Database via the Azure portal. See here for steps.

6. Right the click the JabbR project in Visual Studio and choose publish. Publish the app to an Azure App Service.

8. Once the app has been published, navigate to the Azure portal and find the app.

9. Under the Application Settings -> Connection Strings, create a connection string called Jabbr and set its value to the connection string for the database you created in step 5.

10. Browse to the application and it should begin working.

---

Part 2: Redirect HTTP to HTTPS

In this section we will apply the App Service extention to force HTTP traffic to HTTPS.

1. Within the App Service blade select 'Extensions'

2. Click 'Add' and find the 'Redirect HTTP to HTTPS' extension.

3. Click 'Ok' on the legal terms and then 'Ok' to deploy the extension.

4. When complete, attempt to navigate to your site via HTTP and confirm you're redirected to HTTPS.

---

Part 3: Deployment slots

In this section we are going to add a new deployment slot to the Web App and then initiate a slot swap.

1. Within your existing Web App in the Azure portal, find the 'Deployment Slots' blade.

2. Click 'Add Slot'.

3. When the pane appears, enter a slot name and select the slot from which you'd like to copy configuration settings ('anotherjabbr' in the example below). Click 'Ok'.

4. Once the slot provisions successfully, navigate to the URL for the new slot. You'll find an empty IIS site.

http://<WebAppName>-<SlotName>.azurewebsites.net

5. Go back to the 'Deployment Slots' blade and choose the newly created slot.

6. From the Web App main portal page, or from the 'Deployment Slots' blade, choose 'Swap'.

7. Navigate to the URLs for each slot and you should see that the sites have swapped. Swap back if you wish.

---

Part 4: Deployment Slot Settings

In this section we are going to make an application change which leverages a slot settings.

1. In the new slot Web App pane go to the 'Application Settings'

2. Scroll to the 'App Settings' section and add a new setting to indicate the environment name (ex. test) and call it 'ENV'. Also select the 'Slot Setting' checkbox and then click 'Save'.

3. In the portal navigate to the initial deployment (i.e. the other slot) and ensure the same setting is applied, but use a different value (ex. Prod).

4. Go back to the first Web App (i.e. the App from which you created this new slot) and set the 'ENV' application setting to specify the environment name (ex. production). Be sure to also select the 'Slot Setting' checkbox.

5. In your application code, navigate to JabbR/ViewModels/SettingsViewModel.cs and add the following property:

        public string Env
        {
            get
            {
                return System.Configuration.ConfigurationManager.AppSettings["ENV"];
            }

        }

6. Navigate to JabbR/Views/Home/index.cshtml and update the title to include your new property as follows:

<title>JabbR - @Model.Env</title>

7. You can build and run locally to test. You should see 'Jabbr - ' in the title bar. If you wish to have a value show up locally you can add an 'ENV' variable in your local Web.config AppSettings.

ex.

<add key="ENV" value="development"/>

8. Publish your application again as you did in Part 1.

9. When you run your newly deployed app and login you should now see that the updated page title using the slot setting text.

10. Execute a slot swap

---

Part 5: Adding in some intelligence

In this section we are going to make a modification to the application to make it smarter. We will use Azure Cognitive Services to automatically caption images people upload.

1, First, you will need to create an Azure Storage account to hold uploaded images.

2. Grab the storage account connection string and go to the Jabbr homepage.

3. Under the Jabbr settings, update the storage account connection string.

4. Create an Azure Cognitive Service in your Azure Subscription, choosing the Computer Vision API

5. After it creates, make a note of the Access Key and the Endpoint URL as we will use that in the code.

6. In the application itself we are going to make a modification to the ImageContentProvider class. We will add this following method (replacing the access key and endpoint url):

static async Task<string> AnalyzeImage(string imageUrl)
{
    HttpClient client = new HttpClient();
    client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", "<access_key>");

    string requestParameters = "visualFeatures=Description&language=en";

    var uriBase = "<api_endpoint>";

    string uri = uriBase + "/analyze?" + requestParameters;

    HttpResponseMessage response;
    string body = "{\"url\":\"" + imageUrl + "\"}";
    response = await client.PostAsync(uri, new StringContent(body, Encoding.UTF8, "application/json")).ConfigureAwait(continueOnCapturedContext: false);;

    string contentString = await response.Content.ReadAsStringAsync().ConfigureAwait(continueOnCapturedContext: false);

    return contentString;
}

7. Find the method GetCollapsibleContent and update the bottom of the method to look like this:

string contentString = await AnalyzeImage(imageUrl).ConfigureAwait(continueOnCapturedContext: false);
dynamic converted = JsonConvert.DeserializeObject<dynamic>(contentString);
string caption = converted["description"]["captions"][0].text.ToString();

return new ContentProviderResult()
{
    Content = String.Format(format+"<p>"+caption+"</p>", Microsoft.Security.Application.Encoder.HtmlAttributeEncode(href),
                                    Microsoft.Security.Application.Encoder.HtmlAttributeEncode(imageUrl)),
    Title = href
};

8. Now when you upload an image it should call out to the service to automatically caption it with a description.

---

Scaling out

If you want to scale out you will need to leverage a backplane for SignalR messaging. Out of the box you can use either SQL Server service broker or Service Bus. To use Azure Service Bus follow these steps:

1. Go to the Azure Portal and create a new Azure Service Bus.
2. From the newly created Service Bus grab the connection string.
3. In the Application Settings create the following two entries: a. jabbr:serviceBusConnectionString and set the value to the connection string value b. jabbr:serviceBusTopicPrefix and set this to a prefix of your choosing (e.g. jabbr_)