Como tirar uma ideia do papel?
Tags: beginners, braziliandevs, tutorial, programming
Published: 2023-04-25 16:24:59

Eae gente bonita, beleza?
Recentemente estava conversando com um amigo que está iniciando na programação, ele me indagou sobre a dificuldade de criar um projeto próprio. Então, pensando nisso resolvi vir aqui e descrever meu processo para organizar uma ideia, tirando do papel e quais são os passos que podem ser feitos para se organizar e elaborar seus próprios projetos.


<img alt="ok" style="width: 100px"src="https://media.giphy.com/media/111ebonMs90YLu/giphy.gif"/>

## Qual é o objetivo?

Aqui é a que você pensa no que o seu projeto vai fazer. Nesse texto vou trabalhar numa ideia simples, um app para gerenciar os clientes de um salão de cabeleireiro.

## Temos um tema, qual vai ser o objetivo desse app? 
Ou melhor, onde ele vai entregar valor, qual o problema que ele vai solucionar? Ou até mesmo se é uma aplicação simples para poder aprender novas tecnologias.

Nesse caso, quero um app onde os clientes possam agendar o seu horário e eu como cabeleireiro possa aceitar o agendamento, também quero que o app notifique os clientes da confirmação e que já mostre o valor do serviço.

> Obs: Acima eu citei o termo "entregar valor", o que se refere ao nivel de satisfação do cliente com o seu serviço e a sua capacidade de solucionar o problema apresentado na aplicação.

## Como ir fundo na ideia

Saber criar um **fluxograma** é uma habilidade muito importante para nós desenvolvedores, você pode usá-lo para entender melhor o processo das informações. Já fiz bastante para organizar o que eu precisava codar em testes de empresas.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3vugjnpsy5uax4c96fk.png)

Nesse momento gosto de trabalhar criando **fluxos** , abaixo vou deixar a lista de alguns sites onde você pode fazer o seu:

* [Miro](https://miro.com/pt/)
* [Draw.io](https://draw.io/)
* [Whimsical](https://whimsical.com/)
* [LucidChart](https://www.lucidchart.com/pages/pt/exemplos/fluxograma-online)

Abaixo vou deixar um vídeo explicando o que é um fluxograma e como criar um de forma bem detalhada.

{% embed https://www.youtube.com/watch?v=PfKIW19Jd3Y %}


## Mãos na massa

Nessa primeira etapa começo descrevendo os pontos principais que preciso que o app tenha e adiciono mais coisas conforme a necessidade for surgindo.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vagy2kdyqsbs9bl3y6cn.png)

**PS: Pode ficar tranquilo que vou adicionar esse diagrama com link ou uma imagem em resolução maior para você poder ler com mais detalhes.**

O objetivo principal do aplicativo é criar agendamentos, e pra isso o usuário precisa criar uma conta inserindo informações como **nome, e-mail e horário**. Após isso ele vai até a tela de agendamentos e isso acaba gerando a necessidade de criar um menu para ele navegar

Com isso eu já tenho o primeiro fluxo e ficou assim:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/du36f0v4kqmmjxh96v3e.png)

Agora vamos adicionar o "mostrar o preço de cada corte" no nosso fluxo. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lf1wqnjkqt666nkeg886.png)

E agora vamos finalizar o fluxo do cliente ficando da seguinte forma:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20ej9jsjngfyn965kx0y.png)


Por fim agora vamos criar o fluxo do cabeleireiro que é bem simples, então vou adicioná-lo por completo aqui também: 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20lvhysq53tmp4180yhy.png)
 
### Porque as cores mudaram? 

É importante você adicionar legendas ao seu fluxograma, pois assim fica mais claro quem faz cada fluxo no sistema e ao que tem acesso. Nesse caso ficou o azul para o cabeleireiro e verde para o cliente

 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njv7slmix2skzlw2bv18.png)

E por fim segue a imagem do fluxo completo: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5s47pmpjsj68jret85w.png)

Dessa forma fica muito mais fácil de entendermos o nosso sistema e como ele funciona. Com isso a gente consegue se organizar melhor para saber por onde começar a codar e criar regras mais específicas. 

**IMPORTANTE:** Deve ficar bem claro que isso é algo totalmente pessoal. Não existe nada escrito na pedra de como fazer isso. Outro ponto importante é que a ideia que vou falar sobre nesse texto e as dicas que irei dar são para projetos pessoais, não para aplicações reais e grandes. 


[Link do whimsical para ver com mais detalhes](https://whimsical.com/app-salao-AnhxXGRqgkMN4uJYfzQwzA)

Se chegou até aqui, me segue la nas [redes vizinhas.]  (https://bento.me/cmsdev)
<img src="https://media.giphy.com/media/D08aklo5n0hi5PJyZw/giphy.gif" />