Engenharia de aplicações web

Transcrição

1 Engenharia de aplicações web Departamento de Matemática Universidade dos Açores Hélia Guerra

2 aplicações web As Aplicações Web (WebApp) cresceram em complexidade e importância, abrangendo as principais estratégias de negócio das organizações (e.g., e- commerce) É importante seguir uma abordagem disciplinada que permita desenvolver sistemas seguros, utilizáveis e flexíveis Engenharia de Software tradicional fornece muitos métodos e conceitos 2

3 Engenharia de aplicações web As WebApp têm características específicas, diferentes de outras aplicações (e.g., preocupação acrescida com o aspecto, a usabilidade, a segurança) Pode ser preciso utilizar diferentes abordagens da Engenharia de Software tradicional Engenharia de Aplicações Web é o processo para criar WebApp de elevada qualidade 3

4 Características das WebApp Concentram-se em redes - internet, intranet, extranet - comunicação e segurança são importantes Permitem o acesso concorrente de muitos utilizadores Número de utilizadores é imprevisível - agora podem ser 10, daqui a pouco podem ser 1000 Devem ter bom desempenho - o tempo de espera para consulta a um site deve ser mínimo Disponibilidade 24h por dia 4

5 Características das WebApp Guiadas por conteúdos e orientadas aos dados - apresentam conteúdos hipermédia e permitem acesso a bases de dados Sensíveis ao conteúdo - pretende-se qualidade no conteúdo Estão em permanente evolução - o conteúdo pode ser actualizado minuto a minuto Imediatismo - devem ser feitas em pouco tempo (horas, dias ou semanas) 5

6 Características das WebApp Segurança - devem proteger conteúdo reservado e transmitir dados de forma segura Estética - é um factor de atracção - pode ser tão importante quanto a parte técnica 6

7 categorias de Webapp Informacional Download Interacção Entrada de dados Orientada a transações Orientada a serviços Portal Acesso a base de dados Armazém de dados 7

8 planeamento de webapp Por mais pequeno que seja o projecto, é importante considerar: - o cronograma - os marcos - os riscos para evitar confusão, falhas e frustrações 8

9 equipa para webapp - É preciso ter em conta que os prazos são curtos, as modificações são constantes e a tecnologia utilizada está em constante evolução - adaptam-se os conceitos gerais da Engenharia de Software tradicional 9

10 membros da equipa Desenvolvedor de conteúdos Editor de conteúdos Engenheiro Web Especialista no domínio do negócio Especialista para o suporte da aplicação Administrador (webmaster) 10

11 Sucesso da equipa Estabelecer directrizes para a equipa passando por indicar o que se espera de cada membro Forte liderança que mantenha o entusiasmo Respeitar os talentos individuais Obter compromisso de cada membro com a equipa Manter o ritmo de trabalho, ultrapassando possíveis obstáculos 11

12 Boas práticas de engenharia de aplicações web Empregar tempo a perceber as necessidades do negócio e os objectivos do produto Descrever como é que os utilizadores vão interagir com a WebApp Desenvolver plano de projecto, mesmo que seja muito abreviado Empregar tempo com a modelação da WebApp Revisitar os modelos quanto à consistência e à qualidade 12

13 Boas práticas de engenharia de aplicações web Utilizar ferramentas e tecnologias que possibilitem construir o sistema com o maior número possível de componentes reutilizáveis Não confiar nos utilizadores para os primeiros testes da WebApp 13

14 Más práticas de engenharia de aplicações web [Tom Bragg 2000] Temos uma grande ideia! Vamos começar já a construir a WebAPP Não é necessário entender bem os requisitos, pois as coisas estão em permanente mudança Quem desenvolve software tradicional está apto, sem qualquer treino, para desenvolver WebApp. Software é software! Deve-se insistir em modelos de processo burocráticos com muitas reuniões de progresso e com líderes que nunca geriram um projecto de WebAPP Testar? Não! Deve dar-se essa tarefa aos utilizadores finais e esperar que digam 14 alguma coisa

15 sites diversos

16 Processo de Engenharia web Comunicação: - formulação -negociação - levantamento requisitos Planeamento: - cronograma - análise de riscos - estimação esforço Modelação: - análise de requisitos - desenho Gestão (alterações, riscos, projecto) Deployment: - instalação no servidor - avaliação (utilizadores) Qualidade Construção: - codificação - testes 16

17 Engenharia de requisitos Principais tarefas - formulação do problema - levantamento dos requisitos - modelo de análise dos requisitos 17

18 Engenharia de requisitos Formulação - qual é a principal motivação da WebApp? - quais são os objectivos a atingir? - quem vai utilizar a WebApp (categorias de utilizadores)? A complexidade da WebAPP é directamente proporcional ao número de categorias de utilizadores do sistema 18

