‫-: Kami hampir siap untuk menerapkan aplikasi kami sekarang.
‫Tapi sebelum kita
‫melakukan itu, sebenarnya ada beberapa
‫hal yang harus kita perhatikan.
‫Jadi mari kita lakukan itu sekarang.
‫Dan hal pertama yang ingin
‫saya lakukan adalah
‫menginstal sebuah paket yang akan memampatkan semua tanggapan kita.
‫Jadi pada dasarnya, setiap kali kami mengirim respons teks ke klien,
‫tidak peduli apakah itu kode JSON atau HTML.
‫Dengan paket kompresi,
‫teks itu kemudian akan dikompresi secara dramatis.
‫Baiklah, jadi mari kita instal di sini.
‫Instal Npm, dan sederhananya, kompresi.
‫Baiklah.
‫Jadi mari kita sertakan itu di sini.
‫Sekarang, jadi ini kemudian akan mengekspos
‫fungsi lapisan tengah yang
‫sangat sederhana yang hanya perlu
‫kita tancapkan ke tumpukan lapisan tengah kita.
‫Jadi mari kita lakukan itu di suatu tempat di sini.
‫Mendekati akhir, tidak terlalu penting.
‫Jadi aplikasi. gunakan,
‫masukkan di sana panggilan kompresi.
‫Jadi ini di sini kemudian akan mengembalikan fungsi kiri
‫tengah yang sekali lagi akan
‫memampatkan semua teks yang dikirim ke klien.
‫Jadi itu tidak akan berfungsi
‫untuk gambar karena ini biasanya sudah dikompresi.
‫Jadi misalnya, format JPEG sudah dikompresi.
‫Jadi ini hanya akan berfungsi untuk teks.
‫Jadi setelah situs web kami benar-benar
‫digunakan, kami kemudian akan menguji apakah kompresi ini benar-benar aktif.
‫Bagaimanapun, langkah selanjutnya sebelum menerapkan aplikasi kita adalah
‫menyingkirkan sebagian besar konsol. log yang masih kita
‫miliki dalam kode kita.
‫Dan itu hanya karena login ini akan berakhir
‫di log platform hosting kami.
‫Jadi kami tidak ingin mencemari log ini dalam produksi.
‫Oke.
‫Jadi mari kita cepat mencari di sini untuk konsol.
‫Dan seperti yang Anda lihat, ada banyak dari mereka.
‫Jadi yang ini sudah dikomentari.
‫Jadi saya tidak akan mengerjakan yang itu.
‫Tapi yang ini di sini, mari kita singkirkan.
‫Jadi sekarang,
‫satu per satu, kita akan
‫melihat semuanya dan yang
‫tidak relevan akan kita komentari saja.
‫Baiklah.
‫Di sini, di pengontrol kesalahan kami juga memiliki banyak sekali
‫tetapi beberapa sebenarnya relevan.
‫Sekarang, bukan yang ini.
‫Mari kita benar-benar menyingkirkannya.
‫Juga bukan
‫yang ini, tetapi kemudian di sini
‫kami memiliki ketiga yang kami
‫buat dengan sengaja sehingga mereka berakhir di log platform hosting kami.
‫Oke.
‫Jadi ingat bahwa kami mengaturnya sedemikian rupa
‫sehingga ketika ada kesalahan pada situs web render
‫maka kami akan mendapatkan
‫log kesalahan yang sebenarnya terjadi.
‫Bersama dengan emoji ini di sini.
‫Jadi setiap kali kita melihat
‫ini, kita kemudian dapat dengan mudah mengidentifikasi di
‫log kita bahwa sesuatu yang buruk terjadi di pihak kita.
‫Oke, dan jadi kami memiliki beberapa lagi di sini.
‫Misalnya, untuk kesalahan lain yang tidak diketahui
‫di mana kami tidak ingin membocorkan detail kesalahan ke klien.
‫Jadi yang ini boleh saja disimpan.
‫Yang ini juga ingin
‫kami simpan untuk memberi tahu
‫kami di log bahwa koneksi database berhasil.
‫Yang ini di sini juga.
‫Yang ini di sini sebenarnya ada di import-dev-data sehingga
‫tidak penting sama sekali.
‫Bagaimanapun, semua log di sini, mari kita simpan.
‫Kemudian di sini, kita memiliki yang ini
‫di sini, yang hanya benar-benar kita lakukan untuk menggunakan lapisan tengah ini.
‫Jadi mari kita matikan layer tengah ini.
‫Yang lagi kami hanya benar-benar
‫digunakan untuk menguji posting ini menemukan lapisan tengah.
‫Selanjutnya dalam model pengguna.
‫Nah, yang satu ini juga tidak kita inginkan.
‫Ini hanya sekali lagi untuk tujuan pengujian.
‫Kemudian kami memiliki paket JSON,
‫jadi ini sebenarnya tidak masuk ke log.
‫Kemudian kita harus bundel
‫di mana kita tidak akan mengubah apa pun.
‫Kemudian kita memiliki index. js.
‫Jadi itulah JavaScript sisi klien kami.
‫Jadi mari kita singkirkan konsol ini. masuk di sini.
‫Kemudian kami juga memiliki beberapa lagi di sini di logout
‫tetapi yang ini mari kita simpan.
‫Beberapa lagi bergaris.
‫Dan kami tidak tertarik di sini dalam sesi ini.
‫Tapi yang ini di sini ketika ada kesalahan
‫sebenarnya tidak apa-apa.
‫Dan kemudian di server. js, kami memiliki
‫yang ini di sini,
‫yang sebenarnya, sekali lagi, kami lakukan dengan sengaja.
‫Sehingga mereka benar-benar muncul di file log kami.
‫Dan jangan khawatir jika Anda tidak benar-benar tahu
‫apa yang saya maksud dengan file log.
‫Anda akan melihat setelah
‫kami benar-benar memasukkan aplikasi kami ke Heroku.
‫Jadi saya akan menunjukkan kepada Anda dengan file log saat itu, baiklah.
‫Pokoknya, semua konsol ini. log di sini
‫sengaja.
‫Dan begitu juga
‫yang ini tentang koneksi database yang sukses.
‫Yang ini
‫di sini juga memberi tahu kami port tempat aplikasi berjalan.
‫Dan yang ini, dan yang ini juga penting.
‫Baiklah.
‫Jadi dengan ini kami menangani semua konsol
‫yang tidak perlu. log bahwa kami
‫hanya mencemari keluaran log kami.
‫Oke, jadi mari kita tutup semua file ini di sini.
‫Baiklah.
‫Dan sekarang,
‫langkah selanjutnya, mari kita ubah URL atau kode
‫API di sisi klien, JavaScript.
‫Jadi misalnya di sini di login. js, sekarang
‫kami melakukan kode API ini
‫ke API pengembangan ini.
‫Jadi di sini, kami tentu saja memiliki URL pengembangan kami.
‫Jadi
‫seperti ini, itu tidak akan
‫berfungsi dalam produksi karena jelas
‫dari sana, kami tidak akan dapat mengakses URL pengembangan apa pun.
‫Dan sama di sini.
‫Tapi untungnya, ada solusi yang sangat sederhana.
‫Jadi yang perlu kita lakukan adalah benar-benar menyingkirkan bagian ini.
‫Jadi jika kita hanya menghapusnya seperti
‫ini, maka kita akan berakhir dengan URL relatif ini.
‫Dan karena API dan
‫situs web dihosting di server yang
‫sama, ini akan berfungsi dengan baik.
‫Jadi melakukannya seperti
‫ini seperti menentukan jalur ke gambar dalam HTML.
‫Misalnya, di sini, di halaman ikhtisar, di mana
‫kita memiliki gambar-gambar
‫ini, kita cukup mengatakan "/ img" dan
‫itu akan pergi ke URL saat
‫ini dan kemudian akan menambahkan jalur itu ke sana.
‫Oke.
‫Dan hal yang sama akan terjadi di sini.
‫Oke.
‫Sekali lagi, ini hanya berfungsi karena API dan situs web
‫pada dasarnya menggunakan URL yang sama.
‫Jadi kami menampung mereka di tempat yang sama.
‫Tetapi jika Anda menghosting situs
‫web Anda atau ujung depan Anda di
‫satu URL, dan kemudian API Anda di URL
‫lain, maka itu tidak akan berfungsi seperti ini, oke.
‫Tetapi dalam aplikasi sederhana ini kita bisa melakukannya seperti ini karena
‫kita memiliki pengaturan yang sangat sederhana ini.
‫Jadi mari kita hapus di sini di login.
‫Dalam indeks saya yakin kami tidak memiliki URL apa pun.
‫Ya itu benar.
‫Juga tidak dalam peringatan.
‫Tidak di Mapbox saya percaya.
‫Tidak.
‫Tapi pasti di garis.
‫Jadi untuk mendapatkan sesi kami.
‫Jadi kita bisa melakukan hal yang sama persis di sini.
‫Dan juga di updateSettings.
‫Oke.
‫Berikan simpanan.
‫Dan semuanya.
‫Dan yang satu itu juga diperbaiki.
‫Dan sekarang akhirnya, dan terus bekerja pada JavaScript
‫sisi klien, kita
‫perlu membuat bundel terakhir kita.
‫Baiklah.
‫Jadi sekarang, ini adalah file JavaScript bundel kami.
‫Tetapi ingat bahwa ini baru saja
‫dibuat menggunakan fungsi arloji.
‫Jadi dalam paket kami. json
‫kita punya jam tangan ini. js yang hanya akan
‫membuat bundel baru setiap kali kami mengubah salah satu file.
‫Tetapi tanpa kompresi
‫apa pun, atau tanpa pengoptimalan kinerja apa pun.
‫Tapi sekarang setelah kita benar-benar selesai dengan semua
‫JavaScript kita, kita siap untuk benar-benar membangun JavaScript
‫kita menjadi bundel terakhir.
‫Dan di sini kita harus mengganti jam tangan ini dengan
‫build, dan kemudian
‫akan membuat bundel JavaScript terkompresi terakhir kita.
‫Baiklah.
‫Jadi mari kita coba di sini sekarang.
‫Dengan menjalankan npm.
‫Dan sekali lagi dengan tab untuk melengkapi otomatis.
‫Jadi mari kita lihat apakah...
‫Dan itu selesai.
‫Jadi mari kita lihat bundel kami sekarang.
‫Dan untuk melihatnya sekarang, itu benar-benar dikompresi
‫dengan baik.
‫Baiklah.
‫Sekarang Anda juga melihat bahwa kami memiliki banyak sekali file baru ini
‫di sini dan itu karena Anda berada di pohon file kami.
‫Parcel sebenarnya membuat folder cache ini.
‫Tetapi kami tidak ingin folder itu ada di penyimpanan git kami.
‫Benar.
‫Jadi mari kita tambahkan di sini.
‫Dan
‫sekarang Anda melihat bahwa secara otomatis
‫segera setelah kami menyimpannya, itu
‫akan kembali ke file asli yang diperbarui.
‫Oke.
‫Jadi sekali lagi, VS Code sangat
‫pintar dalam segala hal yang berhubungan dengan git.
‫Baiklah.
‫Oke.
‫Dan saya pikir itu sebenarnya.
‫Jadi aplikasi kita sekarang siap untuk benar-benar di-deploy.
‫Dan sekarang langkah terakhir adalah untuk benar-benar
‫mengkomit semua file yang dimodifikasi ini ke repositori kami.
‫Jadi ingat bahwa langkah pertama adalah menambahkan semua file
‫ke staging area.
‫Jadi git add, dan dalam hal ini, semua file.
‫Baiklah.
‫Dan sekarang yang perlu kita lakukan
‫adalah git commit, lalu
‫pesan, dan katakanlah, "Aplikasi yang disiapkan untuk penerapan".
‫Besar!
‫Jadi Anda melihat bahwa semua modifikasi kami hilang.
‫Juga dari sini.
‫Yang berarti bahwa cabang kerja saat
‫ini, disebut bersih.
‫Dan ya, kami sebenarnya sekarang siap untuk menerapkan aplikasi kami
‫di video berikutnya.