1
00:00:01,100 --> 00:00:03,220
‫Narator: Selanjutnya, Anda akan

2
00:00:03,220 --> 00:00:07,150
‫mempelajari cara mengintegrasikan peta bagus yang menampilkan semua

3
00:00:07,150 --> 00:00:11,373
‫lokasi tur tertentu ke dalam situs web kami menggunakan Mapbox.

4
00:00:12,730 --> 00:00:14,150
‫Tapi sebelum kita

5
00:00:14,150 --> 00:00:18,160
‫melakukannya, kita harus memperbaiki Bug kecil yang baru saja saya temukan.

6
00:00:18,160 --> 00:00:20,840
‫Jadi sekarang kita sedang dalam tur kemping taman,

7
00:00:20,840 --> 00:00:23,477
‫tapi Anda lihat di atas sini tertulis

8
00:00:23,477 --> 00:00:27,180
‫"The Forest Hiker" oke? Jadi, Itu jelas salah

9
00:00:27,180 --> 00:00:28,991
‫dan jadi, itu

10
00:00:28,991 --> 00:00:30,260
‫karena

11
00:00:30,260 --> 00:00:33,700
‫di sini, di get tour handler kami,

12
00:00:33,700 --> 00:00:36,900
‫kami selalu menyalip gelar ini, jadi

13
00:00:36,900 --> 00:00:38,530
‫"Tur Pendaki Hutan".

14
00:00:38,530 --> 00:00:42,193
‫Yang tentu saja tidak benar jadi mari kita perbaiki.

15
00:00:44,850 --> 00:00:47,780
‫Oke, dan jadi katakanlah di

16
00:00:47,780 --> 00:00:50,190
‫sini tur. nama dan kemudian

17
00:00:51,400 --> 00:00:52,283
‫tur.

18
00:00:54,520 --> 00:00:56,283
‫Mari kita membuat huruf besar itu sebenarnya.

19
00:00:57,150 --> 00:01:00,150
‫Jadi, sekarang kita harus melihat tur "The park

20
00:01:02,620 --> 00:01:05,070
‫camper" dan ya ini dia.

21
00:01:05,070 --> 00:01:07,740
‫Dan sekarang tentang peta yang akan ditampilkan

22
00:01:07,740 --> 00:01:10,050
‫di sini di area kosong

23
00:01:10,050 --> 00:01:13,580
‫ini, kita akan menggunakan perpustakaan yang sangat bagus yang disebut

24
00:01:13,580 --> 00:01:17,060
‫"Kotak Peta" dan perpustakaan itu benar-benar berjalan di ujung depan.

25
00:01:17,060 --> 00:01:19,030
‫Jadi, dalam kuliah ini kita

26
00:01:19,030 --> 00:01:21,070
‫sebenarnya akan menulis sedikit kode front end,

27
00:01:21,070 --> 00:01:23,330
‫dan tidak terlalu banyak tentang back end.

28
00:01:23,330 --> 00:01:25,300
‫Tapi ini masih sangat penting

29
00:01:25,300 --> 00:01:27,890
‫karena sekarang Anda akan belajar bagaimana menulis

30
00:01:27,890 --> 00:01:31,730
‫JavaScript untuk sisi klien dan kemudian mengintegrasikannya ke dalam template kita.

31
00:01:31,730 --> 00:01:32,710
‫Oke?

32
00:01:32,710 --> 00:01:34,190
‫Jadi mari

33
00:01:35,030 --> 00:01:39,130
‫kita lakukan itu dan pertama-tama ingat bahwa semua data,

34
00:01:39,130 --> 00:01:42,140
‫jadi semua aset yang tersedia di klien,

35
00:01:42,140 --> 00:01:44,170
‫ada di folder publik ini.

36
00:01:44,170 --> 00:01:47,830
‫Jadi misalnya, file CSS kami, gambar kami dan kami

37
00:01:47,830 --> 00:01:51,050
‫juga memiliki folder di sini untuk JavaScript.

38
00:01:51,050 --> 00:01:53,470
‫Dan saat ini kosong dan sekarang mari

39
00:01:53,470 --> 00:01:56,230
‫kita membuat file baru di sini bernama

40
00:01:58,697 --> 00:02:00,190
‫Mapbox.

41
00:02:03,000 --> 00:02:06,525
‫js Oke? Jadi ini pada dasarnya adalah

42
00:02:06,525 --> 00:02:08,700
‫file JavaScript yang akan kita integrasikan ke dalam

43
00:02:08,700 --> 00:02:11,250
‫HTML kita dan yang kemudian akan dijalankan di sisi klien.

44
00:02:11,250 --> 00:02:14,140
‫Baiklah? Jadi seperti JavaScript biasa

45
00:02:14,140 --> 00:02:17,340
‫yang telah Anda tulis sepanjang hidup Anda (Tertawa) Benar?

46
00:02:17,340 --> 00:02:20,760
‫Tapi untuk saat ini, mari kita lakukan beberapa konsol sederhana. log di sini sebelum

47
00:02:20,760 --> 00:02:23,343
‫kita benar-benar menghubungkannya dengan back end kita.

48
00:02:25,540 --> 00:02:30,540
‫Jadi katakan saja konsol. log halo dari sisi klien.

49
00:02:33,360 --> 00:02:34,333
‫Baiklah, dan

50
00:02:35,400 --> 00:02:39,160
‫sekarang mari kita mengintegrasikannya ke dalam template kita.

51
00:02:39,160 --> 00:02:41,290
‫Sekarang mungkin terlihat bahwa tempat

52
00:02:41,290 --> 00:02:45,600
‫terbaik untuk melakukan integrasi ini ada di sini di template dasar kita, kan?

53
00:02:45,600 --> 00:02:49,220
‫Tapi nyatanya kita hanya ingin memasukkan script Mapbox di

54
00:02:49,220 --> 00:02:51,230
‫halaman tour saja kan?

55
00:02:51,230 --> 00:02:53,610
‫Jadi, bagaimana kita bisa melakukan itu?

56
00:02:53,610 --> 00:02:56,070
‫Dan solusi untuk itu sekali lagi, memperluas blok

57
00:02:56,070 --> 00:02:59,040
‫di sini di template dasar kita, jadi saya akan

58
00:02:59,040 --> 00:03:01,190
‫membuat blok baru di sini

59
00:03:01,190 --> 00:03:05,850
‫yang kemudian akan kita perpanjang dari tur. Oke?

60
00:03:05,850 --> 00:03:08,523
‫Dan sebenarnya blok ini akan ada di sini,

61
00:03:10,670 --> 00:03:12,260
‫dan saya menyebutnya "kepala"

62
00:03:12,260 --> 00:03:15,093
‫dan semua konten ini akan benar-benar ada di sana.

63
00:03:16,020 --> 00:03:18,740
‫Sekarang Anda mungkin bertanya-tanya mengapa kami melakukan itu,

64
00:03:18,740 --> 00:03:20,410
‫karena ketika kami memperpanjang

65
00:03:20,410 --> 00:03:22,700
‫blok maka konten di dalamnya menghilang.

66
00:03:22,700 --> 00:03:26,350
‫Jadi itulah yang terjadi di sini, kan?

67
00:03:26,350 --> 00:03:29,440
‫Tapi sebenarnya ada cara lain untuk memperpanjang blok, yang

68
00:03:29,440 --> 00:03:32,350
‫kemudian hanya akan menambahkan konten baru di akhir

69
00:03:32,350 --> 00:03:34,060
‫atau di awal blok.

70
00:03:34,060 --> 00:03:37,190
‫Baiklah? Jadi mari kita lihat bagaimana kita bisa melakukannya.

71
00:03:37,190 --> 00:03:41,170
‫Jadi tepat di awal template tur kita,

72
00:03:41,170 --> 00:03:42,073
‫sekarang

73
00:03:44,810 --> 00:03:46,120
‫katakan: block