19 Engenharia de requisitos Caracterização de uma categoria de utilizadores - qual é o objectivo global do utilizador quando utiliza a aplicação? - que conhecimentos tem em relação ao conteudo e funcionalidade da WebAPP? - como é que acede à WebApp? - que características genéricas da WebAPp gosta/não gosta? 19

20 Engenharia de requisitos Comunicação com os interessados/utilizadores finais - em reuniões de grupo de representantes dos utilizadores - em grupos de discussão electrónica - iterativamente através de site ou mail - questionar utilizadores de aplicações semelhantes - solicitar a determinados utilizadores a criação de casos de utilização informais que descrevam interacções específicas com a WebApp 20

21 Engenharia de requisitos A informação proveniente do levantamento dos requisitos deve ser agrupada por categorias de utilizadores e tipo de transacções para ser avaliada em relação à sua relevância Pretende-se listar os objectos de conteúdo, as operações aplicadas aos objectos dentro das transacções, as funções que a aplicação fornece aos utilizadores, bem como outros requisitos não funcionais observados na comunicação 21

22 Engenharia de requisitos Análise de requisitos tem as seguintes actividades - análise de conteúdo identificação todo o conteúdo que vai ser disponibilizado através de texto, imagem, video, audio, gráficos - análise de interacção descrição das formas como os utilizadores irão interagir com o sistema - análise funcional descrição das operações e funções da WebApp - análise de configuração descrição do ambiente e infra-estrutura onde a WebApp irá residir 22

23 Análise de conteúdo Identificação todo o conteúdo que vai ser disponibilizado através de texto, imagem, video, audio, gráfico. Conteúdo pode ser desenvolvido antes, durante ou após a implementação da WebApp Um objecto de conteúdo é uma descrição textual de um conteúdo (e.g., produto, video, fotografia) Os objectos de conteúdo são extraídos dos casos de utilização É útil representar os objectos de conteúdo numa árvore de dados Um diagrama de classes poderá descrever os objectos de conteúdo e respectivos relacionamentos 23

24 Análise de interacção Descrição das formas como os utilizadores irão interagir com o sistema Pode incluir - diagramas de casos de utilização - diagramas de sequência - diagramas de estados - protótipo da interface com o utilizador (draft do layout) - modelo navegacional 24

25 Análise funcional Descrição das operações e funções da WebApp - funcionalidade observável pelo utilizador de quaisquer funções de processamento iniciadas por ele - funcionalidade das classes de análise podem-se utilizar diagramas de actividades 25

26 Análise de configuração Descrição do ambiente e infra-estrutura onde a WebApp irá residir Muitas vezes, é uma lista de atributos do lado do Cliente (e.g., configuração do(s) navegador(es)) e do lado do Servidor (e.g., Internet, intranet, extranet, especificar harware, especificar sistema operativo, indicar se necessita de acesso a BD) Podem usar-se diagramas UML de instalação para explicar arquitecturas de configuração mais complexas 26

27 Análise de relacionamentonavegação Transmite a forma como se navega num espaço de informação Um utilizador deve sempre saber onde está e para onde pode ir Transmite uma série de passos de análise que procuram identificar relacionamentos entre os elementos descobertos como parte da criação do modelo de análise 27

28 Abordagem para a Análise de relacionamento-navegação Passo 1: Análise dos interessados Passo 2: Análise dos elementos (objectos de conteúdo e elementos funcionais de interesse para os utilizadores) Passo 3: Análise de relacionamentos entre os elementos da WebApp (links) Passo 4: Análise de navegação (como é que os utilizadores acedem aos conteúdos) Passo 5: Análise de avaliação (custo/benefício) 28

29 Questões para a análise de relacionamentos O elemento faz parte de uma categoria mais ampla de elementos? Que atributos foram identificados para o elemento? Existe informação descritiva para o elemento? Onde está? O elemento aparece em diferentes localizações da WebApp? Onde? O elemento é composto por outros? Quais? O elemento é membro de um grupo maior de elementos? Qual? Que estrutura tem? O elemento é descrito pela classe de análise? Há elementos similares? Podem ser combinados num único? 29

30 Questões para a análise de relacionamentos O elemento integra uma ordenação específica de outros elementos? O seu aspecto depende de outros elementos? Há outros elementos que seguem o aspecto do elemento? Quais são as pré-condições e as pós-condições que devem ser satisfeitas para a utilização do elemento? Que categorias de utilizadores utilizam o elemento? utilizam-no de forma diferente? Como? Pode ser associado a um requisito específico da WebApp? Aparece ao mesmo tempo que outros? Quais são os outros? Aparece sempre no mesmo local da página onde outros também aparecem? Quais são os outros? 30

