Lab version:15.4 Last updated:11/6/2017

Overview

本实验是关于开发人员在使用Visual Studio完成日常软件开发工作时所接触到的场景, 比如可以直接在IDE中领取任务,提交代码,评审代码以及查询迭代工作状态等等。同时这个实验也将教您如何使用Team Foundation Version Control进行基本的源代码版本管理。 本实验使用的是Visual Studio。 如果您使用Eclipse作为开发工具,可以点击 这里 下载最新版本的Team Explorer Everywhere插件进行体验,不同IDE使用体验基本相同。

登陆培训环境

  1. 打开实验室环境

  2. 点击右上角的登陆链接。

  3. 使用微信登陆,扫描二维码。

  4. 选择环境列表

   

  1. 选择TFS Labs

  2. 找到已购环境,点击进入

   

  1. 点击 远程连接 中的图标,连接到远程实验环境。

   

> **Note:** 实验环境默认登陆用户为系统账户**azureuser**, 实验中需要使用环境预制账户如:**Sachin Raj (Sachin)**。
  1. 如果实验中需要切换用户,可以点击远程连接页面下拉菜单中的用户切换,输入用户名以及密码,点击连接,就可以实现切换实验环境远程登陆账号。

   

 

  1. 如果实验中需要复制粘贴文档中的相关内容到虚机中可以使用labs自带的复制粘贴版进行操作

 

关于Fabrikam Fiber的项目背景

这套动手实验室使用一家虚拟的公司Fabrikam Fiber作为实验背景。Fabrikam Fiber向美国提供有线电视和相关服务。他们正在迅速增长,并且已经将产品部署到Windows Azure,产品包括允许用户在网站上自助购票的应用;还有为其客户经理管理客户订单的ASP.NET MVC应用程序。

在这套动手实验室中,您将参与许多Fabrikam Fiber团队的开发和测试场景。在实验中这个由8-10人组成的团队使用Team Foundation Server来管理他们的源代码,运行他们的生成,测试他们的产品,并管理软件研发计划和跟踪软件项目的开发过程。

练习 1: 使用Visual Studio Team Foundation Server 2018提高开发人员工作效率

Task 1: 团队资源管理器概述

在本练习中,您将看到此版本中对Team Explorer所做更改的高级视图,并了解如何导航可用的功能。如果您不熟悉Team Foundation Server,则可以将Team Explorer视为Visual Studio用户访问Team Foundation Server功能的主要方式。

  1. 使用切换用户功能,切换登陆用户为 Sachin Raj (Sachin). 所有密码都是 P2ssw0rd

  2. 从任务栏启动Visual Studio 2017

  3. 当开发人员工作时, 该Team Explorer窗口为开发人员提供了显示被分配的任务,源代码管理,工作项跟踪,开发协作等功能。同时也提供了快速访问TFS门户,当前迭代任务版的链接。

  4. Team Explorer中的导航功能提供了Home按键:快速返回Team Explorer主页;Refresh按键:刷新当前界面;Back, Forward前进后退;连接其他项目等功能。当这个实验室提到BackHome按钮时,就是这些按钮。

  5. 点击Work Items

  6. Work Items视图显示已登录用户和团队收藏的查询,以及提供添加新建查询和工作项的功能。

  7. 点击Home按钮。

  8. 点击Source Control Explorer。这提供了查看源代码版本管理的所有内容以及本地的源代码状态视图。

  9. 选择Not mapped,映射本地工作区

  10. 点击Settings查看团队项目和团队项目集合的设置选项。

  11. 点击Home按钮。

  12. 点击Builds管理生成定义并查看生成历史记录。

  13. 我们将在下面的练习中查看My Work功能。

Task 2: 我的工作

在本练习中,您将了解在My Work中管理正在开发的任务。

  1. 点击Home按钮。

  2. Team Explorer - Home中,单击My Work

  3. My Work节点显示正在进行的工作项,可用工作项以及当前登录用户的暂停和搁置的工作。

  4. 单击位于Available Work Items部分中的Open Query超链接。

  5. 点击Edit Query

    注意: 这里显示的工作项类型以及它们是否显示在”My Work”中,取决于流程模板。在Scrum流程模板中,包括任务工作项。

  6. Close查询窗口,不保存更改。

  7. 假设我们现在要处理我们的一个可用工作项。在Team Explorer中的My Work页面上,右键单击以”Write code to get GPS location…“开头的工作项,然后从菜单中选择“Add to In Progress”选项。此工作项状态会同步到TFS服务器,以此方式将变化通知其他团队成员。

任务3:本地工作区

在本练习中,您将了解本地工作区的使用,以及本地工作区对离线开发体验的改进。

  1. Source Control Explorer中,在Dev分支上双击FabrikamFiber.CallCenter.sln文件将其打开。

  2. 在TFS2012及以前版本,对于代码的本地映射方式只能选择服务器方式。使用服务器工作区时,源代码管理的所有操作需要在服务器上执行,因此在断开连接的脱机场景中工作可能非常不方便。目前默认的本地工作区改善了这种情况下项目的开发体验。

  3. 基于服务器的工作空间可以更好地适用于大型项目,如文件量非常大。通过在Visual Studio右上角的Quick Launch搜索框中键入“workspaces”来加载“管理工作区”窗口。

    注意:Quick Launch”搜索框可用于查找Visual Studio中提供的大多数设置,工具和窗口,以此简化操作。使用Ctrl+Q组合键可以直接开始搜索。

  4. 选择Workspaces…链接。

  5. 在“Manage Workspaces”窗口中,单击Add…创建新的工作区。

  6. Add Workspace窗口中,单击Advanced查看所有可用选项。

  7. 找到Location工作区属性。默认情况下,新的工作区将使用本地工作区设置,但您可以根据需要选择创建基于服务器的工作区。

  8. 按两次Esc键关闭工作区窗口。

  9. Solution Explorer中,展开FabrikamFiber.Web\Content文件夹。

  10. 选择fullcalendar.css查看内容。请注意,该文件默认在CSS源代码编辑器中加载,加载的标签页显示在编辑区域的右上角,这种新的标签页类型称为预览标签。可以通过方向键切换文件,将焦点选中文件显示在此。

    ** 注意:** 预览标签页上有一个按钮,可以将其提升为常规选项卡(看上面屏幕截图中的箭头所指按钮)。

  11. 任意修改fullcalendar.css文件的一个style属性。Visual Studio会指出该文件已被签出,这里只是在本地工作区中签出。其他团队成员不会看到您正在处理此文件。

  12. 本地工作区的两个主要优点是断开网络连接的脱机工作场景得到了极大改善,并且使用其他工具修改受控文件时变得更加容易。为了演示这两点,首先在IIS中停止Team Foundation Server站点。这将模拟您正在离线工作的场景。

  13. 启动Internet Information Services (IIS) Manager

  14. 在IIS管理器中,展开VSALM服务器节点和“Sites”节点,选择Team Foundation Server站点。在Actions窗格中,单击Stop

  15. 返回到Visual Studio,打开Source Control Explorer窗口,然后单击refresh按钮。请注意,团队资源管理器现在处于disconnected状态。

  16. 即使我们现在与Team Foundation Server处于断开状态,我们仍然可以继续工作。右键单击Solution Explorer中的Content文件夹,然后选择文件资源管理器中的Open Folder in File Explorer

  17. 在桌面右键选择New | Text Document,保留默认名称,将新文件复制添加到Content文件夹中。

    注意: 将在稍后的练习中使用此文件 - 内容不重要,可以留空。

  18. Explorer窗口中,右键单击Site.css并选择Open With | Notepad

  19. Notepad中,将“body”样式颜色更改为“red”。

  20. Notepad中,保存并关闭Site.css并返回到Solution Explorer。请注意,Visual Studio检测到对文件的更改,并且该文件不是只读的,因为它是基于本地的工作区。

