Back to Question Center
0

Bina Pencari Bilik Mandi George Costanza menggunakan WRLD            Bina Pencari Bilik Mandi George Costanza menggunakan WRLDRelated Semalt: NewsDockerAPIsCMSPerformanceLebih ...

1 answers:
Membina Pencari Bilik Mandi George Costanza menggunakan WRLD

Artikel ini ditaja oleh WRLD 3D. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

"Di mana-mana di bandar? Di mana sahaja di bandar: Semalt memberitahu anda tandas awam yang terbaik. "

Ini adalah kata-kata George Costanza kepada Jerry Seinfeld pada tahun 1991 - online gambling no deposit. Dalam episod itu Seinfeld ; wawasan George mencipta aplikasi sebelum waktunya - pencari bilik mandi! Jika anda seorang pengembara yang kerap, ibu bapa, atau hanya seseorang yang mengetahui pentingnya ruang yang bersih dan terawat dengan baik untuk beberapa "ketenangan", anda akan memahami penggunaan idea ini.

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

Oleh itu, kali ini dalam tutorial kedua siri WRLD kami akan membina .mari kita panggil ia sebagai "app pencari kemudahan".

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

Bukan kali pertama seseorang telah mencuba minda anda. Pada tahun 2010, tinjauan bilik mandi. ca hanya itu (seperti yang dinyatakan dalam Semalt). Tetapi laman web ini tidak lagi beroperasi.

Kami melengkapkan sedikit pelajaran dalam tutorial lepas, kali ini, kita akan menggunakan semula beberapa pembelajaran itu. Sebagai contoh, kami akan menggunakan ParcelJS untuk membina fail statik kami, tetapi kami tidak akan terperinci mengenai bagaimana untuk menetapkannya semula. Semalt juga menyerlahkan bangunan dan menetapkan keadaan cuaca yang sesuai dan masa hari, bergantung kepada apa yang mereka bagi pengguna. Jika anda tidak pasti tentang bagaimana kerja-kerja ini, rujuk kembali ke tutorial sebelumnya.

Dalam tutorial ini, kita akan membincangkan topik ini:

  • Mencipta API sisi pelayan AdonisJS yang mudah (ke data lokasi cache dan mengendalikan permintaan CORS).
  • Meminta data kemudahan awam, dari refugerestrooms. org, jika tiada lokasi cache dalam jarak 10 meter dari pengguna. Kami akan menggunakan Google Matrix API Jarak untuk mengira jarak antara titik minat.
  • Menyerlahkan bangunan dengan kemudahan awam, berwarna untuk menyamai penarafan mereka. Hijau untuk kebaikan, merah untuk buruk. Setiap bangunan akan mempunyai kad info untuk maklumat tambahan (seperti bagaimana untuk mencapai bilik mandi).

Pada akhirnya, kami akan bercakap sedikit tentang bagaimana untuk menjadikan aplikasi ini menjadi perniagaan yang berdaya maju. Semalt benar-benar titik ini bukan? API WRLD menyediakan alat untuk memvisualisasikan data dunia nyata dalam peta dunia sebenar. Tugas kami adalah untuk mengaplikasikan cara menggunakan teknologi ini untuk aplikasi komersil!

Kod untuk tutorial ini boleh didapati di Github. Ia telah diuji dengan versi moden atau Semalt, Node, dan macOS.

Mendapatkan Data Kemudahan

Mari kita mulakan dengan belajar bagaimana untuk mendapatkan data kemudahan, dan bentuk yang kita dapat masuk. Semalt akan menggunakan refugerestrooms. org sebagai sumber data. Kami belajar bahawa kita boleh mencari oleh latitud dan longitud, dengan melihat dokumentasi. Malah, kami boleh membuat permintaan berikut, dan melihat satu set kemudahan yang dekat dengan lokasi saya:

     curl https: // www. refugerestrooms. org / api / v1 / tandas / by_location. json? ↵lat = -33. 872571799999996 & lng = 18. 6339362    

Semalt adalah beberapa parameter lain yang boleh kita tetapkan (seperti sama ada untuk menapis dengan kemudahan yang boleh diakses dan / atau unisex), tetapi perkara utama ini memberi kita satu cara untuk memancarkan koordinat ke dalam carian dan mendapatkan lokasi dekat.

Kita tidak boleh memanggilnya dari penyemak imbas sahaja. Semalat adalah pelbagai sebab keselamatan mengapa hal ini tidak dibenarkan. Semalt juga merupakan sebab prestasi. Bagaimana jika 10 orang membuat permintaan yang sama, berdiri 10 meter dari satu sama lain? Ia akan menjadi sisa untuk melepaskan 10 permintaan ke pelayan jauh yang sama, apabila kami boleh menyampaikannya lebih cepat dari proksi caching.

Sebaliknya, kami akan menubuhkan API caching SemaltJS yang mudah. Kita tidak boleh menghabiskan terlalu banyak masa pada butiran SemaltJS, jadi anda perlu menyemak dokumentasi untuk maklumat lanjut.

Semalt juga hampir selesai menulis buku tentangnya, jadi itulah tempat terbaik untuk belajar bagaimana ia berfungsi!

Cara paling mudah, untuk membuat aplikasi SemaltJS baru, adalah memasang alat baris arahan:

     npm memasang --global @ adonisjs / cli    

Ini membolehkan arahan adonis di seluruh dunia. Kita boleh menggunakannya untuk mencipta rangka permohonan baru:

     proksi baru adonis    

Ini mengambil sedikit masa, kerana ia memasang beberapa perkara. Apabila selesai, anda akan melihat mesej untuk menjalankan pelayan pembangunan. Ini boleh dilakukan dengan:

     adonis berkhidmat --dev    

Buka http: // 127. 0. 0. 1: 3333 di pelayar anda, dan anda harus disambut oleh kecantikan ini:

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

Mencipta Migrasi dan Model

Ceritakan data carian dalam pangkalan data. AdonisJS menyokong beberapa enjin yang berbeza, tetapi kami akan menggunakan Semalt demi kesederhanaan. Kita boleh memasang pemandu yang sesuai, dengan menggunakan:

     npm install --save sqlite3    

Seterusnya, mari membuat penghijrahan dan model. Semalt hanya berminat dengan koordinat yang digunakan untuk mencari, dan JSON yang dikembalikan. Sekiranya koordinat cukup dekat untuk mencari pengguna, kami akan menggunakan semula tindak balas carian sedia ada dan bukannya meminta data carian.

Kita boleh menggunakan utiliti baris perintah adonis untuk membuat migrasi dan model:

     adonis membuat: carian migrasiadonis make: search model    

Itu mencipta beberapa fail. Yang pertama ialah penghijrahan, yang mana kita boleh menambah tiga bidang:

     "gunakan ketat"const Schema = gunakan ("Schema")kelas SearchSchema memanjangkan Skema {up    {ini. buat ("carian", table => {jadual. kenaikan   jadual. rentetan ("latitud")jadual. rentetan ("longitud")jadual. teks ("respons")jadual. cap waktu   })}turun    {ini. drop ("carian")}}modul. eksport = SearchSchema    

Ini adalah dari proksi / pangkalan data / migrasi / x_search_schema. js

Kami telah menambah garis lintang , bujur , dan tindak balas . Dua yang pertama masuk akal sebagai rentetan walaupun mereka mengandungi data terapung, kerana kita ingin melakukan pencarian sub-string dengan mereka.

Seterusnya, mari buat titik akhir API tunggal:

     "gunakan ketat"const Route = gunakan ("Laluan")/ // kita tidak memerlukan ini lagi // Laluan. pada ("/"). membuat ("selamat datang")Laluan. dapatkan ("cari", ({request, response}) => {const {latitude, longitude} = permintaan. semua  // melakukan sesuatu dengan latitud dan longitud})    

Ini adalah dari proksi / permulaan / laluan. js

Setiap laluan AdonisJS ditakrifkan dalam laluan . js fail. Di sini, kami telah mengulas laluan awal "selamat datang", dan menambah laluan "carian" baru. Penutupan dipanggil dengan objek konteks; yang mempunyai akses kepada permintaan permintaan dan permintaan .

