Optimalkan proses testing pembuatan proyek website lokal dengan dapat diakses secara online

Introduction

Hola Rekan-Rekan semua, kembali lagi Kita melanjutkan eksplorasi pembuatan sistem informasi berbasis komputer dalam bentuk website. Setelah proses pengembangan atau implementasi telah dilakukan, maka tahap testing atau pengujian perlu dilakukan guna memvalidasi apakah telah sesuai dengan rancangan konsep yang telah didefinisikan di awal atau tidak.

Proses testing perlu dilakukan menyerupai dengan sistem yang dirancang. Apatah lagi jika dapat dilakukan oleh aktor yang telah ditentukan sesuai dengan rancangan yang telah dibuat. Maka proses testing dapat berjalan lebih nyata dan diharapkan dapat memperoleh hasil yang maksimal dalam menemukan bug (defect) dari proses pengembangan atau implementasi yang telah dilakukan. Sehingga hasil akhir dari proses pengembangan sistem informasi dapat direaliasikan dengan optimal.

---

Tools yang dibutuhkan

Pertimbangan sumber daya yang terbatas menuntut untuk mencari alternatif solusi agar proses testing dapat dilakukan senyata mungkin, dengan adanya ngrok, dapat membantu Kita dalam membuat proyek website yang sedang dikembangkan di lingkungan (environtment) lokal dapat diakses secara online oleh pengguna atau aktor lainnya di luar dari area lokal laptop yang digunakan untuk proses pengembangan atau implementasi.

Pada artikel ini akan membahas terkait bagaimana menggunakan ngrok dalam mendukung proses testing dalam sistem nyata seperti website yang sudah di deploy ke server secara online. Selamat menikmati sajian panduan berikut ini.

---

Tahapan

Langkah 1 : akses laman https://dashboard.ngrok.com/login lalu login sesuai dengan akun yang dimiliki, apabila belum memiliki akun bisa melakukan registrasi..

Gambar 1. Tampilan Form Register

Langkah 2 : Setelah selesai login maupun register akun baru, maka Kita dapat memilih menu platform device yang Kita gunakan, pada kondisi ini saya menggunakan device windows. Lalu scroll ke bawah dan pilih tab download. Dan pilih download sesuai dengan arsitektur laptop windows Kita (umumnya 64 bit).

Gambar 2. Tampilan Halaman Download NGROK

Langkah 3 : Buka lokasi folder dari penyimpanan hasil download NGROk. Lalu lakukan ekstraksi.

Gambar 3. Proses ekstraksi hasil download NGROK

Langkah 4 : Jalankan file .exe dari hasil ekstraksi yang telah dilakukan

Gambar 4. File ngrok setelah di ekstrak

Langkah 5 : Maka akan terbuka command prompt. lalu copy CLI yang diperoleh dari laman download NGROk di langkah 2.

Gambar 5. Sintax CLI untuk mengaktifkan token

Gambar 6. Copy dan jalankan sintax CLI token

Langkah 6 : Buka proyek Laravel yang ingin dijalankan pada server lokal dengan CLI php artisan serve

Gambar 7. Menjalankan proyek laravel di server lokal

Langkah 7 : Buka kembali command prompt dari ngrok dan jalankan perintah ngrok http http://localhost:8000

Gambar 8. Output setelah menjalankan perintah deploy dengan ngrok.

Maka, Kita akan memperoleh alamat website seperti gambar 8 di atas yang di blok berwarna putih untuk melakukan testing di perangkat selain laptop yang digunakan sebagai server lokal.

Langkah 8 : Uji dengan browser in Private window, lalu klik Visit Site.

Gambar 9. Output saat akses alamat yang digenerate oleh ngrok

Langkah 9 : Apabila muncul tampilan berantakan seperti gambar 10, maka Kita bisa melakukan konfigurasi tambahan di proyek laravel Kita dengan masuk di file yang berada di folder app » Providers » AppServiceProvider.php lalu tambahkan sintax seperti pada gambar 11.

Gambar 10. Tampilan saat mengakses website yang telah di deploy / dijalankan dengan ngrok

Gambar 11. Sintax tambahkan untuk memperbaiki tampilan yang berantakan

Maka tampilan setelah dilakukan refresh halaman menjadi seperti gambar 12

Gambar 12. tampilan setelah dilakukan konfigurasi tambahan.

Demikian panduan penggunaan ngrok guna deploy / menjalankan proyek laravel lokal agar diakses secara online tanpa harus menggunakan server online yaitu hosting yang berbayar.

Nb : Setelah proses testing selesai dilakukan, jangan lupa sintax tambahan di file AppServiceProvider.php dinonaktifkan kembali (dapat dengan cara blok sintax lalu tekan ctrl + / agar sintax CLI php artisan serve tidak error saat dijalankan tanpa menggunakan ngrok (lingkungan lokal saja).

Gambar 13. Nonaktifkan sintax tambahan di AppServiceProvider.php

---

Demikian proses eksplorasi proyek laravel agar saat dijalankan pada server lokal dapat diakses secara online. Semoga dapat memberikan gambaran dalam memanfaatkan ngrok agar proses testing dapat berjalan dengan optimal.

Mohon maaf apabila ada banyak kekurangan. Terima Kasih atas perhatian yang telah diberikan.

Salam Hormat,
Muhammad Arief Ardyansyah