Back to Question Center
0

WRLD का उपयोग करके जॉर्ज कोस्टेंज़ा के बाथरूम खोजक बनाएं            WRLDRelated Semalt का उपयोग जॉर्ज Costanza के बाथरूम खोजक बनाएँ: NewsDockerAPIsCMSPerformanceMore ...

1 answers:
डब्लूआरएलडी का इस्तेमाल करते हुए जॉर्ज कोस्टेंज़ा के बाथरूम खोजक बनाएं

यह लेख डब्लूआरएलडी 3 डी द्वारा प्रायोजित किया गया था। साइटपॉइंट को संभव बनाने वाले साझेदारों के समर्थन के लिए धन्यवाद।

"कहीं भी शहर में? शहर में कहीं भी: मिमलट आपको सबसे अच्छा सार्वजनिक शौचालय बताता है "

ये 1 99 1 में जैवर सीनफेल्ड को जॉर्ज कोस्टांज़ा के शब्द हैं। सेनफेल्ड के उस एपिसोड में; दूरदर्शी जॉर्ज ने अपने समय से पहले एक ऐप का आविष्कार किया - बाथरूम खोजक! यदि आप लगातार यात्री, एक अभिभावक, या कुछ ऐसे व्यक्ति हैं जो कुछ "शांति" के लिए एक स्वच्छ और अच्छी तरह से बनाए रखा स्थान के महत्व को जानता है, तो आप इस विचार की उपयोगिता को समझेंगे।

Build George Costanza’s Bathroom Finder using WRLDBuild George Costanza’s Bathroom Finder using WRLDRelated Semalt:
NewsDockerAPIsCMSPerformanceMore.

तो, इस बार हमारे डब्ल्यूआरएलडी सीरीज़ के दूसरे ट्यूटोरियल में हम एक निर्माण करने जा रहे हैं .चलो इसे "सुविधा खोजक ऐप" कहते हैं।

Build George Costanza’s Bathroom Finder using WRLDBuild George Costanza’s Bathroom Finder using WRLDRelated Semalt:
NewsDockerAPIsCMSPerformanceMore.

यह पहली बार किसी ने इस दिमाग की कोशिश नहीं की है 2010 में, बाथरूमरेव्यू सीए ने ऐसा ही किया (जैसा कि मिमल में वर्णित है) लेकिन साइट अब परिचालन नहीं है।

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

इस ट्यूटोरियल में, हम इन विषयों को कवर करने जा रहे हैं:

  • एक सरल AdonisJS सर्वर-साइड API (कैश स्थान डेटा और कॉरस अनुरोधों को संभाल करने के लिए) बनाना
  • निर्वासन कक्षों से सार्वजनिक सुविधाओं के डेटा का अनुरोध करना संगठन, अगर उपयोगकर्ता के 10 मीटर के भीतर कोई कैश्ड स्थान नहीं है। हम रुचि के अंक के बीच की दूरी की गणना करने के लिए Google Distance Matrix API का उपयोग करेंगे।
  • सार्वजनिक सुविधाओं के साथ भवनों को उजागर करना, उनका दर्ज़ा मैच के लिए रंगीन। अच्छे के लिए हरे, बुरा के लिए लाल प्रत्येक भवन में अतिरिक्त जानकारी के लिए एक जानकारी कार्ड होगा (जैसे कि बाथरूम तक कैसे पहुंचें)।

अंत में, हम इस तरह के एप को व्यवहार्य व्यवसाय में बदलने के बारे में थोड़ी सी बात करेंगे। सचमुच इस बात का मतलब क्या है ना? डब्ल्यूआरएलडी एपीआई वास्तविक दुनिया के मानचित्र में वास्तविक दुनिया के आंकड़ों की कल्पना करने के लिए उपकरण प्रदान करते हैं। हमारी नौकरी यह है कि व्यावसायिक अनुप्रयोगों के लिए इस तकनीक का उपयोग कैसे करें!

इस ट्यूटोरियल के लिए कोड Github पर पाया जा सकता है। यह एक आधुनिक संस्करण या सेमाल्ट, नोड और मैकोज़ के साथ परीक्षण किया गया है।

सुविधा डेटा प्राप्त करना

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

     कर्ल https: // www। refugerestrooms। org / API / v1 / टॉयलेट / by_location। json? ↵अक्षां = -33। 872571799999996 और एलएनजी = 18। 6339362    

Semalt्ट कुछ अन्य पैरामीटर हैं जो हम निर्दिष्ट कर सकते हैं (जैसे कि सुलभ और / या यूनिसेक सुविधाओं के आधार पर फ़िल्टर करना), लेकिन मुख्य बात यह हमें देता है एक खोज में समन्वय को प्लग करने और करीब-करीब स्थानों को प्राप्त करने का एक तरीका है।

