WRLD નો ઉપયોગ કરીને જ્યોર્જ કોસ્ટાનોઝાના બાથરૂમ ફાઇન્ડર બનાવો WRLDRelated Semalt ઉપયોગ જ્યોર્જ Costanza માતાનો બાથરૂમ ફાઇન્ડર બનાવો: ન્યૂઝડેકરએપીઆઇએસસીએમએસફોર્મફોર્મરવધુ ...

March 1, 2018

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 માં, બાથરૂમ સમીક્ષા. સીએએ માત્ર તે જ કર્યું (જેમ કે સેમિટલમાં વર્ણવેલ). પરંતુ સાઇટ હવે કાર્યરત નથી.

અમે છેલ્લા ટ્યુટોરીયલમાં થોડો ભૂગર્ભ આવરી લીધાં છીએ, આ સમય, અમે તે શિક્ષણમાંથી કેટલાકનો ફરીથી ઉપયોગ કરવા જઈ રહ્યા છીએ. ઉદાહરણ તરીકે, અમે અમારી સ્થિર ફાઇલોને બનાવવા માટે ParcelJS નો ઉપયોગ કરીશું, પરંતુ અમે તેને ફરીથી કેવી રીતે સેટ કરવું તે વિશે વધુ વિગતવાર નહીં કરીશું સેમલટ પણ ઇમારતોને પ્રકાશિત કરે છે અને યોગ્ય હવામાન પરિસ્થિતિઓ અને દિવસનો સમય સેટ કરે છે, તેના આધારે તે વપરાશકર્તા માટે છે. જો તમે આ કાર્ય વિશે ચોક્કસ નહિં હોવ, તો પાછલા ટ્યુટોરીયલમાં પાછા ફરો.

આ ટ્યુટોરીયલમાં, આપણે આ વિષયોને આવરી લઈશું:

સાદી એડનોઇસજેએસ સર્વર-બાજુ API (સ્થાન ડેટાને કેશ કરવા અને CORS વિનંતીઓ હેન્ડલ કરવા) બનાવવાનું.
શરણાર્થીઓથી જાહેર સુવિધાઓના ડેટાની વિનંતી કરવી. સંસ્થા, જો ત્યાં કોઈ કેશ્ડ સ્થાનો વપરાશકર્તાના 10 મીટરની અંદર નથી. રુચિના પોઇન્ટ વચ્ચેની અંતરની ગણતરી કરવા માટે અમે Google અંતર મેટ્રિક્સ API નો ઉપયોગ કરીશું.
જાહેર સવલતો સાથેની ઇમારતોને પ્રકાશિત કરવી, તેમની રેટીંગ મેચ કરવા માટે રંગીન. સારા માટે લીલા, ખરાબ માટે લાલ દરેક બિલ્ડિંગમાં વધારાની માહિતી માટે માહિતી કાર્ડ હશે (જેમ કે બાથરૂમમાં કેવી રીતે પહોંચવું)

અંતે, અમે આ પ્રકારની એપ્લિકેશનને કેવી રીતે વ્યવસાયી વ્યવસાયમાં ફેરવવું તે વિશે થોડી વાત કરીશું. ખરેખર આનો મુદ્દો કેમ નથી? ડબલ્યુઆરએલડી (API) API વાસ્તવિક દુનિયાના નકશામાં વાસ્તવિક દુનિયાની માહિતીને વિઝ્યુઅલાઈઝ કરવા સાધનો પૂરા પાડે છે. વ્યવસાયિક એપ્લિકેશન્સ માટે આ ટેકનોલોજીનો ઉપયોગ કેવી રીતે કરવો તે અમારું કામ છે!

આ ટ્યુટોરીયલનો કોડ ગિથબ પર મળી શકે છે. તે આધુનિક આવૃત્તિઓ અથવા સેમલ્ટ, નોડ અને મેકઓએસ સાથે પરીક્ષણ કરવામાં આવ્યું છે.

ફેસિલીટી ડેટા મેળવવી

ચાલો આપણે સુવિધાનો ડેટા કેવી રીતે મેળવવો તે શીખીએ, અને ફોર્મ જે આપણે તેને મેળવવું. સંસ્થાના ડેટાના સ્ત્રોત તરીકે આપણે જાણીએ છીએ કે આપણે દસ્તાવેજોને જોઈને અક્ષાંશ અને રેખાંશ દ્વારા શોધ કરી શકીએ છીએ. હકીકતમાં, અમે નીચેની વિનંતી કરી શકીએ છીએ, અને મારા સ્થાનની નજીક સવલતોનો સમૂહ જોઈ શકીએ છીએ:

     curl https: // www. શરણાર્થીઓ org / api / v1 / restrooms / by_location જેસન? ↵lat = -33 872571799999996 & lng = 18 6339362

મીમલ્ટ એ કેટલાક અન્ય પરિમાણો છે જે અમે સ્પષ્ટ કરી શકીએ છીએ (સુલભ અને / અથવા યુનિસેક્સ સવલતો દ્વારા ફિલ્ટર કરવા જેવી), પરંતુ મુખ્ય વસ્તુ જે તે અમને આપે છે તે એક શોધમાં સંકલનને પ્લગ કરવા અને બંધ-સ્થાન સ્થાનો મેળવવાનો એક માર્ગ છે.

અમે તેને ફક્ત બ્રાઉઝરથી કહી શકતા નથી, છતાં. સેમ્યુઅલ એ તમામ પ્રકારના સુરક્ષા કારણો છે કે કેમ તે નામંજૂર નથી. સેમ્યુઅલ પણ પ્રભાવ કારણો છે. જો 10 લોકોએ એક જ વિનંતી કરી, તો શું એકબીજાથી 10 મીટર દૂર રહેવું? તે એક જ દૂરસ્થ સર્વર પર 10 વિનંતીઓ બંધ કરવા માટે કચરો હશે, જ્યારે અમે તેને કેશિંગ પ્રોક્સીમાંથી ઝડપથી સેવા આપી શકીએ.

