O ETrade web necessita de um único projeto para o seu funcionamento e testes, o projeto Web.Api que é um projeto mono-repo onde estarão as pastas Back-end e Front-End.
O Back-end é a pasta responsável pela comunicação com o banco de dados e nele contém toda a regra de négocio do ETrade web.
O Front-end do site, é onde será a parte visual disponível para os clientes utilizarem.
Vamos detalhar passo a passo como configurar esses ambientes no seu computador e testar o projeto.
Instalação do .Net 6
A versão do ambiente de desenvolvimento C# que utilizamos no projeto Web.Api é a versão .NET 6, que pode ser encontrado no site oficial da microsoft.
- Instalar o Windows Hosting Bundle
É necessário instalar esse arquivo, pois ele habilita e dá suporte à aplicativos web/server. Seu download se encontra no mesmo local do link acima citado.
Instalando o Git
Para instalar o Git, será necessário acessar o link Git - Downloads (git-scm.com) e clicar em "Download for Windows", seguindo os passos ilustrados abaixo:
Passo 1
Passo 2
A partir disso, basta clicar em "next" nas próximas janelas, sem necessidade de alteração, até chegar na parte de "install", como mostra no passo 3, sendo necessário apenas aguardar o processo de Instalação do Git, e o mesmo estará pronto para uso.
Passo 3
Configurando o VS Code
A Ide que utilizamos para programar os projetos Web.Api e Web.Vue é o Visual Studio Code(VS Code), iremos primeiramente instala-ló no computador.
Acesse aqui, e baixe a versão dele, geralmente usamos a última versão disponível e 64 bits.
Após a instalação vamos abrir o Vs Code e configurar os projetos.
Configurando o Web.Api com o VS Code
1 - Crie na raiz da sua unidade de disco as pastas web.api e web.vue.
2 - Abra o Vs Code, na página inicial clique no botão Clone Git Repository para clonar o repositório. Copiei o link https://github.com/vrsystem/web.api.git na janela que abrirá para clonar.
3 - Selecione a pasta criada no disco local destinada ao projeto Web.Api, e clique no botão Select as Repository Destination.
4 - Aparecerá a tela para conectar e logar no GitHub, siga os procedimentos para logar.
5 - Caso apareça a tela para pedir permissão de acesso na pasta que você definiu para o projeto, marque a check e clique no botão Yes, I trust the authors.
6 - Será necessário instalar algumas extensões referentes a identificação e padronização da linguagem C#. Vá na Aba Extensões do VS Code, procure pelas seguintes extensões e instale-as:
- .NET: C#(Base language support for C#), C# Dev Kit(Official C# extension from Microsoft), .NET Install Tool, C# Format Usings, C# Namespace Autocompletion, C# Snippets, DotENV,
- Vue 3: Vue - Official, Vue 3 Support - All In One, Vue VSCode Snippets, Path Intellisense, Auto Close Tag, Auto Import, Auto Rename Tag, Beautify css/sass/scss/less, JavaScript (ES6) code snippets, Prettier - Code formatter, Sass (.sass only), SCSS Formatter, Vetur, vscode-icons, ESLint.
7 - Configure o ArqId dentro da pasta Api localizada dentro do projeto "backend", caso esse já não exista.
OBS.: É importante também ajustar o nome da instância dentro do ArqId, caso necessário.
8 - Baixe e cole os arquivos de configuração do VS Code na pasta .vscode na raiz do projeto Web.Api, onde estão os projetos "backend" e "frontend"
Obs.: Caso a pasta não esteja criada, pode criá-la manualmente
9 - É necessário adicionar os seguintes arquivos: .env.development.local e .env.production.local, pois eles contém as variáveis locais que são utilizadas pelo Vue. No Github do projeto Web.Api, há um README.md onde estão disponíveis os links para download desses arquivos, dentro da pasta "frontend".
OBS.: Copie e cole os arquivos .env.development.local e .env.production.local para a pasta raiz do projeto "frontend" do Web.Api.
10 - É necessário instalar o node.js na versão 22.20.0. Acesse o link e baixe a versão de 64 bits e instale no computador.
Obs: Basicamente é só dá avançar... sem necessidade de marcar nenhuma opção a mais.
11 - Feche o VsCode e abra novamente, e verifique se o node foi instalado corretamente com o comando node --version, caso esteja instalado aparecerá a versão dele.
12 - No projeto, no arquivo package.json já virá configurado todas as extensões e pacotes que são utilizados no projeto, então novamente no terminal rode o comando npm install, ele acessará todas as dependências do projeto e as instalará no computador.
OBS.: Caso ocorra o seguinte erro ao rodar o npm install, rode o comando listado abaixo da imagem para corrigi-lo
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
13 - Para executar o projeto frontend, é necessário estar em sua respectiva pasta e rodar um comando chamando npm run serve, se não tiver nenhum erro no projeto ficará como a imagem abaixo.
14 - Execute o projeto backend(clicar na aba run do VsCode, e depois em Start Debbuging) para verificar se as configurações estão corretas, caso esteja, irá perguntar se você deseja instalar um certificado digital(para api) no computador, confirme a instalação.
Após esse processo, você estará habilitado a testar e usar o E-Trade Web.
Configurando a auto formatação do Vue:
No VS Code vá em: File > Preferences > Settings (ctrl + ,) > procure por eslint > localize as configurações de save e clique em "Edit in settings.json" > cole o código citado abaixo nesse arquivo de configuração.
{
"workbench.iconTheme": "vscode-icons",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"typescript.preferences.quoteStyle": "single",
"javascript.preferences.quoteStyle": "single",
"vue3snippets.singleQuote": true,
"html.format.wrapLineLength": 0,
"window.zoomLevel": 1,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
},
"git.confirmSync": false,
"git.enableSmartCommit": true,
"debug.javascript.pickAndAttachOptions": {},
"editor.formatOnType": true,
"dotnet.server.useOmnisharp": true,
"security.workspace.trust.untrustedFiles": "open",
"eslint.codeActionsOnSave.rules": null,
"eslint.execArgv": null,
"editor.indentSize": "tabSize",
"git.openRepositoryInParentFolders": "never",
"diffEditor.ignoreTrimWhitespace": false,
"claudeCode.selectedModel": "haiku",
"vue3snippets.endOfLine": "crlf",
"prettier.endOfLine": "crlf",
"eslint.codeActionsOnSave.options": {}
}
3778 | 7