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
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
- Navigate to
\src\QuizApp
and openQuizApp.sln
. Right-click on theQuiz.Web
-project and choosePublish
. - Choose "Microsoft Azure App Service" as the publish target.
- You should see the "App Service" window pop-up, and you should see your logged-in user in the upper-right corner.
- Click the "New"-button to the lower-right to create a new resource group.
- 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
- 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.
- 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.
- 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.
- 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, orQuiz.DataAccess.DocumentDB
if using DocumentDB. - Implement a similar folder-structure and class-naming as the
Quiz.DataAccess.InMemory
project for your storage implementation. - In the
Quiz.Web
project replace everyprivate readonly IQuizItemRepository _quizItemRepository = InMemoryQuizItemRepository.Instance
(or similar) with your implementation. Hint: find the controllers inQuiz.Web.Areas.Quiz.Controllers
andQuiz.Web.Areas.Scores.Controllers
. - In
Global.asax.cs
, removeInMemoryDbConfiguration.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
- Open the documentation on how to create a SQL Server database in Azure and follow the steps under "Create a SQL database".
- Enter the following details:
- Database name:
QuizApp
- Resource group:
nnug-gab2017-{your initials}
- Server: Click to create a new server.
- 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
- Click
Create
and wait a few moments. - 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.
- Update the
web.config
connectionStrings
section and theQuizAppSqlDb
-connection inQuiz.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 theQuiz.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
- Create a workflow, name it
nnug-gab2017-{your initials}-quizapp-workflow
. - Create a step that returns a
Diploma.json
-file:{ "diplomaUrl": "http://your-diploma-url-in-a-blob-container" }
. - 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 thediplomaUrl
in theDiploma.json
-file. - In the
QuizCompleted
-action insrc\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
- Create a function for generating the diploma image. Name it
nnug-gab2017-{your initials}-quizapp-diplomafunction
. - 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).
- Save the image to the Public Blob Container or a suitable location. Return the url to the workflow.
- The workflow should call the function with name and score, and add the returned diplomaUrl to the
diplomaUrl
in theDiploma.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! 🥇