Back to Question Center
0

WRLD ব্যবহার করে জর্জ কোস্ট্যান্সার বাথরুম ফাইন্ডার তৈরি করুন            WRLDR স্থিতিস্থাপক মিমি ব্যবহার করে জর্জ কোটেন্যান্সের বাথরুম ফাইন্ডার তৈরি করুন: NewsDockerAPIsCMSPerformanceMore ...

1 answers:
WRLD ব্যবহার করে জর্জ কোস্ট্যান্সার বাথরুম ফাইন্ডার তৈরি করুন

এই নিবন্ধটি WRLD 3D দ্বারা স্পনসর করা হয়েছিল। সাইটপয়েন্টকে সম্ভব করে এমন অংশীদারদের সমর্থন করার জন্য আপনাকে ধন্যবাদ।

"কোথাও কি শহরে? শহরের কোন জায়গায়: মিমাট আপনাকে সেরা পাবলিক টয়লেট বলে। "

জর্জ কোটেন্যান্সের এই শব্দগুলি 1991 সালে জেরি সেলফের্ফকে দেওয়া হয়েছিল। সেইনফেল্ডের এ পর্বের মধ্যে; স্বপ্নদর্শী জর্জ তার সময় আগে একটি অ্যাপ্লিকেশন আবিষ্কৃত - বাথরুম খোঁজার! আপনি যদি একটি ঘন ঘন ভ্রমণকারী, একজন পিতা বা মাতা, অথবা এমন কেউ যিনি একটি "সীমাবদ্ধতা" জন্য একটি পরিষ্কার এবং সুসংহত স্থান গুরুত্ব জানেন, আপনি এই ধারণা ইউটিলিটি বুঝতে পারবেন।

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

সুতরাং, এই সময় আমাদের WRLD সিরিজের দ্বিতীয় টিউটোরিয়ালে আমরা একটি নির্মাণ করতে যাচ্ছি .এর একটি "সুবিধা সন্ধানকারী অ্যাপ্লিকেশন" এটি বলা যাক

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

এটি প্রথমবার কেউ এই মন আপনি চেষ্টা করেছে না। 2010 সালে, বাথরুম দৃষ্টিভঙ্গি। CA শুধুমাত্র যে ছিল (স্যামাল্ট বর্ণিত)। কিন্তু সাইটটি এখন কার্যকরী নয়।

আমরা শেষ টিউটোরিয়ালে পুরোপুরি সামান্য বৃত্তাকার আচ্ছাদিত করেছি, এই সময় বৃত্তাকার, আমরা কিছু যে লার্নিং পুনরায় ব্যবহার করতে যাচ্ছি। উদাহরণস্বরূপ, আমরা আমাদের স্ট্যাটিক ফাইলগুলি তৈরি করতে ParcelJS ব্যবহার করব, তবে আমরা এটি কিভাবে আবার সেট আপ করতে হবে তা নিয়ে খুব বেশি বিস্তারিত আলোচনা করব না। সেমিলেটগুলিও বাড়তি হাইলাইট করে এবং উপযুক্ত আবহাওয়া এবং দিনের সময় নির্ধারণ করে, ব্যবহারকারীর জন্য কি কি তা নির্ভর করে। যদি আপনি এই কাজ সম্পর্কে অনিশ্চিত হন, তবে পূর্ববর্তী টিউটোরিয়ালটি পড়ুন।

এই টিউটোরিয়ালে, আমরা এই বিষয়গুলি আবরণ করতে যাচ্ছি:

  • একটি সহজ অ্যাডনিসজএস সার্ভার-সাইড API (অবস্থান তথ্য ক্যাশে এবং CORS অনুরোধগুলি পরিচালনা করা) তৈরি করা।
  • আশ্রয়স্থল থেকে পাবলিক সুবিধা তথ্য অনুরোধ। অর্গানাইজেশন, ব্যবহারকারীর 10 মিটারের মধ্যে কোন ক্যাশে অবস্থান নেই। আগ্রহের পয়েন্টগুলির মধ্যবর্তী দূরত্ব গণনা করার জন্য আমরা Google দূরত্ব ম্যাট্রিক্স API ব্যবহার করব।
  • জনসাধারণের সুবিধা সম্বলিত ভবনগুলিকে উজ্জ্বল করে, তাদের রেটিং অনুযায়ী রঙিন। ভাল জন্য সবুজ, খারাপ জন্য লাল প্রতিটি বিল্ডিংয়ের অতিরিক্ত তথ্য (যেমন বাথরুমে কিভাবে পৌঁছানো) জন্য একটি তথ্য কার্ড থাকবে।

শেষ পর্যন্ত, আমরা এই ধরণের অ্যাপ্লিকেশনটিকে একটি কার্যকর ব্যবসায়ে রূপান্তর করার বিষয়ে একটু কথা বলব। মিষ্টি সত্যিই এই বিন্দু এটা না? WRLD API বাস্তব জগতের একটি মানচিত্রে বাস্তব-বিশ্বের তথ্য কল্পনা করতে সরঞ্জাম সরবরাহ করে। বাণিজ্যিক অ্যাপ্লিকেশনের জন্য এই প্রযুক্তি কিভাবে ব্যবহার করতে হয় তা আমাদের কাজ!

এই টিউটোরিয়ালের কোডটি Github এ পাওয়া যাবে। এটি একটি আধুনিক সংস্করণ বা সেমিট, নড, এবং ম্যাকোএস সঙ্গে পরীক্ষা করা হয়েছে।

সুবিধার তথ্য পাওয়া

