👨🏼‍🔧 🙆🏼 🦄 कोणीय: जब आपको एप्लिकेशन देखने की आवश्यकता होती है, लेकिन बैकएंड अभी तैयार नहीं है 👨🏾‍💼 👐🏻 📓

यदि आप फ्रंटएंड डेवलपमेंट में शामिल हैं, तो आप शायद निम्नलिखित मिसे-एन-सीन्स को जानते हैं: प्रोजेक्ट की शर्तें तेजी से सिकुड़ रही हैं, आपका प्रबंधन, या ग्राहक, या दोनों, एक साथ अपनी आंखों से काम कर रहे एप्लिकेशन को अभी देखना चाहते हैं, यहां तक कि फर्जी डेटा से भी। एक ही समय में, एक पीठ हो सकती है, लेकिन यह सामने वाले के साथ बातचीत की एपीआई परत है जो शब्द से बिल्कुल गायब है।

इसलिए, हाल ही में मुझे ऐसी स्थिति का सामना करना पड़ा, और मैं कोणीय के लिए एक दृश्य विकसित कर रहा हूं (आस-पास कुर्सियों पर बैठे लोगों ने सुस्त तरीके से, किसी ने समझदारी से सिर हिलाया)।

अब मैं इसे गंभीरता से आजमाऊंगा। एक ओर, स्थिति असामान्य नहीं है, और कई समाधानों को चुना जा सकता है।

कई समाधान दिमाग में आए:

हार्डकोड घटक-स्तरीय डेटा
रिज़ॉल्वर सेवाओं के स्तर पर हार्डकोड डेटा, उन्हें आवश्यक मार्गों पर पिन करें
डेटा सेवा प्रदाता स्तर पर हार्डकोड डेटा
फ्लश आपी, और, सहमत अनुबंध के अनुसार, हार्डकोड डेटा लौटाएं

लेकिन इनमें से कोई भी विकल्प एक अटूट बैसाखी था, जिसमें से प्रत्येक के लिए महत्वपूर्ण कमियां थीं।

पहला विकल्प तुरंत गायब हो गया - एक बिल्कुल असुविधाजनक अप्रयुक्त समाधान, जैसा कि परियोजना विकसित होती है, सब कुछ फिर से लिखना होगा।
यह समाधान हो सकता है, लेकिन फिर से, परियोजना की संरचना और घटकों के तर्क को फिर से लिखा जाएगा।
एक संभावित विकल्प, आप एक सर्वर कॉल का अनुकरण करके, अतुल्यकालिक रूप से स्टब डेटा भी वापस कर सकते हैं, हालांकि, समस्या के पिछले समाधानों के रूप में, हमारे इंटरसेप्टर (यदि वे मौजूद हैं, लेकिन वे मौजूद हैं) काम से बाहर हो जाएंगे, और यह पता चलता है कि काम की नकल समर्थन अधूरा हो जाता है।
पिछला विकल्प काफी स्वीकार्य लग रहा था, जो पिछले विकल्प थे, उन समस्याओं से रहित थे, लेकिन मैं हाईजेनिक कारणों से बैकएंड प्रोजेक्ट में हार्डकोड नहीं लिखना चाहता था।

नतीजतन, एक और विकल्प चुना गया: एक अलग वेब सर्वर बढ़ाने के लिए, जो मार्गों और अनुबंधों के अनुसार डेटा लौटाएगा, और कोणीय के संयोजन और निष्पादन के लिए एक अलग कॉन्फ़िगरेशन कॉन्फ़िगर करेगा। यह दोनों करना आसान हो गया।

मॉक सर्वर को लागू करने के लिए, एक्सप्रेस का चयन किया गया था।

चलो इसके साथ शुरू करते हैं।

हम उस जगह का चयन करते हैं जहां हम msk सर्वर के लिए कोड लिखना चाहते हैं, उदाहरण के लिए, एनजी प्रोजेक्ट के बगल में मॉक-सर्वर डायरेक्टरी में।

