Este projeto é referente ao Frontend do projeto Inspeção de Cabo de Aço da disciplina de PI2, desenvolvido em:
Vue/Quasar, Apollo e Pug.

📋 Requisitos

Para rodar o projeto, basta ter o Git, Docker e o Docker Compose instalados. Para rodar local, deve-se ter o Node e o Quasar CLI instalados.

💻 Rodando a aplicação

O primeiro passo é clonar o projeto e em seguida entrar em sua raiz:

git clone git@github.com:pi2-inspecao-cabo-de-aco/frontend.git && cd frontend

Para baixar as imagens e subir os containers, rode o comando:

docker-compose up --build

Após isso, o frontend estará disponível para uso, na url localhost:8080.

A outra maneira possível é rodar o frontend sem o Docker. Para isto, basta instalar as dependências da aplicação presentes no package.json utilizando o comando yarn ou npm install.

E em seguida a aplicação estará disponível na mesma url localhost:8080 após executar o comando abaixo.

quasar dev

📂 Estrutura

A hierarquia de pastas do projeto é a seguinte:

frontend/
└── src/
    ├── /
    ├── assets/
    ├── boot/
    ├── components/
    │   ├── cables-page/
    │   │   ├── CablesList.vue
    │   │   └── CreateCable.vue
    |   └── ...
    ├── css/
    ├── graphql/
    │   ├── fragments/
    │   ├── mutations/
    │   │   ├── create-cable.gql
    │   │   └── ...
    │   ├── queries/
    │   │   ├── cables.gql
    │   │   └── ...
    │   ├── subscriptions/
    |   └── ...
    ├── helpers/
    ├── i18n/
    ├── layouts/
    ├── mixins/
    ├── pages/
    │   ├── CablesPage.vue
    │   ├── Index.vue
    │   └── ...
    ├── router/
    ├── statics/
    ├── store/
    ├── App.vue
    └── ...

assets: Contém arquivos extras à aplicação, como imagens, fontes, etc.

boot: Contém arquivos de configuração de plugins utilizados na aplicação.

components: Contém todos os componentes da aplicação, estruturados em pastas referentes à um componente page ou à uma feature específica. A nomenclatura das pastas utiliza o padrão kebab-case e os componentes utilizam o padrão PascalCase.

grahql: Contém todos os arquivos referentes aos resolvers do graphql, como fragments, queries, mutations e subscriptions. A extensão dos arquivos presentes são .gql e podem ser importados em qualquer componente, para ser utilizado no Apollo.

helpers: Contém métodos com lógicas que podem ser utilizadas em vários componentes.

layouts: Contém componentes reutilizáveis que são a estrutura de uma janela. É comum seus componentes terem uma barra de navegação, um drawer ou até um footer. Geralmente são utilizados como componentes pai de várias rotas.

pages: Contém componentes que guardam toda a lógica de uma página. Estão em um nível de abstração abaixo de um layout e acima dos componentes comuns.

router: Contém todas as rotas da aplicação.

store: Contém todos os arquivos referentes ao Vuex, que é a biblioteca de gerenciamento de estados do Vue. Suas pastas utilizam o padrão de nomenclatura kebab-case, onde cada uma contém os getter, actions, mutations e o state de cada módulo da Store.