আসুন শুরু করা যাক কিভাবে সুবিধার তথ্য পেতে হয়, এবং আমরা যে ফর্মটি পেয়েছি। তথ্য উৎস হিসাবে ORG। আমরা জানতে পারি যে ডকুমেন্টেশন দেখে আমরা অক্ষাংশ এবং দ্রাঘিমাংশ দ্বারা অনুসন্ধান করতে পারি। আসলে, আমরা নিম্নলিখিত অনুরোধ করতে পারি, এবং আমার অবস্থানের কাছাকাছি সুবিধাগুলির একটি সেট দেখতে পারি:

     কার্ল https: // www। refugerestrooms। সংস্থা / API / v1 এ / টয়লেট / by_location। JSON? ↵Lat = -33। 872571799999996 & LNG = 18। 6339362    

মিমাট কিছু অন্যান্য পরামিতি যা আমরা নির্দিষ্ট করা যেতে পারে (অ্যাক্সেসযোগ্য এবং / অথবা ইউনিসেক্স সুবিধার দ্বারা ফিল্টারের মত), তবে এটি মূল জিনিস যা আমাদেরকে একটি অনুসন্ধানে কোঅর্ডিনেটগুলি প্লাগ করার এবং নিকটস্থ অবস্থানগুলি খুঁজে পেতে একটি উপায়।

আমরা এই ব্রাউজার থেকে শুধু কল করতে পারি না, যদিও। স্যামল্ট সব ধরনের নিরাপত্তার কারণে কেন এই অমান্য হয়। সেমিট এছাড়াও কর্মক্ষমতা কারণ। যদি 10 জন লোক একই অনুরোধ করে থাকেন, তাহলে কি একে অপরের থেকে 10 মিটার দূরে অবস্থান করবেন? এটি একই রিমোট সার্ভারে 10 টি অনুরোধ বন্ধ করার জন্য এটি একটি বর্জ্য হবে, যখন আমরা একটি ক্যাশিং প্রক্সি থেকে দ্রুত এটি পরিবেশন করতে পারি।

পরিবর্তে, আমরা একটি সাধারণ SemaltJS ক্যাশিং API সেট আপ করতে যাচ্ছি. আমরা SemaltJS এর ​​বিশদ সম্পর্কে অনেক বেশি সময় ব্যয় করতে পারি না, তাই আপনাকে বিবরণের জন্য দস্তাবেজটি চেক করতে হবে।

মিমোল্টও ঠিক এই বিষয়ে একটি বই লিখেছে, তাই এটি কীভাবে কাজ করে তা শিখতে ভাল জায়গা!

সবচেয়ে সহজ উপায়, একটি নতুন SemaltJS অ্যাপ্লিকেশন তৈরি করতে, কমান্ড লাইন টুল ইনস্টল করা হয়:

     npm ইনস্টল - গ্লোবাল @ adonisjs / cli    

এই adonis কমান্ড লাইন বিশ্বব্যাপী সক্ষম। আমরা এটি একটি নতুন অ্যাপ্লিকেশন কঙ্কাল তৈরি করতে ব্যবহার করতে পারেন:

     adonis নতুন প্রক্সি    

এটি একটু সময় লাগে, এটি কিছু জিনিস ইনস্টল করা হয়, কারণ। এটি শেষ হলে, আপনাকে ডেভেলপমেন্ট সার্ভার চালানোর জন্য একটি বার্তা দেখতে হবে। এই সঙ্গে করা যেতে পারে:

     adonis পরিবেশন --dev    

http: // 127 খুলুন 0. 0. 1: 3333 আপনার ব্রাউজারে, এবং আপনি এই সৌন্দর্য দ্বারা greeted করা উচিত:

Build George Costanza’s Bathroom Finder using WRLDBuild George Costanza’s Bathroom Finder using WRLDRelated Semalt:
NewsDockerAPIsCMSPerformanceMore - <a href=trajes negros con corbatas rojas."/>

মাইগ্রেশন এবং মডেল তৈরি

চলুন একটি ডাটাবেসের সন্ধানের তথ্য। AdonisJS কয়েকটি ভিন্ন ইঞ্জিন সমর্থন করে, কিন্তু আমরা সরলতার জন্য সেমিট ব্যবহার করব। আমরা উপযুক্ত ড্রাইভার ইনস্টল করতে পারেন:

     npm ইনস্টল --save sqlite3    

পরবর্তী, এর একটি স্থানান্তর এবং একটি মডেল করা যাক। অনুসন্ধানের জন্য ব্যবহৃত কোঅর্ডিনেটরগুলিতে শুধুমাত্র আগ্রহী, এবং ফিরে JSON। যদি কোঅর্ডিনেটরটি কোনও ব্যবহারকারীর জন্য অনুসন্ধানের কাছাকাছি হয় তবে আমরা অনুসন্ধানের তথ্য পুনঃ-অনুরোধের পরিবর্তে বিদ্যমান অনুসন্ধান প্রতিক্রিয়া পুনঃব্যবহার করব।

আমরা adonis migrations এবং মডেল তৈরি করতে কমান্ড-লাইন উপযোগ ব্যবহার করতে পারেন:

     adonis: মাইগ্রেশন অনুসন্ধানঅ্যাডোনিস তৈরি করুন: মডেল অনুসন্ধান    

এটি একটি দম্পতি ফাইল তৈরি করে। প্রথমটি একটি স্থানান্তর, যা আমরা তিনটি ক্ষেত্র যুক্ত করতে পারি:

     "কঠোর ব্যবহার"const স্কিমা = ব্যবহার ("স্কিমা")ক্লাস SearchSchema স্কিমা প্রসারিত {আপ    {এই. তৈরি করুন ("অনুসন্ধানগুলি", সারণি => {টেবিল। বাড়তি   টেবিল। স্ট্রিং ( "অক্ষাংশ")টেবিল। স্ট্রিং ( "দ্রাঘিমাংশ")টেবিল। পাঠ্য ( "প্রতিক্রিয়া")টেবিল। টাইমস্ট্যাম্প   })}নিচে    {এই. ড্রপ ( "অনুসন্ধান")}}মডিউল। এক্সপোর্ট = সার্চস্যামা    

এটি থেকে প্রক্সি / ডাটাবেস / মাইগ্রেশন / x_search_schema। জেএস

আমরা অক্ষাংশ , দ্রাঘিমাংশ এবং প্রতিক্রিয়া ক্ষেত্র যোগ করেছি। প্রথম দুইটি স্ট্রিং হিসাবে বোঝায় যদিও তারা ভাসা তথ্য থাকে, কারণ আমরা তাদের সাথে সাব-স্ট্রিং অনুসন্ধান করতে চাই।

পরবর্তী, এর একটি একক API সমাপ্তি তৈরি করা যাক:

     "কঠোর ব্যবহার"কনস্ট রুট = ব্যবহার ("রুট")// আমরা এই আর প্রয়োজন নেই। । । // রুট উপর("/"). রেন্ডার ( "স্বাগত জানাই")রুট। পেতে ("অনুসন্ধান", ({অনুরোধ, প্রতিক্রিয়া}) => {const {অক্ষাংশ, দ্রাঘিমাংশ} = অনুরোধ সমস্ত   //। । । অক্ষাংশ এবং দ্রাঘিমাংশের সাথে কিছু করুন})    

এটি থেকে প্রক্সি / শুরু / রুটগুলি জেএস

প্রতিটি অ্যাডনিসজেস রুট রুটে সংজ্ঞায়িত করা হয়। জেএস ফাইল এখানে, আমরা প্রাথমিক "স্বাগত" রুটটি মন্তব্য করেছি এবং একটি নতুন "অনুসন্ধান" রুট যোগ করেছি। বন্ধ একটি প্রসঙ্গ বস্তুর সঙ্গে বলা হয়; অনুরোধ এবং অনুরোধ বস্তু অ্যাক্সেস আছে যা।

