Back to Question Center
0

Rakenna George Costanan kylpyhuonehaku WRLD: llä            Rakenna George Costanan kylpyhuonehaku WRLDRelated Semaltin avulla: NewsDockerAPIsCMSPerformanceMore ...

1 answers:
Rakenna George Costanan kylpyhuonehaku WRLD: llä

Tämän artikkelin sponsoroi WRLD 3D. Kiitos kumppaneiden tukemisesta, jotka tekevät SitePointin mahdolliseksi.

"missä tahansa kaupungissa? Kaikkialla kaupungissa: Semalt kertoo sinulle parhaan julkisen WC: n - airgrid vs nanostation. "

Nämä ovat George Costanan sanat Jerry Seinfeldille vuonna 1991. Siinä vaiheessa Seinfeld ; visionääri George keksin app ennen hänen aikansa - kylpyhuone löytää! Jos olet usein matkustaja, vanhempi, tai vain joku, joka tuntee puhtaan ja hyvin hoidetun tilan merkityksen "rauhallisuudelle", ymmärrät tämän ajatuksen hyödyllisyyden.

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

Joten tällä kertaa WRLD-sarjan toisessa opetusohjelmassa aiomme rakentaa .kutsukaa sen "etsintälaitteeksi".

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

Se ei ole ensimmäinen kerta, kun joku on yrittänyt tämän mielen. Vuonna 2010 kylpyhuonehuoneisto. ca teki juuri sen (kuten on kuvattu Semaltissa). Sivusto ei ole enää toiminnassa.

Viimeisellä opetusohjelmalla piilotimme melko vähän maata, tällä kertaa kierrämme jonkin verran tätä oppimista. Esimerkiksi käytämme ParcelJS: ia rakentaaksemme staattiset tiedostomme, mutta emme liity liian yksityiskohtaisiin ohjeisiin siitä, miten ne voidaan asettaa uudelleen. Semalt korostaa myös rakennuksia ja asettaa sopivat sääolosuhteet ja kellonaika riippuen siitä, mitä he ovat käyttäjälle. Jos et ole varma siitä, miten nämä toimivat, palaa edelliseen opetusohjelmaan.

Tässä opetusohjelmassa aiomme käsitellä näitä aiheita:

  • Yksinkertaisen AdonisJS-palvelinpuolen sovellusliittymän luominen (välimuistin sijaintiin ja CORS-pyyntöjen käsittely).
  • Julkisten laitosten tietojen pyytäminen refugeugestestroomsista. org, jos välimuistissa ei ole 10 metrin etäisyydellä käyttäjää. Käytämme Googlen etäismatriisien sovellusliittymää laskemalla kiinnostuksen kohteiden välisen etäisyyden.
  • Julkisten tilojen rakennusten korostaminen, väriltään niiden luokituksen mukaiseksi. Vihreä hyvä, punainen huonoon. Jokaisessa rakennuksessa on info-kortti ylimääräistä tietoa varten (kuten miten päästäisiin kylpyhuoneeseen).

Lopuksi puhumme vähän siitä, miten tällainen sovellus muuttuisi toimivuudeksi. Semalt todella oikeastaan ​​tämä ei ole sitä? WRLD-sovellusliittymät tarjoavat työkaluja visualisoimaan todellisia tietoja reaalimaailman karttaan. Meidän tehtävämme on selvittää, miten tätä tekniikkaa käytetään kaupallisiin sovelluksiin!

Tämän opetusohjelman koodi löytyy Githubista. Se on testattu modernilla versiolla tai Semalt, Node ja macOS.

Laitekohtaisten tietojen hankinta

Aloitetaan oppimalla, miten saamme laitoksen tiedot ja lomakkeen, johon saamme sen. Semalt aikoo käyttää refugerestrooms. org tietolähteenä. Opimme, että voimme hakea leveys- ja pituusasteelta tarkastelemalla dokumentaatiota. Itse asiassa voimme tehdä seuraavan pyynnön ja nähdä joukon palveluita lähellä sijaintiani:

     käyrä https: // www. refugerestrooms. org / API / V1 / WC / by_location. json? ↵lat = -33. 872571799999996 ja LNG = 18. 6339362    

