‫Narator: Selanjutnya, Anda akan
‫mempelajari cara mengintegrasikan peta bagus yang menampilkan semua
‫lokasi tur tertentu ke dalam situs web kami menggunakan Mapbox.
‫Tapi sebelum kita
‫melakukannya, kita harus memperbaiki Bug kecil yang baru saja saya temukan.
‫Jadi sekarang kita sedang dalam tur kemping taman,
‫tapi Anda lihat di atas sini tertulis
‫"The Forest Hiker" oke? Jadi, Itu jelas salah
‫dan jadi, itu
‫karena
‫di sini, di get tour handler kami,
‫kami selalu menyalip gelar ini, jadi
‫"Tur Pendaki Hutan".
‫Yang tentu saja tidak benar jadi mari kita perbaiki.
‫Oke, dan jadi katakanlah di
‫sini tur. nama dan kemudian
‫tur.
‫Mari kita membuat huruf besar itu sebenarnya.
‫Jadi, sekarang kita harus melihat tur "The park
‫camper" dan ya ini dia.
‫Dan sekarang tentang peta yang akan ditampilkan
‫di sini di area kosong
‫ini, kita akan menggunakan perpustakaan yang sangat bagus yang disebut
‫"Kotak Peta" dan perpustakaan itu benar-benar berjalan di ujung depan.
‫Jadi, dalam kuliah ini kita
‫sebenarnya akan menulis sedikit kode front end,
‫dan tidak terlalu banyak tentang back end.
‫Tapi ini masih sangat penting
‫karena sekarang Anda akan belajar bagaimana menulis
‫JavaScript untuk sisi klien dan kemudian mengintegrasikannya ke dalam template kita.
‫Oke?
‫Jadi mari
‫kita lakukan itu dan pertama-tama ingat bahwa semua data,
‫jadi semua aset yang tersedia di klien,
‫ada di folder publik ini.
‫Jadi misalnya, file CSS kami, gambar kami dan kami
‫juga memiliki folder di sini untuk JavaScript.
‫Dan saat ini kosong dan sekarang mari
‫kita membuat file baru di sini bernama
‫Mapbox.
‫js Oke? Jadi ini pada dasarnya adalah
‫file JavaScript yang akan kita integrasikan ke dalam
‫HTML kita dan yang kemudian akan dijalankan di sisi klien.
‫Baiklah? Jadi seperti JavaScript biasa
‫yang telah Anda tulis sepanjang hidup Anda (Tertawa) Benar?
‫Tapi untuk saat ini, mari kita lakukan beberapa konsol sederhana. log di sini sebelum
‫kita benar-benar menghubungkannya dengan back end kita.
‫Jadi katakan saja konsol. log halo dari sisi klien.
‫Baiklah, dan
‫sekarang mari kita mengintegrasikannya ke dalam template kita.
‫Sekarang mungkin terlihat bahwa tempat
‫terbaik untuk melakukan integrasi ini ada di sini di template dasar kita, kan?
‫Tapi nyatanya kita hanya ingin memasukkan script Mapbox di
‫halaman tour saja kan?
‫Jadi, bagaimana kita bisa melakukan itu?
‫Dan solusi untuk itu sekali lagi, memperluas blok
‫di sini di template dasar kita, jadi saya akan
‫membuat blok baru di sini
‫yang kemudian akan kita perpanjang dari tur. Oke?
‫Dan sebenarnya blok ini akan ada di sini,
‫dan saya menyebutnya "kepala"
‫dan semua konten ini akan benar-benar ada di sana.
‫Sekarang Anda mungkin bertanya-tanya mengapa kami melakukan itu,
‫karena ketika kami memperpanjang
‫blok maka konten di dalamnya menghilang.
‫Jadi itulah yang terjadi di sini, kan?
‫Tapi sebenarnya ada cara lain untuk memperpanjang blok, yang
‫kemudian hanya akan menambahkan konten baru di akhir
‫atau di awal blok.
‫Baiklah? Jadi mari kita lihat bagaimana kita bisa melakukannya.
‫Jadi tepat di awal template tur kita,
‫sekarang
‫katakan: block
‫head, dan sebenarnya kita katakan block append head, oke?
‫Jadi, apa pun yang akan kita tulis di blok
‫ini di sini akan ditambahkan ke konten
‫yang sudah ada di blok itu.
‫Oke? Dan kita juga
‫bisa menggunakan "prepend" dan kemudian akan ditambahkan di awal blok, oke?
‫Dan sekarang, yang akan kita lakukan di sini adalah
‫menambahkan skrip baru.
‫Jadi menggunakan tag skrip dan kemudian
‫menentukan atribut sumber, dan itu
‫untuk saat ini "js/mapbox. j" oke?
‫Jadi sekali lagi, template ini di sini sudah memperluas template
‫dasar kita, dan
‫dengan ini di sini, pada dasarnya kita dapat menyuntikkan
‫baris kode ini, ke
‫dalam blok kepala yang sudah ada di template dasar kita.
‫Jadi, kami menambahkan itu, dan itu akan muncul di sini
‫di akhir blok kepala ini, jadi di sini.
‫Dan sebenarnya mari kita coba itu milik kita sekarang.
‫Jadi ketika
‫saya memuat ulang, kita sekarang harus mendapatkan
‫pesan itu di konsol kita dan memang, "Halo
‫dari
‫sisi klien" Bagus Jadi, selanjutnya kita ingin benar-benar mendapatkan
‫akses ke data lokasi
‫tur yang sedang kita coba tampilkan,
‫di sini di file JavaScript.
‫Jadi bagaimana cara melakukannya?
‫Nah, maka kita bisa melakukan permintaan Ajax, jadi pada
‫dasarnya panggilan ke API kita dan mendapatkan
‫data dari sana.
‫Tapi itu tidak terlalu diperlukan dalam kasus ini.
‫Jadi, izinkan saya menunjukkan trik yang sangat bagus.
‫Jadi di sini, di template tur
‫kami, kami sudah memiliki semua data tentang tur itu
‫sendiri dan sekarang kami
‫cukup memasukkan data itu ke dalam
‫HTML kami sehingga JavaScript dapat membacanya dari sana, oke?
‫Jadi pada dasarnya, kita akan mengekspos data
‫lokasi, di sini sebagai string dalam HTML
‫dan JavaScript kita kemudian akan
‫mengambilnya dari sana tanpa harus melakukan, seperti panggilan API secara terpisah.
‫Jadi, mari kita turun ke sini
‫ke kelas peta atau bagian sebenarnya, oke?
‫Jadi bagian ini di sini, dan sudah memiliki
‫elemen Diff
‫dengan kelas peta, dan Anda akan melihat mengapa itu
‫adalah ID nanti, oke? Tapi untuk saat ini saya
‫ingin benar-benar menentukan atribut data di sini, oke?
‫Jadi ada trik yang sangat bagus dalam JavaScript
‫di mana kita dapat menentukan atribut data dalam HTML, dan kemudian
‫membaca atribut tersebut menggunakan JavaScript dengan cara
‫yang sangat mudah.
‫Dan begini cara kerjanya, jadi
‫kita bisa mengatakan "data/" dan kemudian di
‫sini apa pun yang kita ingin
‫menyebutnya, dalam hal ini kita
‫katakan "lokasi" oke? Dan kemudian kami mengaturnya ke tur kami. lokasi.
‫Sekarang sebelum benar-benar
‫melakukan itu, kita perlu mengubah array itu menjadi string, bukan?
‫Jadi, mari kita lihat dengan cepat.
‫Jadi lokasi kami adalah seluruh array ini dengan objek
‫ini di sana.
‫Tetapi dalam HTML, tentu saja kita tidak dapat
‫memiliki array atau objek atau semacamnya, jadi yang
‫harus kita lakukan
‫adalah mengubah semua itu menjadi string.
‫Dan itu untungnya cukup mudah,
‫Yang harus kita lakukan hanyalah "JSON. merangkai " baik-baik saja?
‫Dan kemudian di sini tur. lokasi, atau sebenarnya
‫itu lokasi.
‫Baiklah?
‫Dan jika kita
‫menyimpannya sekarang, mari kita buka di sini dan periksa peta ini di sini,
‫dan sekarang Anda melihat lokasi data, dan kami
‫memiliki string besar ini di sini,
‫yang pada dasarnya berisi semua data lokasi kami.
‫Baiklah, jadi, sekarang di
‫JavaScript kami, kami bisa mendapatkannya dengan
‫sangat mudah.
‫Jadi, lokasi ada di
‫dokumen. getElementById dan
‫kemudian peta, dan sekarang ini dia bagian dari triknya, karena
‫apa pun yang kita masukkan ke dalam atribut data seperti ini, kemudian akan
‫disimpan ke dalam properti kumpulan data, dan dalam
‫hal ini kumpulan data. lokasi,
‫karena disebut data/ atau data- lokasi.
‫Oke? Jadi seperti
‫ini, kumpulan data. lokasi, oke?
‫Dan sekarang kita mendapatkan
‫semua kesalahan ini
‫berasal dari ESlint, dan itu karena ESlint dikonfigurasi
‫untuk Node.js. js dan bukan
‫untuk JavaScript , jadi apa
‫yang dapat kita lakukan di sini pada dasarnya
‫adalah menonaktifkan ESlint untuk seluruh file ini, sampai kita mengatakan pada dasarnya
‫dengan komentar di awal di sini, ESlint menonaktifkan dan jadi ya, ia
‫akan memahami ini dan sepenuhnya mengubahnya off untuk seluruh file ini, oke?
‫Jadi itu adalah data lokasi di
‫sini yang baru saja kita masukkan ke
‫dalam HTML kita, tetapi ingat bahwa
‫itu adalah string dan jadi kita perlu mengubahnya kembali ke JSON, dan
‫juga JSON. mengurai dan
‫kemudian semua yang ada di sini.
‫Baiklah, jadi sekarang mari kita lihat itu hanya untuk melihat
‫apakah semuanya bekerja dengan benar.
‫Mari kita
‫muat ulang, dan sekarang ada yang tidak beres di sini
‫di file Mapbox kita, nah itu
‫juga tampaknya benar sebenarnya, jadi mari kita uji apakah itu benar-benar disebut
‫map di sini dan memang itu adalah
‫ID dengan peta, jadi saya percaya bahwa mungkin
‫masalahnya adalah bahwa pada saat
‫kita memanggil atau mendapatkan elemen dengan
‫ID, jadi ini di
‫sini, jadi mungkin saat ini DOM sebenarnya
‫belum dimuat, oke? Dan itu
‫karena skrip kami terintegrasi tepat di awal file, jadi skrip
‫ini di sini
‫tepat di kepala, sedangkan seharusnya di
‫bagian bawah halaman. Oke?
‫Jadi biarkan saya benar-benar menyalin yang
‫ini di sini dan meletakkannya
‫secara manual di pangkalan, jadi saya akan menyalinnya
‫dan mengomentarinya, tapi jangan khawatir kita sebenarnya masih akan
‫menggunakan teknik penambahan blok ini di sini nanti di video, karena
‫ada beberapa hal yang berasal dari Mapbox yang
‫masih perlu kita masukkan ke
‫dalam kepala, oke? Tapi untuk saat ini mari kita
‫letakkan skrip ini di sini tepat di bagian bawah halaman.
‫Oke?
‫Itu (Tertawa) tentu
‫saja, saya hanya ingin pergi ke
‫file lain, jadi saya bisa menyimpannya sehingga server
‫benar-benar memuat ulang karena file
‫pug ini, seperti yang
‫mungkin telah Anda perhatikan di sini, tidak
‫memicu restart server kami , Baiklah?
‫Bagaimanapun, saya berharap sekarang ini akan berhasil
‫dan memang benar.
‫Jadi kami memiliki array
‫di sini, dan memang ini adalah empat lokasi tur kami.
‫Oke jadi sekarang kami memiliki semuanya terintegrasi dengan baik,
‫dan semua siap untuk mengintegrasikan Mapbox dan membuat peta
‫kami sendiri di sini.
‫Tapi agar tidak membuat video yang terlalu panjang, saya
‫akan melakukannya di video berikutnya.