Apa itu server dan untuk apa Node.js

Di mana sebenarnya situs web berada, apa itu API, dan mengapa formulir Level 2 tidak memiliki tempat untuk mengirimkan pesannya.

Ingat formulir itu tanpa penerima?

Di Level 2, kamu membuat formulir yang memeriksa pesan, mengucapkan terima kasih… lalu membuang pesan tersebut. Tidak ada tempat untuk menyimpannya. Situs web kamu, sejauh ini, hanya dapat mendistribusikan file yang sudah jadi – tidak dapat menerima dan mengingat apa pun. Untuk itu, kamu memerlukan server. Dan itulah tepatnya yang akan kamu pelajari untuk membangunnya.

Bagian depan dan belakang

Setiap aplikasi besar (Instagram, sekolah online, toko online) memiliki dua bagian:

Frontend – apa pun yang berjalan di browser pengunjung. HTML, CSS, JavaScript, Bereaksi. kamu sudah mengetahui semua ini!
Backend – program yang berjalan di server. Ia menerima permintaan, menyimpan data, menegakkan aturan. Dan karena Node.js ada, maka dapat ditulis dalam bahasa yang sudah kamu ketahui: JavaScript.

Bagaimana kedua belah pihak berbicara satu sama lain? Melalui API (Application Programming Interface) – alamat yang disepakati di mana backend merespons. Berikut contoh percakapannya:

Frontend:  GET /api/messages         ("Send me all the messages.")
Backend:   [{ "name": "Grandma", "text": "Lovely website!" }]

Frontend:  POST /api/messages        ("Here's data, save it: ...")
Backend:   { "saved": true }

GET = “beri saya data” (browser kamu melakukan ini setiap kali kamu membuka halaman).
POST = “ini datanya, simpan” (itulah yang dilakukan formulir kamu).

Data dikirim dalam format JSON – tampilannya hampir persis seperti objek JavaScript yang kamu ketahui dari kuis. Suatu kebetulan yang beruntung? Tidak – JSON adalah singkatan dari JavaScript Object Notation. Itu ada di pihak kamu.

Di mana backend seperti itu dijalankan?

Saat mengembangkan, di komputer kamu sendiri (localhost – kamu mengetahuinya dari Vite). Dalam produksi, pada komputer yang selalu hidup dan terhubung – baik “bagian” server sewaan (VPS), atau layanan yang menangani semuanya untuk kamu (Render, Railway…). Kita akan membahas penerapannya pada pelajaran terakhir.

💡

Jadi, untuk apa Halaman GitHub itu? Itu hosting hanya untuk frontend – ia membagikan file, tidak lebih. Sempurna untuk situs web Level 1–2 (dan juga yang paling aman: di mana tidak ada yang berjalan, tidak ada yang dapat diretas). kamu memerlukan backend saat situs web kamu harus menerima dan mengingat sesuatu – pesan, pendaftaran, pengguna.

Giliran kamu 💪 (misi mini karena penasaran)

Buka situs web favorit kamu, tekan F12, dan alihkan ke tab Jaringan. Muat ulang halaman dan lihat aliran permintaan – setiap baris adalah satu percakapan antara browser dan server.
Temukan permintaan GET dalam daftar, dan permintaan yang mengembalikan JSON (Ketik kolom: json atau fetch). Klik dan lihat responsnya – kamu akan melihat data dari mana halaman tersebut dibuat.
Ketik ini ke konsol dan lihat frontend meminta datanya sendiri:

fetch("https://api.chucknorris.io/jokes/random")
  .then((response) => response.json())
  .then((data) => console.log(data.value));

fetch(...) adalah perintah JavaScript “panggil API”. Dalam pelajaran 9, kamu akan menggunakan perintah persis ini untuk menyambungkan formulir ke server kamu sendiri.

✅

Periksa diri kamu sendiri: kamu dapat menjelaskan dengan kata-kata kamu sendiri perbedaan antara frontend dan backend, kamu tahu apa itu GET, POST, dan JSON, dan kamu telah melihat di panel Jaringan bagaimana situs web berkomunikasi satu sama lain. Pada pelajaran berikutnya, kamu akan membuat sendiri server seperti ini.

Apa yang bisa diambil dari pelajaran ini

Frontend berjalan di perangkat pengunjung, backend berjalan di server; mereka berbicara melalui API menggunakan pesan GET (berikan) dan POST (simpan).
Aliran data dalam format JSON – terlihat seperti objek JavaScript.
fetch() adalah cara frontend meminta data ke server.