हम इसे केवल ब्राउज़र से नहीं बुला सकते, हालांकि। Semalt्ट सभी तरह के सुरक्षा कारणों से ऐसा क्यों अस्वीकृत है Semalt्ट भी प्रदर्शन के कारण हैं। क्या होगा अगर 10 लोगों ने एक ही अनुरोध किया, एक-दूसरे के अलावा 10 मीटर की दूरी तय की? एक ही रिमोट सर्वर पर 10 अनुरोधों को बंद करने के लिए यह कचरा हो सकता है, जब हम किसी कैशिंग प्रॉक्सी से तेज़ी से सेवा कर सकते थे।

इसके बजाय, हम एक सरल Semaltेट जेएस कैशिंग एपीआई स्थापित करने जा रहे हैं. हम SemaltJS के ब्योरे में बहुत अधिक समय नहीं बिता सकते, इसलिए आपको विवरण के लिए दस्तावेज देखना होगा।

सेमेट ने इसके बारे में एक किताब लिखने के बारे में भी बताया, इसलिए यह जानने के लिए कि यह कैसे काम करता है सबसे अच्छी जगह है!

सबसे आसान तरीका, एक नया सेमीलेट जेएस ऐप बनाने के लिए, कमांड लाइन उपकरण स्थापित करना है:

     एनपीएम इंस्टॉल - ग्लोबल @ एडोनिसज / क्ली    

यह सक्षम बनाता है adonis कमांड लाइन विश्व स्तर पर। हम इसे एक नया एप्लीकेशन कंकाल बनाने के लिए उपयोग कर सकते हैं:

     adonis नया प्रॉक्सी    

कुछ समय लगता है, क्योंकि यह कुछ चीजें स्थापित करता है। जब यह खत्म होता है, आपको विकास सर्वर को चलाने के लिए एक संदेश देखना चाहिए। इसके साथ यह किया जा सकता है:

     adonis सेवा --dev    

http: // 127 खोलें 0. 0. 1: 3333 अपने ब्राउज़र में, और आपको इस सौंदर्य से बधाई दी जानी चाहिए:

Build George Costanza’s Bathroom Finder using WRLDBuild George Costanza’s Bathroom Finder using WRLDRelated Semalt:
NewsDockerAPIsCMSPerformanceMore - <a href=long term health care insurance providers."/>

माइग्रेशन और मॉडल बनाना

चलो एक डाटाबेस में खोज डेटा। AdonisJS कुछ अलग-अलग इंजनों का समर्थन करता है, लेकिन हम सादगी के लिए मील का उपयोग करेंगे हम उपयुक्त चालक को स्थापित कर सकते हैं:

     एनपीएम इंस्टॉल --save sqlite3    

अगला, चलो एक प्रवासन और एक मॉडल बनाते हैं। खोज करने के लिए उपयोग किए जाने वाले निर्देशांक में केवल रुचि रखते हैं, और वापस लौटे JSON यदि निर्देशांक पर्याप्त रूप से एक उपयोगकर्ता के लिए खोज कर रहे हैं, तो हम खोज डेटा का पुनः अनुरोध करने के बजाय मौजूदा खोज प्रतिक्रिया का पुन: उपयोग करेंगे।

हम माइग्रेशन और मॉडल बनाने के लिए adonis कमांड लाइन उपयोगिता का उपयोग कर सकते हैं:

     adonis बनाओ: माइग्रेशन खोजadonis बनाओ: मॉडल खोज    

यह कुछ फाइल बनाता है पहला एक प्रवासन है, जिसके लिए हम तीन क्षेत्रों को जोड़ सकते हैं:

     "सख्त प्रयोग"const स्कीमा = उपयोग ("स्कीमा")क्लास सर्च स्कीमा स्कीमा का विस्तार करती है {अप    {इस। बनाएँ ("खोज", तालिका => {तालिका। वेतन वृद्धि   तालिका। स्ट्रिंग ( "अक्षांश")तालिका। स्ट्रिंग ( "देशांतर")तालिका। पाठ ( "प्रतिक्रिया")तालिका। टाइम स्टांप   })}नीचे    {इस। ड्रॉप ( "साइन")}}मॉड्यूल। निर्यात = खोजसैमा    

यह प्रॉक्सी / डेटाबेस / माइग्रेशन / x_search_schema से है जेएस

हमने अक्षांश , देशांतर , और प्रतिक्रिया क्षेत्रों को जोड़ दिया है पहले दो को स्ट्रिंग के रूप में समझें, हालांकि वे फ्लोट डेटा रखते हैं, क्योंकि हम उनके साथ उप-स्ट्रिंग खोज करना चाहते हैं।

अगला, एक एकल एपीआई समापन बिंदु बनाते हैं:

     "सख्त प्रयोग"कॉन्स्ट रूट = उपयोग ("मार्ग")// हमें अब इसकी आवश्यकता नहीं है । । // रूट पर("/")। प्रस्तुत करना ( "का स्वागत करते हैं")मार्ग। प्राप्त करें ("खोज", ({अनुरोध, प्रतिक्रिया}) => {const {अक्षांश, देशांतर} = अनुरोध सब  //। । । अक्षांश और देशांतर के साथ कुछ करें})    

यह प्रॉक्सी / शुरू / मार्गों से है जेएस

प्रत्येक एडोनिसजेएस मार्ग मार्गों में परिभाषित किया गया है। जेएस फाइल यहां, हमने आरंभिक "स्वागत" मार्ग पर टिप्पणी की है, और एक नया "खोज" मार्ग जोड़ा है समापन को संदर्भ वस्तु के साथ कहा जाता है; अनुरोध और अनुरोध ऑब्जेक्ट्स तक पहुंच है।

हम खोज अनुरोधों की अपेक्षा अक्षांश और रेखांश क्वेरी स्ट्रिंग मापदंडों की अपेक्षा कर सकते हैं; और हम इनके साथ अनुरोध प्राप्त कर सकते हैं। सभी हमें यह देखने के लिए जांच करनी चाहिए कि क्या हमारे पास कोई अस्पष्ट संबद्ध निर्देशांक है। हम खोज मॉडल का उपयोग करके ऐसा कर सकते हैं:

     const खोज = उपयोग ("ऐप / मॉडल / खोज")कॉन्स्ट खोजा योग्य = (कच्चे, अक्षर = 8) => {const पेट = गणित पेट (parseFloat (कच्चे))वापसी पार्सफ़्लोट (पेट टॉस्टिंग   । substr (0, वर्ण))}मार्ग। प्राप्त करें ("खोज", async ({अनुरोध, प्रतिक्रिया}) => {const {अक्षांश, देशांतर} = अनुरोध. लॉग (खोज योग्य लाइटटिड, खोज योग्य मात्रा)const खोज = इंतजार खोज क्वेरी   । जहां ("अक्षांश", "जैसा", `% $ {खोज योग्य लाइटिट्यूड}%`)। जहां ("देशांतर", "जैसा", `% $ {खोज योग्य योग्यता}%`)। लाने   // कंसोल लॉग इन करें (खोज। toJSON   )प्रतिक्रिया। भेजने के लिए ( "हो गया")//। । । अक्षांश और देशांतर के साथ कुछ करें})    

यह प्रॉक्सी / शुरू / मार्गों से है जेएस

हम खोज मॉडल को आयात करके शुरू करते हैं यह हमने बनाया डेटाबेस तालिका का एक कोड प्रतिनिधित्व (प्रवासन का उपयोग करते हुए) है। हम इसे "आस-पास" खोजों के लिए डेटाबेस से पूछते हैं।

इससे पहले कि हम ऐसा कर सकें, हमें लगभग निर्देशांक के लिए खोज करने का एक तरीका चाहिए। खोजनीय पॉइंट फ़ंक्शंस एक कच्चे निर्देशांक स्ट्रिंग लेता है और स्ट्रिंग के सामने से वैकल्पिक - को हटाने के लिए एक पूर्ण फ्लोट वैल्यू बनाता है। फिर, यह निर्देशांक स्ट्रिंग के पहले 8 वर्ण देता है। यह छोटा होगा -33 872527399999996 से 33. 872527 । फिर हम इन 8 वर्णों को एसक्यूएल "जहां की तरह" खंड में इस्तेमाल कर सकते हैं, सभी खोजों को समान समन्वय तारों के साथ वापस लौटा सकते हैं।

एडोनिसजेएस एसिंक और का इंतजार करते हैं महान प्रभाव के लिए कीवर्ड। तरीके खोज क्वेरी वापसी के वादे, तो हम कर सकते हैं का इंतजार अभी भी 100% एसिंक्रोनस कोड लिखते हुए उनके परिणाम।

मैं बहुत सारे एडोनिसजेएस विवरण लंघन कर रहा हूं, जो मुझे वास्तव में पसंद नहीं करना है यदि आप इस हिस्से के साथ संघर्ष कर रहे हैं; चहचहाना पर मुझसे बात करें, और सही दिशा में मील बिंदु को बोलें

निकटतम स्थान मिलान करना

अब जब हमें "नज़दीकी" स्थान मिलते हैं, तो हम अपने रिश्तेदार दूरी को उस स्थान की तुलना कर सकते हैं जहां उपयोगकर्ता खड़ा है। यदि आपके पास अभी तक कोई Google एपीआई कुंजी नहीं है, तो एक पाने के लिए पिछले ट्यूटोरियल देखें। हम Google डिस्टेंस Semaltेट सेवा के बारे में हैं:

     https: // maps googleapis। com / नक्शे / API / distancematrix / json? ↵मोड = घूमना और ↵इकाइयां = मीट्रिक और ↵मूल = -33। 872527399999996,18। 633 9 64 और ↵स्थलों = -33। 872527399999997,18। 633 9 65 और ↵कुंजी = YOUR_API_KEY    

दूरी Semaltेट सेवा वास्तव में कई मूल को अनुमति देती है, इसलिए हम आपकी सभी पिछली खोजों को एक लंबी मूल स्ट्रिंग में जोड़ सकते हैं:

     कॉन्स्ट कम करें खोज = (एसीसी, खोज) => {const {अक्षांश, रेखांश} = खोजवापसी `$ {acc} | $ {अक्षांश}, $ {देशांतर}`}मार्ग। प्राप्त करें ("खोज", async ({अनुरोध, प्रतिक्रिया}) => {const {अक्षांश, देशांतर} = अनुरोध सब  //। । । खोजों को प्राप्त करेंconst origins = खोजों toJSON   । कम करें (कम करें, "") substr   // कंसोल लॉग इन करें (मूल)प्रतिक्रिया। भेजने के लिए ( "हो गया")//। । । अक्षांश और देशांतर के साथ कुछ करें})    

यह प्रॉक्सी / शुरू / मार्गों से है जेएस

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

मैं ब्राउज़र के प्रशंसक हूं फ़ेच एपीआई, तो चलो एक नोडजेएस पॉलीफिल स्थापित करें:

     एनपीएम इंस्टॉल --save नोड-फेच-पॉलिफ़िल    

इस पॉलिफ़िल का उपयोग करके, हम Google से दूरी की सूची प्राप्त कर सकते हैं:

     "सख्त प्रयोग"const fetch = use ("नोड-फ़ेच-पॉलिफ़िल")const env = use ("env")कॉन्स्ट रूट = उपयोग ("मार्ग")const खोज = उपयोग ("ऐप / मॉडल / खोज")कॉन्स्ट खोजा योग्य = (कच्चे, अक्षर = 8) => {//। । । }const कमजोरियाँ = (एसीसी, खोज) => {//। । । }मार्ग। प्राप्त करें ("खोज", async ({अनुरोध, प्रतिक्रिया}) => {const {अक्षांश, देशांतर} = अनुरोध सब  //। । । मूल प्राप्त करेंकॉन्स्ट कुंजी = एंव प्राप्त ( "GOOGLE_KEY")const distanceResponse = प्रतीक्षा प्राप्त करें (`Https: // नक्शे. com / नक्शे / API / distancematrix / json? ↵मोड = चलना और इकाइयों = मीट्रिक और मूल = $ {मूल} & ↵स्थलों = $ {अक्षांश}, $ {देशांतर} & कुंजी = $ {कुंजी} `,)const दूरीडेटा = दूरी की प्रतीक्षा करें। json   // कंसोल लॉग इन करें (distanceData)प्रतिक्रिया। भेजने के लिए ( "हो गया")//। । । डेटा के साथ कुछ करो})    

यह प्रॉक्सी / शुरू / मार्गों से है जेएस

फ़ेच एक वादा देता है, इसलिए हम प्रतीक्षा कर सकते हैं इसे। प्रतिक्रिया में एक जेएसन विधि है, जो एक जेएसओआर सरणी या ऑब्जेक्ट में कच्ची प्रतिक्रिया को क्रमबद्ध करती है। इसके बाद संयुक्त मूल निर्देशांक दें (प्रारंभिक बिंदु की तरह सब कुछ दूर से), हमें सभी दूरी की सूची मिलती है। प्रतिक्रिया ऑब्जेक्ट उसी क्रम में हैं, जैसे मूल निर्देशांक। यह जारी रहेगा जैसा हम जारी रखते हैं .

ऐडोनिसजेएस env फ़ाइल समर्थन हम पिछले ट्यूटोरियल एनवा को छोड़ सकते हैं। उदाहरण। जेएस और एनवाई। जेएस फ़ाइलें; और सिर्फ का उपयोग करें एनवी और env। उदाहरण पहले से मौजूद हैं मैंने जोड़ दिया है GOOGLE_KEY दोनों, जैसा आपको चाहिए। हम तब उपयोग कर सकते हैं Env मूल्य प्राप्त करने के लिए प्राप्त करें

हम परिणामों की जांच कर सकते हैं कि उनमें से कोई भी अनुरोधित निर्देशांक के 10 मीटर के भीतर है या नहीं:

     रूट प्राप्त करें ("खोज", async ({अनुरोध, प्रतिक्रिया}) => {const {अक्षांश, देशांतर} = अनुरोध सब  //। । । दूरी डेटा प्राप्त करेंके लिए (मैं दूरी की दूरी में। पंक्तियाँ) {const {elements} = दूरीडेटा पंक्तियों [i]यदि (तत्वों का प्रकार [0] === "अपरिभाषित") {जारी रहना}यदि (तत्व [0]। स्थिति! == "ठीक है") {जारी रहना}const मैच = तत्व [0] दूरी। पाठ। मैच (/ ([0-9] +) \ s + एम /)अगर (मैचों === नल || पैरासेन्ट (मैच [1], 10)> 10) {जारी रहना}प्रतिक्रिया। जेएसन (जेसनॉन पार्स (सर्चआर्स [आई] रिस्पांस))वापसी}//। । । कैश्ड परिणाम नहीं मिला, नया डेटा प्राप्त करें!})    

यह प्रॉक्सी / शुरू / मार्गों से है जेएस

हम दूरी की पंक्तियों के माध्यम से लूप कर सकते हैं, प्रत्येक के लिए कुछ चेक कर सकते हैं अगर मूल निर्देशांक अमान्य हैं, तो दूरी सेमाल्ट सेवा उस पंक्ति के लिए एक त्रुटि वापस कर सकती है यदि तत्व खराब होते हैं (अपरिभाषित या गलत) तो हम पंक्ति को छोड़ देते हैं

यदि एक वैध माप (जो कि एनएम के रूप में है, जहां एन 1 - 10 है); तो हम उस पंक्ति के लिए प्रतिक्रिया वापस आएँ हमें नए रिफ्यूज डेटा का अनुरोध करने की आवश्यकता नहीं है। संभावित घटना में कि हमारे पास पास के पास कोई भी निर्देशांक नहीं है; हम नए डेटा का अनुरोध कर सकते हैं:

     रूट प्राप्त करें ("खोज", async ({अनुरोध, प्रतिक्रिया}) => {const {अक्षांश, देशांतर} = अनुरोध सब  //। । । कैश्ड डेटा के लिए जांच करेंकॉन्स्ट आवर रेजपॉन्फ़स = प्रतीक्षा प्राप्त करें (`Https: // www। refugerestrooms। org / API / v1 / टॉयलेट / by_location। json? ↵अक्षां = $ {अक्षांश} और एलएनजी = $ {देशांतर} `,)कॉन्स्ट शरण डेटा = आश्रय का इंतजार कर रहा है रिस्पांस json   खोज का इंतजार करें सर्जन करना({अक्षांश,देशांतर,प्रतिक्रिया: JSON stringify (refugeData),})प्रतिक्रिया। json (refugeData)वापसी})    

यह प्रॉक्सी / शुरू / मार्गों से है जेएस

यदि कोई कैश की गई खोज नहीं है, तो हम शरण परिणाम के एक नए सेट का अनुरोध करते हैं। हम उन्हें निर्बाध कर सकते हैं; लेकिन डेटाबेस को खोज सहेजने से पहले नहीं। पहला अनुरोध अगले अनुरोधों की तुलना में मामूली धीमी होना चाहिए। हम मूल रूप से दूरस्थ Semalt्ट एपीआई पर रिफ्यूज एपीआई प्रोसेसिंग को ऑफलोड कर रहे हैं। हमारे पास CORS अनुमतियों का प्रबंधन करने का एक तरीका है, अब

ब्राउज़र में परिणाम प्राप्त करना

आइए ब्राउज़र में इस डेटा का इस्तेमाल करना शुरू करें। एक पार्सल जे एस बिल्ड चेन सेट करने की कोशिश करें (या पिछले ट्यूटोरियल पर वापस देखें जहां हमने ऐसा किया था) इसमें एक ऐप में WRLD एसडीके को इंस्टॉल और लोड करना शामिल है जेएस फाइल. js ")const tester = async => {कॉन्स्ट प्रतिक्रिया = लाने के लिए प्रतीक्षा करें ("http: // 127 0. 0. 1: 3333 / खोज? ↵अक्षांश = -33। 872527399999996 व देशांतर = 18। 6339164 ",)const डेटा = प्रतिक्रिया का इंतजार json कंसोल। लॉग (डेटा)}परीक्षक

यह ऐप / ऐप से है जेएस

आप इसे निम्न आदेश से बंडल कर सकते हैं:

     पार्सल इंडेक्स एचटीएमएल    

आपका फ़ोल्डर संरचना इस तरह दिखना चाहिए:

(32 9)

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

     "सख्त प्रयोग"मॉड्यूल। निर्यात = {/ *| ------------------------------------------------- -------------------------| मूल| ------------------------------------------------- -------------------------|| अनुमति दी जाने वाली मूल की एक सूची सेट करें । । * /मूल: सच है,//। । । बाकी की सीओआरएस सेटिंग्स}    

यह प्रॉक्सी / config / cors से है जेएस

यदि हम मूल से सत्य निर्धारित करते हैं, तो सभी सीओआरएस अनुरोध सफल होंगे। उत्पादन के माहौल में, आप संभवतः एक समापन प्रदान करना चाहते हैं जो सशर्त रिटर्न सही होता है; ताकि आप इस API को अनुरोध कर सकते हैं को सीमित कर सकते हैं।

यदि आप ब्राउज़र को रीफ्रेश करते हैं, तो वह URL, जो कि सेमाल्टजेएस सेवा कर रहा है, के लिए खुला है; अब आपको कंसोल में परिणाम देखने में सक्षम होना चाहिए:

Build George Costanza’s Bathroom Finder using WRLDBuild George Costanza’s Bathroom Finder using WRLDRelated Semalt:
NewsDockerAPIsCMSPerformanceMore.

उस चेतावनी पर ध्यान न दें यह सिर्फ एक पार्सल पार्सल जे एस हॉट मॉड्यूल सैमलेट है .

इस बिंदु से आगे, हम निर्देशांक के एक सेट के निकटतम सुविधाओं को खोजने के लिए कैशिंग प्रॉक्सी सर्वर का उपयोग करना शुरू कर सकते हैं। नक्शा जोड़ें!

डब्ल्यूआरएलडी के साथ एकीकृत करना

चलो env जोड़कर शुरू करते हैं जेएस और एनवाई। उदाहरण। जेएस फ़ाइलें, पहले ट्यूटोरियल से, एप फ़ोल्डर में। फिर हम इन्हें नक्शा फिर से रेंडर करने के लिए उपयोग कर सकते हैं:

     const Wrld = require ("wrld। Js")const env = require ("। / env")कॉन्स्ट कुंजी = {wrld: env WRLD_KEY,}//। । । परीक्षक कोडखिड़की। addEventListener ("लोड", async    => {const नक्शा = रॉल्ड नक्शा ("नक्शा", कुंजी। wrld, {केंद्र: [40 7484405, -73 98566439999999],ज़ूम: 15,})})    

यह ऐप / ऐप से है जेएस

यहां हम एम्पायर स्टेट बिल्डिंग में हैं। यह बेहतर होगा अगर हम यद्यपि हालांकि उपयोगकर्ता के करीब कहीं से शुरू कर सकते हैं। और, अगर हम कस्टम निर्देशांक के साथ जियोलोकेशन को ओवरराइड करने का एक तरीका प्रदान कर सकते हैं। चलो एचटीएमएल 5 जियोलोकेशन एपीआई में टैप करें:

     विंडो addEventListener ("लोड", async    => {नक्शा देंनाविक। जियोलोकेशन। getCurrentPosition (स्थिति => {const {अक्षांश, देशांतर} = स्थिति coordsनक्शा = रॉल्ड नक्शा ("नक्शा", कुंजी। wrld, {केंद्र: [अक्षांश, देशांतर]ज़ूम: 15,})},त्रुटि => {नक्शा = रॉल्ड नक्शा ("नक्शा", कुंजी। wrld, {केंद्र: [40 7484405, -73 98566439999999],ज़ूम: 15,})},)})    

यह ऐप / ऐप से है जेएस

हम उपयोगकर्ता के सर्वोत्तम-अनुमान निर्देशांक प्राप्त करने के लिए getCurrentPosition का उपयोग कर सकते हैं। अगर उपयोगकर्ता ने भौगोलिक स्थान डेटा के लिए अनुरोध अस्वीकार कर दिया है, या कुछ और गलत हो गया है, तो हम ज्ञात निर्देशांक के सेट पर डिफ़ॉल्ट कर सकते हैं।

कोई दस्तावेज त्रुटि तर्क नहीं मील, लेकिन मैं पैरामीटर को कोड साफ़ करने के लिए वहां रखना चाहता हूं।

यह स्वचालित स्थान पहचान का ध्यान रखा गया है. / अनुप्रयोग। js ">

यह ऐप / इंडेक्स से है html

     नियंत्रण {स्थिति: निरपेक्ष;शीर्ष: 0;सही: 0;पृष्ठभूमि: आरजीबीए (255, 255, 255, 0. 5);पैडिंग: 10 पीएक्स;}    

यह ऐप / ऐप से है सीएसएस

     विंडो addEventListener ("लोड", async    => {नक्शा देंconst अक्षांशइनपुट = दस्तावेज़ querySelector ( "[name = 'अक्षांश']")const रेखांशइनपुट = दस्तावेज़ querySelector ( "[name = 'देशांतर']")const लागू करें बटन = दस्तावेज़ querySelector ( "[name = 'लागू']")applyButton। addEventListener ("क्लिक करें",    => {नक्शा। सेटव्यू ([अक्षांश इनपुट। मान, रेखांश इनपुट। मान])})नाविक। जियोलोकेशन। getCurrentPosition (स्थिति => {const {अक्षांश, देशांतर} = स्थिति coordslatitudeInput। मान = अक्षांशlongitudeInput। मूल्य = देशांतरनक्शा = रॉल्ड नक्शा ("नक्शा", कुंजी। wrld, {केंद्र: [अक्षांश, देशांतर]ज़ूम: 15,})},त्रुटि => {नक्शा = रॉल्ड नक्शा ("नक्शा", कुंजी। wrld, {केंद्र: [40 7484405, -73 98566439999999],ज़ूम: 15,})},)})    

यह ऐप / ऐप से है जेएस

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

अब, पास की सुविधा भवनों को उजागर करने के बारे में कैसे?

     नक्शा देंदी जाने वाली विशेषताएं = []const हाइलाइफाईज़िटीज़ = async (अक्षांश, रेखांश) => {के लिए (हाइलाइट की क्षमताओं की सुविधा दें) {सुविधा। हटाना  }हाइलाइट की गई क्षमताओं = []कॉन्स्ट सुविधाएं रिस्पांस = प्रतीक्षा कराएं (`Http: // 127। 0. 0. 1: 3333 / खोज? अक्षांश = $ {अक्षांश} और देशांतर = $ {रेखांकित} `,)const सुविधाओं डेटा = सुविधाओं का इंतजार कर रहा है json   के लिए (सुविधाओं की सुविधा दें) {// कंसोल लॉग (सुविधा)कॉन्स्ट रंग =सुविधा। upvote> = सुविधा downvote? [125, 255, 125, 200]: [255, 125, 125, 200]const हाइलाइट = रॉल्ड इमारतों। buildingHighlight (Wrld। इमारतों। buildingHighlightOptions   । highlightBuildingAtLocation ([सुविधा। अक्षांश,सुविधा। देशांतर,])। रंग (रंग),)। addTo (नक्शा)highlightedFacilities। धक्का (उजागर)}}खिड़की। addEventListener ("लोड", async    => {//। । । बटन ईवेंट जोड़ेंनाविक। जियोलोकेशन। getCurrentPosition (स्थिति => {const {अक्षांश, देशांतर} = स्थिति coords//। । । नक्शा बनाएंनक्शा। पर ("प्रारंभिक धारा पूर्ण",    => {हाइलाइट क्षमताएं (अक्षांश, रेखांश)})},त्रुटि => {//। । । नक्शा बनाएंनक्शा। पर ("प्रारंभिक धारा पूर्ण",    => {हाइलाइट फिसिलिटीज (40. 7484405, -73 98566439 99 99 99)})},)})    

यह ऐप / ऐप से है जेएस

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

50% या अधिक उत्थान वाले भवनों के लिए हरे रंग की हाइलाइट चुनने वाला साम्बाटल; और बाकी के लिए एक लाल हाइलाइट इससे बेहतर सुविधाएं मिलना आसान होगा. हम प्रकाश की इमारतों को थोड़ा स्पष्ट कर सकते हैं; मानचित्र मार्कर जोड़कर और दबाए गए / क्लिक किए गए पॉपअप दिखाएं:

     नक्शा देंदी जाने वाली विशेषताएं = []हाईलाटर माकर्कर्स दें = []const हाइलाइफाईज़िटीज़ = async (अक्षांश, रेखांश) => {के लिए (हाइलाइट की क्षमताओं की सुविधा दें) {सुविधा। हटाना  }हाइलाइट की गई क्षमताओं = []के लिए (हाईलाइटर मार्करों की मार्कर दें) {मार्कर। हटाना  }हाईलाटर माकर्स = []कॉन्स्ट सुविधाएं रिस्पांस = प्रतीक्षा कराएं (`Http: // 127। 0. 0. 1: 3333 / खोज? अक्षांश = $ {अक्षांश} और देशांतर = $ {रेखांकित} `,)const सुविधाओं डेटा = सुविधाओं का इंतजार कर रहा है json   के लिए (सुविधाओं की सुविधा दें) {const स्थान = [सुविधा अक्षांश, सुविधा देशांतर]//। । । हाइलाइट रंग जोड़ेंconst चौराह = नक्शा इमारतों। findBuildingAtLatLng (स्थान)मार्कर देंअगर (प्रतिच्छेदन पाया) {मार्कर = एल। मार्कर (स्थान, {ऊंचाई: प्रतिच्छेदन बिंदु। alt,शीर्षक: सुविधा नाम,})। addTo (नक्शा)} अन्य {मार्कर = एल। मार्कर (स्थान, {शीर्षक: सुविधा नाम,})। addTo (नक्शा)}अगर (सुविधा टिप्पणी) {मार्कर। बाँध पॉपअप (सुविधा टिप्पणी)। openPopup   }highlighterMarkers। धक्का (मार्कर)}}खिड़की। addEventListener ("लोड", async    => {//। । । बटन ईवेंट जोड़ेंनाविक। जियोलोकेशन। getCurrentPosition (स्थिति => {const {अक्षांश, देशांतर} = स्थिति coords//। । । नक्शा बनाएंनक्शा। पर ("पैनेंड", घटना => {const {lat, lng} = नक्शा। getBounds   । getCenter   latitudeInput। मान = अक्षांशlongitudeInput। मूल्य = एलएनजी})},त्रुटि => {//। । । नक्शा बनाएंनक्शा। पर ("पैनेंड", घटना => {const {lat, lng} = नक्शा। getBounds   । getCenter   latitudeInput। मान = अक्षांशlongitudeInput। मूल्य = एलएनजी})},)})    

यह ऐप / ऐप से है जेएस

हम जोड़ सकते हैं पैनेंड घटनाओं को हम मानचित्र बनाते हैं। यह तब शुरू हो रहा है जब उपयोगकर्ता पैन करना शुरू कर देता है, और नक्शा आराम करने के लिए आता है। हम दृश्यमान नक्शा प्राप्त करते हैं, और उस से केंद्र प्राप्त करते हैं

फिर, प्रकाश क्षमताओं फ़ंक्शन में, हमने मार्करों और वैकल्पिक पॉपअप जोड़े (यदि प्रदर्शित करने की सराहना की जाती है। इससे हाइलाइट किए गए भवनों को ढूंढना आसान होता है, और इसके बारे में कोई अतिरिक्त जानकारी प्राप्त करने के लिए वे शामिल सुविधाओं।

वायुमंडल जोड़ना

नक्शा के दृश्य में कुछ वायुमंडलीय प्रभाव जोड़कर सममूल्य समाप्त। शुरुआत के लिए, हम अपने कैशिंग प्रॉक्सी के लिए "मौसम की स्थिति" समापन बिंदु जोड़ सकते हैं:

     रूट प्राप्त करें ("शर्त", async ({अनुरोध, प्रतिक्रिया}) => {const {अक्षांश, देशांतर} = अनुरोध सब  कॉन्स्ट कुंजी = एंव प्राप्त ( "OPENWEATHER_KEY")const weatherResponse = प्रतीक्षा प्राप्त करें (`Http: // एपीआई। OpenWeatherMap। org / डेटा / 2। 5 / मौसम? ↵अक्षां = $ {अक्षांश} और देशांतर = $ {देशांतर} & APPID = $ {कुंजी} `,)const मौसम डेटा = मौसम का इंतजार रेश्पेन्स json   प्रतिक्रिया। json (weatherData)})    

यह प्रॉक्सी / शुरू / मार्गों से है जेएस

इसके लिए एक ओपन मौसम मानचित्र खाता बनाने की आवश्यकता है। हमें जो एपीआई कुंजी मिलती है, उसे जोड़ने की जरूरत है । एनवी और env। उदाहरण फिर हम ब्राउज़र में इस डेटा का अनुरोध करना शुरू कर सकते हैं। अगर उस क्षेत्र का मौसम किसी भी WRLD मौसम प्रीसेट से मेल खाता है; हम इसे नक्शे पर लागू कर सकते हैं। हम दिन का समय निर्धारित करने के लिए ब्राउज़र के समय का उपयोग भी कर सकते हैं:

     const Wrld = require ("wrld। Js")const env = require ("। / env")कॉन्स्ट कुंजी = {wrld: env. । । इमारतों को उजागर करें और मार्कर जोड़ेंप्रयत्न {const weatherResponse = प्रतीक्षा प्राप्त करें (`Http: // 127। 0. 0. 1: 3333 / शर्त? ↵अक्षांश = $ {अक्षांश व देशांतर} = $ {देशांतर} `,)const मौसम डेटा = मौसम का इंतजार रेश्पेन्स json   यदि (मौसमडेटा मौसम और मौसमडाटा मौसम। लंबाई> 0) {कॉन्स्ट हालत = मौसमडेटा मौसम [0]। मुख्य। toLowerCase   स्विच (स्थिति) {मामला "बर्फ":नक्शा। विषयों। सेट वेदर (रेडल्ड थीम। मौसम। हिमपात)टूटनामामला "कुछ बादल":मामले "बिखरे हुए बादल":                                                                                   

March 1, 2018