Assignments - HenrikWM/NNUG_GAB2017 GitHub Wiki

Business scenario

You are a developer tasked with integrating an existing application with Azure services. The user-facing application is a simple ASP.NET Web Application that lets users create quizes, add questions and answers, and finally take quizes. They will also be able to see the history of previous quizes with scores. This application will be published and hosted in Azure.

The customer wants the end-product to use some kind of storage in Azure, which one of the storage services is up to you. SQL Azure, Table Storage, MongoDB, DocumentDB and more will work fine.

The customer also wants you to use Logic Apps and workflows. They should be triggered after a quiz is completed. At the moment the intent is to use a workflow to create a diploma-image with the quiz-participant's name and score, and show this to the user after the quiz is completed. It's fine if the workflow takes a moment, the quiz app already has a polling mechanism in place on the final quiz-page so you only need to provide it with a URL to where the diploma will exist once it is generated. Other ideas for steps in the workflow include posting the quiz-results to social media, sending an "Congratulations!" e-mail with quiz-results or maybe posting quiz-results to a Slack-channel.

There are ideas of using Azure Functions and triggering them from the Logic App workflow. Maybe move the diploma-generation to a Function, or extend the functionality of existing workflow-steps and put those in a Function. Or implement your own idea as a Function!

The services

The scenario consists of 4 separate services: Quiz.Web, Quiz.DataAccess, Quiz.Workflows and Quiz.Functions

Quiz.Web

An ASP.NET MVC Web application that handles the user interaction. A user is able to enter his/her's name, start a quiz and complete a quiz. After completing the quiz the user sees a generated diploma with his/her's name and a highscore-table.

Quiz.DataAccess

A persistance layer for the web application so that user data can be persisted using a database such as SQL Azure, MongoDB, DocumentDB, Table Storage etc.

There are abstractions in Quiz.DataAccess.Abstractions that provide the repository interfaces, so you need add your own implementations using the storage service you choose. E.g. if you choose SQL Azure with EntityFramework then create a new class library Quiz.DataAccess.Ef and create your implementation-classes there. And then replace all of the InMemory-references in Quiz.Web with your own.

Quiz.Workflows

A Logic Apps project containing the workflow that will use quiz-results for diploma-generation, social media sharing etc.

Quiz.Functions

An Azure Functions project for asynchronous tasks triggered by the Logic Apps workflow. Generate a diploma image, calculate high-scores etc.

Data flow between services

View large version

Assignments

Tip: Make sure you are logged-in with your Azure-account in Visual Studio before you begin.

Get started

Clone the GAB2017-repository and checkout the start-here branch. If you want to skip to Logic Apps and Assignment 3, checkout start_here_with_sqlazure. You will need to create your own Azure SQL Database Server, see the last part of Assignment 2.

The master branch contains a final solution reference if you need inspiration or get stuck. It uses SQL Azure as storage service and contains hints for the Logic Apps and Azure Functions implementations.

Assignment 1 - Deploying Quiz.Web to Azure

Take-away: You will have published the Quiz.Web ASP.NET MVC web application to Azure using Web Deploy. Goal: Your quizweb app exists on http://nnug-gab2017--quizweb.azurewebsites.net

  1. Navigate to \src\QuizApp and open QuizApp.sln. Right-click on the Quiz.Web-project and choose Publish.
  2. Choose "Microsoft Azure App Service" as the publish target.
  3. You should see the "App Service" window pop-up, and you should see your logged-in user in the upper-right corner.
  4. Click the "New"-button to the lower-right to create a new resource group.
  5. You should see the "Create App Service"-window pop-up. Enter the following details:
  • Web App Name: nnug-gab2017-<your initials>-quizweb
  • Resource group: nnug-gab2017-<your initials>
  • App Service Plan: Click "New", enter: ** App Service Plan: nnug-gab2017-<your initials> ** Location: West Europe
  1. Click on the "Ok"-button. Click "Create" on the "Create App Service"-window. It will create an App Service, Resource Group and App Service Plan.
  2. Wait until you see the "Publish"-window. Click the "Validate connection"-button to ensure that the Azure-resources are ready. Click "Publish" to publish the web app.
  3. A browser-window will open the deployed Quiz.Web-app once Web Deploy is complete.

For more details on these steps, see the detailed guide from last year's Web Deploy guide.

Now that you have your app hosted and deployed, you can start adding Azure Services!

Assignment 2 - Adding a storage service

Take-away: Have implemented persistence in the quiz application with a storage service in Azure such as Azure SQL, Table Storage, MongoDB, DocumentDB etc. Goal: Your quizweb app in Azure is storing quizzes, questions, answers and quiz-attempts using an Azure storage service.

  1. Create a new class library project in the 30 - Infrastructure folder in Visual Studio. Its name should reflect the storage service you have chosen. E.g. Quiz.DataAccess.Ef if using SQL Azure with EntityFramework, or Quiz.DataAccess.DocumentDB if using DocumentDB.
  2. Implement a similar folder-structure and class-naming as the Quiz.DataAccess.InMemory project for your storage implementation.
  3. In the Quiz.Web project replace every private readonly IQuizItemRepository _quizItemRepository = InMemoryQuizItemRepository.Instance (or similar) with your implementation. Hint: find the controllers in Quiz.Web.Areas.Quiz.Controllers and Quiz.Web.Areas.Scores.Controllers.
  4. In Global.asax.cs, remove InMemoryDbConfiguration.Seed() and replace it with your own optional Db-initialization.

The following will guide you through creating an Azure SQL Database hosted in an Azure SQL Database server. Feel free to use any other storage service in Azure instead.

Create a new SQL Azure service

  1. Open the documentation on how to create a SQL Server database in Azure and follow the steps under "Create a SQL database".
  2. Enter the following details:
  • Database name: QuizApp
  • Resource group: nnug-gab2017-{your initials}
  • Server: Click to create a new server.
  1. Enter the following server details:
  • Server name: nnug-gab2017-{your initials}-dbserver
  • Server admin login: nnug-gab2017-{your initials}-sysadmin
  • Password: Generate passord here
  • Location: West Europe
  1. Click Create and wait a few moments.
  2. Find and click on your new database server in the Azure portal, and in the firewall settings add your client IP. See "Create a server-level firewall rule" in the documentation.
  3. Update the web.config connectionStrings section and the QuizAppSqlDb-connection in Quiz.Web with your details. Run the app locally and see if your changes gets saved to the database. If local testing looks good, try publishing the Quiz.Web to Azure and test the deployed web app.

Tip: Using Web Deploy Publish Profiles are a good first step for testing but for production you should either inject secrets such as connectionstrings in the deployment pipeline (Octopus Deploy, TeamCity etc.) or use a secret store like Azure KeyVault. Do NOT check-in connectionstrings to source control. See this KeyVault-guide for inspiration on how to obtain a connectionstring using Azure KeyVault. Azure KeyVault is the preferred service to store your Azure app secrets.

Assignment 3 - Create a Logic App workflow

Take-away: Have created a Logic App workflow and configured workflow steps to serve a json-file with a diploma-url, do social media updates etc. Goal: Create a Logic App workflow that generates a json-response and see the diploma on the "Quiz Completed"-page. As an extra challenge, add a hard-coded score to the json-file or add more steps for social media sharing, posting quiz-results to Slack etc.

You can check out the branch start_here_with_sqlazure or continue with your own code from previous steps. You will need to create an Azure SQL Database server to use a SQL Azure database. See previous assignment for the guide for this.

Tip: Install the Logic App Tools extension for Visual Studio 2015 for better tooling experience. For Visual Studio 2017, download it here

  1. Create a workflow, name it nnug-gab2017-{your initials}-quizapp-workflow.
  2. Create a step that returns a Diploma.json-file: { "diplomaUrl": "http://your-diploma-url-in-a-blob-container" }.
  3. Create a new quizweb Public Blob Container in your Azure Storage Account and find a fancy trophy-image to save in the container. Note the URL of the image and use it for the diplomaUrl in the Diploma.json-file.
  4. In the QuizCompleted-action in src\QuizApp\Quiz.Web\Areas\Quiz\Controllers\QuizTakingController.cs, find the TODO and trigger your workflow there.

Test the application by completing a quiz. If everything works the workflow should be triggered. When the json-file is returned, the diplomaUrl should be used to set the image source on the "QuizCompleted"-page.

For an extra challenge you can now do the same with the quiz-score and return it as well in the Diploma.json-file. Or continue to Assignment 4 to write an Azure Function that will generate the diploma with name and score.

Assignment 4 - Create an Azure Function

Take-away: Have created an Azure Function to generate the diploma, and use it in a Logic App workflow. Goal: Have the Logic App workflow use an Azure Function to generate a diploma based on participant's name and score. As an extra challenge you can use another Function to calculate the score first, then trigger the diploma-function, then finally return diplomaUrl and score in the Diploma.json-file

  1. Create a function for generating the diploma image. Name it nnug-gab2017-{your initials}-quizapp-diplomafunction.
  2. Write code that takes in parameters for name and score, and generates a text congratulating the user onto a diploma-image (use your trophy-image or search for a suitable template image).
  3. Save the image to the Public Blob Container or a suitable location. Return the url to the workflow.
  4. The workflow should call the function with name and score, and add the returned diplomaUrl to the diplomaUrl in the Diploma.json-file.

Test the application as you did in Assignment 3. Note that there should be no changes to the web application as the only change is that you have a dynamic diplomaUrl in the json-result that is being generated by a Function in the workflow.

For an extra challenge, write another function to generate the score and have the workflow call it first, then the diploma-function, then finally add diplomaUrl and score to the Diploma.json-file.

If you have come this far, congratulations! You have now used Azure App Services, an Azure storage service, Logic Apps and Azure Functions to solve a realistic, challenging business scenario! 🥇