Практическое занятие

Разработка оптимального программного обеспечения: создание раскадровок и сбор отзывов от заинтересованных лиц с помощью Visual Studio 2012

Версия практического занятия: 11.0.51106.01 Обновление 1

Последнее обновление: 27.11.2012 г.

СОДЕРЖАНИЕ

ОБЩИЕ СВЕДЕНИЯ .................................................................................................................................. 3

УПРАЖНЕНИЕ 1. ВВЕДЕНИЕ В ИСПОЛЬЗОВАНИЕ РАСКАДРОВКИ ............................................ 4

УПРАЖНЕНИЕ 2. СБОР ОТЗЫВОВ И ПРЕДЛОЖЕНИЙ С ПОМОЩЬЮ ИНСТРУМЕНТА

MICROSOFT FEEDBACK CLIENT ......................................................................................................... 27

Общие сведения

Как часто разработчик создает программное обеспечение, которое пользователи просили, но не

совсем то, которое они хотели? Проекты по разработке программного обеспечения становятся

все более сложными, поэтому очень важно четко фиксировать требования пользователей,

которые затем будут учтены в процессе создания программного обеспечения. В этом упражнении

вы узнаете о том, каким образом новые возможности Visual Studio 2012 позволяют быстро

создавать раскадровку предъявляемых требований, а также, по мере развития разрабатываемого

вами программного обеспечения, собирать отзывы и предложения от пользователей с целью

доработки и оптимизации поставляемых решений.

Необходимые условия

Для этого практического занятия вам понадобится виртуальная машина Visual Studio 2012,

предоставляемая Microsoft. Для получения дополнительных сведений о получении и

использовании этой виртуальной машины выберите ссылку.

Информация о сценарии Fabrikam Fiber

В этой группе практических занятий для более удобного изучения сценариев упоминается

вымышленная компания Fabrikam Fiber, которая предоставляет доступ к кабельному телевидению

и оказывает сопутствующие услуги в США. С целью масштабирования своего веб-сайта для

клиентов она использует приложение Windows Azure, чтобы предоставить конечным

пользователям возможность самообслуживания и отслеживания доступности технических

специалистов. В компании используется также локальное приложение ASP.NET MVC для

повышения эффективности работы представителей отдела обслуживания клиентов. Приложение

позволяет управлять процессом выполнения заказов клиентов.

В рамках этой группы практических занятий вы примете участие в ряде сценариев, в которые

вовлечены разработчики и тестировщики компании Fabrikam Fiber. Рабочая группа из 8–10

специалистов решила использовать инструменты управления жизненным циклом приложений

Visual Studio для управления исходным кодом, запуска сборок, проверки веб-сайтов, а также

планирования и мониторинга процесса реализации проекта.

Упражнения

Это практическое занятие включает следующие упражнения:

1. Введение в использование раскадровки.

2. Сбор отзывов и предложений с помощью инструмента Microsoft Feedback Manger.

Примерная продолжительность практического занятия: 60 минут.

Упражнение 1. Введение в

использование раскадровки

В этом упражнении вы узнаете, как использовать специализированную надстройку PowerPoint в

процессе создания раскадровки приложений. Мы проанализируем существующий файл

раскадровки и добавим в него несколько новых слайдов для обращения к дополнительному

пользовательскому описанию функциональности.

Примечание. Обратите внимание, что в виртуальной машине возможна некоторая задержка при

попытке открыть портал проекта рабочей группы, если необходимые службы SharePoint

запускаются в первый раз. Вы можете увидеть сообщение о времени ожидания или ошибке, как

на снимке экрана ниже.

В большинстве случаев достаточно просто обновлять страницу до тех пор, пока она не загрузится

надлежащим образом. Обратите внимание, что на это может потребоваться несколько минут, в

зависимости от производительности оборудования, на котором размещена виртуальная

машина. Если через несколько минут страница все еще не загрузилась, убедитесь в том, что вы

настроили виртуальную машину в полном соответствии с инструкциями. В том числе

необходимо убедиться, что у вас установлен и настроен, по крайней мере, один сетевой адаптер

(рекомендуется внутренний сетевой адаптер).

1. Войдите в систему с логином Annie. Этот сотрудник несет ответственность за

представление интересов клиентов и взаимодействие с пользователями. Для всех

учетных записей используется пароль P2ssw0rd.

2. Начнем с существующей раскадровки. Запустите Internet Explorer и нажмите кнопку TFS

FF Project Portal на панели Favorites, чтобы загрузить панель мониторинга.

Рисунок 1

Портал проекта Fabrikam Fiber

3. Щелкните ссылку Shared Documents, чтобы открыть библиотеку, в которой расположен

файл PowerPoint под названием «FF Storyboard – Start».

Рисунок 2

Местоположение ссылки Shared Documents

4. Щелкните ссылку на файл «FF Storyboard – Start», чтобы открыть его в PowerPoint.

Рисунок 3

Местоположение начального файла раскадровки

Примечание. Мы используем общую папку в SharePoint, поэтому вся рабочая группа

имеет доступ к этому файлу.

5. Нажмите желтую кнопку Enable Editing в верхней части окна PowerPoint.

Рисунок 4

Разрешаем редактирование файла раскадровки

6. Выберите вкладку Storyboarding в верхней части окна PowerPoint.

Рисунок 5

Исходное представление раскадровки в PowerPoint, вкладка Storyboarding

Примечание. Можно также создать новую раскадровку на основе эскиза: Start |

Microsoft Visual Studio 11 | PowerPoint Storyboarding

7. Эти слайды раскадровки показывают, как можно использовать новую надстройку

PowerPoint для раскадровки в процессе создания макетов пользовательского

интерфейса мобильных и веб-приложений. Образцы слайдов и различные макеты

позволяют создать повторно используемые шаблоны для вашего приложения.

Нажмите кнопку Layout, чтобы просмотреть некоторые макеты, доступные в данном

файле раскадровки PowerPoint.

Рисунок 6

Образцы слайдов и макеты

Примечание. Если вы хотите внести изменения в образцы слайдов, нажмите кнопку Edit

Layout на вкладке Storyboarding.

8. Нажмите клавишу F5, чтобы просмотреть раскадровку в режиме презентации.

Просмотрите все слайды, используя мышь или клавишу СТРЕЛКА ВПРАВО для перехода

на следующий слайд. Обратите внимание, что раскадровка дает представление о

внешнем виде и функциях определенных элементов веб-приложения и приложения

Windows Phone 7. Анимация используется для моделирования взаимодействия

пользователя с приложением.

9. Давайте создадим несколько дополнительных раскадровок для узла интрасети

Fabrikam Fiber, на котором сотрудники работают с данными клиентов и билетами

службы. При создании раскадровки целесообразно документировать определенные

сценарии с целью подготовки пользовательских описаний функциональности для

разработчиков, которые занимаются внедрением и тестированием продукта.

Предположим, что в Team Foundation Server имеется позиция журнала невыполненных

работ по продукту, которая представляет собой пользовательское описание: Service rep

can view service ticket details from the dashboard.

10. Удалите все существующие слайды, чтобы сосредоточиться на новом

пользовательском описании, последовательно нажимая клавишу DELETE (или нажав

клавиши CTRL + A, а затем клавишу DELETE).

Рисунок 7

Удаление всех существующих слайдов

11. Нажмите разворачивающуюся кнопку New Slide и выберите макет 1_Default в образце

слайдов Web Browser.

Рисунок 8

Создание нового слайда на основе образца

12. На новом слайде раскадровки вы увидите все элементы выбранного образца. Здесь

присутствуют все элементы интерфейса веб-приложения, что позволяет сделать наши

слайды раскадровки целостными и согласованными.

Рисунок 9

Новый слайд, созданный на основе выбранного образца

13. Обратите внимание, что образец слайдов также содержит несколько заполнителей для

заголовка и адреса веб-страницы, которые можно редактировать. Измените

заполнитель Web page title, введя взамен этого Dashboard. На этом слайде будет

представлена страница панели мониторинга, которая предназначена для отображения

сведений о билетах, предупреждениях и сообщениях, а также другой корпоративной

информации.

Рисунок 10

Редактирование заполнителей в слайде, созданном на основе образца

14. Немного отвлечемся и загрузим сайт интрасети Fabrikam Fiber в Internet Explorer, нажав

на кнопку FF Intranet Portal на панели Favorites [http://intranet.fabrikam.com]. На

экране появится страница Dashboard. Взгляните на присутствующие здесь элементы

пользовательского интерфейса. Мы можем использовать некоторые из них в

раскадровках.

Примечание. Подготовка раскадровки обычно предшествует внедрению приложения.

Однако для ускорения демонстрации в рамках данного упражнения вы иногда будете

обращаться к раскадровкам как в разрабатываемом, так и в готовом продуктах.

Рисунок 11

Dashboard на портале интрасети Fabrikam Fiber

15. Вернемся в PowerPoint и добавим новый элемент Text Box к первому слайду.

Рисунок 12

Добавление элемента Text Box к слайду

16. Введите текст Dashboard в новом текстовом поле, чтобы создать заголовок для данной

страницы. Поместите его, как показано на следующем снимке экрана. Установите для

текста параметр bold, используйте размер текста 16 и цвет шрифта gray.

Рисунок 13

Добавление содержимого к слайду раскадровки

17. Теперь создадим кнопку с названием Create New и разместим ее под заголовком

Dashboard. Нажмите кнопку Storyboard Shapes, если соответствующая панель не была

открыта ранее.

Рисунок 14

Открываем окно Storyboard Shapes

18. В правой части панели Storyboard Shapes введите текст «button» в поле поиска, чтобы

найти фигуру Button.

Рисунок 15

Поиск в библиотеке фигур

19. Перетащите экземпляр фигуры Button на слайд.

Рисунок 16

Добавление фигур в раскадровку

20. Вместо текста по умолчанию введите Create New, выберите белый цвет для текста и

оранжевый для фона фигуры, чтобы привести ее в соответствие с принятым дизайном.

Предположим, что у Fabrikam Fiber есть утвержденные требования к

пользовательскому интерфейсу, которые мы должны соблюдать.

Рисунок 17

Изменение новой фигуры кнопки

21. Вы можете создавать собственные фигуры и использовать их в дальнейшем в процессе

подготовки раскадровок. Выберите кнопку, которую вы только что создали, и нажмите

кнопку Add to My Shapes. В качестве названия новой фигуры введите Fabrikam Button.

Примечание. Необходимо выделить внешний контур фигуры кнопки, а не только

центральную часть, иначе кнопка Add to My Shapes будет неактивна.

Рисунок 18

Создание и добавление новой фигуры в библиотеку с целью повторного использования

Примечание. Вы можете импортировать и экспортировать фигуры, чтобы сформировать

библиотеку раскадровки. Кроме того, мы планируем организовать интернет-сообщество,

где можно будет найти дополнительные фигуры для раскадровки.

22. Повторное использование существующих активов позволяет ускорить процесс

раскадровки. В данном случае мы будем использовать вырезку экрана оставшейся

части существующей страницы панели мониторинга, вместо того чтобы добавлять

реальную таблицу данных и заполнять ее вручную. Прежде всего, убедитесь, что ничто

не закрывает обзор окна Internet Explorer, в котором в настоящее время открыт портал

интрасети Fabrikam Fiber. Затем на вкладке Storyboarding в PowerPoint нажмите

разворачивающуюся кнопку Screenshot и выберите пункт Screen Clipping.

Рисунок 19

Использование вырезки экрана для ускорения процесса создания раскадровки

23. После того, как окно PowerPoint будет автоматически свернуто для отображения

недоступной страницы Fabrikam Fiber Dashboard, щелкните левый верхний угол

таблицы и, удерживая левую кнопку мыши, переместите курсор в правый нижний угол,

захватив область оповещений, сообщений и т. д. Отпустите левую кнопку мыши, чтобы

выбрать область для создания вырезки экрана.

Рисунок 20

Выделение области для создания вырезки экрана

24. В PowerPoint разместите вырезку экрана таким образом, чтобы она гармонично

смотрелась прямо под кнопкой Create New.

Рисунок 21

Размещение вырезки экрана в раскадровке

25. Вернемся к сценарию, для которого мы готовим раскадровку. Представьте, что

сотрудник видит эту панель мониторинга и обращает внимание на один из билетов,

который был открыт достаточно давно, при этом запрос не был удовлетворен или

эскалирован. Поэтому сотрудник хочет просмотреть данный билет, щелкнув ссылку на

регистрационный номер. Должна начаться загрузка страницы с подробной

информацией о билете службы.

Рисунок 22

Местоположение гиперссылки билета службы

26. Приступаем к раскадровке данного сценария. Создадим new slide на основе того же

макета. Новый слайд должен быть размещен сразу после первого, созданного ранее.

Рисунок 23

Создаем новый слайд на основе того же шаблона

27. Введите любую информацию о билете, как показано ниже, используя полученные в

этом упражнении навыки. Используйте дополнительные фигуры раскадровки — Street

Map и Map Marker, чтобы указать местонахождение клиента.

Примечание. В качестве альтернативы вы можете загрузить файл PowerPoint под

названием «FF Storyboard – Finish» из библиотеки общих документов, чтобы скопировать

нужное содержимое и вставить в свою раскадровку.

Рисунок 24

Создание второго слайда раскадровки с подробной информацией о билете службы

28. В процессе раскадровки в PowerPoint вы также можете создать представление для

потока приложения с помощью гиперссылок из фигур. Выберите первый слайд, на

котором показана Dashboard, выберите изображение с таблицей билетов, и нажмите

кнопку Hyperlink на вкладке Storyboarding.

Примечание. Если мы решили создать этот слайд, используя подходящую таблицу из

меню Storyboard Shapes (Фигуры раскадровки) вместо вырезки экрана, то можем создать

гиперссылку в определенной ячейке.

Рисунок 25

Превращение таблицы в гиперссылку

29. В окне Insert Hyperlink выберите пункт Place in This Document, укажите second slide и

нажмите кнопку OK, чтобы создать ссылку.

Рисунок 26

Выбор слайда, на который будет создана ссылка из таблицы

30. Мы также можем воспользоваться анимациями PowerPoint, для того чтобы повысить

информативность раскадровки. Вернитесь к первому слайду и найдите фигуру mouse

pointer в окне Storyboard Shapes. Перетащите фигуру mouse pointer на слайд. Эта

фигура будет использоваться для имитации выбора пользователем одного из билетов

службы на панели мониторинга Dashboard.

Рисунок 27

Фигура mouse pointer будет использоваться для имитации действий пользователя

31. Увеличьте указатель мыши, чтобы его было лучше видно.

Рисунок 28

Увеличение указателя мыши

32. На вкладке Animations щелкните раскрывающийся список Add Animation и выберите

пункт Custom Path внизу списка (возможно, потребуется прокрутить страницу вниз).

Рисунок 29

Анимация фигуры mouse pointer (Указатель мыши), демонстрирующая ее перемещение

по пользовательскому пути

33. Используйте мышь, чтобы нарисовать путь от текущего местоположения фигуры Mouse

Pointer к одной из гиперссылок на билет службы (в данном случае таблица — это

просто картинка). Для этого щелкните фигуру Mouse Pointer и, удерживая левую кнопку

мыши, нарисуйте линию по направлению к гиперссылке. Затем отпустите кнопку мыши

и нажмите клавишу ESCAPE.

Рисунок 30

Итоговая траектория движения фигуры mouse pointer

34. Нажмите клавиши CTRL + S, чтобы сохранить работу в Team Foundation Server.

Примечание. Если система попросит вас обновить представление и сохранить его еще

раз, сделайте это.

35. Нажмите клавишу F5, чтобы просмотреть раскадровку в режиме презентации. Нажмите

клавишу СТРЕЛКА ВПРАВО, чтобы запустить анимацию указателя мыши. Когда курсор

достигнет гиперссылки на билет службы, нажмите клавишу СТРЕЛКА ВПРАВО, чтобы

перейти на второй слайд. Нажмите клавишу ESCAPE после окончания презентации.

36. Будем считать, что мы завершили разработку раскадровки и хотим связать этот файл с

пользовательским описанием функциональности в Team Foundation Server. Нажмите

кнопку Storyboard Links на вкладке Storyboarding в PowerPoint.

Примечание. Если вы получите приглашение подключиться к проекту рабочей группы,

выберите проект VSALM -> DefaultCollection -> FabrikamFiber и выполните подключение.

Рисунок 31

Расположение кнопки Storyboarding Links

37. В окне Storyboard Links нажмите кнопку Link To, чтобы связать раскадровку с рабочим

элементом.

Рисунок 32

Расположение кнопки, позволяющей связать раскадровку с существующим рабочим

элементом

38. В окне Choose Linked Work Items выберите метод поиска Title Contains и введите текст

service ticket. Затем нажмите кнопку Find.

Рисунок 33

Поиск нужного рабочего элемента

39. Выберите рабочий элемент под названием Service rep can view service ticket details

from the dashboard и нажмите кнопку OK.

Рисунок 34

Выбор нужного рабочего элемента

40. После того как ссылка будет создана, вы получите подтверждение в окне Storyboard

Links. Нажмите кнопку Close, чтобы завершить процесс.

Рисунок 35

Подтверждение успешного создания связи между раскадровкой и рабочим элементом

Упражнение 2. Сбор отзывов и

предложении с помощью инструмента

Microsoft Feedback Client

В этом упражнении вы познакомитесь с новым инструментом Feedback Client (Клиент обратной

связи). В процессе разработки программного обеспечения очень важно организовать получение

отзывов и предложений от заинтересованных лиц (конечных пользователей, владельцев продукта

и т. д.). Это позволяет гарантировать, что рабочая группа движется в правильном направлении,

обеспечивая соответствие продукта требованиям клиента. К рабочим отчетам об ошибках в Team

Foundation Server можно прикреплять аудио- и видеофайлы, снимки экрана и другой контент.

1. Войдите в систему с логином Annie. Этот сотрудник несет ответственность за

представление интересов клиентов и взаимодействие с пользователями. Для всех

учетных записей используется пароль P2ssw0rd.

2. Для наших целей в этом упражнении давайте предположим, что мы хотели бы

получить некоторую обратную связь на возможность редактирования записей клиентов

Интранет-портала Fabrikam Fiber. В Internet Explorer загрузите веб-портал Fabrikam

Fiber, нажав на ссылку TFS FF Web Access на панели «Избранное». В разделе Activities

выберите ссылку Request feedback.

Рисунок 36

Инициализация запроса обратной связи

3. В окне Request Feedback выберите пользователя Brian Keller в качестве

заинтересованного лица, от которого нужно получить отзыв. Выберите вариант Web

Application и введите URL-адрес узла интрасети: http://intranet.fabrikam.com. В

текстовом поле прямо под URL-адресом поместите рекомендации по поводу

использования веб-приложения Please use IE9 or higher. Введите заголовок запроса

отзыва Please provide some feedback on the current customer records editing

functionality. Введите также краткие инструкции под текстовым полем заголовка,

например: Go to intranet portal, click on Customer link, then Edit link for any customer.

Рисунок 37

Создание запроса обратной связи

Примечание. Вы можете создать любое количество элементов обратной связи, щелкая

ссылку add feedback item.

4. Когда запрос отзыва будет готов, нажмите кнопку Send, чтобы отправить электронное

письмо пользователю Brian.

Рисунок 38

Отправка электронного письма с запросом отзыва

5. После отправки запроса отзыва на странице Home (Домашняя страница) сайта веб-

доступа Fabrikam Fiber появится соответствующее уведомление. Этот рабочий элемент

относится к типу Feedback Request (Запрос отзыва).

Рисунок 39

Только что созданный рабочий элемент Feedback Request

6. Давайте представим, что пользователь Brian получил электронное письмо. Начнем

сеанс обратной связи. Откройте проводник и перейдите в папку

c:\inetpub\mailroot\drop. Найдите последнее сообщение электронной почты. Двойным

щелчком откройте его в Outlook.

Примечание. В виртуальной машине, с которой вы работаете в ходе этого практического

занятия, не реализован полноценный почтовый сервер. Поэтому мы должны

имитировать отправку и получение сообщения таким способом.

Рисунок 40

Имитируем получение электронного письма с запросом отзыва пользователем Brian

7. В электронном письме, открытом в Outlook, щелкните ссылку Start your feedback

session, чтобы запустить приложение Feedback Client.

Рисунок 41

Инициализация сеанса обратной связи непосредственно из электронной почты

8. После запуска Feedback Client щелкните ссылку на портал интрасети Fabrikam Fiber в

разделе APPLICATION.

Рисунок 42

Запуск приложения в соответствии с инструкциями

9. Нажмите кнопку Next, чтобы подготовить запрашиваемый отзыв.

Рисунок 43

Нажатие кнопки Next

10. В соответствии с инструкциями щелкаем ссылку Customers, чтобы перейти на

соответствующую страницу.

Рисунок 44

Переход на страницу Customers

11. Далее щелкаем ссылку Edit для любого клиента из списка.

Рисунок 45

Редактирование подробной информации о клиенте

12. Пользователь Brian знает, что информация о клиенте содержит номера телефонов, и

пользователям портала интрасети Fabrikam Fiber часто требуется обновлять

телефонные номера клиентов, которые обращаются к ним за услугами. Но, как вы

видите, соответствующее поле на экране редактирования отсутствует.

Рисунок 46

Вид экрана редактирования информации о клиенте

13. В окне Feedback Manager опишите обнаруженную проблему. Введите, к примеру, We

need to provide a way to update customer phone numbers.

Рисунок 47

Добавление отзыва

14. Добавьте снимок текущего экрана, нажав кнопку Screenshot. По умолчанию это

позволит вам нарисовать прямоугольник для определения области, которую вы хотите

вложить. Удерживайте левую кнопку мыши и перемещайте мышь, пока не выделите

всю форму записи клиента. Целесообразно сформировать как можно более полный

контекст для описания проблемы.

Рисунок 48

Снимок экрана, формирующий контекст отзыва

Примечание: It is easy to annotate screenshots by double-clicking on them in the Feedback

Client to load them in the configured tool (MS Paint by default). Легко выполняется описание

скриншота, дважды щелкнув на нем в the Feedback Client, чтобы загрузить снимок в

настроенном инструменте (MS Paint по умолчанию).

15. Note that it is also possible to record video and audio, add additional file attachments, and

edit the feedback text using rich text capabilities of the Feedback Client. Обратите

внимание, что также можно записывать аудио и видео, добавить дополнительные

вложения и редактировать текст обратной связи, с использованием возможностей

форматированного текста Feedback Client.

Рисунок 49

Дополнительные возможности для предоставления отзыва

16. Скажем, что, помимо отсутствующего поля, мы думаем, что экран редактирования

клиента выглядит хорошо. Поставим 4 из 5 звезд, чтобы предоставить команде

некоторый поддающийся измерению отзыв.

Рисунок 50

Оценка обратной связи на основе запроса

17. Нажмите кнопку Next для перехода к следующей части оформления отзыва.

Рисунок 51

Окончание заполнения обратной связи

18. Просмотрите свой отзыв и нажмите кнопку Submit and Close по окончании.

Рисунок 52

Отправление отзыва

19. Вернитесь к командному сайту Fabrikam Fiber, перейдите на домашнюю страницу и затем

выберите зеленую плитку Feedback в разделе Team Favorites.

Рисунок 53

Загрузка запроса по рабочим элементам Feedback Requests

20. Найдите Feedback Response, который мы только что создали.

Примечание: В нашем процессе имитации, обратная связь будет неправильно назвать

потому, что для простоты, мы были зарегистрированы в качестве Annie. Представьте

себе, что название нового рабочего элемента читает «Feedback Response from Brian

Keller…”»

Рисунок 54

Выбран рабочий элемент Feedback Response

21. Нажмите два раза левой кнопкой мыши на рабочем элементе Feedback Response, чтобы

открыть его. Вкладка Notes выбрана по умолчанию, поэтому мы видим сам отзыв.

Рисунок 55

Описание Feedback Response

22. Далее выберите вкладку All Links и проверьте, что текущий рабочий элемент Feedback

Response является дочерним по отношению к изначальному рабочему элементу Feedback

Request, который был отправлен к Brian.

Рисунок 56

Отзыв автоматически связывается с изначальным запросом

Свои отзывы и предложения вы можете отправить по электронной

почте: VSKitFdbk@Microsoft.com

© 2012 г. Корпорация Microsoft. Все права защищены.