Jurnal Sistem Informasi dan Sains Teknologi Vol. 7 No. Februari 2025 ISSN 2684-8260 PERANCANGAN APLIKASI BREAD DENGAN METODE BOPIS BERBASIS MOBILE MENGGUNAKAN FRAMEWORK FLUTTER 1Sri Alia Rosidah, 2Adnan Nuur Bachtiar, 3Muhammad Darwis, 4Retno Hendrowati 1,2. Program Studi Teknik Informatika Universitas Paramadina. Indonesia ABSTRAK Metode pembelian online dengan pengambilan di toko (BOPIS) telah menjadi salah satu inovasi yang signifikan dalam meningkatkan kenyamanan dan efisiensi dalam berbelanja. Aplikasi BREAD dikembangkan dengan tujuan untuk mempermudah konsumen dalam memesan produk roti dan kue dengan mengintegrasikan metode BOPIS melalui platform Pengembangan aplikasi ini menggunakan framework Flutter, yang memungkinkan pembangunan aplikasi multiplatform dengan kinerja yang responsif. Studi ini menguraikan proses pengembangan aplikasi BREAD mulai dari analisis kebutuhan, desain antarmuka, fitur utama, hingga pengujian menggunakan metode Waterfall. Hasil pengujian menunjukkan bahwa aplikasi ini berhasil memenuhi berbagai fungsi yang diharapkan, termasuk manajemen pesanan, pembayaran, dan pengelolaan profil pengguna dengan baik. Dengan demikian, aplikasi BREAD dapat memberikan kontribusi positif dalam meningkatkan pengalaman berbelanja dan efisiensi operasional pada industri roti dan kue. Kata Kunci: Flutter. BOPIS. Kasir. Aplikasi Mobile. Metode Waterfall PENDAHULUAN Perkembangan teknologi informasi yang pesat telah mendorong perubahan signifikan dalam berbagai aspek kehidupan, termasuk dalam dunia bisnis. Salah satu inovasi yang telah berubah adalah cara seseorang dalam melakukan pembelian dan pemesanan produk. Salah satu inovasi penting dalam dunia bisnis adalah penerapan metode BOPIS (Buy Online. Pick Up In-Stor. , yang memungkinkan konsumen untuk memesan tanpa perlu mengantri . Aplikasi ini tidak hanya meningkatkan kenyamanan pelanggan tetapi juga memperluas jangkauan pasar bagi bisnis. Bread merupakan aplikasi yang penulis kembangkan dengan tujuan menyediakan kemudahan bagi konsumen dalam membeli produk roti dan kue. Aplikasi ini menerapkan metode BOPIS, di mana pelanggan dapat memesan produk melalui aplikasi mobile dan memilih untuk mengambil pesanan mereka di toko fisik. Dengan demikian pelanggan dapat menikmati kemudahan pemesanan online tanpa harus menunggu pengiriman, sekaligus memastikan ketersediaan produk saat Dalam pengembangannya. Bread menggunakan framework Flutter, flutter adalah kerangka kerja open source oleh Google untuk membangun aplikasi multi-platform dan dikompilasikan secara native dari basis kode tunggal . Aplikasi Bread dirancang untuk memenuhi kebutuhan konsumen modern yang menginginkan kecepatan, kemudahan, dan kenyamanan dalam berbelanja . Selain itu, aplikasi ini juga diharapkan dapat membantu bisnis roti dan kue dalam meningkatkan efisiensi proses pemesanan dan pengelolaan stok, serta memberikan layanan yang lebih baik kepada pelanggan. Penelitian ini akan membahas secara rinci proses peranvangan dan pengembangan aplikasi Bread, mulai dari anlisis kebutuhan, desain antar muka, fitur Ae fitur utaman, hingga pengujian aplikasi. Dengan demikian, diharapkan penelitian ini dapat memberikan kontribusi positif bagi pengembangan aplikasi berbasis mobile yang lebih efektif dan efisien. II. LANDASAN TEORI 1 Unified Modeling Language (UML) UML bisa dikatakan sebuah bahasa yang digunakan untuk menggambarkan, mendokumentasi, dan merancang proses Jurnal Sistem Informasi dan Sains Teknologi Vol. 7 No. Februari 2025 ISSN 2684-8260 kerja suatu aplikasi . UML dipelopori oleh Booch. Rumbaugh, dan Jacobson pada Oktober 1994, kemudian mereka membuat 3 buku tentang UML pada tahun 1999, yang dimana dari buku itu menjadikan UML sebagai standar bahasa pemodelan . 2 Flutter Flutter adalah kerangka kerja open source oleh Google untuk membangun aplikasi multi-platform . Flutter menggunakan bahasa dart dalam pengkodeannya dan dikompilasikan secara native dari basis kode tunggal sehingga lebih cepata dalam proses compilenya . 3 Figma Merupakan platform digital kolaborasi untuk mendesain yang berbasis website memungkinkan mengembangkan antarmuka yang interaktif dan responsif . Figma sering digunakan untuk pembuatan prototype sebuah sistem yang akan dibuat sebelum melakukan development. Dalam figma terdapat 3 tahap utama, yaitu Wireframing, pembuatan mock-up sistem, dan slicing. 4 Black box - Testing Black box testing adalah salah satu metode pengujian perangkat lunak yang berfokus pada pengujian fungsi tanpa mempertimbangkan struktur internal atau kode sumber dari perangkat lunak tersebut. Dalam pendekatan ini, perangkat lunak diperlakukan seperti "kotak hitam," di mana tester hanya menguji input dan output tanpa mengetahui bagaimana proses internalnya bekerja. METODE PENELITIAN Dalam penelitian ini, metode yang digunakan adalah metode pengembangan sistem Waterfall. Metode ini dilakuakn dari step satu ke step berikutnya dengan tersusun yang sejalan dan berurutan . , . Gambar 1. Model Pengembangan Waterfall Berdasarkan Gambar 1, langkah yang dilakukan penulis dalam menyelesaikan penelitian ini adalah: Requirements Analysis Tahap ini melibatkan pemahamam mendalam tentang kebutuhan penggunadan tujuan proyek. Tim mengumpulkan informasi dan merancang spesifikasi sistem. Design Pada tahap ini, tim merancang arsitektur sistem, menggambarkan aliran data, dan membuat desain detail. Development Tahap ini melibatkan pengkodean berdasarkan desain yang telah dibuat. Tim mengemabngkat perangkat lunak sesuai dengan spesifikasi yang telah ditetapkan. Testing Setelah selesai pengkodean, perangkat lunak melakukan pengujian untuk memastikan kinerjanya sesuai dengan Tes melibatkan pengujian fungsional, integritas, dan performa. Maintenance Pemeliharaan merupakan tahap terakhir pada waterfall. Tim akan memperbaiki bug, mengoptimalkan kinerja, dan memperbarui perangkat lunak sesuai kebutuhan. Jurnal Sistem Informasi dan Sains Teknologi Vol. 7 No. Februari 2025 ISSN 2684-8260 IV. ANALISIS DAN HASIL PERANCANGAN 1 Requirements Analysis Motivasi utama dalam pengembangan aplikasi BREAD berasal dari keresahan penulis yang melihat antrian panjang di toko kue. Antrian tersebut disebabkan oleh lamanya pembeli dalam memilih kue di depan kasir. Berdasarkan observasi ini, penulis menemukan kebutuhan utama yang diidentifikasi adalah : Mengurangi waktu tunggu di toko dengan memungkinkan pelanggan memilih dan memesan produk melalui aplikasi BREAD. Menyediakan informasi ketersediaan produk yang jelas. Metode pembayaran yang fleksibel dengan menggunakan metode BOPIS. Interface yang interaktif dan mudah digunakan oleh para pelanggan toko 2 Design Pada tahap ini dimulai dengan perancangan tetang pengguna yang terlibat pada aplikasi, dan proses alur yang diharapkan oleh penulis. Perancangan yang dilakukan antara lain : Use Case Diagram Pada gambar 2 Use Case Diagram digunakan untuk menggambarkan fungsi atau tugas Ae tugas aktor dalam fitur aplikasi yang akan dibangun. Gambar 2. Use Case Diagram BREAD Pada Use Case Diagram memiliki 3 aktor yang berperan pada aplikasi BREAD, berikut penjelasan dari peran aktor pada table 1. Table 1. Peran Aktor Aktor Admin Pelanggan Penjual Penjelasan Admin memiliki tanggung jawab mengontrol semua aktifitas yang ada pada aplikasi BREAD. Pelanggan merupakan user yang memesan kue melalui aplikasi BREAD. Penjual merupakan user yang akan menjual kue yang ada di toko kemudian memonitoring ketersediaan kue, dan laporan penjualan kue. Jurnal Sistem Informasi dan Sains Teknologi Vol. 7 No. Februari 2025 ISSN 2684-8260 Class Diagram Gambar 3 menunjukan struktur dari class-class inti untuk membangun sistem, dimana class diagram menampilkan atribut metode, serta menampilkan relation pada setiap class. Gambar 3. Class Diagram Activity Diagram Digunakan untuk menjelaskan alur aktivitas user dalam menggunakan aplikasi BREAD. Berikut rancangan Activity Diagram pada aplikasi BREAD Gambar 4. Activity Diagram - Login Jurnal Sistem Informasi dan Sains Teknologi Vol. 7 No. Februari 2025 ISSN 2684-8260 Pada Gambar 4 merupakan proses dari login aplikasi BREAD. Sebelum menggunakan aplikasi BREAD, pelanggan diharuskan untuk login terlebih dahulu untuk dapat memesan kue pada aplikasi BREAD. Gambar 5. Activity Diagram - Order Pada Gambar 5 merupakan proses dari pelanggan saat melakukan pemesanan di aplikasi BREAD. Pelanggan dapat memilih kue yang ada pada aplikasi BREAD kemudian melakukan pembayaran kue yang di pesan di kasir. 3 Implementasi Untuk tahap pengembangan, kami menggunakan framework Flutter untuk membangun aplikasi BREAD. Flutter merupakan aplikasi multi-platform yang efisien dan responsif . Ini memungkinkan pengembangan aplikasi untuk Android dan IOS dengan satu basis kode saja. Home Screen Pada Gambar 6, pelanggan akan mendapatkan 2 pilihan untuk masuk ke halaman utama, yaitu dengan registrasi untuk pelanggan baru, dan login untuk pelanggan yang sudah pernah registrasi sebelumnya. Jurnal Sistem Informasi dan Sains Teknologi Vol. 7 No. Februari 2025 ISSN 2684-8260 Gambar 6. Home Screen Registrasi & Login Pada Gambar 7 Registrasi dilakukan pada saat pelanggan belum memiliki akun untuk mengakses halaman utama aplikasi BREAD, pertama pelanggan mendaftarkan nama dan alamat pelanggan Gambar 7. Registrasi Pada Gambar 8. Sign in dilakukan pada saat pelanggan sudah memiliki akun untuk masuk kedalam halaman utama aplikasi BREAD. Pelanggan saat login memasukan alamat email dan password akun. Gambar 8. Sign In Jurnal Sistem Informasi dan Sains Teknologi Vol. 7 No. Februari 2025 ISSN 2684-8260 Halaman Utama Halaman utama pada Gambar 9 merupakan halaman yang diakses setelah pelanggan dapat melakukan login. Komponen yang pertama ditampilkan di halaman utama adalah menu Best Seller dan kemudian di bawahnya terdapat detail menu lainnya. Gambar 9. Halaman Utama Halaman Menu Halaman menu yang ditunjukan pada Gambar 10 merupakan halaman untuk menampilkan semua daftar menu yang dijual pada aplikasi BREAD. Gambar 10. Halaman Menu Halaman Order Pada halaman order yang ditunjukan pada Gambar 11 merupakan halaman untuk menampilkan kue apa saja yang sudah diorder oleh pelanggan, yang kemudian jika semua pesanan sudah sesui maka user mengklik payment now untuk dibuatkan QR Code untuk mengambil kue di toko. Jurnal Sistem Informasi dan Sains Teknologi Vol. 7 No. Februari 2025 ISSN 2684-8260 Gambar 11. Order Halaman Profile Pada halaman profil seperti pada Gambar 12 menunjukan informasi data pembeli, mulai dari nama, email, dan alamat. Pada halaman ini user juga dapat melakukan perbaruan informasi pengguna pada aplikasi BREAD Gambar 12. Halaman Profile 4 Testing Pada tahap testing dilakukan pengujian aplikasi dengan metode Black-Box testing, sistem diuji kemampuannya apakah sudah sesuai dengan yang diharapkan. Berikut data pengujian. Kegiatan Registrasi Login Table 2. Black-Box Testing BREAD Hasil yang diharapkan Output Sistem dapat menyimpan Berhasil menyimpan informasi user yaitu email, informasi user dan password, nama, dan alamat. masuk ke halaman Kemudian masuk ke halaman utama Sistem dapat melakukan Sistem validasi akun dan mengalihkan memvalidasi ke halaman utama dan user di alihkan ke halaman utama Status Valid Valid Jurnal Sistem Informasi dan Sains Teknologi Vol. 7 No. Februari 2025 ISSN 2684-8260 Membeli Kue Pelanggan menambahkan kue ke dalam list order Menghapus / Kue Pelanggan dapat menghapus / mengurangi jumlah kue yang dibeli pada list order Payment Pelanggan mendapatkan QR Code dari list order mereka pembayaran pada kasir Edit Profil Pelanggan dapat melakukan edit profil meliputi email, nama dan alamat Sistem yang dipilih user ke dalam list order Sistem dikurangi dari list Sistem membuat QR Code Sistem akun meliputi email, nama, dan alamat Valid Valid Valid Valid KESIMPULAN DAN SARAN 1 Kesimpulan Dari hasil uji coba yang dilakukan, dapat disimpulkan bahwa aplikasi BREAD telah berhasil melewati serangkaian uji coba Black-bok testing dengan hasil Valid. Sistem berhasil menyimpan informasi pengguna, melakukan validasi akun dengan baik, memungkinkan pengguna untuk melakukan transaksi pembelian kue, mengelola daftar pesanan dengan efisien, serta memfasilitasi pembayaran menggunakan metode BOPIS. Dengan demikian, aplikasi BREAD siap untuk diimplementasikan lebih lanjut secar luas. Kinerja yang baik dalam pengujian fungsional mengindikasikan bahwa aplikasi ini memiliki potensi untuk meningkatkan efisiensi dan kenyamanan dalam proses pemesanan kue, serta memenuhi harapan pengguna dalam ha kecepatan dan kemudaha berbelanja. 2 Saran Kami memahami bahwa aplikasi yang sudah kami buat masih memiliki banyak hal yang bisa dikembangkan. Mulai dari pembayaran yang dapat dilakukan melalui aplikasi, sehinggal pelanggan tidak perlu membayar di kasih, melainkan langsung melalui sistem pembayaran yang terintegrasi. Selai itu, pengembangan fitur notifikasi secara real-time untuk memperbarui status pesanan secara langsung kepada pelanggan juga menjadi fitur yang dapat dikembangkan kedepannya. Jurnal Sistem Informasi dan Sains Teknologi Vol. 7 No. Februari 2025 ISSN 2684-8260 DAFTAR PUSTAKA