इसके बाद, आपको प्रोजेक्ट को इनिशियलाइज़ करना होगा और एक्सप्रेस के साथ पैकेज जोड़ना होगा।

npm init

 npm install --save express

अगला, एक कोड जोड़ें जो हमारे लिए डेटा लौटाएगा। हम index.js फ़ाइल बनाते हैं, हम पहले ट्यूटोरियल से कोड लेते हैं।

 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"); });

सर्वर शुरू करें

 node index.js

डाकिया से जाँच करें:

सब कुछ सुपर है, सर्वर काम कर रहा है। अब हम किसी एक मार्ग को कॉन्फ़िगर करते हैं, जैसे कि हम वास्तविक एपीआई से डेटा का अनुरोध कर रहे हैं। मान लीजिए कि हमें सभी पुस्तकों की सूची चाहिए, पुस्तकों के साथ books.json फ़ाइल भरें

 [ { "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" } ]

और एप्लिकेशन फ़ाइल को अपडेट करें:

 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"); });

और जांचें:

बहुत बढ़िया।
अब कोणीय ऐप के साथ शुरू करते हैं।
कॉन्फ़िगरेशन जोड़ें जो पते को वापस वातावरण / वातावरण * .ts फ़ाइलों में संग्रहीत करता है।
environment.ts:

 export const environment = { production: false, backend: 'http://localhost:5000/' }

environment.prod.ts

 export const environment = { production: true, backend: 'http://localhost:5000/' }

सामान्य मोड में, और ठेस और विकास मोड में, हम पोर्ट 5000 पर .net कोर एपीआई की खोज करेंगे, जैसा कि ऊपर वर्णित है। अगला, हम अस्थायी बैक के लिए कॉन्फ़िगरेशन का वर्णन करते हैं
environment.mock.ts

 export const environment = { production: false, backend: 'http://localhost:3000/' }

यहां, जैसा कि आप देख सकते हैं, हम पोर्ट 3000 पर एपीआई की तलाश कर रहे हैं, जहां हम एक्सप्रेस चलाएंगे।

अब हमें एक इंटरसेप्टर की आवश्यकता है जो कॉन्फ़िगरेशन के आधार पर सही सर्वर पर वापस कॉल को निर्देशित करेगा।

 @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; } }

यह मॉक सर्वर के साथ काम करने के लिए एप्लिकेशन को असेंबल करने और लॉन्च करने के लिए नए कॉन्फ़िगरेशन को कॉन्फ़िगर करने के लिए रहता है।

ऐसा करने के लिए, हमें angular.json को थोड़ा मोड़ना होगा।

अपनी परियोजना के अनुभाग में, आर्किटेक्ट / बिल्ड / कॉन्फ़िगरेशन, एक नया मॉक बिल्ड कॉन्फ़िगरेशन जोड़ें, और इस कॉन्फ़िगरेशन के लिए पर्यावरण फ़ाइलों के प्रतिस्थापन का वर्णन करें। सेवा मोड के लिए, एक मॉक कॉन्फ़िगरेशन बनाएं और वांछित बिल्ड विकल्प निर्दिष्ट करें

 { "$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" } } } }, /*****/ } } }

यह सब है, अब यह वांछित विन्यास में परियोजना को चलाने के लिए बना हुआ है

 ng serve --configuration=mock

और जाँच करें कि कॉल बैक बैक फ्लाई कहां है:

सब कुछ महान है।

वास्तव में, यह डिजाइन अभी भी हमें बहुत मदद करेगा जब हम परियोजना के लिए एकीकरण और e2e परीक्षण को कसते हैं। मैं निकट भविष्य में इसके बारे में लिखने की कोशिश करूंगा।

कोणीय: जब आपको एप्लिकेशन देखने की आवश्यकता होती है, लेकिन बैकएंड अभी तैयार नहीं है

More articles: