/
Halaman Pelacakan FO dengan Playback Fitur

Halaman Pelacakan FO dengan Playback Fitur

Owned by Muhammad Iqbal Syams, created
Last updated: Jun 13, 2024

Initiative owner

@Muhammad Iqbal Syams @Bintang Agung (Unlicensed)

UI/UX Designer

@M. Naufal Hizam

Commercial Stakeholder

Rendi Bahri

Target Release

 

Epic

https://mceasy.atlassian.net/browse/DEVPROJECT-4528

Updated Details

  • initial update document 10/6/24

  • latest update 13/6/24 - adjusted entry point from List FO

Status

draft

Approval or Reviewed

[Tech Lead] @William Eka Tjipta
[Quality Assurance] @Aldiza Muhammad Satria
[CPM Lead] @Rizka Nugroho

Related Docs

 Target Population

Pada Live View MEP, saat ini belum ada fitur pada pelacakan FO untuk bisa melakukan playback route yang mana playback route saat ini hanya ada pada Trip History. Sehingga menyulitkan user pada saat ingin melakukan traceback dan memutar playback dimana user harus beberapa kali klik dan memasukan tanggal serta waktu kapan FO ditugaskan. Dengan adanya pengembangan fitur playback pada pelacakan FO diharapkan dapat meningkatkan ketersediaan informasi secara real-time untuk mempercepat proses monitoring.

Alam Sampurna Makmur(ASM) ASM membutuhkan solusi yang dapat menghasilkan link pelacakan DO/FO secara otomatis melalui API. Hal ini akan memungkinkan integrasi antara sistem ERP dan sistem pelacakan McEasy.

 Business Value

ASM adalah exisiting client McEasy dgn total subs FMS 140 unit dimana total unit saat ini ada di sekitar 600 unit. Harapannya dari pengembangan ini dapat memberikan solusi dan benefit yang signifikan bagi ASM mengakses informasi pelacakan langsung dari satu platform, menghemat waktu dan upaya dalam pemantauan dan manajemen kendaraan sehingga sesuai rencana ASM untuk memindahkan semua unit nya ke McEasy.

  • Memfasilitasi akses cepat dan mudah ke fitur pelacakan DO dan FO

  • Memungkinkan informasi yang terperinci tentang manajemen armada dan riwayat perjalanan kendaraan untuk ditampilkan pada pelacakan DO ASM

  • Memperluas cakupan dan fungsi pelacakan dengan data yang lebih lengkap dan terintegrasi

 Proposed solution

As-Is :

User flow saat ini membatasi user untuk bisa langsung tracking FO dengan playback route, dimana artinya user perlu membukan Trip History dan memasukan tanggal dan waktu range dari FO tersebut, sehingga terlalu banyak step yang dilakukan sesuai dengan diagram flow dibawah ini

image-20240522-032652.png

To-Be :

Harapannya user dapat lebih cepat dan bisa direct ke relate FO saat melakukan playback route.

image-20240522-032749.png

 

hasil payload sama seperti live track fo

Deep link Track FO-20240531-090850.jpg

 

High Fidelity Mockup :

https://www.figma.com/design/POlF16qK6bNzfiQ1nTRhqJ/Pelacakan-Sementara?node-id=662-182952&t=L5YWlzFmjX6jNywy-1

image-20240613-032218.png
Halaman FO List

 

image-20240607-072458.png
Halaman Pelacakan Penugasan

 Milestones

image-20240610-031553.png

 Success Criteria

User dapat melakukan playback route pada pelacakan DO

Requirement Detail

User Story

Importance

Mockup

Details

User Story

Importance

Mockup

Details

1

Sebagai user, saya ingin mendapatkan akses cepat dari List FO ke Pelacakan Penugasan yaitu dari penambahan kolom di list FO

 

https://mceasy.atlassian.net/browse/DEVPROJECT-4530

MUST HAVE

 

 

image-20240613-032522.png

https://www.figma.com/proto/POlF16qK6bNzfiQ1nTRhqJ/Pelacakan-Sementara?node-id=132-134439&t=8jOrGlcgWX1qS5Cy-0&scaling=min-zoom&page-id=92%3A12948&starting-point-node-id=145%3A110487

 

Brief

Dari fitur ini, user dapat mengakses link pelacakan penugasan pada halaman List FO yang sudah tersedia pada kolom Pelacakan

User flow

Flow untuk mengakses halaman List Pelacakan FO :

  1. Login

  2. Click Modul Manajemen Pengiriman

  3. Click sub menu Penugasan

  4. Lihat kolom paling kanan Pelacakan

  5. Click icon Bagikan image-20240613-033444.png

Expected results

  1. Behavioral

    1. terdapat penambahan kolom baru dan bersifat freeze kolom dengan label Pelacakan dan isi kolom tsb adalah button Bagikan image-20240613-033611.png

    2. initially ketika FO draft dan scheduled button masih inactive (berwarna abu abu) dan secara dinamis button Bagikan akan menjadi active ketika mendapatkan trigger status FO : Started

    3. button Bagikan hanya aktif pada status Started - Ended dan akan selalu active meskipun FO sudah selesai.

 

  1. Detail Behavior pada Kolom Pelacakan

    1. Kolom pelacakan bersifat freeze kolom, sehingga user tidak perlu scroll kesamping melainkan akan ada selalu kolom Pelacakan dibagian kanan screen.

    2. Kolom Pelacakan informasinya berbentuk button Bagikan dimana saat button tersebut di click maka akan muncil pop up sebagai berikut :

      image-20240610-043353.png

      selalu ada 2 pilihan. Salin Tautan dan Lihat Pelacakan

      1. jika memilih Lihat Pelacakan, maka otomatis akan new Tab untuk membuka link tersebut

      2. jika memilih Salin Tautan, maka otomatis url tercopy untuk bisa di paste pasa platform lain serta muncul pop up hijau dipojok kanan bahwa URL berhasil di copy

        image-20240610-071311.png

Related module

Fleet Order Management

Translation Copy

Any bilingual docs

2

Sebagai user, saya ingin melakukan GET link pelacakan penugasan via API agar saya dapat mengintegrasikan dengan internal system saya.

 

https://mceasy.atlassian.net/browse/DEVPROJECT-4531

MUST HAVE

 

image-20240610-064807.png

 

Brief

Dari fitur ini, user dapat GET akses call API link halaman pelacakan penugasan dengan menginformasikan FO number

User flow

System ERP client → Request Public API GET track FO → Process in McEasy → Get Link Track FO

