1
00:00:01,609 --> 00:00:04,900
‫-: [Jonas Schmedtman] Jadi kita sudah memiliki template HTML.

2
00:00:04,900 --> 00:00:07,790
‫Sekarang sampai pada bagian

3
00:00:07,790 --> 00:00:11,643
‫tersulit, yaitu benar-benar mengganti placeholder dengan konten.

4
00:00:13,450 --> 00:00:16,610
‫Jadi mari kita mulai dengan gambaran umum.

5
00:00:16,610 --> 00:00:19,680
‫Dan mari beri diri kita ruang bernapas di sini

6
00:00:19,680 --> 00:00:21,543
‫dan tambahkan beberapa komentar.

7
00:00:21,543 --> 00:00:23,350
‫(mengetik di keyboard)

8
00:00:23,350 --> 00:00:27,943
‫Jadi halaman ikhtisar dan beberapa komentar di sini.

9
00:00:30,790 --> 00:00:35,790
‫Jadi halaman produk, dan di sini kita memiliki API.

10
00:00:39,079 --> 00:00:42,079
‫Dan kemudian di sini kita memiliki Not found.

11
00:00:45,650 --> 00:00:48,990
‫Baiklah, jadi itu sudah terlihat sedikit lebih baik.

12
00:00:48,990 --> 00:00:52,820
‫Jadi sekali lagi, kita mulai dengan halaman ikhtisar.

13
00:00:52,820 --> 00:00:54,100
‫Jadi,

14
00:00:54,100 --> 00:00:58,580
‫langkah pertama adalah benar-benar memuat ikhtisar template.

15
00:00:58,580 --> 00:01:01,770
‫Oke, jadi setiap kali ada permintaan baru

16
00:01:01,770 --> 00:01:05,340
‫untuk rute ini, jadi rute atau /Overview yang

17
00:01:05,340 --> 00:01:08,180
‫disesuaikan, hal pertama yang akan

18
00:01:08,180 --> 00:01:11,240
‫kita lakukan adalah membaca gambaran umum template.

19
00:01:11,240 --> 00:01:14,020
‫Tapi, seperti sebelumnya, kita sebenarnya

20
00:01:14,020 --> 00:01:16,860
‫bisa melakukannya di luar callback ini, oke?

21
00:01:16,860 --> 00:01:20,000
‫Karena templat-templat ini, mereka akan selalu sama. Jadi,

22
00:01:20,000 --> 00:01:22,050
‫Anda benar-benar dapat membacanya

23
00:01:22,050 --> 00:01:25,280
‫ke memori tepat di awal saat kita memulai aplikasi.

24
00:01:25,280 --> 00:01:28,270
‫Dan kemudian, bila perlu, kami

25
00:01:28,270 --> 00:01:31,460
‫melanjutkan dan mengganti konten di sana.

26
00:01:31,460 --> 00:01:34,156
‫Oke, jadi seperti yang kita lakukan dengan

27
00:01:34,156 --> 00:01:36,720
‫data di sini, juga tidak perlu membaca

28
00:01:36,720 --> 00:01:38,528
‫data setiap kali ada

29
00:01:38,528 --> 00:01:41,403
‫permintaan dan hal yang sama terjadi untuk template.

30
00:01:42,240 --> 00:01:43,120
‫Oke?

31
00:01:43,120 --> 00:01:44,510
‫Jadi saya benar-benar

32
00:01:44,510 --> 00:01:47,090
‫akan melanjutkan dan melakukannya untuk ketiga template di

33
00:01:47,090 --> 00:01:49,260
‫sini sehingga kita tidak perlu melakukannya.

34
00:01:49,260 --> 00:01:54,260
‫Jadi saya akan melanjutkan, dan hanya untuk mendapatkan yang ini, sebut

35
00:01:55,610 --> 00:01:57,040
‫saja temp

36
00:01:59,000 --> 00:02:02,490
‫untuk gambaran umum template, dan nama DAR dan

37
00:02:03,670 --> 00:02:05,743
‫di sini kita memiliki template.

38
00:02:09,370 --> 00:02:13,213
‫Dan kemudian /template-overview.

39
00:02:15,460 --> 00:02:18,390
‫Oke, lalu gandakan ini di sini dua

40
00:02:19,510 --> 00:02:20,650
‫kali jadi

41
00:02:22,320 --> 00:02:24,683
‫kita punya satu untuk kartu, jadi

42
00:02:26,980 --> 00:02:29,983
‫kartu template, dan satu lagi untuk produk template.

43
00:02:35,460 --> 00:02:37,780
‫Produk, oke.

44
00:02:37,780 --> 00:02:39,870
‫Dan lagi, perlu diingat bahwa kita dapat

45
00:02:39,870 --> 00:02:42,380
‫melakukannya dengan versi yang disinkronkan karena kita berada