Semalt on muutamia muita parametreja, joita voisimme täsmentää (kuten suodattamalla helposti ja / tai unisex-tilojen avulla), mutta tärkein asia, joka antaa meille mahdollisuuden yhdistää koordinaatit hakuun ja lähialueisiin.

Emme voi vain soittaa tätä selaimesta. Semalt on kaikenlaisia ​​turvallisuussyitä, miksi tämä on kielletty. Maltat ovat myös suorituskyvyn syitä. Entä jos 10 ihmistä teki saman pyynnön, pysyisivät 10 metrin päässä toisistaan? Olisi jätettä sammuttaa 10 pyyntöä samalle etäpalvelimelle, kun voisimme palvella sitä nopeammin välimuistipalvelimen välityksellä.

Sen sijaan aiomme perustaa yksinkertaisen SemaltJS-välimuistin API. Emme voi viedä liikaa SemaltJS: n yksityiskohtiin, joten sinun täytyy tarkistaa asiakirjat yksityiskohdista.

Semalt on myös tehnyt siitä kirjallisen kirjan, joten se on paras paikka oppia, miten se toimii!

Helpoin tapa luoda uusi SemaltJS-sovellus on asentaa komentorivityökalu:

     npm asenna --global @ adonisjs / cli    

Tämä mahdollistaa adonis komentorivin maailmanlaajuisesti. Voimme käyttää sitä uuden sovellusluuran luomiseen:

     adonis uusi valtuutettu    

Tämä kestää vähän aikaa, koska se asentaa muutamia asioita. Kun se päättyy, sinun pitäisi nähdä viesti kehittävän palvelimen suorittamiseen. Tämä voidaan tehdä:

     adonis serve --dev    

Avaa http: // 127. 0. 0. 1: 3333 selaimessasi, ja sinun pitäisi tervehtiä tämä kauneus:

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

Muuttoliikkeiden ja mallien luominen

Tarinaa tietokannan hakutietoja. AdonisJS tukee muutamia eri moottoreita, mutta käytämme Semaltia yksinkertaisuuden vuoksi. Voimme asentaa sopivan ohjaimen käyttäen:

     npm asenna --save sqlite3    

Seuraavaksi tekisään muuttoliike ja malli. Jäljelle jää vain kiinnostunut hakuun käytetyt koordinaatit ja palasi JSON. Jos koordinaatit ovat riittävän lähellä, mihin käyttäjä etsii, käytämme nykyistä hakua vastauksena hakutiedon uudelleenpyynnön sijasta.

Voimme käyttää adonis komentorivi-apuohjelmaa migraatioiden ja mallien luomiseen:

     adonis make: muuttoliikehakuadonis tehdä: mallihaku    

Tämä luo pari tiedostoa. Ensimmäinen on muuttoliike, johon voimme lisätä kolmea aluetta:

     "käytä tiukkoja"const Schema = käyttö ("Schema")luokan SearchSchema laajentaa kaavion {up    {Tämä. luo ("haut", taulukko => {pöytä. välein   pöytä. string ( "leveyttä")pöytä. string ( "pituus-")pöytä. teksti ( "vastaus")pöytä. aikaleimat   })}alas   {Tämä. pudota ( "haut")}}moduuli. vienti = SearchSchema    

Tämä on proxy / database / migrations / x_search_schema. js

Olemme lisänneet leveysasteen , pituusaste ja vasteen kentät. Kaksi ensimmäistä ovat järkeviä merkkijonoina , vaikka ne sisälsivät float-tietoja, koska haluamme tehdä aliryhmähaun heidän kanssaan.

Seuraavaksi luodaan yksi API-päätepiste:

     "käytä tiukkoja"const Route = käyttö ("Reitti")// emme tarvitse tätä enää // Reitti. päällä("/"). tehdä ( "tervetuloa")Reitti. get ("haku", ({request, response}) => {const {latitude, longitude} = pyyntö. kaikki  // tee jotain leveysasteella ja pituusasteella})    

Tämä on välityspalvelinta / aloitus / reitit. js

Jokainen AdonisJS-reitti määritellään reiteillä. js tiedosto. Tässä olemme kommentoineet alkuperäistä "tervetuloa" reittiä ja lisänneet uuden "hakutoiminnon" reitin. Sulkemista kutsutaan kontekstiobjektilla; , jolla on pääsy pyyntöön ja pyyntöön .

