Bagikan melalui

Tutorial: Node.js untuk Pemula

Jika Anda baru menggunakan Node.js, panduan ini akan membantu Anda memulai beberapa dasar.

Prasyarat

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.

  1. Buka baris perintah Anda dan buat direktori baru: mkdir HelloNode, lalu masukkan direktori: cd HelloNode

  2. Buka direktori di Visual Studio Code menggunakan perintah : code .

  3. Buat file bernama "app.js"

  4. Tambahkan string sederhana "Hello World" ke variabel bernama msg, lalu kirim konten string ke konsol Anda dengan memasukkannya ke file "app.js"Anda:

    var msg = 'Hello World';
console.log(msg);

  5. Untuk menjalankan file "app.js" Anda menggunakan Node.js. Buka terminal Anda langsung di dalam VS Code dengan memilih Tampilan>Terminal (atau pilih Ctrl+`, menggunakan karakter backtick). Jika Anda perlu mengubah terminal default, pilih menu dropdown dan pilih Pilih Shell Default.

  6. Di terminal, masukkan: node app.js. Anda seharusnya melihat output: "Halo Dunia".

Nota

Perhatikan bahwa ketika Anda mengetik console di dalam file 'app.js', VS Code menampilkan opsi yang didukung terkait dengan objek console 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 sebuah proyek dengan Express.js:

  1. Buka antarmuka baris perintah Anda (Command Prompt, PowerShell, atau apa pun yang Anda sukai).

  2. Buat folder proyek baru: mkdir ExpressProjects dan masukkan direktori tersebut: cd ExpressProjects

  3. Gunakan Express untuk membuat templat proyek HelloWorld: npx express-generator HelloWorld --view=pug

    Nota

    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 menggunakan express 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 menggunakan npm list. Mereka akan dicantumkan berdasarkan kedalaman (jumlah lapisan direktori bersarang). 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.

  4. Periksa file dan folder yang disertakan Express dengan membuka proyek di Visual Studio Code, dengan: code .

    File yang dihasilkan oleh Express akan membuat aplikasi web yang menggunakan arsitektur yang tampak sedikit rumit di awal. 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 pengelola rute untuk aplikasi. Dua file, index.js dan users.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 opsi --view untuk mengubah mesin tampilan (templat). Anda dapat melihat --view opsi bendera, dan lainnya, dengan menggunakan express --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.

  5. 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

  6. 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

    Petunjuk / Saran

    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 di package.json bawah properti "nama". Menggunakan npx cross-env mengatur DEBUG variabel lingkungan di terminal mana pun, tetapi Anda juga dapat mengaturnya dengan cara spesifik terminal Anda. Perintah npm start memberi tahu npm untuk menjalankan skrip dalam file Anda package.json .

  7. Anda sekarang dapat melihat aplikasi yang sedang berjalan dengan membuka browser web dan membuka: localhost:3000

    Cuplikan layar aplikasi Ekspres yang berjalan di browser

  8. 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 ke h1= "Hello World!" dan pilih Simpan (Ctrl+S). Lihat perubahan Anda dengan me-refresh URL localhost:3000 di browser web Anda.

  9. 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 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 Minifikasi
spritesmith Pembuatan lembaran sprite
Winston Penebangan kayu
commander.js Membuat aplikasi baris perintah

Mari kita gunakan modul OS bawaan untuk mendapatkan beberapa informasi tentang sistem operasi komputer Anda:

  1. Di baris perintah Anda, buka CLI Node.js. Anda akan melihat perintah >, memberitahu bahwa Anda sedang menggunakan Node.js setelah memasukkan: node

  2. 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()

  3. Untuk memeriksa arsitektur CPU Anda, masukkan: os.arch()

  4. Untuk melihat CPU yang tersedia di sistem Anda, masukkan: os.cpus()

  5. Keluar dari Node.js dengan memasukkan .exit atau dengan menekan Ctrl+C dua kali.

    Petunjuk / Saran

    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";).