Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,939 views

Published on

  • Be the first to comment

  • Be the first to like this

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

  1. 1. Практическое занятиеРазработка оптимального программногообеспечения: создание раскадровок и сборотзывов от заинтересованных лиц спомощью Visual Studio 2012Версия практического занятия: 11.0.51106.01 Обновление 1Последнее обновление: 27.11.2012 г.
  2. 2. СОДЕРЖАНИЕОБЩИЕ СВЕДЕНИЯ..................................................................................................................................3УПРАЖНЕНИЕ 1. ВВЕДЕНИЕ В ИСПОЛЬЗОВАНИЕ РАСКАДРОВКИ............................................4УПРАЖНЕНИЕ 2. СБОР ОТЗЫВОВ И ПРЕДЛОЖЕНИЙ С ПОМОЩЬЮ ИНСТРУМЕНТАMICROSOFT FEEDBACK CLIENT .........................................................................................................27
  3. 3. Общие сведенияКак часто разработчик создает программное обеспечение, которое пользователи просили, но несовсем то, которое они хотели? Проекты по разработке программного обеспечения становятсявсе более сложными, поэтому очень важно четко фиксировать требования пользователей,которые затем будут учтены в процессе создания программного обеспечения. В этом упражнениивы узнаете о том, каким образом новые возможности 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 минут.
  4. 4. Упражнение 1. Введение виспользование раскадровкиВ этом упражнении вы узнаете, как использовать специализированную надстройку PowerPoint впроцессе создания раскадровки приложений. Мы проанализируем существующий файлраскадровки и добавим в него несколько новых слайдов для обращения к дополнительномупользовательскому описанию функциональности.Примечание. Обратите внимание, что в виртуальной машине возможна некоторая задержка припопытке открыть портал проекта рабочей группы, если необходимые службы SharePointзапускаются в первый раз. Вы можете увидеть сообщение о времени ожидания или ошибке, какна снимке экрана ниже.В большинстве случаев достаточно просто обновлять страницу до тех пор, пока она не загрузитсянадлежащим образом. Обратите внимание, что на это может потребоваться несколько минут, взависимости от производительности оборудования, на котором размещена виртуальнаямашина. Если через несколько минут страница все еще не загрузилась, убедитесь в том, что вынастроили виртуальную машину в полном соответствии с инструкциями. В том численеобходимо убедиться, что у вас установлен и настроен, по крайней мере, один сетевой адаптер(рекомендуется внутренний сетевой адаптер).1. Войдите в систему с логином Annie. Этот сотрудник несет ответственность запредставление интересов клиентов и взаимодействие с пользователями. Для всехучетных записей используется пароль P2ssw0rd.2. Начнем с существующей раскадровки. Запустите Internet Explorer и нажмите кнопку TFSFF Project Portal на панели Favorites, чтобы загрузить панель мониторинга.
  5. 5. Рисунок 1Портал проекта Fabrikam Fiber3. Щелкните ссылку Shared Documents, чтобы открыть библиотеку, в которой расположенфайл PowerPoint под названием «FF Storyboard – Start».
  6. 6. Рисунок 2Местоположение ссылки Shared Documents4. Щелкните ссылку на файл «FF Storyboard – Start», чтобы открыть его в PowerPoint.Рисунок 3Местоположение начального файла раскадровкиПримечание. Мы используем общую папку в SharePoint, поэтому вся рабочая группаимеет доступ к этому файлу.5. Нажмите желтую кнопку Enable Editing в верхней части окна PowerPoint.Рисунок 4Разрешаем редактирование файла раскадровки6. Выберите вкладку Storyboarding в верхней части окна PowerPoint.
  7. 7. Рисунок 5Исходное представление раскадровки в PowerPoint, вкладка StoryboardingПримечание. Можно также создать новую раскадровку на основе эскиза: Start |Microsoft Visual Studio 11 | PowerPoint Storyboarding7. Эти слайды раскадровки показывают, как можно использовать новую надстройкуPowerPoint для раскадровки в процессе создания макетов пользовательскогоинтерфейса мобильных и веб-приложений. Образцы слайдов и различные макеты
  8. 8. позволяют создать повторно используемые шаблоны для вашего приложения.Нажмите кнопку Layout, чтобы просмотреть некоторые макеты, доступные в данномфайле раскадровки PowerPoint.Рисунок 6Образцы слайдов и макетыПримечание. Если вы хотите внести изменения в образцы слайдов, нажмите кнопку EditLayout на вкладке Storyboarding.8. Нажмите клавишу F5, чтобы просмотреть раскадровку в режиме презентации.Просмотрите все слайды, используя мышь или клавишу СТРЕЛКА ВПРАВО для переходана следующий слайд. Обратите внимание, что раскадровка дает представление овнешнем виде и функциях определенных элементов веб-приложения и приложенияWindows Phone 7. Анимация используется для моделирования взаимодействияпользователя с приложением.
  9. 9. 9. Давайте создадим несколько дополнительных раскадровок для узла интрасетиFabrikam Fiber, на котором сотрудники работают с данными клиентов и билетамислужбы. При создании раскадровки целесообразно документировать определенныесценарии с целью подготовки пользовательских описаний функциональности дляразработчиков, которые занимаются внедрением и тестированием продукта.Предположим, что в Team Foundation Server имеется позиция журнала невыполненныхработ по продукту, которая представляет собой пользовательское описание: Service repcan view service ticket details from the dashboard.10. Удалите все существующие слайды, чтобы сосредоточиться на новомпользовательском описании, последовательно нажимая клавишу DELETE (или нажавклавиши CTRL + A, а затем клавишу DELETE).Рисунок 7Удаление всех существующих слайдов11. Нажмите разворачивающуюся кнопку New Slide и выберите макет 1_Default в образцеслайдов Web Browser.
  10. 10. Рисунок 8Создание нового слайда на основе образца12. На новом слайде раскадровки вы увидите все элементы выбранного образца. Здесьприсутствуют все элементы интерфейса веб-приложения, что позволяет сделать нашислайды раскадровки целостными и согласованными.
  11. 11. Рисунок 9Новый слайд, созданный на основе выбранного образца13. Обратите внимание, что образец слайдов также содержит несколько заполнителей длязаголовка и адреса веб-страницы, которые можно редактировать. Изменитезаполнитель Web page title, введя взамен этого Dashboard. На этом слайде будетпредставлена страница панели мониторинга, которая предназначена для отображениясведений о билетах, предупреждениях и сообщениях, а также другой корпоративнойинформации.Рисунок 10Редактирование заполнителей в слайде, созданном на основе образца
  12. 12. 14. Немного отвлечемся и загрузим сайт интрасети Fabrikam Fiber в Internet Explorer, нажавна кнопку FF Intranet Portal на панели Favorites [http://intranet.fabrikam.com]. Наэкране появится страница Dashboard. Взгляните на присутствующие здесь элементыпользовательского интерфейса. Мы можем использовать некоторые из них враскадровках.Примечание. Подготовка раскадровки обычно предшествует внедрению приложения.Однако для ускорения демонстрации в рамках данного упражнения вы иногда будетеобращаться к раскадровкам как в разрабатываемом, так и в готовом продуктах.Рисунок 11Dashboard на портале интрасети Fabrikam Fiber15. Вернемся в PowerPoint и добавим новый элемент Text Box к первому слайду.
  13. 13. Рисунок 12Добавление элемента Text Box к слайду16. Введите текст Dashboard в новом текстовом поле, чтобы создать заголовок для даннойстраницы. Поместите его, как показано на следующем снимке экрана. Установите длятекста параметр bold, используйте размер текста 16 и цвет шрифта gray.Рисунок 13Добавление содержимого к слайду раскадровки17. Теперь создадим кнопку с названием Create New и разместим ее под заголовкомDashboard. Нажмите кнопку Storyboard Shapes, если соответствующая панель не былаоткрыта ранее.Рисунок 14Открываем окно Storyboard Shapes18. В правой части панели Storyboard Shapes введите текст «button» в поле поиска, чтобынайти фигуру Button.
  14. 14. Рисунок 15Поиск в библиотеке фигур19. Перетащите экземпляр фигуры Button на слайд.Рисунок 16Добавление фигур в раскадровку20. Вместо текста по умолчанию введите Create New, выберите белый цвет для текста иоранжевый для фона фигуры, чтобы привести ее в соответствие с принятым дизайном.Предположим, что у Fabrikam Fiber есть утвержденные требования кпользовательскому интерфейсу, которые мы должны соблюдать.Рисунок 17
  15. 15. Изменение новой фигуры кнопки21. Вы можете создавать собственные фигуры и использовать их в дальнейшем в процессеподготовки раскадровок. Выберите кнопку, которую вы только что создали, и нажмитекнопку Add to My Shapes. В качестве названия новой фигуры введите Fabrikam Button.Примечание. Необходимо выделить внешний контур фигуры кнопки, а не толькоцентральную часть, иначе кнопка Add to My Shapes будет неактивна.Рисунок 18Создание и добавление новой фигуры в библиотеку с целью повторного использованияПримечание. Вы можете импортировать и экспортировать фигуры, чтобы сформироватьбиблиотеку раскадровки. Кроме того, мы планируем организовать интернет-сообщество,где можно будет найти дополнительные фигуры для раскадровки.22. Повторное использование существующих активов позволяет ускорить процессраскадровки. В данном случае мы будем использовать вырезку экрана оставшейсячасти существующей страницы панели мониторинга, вместо того чтобы добавлятьреальную таблицу данных и заполнять ее вручную. Прежде всего, убедитесь, что ничтоне закрывает обзор окна Internet Explorer, в котором в настоящее время открыт порталинтрасети Fabrikam Fiber. Затем на вкладке Storyboarding в PowerPoint нажмитеразворачивающуюся кнопку Screenshot и выберите пункт Screen Clipping.
  16. 16. Рисунок 19Использование вырезки экрана для ускорения процесса создания раскадровки23. После того, как окно PowerPoint будет автоматически свернуто для отображениянедоступной страницы Fabrikam Fiber Dashboard, щелкните левый верхний уголтаблицы и, удерживая левую кнопку мыши, переместите курсор в правый нижний угол,захватив область оповещений, сообщений и т. д. Отпустите левую кнопку мыши, чтобывыбрать область для создания вырезки экрана.
  17. 17. Рисунок 20Выделение области для создания вырезки экрана24. В PowerPoint разместите вырезку экрана таким образом, чтобы она гармоничносмотрелась прямо под кнопкой Create New.
  18. 18. Рисунок 21Размещение вырезки экрана в раскадровке25. Вернемся к сценарию, для которого мы готовим раскадровку. Представьте, чтосотрудник видит эту панель мониторинга и обращает внимание на один из билетов,который был открыт достаточно давно, при этом запрос не был удовлетворен илиэскалирован. Поэтому сотрудник хочет просмотреть данный билет, щелкнув ссылку нарегистрационный номер. Должна начаться загрузка страницы с подробнойинформацией о билете службы.
  19. 19. Рисунок 22Местоположение гиперссылки билета службы26. Приступаем к раскадровке данного сценария. Создадим new slide на основе того жемакета. Новый слайд должен быть размещен сразу после первого, созданного ранее.Рисунок 23Создаем новый слайд на основе того же шаблона27. Введите любую информацию о билете, как показано ниже, используя полученные вэтом упражнении навыки. Используйте дополнительные фигуры раскадровки — StreetMap и Map Marker, чтобы указать местонахождение клиента.
  20. 20. Примечание. В качестве альтернативы вы можете загрузить файл PowerPoint подназванием «FF Storyboard – Finish» из библиотеки общих документов, чтобы скопироватьнужное содержимое и вставить в свою раскадровку.Рисунок 24Создание второго слайда раскадровки с подробной информацией о билете службы28. В процессе раскадровки в PowerPoint вы также можете создать представление дляпотока приложения с помощью гиперссылок из фигур. Выберите первый слайд, накотором показана Dashboard, выберите изображение с таблицей билетов, и нажмитекнопку Hyperlink на вкладке Storyboarding.Примечание. Если мы решили создать этот слайд, используя подходящую таблицу изменю Storyboard Shapes (Фигуры раскадровки) вместо вырезки экрана, то можем создатьгиперссылку в определенной ячейке.
  21. 21. Рисунок 25Превращение таблицы в гиперссылку29. В окне Insert Hyperlink выберите пункт Place in This Document, укажите second slide инажмите кнопку OK, чтобы создать ссылку.Рисунок 26Выбор слайда, на который будет создана ссылка из таблицы
  22. 22. 30. Мы также можем воспользоваться анимациями PowerPoint, для того чтобы повыситьинформативность раскадровки. Вернитесь к первому слайду и найдите фигуру mousepointer в окне Storyboard Shapes. Перетащите фигуру mouse pointer на слайд. Этафигура будет использоваться для имитации выбора пользователем одного из билетовслужбы на панели мониторинга Dashboard.Рисунок 27Фигура mouse pointer будет использоваться для имитации действий пользователя31. Увеличьте указатель мыши, чтобы его было лучше видно.Рисунок 28Увеличение указателя мыши32. На вкладке Animations щелкните раскрывающийся список Add Animation и выберитепункт Custom Path внизу списка (возможно, потребуется прокрутить страницу вниз).
  23. 23. Рисунок 29Анимация фигуры mouse pointer (Указатель мыши), демонстрирующая ее перемещениепо пользовательскому пути33. Используйте мышь, чтобы нарисовать путь от текущего местоположения фигуры MousePointer к одной из гиперссылок на билет службы (в данном случае таблица — этопросто картинка). Для этого щелкните фигуру Mouse Pointer и, удерживая левую кнопкумыши, нарисуйте линию по направлению к гиперссылке. Затем отпустите кнопку мышии нажмите клавишу ESCAPE.
  24. 24. Рисунок 30Итоговая траектория движения фигуры mouse pointer34. Нажмите клавиши CTRL + S, чтобы сохранить работу в Team Foundation Server.Примечание. Если система попросит вас обновить представление и сохранить его ещераз, сделайте это.35. Нажмите клавишу F5, чтобы просмотреть раскадровку в режиме презентации. Нажмитеклавишу СТРЕЛКА ВПРАВО, чтобы запустить анимацию указателя мыши. Когда курсордостигнет гиперссылки на билет службы, нажмите клавишу СТРЕЛКА ВПРАВО, чтобыперейти на второй слайд. Нажмите клавишу ESCAPE после окончания презентации.36. Будем считать, что мы завершили разработку раскадровки и хотим связать этот файл спользовательским описанием функциональности в Team Foundation Server. Нажмитекнопку Storyboard Links на вкладке Storyboarding в PowerPoint.Примечание. Если вы получите приглашение подключиться к проекту рабочей группы,выберите проект VSALM -> DefaultCollection -> FabrikamFiber и выполните подключение.Рисунок 31Расположение кнопки Storyboarding Links
  25. 25. 37. В окне Storyboard Links нажмите кнопку Link To, чтобы связать раскадровку с рабочимэлементом.Рисунок 32Расположение кнопки, позволяющей связать раскадровку с существующим рабочимэлементом38. В окне Choose Linked Work Items выберите метод поиска Title Contains и введите текстservice ticket. Затем нажмите кнопку Find.Рисунок 33Поиск нужного рабочего элемента39. Выберите рабочий элемент под названием Service rep can view service ticket detailsfrom the dashboard и нажмите кнопку OK.
  26. 26. Рисунок 34Выбор нужного рабочего элемента40. После того как ссылка будет создана, вы получите подтверждение в окне StoryboardLinks. Нажмите кнопку Close, чтобы завершить процесс.
  27. 27. Рисунок 35Подтверждение успешного создания связи между раскадровкой и рабочим элементомУпражнение 2. Сбор отзывов ипредложении с помощью инструментаMicrosoft Feedback ClientВ этом упражнении вы познакомитесь с новым инструментом Feedback Client (Клиент обратнойсвязи). В процессе разработки программного обеспечения очень важно организовать получениеотзывов и предложений от заинтересованных лиц (конечных пользователей, владельцев продуктаи т. д.). Это позволяет гарантировать, что рабочая группа движется в правильном направлении,обеспечивая соответствие продукта требованиям клиента. К рабочим отчетам об ошибках в TeamFoundation Server можно прикреплять аудио- и видеофайлы, снимки экрана и другой контент.1. Войдите в систему с логином Annie. Этот сотрудник несет ответственность запредставление интересов клиентов и взаимодействие с пользователями. Для всехучетных записей используется пароль P2ssw0rd.2. Для наших целей в этом упражнении давайте предположим, что мы хотели быполучить некоторую обратную связь на возможность редактирования записей клиентовИнтранет-портала Fabrikam Fiber. В Internet Explorer загрузите веб-портал FabrikamFiber, нажав на ссылку TFS FF Web Access на панели «Избранное». В разделе Activitiesвыберите ссылку Request feedback.Рисунок 36Инициализация запроса обратной связи3. В окне Request Feedback выберите пользователя Brian Keller в качествезаинтересованного лица, от которого нужно получить отзыв. Выберите вариант Web
  28. 28. Application и введите URL-адрес узла интрасети: http://intranet.fabrikam.com. Втекстовом поле прямо под URL-адресом поместите рекомендации по поводуиспользования веб-приложения Please use IE9 or higher. Введите заголовок запросаотзыва Please provide some feedback on the current customer records editingfunctionality. Введите также краткие инструкции под текстовым полем заголовка,например: Go to intranet portal, click on Customer link, then Edit link for any customer.Рисунок 37Создание запроса обратной связиПримечание. Вы можете создать любое количество элементов обратной связи, щелкаяссылку add feedback item.
  29. 29. 4. Когда запрос отзыва будет готов, нажмите кнопку Send, чтобы отправить электронноеписьмо пользователю Brian.Рисунок 38Отправка электронного письма с запросом отзыва5. После отправки запроса отзыва на странице Home (Домашняя страница) сайта веб-доступа Fabrikam Fiber появится соответствующее уведомление. Этот рабочий элементотносится к типу Feedback Request (Запрос отзыва).Рисунок 39Только что созданный рабочий элемент Feedback Request6. Давайте представим, что пользователь Brian получил электронное письмо. Начнемсеанс обратной связи. Откройте проводник и перейдите в папкуc:inetpubmailrootdrop. Найдите последнее сообщение электронной почты. Двойнымщелчком откройте его в Outlook.Примечание. В виртуальной машине, с которой вы работаете в ходе этого практическогозанятия, не реализован полноценный почтовый сервер. Поэтому мы должныимитировать отправку и получение сообщения таким способом.
  30. 30. Рисунок 40Имитируем получение электронного письма с запросом отзыва пользователем Brian7. В электронном письме, открытом в Outlook, щелкните ссылку Start your feedbacksession, чтобы запустить приложение Feedback Client.Рисунок 41Инициализация сеанса обратной связи непосредственно из электронной почты8. После запуска Feedback Client щелкните ссылку на портал интрасети Fabrikam Fiber вразделе APPLICATION.
  31. 31. Рисунок 42Запуск приложения в соответствии с инструкциями9. Нажмите кнопку Next, чтобы подготовить запрашиваемый отзыв.
  32. 32. Рисунок 43Нажатие кнопки Next10. В соответствии с инструкциями щелкаем ссылку Customers, чтобы перейти насоответствующую страницу.Рисунок 44Переход на страницу Customers11. Далее щелкаем ссылку Edit для любого клиента из списка.Рисунок 45Редактирование подробной информации о клиенте12. Пользователь Brian знает, что информация о клиенте содержит номера телефонов, ипользователям портала интрасети Fabrikam Fiber часто требуется обновлятьтелефонные номера клиентов, которые обращаются к ним за услугами. Но, как вывидите, соответствующее поле на экране редактирования отсутствует.
  33. 33. Рисунок 46Вид экрана редактирования информации о клиенте13. В окне Feedback Manager опишите обнаруженную проблему. Введите, к примеру, Weneed to provide a way to update customer phone numbers.
  34. 34. Рисунок 47Добавление отзыва14. Добавьте снимок текущего экрана, нажав кнопку Screenshot. По умолчанию этопозволит вам нарисовать прямоугольник для определения области, которую вы хотитевложить. Удерживайте левую кнопку мыши и перемещайте мышь, пока не выделитевсю форму записи клиента. Целесообразно сформировать как можно более полныйконтекст для описания проблемы.
  35. 35. Рисунок 48Снимок экрана, формирующий контекст отзываПримечание: It is easy to annotate screenshots by double-clicking on them in the FeedbackClient 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, andedit the feedback text using rich text capabilities of the Feedback Client. Обратитевнимание, что также можно записывать аудио и видео, добавить дополнительныевложения и редактировать текст обратной связи, с использованием возможностейформатированного текста Feedback Client.Рисунок 49Дополнительные возможности для предоставления отзыва
  36. 36. 16. Скажем, что, помимо отсутствующего поля, мы думаем, что экран редактированияклиента выглядит хорошо. Поставим 4 из 5 звезд, чтобы предоставить команденекоторый поддающийся измерению отзыв.Рисунок 50Оценка обратной связи на основе запроса17. Нажмите кнопку Next для перехода к следующей части оформления отзыва.
  37. 37. Рисунок 51Окончание заполнения обратной связи18. Просмотрите свой отзыв и нажмите кнопку Submit and Close по окончании.
  38. 38. Рисунок 52Отправление отзыва19. Вернитесь к командному сайту Fabrikam Fiber, перейдите на домашнюю страницу и затемвыберите зеленую плитку Feedback в разделе Team Favorites.
  39. 39. Рисунок 53Загрузка запроса по рабочим элементам Feedback Requests20. Найдите Feedback Response, который мы только что создали.Примечание: В нашем процессе имитации, обратная связь будет неправильно назватьпотому, что для простоты, мы были зарегистрированы в качестве Annie. Представьтесебе, что название нового рабочего элемента читает «Feedback Response from BrianKeller…”»
  40. 40. Рисунок 54Выбран рабочий элемент Feedback Response21. Нажмите два раза левой кнопкой мыши на рабочем элементе Feedback Response, чтобыоткрыть его. Вкладка Notes выбрана по умолчанию, поэтому мы видим сам отзыв.Рисунок 55Описание Feedback Response22. Далее выберите вкладку All Links и проверьте, что текущий рабочий элемент FeedbackResponse является дочерним по отношению к изначальному рабочему элементу FeedbackRequest, который был отправлен к Brian.
  41. 41. Рисунок 56Отзыв автоматически связывается с изначальным запросомСвои отзывы и предложения вы можете отправить по электроннойпочте: VSKitFdbk@Microsoft.com© 2012 г. Корпорация Microsoft. Все права защищены.

×