Hands-On LabConstruindo o Software certo: Gerando Storyboards e Coletando Feedback dos Stakeholder com Visual Studio 2012Versão do Laboratório: 11.0.50727.1 (RTM)

Last updated: 21/08/2012

Tradução: 09/10/2012

CONTEÚDOS

VISÃO GERAL............................................................................................................................................ 3

EXERCÍCIO 1: INTRODUÇÃO AO STORYBOARDING.....................................................................4

EXERCÍCIO 2: ESTIMULANDO O FEEDBACK COM O MICROSOFT FEEDBACK CLIENT.................25

Visão Geral

Quantas vezes você construiu o software que seus usuários pediram, mas não necessariamente o que precisavam? Em um mundo de projetos de software cada vez mais complexo, é fundamental que nós obtenhamos com precisão os requisitos dos usuários, para então traduzi-los em software e funcionalidades. Neste laboratório, você aprenderá como os novos recursos do Visual Studio 2012 possibilitam ambos, tanto transformar rapidamente seus requisitos em storyboard, e – conforme seu software evolui – obter feedback ricos em detalhes de seus usuários que utilizam o software para que eles lhe ajudem nas funcionalidades que deverão ser entregues.

Pré-requisitos

Para concluir este laboratório você precisará da máquina virtual fornecida pela Microsoft do Visual Studio 2012. Para mais informações de aquisição e utilização desta máquina virtual, confira esta postagem do blog .

Sobre o cenário da Fabrikam Fiber

Esta série de laboratórios utiliza uma companhia fictícia para você aplicar as soluções apresentadas a diversos cenários, a Fabrikam Fiber. Esta companhia fornece TV por assinatura e serviços relacionados para os Estados Unidos. Eles estão crescendo rápido e adotaram o Windows Azure para escalar o site de interface com o cliente direto com os usuários finais, permitindo que eles criassem ticket de suporte e rastreassem os técnicos. Eles também usam uma aplicação ASP.NET MVC para os representantes de serviços ao cliente administrarem as ordens de serviço dos clientes.

Nesta série de laboratórios, você passará por inúmeros cenários que envolvem a equipe de desenvolvimento e teste da Fabrikam Fiber. A equipe possui de 8 a 10 pessoas, que decidiram usar as ferramentas de gerenciamento do ciclo de vida da aplicação (ALM – Application Lifecycle Management) para gerenciar o código fonte, executar suas versões (builds), testar seus sites, planejar e rastrear o projeto.

Exercícios

Este laboratório inclui os seguintes exercícios:

1. Introdução ao Storyboarding

2. Capturando Feedback com Microsoft Feedback Manger

Tempo estimado para completar este laboratório: 60 minutos.

Exercício 1: Introdução ao Storyboarding

Neste exercício, você aprenderá como utilizar o plugin do PowerPoint Storyboarding para criar Storyboards da aplicação. Isto será realizado através de uma análise do arquivo de storyboard já existente e adicionaremos alguns slides de storyboard para abordar a adição de user story.

Nota: Repare que nesta máquina virtual talvez você seja informado de um atraso (delay) ao abrir o portal do team project enquanto os serviços do Sharepoint são iniciados pela primeira vez. Talvez apareçam mensagens de timeouts, ou erros como na imagem abaixo.

Na maioria dos casos, basta você continuar atualizando a página até ela carregar. Lembre-se que isso pode levar alguns minutos dependendo do desempenho de hardware de onde a virtual machine está sendo executada. Se após alguns minutos não carregar, verifique se você esta executando esta virtual machine de acordo com as instruções de configuração. Isto inclui assegurar-se que você tenha ao menos um adaptador de rede instalado e configurado (é recomendado um adaptador de rede interno).

1. Faça login com usuário Annie, a responsável por representar os interesses do cliente e sua experiência. A senha de todos os usuários é P2ssw0rd.

2. Vamos iniciar localizando o storyboard existente. Inicie o Internet Explorer e clique no botão TFS FF Project Portal na barra de favoritos para carregar o dashboard. Talvez leve alguns minutos.

Figura 1Project portal da Fabrikam Fiber

3. Clique no link Shared Documents para ver a biblioteca onde o arquivo do PowerPoint com o nome “FF Storyboard – Start” se encontra.

Figura 2Localização do link Shared Documents

4. Clique no link do arquivo PowerPoint “FF Storyboard - Start” para carrega-lo.