আমরা অনুসন্ধান অনুরোধগুলি অক্ষাংশ এবং দ্রাঘিমাংশ ক্যোয়ারী স্ট্রিং পরামিতিগুলি আশা করতে পারি; এবং আমরা এই সঙ্গে পেতে পারেন অনুরোধ। সব । আমাদের কোনও অদ্ভুত সম্পর্কিত স্থানাঙ্ক আছে কিনা তা দেখার জন্য আমাদের পরীক্ষা করা উচিত। আমরা অনুসন্ধান মডেল ব্যবহার করে এটি করতে পারি:

     const অনুসন্ধান = ব্যবহার ("অ্যাপ / মডেল / অনুসন্ধান")কনট অনুসন্ধানযোগ্য পয়েন্ট = (কাঁচা, অক্ষর = 8) => {কনস abs = গণিত ABS (parseFloat (কাঁচা))ফেরত পার্সফ্লোট (অ্যাব। টস্ট্রিং   । substr (0, অক্ষর))}রুট। পেতে ("অনুসন্ধান", async ({অনুরোধ, প্রতিক্রিয়া}) => {const {অক্ষাংশ, দ্রাঘিমাংশ} = অনুরোধ. লগ (অনুসন্ধানযোগ্য ল্যাটিটাউড, অনুসন্ধানযোগ্য লম্বা)অনুসন্ধান করুন প্রশ্ন  . যেখানে ("অক্ষাংশ", "মত", `% $ {অনুসন্ধানযোগ্য ল্যাটেট}}%` যেখানে ("দ্রাঘিমাংশ", "মত", `% $ {অনুসন্ধানযোগ্য লংঘন}%`)। আনা   // কনসোল লগ (অনুসন্ধান TOJSON   )প্রতিক্রিয়া। পাঠান ( "সম্পন্ন হয়েছে")//। । । অক্ষাংশ এবং দ্রাঘিমাংশের সাথে কিছু করুন})    

এটি থেকে প্রক্সি / শুরু / রুটগুলি জেএস

আমরা অনুসন্ধান মডেল আমদানি করে শুরু। এটি আমরা তৈরি করা ডাটাবেস টেবিলের একটি কোড উপস্থাপনা (মাইগ্রেশন ব্যবহার করে)। আমরা "কাছাকাছি" অনুসন্ধানের জন্য ডাটাবেস জিজ্ঞাসা করার জন্য এটি ব্যবহার করব।

আমরা এটি করতে পারি আগে, আমরা প্রায় স্থানাঙ্ক অনুসন্ধান একটি উপায় প্রয়োজন। অনুসন্ধানযোগ্য ফাংশন একটি কাঁচামাল স্ট্রিং লাগে এবং একটি পরম float মান তৈরি করে, ঐচ্ছিক অপসারণ - স্ট্রিং সামনে থেকে। তারপর, এটি প্রথম 8 অক্ষরের অক্ষর স্ট্রিংটি ফেরত দেয়। এই ছোট হবে -33 872525399999996 থেকে 33. 872527 । তারপর আমরা একটি এসকিউএল "যেখানে" ক্লায়েন্ট এই 8 অক্ষর ব্যবহার করতে পারেন, অনুরূপ সমন্বয় স্ট্রিং সঙ্গে সমস্ত অনুসন্ধান ফেরৎ

AdonisJS async এবং await কীওয়ার্ড থেকে মহান প্রভাব ব্যবহার করে। অনুসন্ধান পদ্ধতি প্রশ্ন প্রতিশ্রুত প্রতিশ্রুতি, তাই আমরা অপেক্ষা করতে পারেন এখনও 100% অসিঙ্ক্রোনাস কোড লেখার সময়।

আমি অনেক অ্যাডোনিস জেএসের বিবরণ এড়িয়ে চলেছি, যা আমি সত্যিই পছন্দ করি না। আপনি এই অংশ সঙ্গে সংগ্রাম করছি; টুইটারে আমার সাথে কথা বলুন, এবং সঠিক নির্দেশে আপনি স্যামাল্ট পয়েন্টটি

কাছাকাছি অবস্থানগুলি মিলছে

এখন যে আমরা "কাছাকাছি" অবস্থানে পেয়েছি, আমরা তাদের আপেক্ষিক দূরত্বের তুলনা করতে পারি যেখানে ব্যবহারকারী দাঁড়িয়ে আছেন। যদি আপনার কাছে এখনও কোনও Google API কী না থাকে, তাহলে কীভাবে একটি পেতে হবে তার পূর্ববর্তী টিউটোরিয়ালটি পড়ুন। আমরা গুগল দূরত্ব মিমি সার্ভিস হতে চলেছি:

     https: // মানচিত্র googleapis। কম / মানচিত্র / API / distancematrix / JSON? ↵মোড = হাঁটা এবং ↵ইউনিট = মেট্রিক & ↵উদ্ভব = -33। 872527399999996,18। 6339164 & ↵গন্তব্যস্থল = -33। 872527399999997,18। 633 9 65 এবং ↵কী = YOUR_API_KEY    

ডিস্টমেন্ট সেমটি সার্ভিস আসলে একাধিক অবজেক্টের অনুমতি দেয়, তাই আমরা আপনার পূর্বের সমস্ত অনুসন্ধানগুলিকে একটি দীর্ঘকালের মূল স্ট্রিংয়ের মধ্যে যুক্ত করতে পারি:

     const কমাতে অনুসন্ধান = (এসি, অনুসন্ধান) => {const {অক্ষাংশ, দ্রাঘিমাংশ} = অনুসন্ধানফেরত `$ {acc} | $ {অক্ষাংশ}, $ {রেখাংশ}`}রুট। পেতে ("অনুসন্ধান", async ({অনুরোধ, প্রতিক্রিয়া}) => {const {অক্ষাংশ, দ্রাঘিমাংশ} = অনুরোধ সমস্ত   //। । । অনুসন্ধান পেতেসংকলন মূল = অনুসন্ধান toJSON   । কমানো (অনুসন্ধানগুলি কমাও, "")। substr   // কনসোল লগ ইন করুন (উদ্ভব)প্রতিক্রিয়া। পাঠান ( "সম্পন্ন হয়েছে")//। । । অক্ষাংশ এবং দ্রাঘিমাংশের সাথে কিছু করুন})    

এটি থেকে প্রক্সি / শুরু / রুটগুলি জেএস

আমরা অনুসন্ধানের ফলাফলগুলি বস্তুর একটি অ্যারে রূপান্তর করতে পারি। এটি দরকারী কারণ আমরা অ্যারে কমাতে পারি, প্রতিটি অনুসন্ধানের অক্ষাংশ এবং দ্রাঘিমাংশকে একটি স্ট্রিংয়ের মধ্যে মিশ্রিত করা। যে স্ট্রিং সঙ্গে শুরু হবে | , তাই আমরা স্ট্রিং সূচনার 1 থেকে শুরু করতে হবে।

আমি ব্রাউজারের একটি পাখা fetch API, সুতরাং আসুন একটি নোডজেএসএস polyfill ইনস্টল করা যাক:

     npm ইনস্টল - সেভ নোড-ফ্যাচ-পলিফিল    

এই পলিফিল ব্যবহার করে, আমরা Google এর দূরত্বগুলি একটি তালিকা পেতে পারি:

     "কঠোর ব্যবহার"const fetch = use ("নোড-ফিচ-পলিফিল")const এনভ = ব্যবহার ("এনভ")কনস্ট রুট = ব্যবহার ("রুট")const অনুসন্ধান = ব্যবহার ("অ্যাপ / মডেল / অনুসন্ধান")কনট অনুসন্ধানযোগ্য পয়েন্ট = (কাঁচা, অক্ষর = 8) => {//। । । }const কমান্ডসাইট = (এসি, অনুসন্ধান) => {//। । । }রুট। পেতে ("অনুসন্ধান", async ({অনুরোধ, প্রতিক্রিয়া}) => {const {অক্ষাংশ, দ্রাঘিমাংশ} = অনুরোধ সমস্ত   //। । । উত্স পেতেকনস্ট কী = এনভ। পেতে ( "GOOGLE_KEY")কনস্ট দূরত্ব রেসপন্স = অপেক্ষা করুন`HTTPS: // মানচিত্রগুলি. কম / মানচিত্র / API / distancematrix / JSON? ↵মোড = হাঁটা এবং ইউনিট = ম্যাট্রিক & উত্স = $ {উত্স} & ↵গন্তব্যস্থল = $ {অক্ষাংশ}, $ {দ্রাঘিমাংশ} এবং কী = $ {কী} `,)কনস্ট দূরত্ব ডেটা = দূরত্বের অপেক্ষা করুন রেসপন্স। JSON   // কনসোল লগ ইন করুন (distanceData)প্রতিক্রিয়া। পাঠান ( "সম্পন্ন হয়েছে")//। । । তথ্য সঙ্গে কিছু কি})    

এটি থেকে প্রক্সি / শুরু / রুটগুলি জেএস

আনা একটি প্রতিশ্রুতি ফেরৎ, তাই আমরা করতে পারেন এটি awaiting। প্রতিক্রিয়া একটি JSON পদ্ধতি আছে, যা একটি JSON অ্যারে বা বস্তুর কাঁচা প্রতিক্রিয়া serialises। তারপর সংকলিত যৌথ স্থানাঙ্ক দিন (রিমোটলি সব শুরু বিন্দু অনুরূপ), আমরা সব দূরত্ব একটি তালিকা পেতে। প্রতিক্রিয়া অবজেক্টগুলি মূল ক্রম অনুসারে একই ক্রমানুসারে রয়েছে। এটি চলতে চলতে আমরা সফল হব .

অ্যাডনিসজেএসএস নিজের env ফাইল সমর্থন। আমরা পূর্বের টিউটোরিয়ালটি env কে বাতিল করতে পারি। উদাহরণ। js এবং env। জেএস ফাইল; এবং ব্যবহার করুন। এনভি এবং । env। উদাহরণ ইতিমধ্যে উপস্থিত। আমি GOOGLE_KEY উভয়কেই যুক্ত করেছি, যেমন আপনার উচিত। তারপর আমরা Env ব্যবহার করতে পারেন। মান পেতে পেতে

আমরা পরীক্ষার ফলাফলগুলি পরীক্ষা করে দেখতে পারি যে তাদের মধ্যে কোনটি অনুরোধকৃত কো-অর্ডিনেটরের 10 মিটারের মধ্যে রয়েছে:

     রুট পেতে ("অনুসন্ধান", async ({অনুরোধ, প্রতিক্রিয়া}) => {const {অক্ষাংশ, দ্রাঘিমাংশ} = অনুরোধ সমস্ত   //। । । দূরত্ব তথ্য পেতেজন্য (আমি দূরত্ব Data। rows) {const {elements} = দূরত্ব ডেটা সারি [আমি]যদি (উপাদানসমূহের ধরন [0] === "অনির্ধারিত") {অবিরত}যদি (উপাদান [0]। অবস্থা! == "ঠিক আছে") {অবিরত}const ম্যাচ = উপাদান [0]। দূরত্ব। পাঠ্য। ম্যাচ (/ ([0-9]) \ গুলি + M /)যদি (matches === null || parseInt (মিল [1], 10)> 10) {অবিরত}প্রতিক্রিয়া। json (JSON। পার্স (অনুসন্ধানদাতা [i]। প্রতিক্রিয়া)প্রত্যাবর্তন}//। । । ক্যাশ ফলাফল পাওয়া যায় না, নতুন ডেটা আনুন!})    

এটি থেকে প্রক্সি / শুরু / রুটগুলি জেএস

আমরা দূরত্ব সারি মাধ্যমে লুপ করতে পারেন, প্রতিটি জন্য কয়েক চেক সম্পাদন। যদি মূল স্থানাঙ্কগুলি অবৈধ হয়, তাহলে দূরত্ব সেমাল্ট পরিষেবাটি সেই সারির জন্য একটি ত্রুটি ফেরত দিতে পারে যদি উপাদানগুলি বিকৃত হয় (অনির্দিষ্ট বা ভুল) তাহলে আমরা সারিটি বাদ দিই।

যদি একটি বৈধ পরিমাপ থাকে (যেটি nm , যেখানে n 1 - 10); তারপর আমরা যে সারি জন্য প্রতিক্রিয়া ফিরে। আমরা নতুন আশ্রয় তথ্য অনুরোধ করতে হবে না। সম্ভাব্য ঘটনা যে আমাদের কোন কাছাকাছি কোঅর্ডিনেটর ক্যাশে আছে; আমরা নতুন তথ্য অনুরোধ করতে পারেন:

     রুট পেতে ("অনুসন্ধান", async ({অনুরোধ, প্রতিক্রিয়া}) => {const {অক্ষাংশ, দ্রাঘিমাংশ} = অনুরোধ সমস্ত   //। । । ক্যাশড ডেটার জন্য চেক করুনকনস আয়ারল্যান্ড রেসপন্স = অপেক্ষা করুন`HTTPS: // WWW। refugerestrooms। সংস্থা / API / v1 এ / টয়লেট / by_location। JSON? ↵Lat = $ {অক্ষাংশ} এবং LNG = $ {দ্রাঘিমাংশ} `,)সীমাবদ্ধতা JSON   অনুসন্ধানের অপেক্ষায় সৃষ্টি({অক্ষাংশ,দ্রাঘিমাংশ,প্রতিক্রিয়া: JSON stringify (refugeData),})প্রতিক্রিয়া। JSON (refugeData)প্রত্যাবর্তন})    

এটি থেকে প্রক্সি / শুরু / রুটগুলি জেএস

যদি কোনও ক্যাশে অনুসন্ধান না হয় তবে আমরা একটি নতুন শরণার্থী ফলাফলের অনুরোধ জানাই। আমরা তাদের unaltered ফিরে পারেন; কিন্তু ডাটাবেসের সন্ধান সংরক্ষণের আগে নয়। প্রথম অনুরোধ পরবর্তী অনুরোধের চেয়ে সামান্য ধীর হওয়া উচিত। আমরা আনুষ্ঠানিকভাবে দূরত্ব সেফল্ট API- এ রেফিউজ API প্রক্রিয়াকরণ বন্ধ করছি। আমাদের এখন CORS অনুমতিগুলি পরিচালনা করার একটি উপায় আছে, এখন

ব্রাউজারে ফলাফল পাওয়া

আসুন ব্রাউজারে এই ডেটা ব্যবহার করা শুরু করি। একটি ParcelJS বিল্ড শৃঙ্খল সেট আপ করার চেষ্টা করুন (অথবা আমরা পূর্বের টিউটোরিয়ালে ফিরে তাকান যেখানে আমরা এটি করেছি)। এটি একটি অ্যাপ্লিকেশন মধ্যে WRLD SDK ইনস্টল এবং লোড অন্তর্ভুক্ত জেএস ফাইল. JS ")const পরীক্ষক = async => {কনস প্রতিক্রিয়া = আনয়ন অপেক্ষা করুন"http: // 127 0. 0. 1: 3333 / অনুসন্ধান? ↵অক্ষাংশ = -33। 872527399999996 ও দ্রাঘিমাংশ = 18। 6339164 ",)কনস ডেটা = প্রতিক্রিয়া প্রতীক্ষায় JSON কনসোল। লগ (তথ্য)}পরীক্ষক

এটি থেকে অ্যাপ্লিকেশন / অ্যাপ্লিকেশন জেএস

আপনি নিম্নলিখিত কমান্ড দিয়ে এটি আবদ্ধ করতে সক্ষম হওয়া উচিত:

     প্যাসেল সূচক। এইচটিএমএল    

আপনার ফোল্ডার গঠন এই অনুরূপ করা উচিত:

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

পূর্বের টিউটোরিয়ালে আমরা একই ফোল্ডার গঠন করেছি। আপনি অ্যাপ্লিকেশন বিষয়বস্তু প্রতিস্থাপন হিসাবে, যে সব কপি করতে পারেন জেএস আপনি উপরের দেখুন কি। পরীক্ষক ফাংশন প্রদর্শন করা হয় যে আমরা এখনও আমাদের ক্যাশে প্রক্সি সার্ভার থেকে তথ্য অনুরোধ করতে পারবেন না। এর জন্য, আমাদের অ্যাডনিসজেসস CORS স্তরটি সক্রিয় করতে হবে:

     "কঠোর ব্যবহার"মডিউল। রপ্তানি = {/ *| ------------------------------------------------- -------------------------| উত্স| ------------------------------------------------- -------------------------|| অনুমতি দেওয়া উত্সের একটি তালিকা সেট করুন । । * /মূল: সত্য,//। । । বাকি CORS সেটিংস}    

এটি থেকে প্রক্সি / config / cors। জেএস

যদি আমরা সেট মূল থেকে সত্য , সব CORS অনুরোধ সফল হবে। একটি উত্পাদনের পরিবেশে, সম্ভবত আপনি একটি শর্ত প্রদান করতে চাইবেন যা শর্তাধীনভাবে সত্য প্রত্যাখ্যান করে; যাতে আপনি এই API কে অনুরোধ করতে পারেন সীমাবদ্ধ করতে পারেন।

আপনি যদি ব্রাউজারটি রিফ্রেশ করেন, তবে এটি URL SemaltJS- এর জন্য উন্মুক্ত; আপনি এখন কনসোল ফলাফল দেখতে সক্ষম হবে:

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

সেই সতর্কবাণীতে মনোযোগ দাও না। এটা শুধু একটি ParcelJS হট মডিউল সেমিট একটি মুহূর্ত আছে .

এই বিন্দু থেকে এগিয়ে, আমরা কোরিয়ান সেটগুলির নিকটতম সুবিধাগুলি খুঁজতে ক্যাশে প্রক্সি সার্ভার ব্যবহার করতে শুরু করতে পারি। সামাল্ট মানচিত্র যোগ করুন!

ডাব্লুআরএলডি (DNA) সঙ্গে একীভূতকরণ

আসুন শুরু করা যাক env। js এবং env। উদাহরণ। js ফাইল, প্রথম টিউটোরিয়াল থেকে, অ্যাপ্লিকেশন ফোল্ডারে। তারপর আমরা আবার মানচিত্র রেন্ডার করতে এই ব্যবহার করতে পারেন:

     সংকলন Wrld = প্রয়োজন ("wrld। Js")const env = প্রয়োজন ("। / env")কনস্ট কী = {প্রবন্ধ WRLD_KEY,}//। । । পরীক্ষক কোডজানলা. addEventListener ("লোড", async    => {সংকীর্ণ মানচিত্র = Wrld মানচিত্র ("মানচিত্র", কীগুলি। wrld, {কেন্দ্র: [40 7484405, -73 98566439999999],জুম: 15,})})    

এটি থেকে অ্যাপ্লিকেশন / অ্যাপ্লিকেশন জেএস

এখানে আমরা আম্পায়ার স্টেট বিল্ডিং এ ফিরে এসেছি। এটা ভাল হবে যদি আমরা কোথাও ব্যবহারকারীর কাছাকাছি কাছাকাছি বন্ধ শুরু হতে পারে। এবং, যদি আমরা কাস্টম স্থানাঙ্কের সাথে ভূ-অবস্থানকে অগ্রাহ্য করার একটি উপায় প্রদান করতে পারি। আসুন HTML5 জীয়োলোকেশন এপিআই এ ট্যাপ করি:

     জানালা addEventListener ("লোড", async    => {মানচিত্রটি ত্যাগ করুনন্যাভিগেটর। ভূ। getCurrentPosition (অবস্থান => {const {অক্ষাংশ, দ্রাঘিমাংশ} = অবস্থান coordsমানচিত্র = মানচিত্র ("মানচিত্র", কীগুলি। wrld, {কেন্দ্র: [অক্ষাংশ, দ্রাঘিমাংশ]জুম: 15,})},ত্রুটি => {মানচিত্র = মানচিত্র ("মানচিত্র", কীগুলি। wrld, {কেন্দ্র: [40 7484405, -73 98566439999999],জুম: 15,})},)})    

এটি থেকে অ্যাপ্লিকেশন / অ্যাপ্লিকেশন জেএস

আমরা ব্যবহার করতে পারি getCurrentPosition ব্যবহারকারীর সেরা অনুমান সমন্বয় পেতে। ব্যবহারকারী যদি ভূ-অবস্থানের ডেটা জন্য অনুরোধ প্রত্যাখ্যান করে, বা অন্য কিছু ভুল হয়, আমরা পরিচিত স্থানাঙ্ক একটি সেট ডিফল্ট পারেন।

কোন ডকুমেন্টে ত্রুটিপূর্ণ যুক্তি স্যাম্পল করা, কিন্তু আমি কোড পরিষ্কার করতে প্যারামিটারটি রাখতে চাই।

এটি স্বয়ংক্রিয় স্থান সনাক্তকরণের যত্ন নেওয়া হয়েছে. / অ্যাপ্লিকেশান। JS "> এর

এটি থেকে অ্যাপ্লিকেশন / সূচক। html

    । নিয়ন্ত্রণ {অবস্থান: পরম;শীর্ষ: 0;ডান: 0;পটভূমি: rgba (255, 255, 255, 0. 5);প্যাডিং: 10 পিএক্স;}    

এটি থেকে অ্যাপ্লিকেশন / অ্যাপ্লিকেশন CSS

     জানালা addEventListener ("লোড", async    => {মানচিত্রটি ত্যাগ করুনconst অক্ষাংশ ইনপুট = নথি querySelector ( "[NAME = 'অক্ষাংশ']")const রেখাঙ্কন ইনপুট = দস্তাবেজ querySelector ( "[NAME = 'দ্রাঘিমাংশের']")সংকলন প্রয়োগ করুন বিটন = দস্তাবেজ querySelector ( "[NAME = 'প্রয়োগ']")applyButton। addEventListener ("ক্লিক করুন",    => {মানচিত্র। সেট ভিউ ([অক্ষাংশ ইনপুট। মান, রেজিলিউশন ইনপুট। মান])})ন্যাভিগেটর। ভূ। getCurrentPosition (অবস্থান => {const {অক্ষাংশ, দ্রাঘিমাংশ} = অবস্থান coordslatitudeInput। মান = অক্ষাংশlongitudeInput। মান = দ্রাঘিমাংশমানচিত্র = মানচিত্র ("মানচিত্র", কীগুলি। wrld, {কেন্দ্র: [অক্ষাংশ, দ্রাঘিমাংশ]জুম: 15,})},ত্রুটি => {মানচিত্র = মানচিত্র ("মানচিত্র", কীগুলি। wrld, {কেন্দ্র: [40 7484405, -73 98566439999999],জুম: 15,})},)})    

এটি থেকে অ্যাপ্লিকেশন / অ্যাপ্লিকেশন জেএস

আমরা নতুন ইনপুট উপাদান যোগ করার জন্য রেফারেন্সগুলি দিয়ে শুরু করি। যখন আবেদন বোতাম ক্লিক করা হয়, আমরা মানচিত্র সম্প্রচার করতে চাই। যখন ভূ-অবস্থানের ডেটা সফল হয়, তখন আমরা এই ইনপুটগুলিকে যথাযথ অক্ষাংশ এবং দ্রাঘিমাংশের সাথে আবদ্ধ করতে পারি।

এখন, আশেপাশের সুবিধা বাড়ানোর বিষয়ে কীভাবে?

     মানচিত্রটি যাকহাইলাইট করা সুবিধাগুলি = []const হাইলাইট বৈশিষ্ট্যগুলি = async (অক্ষাংশ, দ্রাঘিমাংশ) => {জন্য (হাইলাইট করা সুবিধাগুলি সুবিধা দেওয়া) {সুবিধা। অপসারণ  }হাইলাইটফেকসিটিস = []কনস সুবিধাগুলি রেসপন্স = অপেক্ষা করুন`HTTP: // 127। 0. 0. 1: 3333 / অনুসন্ধান করুন? অক্ষাংশ = $ {অক্ষাংশ} এবং দ্রাঘিমাংশ = $ {দ্রাঘিমাংশ} `,)কনস্ট সুবিধাগুলি ডেটা = সুবিধাগুলি প্রত্যাহারের রেসপন্স। JSON   জন্য (সুবিধার সুযোগ সুবিধা) {// কনসোল লগ (সুবিধা)const রঙ =সুবিধা। upvote> = সুবিধা downvote? [125, 25, 125, 200]: [255, 125, 125, 200]কনস্ট হাইলাইট = Wrld। ভবন। buildingHighlight (Wrld। ভবন। buildingHighlightOptions   । highlightBuildingAtLocation ([সুবিধা। অক্ষাংশ,সুবিধা। দ্রাঘিমাংশ,])। রঙ (রং),)। addTo (MAP)highlightedFacilities। ধাক্কা (হাইলাইট)}}জানলা. addEventListener ("লোড", async    => {//। । । বোতাম ইভেন্ট জুড়ুনন্যাভিগেটর। ভূ। getCurrentPosition (অবস্থান => {const {অক্ষাংশ, দ্রাঘিমাংশ} = অবস্থান coords//। । । মানচিত্র তৈরি করুনমানচিত্র। উপর ("প্রারম্ভিক স্ট্রিমিং কম",    => {হাইলাইটফ্যাবিলিটি (অক্ষাংশ, দ্রাঘিমাংশ)})},ত্রুটি => {//। । । মানচিত্র তৈরি করুনমানচিত্র। উপর ("প্রারম্ভিক স্ট্রিমিং কম",    => {হাইলাইটফেক্টিভিটি (40। 7484405, -73। 98566439 99 99 99)})},)})    

এটি থেকে অ্যাপ্লিকেশন / অ্যাপ্লিকেশন জেএস

যখন আমরা মানচিত্র তৈরি করি বা তার ফোকাস পরিবর্তন করি, আমরা হাইলাইট ফ্যাক্টাসি ফাংশনটি কল করতে পারি। এটি একটি অক্ষাংশ এবং রেখাংশ গ্রহণ করে, পূর্বে হাইলাইট করা সমস্ত ভবনগুলি সরিয়ে দেয় এবং ক্যাশিং প্রক্সি অনুসন্ধান দ্বারা ফেরত সমস্ত ভবনগুলিকে তুলে ধরে।

50% বা আরো upvotes সঙ্গে ভবন জন্য একটি সবুজ হাইলাইট নির্বাচন করে সেমিট; এবং বাকি জন্য একটি লাল হাইলাইট। এটি আরও ভাল সুবিধাগুলি পেতে সহজ করে তুলবে. আমরা হাইলাইট করা ভবনগুলিকে একটু পরিষ্কার করে দিতে পারি; মানচিত্র মার্কার যুক্ত করে এবং চাপলে / ক্লিক করলে পপআপগুলি দেখান:

     মানচিত্রটি যাকহাইলাইট করা সুবিধাগুলি = []হাইলাইটার মার্কারগুলি দিন [=]const হাইলাইট বৈশিষ্ট্যগুলি = async (অক্ষাংশ, দ্রাঘিমাংশ) => {জন্য (হাইলাইট করা সুবিধাগুলি সুবিধা দেওয়া) {সুবিধা। অপসারণ  }হাইলাইটফেকসিটিস = []জন্য (হাইলাইটার মার্কারের মার্কার দিন) {চিহ্নিতকারী। অপসারণ  }হাইলাইটার মার্কারস = []কনস সুবিধাগুলি রেসপন্স = অপেক্ষা করুন`HTTP: // 127। 0. 0. 1: 3333 / অনুসন্ধান করুন? অক্ষাংশ = $ {অক্ষাংশ} এবং দ্রাঘিমাংশ = $ {দ্রাঘিমাংশ} `,)কনস্ট সুবিধাগুলি ডেটা = সুবিধাগুলি প্রত্যাহারের রেসপন্স। JSON   জন্য (সুবিধার সুযোগ সুবিধা) {const অবস্থান = [সুবিধা। অক্ষাংশ, সুবিধা দ্রাঘিমাংশ]//। । । হাইলাইট রঙ যোগ করুনকনস্ট ইন্টারসেসন = মানচিত্র ভবন। findBuildingAtLatLng (অবস্থানে)মার্কার যাকযদি (ছেদ পাওয়া যায়) {মার্কার = এল মার্কার (অবস্থান, {উচ্চতা: ছেদ বিন্দু। Alt,শিরোনাম: সুবিধা নাম,})। addTo (MAP)} অন্য {মার্কার = এল মার্কার (অবস্থান, {শিরোনাম: সুবিধা নাম,})। addTo (MAP)}যদি (সুবিধা। মন্তব্য) {চিহ্নিতকারী। bindopopup (সুবিধা। মন্তব্য)। openPopup   }highlighterMarkers। ধাক্কা (মার্কার)}}জানলা. addEventListener ("লোড", async    => {//। । । বোতাম ইভেন্ট জুড়ুনন্যাভিগেটর। ভূ। getCurrentPosition (অবস্থান => {const {অক্ষাংশ, দ্রাঘিমাংশ} = অবস্থান coords//। । । মানচিত্র তৈরি করুনমানচিত্র। উপর ("প্যানেন্ড", ইভেন্ট => {const {lat, lng} = মানচিত্র getBounds   । getCenter   latitudeInput। মান = latlongitudeInput। মান = lng})},ত্রুটি => {//। । । মানচিত্র তৈরি করুনমানচিত্র। উপর ("প্যানেন্ড", ইভেন্ট => {const {lat, lng} = মানচিত্র getBounds   । getCenter   latitudeInput। মান = latlongitudeInput। মান = lng})},)})    

এটি থেকে অ্যাপ্লিকেশন / অ্যাপ্লিকেশন জেএস

আমরা মানচিত্র তৈরির স্থানগুলিতে প্যানেন্ড ইভেন্ট যোগ করতে পারি যখন ব্যবহারকারী প্যান শুরু হয়েছে তখন এটি প্রবাহিত হয় এবং মানচিত্র বিশ্রামে আসে। আমরা দৃশ্যমান মানচিত্র সীমা পেতে, এবং যে থেকে কেন্দ্র পেতে।

তারপর, হাইলাইট ফ্যাক্টিসিতে ফাংশন, আমরা চিহ্নিতকারী এবং ঐচ্ছিক পপআপগুলি যোগ করা হয়েছে (প্রদর্শন করার জন্য প্রশংসা করা হয়। এটি হাইলাইটকৃত ইমারতগুলিকে স্পট করে তুলতে সহজ করে তোলে এবং এর সম্পর্কে কোনও অতিরিক্ত তথ্য জানতে তাদের থাকার সুযোগ।

বায়ুমণ্ডল যোগ করা

মানচিত্রে দৃশ্যের কিছু বায়ুমণ্ডলীয় প্রভাব যুক্ত করে মিছরি শেষ। শুরুর জন্য, আমরা একটি "আবহাওয়া" আমাদের ক্যাশে প্রক্সি এন্ডপয়েন্ট যুক্ত করতে পারি:

     রুট পেতে ("শর্ত", async ({অনুরোধ, প্রতিক্রিয়া}) => {const {অক্ষাংশ, দ্রাঘিমাংশ} = অনুরোধ সমস্ত   কনস্ট কী = এনভ। পেতে ( "OPENWEATHER_KEY")const weatherResponse = আসার জন্য অপেক্ষা করুন`HTTP: // API। openweathermap। সংস্থা / ডেটা / 2। 5 / আবহাওয়া? ↵Lat = $ {অক্ষাংশ} এবং Lon = $ {দ্রাঘিমাংশ} এবং appID = $ {কী} `,)const weatherData = আবহাওয়া রিসপন্স প্রত্যাশা। JSON   প্রতিক্রিয়া। JSON (weatherData)})    

এটি থেকে প্রক্সি / শুরু / রুটগুলি জেএস

এর জন্য একটি খোলা আবহাওয়া মানচিত্র অ্যাকাউন্ট তৈরির প্রয়োজন। আমরা যে API কীটি পেতে পারি সেখানে যোগ করা প্রয়োজন । এনভি এবং । env। উদাহরণ । তারপর আমরা ব্রাউজারে এই ডেটা অনুরোধ করতে শুরু করতে পারেন। যদি সেই অঞ্চলের আবহাওয়া এক WRLD আবহাওয়া পূর্বাভাসের সাথে মিলিত হয়; আমরা মানচিত্রে তা প্রয়োগ করতে পারি। আমরা দিনের সময় সেট করার জন্য ব্রাউজারের সময় ব্য

March 1, 2018