Overview A very large percentage of applications today are web based and data driven so the underlying application services needed are web infrastructure and a database server. In this challenge you will create this infrastructure in Azure and you will deploy some simple web code and a database. Your finished app, although simple in nature, will run on a very sophisticated, highly resilient and scalable platform using Azure Web App and Azure SQL Database.
1. Login to Azure For this challenge, you have either elected to use your own subscription or have created a new Azure subscription using the provided Azure Pass (or Free Trial). If you want to switch to use the provided Azure Pass the promotion code is displayed on the My Account page on the http://challenge.azurecon.com web site. If there is no promo code displayed, you will need to use the free trial http://azure.microsoft.com/pricing/free-trial. Azure has TWO management portals - the classic portal (http://manage.windowsazure.com) and a new portal that is in Preview at http://portal.azure.com. You will use the Preview portal in this challenge. 1.
Open a browser and go to http://portal.azure.com
2.
Enter your Microsoft Account email address and password for the Microsoft Account you associated with your Azure Pass or your own subscription.
3.
You will now be in your Azure subscription (see opposite) and from here you can create and manage Azure services.
2. Create a Database Server and Provision a Sample Database
1.
First create your Database click +NEW -> Data + Storage -> SQL Database
2.
In the name, enter sqldb. The name must only be unique within your SQL Server instance.
3.
Click on SERVER and Create a New Server.
4.
For the Servers name field, construct a globally unique name. Suggest you start with your email alias prefix, followed by sqlsvr and if you need to, add numbers on the end if it is not unique. So if your email was bsmith@contoso.com, you would use bsmith-sqlsvr
5.
For SERVER ADMIN LOGIN, enter <alias>admin e.g. bsmithadmin and pick a password you will remember. Write it down..!
6.
Pick any location you want BUT remember which location you selected as you will want to put your web infrastructure in the same place in the next section.
7.
Leave the Create V12 server as YES and click OK.
8.
In the Select Source -> Choose SAMPLE the only available sample is AdventureWorksLT (V12). Your APP will be reading the products table from this sample database.
9.
Click the Resource Group and Create a New Resource Group. Call this group WebAndSQL it is going to hold all the resources you create in this challenge.
10. Leave everything else to the default values and click CREATE. You will be shown the startboard in the portal with a tile for your database. It will take 2-3 minutes for this to create. You dont need to wait for it to complete go to the next step below.
3. Provision your Web Infrastructure.
1.
Page | 1
Create your Web App, click + NEW -> Web + Mobile -> Web App
2.
For the name field, continue your naming convention use <alias> and then -webapp e.g. bsmith-webapp
3.
For the resource group field, select the existing resource group that you created earlier WebAndSQL (this will also show you the location which you will need in the next step)
4.
Click the App Service Plan/Location item. On the new blade, click Create New.
5.
For Name, enter WebAndSQLASP
6.
Select the location you saw for the resource group above.
7.
Click on Pricing Tier and select S1 Standard (if this is not the default).
8.
Click OK Your options should be similar to those opposite.
9.
Ensure that the Pin to Startboard checkbox remains selected (It is selected by default).
10. Click the CREATE button.
11. You will see by now that your SqlDB service is ready, and in 30-45 seconds, your Web Site blade will open. 12. Click the BROWSE button at the top of your web app blade. A new browse tab opens, connecting to your public app url which will be something like http://bsmith-webapp.azurewebsites.net - a default HTML page is displayed for you.
13. Dont close this new browser tab, switch back to your Web App blade in the Portal. 14. Click the Tools button on the blade header and at the bottom of the new blade click on Extensions. 15. Click + ADD (on the blade header) 16. You need to choose an extension first SELECT Visual Studio Online and then click the OK button to Accept Legal Terms and then OK again on the Add web app extension blade. After a few seconds, you will see the extension appear in your list of installed extensions.
17. Click the Visual Studio Online extension and then click the BROWSE button. A new browser opens and after 10-20 seconds you will see the Visual Studio Online Monaco code editor we will refer to this as Monaco. This is a lightweight, simple code editor integrated right into
Page | 2
the Portal. At the top left, you will see the only file on your web server hostingstart.html this is that blue getting started page you browsed to.
4. Build Your Web Application
Now you need some form of web application that will connect to your database, read some data from one of the tables in your sample database and display the results. You need to deploy the app you build to your web app infrastructure. Your app needs to know how to authenticate and connect to your database. This simple HTML5 application demonstrates features of Bootstrap (http://getbootstrap.com/) and DataTables (http://www.datatables.net/). 1.
In the Monaco editor, right click the hostingstart.html file and select DELETE and OK.
2.
Click the New Document icon you have to put the cursor on the WWWROOT line and these icons will appear.
3.
In the name text box, enter index.cshtml (it is important you call it exactly this..!)
4.
Now you need to write the code and the HTML to read and display the data from the database. The sample database has a products table with a list of products bicycle parts. Lets build an app that reads/displays this table. Heres the code to copy/paste right into your editor in Monaco. The code is minified to a single line to make it easier for you to copy the code. You can always use a Unminifier website if you wish to learn how the web page works. Copy and Paste this code into the editor for the index.cshtml file. @{ bool showErrorMessage = false; List<dynamic> productlist = new List<dynamic>(); try{var db = Database.Open("ReadProductsfromSQLDB"); productlist.AddRange(db.Query("SELECT [ProductID],[Name],[ProductNumber],[Color],[StandardCost],[ListPrice],[ModifiedDate] FROM [SalesLT].[Product] ORDER BY ModifiedDate DESC"));}catch(Exception ex){showErrorMessage = true;}}<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Products - Home</title> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/yeti/bootstrap.min.css" rel="stylesheet"> <link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-12"> <h1>Current Products</h1> @if(showErrorMessage){<div class="alert alert-dismissible alert-danger"> <h4>Error!</h4> <p> Either your SQL Database Connection String is missing or it is configured incorrectly.<br /> Double-click the <strong>ReadProductsfromSQLDB</strong> Connection String in the <strong>Azure Portal</strong>. </p> </div>}else{<table id="dataTable" class="table"> <thead><tr><th>Product ID</th><th>Product Name</th><th>Product Number</th><th>Color</th><th>Standard Cost</th><th>List Price</th><th>Date Modified</th></tr></thead> <tbody> @foreach(var Item in productlist){<tr><td>@Item.ProductID</td><td>@Item.Name</td><td>@Item.ProductNumber</td><td>@Item.Color</td><td> @String.Format("{0:C}", Item.StandardCost)</td><td>@String.Format("{0:C}", Item.ListPrice)</td><td>@String.Format("{0:M}", Item.ModifiedDate)</td></tr>} </tbody> </table> }</div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("table#dataTable").DataTable();});</script> </body> </html>
5.
Switch back to your web browser that is showing the default blue html page for your site and just click the Refresh button to reload the page. You dont have to explicitly save your work in Monaco, its saved as you change things.
6.
When the page refreshes, you will see an error message indicating that the Connection String is missing. Lets fix this issue
7.
Go back to the AZURE PORTAL.
Page | 3
8.
On the left nav of the portal click Resource Groups and click the WebAndSQL group. A blade will display with all the resources in this group your database, the logical database server, the web app, the app service plan and an app insights service (used to surface application monitoring data). This is how you manage all the resources for your app via the resource group.
9.
Click on the sqldb and in the Essential panel at the bottom right (A) opposite click Show database connection strings
10. Click the COPY to Clipboard icon to the right of the ADO.NET connection string. 11. Open Notepad and paste in the string you just copied. 12. You need to change just once thing in this string your password to the database which you entered when you created the database earlier there is no way to get this if you do not remember it you will have to delete/re-create the database. 13. Find the {your_password_here} and replace this with your password delete the {} brackets. 14. Copy the entire string to the clipboard. 15. Close the blade and close the SQLDB blade you should have your resource group blade open. 16. Click your Web App e.g. bsmith-webapp. You will have TWO resources called the same thing one is a service that collects application metrics application insights with a light blub/globe icon. You want the OTHER one with just the globe icon thats your web app. 17. At the top of the Settings blade click the APPLICATION SETTINGS option. 18. Scroll down to the connection strings section. 19. Enter the value ReadProductsfromSQLDB into the NAME field (A) below (it is NOT case sensitive so does not matter if you dont follow the CASE).
20. Paste into the Value field (B) above, your connection string which should be on the clipboard. 21. Click SAVE in the blade header. 22. Switch back to your browser that was displaying your web site with the error and REFRESH. If you configured the connection string properly, you will see a long list of product records, something like this:
Thats pretty cool. You have a web site, connected to a database, live on the internet. Its a super simple app but actually amazingly rich for so few lines of code the power of JavaScript. The database is a 3 way clustered database amazingly resilient. You want it to go faster you simply change the pricing tier. Lets finish and scale the web site part of your application. 23. Go back to your Web App blade and find the SCALE tile, under the Monitoring Chart in the App Service Plan section click it. 24. In the SCALE settings blade, notice that by default your web app is setup to scale up and down manually. There are options to automate the scaling. 25. Drag the Instance slider, so you have 3 instances and click SAVE 26. Switch back to your web site browser and refresh your browser that is showing your app it should all still work, even while the scaling operation takes place. --- END OF LAB --Go back to the AzureCon Challenge web site (http://challenge.azurecon.com) and complete the challenge question to get your points. REMEMBER: You only have one chance at the question, make sure you really know the answer!