74
00:03:46,120 --> 00:03:50,900
‫head, dan sebenarnya kita katakan block append head, oke?

75
00:03:50,900 --> 00:03:53,730
‫Jadi, apa pun yang akan kita tulis di blok

76
00:03:53,730 --> 00:03:55,960
‫ini di sini akan ditambahkan ke konten

77
00:03:55,960 --> 00:03:58,010
‫yang sudah ada di blok itu.

78
00:03:58,010 --> 00:04:00,510
‫Oke? Dan kita juga

79
00:04:00,510 --> 00:04:04,500
‫bisa menggunakan "prepend" dan kemudian akan ditambahkan di awal blok, oke?

80
00:04:04,500 --> 00:04:07,690
‫Dan sekarang, yang akan kita lakukan di sini adalah

81
00:04:07,690 --> 00:04:08,950
‫menambahkan skrip baru.

82
00:04:08,950 --> 00:04:11,890
‫Jadi menggunakan tag skrip dan kemudian

83
00:04:11,890 --> 00:04:14,410
‫menentukan atribut sumber, dan itu

84
00:04:15,280 --> 00:04:23,760
‫untuk saat ini "js/mapbox. j" oke?

85
00:04:23,760 --> 00:04:27,400
‫Jadi sekali lagi, template ini di sini sudah memperluas template

86
00:04:27,400 --> 00:04:28,800
‫dasar kita, dan

87
00:04:28,800 --> 00:04:32,070
‫dengan ini di sini, pada dasarnya kita dapat menyuntikkan

88
00:04:32,070 --> 00:04:33,870
‫baris kode ini, ke

89
00:04:33,870 --> 00:04:37,450
‫dalam blok kepala yang sudah ada di template dasar kita.

90
00:04:37,450 --> 00:04:40,930
‫Jadi, kami menambahkan itu, dan itu akan muncul di sini

91
00:04:40,930 --> 00:04:44,380
‫di akhir blok kepala ini, jadi di sini.

92
00:04:44,380 --> 00:04:46,453
‫Dan sebenarnya mari kita coba itu milik kita sekarang.

93
00:04:47,940 --> 00:04:49,053
‫Jadi ketika

94
00:04:50,520 --> 00:04:53,610
‫saya memuat ulang, kita sekarang harus mendapatkan

95
00:04:53,610 --> 00:04:56,760
‫pesan itu di konsol kita dan memang, "Halo

96
00:04:56,760 --> 00:04:57,593
‫dari

97
00:04:58,700 --> 00:05:02,080
‫sisi klien" Bagus Jadi, selanjutnya kita ingin benar-benar mendapatkan

98
00:05:02,080 --> 00:05:03,850
‫akses ke data lokasi

99
00:05:03,850 --> 00:05:06,140
‫tur yang sedang kita coba tampilkan,

100
00:05:06,140 --> 00:05:08,170
‫di sini di file JavaScript.

101
00:05:08,170 --> 00:05:10,390
‫Jadi bagaimana cara melakukannya?

102
00:05:10,390 --> 00:05:13,590
‫Nah, maka kita bisa melakukan permintaan Ajax, jadi pada

103
00:05:13,590 --> 00:05:16,410
‫dasarnya panggilan ke API kita dan mendapatkan

104
00:05:16,410 --> 00:05:17,870
‫data dari sana.

105
00:05:17,870 --> 00:05:20,760
‫Tapi itu tidak terlalu diperlukan dalam kasus ini.

106
00:05:20,760 --> 00:05:23,590
‫Jadi, izinkan saya menunjukkan trik yang sangat bagus.

107
00:05:23,590 --> 00:05:25,750
‫Jadi di sini, di template tur

108
00:05:25,750 --> 00:05:28,870
‫kami, kami sudah memiliki semua data tentang tur itu

109
00:05:28,870 --> 00:05:30,840
‫sendiri dan sekarang kami

110
00:05:30,840 --> 00:05:33,270
‫cukup memasukkan data itu ke dalam

