Skip to content
Snippets Groups Projects

Kompas-13513085-Muhammad Farhan Kemal

Compare and Show latest version
1 file
+ 131
114
Preferences
Compare changes
+ 131
114
# Tugas 2 IF3110 Pengembangan Aplikasi Berbasis Web
# Tugas 3 IF3110 Pengembangan Aplikasi Berbasis Web
Melakukan *upgrade* Website ojek online sederhana pada Tugas 1 dengan mengaplikasikan **arsitektur web service REST dan SOAP**.
Melakukan upgrade Website ojek online sederhana pada Tugas 2 dengan mengaplikasikan ***cloud service* (Firebase Cloud Messaging) dan *framework* MEAN stack**.
## Tujuan Pembuatan Tugas
### Tujuan Pembuatan Tugas
* Memahami dan mengerti MEAN stack (Mongo, Express, Angular, dan Node)
* Memahamai dan mengerti *cloud service* Firebase Cloud Messaging (FCM) dan kegunaannya.
* Memahami dan mengerti web security terkait access token dan HTTP Headers.
Diharapkan dengan tugas ini kami dapat memahami:
* Produce dan Consume REST API
* Mengimplementasikan service Single Sign-On (SSO) sederhana
* Produce dan Consume Web Services dengan protokol SOAP
* Membuat web application dengan menggunakan JSP yang akan memanggil web services dengan SOAP (dengan JAX-WS) dan REST (dengan Servlet).
### Petunjuk Pengerjaan
## Anggota Tim
* 13515019 - Candra Hesen Parera
* 13515049 - Jauhar Arifin
* 13515142 - Pratamamia Agung Prihatmaja
1. 13513085 - Muhammad Farhan Kemal
2. 13515019 - Candra Hesen Parera
3. 13515037 - Muhamad Irfan Maulana
4. 13515130 - Adya Naufal Fikri
## Petunjuk Pengerjaan
1. Buatlah organisasi pada gitlab dengan format "IF3110-2017-KXX-nama kelompok", dengan XX adalah nomor kelas.
2. Tambahkan anggota tim pada organisasi anda.
3. Fork pada repository ini dengan organisasi yang telah dibuat.
4. Ubah hak akses repository hasil Fork anda menjadi **private**.
5. [DELIVERABLE] Buat tugas sesuai spesifikasi dan silakan commit pada repository anda (hasil fork). Lakukan berberapa commit dengan pesan yang bermakna, contoh: `add register form`, `fix logout bug`, jangan seperti `final`, `benerin dikit`. Disarankan untuk tidak melakukan commit dengan perubahan yang besar karena akan mempengaruhi penilaian (contoh: hanya melakukan satu commit kemudian dikumpulkan). Sebaiknya commit dilakukan setiap ada penambahan fitur. **Commit dari setiap anggota tim akan mempengaruhi penilaian individu.** Jadi, setiap anggota tim harus melakukan sejumlah commit yang berpengaruh terhadap proses pembuatan aplikasi.
6. Hapus bagian yang tidak perlu dari *readme* ini.
7. [DELIVERABLE] Berikan penjelasan mengenai hal di bawah ini pada bagian **Penjelasan** dari *readme* repository git Anda:
- Basis data dari sistem yang Anda buat.
- Konsep *shared session* dengan menggunakan REST.
- Pembangkitan token dan expire time pada sistem yang anda buat.
- Kelebihan dan kelemahan dari arsitektur aplikasi tugas ini, dibandingkan dengan aplikasi monolitik (login, CRUD DB, dll jadi dalam satu aplikasi)
8. Pada *readme* terdapat penjelasan mengenai pembagian tugas masing-masing anggota (lihat formatnya pada bagian **pembagian tugas**).
9. Merge request dari repository anda ke repository ini dengan format **Nama kelompok** - **NIM terkecil** - **Nama Lengkap dengan NIM terkecil** sebelum **8 November 2017 23.59**.
![](img/arsitektur_umum.png)
### Arsitektur Umum Server
![Gambar Arsitektur Umum](arsitektur_umum.png)
### Arsitektur Umum
Tugas 3 ini terdiri dari komponen Tugas 2 dan tambahan yang harus dibuat:
* `Pemanfaatan FCM`: Pengiriman pesan dari pelanggan ke driver atau sebaliknya dengan menggunakan layanan Firebase Cloud Messaging (FCM).
* `Implementasi MEAN stack`: Membuat REST service untuk keperluan layanan chat memanfaatkan FCM menggunakan Node, Express dan Mongo, serta membuat halaman chat yang menggunakan Angular.
### Deskripsi Tugas
Merubah sedikit fungsionalitas order yang sudah ada dan menambah fungsionalitas chat pada aplikasi yang telah dibuat pada tugas 2. Aplikasi akan menggunakan MEAN stack untuk halaman chat dan REST service, serta menggunakan layanan cloud Firebase Cloud Messaging sebagai media penyampaian pesan. Selain itu, mengimplementasikan beberapa fitur security pada aplikasi. Spesifikasi untuk tugas ini adalah sebagai berikut:
1. Halaman Order akan bergantung pada status pengguna, apakah driver atau bukan.
2. Bila status pengguna merupakan driver maka pada halaman order akan ditampilkan fitur finding order dimana akan membuat driver visible ketika user ingin melakukan order pada halaman select driver. Apabila driver tidak melakukan finding order, maka driver tidak akan ditampilkan pada halaman select driver ketika pengguna non driver melakukan order.
3. Pengguna dapat saling bertukar pesan dengan driver secara realtime di halaman order chat driver. Fitur ini harus diimplementasikan dengan MEAN stack, di mana fitur halaman chat harus diimplementasikan dengan Angular dan fitur REST service diimplementasikan menggunakan Node, Express, dan Mongo.
4. REST service yang akan menghubungkan client dan Firebase Cloud Messaging.
5. Pengguna harus login terlebih dahulu sebelum dapat melakukan chat. Cari cara untuk sharing session antara JSP dan MEAN. Sebagai contoh, dapat menggunakan cookie yang dapat diakses oleh keduanya.
6. Pada halaman order select driver, aplikasi hanya menampilkan driver yang **sesuai requirement** saja (lihat poin 7). Ketika nama driver dipilih, maka akan muncul kotak chat antar pengguna non driver dan driver pada tab chat driver di halaman order.
7. Requirement yang dimaksud ialah driver memiliki preferred location yang dituju pengguna, online, **sedang melakukan finding order**, dan tidak sedang mendapat order.
8. Pengguna dengan IP address yang berbeda tidak dapat menggunakan access token yang sama.
9. Pengguna dengan user-agent yang berbeda tidak dapat menggunakan access token yang sama. Dalam hal ini, user-agent yang dimaksud adalah web browser yang digunakan.
10. Komponen yang harus digunakan pada AngularJS adalah:
* Data binding (ng-model directives)
* Controllers (ng-controllers)
* ng-repeat, untuk menampilkan list
* $http untuk AJAX request
* $scope untuk komunikasi data antara controller dengan view.
* ng-show dan ng-hide untuk menampilkan/menyembunyikan elemen
11. Tidak perlu memperhatikan aspek keamanan dan etika dalam penyimpanan data.
### Rincian REST Service
1. REST service untuk keperluan chatting **wajib** diimplementasikan dengan **Node dan Express**.
2. REST service menangani hal-hal sebagai berikut.
* Memberikan daftar driver yang sesuai requirement (sesuai deskripsi tugas nomor 7)
* Menyimpan identitas (token FCM) dari masing-masing pengguna yang sedang online
* Menerima *request* dari user A untuk chat ke user B, lalu membuat *request* ke FCM untuk pengiriman pesan ke token FCM user B.
* Menyimpan ke basis data history chat dari seorang pemesan dan seorang driver. Misalkan A pernah memesan driver B. Jika suatu saat A akan memesan lagi ke driver B, maka kotak chat menampilkan chat yang dilakukan pada pemesanan sebelumnya.
3. Untuk penyimpanan history chat, basis data yang digunakan **wajib Mongo**. Tidak diperkenankan menggunakan basis data yang lain, termasuk layanan Firebase Database.
### Halaman Tambahan
1. Halaman Order pada pengguna non driver, terdapat tambahan chat driver pada tahap ketiga
2. Halaman Order pada pengguna driver
### Rincian Arsitektur Aplikasi Chat
![](img/mekanisme_chat.png)
Proses untuk komunikasi antar client adalah sebagai berikut:
1. Ketika client dijalankan, client akan meminta token (token yang berbeda dengan token untuk authentication dari Identity Service) dari FCM.
2. FCM mengirimkan token ke client.
3. Setelah token diterima, client akan mengirim token serta identitas dari client (nama/email) ke chat server. Identitas client digunakan untuk mengidentifikasi kepemilikan token.
4. Untuk mengirim pesan kepada client lain, client pertama mengirimkan pesan yang berisi identitas pengirim, identitas tujuan, dan isi pesan ke chat server.
5. Chat server kemudian akan mencari token yang terkait dengan identitas tujuan.
6. Chat server lalu mengirim request ke FCM untuk mengirimkan pesan kepada client dangan token yang terkait.
7. FCM mengirimkan pesan kepada tujuan.
### Asumsi yang Digunakan
1. Pada tugas ini, diasumsikan kedua client sedang aktif. Aplikasi hanya akan dijalankan pada localhost, sehingga memerlukan 2 browser yang berbeda untuk mensimulasikan client yang berbeda. Aplikasi berjalan pada localhost karena browser mensyaratkan sumber aplikasi harus aman untuk operasi-operasi yang digunakan pada aplikasi ini. Localhost termasuk lokasi yang diperbolehkan oleh browser.
2. Kedua browser tersebut harus dalam keadaan aktif dan terfokus, serta tidak terminimize. Hal ini karena cara kerja service worker, yang hanya dapat memberikan notifikasi, dan tidak dapat melakukan manipulasi halaman apabila web browser tidak sedang terfokus ketika pesan datang.
Selain itu, seorang pengguna hanya dapat chatting dengan 1 pengguna lain dalam 1 waktu, sehingga hanya 1 kotak chat yang ditampilkan.
3. Driver hanya dapat menerima satu order dari satu user pada satu waktu.
### Skenario Chatting
Skenario penggunaan aplikasi adalah sebagai berikut.
Misal pengguna A adalah non driver, dan pengguna B adalah driver.
1. A dan B login untuk masuk ke aplikasi.
2. B melakukan finding order pada halaman Order. A memasuki halaman Order.
3. A melakukan order dan memilih driver yang sedang online dan tersedia (driver B).
4. Kotak chat akan muncul di halaman Chat Driver pada layar A. Kotak chat juga akan muncul pada halaman Order pada B.
5. A mengetikkan pesan, dan menekan tombol kirim.
6. Pesan dikirim ke B melalui chat server dan FCM.
7. Ketika pesan sudah diterima di B, kotak chat pada layar B akan muncul.
8. B dapat membalas chat dari A.
9. Apabila A sudah melakukan submit rating maka chatbox pada B akan hilang dan kembali menampilkan halaman finding order.
### Skenario Umum Program
Skenario program selain chat, pada umumnya sama seperti tugas 2. Akan tetapi, metode pengecekan token pada identity service sedikit berbeda.
Identity Service harus mengecek:
1. Apakah access token ini sudah kadaluarsa?
2. Apakah access token ini digunakan pada browser yang berbeda?
3. Apakah access token ini digunakan dengan koneksi internet yang berbeda?
Jika jawaban salah satu pertanyaan tersebut adalah "ya", maka identity service akan memberikan respon error dan detail errornya.
### Mekanisme pembuatan token
Token harus mempunyai informasi terkait browser (user agent) dan IP address dari pengguna. Identity service harus dapat mengekstrak informasi tersebut. Sebagai contoh, dapat melakukan (tidak harus) konstruksi token dengan `format:some_random_string#user_agent#ip_address`. Jika pada tugas 2 token adalah `abcdefgh`, maka pada tugas 3 token anda adalah `abcdefgh#Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36#167.205.22.104`.
Token tidak perlu dienkripsi-dekripsi (for simplicity)
### Tampilan Program
Halaman Order pada Driver
![](img/driver_halaman_order.png)
Halaman Order pada Driver Ketika Melakukan Finding Order
![](img/driver_finding_order.png)
Halaman Order pada Driver Ketika Mendapat Order
![](img/driver_got_order.png)
Halaman Order pada Pengguna, Chat Driver
![](img/pengguna_chat_driver.png)
Note: chat yang dikirim oleh user yang sedang login berada disisi sebelah kanan dan lawan chatnya lain di sisi sebelah kirim. Isi chat juga ditampilkan sesuai urutan waktu diterima (paling atas adalah chat paling lama dan makin ke bawah chat makin baru).
### Referensi Terkait
Berikut adalah referensi terkait tugas ini:
1. https://firebase.google.com/docs/web/setup
2. https://firebase.google.com/docs/cloud-messaging/js/client
3. https://docs.angularjs.org/api
Pada tugas besar dua ini, kami diminta untuk membuat ojek online sederhana seperti tugas 1. Beberapa kebutuhan fungsional dan non-fungsional tugas yang harus kami buat adalah sebagai berikut.
1. Halaman website yang memiliki tampilan serupa dengan tugas 1.
2. Ojek Online web service dengan fungsi-fungsi sesuai kebutuhan sistem dalam mengakses data (kecuali login, register, dan logout).
3. Identity service yang menangani manajemen *account* seperti login dan register, serta validasi access token.
4. Fitur validasi email dan username pada halaman register tidak perlu diimplementasikan dengan menggunakan AJAX.
5. Tidak perlu melakukan validasi javascript.
6. Tampilan pada tugas ini **tidak akan dinilai**. Sangat disarankan untuk menggunakan asset dan tampilan dari tugas sebelumnya. Boleh menggunakan CSS framework seperti Bootstrap atau javascript library seperti jQuery.
7. Tidak perlu memperhatikan aspek keamanan dan etika penyimpanan data.
### Halaman Tampilan
#### Login
![](img/login.PNG)
#### Register
![](img/register.PNG)
#### Profile
![](img/profile.PNG)
#### Edit Profile
![](img/edit-profile.PNG)
#### Edit Preferred Location
![](img/edit-preferred-location.PNG)
#### Order Ojek
![](img/order-ojek.PNG)
#### Select Driver
![](img/select-driver.PNG)
#### Complete Order
![](img/complete-order.PNG)
#### History
![](img/history-penumpang.PNG)
### Pembagian Tugas
![](img/history-driver.PNG)
Chat App Front-end :
1. Fungsionalitas A : 135140XX
2. Fungsionalitas B : 135140XX
### Penjelasan
* `Database`: Kami memisahkan basis data pada tugas 1 menjadi basis data khusus manajemen *account* (menyimpan username, password, dkk) dan basis data ojek online tanpa manajemen *account*. Basis data *account* digunakan secara khusus oleh Identity Service. **Ojek Online Web Service tidak boleh secara langsung mengakses basis data account untuk melakukan validasi token** (harus melalui Identity Service). Pada basis data account memuat tabel account (id, name, username, email, password, phone_number, driver, image) dan tabel token (id, access_token, expiry_time). Basis data ojek online memuat tabel transaction (id, id_user, id_driver, rating, comment, date, picking_point, destination), tabel drivers (id, name, total_rating, total_passangers), dan tabel driver_location (id, location).
* `Konsep shared session dengan menggunakan REST`: Setiap user akan melakukan aktivitas atau membuka page baru token akan dikirim ke REST untuk mengkonfirmasi apakah token tersebut valid dan milik user yang mana. Lalu, REST akan memberikan response berupa json, yang menunjukan apakah user tersebut berhak atau tidak untuk mengakses aplikasi. Jika token invalid atau expired, maka user akan diredirect ke halaman lain yang menunjukan bahwa user harus login lagi.
* `Pembangkitan token dan expire time pada sistem yang anda buat` : Pembangkitan token dilakukan ketika user melakukan register atau login. Ketika register atau login maka user akan diberikan token baru dan expire time +30 menit dari sejak dia register atau login, lalu akan disimpan pada tabel token pada database di IdentityService.
* `Kelebihan dan kekurangan dari arsitektur aplikasi ini` : Kelebihan dari arsitektur ini adalah lebih modular sehingga satu layanan bisa digunakan oleh beberapa client, misal identity service bisa digunakan oleh aplikasi lain. Sedangkan kekurangannya karena aplikasi ini terbagi-bagi databasenya, maka untuk melakukan operasi yang mungkin harusnya mudah, menjadi lebih rumit karena harus mendapatkan data dari berbagai service yang berbeda. Lalu untuk pengintegrasiannya juga lebih sulit dibandingkan aplikasi monolitik biasa.
Chat REST Service:
1. Fungsionalitas C : 135140XX
2. Fungsionalitas D : 135140XX
### Pembagian Tugas
Fitur security (IP, User-agent) :
1. Fungsionalitas E : 135140XX
2. Fungsionalitas F : 135140XX
REST :
1. Generate token : 13513085
2. Validasi: 13515037
3. Login : 13515037
4. Register : 13515130
5. Logout : 13515019
6. Database : 13515019
7. User Profile : 13515130
8. User ID : 13515130
SOAP :
1. Ojek Online Service : 13513085, 13515019, 13515037, 13515130
2. REST API Consumer : 13515130
3. Model Database (Driver, Transaction, User, Timestamp) : 13515019
Web app (JSP) :
1. Halaman Login : 13515130
2. Halaman Register : 13515130
3. Halaman Profil : 13515130
4. Halaman Edit Profil : 13513085
5. Halaman Edit Preferred Location : 13513085
6. Halaman Order Ojek : 13515037
7. Halaman Select Driver : 13515037
8. Halaman Complete Order : 13515037
9. Halaman History - My Previous Order : 13515019
10. Halaman History - Driver History : 13515019
## About
Kelompok Kompas IF3110 2017
Kelompok BCNF IF3110 2017
Farhan | Hesen | Irfan | Adya
Hesen | Jauhar | Agung
Dosen : Yudistira Dwi Wardhana | Riza Satria Perdana | Muhammad Zuhri Catur Candra
\ No newline at end of file
Dosen : Yudistira Dwi Wardhana | Riza Satria Perdana | Muhammad Zuhri Catur Candra