Sabtu, 24 Agustus 2019

Terungkap, Beginilah Cara Membuat Module NodeJS Berjalan pada Client Side (Browser)

Haha... lupakan soal judul. Ini nge-blog malas-malasan. Lihat saja, tampilan blog-nya berantakan.

Tanpa basa-basi, mari kita mulai saja...

NodeJS runtime tidak berjalan pada client side. Tetapi pada dasarnya NodeJS menggunakan JavaScript.

Module-module NodeJS ini sangat banyak dan bagus, tetapi lagi... dia tidak dapat dijalankan melalui client side.

Tetapi lagi dan lagi... untungnya ada module NodeJS yang bernama browserify. Module ini dapat membuat module NodeJS lainnya berjalan pada browser.

Klik disini untuk melihat lebih lengkap tentang browserify.org

Mari ikuti langkah-langkahnya:

1. Install Browserify
$ npm install -g browserify

2. Buat module untuk diconvert
Ide untuk aplikasi ini sangat sederhana, yaitu meng-convert string kedalam base64 menggunakan module base64.

2.1. Buat folder
$ mkdir appbase64
$ cd appbase64

2.2. Install base64
$ npm install base-64

2.3. Convert module base64 dengan browserify

2.3.1. Buat file untuk di convert
$ vim index.js
Kode diatas menggunakan Vim. Tetapi Anda boleh mengganti sesuai editor favorit Anda.

2.3.2. Isikan baris berikut kedalam index.js
var base64 = require('base-64');

2.3.3. Convert menggunakan browserify
$ browserify index.js -o baseme.js

2.3.4. Ganti code sedikit supaya dapat digunakan pada browser;
Pada dasarnya hasil convert terlihat seperti berikut:

Variabel base64 pada code tersebut tidak dapat digunakan diluar function. 
Untuk dapat menggunakannya, kita harus membuat variabel global.

Masukkan baris ini paling atas;
var base64; 
Dan hilangkan var pada baris ke 3 sehingga menjadi seperti ini:
base64 = require('base-64');

Kode akan terlihat seperti gambar berikut:


3. Buat aplikasi web
Buat file index.html dengan editor favorit Anda dan masukkan code berikut:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="baseme.js" type="text/javascript" ></script>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

4. Uji dengan developer console pada browser;
Terlihat seperti berikut:

Selesai... Semoga bermanfaat :)



Tidak ada komentar:

Posting Komentar

Berapa harga pembuatan software, website dan aplikasi mobile?

Jika Anda ingin membuat website, software atau aplikasi mobile, pasti pertanyaan seperti pada judul diatas terlintas dikepala Anda. Untuk ...