111
00:05:33,270 --> 00:05:36,630
‫HTML kami sehingga JavaScript dapat membacanya dari sana, oke?

112
00:05:36,630 --> 00:05:39,570
‫Jadi pada dasarnya, kita akan mengekspos data

113
00:05:39,570 --> 00:05:42,327
‫lokasi, di sini sebagai string dalam HTML

114
00:05:42,327 --> 00:05:45,080
‫dan JavaScript kita kemudian akan

115
00:05:45,080 --> 00:05:49,500
‫mengambilnya dari sana tanpa harus melakukan, seperti panggilan API secara terpisah.

116
00:05:49,500 --> 00:05:52,760
‫Jadi, mari kita turun ke sini

117
00:05:52,760 --> 00:05:56,270
‫ke kelas peta atau bagian sebenarnya, oke?

118
00:05:56,270 --> 00:05:59,950
‫Jadi bagian ini di sini, dan sudah memiliki

119
00:05:59,950 --> 00:06:01,460
‫elemen Diff

120
00:06:01,460 --> 00:06:05,410
‫dengan kelas peta, dan Anda akan melihat mengapa itu

121
00:06:05,410 --> 00:06:08,800
‫adalah ID nanti, oke? Tapi untuk saat ini saya

122
00:06:08,800 --> 00:06:10,870
‫ingin benar-benar menentukan atribut data di sini, oke?

123
00:06:10,870 --> 00:06:13,470
‫Jadi ada trik yang sangat bagus dalam JavaScript

124
00:06:13,470 --> 00:06:17,030
‫di mana kita dapat menentukan atribut data dalam HTML, dan kemudian

125
00:06:17,030 --> 00:06:19,580
‫membaca atribut tersebut menggunakan JavaScript dengan cara

126
00:06:19,580 --> 00:06:21,100
‫yang sangat mudah.

127
00:06:21,100 --> 00:06:23,010
‫Dan begini cara kerjanya, jadi

128
00:06:23,010 --> 00:06:25,710
‫kita bisa mengatakan "data/" dan kemudian di

129
00:06:25,710 --> 00:06:27,730
‫sini apa pun yang kita ingin

130
00:06:27,730 --> 00:06:29,593
‫menyebutnya, dalam hal ini kita

131
00:06:31,800 --> 00:06:36,560
‫katakan "lokasi" oke? Dan kemudian kami mengaturnya ke tur kami. lokasi.

132
00:06:36,560 --> 00:06:38,410
‫Sekarang sebelum benar-benar

133
00:06:38,410 --> 00:06:42,840
‫melakukan itu, kita perlu mengubah array itu menjadi string, bukan?

134
00:06:42,840 --> 00:06:45,540
‫Jadi, mari kita lihat dengan cepat.

135
00:06:45,540 --> 00:06:50,170
‫Jadi lokasi kami adalah seluruh array ini dengan objek

136
00:06:50,170 --> 00:06:51,930
‫ini di sana.

137
00:06:51,930 --> 00:06:55,320
‫Tetapi dalam HTML, tentu saja kita tidak dapat

138
00:06:55,320 --> 00:06:58,480
‫memiliki array atau objek atau semacamnya, jadi yang

139
00:06:58,480 --> 00:07:00,010
‫harus kita lakukan

140
00:07:00,010 --> 00:07:02,740
‫adalah mengubah semua itu menjadi string.

141
00:07:02,740 --> 00:07:05,003
‫Dan itu untungnya cukup mudah,

142
00:07:06,230 --> 00:07:12,513
‫Yang harus kita lakukan hanyalah "JSON. merangkai " baik-baik saja?

143
00:07:13,417 --> 00:07:16,960
‫Dan kemudian di sini tur. lokasi, atau sebenarnya

144
00:07:16,960 --> 00:07:19,610
‫itu lokasi.

145
00:07:19,610 --> 00:07:19,610
‫Baiklah?

146
00:07:19,610 --> 00:07:21,063
‫Dan jika kita

147
00:07:23,040 --> 00:07:28,040
‫menyimpannya sekarang, mari kita buka di sini dan periksa peta ini di sini,

148
00:07:28,290 --> 00:07:31,120
‫dan sekarang Anda melihat lokasi data, dan kami

149
00:07:31,120 --> 00:07:33,620
‫memiliki string besar ini di sini,

150
00:07:33,620 --> 00:07:36,493
‫yang pada dasarnya berisi semua data lokasi kami.

151
00:07:38,050 --> 00:07:39,670
‫Baiklah, jadi, sekarang di

152
00:07:39,670 --> 00:07:42,420
‫JavaScript kami, kami bisa mendapatkannya dengan

153
00:07:42,420 --> 00:07:44,023
‫sangat mudah.

154
00:07:46,950 --> 00:07:49,670
‫Jadi, lokasi ada di

155
00:07:50,670 --> 00:07:52,983
‫dokumen. getElementById dan

156
00:07:56,260 --> 00:07:59,810
‫kemudian peta, dan sekarang ini dia bagian dari triknya, karena

157
00:07:59,810 --> 00:08:04,800
‫apa pun yang kita masukkan ke dalam atribut data seperti ini, kemudian akan

158
00:08:04,800 --> 00:08:07,820
‫disimpan ke dalam properti kumpulan data, dan dalam

159
00:08:07,820 --> 00:08:11,020
‫hal ini kumpulan data. lokasi,

160
00:08:11,020 --> 00:08:15,813
‫karena disebut data/ atau data- lokasi.

161
00:08:16,980 --> 00:08:20,470
‫Oke? Jadi seperti

162
00:08:20,470 --> 00:08:26,533
‫ini, kumpulan data. lokasi, oke?

163
00:08:26,533 --> 00:08:28,210
‫Dan sekarang kita mendapatkan

164
00:08:28,210 --> 00:08:29,453
‫semua kesalahan ini

165
00:08:30,347 --> 00:08:33,480
‫berasal dari ESlint, dan itu karena ESlint dikonfigurasi

166
00:08:33,480 --> 00:08:35,900
‫untuk Node.js. js dan bukan

167
00:08:35,900 --> 00:08:37,900
‫untuk JavaScript , jadi apa

168
00:08:37,900 --> 00:08:40,973
‫yang dapat kita lakukan di sini pada dasarnya

169
00:08:41,923 --> 00:08:46,210
‫adalah menonaktifkan ESlint untuk seluruh file ini, sampai kita mengatakan pada dasarnya

170
00:08:48,300 --> 00:08:52,670
‫dengan komentar di awal di sini, ESlint menonaktifkan dan jadi ya, ia

171
00:08:52,670 --> 00:08:57,000
‫akan memahami ini dan sepenuhnya mengubahnya off untuk seluruh file ini, oke?

172
00:08:57,000 --> 00:08:59,100
‫Jadi itu adalah data lokasi di

173
00:08:59,100 --> 00:09:01,320
‫sini yang baru saja kita masukkan ke

174
00:09:01,320 --> 00:09:03,460
‫dalam HTML kita, tetapi ingat bahwa

175
00:09:03,460 --> 00:09:07,285
‫itu adalah string dan jadi kita perlu mengubahnya kembali ke JSON, dan

176
00:09:07,285 --> 00:09:09,660
‫juga JSON. mengurai dan

177
00:09:11,410 --> 00:09:13,683
‫kemudian semua yang ada di sini.

178
00:09:15,960 --> 00:09:20,160
‫Baiklah, jadi sekarang mari kita lihat itu hanya untuk melihat

179
00:09:20,160 --> 00:09:22,510
‫apakah semuanya bekerja dengan benar.

180
00:09:26,720 --> 00:09:27,823
‫Mari kita

181
00:09:28,770 --> 00:09:32,873
‫muat ulang, dan sekarang ada yang tidak beres di sini

182
00:09:33,740 --> 00:09:36,063
‫di file Mapbox kita, nah itu

183
00:09:37,120 --> 00:09:42,120
‫juga tampaknya benar sebenarnya, jadi mari kita uji apakah itu benar-benar disebut

