Membuat Aplikasi Chat Sederhana Node JS Part 2

Dibagian kedua ini kita akan mulai menginstal atau menyiapkan package-package apa saja yang akan kita butuhkan. Yang pertama kita buat folder projectnya dengan nama express-io. Buka terminalnya lalu pindah ke folder tempat menyimpan project Node JSnya. Selanjutnya ada dua cara kita bisa langsung menulis dengan membuat file package.json atau juga kita bisa melalui terminal atau comand line dengan mengetikkan npm init sebagai berikut

Cara-Membuat-AplikasiChat-SederhanaNode-JS-Part2-09-07-2017-1

Jadi teman teman bisa masukkan name, description dari projectnya hanya dengan menekan enter dibagian terminalnya. Jika berhasil maka secara otomatis kita dibuatkan sebuah file package.json sebagai konfigurasi project Node JS. Langkah berikutnya kita akan memerlukan dependency library yaitu teman teman install express dengan cara ketik npm install ---save express dan module socket-io seperti berikut

Cara-Membuat-AplikasiChat-SederhanaNode-JS-Part2-09-07-2017-2

Lalu tekan enter dan bila tidak ada error maka secara otomatis kita akan dibuatkan folder node_modules yang berisi module-module yang kita butuhkan untuk membuat aplikasi chat sederhana.

Cara-Membuat-AplikasiChat-SederhanaNode-JS-Part2-09-07-2017-3

Lalu dibagian package.jsonnya tertulis dependencies yang kita akan gunakan

Cara-Membuat-AplikasiChat-SederhanaNode-JS-Part2-09-07-2017-4

Oke sejauh ini kita berhasil menginstall dependenciesnya. Setelah itu kita akan buat file statis untuk struktur webnya yang saya tempatkan didalam folder public/index.html lalu kita akan generate struktur HTMLnya biasa tentu untuk designnya saya gunakan Framework Bootstrap dengan sedikit style custom CSS

Cara-Membuat-AplikasiChat-SederhanaNode-JS-Part2-09-07-2017-5

File bootstrapnya di simpan didalam folder yang sama yaitu folder public. Hasil response pesan chatnya akan kita tampilkan didalam satu tag <div> dengan id output lalu akan ada input message chatnya, input untuk nama usernya dan satu tag button untuk mengirimnya. Tentu masing masing elemennya akan kita berikan id yang berbeda beda.

Cara-Membuat-AplikasiChat-SederhanaNode-JS-Part2-09-07-2017-6

Itu dia untuk artikel kali ini. Kita sudah berhasil menginstall package package seperti express dan socket-ionya dan kita juga sudah membuat file statis untuk struktur Web Chatnya. Terima kasih.

8 Juli 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat