‫-: [Jonas Schmedtman] Jadi kita sudah memiliki template HTML.
‫Sekarang sampai pada bagian
‫tersulit, yaitu benar-benar mengganti placeholder dengan konten.
‫Jadi mari kita mulai dengan gambaran umum.
‫Dan mari beri diri kita ruang bernapas di sini
‫dan tambahkan beberapa komentar.
‫(mengetik di keyboard)
‫Jadi halaman ikhtisar dan beberapa komentar di sini.
‫Jadi halaman produk, dan di sini kita memiliki API.
‫Dan kemudian di sini kita memiliki Not found.
‫Baiklah, jadi itu sudah terlihat sedikit lebih baik.
‫Jadi sekali lagi, kita mulai dengan halaman ikhtisar.
‫Jadi,
‫langkah pertama adalah benar-benar memuat ikhtisar template.
‫Oke, jadi setiap kali ada permintaan baru
‫untuk rute ini, jadi rute atau /Overview yang
‫disesuaikan, hal pertama yang akan
‫kita lakukan adalah membaca gambaran umum template.
‫Tapi, seperti sebelumnya, kita sebenarnya
‫bisa melakukannya di luar callback ini, oke?
‫Karena templat-templat ini, mereka akan selalu sama. Jadi,
‫Anda benar-benar dapat membacanya
‫ke memori tepat di awal saat kita memulai aplikasi.
‫Dan kemudian, bila perlu, kami
‫melanjutkan dan mengganti konten di sana.
‫Oke, jadi seperti yang kita lakukan dengan
‫data di sini, juga tidak perlu membaca
‫data setiap kali ada
‫permintaan dan hal yang sama terjadi untuk template.
‫Oke?
‫Jadi saya benar-benar
‫akan melanjutkan dan melakukannya untuk ketiga template di
‫sini sehingga kita tidak perlu melakukannya.
‫Jadi saya akan melanjutkan, dan hanya untuk mendapatkan yang ini, sebut
‫saja temp
‫untuk gambaran umum template, dan nama DAR dan
‫di sini kita memiliki template.
‫Dan kemudian /template-overview.
‫Oke, lalu gandakan ini di sini dua
‫kali jadi
‫kita punya satu untuk kartu, jadi
‫kartu template, dan satu lagi untuk produk template.
‫Produk, oke.
‫Dan lagi, perlu diingat bahwa kita dapat
‫melakukannya dengan versi yang disinkronkan karena kita berada
‫di kode tingkat atas.
‫Kami hanya mengeksekusi sekali saja, tepat di awal
‫ketika kami memuat aplikasi ini.
‫Jadi kita tidak bisa melakukan ini di
‫dalam fungsi callback createServer ini, oke?
‫Karena yang satu ini dipanggil setiap kali ada permintaan.
‫Dan jika kita memiliki satu juta permintaan pada saat yang
‫sama, maka kita dapat memblokir kode satu juta kali,
‫sekali untuk setiap permintaan.
‫Dan itu adalah sesuatu yang tidak kita inginkan.
‫Jadi, ikhtisarnya, mari kita lanjutkan
‫dan pertama-tama hanya
‫untuk mengujinya, kirim tempOverview ini sebagai tanggapan.
‫Sekarang, sebelum
‫kita bisa melakukannya, kita perlu melanjutkan dan mengatur tipe konten ini ke HTML.
‫Jadi biarkan saya benar-benar menyalin potongan kode ini di sini.
‫Jadi kode statusnya
‫adalah 200 dan tipe kontennya harus teks/html.
‫Jadi restart server di
‫sini dan sekarang mari kita lihat, dan
‫memang, ini dia.
‫Jadi, inilah halaman gaya
‫kami yang sudah kami ketahui dari yang ini.
‫Sekarang yang hilang di
‫sini adalah baris-baris ini, dan
‫itu karena kita masih memiliki placeholder.
‫Dan tugas selanjutnya adalah mengganti placeholder ini dengan kartu
‫yang sebenarnya.
‫Dan bagaimana kita akan melakukannya?
‫Nah, ingat bahwa di objek data, kita
‫memiliki array dari semua objek yang ada di
‫data. JSON.
‫Jadi, kelima objek ini, semuanya ada di objek JavaScript, karena
‫kita sudah menguraikan data ini hanya dengan string.
‫Oke?
‫Jadi objek data lagi adalah array
‫pada saat ini, lima objek.
‫Jadi yang
‫harus kita lakukan pada dasarnya
‫adalah mengulang array ini, dan untuk
‫masing-masingnya, ganti placeholder di template dengan data
‫aktual dari produk saat ini, oke?
‫Masuk akal?
‫Jadi, mari kita masukkan itu ke dalam kode.
‫Jadi objek data, kita akan mengulangnya dengan peta karena kita
‫ingin mengembalikan sesuatu dan sesuatu
‫itu, kita akan menyimpannya ke dalam array
‫baru, jadi sebut saja yang itu cardsHtml,
‫Oke?
‫Jadi saya yakin Anda sudah familiar dengan metode peta, oke?
‫Jadi apa yang dilakukan peta adalah menerima fungsi
‫panggilan balik dan fungsi panggilan balik ini mendapatkan elemen saat
‫ini sebagai argumen, jadi elemen loop saat ini dan apa
‫pun yang kita kembalikan
‫di sini akan disimpan ke dalam array, oke?
‫Jadi katakanlah kita mengulang array dengan lima elemen yang merupakan kasus
‫di sini,
‫dan untuk setiap elemen, kita akan
‫mengembalikan sesuatu, dan sesuatu itu kemudian akan diletakkan
‫di posisi yang sama tetapi dalam array cardsHtml baru ini.
‫Jadi, apa yang akan kita lakukan di setiap iterasi ini?
‫Nah, kami ingin mengganti placeholder, kan?
‫Jadi saya benar-benar akan melanjutkan
‫dan membuat fungsi
‫untuk itu dan itu akan disebut replaceTemplate.
‫Oke?
‫Dan replaceTemplate akan mengambil HTML kartu.
‫Jadi pada dasarnya, tempCard.
‫Dan itu akan mengambil objek saat ini, jadi elemen.
‫Oke?
‫Jadi elemen inilah yang menyimpan data, bukan?
‫Jadi sekali lagi, masing-masing sekarang menjadi
‫objek yang berisi data di masing-masing properti ini.
‫Oke?
‫Dan jangan khawatir, jika itu tidak masuk akal 100%
‫sekarang, itu akan terjadi setelah kita membuat fungsi replaceTemplate ini, oke?
‫Jadi sekarang mari kita lakukan itu di sini juga.
‫Jadi replaceTemplate adalah fungsi yang mengambil
‫template, hanya akan menyebutnya temp di sini dan
‫tentu saja produk.
‫Baiklah.
‫Jadi mari kita buat variabel yang
‫disebut output
‫dan itu akan menjadi template. ganti di placeholder kami.
‫Dan kami akan meletakkan semua placeholder yang
‫kami miliki di sini, dimulai dengan PRODUCTNAME, oke?
‫Dan yang satu akan diganti dengan produk. NAMA PRODUK.
‫Jadi produk, yang merupakan argumen yang kita berikan ke
‫dalam fungsi, . PRODUCTNAME
‫karena, yah, itulah nama bidang
‫tempat nama produk berada.
‫Baiklah?
‫Jadi, lanjutkan dan salin yang itu, dan baiklah.
‫Sekarang satu trik kecil yang
‫harus kita gunakan di sini adalah sebenarnya
‫tidak menggunakan tanda kutip, melainkan menggunakan ekspresi reguler.
‫Dan itu
‫karena mungkin ada beberapa contoh placeholder ini
‫dan jadi triknya adalah membungkus ini dalam ekspresi reguler dan
‫menggunakan g-flag lalu di atasnya.
‫Yang berarti global
‫dan ini akan membuat semua placeholder ini akan diganti dan
‫bukan hanya yang pertama terjadi.
‫Jadi ini menggantikan nama produk,
‫sekarang mari kita ganti yang lainnya.
‫Jadi
‫keluaran = keluaran. ganti, dan sekarang kita
‫lanjutkan dan
‫salin ini untuk membuat hidup saya sedikit lebih mudah.
‫Jadi gambar, dan itu disebut gambar dan bukan
‫dalam huruf besar, jadi seperti ini.
‫Oke?
‫Sekarang di sini, saya membuat
‫variabel ini karena saya ingin mengganti nama produk ini di temp.
‫Jadi dalam argumen, dan bukanlah praktik yang baik
‫untuk secara langsung memanipulasi argumen yang kita masukkan
‫ke dalam suatu fungsi.
‫Jadi saya membuat variabel baru
‫dan mulai
‫sekarang, saya akan memanipulasi yang pertama, oke?
‫Dan itulah mengapa itu bukan const, tapi let.
‫Jadi biarlah, kita bisa bermutasi setelah dibuat, oke?
‫Sekarang biarkan aku pergi ke depan, menyalin beberapa ini.
‫Jadi harga, dan disebut harga di sini juga, lalu
‫kita dapatkan dari,
‫lalu kita punya nutrisi.
‫Tentu saja saya dapat menyalin
‫semua ini, tetapi saya tidak akan melompat-lompat di sini.
‫Jadi kuantitas, deskripsi,
‫dan saya
‫mungkin akan melakukan beberapa kesalahan di sini
‫dengan menuliskan semua ini secara manual
‫tetapi dalam produk kecil, itu bukan masalah besar sama sekali.
‫Jadi sebenarnya yang ini tidak kita butuhkan,
‫atau sebenarnya kita
‫perlu karena untuk yang organik, jadi
‫yang organik itu yang
‫hilang, tapi ingat yang organik itu agak istimewa.
‫Jadi dalam hal ini, jika produk tidak organik,
‫maka produk. organik, jika
‫itu
‫salah, jadi ingat, itu sebenarnya huruf tebal.
‫Jadi misalnya, kami memiliki true organik di sini,
‫tetapi kami memiliki false di sini.
‫Oke?
‫Jadi jika itu salah, baik dalam hal ini, kami
‫kemudian ingin mengganti NOT. ORGANIK.
‫Jadi TIDAK. Placeholder ORGANIK dengan tidak organik.
‫Jadi tidak organik karena ini adalah nama
‫kelas yang saya tunjukkan sebelumnya.
‫Jadi,
‫ini dia.
‫Oke?
‫Jadi itu akan diganti di sini, oke?
‫Dan sekali lagi, jika tidak
‫organik, maka nama kelas NOT_ORGANIC akan
‫ada di sini dan seluruh kumpulan ini tidak akan dipindahkan.
‫Baiklah, masuk akal?
‫Jadi, mari kita
‫lihat apakah itu w-- ah, maaf,
‫kode
‫sebenarnya ada di bawahnya.
‫Jadi mari kita coba untuk membuatnya lebih masuk akal.
‫Jadi sekali lagi, kita mengulang objek data yang sudah
‫ada di sini yang menampung semua
‫produk dan di setiap iterasi, kita akan
‫mengganti placeholder di kartu template dengan produk saat ini
‫yang merupakan elemen, bukan?
‫Dan fungsi panah ini kemudian akan secara implisit mengembalikannya ke sini.
‫Jadi sama saja dengan kembali ke sini, oke?
‫Tapi itu tidak terlalu
‫diperlukan karena dalam fungsi panah, jika Anda tidak memiliki
‫kurung kurawal, nilai ini di sini secara otomatis dikembalikan.
‫Oke, jadi kalau-kalau Anda tidak
‫tahu itu, saya baru ingat bahwa kami lupa mengembalikan
‫output dari sini.
‫Oke?
‫Jadi tentu saja, kita memasukkan template dan produknya, tapi
‫tentu saja kita harus mengeluarkan HTML finalnya.
‫Benar?
‫Dan kemudian dicolokkan di sini, dan akhirnya,
‫semua ini di sini akan
‫menggantikan sebuah larik, dengan lima HTML terakhir, masing-masing untuk
‫satu dari lima kartu.
‫Jadi, masing-masing untuk salah satu dari lima produk, oke?
‫Sekarang mari kita lanjutkan dan log ini
‫ke konsol sebelum kita meletakkannya di halaman web ikhtisar.
‫Jadi cardsHtml hanya untuk memastikan semuanya berfungsi di sini.
‫Oke?
‫Jadi kita perlu memuat ulang server, jangan lupa itu.
‫Ini semua bekerja
‫sama, tetapi sekarang mari kita lihat konsol.
‫Dan saya mulai melihat hal-hal baik di sini.
‫Jadi kami memiliki
‫array, dan kami benar-benar menggantinya.
‫Jadi kami punya beberapa alpukat di sini.
‫Dikatakan di sini FreshAvocados.
‫Ini memiliki empat alpukat per kotak,
‫harganya, dan ya, itu semua
‫terlihat sangat bagus.
‫Dan memang itu juga sebuah array.
‫Jadi kita punya angka
‫pertama ini, lalu koma dan jadi di sini
‫mulai elemen berikutnya jadi angka berikutnya, oke?
‫Jadi kami sekarang memiliki array dari semua elemen ini tetapi
‫yang kami inginkan sebenarnya bukan array tetapi
‫kami ingin satu string besar yang berisi semua HTML ini.
‫Jadi, itu sebenarnya sangat sederhana untuk dicapai.
‫Yang harus kita lakukan adalah di akhir array ini, jadi
‫kita ingat semua ini di sini
‫mengembalikan array yang kita lihat di sini,
‫dan pada akhirnya yang
‫kita lakukan hanyalah bergabung dengan string kosong,
‫dan ini akan menggabungkan semua elemen-elemen ini menjadi string.
‫Jadi sekarang cardsHtml benar-benar sebuah string.
‫Oke?
‫Jadi sekarang kami memiliki kartu kami
‫siap dan bagian terakhir dari
‫teka-teki adalah untuk melanjutkan dan mengganti placeholder itu.
‫Jadi ini di sini, sebenarnya menyalinnya sekarang, jadi
‫sekarang ganti placeholder ini
‫dengan HTML yang baru saja kita buat.
‫Jadi sebut saja output di
‫sini dan yang
‫harus kita
‫lakukan adalah tempOverview hanya dengan string yang menyimpan HTML ikhtisar, bukan? ganti, dan ganti dengan
‫cardsHtml.
‫Baiklah?
‫Itu dia.
‫Sekarang yang harus
‫kita lakukan adalah benar-benar merespons dengan output dan bukan dengan apa pun yang kita miliki sebelumnya.
‫Oke, keren.
‫Jadi itu terlihat agak
‫rumit, tetapi jika Anda memikirkannya, saya harap
‫itu masuk akal bagi Anda.
‫Jadi mari kita lanjutkan dan uji ini sekarang dan
‫saya harap saya tidak memiliki
‫kesalahan dan ada yang tidak beres, baiklah.
‫Jadi apa itu?
‫Oke, jadi saya hanya salah mengeja ganti.
‫Itu salah satu kesalahan paling umum yang saya dapatkan sepanjang waktu.
‫Seperti beberapa kesalahan ejaan kecil.
‫Muat ulang dan bam, ini dia.
‫Jadi inilah lima baris kami.
‫Begitu indah, indah, indah.
‫Sekarang tidak terlihat seperti
‫aslinya karena yang hilang seperti ini, organik ini di sini.
‫Oke?
‫Jadi mari kita lihat apa yang salah di sana.
‫Juga untuk beberapa alasan, saya tidak
‫melihat jumlahnya di sini tetapi hanya jika tidak organik.
‫Nah itu aneh, jadi mari kita coba selidiki apa yang terjadi
‫di sini.
‫Jadi kesalahannya mungkin ada di suatu tempat di sini
‫di fungsi replaceTemplate ini.
‫Tapi sebenarnya, semuanya terlihat benar di sini.
‫Begitu juga di sini pada ini bukan pengganti organik.
‫Jadi mari kita lihat kartu template kita dan, jadi
‫saya lihat di sini bahwa
‫ketika
‫ada NOT_ORGANIC ini, sebenarnya seluruh kotak ini di sini,
‫begitu juga H6 ini tidak akan
‫terlihat lagi.
‫Jadi ada yang
‫salah di sini, mari kita lihat yang asli
‫hanya untuk memeriksa HTML di sini.
‫Jadi detail kartu adalah yang ini
‫dan jadi kami, ya, jadi kami sebenarnya memiliki tiga
‫detail kartu di
‫sini sementara di template, kami hanya memiliki satu, oke?
‫Jadi mari kita lanjutkan dan salin yang ini.
‫Jadi dalam detailnya Anda benar-benar dapat menyalin sebuah
‫elemen dan kemudian, begitu saja, menyalin seluruh
‫elemen.
‫Jadi ini adalah apa yang seharusnya terlihat seperti.
‫Jadi di sini seharusnya dikatakan organik dan bukan kuantitas
‫per kotak, oke?
‫Yang itu mungkin yang berikutnya.
‫Jadi, mari kita perbaiki
‫dengan cepat.
‫Dan di
‫sini, tentu saja kita tidak menginginkan itu, dan
‫ya, itu terlihat lebih baik, tutup, restart
‫server, dan mari kita periksa lagi.
‫Dan sekarang, bam, ini dia.
‫Jadi sekarang berhasil dan memang, ia bekerja persis sama.
‫Cantik.
‫Jadi, itu sangat bagus.
‫Mari kita lanjutkan dan
‫hapus, misalnya, alpukat hanya untuk melihat apa yang terjadi.
‫Saya hanya akan
‫melakukan kontrol, X untuk memotongnya, memuat ulang di sini, dan itu
‫tidak berubah dan itu tentu saja karena
‫ingat bahwa ini, data ini sebenarnya
‫hanya
‫dibaca di awal
‫ketika kita memulai aplikasi, oke?
‫Jadi agar ini berlaku, kita perlu me-restart
‫aplikasi secara efektif.
‫Oke, jadi bukan masalah besar.
‫Dan sekarang sudah hilang, oke?
‫Karena tidak ada lagi
‫dalam file JSON yang dibaca
‫pada saat kita memulai
‫aplikasi Oke?
‫Mari kita
‫letakkan kembali di sini, simpan, mulai ulang, buka orang ini, muat ulang, dan ini dia kembali.
‫Jadi sekarang benar-benar bekerja secara dinamis dengan membaca semua
‫data ini langsung dari file JSON.
‫Jadi yang ini berfungsi, mari kita periksa juga tautan
‫di bawah sana di sudut kiri bawah.
‫Anda melihat ID berubah dari nol, satu menjadi, dan
‫seterusnya dan seterusnya, tetapi jika saya mengklik ini
‫di sini, nah, ketika kami mendapatkan
‫Halaman tidak ditemukan.
‫Dan itu karena rute kita belum siap untuk ini.
‫Oke?
‫Jadi mari
‫kita lakukan itu di video berikutnya dan menerapkan halaman
‫detail produk untuk setiap produk ini.
‫Jadi, jangan menunggu dan mari kita lanjutkan sekarang.