Se você está envolvido no desenvolvimento de front-end, provavelmente conhece as seguintes mises-en-scenes: os termos do projeto estão diminuindo rapidamente, sua gerência ou o cliente, ou ambos, juntos querem ver com os olhos o aplicativo em funcionamento no momento, mesmo com dados falsos. Ao mesmo tempo, pode haver um fundo, mas é a camada de interação API com a frente que está faltando na palavra.
Então, recentemente, enfrentei uma situação dessas e estou desenvolvendo uma interface para angulares (pessoas sentadas em cadeiras levemente afagadas, alguém assentiu com compreensão).
Agora vou tentar a sério. Por um lado, a situação não é incomum e muitas soluções podem ser escolhidas.
Várias soluções vieram à mente:
- Dados no nível do componente do código fixo
- Codifique os dados no nível dos serviços do resolvedor, fixe-os nas rotas necessárias
- Dados codificados no nível do provedor de serviços de dados
- Api de liberação e, de acordo com os contratos acordados, retorna dados codificados
Mas qualquer uma dessas opções parecia uma muleta inesgotável, para cada uma das quais havia deficiências significativas.
- A primeira opção desapareceu imediatamente - uma solução não utilizada absolutamente inconveniente, à medida que o projeto se desenvolve, tudo terá que ser reescrito.
- Essa solução pode ocorrer, mas, novamente, a estrutura do projeto e a lógica dos componentes serão reescritas.
- Como opção possível, você pode até retornar dados de stub de forma assíncrona, simulando uma chamada de servidor, no entanto, como nas soluções anteriores para o problema, nossos interceptadores (se existirem, mas existem) ficarão sem trabalho e a simulação funcionará. com apoio fica incompleto.
- A última opção parecia bastante aceitável, sem os problemas das opções anteriores, mas eu não queria escrever código rígido no projeto de back-end simplesmente por razões de higiene.
Como resultado, outra opção foi escolhida: criar um servidor da Web separado, que retornaria dados de acordo com rotas e contratos, e definir uma configuração separada para a montagem e execução do angular. Acabou sendo fácil fazer as duas coisas.
Para implementar o servidor simulado,
express foi selecionado.
Vamos começar com isso.
Selecionamos o local em que queremos escrever o código para o servidor msk, por exemplo, no diretório mock-server ao lado do projeto ng.
Em seguida, você precisa inicializar o projeto e adicionar o pacote com o express.
npm init
npm install --save express
Em seguida, adicione um código que retornará dados para nós. Criamos o arquivo index.js, pegamos o código do primeiro tutorial.
const express = require("express"); const app = express(); app.get("/url", (req, res, next) => { res.json(["Tony", "Lisa", "Michael", "Ginger", "Food"]); }); app.listen(3000, () => { console.log("Server running on port 3000"); });
Iniciar o servidor
node index.js
Verifique com o carteiro:
Tudo está super, o servidor está funcionando. Agora vamos configurar uma das rotas, como se estivéssemos solicitando dados de uma API real. Digamos que precisamos de uma lista de todos os livros, preencha o arquivo books.json com livros
[ { "rn": 0, "id": "0", "name": "Jungle", "type": 0, "wells": 10042, "default": false, "hidden": false, "author": "Admin" }, { "rn": 1, "id": "1", "name": "Main", "type": 1, "wells": 156, "default": true, "hidden": false, "author": "User" } ]
E atualize o arquivo do aplicativo:
const express = require("express"); const app = express(); app.get("/api/book/", (req, res, next) => { const books = require('./books'); res.json(books); }); app.listen(3000, () => { console.log("Server running on port 3000"); });
E verifique:
Ótimo.
Agora vamos começar com o aplicativo angular.
Adicione a configuração que armazena o endereço na parte traseira aos arquivos environment / environment * .ts.
environment.ts:
export const environment = { production: false, backend: 'http://localhost:5000/' }
environment.prod.ts
export const environment = { production: true, backend: 'http://localhost:5000/' }
No modo normal, e no modo prod e em desenvolvimento, procuraremos a API do núcleo .net na porta 5000, conforme descrito acima. Em seguida, descrevemos a configuração para o retorno temporário
environment.mock.ts
export const environment = { production: false, backend: 'http://localhost:3000/' }
Aqui, como você pode ver, estamos procurando pela API na porta 3000, onde executaremos o Express.
Agora precisamos de um interceptador que direcione as chamadas de volta para o servidor correto, dependendo da configuração.
@Injectable() export class RequestInterceptor implements HttpInterceptor { baseUrl: string; constructor() { this.baseUrl = environment.backend; } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(this.modifyRequest(req)); } private modifyRequest = (req: HttpRequest<any>): HttpRequest<any> => { if (req.url.startsWith('api/')) { const url = this.baseUrl; req = req.clone({ url: url + req.url }); } return req; } }
Resta definir a nova configuração para montar e iniciar o aplicativo para funcionar com o servidor simulado.
Para fazer isso, precisamos ajustar um pouco o angular.json.
Na seção do seu projeto, arquiteto / construção / configurações, inclua uma nova configuração de construção simulada e descreva a substituição dos arquivos de ambiente para essa configuração. Também para o modo de veiculação, crie uma configuração simulada e especifique a opção de compilação desejada
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "your-project": { /*****/ "architect": { "build": { /*****/ "configurations": { "production": { /*****/ }, "mock": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.mock.ts" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "your-project:build" }, "configurations": { "production": { "browserTarget": "your-project:build:production" }, "mock": { "browserTarget": "your-project:build:mock" } } } }, /*****/ } } }
Isso é tudo, agora resta executar o projeto na configuração desejada
ng serve --configuration=mock
e verifique para onde voam as chamadas para trás:
Tudo está ótimo.
De fato, esse design ainda nos ajudará bastante quando forçarmos a integração e os testes e2e ao projeto. Vou tentar escrever sobre isso em um futuro próximo.