46
00:02:42,380 --> 00:02:43,950
‫di kode tingkat atas.

47
00:02:43,950 --> 00:02:47,400
‫Kami hanya mengeksekusi sekali saja, tepat di awal

48
00:02:47,400 --> 00:02:50,080
‫ketika kami memuat aplikasi ini.

49
00:02:50,080 --> 00:02:53,156
‫Jadi kita tidak bisa melakukan ini di

50
00:02:53,156 --> 00:02:55,970
‫dalam fungsi callback createServer ini, oke?

51
00:02:55,970 --> 00:02:59,350
‫Karena yang satu ini dipanggil setiap kali ada permintaan.

52
00:02:59,350 --> 00:03:03,047
‫Dan jika kita memiliki satu juta permintaan pada saat yang

53
00:03:03,047 --> 00:03:06,330
‫sama, maka kita dapat memblokir kode satu juta kali,

54
00:03:06,330 --> 00:03:08,040
‫sekali untuk setiap permintaan.

55
00:03:08,040 --> 00:03:11,450
‫Dan itu adalah sesuatu yang tidak kita inginkan.

56
00:03:11,450 --> 00:03:14,580
‫Jadi, ikhtisarnya, mari kita lanjutkan

57
00:03:14,580 --> 00:03:16,740
‫dan pertama-tama hanya

58
00:03:16,740 --> 00:03:21,010
‫untuk mengujinya, kirim tempOverview ini sebagai tanggapan.

59
00:03:21,010 --> 00:03:22,120
‫Sekarang, sebelum

60
00:03:22,120 --> 00:03:26,853
‫kita bisa melakukannya, kita perlu melanjutkan dan mengatur tipe konten ini ke HTML.

61
00:03:27,740 --> 00:03:30,453
‫Jadi biarkan saya benar-benar menyalin potongan kode ini di sini.

62
00:03:32,400 --> 00:03:34,120
‫Jadi kode statusnya

63
00:03:34,120 --> 00:03:37,063
‫adalah 200 dan tipe kontennya harus teks/html.

64
00:03:42,250 --> 00:03:44,040
‫Jadi restart server di

65
00:03:45,010 --> 00:03:47,943
‫sini dan sekarang mari kita lihat, dan

66
00:03:49,070 --> 00:03:50,670
‫memang, ini dia.

67
00:03:50,670 --> 00:03:52,650
‫Jadi, inilah halaman gaya

68
00:03:53,710 --> 00:03:56,700
‫kami yang sudah kami ketahui dari yang ini.

69
00:03:56,700 --> 00:03:58,630
‫Sekarang yang hilang di

70
00:03:58,630 --> 00:04:01,031
‫sini adalah baris-baris ini, dan

71
00:04:01,031 --> 00:04:03,770
‫itu karena kita masih memiliki placeholder.

72
00:04:03,770 --> 00:04:08,110
‫Dan tugas selanjutnya adalah mengganti placeholder ini dengan kartu

73
00:04:08,110 --> 00:04:09,293
‫yang sebenarnya.

74
00:04:10,830 --> 00:04:12,560
‫Dan bagaimana kita akan melakukannya?

75
00:04:12,560 --> 00:04:15,640
‫Nah, ingat bahwa di objek data, kita

76
00:04:15,640 --> 00:04:19,010
‫memiliki array dari semua objek yang ada di

77
00:04:19,010 --> 00:04:20,573
‫data. JSON.

78
00:04:21,620 --> 00:04:26,560
‫Jadi, kelima objek ini, semuanya ada di objek JavaScript, karena

79
00:04:26,560 --> 00:04:31,000
‫kita sudah menguraikan data ini hanya dengan string.

80
00:04:31,000 --> 00:04:31,833
‫Oke?

81
00:04:31,833 --> 00:04:34,150
‫Jadi objek data lagi adalah array

82
00:04:34,150 --> 00:04:36,450
‫pada saat ini, lima objek.

83
00:04:36,450 --> 00:04:37,790
‫Jadi yang

84
00:04:37,790 --> 00:04:40,192
‫harus kita lakukan pada dasarnya

85
00:04:40,192 --> 00:04:42,977
‫adalah mengulang array ini, dan untuk

86
00:04:42,977 --> 00:04:45,770
‫masing-masingnya, ganti placeholder di template dengan data

87
00:04:45,770 --> 00:04:48,500
‫aktual dari produk saat ini, oke?

88
00:04:48,500 --> 00:04:49,333
‫Masuk akal?

89
00:04:50,210 --> 00:04:53,533
‫Jadi, mari kita masukkan itu ke dalam kode.

90
00:04:54,740 --> 00:04:59,740
‫Jadi objek data, kita akan mengulangnya dengan peta karena kita

91
00:05:00,160 --> 00:05:02,930
‫ingin mengembalikan sesuatu dan sesuatu