184
00:09:45,030 --> 00:09:47,830
‫map di sini dan memang itu adalah

185
00:09:47,830 --> 00:09:51,160
‫ID dengan peta, jadi saya percaya bahwa mungkin

186
00:09:51,160 --> 00:09:53,360
‫masalahnya adalah bahwa pada saat

187
00:09:53,360 --> 00:09:55,803
‫kita memanggil atau mendapatkan elemen dengan

188
00:09:56,690 --> 00:09:58,560
‫ID, jadi ini di

189
00:09:58,560 --> 00:10:01,210
‫sini, jadi mungkin saat ini DOM sebenarnya

190
00:10:01,210 --> 00:10:04,060
‫belum dimuat, oke? Dan itu

191
00:10:04,060 --> 00:10:08,530
‫karena skrip kami terintegrasi tepat di awal file, jadi skrip

192
00:10:08,530 --> 00:10:09,963
‫ini di sini

193
00:10:11,440 --> 00:10:14,300
‫tepat di kepala, sedangkan seharusnya di

194
00:10:14,300 --> 00:10:17,580
‫bagian bawah halaman. Oke?

195
00:10:17,580 --> 00:10:19,760
‫Jadi biarkan saya benar-benar menyalin yang

196
00:10:19,760 --> 00:10:21,720
‫ini di sini dan meletakkannya

197
00:10:21,720 --> 00:10:24,580
‫secara manual di pangkalan, jadi saya akan menyalinnya

198
00:10:24,580 --> 00:10:27,610
‫dan mengomentarinya, tapi jangan khawatir kita sebenarnya masih akan

199
00:10:27,610 --> 00:10:31,270
‫menggunakan teknik penambahan blok ini di sini nanti di video, karena

200
00:10:31,270 --> 00:10:34,100
‫ada beberapa hal yang berasal dari Mapbox yang

201
00:10:34,100 --> 00:10:35,750
‫masih perlu kita masukkan ke

202
00:10:36,920 --> 00:10:40,170
‫dalam kepala, oke? Tapi untuk saat ini mari kita

203
00:10:40,170 --> 00:10:42,483
‫letakkan skrip ini di sini tepat di bagian bawah halaman.

204
00:10:44,600 --> 00:10:45,433
‫Oke?

205
00:10:47,220 --> 00:10:48,750
‫Itu (Tertawa) tentu

206
00:10:48,750 --> 00:10:51,200
‫saja, saya hanya ingin pergi ke

207
00:10:51,200 --> 00:10:54,360
‫file lain, jadi saya bisa menyimpannya sehingga server

208
00:10:54,360 --> 00:10:56,180
‫benar-benar memuat ulang karena file

209
00:10:56,180 --> 00:10:57,880
‫pug ini, seperti yang

210
00:10:57,880 --> 00:11:00,610
‫mungkin telah Anda perhatikan di sini, tidak

211
00:11:00,610 --> 00:11:03,010
‫memicu restart server kami , Baiklah?

212
00:11:03,010 --> 00:11:06,805
‫Bagaimanapun, saya berharap sekarang ini akan berhasil

213
00:11:06,805 --> 00:11:09,150
‫dan memang benar.

214
00:11:09,150 --> 00:11:11,070
‫Jadi kami memiliki array

215
00:11:11,070 --> 00:11:15,060
‫di sini, dan memang ini adalah empat lokasi tur kami.

216
00:11:15,060 --> 00:11:18,190
‫Oke jadi sekarang kami memiliki semuanya terintegrasi dengan baik,

217
00:11:18,190 --> 00:11:21,170
‫dan semua siap untuk mengintegrasikan Mapbox dan membuat peta

218
00:11:21,170 --> 00:11:23,010
‫kami sendiri di sini.

219
00:11:23,010 --> 00:11:25,960
‫Tapi agar tidak membuat video yang terlalu panjang, saya

220
00:11:25,960 --> 00:11:28,113
‫akan melakukannya di video berikutnya.