Share via

Tutorial: Node.js untuk Pemula

  • Artikel

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

Prasyarat

Jika Anda seorang pemula, mencoba Node.js untuk pertama kalinya, sebaiknya instal langsung di Windows. Untuk informasi selengkapnya, lihat Haruskah saya menginstal Node.js di Windows atau 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.

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

  2. Buat file JavaScript bernama "app.js" dengan variabel bernama "msg" di dalamnya: echo var msg > app.js

  3. Buka direktori dan file app.js Anda di Visual Studio Code menggunakan perintah : code .

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

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

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

Catatan

Perhatikan bahwa saat Anda mengetik 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:

  1. Buka baris perintah Anda (Prompt Perintah, Powershell, atau apa pun yang Anda inginkan).

  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

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

  4. 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 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 --view bendera 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

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

    Screenshot of Express app running in a 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 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:

  1. Di baris perintah Anda, buka CLI Node.js. Anda akan melihat perintah yang > memberi tahu Anda bahwa Anda 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. 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";).