* moving extend to vsts

* updating css

* removing unwanted steps

* homepage aligned

* adding missing labs

* modified pre-requisites

* updated prerequisites, markdown syntax

* updating sidebar, homepage

* removing sidebar

* adding a separate group
This commit is contained in:
Sachin Raj 2018-03-22 16:08:04 -07:00 коммит произвёл GitHub
Родитель c45d624441
Коммит ed02bfd418
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
29 изменённых файлов: 2400 добавлений и 841 удалений

Просмотреть файл

@ -1,7 +1,7 @@
# This is your sidebar TOC. The sidebar code loops through sections here and provides the appropriate formatting.
entries:
- title: sidebar
product: Extend and Integrate with VSTS
product: Visual Studio Team Services
version:
url: /labs/vstsextend
url: /labs/vsts
folders:

Просмотреть файл

@ -5,7 +5,7 @@
<div>
<div class="topnavlinks">
<div class="navbar-header">
<a class="fa fa-home fa-lg navbar-brand" href="{{site.url}}{{site.baseurl}}"><img src="{{site.url}}{{site.baseurl}}images/2017.png" /><span class="projectTitle">{{site.topnav_title}}</span></a>
<a class="fa-lg navbar-brand" href="{{site.url}}{{site.baseurl}}"><img src="{{site.url}}{{site.baseurl}}images/2017.png" /><span class="projectTitle">{{site.topnav_title}}</span></a>
<button type="button" class="custom-btn navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
@ -34,7 +34,7 @@
</a>
</li>
<li>
<a href="#" data-toggle="tooltip" data-placement="left" title="Send Feedback" onclick="javascript:window.location='mailto:{{site.feedback_email}}?subject={{site.feedback_subject_line}} &body=I have some feedback about the {{page.title}} page: ' + window.location.href;"><i class="fa fa-envelope-o"></i>
<a href="#" data-toggle="tooltip" data-placement="left" title="Send Feedback" onclick="javascript:window.location='mailto:{{site.feedback_email}}?subject={{site.feedback_subject_line}} &body=I have some feedback about the {{page.title}} page: ' + window.location.href;">
<img class="custom feedback_cls" /></a>
</li>

Просмотреть файл

@ -1566,7 +1566,7 @@ div.labcols{
}
div.rowMain{
background-image: url("../images/almvm-hero-right-blue.png");
background-image: url("../images/banner2.png");
display: block;
background-color: skyblue;
margin-top: 10px;
@ -1696,4 +1696,10 @@ ul.sidebarlisting {
span.topnavbreadcrump
{
font-size:14px;
}
li.extendlabslist{
margin: 20px 0px 20px 0px;
}

1593
css/font-awesome.min.css поставляемый

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Двоичные данные
images/banner2.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 44 KiB

Двоичные данные
labs/Word/SQL Prompt.docx Normal file

Двоичный файл не отображается.

Двоичные данные
labs/Word/SonarQube.docx Normal file

Двоичный файл не отображается.

Просмотреть файл

@ -9,19 +9,18 @@ comments: true
## Overview
**About the Fabrikam Fiber Scenario**
### About the Fabrikam Fiber Scenario
This set of hands-on-labs uses a fictional company, Fabrikam Fiber, as a backdrop to the scenarios you are learning about. Fabrikam Fiber provides cable television and related services to the United States. They are growing rapidly and have embraced Windows Azure to scale their customer-facing web site directly to end-users to allow them to self-service tickets and track technicians. They also use an on-premises ASP.NET MVC application for their customer service representatives to administer customer orders.
In this set of hands-on labs, you will take part in a number of scenarios that involve the development and testing team at Fabrikam Fiber. The team, which consists of 8-10 people, has decided to use Visual Studio application lifecycle management tools to manage their source code, run their builds, test their web sites, and plan and track the project.
## Pre-requisites
## Pre-requisites
**Using VM with the pre-installed TFS**
### Using VM with the pre-installed TFS
In order to complete this lab you will need the Visual Studio 2017 virtual machine provided by Microsoft. For more information on acquiring and using this virtual machine, please see this blog post.
**Using the VM with Visual Studio Team Services**
### Using the VM with Visual Studio Team Services
In order to complete this lab with Visual Studio Team Services, please follow the instructions here

Просмотреть файл

@ -1,7 +1,7 @@
---
title: Microsoft Teams Integration (Collaborate, Communicate and Celebrate)
layout: page
sidebar: vsts
sidebar: vsts2
permalink: /labs/vsts/teams/
folder: /labs/vsts/teams/
---
@ -21,39 +21,39 @@ hub for teamwork, that brings your teams, conversations, content and tools from
1. Only VSTS accounts in the same organization (AAD tenant) can be used to integrate with your Microsoft Teams account.
**You can start a free trial if you don't have Office365 account from [here](https://teams.microsoft.com/start)**
**You can start a free trial if you don't have Office365 account from [here](https://teams.microsoft.com/start){:target="_blank"}**
In this lab, youll learn about how **Visual Studio Team Services** integrates with **Microsoft Teams** to provide a comprehensive chat and collaboration experience, across your Agile and development work.
## Getting started with Microsoft Teams
1. Launch **Microsoft Teams** - you can either open the web app or download the app to your desktop from [here](https://teams.microsoft.com/dl/launcher/launcher.html?url=/_%23/l/home/0/0&type=home)
1. Launch **Microsoft Teams** - you can either open the web app or download the app to your desktop from [here](https://teams.microsoft.com/dl/launcher/launcher.html?url=/_%23/l/home/0/0&type=home){:target="_blank"}
![](images/2.png)
![2](images/2.png)
1. After launching the app, you will see the **General Team**.
![](images/3.png)
![3](images/3.png)
1. Start adding Teams by clicking on the bottom left on **Add Team** button.
![](images/4.png)
![4](images/4.png)
1. Hover your mouse to create a new team.
![](images/5.png)
![5](images/5.png)
1. Give a name for your team and description if needed. Select the privacy settings and click on **Next**.
![](images/6.png)
![6](images/6.png)
1. You should see the status when creating team.
![](images/7.png)
![7](images/7.png)
1. Add members for your team in order to get notify the events that occur and also start conversations with your team members.
![](images/8.png)
![8](images/8.png)
## Integrating Visual Studio Team Services with Microsoft Teams
@ -61,11 +61,11 @@ In this lab, youll learn about how **Visual Studio Team Services** integrates
1. Click on ellipsis button for the **VSTS Team** that was created and select **Connectors**.
![](images/9.png)
![9](images/9.png)
1. Select **Visual Studio Team Services** and add.
![](images/10.png)
![10](images/10.png)
1. Select the following and click on **save**.
@ -75,15 +75,15 @@ In this lab, youll learn about how **Visual Studio Team Services** integrates
- Team
- Event Type
![](images/11.png)
![11](images/11.png)
1. You can see the list of connectors that are configured to your team from the configured section.
![](images/24.png)
![24](images/24.png)
1. Since VSTS is configured now all the events will be seen under the conversations tab. The events can be set accordingly depending upon the needs like **Work Item Updates, Build Summary** etc.
![](images/25.png)
![25](images/25.png)
## Working with Kanban Board within the Microsoft Teams
@ -93,23 +93,23 @@ The Kanban board can be added using Tabs. **Tabs** allow team members to access
1. Click on **+** icon to add new tab and select **Visual Studio**
![](images/13.png)
![13](images/13.png)
![](images/14.png)
![14](images/14.png)
1. Select the account
![](images/15.png)
![15](images/15.png)
{% include note.html content= "Only VSTS accounts in the same organization (AAD tenant) can be used to integrate with your Microsoft Teams account." %}
1. Select the desired account from the list and click on **continue**
![](images/16.png)
![16](images/16.png)
1. You can see the **Kanban Board** appearing in the tab.
![](images/17.png)
![17](images/17.png)
1. All the work can be monitored during the daily standup's and the updates are real when the work items states are changed. It also allows us to customize the Kanban Board from within the Teams and synced.
@ -119,7 +119,7 @@ Messages are a good way to connect and keep a history of the conversation. It's
1. Start having conversations with your team members by selecting the **Conversations** tab.
![](images/18.png)
![18](images/18.png)
1. All the conversations could be retrieved at anytime without losing the history which helps the entire team to have a collaborative experience
@ -133,15 +133,15 @@ Channels are the biggest “containers” within a Team and contain content & co
1. Select the **Team** that was created earlier and click on **elipsis.**
![](images/26.png)
![26](images/26.png)
1. Give a name and description for your channel and click on **add.**
![](images/27.png)
![27](images/27.png)
1. Once the channel is created, the conversations can be started amongst the team members.
![](images/28.png)
![28](images/28.png)
## Sharing the Contents
@ -149,20 +149,20 @@ Sharing the contents with team members is now easy with Microsoft Teams. You can
1. Click on **Files** and select **Upload** to share a document with the team
![](images/19.png)
![19](images/19.png)
1. Click on the document that was uploaded from the list to start editing and having a live conversation with your team members
![](images/20.png)
![20](images/20.png)
1. Share the related websites within the Teams as Tabs. Click on **+** and select **Website**
![](images/21.png)
![21](images/21.png)
1. Provide a name for the website and click on **save**. It appears on the channel where all of the team members can access to get a quick information if there were any updates done
![](images/22.png)
![22](images/22.png)
1. This is how the website looks when added to the channel.
![](images/23.png)
![23](images/23.png)

Просмотреть файл

@ -1,7 +1,7 @@
---
title: Agile Planning and Portfolio Management with Visual Studio Team Services
layout: page
sidebar: vsts
sidebar: vsts2
permalink: /labs/vsts/agile/
folder: /labs/vsts/agile/
---
@ -16,114 +16,104 @@ In this lab, you will learn about the agile planning and portfolio management to
To complete this lab, you will need:
- **Visual Studio Team Services account**. If you don't have one, you can create from [here](https://www.visualstudio.com/)
- **Visual Studio Team Services account**. If you don't have one, you can create from [here](https://www.visualstudio.com/team-services){:target="_blank"}
- **Visual Studio 2017** or higher version
- You can use the **[VSTS Demo Data generator](http://vstsdemogenerator.azurewebsites.net/Environment/Create)** to provision a project with pre-defined data on to your Visual Studio Team Services account. Please use the ***My Health Clinic*** template to follow the hands-on-labs.
## Connecting to your Project
1. Go to your VSTS account home page.
1. Click on the VS icon and browse to the MyHealthClinic project. At this moment, we have only one project. You could select/create as many projects from here.
{% include note.html content= "If you haven't already, browse to your Visual Studio Team Services account you can sign in by going to (https://{youraccount}.visualstudio.com)." %}
![](images/6.png)
- You can use the **[VSTS Demo Data generator](http://vstsdemogenerator.azurewebsites.net/Environment/Create){:target="_blank"}** to provision a project with pre-defined data on to your Visual Studio Team Services account. Please use the ***My Health Clinic*** template to follow the hands-on-labs.
## Exercise 1: Working with Teams, Areas, and Iterations
1. Connect to the **MyHealthClinic** project.
1. Go to your VSTS account home page.
1. Click on the VS icon and browse to the MyHealthClinic project.
1. Navigate to the **Administration Overview** page by choosing the gear icon.
![](images/7.png)
![images](images/7.png)
1. Check the existing teams, there are three teams by name **MyHealthClinic Team, Team1, and Team2**.
The default team has the same name as your VSTS project. You can create new teams if needed from here.
![](images/8.png)
![images](images/8.png)
1. Delete both **Team 1** and **Team 2** by clicking the ellipsis next to each team and selecting **Delete**.
![](images/71.png)
![images](images/71.png)
1. Now create a new team by clicking the **New team** link and giving it a name of **Web**. Make sure the **Team area** has a check mark. This option will create a corresponding area for the team, so they can group all their work items and keep them separate from other teams. If you do not select this option, you will have to set the default area path for the team once you create it. Follow the same steps to create a team called **Database**.
![](images/72.png)
![images](images/72.png)
![](images/73.png)
![images](images/73.png)
1. While on the **Overview** screen, click on the default team to view the members. We see our user as the only current member.
![](images/10.png)
![images](images/10.png)
1. Click **Add** button to add new members to the team.
![](images/11.png)
![images](images/11.png)
1. Because we are currently in the sub-area for the **Web** team. We need to navigate back up to the default team, so we can setup management of sub-area paths.
![](images/74.png)
![images](images/74.png)
1. Select the **Work** tab at the top then select **Areas** option to view the area path for the team.
![](images/75.png)
![images](images/75.png)
1. Now we want to change the area path setting for management areas to include sub-area paths. The default setting for all teams is to exclude sub-area paths. We will change it to include sub-areas so that the team gets visibility into all of the work items from all teams. Optionally, the management team could also choose to not include sub-areas. Thereby removing work items from their view as soon as they are assigned to one of the teams. Click on the ellipsis for **MyHealthClinic** and select **Include sub-areas**.
![](images/76.png)
![images](images/76.png)
1. Go to **Iterations** and click **Select Iteration**. Select **Sprint 1**. Repeat this step to add **Sprint 2**.
![](images/16.png)
![images](images/16.png)
{% include important.html content= "You may need to adjust the dates for the sprints you have selected. Pick dates that correspond to the current calendar dates to make more relevant." %}
1. Click on **Change** for the default iteration. And set **MyHealthClinic** as the default one.
![](images/17.png)
![images](images/17.png)
![](images/18.png)
![images](images/18.png)
1. Repeat steps 11 and 12 for both the **Web** team as well as the **Database** team. You can switch your team focus to a team project or team you've recently viewed from the team project/team drop-down menu. If you don't see the team or team project you want, click Browse… to browse all team projects and teams.
![](images/77.png)
![images](images/77.png)
## Exercise 2: Work Items in VSTS
1. Navigate to **Web** team dashboard by selecting **MyHealthClinic\Web** from the project/team drop-down menu. This is the main screen for the Web team.
![](images/21.png)
![images](images/21.png)
1. Let's create our **first Product Backlog** item. On the **New Work Item** widget, enter the title of **Create appointment** and change the work item type to **Product Backlog**. We can also create Bugs, Tasks, Features and several other Work item types.
![](images/22.png)
![images](images/22.png)
1. You can see that the product backlog would open automatically. Enter the description **As a user, I want to create appointments.** Enter the acceptance criteria as **Any user can create appointments. After creating an appointment, it should appear in the user appointment list.**
![](images/23.png)
![images](images/23.png)
1. Click **Save & close**.
1. Navigate to the default team's backlog by selecting **MyHealthClinic Team** from the project/team drop-down menu. If you are not on the **Work** tab, then click **Work** option from the top menu.
![](images/77.png)
![images](images/77.png)
1. You can create several backlog items repeating the above steps. If you used the **[VSTS Demo Data generator,](http://vstsdemogenerator.azurewebsites.net/Environment/Create)** then you can see pre-defined work items in the default team's backlog list.
![](images/24.png)
![images](images/24.png)
1. Select the desired product backlog items, drag and drop it to the current sprint. In this case, the current sprint happens to be **Sprint 1**.
![](images/25.png)
![images](images/25.png)
## Exercise 3: Working with Kanban boards
1. To view your Kanban board, click the **Board** link from the **Work>Backlogs** page.
![](images/26.png)
![images](images/26.png)
{% include note.html content= "To maximize a team's ability to consistently deliver high quality software, Kanban emphasize two main practices. The first, visualize the flow of work, requires you to map your team's workflow stages and configure your Kanban board to match. The second, constrain the amount of work in progress, requires you to set work-in-progress (WIP) limits. You're then ready to track progress on your Kanban board and monitor key metrics to reduce lead or cycle time.
@ -131,27 +121,27 @@ To complete this lab, you will need:
1. We are going to modify the **Kanban board** to map the flow of how our team works. Click the gear icon to open the settings dialog.
![](images/28.png)
![images](images/28.png)
1. You can either increase or simplify the information that displays on your cards. Your best bet is to show fields on cards based on what your team frequently refers to or updates when using the **Kanban** and **Task** boards. Make sure the fields for your cards match the following image.
![](images/78.png)
![images](images/78.png)
1. To cause a card on the **Kanban** board to change color based on criteria you specify, open **Styles**. Add a styling rule and set the criteria for the rule. Create the **High Effort** styling as follows.
![](images/79.png)
![images](images/79.png)
1. Prior to setting tag colors, first add tags to backlog items that you want to highlight with color. To add color to **Kanban** cards, open **Tag colors** and select a tag and the color you want it to display. If you used the **[VSTS Demo Data generator](http://vstsdemogenerator.azurewebsites.net/Environment/Create)** then you will already have a **Doctor** tag and set to green.
![](images/80.png)
![images](images/80.png)
1. With the Kanban board, you gain a rich set of tools and a rich set of customization options. **Annotations** provide visual cues about work items, indicating the number of tasks or tests that have been defined for that work item. Click an annotation to expand the set or gain more information.
![](images/81.png)
![images](images/81.png)
1. You can control the test plan under which inline tests you add through the Kanban board are created. You can choose to create a new test plan for each new test that you add, or add all new tests to a selected test plan going forward.
![](images/82.png)
![images](images/82.png)
Kanban's number one practice is to visualize the flow of work. Accordingly, your number one task is to visualize your team's workflow. You do this by identifying the types of work and handoffs that occur regularly as your team moves items off the backlog and into a shippable state.
@ -167,11 +157,11 @@ To complete this lab, you will need:
1. Rename the **New** column to **Backlog**. Click the **+ Column** to create a new column. Name the new column **Analyze** and set the state mapping to **Approved** for both **Bug** and **Product Backlog Item**. Rename the **Build and test** to **Test**.
![](images/83.png)
![images](images/83.png)
1. The WIP limit is already set for **Test** column. You can also set for other columns as well. To do so, from the settings page go to columns tab. Click the **Develop** column. Set the WIP Limit to **3**.
![](images/84.png)
![images](images/84.png)
However, a lag often exists between when work gets moved into a column and when work starts. To counter that lag and reveal the actual state of work in progress, you can turn on split columns.
@ -181,13 +171,13 @@ To complete this lab, you will need:
1. Now that you understand how your team can use split columns, here's how to turn them on. Select the **Develop** column and click the **Split column into doing and done** checkbox. Do the same thing for the **Test** column.
![](images/89.png)
![images](images/89.png)
1. As your team updates the status of work as it progresses from one stage to the next, it helps that they agree on what “done” means. By specifying the **Definition of Done** criteria for each Kanban column, you help share the essential tasks to complete before moving an item into a downstream stage. For the **Develop** column, add the following definition:
![](images/85.png)
![images](images/85.png)
![](images/86.png)
![images](images/86.png)
Your Kanban board supports your ability to visualize the flow of work as it moves from new to done. When you add swimlanes, you can also visualize the status of work that supports different service-level classes. You can create a swimlane to represent any other dimension that supports your tracking needs.
@ -195,11 +185,11 @@ To complete this lab, you will need:
1. From your Kanban board, click **Configure board settings** then click Swimlanes. Use the add Swimlane to add **Expedite** swimlane.
![](images/87.png)
![images](images/87.png)
1. Now rename the default swimlane to **Standard**. Add one more swimlane named **Park**. You can drag the swimlanes to organize them in the order you wish. Drag **Park** below Standard.
![](images/88.png)
![images](images/88.png)
## Exercise 4: Sprint Planning and Task Board
@ -213,13 +203,13 @@ Your sprint backlog should contain all the information your team needs to succes
1. You begin your planning efforts from your product backlog. Move items that you expect to work on into the current sprint, one item at a time. Simply drag each item from the product backlog onto the sprint.
![](images/25.png)
![images](images/25.png)
{% include important.html content= "If you don't see any links listed under Current or Future, you need to configure your team's sprint schedule." %}
1. Next, check the total level of effort of your sprint items.
![](images/90.png)
![images](images/90.png)
{% include note.html content= "Your initial plan should identify the subset of requirements that's within your team's capacity based on estimated effort and team velocity. Velocity corresponds to the total Effort or Story Points a team can complete within the sprint time period." %}
@ -229,7 +219,7 @@ Your sprint backlog should contain all the information your team needs to succes
From the Capacity page, enter the capacity and days off for each member of your team.
![](images/91.png)
![images](images/91.png)
{% include note.html content= "Most teams specify capacity in terms of hours, however, you can also specify it in days. For example, .5 days would correspond to 4 hours for a typical 8-hour day. Choose the same unit you will use to estimate the time a task will take to complete.
@ -239,17 +229,17 @@ Your sprint backlog should contain all the information your team needs to succes
1. Click on the column **Days Off** on any user. Introduce start and end date in an interval inside the dates for the Sprint so he has more work than hours available.
![](images/95.png)
![images](images/95.png)
{% include note.html content= "When you add days off to a Team Member the **Work Details** planning graph will adapt itself and show red if there is more work assigned to any team member than the work hours we have available for the sprint." %}
1. In the sprint backlog, add a task. Creating tasks from the sprint backlog automatically links the task to it parent backlog item.
![](images/92.png)
![images](images/92.png)
1. Name the task and enter an estimate for Remaining Work. Also, if you know who'll perform the work, go ahead and assign the task to that team member.
![](images/93.png)
![images](images/93.png)
{% include note.html content= "At the planning stage, Remaining Work corresponds to an estimate of how long it will take to complete the task.
@ -261,49 +251,49 @@ Your sprint backlog should contain all the information your team needs to succes
You'll also see a roll-up of the remaining work required to complete each requirement or bug.
![](images/94.png)
![images](images/94.png)
1. Click on the upper right corner where the sprint burndown is shown. Throughout your sprint, you can monitor the sprint burndown chart to determine if your team is on track to complete its sprint plan.
![](images/36.png)
![images](images/36.png)
### Task Board
1. Once you have your sprint plan in place, you'll execute that plan for the duration of the sprint. In your daily Scrum meetings, your team can view progress made to backlog items and tasks from the sprint task board.
![](images/99.png)
![images](images/99.png)
During your daily Scrum, you can filter your task board to help focus on items of interest.
- Group by Backlog items or Group by stories to monitor progress of your product backlog items, stories, requirements, or bugs.
![](images/96.png)
![images](images/96.png)
- Group by People when you want to monitor progress of individual team members.
![](images/97.png)
![images](images/97.png)
- Use the Person filter when you want to focus on work assigned to individual team members.
1. Click on **gear icon** for the settings. Select the **Task** tab.
![](images/41.png)
![images](images/41.png)
{% include important.html content= "Rich cards not only provide at-a-glance info of interest to you and your team, they also provide a way for you to update a field without opening the work item. With style rules, you can highlight those work items with colors, based on the criteria you set." %}
1. You can see the Avatar and other information on the cards.
![](images/42.png)
![images](images/42.png)
1. The task board makes quick work of updating both task status and remaining work. Simply drag tasks to a downstream column to reflect if they are in progress or completed.
![](images/43.png)
![images](images/43.png)
1. Updating Remaining Work, preferably prior to the daily Scrum meeting, helps the team stay informed of the progress being made. It also ensures a smoother burndown chart.
Each team member can review the tasks they've worked on and estimate the work remaining. If they've discovered that it's taking longer than expected to complete, they should increase the remaining work for the task. Remaining work should always reflect exactly how much work the team member estimates is remaining to complete the task.
![](images/98.png)
![images](images/98.png)
1. At the end of the sprint, you'll want to perform these final tasks:
@ -317,42 +307,42 @@ Dragging an incomplete item to the product backlog or to a future sprint updates
Portfolio backlogs provide product owners insight into the work performed by several agile feature teams. Product owners can define the high-level goals as Epics or Features, and feature teams can break these down into the user stories they'll prioritize and develop.
![](images/45.png)
![images](images/45.png)
{% include important.html content= "As you advance in the product development, stories can get bigger, making them difficult to handle. We will use the **Feature** Work Item Type for this purpose. With Features, we will group Product Backlog Items to handle an information unit at a bigger level." %}
1. Click on **Features**. You will see list of feature work items available already. If you wish to add few more you can add.
![](images/44.png)
![images](images/44.png)
1. If you've already created your backlog, and now you want to organize it, you can do that most easily by mapping them. Go back to **Backlog items**. Click on **Mapping** to enable as shown.
![](images/46.png)
![images](images/46.png)
![](images/47.png)
![images](images/47.png)
1. With the mapping panel enabled, drag items that are currently unparented to the feature under which they belong. Also, you can drag a backlog item to a different feature to change its parent.
![](images/48.png)
![images](images/48.png)
1. To have a full view of the work escalation and decomposition to tasks Click on **Features**. Expand all the levels by clicking twice on the + icon.
Review the full structure from Feature to tasks.
![](images/49.png)
![images](images/49.png)
{% include important.html content= "It is important to keep track of all artifacts involved in product development, so we can plan and keep track of what has been done, and what needs to be done." %}
1. Go to the **Board**. As we have a Kanban board for checking the states of the Product Backlog Items, we also have a Kanban Board to see the transition and check visually the current state of any particular feature. This is also customizable as we saw in our Sprint Backlog view, and the Product Backlog view.
![](images/50.png)
![images](images/50.png)
1. Click on the first card where the blue badge with the Product Backlog Items. You Check any User Story to mark it as completed.
![](images/51.png)
![images](images/51.png)
1. You can also Drag and Drop any Feature to other state and check how it changes its current state.
![](images/100.png)
![images](images/100.png)
## Exercise 6: Working with VSTS Dashboards
@ -362,67 +352,67 @@ Each tile corresponds to a widget that provides access to one or more features o
1. Go to the default **Dashboard** called Overview.
![](images/52.png)
![images](images/52.png)
{% include note.html content= "The Overview page provides access to a default team dashboard which you can customize by adding, removing, or rearranging the tiles. Each tile corresponds to a widget that provides access to one or more features or functions." %}
1. You can also add dashboards. From the dashboards tab, click the plus icon and enter a dashboard name.
![](images/53.png)
![images](images/53.png)
With the dashboard selected, you can add a widget to the dashboard. Or, you can add a chart to a team dashboard from the Work, Build, or Test hubs.
![](images/54.png)
![images](images/54.png)
When finished, click the **Close** button. Then click the checkmark to take the dashboard out of edit mode.
1. Click on **edit** button to modify the dashboard and add your widgets like **Build Summary, Release Summary, Markdowns** etc.
![](images/101.png)
![images](images/101.png)
1. Add the **Query Tile** to the Test dashboard.
![](images/102.png)
![images](images/102.png)
1. After you add the widget, you may need to configure it. For example, to configure the **Query tile** widget, click the Configure widget icon to open the configuration dialog.
![](images/103.png)
![images](images/103.png)
1. Then select the query and specify any rules you want.
![](images/104.png)
![images](images/104.png)
{% include note.html content= "You can also add conditional formatting, so the widget will visually alert the user." %}
![](images/105.png)
![images](images/105.png)
1. In addition to widgets, you can add a chart to your dashboard. You add an item to a dashboard from the code, work, and build pages. First, make sure you have the team context selected from the Queries page to which you want to add a query or chart. Go to the **Work** tab and click **Queries** on the top left.
![](images/106.png)
![images](images/106.png)
1. Select the query that you want to create the chart from and click the **Charts** option.
![](images/107.png)
![images](images/107.png)
1. Next, click the **New chart** option to bring up the configuration of the chart.
![](images/108.png)
![images](images/108.png)
1. And, you can add a chart to a team dashboard by clicking on the ellipsis and choosing **Add to dashboard** > select the dashboard you want to add the chart to in the context menu.
![](images/109.png)
![images](images/109.png)
![](images/110.png)
![images](images/110.png)
1. You can move or delete a widget from the dashboard by clicking **Edit** dashboard icon to modify your dashboard. You can then drag tiles to reorder their sequence on the dashboard. To remove a widget, click the widget's **Trash** icon or **Delete** icon. When you're finished with your changes, click **Exit edit-dashboard-mode** icon to exit dashboard editing.
![](images/111.png)
![images](images/111.png)
1. You can rename, reorder, or delete a dashboard. Also, you can enable auto-refresh, and the dashboard will automatically update every 5 minutes.
![](images/55.png)
![images](images/55.png)
![](images/56.png)
![images](images/56.png)
## Exercise 7: Process Customization
@ -438,23 +428,23 @@ Once you've created an inherited process, you can customize it, create team proj
1. To open the admin context from the user context, click the gear Settings icon and choose **Account settings**.
![](images/57.png)
![images](images/57.png)
1. Click **Process**.
![](images/58.png)
![images](images/58.png)
1. You can create an inherited process from any one of the three system processes: Agile, Scrum, or CMMI. From the **Process** page, open the context menu of the process you'll use to create an inherited process. Here, we create an inherited process from the **Scrum** system process. Then click on **Create inherited process**.
![](images/59.png)
![images](images/59.png)
1. Enter a name for your process and optionally a description. Something like **MyHealthClinic Scrum template**.
![](images/61.png)
![images](images/61.png)
1. You should see the successful message after creating the inherited template.
![](images/62.png)
![images](images/62.png)
### Customize a field for a process
@ -462,21 +452,21 @@ Each process—Agile, Scrum, or CMMI—contains 100 or more work item fields. Yo
1. Select the inherited template that was created.
![](images/63.png)
![images](images/63.png)
1. Navigate to **Work Item Types** tab. Now we have different options to modify this scrum template.
![](images/64.png)
![images](images/64.png)
1. We will directly add a new field for the PBI Work Item template. Select **Product Backlog item** \| **Layout** \| **New field**. On the definition screen provide a name **HealthClinicTicketId**.
![](images/65.png)
![images](images/65.png)
{% include note.html content= "We are creating a text field for an internal id of the ticketing system inside MyHealthClinic." %}
1. Click on **Layout**. Provide a name for Label as **Ticket ID**. Until now we have only created the field definition, we must add it to the layout of the Work Item. We will create a new group to show our custom information, so all of our customized fields appear together. Provide a name for the group as **MyHealthClinic** and click **Add field**.
![](images/66.png)
![images](images/66.png)
### Change the process referenced by a team project
@ -484,18 +474,18 @@ You can change the process a team project references to an inherited process or
1. At this moment, we have only created the template. We must assign this template to our VSTS Project so that we can use this new field. We can change the process template from a VSTS Project, with their inherited templates or default templates. This is done in the main process screen. Go back to **Process** tab, click on ellipsis button on our new template and select **Change Team Projects to use MyHealthClinic Scrum template**.
![](images/67.png)
![images](images/67.png)
1. Select the **MyHealthClinic** project to change the process and click **>** button.
![](images/68.png)
![images](images/68.png)
1. Click **Ok** button. You should see a successful message after changing the process.
![](images/69.png)
![images](images/69.png)
1. Lets review how the new field appears on our Product Backlog Item Template. Go back to **Work** \| **Backlogs**. Open the first product backlog. Look after **Acceptance Criteria** for the **MyHeathClinic** group. Fill in the information for the **Ticket ID** like **HK89JY13**. Click **Save & close**.
![](images/70.png)
![images](images/70.png)
Once the Work Item is saved, VSTS will also save the new custom information we have added to the PBI and will be available for queries and the rest of the VSTS system.

Просмотреть файл

@ -1,7 +1,7 @@
---
title: Deploy an ASP.NET Web App in Azure App Service
layout: page
sidebar: vsts
sidebar: vsts2
permalink: /labs/vsts/appservice/
folder: /labs/vsts/appservice/
---
@ -10,28 +10,25 @@ Last updated : {{ "now" | date: "%b %d, %Y" }}.
## Overview
[App Service](https://docs.microsoft.com/en-us/azure/app-service/app-service-value-prop-what-is)
is a platform-as-a-service (PaaS) offering of Microsoft Azure. Create
web and mobile apps for any platform or device. Integrate your apps with
SaaS solutions, connect with on-premises applications, and automate your
business processes.
[App Service](https://docs.microsoft.com/en-us/azure/app-service/app-service-value-prop-what-is){:target="_blank"} is a platform-as-a-service (PaaS) offering of Microsoft Azure. Create web and mobile apps for any platform or device. Integrate your apps with SaaS solutions, connect with on-premises applications, and automate your business processes.
**The following illustration shows the completed application:**
![](media/image1.png)
![image1](media/image1.png)
## Prerequisites
1. Visual Studio 2015 Update 3 download from [here](https://www.visualstudio.com/downloads/)
1. Visual Studio 2015 Update 3 download from [here](https://www.visualstudio.com/downloads/){:target="_blank"}
1. Active Azure Account
1. Active Azure Account.
1. Azure SDK for VS 2015 download from [here](https://azure.microsoft.com/en-in/downloads/)
1. Azure SDK for VS 2015 download from [here](https://azure.microsoft.com/en-in/downloads/){:target="_blank"}
1. Microsoft Web Deploy download from [here](https://www.microsoft.com/en-us/download/details.aspx?id=43717)
1. Microsoft Web Deploy download from [here](https://www.microsoft.com/en-us/download/details.aspx?id=43717){:target="_blank"}
Since we already have the source code in the [repo](https://github.com/hsachinraj/DevOps-Immersion-Labs/tree/master/source) we could use the same for our Azure App Service deployment. You can also create your own app
and try deploying the same.
Since we already have the source code in the [repo](https://github.com/hsachinraj/DevOps-Immersion-Labs/tree/master/source) we could use the same for our Azure App Service deployment. You can also create your own app and try deploying the same.
## Exercise 1: Publish the App
1. Load the **01\_Demos\_ASPNET5.sln** from your Visual Studio and wait until the package restoration is complete. If any issues found, try the below workarounds-
@ -42,55 +39,55 @@ and try deploying the same.
{% include note.html content= "Make sure you have the dev environment setup properly as discussed in the pre-requisites section of this lab or you may end up with issues. Upon loading the solution, do a local build to make sure that your application works fine without any issues and you should see your app running locally." %}
![](media/image2.png)
![image2](media/image2.png)
1. Right click on “MyHealth.Web” and select “publish”. You will see a new window automatically open to indicate that the resources will be created in Azure, which will host all application resources. Fill in the required information and make sure to change the type to Web App.
![](media/image3.png)
![image3](media/image3.png)
1. Select a publish target to “Microsoft Azure App Service” since we would be publishing a WebApp to Azure App Service.
![](media/image4.png)
![image4](media/image4.png)
1. Upon selecting the publish target to Microsoft Azure App Service, you will get a new window to fill in the information for publishing. On the top right corner, you can manage your Azure accounts. Select one of the account that you wish to host against and click on “New” to create a new Resource group.
![](media/image5.png)
![image5](media/image5.png)
1. Log into Azure portal from [here](https://portal.azure.com)
1. Log into Azure portal from [here](https://portal.azure.com){:target="_blank"}
![](media/1.png)
![1](media/1.png)
1. Upon login you should see there are no resource group created at the moment in your resource groups.
![](media/image6.png)
![image6](media/image6.png)
1. From your Visual Studio, upon clicking “New”, you will get another window to configure the App Service Plan.
![](media/image7.png)
![image7](media/image7.png)
1. Upon filling out the required information, click on “Services” to add a new service.
![](media/image8.png)
![image8](media/image8.png)
1. You will get a new window when clicked on services. Your web application will have a SQL database in the future, so fill out the required information to configure SQL Server as shown-
![](media/image9.png)
![image9](media/image9.png)
1. Configure SQL database as shown-
![](media/image10.png)
![image10](media/image10.png)
1. Finally, you should see the services upon configured-
![](media/image11.png)
![image11](media/image11.png)
1. Click on create so that the deployment starts by spinning up all those resources on Azure. You can see at the bottom of the window which shows the status of your deployments.
![](media/image12.png)
![image12](media/image12.png)
1. Once successfully created, you should see the resources in your Visual Studio “Server Explorer”.
![](media/image13.png)
![image13](media/image13.png)
1. With the previous steps, you generated the Azure resources for your deployments.
@ -98,34 +95,34 @@ and try deploying the same.
list of available Publish Profiles. If you select Microsoft Azure App Service, you can see a list of available subscriptions and the resource
groups that were previously created. Select the resource group that you created to deploy the web application.
![](media/image14.png)
![image14](media/image14.png)
1. After you select the resource group, the page that opens shows the connection information. The default parameters will populate the fields.
You can modify these fields if required or leave it as it is. To test that the connection works correctly, click on Validate Connection.
![](media/image15.png)
![image15](media/image15.png)
1. In the **Settings** page, you can configure the deployment type depending on whether you require in a Debug/Release mode. You can check
the box for using default connection string at run time.
![](media/image16.png)
![image16](media/image16.png)
1. On the last page, Preview, you can determine the changes that affect the Azure environment.
![](media/image17.png)
![image17](media/image17.png)
1. At last, click Publish. The **Output** window displays information about
the deployment. When its completed, it displays a successful message.
![](media/image18.png)
![image18](media/image18.png)
1. You can see the website in the browser that will open.
![](media/image19.png)
![image19](media/image19.png)
1. When you go back to your Azure portal and see, you have all the resources that was created and published from your Visual Studio.
![](media/image20.png)
![image20](media/image20.png)
1. Once the app is running fine, you can verify by doing some changes to the UI. So that you make sure that your app is actually running in Azure App Service. To open remote files, go to your server explorer from Visual Studio.
@ -137,24 +134,24 @@ and try deploying the same.
1. Save the changes and refresh the browser. You should see the changes reflecting in the site now.
![](media/image21.png)
![image21](media/image21.png)
1. We can also remote debug our application from Azure within our Visual Studio.
Put a breakpoint in your code and Right click and select Publish. You should see the new window as shown-
![](media/image22.png)
![image22](media/image22.png)
1. Publish the debug files so that you can show remote debugging-
![](media/image23.png)
![image23](media/image23.png)
1. Click on Publish. From your Visual Studio, go to **Debug** &gt; click **Attach to Process,** enter the azure websites URL along with its port and select **dnx.exe** process
![](media/image24.png)
![image24](media/image24.png)
![](media/image25.png)
![image25](media/image25.png)
1. Finally, from your Server Explorer &gt; App Service node, attach the debugger. Refresh the browser and you would be hitting your breakpoint wherever you would have set. And thats how you gonna remote debug ASP.NET apps on Azure. To learn more about remote debugging, see [Remote Debug ASP .NET Core Apps on Azure](https://blogs.msdn.microsoft.com/webdev/2016/03/21/remote-debug-aspnet-core-on-azure/)
1. Finally, from your Server Explorer &gt; App Service node, attach the debugger. Refresh the browser and you would be hitting your breakpoint wherever you would have set. And thats how you gonna remote debug ASP.NET apps on Azure. To learn more about remote debugging, see [Remote Debug ASP .NET Core Apps on Azure](https://blogs.msdn.microsoft.com/webdev/2016/03/21/remote-debug-aspnet-core-on-azure/){:target="_blank"}
![](media/image26.png)
![image26](media/image26.png)

Просмотреть файл

@ -1,7 +1,7 @@
---
title: Setting up Continuous Delivery workflow from the Azure Portal
layout: page
sidebar: vsts
sidebar: vsts2
permalink: /labs/vsts/azurecd/
folder: /labs/vsts/azurecd/
---
@ -16,29 +16,29 @@ This lab will walk you through the steps to create CI/CD pipeline directly from
## Configuring the CD pipeline
1. Open your browser and sign in to [Azure Portal](https://portal.azure.com) (make sure you use the same email id for both Azure and VSTS)
1. Open your browser and sign in to [Azure Portal](https://portal.azure.com){:target="_blank"} (make sure you use the same email id for both Azure and VSTS)
1. Create a web app by choosing the "+" icon, selecting **Web App** from the **Web + Mobile** category, and providing a unique name and a resource group.
![](images/1.png)
![1](images/1.png)
1. In your app's menu blade, choose **Continuous Delivery (Preview)** and then choose **Configure**
![](images/2.png)
![2](images/2.png)
1. Select **Choose repository** and select **Visual Studio Team Services**.
![](images/3.png)
![3](images/3.png)
1. Select the **VSTS account, project, repository**, and **branch** where you have your **My Health Clinic** project. When you're done, choose OK.
![](images/4.png)
![4](images/4.png)
{% include note.html content= "In addition to Visual Studio Team Services, you can also select other Git repositories such as GitHub or External Git (a Git repository not hosted in Team Services or GitHub, For instance, BitBucket). You will have to provide the account, repository and branch details and if it is a private repository, you will need to provide the credentials" %}
1. Select **Configure Continuous Delivery** and choose the web application framework you used to develop your app. Since we are targeting .NET Core, select **ASP.NET Core**.
![](images/5.png)
![5](images/5.png)
{% include note.html content= "This choice influences the way that Azure Continuous Delivery builds and packages the app for deployment. At present, ASP.NET, ASP.NET Core, PHP, Python, and Node.js are supported. When you're done, choose **OK**." %}
@ -46,47 +46,47 @@ This lab will walk you through the steps to create CI/CD pipeline directly from
1. You can also select to deploy the changes to staging first (for testing purposes) and then promote the changes to production. Select **Configure deployment** and choose **YES**. Select **Create New** option for **Deployment Slot** and select **OK**.
![](images/7.png)
![7](images/7.png)
1. Choose **OK** to create and execute the Continuous Delivery workflow.
![](images/8.png)
![8](images/8.png)
>The workflow will create a build and a release definition in the Team Services account together with a service endpoint to connect to Azure. A new slot for staging is created for the web app. Once the setup has completed successfully, a build is triggered that builds and packages the application for deployment and when the build has completed successfully, a new release is created and the deployment triggered
1. You can see the status of the steps from the the Activity Log.
![](images/9.png)
![9](images/9.png)
1. In the **Successfully set up Continuous Delivery** item, choose the Build Definition link to open the project containing your app in Team Services, and see the summary for the build definition.
1. In the **Successfully set up Continuous Delivery** item, choose the Build Definition link to open the project containing your app in Team Services, and see the summary for the build definition.
![](images/12.png)
![12](images/12.png)
![](images/11.png)
![11](images/11.png)
1. Choose **Edit** to see the tasks that have been added and configured.
![](images/13.png)
![13](images/13.png)
{% include note.html content= "Different tasks are added to the build definition depending on the app framework you selected. For example, .NET Core task is used for ASP.NET Core apps." %}
1. Select the release definition from **Successfully set up Continuous Delivery**, to open the project containing your app in Team Services, and see the list of releases for this definition. Select **Edit** to see the tasks that have been added and configured.
![](images/14.png)
![14](images/14.png)
1. The **Production** environment, has an **Azure App Service Deploy** task. The latest changes are deployed to the staging slot and then an **Azure App Service Manage** task performs a slot swap between staging and production slots.
![](images/16.png)
![16](images/16.png)
>There are also links in other items in the Activity Log that open commits, builds, build reports, releases, deployment slots, and the deployed app itself, in relevant windows or apps.
1. Click on **Release summary** to view the successful deployment.
![](images/18.png)
![18](images/18.png)
1. Browse to the web app. You will notice that the app is running, but is missing out all the stylings, images etc. You should see something like this as shown below.
![](images/19.png)
![19](images/19.png)
{% include important.html content= "This is because, during the compilation, couple of **js dependencies** are missed out which we will be adding to the build definition in our next task." %}
@ -94,31 +94,31 @@ This lab will walk you through the steps to create CI/CD pipeline directly from
1. Go to your build definition from your VSTS account that was created and edit.
![](images/20.png)
![20](images/20.png)
1. Click on **Add Task** and search for **npm install** from the search box.
![](images/21.png)
![21](images/21.png)
1. Place the task after .NET restore step. Set the **Working folder** to **src/MyHealth.Web** and retain the rest as it is.
![](images/22.png)
![22](images/22.png)
1. Click on **Add task** and search for **bower** task from the search box.
![](images/23.png)
![23](images/23.png)
1. Place the task after npm step. Set the **Bower JSON Path** to **src/MyHealth.Web/bower.json**
![](images/24.png)
![24](images/24.png)
1. Click on **Add task** and search for **gulp** task from the search box.
![](images/25.png)
![25](images/25.png)
1. Place the task after bower step. Set the **Gulp File path** to **src/MyHealth.Web/gulpfile.js**
![](images/26.png)
![26](images/26.png)
1. Click **Save** and Queue the build.
@ -126,12 +126,12 @@ This lab will walk you through the steps to create CI/CD pipeline directly from
1. You can verify this by going to the release hub and check if the deployment is successfully completed. You can refresh the web page and you should see the web page with all the images, stylings etc., as shown below.
![](images/27.png)
![27](images/27.png)
## Disconnecting the configuration for CD pipeline
If in case you have to disconnect, you can stop a deployment to your Azure App Service by choosing **Disconnect** at the top of the **Continuous Deployment** blade. This deletes the Azure Continuous Delivery configuration in the Azure portal and turns off the build triggers in your Team Services account for this configuration.
![](images/17.png)
![17](images/17.png)
To ensure the build and release history is preserved, the build and release definitions are not deleted from Team Services when you disconnect.

Просмотреть файл

@ -1,7 +1,7 @@
---
title: Deploy and Manage Azure Resources
layout: page
sidebar: vsts
sidebar: vsts2
permalink: /labs/vsts/azureresource/
folder: /labs/vsts/azureresource/
---
@ -12,124 +12,100 @@ Last updated : {{ "now" | date: "%b %d, %Y" }}.
Azure Resource Manager enables you to work with the resources in your solution as a group. You can deploy, update, or delete all the resources for your solution in a single, coordinated operation. You use a template for deployment and that template can work for different environments such as testing, staging, and production. Resource Manager provides security, auditing, and tagging features to help you manage your resources after deployment.
## Pre-requisites
## Prerequisites
- Visual Studio 2015 Update 3 (download from [here](https://www.visualstudio.com/downloads/))
In order to complete this lab you will need the Visual Studio 2017 virtual machine provided by Microsoft. Click the button below to launch the virtual machine.
<a href="" class="launch-hol" role="button" target="_blank"><span class="lab-details">Launch the virtual machine</span></a>
- Visual Studio 2017 (download from [here](https://www.visualstudio.com/downloads/){:target="_blank"})
- Active Azure Account
- Azure SDK for VS 2015 (download from [here](https://azure.microsoft.com/en-in/downloads/))
- Azure SDK for Visual Studio 2017 (download from [here](https://azure.microsoft.com/en-in/downloads/){:target="_blank"})
## Please follow the below steps
1. In Visual Studio, go to **File** \| **New Project** and select **Cloud**. Select **Azure Resource Group** and give a name **Azure Cloud Service**
![](images/image1.png)
![image1](images/image1.png)
1. A new window would appear with a list of templates like WebApp+SQL,
Logic App, Ubuntu Server etc. Because we want to create a custom
resource group, we would choose “Blank Template” and click “OK”
1. A new window would appear with a list of templates like WebApp+SQL, Logic App, Ubuntu Server etc. Because we want to create a custom resource group, we would choose “Blank Template” and click “OK”.
![](images/image2.png)
![image2](images/image2.png)
1. You can see the files that was created in Solution Explorer
![](images/image3.png)
![image3](images/image3.png)
We have so many files created, lets see what these files are.
- **Deploy-AzureResourceGroup.ps1:** A PowerShell script that invokes
PowerShell commands to deploy to Azure Resource Manager
- **Deploy-AzureResourceGroup.ps1:** A PowerShell script that invokes PowerShell commands to deploy to Azure Resource Manager
- **azuredeploy.json:** This defines the infrastructure that you want
to deploy to Azure and the parameters that you can provide during
the deployment. It also defines the dependencies between the
resources so they are deployed in the correct order.
- **azuredeploy.json:** This defines the infrastructure that you want to deploy to Azure and the parameters that you can provide during the deployment. It also defines the dependencies between the resources so they are deployed in the correct order.
- **Azuredeployparameters.json:** A parameters file contains values
that the template needs. These are the values that would be passed
onto each deployment.
- **Azuredeployparameters.json:** A parameters file contains values that the template needs. These are the values that would be passed onto each deployment.
- **AzCopy.exe:** AzCopy is a Windows command-line utility designed
for copying data to and from Microsoft Azure Blob, File, and Table
storage using simple commands with optimal performance. You can copy
data from one object to another within your storage account, or
between storage accounts.
- **AzCopy.exe:** AzCopy is a Windows command-line utility designed for copying data to and from Microsoft Azure Blob, File, and Table storage using simple commands with optimal performance. You can copy data from one object to another within your storage account, or between storage accounts.
1. Open **azuredeploy.json** file and also open **JSON Outline** window in
your Visual Studio. You can notice the summary information of the
file at this moment in your JSON Outline. Currently there are no
resources added.
1. Open **azuredeploy.json** file and also open **JSON Outline** window in your Visual Studio. You can notice the summary information of the file at this moment in your JSON Outline. Currently there are no resources added.
![](images/image4.png)
![image4](images/image4.png)
1. You can add and modify existing resources to the JSON document from
the **JSON Outline pane**. Lets add the following resources to the
template as shown below-
1. You can add and modify existing resources to the JSON document from the **JSON Outline pane**. Lets add the following resources to the template as shown below-
{% include note.html content= "To add the resources, right click on the **resources** from your JSON Outline and select **Add New Resource**" %}
![](images/image5.png)
![image5](images/image5.png)
1. Create an App Service Plan with the name **MyHealthClinicDemo**
![](images/image6.png)
![image6](images/image6.png)
<<<<<<< HEAD
1. Create a WebApp with the name **MyHealthClinic** and map the App Service Plan to “MyHealthClinicDemo” that you created in the previous step
=======
1. Create a WebApp with the name **MyHealthClinic** and map the App Service Plan to “MyHealthClinicDemo” that you created in the previous step
>>>>>>> master
![](images/image7.png)
![image7](images/image7.png)
1. Add **Application Settings for WebApps** with the name “connection strings” that is associated with your WebApp
![](images/image8.png)
![image8](images/image8.png)
1. Create a SQL Server with the name **myhealthclinic** and add an instance of Azure SQL database with the name **myhealthclinicdb**
![](images/image9.png)
![image9](images/image9.png)
![](images/image10.png)
![image10](images/image10.png)
1. Upon adding all these resources, you should be able to see the parameters, variables and resources in your **JSON Outline pane** as shown below
![](images/image11.png)
![image11](images/image11.png)
>Now that we have all our resources ready, lets deploy to Azure. Before deploying make sure the resource group doesn't exist so that you can verify post deployment that these resources were actually deployed from your Visual Studio.
1. Login to Azure Portal from [here](https://portal.azure.com) and verify.
![](images/image12.png)
![image12](images/image12.png)
1. Right click on the project from Solution Explorer &gt; click
“Deploy” &gt; select “New Deployment”
1. Right click on the project from Solution Explorer &gt; click “Deploy” &gt; select “New Deployment”
![](images/image13.png)
![image13](images/image13.png)
1. A new window appears; select the Subscription you want to
deploy with. Click on the Resource group drop down and create “new”.
A new popup appears, provide a name for the resource group and
choose a location you want this resource group to be deployed and
click on create
1. A new window appears; select the Subscription you want to deploy with. Click on the Resource group drop down and create “new”. A new popup appears, provide a name for the resource group and choose a location you want this resource group to be deployed and click on create
![](images/image14.png)
![image14](images/image14.png)
1. Click on edit parameters and fill out the required details as shown
![](images/image15.png)
![image15](images/image15.png)
1. Click on Deploy
![](images/image16.png)
![image16](images/image16.png)
1. You will be prompted with a window to enter the db credentials.
Remember the password that you had specified while you were editing
the parameters in step 14
1. You will be prompted with a window to enter the db credentials. Remember the password that you had specified while you were editing the parameters in step 14
![](images/image17.png)
![image17](images/image17.png)
1. Post deployment, you will be seeing the resources in your Azure
![](images/image18.png)
![image18](images/image18.png)

Просмотреть файл

@ -1,7 +1,7 @@
---
title: Continuous Deployment using Visual Studio Team Services
layout: page
sidebar: vsts
sidebar: vsts2
permalink: /labs/vsts/continuousdeployment/
folder: /labs/vsts/continuousdeployment/
---
@ -10,7 +10,7 @@ Last updated : {{ "now" | date: "%b %d, %Y" }}.
## Overview
[Release Management](https://www.visualstudio.com/en-us/docs/release/overview/) is a service in Visual Studio Team Services that helps you automate the deployment and testing of your software in multiple environments. Using Release Management, you can either fully automate the delivery of your software all the way to production, or set up semi-automated processes with approvals and on-demand deployments. It is an essential element of DevOps that helps your team continuously deliver software to your customers at a faster pace and with lower risk.
[Release Management](https://www.visualstudio.com/en-us/docs/release/overview/){:target="_blank"} is a service in Visual Studio Team Services that helps you automate the deployment and testing of your software in multiple environments. Using Release Management, you can either fully automate the delivery of your software all the way to production, or set up semi-automated processes with approvals and on-demand deployments. It is an essential element of DevOps that helps your team continuously deliver software to your customers at a faster pace and with lower risk.
Release Management can be used by all kinds of software developers for continuous automated deployment, or by large enterprises to improve efficiency and collaboration between various teams that participate in release processes.
@ -20,11 +20,9 @@ To use Release Management, you create release definitions, in which you specify
In order to complete this lab you will need-
- **Visual Studio Team Services account**. If you don't have one, you can create from [here](https://www.visualstudio.com/)
- **Visual Studio Team Services account**. If you don't have one, you can create from [here](https://www.visualstudio.com/){:target="_blank"}
- **Visual Studio 2017** or higher version
- You can use the **[VSTS Demo Data generator](http://vstsdemogenerator.azurewebsites.net/Environment/Create)** to provison a project with pre-defined data on to your Visual Studio Team Services account. Please use the ***My Health Clinic*** template to follow the hands-on-labs.
- You can use the **[VSTS Demo Data generator](http://vstsdemogenerator.azurewebsites.net){:target="_blank"}** to provison a project with pre-defined data on to your Visual Studio Team Services account. Please use the **My Health Clinic** template to follow the hands-on-labs.
- If you are not using the VSTS Demo Data Generator, you can clone the code from here
@ -34,65 +32,65 @@ In order to complete this lab you will need-
1. From your account overview page, select your team project. To find your team project, use can search as well.
![](images/1.png)
![1](images/1.png)
1. Choose the **gear icon** to open the administrative control panel.
![](images/2.png)
![2](images/2.png)
1. Go to **Services** and click on **New Service Endpoint** to add one.
![](images/3.png)
![3](images/3.png)
1. From the drop down, select **Azure Resource Manager**.
![](images/4.png)
![4](images/4.png)
1. Provide a Connection name **MHC-Azure** and select the subscription.
![](images/5.png)
![5](images/5.png)
## Exercise 2: Creating Release Definitions
1. Go to your **Release** tab from your VSTS account.
![](images/7.png)
![7](images/7.png)
1. Click on **+** to create a new release definition.
![](images/8.png)
![8](images/8.png)
1. In the Create new release definition dialog, select the **Azure App Service Deployment** template and choose **Next.**
![](images/9.png)
![9](images/9.png)
1. In the next page, select the **build definition** you created earlier and choose **Create.**
![](images/10.png)
![10](images/10.png)
1. This creates a new release definition with one default environment. Rename the Environment to **Dev**.
![](images/11.png)
![11](images/11.png)
1. In the **Azure Subscription**, map the endpoint which we created in **Exercise 1**.
![](images/12.png)
![12](images/12.png)
1. If you would have hosted the WebApp on Azure, you will get an App Service which has to be mapped in your release definition. If you haven't published on Azure, you can follow this [post](https://almvm.azurewebsites.net/labs/vsts/appservice/) to host.
1. If you would have hosted the WebApp on Azure, you will get an App Service which has to be mapped in your release definition. If you haven't published on Azure, you can follow this [post](https://almvm.azurewebsites.net/labs/vsts/appservice/){:target="_blank"} to host.
![](images/13.png)
![13](images/13.png)
1. Select the **MyHealth.Web.zip** file to deploy.
![](images/14.png)
![14](images/14.png)
1. We will replace the database connection string in the **appsettings.json** to point to a database server on Azure.
![](images/48.png)
![48](images/48.png)
1. Go to **Variables** tab and create a variable with the below name and value.
{% include note.html content= "You will need to create a SQL database server on Azure prior to this step. If you have an existing SQL Server on Azure, you can use it, Otherwise follow this [blog post](https://docs.microsoft.com/en-us/azure/sql-database/sql-database-get-started-portal) for step-by-step intsructions." %}
{% include note.html content= "You will need to create a SQL database server on Azure prior to this step. If you have an existing SQL Server on Azure, you can use it, Otherwise follow this [blog post](https://docs.microsoft.com/en-us/azure/sql-database/sql-database-get-started-portal){:target=\"_blank\"} for step-by-step intsructions." %}
- Name: ConnectionStrings.DefaultConnection
@ -102,31 +100,31 @@ In order to complete this lab you will need-
1. Create a **new release** and select the **latest** build to deploy it to the single environment in the definition.
![](images/15.png)
![15](images/15.png)
![](images/16.png)
![16](images/16.png)
1. Go to the release definition log to view the process.
![](images/17.png)
![17](images/17.png)
![](images/18.png)
![18](images/18.png)
1. You can go to the Azure Portal and get the existing Web App Service URI.
![](images/19.png)
![19](images/19.png)
1. Click on **Private area** to login.
- Username: User
- Password: P2ssw0rd@1
![](images/20.png)
![20](images/20.png)
![](images/21.png)
![21](images/21.png)
1. Once logged in, you should see this dashboard.
![](images/22.png)
![22](images/22.png)
## Exercise 3: Manage Releases
@ -134,7 +132,7 @@ In order to complete this lab you will need-
1. Return to the **Pipeline** view of the release by selecting Releases, then your Release definition, then Edit.
![](images/23.png)
![23](images/23.png)
- **Manual:** No releases are initiated automatically when a new build of the source artifacts occurs. All releases for this release definition must be created manually by choosing the Release icon in a release definition or from a build summary.
@ -144,23 +142,25 @@ In order to complete this lab you will need-
{% include note.html content= "However, even though a release is automatically created, it might not be deployed automatically to an environment. To enable automatic deployment, you must also configure environment deployment triggers in each environment for which you want automated deployments to occur. The lower section of the Triggers tab lists the environments configured for this release definition." %}
> - **Continuous Deployment:** A new release is created automatically when Release Management detects new built artifacts are available. When you select this option, a drop-down list enables you to select which of the artifact sources linked to this release definition will trigger a new release.
- **Continuous Deployment:** A new release is created automatically when Release Management detects new built artifacts are available. When you select this option, a drop-down list enables you to select which of the artifact sources linked to this release definition will trigger a new release.
![](images/24.png)
> - **Scheduled:** A new release is created based on a schedule you specify. When you select this option, a set of controls enables you to select the days of the week and the time of day that Release Management will automatically create a new release.
![24](images/24.png)
> **NOTE:** However, even though a release is automatically created, it might not be deployed automatically to an environment. To enable automatic deployment, you must also configure environment deployment triggers in each environment for which you want automated deployments to occur.
- **Scheduled:** A new release is created based on a schedule you specify. When you select this option, a set of controls enables you to select the days of the week and the time of day that Release Management will automatically create a new release.
{% include important.html content= "The deployment conditions dialog for the environment shows the currently configured environment deployment triggers and deployment queuing policies. Users with permission to edit release definitions can edit the deployment conditions here, including environment deployment triggers and deployment queuing policies." %}
{% include note.html content= "However, even though a release is automatically created, it might not be deployed automatically to an environment. To enable automatic deployment, you must also configure environment deployment triggers in each environment for which you want automated deployments to occur." %}
{% include important.html content= "The deployment conditions dialog for the environment shows the currently configured environment deployment triggers and deployment queuing policies. Users with permission to edit release definitions can edit the deployment conditions here, including environment deployment triggers and deployment queuing policies." %}
![25](images/25.png)
![](images/25.png)
2. In the **Pipeline** tab, select the icon of a person at either end of the environment for pre and post deployment conditions.
> The deployment conditions for the environment shows the currently configured environment deployment triggers and deployment queuing policies. Users with permission to edit release definitions can edit the deployment conditions here.
Read more in the <a href=https://docs.microsoft.com/en-us/vsts/build-release/concepts/definitions/release/triggers >Deployment Trigger documentation<a/>.
<img src="images/23-4.png" width="624"/>
<img src="images/23-5.png" width="400"/>
>The deployment conditions for the environment shows the currently configured environment deployment triggers and deployment queuing policies. Users with permission to edit release definitions can edit the deployment conditions here. Read more in the [Deployment Trigger](https://docs.microsoft.com/en-us/vsts/build-release/concepts/definitions/release/triggers){:target="_blank"} documentation.
![23-4](images/23-4.png)
![23-5](images/23-5.png)
### Task 2: Artifacts
@ -169,11 +169,12 @@ An artifact is a deployable component of your application. Team Services has the
1. Click on **Artifacts** tab from your release definition.
{% include important.html content= "
1. When authoring a release definition, you link the appropriate artifact sources to your release definition. For example, you might link a release definition to a Team Build build definition, or to a Jenkins project.
2. When creating a release, you specify the exact version of these artifact sources; for example, the number of a build coming from Team Build, or the version of a build coming from a Jenkins project.
1. When authoring a release definition, you link the appropriate artifact sources to your release definition. For example, you might link a release definition to a Team Build build definition, or to a Jenkins project.<br/>
2. When creating a release, you specify the exact version of these artifact sources; for example, the number of a build coming from Team Build, or the version of a build coming from a Jenkins project.<br/>
3. After a release is created, you cannot change these versions. A release is fundamentally defined by the versioned artifacts that make up the release. As you deploy the release to various environments, you will be deploying and validating the same artifacts in all environments." %}
![](images/26.png)
![26](images/26.png)
2. Click **Link an artifact source** and fill the required details.
@ -182,15 +183,17 @@ An artifact is a deployable component of your application. Team Services has the
- Project: The project that you are interested to deploy.
- Source(Build Definition): The build definition that you wish to deploy. Select the created build from our Continuous Integration exercise.
- Default Version: Select the latest.
{% include important.html content= "
1. A single release definition can be linked to multiple artifact sources. In this case, when you create a release, you specify individual versions for each of these sources.
1. A single release definition can be linked to multiple artifact sources. In this case, when you create a release, you specify individual versions for each of these sources.<br/>
2. You can link multiple artifact sources to the same release definition. A common example for this is when you deploy micro services, each one coming from a different build definition. Another example is where you manage the application code in one repository and the configuration files in a different repository." %}
{% include note.html content= "At present, Release Management can trigger creation of new releases from only one of the artifact sources. When a new release is created, the latest versions of all the other sources are deployed." %}
![](images/27.png)
![27](images/27.png)
### Task 3: Variables
@ -202,7 +205,7 @@ You can use the default variables, and define custom variables, that enable you
1. Click on **Variables** tab from your release definition.
![](images/28.png)
![28](images/28.png)
1. Using variables at both release definition and environment scope helps you to:
@ -211,11 +214,11 @@ You can use the default variables, and define custom variables, that enable you
1. Click **Enviroment variables**. You can view and edit the variables defined for individual environments in the release definition in this tab by selecting Environment variables from the list at the right of the toolbar.
![](images/29.png)
![29](images/29.png)
1. Go back to your environments and select **...**. Click on **configure variables**.
![](images/30.png)
![30](images/30.png)
1. Similar to our build variables, we can also configure release variables and could be used during our deployments.
@ -227,7 +230,7 @@ You can show additional information as release executes by running the entire re
1. To initiate debug mode for an entire release, add a variable named System.Debug with the value true.
![](images/31.png)
![31](images/31.png)
1. Save the release definition and queue a new release to check the log.
@ -235,11 +238,11 @@ You can show additional information as release executes by running the entire re
1. Select your release definition from the list of releases that you have.
![](images/32.png)
![32](images/32.png)
2. Open the shortcut menu by clicking on **...** and select Clone, Export etc to clone or export the release definition.
![](images/33.png)
![33](images/33.png)
- **Clone** to create a complete copy of the selected definition with "Copy" appended to the name.
@ -249,7 +252,7 @@ You can show additional information as release executes by running the entire re
A release definition is a collection of environments. An environment is a logical entity that represents where you want to deploy a release. Physically, the deployment in an environment may happen to a collection of servers, a cloud, multiple clouds, or an app store. The deployment steps in an environment are described using tasks.
![](images/34.png)
![34](images/34.png)
### Task 1: Adding environments
@ -257,13 +260,13 @@ A release definition is a collection of environments. An environment is a logica
1. Click on **Add enviroment** and choose **Create new environment.**
![](images/35.png)
![35](images/35.png)
1. Select **Azure App Service Deployment** template.
1. Choose Next and select the pre-deployment approval, trigger, and queue settings for the new environment.
![](images/36.png)
![36](images/36.png)
1. You can add as many environments with different tasks for your deployment based on the needs.
@ -273,13 +276,13 @@ A release definition often contains several environments such as development, te
1. Select the existing enviroment and choose Clone environment on the shortcut menu that opens from the environment's ellipses (...).
![](images/37.png)
![37](images/37.png)
1. Choose Next and select the pre-deployment approval, trigger, and queue settings for the new environment.
1. Choose Create and then edit the new environment name as required.
![](images/38.png)
![38](images/38.png)
1. After you have created and configured your environments, you could add tasks to them as we saw in the previous steps.
@ -293,15 +296,15 @@ You can also create your own custom environment templates from an environment yo
1. Select the existing enviroment and choose **Save as template** on the ellipses (...).
![](images/39.png)
![39](images/39.png)
1. Enter name, description and choose OK.
![](images/40.png)
![40](images/40.png)
1. The custom templates you create appear in the Custom tab of the Create new release definition dialog.
![](images/41.png)
![41](images/41.png)
### Task 4: Approvals and Approvers
@ -309,24 +312,24 @@ You can define approvers for each environment in a release definition. When a re
1. Select one of the environment and click on ellipsis (...). Select **Assign Approvers**.
![](images/42.png)
![42](images/42.png)
1. In the Approvals tab of the Configure dialog you specify details for pre-deployment and post-deployment approvers. When the Automatic checkbox is set for an approval step, the deployment is automatically approved.
![](images/43.png)
![43](images/43.png)
1. When you select the Specific Users option, you can specify and edit one or more approvers for an approval step. You can type part of the name and choose from the drop-down list of matching user names defined for the project.
![](images/44.png)
![44](images/44.png)
1. You can add multiple approvers for both pre-deployment and post-deployment settings. When you add multiple approvers, you can also control how they can approve the deployment.
![](images/45.png)
![45](images/45.png)
1. Save the release definition and queue a new release. Go to the release definition log to view the process.
![](images/46.png)
![46](images/46.png)
1. Click **Approve or reject**. The release will continue deploying in the desired enviroment.
![](images/47.png)
![47](images/47.png)

Просмотреть файл

@ -1,7 +1,7 @@
---
title: Continuous Integration using Visual Studio Team Services
layout: page
sidebar: vsts
sidebar: vsts2
permalink: /labs/vsts/continuousintegration/
folder: /labs/vsts/continuousintegration/
---
@ -14,7 +14,7 @@ Continuous integration (CI) is the process of integrating your code into a share
When many developers collaborate on complex software projects, it can be a long and unpredictable process to integrate different parts of code together. However, you can make this process more efficient and more reliable if you build and deploy your project continuously.
Visual Studio Team Services simplifies <a href="https://www.visualstudio.com/en-us/docs/build/overview/">Continuous integration</a> for your applications regardless of what platform you are targeting, or what language you are using. VSTS Team Build allows you to:
Visual Studio Team Services simplifies [Continuous Integration](https://www.visualstudio.com/en-us/docs/build/overview/){:target="_blank"} for your applications regardless of what platform you are targeting, or what language you are using. VSTS Team Build allows you to:
- Build on Linux, Mac, and Windows
@ -26,231 +26,227 @@ Visual Studio Team Services simplifies <a href="https://www.visualstudio.com/en-
- Track your builds with real-time build status
## Pre-requisites
In order to complete this lab you will need-
In order to complete this lab you will need-
- **Visual Studio Team Services account**. If you don't have one, you can create from <a href="https://www.visualstudio.com/">here</a>
- Visual Studio 2017 virtual machine provided by Microsoft. Click the button below to launch the virtual machine.
- **Visual Studio 2017** or higher version
<a href="" class="launch-hol" role="button" target="_blank"><span class="lab-details">Launch the virtual machine</span></a>
- You can use the **[Visual Studio team Services Demo Data generator](http://vstsdemogenerator.azurewebsites.net/Environment/Create)** to provision a project with pre-defined data on to your Visual Studio Team Services account. Please use the ***My Health Clinic*** template to follow the hands-on-labs.
- **Visual Studio Team Services account**. If you don't have one, you can create from [here](https://www.visualstudio.com/){:target="_blank"}
If you are not using the VSTS Demo Data Generator, you can clone the code from this [GitHub repository](https://github.com/Microsoft/myhealthclinic2017)
- You can use the **[VSTS Demo Data Generator](http://vstsdemogenerator.azurewebsites.net/Environment/Create){:target="_blank"}** to provision a project with pre-defined data on to your Visual Studio Team Services account. Please use the ***My Health Clinic*** template to follow the hands-on-labs.
If you are not using the VSTS Demo Data Generator, you can clone the code from this [GitHub repository](https://github.com/Microsoft/myhealthclinic2017){:target="_blank"}
## Exercise 1: Build ASP.NET Core
ASP.NET Core is a lean and composable framework for building web and cloud applications. Here we'll show you how to automatically build the **HealthClinic ASP.NET Core** application.
If you have provisioned your project using the demo generator, the build definition should have been automatically created for you. You can follow the labs without adding or modifying the tasks to understand how a build pipeline works in VSTS. Otherwise, you can follow the steps to create a new one.
If you have provisioned your project using the demo generator, the build definition should have been automatically created for you. You can follow the labs without adding or modifying the tasks to understand how a build pipeline works in VSTS. Otherwise, you can follow the steps to create a new one.
### Task1 : Creating New Build Definition
1. From your VSTS account overview page, select your team project.
1. From your VSTS account overview page, select your team project.
2. Click **Build and Release** tab and select **Builds**.
1. Click **Build and Release** tab and select **Builds**.
3. Click on **New** to create build definition.
1. Click on **New** to create build definition.
<img src="images/1.png" width="624"/>
![1](images/1.png)
4. You can start by selecting a template that will add a set of tasks and apply typical settings for the kind of app that you are building or start with an empty process and build from scratch. There is a template available for building ASP.NET Core apps. We will use that. Select **ASP.NET Core** and click apply to apply the template for the build definition
1. You can start by selecting a template that will add a set of tasks and apply typical settings for the kind of app that you are building or start with an empty process and build from scratch. There is a template available for building ASP.NET Core apps. We will use that. Select **ASP.NET Core** and click apply to apply the template for the build definition.
<img src="images/3.png" width="624"/>
![3](images/3.png)
5. As you can see, the template has applied a set of tasks that are typically involved in building an ASP.NET Core app. In many cases, you might not require to do anything further other than just pointing to the correct repo and branch and you will be good to go. In this case, you will need to make some customizations to the build.
1. As you can see, the template has applied a set of tasks that are typically involved in building an ASP.NET Core app. In many cases, you might not require to do anything further other than just pointing to the correct repo and branch and you will be good to go. In this case, you will need to make some customizations to the build.
Select the **Process** task which states that some settings need attention. You will need to select the build agent where you want to run this build. You can choose to run the builds on an-premise agent or use the agents hosted on Azure. We will use the **Hosted VS2017** agent as it has the .NET core framework and all other components that are required to build the app.
1. Select the **Process** task which states that some settings need attention. You will need to select the build agent where you want to run this build. You can choose to run the builds on an-premise agent or use the agents hosted on Azure. We will use the **Hosted VS2017** agent as it has the .NET core framework and all other components that are required to build the app.
<img src="images/4-1.png" width="624"/>
![4-1](images/4-1.png)
Next select the **Get sources** task. You can fetch your code from various source including ***GitHub, SVN, or any other Git repository*** but since you have our code in the VSTS project itself, select **This Project**. Change the repository and branch if it is not already pointing to the correct ones.
1. Next select the **Get sources** task. You can fetch your code from various source including ***GitHub, SVN, or any other Git repository*** but since you have our code in the VSTS project itself, select **This Project**. Change the repository and branch if it is not already pointing to the correct ones.
<img src="images/4.png" width="624"/>
![4](images/4.png)
6. The next tasks **Restore** needs no change. Leave it as it is.
1. The next tasks **Restore** needs no change. Leave it as it is.
7. Save the build definition.
1. Save the build definition.
8. Rename the build definition by clicking on the name and then changing it to **MHC.Web.CI**. Then save the build definition again.
1. Rename the build definition by clicking on the name and then changing it to **MHC.Web.CI**. Then save the build definition again.
<img src="images/5-1.png" width="624"/>
![5-1](images/5-1.png)
The My Health Clinic web application depends on node components and additional libraries. You will need to add tasks to download and install these packages before it can be built. We will see how to add tasks to our build definition in the next task.
The My Health Clinic web application depends on node components and additional libraries. You will need to add tasks to download and install these packages before it can be built. We will see how to add tasks to our build definition in the next task.
### Task 2: Adding Build Tasks
1. Select **Add Task** and then select **Package** to find tasks relating to the category. Select **npm** and click **Add**. Place it after the **Build** task. You can drag and drop tasks to reorder them.
<img src="images/5.png" />
![5](images/5.png)
2. Change the *working folder* to ***src/MyHealth.Web***. The project has the json file which the npm install command will require to know what packages needs to be installed.
<img src="images/6.png" width="624"/>
> Next, you will need to run *bower* to install the web packages. You can run bower commands using the **Command Line/Shell Script** utility but a better way to do that would be is to use the **Bower** task. This task is not out-of-the-box and needs to be installed from the Marketplace.
If you didn't install Bower when using the VSTS Demo Generator then from an another tab, navigate to the <a target ="blank" href="https://marketplace.visualstudio.com/items?itemName=touchify.vsts-bower">Bower extension page</a> on the Marketplace and install it. Close the tab when you are done to return back to the tab where you are editing the build definition.
1. Change the *working folder* to ***src/MyHealth.Web***. The project has the json file which the npm install command will require to know what packages needs to be installed.
3. Save the build definition and refresh the page. You should see the **Bower** task under the *Package* tab. Select the task and click **Add**
![6](images/6.png)
<img src="images/7.png" />
{% include note.html content= "Next, you will need to run *bower* to install the web packages. You can run bower commands using the **Command Line/Shell Script** utility but a better way to do that would be is to use the **Bower** task. This task is not out-of-the-box and needs to be installed from the Marketplace.<br/>
4. Select the **Bower** task and change the *Bower JSON Path* to point to the *bower.json* file under the MyHealth.Web folder
If you didn't install Bower when using the VSTS Demo Generator then from an another tab, navigate to the [Bower extension page](https://marketplace.visualstudio.com/items?itemName=touchify.vsts-bower){:target=\"_blank\"} on the Marketplace and install it. Close the tab when you are done to return back to the tab where you are editing the build definition." %}
<img src="images/8.png" />
1. Save the build definition and refresh the page. You should see the **Bower** task under the *Package* tab. Select the task and click **Add**
5. Next you will need the **gulp** task. Gulp can carry out tasks such as compressing files. Select **Add Task** and look for the **Gulp from the **Build** section. Add that to the build definition.
![7](images/7.png)
<img src="images/8-1.png"/>
1. Select the **Bower** task and change the *Bower JSON Path* to point to the *bower.json* file under the MyHealth.Web folder
6. Change the *Gulp file path* to point to the gulp file under the MyHealth.Web folder
![8](images/8.png)
<img src="images/9.png"/>
1. Next you will need the **gulp** task. Gulp can carry out tasks such as compressing files. Select **Add Task** and look for the **Gulp from the **Build** section. Add that to the build definition.
7. The rest of the tasks do not need any change. You are ready to run the build. You can make the builds to run as a *Continuous Integration* build so that it runs upon every check-in on the branch. We will see that later in the lab. For now, we will run it manually.
![8-1](images/8-1.png)
8. Select **Save & queue** to save the build definition and queue the build immediately. If you have already saved the build definition, select **Queue** from the menu
1. Change the *Gulp file path* to point to the gulp file under the MyHealth.Web folder
<img src="images/14.png" width="624"/>
9. You will see the build waiting to find an agent to run. It may take a couple of minutes and it once gets an agent, the build starts executing. You can see the output logs in real-time as the build is running. You can also download the log later should you need to a deeper analysis.
![9](images/9.png)
<img src="images/18.png"/>
1. The rest of the tasks do not need any change. You are ready to run the build. You can make the builds to run as a *Continuous Integration* build so that it runs upon every check-in on the branch. We will see that later in the lab. For now, we will run it manually.
10. Once all the steps are completed, you can select the *Build number* on the top to get the detailed information on the run. The **Summary** tab shows the summary of the run including the who triggered it, at what time, what code and commit was fetched, associated work items, tests, etc.,
1. Select **Save & queue** to save the build definition and queue the build immediately. If you have already saved the build definition, select **Queue** from the menu
<img src="images/19.png"/>
![14](images/14.png)
11. The **Timeline** view will help you find out how much time did every task to run. If the build definition included publish task and if any files were published, you can find it from the **Artifacts** tab.
<img src="images/20.png"/>
1. You will see the build waiting to find an agent to run. It may take a couple of minutes and it once gets an agent, the build starts executing. You can see the output logs in real-time as the build is running. You can also download the log later should you need to a deeper analysis.
We will now see how you can deal with variables, setup different trigger mechanisms, etc on the build.
![18](images/18.png)
1. Once all the steps are completed, you can select the *Build number* on the top to get the detailed information on the run. The **Summary** tab shows the summary of the run including the who triggered it, at what time, what code and commit was fetched, associated work items, tests, etc.
![19](images/19.png)
1. The **Timeline** view will help you find out how much time did every task to run. If the build definition included publish task and if any files were published, you can find it from the **Artifacts** tab.
![20](images/20.png)
We will now see how you can deal with variables, setup different trigger mechanisms, etc on the build.
## Exercise 2: Defining attributes for the build definition
1. Go to your **Build** from your VSTS account.
2. Edit the build definition and click on **Options**.
1. Edit the build definition and click on **Options**.
<img src="images/21.png" width="624"/>
![21](images/21.png)
> **Description:** If you specify a description here, it is shown near the name of the build definition when you select it in the Build area of your team project.
**Description:** If you specify a description here, it is shown near the name of the build definition when you select it in the Build area of your team project.
> **Build number format:** If you leave it blank, your completed build is given a unique integer as its name. But you can give completed builds much more useful names that are meaningful to your team. You can use a combination of tokens, variables, and underscore characters.
**Build number format:** If you leave it blank, your completed build is given a unique integer as its name. But you can give completed builds much more useful names that are meaningful to your team. You can use a combination of tokens, variables, and underscore characters.
> **Default agent queue:** Select the queue that's attached to the pool that contains the agents you want to run this definition.
**Default agent queue:** Select the queue that's attached to the pool that contains the agents you want to run this definition.
To build your code or deploy your software you need at least one agent, and as you add more code and people, you'll eventually need more.
> **Build job authorization scope:** Specify the authorization scope for a build job.
**Project Collection**, if the build needs access to multiple team projects.
**Build job authorization scope:** Specify the authorization scope for a build job. **Project Collection**, if the build needs access to multiple team projects.
> **Demands:** Use demands to make sure that the capabilities your build needs are present on the build agents that run it. Demands are asserted automatically by build steps or manually by you.
**Demands:** Use demands to make sure that the capabilities your build needs are present on the build agents that run it. Demands are asserted automatically by build steps or manually by you.
3. Click on **Triggers**. On the Triggers tab you specify the events that will trigger the build. You can use the same build definition for both CI and Scheduled builds.
1. Click on **Triggers**. On the Triggers tab you specify the events that will trigger the build. You can use the same build definition for both CI and Scheduled builds.
> **Continuous integration (CI):** Select this trigger if you want the build to run whenever someone checks in code.
**Continuous integration (CI):** Select this trigger if you want the build to run whenever someone checks in code.
> **Batch changes:** Select this check box if you have a lot of team members uploading changes often and you want to reduce the number of builds you are running. If you select this option, when a build is running, the system waits until the build is completed and then queues another build of all changes that have not yet been built. If you are using batched changes, you can also specify a maximum number of concurrent builds per branch.
**Batch changes:** Select this check box if you have a lot of team members uploading changes often and you want to reduce the number of builds you are running. If you select this option, when a build is running, the system waits until the build is completed and then queues another build of all changes that have not yet been built. If you are using batched changes, you can also specify a maximum number of concurrent builds per branch.
> **Branch filters:** You can specify the branches where you want to trigger builds. You can use wildcard characters.
**Branch filters:** You can specify the branches where you want to trigger builds. You can use wildcard characters.
> **Path filters:** You can also specify path filters to reduce the set of files that you want to trigger a build.
**Path filters:** You can also specify path filters to reduce the set of files that you want to trigger a build.
<img src="images/22.png" width="624"/>
![22](images/22.png)
4. Click on **Scheduled**. Select the days and time when you want to run the build and configure accordingly.
1. Click on **Scheduled**. Select the days and time when you want to run the build and configure accordingly.
<img src="images/23.png" width="624"/>
5. Click on the **Retention** tab. In most cases you don't need completed builds longer than a certain number of days. Your retention policies automatically delete old completed builds to minimize clutter.
You modify these policies on the Retention tab of your build definition.
![23](images/23.png)
6. Click on the **Variables** tab. We can add new user-defined variables.
1. Click on the **Retention** tab. In most cases you don't need completed builds longer than a certain number of days. Your retention policies automatically delete old completed builds to minimize clutter. You modify these policies on the Retention tab of your build definition.
> - BuildConfiguration: release
> - BuildPlatform: any cpu
> - WebDir: src/MyHealth.Web
> **Secret Variables:** We recommend that you make the variable **Secret** if it contains a password, keys, or some other kind of data that you need to avoid exposing.
1. Click on the **Variables** tab. We can add new user-defined variables.
<img src="images/24.png" width="624"/>
- BuildConfiguration: release
- BuildPlatform: any cpu
- WebDir: src/MyHealth.Web
**Secret Variables:** We recommend that you make the variable **Secret** if it contains a password, keys, or some other kind of data that you need to avoid exposing.
7. Now, modify the build steps to use the new variables. Click on the **npm** task and use the **WebDir** variable in the working directory property.
![24](images/24.png)
<img src="images/26.png" width="624"/>
1. Now, modify the build steps to use the new variables. Click on the **npm** task and use the **WebDir** variable in the working directory property.
8. Save the build.
![26](images/26.png)
1. Save the build.
## Exercise 3: Working with Artifacts
An artifact is a deployable component of your application. Visual Studio Team Services has the ability to explicitly manage the content of artifacts during a build.
An artifact is a deployable component of your application. Visual Studio Team Services has the ability to explicitly manage the content of artifacts during a build.
1. Go to the build definition and select the **Publish** task. Note that the task has two properties:
* **Publish Web Projects** - When selected, the task will try to find the web projects in the repo and run publish command on them. A presence of *wwconfig* file or *wwwroot* folder is used to identify web projects
* **Zip Published Projects** - When this option is selected, the folder created by the publish command is zipped
1. Go to the build definition and select the **Publish** task. Note that the task has two properties:
<img src="images/33.png" width="624"/>
- **Publish Web Projects** - When selected, the task will try to find the web projects in the repo and run publish command on them. A presence of *wwconfig* file or *wwwroot* folder is used to identify web projects
2. Save and queue the build. Once the build is completed, go to the build summary and select the **Artifacts** tab. Select the **Explore** button to view the published artifacts
- **Zip Published Projects** - When this option is selected, the folder created by the publish command is zipped
<img src="images/34.png" width="624"/>
![33](images/33.png)
3. Expand the drop folder and you should see **MyHealth.Web.zip** file created in the folder
<img src="images/35.png" />
1. Save and queue the build. Once the build is completed, go to the build summary and select the **Artifacts** tab. Select the **Explore** button to view the published artifacts.
4. We will need the zip file for deployment. We will cover that in the ***Continious Delivery*** lab
![34](images/34.png)
1. Expand the drop folder and you should see **MyHealth.Web.zip** file created in the folder.
![35](images/35.png)
1. We will need the zip file for deployment. We will cover that in the ***Continious Delivery*** lab.
## Exercise 4: Running Tests with Build
It's always a good practice to run tests with your build to verify the integration.
It's always a good practice to run tests with your build to verify the integration. The ***MyHealth.API.IntegrationTests*** project contains the unit tests.
The ***MyHealth.API.IntegrationTests*** project contains the unit tests.
<img src="images/36.png" />
![36](images/36.png)
If you open the My Health Clinic solution in Visual Studio, you will see the following test cases in the "Test Explorer" window.
<img src="images/37.png" />
![37](images/37.png)
The **Test** task that we have in the build defintion will need to be modified to point to the test projects in the repository.
The **Test** task that we have in the build defintion will need to be modified to point to the test projects in the repository.
1. Go to your build definition and select edit.
1. Go to your build definition and select edit.
2. Select the **Process** task. Change the *Project(s) to test* parameter as follows:
* **ProjectS) to test**: test/MyHealth.API.IntegrationTests/*.csproj
1. Select the **Process** task. Change the *Project(s) to test* parameter as follows:
<img src="images/38-1.png" width="624"/>
- **Projects to test**: test/MyHealth.API.IntegrationTests/*.csproj
3. Select the **Test** task. Change the *Arguments* parameter as follows:
* **Arguments**: --configuration $(BuildConfiguration) --logger "trx;LogFileName=TestResults.xml"
![38-1](images/38-1.png)
<img src="images/38.png" width="624"/>
1. Select the **Test** task. Change the *Arguments* parameter as follows:
4. We will use the **Publish Test Result** task to publish the results of the tests to the Build summary section. Add the task and change the parameters as follows:
- **Arguments**: --configuration $(BuildConfiguration) --logger "trx;LogFileName=TestResults.xml"
![38](images/38.png)
1. We will use the **Publish Test Result** task to publish the results of the tests to the Build summary section. Add the task and change the parameters as follows:
- Test Result Format: VSTest
- Test Results Files: **/TestResults.xml
- Always run: true - to be sure that the results are published when the unit tests fail.
<img src="images/40.png" width="624"/>
<img src="images/40-1.png" width="624"/>
5. Save the build and queue.
![40](images/40.png)
6. You should see the build summary showing along with Test results.
![40-1](images/40-1.png)
<img src="images/41.png" width="624"/>
1. Save the build and queue.
7. Click on **Test** to view detailed summary of Test Results. Make sure that you selected *All* for the **Outcome** filter
1. You should see the build summary showing along with Test results.
<img src="images/42.png" width="624"/>
![41](images/41.png)
8. We now have an automated CI build with automated tests that wil run every time a change is committed and verify the changes are not breaking the code. The next lab will cover **Continuous Delivery (CD)** - the ability to release frequently and consistently into various environments including dev, staging, production.
1. Click on **Test** to view detailed summary of Test Results. Make sure that you selected *All* for the **Outcome** filter.
![42](images/42.png)
1. We now have an automated CI build with automated tests that wil run every time a change is committed and verify the changes are not breaking the code. The next lab will cover **Continuous Delivery (CD)** - the ability to release frequently and consistently into various environments including dev, staging, production.

Просмотреть файл

@ -1,7 +1,7 @@
---
title: Exploratory Testing and Feedback Management with Visual Studio Team Services
layout: page
sidebar: vsts
sidebar: vsts2
permalink: /labs/vsts/exploratorytesting/
folder: /labs/vsts/exploratorytesting/
---
@ -16,18 +16,17 @@ The Test & Feedback extension helps teams perform exploratory testing and provid
In order to complete this lab you will need-
- **Visual Studio Team Services account**. If you don't have one, you can create from [here](https://www.visualstudio.com)
- **Visual Studio Team Services account**. If you don't have one, you can create from [here](https://www.visualstudio.com/team-services){:target="_blank"}
- **Visual Studio 2017** or higher version
- You can use the **[VSTS Demo Data generator](http://vstsdemogenerator.azurewebsites.net/Environment/Create)** to provison a project with pre-defined data on to your Visual Studio Team Services account. Please use the ***My Health Clinic*** template to follow the hands-on-labs.
- You can use the **[VSTS Demo Data Generator](http://vstsdemogenerator.azurewebsites.net){:target="_blank"}** to provison a project with pre-defined data on to your Visual Studio Team Services account. Please use the ***My Health Clinic*** template to follow the hands-on-labs.
- If you are not using the VSTS Demo Data Generator, you can clone the code from here
**Using the extension**
### Using the extension
Using the extension is a simple, three step process.
![](images/1.png)
![1](images/1.png)
**Capture your findings** quickly and easily using the tools in the extension. Capture notes, screenshots with annotations, and screen recordings to describe your findings and highlight issues. Additionally, in the background the extension automatically captures rich data such as user actions as an image action log, page load data, and system information about the browser, operating system, memory, and more that can serve as a starting point for debugging.
@ -39,86 +38,85 @@ As users perform exploratory testing, you can get insights from the sessions in
## Task 1: Installing the Test & Feedback extension
For using the Test & Feedback extension you will need Chrome, as it is the only browser compatible with the extension at this moment, so you need to [download and install Chrome](https://www.google.com/chrome/browser/desktop/).
For using the Test & Feedback extension you will need Chrome, as it is the only browser compatible with the extension at this moment, so you need to [download and install Chrome](https://www.google.com/chrome/browser/desktop/){:target="_blank"}.
1. Go to [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms.vss-exploratorytesting-web/) Test & Feedback</a> and install the extension.
1. Go to [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms.vss-exploratorytesting-web/){:target="_blank"} Test & Feedback and install the extension.
![](images/2.png)
![2](images/2.png)
1. Add the Test & Feedback extension to Chrome.
![](images/3.png)
![](images/4.png)
![3](images/3.png)
![4](images/4.png)
1. Go to Chrome and open the extension.
![](images/5.png)
![5](images/5.png)
1. Select to use the extension in Connected mode. And introduce the URL for your Visual Studio Team Services account **https://{youraccount}.visualstudio.com** and click **Next**
![](images/6.jpg)
![6](images/6.jpg)
1. Select the desired **Team** and click **Save**
![](images/7.jpg)
![7](images/7.jpg)
## Task 2: Create Test Case from exploration
1. Start your **Exploratory testing** session.
![](images/8.png)
![8](images/8.png)
>When you start the exploration you have different tools to add information to the session, like snapshots, screen video or notes.
![](images/9.png)
![9](images/9.png)
> Open the web application: `YOUR_WEBAPP_URI` (Check the web app uri in the existing resource group). and start exploring it.
![](images/10.png)
![10](images/10.png)
1. When done exploring click on the **Create Work item** button and then on **Create Test case**
![](images/11.jpg)
![11](images/11.jpg)
![](images/12.jpg)
![12](images/12.jpg)
1. Introduce a title for the new **Test Case** and click **Save**.
![](images/13.jpg)
![13](images/13.jpg)
> You can see in the **Create Test Case** screen all the steps recorded during the exploration. This allows you to quickly create new test cases, based on your navigation, that you can use later to test your application with manual or automated testing.
> Let's continue with the next steps to create a new **Bug**
{% include note.html content= "You can see in the **Create Test Case** screen all the steps recorded during the exploration. This allows you to quickly create new test cases, based on your navigation, that you can use later to test your application with manual or automated testing. Let's continue with the next steps to create a new **Bug**" %}
## Task 3: Create bug
1. Click on take snapshot. You will be able to select the region of the screen you want to capture. Once selected the region, you will be able to include shapes and other information to the capture.
![](images/14.jpg)
![14](images/14.jpg)
> Click on the *tick* when done to finish the capture.
![](images/15.jpg)
![15](images/15.jpg)
1. Click on add note and add a descriptive note and click on **Save** when done.
![](images/16.jpg)
![16](images/16.jpg)
1. When done exploring click on the **Create Work item** button and then on **Create Bug**
1. When done exploring click on the **Create Work item** button and then on **Create Bug**.
![](images/17.jpg)
![17](images/17.jpg)
![](images/18.jpg)
![18](images/18.jpg)
1. Introduce a title for the new **Bug** and click **Save**
![](images/19.jpg)
![19](images/19.jpg)
> As with the **Test Case** creation, you will be able to see all recorded actions, as well as all additional screen shots and information included in the exploratory testing session.
> This will allow developers to quickly review and be able to reproduce the bug to solve it.
> As with the **Test Case** creation, you will be able to see all recorded actions, as well as all additional screen shots and information included in the exploratory testing session. This will allow developers to quickly review and be able to reproduce the bug to solve it.
1. Close the exploratory testing session clicking on the stop button.
![](images/20.jpg)
![20](images/20.jpg)
## Task 4: Review Test Cases and Bugs
@ -128,22 +126,22 @@ For using the Test & Feedback extension you will need Chrome, as it is the only
1. Click on **Work \| Queries** to open your Work Item Queries.
![](images/21.jpg)
![21](images/21.jpg)
1. Test Cases created within exploratory testing sessions are automatically assigned to you, so you will see them on your assigned items, if you want you can assign them to any other member of the team once you review them and are ready to be used.
![](images/22.jpg)
![22](images/22.jpg)
> Opening the test case work item you will see all the information recorded during the session.
1. Click on **Work \| Backlogs** to open the backlogs.
![](images/23.jpg)
![23](images/23.jpg)
> Bugs are introduced in the backlogs by default.
1. You should see the created bug in the backlog, if you double click on it, as with the Test Case, you will be able to see all the captured information, which is relevant to the bug, and will help developers to be able to reproduce and solve it.
![](images/24.jpg)
![24](images/24.jpg)
>It is very important to provide all the information you can within the bugs to developers. This will ease all the process of reproducing and solving bugs during development cycles.
> It is very important to provide all the information you can within the bugs to developers. This will ease all the process of reproducing and solving bugs during development cycles.

Просмотреть файл

@ -1,7 +1,7 @@
---
title: Version Controlling with Git using VSTS
layout: page
sidebar: vsts
sidebar: vsts2
permalink: /labs/vsts/git/
folder: /labs/vsts/git/
---
@ -20,35 +20,44 @@ Git is the default version control provider for new projects. You should use Git
In this lab, you will learn how to establish a local Git repository, which can easily be synchronized with a centralized Git repository in Visual Studio Team Services. In addition, you will learn about Git branching and merging support.
## Prerequisites
In order to complete this lab you will need Visual Studio 2017. Click the button below to deploy a VS 2017 Community VM from the Azure marketplace.
<a href="https://portal.azure.com/#create/Microsoft.VisualStudioCommunity2017onWindowsServer2016x64" class="launch-hol" role="button" target="_blank"><span class="lab-details">Launch the virtual machine</span></a>
{% include note.html content= "
If you don't have an Azure subscription, you can get one free through [Visual Studio Dev Essentials](https://www.visualstudio.com/dev-essentials/){:target=\"_blank\"}" %}
## Exercise 1: Cloning an existing repository
1. Sign in to your **Visual Studio Team Services** account and browse to **MyhealthClinic** project.
![](images/78.png)
![78](images/78.png)
1. Navigate to the **Code** hub. Select **Clone** and select **Clone in Visual Studio**
![](images/clonecode.png)
![clonecode](images/clonecode.png)
1. Click **Yes**
![](images/9.png)
![9](images/9.png)
1. You might be prompted to sign into to your account from Visual Studio. Sign in to your account
1. Click on **Clone this repository**
![](images/3.png)
![3](images/3.png)
1. Set the local path where you want the local repository to be placed and select **Clone**.
![](images/clonewindowvs.png)
![clonewindowvs](images/clonewindowvs.png)
This will clone the remote repository to the local repository.
1. Select **Show Folder View** under *Solutions* to see all the solutions in the local git folder
![](images/showfolderview.png)
![showfolderview](images/showfolderview.png)
1. Double click the **MHC_ASPNetCore.sln** to open the solution
@ -72,45 +81,45 @@ Git commits consists of the following-
1. Go to **Team Explorer** home.
![](images/11.jpg)
![11](images/11.jpg)
1. Open the **01_Demos_ASPNET5** solution.
![](images/12.jpg)
![12](images/12.jpg)
1. Expand the **MyHealthAPI project**. Go to the **controller** folder and modify any one of the controllers.
As you write your code, changes are automatically tracked by Visual Studio.
![](images/13.png)
![13](images/13.png)
1. Open the **Changes** in **Team Explorer**. Enter a commit message and select **Commit All** to create a new commit with all of your changes.
![](images/14.png)
![14](images/14.png)
![](images/15.png)
![15](images/15.png)
1. As other team members update the code in the repo, you will need to sync their changes with your own code.
Open the sync view from the team explorer.
![](images/16.png)
![16](images/16.png)
### Task 2: Syncing changes
1. Before syncing, fetch the commits to view changes that your team has made. Fetching changes does not merge the commits into your local repository. You will need to pull the changes to merge them into your local repository.
![](images/17.png)
![17](images/17.png)
![](images/18.png)
![18](images/18.png)
1. Sync the changes to push your commits.
![](images/19.png)
![19](images/19.png)
![](images/20.png)
![20](images/20.png)
1. Go back to your VSTS project. Click on **Code** \| **History** to see the commits.
![](images/21.png)
![21](images/21.png)
### Task 3: Stage
@ -125,13 +134,13 @@ files that might change but you do not want to stage in a commit.
1. Go to **Changes** view in team explorer. You can see two files being edited. Create a commit from a individual file. Staging a change creates a section in Team Explorer.
This adds an entry to the file **.gitignore** in your local repo. If the ignored file was added to your repo in an earlier commit, ignoring the file will not remove it from your repo.
![](images/22.png)
![22](images/22.png)
![](images/23.png)
![23](images/23.png)
1. Click on **Commit Staged and Sync** to update your remote repository.
![](images/24.png)
![24](images/24.png)
## Exercise 3: Review History
@ -145,16 +154,16 @@ Gits use of **Branches and Merges** feature works through pull requests, mean
1. Open up the Home view in Team Explorer.
![](images/25.png)
![25](images/25.png)
1. Expand the **MyHealth.API** project. Go to **controllers** folder and right click the controller file that you modified before and view history.
The history window will show the commit ID, author, date, and description of all changes to the file in your local repo across all branches.
![](images/26.png)
![26](images/26.png)
1. Right-click on the latest commit from the history window and choose **Compare with previous**.
![](images/27.png)
![27](images/27.png)
### Task 2: Retrieve files
@ -162,11 +171,11 @@ Gits use of **Branches and Merges** feature works through pull requests, mean
1. Right-click on the commit containing the version of the file you want to restore and select **View commit details**.
![](images/28.png)
![28](images/28.png)
1. You will see the file in your team explorer. Right click the file and select open to restore in the Commit Details in Team Explorer.
![](images/29.png)
![29](images/29.png)
## Exercise 4: Manage Branches from Visual Studio
@ -186,15 +195,15 @@ current branch.
1. Open **Team Explorer** from Visual Studio and go to the **Branches** view.
![](images/30.png)
![30](images/30.png)
1. Right-click the parent branch (usually master) to base your changes and select **New Local Branch From**.
![](images/31.png)
![31](images/31.png)
1. Provide a branch name and click **create branch**.
![](images/32.png)
![32](images/32.png)
### Task 2: Checkout and Publish branches
@ -203,27 +212,27 @@ Branches let you work with multiple versions of the source code in the same loca
1. Open **Team Explorer** from Visual Studio and go to the **Branches** view. Locate the branch you want to checkout, right-click the branch name and **checkout**.
![](images/33.png)
![33](images/33.png)
1. You can make sure that you have checked out the branch which indicates at the bottom of your Visual Studio window as shown.
![](images/34.png)
![34](images/34.png)
1. Locate the branch you want to publish.
![](images/35.png)
![35](images/35.png)
1. Right-click the branch name and select **Publish branch**.
![](images/36.png)
![36](images/36.png)
1. Go back to your VSTS account and check under the **Code** \| **Branches**, your branch was successfully published.
![](images/37.png)
![37](images/37.png)
1. You can also see the branches under **remotes origin** section from your Visual Studio.
![](images/38.png)
![38](images/38.png)
### Task 3: Deleting branches locally and remotely
@ -232,24 +241,24 @@ Branches let you work with multiple versions of the source code in the same loca
1. Open **Team Explorer** from Visual Studio and go to the **Branches** view. Locate the branch you want to delete.
Make sure that you aren't checked out to that branch. You can't delete the branch you are currently working in.
![](images/39.png)
![39](images/39.png)
1. Select **delete**. You should see the message after the deletion.
![](images/40.png)
![40](images/40.png)
1. Let's try to delete a a remote branch. Locate the tree for the remote branch in Team Explorer such as (remotes/origin).
Right click on the branch you wish to delete and select **Delete Branch From Remote**.
![](images/41.png)
![41](images/41.png)
1. You should receive a successful message post deletion.
![](images/42.png)
![42](images/42.png)
1. Go back to your VSTS project. Click on **Code** \| **Branches** to make sure that you don't see the branch that you deleted.
![](images/43.png)
![43](images/43.png)
## Exercise 5: Manage branches from the Team Services Portal
@ -259,53 +268,53 @@ Branches let you work with multiple versions of the source code in the same loca
1. Go to **Code** \| **Branches** and click on **New Branch** to create.
![](images/44.png)
![44](images/44.png)
1. In the Create a branch dialog, enter a name for your new branch. Select a branch to base on and associate any work items if necessary and click on **create**.
![](images/45.png)
![45](images/45.png)
1. Post creation, you should be able to see under your branches.
![](images/46.png)
![46](images/46.png)
1. Go back to your Visual Studio to see the branch that was created. You will need to **fetch** the branch before you can swap to it in your local repo.
1. Open Team Explorer and go to Sync view and click **fetch**.
![](images/47.png)
![47](images/47.png)
![](images/48.png)
![48](images/48.png)
1. Go to the **Branches** view to see if the remote branch is available.
![](images/49.png)
![49](images/49.png)
1. Locate the remote branch you want to checkout to your local repository. Right click the branch name and select **New Local Branch From**.
![](images/50.png)
![50](images/50.png)
1. Provide a name for the local branch and click on **create**.
![](images/51.png)
![51](images/51.png)
1. You should now see the local branch post creation.
![](images/52.png)
![52](images/52.png)
### Task 2: Deleting a branch
1. Locate the branches from the web.
![](images/46.png)
![46](images/46.png)
1. Select the **trashcan** icon next to the branch you want to delete.
![](images/53.png)
![53](images/53.png)
1. Once deleted, you should see something like this. You can revert back by clicking **undo** if you accidentally delete a branch.
![](images/54.png)
![54](images/54.png)
### Task 3: Locking Branch
@ -319,11 +328,11 @@ Share with your team the reason for locking the branch and make sure your team k
1. Lock the branch by selecting the **...** icon next to the branch name and then select **Lock** from the menu.
![](images/55.png)
![55](images/55.png)
1. You should see the lock symbol after locking the branch.
![](images/56.png)
![56](images/56.png)
1. You can unlock the branch by selecting the **Unlock** from the menu.
@ -340,7 +349,7 @@ Reviewers can step through the proposed changes, leave comments, and vote to app
1. Expand the **MyHealth.API** project. Go to **Controllers** folder and modify any one of the controller file and sync the changes to push your commits and pull changes from others.
![](images/57.png)
![57](images/57.png)
1. Now, your changes are updated in remote dev branch.
@ -348,19 +357,19 @@ Reviewers can step through the proposed changes, leave comments, and vote to app
1. Select **Pull requests** from Team Explorer pane. You will promote changes from dev to Master branch.
![](images/58.png)
![58](images/58.png)
1. Select the **New Pull Request** link to open up a browser window to create a new pull request on the web.
![](images/59.png)
![59](images/59.png)
1. You can Link work items and describe the changes in the branch to make it easier for others to see what problem you are trying to solve. You can also add reviewers.
![](images/60.png)
![60](images/60.png)
1. Click on **New Pull Request** to create. You should see the overview. You can approve, add comments and do lot more.
![](images/61.png)
![61](images/61.png)
### Task 2: Manage Pull requests
@ -369,41 +378,41 @@ Manage your pull requests you own or are assigned to with the Pull Requests tab
1. Open the Pull Request view while viewing your repo on the web. Select **Active** to show all active pull requests for the current repo.
You can also select Completed or Abandoned to bring up a history of closed pull requests.
![](images/62.png)
![62](images/62.png)
1. Select any of the existing pull request assigned to you. The Overview tab shows the current state of the pull request at a glance.
![](images/63.png)
![63](images/63.png)
1. Review the title, description, and discussion to get an understanding of the proposed changes and see issues brought up by other reviewers.
1. Select the **Files** tab to view the differences between the most changes between the source and target branch of the pull request.
![](images/64.png)
![64](images/64.png)
1. Review previous versions of the code pushed to the source branch of the pull request from the **All changes** drop-down.
A new version is added to the list in the drop-down and on the Updates tab every time the branch is updated in Team Services.
![](images/65.png)
![65](images/65.png)
1. Locate the file where you want to add a new comment.
![](images/66.png)
![66](images/66.png)
1. Add comments to the pull request to make suggestions, reply to previous comments, and point out problems with the proposed changes.
![](images/67.png)
![67](images/67.png)
1. We can change to Tree view to get the proper structure of the source code or just list files. We can also view all the comments/active comments/hide comments.
![](images/68.png)
![68](images/68.png)
1. Browse a list of changes by push from the author using the Updates tab.
![](images/69.png)
![69](images/69.png)
1. You can select and view changes made in commits on the branch in the **Commits** tab.
![](images/70.png)
![70](images/70.png)
1. Go back to the **Files** Tab. Click on the **comments** to check the details of the files modified and comments given by reviewer.
@ -415,7 +424,7 @@ Manage your pull requests you own or are assigned to with the Pull Requests tab
- **Won't Fix:** Note the suggestion in the comment, but don't make changes in this pull request to address it.
- **Closed:** Discussion for this comment is closed.
![](images/71.png)
![71](images/71.png)
1. Click **Approve** in the upper right of the pull request view.
@ -425,30 +434,30 @@ Manage your pull requests you own or are assigned to with the Pull Requests tab
- **Waiting for the author :** Do not approve the changes, and ask the author to review your comments. The author should let you know when you should re-review the code after they have addressed your concerns.
- **Rejected :** The changes aren't acceptable. If you are voting this way, you should leave a comment in the pull request detailing why the changes were rejected.
![](images/72.png)
![72](images/72.png)
1. Click **Complete** in the upper right of the pull request view.
![](images/73.png)
![73](images/73.png)
1. Enter the message used for the merge commit and update the pull request description as needed in the dialog that follows.
You can choose to squash merge your pull request and delete the source branch once the merge is complete.
{% include note.html content= "**Squash merging** is a merge option that allows you to condense the Git history of topic branches when you complete a pull request. Instead of each commit on the topic branch being added to the history of the default branch, a squash merge takes all the file changes and adds them to a single new commit on the default branch. Squash merging keeps your default branch histories clean and easy to follow without demanding any workflow changes on your team." %}
![](images/74.png)
![74](images/74.png)
1. Click Complete merge. You should see a successful message as completed.
![](images/75.png)
![75](images/75.png)
1. Go back to your **Pull Requests** from the web, you should see completed pull request under **completed** tab.
![](images/76.png)
![76](images/76.png)
1. Open the file view and select the **master** branch \| **History** to make sure the changes have merged successfully.
![](images/77.png)
![77](images/77.png)
1. The master branch is updated successfully.
@ -462,26 +471,26 @@ Create Git repos in team projects to manage your project's source code. Each Git
1. From your account overview page, select your team project. To find your team project, you can search as well.
![](images/78.png)
![78](images/78.png)
1. Go to **Code** tab and select the drop-down next to the current repo name.
![](images/79.png)
![79](images/79.png)
1. Select **New Repository** to create one. In the Create a new repository window, verify that Git is the repo type and enter a name for your new repo.
![](images/80.png)
![80](images/80.png)
1. Click **Create**. A new empty Git repo is now created in your team project. You can select clone in your favorite IDE to connect the repo to your local
development environment, or connect to your new repo using the command line instructions provided.
![](images/81.png)
![81](images/81.png)
1. Open up the Connect view in Team Explorer. Visual Studio will show all the existing repos in the Team Service project so you can choose whatever you want to clone.
![](images/82.png)
![82](images/82.png)
![](images/83.png)
![83](images/83.png)
### Task 2: Delete a Git repo from your team project
@ -489,26 +498,26 @@ Remove unused repos from your team project to organize your project's source cod
1. Select the **gear icon** and navigate to **Version Control**.
![](images/84.png)
![84](images/84.png)
1. Choose the repository that you wish to remove and click on **...** to select **delete repository**.
![](images/85.png)
![85](images/85.png)
1. Confirm the removal of the repository by clicking on **Delete.**
![](images/86.png)
![86](images/86.png)
### Task 3: Renaming a Git repository in your team project
1. Select the **gear icon** and navigate to **Version Control**.
![](images/84.png)
![84](images/84.png)
1. Choose the repository that you wish to rename and click on **...** to select **rename repository**.
![](images/87.png)
![87](images/87.png)
1. Confirm the rename of the repository by clicking on **Rename.**
![](images/87.png)
![87](images/87.png)

Просмотреть файл

@ -1,7 +1,7 @@
---
title: Load and Performance Testing using Visual Studio Team Services
layout: page
sidebar: vsts
sidebar: vsts2
permalink: /labs/vsts/load/
folder: /labs/vsts/load/
---
@ -11,17 +11,15 @@ Last updated : {{ "now" | date: "%b %d, %Y" }}.
## Overview
Load Testing allow us to stress the application and review how it behaves under diferent load of users so we can take actions on the current infrastructure adding more capacities for the times we think we will need it.
Load Testing in visual Studio is billed by Virtual User minutes, more info [here](https://www.visualstudio.com/team-services/pricing/)
Load Testing in visual Studio is billed by Virtual User minutes, more info [here.](https://www.visualstudio.com/team-services/pricing/){:target="_blank"}
## Pre-requisites
## Prerequisites
In order to complete this lab you will need-
- **Visual Studio Team Services account**. If you don't have one, you can create from [here](https://www.visualstudio.com/)
- **Visual Studio Team Services account**. If you don't have one, you can create from [here](https://www.visualstudio.com/team-services){:target="_blank"}
- **Visual Studio 2017** or higher version
- You can use the **[VSTS Demo Data generator](http://vstsdemogenerator.azurewebsites.net/Environment/Create)** to provison a project with pre-defined data on to your Visual Studio Team Services account. Please use the ***My Health Clinic*** template to follow the hands-on-labs.
- You can use the **[VSTS Demo Data Generator](http://vstsdemogenerator.azurewebsites.net){:target="_blank"}** to provison a project with pre-defined data on to your Visual Studio Team Services account. Please use the ***My Health Clinic*** template to follow the hands-on-labs.
- If you are not using the VSTS Demo Data Generator, you can clone the code from here
@ -29,71 +27,71 @@ In order to complete this lab you will need-
1. Sign in to your Visual Studio Team Services account and click on **Load Test**.
![](images/1.png)
![1](images/1.png)
1. Click on **Create test** in the **URL** panel.
![](images/2.png)
![2](images/2.png)
![](images/3.png)
![3](images/3.png)
1. Name the test **DevOps Tests**
![](images/4.png)
![4](images/4.png)
1. On this screen we will start typing the URLs we need to test from the application. Before starting go to your Azure Resource Group to get the URI of the Web App Service.
![](images/5.png)
![5](images/5.png)
1. Let's start with the homepage of the application:
![](images/6.png)
![6](images/6.png)
> Here you can also specify how the **HTTP Method** call will use as well as additional parameters like **Querystring** parameters.
1. You can add addtional **URLs** with the **Add URL** button.
![](images/7.png)
![7](images/7.png)
> A Load Test can be created with several calls to different URLs, Visual Studio Team Services Load Testing will execute all of them sequentially, in the same order as introduced, for each simulated user.
1. Now we will configure the duration, load pattern and other settings we will use for the load tests. Click on **Settings**
![](images/8.png)
![8](images/8.png)
1. On duration we will leave the default value of 2 minutes.
![](images/9.png)
![9](images/9.png)
> When modifiying this value remember Load Tests are priced by [Virtual User Minutes](https://www.visualstudio.com/team-services/pricing/)
> When modifiying this value remember Load Tests are priced by [Virtual User Minutes](https://www.visualstudio.com/team-services/pricing/){:target="_blank"}
1. For load pattern we have two options. We will select **Constant** with 25 users.
![](images/10.png)
![10](images/10.png)
- **Constant** will simulate the same amount of virtual users during the whole load test, this value is specified in the **Max v-users** field.
- **Step** load pattern will start with a selected amount of users, and will increase the amount by a selected quantity each selected period of time. In this case it will start with 10 users, and it will increment by 5 every 10 seconds.
![](images/11.png)
![11](images/11.png)
> We will stick to **Constant** load of **25 users**.
1. **Warm up duration** is the period between the beginning of the test and when the data samples start being recorded. This is frequently used to step load virtual users to reach a certain load level before recording sample values. The sample values that are captured before the warm-up period ends are shown in the results. Leave it to 0 seconds in this case.
![](images/12.png)
![12](images/12.png)
1. As applications sometimes render different content or behave differently depending on the browser user-agent. The **Browser mix** allow us to simulate different kind of browser percentages. Note this will only have influence on the **User-agent** header sent to the application, as load tests only tests HTTP Calls, so it does not render different HTML or interpret HTML responds. You only need to use this if your application behaves differently from a server side point of view. Leave the default value.
![](images/13.png)
![13](images/13.png)
1. **Load location** allow us to select different Azure locations, in the case we need to test our application from different regions. In this case select the region nearest to your application.
![](images/14.png)
![14](images/14.png)
1. Click **Save**.
![](images/15.png)
![15](images/15.png)
> Now we have a complete **Load Test** created, let's continue with execution.
@ -101,11 +99,11 @@ In order to complete this lab you will need-
1. Click on **Run test** this will queue the load test, we will see the waiting for test agents screen. Visual Studio Team Services will provision the needed agents to run the tests based on the number of users selected for the test run
![](images/16.png)
![16](images/16.png)
1. Once it starts running we will see live metrics on how the test and application are behaving. Now the Visual Studio Team Services auto-provisioned agents are calling the URLs configured in the load tests, with the number of users configured.
![](images/17.png)
![17](images/17.png)
> In this screen we can see metrics in real time like average response time, current number of virtual users, request per second while running the tests, % of failed requests, errors and Virtual User Minutes used.
@ -113,19 +111,19 @@ In order to complete this lab you will need-
> The first screen shows the results of the tests, the same information we saw during the test run but with final data.
![](images/18.png)
![18](images/18.png)
> Clicking on the **charts** shows all the data in graphics so we can see trends and changes of response and user load during the full test execution
![](images/19.png)
![19](images/19.png)
> **Diagnostics** information shows all important data realted to the test execution itself, like the final number of Virtual Users Minutes
![](images/20.png)
![20](images/20.png)
> **Traces** from this screen you will be able to download the log files of the test execution.
![](images/21.png)
![21](images/21.png)
## Exercise 3: Recovering previous results
@ -133,14 +131,14 @@ All results from previous test executions can be reviewed as they are stored in
1. From the same **Load Test** tab, in the left pane, you have all of your load tests, select the recently created **DevOps Tests**.
![](images/22.png)
![22](images/22.png)
1. On the right pane it shows all executions of your Load Test.
![](images/23.png)
![23](images/23.png)
1. Double click on it so you are taken to the results page.
![](images/24.png)
![24](images/24.png)
> Here you can review again the whole results from this execution.

Просмотреть файл

@ -1,7 +1,7 @@
---
title: Monitoring Applications using Application Insights
layout: page
sidebar: vsts
sidebar: vsts2
permalink: /labs/vsts/monitor/
folder: /labs/vsts/monitor/
---
@ -10,7 +10,7 @@ Last updated : {{ "now" | date: "%b %d, %Y" }}.
## Overview
[Application Insights](https://docs.microsoft.com/en-us/azure/application-insights/) comes as part of Visual Studio. You get automatic instrumentation for ASP.NET developers and vital application telemetry data right out of the box; including usage, exceptions, requests, performance, and logs.
[Application Insights](https://docs.microsoft.com/en-us/azure/application-insights/){:target="_blank"} comes as part of Visual Studio. You get automatic instrumentation for ASP.NET developers and vital application telemetry data right out of the box; including usage, exceptions, requests, performance, and logs.
Monitor web apps—whether written in Java, Ruby, Python, PHP, Node.JS, or other languages—using open source SDKs. Install the Status Monitor on your existing Azure App Services and virtual machines through the Azure portal to get performance monitoring without needing to update and redeploy your application.
@ -25,31 +25,34 @@ It provides benefits as:
## Pre-requisites
In order to complete this lab you will need-
In order to complete this lab you will need Visual Studio 2017. Click the button below to deploy a VS 2017 Community VM from the Azure marketplace.
- **Visual Studio Team Services account**. If you don't have one, you can create from [here](https://www.visualstudio.com/)
<a href="https://portal.azure.com/#create/Microsoft.VisualStudioCommunity2017onWindowsServer2016x64" class="launch-hol" role="button" target="_blank"><span class="lab-details">Launch the virtual machine</span></a>
- **Visual Studio 2017** or higher version
{% include note.html content= "
If you don't have an Azure subscription, you can get one free through [Visual Studio Dev Essentials](https://www.visualstudio.com/dev-essentials/){:target=\"_blank\"}" %}
- You can use the **[VSTS Demo Data generator](http://vstsdemogenerator.azurewebsites.net/Environment/Create)** to provison a project with pre-defined data on to your Visual Studio Team Services account. Please use the ***My Health Clinic*** template to follow the hands-on-labs.
- **Visual Studio Team Services account**. If you don't have one, you can create from [here](https://www.visualstudio.com/team-services){:target="_blank"}
- You can use the **[VSTS Demo Data generator](http://vstsdemogenerator.azurewebsites.net/Environment/Create){:target="_blank"}** to provison a project with pre-defined data on to your Visual Studio Team Services account. Please use the ***My Health Clinic*** template to follow the hands-on-labs.
- If you are not using the VSTS Demo Data Generator, you can clone the code from here
## Exercise 1: Creating Instrumentation Key
1. Go to **Azure Portal** from [here](https://portal.azure.com)
1. Go to **Azure Portal** from [here](https://portal.azure.com){:target="_blank"}
1. Click on **+ New** icon to create a new **Application Insights**.
![](images/new.png)
![new](images/new.png)
1. Search for **Application Insights** in the search box.
![](images/search_app_insights.png)
![search_app_insights](images/search_app_insights.png)
1. Click on **Create**.
![](images/create.png)
![create](images/create.png)
1. Fill in the following details:-
@ -59,15 +62,15 @@ In order to complete this lab you will need-
- **Resource Group**: Create a new resource group with the name **mhcapp**
- **Location**: Select desired location
![](images/fill_details.png)
![fill_details](images/fill_details.png)
1. Browse to the resource group **mhcapp** which was created and click on the app insights resource.
![](images/resource_group.png)
![resource_group](images/resource_group.png)
1. Copy the the **Instrumentation Key** from the top as shown below.
![](images/instrumentation_key.png)
![instrumentation_key](images/instrumentation_key.png)
## Exercise 2: Configure Application Insights
@ -75,13 +78,13 @@ In this lab we have the existing **01_Demos_ASPNET5** .NET Core application, whe
1. Open Visual Studio 2017.
![](images/1.png)
![1](images/1.png)
1. Open **01_Demos_ASPNET5** solution. Under **MyHealth.Web** project locate the **appsettings.json** file.
![](images/2.png)
![2](images/2.png)
![](images/3.png)
![3](images/3.png)
1. Locate this line from that file.
@ -91,26 +94,26 @@ In this lab we have the existing **01_Demos_ASPNET5** .NET Core application, whe
1. Substitute the text **YOUR_INSTRUMENTATION_KEY** with the key of your existing Application Insights service.
![](images/4.png)
![4](images/4.png)
1. Application Insights comes in the form of a Nuget package. Review the **project.json** file of the web project and look for the Application Insights package added.
![](images/5.png)
![5](images/5.png)
1. Open the file **Startup.cs**.
![](images/6.png)
![6](images/6.png)
> In this file we give the startup options for the website, we need to configure Application Insights to read the configuration.
> Unlike the setup for other Application Insights SDKs, adding the SDK doesnt automatically configure a range of modules to collect different kinds of telemetry. Were going to add the modules for Telemetry and Exception so we need to do a couple of modifications to the **Startup.cs**
{% include note.html content= "In this file we give the startup options for the website, we need to configure Application Insights to read the configuration.<br/>
Unlike the setup for other Application Insights SDKs, adding the SDK doesnt automatically configure a range of modules to collect different kinds of telemetry. Were going to add the modules for Telemetry and Exception so we need to do a couple of modifications to the **Startup.cs**" %}
![](images/7.png)
![7](images/7.png)
1. Locate the method **ConfigureServices** and check the line **services.AddApplicationInsightsTelemetry(Configuration);**.
> This will load the configuration for Application Insights from the configuration file for the site.
![](images/8.png)
![8](images/8.png)
1. Now locate the method **Configure** and check these lines:
@ -121,26 +124,26 @@ In this lab we have the existing **01_Demos_ASPNET5** .NET Core application, whe
> With these two lines we are configuring the application to send Telemetry information as well as Exception information to the configured Application Insights.
![](images/9.png)
![9](images/9.png)
1. Locate the file **_Layout.cshtml** inside the **Views \| Shared** folder in the web application and open it.
> We need to configure also the client-side reporting of Application Insights telemetry, which will allow us to have telemetry data of what is happening at the client side of our web application.
> This **_Layout.cshtml** page in ASP.NET is the base page for all the rest of the pages for the application, so adding this code here will add the code in the rest of the pages of the application at runtime.
{% include note.html content= "We need to configure also the client-side reporting of Application Insights telemetry, which will allow us to have telemetry data of what is happening at the client side of our web application.<br/>
This **_Layout.cshtml** page in ASP.NET is the base page for all the rest of the pages for the application, so adding this code here will add the code in the rest of the pages of the application at runtime." %}
![](images/10.png)
![10](images/10.png)
![](images/11.png)
![11](images/11.png)
1. Look at the first line **@inject Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration TelemetryConfiguration**.
This injects the configuration part of Application Insights to be available for the client-side scripting.
![](images/12.png)
![12](images/12.png)
1. Now look at the line **@Html.ApplicationInsightsJavaScript(TelemetryConfiguration)**.
This will add the needed Javascript code in the page so Application Insights client-side telemetry sends information about client-side execution.
![](images/13.png)
![13](images/13.png)
## Exercise 3: Viewing Telemetry
@ -148,45 +151,45 @@ Now that we have configured the application to send telemetry data to Applicatio
1. Launch the application from Visual Studio and navigate through the application.
![](images/14.png)
![14](images/14.png)
1. Stop the application from Visual Studio. Even when debugging the application locally it will start sending information to Application Insights. Now we will review the information captured by Application Insights.
1. Right click on the project **MyHealth.Web** in the **Solution Explorer** and select **Application Insights \| Search Debug Session Telemetry**.
![](images/15.png)
![15](images/15.png)
>This view shows telemetry generated in the server side of your app. Experiment with the filters, and click any event to see more detail.
![](images/16.png)
![16](images/16.png)
1. Right click again on the project **MyHealth.Web** in the **Solution Explorer** and select **Application Insights \| Open Application Insights Portal**.
![](images/17.png)
![17](images/17.png)
>The portal opens on a view of the telemetry from your app.
![](images/18.png)
![18](images/18.png)
1. Click on **Server response time**.
![](images/19.png)
![19](images/19.png)
>This opens the azure *blade* with all the information about the server response time of all the calls which have ocurred to the application, and its times. So we can detect for example bottlenecks in our application in particular pages.
![](images/20.png)
![20](images/20.png)
1. Click on **Page View Load Time**.
![](images/21.png)
![21](images/21.png)
>We have a lot of other metrics avaliable, like **Page view load time** which measures times from client side informing how long the pages take to load in the client side.
![](images/22.png)
![22](images/22.png)
>Click again, in this new *blade* in **Page View Load Time** in the upper part, you can continue drilling down through all the information in Application Insights.
![](images/23.png)
![23](images/23.png)
## Exercise 4: Adding Application Insights to New Web Application
@ -194,36 +197,36 @@ Let's create a new web application and review how can we add Application Insight
1. Open Visual Studio. Select **File \| New Project**.
![](images/24.png)
![24](images/24.png)
1. Select **Visual C# \| .NET Core \| ASP.NET Core Web Application**, ensure to mark the checkbox **Add Application Insights to Project**.
![](images/25.png)
![25](images/25.png)
>In this step we are adding Application Insights to the project, if you want to review default values or make any change on them, click on **Configure Settings**
![](images/26.png)
![26](images/26.png)
1. Click **Ok** on the next screen.
![](images/27.png)
![27](images/27.png)
1. Open **appsetings.json** file and check the **Instrumentation Key** has been added.
![](images/28.png)
![28](images/28.png)
>As we saw in this lab configuring Application Insights, we have now the key already added from the beginning. The **Nuget package, Startup.cs file** and **_layout.cshtml files** has been modified to include Application Insights.
1. Open **Startup.cs** file, as you also see the lines for Application Insights configuration has already been added automatically.
![](images/29.png)
![29](images/29.png)
1. Open **_Layout.cshtml** and check the particular line for client-side Javascript telemetry.
![](images/30.png)
![30](images/30.png)
1. Open **project.json** file and check the Application Insights package has also been added.
![](images/31.png)
![31](images/31.png)
From this point we can also run the application, and see telemetry data as we did at the beginning of this same lab.

Просмотреть файл

@ -1,7 +1,7 @@
---
title: Package Management in Team Services
layout: page
sidebar: vsts
sidebar: vsts2
permalink: /labs/vsts/packagemanagement/
folder: /labs/vsts/packagemanagement/
---
@ -10,7 +10,7 @@ Last updated : {{ "now" | date: "%b %d, %Y" }}.
## Overview
[Package Management](https://www.visualstudio.com/en-us/docs/package/overview/) is an extension that makes it easy to discover, install, and publish packages.
[Package Management](https://www.visualstudio.com/en-us/docs/package/overview/){:target="_blank"} is an extension that makes it easy to discover, install, and publish packages.
It's deeply integrated with other Team Services hubs like Build so that package management can become a seamless part of your existing workflows.
@ -24,15 +24,17 @@ These questions arent just applicable to newly growing teams. If youre an
In this module, we'll explore how binary composition through package management can help you manage and share your external dependencies, your OSS, and your isolated shared components.
## Pre-requisites
## Prerequisites
In order to complete this lab you will need-
- **Visual Studio Team Services account**. If you don't have one, you can create from [here](https://www.visualstudio.com/)
- Visual Studio 2017 virtual machine provided by Microsoft. Click the button below to launch the virtual machine.
- **Visual Studio 2017** or higher version
<a href="" class="launch-hol" role="button" target="_blank"><span class="lab-details">Launch the virtual machine</span></a>
- You can use the **[VSTS Demo Data generator](http://vstsdemogenerator.azurewebsites.net/Environment/Create)** to provision a project with pre-defined data on to your Visual Studio Team Services account. Please use the ***My Health Clinic*** template to follow the hands-on-labs.
- **Visual Studio Team Services account**. If you don't have one, you can create from [here](https://www.visualstudio.com/team-services){:target="_blank"}
- You can use the **[VSTS Demo Data Generator](http://vstsdemogenerator.azurewebsites.net){:target="_blank"}** to provision a project with pre-defined data on to your Visual Studio Team Services account. Please use the ***My Health Clinic*** template to follow the hands-on-labs.
- If you are not using the VSTS Demo Data Generator, you can clone the code from here
@ -40,18 +42,18 @@ In order to complete this lab you will need-
1. To start using Package Management from Visual Studio Team Services we must first install the Package Management extension from the Visual Studio Market place, you can find the extension [here](https://marketplace.visualstudio.com/items?itemName=ms.fee)
![](images/1.png)
![1](images/1.png)
1. Click **Start Trial** to install the extension and select your VSTS account to install and click **confirm**.
![](images/2.png)
![2](images/2.png)
> This has installed the extension on your account.
> Package feeds are our own NuGet package feeds we can use for our own dependencies, or even share dependencies with other teams. **Nuget.org** is a public feed where we can publish packages for other developers.
1. After installation click on **Proceed to the account**. You can now see the **Package** menu option inside the Team Projects under the **Build & Release** section.
![](images/3.png)
![3](images/3.png)
## Task 2: Creating feed
@ -59,21 +61,21 @@ In order to complete this lab you will need-
1. From your account overview page, select your team project. You can also search as well.
![](images/4.png)
![4](images/4.png)
1. Now you should see a new menu option **Package** under the **Build & Release** tab. Click on it.
![](images/3.png)
![3](images/3.png)
1. Click on **+ New feed** to create. Give a name and click **create**.
![](images/5.png)
![5](images/5.png)
1. Click on **Connect to feed**. Take a note of the **Package source URL**.
![](images/6.png)
![6](images/6.png)
![](images/7.png)
![7](images/7.png)
> We need the Url for the feed so we would be able to connect our developers to the feed as well as configure projects to use it during automated builds.
@ -83,7 +85,7 @@ We will start from a previously created and configured package. The first step w
This file defines the properties on how the package will appear in the listings.
In the **07\_Demos\_PackageManagement** solution we created a class library with a **nuspec** file definition. Instructions on how to create and use the file can be found in NuGet.org documentation [here](https://docs.nuget.org/ndocs/create-packages/creating-a-package)
In the **07\_Demos\_PackageManagement** solution we created a class library with a **nuspec** file definition. Instructions on how to create and use the file can be found in NuGet.org documentation [here](https://docs.nuget.org/ndocs/create-packages/creating-a-package){:target="_blank"}
It is also important to take care of package versioning, so developers know which version of the package is the latest, previous versions, and the one they are using as well as the differences between them.
@ -91,59 +93,59 @@ We will publish packages to the feed with an automated build. So we will start c
1. We will start from the Visual Studio build template. Select the template **Visual Studio build** by creating a new build definition.
![](images/8.png)
![8](images/8.png)
1. Remove the **Publish symbols**, **Copy files** and **Publish Artifact** tasks. And configure the **Nuget Restore** and **Build** steps to build our NuGet Package solution.
![](images/9.png)
![9](images/9.png)
1. Add the **NuGet Packager** task from the **Package** section.
![](images/10.png)
![10](images/10.png)
1. Add the **Nuget Publisher** task from the **Package** section.
![](images/11.png)
![11](images/11.png)
1. Let's configure the **Nuget Packager** task. For this, we will select the **csproj** file of the project containing the NuGet Package. This must be the same name as the **nuspec** file, but with the **csproj** extension.
![](images/12.png)
![12](images/12.png)
>It is very important to point at this time to the *csproj* file, and the *nuspec* file convention of having the same name as the *csproj* file, so the package is correctly generated.
1. In the **Nuget publisher** task, we will need to point the feed we want to publish the target. Select **Feed type** internal and introduce the URL for our internal feed (the URL you noted earlier). Once finished **Save** and **Queue** this build definition.
![](images/13.png)
![13](images/13.png)
> Look also at the **Path/Pattern to nupkg** the default filter will only include the package we just built, it will exclude other packages which are references to this one with the *-:\*\*/packages/\*\*/\*.nupkg* filter and also exclude the symbols package with this filter _-:\*\*/\*.symbols.nupkg_ which are currently not supported.
1. Once the build completes, you should see the package is already published to the feed and ready to be used. Go to **Packages** and check.
![](images/14.png)
![14](images/14.png)
## Task 4: Configure Visual Studio
1. Open Visual Studio, and goto **Tools** \| **NuGet Package Manager** \|**Package Manager Settings**.
1. Open Visual Studio, and goto **Tools** \| **NuGet Package Manager** \| **Package Manager Settings**.
![](images/15.png)
![15](images/15.png)
>We need to configure Visual Studio to have this package manager available for developers.
1. Open **Package Sources**.
![](images/16.png)
![16](images/16.png)
> In this screen we will manage our own package feeds so they are available when adding NuGet packages to a project.
1. Click **+** icon. A new Package source line has been added with default values. Change the **Name** to the desired name (i.e. "HealthClinic Feed") and in the **URL** paste the value of the URL for the feed we noted before. Click **Ok**.
![](images/17.png)
![17](images/17.png)
> We just added to our Visual Studio the new feed. All members of the team must do the same in their own Visual Studio in order to get the packages.
1. Create an empty project, or open an existing project, right click on it, select **Manage Nuget Packages**, go to **Browse** and in the **package source** selector, select the recently added feed. You should see the recently added package.
![](images/18.png)
![18](images/18.png)
> All the team members, with the feed configured in Visual Studio, will be able to access this feed and install the package into their projects, so we can better reuse the code of our common libraries across the projects.
@ -170,7 +172,7 @@ When we create builds, the first step is the **Nuget package restore** step, but
1. Now, in the Team Build you are using for building the project which uses the internal Nuget package, on the package restore step, point to the **nuget.config** file we just added to the repository.
![](images/19.png)
![19](images/19.png)
1. During the build you can see the console output while building the project which references the internal Nuget feed.

Просмотреть файл

@ -1,7 +1,7 @@
---
title: Connect to Visual Studio Team Services with Power BI
layout: page
sidebar: vsts
sidebar: vsts2
permalink: /labs/vsts/powerbi/
folder: /labs/vsts/powerbi/
---
@ -14,17 +14,17 @@ You can gain insight and analyze the progress and quality of your project by con
Power BI is a suite of business analytics tools that deliver insights throughout your organization. Connect to hundreds of data sources, simplify data prep, and drive ad hoc analysis. Produce beautiful reports, then publish them for your organization to consume on the web and across mobile devices. Everyone can create personalized dashboards with a unique, 360-degree view of their business. And scale across the enterprise, with governance and security built-in.
{% include important.html content= "The Visual Studio Team Services (VSTS) Content Pack for Power BI has been deprecated on November 15, 2017 primarily due to the negative impact it has had on VSTS accounts, including throttling end users access. Support will continue for all existing PowerBI.com data sets based on the Content Pack. However, you wont be able to create any new data sets.
{% include important.html content= "The Visual Studio Team Services (VSTS) Content Pack for Power BI has been deprecated on November 15, 2017 primarily due to the negative impact it has had on VSTS accounts, including throttling end users access. Support will continue for all existing [PowerBI.com](https://powerbi.microsoft.com/en-us/){:target=\"_blank\"} data sets based on the Content Pack. However, you wont be able to create any new data sets.<br/>
The [Analytics Marketplace extension](https://marketplace.visualstudio.com/items?itemName=ms.vss-analytics) and upcoming updates to the [Power BI Desktop connector](https://docs.microsoft.com/en-us/vsts/report/powerbi/data-connector-connect) for VSTS are intended to replace and improve on the capabilities of the Content Pack. While the Analytics Marketplace extension currently supports Work Item Tracking data, we will update it to support additional data types including Tests, Build, Release and Version Control. In the interim, you can use [VSTS REST APIs](https://www.visualstudio.com/en-us/docs/integrate/api/overview) as an alternative to the Content Pack to report on these additional data types." %}
The [Analytics Marketplace extension](https://marketplace.visualstudio.com/items?itemName=ms.vss-analytics){:target=\"_blank\"} and upcoming updates to the [Power BI Desktop connector](https://docs.microsoft.com/en-us/vsts/report/powerbi/data-connector-connect){:target=\"_blank\"} for VSTS are intended to replace and improve on the capabilities of the Content Pack. While the Analytics Marketplace extension currently supports Work Item Tracking data, we will update it to support additional data types including Tests, Build, Release and Version Control. In the interim, you can use [VSTS REST APIs](https://www.visualstudio.com/en-us/docs/integrate/api/overview){:target=\"_blank\"} as an alternative to the Content Pack to report on these additional data types." %}
## Pre-requisites
## Prerequisites
1. You should have Office365 account in order to integrate Visual Studio Team Services with Power BI
1. Visual Studio Team Services account. If you don't have one, you can create from [here](https://www.visualstudio.com/)
1. Visual Studio Team Services account. If you don't have one, you can create from [here](https://www.visualstudio.com/team-services){:target="_blank"}
**You can start a free trial if you don't have Office365 account from [here](https://teams.microsoft.com/start)**
{% include tip.html content ="You can start a free trial if you don't have Office365 account from [here](https://teams.microsoft.com/start){:target=\"_blank\"}" %}
## Authorize Power BI to access your account data
@ -36,13 +36,13 @@ Your first step requires you to authorize Power BI to access your Team Services
## Log in to Power BI
1. Go to [Power BI](http://powerbi.com) site
1. Go to [Power BI](http://powerbi.com){:target="_blank"} site
![](images/1.png)
![1](images/1.png)
1. Click **Sign In** in the upper right corner to log in to Power BI.
![](images/2.png)
![2](images/2.png)
1. You can use either AAD or MSA account to log in.
@ -54,15 +54,15 @@ Workspaces in Power BI allows you to have isolated area to monitor your teams wo
1. Go to **Workspaces** and click on **Create app workspace**.
![](images/11.png)
![11](images/11.png)
1. Give a name for the workspace and set the desired permissions. For this lab let's keep it default and create one.
![](images/12.png)
![12](images/12.png)
1. A new workspace is created now.
![](images/13.png)
![13](images/13.png)
## Connect to services with content packs for Power BI
@ -70,39 +70,39 @@ You can connect to content packs for a number of services you use to run your bu
1. Click **Get Data** on the left bottom corner to select .
![](images/3.png)
![3](images/3.png)
1. You can pull out the data either from one of the sources. Since we are integrating with VSTS, select **Services** and click on **Get**.
![](images/4.png)
![4](images/4.png)
1. Browse the content packs, or tap in the search box and type keywords:
![](images/29.png)
![29](images/29.png)
1. In the search box, type **Visual Studio** and click on **Get it now**.
![](images/5.png)
![5](images/5.png)
1. Enter **YOUR ACCOUNT NAME**, if your Team Services URl is **YOURACCOUNTNAME.visualstudio.com**. Also enter the Project name that you want to track and click on **Next**
![](images/6.png)
![6](images/6.png)
1. A window would appear to allow the access to your VSTS account. Click **Sign in**.
![](images/8.png)
![8](images/8.png)
1. A window would pop up to allow the permission to read the data from the VSTS account. Click on **Accept**.
![](images/9.png)
![9](images/9.png)
1. Now the data is being imported and you will see the notification on the right corner top.
![](images/7.png)
![7](images/7.png)
1. Once the data is imported, you will see the dashboard with the data.
![](images/10.png)
![10](images/10.png)
## Reports in Power BI
@ -110,27 +110,27 @@ A Power BI report is a multi-perspective view into a dataset, with visualization
1. Click on **Reports** and select **Visual Studio Team Services**. By default when the data is imported, a report would have generated automatically.
![](images/14.png)
![14](images/14.png)
1. The report along with the data is shown. Modify the report to show the desired data. To do so, click on **Edit report** on the top.
![](images/15.png)
![15](images/15.png)
1. Visualizations and additional data can be added from the filter sets and the visualizations table from the right side.
![](images/16.png)
![16](images/16.png)
1. Different reports can be obtained. Agile Status report, Sprint Status report, Git report etc.
![](images/17.png)
![17](images/17.png)
![](images/18.png)
![18](images/18.png)
![](images/19.png)
![19](images/19.png)
1. Add new pages to the report with the desired data. Click on + at the bottom of the report to add new and select the visualizations and data to appear in the page.
![](images/20.png)
![20](images/20.png)
## Q&A in Power BI
@ -142,11 +142,11 @@ The experience is truly interactive…and fast! Powered by an in-memory storage,
1. From your workspace, go to Dashboard and click on **Ask a question about your data**
![](images/21.png)
![21](images/21.png)
1. Place your cursor in the question box. Even before you start typing, Q&A displays a new screen with suggestions to help you form your question.
![](images/23.png)
![23](images/23.png)
This list contains:
@ -158,11 +158,11 @@ The experience is truly interactive…and fast! Powered by an in-memory storage,
1. Select from the dropdown or begin typing your own question.
![](images/24.png)
![24](images/24.png)
1. As you type a question, Power BI Q&A picks the best visualization to display your answer; and the visualization changes dynamically as you modify the question. Q&A also helps you formulate your question with auto-completion, by restating your question, and with other textual and visual aids.
![](images/25.png)
![25](images/25.png)
1. When you type a query, Power BI looks for an answer in any dataset that has a tile on that dashboard. If all the tiles are from datasetA, then your answer will come from datasetA. If there are tiles from datasetA and datasetB, then Q&A will search for the best answer from those 2 datasets.
@ -170,12 +170,12 @@ The experience is truly interactive…and fast! Powered by an in-memory storage,
1. When you're happy with the result, pin the visualization to a dashboard by selecting the pin icon in the top right corner.
![](images/26.png)
![26](images/26.png)
1. You can pin this to an **Existing dashboard** or to a **New dashboard**. Select **Existing dashboard.**
![](images/27.png)
![27](images/27.png)
1. Go back to dashboard, you should see the pinned item now.
![](images/28.png)
![28](images/28.png)

Просмотреть файл

@ -10,18 +10,18 @@ folder: /labs/vsts/
<div class="productcolmain">
<div class="pageheader">
<b>DevOps with Visual Studio Team Services</b> </div>
<div class="herotext2">
<div class="herotext2">
Learn how you can plan better, code together and ship faster with Visual Studio Team Services
</div>
</div>
</div>
## Step-by-Step Tutorials
<div class="lablist">
<div class="header2"> <b>Getting Started</b></div>
<ul class="fa-ul">
<li class="labslistitems"><i class="fa-li fa fa-book" style="color: #002868;"></i> <a href="agile/">Agile Planning and Portfolio Management </a> </li>
<ul class="fa-ul">
<li class="labslistitems" style="margin-top: 0px;"><i class="fa-li fa fa-book" style="color: #002868;"></i> <a href="agile/">Agile Planning and Portfolio Management </a> </li>
<li class="labslistitems"><i class="fa-li fa fa-book" style="color: #002868;"></i> <a href="git/">Version Controlling with Git </a> </li>
<li class="labslistitems"><i class="fa-li fa fa-book" style="color: #002868;"></i> <a href="packagemanagement/">Package Management</a> </li>
<li class="labslistitems"><i class="fa-li fa fa-book" style="color: #002868;"></i> <a href="continuousintegration/">Setting up a Continuous Integration</a> </li>
@ -30,31 +30,9 @@ folder: /labs/vsts/
<li class="labslistitems"><i class="fa-li fa fa-book" style="color: #002868;"></i><a href="testmanagement/">Test Planning and Management with Visual Studio Team Services</a> </li>
<li class="labslistitems"><i class="fa-li fa fa-book" style="color: #002868;"></i><a href="exploratorytesting/">Exploratory Testing and Feedback Management using Visual Studio Team Services</a> </li>
<li class="labslistitems"><i class="fa-li fa fa-book" style="color: #002868;"></i><a href="selenium/">UI Automation using Selenium Tests</a> </li>
<li class="labslistitems"><i class="fa-li fa fa-book" style="color: #002868;"></i><a href="load/">Load Testing using Visual Studio Team Services</a> </li>
<li class="labslistitems"><i class="fa-li fa fa-book" style="color: #002868;"></i><a href="monitor/">Monitoring Applications using Application Insights</a> </li>
<li class="labslistitems"><i class="fa-li fa fa-book" style="color: #002868;"></i><a href="teams/">Increase team collaboration and Communication with Microsoft Teams</a> </li>
<li class="labslistitems"><i class="fa-li fa fa-book" style="color: #002868;"></i><a href="powerbi/">Connect to Visual Studio Team Services with Power BI</a> </li>
</ul>
<li class="labslistitems"><i class="fa-li fa fa-book" style="color: #002868;"></i><a href="load/">Load Testing using Visual Studio Team Services</a> </li>
<li class="labslistitems"><i class="fa-li fa fa-book" style="color: #002868;"></i><a href="monitor/">Monitoring Applications using Application Insights</a> </li>
<li class="labslistitems"><i class="fa-li fa fa-book" style="color: #002868;"></i><a href="teams/">Increase team collaboration and Communication with Microsoft Teams</a> </li>
<li class="labslistitems"><i class="fa-li fa fa-book" style="color: #002868;"></i><a href="powerbi/">Connect to Visual Studio Team Services with Power BI</a> </li>
</ul>
</div>
## Prerequisites
In order to complete these labs you will need
- **Visual Studio Team Services account**: If you don't have one, you can sign up for one, from [here](https://www.visualstudio.com/){:target="_blank"}
- **Microsoft Azure Account**: You will need a valid and active Azure account for the Azure labs. If you do not have one, you can sign up for a [free trial](https://azure.microsoft.com/en-us/free/){:target="_blank"}
- If you are a Visual Studio Active Subscriber, you are entitled for a $50-$150 credit per month. You can refer to this [link](https://azure.microsoft.com/en-us/pricing/member-offers/msdn-benefits-details/){:target="_blank"} to find out more including how to activate and start using your monthly Azure credit.
- If you are not a Visual Studio Subscriber, you can sign up for the FREE [Visual Studio Dev Essentials](https://www.visualstudio.com/dev-essentials/){:target="_blank"} program to create **Azure free account** (includes 1 yr of free services, $200 for 1st month).
- **Visual Studio 2017** or higher version - You will need Visual Studio for some of the labs. You can use your own machine with VS 2017 installed, or download and use the latest [ALM VM](../tfs/), or spin up a VM pre-installed with Visual Studio on [Azure](https://portal.azure.com){:target="_blank"}.
- You can use the [**Visual Studio Team Services Demo Data generator**](https://vstsdemogenerator.azurewebsites.net){:target="_blank"} to provision a project with pre-defined data on to your Visual Studio Team Services account.
## Working with VSTS DemoGenerator
Visual Studio Team Services Demo Generator helps you create projects on your Visual Studio Team Services account with preset sample content which includes source code, work items, service endpoints, build and release definitions based on a template you choose. The purpose of this system is to help follow hands-on-labs, demos and other education material provided by Microsoft. For step-by-step instructions on using the demo generator to provision your project, please see this [document](/labs/vsts/VSTSDemoGenerator)
If you are not using the VSTS Demo Data Generator, you can clone the source code required to run the application referenced in the labs, from this [GitHub repository](https://github.com/Microsoft/myhealthclinic2017)

Просмотреть файл

@ -1,7 +1,7 @@
---
title: UI Automation using Selenium Tests
layout: page
sidebar: vsts
sidebar: vsts2
permalink: /labs/vsts/selenium/
folder: /labs/vsts/selenium/
---
@ -12,15 +12,17 @@ Last updated : {{ "now" | date: "%b %d, %Y" }}.
Performing user interface testing as part of the build process is a great way of detecting unexpected changes and need not be difficult. This lab describes using Selenium to test your website in a continuous integration build.
## Pre-requisites
## Prerequisites
In order to complete this lab you will need-
- **Visual Studio Team Services account**. If you don't have one, you can create from [here](https://www.visualstudio.com/)
- Visual Studio 2017 virtual machine provided by Microsoft. Click the button below to launch the virtual machine.
- **Visual Studio 2017** or higher version
<a href="" class="launch-hol" role="button" target="_blank"><span class="lab-details">Launch the virtual machine</span></a>
- You can use the **[VSTS Demo Data generator](http://vstsdemogenerator.azurewebsites.net/Environment/Create)** to provison a project with pre-defined data on to your Visual Studio Team Services account. Please use the ***My Health Clinic*** template to follow the hands-on-labs.
- **Visual Studio Team Services account**. If you don't have one, you can create from [here](https://www.visualstudio.com/team-services){:target="_blank"}
- You can use the **[VSTS Demo Data Generator](http://vstsdemogenerator.azurewebsites.net){:target="_blank"}** to provison a project with pre-defined data on to your Visual Studio Team Services account. Please use the ***My Health Clinic*** template to follow the hands-on-labs.
- If you are not using the VSTS Demo Data Generator, you can clone the code from here
@ -32,7 +34,7 @@ As there is no template for Selenium testing, the easiest way to get started is
> Save the new project and solution in your repository directory.
![](images/1.png)
![1](images/1.png)
1. After the project is created, you must add the Selenium and browser driver references used by the browser to execute the tests.
@ -122,59 +124,59 @@ As there is no template for Selenium testing, the easiest way to get started is
1. Go to your Azure Resource Group to get the URI of the Web App Service.
![](images/2.png)
![2](images/2.png)
1. Update the **baseURL** variable with the URI.
> http://{your_webapp}.azurewebsites.net/
1. Download the phantomJS driver from <a href="http://phantomjs.org/download.html/">here</a>
1. Download the phantomJS driver from [here](http://phantomjs.org/download.html){:target="_blank"}
1. Unblock the zip and extract the content. Include the phantomjs.exe file in the unittest project.
![](images/3.png)
![3](images/3.png)
1. Run the Selenium test locally using Test Explorer.
![](images/4.png)
![4](images/4.png)
### Task 2: Include the test in a Continuous Integration build
1. To include the Selenium test as part of a build, the source code must be in version control.
![](images/5.png)
![5](images/5.png)
1. Sign in to your Visual Studio Team Services account
>https://{youraccount}.visualstudio.com
>https://{youraccount}.visualstudio.com
1. Select Build & Release > Explorer.
![](images/6.png)
![6](images/6.png)
1. Edit your build definition and add a Nuget, Visual Studio build and a Visual Studio Test task.
![](images/7.png)
![7](images/7.png)
1. From the **Visual Studio Test** task set the **URL, Browser and Test Category** parameters.
- Test Assembly: Update the wildcards to be sure that the task will find your test assembly.
- Override TestRun Parameters: URL=http://{your_webapp}.azurewebsites.net/;Browser=PhantomJS
- Override TestRun Parameters: URL= http://{your_webapp}.azurewebsites.net/;Browser=PhantomJS
{% include note.html content= "The URL and Browser are passed in as Test Run Parameters. If you look at the Unit Test class above you will see these parameters are used if they exist." %}
![](images/8.png)
![8](images/8.png)
1. Save the build definition and queue a new build. Notice that you can set the URL and Browser Properties in the Queue build dialog, because the code you used for the UnitTest1.cs class set the Allow at Queue Time variable.
{% include note.html content= "While you could run the Tests using the PhantomJS driver on the hosted build agent the other drivers will require to be run interactively –therefore will fail on the hosted build agent. The best solution is probably running your build agent or using Selenium Grid to remote those calls.
{% include note.html content= "While you could run the Tests using the PhantomJS driver on the hosted build agent the other drivers will require to be run interactively –therefore will fail on the hosted build agent. The best solution is probably running your build agent or using Selenium Grid to remote those calls.<br/>
The setting for the build controller is in the General tab of the build definition. For information about running your own build agent, see [Deploy a Windows build agent](https://www.visualstudio.com/en-us/docs/build/admin/agents/v2-windows)" %}
The setting for the build controller is in the General tab of the build definition. For information about running your own build agent, see [Deploy a Windows build agent](https://www.visualstudio.com/en-us/docs/build/admin/agents/v2-windows){:target=\"_blank\"}" %}
1. To validate the test results from a build, open the build summary from the Explorer tab.
![](images/9.png)
![9](images/9.png)
>The build summary includes a snapshot of the test results. There is also a Tests results page that highlights the build-on-build changes, including errors, stack traces, and the ability to easily create a bug that contains this information.
> The build summary includes a snapshot of the test results. There is also a Tests results page that highlights the build-on-build changes, including errors, stack traces, and the ability to easily create a bug that contains this information.
![](images/10.png)
![10](images/10.png)

Просмотреть файл

@ -1,7 +1,7 @@
---
title: Test Planning and Management with Visual Studio Team Services
layout: page
sidebar: vsts
sidebar: vsts2
permalink: /labs/vsts/testmanagement/
folder: /labs/vsts/testmanagement/
---
@ -14,7 +14,7 @@ Last updated : {{ "now" | date: "%b %d, %Y" }}.
## Test Manager Extension
You will need the **Test Manager** extension to get the comprehensive set of testing features in your Visual Studio Team Services account. This extension is included with Visual Studio Enterprise, MSDN Platforms and Test Professional subscriptions. If you do not have any of these subscriptions, then you will need to acquire or request a trial version from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms.vss-testmanager-web). Please see the **"Installing the Test Manager Extension"** section below for step-by-step instructions to install the extension.
You will need the **Test Manager** extension to get the comprehensive set of testing features in your Visual Studio Team Services account. This extension is included with Visual Studio Enterprise, MSDN Platforms and Test Professional subscriptions. If you do not have any of these subscriptions, then you will need to acquire or request a trial version from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms.vss-testmanager-web){:target="_blank"}. Please see the **"Installing the Test Manager Extension"** section below for step-by-step instructions to install the extension.
## Task 1: Creating Test Plan
@ -24,9 +24,9 @@ Visual Studio Team Services (VSTS) allows teams to organize test cases into a hi
1. Click the green + to create a new **Test Plan**. We will create a test plan for testing our backlog items in Sprint1. Name the test plan and select ***MyHealthClinic\Sprint 1*** for the iteration
![](images/1.png)
![1](images/1.png)
![](images/2.png)
![2](images/2.png)
1. Add a **Test Suite** now to group test cases further. You can create three types of test suites:
@ -36,24 +36,24 @@ Visual Studio Team Services (VSTS) allows teams to organize test cases into a hi
1. Expand the dropdown next to the newly created suite and select **New requirement-based suite.**
![](images/4.png)
![4](images/4.png)
1. Add a clause to filter by the iteration path for the sprint and click **Run query**. Select the backlog items that you want to test this sprint and select **Create suites** to add them as requirements to your test plan by creating test suites from them.
![](images/5.png)
![5](images/5.png)
1. Now, you can start adding test cases. Select the backlog item to which you want to add a test case and select **New Test Case**
![](images/6.png)
![6](images/6.png)
1. Enter a name for the test case and add some test steps. Each step includes an **Action**, which describes the action the tester needs to perform. Optionally, a step can include an **Expected Result**, which describes the expected result of the given action. You can add attachments to a step if you want.
![](images/newtestcase.png)
![newtestcase](images/newtestcase.png)
1. Select **Save & Close** to save the test case and return to the previous page
1. While you can create test cases one at a time, its sometimes easier to use a grid layout to quickly add many test cases. In the test case panel, select **New \| New test case using grid**.
![](images/7.png)
![7](images/7.png)
1. Enter a few test cases. Select the **Save All** button when you are done and select the **View: Grid** to toggle back to the list view
@ -73,7 +73,7 @@ Visual Studio Team Services (VSTS) allows teams to organize test cases into a hi
| | Click on Login button | dashboard screen displayed |
| | Select Appointments | Appointments main screen displayed |
![](images/testcasegrid.png)
![testcasegrid](images/testcasegrid.png)
## Task 2: Running Manual Tests
@ -85,23 +85,23 @@ We will use the web-based Test Runner since we are testing a web application.
1. Right-click the test case created earlier and select **Run** to start the test execution.
![](images/30.png)
![30](images/30.png)
1. You can select **Run with Options** to customize each test run. The first option is to select a **Runner**, which will be the browser in this scenario. Next, you have the option to specify what kind of **data to collect**. Finally, you may optionally specify which build is being tested to make it easier to associate the results with the build they were from.
![](images/31.png)
![31](images/31.png)
1. If the Test Runner window does not appear, check if the window is blocked by the pop-up blocker. If so, click the Pop-up blocker button, select **Always allow** and then click Done. You can then launch the **Test runner** window successfully.
![](images/popupblocker.png)
![popupblocker](images/popupblocker.png)
1. You can see the **Test Runner** window now.
![](images/35.png)
![35](images/35.png)
1. As you go about performing the test steps, you can capture the results for every step. If the step results in the expected outcome, you can mark the step as "Passed" by selecting the OK symbol next to the test step. To mark a test step as "Failed", you can select the cancel symbol. You can also right-click the test step to mark the results. You can also add comments and attachments to the test step
![](images/stepresults.png)
![stepresults](images/stepresults.png)
### Capturing rich data
@ -109,13 +109,13 @@ Often when you do manual testing, you want to capture just more than a pass or f
1. You can use the buttons on the top of the Test Runner window to capture a screen shot or start/stop recording a video.
![](images/capturescreenshot.png)
![capturescreenshot](images/capturescreenshot.png)
You will need to select from the dropdown list , an open window from which you want to capture the screenshot.
1. You can also capture your interactions with the app that you are testing, as image action logs. This can be very helpful when you identify a bug and want to record the steps that led to the bug. To start recording your action, select the **Capture user actions...** icon and choose the window that contains the app that you are testing
![](images/captureuseraction.png)
![captureuseraction](images/captureuseraction.png)
1. Select **Start** to start capturing the actions. The Test Runner will now record all the actions you take on the app's browser tab.
@ -123,11 +123,11 @@ Often when you do manual testing, you want to capture just more than a pass or f
1. Select the **Stop** button to finish capturing your actions. The action log will be added to the test results as an attachment.
![](images/imagelogattach.png)
![imagelogattach](images/imagelogattach.png)
1. To view the data captured, you can click the attachment to open it in a browser
![](images/imagelog.png)
![imagelog](images/imagelog.png)
## Task 4: Creating Shared Steps
@ -137,29 +137,29 @@ As you may have observed, the login sequence is repeated in the two test cases c
1. Open the "Create New Appointment" test case that you created above
![](images/testcasecreatenewappt.png)
![testcasecreatenewappt](images/testcasecreatenewappt.png)
1. Select steps 1-5 (use **Shift+Click**) and right-click and select **Create shared steps**
![](images/createsharedsteps.png)
![createsharedsteps](images/createsharedsteps.png)
1. Provide a name for the shared steps and click **Create**.
![](images/51.png)
![51](images/51.png)
1. Now you can see the steps you selected are replaced with a link to the new shared steps. You can double-click the link to open the shared steps for viewing/editing.
![](images/52.png)
![52](images/52.png)
1. Click **Save & Close** to save the test case.
1. You can use the shared steps in other test cases. Open the other test case that you created. **Delete** the steps that you want to be replaced. Select the **Insert shared steps** button
![](images/53.png)
![53](images/53.png)
1. This will bring a query window with a query that will fetch all work items of **Microsoft.SharedStepsCategory**. You can add more clauses, if required. Click **Run** to run the query. Select the shared step that we created above and select the **Insert shared steps** button
![](images/54.png)
![54](images/54.png)
When you run the tests case now, the shared steps will be expanded. You can mark the entire sequence as passed or failed or mark each step separately.
@ -169,48 +169,48 @@ As you may have observed, the login sequence is repeated in the two test cases c
1. Select the **Runs** tab under the **Test** hub. Double-click the most recent test run to open it.
![](images/44.png)
![44](images/44.png)
1. The **Run summary** tab provides an overview of the test run, as well as high-level details on the results of all tests included as part of the run.
![](images/45.png)
![45](images/45.png)
1. Select the **Test results** tab. This tab lists the results of each individual test case included in the run along with their results. Since there was only one test case included here, double-click it to open.
![](images/46.png)
![46](images/46.png)
1. You can review all details for this particular test case run from here.
![](images/47.png)
![47](images/47.png)
1. Review the results of each step in this iteration, during the test run.
![](images/48.png)
![48](images/48.png)
1. If you update the test results , you can select **Update Analysis** to change the test owner, test result and resolution type
![](images/updateanalysis.png)
![updateanalysis](images/updateanalysis.png)
## Installing the Test Manager Extension
1. To acquire a full or a trial version of the **Test Manager** extension, select **Browse MarketPlace** from your account by clicking on the **shopping bag** icon.
![](images/25.png)
![25](images/25.png)
1. Under **Visual Studio Team Services** section, search for **Test Manager** extension in the Marketplace.
![](images/26.png)
![26](images/26.png)
1. Install the extension by clicking **Start Trial**.
![](images/27.png)
![27](images/27.png)
1. Select the account to which the extension has to be installed and click **Continue**.
![](images/28.png)
![28](images/28.png)
1. You should see a confirmation message. Click on **Confirm** to go ahead with the installation.
![](images/29.png)
![29](images/29.png)
1. Trial extensions are available to all users. If you have requested for a trial version of the Test Manager extension, you do not have to do anything further. You are ready to start using the test management capabilities of Visual Studio Team Services.

Просмотреть файл

@ -1,9 +1,14 @@
# Deployment of ASP.NET application to the Azure App Service using VSTS
This lab details the deployment of an [ASP.NET](https://www.asp.net/) application to the Azure App Service using Visual Studio Team Services (VSTS).
---
title: Deployment of ASP.NET application to the Azure App Service using VSTS
layout: page
sidebar: vsts2
permalink: /labs/vstsextend/aspdotnet/
folder: /labs/vstsextend/aspdotnet/
---
## Overview
This lab details the deployment of an [ASP.NET](https://www.asp.net/){:target="_blank"} application to the Azure App Service using Visual Studio Team Services (VSTS).
ASP.NET is an open source web framework for building modern web applications and services. ASP.NET creates websites based on HTML5, CSS, and JavaScript that are simple, fast, and can scale to millions of users.
### Prerequisites for the lab
@ -22,7 +27,7 @@ ASP.NET is an open source web framework for building modern web applications and
## Setting up the VSTS Project
1. Use the [VSTS Demo Generator](https://vstsdemogenerator.azurewebsites.net/?name=PartsUnlimited) to provision the team project on the VSTS account.
1. Use the [VSTS Demo Generator](https://vstsdemogenerator.azurewebsites.net/?name=PartsUnlimited){:target="_blank"} to provision the team project on the VSTS account.
> **VSTS Demo Generator** helps you create team projects on your VSTS account with sample content that include source code, work items,iterations, service endpoints, build and release definitions based on the template you choose during the configuration.
@ -34,7 +39,7 @@ ASP.NET is an open source web framework for building modern web applications and
## Exercise 1: Endpoint Creation
> The connection between the VSTS and the Azure is not automatically established during the team project provisioning, and hence the endpoints need to be created manually. This endpoint will be used to connect **VSTS** with **Azure**. Follow the steps outlined below to create the endpoint.
The connection between the VSTS and the Azure is not automatically established during the team project provisioning, and hence the endpoints need to be created manually. This endpoint will be used to connect **VSTS** with **Azure**. Follow the steps outlined below to create the endpoint.
1. In the VSTS home page, click on the **Settings** gear icon ![Admin Settings](images/gear.png) and then click on the **Services** option to navigate to the **Services** screen.
@ -48,7 +53,7 @@ ASP.NET is an open source web framework for building modern web applications and
1. Once the connection is established, manually map the endpoints to the release definition.
> An error `TFS.WebApi.Exception: Page not found` will be encountered for the Azure tasks in the release definition. This is due to a recent change in the VSTS Release Management API. While this is being fixed on the VSTS Demo Generator, the issue can be fixed by typing a random text in the **Azure Subscription** field and then clicking the **Refresh** icon next to it. Once the field is refreshed, the endpoint can be selected from the dropdown.
{% include warning.html content= "An error `TFS.WebApi.Exception: Page not found` will be encountered for the Azure tasks in the release definition. This is due to a recent change in the VSTS Release Management API. While this is being fixed on the VSTS Demo Generator, the issue can be fixed by typing a random text in the **Azure Subscription** field and then clicking the **Refresh** icon next to it. Once the field is refreshed, the endpoint can be selected from the dropdown." %}
1. Click on the **Build & Release** section and then click on the **Releases**. Select the release definition **PartsUnlimitedE2E** and click on the **Edit** button.
@ -84,7 +89,7 @@ ASP.NET is an open source web framework for building modern web applications and
## Exercise 3: Initiate Continuous Integration (CI) and Continuous Deployment (CD)
>To automatically initiate the CI-CD, the source code needs to be modified and committed to the source code repository.
To automatically initiate the CI-CD, the source code needs to be modified and committed to the source code repository.
1. Navigate to the **Code** hub on the VSTS portal.
@ -130,7 +135,7 @@ ASP.NET is an open source web framework for building modern web applications and
## Exercise 4: Continuous Delivery
> The release pipeline is configured as **Infrastructure as a Code** to deploy the application which is associated to the build and is automatically triggered when the build is successfully completed.
The release pipeline is configured as **Infrastructure as a Code** to deploy the application which is associated to the build and is automatically triggered when the build is successfully completed.
1. To view the release progress, click on the **Build and Release** hub and select the **Release** option.
@ -148,7 +153,7 @@ ASP.NET is an open source web framework for building modern web applications and
| Tasks used in Release | Usage / Purpose |
|-------|-------|
| **Azure Resource Group Deployment**|The project used in this lab contains the front-end (Azure App Service) and back-end (Azure SQL DB) services. These will be provisioned as [PAAS on Azure](https://azure.microsoft.com/en-in/overview/what-is-paas/) using [ARM](https://docs.microsoft.com/en-us/azure/azure-resource-manager/resource-manager-create-first-template) templates. The task will create the above services in a resource group named **ASPDOTNET**|
| **Azure Resource Group Deployment**|The project used in this lab contains the front-end (Azure App Service) and back-end (Azure SQL DB) services. These will be provisioned as [PAAS on Azure](https://azure.microsoft.com/en-in/overview/what-is-paas/){:target="_blank"} using [ARM](https://docs.microsoft.com/en-us/azure/azure-resource-manager/resource-manager-create-first-template){:target="_blank"} templates. The task will create the above services in a resource group named **ASPDOTNET**|
| **Azure App Service Deploy**| The task is used to deploy a Web project to the Azure App Service created in the previous step|
1. To view the outcome of the release, click on the **View releases** option.

Просмотреть файл

@ -1,4 +1,12 @@
# Deploy an ASP.NET Core application to Azure App Service using VSTS
---
title: Deploy an ASP.NET Core application to Azure App Service using VSTS
layout: page
sidebar: vsts2
permalink: /labs/vstsextend/dotnetcore/
folder: /labs/vstsextend/dotnetcore/
---
## Overview
This lab shows how to deploy an ASP.NET Core application to Azure App Service with Visual Studio Team Services.
@ -25,15 +33,15 @@ This lab shows how to deploy an ASP.NET Core application to Azure App Service wi
## Setting up the VSTS Project
1. Use the [VSTS Demo Generator](https://vstsdemogenerator.azurewebsites.net) to provision the team project on the VSTS account.
1. Use the [VSTS Demo Generator](https://vstsdemogenerator.azurewebsites.net/?name=MyHealthClinic){:target="_blank"} to provision the team project on the VSTS account.
> **VSTS Demo Generator** helps you create team projects on your VSTS account with sample content that include source code, work items,iterations, service endpoints, build and release definitions based on the template you choose during the configuration.
![VSTS Demo Generator](images/vstsdemogen.png)
![VSTS Demo Generator](images/vsts_demoGen.png)
1. Once the team project is provisioned, click on the URL to navigate to the team project.
![VSTS Demo Generator](images/VSTSDemoGeneratorCreate.png)
![VSTS Demo Generator](images/project_provision.png)
## Exercise 1: Endpoint Creation

Просмотреть файл

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.cls-1{fill:#5c2d91;}.cls-2,.cls-3{fill:#fff;}.cls-2{opacity:0.1;}</style></defs><title>logo_NET</title><circle class="cls-1" cx="32" cy="32" r="32"/><path class="cls-2" d="M9.82,9A32,32,0,1,0,55,54.18Z"/><path class="cls-3" d="M7.4,41.25a1.35,1.35,0,0,1-1-.42,1.38,1.38,0,0,1-.41-1,1.4,1.4,0,0,1,.41-1,1.34,1.34,0,0,1,1-.43,1.37,1.37,0,0,1,1,.43,1.39,1.39,0,0,1,.42,1,1.37,1.37,0,0,1-.42,1A1.38,1.38,0,0,1,7.4,41.25Z"/><path class="cls-3" d="M27.27,41H24.65L15.28,26.46a6.06,6.06,0,0,1-.58-1.14h-.08a18.71,18.71,0,0,1,.1,2.5V41H12.59V22.77h2.77l9.12,14.28q.57.89.74,1.22h.05a19.29,19.29,0,0,1-.13-2.68V22.77h2.13Z"/><path class="cls-3" d="M41.69,41H32V22.77h9.24V24.7H34.18v6.06h6.58v1.92H34.18V39h7.52Z"/><path class="cls-3" d="M56,24.7H50.7V41H48.57V24.7H43.33V22.77H56Z"/></svg>

После

Ширина:  |  Высота:  |  Размер: 888 B

Просмотреть файл

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.cls-1{fill:#5c2d91;}.cls-2,.cls-3{fill:#fff;}.cls-2{opacity:0.1;}.cls-4{fill:#f2f2f2;}</style></defs><title>logo_NETcore</title><circle class="cls-1" cx="32" cy="32" r="32"/><path class="cls-2" d="M9.82,9A32,32,0,1,0,55,54.18Z"/><path class="cls-3" d="M7.4,37.25a1.35,1.35,0,0,1-1-.42,1.38,1.38,0,0,1-.41-1,1.4,1.4,0,0,1,.41-1,1.34,1.34,0,0,1,1-.43,1.37,1.37,0,0,1,1,.43,1.39,1.39,0,0,1,.42,1,1.37,1.37,0,0,1-.42,1A1.38,1.38,0,0,1,7.4,37.25Z"/><path class="cls-3" d="M27.27,37H24.65L15.28,22.46a6,6,0,0,1-.58-1.14h-.08a18.72,18.72,0,0,1,.1,2.5V37H12.59V18.77h2.77l9.12,14.28q.57.89.74,1.22h.05a19.28,19.28,0,0,1-.13-2.68V18.77h2.13Z"/><path class="cls-3" d="M41.69,37H32V18.77h9.24V20.7H34.18v6.06h6.58v1.92H34.18V35h7.52Z"/><path class="cls-3" d="M56,20.7H50.7V37H48.57V20.7H43.33V18.77H56Z"/><path class="cls-4" d="M26.12,49.4a4.93,4.93,0,0,1-2.32.49,3.74,3.74,0,0,1-2.87-1.15,4.26,4.26,0,0,1-1.08-3,4.46,4.46,0,0,1,1.21-3.26,4.12,4.12,0,0,1,3.08-1.24,4.93,4.93,0,0,1,2,.35v1a4,4,0,0,0-2-.5,3.06,3.06,0,0,0-2.35,1,3.64,3.64,0,0,0-.9,2.58,3.47,3.47,0,0,0,.84,2.45,2.86,2.86,0,0,0,2.21.91,4.14,4.14,0,0,0,2.19-.56Z"/><path class="cls-4" d="M30.21,49.89A2.78,2.78,0,0,1,28.08,49a3.11,3.11,0,0,1-.79-2.23,3.24,3.24,0,0,1,.83-2.36,3,3,0,0,1,2.23-.85,2.69,2.69,0,0,1,2.09.83,3.28,3.28,0,0,1,.75,2.29,3.22,3.22,0,0,1-.81,2.3A2.84,2.84,0,0,1,30.21,49.89Zm.07-5.47a1.83,1.83,0,0,0-1.46.63,2.59,2.59,0,0,0-.54,1.74,2.45,2.45,0,0,0,.54,1.68,1.85,1.85,0,0,0,1.46.62,1.76,1.76,0,0,0,1.43-.6,2.62,2.62,0,0,0,.5-1.72,2.66,2.66,0,0,0-.5-1.73A1.75,1.75,0,0,0,30.28,44.42Z"/><path class="cls-4" d="M37.86,44.72a1.18,1.18,0,0,0-.73-.19,1.23,1.23,0,0,0-1,.58,2.68,2.68,0,0,0-.41,1.58v3.06h-1v-6h1V45h0a2.1,2.1,0,0,1,.63-1,1.43,1.43,0,0,1,.94-.35,1.57,1.57,0,0,1,.57.08Z"/><path class="cls-4" d="M43.72,47H39.49A2.24,2.24,0,0,0,40,48.54a1.86,1.86,0,0,0,1.42.54,3,3,0,0,0,1.86-.67v.9a3.48,3.48,0,0,1-2.09.57,2.54,2.54,0,0,1-2-.82,3.35,3.35,0,0,1-.73-2.3,3.28,3.28,0,0,1,.79-2.28,2.55,2.55,0,0,1,2-.88,2.26,2.26,0,0,1,1.82.76,3.18,3.18,0,0,1,.64,2.12Zm-1-.81a2,2,0,0,0-.4-1.29,1.37,1.37,0,0,0-1.1-.46,1.55,1.55,0,0,0-1.15.49,2.21,2.21,0,0,0-.59,1.27Z"/></svg>

После

Ширина:  |  Высота:  |  Размер: 2.2 KiB

Просмотреть файл

@ -16,7 +16,7 @@ summary:
<div class="productcolmain">
<div class="pageheader">
<b>Microsoft Visual Studio DevOps Hands-On-Labs</b> </div>
<div class="herotext2">
<div class="herotext2">
Hands-on-labs for Visual Studio Team Foundation Server and Visual Studio Team Services
</div>
</div>
@ -29,23 +29,25 @@ The Microsoft ALM/DevOps Hands-On-Labs is a set of self-paced labs based on Visu
<br />
<br />
<div align="center" class="labcols">
<div class="row" style="margin-left: 70px;">
<div class="lab-item col-md-4" align="center">
<span class="headnews"> <b> <a href="labs/tfs" class="labmain">Getting started with Visual Studio Team Foundation Server</a></b></span><br />
<a href="labs/tfs"><img style="margin: 10px;" src="images/tile-self-hosted-server.png" width="120" height="120"/></a><br />
<a href="labs/tfs" class="c-glyph"><span class="lab-details">View Details</span></a>
</div>
<div class="lab-item col-md-4" align="center">
<span class="headnews"> <b><a href="labs/vsts" class="labmain"> Getting started with Visual Studio Team Services</a></b></span><br />
<div class="col-sm-2"></div>
<div class="lab-item col-md-4" align="center">
<span class="headnews"> <b><a href="labs/vsts" class="labmain"> Visual Studio<br/> Team Services Labs</a></b></span><br />
<a href="labs/vsts"><img style="margin: 10px;" src="images/tile-cloud-hosted-server.png" width="120" height="120"/></a><br />
<a href="labs/vsts" class="c-glyph"><span class="lab-details">View Details</span></a>
</div>
<div class="lab-item col-md-4" align="center">
<div class="row" style="margin-left: 70px;">
<div class="lab-item col-md-4" align="center">
<span class="headnews"> <b> <a href="labs/tfs" class="labmain">Visual Studio<br/> Team Foundation Server Labs</a></b></span><br />
<a href="labs/tfs"><img style="margin: 10px;" src="images/tile-self-hosted-server.png" width="120" height="120"/></a><br />
<a href="labs/tfs" class="c-glyph"><span class="lab-details">View Details</span></a>
</div>
<!--div class="lab-item col-md-4" align="center">
<span class="headnews"> <b><a href="labs/vstsextend" class="labmain"> Extend and Integrate with Visual Studio Team Services</a></b></span><br />
<a href="labs/vstsextend"><img style="margin: 10px;" src="images/tile-integrate-with-cloud-services.png" width="120" height="120"/></a><br />
<!--span class="mainPageText"> DevOps with Visual Studio Team Services for Java</span><br /><br /-->
<a href="labs/vstsextend" class="c-glyph"><span class="lab-details">View Details</span></a>
</div>
<a href="labs/vstsextend" class="c-glyph"><span class="lab-details">View Details</span></a>
</div-->
</div>
</div>