KATA PENGANTAR

Puji syukur kehadirat Allah SWT yang telah memberikan rahmat dan
karunia-Nya, sehingga kami dapat menyelesaikan Makalah Mobile Computing
yang berjudul ”NGROK” ini.
Makalah ini disusun sesuai materi yang telah ditentukan dalam penilaian di
mata kuliah ini dan dibuat sebagai tuntunan belajar bagi pembaca, khususnya bagi
kelompok kami sendiri agar dapat mengetahui berbagai hal mengenai NGROK.
Dengan selesainya Makalah ini tidak terlepas dari bantuan banyak pihak
yang telah memberikan masukan-masukan kepada kami. Untuk itu kami
mengucapkan banyak terimakasih kepada dosen pembimbing yang telah
membimbing kami untuk menyelesaikan Makalah ini dengan baik.
Kami menyadari bahwa masih banyak kekurangan dari Makalah ini, baik
dari materi maupun teknik penyajiannya, mengingat kurangnya pengetahuan dan
pengalaman kami. Oleh karena itu, kritik dan saran yang membangun sangat kami
harapkan.

Buket Rata, 13 Februari 2019

Penulis

i
 DAFTAR ISI

KATA PENGANTAR ............................................................................................. i

DAFTAR ISI ........................................................................................................... ii

DAFTAR GAMBAR ............................................................................................. iii

BAB I PENDAHULUAN ........................................................................................1

1.1 Latar Belakang ..............................................................................................1

1.2 Tujuan ...........................................................................................................2

BAB II PEMBAHASAN .........................................................................................3

2.1 Definisi Ngrok ...............................................................................................3

2.2 Manfaat dan Kegunaan Ngrok ......................................................................4

2.3 Kelebihan dan Kekurangan Ngrok ................................................................4

2.4 Penerapan Ngrok ...........................................................................................5

2.4.1 Share Localhost ke Public .....................................................................5

2.4.2 Membuat Tunnel ke Server Localhost ...................................................8

BAB III PENUTUP ...............................................................................................12

3.1 Kesimpulan .................................................................................................12

3.2 Saran ............................................................................................................12

DAFTAR PUSTAKA ............................................................................................13

ii
 DAFTAR GAMBAR

Gambar 2.1 Ilustrasi Ngrok ......................................................................................3

Gambar 2.2 Langkah-langkah mengaktifkan Ngrok ................................................5

Gambar 2.3 Mendownload tool ngrok sesuai sistem operasi ...................................6

Gambar 2.4 Tampilan command prompt .................................................................6

Gambar 2.5 Alamat ngrok.io untuk akses via public ...............................................7

Gambar 2.6 Mengakses localhost dengan android ...................................................7

Gambar 2.7 Tampilan ketika request berhasil..........................................................8

Gambar 2.8 Akun ngrok beserta URL localhost yang telah di-online-kan ..............9

Gambar 2.9 Website membutuhkan otentikasi berupa username dan password. ..10

iii
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Pada era global perkembangan teknologi dari waktu ke waktu semakin

berkembang, terlebih lagi perkembangan di bidang teknologi komputer yang
mendorong penggunaan dan manfaat perkembangan teknologi tersebut secara luas
di berbagai bidang dan aspek kehidupan, sehingga memudahkan masyarakat pada
umumnya dan individu padakhususnya dalam menunjang kegiatan sehari - hari.
Salah satu contoh dari pemanfaatan perkembangan teknologi komputer itu sendiri
adalah dengan adanya jaringan komputer/internet yang dapat diakses oleh
masyarakat untuk memenuhi kebutuhannya sehari - hari. Penggunaan jaringan
internet yang diakses melalui komputer, masyarakat dapat melihat informasi -
informasi yang ada di dunia ini. Dengan semakin berkembangnya kebutuhan
pengelolaan data dan informasi, dalam sebuah perusahaan dibutuhkan lebih dari
satu komputer yang digunakan oleh banyak orang yang bekerja dalam sebuah tim.
Untuk saling bertukar data dan informasi, maka komputer – komputer yang
digunakan akan dihubungkan satu dengan yang lainnya. Kumpulan komputer yang
saling terhubung disebut jaringan komputer. (Madcoms 2009)
Disisi lain jaringan internet dapat digunakan untuk meremote komputer.
Menggunakan jaringan, user yang menjalankan aplikasi remote, dapat mengakses
komputer dari jarak jauh. Biasanya aplikasi remote, memakai kode - kode untuk
mengakses dan transfer data. Pemanfaatan remote itu sendiri digunakan untuk
solusi pengaksesan server oleh client tanpa menyentuh server, dan meremote dari
jarak jauh ini dapat dilakukan dengan Ngrok. Selain itu, bagi seseorang yang sedang
coding misalnya dalam bentuk programming maupun website development di
server localhost dan ingin meng-online-kannya untuk memamerkan hasil karyanya
secara langsung ataupun ketika ingin menanyakan suatu error yang ada pada
program, maka dapat menggunakan aplikasi Ngrok.

1
1.2 Tujuan

Dalam bab ini, kita akan mendiskusikan berbagai hal mengenai Ngrok. Pada
akhir pembahasan, diharapkan pembaca dapat :
- Memahami definisi Ngrok
- Memahami manfaat dan kegunaan Ngrok
- Mengetahui kelebihan dan kekurangan Ngrok
- Mengetahui penerapan Ngrok

2
 BAB II
PEMBAHASAN

2.1 Definisi Ngrok

Ngrok adalah sebuah program yang dibuat oleh Alan Shreve yang dapat
menciptakan sebuah tunneling dari jaringan publik ke port komputer lokal
menggunakan url yang diberikan oleh ngrok dengan format url :
http://subdomain.ngrok.com. Ngrok akan membuat / membuka jaringan private
melalui NAT atau firewall untuk menghubungkan localhost ke internet dengan
tunnel yang aman

Gambar 2.1 Ilustrasi Ngrok

Penggunaan ngrok adalah sebagai penghubung antara pengakses localhost

dengan internet. Menangkap dan menganalisis semua lalu lintas melalui
terowongan pemeriksaan kemudian dan reply.

3
2.2 Manfaat dan Kegunaan Ngrok

Berikut beberapa kegunaan dari ngrok :

1. Demo tanpa mendeploy
Jika kita memiliki program lalu ingin ditest tanpa harus repot-repot menaruh
file di server hosting, maka ngrok inilah salah satu pilihannya, dengan ngrok
kita dapat secara langsung menunjukan hasil program yang ada di komputer
/ localhost ke komputer client melalui internet.
2. Mempermudah pengujian di perangkat mobile
Program yang kita selesaikan kadang perlu diuji dibeberapa perangkat
mobile untuk memastikan apakah program dapat berjalan baik.
3. Membuat jaringan private
Dengan ngrok, kita mempunyai jaringan private untuk menjalankan layanan
personal cloud yang fungsinya untuk mensinkronisasi file, menjalankan
webmail dari hardware anda secara aman menggunakan end-to-end
encryption.
4. Sharing File
Dengan tool ngrok kita dapat mengirimkan software-software yang ada di
PC.
5. Remote Desktop
Ngrok dapat digunakan sebagai remote desktop yang dapat mengakses
komputer dari jarak jauh.

2.3 Kelebihan dan Kekurangan Ngrok

Berikut beberapa kelebihan dari ngrok :

1. Sangat mudah dalam penginstalan dan penggunaan
2. Gratis dan aman
3. Memiliki dashboard
4. Dapat memutar ulang permintaan
5. Dapat mengamankan trowongan Anda
6. Dapat menggunakan subdomain khusus

4
 7. Dapat mengkonfigurasi semua ini agar terjadi secara otomatis

Kelemahannya adalah ketika layanan Ngrok terputus, kemudian dijalankan

ulang, alamat IP nya tidak sama dengan yang awal.

2.4 Penerapan Ngrok

2.4.1 Share Localhost ke Public

Berikut ini adalah cara agar data localhost dapat diakses secara public
ke komputer atau perangkat lain seperti berikut (misal di Windows) :

1. Buat akun Ngrok dengan membuka link https://dashboard.ngrok.com/get-

started.
2. Akan tampil tatacara untuk mengaktifkan Ngrok

Gambar 2.2 Langkah-langkah mengaktifkan Ngrok

5
3. Download Tool Ngrok sesuai sistem operasi yang dimiliki

Gambar 2.3 Mendownload tool ngrok sesuai sistem operasi

4. Ekstrak dan Masukan tool ke dalam folder yang sering diakses, misal C://
5. Buka Command Prompt/Terminal, karena tool berada di C jangan lupa
untuk run via administrator
6. Install Auth Ngrok dengan perintah (copy nomer 2 dengan menganti
perintah awal)
C://ngrok.exe authtoken
4fv5yrCtncvHYS5A9vPUF_3G41jLKU3d4qkMWCpm2fdsds

7. Jalankan Ngrok dengan perintah

C://ngrok.exe http 80
8. Maka tampilan Command Prompt akan berubah menjadi

Gambar 2.4 Tampilan command prompt

6
9. Jika ingin melihat status Ngok dapat melalui Command Prompt seperti
tampilan diatas atau membuka browser dengan membuka
alamat http://localhost:4040
10. Jangan lupa aktifkan localhost anda, misalnya jika ingin server local dapat
memakai XAMPP, jalankan XAMPP untuk mengkatifkan localhost, bila
localhost berhasil di tampilkan saatnya mencoba tool Ngok.
11. Setelah membuka alamat http://localhost:4040 akan diketahui alamat
ngrok.io untuk mengkases via public.

Gambar 2.5 Alamat ngrok.io untuk akses via public

12. Kemudian coba dengan membuka alamat url seperti gambar diatas dengan
memakai perangkat lain yang terkoneksi.
13. Ketika dicoba memakai handphone Android dapat mengkases localhost di
PC (kedua-duanya harus terkoneksi internet)

Gambar 2.6 Mengakses localhost dengan android

7
14. Jika request berhasil maka, pada tab status akan berubah sesuai dengan
request yang diminta, cepat atau lambat tergantung koneksi internet.

Gambar 2.7 Tampilan ketika request berhasil

2.4.2 Membuat Tunnel ke Server Localhost

Sebelum memulai semuanya, siapkan aplikasi ngrok yang dapat

diunduh di sini. Setelah diunduh, ekstrak file zip nya ke direktori yang kamu
inginkan. Berikut ini adalah langkah-langkah untuk meng-online-kan website-
yang berada di server localhost:
1. Pastikan server localhost sedang berjalan.
2. Jalankan ngrok melalui command-line:
 Arahkan command-line ke direktori tempat ngrok.exe berada.
 Jalankan ngrok dengan command berikut:
ngrok http 80

Maksud command tersebut yaitu untuk menjalankan tunnel HTTP pada port
80.
3. Server localhost sudah dapat diakses secara online melalui URL yang
ditunjukkan di command-line seperti pada Gambar 2.8.

8
 Gambar 2.8 Akun ngrok beserta URL localhost yang telah di-online-kan

 Menggunakan authentication untuk proteksi dari pihak yang tidak

diinginkan

Pada langkah-langkah yang telah di jelaskan, ngrok hanya mengekspos