Figura 3Localização do arquivo storyboard

Nota: Estamos utilizando localização compartilhada (shared location) no SharePoint, o que significa que toda a equipe tem acesso ao arquivo.

5. Clique no botão amarelo Enable Editing na parte superior da janela do PowerPoint.

Figura 4Habilitando alterações no arquivo storyboard

6. Clique na aba Storyboarding no topo da janela do PowerPoint.

Figura 5Visão inicial do storyboard no PowerPoint,exibindo a aba Storyboarding

Note: Se você precisar criar uma nova storyboard do zero, você pode ir em Start | All Programs | Microsoft Visual Studio 2012 | PowerPoint Storyboarding.

7. Estes slides do storyboard mostram como o novo plugin PowerPoint storyboarding pode ser utilizado para simular a interface com o ususário (UI – User Interface). Você pode tirar proveito dos modelos de slide para criar templates reutilizáveis para sua aplicação. Clique no botão

Layout para visualizar alguns dos layouts disponíveis neste arquivo de storyboarding do PowerPoint.

Figura 6Modelo de slide e layouts

Observação: Se você quiser fazer modificações ao layoute do slide máster, você pode fazer selecionando o botão Edit Layout na ana Storyboarding.

8. Aperte F5 para visualizar o storyboard no modo apresentação (presentation mode). Clique com o mouse nos slides ou pressione a tecla seta para a direita até a apresentação terminar. Veja que o storyboard tem uma aparência semelhante a uma web application e a de um Windows Phone 7 application. As animações são utilizadas para demonstrar como o usuário interage com a aplicação.

9. Agora vamos criar alguns storyboards adicionais para o site da intranet da Fabrikam Fiber, onde os funcionários acessam dados de clientes e tickets de serviço. Criando os storyboards, pode ser útil utilizar um documento específico para definir o cenário em uma user story para o time de desenvolvimento implementar e testar. No Team Foundation Server, considere que existe um

item no product backlog que representa a user story descrita como “Service rep can view service ticket details from the dashboard.”

10. Apague todos os slides existentes para nos concentramos na nova user story pressionando a tecla Delete repetidamente (ou Ctrl-A em seguida Delete).

Figura 7Deletando todos os slides

11. Clique no botão drop-down New Slide e escolha o layout “1_Default” do modelo de slide (slide master )“Web Browser”.

Figura 8Criando um novo slide utilizando o modelo de slide

12. Observe o novo slide do storyboard e veja tudo que foi fornecido pelo modelo de slide. Um molde completo da aplicação web, que ajudará você a manter o visual do nosso storyboard consistente.

Figura 9Novo slide utilizando o modelo de slide (slide máster)

13. Veja que o slide master inclui alguns espaços reservados para a o título da página web e endereço, ambos editáveis. Altere o espaço reservado “Web page title” com a palavra “Dashboard” no lugar. Este slide irá representar a página de Dashboard, que foi projetada para exibir uma lista cumulativa de tickets, alertas e mensagens, e outras informações da empresa.

Figura 10

Alterando os espaços reservados fornecidos pelo slide master

