Como usar a engenharia de sistemas para criar um aplicativo da web bem-sucedido

Se você entender como funciona, fica mais fácil construí-lo

Dler Ari Blocked Unblock Seguir Seguindo 10 de janeiro Foto de Luca Onniboni no Unsplash

Então você finalmente concluiu seu design no Adobe XD, Figma, Sketch ou InVision, mas ainda luta com a ideia de como implementar a funcionalidade. Não se preocupe, nós pensamos por um tempo que a única maneira de construir aplicativos da web é começar com o design UI / UX, juntamente com rascunhos protótipo.

Felizmente, há outras e melhores técnicas que podemos usar para descrever os aplicativos da web, sem nos preocuparmos sobre quais posições, tamanho ou espaçamento os elementos em uma página precisam.

Deixe-me apresentar-lhe algo que tem sido usado por empresas nos campos aeroespacial, marítimo, defesa, automotivo e telecomunicações para obter uma melhor compreensão de como os sistemas se comportam e interagem. Eu não estou falando sobre o número X de dicas e truques sobre como melhorar a interface do usuário / UX, mas quais técnicas você pode aplicar a partir do arsenal de Engenharia de Sistemas (SE) para construir aplicativos web de sucesso.

Essas técnicas têm muitos benefícios, mas o mais importante é a rapidez com que alguém pode expressar ideias e entender como as coisas funcionam.

Aqui estão quatro técnicas práticas de SE que você pode aplicar em seus aplicativos da web.

Se você quiser se tornar um desenvolvedor web melhor, começar seu próprio negócio, ensinar aos outros, ou simplesmente melhorar suas habilidades de desenvolvimento, postarei dicas e truques semanais de alta qualidade nos idiomas mais recentes do mercado.

Um exemplo prático – plataforma de aprendizagem on-line

Para tornar os exemplos intuitivos e aplicáveis, construiremos uma plataforma de aprendizado on-line. Uma plataforma que permite que as pessoas publiquem conteúdo, o mesmo conceito que o Medium, o YouTube, o Unsplash etc.

Nota: a ideia de usar essas técnicas é descrevê-las o suficiente para que os desenvolvedores possam implementar facilmente esses recursos, o que significa que não precisamos entrar em detalhes.

Aqui estão algumas dicas interessantes para estar ciente nos estágios iniciais do aplicativo.

1. Não comece com design detalhado

Nos estágios iniciais, a maioria dos desenvolvedores começa naturalmente definindo as soluções primeiro e, assim, se depara com detalhes que realmente não importam para o produto final. Isso nos leva na direção errada, e nos esquecemos do verdadeiro propósito do aplicativo.

O design é importante, mas não é algo que devemos focar nos estágios iniciais. Não é fixo (e muda com freqüência) – por exemplo, a cor de um botão, posição dos elementos, tipo de fonte e assim por diante. O que não muda é o comportamento subjacente do aplicativo da Web, como a forma como uma pessoa se autentica, o modo como ela faz upload de algo em uma página, as etapas para processar um pagamento e assim por diante. As partes fundamentais permanecem as mesmas.

2. Comece com o problema

Identifique o problema primeiro: o ambiente, quem são os stakeholders, o comportamento e o contexto do aplicativo.

Nós não construímos aplicativos baseados em soluções, nós os construímos porque há um problema, problema ou um desafio que precisa ser resolvido. Na maioria dos casos, o cliente não se preocupa com a solução, exceto que ela funciona.

O problema pode ser que a plataforma de comunicação atual seja muito lenta, o que influencia o fluxo de trabalho. Outro problema pode ser que o gerente não tenha uma visão clara das tarefas com as quais o funcionário trabalha e assim por diante.

Tenha em mente que o problema nos diz que existe uma necessidade, mas não fornece soluções. O problema é o que desencadeia o processo de desenvolvimento. Então, estar com o problema primeiro.

Vamos ver quais técnicas podemos usar para descrever nossa plataforma de aprendizado online.

1. Diagrama de Contexto

Definir os limites

O objetivo do diagrama de contexto é definir os limites dentro do aplicativo, ou partes do aplicativo, e fornecer um entendimento claro sobre com quais entidades ele interage.

Como mostrado, podemos ver quais tipos de partes interessadas (usuários) interagem com o aplicativo e os tipos de interação entre eles. Note que os nomes das partes interessadas não são mencionados, nem que tipo de banco de dados estamos lidando. Nós não queremos ser pego com detalhes que podem mudar no futuro.

Esclareça aplicativos complexos

Se você está lidando com um aplicativo bastante complexo que consiste em várias partes, um diagrama de contexto é uma boa alternativa que permite simplificar as coisas. Também é uma boa maneira de nos lembrarmos de qual é o propósito do aplicativo e de eliminar as coisas que fornecem pouco valor para o aplicativo. É uma maneira de voltar atrás e focar no que é importante.

2. Diagrama de Caso de Uso

Diagrama de casos de uso de alto nível

