Pelajari Apa itu Node App & Cara Membuatnya

Sedang Trending 1 minggu yang lalu
ARTICLE AD BOX

Node alias Node.js adalah lingkungan runtime lintas-platform sumber terbuka nan memungkinkan developer membikin perangkat dan aplikasi sisi server dalam JavaScript.

ADVERTISEMENT

SCROLL TO RESUME CONTENT

Apa itu NPM?

Node Package deal Supervisor (NPM) adalah manajer paket JavaScript untuk platform Aplikasi Node.

NPM adalah registri perangkat lunak terbesar di dunia. Pengembang perangkat lunak sumber terbuka menggunakannya di seluruh bumi untuk menerbitkan dan membagikan kode mereka.

NPM diperlukan akibat alasan-alasan berikut –

  • Anda bisa memakai situs internet untuk dapat mencari paket pihak ketiga, membikin profil, dan mengelola paket Anda.
  • Antarmuka baris perintah alias NPM CLI memungkinkan Anda berkomunikasi dengan NPM dari terminal.
  • Registri adalah foundation knowledge besar kode JavaScript nan curhat umum.

Untuk menemukan NPM CLI di komputer Anda, jalankan perintah NPM dari terminal:

npm

Misalkan saja, perintah berikut bakal ditampilkan dalam jenis NPM sementara waktu di sistem Anda:

npm-v adalah bahasa pemrograman nan digunakan untuk membikin web site.

Penggunaan NPM

Anda bisa memasang paket baru dari registri memakai NPM. Lebih jauh, NPM memungkinkan Anda menemukan dan menerbitkan paket node baru.

Apa itu Specific?

Node.js mendapatkan untung dari kerangka kerja aplikasi internet server Specific untuk membikin aplikasi Node (atau) aplikasi internet. Anda bisa membikin antarmuka pengguna dengan Specific memakai beragam kerangka kerja front-end; ini memakai Pug, nan sebelumnya disebut Jade, untuk kerangka kerja front-end-nya.

Fitur Specific di Aplikasi Node

  • Kinerja: Specific menambahkan lapisan tipis fungsionalitas aplikasi internet dasar tanpa mengaburkan keahlian Node.js nan sudah Anda ketahui dan hargai.
  • API: Dengan memakai beragam metode utilitas HTTP dan middleware, Anda bisa dengan sigap dan mudah membangun API nan canggih.
  • Kerangka kerja: Specific adalah fondasi bagi dalam jumlah besar kerangka kerja terkemuka.
  • Aplikasi Internet: Specific adalah kerangka kerja aplikasi internet Node.js nan menawarkan serangkaian fungsionalitas komprehensif untuk aplikasi internet dan seluler.

Prasyarat

Berikut ini adalah persyaratan untuk membikin Aplikasi Node.

  • Beban kerja pengembangan Node.js diinstal di Visible Studio.

Unduh dan instal Visible Studio –

  1. Untuk dapatkan Visible Studio secara tanpa dipungut biaya, kunjungi situs internet unduhan Visible Studio.
  2. Pilih beban kerja pengembangan Node.js di Visible Studio Installer dan klik Instal.

Andai Anda sudah menginstal Visible Studio, ikuti langkahnya berikut –

  1. Buka Alat > Mendapatkan Alat dan Fitur di Visible Studio.
  2. Untuk mengunduh dan menginstal beban kerja pengembangan Node.js, buka Penginstal Visible Studio dan pilih Ubah.
  • Instal runtime Node.js:

Instal Node.js runtime jenis LTS dari situs internet Node.js umpama Anda belum memilikinya. Kerangka kerja dan pustaka lain juga kompatibel dengan jenis LTS.

Alat Node.js memberi support jenis arsitektur Node.js 32-bit dan 64-bit dalam beban kerja Visible Studio Node.js. Hanya diperlukan satu jenis Visible Studio; penginstal Node.js hanya memberi support satu jenis dalam satu waktu.

Runtime Node.js nan terinstal biasanya terdeteksi secara otomatis oleh Visible Studio. Andai sepertinya tidak demikian, Anda bisa mengawasi proyek Anda untuk memakai runtime nan terinstal:

  1. Klik kanan simpul proyek dan pilih Properti setelah Anda membuatnya.
  2. Tetapkan garis Node.exe ke instalasi Node.js dunia alias lokal di tab Properti. Di setiap proyek Node.js, Anda bisa memutuskan rute ke translator lokal.

Buat Proyek Node.js Baru untuk Aplikasi Node

Dalam sebuah proyek, Visible Studio mengelola berkas untuk satu aplikasi. Kode sumber, sumber daya, dan berkas konfigurasi semuanya disertakan dalam proyek.

Mari kita memandang langkah membikin proyek Node.js baru untuk aplikasi Node dengan mengambil proyek mini dengan kode untuk aplikasi Node.js dan ExpressJS Node dalam konteks sementara waktu.

1. Untuk menutup jendela mulai, buka Visible Studio dan tekan Esc.

2. Pilih Elementary Azure Node.js Specific 4 Utility-JavaScript dari daftar dropdown dengan menekan Ctrl+Q, ketik node.js di kolom pencarian.