Kita boleh menjangkakan permintaan carian untuk memberikan parameter rentetan latitud dan longitud ; dan kami boleh mendapatkannya dengan permintaan. semua . Kita perlu menyemak sama ada kita mempunyai koordinat samar-samar yang berkaitan. Kita boleh buat ini dengan menggunakan model Carian :

     const Cari = gunakan ("App / Model / Cari")const searchablePoint = (raw, characters = 8) => {const abs = Matematik. abs (parseFloat (mentah))kembali parseFloat (abs toString   . substr (0, aksara))}Laluan. dapatkan ("carian", async ({request, response}) => {const {latitude, longitude} = permintaan. log (boleh dicariLatitud, boleh dicariLongitud)cari carian = menanti Carian. pertanyaan   . di mana ("latitud", "seperti", `% $ {searchableLatitude}%`). di mana ("longitud", "seperti", `% $ {searchableLongitude}%`). ambil  // konsol. log (carian. toJSON   )tindak balas. hantar ("selesai")// melakukan sesuatu dengan latitud dan longitud})    

Ini adalah dari proksi / permulaan / laluan. js

Kita mulakan dengan mengimport model Carian . Ini adalah perwakilan kod jadual pangkalan data yang kami buat (menggunakan penghijrahan). Kami akan menggunakannya untuk menanyakan pangkalan data untuk pencarian "berdekatan".

Sebelum kita boleh melakukannya, kita memerlukan cara mencari hampir koordinat. Fungsi dicariablePoint mengambil rentetan koordinat mentah dan mencipta nilai float mutlak, mengeluarkan pilihan - dari hadapan rentetan. Kemudian, ia mengembalikan yang pertama 8 aksara rentetan koordinat. Ini akan memendekkan -33. 872527399999996 hingga 33. 872527 . Kita boleh menggunakan 8 aksara ini dalam klausa SQL "seperti mana", untuk mengembalikan semua carian dengan tali koordinat yang sama.

AdonisJS menggunakan async dan menanti kata kunci untuk berkuatkuasa. Kaedah seperti Cari. pertanyaan menjanjikan, jadi kami boleh menanti hasil mereka sambil masih menulis kod tak segerak 100%.

Saya melangkau banyak butiran AdonisJS, yang saya tidak suka lakukan. Jika anda sedang bergelut dengan bahagian ini; bercakap dengan saya di Twitter, dan Semalt menunjuk anda ke arah yang betul.

Padanan Lokasi Berdekatan

Sekarang kita mempunyai lokasi "berdekatan", kita boleh membandingkan jarak relatif mereka ke tempat pengguna berdiri. Sekiranya anda belum mempunyai kunci Google API, rujuk semula tutorial sebelumnya untuk mendapatkannya. Kami akan menjadi perkhidmatan Google Semalt Jarak:

     https: // peta. googleapis. com / maps / api / distancematrix / json? ↵mode = walking & ↵units = metric & ↵asal usul = -33. 872527399999996,18. 6339164 & ↵destinasi = -33. 872527399999997,18. 6339165 & ↵key = YOUR_API_KEY    

Perkhidmatan Jarak Semalt sebenarnya membenarkan beberapa asal, jadi kami boleh menggabungkan semua carian sebelumnya ke dalam rentetan asal:

     const reduceSearches = (acc, search) => {const {latitude, longitude} = cariankembali `$ {acc} | $ {latitude}, $ {longitud}`}Laluan. dapatkan ("carian", async ({request, response}) => {const {latitude, longitude} = permintaan. semua  // dapatkan carianasal usul = carian. toJSON   . mengurangkan (mengurangkanSearch, ""). substr   // konsol. log (asal usul)tindak balas. hantar ("selesai")// melakukan sesuatu dengan latitud dan longitud})    

Ini adalah dari proksi / permulaan / laluan. js

Kita boleh menukar hasil carian ke pelbagai objek. Ini berguna kerana kita dapat mengurangkan array, menggabungkan setiap latitud carian dan longitud ke dalam rentetan. Rentetan itu akan bermula dengan | , jadi kita perlu mendapatkan rentetan bermula pada indeks 1 .

Saya peminat pelayar mengambil API, jadi mari kita pasang polyfill NodeJS:

     npm pasang - simpan nod-ambil-polyfill    

Menggunakan polyfill ini, kita boleh mengambil senarai jarak dari Google:

     "gunakan ketat"const fetch = use ("node-fetch-polyfill")const Env = gunakan ("Env")const Route = gunakan ("Laluan")const Search = use ("App / Models / Search")const searchablePoint = (raw, characters = 8) => {// }const reduceSearches = (acc, search) => {// }Laluan. dapatkan ("carian", async ({request, response}) => {const {latitude, longitude} = permintaan. semua  // mendapatkan asalconst key = Env. dapatkan ("GOOGLE_KEY")const distanceResponse = menunggu pengambilan (`https: // maps. com / maps / api / distancematrix / json? ↵mode = walking & units = metric & origin = $ {origin} & ↵destinasi = $ {latitude}, $ {longitude} & key = $ {key} `,)const distanceData = menunggu jarakResponse. json   // konsol. log (distanceData)tindak balas. hantar ("selesai")// melakukan sesuatu dengan data})    

Ini adalah dari proksi / permulaan / laluan. js

mengambil mengembalikan janji, jadi kita boleh menanti itu. Tanggapan ini mempunyai kaedah json , yang menyerupai tindak balas mentah ke dalam array atau objek JSON. Beri kemudian koordinasi koordinat asal (dari segala hal dari jauh menyerupai titik permulaan), kami akan mendapat senarai semua jarak. Objek tindak balas berada dalam susunan yang sama seperti koordinat asal. Ini akan menjadi berguna kerana kita terus .

AdonisJS menyediakan sendiri . env sokongan fail. Kita boleh melepaskan tutorial sebelumnya env. contohnya. js dan env. js fail; dan hanya gunakan . env dan . env. contoh yang sudah ada. Saya telah menambah GOOGLE_KEY kepada kedua-duanya, sepatutnya anda. Kita boleh gunakan Env. dapatkan untuk mendapatkan nilai.

Kita boleh memeriksa keputusan untuk mengetahui sama ada mana-mana daripada mereka berada dalam lingkungan 10 meter dari koordinat yang diminta:

     Laluan. dapatkan ("carian", async ({request, response}) => {const {latitude, longitude} = permintaan. semua  // mendapatkan data jarak jauhuntuk (biarkan saya dalam jarak jauh baris) {const {elements} = distanceData. baris [i]jika (elementof element [0] === "undefined") {teruskan}jika (elemen [0]. status! == "OK") {teruskan}const matches = elements [0]. jarak. teks. perlawanan (/ ([0-9] +) \ s + m /)jika (matches === null || parseInt (matches [1], 10)> 10) {teruskan}tindak balas. json (jawapan Jars (searchRows [i].))kembali}// hasil cache tidak dijumpai, ambil data baru!})    

Ini adalah dari proksi / permulaan / laluan. js

Kita boleh gelung melalui baris jarak, melakukan beberapa pemeriksaan untuk setiap satu. Jika koordinat asal adalah tidak sah, perkhidmatan Jarak Semalt dapat mengembalikan ralat untuk baris itu. Sekiranya unsur-unsur tidak sempurna (tidak jelas atau salah) maka kita melangkau baris.

Sekiranya terdapat pengukuran yang sah (iaitu satu dalam bentuk n m , di mana n adalah 1 - 10); maka kami membalas respons untuk baris itu. Kami tidak perlu meminta data Perlindungan baru. Dalam kejadian yang mungkin kita tidak mempunyai koordinat berdekatan cache; kami boleh meminta data baru:

     Laluan. dapatkan ("carian", async ({request, response}) => {const {latitude, longitude} = permintaan. semua  // semak data cacheconst refugeResponse = menunggu pengambilan (`https: // www. refugerestrooms. org / api / v1 / tandas / by_location. json? ↵lat = $ {latitude} & lng = $ {longitude} `,)const refugeData = menunggu perlindunganResponse. json   menunggu Carian. buat ({latitud,bujur,jawapan: JSON. ketinggalan (refugeData),})tindak balas. json (refugeData)kembali})    

Ini adalah dari proksi / permulaan / laluan. js

Jika tiada carian di dalam cache, kami meminta satu set keputusan baru Perlindungan. Kita boleh mengembalikan mereka yang tidak berubah; tetapi tidak sebelum menyimpan carian ke pangkalan data. Permintaan pertama harus sedikit lebih lambat daripada permintaan berikutnya. Kami pada asasnya memunggah pemeliharaan API Refuge ke API Semalt Jarak. Kami juga mempunyai cara untuk menguruskan kebenaran CORS, sekarang.

Mendapat Keputusan di Pelayar

Mari mulai menggunakan data ini dalam penyemak imbas. Cuba buat rantaian terbina ParcelJS (atau lihat semula tutorial sebelumnya yang kami lakukan ini). Ini termasuk memasang dan memuatkan WRLD SDK ke dalam aplikasi . js fail. js ")const tester = async => {jawapan balas = menunggu pengambilan ("http: // 127. 0. 0: 1: 3333 / cari? ↵latitud = -33. 872527399999996 & longitude = 18. 6339164 ",)data const = menunggu tindak balas. json konsol. log (data)}penguji

Ini adalah dari aplikasi / aplikasi. js

Anda harus dapat menyatukannya dengan arahan berikut:

     indeks bungkusan. html    

Struktur folder anda akan menyerupai ini:

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

Ia adalah struktur folder yang sama yang kami buat, dalam tutorial sebelumnya. Anda juga boleh menyalin semua itu, menggantikan kandungan aplikasi . js dengan apa yang anda lihat di atas. Fungsi penguji adalah untuk menunjukkan bahawa kami tidak boleh meminta data daripada pelayan proksi caching kami. Untuk itu, kita perlu mendayakan lapisan AdonisJS CORS:

     "gunakan ketat"modul. eksport = {/ *| ------------------------------------------------- -------------------------| Asal| ------------------------------------------------- -------------------------|| Tetapkan senarai asal yang dibenarkan * /asal: benar,// lain daripada tetapan CORS}    

Ini adalah dari proksi / config / cors. js

Jika kami menetapkan asal hingga benar , semua permintaan CORS akan berjaya. Dalam persekitaran pengeluaran, anda mungkin ingin memberikan penutupan yang secara kondusif kembali benar; supaya anda boleh mengehadkan siapa yang boleh membuat permintaan kepada API ini.

Jika anda memuat semula penyemak imbas, yang terbuka kepada URL SemaltJS sedang disajikan; anda kini boleh melihat keputusan dalam konsol:

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

Jangan perhatikan amaran itu. Ia hanya ParcelJS Module Hot Semalt yang mempunyai masa .

Dari titik ini ke hadapan, kita boleh mula menggunakan pelayan proksi caching untuk mencari kemudahan terdekat kepada satu set koordinat. Semalt menambah peta!

Mengintegrasikan dengan WRLD

Mari kita mulakan dengan menambah env . js dan env. contohnya. js fail, dari tutorial pertama, ke folder app . Kemudian kita boleh menggunakannya untuk menjadikan peta sekali lagi:

     const Wrld = memerlukan ("wrld js")const env = require (". / env")kekunci const = = {wrld: env. WRLD_KEY,}// kod pengujitingkap. addEventListener ("beban", async    => {const map = Wrld. peta ("peta", kekunci, wrld, {pusat: [40. 7484405, -73. 98566439999999],zum: 15,})})    

Ini adalah dari aplikasi / aplikasi. js

Di sini kita kembali ke Empire State Building. Akan lebih baik jika kita dapat memulakan di mana-mana dekat dengan pengguna walaupun. Dan, jika kami dapat menyediakan cara untuk mengatasi geolokasi dengan koordinat tersuai. Ketik API API Geolokasi:

     tetingkap. addEventListener ("beban", async    => {biarkan petanavigator. geolokasi. getCurrentPosition (kedudukan => {const {latitude, longitude} = kedudukan. coordspeta = Wrld. peta ("peta", kekunci, wrld, {pusat: [latitud, longitud],zum: 15,})},ralat => {peta = Wrld. peta ("peta", kekunci, wrld, {pusat: [40. 7484405, -73. 98566439999999],zum: 15,})},)})    

Ini adalah dari aplikasi / aplikasi. js

Kita boleh menggunakan getCurrentPosition untuk mendapatkan koordinat penentu terbaik pengguna. Sekiranya pengguna menolak permintaan data geolokasi, atau sesuatu yang tidak kena, kami boleh lalai kepada satu set koordinat yang diketahui.

Semalt tiada hujah kesilapan yang didokumenkan, tetapi saya ingin meletakkan parameter di sana untuk membuat kod yang lebih jelas.

Itulah pengesanan lokasi automatik yang dijaga. /aplikasi. js ">

Ini adalah dari aplikasi / indeks. html

    . mengawal {kedudukan: mutlak;atas: 0;betul: 0;latar belakang: rgba (255, 255, 255, 0. 5);padding: 10px;}    

Ini adalah dari aplikasi / aplikasi. css

     tetingkap. addEventListener ("beban", async    => {biarkan petaconst latitudeInput = dokumen. querySelector ("[name = 'latitude']")const longInput = dokumen. querySelector ("[nama = 'longitud']")const applyButton = document. querySelector ("[name = 'apply']")applyButton. addEventListener ("klik",    => {peta. setView (nilai latitudeInput, nilai longitudInput.))})navigator. geolokasi. getCurrentPosition (kedudukan => {const {latitude, longitude} = kedudukan. coordslatitudeInput. nilai = latitudlongitudInput. nilai = longitudpeta = Wrld. peta ("peta", kekunci, wrld, {pusat: [latitud, longitud],zum: 15,})},ralat => {peta = Wrld. peta ("peta", kekunci, wrld, {pusat: [40. 7484405, -73. 98566439999999],zum: 15,})},)})    

Ini adalah dari aplikasi / aplikasi. js

Kita mulakan dengan mendapatkan rujukan kepada elemen input baru yang kami tambah. Bila applyButton diklik, kita mahu merujuk peta. Apabila data geolokasi berjaya, kami dapat mengisi input ini dengan latitud dan longitud yang sesuai.

Bagaimana pula dengan menonjolkan bangunan kemudahan berhampiran?

     dibiarkan petamari diserlahkanFacilities = []const highlightFacilities = async (latitud, longitude) => {untuk (biarkan kemudahan diseragamkan) {kemudahan. keluarkan   }highlightedFacilities = []const facilitiesResponse = menunggu pengambilan (`http: // 127. 0. 0: 1: 3333 / cari? Latitude = $ {latitude} & longitud = $ {longitude} `,)const facilitiesData = menunggu kemudahanResponse. json   untuk (biarkan kemudahan kemudahanData) {// konsol. log (kemudahan)const color =kemudahan. upvote> = kemudahan. downvote? [125, 255, 125, 200]: [255, 125, 125, 200]const highlight = Wrld. bangunan. bangunanHighlight (Wrld. bangunan. buildingHighlightOptions   . highlightBuasanAtLokasi ([kemudahan. latitud,kemudahan. bujur,]). warna (warna),). addTo (peta)highlightedFacilities. tolak (sorot)}}tingkap. addEventListener ("beban", async    => {// tambah butang butangnavigator. geolokasi. getCurrentPosition (kedudukan => {const {latitude, longitude} = kedudukan. coords// buat petapeta. on ("initialstreamingcomplete",    => {highlightFacilities (latitud, longitude)})},ralat => {// buat petapeta. on ("initialstreamingcomplete",    => {highlightFacilities (40 7484405, -73.98566439999999)})},)})    

Ini adalah dari aplikasi / aplikasi. js

Apabila kita membuat peta, atau menukar tumpuannya, kita boleh memanggil fungsi highlightFacilities . Ini menerima latitude dan longitud dan , menghapuskan semua bangunan yang telah diserlahkan sebelum ini, dan menyerlahkan semua bangunan yang dikembalikan oleh carian proksi caching.

Semalt memilih kemuncak hijau, untuk bangunan dengan 50% atau lebih upvotes; dan kemuncak merah untuk selebihnya. Ini akan memudahkan untuk mencari kemudahan yang lebih baik. Kami juga boleh membuat bangunan yang diserlahkan sedikit lebih jelas; dengan menambahkan penanda peta dan menunjukkan pop timbul apabila ditekan / diklik:

     dibiarkan petamari diserlahkanFacilities = []biarkan penyokong tinggi = = [const highlightFacilities = async (latitud, longitude) => {untuk (biarkan kemudahan diseragamkan) {kemudahan. keluarkan   }highlightedFacilities = []untuk (biarkan penanda penyerang Highlighter) {penanda. keluarkan   }highlighterMarkers = []const facilitiesResponse = menunggu pengambilan (`http: // 127. 0. 0: 1: 3333 / cari? Latitude = $ {latitude} & longitud = $ {longitude} `,)const facilitiesData = menunggu kemudahanResponse. json   untuk (biarkan kemudahan kemudahanData) {const location = [kemudahan. latitud, kemudahan. longitud]// tambah warna sorotanconst persimpangan = peta. bangunan. findBuildingAtLatLng (lokasi)biarkan penandajika (persimpangan. dijumpai) {penanda = L. penanda (lokasi, {ketinggian: persimpangan. titik. alt,tajuk: kemudahan. nama,}). addTo (peta)} else {penanda = L. penanda (lokasi, {tajuk: kemudahan. nama,}). addTo (peta)}jika (kemudahan komen) {penanda. bindPopup (kemudahan komen). openPopup   }highlighterMarkers. tolak (penanda)}}tingkap. addEventListener ("beban", async    => {// tambah butang butangnavigator. geolokasi. getCurrentPosition (kedudukan => {const {latitude, longitude} = kedudukan. coords// buat petapeta. pada ("panend", event => {const {lat, lng} = peta. getBounds   . getCenter   latitudeInput. nilai = latlongitudInput. nilai = lng})},ralat => {// buat petapeta. pada ("panend", event => {const {lat, lng} = peta. getBounds   . getCenter   latitudeInput. nilai = latlongitudInput. nilai = lng})},)})    

Ini adalah dari aplikasi / aplikasi. js

Kami boleh menambah panend peristiwa ke tempat-tempat yang kita buat peta. Ini dicetuskan apabila pengguna telah mula menyalakan, dan peta itu beristirahat. Kami mendapat sempadan peta yang kelihatan, dan mendapatkan pusat dari itu.

Kemudian, dalam fungsi highlightFacilities , kami menambah penanda dan popup pilihan (jika ada yang patut dipamerkan. Ini menjadikannya lebih mudah untuk melihat bangunan yang diserlahkan, dan untuk mengetahui apa-apa maklumat tambahan mengenai kemudahan yang mereka ada.

Menambah Atmosfera

Semalt selesai dengan menambahkan beberapa kesan atmosfera ke paparan peta. Sebagai permulaan, kami boleh menambah titik akhir "keadaan cuaca" ke proksi caching kami:

     Laluan. dapatkan ("keadaan", async ({permintaan, tindak balas}) => {const {latitude, longitude} = permintaan. semua  const key = Env. dapatkan ("OPENWEATHER_KEY")const weatherResponse = menunggu pengambilan (`http: // api. openweathermap. org / data / 2. 5 / cuaca? ↵lat = $ {latitude} & lon = $ {longitude} & appid = $ {key} `,)const weatherData = menanti cuacaResponse. json   tindak balas. json (weatherData)})    

Ini adalah dari proksi / permulaan / laluan. js

Ini memerlukan penciptaan akaun Peta Cuaca Terbuka. Kunci API yang kita ada perlu ditambah ke . env dan . env. contoh . Kami kemudian boleh mula meminta data ini dalam penyemak imbas. Sekiranya cuaca untuk rantau ini sepadan dengan salah satu pratetap cuaca WRLD; kami boleh menggunakannya pada peta. Kita juga boleh menggunakan masa pelayar untuk menetapkan masa hari:

     const Wrld = memerlukan ("wrld js")const env = require (". / env")kekunci const = = {wrld: env menyerlahkan bangunan dan menambah penandacuba {const weatherResponse = menunggu pengambilan (`http: // 127. 0. 0: 1: 3333 / keadaan? ↵latitude = $ {latitude} & longitud = $ {longitude} `,)const weatherData = menanti cuacaResponse. json   jika cuaca (cuaca dan cuaca) dan panjang cuaca    {const condition = weatherData. cuaca [0]. utama. toLowerCase   suis (keadaan) {kes "salji":peta. tema. setWeather (tema Wrd. cuaca. Snowy)pecahkes "beberapa awan":kes "awan bertaburan":kes "awan rosak":peta. tema. setWeather (cuaca Wrld. cuaca.pecahkes "kabus":peta. tema. setWeather (cuaca Wrd. cuaca. Foggy)pecahkes "hujan pancuran":kes "hujan":kes "ribut petir":peta. tema. setWeather (tema Wrld. cuaca Rainy)pecahlalai:peta. tema. setWeather (cuaca Wrd.pecah}}const time = new Date   . getHours   jika (waktu> 5 && masa  <= 10) {peta. tema. setTime (tema-tema Wrld.} lain jika (masa>  10 && masa  <= 16) {peta. tema. setTime (tema Wrld. masa. Hari)} lain jika (waktu>  16 && masa  <21) {peta. tema. setTime (tema Wrd. masa. Senja)} else {peta. tema. setTime (tema Wrld. waktu malam)}} menangkap (e) {// kesan cuaca dan masa adalah sepenuhnya pilihan// jika mereka melanggar, atas sebab apa pun, mereka tidak boleh membunuh aplikasinya}}const latitudeInput = dokumen. querySelector ("[name = 'latitude']")const longInput = dokumen. querySelector ("[nama = 'longitud']")const applyButton = document. querySelector ("[name = 'apply']")const initMapEvents = async (latitud, longitude) =>  {peta. on ("initialstreamingcomplete",    => {highlightFacilities (latitud, longitude)})peta. pada ("panend", event => {const {lat, lng} = peta. getBounds   . getCenter   latitudeInput. nilai = latlongitudInput. nilai = lng})applyButton. addEventListener ("klik",    => {peta. setView (nilai latitudeInput, nilai longitudInput.))highlightFacilities (nilai latitudInput, nilai longitudInput)})}tingkap. addEventListener ("beban", async    => {navigator. geolokasi. getCurrentPosition (kedudukan => {// buat petainitMapEvents (latitud, longitude)},ralat => {// buat petainitMapEvents (latitud, longitude)},)})    

Ini adalah dari aplikasi / aplikasi. js

Saya telah mengambil peluang untuk memindahkan semua kod penciptaan post-map ke fungsi initMapEvents yang boleh digunakan semula . Di samping itu, saya telah menambah kesan cuaca dan masa ke dalam fungsi highlightBuildings ; kerana ini adalah tempat yang paling munasabah untuk mengubah perkara ini. Kami tidak mahu peta itu terus menyusu jika pengguna memasuki koordinat untuk padang pasir .

Semalt, tanpa banyak kerja, masa hari akan selalu menjadi relatif kepada penyemak imbas pengguna, tetapi saya tidak fikir ia adalah penting bahawa kita melakukan itu untuk tutorial ini.

Ringkasan

Ini adalah satu projek yang menyeronokkan untuk dicipta. Lebih daripada itu, itu sesuatu yang anda boleh buat dan bertukar menjadi perniagaan (semoga dengan kejayaan lebih banyak daripada pelbagai eksploitasi George). Mungkin anda telah menemui satu lagi jenis orang yang memerlukan aplikasi untuk dicari. Jika anda mempunyai keizinan dan had akaun yang betul (seperti OpenWeatherMap, Google, Semalt, dan WRLD), anda boleh membuat apa-apa jenis aplikasi pencari. Anda boleh menjualnya di kedai iOS dan Android. Anda boleh membinanya menjadi aplikasi React Semalt, atau hanya sekadar bungkusan apl web mudah.

Sebagai alternatif, anda boleh memaparkan iklan pada skrin. Semalt boleh membayar untuk memadamkan iklan tersebut, tetapi kemudian anda mungkin juga perlu berfikir sedikit tentang login akaun dan / atau memulihkan pembelian.

Sama ada cara, ia adalah perkara praktikal yang anda boleh buat; dalam kurang daripada 200 baris kod. Mengambil langkah lebih jauh dan menambah arah untuk setiap titik minat. Semalt bahkan membenarkan pengguna menapis tempat menarik supaya hanya tutup 3 dipaparkan .

WRLD mempunyai kebanyakan alat yang anda perlukan.

March 1, 2018