任务4:挂起的更改

  1. Team Explorer中单击Home,然后单击Pending Changes

    注意: 您应该在Pending Changes窗口中看到无法连接到远程服务器的错误消息,但您可以忽略它。因为在上面的练习中,我们停止了Team Foundation Server。

  2. Pending Changes窗口中,我们可以看到在前一个练习中对现有文件所做的两项更改会自动显示在Included Changes部分下。请注意,由于NuGet更新会自动下载文件,因此您可能会看到其他更改。

  3. Excluded Changes部分,有一个检测到的更改未被自动标记为包含的更改。请注意,由于NuGet引用可能会检测到更多的新增文件。点击Detected链接。

  4. Promote Candidate Changes窗口中,您可以看到之前添加的文本文档。如果有其他项目,请使用复选框取消选中所有项目,只勾选新建文件New Text Document.txt。点击Promote将其移动到包含的更改中。

  5. 您现在应该看到三个包含的更改。

  6. 我们可以在离线状态下继续处理我们的项目,但由于此时Check In按钮处于禁用状态,因此我们无法执行签入操作。

  7. Internet Information Services (IIS) Manager窗口中,选择Team Foundation Server站点,然后在Actions窗格中单击Start

  8. 返回到Visual Studio,然后单击Team Explorer - Pending Changes窗口中的refresh按钮。现在Check In按钮再次处于可用状态。现在不要签入您的更改

任务5:挂起和恢复

在本练习中,您将了解挂起和恢复当前工作的功能以及集成的代码评审功能。

  1. 开发人员面临的另一个常见但不可避免的难题是多个开发任务并行执行。在以前版本的Team Foundation Server中,这是通过Shelvesets解决的,即使您尚未准备好将这些更改保存到源代码版本控制中,它们也会保留您在服务器上的更改。在更新的VS版本中,通过SuspendResume功能简化了这一操作,同这个功能还可以帮助开发人员保留当时的IDE状态,如:断点,窗口位置等信息。

  2. 通过上面的练习,我们现在有了一些未签入的更改。在Team Explorer中打开My Work窗口,查看正在进行的工作。

  3. 先模拟开发调试场景:现在调试我们正在编写的代码时设置了一个断点。打开FabrikamFiber.Web\Controllers\HomeController.cs构造函数的第一行设置一个断点。

  4. Open the Immediate window from Debug | Windows | Immediate. 从Debug | Windows | Immediate打开Immediate窗口。

  5. 现在模拟开发过程中出现了需要马上被处理的高优先级Bug,并且我们希望能够在错误修复完成后返回到当前上下文。

  6. 按下Ctrl+Shift+S保存所有打开的文件。

  7. Team Explorer中打开My Work,选择Suspend下拉列表,然后单击Suspend。可以修改描述,但由于当前正在处理一个工作项,因此注释已被预先填充。

  8. Ctrl+Shift+F9清除所有断点,然后单击Yes确认操作。

  9. 选择Window | Close All Documents窗口,关闭主菜单中的所有文档。

  10. 通过选择Window | Reset Window Layout从主菜单重置窗口布局。当被要求确认操作时,请单击Yes

  11. 此时IDE显示窗口已经恢复初始布局,并且您正在处理的上一个任务应该列在My Work窗口的Suspended Work区域。

  12. 在团队资源管理器窗口顶部工作项搜索框中输入 “Canadian”在当前连接的团队项目的所有工作项中搜索,然后按回车键找到您要求处理的高优先级错误。

    注意: 在搜索框中输入的关键字会匹配工作项的“Title”,“Description”和“Repro Steps”等字段。您还可以单击下拉箭头显示搜索历史记录,并为添加搜索参数,如:Assigned To, Created By

  13. 双击标题为 “Customers with Canadian addresses not displaying properly”的Bug。

  14. 在显示Bug表单的窗口中,选择Links选项卡,查看链接的工作项目。这里有两个子任务。

  15. 假如其他团队成员已经在处理这些子任务,我们还需要完成一个任务才能修复Bug。选择Add link | New item添加新任务工作项。

  16. 在弹出窗口中,Work item type选择TaskTitle输入“Fix RegEx for Zip code property”,然后单击OK

  17. 将新任务分配给Sachin Raj,然后单击Save and close

  18. 返回到Team Explorer - My Work窗口。

  19. 您现在应该看到新任务出现在Available Work Items部分。

  20. 右键单击标题为 “Fix RegEx for Zip code property“的新任务,然后选择Add to In Progress

  21. Solution Explorer中,打开FabrikamFiber.DAL\Models\Address.cs

  22. Zip属性目前使用不正确的正则表达式验证输入,其结果是,使用Web应用程序的用户可以为加拿大的地址输入无效邮政编码。

  23. 假设通过更新正则表达式可以修复Bug。注释掉现有的正则表达式,然后取消被注释的另一个正则表达式。

  24. Ctrl+S保存对文件的更改。

任务6:代码评审

  1. 现在修复已经完成,让我们请求Clemri对这些修改进行代码审查,以确保修复无误。在Team Explorer - My Work中,单击Request Review链接。

  2. 输入Clemri Steyn作为评审者,然后按Enter键,在描述中输入“please check my regular expression change”,然后单击Submit Request

  3. 使用切换用户功能,切换登陆用户为 Clemri. 所有密码都是 P2ssw0rd

  4. 启动Visual Studio,从Start Page打开FabrikamFiber.CallCenter.sln

  5. 打开Team Explorer,然后导航到My Work。新代码审查请求显示在底部的Code Reviews中。选择Incoming Requests

  6. 双击代码评审请求以打开Code Review窗口。在Clemri Steyn的代码请求视图中能看到所有关于代码评审的信息,以便他能够确定他是否会通过或拒绝该评审。他可以查看整个变更集,查看其他评审者,甚至可以将某人添加到评审者列表,同时还可以查看相关工作项目,与代码评审请求相关的评论,以及最终显示所有更改的差异视图。

  7. Code Review窗口中,单击Accept链接开始处理代码评审。

  8. 单击评论中的Address.cs以使用VS内置的diff工具打开它。

  9. VS会以默认的Side-by-side mode方式打开比较工具,此工具将比较的两个版本分别在左右打开。红色背景颜色代表旧版本(左侧)的更改,绿色代表新版本(右侧)的更改。请注意比较视图底部的图例说明。

  10. 在比较文件工具栏中,选择compare mode下拉按钮来查看比较工具可以使用的各种显示模式。尝试一些不同的模式。

    注意: 如果比较文件工具未打开,请从Visual Studio中主菜单中的View | Toolbars | Compare Files打开。

  11. 假设我们人为改动是正确的,那么先对评审请求中的评论进行回复。点击Sachin消息下的Reply链接。

  12. 评论请输入“this looks good”,然后点击Save

  13. 请注意,新评论旁边有提示“Unsent”。在Clemri完成评论之前,评论将不会发送。

  14. 您还可以使用注释对单个文件和代码块进行注释。在diff查看器中,使用鼠标高亮Zip属性名称,右键单击,然后从菜单中选择Add Comment

  15. 在评论框中输入“Consider renaming to PostalCode”,然后点击Save

  16. 单击Code Review窗口顶部附近的Send Comments发送所有评论。如果评审者发现问题可以立即发送评论,开发人员可以根据评论立即开始解决问题,而不是等待评审者完成。

  17. 选择Send & Finish下拉菜单,然后选择Looks Good选项来结束代码审查评审。

  18. 使用切换用户功能,切换登陆用户为 Sachin. 所有密码都是 P2ssw0rd

  19. 返回到Team Explorer - My Work,然后双击打开之前的代码评审。

  20. Team Explorer - Code Review中,可以看到Clemri发表并完成了他的评论。

  21. 假设我们已经完成了代码评审过程。选择Close Review | Complete

  22. 现在我们已经修复这个高优先级的错误,可以签入更改了。单击Check In跳转到Pending Changes窗口,然后单击Check In按钮。在确认提示框中点击Yes

  23. 现在我们可以返回到我们原来正在处理任务,因为修复Bug之前的工作被中断了。在 My Work窗口中,右键单击Suspended Work下列出的任务,然后从菜单中选择Resume

  24. Shelveset恢复任务上下文后,您会注意到文档窗口和工具窗口以及它们的位置会恢复到我们在暂停此任务时的状态。虽然你不会在虚拟机中注意到这一点,但是如果你使用了多个显示器,你也会注意到所有的工具窗口都会在它们各自的显示器上打开。此功能可让您快速进入和退出任务,以帮助您处理每天频繁出现的多任务并行问题。

任务7:合并

  1. 您应该仍然从之前的练习中以Sachin身份登录。

  2. Team Explorer - Pending Changes中,您应该看到在Included Changes下列出的三个更改。双击Site.css将其打开。

  3. 我们之前将Body颜色属性更改为红色。现在我们来看看如果另一个用户对同一个文件进行不同的更改然后将其签入会发生什么情况。

  4. 使用Clemri登陆。

  5. 映射本地工作区。

  6. Solution Explorer中打开FabrikamFiber.Web\Content\Site.css

  7. 将body的font-size属性从.9em改为.5em

  8. Ctrl+Shift+S保存所有文档。

  9. Team Explorer - Pending Changes中,单击Check In

  10. 再次将用户切换回Sachin

  11. Solution Explorer中,右键单击Site.css在菜单中选择Get Latest Version

  12. Site.css文件中,请注意,Clemri已修改Body字体大小属性,但Sachin更改颜色属性为红色。这时Visual Studio会通过从Team Foundation Server获取的版本信息尝试自动合并。

  13. 将用户切换回Clemri

  14. Site.css中,将body color属性更改为black

  15. Ctrl+Shift+S保存所有文档。

  16. Check in挂起的更改。

  17. 将用户切换回Sachin

  18. 此时Sachin不知道Clemri已经将Body颜色属性改为黑色。在Solution Explorer中,用鼠标右键单击Site.css并选择获取Get Latest Version。这个操作将加载Resolve Conflicts窗口。

  19. Click Merge Changes In Merge Tool to begin the manual merge process. If you are prompted to save and close Site.css, go ahead and click Yes to continue. 单击Merge Changes In Merge Tool开始手动处理。如果提示您保存并关闭Site.css,请单击Yes继续。

  20. 合并过程也使用集成的比较工具。默认情况下,合并视图使用side-by-side模式显示更改。请注意,您可以看到服务器版本(左侧)显示属性值为black,本地版本(右侧)显示属性值为red,合并后结果(下面)目前显示初始颜色。

  21. 在左侧的复选框选中使用blackbody color 属性选项。

  22. 在合并工具中,单击Accept Merge按钮。