Instal beban kerja pengembangan Node.js umpama Anda sepertinya tidak lihat opsi Aplikasi Azure Node.js Specific 4 Dasar. Melihat Prasyarat untuk info lebih lanjut.

3. Pilih Buat di kotak conversation 'Konfigurasikan Proyek Baru Anda'.

Solusi dan proyek baru dibuat di Visible Studio, dan proyek dibuka di panel kanan. Report proyek app.js muncul di panel kiri editor.

4. Di panel kanan, memandang struktur proyek di Resolution Explorer.

NodeApp_1.

  • Solusi (1) berada di bagian atas hierarki, dan mempunyai nama nan sama dengan proyek Anda secara default. Solusi adalah wadah untuk satu alias beberapa proyek nan terhubung, nan direpresentasikan oleh report .sln pada disk.
  • Proyek Anda (2) disorot dengan huruf tebal, dengan nama nan Anda berikan di kotak conversation 'Konfigurasikan Proyek Baru Anda'. Proyek tersebut adalah report .njsproj di berkas proyek Anda di sistem berkas.

Dengan mengklik kanan proyek dan untuk membikin pilihan Parameter dari menu konteks, Anda bisa lihat dan mengubah properti proyek dan variabel lingkungan. Karena itu berkas proyek sepertinya tidak membikin perubahan unik apa pun pada sumber proyek Node.js, Anda bisa memakai perangkat pengembangan alternatif.

  • Node NPM (3) menampilkan paket-paket NPM nan telah diinstal. Anda bisa memakai kotak conversation untuk dapat mencari dan menginstal paket-paket NPM dengan mengklik kanan node NPM.

Dengan memakai pengaturan bundle.json dan opsi klik kanan node NPM, Anda bisa menginstal dan memperbarui paket.

  • Di bawah simpul proyek, terdapat empat berkas proyek. Berkas awal proyek app.js disorot dengan huruf tebal.

Dengan mengklik kanan berkas apa pun dalam proyek dan untuk membikin pilihan Tetapkan sebagai berkas permulaan Node.js, Anda bisa menyiapkan berkas permulaan.

  • NPM mengelola keterbatasan dan jenis untuk paket nan diinstal secara lokal memakai report bundle.json (5). Melihat Mengelola paket NPM untuk element tambahan.

5. Buka node NPM untuk memastikan semua paket NPM nan diperlukan telah tersedia.

Andai ada paket nan (hilang), klik kanan node NPM, pilih Instal Paket NPM, lampau instal paket nan hilang.

Tambahkan Beberapa Kode

Kerangka kerja JavaScript front-end aplikasi ini adalah Pug. Pug menghasilkan HTML dari kode markup sederhana.

Dengan kode app.set('view engine', 'pug');, Pug dikonfigurasi sebagai mesin tampilan di app.js.

1. Akses berkas perspectives di Resolution Explorer, lampau pilih index.pug untuk membuka report.

2. Ganti konten dengan markup di bawah ini.

extends layoutblock content material h1= title p Welcome to #{title} script. var f1 = serve as() { record.getElementById('myImage').src='#{knowledge.item1}' } script. var f2 = serve as() { record.getElementById('myImage').src='#{knowledge.item2}' } script. var f3 = serve as() { record.getElementById('myImage').src='#{knowledge.item3}' } button(onclick='f1()') One! button(onclick='f2()') Two! button(onclick='f3()') 3! p a: img({id}='myImage' top='300' width='300' src='')

Kode di atas membikin laman HTML dengan titel dan pesan selamat datang secara otomatis. Halaman tersebut juga mempunyai kode nan memungkinkan Anda lihat gambar nan berubah saat Anda menekan tombol.

3. Buka index.js dalam berkas routes.

4. Sebelum router.get, tambahkan kode berikut:

var getData = serve as () { var knowledge = { 'item1': 'https://pictures.unsplash.com/photo-1563422156298-c778a278f9a5', 'item2': 'https://pictures.unsplash.com/photo-1620173834206-c029bf322dba', 'item3': 'https://pictures.unsplash.com/photo-1602491673980-73aa38de027a' } go back knowledge;}

Kode ini membangun objek knowledge nan bisa Anda kirim ke laman HTML nan diproduksi secara dinamis.

5. Ganti router dengan nan terbaru. Gunakan perintah berikut untuk memanggil kegunaan tersebut:

router.get('/', serve as (req, res) { res.render('index', { title: 'Specific', "knowledge" });});

Kode nan menyertai memakai objek router Specific untuk menyetel laman sementara waktu dan merendernya, dengan mengirimkan titel dan objek knowledge ke laman tersebut. Saat index.js dijalankan, kode tersebut mendefinisikan report index.pug sebagai laman nan bakal dimuat. Index.js ditetapkan sebagai rute default dalam kode app.js, nan sepertinya tidak terlihat di sini.

Ada kesalahan nan disengaja dalam kode nan berisi res.render untuk memperlihatkan beragam fitur Visible Studio. IntelliSense bakal membantu Anda mengatasi kesalahan tersebut dengan begitu aplikasi bisa melangkah pada tahapan berikutnya.

