| Item | Value |
|---|---|
| Project | SwapSpace |
| Version | v1.0.0 |
| Type | Static Web Application |
| Platform | Browser |
| Storage | localStorage |
| Deployment | GitHub Pages |
| Repository | GitHub |
SwapSpace adalah aplikasi web statis yang mensimulasikan proses pertukaran (barter) barang secara online. Aplikasi ini dikembangkan sebagai proyek akhir mata kuliah Komputasi Awan dan Aplikasi Bergerak untuk menunjukkan implementasi pengembangan aplikasi web modern menggunakan HTML, CSS, dan JavaScript tanpa framework.
Melalui SwapSpace, pengguna dapat melihat katalog barang, melakukan login simulasi, mengunggah barang yang dimiliki, mengajukan pertukaran dengan barang lain, serta memantau status transaksi. Seluruh data simulasi disimpan secara lokal menggunakan localStorage, sehingga aplikasi dapat dijalankan tanpa backend maupun database eksternal.
Banyak barang yang masih layak digunakan tidak lagi dimanfaatkan oleh pemiliknya. Dalam kehidupan sehari-hari, proses pertukaran barang masih dilakukan secara langsung dan belum memiliki media sederhana yang dapat digunakan sebagai simulasi proses barter berbasis web.
Di sisi lain, pembelajaran pengembangan aplikasi web membutuhkan studi kasus yang mampu menggabungkan beberapa konsep, seperti pengelolaan data, antarmuka pengguna, navigasi antar halaman, penyimpanan data lokal, serta kolaborasi pengembangan menggunakan Git dan GitHub.
Berdasarkan kondisi tersebut, dikembangkan SwapSpace sebagai simulasi marketplace barter berbasis web yang sederhana, mudah dipahami, dan dapat digunakan sebagai media implementasi berbagai konsep pengembangan aplikasi modern.
Permasalahan yang menjadi dasar pengembangan SwapSpace adalah sebagai berikut.
- Bagaimana membangun simulasi marketplace barter berbasis web tanpa menggunakan backend?
- Bagaimana mengelola data pengguna, katalog barang, inventaris, dan transaksi menggunakan penyimpanan lokal pada browser?
- Bagaimana mengimplementasikan proses pengembangan perangkat lunak secara kolaboratif menggunakan GitHub?
- Bagaimana menghasilkan aplikasi web yang sederhana namun tetap memberikan pengalaman pengguna yang baik untuk kebutuhan demonstrasi akademik?
SwapSpace dikembangkan dengan tujuan untuk:
- Mengembangkan aplikasi web statis sebagai simulasi marketplace barter.
- Mengimplementasikan konsep pengembangan aplikasi menggunakan HTML, CSS, dan JavaScript.
- Menerapkan penyimpanan data lokal menggunakan localStorage.
- Menerapkan kolaborasi tim menggunakan Git dan GitHub selama proses pengembangan.
- Memberikan media demonstrasi proses barter digital dalam lingkungan akademik.
Pengguna dapat melihat daftar barang yang tersedia untuk ditukar. Setiap barang menampilkan informasi seperti nama, kategori, kondisi, pemilik, serta estimasi nilai barang. Fitur pencarian dan filter kategori membantu pengguna menemukan barang yang diinginkan dengan lebih cepat.
SwapSpace menyediakan sistem login simulasi menggunakan email, password, dan OTP lokal. Proses autentikasi ini dirancang sebagai demonstrasi alur login tanpa memerlukan backend maupun layanan autentikasi eksternal.
Pengguna dapat menambahkan barang miliknya sendiri ke dalam inventaris aplikasi. Data barang disimpan menggunakan localStorage sehingga tetap tersedia selama data browser tidak dihapus atau di-reset.
Pengguna dapat memilih barang yang ingin ditukar kemudian mengajukan proses pertukaran. Sistem akan menghitung simulasi nilai tukar, biaya layanan, serta ongkos pengiriman sehingga pengguna memperoleh gambaran sederhana mengenai proses barter digital.
Setelah proses pertukaran dilakukan, pengguna dapat melihat riwayat transaksi beserta statusnya melalui halaman Tracking. Halaman ini juga menyediakan tombol Reset Demo untuk mengembalikan seluruh data ke kondisi awal sehingga aplikasi dapat digunakan kembali saat presentasi.
| Technology | Purpose |
|---|---|
| HTML5 | Struktur halaman aplikasi |
| CSS3 | Mendesain antarmuka dan tata letak responsif |
| JavaScript (Vanilla) | Mengelola logika aplikasi dan interaksi pengguna |
| localStorage | Menyimpan data simulasi di browser |
| Git | Version Control |
| GitHub | Repository dan kolaborasi tim |
| GitHub Pages | Deployment aplikasi |
SwapSpace dikembangkan menggunakan HTML, CSS, dan JavaScript murni tanpa framework agar proses pembelajaran lebih berfokus pada pemahaman dasar pengembangan web, manipulasi DOM, manajemen data lokal, serta implementasi logika aplikasi secara langsung.
Pendekatan ini juga membuat aplikasi lebih ringan, mudah dipahami, dan mudah dijalankan tanpa proses build ataupun dependency tambahan.
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Windows
- Linux
- macOS
Internet hanya diperlukan saat membuka aplikasi melalui GitHub Pages. Seluruh data simulasi diproses secara lokal di browser.
- Clone repository.
git clone https://github.com/aldoprawiroa/Marketplace-Barter.git- Masuk ke folder project.
cd SwapSpace-
Jalankan menggunakan Live Server atau buka
index.html. -
Aplikasi siap digunakan.
GitHub Repository
https://github.com/aldoprawiroa/Marketplace-Barter
Live Website
- Login menggunakan akun demo.
- Jelajahi katalog barang.
- Cari barang menggunakan fitur pencarian.
- Filter berdasarkan kategori.
- Upload barang milik sendiri.
- Pilih barang yang ingin ditukar.
- Lakukan simulasi swap.
- Lihat status transaksi pada halaman Tracking.
- Gunakan Reset Demo sebelum presentasi berikutnya.
SwapSpace menggunakan arsitektur aplikasi web statis (Static Web Application). Seluruh logika aplikasi dijalankan di sisi klien (client-side) menggunakan JavaScript, sedangkan penyimpanan data dilakukan menggunakan localStorage.
GitHub Pages
│
▼
Static Website Files
(HTML + CSS + JavaScript)
│
▼
Web Browser
│
┌───────────────┼────────────────┐
▼ ▼ ▼
Catalog Module Upload Module Swap Module
│ │ │
└───────────────┴────────────────┘
│
▼
localStorage
| Module | Responsibility |
|---|---|
| catalog.js | Menampilkan katalog, pencarian, dan filter |
| account.js | Login simulasi dan profil pengguna |
| upload.js | Menambahkan barang |
| swap.js | Simulasi pertukaran barang |
| track.js | Tracking transaksi |
| utils.js | Utility functions |
| data.js | Seed data aplikasi |
User
│
▼
Input
│
▼
JavaScript Module
│
▼
Validation
│
▼
localStorage
│
▼
Update Interface
Pengembangan SwapSpace dilakukan melalui tahapan berikut.
- Requirement Analysis
- System Design
- Repository Initialization
- Development
- Testing
- Deployment
- Release v1.0.0
Requirement Analysis
│
▼
System Design
│
▼
Repository Setup
│
▼
Development
│
▼
Testing
│
▼
Deployment
│
▼
Release v1.0.0
SwapSpace dikembangkan secara kolaboratif menggunakan Git dan GitHub.
GitHub digunakan sebagai:
- Version Control
- Repository Management
- Collaboration
- Backup Source Code
- Release Management
- GitHub Pages Deployment
| No | Feature | Expected Result | Status |
|---|---|---|---|
| 1 | Login | Login berhasil | ✅ Pass |
| 2 | Product Catalog | Data tampil | ✅ Pass |
| 3 | Search | Barang ditemukan | ✅ Pass |
| 4 | Filter | Barang terfilter | ✅ Pass |
| 5 | Upload Item | Barang tersimpan | ✅ Pass |
| 6 | Swap | Swap berhasil | ✅ Pass |
| 7 | Tracking | Riwayat tampil | ✅ Pass |
| 8 | Reset Demo | Data kembali ke awal | ✅ Pass |
SwapSpace masih merupakan aplikasi simulasi sehingga memiliki beberapa keterbatasan.
- Belum menggunakan backend.
- Belum menggunakan database eksternal.
- Data hanya tersimpan di localStorage.
- Login masih berupa simulasi.
- Belum mendukung upload gambar ke cloud storage.
- Belum mendukung komunikasi real-time.
Pengembangan berikutnya yang dapat dilakukan antara lain:
- Backend menggunakan Node.js atau Backend-as-a-Service.
- Integrasi database seperti Supabase atau Firebase.
- Sistem autentikasi pengguna.
- Upload gambar ke cloud storage.
- Notifikasi real-time.
- Sistem chat antar pengguna.
- Dashboard administrator.
- Progressive Web App (PWA).
- Optimasi tampilan mobile.
| Name | Responsibility |
|---|---|
| Aldo | Catalog Module, Search Feature, Repository Management |
| Abdil | Login & Authentication Simulation |
| Ibrahim | Upload Module |
| Faiz | Swap Transaction Module |
| Indra | Tracking Module |
Repository ini menggunakan Git sebagai sistem version control.
Seluruh perubahan source code didokumentasikan melalui commit history sehingga perkembangan proyek dapat ditelusuri dengan mudah.
Aplikasi dipublikasikan menggunakan GitHub Pages sehingga dapat diakses langsung melalui browser.
This project was developed for academic purposes as part of the Final Project for the Cloud Computing and Mobile Application course.
Copyright © 2026 SwapSpace Team.