92
00:05:02,930 --> 00:05:06,243
‫itu, kita akan menyimpannya ke dalam array

93
00:05:08,060 --> 00:05:11,637
‫baru, jadi sebut saja yang itu cardsHtml,

94
00:05:16,210 --> 00:05:17,140
‫Oke?

95
00:05:17,140 --> 00:05:22,140
‫Jadi saya yakin Anda sudah familiar dengan metode peta, oke?

96
00:05:22,570 --> 00:05:26,147
‫Jadi apa yang dilakukan peta adalah menerima fungsi

97
00:05:26,147 --> 00:05:30,290
‫panggilan balik dan fungsi panggilan balik ini mendapatkan elemen saat

98
00:05:30,290 --> 00:05:34,500
‫ini sebagai argumen, jadi elemen loop saat ini dan apa

99
00:05:34,500 --> 00:05:36,423
‫pun yang kita kembalikan

100
00:05:36,423 --> 00:05:39,880
‫di sini akan disimpan ke dalam array, oke?

101
00:05:39,880 --> 00:05:44,240
‫Jadi katakanlah kita mengulang array dengan lima elemen yang merupakan kasus

102
00:05:44,240 --> 00:05:45,434
‫di sini,

103
00:05:45,434 --> 00:05:48,074
‫dan untuk setiap elemen, kita akan

104
00:05:48,074 --> 00:05:51,851
‫mengembalikan sesuatu, dan sesuatu itu kemudian akan diletakkan

105
00:05:51,851 --> 00:05:55,990
‫di posisi yang sama tetapi dalam array cardsHtml baru ini.

106
00:05:55,990 --> 00:05:59,970
‫Jadi, apa yang akan kita lakukan di setiap iterasi ini?

107
00:05:59,970 --> 00:06:03,048
‫Nah, kami ingin mengganti placeholder, kan?

108
00:06:03,048 --> 00:06:05,200
‫Jadi saya benar-benar akan melanjutkan

109
00:06:05,200 --> 00:06:06,843
‫dan membuat fungsi

110
00:06:06,843 --> 00:06:09,787
‫untuk itu dan itu akan disebut replaceTemplate.

111
00:06:13,881 --> 00:06:14,844
‫Oke?

112
00:06:14,844 --> 00:06:18,761
‫Dan replaceTemplate akan mengambil HTML kartu.

113
00:06:19,820 --> 00:06:22,203
‫Jadi pada dasarnya, tempCard.

114
00:06:24,890 --> 00:06:28,713
‫Dan itu akan mengambil objek saat ini, jadi elemen.

115
00:06:29,660 --> 00:06:30,493
‫Oke?

116
00:06:30,493 --> 00:06:33,703
‫Jadi elemen inilah yang menyimpan data, bukan?

117
00:06:34,900 --> 00:06:38,511
‫Jadi sekali lagi, masing-masing sekarang menjadi

118
00:06:38,511 --> 00:06:42,423
‫objek yang berisi data di masing-masing properti ini.

119
00:06:44,070 --> 00:06:44,903
‫Oke?

120
00:06:44,903 --> 00:06:49,430
‫Dan jangan khawatir, jika itu tidak masuk akal 100%

121
00:06:49,430 --> 00:06:54,130
‫sekarang, itu akan terjadi setelah kita membuat fungsi replaceTemplate ini, oke?

122
00:06:54,130 --> 00:06:56,993
‫Jadi sekarang mari kita lakukan itu di sini juga.

123
00:06:59,610 --> 00:07:03,100
‫Jadi replaceTemplate adalah fungsi yang mengambil

124
00:07:03,100 --> 00:07:07,420
‫template, hanya akan menyebutnya temp di sini dan

125
00:07:07,420 --> 00:07:09,673
‫tentu saja produk.

126
00:07:12,690 --> 00:07:13,523
‫Baiklah.

127
00:07:15,780 --> 00:07:18,520
‫Jadi mari kita buat variabel yang

128
00:07:19,500 --> 00:07:21,350
‫disebut output

129
00:07:22,510 --> 00:07:27,510
‫dan itu akan menjadi template. ganti di placeholder kami.

130
00:07:29,620 --> 00:07:32,810
‫Dan kami akan meletakkan semua placeholder yang

131
00:07:32,810 --> 00:07:36,343
‫kami miliki di sini, dimulai dengan PRODUCTNAME, oke?

132
00:07:39,130 --> 00:07:43,963
‫Dan yang satu akan diganti dengan produk. NAMA PRODUK.

133
00:07:45,230 --> 00:07:48,300
‫Jadi produk, yang merupakan argumen yang kita berikan ke

134
00:07:48,300 --> 00:07:50,997
‫dalam fungsi, . PRODUCTNAME

135
00:07:52,300 --> 00:07:54,890
‫karena, yah, itulah nama bidang

136
00:07:54,890 --> 00:07:57,350
‫tempat nama produk berada.