31 Questões para a análise de navegação Há elementos mais fáceis de aceder (menos passos) do que outros? Qual é a prioridade para a apresentação? Há elementos que devem ser realçados para forçar a navegação na sua direcção? Navegação para grupos deve ser prioritária em relação à navegação para um elementos específico? Deve ser mantido um registo da navegação para os utilizadores? Deve ser disponibilizado um mapa completo da navegação e não um simples link de retorno? 31

32 Questões para a análise de navegação O projecto de navegação deve ser guiado pelos comportamentos mais comuns (e esperados) ou pela importância dos elementos definidos na WebApp? Um utilizador pode guardar a sua navegação para utilização futura? Para que categoria de utilizadores deve ser projectada a navegação óptima? Como devem ser manuseados os links externos à WebApp? Nova janela? Sobrepostos?... 32

33 Desenho Envolve actividades técnicas e não técnicas da estrutura organizacional da navegação do conteúdo da interface de componentes (funcional) do aspecto estilístico É o comprovativo da qualidade (desejável) da WebApp previamente estabelecida na análise de requisitos Deve conter informação suficiente para que se perceba como é que os requisitos vão ser traduzidos em conteúdo e código 33

34 Como o utilizador percebe a Qualidade de uma webapp 1. Usabilidade inteligibilidade global do site ajuda on-line características de interface e estética 2. Funcionalidade capacidade de pesquisa e recuperação características de navegação e de pesquisa características relacionadas com o domínio da aplicação 34

35 Como se percebe a Qualidade de uma WebApp? 3. Confiabilidade processamento correcto de links recuperação de erros validação e recuperação da entrada do utilizador 4. Eficiência tempo de resposta velocidade de geração de páginas velocidade de geração de gráficos 35

36 Como se percebe a Qualidade de uma WebApp? 5. Manutenibilidade facilidade de correcção adaptabilidade extensibilidade 6. Segurança 7. Disponibilidade 8. Escalabilidade 9. Prazo de colocação no mercado 36

37 Objectivos do desenho Web 1. Simplicidade 2. Consistência 3. Identidade 4. Robustez 5. Navegabilidade 6. Aspecto visual atractivo 7. Compatibilidade 37

38 pirâmide do desenho Web Utilizador Desenho da interface Desenho estilístico Desenho do conteúdo Desenho da navegação Desenho funcional Desenho da Arquitectura Desenho de componentes Construção Tecnologia 38

39 interface Tem como objectivos estabelecimento de uma janela consistente entre o utilizador e o conteúdo e a funcionalidade condução do utilizador ao longo das sequências de interacções organização das opções de navegação e do conteúdo para o utilizador 39

40 interface Tem um papel muito importante, sendo a USABILIDADE o mais importante Deve ser desenhada de modo a responder às perguntas Onde estou? O que posso fazer agora? Onde estive? Para onde vou? 40

41 Alguns Aspectos a ter em conta no desenho da interface Antecipar o próximo passo do utilizador Comunicar ao utilizador o estado de qualquer actividade iniciada por ele Apresentar consistência no uso de controlos de navegação, menus, ícones, aspecto gráfico garantir que a navegação para partes de acesso restrito só se faz com autenticação deve permitir a realização de determinadas tarefas e a navegação aleatória (utilizador não se pode sentir perdido) focalizar nas tarefas do utilizador 41

42 Alguns Aspectos a ter em conta no desenho da interface Lei de Fitt: the time to acquire a target is a function of the distance to and size of the target Utilizar a (extensa) biblioteca de objectos de interface Permitir multitarefas por parte do utilizador Informar o utulizador de eventuais atrasos Deve ser simples, intuitiva, com conteúdo e funcionalidades organizados em categorias óbvias para o utilizador Deve utilizar uma metáfora apropriada de interacção Deve guardar automaticamente os dados especificados pelo utilizador Deve ser legível por qualquer faixa etária 42

43 Alguns Aspectos a ter em conta no desenho da interface O rastreamento da interacção deve ser feito e guardado para que possa ser utilizado mais tarde pelo utilizador O utilizador deve ter a ilusão de que está no mesmo lugar e que a informação é que chega até ele (a navegação não é preocupação) Não forçar o utilizador a ler grande quantidade de informação Evitar em construção e as barras de deslocamento Os menus de navegação e as barras do topo devem estar disponíveis em todas as páginas A estética não deve superar a funcionalidade As opções de navegação devem ser óbvias para o utilizador 43

44 mecanismos de controlo da interface Usar o desenho estilístico para estabelecer um aspecto coerente para a interface Apoiar-se numa metáfora adequada que facilite o entendimento intuitivo da interface Seleccionar para as opções de navegação menus com palavras-chave adequadas ao conteúdo ou à funcionalidade ícones e imagens gráficos 44

