Perancangan Aplikasi Berbasis Website untuk Pemesanan Es Buah Secara Online Menggunakan Next.JS dan TypeScript
Muhamad Rhamdhan Mardiansyah Fakultas Teknik, Universitas Islam Nusantara
ABSTRACT
Fruit ice drinks are a popular choice in Indonesia, especially during hot weather.
However, the process of buying fruit ice is still considered traditional, where buyers must come directly to the store to order and buy. This can be time-consuming and impractical, especially for busy people. Therefore, to increase sales turnover and service, an online fruit ice ordering website application is needed. This application will be built using Typescript programming language and the NextJS framework. With this online platform, customers can conveniently order their favorite fruit ice drinks without the hassle of traveling to the store or waiting in line. Furthermore, the website application will streamline order management for sellers. They can easily manage orders, update their product offerings, and even track their sales turnover directly on the platform.
Keywords: Website, TypeScript, Framework, Next.JS
PENDAHULUAN
Di era digital ini, teknologi internet dan smartphone terus berkembang pesat, membuka gerbang ke berbagai pemanfaatan yang semakin beragam dan canggih, menyesuaikan dengan kebutuhan manusia modern. Salah satu aspek yang menjadi sorotan utamanya adalah penggunaan internet dan smartphone sebagai media informasi dan promosi.
Berbeda dengan media promosi tradisional lainnya, internet menawarkan alternatif yang jauh lebih ekonmis dan efektif. Jangkauan internet yang luas mendunia memungkinkan pemilik usaha dan layanan untuk menjangkau calon klien secara lebih luas, tanpa batas geografis.
Keunggulan lain dari internet adalah interaksi langsung. Berbeda dengan media promosi tradisional yang bersifat pasif, interner memungkinkan komunikasi dua arah antara pemilik usaha dan calon klien. Hal ini membuka peluang untuk membangun hubungan yang lebih personal dan meningkatkan konversi penjualan.
Perkembangan teknologi internet dan smartphone dapat membuka peluang baru untuk menghadirkan solusi yang lebih praktis dan efisien. Pembuatan website pemesanan es buah online dapat menjadi solusi bagi permasalahan tentang proses jual beli yang masih bisa dibilang tradisional. Website ini memungkinkan pembeli untuk memesan es buah secara online dari mana saja dan kapan saja, dengan proses yang mudah dan cepat.
Website pemesanan es buah online memiliki beberapa keuntungan dibandingkan dengan cara tradisional. Pembeli dapat melihat menu dan memesan es buah dengan mudah dan cepat, tanpa harus datang langsung ke toko. Selain itu, website ini dapat meningkatkan omset karena bisa dijadikan media untuk mempromosikan produk es buah itu sendiri.
Website pemesanan es buah ini juga dapat mempermudah bagi pemilik toko, karena nantinya
akan ada dashboard admin untuk mengatur produk produk minuman yang akan dijual, kemudian dashboard juga dapat digunakan untuk mengatur pesanan yang dibuat oleh pembeli, dan terakhir penjual bisa mendapatkan informasi tentang omset penjualan yang didapatkan dari pemesanan online tersebut.
Untuk mempermudah proses penjualan es buah sekaligus mempromosikan produk es buah maka penulis mengangkat judul perancangan aplikasi berbasis website untuk pemesanan es buah secara online menggunakan NextJS dan TypeScript, sehingga diharapkan dapat menjadi sarana promosi yang efektif bagi toko es buah dan juga pembeli es buah.
Definisi Aplikasi secara umum ialah sebuah program yang berbentuk perangkat lunak (Software) yang beroperasi di suatu sistem tertentu yang sangat berguna dalam membantu berbagai aktivitas yang dijalankan oleh manusia (Ulfa & Achmad Alfarizhi, n.d., 2024).
Website merupakan sebuah media informasi yang ada di internet. Website tidak hanya dapat digunakan untuk penyebaran informasi saja melainkan bisa digunakan untuk membuat took online. Website adalah kumpulan halaman-halaman situs yang biasanya terangkum dalam sebuah domain atau subdomain, yang tempatnya berada di dalam World Wide Web (www) di internet (Studi & Hartono, n.d.). Website juga biasa disebut sebagai halaman web yang ditulis dalam format HTML (Hyper Text Markup Language), yang hampir selalu bisa diakses melalui HTTP, yaitu protokol yang menyampaikan informasi dari server website untuk ditampilkan kepada para pengguna melalui web browser. Semua publikasi dari website tersebut dapat membentuk sebuah jaringan informasi yang sangat besar (Riki Subagia, 2020).
Halaman-halaman dari website akan bisa diakses melalui sebuah URL yang biasa disebut Homepage, URL ini mengatur halaman-halaman situs untuk menjadi sebuah hierarki, meskipun hyperlink-hyperlink yang ada di halaman tersebut mengatur para pembaca dan memberitahu mereka susunan keseluruhan dan bagaimana arus informasi ini berjalan. Beberapa website membutuhkan subskripsi (data masukan) agar para pengguna dapat mengakses sebagian atau keseluruhan isi website (Trimarsiah et al., n.d.).
Next.js adalah framework front-end penyempurna React yang dioptimalkan untuk pembangunan aplikasi web modern dengan mudah dan cepat. Next.js secara khusus dirancang untuk memperbaiki beberapa kelemahan yang dimiliki oleh React.js. Dengan menggunakan React sebagai library utama, Next.js menyempurnakan proses rendering dan menawarkan berbagai fitur yang menjadikannya lebih unggul(Aorinka, 2024).
NextJS memberikan banyak manfaat bagi pengembang aplikasi web, termasuk kemampuan untuk membuat tampilan User Interface yang responsif dan SEO-Friendly dengan cepat, mengelola state aplikasi dengan mudah, serta mengoptimalkan kinerja aplikasi web secara otomatis. Selain itu, Next.js juga memiliki dukungan untuk Server Side Rendering (SSR) dan Static Site Generator (SSG) yang memungkinkan aplikasi web dapat berjalan lebih cepat (Ferdiansyah, 2024). Fitur tersebut memungkinkan aplikasi yang dibangun dengan Next.js menjalankan loading lebih cepat dan meningkatkan user experience, sekaligus memperbaiki visibilitas mesin pencari karena konten sudah tersedia pada saat halaman dimuat, bukan dihasilkan melalui JavaScript di sisi klien.
TypeScript adalah bahasa pemrograman sumber terbuka dan gratis yang dikembangkan dan dikelola oleh Microsoft. TypeScript merupakan ekstensi dari JavaScript yang dirancang untuk memfasilitasi pengembangan aplikasi JavaScript skala besar (Microsoft, 2012).
TypeScript menambahkan fitur pengetikan statis opsional dan pemrograman berorientasi objek berbasis kelas ke dalam bahasa skrip JavaScript. Dengan kata lain, bahasa pemrograman TypeScript memperkaya JavaScript dengan tipe data opsional, yang memungkinkan interaksi dengan perpustakaan JavaScript yang ada melalui deklarasi antarmuka. Meskipun setiap program TypeScript adalah program JavaScript, TypeScript menawarkan sistem modul, kelas, antarmuka, dan sistem tipe bertahap yang kaya. Tujuan utamanya adalah memberikan transisi yang lancar bagi para pengembang JavaScript yang sudah terbiasa dengan idiom pemrograman JavaScript yang mapan tanpa perlu melakukan penulisan ulang atau anotasi besar. Salah satu konsekuensi menarik dari penggunaan TypeScript adalah sistem tipe TypeScript yang tidak dirancang secara statis. Hal ini disebabkan oleh fleksibilitas semantik JavaScript yang membuat penulisan kode yang benar menjadi sulit dan kode yang aman menjadi sangat sulit. Untuk mengatasi masalah ini, berbagai bentuk pengetikan bertahap telah diusulkan, salah satunya adalah TypeScript.
TypeScript adalah bahasa pemrograman yang dikompilasi ke JavaScript. sebagian besar berasal dari Microsoft, dengan kontribusi bersama Google. TypeScript memiliki tipe sistem yang bersifat struktural, statis, kuat, se, dan diketik secara bertahap. TypeScript adalah yang paling sukses di antara bahasa yang diketik secara bertahap dan bahasa paling populer yang dikompilasi ke JavaScript (Black, 2020).
METODE PENELITIAN
Metode penelitian yang digunakan adalah metode kualitatif dengan analisis deskriptif tujuannya adalah untuk mendapatkan data agar perancangan website pemesanan es buah ini dapat dilakukan dengan baik dan mendapat hasil yang maksimal. Berikut merupakan tahapan yang dilalui dalam penelitian ini:
1) Planning. Perencanaan adalah tahap awal dari penelitian ini. Dengan mengidentifikasi masalah-masalah yang ada pada toko es buah maka dapat dihasilkan sebuah rancangan yang diperlukan untuk membuat website pemesanan esbuah online.
2) Analisis. yaitu menganalisa sistem, dan juga menganalisa kebutuhan apa saja yang akan diperlukan bagi pembuatan website pemesanan es buah ini.
3) Desain. Aplikasi pemesanan es buah online berbasis website ini dibuat menggunakan bahasa pemrograman TypeScript dengan framework NextJS dan desain sistem yang dibuat menggunakan UML (Unified Modeling Language) salah satunya adalah Use Case Diagram dan Activity Diagram.
4) Implementasi. Penerapan sistem yang dilakukan pada penelitian ini ada beberapa hal yang harus diperhatikan sehingga aplikasi yang dirancang dapat berfungsi seefisien mungkin, mulai dari database, pengujian kelayakan, dan juga tidak lepas dari pengujian keamanan sistem agar dapat dioperasikan dengan baik dan aman.
HASIL DAN PEMBAHASAN
Flowchart
Flowchart memiliki peran penting dalam memutuskan sebuah langkah atau fungsionalitas dari sebuah proyek pembuatan aplikasi atau program yang melibatkan banyak orang sekaligus. Selain itu, dengan menggunakan bagan alur ini akan membuat proses dari sebuah program akan lebih jelas, ringkas dan mengurangi kemungkinan untuk salah penafsiran dari fitur yang akan dibuat nantinya.
Berikut ini adalah flowchart dari proses aplikasi website pemesanan es buah secara online.
Gambar 1. Flowchart pemesanan online via website
Use Case Diagram
Diagram ini dapat menggambarkan interaksi antara sistem, sistem eksternal, dan pengguna. Dibawah ini merupakan Use Case Diagram pada aplikasi pemesanan es buah online berbasis web ini, dapat dilihat pada Gambar 2 sebagai berikut.
Gambar 2. Use-Case Diagram Website pemesanan es buah Dibawah ini merupakan penjelasan dari Gambar Use Case Diagram diatas:
1) Use Case Login (Admin): Admin diharuskan untuk login dengan memasukkan username dan password agar dapat mengakses halaman dashboard atau CMS (Content Management System) dari website aplikasi pemesanan es buah online ini.
2) Use Case Admin: Dapat mengelola pesanan, mengelola dan melakukan update informasi penjualan es buah, dan juga melakukan konfirmasi pesanan pelanggan.
3) Use Case User: User atau pelanggan dapat langsung memilih produk pada halaman menu, dan juga pelanggan bisa mengecek ketersediaan produk pada halaman tersebut, kemudian pelanggan bisa memasukkan pesanan ke dalam keranjang belanja, dan dapat melakukan checkout langsung untuk melakukan pemesanan, dan terakhir pelanggan diharuskan untuk menyelesaikan transaksi agar pesanan dapat diproses. Setelah mendapatkan konfirmasi dari admin, pelanggan dapat melakukan review melalui website.
Activity Diagram
Activity diagram memiliki sebuah arti yaitu lebih fokus kepada menggambarkan proses bisnis dan urutan aktivitas dalam sebuah proses. Dipakai pada business modeling untuk memperlihatkan urutan aktifitas proses bisnis. Activity diagram admin pada Website Es Buah dapat dilihat pada Gambar 3 sebagai berikut.
Gambar 3. Activity Diagram Admin Penjelasan Activity Diagram Admin:
1) Proses Login: Admin melakukan login dengan memasukkan username dan password.
2) Decision (pilihan): Apabila admin salah memasukkan username dan password maka server akan mengirimkan notifikasi bahwa login gagal dilakukan dan tetap pada halaman login untuk memasukkan username dan password yang benar.
3) Mengelola website es buah: Admin melakukan create, update, dan delete terhadap produk yang dijual. Dan melakukan konfirmasi pesanan pelanggan dan mengelola rekap data penjualan es buah.
Activity Diagram User pada perancangan website pemesanan es buah online ini dapat dilihat pada gambar 4 dibawah ini.
Gambar 4. Activity Diagram User
Penjelasan Activity Diagram User:
1. Landing page: User akan mendapatkan beberapa informasi tentang produk es buah yang disediakan pada landing page website
2. Memilih Menu: User dapat memilih menu yang diinginkan pada halaman menu.
3. Melakukan pemesanan es buah: Setelah memilih beberapa menu, maka user dapat melakukan pemesanan dengan menginputkan data-data yang dibutuhkan.
4. Memilih metode pembayaran: Aplikasi menyediakan beberapa metode pembayaran seperti QR, transfer bank, dan E-Money (Dana atau Gopay)
5. Melakukan Review: Setelah pesanan diterima pelanggan maka pelanggan dapat memberikan review, masukan serta komentar yang membangun kepada warung es buah melalui website.
Desain Website
Hasil penelitian yang dilakukan oleh penulis adalah Website Pemesanan es buah online yang dibuat menggunakan NextJS dan TypeScript. Website ini terdiri dari beberapa halaman utama, salah satunya adalah halaman landing page, menu, keranjang, checkout, login admin, orders, dashboard, dan halaman products. Berikut ini adalah penjelasan dari masing-masing halaman tersebut:
No Halaman Uji Coba
1 Landing Page Desain landing page berhasil dibuat, Halaman ini adalah halaman pertama yang akan dikunjugi user ketika masuk ke website.
2 Menu Page Desain halaman menu berhasil dibuat, halaman menu berfungsi untuk menampilkan produk yang dijual di toko es buah.
3 Shopping Cart Page Desain halaman shopping cart berhasil dibuat, halaman ini berfungsi untuk untuk menyimpan menu pilihan yang akan di pesan.
4 Checkout Page Desain halaman checkout berhasil dibuat, halaman ini digunakan untuk melakukan proses pemesanan, pada halaman ini user diharuskan untuk mengisi form pemesanan untuk melakukan proses checkout.
5 Login Page Admin Desain halaman login berhasil dibuat, halaman ini digunakan untuk mengakses dashboard website penjualan es buah.
6 Dashboard Page Desain halaman dashboard berhasil dibuat, halaman ini digunakan untuk mengecek omset penjualan, total orderan masuk, dan total pengunjung website.
7 Orders Page Desain halaman orders berhasil
dibuat, halaman ini digunakan untuk mengecek seluruh orderan yang masuk dari website pemesanan online.
8 Products Page Desain halaman products berhasil dibuat, halaman ini digunakan untuk mengatur produk apa saja yang akan di jual atau ditampilkan di website
Tabel 1. Hasil desain halaman aplikasi website
KESIMPULAN
Menurut hasil penelitian dan analisa mengenai perancangan aplikasi berbasis website untuk pemesanan online ini dapat disimpulkan bahwa:
1) Dengan adanya aplikasi berbasis website untuk pemesanan online ini diharapkan bisa mengubah proses jual-beli yang tradisional menjadi lebih modern dengan mode pemesanan online, sehingga pembeli tidak perlu mengantri atau datang sendiri ke toko es buah.
2) Aplikasi berbasis website ini diharapkan bisa menjadi sebuah inovasi baru untuk mempromosikan produk yang akan dijual sehingga dapat meningkatkan omset dari penjualan es buah.
DAFTAR PUSTAKA
Riki Subagia. (2020, Juni) Sistem Informasi Rental Mobil Berbasis Web, Vol 2, No 2. E- ISSN:2685-2594.
Aorinka, A. (2024, January). Apa Itu Next.js? Ketahui Cara Kerja, Fitur, dan Kelebihannyal: [Blog Post]. Diperoleh dari Dewaweb.Com.
Black, N. (2020). Boris Cherny on TypeScript. In IEEE Software (Vol. 37, Issue 2, pp. 98–
100). IEEE Computer Society. https://doi.org/10.1109/MS.2019.2958155
Ferdiansyah, F. (2024, September 4). Pengertian Next.js: Framework dibangun di atas React.js: [Blog Post]. Diperoleh dari https://www.biznetgio.com/news/apa-itu-next-js Microsoft. (2012). TypeScript for the New Programmer. Diperoleh dari
Https://Www.Typescriptlang.Org/.
Studi, P., & Hartono, E. C. (n.d.). PENINGKATAN KINERJA PORTAL MARKETING PADA WEBSITE KATALOG SMARTPHONE MENGGUNAKAN LEAN UX TUGAS AKHIR.
Trimarsiah, Y., Arafat, M., AMIK AKMI Baturaja Jl Jend AYani No, D., & Tanjung Baru Baturaja Timur OKU Sumsel Sur-el, A. (n.d.). Analisis dan Perancangan Website sebagai Sarana Informasi …… (Yunita Trimarsiah & Muhajir Arafat) ANALISIS DAN PERANCANGAN WEBSITE SEBAGAI SARANA INFORMASI PADA LEMBAGA BAHASA KEWIRAUSAHAAN DAN KOMPUTER AKMI BATURAJA.
Ulfa, M., & Achmad Alfarizhi, R. (n.d.). PERANCANGAN APLIKASI SIJASPRO BERBASIS WEBSITE DI JASDAM II SRIWIJAYA. In Jurnal Pengabdian Kolaborasi dan Inovasi IPTEKS (Vol. 2).