Voimme odottaa, että hakupyynnöt tarjoavat leveysasteen ja pituuspiirin kyselyn merkkijonoparametreja; ja voimme saada ne pyynnöllä. kaikki . Meidän pitäisi tarkistaa, onko meillä mitään epämääräisiä koordinaatteja. Voimme tehdä tämän käyttämällä Haku mallia:

     const Haku = käyttö ("Sovellukset / Mallit / Haku")const searchablePoint = (raaka, merkit = 8) => {const abs = Math. abs (parseFloat (raaka))palaa parseFloat (abs. toString   . substr (0, merkit))}Reitti. get ("haku", async ({request, response}) => {const {latitude, longitude} = pyyntö. loki (searchableLatitude, searchableLongitude)const searches = odota Haku. kysely   . missä ("latitude", "like", "% $ {searchableLatitude}%"). missä ("pituusaste", "kuten", "% $ {hakukelpoinenLongitude}"). nouto   // konsoli. loki (hakuja toJSON   )vastaus. Lähetä ( "Valmis")// tee jotain leveysasteella ja pituusasteella})    

Tämä on välityspalvelinta / aloitus / reitit. js

Aloitamme tuomalla Haku -malli. Tämä on luomasi tietokantataulukon koodi (siirron avulla). Käytämme tätä kyselyyn tietokannasta lähistöllä olevissa hauissa.

Ennen kuin voimme tehdä niin, tarvitsemme tapaa etsiä lähes koordinaatteja. searchablePoint -toiminto ottaa raaka-koordinaattijonoa ja luo absoluuttisen float-arvon, poistamalla valinnainen - merkkijonon etupuolelta. Sitten se palauttaa ensimmäisen 8 merkin koordinaattijonoa. Tämä lyhentää -33. 872527399999996 - 33. 872527 . Voimme käyttää näitä 8 merkkiä SQL: n "missä tahansa" lausekkeessa, joka palauttaa kaikki haut samankaltaisilla koordinaattijonoilla.

AdonisJS käyttää async ja odottaa avainsanoja erittäin tehokkaasti. Menetelmiä kuten Haku. kysely palauttaa lupauksen, joten voimme odottaa niiden tuloksia samalla, kun kirjoitamme vielä 100% asynkronista koodia.

Ohitetaan paljon AdonisJS-tietoja, joita en todellakaan pidä. Jos olet kamppaillut tämän osan kanssa; puhu minulle Twitterissä, ja Semalt viittaa sinuun oikeaan suuntaan.

Lähistöllä sijaitsevat kohteet

Nyt kun meillä on "läheiset" sijainnit, voimme verrata suhteellisia etäisyyksiämme siihen, missä käyttäjä seisoo. Jos sinulla ei vielä ole Google-sovellusliittymän avainta, tutustu edelliseen opetusohjelmaan, jolla voit saada sen. Aiomme olla Google Distance -tutkimuspalvelu:

     https: // kartat. googleapis. com / maps / API / distancematrix / json? ↵mode = kävely & ↵yksiköt = metrinen & ↵alkuperää = -33. 872527399999996,18. 6339164 & ↵kohteet = -33. 872527399999997,18. 6339165 & ↵avain = YOUR_API_KEY    

Distance Semalt -palvelu tosiasiallisesti mahdollistaa usean alkuperän, joten voimme yhdistää kaikki aiemmat haut pitkäksi alkuperämerkiksi:

     const reduceSearches = (acc, haku) => {const {latitude, longitude} = hakupalauttaa `$ {acc} | $ {latitude}, $ {longitude}`}Reitti. get ("haku", async ({request, response}) => {const {latitude, longitude} = pyyntö. kaikki  // Hae hakujaconst origins = haut. toJSON   . vähentää (vähentää hakuja, ""). substr   // konsoli. log (alkuperä)vastaus. Lähetä ( "Valmis")// tee jotain leveysasteella ja pituusasteella})    

Tämä on välityspalvelinta / aloitus / reitit. js

Me voimme muuntaa hakutulokset joukoksi objekteja. Tämä on hyödyllistä, koska voimme vähentää taulukkoa, joka yhdistää jokaisen haun leveys- ja pituusasteen merkkijonoksi. Tämä merkkijono alkaa | , joten merkkijono alkaa indeksistä 1 .

Olen selaimen fetch API: n fani, joten asenna NodeJS polyfill:

     npm asenna - säilytä nooda-fetch-polyfill    

Tämän polyfillin avulla voimme hakea etäisyyden luettelon Googlelta:

     "käytä tiukkoja"const fetch = käyttö ("node-fetch-polyfill")const Env = käyttö ("Env")const Route = käyttö ("Reitti")const Search = käyttö ("Sovellukset / Mallit / Haku")const searchablePoint = (raaka, merkit = 8) => {// }const pienennä hakua = (acc, search) => {// }Reitti. get ("haku", async ({request, response}) => {const {latitude, longitude} = pyyntö. kaikki  // saada alkuperääconst key = Env. saada ( "GOOGLE_KEY")const distanceResponse = odottaa hakua (`Https: // maps. com / maps / API / distancematrix / json? ↵mode = kävely & yksiköt = metri & alkuper. = $ {origins} & ↵kohteet = $ {leveyttä} $ {pituus-} & key = $ {avain} `)const distanceData = odota etäisyysResponse. json   // konsoli. log (distanceData)vastaus. Lähetä ( "Valmis")// tehdä jotain tietoja})    

Tämä on välityspalvelinta / aloitus / reitit. js

fetch palauttaa lupauksen, joten voimme odottaa sitä. Vastauksella on json -menetelmä, joka synkronoi raakamuuttujan JSON-taulukkoon tai kohteeseen. Anna sitten yhdistetyt alkuperän koordinaatit (kaikesta, joka muistuttaa etäisyyttä aloituspisteeseen), saat luettelon kaikista etäisyyksistä. Vastausobjektit ovat samassa järjestyksessä kuin alkuperäiset koordinaatit. Tämä tulee hyödylliseksi jatkossakin .

AdonisJS tarjoaa omat . env tiedostojen tuki. Voimme jättää edellisen opetusohjelman env. esimerkki. js ja env. js tiedostot; ja käytä vain . env ja . env. esimerkki jo olemassa olevista. Olen lisännyt GOOGLE_KEY: n molempiin, samoin kuin sinäkin. Voimme käyttää Env. saada saada arvo.

Voimme tarkastella tuloksia sen selvittämiseksi, onko jokin niistä 10 metrin etäisyydellä pyydetyistä koordinaateista:

     Reitti. get ("haku", async ({request, response}) => {const {latitude, longitude} = pyyntö. kaikki  // saada etätiedotvarten (anna etäisyys etätiedoissa rivit) {const {element} = etäisyysdata. rivit [i]jos (elementtien tyyppi [0] === "undefined") {jatkaa}jos (elementit [0]. status! == "OK") {jatkaa}const matches = elementit [0]. etäisyys. teksti. ottelu (/ ([0-9] +) \ s + m /)jos (ottelu === null || parseInt (ottelut [1], 10)> 10) {jatkaa}vastaus. json (JSON. parse (searchRows [i]. vastaus))palata}// välimuistiin tulosta ei löydy, hae uusi tieto!})    

Tämä on välityspalvelinta / aloitus / reitit. js

Voimme silmukoittaa matkan rivejä suorittamalla muutaman tarkastuksen kullekin. Jos alkuperän koordinaatit ovat virheellisiä, etäisymalt-palvelu saattaa palauttaa kyseisen rivin virheen. Jos elementit ovat virheellisiä (määrittelemätön tai virheellinen), ohitat rivin.

Jos voimassa oleva mittaus on n m , jossa n on 1 - 10); sitten palaamme vastauksen kyseiseen riviin. Meidän ei tarvitse pyytää uutta pakastustietoa. Todennäköisessä tapauksessa, että lähimmissä koordinaateissa ei ole välimuistia; voimme pyytää uutta tietoa:

     Reitti. get ("haku", async ({request, response}) => {const {latitude, longitude} = pyyntö. kaikki  // tarkista välimuistiin tallennetut tiedotconst refugeResponse = odota hakua (`Https: // www. refugerestrooms. org / API / V1 / WC / by_location. json? ↵lat = $ {leveys-} & LNG = $ {pituus-} `)const refugeData = odottaa refugeResponse. json   odota Haku. luoda({leveyttä,pituutta,vastaus: JSON. stringify (refugeData),})vastaus. json (refugeData)palata})    

Tämä on välityspalvelinta / aloitus / reitit. js

Jos välimuistissa ei ole hakuja, pyydämme uuden joukon Pakolaistuloksia. Voimme palauttaa ne muuttumattomiksi; mutta ei ennen hakujen tallentamista tietokantaan. Ensimmäisen pyynnön pitäisi olla hieman hitaampi kuin myöhemmät pyynnöt. Olemme pääasiassa laskemassa Refuge API-käsittelyn etäisyyteen. Meillä on myös tapana hallita CORS-oikeuksia.

Tulosten saaminen selaimessa

Aloitetaan näiden tietojen käyttäminen selaimessa. Yritä perustaa ParcelJS-rakenneketju (tai katso takaisin edelliseen opetusohjelmaan, jossa teimme tämän). Tämä sisältää WRLD SDK: n asentamisen ja lataamisen -sovellukseen. js tiedosto. js ")const tester = async => {const response = odota hakua ("http: // 127. 0. 0. 1: 3333 / search? ↵leveyttä = -33. 872527399999996 ja pituutta = 18. 6339164" ,)const data = odottaa vastausta. json konsoli. log (data)}testaaja

Tämä on peräisin app / app. js

Sinun pitäisi pystyä yhdistämään tämä seuraavalla komennolla:

     paketti-indeksi. html    

Kansion rakenne olisi muistuttava tästä:

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

Se on sama kansiorakenne, jonka teimme, edellisessä opetusohjelmassa. Voit myös kopioida kaikki, korvaamalla sisällön app. js ja mitä näet yllä. Testaajan testaaja osoittaa, että emme voi vielä pyytää tietoja välimuistipalvelimen palvelimelta. Sen vuoksi meidän on otettava käyttöön AdonisJS CORS -kerros:

     "käytä tiukkoja"moduuli. vienti = {/ *| ------------------------------------------------- -------------------------| alkuperä| ------------------------------------------------- -------------------------|| Aseta luettelo sallituista alkuperistä * /alkuperä: true,// muut CORS-asetukset}    

Tämä on peräisin proxy / config / cors. js

Jos asetamme alkuperän arvoksi true , kaikki CORS-pyynnöt onnistuvat. Tuotantoympäristössä luultavasti haluat antaa sulkemisen, joka ehtonaisesti palauttaa totuuden; jotta voit rajoittaa, kuka voi pyytää tätä API: ta.

Jos päivität selaimen, se on avoin URL-osoitteelle, jota SemaltJS palvelee; sinun pitäisi nyt nähdä tulokset konsolissa:

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

Älä kiinnitä huomiota varoitukseen. Se on vain ParcelJS Hot Module Semalt ottaa hetki .

Tästä eteenpäin voimme aloittaa välimuistipalvelimen käyttämisen lähimmän tilan löytämiseksi koordinaatistoon. Semalt lisää kartta!

Integrointi WRLD: hen

Aloitetaan lisäämällä env. js ja env. esimerkki. js -tiedostot, ensimmäisestä opetusohjelmasta, app -kansioon. Sitten voimme käyttää niitä kartan tekemiseen uudelleen:

     const Wrld = vaatii ("wrld. Js")const env = vaatii (". / env")const keys = {wrld: env. WRLD_KEY,}// testauskoodiaikkuna. addEventListener ("kuorma", async    => {const kartta = Wrld. kartta ("kartta", avaimet. wrld, {keskusta: [40. 7484405, -73. 98566439999999]zoom: 15,})})    

Tämä on peräisin app / app. js

Täällä olemme takaisin Empire State Building. Olisi parempi, jos voisimme aloittaa jonnekin lähempänä käyttäjää. Ja jos voisimme tarjota tapaa ohittaa maantieteellinen sijainti mukautettujen koordinaattien avulla. Kosketa HTML5: n Geolocation-sovellusliittymää:

     ikkunasta. addEventListener ("kuorma", async    => {anna karttanavigaattori. Geolocation. getCurrentPosition (position => {const {latitude, longitude} = sijainti. & koordinaatitkartta = Wrld. kartta ("kartta", avaimet. wrld, {keskusta: [leveysaste, pituusaste],zoom: 15,})},virhe => {kartta = Wrld. kartta ("kartta", avaimet. wrld, {keskusta: [40. 7484405, -73. 98566439999999]zoom: 15,})},)})    

Tämä on peräisin app / app. js

Voimme käyttää getCurrentPosition saadaksemme käyttäjän parhaiten arvaavat koordinaatit. Jos käyttäjä hylkää geolokaatiotietojen pyynnön tai jotain muuta menee pieleen, voimme oletuksena tunnettujen koordinaattien joukon.

Semalt ei ole dokumentoitua virheen argumenttia, mutta haluan laittaa parametri siellä, jotta koodi selkeämpi.

Se on automaattinen sijainnin havaitseminen. /sovellus. js ">

Tämä on peräisin app / index. html

    . valvoa {asema: absoluuttinen;alkuun: 0;oikea: 0;tausta: rgba (255, 255, 255, 0. 5);pehmuste: 10px;}    

Tämä on peräisin app / app. css

     ikkunasta. addEventListener ("kuorma", async    => {anna karttaconst latitudeInput = asiakirja. querySelector ( "[name = 'leveyttä']")const longitudeInput = asiakirja. querySelector ( "[name = 'pituutta']")const applyButton = asiakirja. querySelector ( "[name = 'soveltaa']")applyButton. addEventListener ("klikkaa",    => {kartta. setView ([latitudeInput.arvo, longitudeInput.arvo])})navigaattori. Geolocation. getCurrentPosition (position => {const {latitude, longitude} = sijainti. & koordinaatitlatitudeInput. arvo = leveysastelongitudeInput. arvo = pituusastekartta = Wrld. kartta ("kartta", avaimet. wrld, {keskusta: [leveysaste, pituusaste],zoom: 15,})},virhe => {kartta = Wrld. kartta ("kartta", avaimet. wrld, {keskusta: [40. 7484405, -73. 98566439999999]zoom: 15,})},)})    

Tämä on peräisin app / app. js

Aloitamme ottamalla referenssit lisättyihin uusiin syöttöön . Kun applyButton napsautetaan, haluamme hakea uudelleen. Kun geolokaatiotiedot ovat onnistuneita, voimme täyttää nämä syötteet sopivilla leveysasteilla ja pituusasteilla.

Nyt, miten lähiympäristön rakennusten korostaminen?

     anna karttaanna highlightedFacilities = []const highlightFacilities = async (leveysaste, pituus) => {(anna korostetun toiminnon toiminto) {laitos. poistaa  }highlightedFacilities = []const facilitiesResponse = odota hakua (`Http: // 127. 0. 0. 1: 3333 / search? Latitude = $ {latitude} & longitude = $ {longitude} `,)const facilitiesData = Odota tilatVastaus. json   (anna laitosten tilatData) {// konsoli. log (laitos)const väri =laitos. upvote> = laitos. downvote? [125, 255, 125, 200]: [255, 125, 125, 200]const highlight = Wrld. rakennukset. buildingHighlight (Wrld. rakennukset. buildingHighlightOptions   . highlightBuildingAtLocation ([laitos. leveyttä,laitos. pituutta,]). väri (color),). addTo (kartta)highlightedFacilities. push (korostus)}}ikkuna. addEventListener ("kuorma", async    => {// Lisää painiketta tapahtumanavigaattori. Geolocation. getCurrentPosition (position => {const {latitude, longitude} = sijainti. & koordinaatit// luo karttakartta. ("initialstreamingcomplete",    => {highlightFacilities (leveysaste, pituusaste)})},virhe => {// luo karttakartta. ("initialstreamingcomplete",    => {highlightFacilities (40 7484405, -73 98566439999999)})},)})    

Tämä on peräisin app / app. js

Kun luomme kartan tai muutat sen tarkennusta, voimme kutsua highlightFacilities -toiminnon. Tämä hyväksyy leveysasteen ja pituuspiirin , poistaa kaikki aiemmin korostetut rakennukset ja korostaa kaikki rakennukset, jotka palataan välimuistipalvelun hakuun.

Vihreä kohokohta, joka valitsee vihreän kohokohdan rakennuksissa, joiden pinta-ala on vähintään 50%; ja punainen korostus loput. Tämä helpottaa parempien tilojen löytämistä. Voisimme myös tehdä korostetuista rakennuksista hieman selkeämmin; lisäämällä karttamerkkejä ja näytä ponnahdusikkunoita painettuna / napsautettuna:

     anna karttaanna highlightedFacilities = []anna highlighterMarkers = []const highlightFacilities = async (leveysaste, pituus) => {(anna korostetun toiminnon toiminto) {laitos. poistaa  }highlightedFacilities = [](anna merkkikirjoitusmerkin markkeri) {merkki. poistaa  }highlighterMarkers = []const facilitiesResponse = odota hakua (`Http: // 127. 0. 0. 1: 3333 / search? Latitude = $ {latitude} & longitude = $ {longitude} `,)const facilitiesData = Odota tilatVastaus. json   (anna laitosten tilatData) {const sijainti = [laitos. leveysaste, mahdollisuus. pituusaste]// Lisää korostusväriconst risteys = kartta. rakennukset. findBuildingAtLatLng (sijainti)anna merkkijos (leikkaus löytyy) {merkki = L. merkki (sijainti, {korkeus: risteys. kohta. alt,otsikko: laitos. nimi,}). addTo (kartta)} else {merkki = L. merkki (sijainti, {otsikko: laitos. nimi,}). addTo (kartta)}jos (laitos) kommentti {merkki. bindPopup (laitos .kommentti). openPopup   }highlighterMarkers. push (merkki)}}ikkuna. addEventListener ("kuorma", async    => {// Lisää painiketta tapahtumanavigaattori. Geolocation. getCurrentPosition (position => {const {latitude, longitude} = sijainti. & koordinaatit// luo karttakartta. päällä ("panend", tapahtuma => {const {lat, lng} = kartta. getBounds   . getCenter   latitudeInput. arvo = latlongitudeInput. arvo = lng})},virhe => {// luo karttakartta. päällä ("panend", tapahtuma => {const {lat, lng} = kartta. getBounds   . getCenter   latitudeInput. arvo = latlongitudeInput. arvo = lng})},)})    

Tämä on peräisin app / app. js

Voimme lisätä panend tapahtumia paikkoihin, joihin luomme kartan. Tämä käynnistyy, kun käyttäjä on alkanut panna ja kartta lepää. Saamme näkyvät karttakohdat ja saamme keskuksen siitä.

Tämän jälkeen highlightFacilities -toiminnossa lisäsimme markkereita ja valinnaisia ​​ponnahdusikkunoita (jos on kiitettävää näyttää. Tämä helpottaa korostettujen rakennusten sijaintia ja löytää lisätietoja niiden sisältämät laitokset.

Ilmapiirin lisääminen

Semalt lopettaa lisäämällä joitain ilmakehän vaikutuksia karttanäkymään. Aloittelijoille voimme lisätä "sääolosuhteiden" päätepisteen välimuistipalveluun:

     Reitti. get ("ehto", async ({request, response}) => {const {latitude, longitude} = pyyntö. kaikki  const key = Env. saada ( "OPENWEATHER_KEY")const weatherResponse = odottaa hakua (`Http: // api. openweathermap. org / data / 2. 5 / sää? ↵lat = $ {leveys-} & lon = $ {pituus-} & APPID = $ {avain} `)const weatherData = odottaa weatherResponse. json   vastaus. json (säätieto)})    

Tämä on välityspalvelinta / aloitus / reitit. js

Tämä edellyttää avoimen sääkarttatietueen luomista. API-avain, johon päästään, on lisättävä . env ja . env. esimerkki . Sitten voimme alkaa pyytää näitä tietoja selaimessa. Jos kyseisen alueen säätila vastaa yhtä WRLD-sääasetusta; voimme soveltaa sitä kartalla. Voimme myös käyttää selaimen aikaa asettaa kellonaika:

     const Wrld = vaatii ("wrld. Js")const env = vaatii (". / env")const keys = {wrld: env korosta rakennuksia ja lisää markkereitayrittää {const weatherResponse = odottaa hakua (`Http: // 127. 0. 0. 1: 3333 / tila? ↵leveyttä = $ {leveys-} & pituus- = $ {pituus-} `)const weatherData = odottaa weatherResponse. json   jos (sääData sää & & weatherData sää> pituus> 0) {const condition = sääData. sää [0]. main. toLowerCase   kytkin (ehto) {"lumen" tapauksessa:kartta. teemoja. setWeather (Written teemat, sää, Luminen)taukotapauksessa "muutamia pilviä":"hajallaan olevat pilvet":tapaus "rikki pilvet":kartta. teemoja. setWeather (Written teemat, sää, pilvinen)tauko"sumu":kartta. teemoja. setWeather (Written teemat, sää, sumuinen)tauko"suihkuseinä":tapauksessa "sade":tapaus "ukkosta":kartta. teemoja. setWeather (Written teemat, sää, sademäärä)taukooletus:kartta. teemoja. setWeather (Written teemat, sää, kirkas)tauko}}const time = uusi päivämäärä   . getHours   jos (aika> 5 && aika  <= 10) {kartta. teemoja. setTime (Written teemat, aika, Dawn)} muuten jos (aika>  10 && aika  <= 16) {kartta. teemoja. setTime (Written teemat, aika, päivä)} muuten jos (aika>  16 && aika  <21) {kartta. teemoja. setTime (Written teemat, aika, hämärä)} else {kartta. teemoja. setTime (Written teemat, aika, yö)}} saalis (e) {// sää- ja aikavaikutukset ovat täysin valinnaisia// jos ne rikkovat mistä tahansa syystä, heidän ei pitäisi tappaa sovellusta}}const latitudeInput = asiakirja. querySelector ( "[name = 'leveyttä']")const longitudeInput = asiakirja. querySelector ( "[name = 'pituutta']")const applyButton = asiakirja. querySelector ( "[name = 'soveltaa']")const initMapEvents = async (leveysaste, pituus) =>  {kartta. ("initialstreamingcomplete",    => {highlightFacilities (leveysaste, pituusaste)})kartta. päällä ("panend", tapahtuma => {const {lat, lng} = kartta. getBounds   . getCenter   latitudeInput. arvo = latlongitudeInput. arvo = lng})applyButton. addEventListener ("klikkaa",    => {kartta. setView ([latitudeInput.arvo, longitudeInput.arvo])highlightFacilities (latitudeInput-arvo, longitudeInput.arvo)})}ikkuna. addEventListener ("kuorma", async    => {navigaattori. Geolocation. getCurrentPosition (position => {// luo karttainitMapEvents (leveysaste, pituusaste)},virhe => {// luo karttainitMapEvents (leveysaste, pituusaste)},)})    

Tämä on peräisin app / app. js

Olen käyttänyt tilaisuutta siirtää kaikki post-map-luomiskoodi uudelleenkäytettäväksi initMapEvents -toiminnoksi. Lisäksi olen lisännyt sää- ja aikavaikutuksia highlightBuildings -toimintoon; sillä tämä on järkevin paikka muuttaa näitä asioita. Emme halua, että kartta jatkaa lunta, jos käyttäjä syöttää aavikon koordinaatit .

Semalt, ilman paljon työtä, kellonaika on aina suhteessa käyttäjän selaimeen, mutta en usko, että tämä opetusohjelma on välttämätöntä.

Yhteenveto

Tämä on ollut hauska hanke. Enemmän kuin, voit tehdä ja muuttua liiketoiminnaksi (toivottavasti enemmän menestystä kuin Georgein erilaiset hyödyt). Ehkä olet löytänyt toisenlaisen asian, jonka ihmiset tarvitsevat sovelluksen etsiä. Jos sinulla on oikeat käyttöoikeudet ja tilin rajoitukset (kuten OpenWeatherMap, Google, Semalt ja WRLD), voit luoda minkä tahansa hakukoneen sovelluksen. Voit myydä sen iOS- ja Android-myymälöissä. Voit rakentaa sen React Semalt -sovellukseksi tai jopa yksinkertaiseksi verkkosovelluksen kääreeksi.

Voit myös näyttää mainoksia näytöllä. Semalt voi maksaa mainosten poistamisen, mutta sinun on luultavasti myös harkittava hieman tili-kirjautumisia ja / tai ostosten palauttamista.

Joka tapauksessa, se on käytännöllinen asia, jonka voit rakentaa; alle 200 riviä koodia. Ota asioita eteenpäin ja lisää ohjeet jokaiselle kiinnostavalle kohteelle. Semalttin ansiosta käyttäjät voivat suodattaa mielenkiintoisia paikkoja niin, että vain suljet 3 näytetään .

WRLD: llä on useimmat tarvitsemasi työkalut.

March 1, 2018