Pelajari Apa itu Node App & Cara Membuatnya

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 dunia untuk menerbitkan dan membagikan kode mereka.

NPM diperlukan akibat alasan-alasan berikut –

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

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

npm

Misalkan saja, perintah berikut akan ditampilkan dalam versi NPM sementara waktu di sistem Anda:

npm-v adalah bahasa pemrograman yang digunakan untuk membuat 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 keuntungan dari kerangka kerja aplikasi internet server Specific untuk membuat aplikasi Node (atau) aplikasi internet. Anda bisa membuat antarmuka pengguna dengan Specific memakai berbagai kerangka kerja front-end; ini memakai Pug, yang 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 kemampuan Node.js yang sudah Anda ketahui dan hargai.
• API: Dengan memakai berbagai metode utilitas HTTP dan middleware, Anda bisa dengan cepat dan mudah membangun API yang canggih.
• Kerangka kerja: Specific adalah fondasi bagi dalam jumlah besar kerangka kerja terkemuka.
• Aplikasi Internet: Specific adalah kerangka kerja aplikasi internet Node.js yang menawarkan serangkaian fungsionalitas komprehensif untuk aplikasi internet dan seluler.

Prasyarat

Berikut ini adalah persyaratan untuk membuat 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 versi LTS dari situs internet Node.js andai Anda belum memilikinya. Kerangka kerja dan pustaka lain juga kompatibel dengan versi LTS.

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

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

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

Berikut Cara Dapatkan Pekerjaan Pengembang Perangkat Lunak Terbaik

Pengembang Tumpukan Penuh – MERN StackJelajahi Program

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 melihat cara membuat proyek Node.js baru untuk aplikasi Node dengan mengambil proyek kecil 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 andai Anda sepertinya tidak lihat opsi Aplikasi Azure Node.js Specific 4 Dasar. Melihat Prasyarat untuk informasi 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, melihat struktur proyek di Resolution Explorer.

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

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

• Node NPM (3) menampilkan paket-paket NPM yang 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 membuat pilihan Tetapkan sebagai berkas permulaan Node.js, Anda bisa menyiapkan berkas permulaan.

• NPM mengelola dependensi dan versi untuk paket yang diinstal secara lokal memakai report bundle.json (5). Melihat Mengelola paket NPM untuk element tambahan.

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

Andai ada paket yang (hilang), klik kanan node NPM, pilih Instal Paket NPM, lalu instal paket yang 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 folder perspectives di Resolution Explorer, lalu 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 membuat halaman HTML dengan judul dan pesan selamat datang secara otomatis. Halaman tersebut juga mempunyai kode yang memungkinkan Anda lihat gambar yang berubah saat Anda menekan tombol.

3. Buka index.js dalam folder 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 yang bisa Anda kirim ke halaman HTML yang diproduksi secara dinamis.

5. Ganti router dengan yang terbaru. Gunakan perintah berikut untuk memanggil fungsi tersebut:

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

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

Ada kesalahan yang disengaja dalam kode yang berisi res.render untuk memperlihatkan berbagai fitur Visible Studio. IntelliSense akan membantu Anda mengatasi kesalahan tersebut dengan begitu aplikasi bisa berjalan pada tahapan berikutnya.

Berikut Cara Dapatkan Pekerjaan Pengembang Perangkat Lunak Terbaik

Pengembang Tumpukan Penuh – MERN StackJelajahi Program

Gunakan IntelliSense

IntelliSense adalah fitur Visible Studio yang bantu Anda menulis kode saat membuat Aplikasi Node.

1. Di editor kode Visible Studio, buka kode yang berisi res.render di index.js.

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

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.

Baris terakhir pesan memberitahu Anda bahwa penerjemah JavaScript berharap koma.

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

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

6. Ganti koma sebelum “knowledge” dalam kode.

Berikut adalah tampilan baris kode yang 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 harus segera menetapkan breakpoint terlebih dahulu.

Tentukan Titik Henti

Titik henti merupakan aspek paling mendasar dari sistem debugging yang andal. Titik henti merupakan titik dalam kode yang sedang berjalan di mana Visible Studio harus segera menangguhkannya. Nilai variabel, perilaku memori, dan apakah suatu cabang kode sedang berjalan semuanya bisa diamati dengan cara ini.

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

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

Jalankan Aplikasi dalam Mode Debug

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

Pilih Browse With dari daftar dropdown goal debug andai 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 atau buka Debug > Mulai Debugging.

Debugger berhenti di titik henti yang Anda tentukan, yang memungkinkan Anda menganalisis standing aplikasi Anda.

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

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

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

5. Memeriksanya gambar yang dengan cara yang lain, tekan tombol Satu!, Dua!, atau Tiga!

6. Tutup jendela peramban.

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

Pelajari Node.js dari yang sangat baik!

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

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

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