137
00:07:57,350 --> 00:07:58,250
‫Baiklah?

138
00:07:58,250 --> 00:08:02,160
‫Jadi, lanjutkan dan salin yang itu, dan baiklah.

139
00:08:02,160 --> 00:08:05,014
‫Sekarang satu trik kecil yang

140
00:08:05,014 --> 00:08:08,150
‫harus kita gunakan di sini adalah sebenarnya

141
00:08:08,150 --> 00:08:11,730
‫tidak menggunakan tanda kutip, melainkan menggunakan ekspresi reguler.

142
00:08:11,730 --> 00:08:13,380
‫Dan itu

143
00:08:13,380 --> 00:08:16,517
‫karena mungkin ada beberapa contoh placeholder ini

144
00:08:16,517 --> 00:08:21,517
‫dan jadi triknya adalah membungkus ini dalam ekspresi reguler dan

145
00:08:22,660 --> 00:08:24,940
‫menggunakan g-flag lalu di atasnya.

146
00:08:24,940 --> 00:08:27,010
‫Yang berarti global

147
00:08:27,010 --> 00:08:31,920
‫dan ini akan membuat semua placeholder ini akan diganti dan

148
00:08:31,920 --> 00:08:34,530
‫bukan hanya yang pertama terjadi.

149
00:08:34,530 --> 00:08:36,910
‫Jadi ini menggantikan nama produk,

150
00:08:36,910 --> 00:08:39,663
‫sekarang mari kita ganti yang lainnya.

151
00:08:41,050 --> 00:08:42,473
‫Jadi

152
00:08:44,250 --> 00:08:48,140
‫keluaran = keluaran. ganti, dan sekarang kita

153
00:08:48,140 --> 00:08:49,900
‫lanjutkan dan

154
00:08:49,900 --> 00:08:54,900
‫salin ini untuk membuat hidup saya sedikit lebih mudah.

155
00:08:56,360 --> 00:08:59,990
‫Jadi gambar, dan itu disebut gambar dan bukan

156
00:09:01,538 --> 00:09:04,863
‫dalam huruf besar, jadi seperti ini.

157
00:09:06,000 --> 00:09:07,020
‫Oke?

158
00:09:07,020 --> 00:09:09,070
‫Sekarang di sini, saya membuat

159
00:09:09,070 --> 00:09:13,520
‫variabel ini karena saya ingin mengganti nama produk ini di temp.

160
00:09:13,520 --> 00:09:16,785
‫Jadi dalam argumen, dan bukanlah praktik yang baik

161
00:09:16,785 --> 00:09:19,760
‫untuk secara langsung memanipulasi argumen yang kita masukkan

162
00:09:19,760 --> 00:09:21,760
‫ke dalam suatu fungsi.

163
00:09:21,760 --> 00:09:24,180
‫Jadi saya membuat variabel baru

164
00:09:24,180 --> 00:09:25,750
‫dan mulai

165
00:09:25,750 --> 00:09:29,100
‫sekarang, saya akan memanipulasi yang pertama, oke?

166
00:09:29,100 --> 00:09:31,820
‫Dan itulah mengapa itu bukan const, tapi let.

167
00:09:31,820 --> 00:09:35,424
‫Jadi biarlah, kita bisa bermutasi setelah dibuat, oke?

168
00:09:35,424 --> 00:09:37,874
‫Sekarang biarkan aku pergi ke depan, menyalin beberapa ini.

169
00:09:40,720 --> 00:09:44,930
‫Jadi harga, dan disebut harga di sini juga, lalu

170
00:09:44,930 --> 00:09:46,653
‫kita dapatkan dari,

171
00:09:50,790 --> 00:09:52,613
‫lalu kita punya nutrisi.

172
00:09:58,500 --> 00:10:00,290
‫Tentu saja saya dapat menyalin

173
00:10:00,290 --> 00:10:02,853
‫semua ini, tetapi saya tidak akan melompat-lompat di sini.

174
00:10:06,930 --> 00:10:08,033
‫Jadi kuantitas, deskripsi,

175
00:10:13,674 --> 00:10:14,703
‫dan saya

176
00:10:17,200 --> 00:10:19,990
‫mungkin akan melakukan beberapa kesalahan di sini

177
00:10:19,990 --> 00:10:22,370
‫dengan menuliskan semua ini secara manual

178
00:10:23,410 --> 00:10:26,920
‫tetapi dalam produk kecil, itu bukan masalah besar sama sekali.

179
00:10:26,920 --> 00:10:29,470
‫Jadi sebenarnya yang ini tidak kita butuhkan,

180
00:10:29,470 --> 00:10:30,950
‫atau sebenarnya kita

181
00:10:30,950 --> 00:10:33,120
‫perlu karena untuk yang organik, jadi

182
00:10:33,120 --> 00:10:34,830
‫yang organik itu yang