Note que não mencionamos nada sobre o layout, tamanho ou posição dos elementos. No SE é importante que as coisas sejam modulares, o que significa que podemos mudar as coisas sem afetar o aplicativo – não queremos que as coisas sejam fixas e imutáveis.

Um desenvolvedor que precisa desenvolver um software de trabalho deve ser capaz de ler um caso de uso e ter uma boa noção do que o software precisa fazer. Fonte

Descrever as interações

O objetivo do diagrama de casos de uso é descrever como o usuário interage com o aplicativo da web de maneira verbal. Essa é uma ótima ferramenta para entender o que o cliente precisa e também quais recursos o desenvolvedor deve implementar.

Elaborar um caso de uso (ação)

Como mostrado acima, o usuário é o produtor de conteúdo e executa quatro ações. Uma ação é um recurso que precisa ser implementado. O diagrama de casos de uso não descreve o comportamento do aplicativo, exceto a interação entre o usuário e o aplicativo, ou partes dele.

Para descrever o comportamento, podemos realizar uma ação e elaborá-la por meio de diagramas como atividade, máquina de estado, diagramas de seqüência e assim por diante.

Por exemplo, podemos criar um diagrama de atividades para descrever as etapas necessárias para cumprir a ação "carregar conteúdo". Há um exemplo disso nas seções 3 e 4.

Concentre-se em diferentes cenários de casos de uso

O aplicativo provavelmente será usado por usuários com funções diferentes, como administrador, produtor de conteúdo, editor, analista e assim por diante. E cada função tem um conjunto de necessidades exclusivas com diferentes casos de uso (interações). É importante que cobrimos essas interações ou, então, acabamos com um aplicativo estático personalizado para uma função de usuário específica.

3. Diagrama de Atividade

Diagrama de atividades – conteúdo de upload

Descreva o comportamento

O objetivo de um diagrama de atividades é descrever a seqüência de atividades necessárias para preencher um caso de uso. O caso de uso selecionado é "upload de conteúdo" do diagrama de caso de uso, conforme mostrado acima.

Você é livre para decidir em que caso de uso deseja expandir e elaborar – o objetivo não é criar um diagrama de atividades para cada caso de uso, mas os que são difíceis de entender ou implementar.

Descreva os passos para alcançar o objetivo

É difícil prever o que o usuário faz e em que ordem. Por esse motivo, um diagrama de atividades nos ajuda a mapear quais atividades o usuário realiza e também abrange decisões das quais talvez não tenhamos conhecimento. Ele também pode ser usado para descrever atividades de um não usuário, por exemplo, uma parte do aplicativo que aguarda algo antes de poder executá-lo. O foco é descrever o fluxo de trabalho.

Expresse ideias através do design

Quando trabalhava em equipe, um engenheiro sênior me entregou um diagrama de atividades de um recurso que ele queria implementar. Todo o processo de desenvolvimento ficou muito mais fácil porque eu não precisei adivinhar como o aplicativo se comporta, o comportamento já foi descrito através de um diagrama de atividades.

Em geral, é uma ótima ferramenta para expressar idéias e pensamentos para as pessoas, em vez de confiar apenas na comunicação verbal.

4. Diagrama da Máquina Estatal

Diagrama da máquina de estado – Estado do conteúdo

Definir os estados

O objetivo do diagrama de máquina de estado é descrever um comportamento discreto do aplicativo. A diferença entre um diagrama de atividades e um diagrama de máquinas de estado é que o primeiro descreve as etapas para alcançar algo (fluxo de trabalho), enquanto o segundo descreve como os estados de um objeto mudam ao longo de sua vida útil.

Ambas são técnicas úteis para descrever o comportamento do aplicativo e são úteis para clientes e desenvolvedores obterem um entendimento comum de como as coisas funcionam.

Pensamentos finais

O design está em constante movimento e evolui e muda ao longo do processo de desenvolvimento. Como mencionado acima, é importante abordar problemas de design, como rascunhos de UI / UX e protótipos, mas não descreve realmente como as partes subjacentes do aplicativo funcionam ou se comunicam. Também requer ter designers gráficos instruídos e muitos recursos.

Por essa razão, precisamos de algo que não seja dependente do design, algo que não se concentre em detalhes menores, como tipos de fontes, sombras de caixa, cores e assim por diante.

Precisamos de técnicas de Engenharia de Sistemas para descrever como o aplicativo se comporta e interage, para expressar ideias, simplificar o processo de desenvolvimento e ajudar pessoas com históricos não técnicos a compreender o comportamento dos aplicativos.

Observe que há um conjunto de regras que devem ser seguidas ao criar esses diagramas, no entanto, a maioria das pessoas com quem trabalhei não entende ou realmente se importa com essas regras. Portanto, a melhor dica que posso dar é ter certeza de que você segue o propósito do diagrama, mas não se baseie nas regras, como se a linha terminasse com uma ponta de flecha, um diamante e assim por diante.