localhost ke internet begitu saja tanpa keamanan apapun. Bagaimana jika seseorang
mengetahui URL-mu sehingga dapat mengaksesnya dan mencuri hasil
development-mu?
Ngrok memiliki fitur otentikasi dengan mengatur credential berupa username
dan password untuk melindungi akses terhadap konten localhost sehingga hanya
orang yang kamu bagikan credential-nya saja yang dapat mengaksesnya. Bila
sebelumnya command untuk menjalankan ngrok hanya ngrok http 80, sekarang
command nya adalah:
ngrok http -auth "user:password" 80

Ganti user dan password masing-masing dengan username dan password yang
kamu inginkan. Ketika orang mengakses URL-mu, maka mereka akan diminta
untuk memasukkan username dan password dalam bentuk form seperti pada
Gambar 2.9.

9
 Gambar 2.9 Website membutuhkan otentikasi berupa username dan password.

 Mengatur virtual host Apache XAMPP untuk membuat tunnel hanya ke

subdirektori spesifik

Jika kamu tidak ingin mengekspos semua web app yang ada di dalam direktori
htdocs dan hanya ingin meng-online-kan satu web app saja, kamu
bisa kok melakukannya. Ikuti langkah-langkah berikut:

1. Edit host file Windows (C:\Windows\System32\drivers\etc\hosts), tambahkan

mapping IP local (127.0.0.1) dengan host name yang kamu inginkan. Pada
contoh ini, saya menggunakan host name my-web-app.local. Maka baris yang
perlu kamu tambahkan di sana adalah :
127.0.0.1 my-web-app.local
2. Edit file konfigurasi virtual host Apache (direktori
XAMPP\apache\conf\extra\httpd-vhosts.conf), tambahkan script berikut:
<VirtualHost *:80>
#ServerName diisi dengan host name yang telah kamu buat di
langkah sebelumnya
ServerName my-web-app.local
#DocumentRoot diisi dengan string direktori tempat aplikasi
kamu berada
DocumentRoot "D:/XAMPP/htdocs/my-web-app"
SetEnv APPLICATION_ENV "development"
#Directory, sama halnya dengan DocumentRoot
<Directory "D:/XAMPP/htdocs/my-web-app">
DirectoryIndex index.php
AllowOverride All

10
 Order allow,deny
Allow from all
</Directory>
</VirtualHost>

3. Restart service Apache, kemudian jalankan ngrok dengan command:

ngrok http -host-header=rewrite my-web-app.local:80

4. Selesai! URL ngrok akan mengarah ke host name my-web-app.local, yang

tentunya mengarah ke direktori D:\XAMPP\htdocs\my-web-app.

11
 BAB III
PENUTUP

3.1 Kesimpulan

Dengan ngrok kita dapat mengakses hasil pekerjaan yang dilakukan pada
Server dimanapun kita berada yang penting terhubung ke internet. Akan tetapi,
ngrok ini harus membayar untuk nama subdomain tetap. Karna ketika Anda meng-
akhiri ngrok dan menjalankannya lagi, subdomin dari ngrok tersebut suka berubah-
ubah. Jadi sangat tidak di rekomendasikan untuk dipublikasikan secara global.

3.2 Saran

Penulis mempunyai saran khususnya bagi penulis dan umumnya bagi

pembaca yaitu penggunaan layanan ngrok yang bersifat gratis menyebabkan nama
domain berubah-ubah setiap kali dijalankan serta fitur yang tersedia juga minim,
untuk itu penulis menyarankan agar menggunakan layanan yang berbayar agar
domain tidak berubah setiap kali ngrok dijalankan.

12
 DAFTAR PUSTAKA

1. Membuat tunnel ke server localhost dengan ngrok

https://blog.whoisrizkipratama.net/membuat-tunnel-server-localhost-
ngrok/

2. Mengubah akses Localhost ke Public menggunakan Ngrok

https://www.akunerio.com/mengubah-akses-localhost-ke-public-
menggunakan-ngrok/

3. Pengertian Ngrok dan Kegunaannya

https://yapsamuel.blogspot.com/2016/12/pengertian-ngrok-dan-
kegunaannya.html

13