Crie um Gerenciador de Arquivos do Zero em .NET Core e VueJS


Fala devs, blz ?

No artigo de hoje trago uma versão de um gerenciador de arquivo feito em .NET Core + Vue + Vuetify ♥.

O artigo de hoje foi desenvolvido em parceria com o meu mentor Fabio Silva Lima.

Onde ele desenvolveu uma Web API em .NET Core para listar todos os diretórios de um OS e seus arquivos usando alguns designs patterns.

Te convido a baixar o e-book do Fabio Silva Lima, onde ele explica os principais designs patterns e com certeza vai te dar outra perspectiva sobre desenvolvimento de software.

Projeto

Vamos criar um gerenciador de arquivos em vue + vuetify, e consumir um serviço REST que lista todos os diretórios informados do OS que você está.

Web Api

Você pode ver como a Web Api foi desenvolvida, os designs patterns utilizados diretamente no artigo que o Fabio Silva Lima publicou em seu blog.

Fonte

Você pode baixar o font direito do github clicando aqui

Resultado Final

Resultado final do projeto vue + vuetify consumindo uma api rest

Desafios

1- Consumir um serviço HTTP

2- Entender como o component de tree-view do vuetify funciona.

3- Aplicar lógica necessária para conseguirmos fazer nosso gerenciador ❤

1- Consumir a API — AXIOS

Métodos para retornar os items

2 — Treeview vuetify

Component de treeview vuetify

3 —Component Treeview do vuetify

O component de treeview que utilizamos faz todo o trabalho sujo por debaixo dos panos,

cuidando de toda a parte de recursão que é necessária para um treeview funcionar.

Cada vez que expandimos um node o componente chama a função fetchChildrens novamente.

Considerações Finais

Vue + vuetify, oferece o que há de mais atual para desenvolvermos SPA e PWA com uma facilidade absurda, reduzindo tempo e linhas de código. Vuejs tem uma comunidade gigantesca que só vem crescendo ainda mais com a popularização do vue.

Achou algum erro? Curtiu? Não curtiu?

Por favor comente e compartilhe!

Obrigado e até a próxima.