Tutorial: Node.js untuk Pemula
Jika Anda baru menggunakan Node.js, panduan ini akan membantu Anda memulai beberapa dasar.
- Coba gunakan Node.js di Visual Studio Code
- Membuat aplikasi web Node.js pertama Anda menggunakan Express
- Coba gunakan modul Node.js
Prasyarat
- Menginstal pada Node.js pada Windows atau di Subsistem Windows untuk Linux
Coba NodeJS dengan Visual Studio Code
Jika Anda belum menginstal Visual Studio Code, kembali ke bagian prasyarat di atas dan ikuti langkah-langkah penginstalan yang ditautkan untuk Windows atau WSL.
Buka baris perintah Anda dan buat direktori baru:
mkdir HelloNode
, lalu masukkan direktori:cd HelloNode
Buat file JavaScript bernama "app.js" dengan variabel bernama "msg" di dalamnya:
echo var msg > app.js
Buka direktori dan file app.js Anda di Visual Studio Code menggunakan perintah :
code .
Tambahkan variabel string sederhana ("Halo Dunia"), lalu kirim konten string ke konsol Anda dengan memasukkannya ke file "app.js":
var msg = 'Hello World'; console.log(msg);
Untuk menjalankan file "app.js" Anda dengan Node.js. Buka terminal Anda tepat di dalam Visual Studio Code dengan memilih Tampilkan>Terminal (atau pilih Ctrl+', menggunakan karakter backtick). Jika Anda perlu mengubah terminal default, pilih menu dropdown dan pilih Pilih Shell Default.
Di terminal, masukkan:
node app.js
. Anda akan melihat output: "Halo Dunia".
Catatan
Perhatikan bahwa ketika Anda mengetikkan console
file 'app.js', Visual Studio Code menampilkan opsi yang didukung yang terkait dengan console
objek yang dapat Anda pilih menggunakan IntelliSense. Coba bereksperimen dengan Intellisense menggunakan objek JavaScript lainnya.
Membuat aplikasi web NodeJS pertama Anda menggunakan Express
Express adalah kerangka kerja Node.js minimal, fleksibel, dan efisien yang memudahkan pengembangan aplikasi web yang dapat menangani beberapa jenis permintaan, seperti GET, PUT, POST, dan DELETE. Express dilengkapi dengan generator aplikasi yang akan secara otomatis membuat arsitektur file untuk aplikasi Anda.
Untuk membuat proyek dengan Express.js:
Buka baris perintah Anda (Prompt Perintah, Powershell, atau apa pun yang Anda inginkan).
Buat folder proyek baru:
mkdir ExpressProjects
dan masukkan direktori tersebut:cd ExpressProjects
Gunakan Express untuk membuat templat proyek HelloWorld:
npx express-generator HelloWorld --view=pug
Catatan
Kami menggunakan
npx
perintah di sini untuk menjalankan paket Express.js Node tanpa benar-benar menginstalnya (atau dengan menginstalnya sementara tergantung pada bagaimana Anda ingin memikirkannya). Jika Anda mencoba menggunakanexpress
perintah atau memeriksa versi Express yang diinstal menggunakan:express --version
, Anda akan menerima respons bahwa Express tidak dapat ditemukan. Jika Anda ingin menginstal Express secara global untuk digunakan berulang kali, gunakan:npm install -g express-generator
. Anda dapat melihat daftar paket yang telah diinstal oleh npm menggunakannpm list
. Mereka akan dicantumkan secara mendalam (jumlah direktori berlapis dalam). Paket yang Anda instal akan berada di kedalaman 0. Dependensi paket itu akan berada di kedalaman 1, dependensi lebih lanjut pada kedalaman 2, dan sebagainya. Untuk mempelajari lebih lanjut, lihat Perbedaan antara npx dan npm? di StackOverflow.Periksa file dan folder yang disertakan Express dengan membuka proyek di Visual Studio Code, dengan:
code .
File yang dihasilkan Express akan membuat aplikasi web yang menggunakan arsitektur yang dapat muncul sedikit luar biasa pada awalnya. Anda akan melihat di jendela VS Code Explorer (Ctrl+Shift+E untuk melihat) bahwa file dan folder berikut telah dibuat:
bin
. Berisi file yang dapat dieksekusi yang memulai aplikasi Anda. Ini mengaktifkan server (pada port 3000 jika tidak ada alternatif yang disediakan) dan menyiapkan penanganan kesalahan dasar.public
. Berisi semua file yang diakses publik, termasuk file JavaScript, lembar gaya CSS, file font, gambar, dan aset lain yang dibutuhkan orang saat terhubung ke situs web Anda.routes
. Berisi semua handler rute untuk aplikasi. Dua file,index.js
danusers.js
, secara otomatis dihasilkan dalam folder ini untuk berfungsi sebagai contoh cara memisahkan konfigurasi rute aplikasi Anda.views
. Berisi file yang digunakan oleh mesin templat Anda. Express dikonfigurasi untuk mencari tampilan yang cocok saat metode render dipanggil. Mesin templat default adalah Jade, tetapi Jade tidak digunakan lagi demi Pug, jadi kami menggunakan--view
bendera untuk mengubah mesin tampilan (templat). Anda dapat melihat--view
opsi bendera, dan lainnya, dengan menggunakanexpress --help
.app.js
. Titik awal aplikasi Anda. Ini memuat semuanya dan mulai melayani permintaan pengguna. Ini pada dasarnya adalah lem yang memegang semua bagian bersama-sama.package.json
. Berisi deskripsi proyek, manajer skrip, dan manifes aplikasi. Tujuan utamanya adalah untuk melacak dependensi aplikasi Anda dan versinya masing-masing.
Anda sekarang perlu menginstal dependensi yang digunakan Express untuk membangun dan menjalankan aplikasi HelloWorld Express Anda (paket yang digunakan untuk tugas seperti menjalankan server, seperti yang didefinisikan dalam
package.json
file). Di dalam Visual Studio Code, buka terminal Anda dengan memilih Tampilkan>Terminal (atau pilih Ctrl+', menggunakan karakter backtick), pastikan Anda masih berada di direktori proyek 'HelloWorld'. Instal dependensi paket Express dengan:npm install
Pada titik ini Anda memiliki kerangka kerja yang disiapkan untuk aplikasi web beberapa halaman yang memiliki akses ke berbagai API dan metode utilitas HTTP dan middleware, sehingga lebih mudah untuk membuat API yang kuat. Mulai aplikasi Ekspres di server virtual dengan memasukkan:
npx cross-env DEBUG=HelloWorld:* npm start
Tip
Bagian
DEBUG=myapp:*
dari perintah di atas berarti Anda memberi tahu Node.js bahwa Anda ingin mengaktifkan pengelogan untuk tujuan penelusuran kesalahan. Ingatlah untuk mengganti 'myapp' dengan nama aplikasi Anda. Anda dapat menemukan nama aplikasi Anda di file dipackage.json
bawah properti "nama". Menggunakannpx cross-env
mengaturDEBUG
variabel lingkungan di terminal mana pun, tetapi Anda juga dapat mengaturnya dengan cara spesifik terminal Anda. Perintahnpm start
memberi tahu npm untuk menjalankan skrip dalam file Andapackage.json
.Anda sekarang dapat melihat aplikasi yang sedang berjalan dengan membuka browser web dan membuka: localhost:3000
Sekarang setelah aplikasi HelloWorld Express Anda berjalan secara lokal di browser Anda, coba buat perubahan dengan membuka folder 'tampilan' di direktori proyek Anda dan pilih file 'index.pug'. Setelah terbuka, ubah
h1= title
keh1= "Hello World!"
dan pilih Simpan (Ctrl+S). Lihat perubahan Anda dengan me-refresh URL localhost:3000 di browser web Anda.Untuk berhenti menjalankan aplikasi Express, di terminal Anda, masukkan: Ctrl+C
Coba gunakan modul Node.js
Node.js memiliki alat untuk membantu Anda mengembangkan aplikasi web sisi server, beberapa bawaan, dan banyak lagi yang tersedia melalui npm. Modul ini dapat membantu dengan banyak tugas:
Alat | Digunakan untuk |
---|---|
gm, tajam | Manipulasi gambar, termasuk pengeditan, pengubahan ukuran, pemadatan, dan sebagainya, langsung dalam kode JavaScript Anda |
PDFKit | Pembuatan PDF |
validator.js | Validasi string |
imagemin, UglifyJS2 | Minification |
spritesmith | Pembuatan lembar sprite |
Winston | Pencatatan |
commander.js | Membuat aplikasi baris perintah |
Mari kita gunakan modul OS bawaan untuk mendapatkan beberapa informasi tentang sistem operasi komputer Anda:
Di baris perintah Anda, buka CLI Node.js. Anda akan melihat perintah yang
>
memberi tahu Anda bahwa Anda menggunakan Node.js setelah memasukkan:node
Untuk mengidentifikasi sistem operasi yang saat ini Anda gunakan (yang seharusnya mengembalikan respons yang memberi tahu Anda bahwa Anda berada di Windows), masukkan:
os.platform()
Untuk memeriksa arsitektur CPU Anda, masukkan:
os.arch()
Untuk melihat CPU yang tersedia di sistem Anda, masukkan:
os.cpus()
Biarkan CLI Node.js dengan memasukkan
.exit
atau dengan memilih Ctrl+C dua kali.Tip
Anda dapat menggunakan modul OS Node.js untuk melakukan hal-hal seperti memeriksa platform dan mengembalikan variabel khusus platform: Win32/.bat untuk pengembangan Windows, darwin/.sh untuk Mac/unix, Linux, SunOS, dan sebagainya (misalnya,
var isWin = process.platform === "win32";
).
Windows developer