183
00:10:34,830 --> 00:10:37,870
‫hilang, tapi ingat yang organik itu agak istimewa.

184
00:10:37,870 --> 00:10:41,743
‫Jadi dalam hal ini, jika produk tidak organik,

185
00:10:42,900 --> 00:10:44,890
‫maka produk. organik, jika

186
00:10:44,890 --> 00:10:45,883
‫itu

187
00:10:47,450 --> 00:10:50,510
‫salah, jadi ingat, itu sebenarnya huruf tebal.

188
00:10:50,510 --> 00:10:53,130
‫Jadi misalnya, kami memiliki true organik di sini,

189
00:10:53,130 --> 00:10:55,180
‫tetapi kami memiliki false di sini.

190
00:10:55,180 --> 00:10:56,013
‫Oke?

191
00:10:56,013 --> 00:10:59,470
‫Jadi jika itu salah, baik dalam hal ini, kami

192
00:10:59,470 --> 00:11:03,273
‫kemudian ingin mengganti NOT. ORGANIK.

193
00:11:08,340 --> 00:11:13,340
‫Jadi TIDAK. Placeholder ORGANIK dengan tidak organik.

194
00:11:17,630 --> 00:11:20,160
‫Jadi tidak organik karena ini adalah nama

195
00:11:20,160 --> 00:11:22,313
‫kelas yang saya tunjukkan sebelumnya.

196
00:11:24,070 --> 00:11:25,730
‫Jadi,

197
00:11:25,730 --> 00:11:28,153
‫ini dia.

198
00:11:29,500 --> 00:11:30,520
‫Oke?

199
00:11:30,520 --> 00:11:35,100
‫Jadi itu akan diganti di sini, oke?

200
00:11:35,100 --> 00:11:37,350
‫Dan sekali lagi, jika tidak

201
00:11:37,350 --> 00:11:39,797
‫organik, maka nama kelas NOT_ORGANIC akan

202
00:11:39,797 --> 00:11:44,043
‫ada di sini dan seluruh kumpulan ini tidak akan dipindahkan.

203
00:11:46,010 --> 00:11:47,623
‫Baiklah, masuk akal?

204
00:11:48,490 --> 00:11:49,760
‫Jadi, mari kita

205
00:11:49,760 --> 00:11:52,410
‫lihat apakah itu w-- ah, maaf,

206
00:11:52,410 --> 00:11:53,410
‫kode

207
00:11:53,410 --> 00:11:55,143
‫sebenarnya ada di bawahnya.

208
00:11:56,240 --> 00:11:59,890
‫Jadi mari kita coba untuk membuatnya lebih masuk akal.

209
00:11:59,890 --> 00:12:03,910
‫Jadi sekali lagi, kita mengulang objek data yang sudah

210
00:12:03,910 --> 00:12:06,840
‫ada di sini yang menampung semua

211
00:12:06,840 --> 00:12:10,095
‫produk dan di setiap iterasi, kita akan

212
00:12:10,095 --> 00:12:13,890
‫mengganti placeholder di kartu template dengan produk saat ini

213
00:12:13,890 --> 00:12:16,236
‫yang merupakan elemen, bukan?

214
00:12:16,236 --> 00:12:20,580
‫Dan fungsi panah ini kemudian akan secara implisit mengembalikannya ke sini.

215
00:12:20,580 --> 00:12:24,150
‫Jadi sama saja dengan kembali ke sini, oke?

216
00:12:24,150 --> 00:12:26,130
‫Tapi itu tidak terlalu

217
00:12:26,130 --> 00:12:29,341
‫diperlukan karena dalam fungsi panah, jika Anda tidak memiliki

218
00:12:29,341 --> 00:12:32,934
‫kurung kurawal, nilai ini di sini secara otomatis dikembalikan.

219
00:12:32,934 --> 00:12:35,782
‫Oke, jadi kalau-kalau Anda tidak

220
00:12:35,782 --> 00:12:40,782
‫tahu itu, saya baru ingat bahwa kami lupa mengembalikan

221
00:12:41,210 --> 00:12:43,383
‫output dari sini.

222
00:12:45,360 --> 00:12:46,193
‫Oke?

223
00:12:46,193 --> 00:12:49,870
‫Jadi tentu saja, kita memasukkan template dan produknya, tapi

224
00:12:49,870 --> 00:12:53,533
‫tentu saja kita harus mengeluarkan HTML finalnya.

225
00:12:54,700 --> 00:12:55,533
‫Benar?

226
00:12:55,533 --> 00:12:58,640
‫Dan kemudian dicolokkan di sini, dan akhirnya,

227
00:12:58,640 --> 00:13:01,420
‫semua ini di sini akan

228
00:13:01,420 --> 00:13:05,850
‫menggantikan sebuah larik, dengan lima HTML terakhir, masing-masing untuk

229
00:13:05,850 --> 00:13:08,090
‫satu dari lima kartu.

230
00:13:08,090 --> 00:13:12,580
‫Jadi, masing-masing untuk salah satu dari lima produk, oke?

231
00:13:12,580 --> 00:13:16,380
‫Sekarang mari kita lanjutkan dan log ini

232
00:13:16,380 --> 00:13:21,010
‫ke konsol sebelum kita meletakkannya di halaman web ikhtisar.

233
00:13:21,010 --> 00:13:25,433
‫Jadi cardsHtml hanya untuk memastikan semuanya berfungsi di sini.

234
00:13:28,090 --> 00:13:28,923
‫Oke?

235
00:13:30,190 --> 00:13:32,853
‫Jadi kita perlu memuat ulang server, jangan lupa itu.

236
00:13:35,810 --> 00:13:37,370
‫Ini semua bekerja

237
00:13:37,370 --> 00:13:39,940
‫sama, tetapi sekarang mari kita lihat konsol.

238
00:13:39,940 --> 00:13:43,710
‫Dan saya mulai melihat hal-hal baik di sini.

239
00:13:43,710 --> 00:13:45,500
‫Jadi kami memiliki

240
00:13:45,500 --> 00:13:48,350
‫array, dan kami benar-benar menggantinya.

241
00:13:48,350 --> 00:13:50,170
‫Jadi kami punya beberapa alpukat di sini.

242
00:13:50,170 --> 00:13:52,720
‫Dikatakan di sini FreshAvocados.

243
00:13:52,720 --> 00:13:55,773
‫Ini memiliki empat alpukat per kotak,

244
00:13:57,020 --> 00:13:59,940
‫harganya, dan ya, itu semua

245
00:13:59,940 --> 00:14:02,500
‫terlihat sangat bagus.

246
00:14:02,500 --> 00:14:03,840
‫Dan memang itu juga sebuah array.

247
00:14:03,840 --> 00:14:05,860
‫Jadi kita punya angka

248
00:14:05,860 --> 00:14:09,140
‫pertama ini, lalu koma dan jadi di sini

249
00:14:09,140 --> 00:14:12,380
‫mulai elemen berikutnya jadi angka berikutnya, oke?

250
00:14:12,380 --> 00:14:15,920
‫Jadi kami sekarang memiliki array dari semua elemen ini tetapi

251
00:14:15,920 --> 00:14:18,880
‫yang kami inginkan sebenarnya bukan array tetapi

252
00:14:18,880 --> 00:14:22,273
‫kami ingin satu string besar yang berisi semua HTML ini.

253
00:14:24,250 --> 00:14:27,020
‫Jadi, itu sebenarnya sangat sederhana untuk dicapai.

254
00:14:27,020 --> 00:14:30,910
‫Yang harus kita lakukan adalah di akhir array ini, jadi

255
00:14:30,910 --> 00:14:33,290
‫kita ingat semua ini di sini

256
00:14:33,290 --> 00:14:36,283
‫mengembalikan array yang kita lihat di sini,

257
00:14:37,550 --> 00:14:39,600
‫dan pada akhirnya yang

258
00:14:39,600 --> 00:14:42,520
‫kita lakukan hanyalah bergabung dengan string kosong,

259
00:14:42,520 --> 00:14:46,080
‫dan ini akan menggabungkan semua elemen-elemen ini menjadi string.

260
00:14:46,080 --> 00:14:50,310
‫Jadi sekarang cardsHtml benar-benar sebuah string.

261
00:14:50,310 --> 00:14:51,143
‫Oke?

262
00:14:51,143 --> 00:14:54,070
‫Jadi sekarang kami memiliki kartu kami

263
00:14:54,070 --> 00:14:56,790
‫siap dan bagian terakhir dari

264
00:14:56,790 --> 00:15:00,740
‫teka-teki adalah untuk melanjutkan dan mengganti placeholder itu.

265
00:15:00,740 --> 00:15:04,110
‫Jadi ini di sini, sebenarnya menyalinnya sekarang, jadi

266
00:15:04,110 --> 00:15:06,401
‫sekarang ganti placeholder ini

267
00:15:06,401 --> 00:15:09,413
‫dengan HTML yang baru saja kita buat.

268
00:15:11,050 --> 00:15:12,830
‫Jadi sebut saja output di

269
00:15:13,760 --> 00:15:15,150
‫sini dan yang

270
00:15:15,150 --> 00:15:16,343
‫harus kita

271
00:15:18,060 --> 00:15:22,423
‫lakukan adalah tempOverview hanya dengan string yang menyimpan HTML ikhtisar, bukan? ganti, dan ganti dengan

272
00:15:24,156 --> 00:15:25,553
‫cardsHtml.

273
00:15:27,330 --> 00:15:30,253
‫Baiklah?

274
00:15:32,490 --> 00:15:33,750
‫Itu dia.

275
00:15:33,750 --> 00:15:34,583
‫Sekarang yang harus

276
00:15:34,583 --> 00:15:38,620
‫kita lakukan adalah benar-benar merespons dengan output dan bukan dengan apa pun yang kita miliki sebelumnya.

277
00:15:38,620 --> 00:15:41,933
‫Oke, keren.

278
00:15:43,380 --> 00:15:44,730
‫Jadi itu terlihat agak

279
00:15:44,730 --> 00:15:46,760
‫rumit, tetapi jika Anda memikirkannya, saya harap

280
00:15:46,760 --> 00:15:48,430
‫itu masuk akal bagi Anda.

281
00:15:48,430 --> 00:15:51,563
‫Jadi mari kita lanjutkan dan uji ini sekarang dan

282
00:15:52,920 --> 00:15:55,200
‫saya harap saya tidak memiliki

283
00:15:56,040 --> 00:15:58,395
‫kesalahan dan ada yang tidak beres, baiklah.

284
00:15:58,395 --> 00:16:02,290
‫Jadi apa itu?

285
00:16:02,290 --> 00:16:03,670
‫Oke, jadi saya hanya salah mengeja ganti.

286
00:16:03,670 --> 00:16:07,000
‫Itu salah satu kesalahan paling umum yang saya dapatkan sepanjang waktu.

287
00:16:07,000 --> 00:16:10,863
‫Seperti beberapa kesalahan ejaan kecil.

288
00:16:12,310 --> 00:16:15,003
‫Muat ulang dan bam, ini dia.

289
00:16:16,060 --> 00:16:18,740
‫Jadi inilah lima baris kami.

290
00:16:18,740 --> 00:16:22,670
‫Begitu indah, indah, indah.

291
00:16:22,670 --> 00:16:24,902
‫Sekarang tidak terlihat seperti

292
00:16:24,902 --> 00:16:29,902
‫aslinya karena yang hilang seperti ini, organik ini di sini.

293
00:16:30,050 --> 00:16:35,050
‫Oke?

294
00:16:36,190 --> 00:16:37,023
‫Jadi mari kita lihat apa yang salah di sana.

295
00:16:37,023 --> 00:16:40,070
‫Juga untuk beberapa alasan, saya tidak

296
00:16:40,070 --> 00:16:44,570
‫melihat jumlahnya di sini tetapi hanya jika tidak organik.

297
00:16:44,570 --> 00:16:48,300
‫Nah itu aneh, jadi mari kita coba selidiki apa yang terjadi

298
00:16:48,300 --> 00:16:49,371
‫di sini.

299
00:16:49,371 --> 00:16:53,420
‫Jadi kesalahannya mungkin ada di suatu tempat di sini

300
00:16:53,420 --> 00:16:55,620
‫di fungsi replaceTemplate ini.

301
00:16:55,620 --> 00:16:58,820
‫Tapi sebenarnya, semuanya terlihat benar di sini.

302
00:16:58,820 --> 00:17:02,210
‫Begitu juga di sini pada ini bukan pengganti organik.

303
00:17:02,210 --> 00:17:06,293
‫Jadi mari kita lihat kartu template kita dan, jadi

304
00:17:07,220 --> 00:17:09,890
‫saya lihat di sini bahwa

305
00:17:11,410 --> 00:17:12,243
‫ketika

306
00:17:13,890 --> 00:17:17,830
‫ada NOT_ORGANIC ini, sebenarnya seluruh kotak ini di sini,

307
00:17:17,830 --> 00:17:20,550
‫begitu juga H6 ini tidak akan

308
00:17:20,550 --> 00:17:21,690
‫terlihat lagi.

309
00:17:25,330 --> 00:17:26,783
‫Jadi ada yang

310
00:17:27,910 --> 00:17:30,980
‫salah di sini, mari kita lihat yang asli

311
00:17:30,980 --> 00:17:33,080
‫hanya untuk memeriksa HTML di sini.

312
00:17:34,870 --> 00:17:37,183
‫Jadi detail kartu adalah yang ini

313
00:17:39,730 --> 00:17:43,330
‫dan jadi kami, ya, jadi kami sebenarnya memiliki tiga

314
00:17:43,330 --> 00:17:45,150
‫detail kartu di

315
00:17:45,150 --> 00:17:48,630
‫sini sementara di template, kami hanya memiliki satu, oke?

316
00:17:48,630 --> 00:17:51,773
‫Jadi mari kita lanjutkan dan salin yang ini.

317
00:17:52,670 --> 00:17:56,270
‫Jadi dalam detailnya Anda benar-benar dapat menyalin sebuah

318
00:17:56,270 --> 00:17:59,160
‫elemen dan kemudian, begitu saja, menyalin seluruh

319
00:18:00,410 --> 00:18:01,260
‫elemen.

