App desenvolvido em Vue (Como forma de estudo) e SCSS (Utilizando o padrão BEM) para buscar usuários do github através da a API e retornar seus repositórios com a quantidade de estrelas de cada um.
Para executar o projeto, será necessário instalar:
Para iniciar o desenvolvimento, é necessário clonar o projeto do GitHub num diretório de sua preferência:
cd "diretorio de sua preferencia"
git clone https://github.com/LeandrodeLimaC/gitfinderNavegue até a pasta criada e execute o seguinte comando para instalar as dependências do projeto
npm install
Por fim, inicie o servidor de desenvolvimento através do seguinte comando
npm run serve
Testando a criação de um aplicativo enxuto sem rotas, aonde todo o controle é feito pelo App.vue através de estados, e mutações são comunicadas pelos filhos para seus pais diretamente
Nota - Vue é uma Framework leve que proporciona a propagação de data de uma forma rápida, este aplicativo possuí uma estrutura baseada na apenas na organização de seus componentes. Caso haja a necessidade deste aplicativo se escalonar, veja a seção de "Mantenha em mente"
+-- public
| -- favicon.ico
| -- index.html
|
+-- src
| |-- assets
| | -- logo.png
| |
| +-- components
| | +-- reposList.vue // Loop do array de repositórios, criação dos itens e gerenciamento de estados
| | +-- searchBar.vue // Barra de pesquisa, recebe e emite o valor digitado após receber um debounce (veja o helpers)
| | +-- usersList.vue // Criação dos itens da lista de usuário/Gerenciamento de estados/Emite usuário selecionado
| |
| +-- helpers
| | +-- debounce.js // Recebe uma função e um delay/aplica os argumentos na função/e devolve a resolução da função
| |
| +-- services
| | +-- config.js // Arquivo de configuração do Axios/ Base url para a API
| | +-- users.js // Serviços de requisição para rotas de usuários
| |
| +-- App.vue // Gerencia chamadas para a API, armazena estados e organiza logicamente a composição do layout
| +-- main.js // Render da aplicação / importação e definição de componentes do material
| +-- styles.scss // Arquivo de configurações globais do Vue Material
|
+-- .gitignore
+-- babel.config.js
+-- package.json
+-- package-lock.json
+-- README.md
Este sistema foi feito com um propósito definido e escopo fechado, o desenvolvimento de um sistema robusto exige práticas adicionais, como por exemplo as listadas abaixo
A utilização de rotas e views separadas possibilita a chamada da API mais direta e organizada, é possível recuperar informações passadas pela rota: javascript $route.params.name e caso necessário é possível enviar props.
Também há vantagens na usabilidade, como por exemplo caso o usuário deseja compartilhar o link de seu perfil ele poderá simplesmente enviar a URL.
Exemplo de uma url terminando com o nome do usuário www.gitfinder.com.br/users/leandrodelimac
Mantenha-se atento com o gerenciamento dos ciclos de vida do Vue ao realizar chamadas para a API
Gerenciamento e controles de estados e mutações de propriedades podem ser compartilhadas (alem da possibilidade de adição de regras) através da aplicação com mais facilidade, de modo que a fonte de determinada informação ficará mais clara e estruturada leia mais