Expected results

  1. Menambahkan list pada dokumen public API McEasy TMS MEP https://docs.mceasy.com/api/ sesuai mockup yaitu didalam sub Fleet Task dengan list GET

  2. Diperlukan authentication agar customer hanya bisa GET FO Number miliknya sendiri

  3. Cukup dengan parameter validasi FO Number, user berhasil mendapatkan respon link pelacakan penugasan

  4. Detail API

    • Endpoint : /fleet-planning

    • Methode : GET

    • Contoh Payload :

      { "message": "Success", "data": { "LinkFO": https://vsms2-release.mceasy.com/fleet/live-track/966?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhY2Nlc3NUe } }

    • Detail Payload

      • FO-Number : String value dan disesuaikan dengan nomor FO yang ada pada customer tersebut

  5. Perlu ada error handling ketika status FO masih ‘draft’ atau belum Started atau Nomor FO tidak ditemukan, maka akan gagal Get Link FO

Related module

supporting document - McEasy - Public API Documentation

 

3

Sebagai user, saya ingin melihat halaman pelacakan penugasan dimana terdapat playback dan informasi detail terkait penugasan fleet tersebut serta dapat di akses secara publik.

 

 

https://mceasy.atlassian.net/browse/DEVPROJECT-4532

MUST HAVE

 

image-20240610-065639.png

https://www.figma.com/design/POlF16qK6bNzfiQ1nTRhqJ/Pelacakan-Sementara?node-id=662-182952&t=L5YWlzFmjX6jNywy-1

Brief

Dari fitur ini, user dapat membuka halaman pelacakan penugasan yang dimana isi didalamnya ada kanban detail informasi FO tersebut dan map yang berisikan informasi poly line dari rute yang sudah ditempuh dan bisa juga untuk dilakukan playback sama seperti di Riwayat Perjalanan

User flow

Cara untuk mengakses halaman pelacakan penugasan, yaitu :

  1. Login

  2. Click Modul Manajemen Pengiriman

  3. Click sub menu Penugasan

  4. Lihat kolom paling kanan Pelacakan

  5. Click icon Bagikan image-20240613-033444.png

  6. Muncul pop up dan klik Lihat Pelacakan atau Salin Tautan

  7. Direct link to new tab deeplink Pelacakan Penugasan

Expected results

  1. Behavioral

    1. Setelah di klik Lihat Pelacakan, maka akan selalu ke direct to new tab deeplink dan selanjutnya menampilkan halaman Pelacakan Penugasan tersebut.

    2. Untuk whitelabel validasi logo pojok kanan bawah diperlukan

      image-20240610-071636.png

  2. Informasi pada Kanban

    1. Info dibawah ini diambil dari status FO hingga selesai

      image-20240610-072104.png

    2. Info dibawah ini berdasarkan lokasi GPS real time saat FO masih berjalan, apabila FO sudah ended maka informasi ini dihilangkan

      image-20240610-072456.png

    3. Untuk Titik Awal dan Waktu Berangkat info ini bersifat statis yang didapat dari Detail FO saat FO mulai berjalan

      image-20240610-072748.png

    4. Untuk Titik Akhir dan Estimasi Selesai info ini bersifat dinamis yang didapat dari Detail FO dimana setelah FO Ended makan tulisan Estimasi Selesai berubah menjadi Waktu Selesai dengan data timestamp dari FO Ended

      image-20240610-073040.png

    5. Informasi pengemudi dapat di expand

      image-20240610-073235.png

      1. Nama pengemudi

      2. No telepon pengemudi

      3. Plat nomor

    6. Riwayat Penugasan : bisa di expand, mengikuti riwayat penugasan FO

      image-20240610-073400.png

    7. Daftar Pengiriman : bisa di expand, didapat dari list DO yang dibawa oleh FO tsb

      image-20240610-075520.png

      h. bisa untuk di-minimize kanban nya dengan button dibawah ini

      image-20240610-081916.png

  3. Informasi pada Peta

    1. Button Playback memungkinkan user untuk bisa mendapatkan animasi icon mobil yang bergerak mengikuti polyline dari Titik Awal atau dari titik mulai FO Started hingga posisi terkakhir GPS apabila FO belum ended, apabila FO sudah ended maka playback hanya bisa hingga lokasi terakhir pada saat FO Ended.

      image-20240610-085214.png

    2. Polyline yang tergenerate mengikut behavior pada fitur Riwayat Perjalanan namun perbedaan nya tidak ada rincian per trip nya sehingga ketika di play maka animasi bergerak dari Titik Awal ke Titik Selesai, apabila di elaborate seperti ini :

      1. Titik Geofence mengkuti dari titik yang ada di FO dan di DO untuk setiap pick up dan drop nya

        image-20240610-091618.png

         

      2. Apabila di klik polyline nya maka akan keluar pop up kecematan kendaraan pada saat itu

        image-20240610-091817.png

         

      3. Apabila ada engine off (fleet status Berhenti during pengiriman) maka akan ada button Pause yang mengindikasikan kendaraan tersebut sempat berhenti lalu berjalan kembali, dan apabila button itu di klik maka akan keluar pop up durasi berhentinya.

        image-20240610-092114.png

    3. Konten “Dipersembahkan Oleh” ketika whitelabel maka logo menggunakan logo utama

    4. Ada informasi terakhir update secara real time dari Pelacakan Penugasan ini, apabila FO ended “Terakhir Update” akan statis mengikut timestamp saat FO End.

Mobile Responsive

https://www.figma.com/design/POlF16qK6bNzfiQ1nTRhqJ/Pelacakan-Sementara?node-id=662-182952&t=L5YWlzFmjX6jNywy-1

Related module

Fleet Order Management

Translation Copy

Any bilingual docs

Related content