14. Em paralelo, carregue o site da intranet da Fabrikam Fiber no Internet Explorer clicando na barra de favoritos no item FF Intranet Portal (http://intranet.fabrikam.com ) . A página do Dashboard carregará. Dê uma olhada na interface com o usuário exibida para duplicarmos alguns storyboards.

Note: Embora os storyboards desenvolvimento, neste lab você irá se referenciar aos dois storyboard, os que estão em desenvolvimento e o produto finalizado afim de ajudar no tempo de execução da demonstração.

Figura 11Visualização do Dashboard do portal da intranet da Fabrikam Fiber

15. Volte ao PowerPoint, adicione uma nova Text Box no primeiro slide.

Figura 12Adicionando um Text Box ao slide

16. Coloque “Dashboard” no texto da nova text box para criar o título (header) desta página e o posicione como na imagem abaixo. Coloque o texto em bold (negrito), use o tamanho de fonte 16, e selecione gray como font color (cor da fonte).

Figura 13Adicionando conteúdo ao slide de storyboard

17. Agora vamos criar um botão chamado “Create New” abaixo do título do Dashboard. Clique no botão Storyboard Shapes se o painel não estiver aberto no momento.

Figura 14Abrindo o painel Storyboard Shapes

18. No painel Storyboard Shapes do lado direito da sua mão, digite “button” na caixa de busca para localizar o item (shape) Button.

Figura 15Pequisando shapes na biblioteca

19. Arraste e solte a shape do Button no slide.

Figura 16Adicionando shapes no storyboard

20. Altere o texto padrão por “Create New”, escolha white (branco)para a cor da fonte, e orange (laranja) para cor de preenchimento para atender os quesitos obrigatórios de design. Imagine que a Fabrikam Fiber possui definições de design que devemos atender.

Figura 17Alterando a aparência do novo botão

21. Criando storyboarding, você pode criar o suas próprias shapes para reutilizá-las depois. Selecione o botão que você acabou de criar, clique em Add to My Shapes, e defina o nome da nova shape como Fabrikam Button.

Observação: Certifique-se que selecionou a borda externa da shape do botão (não a parte do centro) a fim de disponibilizar a shape do botão em My Shapes.

Figura 18Criando um shape novo e reutilizável, e adicionando a nossa biblioteca

Observação: Você pode importar e exportar shapes para lhe ajudar a montar uma biblioteca de storyboarding. Além disso, há planos de disponibilização de uma comunidade online onde mais shapes de storyboarding poderão ser encontradas.

22. Em algumas situações você pode ganhar tempo no processo de storyboarding reutilizando itens. Neste caso, vamos dar uma olhada no recorte existente no resto da tela na tela do Dashboard, ao invés de adicionar um data grid e preenche-lo manualmente com dados. Primeiro, certifique-se que a janela do Internet Explorer esta exibindo a página da intranet da Fabrikam Fiber e que não esteja minimizado. Finalmente, na aba de Storyboarding do PowerPoint, clique no botão drop-down Screenshot e selecione a opção Screen Clipping.

Figura 19Utilizando o recorte de tela para acelerar o storyboarding

23. Quando o PowerPoint minimizar sozinho para exibir a página do DashBoard daFabrikam Fiber meio esbranquiçada, clique e mantenha pressionado o botão esquerdo do mouse e arraste até o canto inferior esquerdo da grid incluindo os Network Alerts, Messages, e assim por diante, para então soltar o botão do mouse para utilizar o recorte de tela capturado.

Figura 20Selecionando a região de recorte

24. De volta ao PowerPoint posicione o recorte de tela para que fique bem posicionado bem abaixo do botão Create New.

Figura 21Posicionando o recorte de tela no storyboard

25. Voltando à situação do storyboarding, imagine que os funcionários veem este dashboard e estão preocupados com um item que está demorando muito para ser solucionado ou escalado, então ele decide ver o item clicando no link com o número da referencia. Isto deveria carregar uma visualização que exibe os detalhes do ticket.

Figura 22Localização do hyperlinks ticket

26. Comece o storyboarding com este cenário clicando em new slide usando o mesmo layout que foi utilizado anteriormente. O novo slide deve ir para direita do primeiro que você criou.

Figura 23Criando outro slide utilizando o mesmo template

27. Em seguida, adicione alguns detalhes de ticket fictícios como na imagem abaixo utilizando as técnicas já demonstradas neste laboratório até agora. Além disso, utilize as shapes de

storyboarding Street Map e o Map Marker para ajuda-lo a representar a localização da residência do cliente.

Observação: Outra alternativa é carregar o arquivo PowerPoint “FF Storyboard - Finish” da biblioteca de documentos compartilhados para copiar e colar tudo que precisar para economizar tempo.

Figura 24Storyboarding o segundo slide que exibe detalhadamente o ticket

28. Quando fizer storyboarding no PowerPoint, você também pode montar uma representação para o fluxo de uma aplicação usando hyperlinks das Shapes. Selecione o primeiro slide, que mostra o Dashboard, clique na imagem da lista de tickets, e então clique no botão de Hyperlink na aba de Storyboarding.

Observação: Se escolhermos criar este slide usando uma Grid apropriada do menu de Shapes do Storyboard, em vez de um clipping screen, nós poderíamos criar preferencialmente um Hyperlink de uma célula específica.

Figura 25Tornando a lista em um hyperlink

29. Na Janela “Insert Hyperlink”, selecione a opção “Place in This Document”, escolha o Segundo slide, e clique em “OK” para criar o link.

Figura 26Selecionando o slide em que a lista criará o link

30. Também podemos utilizar as animações do Power-Point a fim de melhorar a apresentação dos Storyboards . Volte ao primeiro slide e procure a shape “mouse pointer” na janela “Storyboard Shapes”. Clique e arraste para o slide um exemplo de mouse pointer. Essa Shape será usada para representar o usuário clicando em um dos tickets de serviço no Dashboard.

Figura 27A Shape Mouse pointer será usada para simular a interação do usuário

31. Aumente a mouse pointer shape, assim ficará mais fácil de visualiza-la.

Figura 28Aumentando a mouse pointer

32. Na aba de animações, selecione “Add Animation”, e então selecione a opção “Custom Path” que está próxima da parte inferior (role o scroll para encontra-la).

Figura 29Animando a shape do cursor do mouse com a custom path

33. Use o mouse para selecionar um trajeto da posição atual da Shape do Mouse pointer para um hyperlink dos tickets de serviço(A lista é somente uma imagem). Para fazer isso, clique com o botão esquerdo do mouse perto da shape “mouse pointer” e arraste até o hiperlink, em seguida pressione a tecla “Escape”.

Figura 30Trajeto resultante da shape mouse cursor

34. Pressione Ctrl+S para salvar e volte para o Team Foundation Server.

Nota: Se for alertado para atualizar e tentar salvar novamente, o faça.

35. Pressione F5 para ver a apresentação do storyboard. Pressione a seta direita para iniciar a animação. Quando chegar ao hyperlink de serviço de ticket, pressione a seta direita para passar para o próximo slide, e pressione Escape quando terminar.

36. Nesta fase, digamos que tenhamos concluído o desenvolvimento dos storyboards e gostaríamos de conectar esse arquivo com o histórico do usuário no Team Foundation Server. Selecione o botão “Storyboard Links” na aba Storyboarding no PowerPoint.

Nota: Se for alertado para conectar com um team project, clique em VSALM -> FabrikamFiberCollection ->FabrikamFiber e em seguida conecte.

Figura 31Locais de botões de Storyboarding Links

37. Em Storyboard Links, selecione o botão Link To para criar link do storyboard com a work item.

Figura 32Local do botão para criar um link do storyboard com uma work item existente

38. Na janela “Choose Linked Work Items”, selecione o modo de busca “Title Contains” e digite “service ticket”, e então clique em Find.

Figura 33Buscando a work item correta

39. Selecione o work item denominado “Service rep can view service ticket details from the dashboard” e clique em OK.

Figura 34Selecionando a work item correta

40. Depois de criar o link, você verá a confirmação na janela de Links de Storyboard. Clique em Close para terminar.

Figura 35Confirmação mostrando que foi feito um link do storyboard com uma work item

Exercício 2: Estimulando o Feedback com o Microsoft Feedback Client

Neste exercício você aprenderá sobre o novo Feedback Client. Durante o curso de desenvolvimento de software, isto é importante para obter o feedback de partes interessadas no projeto (usuários finais, proprietários de produtos, e outros), para assegurar-se de que o progresso da equipe está na trilha para cumprir as exigências que as partes interessadas têm em mente. A ferramenta permite a captação de áudio, de vídeo, screenshots, e outros anexos a serem conectados com o work item de feedback do Team Foundation Server.

1. Faça o Login como Annie, que é responsável por representar os interesses do cliente e a experiência do usuário. A senha de todos os usuários é P2ssw0rd.

2. Para os propósitos deste laboratório, vamos assumir que gostaríamos de obter algum feedback sobre o recurso do portal intranet da Fabrikam Fiber de alteração de registros do cliente. No Internet Explorer, carregue o acesso web da Fabrikam Fiber clicando no link ”TFS FF Web Access” na barra de favoritos. Direcionado pelas atividades, clique em “Request feedback”.

Figura 36Iniciando o requerimento de feedback

3. Na janela “Request Feedback” selecione Brian Keller como parte interessada em requerer um feedback (stakeholder). Use a opção Web Application e digite a seguinte URL do site intranet, http://intranet.fabrikam.com. Na caixa de texto abaixo da URL, forneça as instruções “Please use IE 9 or higher.” para ir junto com a aplicação web. Defina o título do pedido de feedback como “Please provide some feedback on the current customer records editing functionality.” E também deixe algumas instruções abaixo da caixa de texto do titulo como “Go to intranet portal, click on Customer link, then Edit link for any customer.”

Figura 37Criando o pedido de feedback

Nota: Você pode adicionar a quantidade de itens de feedback que quiser clicando no link ‘add feedback item’.

4. Uma vez que o pedido de feedback está pronto para ser enviado, clique em Send para enviar o e-mail ao Brian.

Figura 38Mandando o e-mail com o pedido de feedback

5. Com o pedido de feedback enviado, uma notificação é adicionada a home screen do acesso web da Fabrikam Fiber. Esse work item é do tipo Feedback Request.

Figura 39Work item do pedido de Feedback criado recentemente

6. Agora vamos simular Brian recebendo o e-mail e começando uma sessão de feedback a partir dele. Abra o Windows Explorer e vá para a pasta c:\inetpub\mailroot\drop. Procure o e-mail mais recente e dê um duplo clique para abri-lo no Outlook. Você precisará esperar um pouco.

Nota: A VM que você está usando para este laboratório não contém um servidor completo de e-mail, então, precisamos simular uma emissão e recepção de e-mail usando esta etapa extra.

Figura 40Simulando o Brian recebendo o e-mail de solicitação do feedback

7. Com o e-mail aberto no Outlook, clique no link “Start your feedback session” para começar o Feedback Client.

Figura 41Iniciando seu feedback diretamente do e-mail

8. Após o Feedback Client ter iniciado, clique no link da aplicação para carregar o portal intranet da Fabrikam Fiber.

Figura 42Começando a aplicação conforme instruido

9. Clique no botão Next para mudar para o fornecimento do feedback solicitado.

Figura 43Clicando no botão Next

10. Siga as instruções fornecidas selecionando o link Customers para navegar na página de clientes.

Figura 44Navegando à página dos clientes

11. Depois, clique no link Edit para um dos clientes listados.

Figura 45Alterando detalhes do cliente

12. Brian sabe que os registros dos clientes contém números de telefone, e os usuários do portal intranet da Fabrikam Fiber geralmente precisam atualizar esses números para os clientes que estão ligando para saber sobre o serviço deles. Aqui nós podemos ver que a Edit screen não nos permite atualizar esse campo.

Figura 46Vizualizando a Edit screen do cliente

13. Na janela de gerenciamento de feedback, digite algum feedback sobre esta edição como “We need to provide a way to update customer phone numbers.”

Figura 47Adicionando Feedback

14. Anexe uma screenshot clicando no botão de Screenshot. Esta opção permitirá que você desenhe um retângulo para definir a região que você deseja capturar. Segure o botão esquerdo do mouse e mova-o até selecionar todo o registro do cliente. É muito útil fornecer o maior numero de detalhes possíveis para descrever um problema.

Figura 48Screenshot adicionado ao feedback para mostrar o contexto

Nota: É fácil editar screenshots clicando duas vezes nelas dentro do Feedback Client para carrega-los na ferramenta (MS Paint por padrão).

15. Veja que é possível gravar vídeo e áudio, adicione um arquivo anexo adicional, e altere o texto de feedback utilizando os recursos de rich text que o Feedback Client oferece.

Figura 49Maneiras adicionais de fornecer feedback

16. Digamos que, além do campo faltando, achamos que a edit screen está boa. Avalie o item com 4/5 estrelas para fornecer um feedback mensurável a equipe.

Figura 50Avaliando o feedback baseando na solicitação

17. Clique no botão Next para ir até a página de envio do feedback.

Figura 51Finalizando feedback

18. Revise seu feedback e clique em Submit and Close para finalizar.

Figura 52Submetendo o feedback

19. Volte ao site da Fabrikam Fiber, navegue até a página Home, e selecione o quadrado verde Feedback na sessão Team Favorites.

Figura 53Carregando a query de Work items de solicitações de Feedback

20. Encontre a resposta de feedback que acabamos de criar.

Note: Durante a nossa simulação de workflow, o titulo da nossa resposta à solicitação de feedback está incorreta, simplesmente porque nós estamos logados com usuário Annie durante o laboratório. Considere que o título da nova work item seja “Feedback Response from Brian Keller…”

Figura 54Work item de Resposta de Feedback selecionado

21. Dê um duplo clique no work item de Resposta de Feedback para abri-lo. A aba Notes está selecionada por padrão para que você veja diretamente o feedback.

Figura 55Feedback Response notes

22. Finalmente, clique na aba All Links e veja que a solicitação de resposta de feedback é uma work item filha da work item original que foi enviado ao e-mail do Brian.

Figura 56Resposta de Feedback é automaticamente associada a solicitação original