Prosedur Menjalankan Program Anggota kelompok: Boko Nugroho 1301023632 Widagdo Dipto Santiko 1301023664 Mohammad Rama Putra 1301023973 Judul : Perancangan Simulasi Try On Pada Website E-commerce Kacamata. Aplikasi Try On terpasang pada sebuah website sehingga pengguna harus menjalankannya melalui web browser. Pengguna dapat menggunakan web browser yang telah tersedia seperti Mozilla Firefox, Goggle Chrome, Internet Explorer, Opera, Safari, dan lain sebagainya. Demi kelancaran pemakaian aplikasi dan fitur-fitur pada website, sebaiknya pengguna menggunakan web browser versi terbaru. Hal ini dikarenakan aplikasi dan website yang dibuat ini menggunakan teknologi terbaru seperti HTML5, CSS3, dan jquery. Setelah membuka web browser, pengguna dapat memasukkan alamat URL untuk menuju website. Dikarenakan website ini belum memiliki domain dan hosting, maka website masih berjalan offline menggunakan localhost. Setelah local server dinyalakan melalui aplikasi XAMPP, masukkan URL localhost/glassify/home pada web browser. Gambar 1 Masukkan URL dari website.
Gambar 2 Halaman Home atau landing page dari website Untuk menjalankan aplikasi Try On, pilih salah satu produk pada halaman katalog atau melalui halaman pencarian.
Gambar 3 Halaman Catalog. Setelah halaman detail produk terbuka, klik pada tombol Try On untuk membuka pop up aplikasi Try On.
Gambar 4 Halaman Detail product.
Gambar 5 Halaman utama Try On. Halaman ini menampilkan bagian depan dari aplikasi Try On. Tampilan aplikasi berbentuk pop up yang muncul pada browser. Pengguna dapat memilih 3 (tiga) mode yang sudah disediakan yaitu Webcam, Upload, dan Our Models.
Gambar 6 Halaman Our Models. Halaman ini menampilkan beberapa foto yang telah disediakan untuk disimulasikan. Foto-foto tersebut dipilih bedasarkan struktur dan bentuk wajah seseorang. Foto yang pertama menunjukan bentuk wajah oval. Foto yang berada di sebelah kanannya menunjukan bentuk wajah bulat. Foto ketiga yang berada pada kiri bawah menunjukan bentuk wajah persegi. Foto yang terakhir menunjukan bentuk wajah segitiga. Gambar yang dipilih akan diproses dan hasilnya akan ditampilkan pada halaman hasil.
Gambar 7 Halaman hasil simulasi. Halaman ini menampilkan hasil dari simulasi Try On menggunakan our models mode. Gambar yang telah dipilih sebelumnya ditampilkan beserta kacamata sebagai gambar hasil. Pengguna dapat kembali memilih foto lainnya, memilih mode lainnya, atau keluar dari aplikasi.
Gambar 8 Halaman Try On webcam mode Halaman ini menampilkan layar webcam menggunakan javascript yang digunakan untuk mengambil foto pengguna. Setelah mendapat foto yang sesuai, pengguna dapat melanjutkan proses simulasi dengan menekan tombol Upload.
Gambar 9 Halaman hasil Try On webcam mode Halaman ini menampilkan hasil dari simulasi Try On menggunakan webcam mode. Gambar yang telah diambil sebelumnya menggunakan webcam akan ditampilkan sebagai hasil. Pengguna dapat kembali mengambil foto, memilih mode lainnya, atau keluar dari aplikasi.
Gambar 10 Halaman Try On real-time webcam mode Halaman ini menampilkan layar webcam menggunakan javascript yang digunakan diintegrasikan oleh kacamata. Kacamata tersebut akan mengikuti muka pengguna pada layar webcam. Tidak perlu melakukan capture dan upload pada halaman ini karena simulasi berjalan secara real-time.
Gambar 11 Halaman Try On upload mode Halaman ini plugin drag and drop untuk mengunggah foto. Jika browser tidak mendukung fitur tersebut, pengguna juga dapat mengunggah foto dengan cara manual yaitu menekan tombol Choose File.
Gambar 12 Halaman hasil Try On upload mode Halaman ini menampilkan hasil dari simulasi Try On menggunakan upload mode. Gambar yang telah diunggah sebelumnya ditampilkan beserta kacamata sebagai gambar hasil. Pengguna dapat kembali mengunggah foto, memilih mode lainnya, atau keluar dari aplikasi.