320
00:18:03,300 --> 00:18:06,283
‫Jadi ini adalah apa yang seharusnya terlihat seperti.

321
00:18:07,400 --> 00:18:11,053
‫Jadi di sini seharusnya dikatakan organik dan bukan kuantitas

322
00:18:13,220 --> 00:18:14,840
‫per kotak, oke?

323
00:18:14,840 --> 00:18:18,193
‫Yang itu mungkin yang berikutnya.

324
00:18:18,193 --> 00:18:20,263
‫Jadi, mari kita perbaiki

325
00:18:27,780 --> 00:18:29,193
‫dengan cepat.

326
00:18:30,730 --> 00:18:32,290
‫Dan di

327
00:18:32,290 --> 00:18:35,760
‫sini, tentu saja kita tidak menginginkan itu, dan

328
00:18:35,760 --> 00:18:38,920
‫ya, itu terlihat lebih baik, tutup, restart

329
00:18:38,920 --> 00:18:41,763
‫server, dan mari kita periksa lagi.

330
00:18:43,850 --> 00:18:48,143
‫Dan sekarang, bam, ini dia.

331
00:18:49,550 --> 00:18:51,660
‫Jadi sekarang berhasil dan memang, ia bekerja persis sama.

332
00:18:51,660 --> 00:18:56,660
‫Cantik.

333
00:18:57,150 --> 00:18:58,370
‫Jadi, itu sangat bagus.

334
00:18:58,370 --> 00:19:01,070
‫Mari kita lanjutkan dan

335
00:19:01,070 --> 00:19:06,070
‫hapus, misalnya, alpukat hanya untuk melihat apa yang terjadi.

336
00:19:06,990 --> 00:19:08,680
‫Saya hanya akan

337
00:19:08,680 --> 00:19:13,680
‫melakukan kontrol, X untuk memotongnya, memuat ulang di sini, dan itu

338
00:19:13,900 --> 00:19:17,410
‫tidak berubah dan itu tentu saja karena

339
00:19:17,410 --> 00:19:20,040
‫ingat bahwa ini, data ini sebenarnya

340
00:19:20,890 --> 00:19:21,723
‫hanya

341
00:19:22,770 --> 00:19:24,420
‫dibaca di awal

342
00:19:24,420 --> 00:19:26,990
‫ketika kita memulai aplikasi, oke?

343
00:19:26,990 --> 00:19:30,490
‫Jadi agar ini berlaku, kita perlu me-restart

344
00:19:30,490 --> 00:19:32,250
‫aplikasi secara efektif.

345
00:19:32,250 --> 00:19:36,635
‫Oke, jadi bukan masalah besar.

346
00:19:36,635 --> 00:19:38,853
‫Dan sekarang sudah hilang, oke?

347
00:19:40,760 --> 00:19:43,200
‫Karena tidak ada lagi

348
00:19:43,200 --> 00:19:45,900
‫dalam file JSON yang dibaca

349
00:19:45,900 --> 00:19:47,920
‫pada saat kita memulai

350
00:19:47,920 --> 00:19:49,630
‫aplikasi Oke?

351
00:19:52,050 --> 00:19:52,883
‫Mari kita

352
00:19:52,883 --> 00:19:57,563
‫letakkan kembali di sini, simpan, mulai ulang, buka orang ini, muat ulang, dan ini dia kembali.

353
00:19:58,450 --> 00:20:02,630
‫Jadi sekarang benar-benar bekerja secara dinamis dengan membaca semua

354
00:20:02,630 --> 00:20:05,580
‫data ini langsung dari file JSON.

355
00:20:05,580 --> 00:20:09,660
‫Jadi yang ini berfungsi, mari kita periksa juga tautan

356
00:20:09,660 --> 00:20:12,860
‫di bawah sana di sudut kiri bawah.

357
00:20:12,860 --> 00:20:15,810
‫Anda melihat ID berubah dari nol, satu menjadi, dan

358
00:20:15,810 --> 00:20:18,600
‫seterusnya dan seterusnya, tetapi jika saya mengklik ini

359
00:20:18,600 --> 00:20:20,750
‫di sini, nah, ketika kami mendapatkan

360
00:20:20,750 --> 00:20:22,320
‫Halaman tidak ditemukan.

361
00:20:22,320 --> 00:20:25,310
‫Dan itu karena rute kita belum siap untuk ini.

362
00:20:25,310 --> 00:20:29,170
‫Oke?

363
00:20:29,170 --> 00:20:30,010
‫Jadi mari

364
00:20:30,010 --> 00:20:33,320
‫kita lakukan itu di video berikutnya dan menerapkan halaman

365
00:20:33,320 --> 00:20:35,780
‫detail produk untuk setiap produk ini.

366
00:20:35,780 --> 00:20:37,200
‫Jadi, jangan menunggu dan mari kita lanjutkan sekarang.