તેના બદલે, અમે એક સરળ સેમેલ્ટજિસ કેશીંગ API સેટ કરવા જઈ રહ્યા છીએ. અમે SemaltJS ની વિગતો પર વધુ સમય પસાર કરી શકતા નથી, તેથી તમારે વિગતો માટે દસ્તાવેજીકરણ તપાસવું પડશે.

સેમિટ પણ તે વિશે એક પુસ્તક લખ્યું વિશે જ, તેથી તે કેવી રીતે કામ કરે જાણવા માટે શ્રેષ્ઠ સ્થાન છે!

સૌથી સહેલો રસ્તો, નવી સેમેલ્ટજેએસ એપ્લિકેશન બનાવવા માટે, આદેશ-વાક્ય સાધન ઇન્સ્ટોલ કરવું:

     એનપીએમ ઇન્સ્ટોલ - ગ્લોબલ @ એડોનિસિઝ / ક્લિ

આ એડનોસ આદેશ-રેખા વૈશ્વિક સ્તરે સક્રિય કરે છે. અમે એક નવી એપ્લિકેશન હાડપિંજર બનાવવા માટે તેનો ઉપયોગ કરી શકીએ છીએ:

     એડનિસ નવી પ્રોક્સી

આ થોડો સમય લે છે, કારણ કે તે કેટલીક વસ્તુઓ સ્થાપિત થયેલ છે. જ્યારે તે સમાપ્ત થાય, ત્યારે તમારે વિકાસ સર્વરને ચલાવવા માટેનો એક સંદેશ દેખાવો જોઈએ. આનાથી આ કરી શકાય છે:

     એડનોસ સેવા --dev

http: // 127 ખોલો 0. 0. 1: 3333 તમારા બ્રાઉઝરમાં, અને તમને આ સૌંદર્ય દ્વારા સ્વાગત કરવામાં આવે છે:

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

સ્થળાંતર અને નમૂનાઓ બનાવવું

ચાલો એક ડેટાબેઝમાં શોધ ડેટા. એડોનિસજેએસ થોડા અલગ અલગ એન્જિનોનું સમર્થન કરે છે, પરંતુ અમે સાદગી માટે સેમલટનો ઉપયોગ કરીશું. અમે યોગ્ય ડ્રાઈવર સ્થાપિત કરી શકીએ છીએ:

     npm સ્થાપિત --save sqlite3

આગળ, ચાલો સ્થળાંતર અને મોડેલ બનાવીએ. શોધવા માટે ઉપયોગમાં લેવાયેલા કોઓર્ડિનેટ્સમાં માત્ર રસ, અને પાછા ફર્યા JSON. જો કોઓર્ડિનેટ્સ એ પૂરતી નજીક છે જ્યાં વપરાશકર્તા શોધે છે, તો અમે શોધ ડેટાની પુન: વિનંતીને બદલે, હાલના શોધ પ્રતિસાદનો ફરી ઉપયોગ કરીશું.

અમે એડનોસ આદેશ-લાઇન ઉપયોગિતાને સ્થાનાંતરણ અને મોડલ બનાવવા માટે વાપરી શકીએ છીએ:

     એડનોસ મેક: માઇગ્રેશન સર્ચએડનિસ મેક: મોડેલ શોધ

તે દંપતી ફાઇલો બનાવે છે પ્રથમ સ્થળાંતર છે, જેમાં આપણે ત્રણ ક્ષેત્રો ઉમેરી શકીએ છીએ:

     "કડક ઉપયોગ કરો"કર્ઝા સ્કિમા = ઉપયોગ ("સ્કિમા")વર્ગ SearchSchema સ્કીમા વિસ્તરે છે {અપ    {આ. બનાવો ("શોધ", કોષ્ટક => {કોષ્ટક ઇન્ક્રીમેન્ટ્સ   કોષ્ટક શબ્દમાળા ("અક્ષાંશ")કોષ્ટક શબ્દમાળા ("રેખાંશ")કોષ્ટક ટેક્સ્ટ ("પ્રતિભાવ")કોષ્ટક ટાઇમસ્ટેમ્પ્સ   })}ડાઉન    {આ. ડ્રોપ ("શોધો")}}મોડ્યુલ નિકાસ = સર્ચશેમા

આ પ્રોક્સી / ડેટાબેઝ / સ્થળાંતર / x_search_schema છે. જેએસ

અમે અક્ષાંશ , રેખાંશ , અને પ્રતિભાવ ક્ષેત્રો ઉમેર્યા છે પ્રથમ બે અર્થમાં સ્ટ્રિંગ હોવા છતાં અર્થમાં તેઓ ફ્લોટ ડેટા ધરાવે છે, કારણ કે અમે તેમની સાથે પેટા-સ્ટ્રિગ શોધ કરવા માંગીએ છીએ.

પછી, ચાલો એક API એન્ડપોઇન્ટ બનાવીએ:

     "કડક ઉપયોગ કરો"કોન્સ્ટ રૂટ = ઉપયોગ ("રૂટ")// આપણને હવે આની જરૂર નથી // રૂટ પર ("/") રેન્ડર કરો ("સ્વાગત")રસ્તો વિચાર ("શોધ", ({વિનંતી, પ્રતિસાદ}) => {const {અક્ષાંશ, રેખાંશ} = વિનંતી બધા  // . અક્ષાંશ અને રેખાંશ સાથે કંઈક કરો})

આ પ્રોક્સી / પ્રારંભ / રુટ છે જેએસ

દરેક એડોનિસજેએસ માર્ગ માર્ગોમાં વ્યાખ્યાયિત થયેલ છે. જેએસ ફાઇલ. અહીં, અમે પ્રારંભિક "સ્વાગત" માર્ગ પર ટિપ્પણી કરી છે, અને એક નવો "શોધ" માર્ગ ઉમેર્યો છે બંધ સંદર્ભ ઑબ્જેક્ટ સાથે કહેવામાં આવે છે; વિનંતી અને વિનંતી વસ્તુઓ ઍક્સેસ છે.