45 Desenho da interface Tem início com a identificação dos utilizadores, da tarefa e dos requisitos ambientais (An. requisitos) Passos a seguir: 1.Rever e refinar o modelo de análise de requisitos 2.desenvolver (ou refinar) o esboço do layout da interface 3.Corresponder os grandes objectivos do utilizador em acções específicas da interface (4-7) 4.Definir as tarefas do utilizador inerentes a cada acção (já identificadas na An. de requisitos) 5.Criar screenshots para cada acção da interface 45

46 Desenho da interface 6. Refinar o layout e os screenshots do ponto de vista estilístico 7.Identificar objectos de interface que possam ser reutilizados para a implementação da interface 8. [opcional] Desenvolver a representação procedimental da interacção do utilizador com a interface (e.g., diagramas de sequência, de actividade) 9. [opcional] Desenvolver a representação comportamental da interface (e.g., diagramas de estados) 10.Associar o que foi feito em 2 e 5 as estados de Refinar e rever o modelo de desenho com o enfoque da Usabilidade 46

47 desenho estilístico Corresponde ao esforço artístico que complementa os aspectos técnicos da WebApp desenho gráfico É o que torna a WebApp atraente ( look and feel ) A estética está no olhar de quem a vê, pelo que é importante conhecer os seus utilizadores e os aspecto que desejam para a WebApp 47

48 aspectos a ter em conta para o Desenho estilístico Não ter medo de espaços em branco Enfatizar o conteúdo Organizar os elementos do layout do canto superior esquerdo ao canto superior direito (prioritários mais em cima à esquerda) Agrupar navegação, conteúdo e função geograficamente na página Não estender o espaço com barras de rolamento Considere a resolução e o tamanho da janela do browser quando projectar o layout Para um layout coeso utilize uma CSS 48

49 Conteúdo Preocupa-se com a representação da informação (inclui estruturas de dados, bases de dados) 49

50 navegação Define os caminhos de navegação que permitem que o utilizador tenha acesso ao conteúdo e aos serviços da WebApp Define as permissões de navegação dos diferentes tipos de uilizadores Definem-se os mecanismos para realizar a navegação (e.g, identificação dos links, cor dos links, mapa do site, mecanismos de pesquisa, índices) 50

51 arquitectura Ligado aos objectivos da WebApp, ao conteúdo, aos visitantes e à filosofia de navegação estabelecida Deve-se identificar o estilo da arquitectura do conteúdo arquitectura da WebApp Decorre em simultâneo com os desenhos anteriores (interface, estética, conteúdo) 51

52 arquitecturas de conteúdo Estrutura linear quando a sequência de acções é previsível (e.g., tutorial) variantes: fluxo excepcional, com desvios 52 Linear com fluxo excepcional

53 Estrutura em malha arquitecturas de conteúdo quando o conteúdo é organizado em categorias de duas ou mais dimensões 53

54 arquitecturas de conteúdo Estrutura hierárquica 54

55 Estrutura em rede arquitecturas de conteúdo 55

56 arquitecturas da webapp Em camadas, nas quais são tidas em conta diferentes preocupações Model-View-Controller (MVC) utiliza Controller manipula browser Cliente selecciona Model Data mostra View actualiza Servidor utiliza

57 Desenho de Componentes Desenvolve a lógica de processamento detalhado necessária para implementar componentes funcionais que irão integrar uma funcionalidade completa da WebApp Os componentes são idênticos aos componentes do software convencional Caracterizar os componentes a desenvolver e respectivos algoritmos Seleccionar padrões de desenho adequado (arquitecturais, construção de componentes, navegação, apresentação, comportamento-interacção) 57

58 Desenhar os mecanismos de segurança e privacidade adequados REVER O DESENHO 58

59 Construção Construção do conteúdo a integrar na arquitectura da WebApp Escolher as ferramentas adequadas (e.g., geração do código HTML) Implementar cada layout de página, cada função, formulário, modo de navegação Implementar as funções que integram os formulários, scripts, interfaces de bases de dados Garantir os aspectos da configuração (e.g., browsers que suportam a WebApp) 59

60 testes Componentes (conteúdo, funções) Navegação Usabilidade Segurança e desempenho Todo o incremento para as diferentes configurações 60

61 instalação Instalar a WebApp no servidor no domínio pretendido Estabelecer mecanismos de feedback on-line para os utilizadores (e.g., formulários de avaliação) Avaliar a interacção dos utilizadores (e.g., grau de dificuldade) Ter em conta o feedback recebido dos utilizadores fazer as alterações ao incremento (se necessário) 61

62 Referências Pressman, R. J., Software engineering: a practitioner's approach, Mc Graw Hill, 6ª edição,