Gunakan IntelliSense

IntelliSense adalah fitur Visible Studio nan bantu Anda menulis kode saat membikin Aplikasi Node.

1. Di penyunting kode Visible Studio, buka kode nan berisi res.render di index.js.

2. Letakkan kursor Anda setelah string “knowledge” dan ketik get. Metode getData nan Anda definisikan sebelumnya dalam kode bakal ditampilkan oleh IntelliSense. Pilih getData.

NodeAplikasi_2

3. Untuk menjadikan kode tersebut sebagai panggilan fungsi, tambahkan jalur kurung: getData().

4. Sebelum “knowledge,” hapus koma. Ekspresi tersebut mempunyai penyorotan sintaksis berwarna hijau. Arahkan kursor mouse Anda ke penyorotan sintaksis untuk memeriksa artinya.

NodeApp_3.

Baris terakhir pesan menunjukkan Anda bahwa translator JavaScript berambisi koma.

5. Pilih tab Pemilihan Kesalahan di panel bawah, dan untuk jenis masalah nan dilaporkan, pilih Construct + IntelliSense dari daftar turun bawah.

Peringatan dan deskripsi, serta nama berkas dan nomor baris, ditampilkan di jendela ini.

NodeApp_4.

6. Ganti koma sebelum “knowledge” dalam kode.

Berikut adalah tampilan baris kode nan telah diubah: res.render('index', 'Specific' as title, “knowledge” as getData());

Jalankan Aplikasi Node

Kemudian, dengan debugger Visible Studio terpasang, jalankan aplikasi. Untuk memulai, Anda kudu segera menetapkan breakpoint terlebih dahulu.

Tentukan Titik Henti

Titik henti merupakan aspek paling mendasar dari sistem debugging nan andal. Titik henti merupakan titik dalam kode nan sedang melangkah di mana Visible Studio kudu segera menangguhkannya. Nilai variabel, perilaku memori, dan apakah suatu bagian kode sedang melangkah semuanya bisa diamati dengan langkah ini.

  • Di index.js, klik di sebelah kiri sebelum baris kode berikut untuk membikin breakpoint:

res.render('index', 'Specific' sebagai judul, “knowledge” sebagai getData());

NodeAplikasi_5

Jalankan Aplikasi dalam Mode Debug

1. Di bilah perangkat Debug, pilih goal debug, seperti Server Internet (Google Chrome) alias Server Internet (Web Explorer) (Microsoft Edge).

NodeAplikasi_6

Pilih Browse With dari daftar dropdown goal debug umpama Anda tahu goal debug pilihan Anda ada di komputer Anda, namun sepertinya tidak muncul sebagai opsi. Pilih Set as Default dari menu drop-down untuk goal browser default Anda.

2. Untuk menjalankan aplikasi Node, tekan F5 alias buka Debug > Mulai Debugging.

Debugger berakhir di titik henti nan Anda tentukan, nan memungkinkan Anda menganalisis standing aplikasi Anda.

3. Arahkan kursor ke getData dalam DataTip untuk memeriksa karakteristiknya.

NodeAplikasi_7

4. Untuk melanjutkan menjalankan perangkat lunak, tekan F5 alias pilih Debug > Lanjutkan.

Perangkat lunak ini diakses melalui peramban internet. Judul jendela peramban kudu segera Specific, dan paragraf pertama kudu segera Welcome to Specific.

5. Memeriksanya gambar nan dengan langkah nan lain, tekan tombol Satu!, Dua!, alias Tiga!

NodeAplikasi_8

6. Tutup jendela peramban.

Apakah Anda seorang developer internet alias tertarik membangun situs internet? Daftar untuk Complete Stack Developer – MERN Stack. Jelajahi pratinjau kursus!

Pelajari Node.js dari nan sangat baik!

Node.js adalah lingkungan server lintas platform nan memakai Mesin JavaScript V8 untuk menjalankan JavaScript. Node.js memungkinkan kode front-end dan back-end ditulis dalam bahasa nan sama. Node.js membantu dalam pengembangan kode nan efisien untuk aplikasi real-time. Aplikasi Node bisa dibuat di Node.js memakai teknik berbasis konsol alias berbasis internet.

Untuk menguasai dan mempelajari lebih lanjut tentang Node App dan langkah mengimplementasikan serta membangun aplikasi bergerak memakai Node dan menjadi mahir dalam pengembangan tumpukan penuh, memandang Simplilearn's Complete Stack Java Developer nan bekerja sama dengan Caltech CTME. Kursus ini bakal membantu Anda menguasai backend dan frontend dengan alat-alat seperti Hibernate, JSP, Angular, dll.

Andai Anda mau mencoba beberapa kursus sebelum mendaftar, Simplilearn menawarkan kursus peningkatan keahlian on-line tanpa dipungut biaya di beberapa domain nan diminati untuk membantu Anda maju dalam karier.

Selengkapnya
Sumber Kabar SekitarKita
Kabar SekitarKita