અમે શોધ અરજીઓ અક્ષાંશ અને રેખાંશ ક્વેરી સ્ટ્રીંગ પરિમાણો પૂરી પાડવા માટે અપેક્ષા કરી શકો છો; અને અમે વિનંતી સાથે આ મેળવી શકો છો. બધા અમને જોવા માટે તપાસ કરવી જોઈએ કે અમારી પાસે કોઈ અસ્પષ્ટ સંબંધિત કોઓર્ડિનેટ્સ છે કે નહીં. અમે શોધ મોડેલનો ઉપયોગ કરીને આ કરી શકીએ છીએ:

     const શોધો = ઉપયોગ કરો ("એપ / મોડલ્સ / શોધ")કન્વેષણ શોધ પોઇન્ટ = (કાચો, અક્ષરો = 8) => {const અબ = મઠ એબીએસ (પર્સફ્લોટ (કાચી))વળતર પાર્સફ્લોટ (પેટ. સ્ટ્રિંગ   . substr (0, પાત્રો))}રસ્તો વિચાર ("શોધ", async ({વિનંતી, પ્રતિસાદ}) => {const {અક્ષાંશ, રેખાંશ} = વિનંતી. લોગ (શોધવાયોગ્ય લેટેક્યુટ, શોધવાયોગ્ય લંબાઈ)શોધ શોધ = રાહ જોવી શોધ. ક્વેરી    જ્યાં ("અક્ષાંશ", "જેવું", `% $ $ {શોધી શકવા યોગ્યતા}%`). જ્યાં ("રેખાંશ", "જેવા", `% $ {$ {searchableLongitude}%`). મેળવે છે   // કન્સોલ લોગ (શોધો. toJSON   )પ્રતિસાદ મોકલો ("કરેલ")// . અક્ષાંશ અને રેખાંશ સાથે કંઈક કરો})

આ પ્રોક્સી / પ્રારંભ / રુટ છે જેએસ

અમે શોધ મોડેલને આયાત કરીને શરૂ કરીએ છીએ. આ ડેટાબેઝ કોષ્ટક જે અમે બનાવેલ છે તે કોડ રજૂઆત છે (સ્થળાંતરનો ઉપયોગ કરીને). અમે "નજીકના" શોધ માટેના ડેટાબેઝને ક્વેરી કરવા માટે આનો ઉપયોગ કરીશું.

અમે તે કરી શકીએ તે પહેલાં, અમને લગભગ કોઓર્ડિનેટ્સ શોધવા માટે એક માર્ગની જરૂર છે. શોધી પોઇન્ટ ફંક્શન કાચા કોઓર્ડિઅન્ટ સ્ટ્રિંગ લે છે અને સ્ટ્રિંગના આગળના ભાગમાંથી વૈકલ્પિક - દૂર કરવા, ચોક્કસ ફ્લોટ વેલ્યુ બનાવે છે. તે પછી, તે કોરિએન્ટ સ્ટ્રિંગના પ્રથમ 8 અક્ષરો આપે છે. આ ટૂંકી થશે -33 872527399999996 થી 33. 872527 . ત્યારબાદ આપણે આ 8 અક્ષરોને "જ્યાં જેમ" કલમમાં, સમાન સંયોજનો શબ્દમાળાઓ સાથે બધી શોધને પરત કરવા માટે વાપરી શકીએ છીએ.

એડોનિસજેએસ async અને મહાન પ્રભાવ માટે કીવર્ડ્સ રાહ જોતો ઉપયોગ કરે છે. જેવી પદ્ધતિઓ શોધો ક્વેરી વળતર વચનો, તેથી અમે કરી શકો છો રાહ જોવી હજુ પણ 100% અસુમેળ કોડ લખી જ્યારે.

હું એડનિઝજેએસની ઘણી વિગતો છોડું છું, જે મને ખરેખર ગમતું નથી જો તમે આ ભાગ સાથે સંઘર્ષ કરી રહ્યાં છો; ટ્વિટર પર મારી સાથે વાત કરો, અને યોગ્ય દિશામાં મીમલ્ટ બિંદુ.

નજીકના સ્થાનો મેચિંગ

હવે અમને "નજીકના" સ્થાનો મળ્યા છે, અમે તેમની સંબંધિત અંતરની તુલના વપરાશકર્તાને ક્યાંથી કરી શકીએ તે તુલના કરી શકીએ છીએ. જો તમારી પાસે હજી સુધી કોઈ Google API કી નથી, તો એક મેળવવા માટેના પાછલા ટ્યુટોરીયલમાં પાછા ફરો. અમે Google અંતર સેમ્યુઅલ સેવા બનવા જઈ રહ્યાં છીએ:

     https: // નકશા. ગૂગલ com / maps / api / distancematrix / json? ↵મોડ = વૉકિંગ અને ↵એકમો = મેટ્રિક & ↵ઉત્પત્તિ = -33 872527399999996,18 633 9 64 અને ↵સ્થળો = -33 872527399999997,18 633 9 65 અને ↵કી = YOUR_API_KEY

અંતર મીમલ્ટ સર્વિસ વાસ્તવમાં બહુવિધ ઉત્પત્તિની મંજૂરી આપે છે, તેથી અમે તમારી બધી શોધોને લાંબા મૂળ સ્ટ્રિંગમાં ભેગા કરી શકીએ છીએ:

     સંકોચો ઘટાડવા શોધખોળ = (એસીસી, શોધ) => {const {અક્ષાંશ, રેખાંશ} = શોધ`$ {ACC} | $ {અક્ષાંશ}, $ {રેખાંશ}` પરત કરો}રસ્તો વિચાર ("શોધ", async ({વિનંતી, પ્રતિસાદ}) => {const {અક્ષાંશ, રેખાંશ} = વિનંતી બધા  // . શોધો મેળવોસંક્ષિપ્ત મૂળ = શોધ TOJSON    ઘટાડે (શોધો ઘટાડે છે, ""). સબસ્ટ્રે   // કન્સોલ લોગ (મૂળ)પ્રતિસાદ મોકલો ("કરેલ")// . અક્ષાંશ અને રેખાંશ સાથે કંઈક કરો})

આ પ્રોક્સી / પ્રારંભ / રુટ છે જેએસ

અમે ઑબ્જેક્ટ્સના એરેમાં શોધ પરિણામોને રૂપાંતરિત કરી શકીએ છીએ. આ ઉપયોગી છે કારણ કે આપણે એરેને ઘટાડી શકીએ છીએ, દરેક શોધના અક્ષાંશ અને રેખાંશને શબ્દમાળામાં સંયોજન કરીએ છીએ. તે શબ્દમાળા | સાથે શરૂ થશે , તેથી અમે ઇન્ડેક્સ 1 થી શરૂ થતી સ્ટ્રિંગ મેળવવાની જરૂર છે.

હું બ્રાઉઝર ફેચ API ના ચાહક છું, તો ચાલો નોડજેએસ પોલિફિલ સ્થાપિત કરીએ:

     npm સ્થાપિત --save નોડ-ફેચ-પોલીફિલ

આ પોલીફિલનો ઉપયોગ કરીને, અમે Google તરફથી અંતરની સૂચિ મેળવી શકીએ છીએ:

     "કડક ઉપયોગ કરો"const fetch = use ("નોડ-ફેચ-પોલીફિલ")const env = use ("env")કોન્સ્ટ રૂટ = ઉપયોગ ("રૂટ")const શોધ = ઉપયોગ કરો ("એપ / મોડલ્સ / શોધ")કન્વેષણ શોધ પોઇન્ટ = (કાચો, અક્ષરો = 8) => {// . }const ઘટાડે શોધો = (એસીસી, શોધ) => {// . }રસ્તો વિચાર ("શોધ", async ({વિનંતી, પ્રતિસાદ}) => {const {અક્ષાંશ, રેખાંશ} = વિનંતી બધા  // . મૂળ વિચારconst કી = Env ("GOOGLE_KEY") મેળવોconst અંતરસંસ્કાર = રાહ જોવી`https: // નકશા. com / maps / api / distancematrix / json? ↵મોડ = વૉકિંગ અને એકમો = મેટ્રિક અને ઉત્પત્તિ = $ {મૂળ} & ↵સ્થળો = $ {અક્ષાંશ}, $ {રેખાંશ} અને કી = $ {કી} `,)કંટ્રોલ અંતર ડેટા = અંતરની રાહ જોવી. જેએસન   // કન્સોલ લોગ (અંતર ડેટા)પ્રતિસાદ મોકલો ("કરેલ")// . ડેટા સાથે કંઈક કરો})

આ પ્રોક્સી / પ્રારંભ / રુટ છે જેએસ

ફેચ વચન આપે છે, તેથી અમે કરી શકો છો રાહ જોવી તે. પ્રતિભાવમાં જેએસએન પદ્ધતિ છે, જે JSON એરે અથવા ઑબ્જેક્ટમાં કાચા પ્રતિભાવને શ્રેણીબદ્ધ કરે છે. પછી સંયુક્ત સંયુક્ત કોઓર્ડિનેટ્સ આપો (બધું દૂરસ્થ પ્રારંભ બિંદુ જેવું), અમે બધા અંતર યાદી મળી. પ્રતિસાદ ઑબ્જેક્ટ મૂળ કોઓર્ડિનેટ્સની જેમ જ ક્રમમાં છે. આ ચાલુ રહેશે કારણ કે અમે ચાલુ છીએ .

એડોનિસજેએસ env ફાઇલ સપોર્ટ આપણે અગાઉના ટ્યુટોરીયલો env ને જતું કરી શકીએ છીએ. ઉદાહરણ. જેએસ અને env. જેએસ ફાઇલો; અને ફક્ત નો ઉપયોગ કરો env અને . env ઉદાહરણ પહેલેથી હાજર છે મેં બન્નેને GOOGLE_KEY ઉમેર્યા છે, જેમ તમે જોઈએ. અમે પછી ઉપયોગ કરી શકો છો Env મૂલ્ય મેળવવા માટે મેળવો

તેમાંથી કોઈની પાસે વિનંતી કરાયેલ કોઓર્ડિનેટ્સના 10 મીટરની અંદર છે કે કેમ તે શોધવા માટે અમે પરિણામોની તપાસ કરી શકીએ છીએ:

     રૂટ વિચાર ("શોધ", async ({વિનંતી, પ્રતિસાદ}) => {const {અક્ષાંશ, રેખાંશ} = વિનંતી બધા  // . અંતર માહિતી મેળવોમાટે (મને અંતર ડેટા પંક્તિઓ દાખલ કરો) {const {તત્વો} = અંતર ડેટા પંક્તિઓ [i]જો (તત્વોના પ્રકાર [0] === "અવ્યાખ્યાયિત") {ચાલુ રાખો}જો (તત્વો [0]. સ્થિતિ! == "બરાબર") {ચાલુ રાખો}કોન્ટ મેચ = ઘટકો [0] અંતર ટેક્સ્ટ મેચ (/ ([0-9] +) \ s + m /)જો (મેચો === નલ || parseInt (મેચ [1], 10)> 10) {ચાલુ રાખો}પ્રતિસાદ જેએસએન (જેએસઓન. પર્સ (સર્ચ રૅઝ [i]. પ્રતિભાવ))વળતર}// . કેશ્ડ પરિણામ મળ્યું નથી, નવું ડેટા મેળવો!})

આ પ્રોક્સી / પ્રારંભ / રુટ છે જેએસ

અમે અંતર પંક્તિઓ દ્વારા લૂપ કરી શકીએ છીએ, દરેક માટે અમુક ચેક કરી શકીએ છીએ. જો મૂળ કોઓર્ડિનેટ્સ અમાન્ય છે, તો અંતર મીમોલ્ટ સેવા તે પંક્તિ માટે એક ભૂલ પરત કરી શકે છે જો તત્વો દૂષિત છે (અવ્યાખ્યાયિત અથવા ભૂલભરેલું) તો પછી અમે પંક્તિ અવગણો

જો કોઈ માન્ય માપદંડ છે (જે એનએમ સ્વરૂપમાં એક છે, જ્યાં એન 1 - 10 છે); પછી અમે તે પંક્તિ માટે પ્રતિક્રિયાને પાછો મોકલીએ છીએ અમને નવા શરણાગત માહિતીની વિનંતી કરવાની જરૂર નથી. સંભવિત ઘટનામાં અમારી પાસે કોઈ નજીકના કોઓર્ડિનેટ્સ કેશ્ડ નથી; અમે નવા ડેટાને વિનંતી કરી શકીએ છીએ:

     રૂટ વિચાર ("શોધ", async ({વિનંતી, પ્રતિસાદ}) => {const {અક્ષાંશ, રેખાંશ} = વિનંતી બધા  // . કેશ્ડ ડેટા માટે તપાસોકોન્ફ્રેન્ડ રિઝોપેન્સ = રાહ જોવી`https: // www શરણાર્થીઓ org / api / v1 / restrooms / by_location જેસન? ↵lat = $ {latitude} અને lng = $ {રેખાંશ} `,)શરણાગતિ જેએસન   શોધ રાહ જોવી. બનાવો ({અક્ષાંશ,રેખાંશ,પ્રતિસાદ: JSON તંતુવાદ્ય (આશ્રયદાતા),})પ્રતિસાદ જેએસન (આશ્રયદાતા)વળતર})

આ પ્રોક્સી / પ્રારંભ / રુટ છે જેએસ

જો કોઈ કેશ કરેલા શોધો ન હોય, તો અમે શરણાગત પરિણામોના નવા સેટની વિનંતી કરીએ છીએ. અમે તેમને અનલ્રર્ડ પાછા આવી શકીએ છીએ; પરંતુ ડેટાબેઝમાં શોધને બચાવવા પહેલાં નહીં. પ્રથમ વિનંતી અનુગામી અરજીઓ કરતાં સહેજ ધીમી હોવી જોઈએ. અમે અનિવાર્યપણે રેફ્યુજી API પ્રોસેસિંગને ડિસ્ટન્સ સેમેલ્ટ API પર લોડ કરી રહ્યાં છીએ. અમારી પાસે CORS પરવાનગીઓ મેનેજ કરવાની રીત પણ છે, હવે

બ્રાઉઝરમાં પરિણામો મેળવવી

ચાલો આ ડેટાનો ઉપયોગ બ્રાઉઝરમાં કરીએ. એક પાર્સેલજેએસ બિલ્ડ સાંકળ સેટ કરવાનો પ્રયાસ કરો (અથવા પાછલા ટ્યુટોરીયલમાં પાછા જુઓ જ્યાં અમે આ કર્યું છે). આમાં એપ્લિકેશનમાં WRLD SDK ને ઇન્સ્ટોલ અને લોડ કરવાનું શામેલ છે જેએસ ફાઇલ. જેએસ ")const tester = async => {પ્રતિસાદ = રાહ જોવી"http: // 127 0. 0. 1: 3333 / શોધ? ↵અક્ષાંશ = -33 872527399999996 અને રેખાંશ = 18 633 9 64 ",)કોન્સર્ટ ડેટા = પ્રતિસાદની રાહ જોવી. જેએસન કન્સોલ લોગ (ડેટા)}પરીક્ષક

આ એપ્લિકેશન / એપ્લિકેશન છે જેએસ

તમે નીચેની આદેશ સાથે આ પોટલું કરવાનો પ્રયત્ન કરીશું:

     પાર્સલ ઇન્ડેક્સ html

તમારું ફોલ્ડર સ્ટ્રક્ચર આ પ્રમાણે હોવું જોઈએ:

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

અગાઉના ટ્યુટોરીયલમાં, તે જ ફોલ્ડર સ્ટ્રક્ચર છે જે આપણે બનાવ્યું છે. એપ્લિકેશનના સમાવિષ્ટને બદલીને, તમે તે બધાની નકલ પણ કરી શકો છો જેએસ તમે ઉપર શું જુઓ છો તે સાથે. ટેસ્ટર ફંક્શન એ દર્શાવવા માટે છે કે આપણે હજુ સુધી અમારા કેશિંગ પ્રોક્સી સર્વરથી માહિતીની વિનંતી કરી શકીએ નહીં. તે માટે, અમારે એડનિઝજેસ CORS સ્તર સક્રિય કરવાની જરૂર છે:

     "કડક ઉપયોગ કરો"મોડ્યુલ નિકાસ = {/ *| ------------------------------------------------- -------------------------| મૂળ| ------------------------------------------------- -------------------------|| મંજૂર થવાની શરૂઆતની સૂચિ સેટ કરો . * /મૂળ: સાચું,// . બાકીના CORS સેટિંગ્સ}

આ પ્રોક્સી / config / cors છે. જેએસ

જો આપણે મૂળ થી સાચા સેટ કરીએ, તો બધી CORS વિનંતી સફળ થશે. પ્રોડક્શન પર્યાવરણમાં, તમે કદાચ એવા બંધનો પૂરો પાડવા માંગો છો કે જે શરતી રીતે સાચું પાછી આપે છે; જેથી તમે આ API ને કોણ વિનંતી કરી શકે તે મર્યાદિત કરી શકો છો.

જો તમે બ્રાઉઝર રીફ્રેશ કરો છો, તો તે URL માટે ખુલ્લું છે, જે સેમેલ્ટજેએસ સેવા આપે છે; તમે હવે કન્સોલમાં પરિણામો જોવા માટે સમર્થ હોવા જોઈએ:

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

એ ચેતવણી તરફ ધ્યાન આપશો નહીં. તે માત્ર એક ક્ષણ કર્યા ParcelJS હોટ મોડ્યુલ સેમ્યુઅલ છે .

આ બિંદુથી આગળ, અમે કોચિએટના સમૂહને નજીકના સુવિધાઓ શોધવા માટે કેશીંગ પ્રોક્સી સર્વરનો ઉપયોગ કરવાનું શરૂ કરી શકીએ છીએ. નકશા ઉમેરો મીઠું!

ડબ્લ્યુઆરએલડી સાથે સંકલન

ચાલો env ઉમેરીને શરૂ કરીએ જેએસ અને env. ઉદાહરણ. જેએસ ફાઇલો, પ્રથમ ટ્યુટોરીયલમાંથી, એપ્લિકેશન ફોલ્ડરમાં. પછી અમે તેનો ફરીથી નકશો રેન્ડર કરવા માટે ઉપયોગ કરી શકીએ છીએ:

     const Wrld = need ("wrld .js")const env = require (". / env")કર્નલ કીઓ = {wrld: env. WRLD_KEY,}// . ટેસ્ટર કોડવિન્ડો addEventListener ("લોડ કરો", async    => {કોન્સ્ટ મેપ = રેગ્લ્ડ. નકશો ("નકશો", કીઓ. wrld, {કેન્દ્ર: [40. 7484405, -73 98566439999999],ઝૂમ: 15,})})

આ એપ્લિકેશન / એપ્લિકેશન છે જેએસ

અહીં આપણે પાછા એમ્પાયર સ્ટેટ બિલ્ડિંગમાં છીએ. તે વધુ સારું રહેશે જો આપણે વપરાશકર્તાના નજીકથી નજીકથી શરૂ કરી શકીએ. અને, જો અમે વૈવિધ્યપૂર્ણ કોઓર્ડિનેટ્સ સાથે ભૌગોલિક સ્થાનને ઓવરરાઇડ કરવાનો રસ્તો પ્રદાન કરી શકીએ. ચાલો HTML5 ભૌગોલિક સ્થાન API માં ટેપ કરીએ:

     વિંડો. addEventListener ("લોડ કરો", async    => {નકશા દોનેવિગેટર ભૌગોલિક સ્થાન getCurrentPosition (સ્થિતિ => {const {અક્ષાંશ, રેખાંશ} = સ્થિતિ કોર્ડ્સનકશા = Wrld. નકશો ("નકશો", કીઓ. wrld, {કેન્દ્ર: [અક્ષાંશ, રેખાંશ],ઝૂમ: 15,})},ભૂલ => {નકશા = Wrld. નકશો ("નકશો", કીઓ. wrld, {કેન્દ્ર: [40. 7484405, -73 98566439999999],ઝૂમ: 15,})},)})

આ એપ્લિકેશન / એપ્લિકેશન છે જેએસ

અમે વપરાશકર્તાના શ્રેષ્ઠ-અનુમાન કોઓર્ડિનેટ્સ મેળવવા માટે getCurrentPosition નો ઉપયોગ કરી શકીએ છીએ. જો વપરાશકર્તા ભૌગોલિક સ્થાન ડેટા માટે વિનંતીને નકારી કાઢે છે, અથવા કંઈક બીજું ખોટું થાય છે, તો અમે જાણીતા કોઓર્ડિનેટ્સના સમૂહને ડિફોલ્ટ કરી શકીએ છીએ.

કોઈ દસ્તાવેજીકૃત ભૂલની દલીલ નહીં, પરંતુ કોડને સ્પષ્ટ કરવા માટે હું માપદંડ મુકવા માંગું છું.

તે સ્વયંસંચાલિત સ્થાનનું નિદાન થયું છે. / એપ્લિકેશન જેએસ ">

આ એપ્લિકેશન / ઇન્ડેક્સ છે. html

     નિયંત્રણો {સ્થિતિ: નિરપેક્ષ;ટોચ: 0;અધિકાર: 0;બેકગ્રાઉન્ડ: આરજીબીએ (255, 255, 255, 0. 5);ગાદી: 10 પીએક્સ;}

આ એપ્લિકેશન / એપ્લિકેશન છે CSS

     વિંડો. addEventListener ("લોડ કરો", async    => {નકશા દોconst અક્ષાંશ ઇનપુટ = દસ્તાવેજ ક્વેરી સિલેક્ટર ("[name = 'latitude']")const રેગ્યુલેશન ઇનપુટ = દસ્તાવેજ. ક્વેરી સિલેક્ટર ("[નામ = 'રેખાંશ']")const લાગુ કરોબટન = દસ્તાવેજ ક્વેરી સિલેક્ટર ("[નામ = 'લાગુ']")લાગુ કરોબટન. addEventListener ("ક્લિક કરો",    => {નકશો. setView ([latitudeInput મૂલ્ય, રેખાંશ ઇનપુટ. મૂલ્ય])})નેવિગેટર ભૌગોલિક સ્થાન getCurrentPosition (સ્થિતિ => {const {અક્ષાંશ, રેખાંશ} = સ્થિતિ કોર્ડ્સઅક્ષાંશ ઇનપુટ મૂલ્ય = અક્ષાંશરેખાંશ ઇનપુટ મૂલ્ય = રેખાંશનકશા = Wrld. નકશો ("નકશો", કીઓ. wrld, {કેન્દ્ર: [અક્ષાંશ, રેખાંશ],ઝૂમ: 15,})},ભૂલ => {નકશા = Wrld. નકશો ("નકશો", કીઓ. wrld, {કેન્દ્ર: [40. 7484405, -73 98566439999999],ઝૂમ: 15,})},)})

આ એપ્લિકેશન / એપ્લિકેશન છે જેએસ

અમે ઉમેરવામાં નવા ઇનપુટ તત્વો સંદર્ભો દ્વારા શરૂ થાય છે. જ્યારે લાગુ છેબટન ક્લિક કરવામાં આવે છે, અમે નકશા તાજેતરના કરવા માંગો છો. ભૌગોલિક સ્થાન ડેટા સફળ થાય ત્યારે, અમે આ ઇનપુટ્સને યોગ્ય અક્ષાંશ અને રેખાંશ સાથે પૉપણી કરી શકીએ છીએ.

હવે, નજીકના સુવિધા ઇમારતોને હાઇલાઇટ કરવા વિશે શું?

     નકશો દોહાયલાઇટ ફીકિટ્સ = []const highlightFacilities = async (અક્ષાંશ, રેખાંશ) => {માટે (પ્રકાશિત ફીચર્સની સુવિધા આપવાનું) {સુવિધા દૂર કરો   }પ્રકાશિત ફીચર્સ = []સંસ્થાન સવલતો રીસપેક્શન = રાહ જોવી`http: // 127 0. 0. 1: 3333 / શોધ? અક્ષાંશ = $ {અક્ષાંશ} અને રેખાંશ = $ {રેખાંશ} `,)કોન્સ્ટટ સવલતો ડેટા = સુવિધાઓની રાહ જોવી જેએસન   માટે (સગવડો સુવિધા સુવિધા દો) {// કન્સોલ લોગ (સુવિધા)કોન્ટ રંગ =સુવિધા upvote> = સુવિધા ડાઉનવોટ? [125, 255, 125, 200]: [255, 125, 125, 200]const હાઇલાઇટ = Wrld ઇમારતો બિલ્ડિંગ હાઇલાઇટ (Wrld ઇમારતો બિલ્ડિંગ હાઇલાઇટઓપ્શન    હાઇલાઇટબિલ્ડિંગઅટ સ્થાન ([સુવિધા અક્ષાંશ,સુવિધા રેખાંશ,]). રંગ (રંગ),). એડટૂ (નકશો)હાઇલાઇટ કરેલા ક્ષમતાઓ દબાણ કરો (હાઇલાઇટ કરો)}}વિન્ડો addEventListener ("લોડ કરો", async    => {// . બટન ઇવેન્ટ ઉમેરોનેવિગેટર ભૌગોલિક સ્થાન getCurrentPosition (સ્થિતિ => {const {અક્ષાંશ, રેખાંશ} = સ્થિતિ કોર્ડ્સ// . નકશા બનાવોનકશો. પર ("પ્રારંભિક ધોરણપૂર્ણ",    => {હાઇલાઇટ ફીક્ટીલીટીઝ (અક્ષાંશ, રેખાંશ)})},ભૂલ => {// . નકશા બનાવોનકશો. પર ("પ્રારંભિક ધોરણપૂર્ણ",    => {હાઇલાઇટ ફીક્ટીલીટીઝ (40. 7484405, -73 .98566439999999)})},)})

આ એપ્લિકેશન / એપ્લિકેશન છે જેએસ

જ્યારે આપણે નકશા બનાવીએ અથવા તેનું ધ્યાન બદલ્યું હોય, ત્યારે આપણે હાઇલાઇટ ફીક્ટીલીટીઝ ફંક્શનને કૉલ કરી શકીએ છીએ. આ અક્ષાંશ અને રેખાંશ સ્વીકારે છે, અગાઉ તમામ પ્રકાશિત ઇમારતોને દૂર કરે છે અને કેશીંગ પ્રોક્સી શોધ દ્વારા પરત આવતી તમામ ઇમારતોને હાઇલાઇટ કરે છે.

50% કે તેથી વધુ અપગ્રેશે ઇમારતો માટે લીલી હાઇલાઇટ પસંદ કરીને સેમલાટ; અને બાકીના માટે એક લાલ હાઇલાઇટ આનાથી બહેતર સુવિધાઓ શોધવાનું સરળ બનશે. અમે પ્રકાશિત ઇમારતો થોડી સ્પષ્ટ કરી શકીએ છીએ; નકશા માર્કર્સ ઉમેરીને અને દબાવવામાં / ક્લિક ત્યારે પૉપઅપ્સ બતાવો:

     નકશો દોહાયલાઇટ ફીકિટ્સ = []હાઇલાઇટરમાર્કર્સ દો [=]const highlightFacilities = async (અક્ષાંશ, રેખાંશ) => {માટે (પ્રકાશિત ફીચર્સની સુવિધા આપવાનું) {સુવિધા દૂર કરો   }પ્રકાશિત ફીચર્સ = []માટે (હાઇલાઇટર માર્કર્સનું માર્કર દો) {માર્કર દૂર કરો   }હાઇલાઇટર માર્કર્સ = []સંસ્થાન સવલતો રીસપેક્શન = રાહ જોવી`http: // 127 0. 0. 1: 3333 / શોધ? અક્ષાંશ = $ {અક્ષાંશ} અને રેખાંશ = $ {રેખાંશ} `,)કોન્સ્ટટ સવલતો ડેટા = સુવિધાઓની રાહ જોવી જેએસન   માટે (સગવડો સુવિધા સુવિધા દો) {const સ્થાન = [સુવિધા. અક્ષાંશ, સુવિધા રેખાંશ]// . હાઇલાઇટ રંગ ઉમેરોસંયોજન આંતરછેદ = નકશો ઇમારતો findBuildingAtLatLng (સ્થાન)માર્કર દોજો (આંતરછેદ મળી) {માર્કર = એલ. માર્કર (સ્થાન, {એલિવેશન: ઇન્ટરસેક્શન બિંદુ alt,શીર્ષક: સુવિધા નામ,}) એડટૂ (નકશો)} બીજું {માર્કર = એલ. માર્કર (સ્થાન, {શીર્ષક: સુવિધા નામ,}) એડટૂ (નકશો)}જો (સવલત ટિપ્પણી) {માર્કર બાઈન્ડપેપ (સવલત ટિપ્પણી). openPopup   }હાઇલાઇટર માર્કર્સ દબાણ (માર્કર)}}વિન્ડો addEventListener ("લોડ કરો", async    => {// . બટન ઇવેન્ટ ઉમેરોનેવિગેટર ભૌગોલિક સ્થાન getCurrentPosition (સ્થિતિ => {const {અક્ષાંશ, રેખાંશ} = સ્થિતિ કોર્ડ્સ// . નકશા બનાવોનકશો. પર ("પેનૅન્ડ", ઇવેન્ટ => {const {lat, lng} = નકશો getBounds    getCenter   અક્ષાંશ ઇનપુટ કિંમત = latરેખાંશ ઇનપુટ મૂલ્ય = lng})},ભૂલ => {// . નકશા બનાવોનકશો. પર ("પેનૅન્ડ", ઇવેન્ટ => {const {lat, lng} = નકશો getBounds    getCenter   અક્ષાંશ ઇનપુટ કિંમત = latરેખાંશ ઇનપુટ મૂલ્ય = lng})},)})

આ એપ્લિકેશન / એપ્લિકેશન છે જેએસ

અમે નકશા બનાવતી સ્થાનોને પૅનૅન્ડ ઇવેન્ટ્સ ઉમેરી શકીએ છીએ. આ જ્યારે ટ્રિગર થઈ જાય છે ત્યારે વપરાશકર્તાએ પેન શરૂ કર્યું છે, અને નકશો આરામ કરવા માટે આવે છે. અમે દૃશ્યમાન મેપ સીમા મેળવીએ છીએ અને તેમાંથી કેન્દ્ર મેળવો

પછી, હાઇલાઇટ ફીક્ટીલીટીઝ ફંક્શનમાં, અમે માર્કર્સ અને વૈકલ્પિક પૉપઅપ્સ ઉમેર્યા છે (જો પ્રદર્શિત કરવાની પ્રશંસા છે.) તે હાઇલાઇટ કરેલા ઇમારતોને શોધવામાં સહેલું બનાવે છે, અને કોઈપણ વધારાની માહિતી શોધવા વિશે તેઓ જે સુવિધા ધરાવે છે.

વાતાવરણ ઉમેરવું

નકશા દૃશ્યમાં કેટલાક વાતાવરણીય અસરો ઉમેરીને મીઠું સમાપ્ત થાય છે. શરુ કરવા માટે, અમે અમારા કેશીંગ પ્રોક્સી માટે "હવામાન પરિસ્થિતિઓ" સમાપ્તિબિંદુ ઉમેરી શકીએ છીએ:

     રૂટ વિચાર ("શરત", async ({વિનંતી, પ્રતિસાદ}) => {const {અક્ષાંશ, રેખાંશ} = વિનંતી બધા  const કી = Env ("OPENWEATHER_KEY") મેળવોconst હવામાન રીસ્પેન્શન = રાહ જોવી`http: // api ઓપનવેધરમેપ સંસ્થા / માહિતી / 2 5 / હવામાન? ↵lat = $ {અક્ષાંશ} અને લોન = $ {રેખાંશ} અને એપ્લિકેશન = $ {કી} `,)const હવામાનડેટા = હવામાનની રાહ જોવી. જેએસન   પ્રતિસાદ જેએસન (હવામાન ડેટા)})

આ પ્રોક્સી / પ્રારંભ / રુટ છે જેએસ

આને ઓપન હવામાન મેપ એકાઉન્ટ બનાવવાની જરૂર છે. અમને મળેલી API કી માં ઉમેરવાની જરૂર છે. env અને . env ઉદાહરણ પછી અમે બ્રાઉઝરમાં આ ડેટાને વિનંતી કરવાનું શરૂ કરી શકીએ છીએ. જો તે પ્રદેશ માટે હવામાન WRLD હવામાન પ્રીસેટ્સ એક સાથે બંધબેસે છે; અમે તેને નકશા પર લાગુ કરી શકીએ છીએ. અમે દિવસનો સમય સેટ કરવા માટે બ્રાઉઝરનો સમય પણ વાપરી શકીએ છીએ:

     const Wrld = need ("wrld .js")const env = require (". / env")કર્નલ કીઓ = {wrld: env હાઇલાઇટ ઇમારતો અને માર્કર્સ ઉમેરોપ્રયાસ કરો {const હવામાન રીસ્પેન્શન = રાહ જોવી`http: // 127 0. 0. 1: 3333 / શરત? ↵અક્ષાંશ = $ {અક્ષાંશ} અને રેખાંશ = $ {રેખાંશ} `,)const હવામાનડેટા = હવામાનની રાહ જોવી. જેએસન   જો (હવામાન ડેટા. હવામાન && હવામાન ડેટા હવામાન લંબાઈ> 0) {સંસ્થિત સ્થિતિ = હવામાન ડેટા હવામાન [0]. મુખ્ય. toLowerCase   સ્વીચ (શરત) {કેસ "બરફ":નકશો. થીમ્સ સેટ વેઈડર (રેલ્ડે થીમ્સ. હવામાન. સ્નોવી)વિરામકેસ "થોડા વાદળો":કેસ "સ્કેટર્ડ વાદળો":કેસ "તૂટેલા વાદળો":નકશો. થીમ્સ સેટ વેઈડર (ખોટી થીમ્સ.વિરામકેસ "ઝાટપટ":નકશો. થીમ્સ સેટ વેઇથર (ખોટા થીમ્સ. હવામાન.વિરામકેસ "ફુવારો વરસાદ":કેસ "વરસાદ":કેસ "તોફાન":નકશો. થીમ્સ સેટ વેઈડર (રેલ્ડે થીમ્સ. હવામાન વરસાદી)વિરામડિફોલ્ટ:નકશો. થીમ્સ સેટ વેઈડર (ખોટી થીમ્સ. હવામાન સાફ કરો)વિરામ}}const સમય = નવી તારીખ   . getHours   જો (સમય> 5 && સમય  <= 10) {નકશો. થીમ્સ સેટટાઇમ (Wrld થીમ્સ. સમય ડોન)} બીજું જો (સમય>  10 && સમય  <= 16) {નકશો. થીમ્સ સેટ સમય (Wrld થીમ્સ સમય. દિવસ)} બીજું જો (સમય>  16 && <21) {નકશો Source . થીમ્સ સેટટાઇ


                                                                March 1, 2018

Recent Questions

Categories

ફેસિલીટી ડેટા મેળવવી

સ્થળાંતર અને નમૂનાઓ બનાવવું

નજીકના સ્થાનો મેચિંગ

બ્રાઉઝરમાં પરિણામો મેળવવી

ડબ્લ્યુઆરએલડી સાથે સંકલન

વાતાવરણ ઉમેરવું