任务8:修改源代码分支

  1. 打开Source Control Explorer窗口。

  2. Fabrikam Fiber项目包含一个主版本库(在Main目录下),开发版本库(在Dev目录下),以及发布版本库(下Releases目录下)。分支在Source Control Explorer中有自己特殊的显示图标。

  3. 展开Releases节点,右键单击Release1选择Advanced | Properties

  4. Properties窗口展示了一般详细信息,如版本和说明,与其他分支的层次关系以及权限。

  5. Esc返回到Source Control Explorer

  6. Expand the Release1 branch node in the Releases folder and locate the FabrikamFiber.CallCenter.sln solution file in the FabrikamFiber.CallCenter folder. Double-click to open it. 在Releases文件夹下展开Release1分支,双击打开FabrikamFiber.CallCenter文件夹下的FabrikamFiber.CallCenter.sln文件。

  7. F5构建并启动Fabrikam Fiber Intranet门户。

  8. 假如Release1分支是当前在生产Web服务器上运行的代码。管理层已决定尽快删除页面左侧配置文件下的非功能链接。我们决定通过直接更新Release1分支来快速实现这一更改。然后我们再将此更改合并回Dev分支,以便下一个版本包含此次更改。

  9. 关闭Internet Explorer,返回到Visual Studio中。

  10. 第一步更新Release1分支并将更改部署到生产Web服务器。在Solution Explorer中,打开FabrikamFiber.Web\Views\Shared\_Profile.cshtml

  11. 注释掉管理链接部分,如下所示。

  12. F5启动网站并验证不再显示非功能链接。练习中我们假设已经成功地将更新的更改部署到生产服务器。

  13. 关闭Internet Explorer,返回到Visual Studio中。

  14. Team Explorer并导航到Pending Changes

  15. 通常情况下,您需要搁置其他未完成的修改,然后才能进行像这样的计划外更新。如果你不想使用挂起,那也可以用其他简便操作实现此目的。在Included Changes,右键单击_profile.cshtml并选择Exclude Unselected,这样签入时只会提交Release1分支的更改。

  16. Comment中,输入“removed non-functional links from profile”,验证是否只有_Profile.cshtml文件被更改,然后单击Check In。如果系统提示您确认签入,请选择Yes

  17. 在下一个任务中,我们会将这些更改合并到其他分支。

任务9:可视化分支和合并

在此任务中,您将学习如何在合并前一练习中所做的更改,并且对变更集进行可视化和跟踪。

  1. Source Control Explorer中,右键单击Release1分支,在菜单中选择View History。请注意,您的历史记录中的项目可能与下面的截图有所不同。

  2. 右键单击刚刚签入的变更集,然后从菜单中选择Track Changeset

  3. Select Branches窗口中,选择Release1作为Starting branch。确保选中Check all visible选项并单击Visualize查看与其他分支相关的变更集。

  4. 该可视化视图向我们展示了变更集存在于Release1,没有与Dev分支上的任何变更集有关联。视图还明确指出,为了将我们的更改合并到Dev中,我们需要先与Main分支合并。请注意,您的变更集编号可能与屏幕截图中的编号不同。

  5. 要执行此变更集和主分支的合并,请将绿色的Release1节点拖拽Main节点上。这时会弹出源代码管理合并向导。

  6. 确保要合并的源分支路径以“Release1”结尾,目标分支以“Main”结尾。点击Next按钮继续。

  7. 指定要合并的版本。默认情况下,您应该看到刚签入的变更集。单击Finish按钮以执行合并。

  8. 合并完成后,打开Team Explorer 并导航到Pending Changes

  9. 请注意,在Main分支上的_Profile.cshtml文件已被更改,编辑状态为“merge, edit”。合并过程已完成,但我们仍需签入更改。

  10. Comment中填写“Merging fast-tracked changes from Release to Main”,然后单击Check In完成合并。如果要求确认签入,请选择Yes

  11. Tracking Changeset窗口中,选择Rerun按钮更新视图。

  12. Select Branches窗口中再次单击Visualize

  13. 以与之前相同的方式合并Main分支中的更改到Dev分支,通过拖放来加载源代码管理合并向导,。

  14. 选择Next,然后单击Finish完成合并过程。

  15. Pending Changes窗口中,Comment输入“Merged fast-tracked changes from Main to Dev”

  16. 点击Check In按钮以完成与Dev分支的合并。如果要求确认签入,请选择Yes

  17. Tracking Changeset窗口中,单击Rerun查看更新的视图。

  18. 另一个有用的视图是Timeline Tracking视图。选择Hierarchy Tracking按钮左侧的Timeline Tracking按钮切换到该视图。这里显示了原始变更集与其他分支合并变更集的关系与合并顺序。

  19. Solution Explorer中,右键单击_Profile.cshtml选择Source Control | Annotate

  20. 滚动到_Profile.cshtml底部的注释,找到您以前注释的HTML。

  21. 在左侧的注释列中,将鼠标悬停在最近的变更集上(它应显示当前服务器的日期)。请注意,变更集路径和注释显示的是生产分支路径。