Cover Location dan Fencing

Sistem Wahdah dibangunkan atas dasar hyper lokal. Harga kereta berbeza mengikut kawasan dan juga beberapa syarat berbeza mengikut kawasan.
Johor mungkin ada harga yang setting 1. Pay Later dibenarkan2. Tiada deposit atau harga deposit yang berbeza3. Hujung minggu harga berbeza
Dan pelbagai lagi ciri-ciri menggunakan konsep Cover Location. Namun salah satu feature yang kami belum enablekan adalah Fencing.
Sebelum ini apabila user cari di kawasan yang kami tidak serve, kereta masih keluar untuk di sewa. Feature fencing membolehkah kami kawal adakah kawasan tersebut adalah kawasan servis kami.


Contoh yang mudah.

  • Johor – JB – ya- Kota Tinggi, Pengerang, Batu Pahat – tidak- Muar – Melaka HQ yang cover
  • Kota Kinabalu- Perlu di pulang kereta di dalam kawasan dan tidak boleh dipulangkan di Sandakan.

Jadi Feature fencing membolehkan kami kawal kawasan servis kami. Jika anda lihat Food Panda, Grab menggunakan konsep ini bagi menandakan kawasan servis kami.

Kami menggunakan feature Google Map user editable shapes https://developers.google.com/maps/documentation/javascript/examples/user-editable-shapes untuk mendapatkan feature ini.

Map yang di edit kawasan untuk setiap cover location akan di simpan di dalam database menggunakan MySQL Spatial function https://dev.mysql.com/doc/refman/5.7/en/spatial-analysis-functions.html dan di simpan dalam format polygon.

Beberapa function MySQL seperti ST_Within https://dev.mysql.com/doc/refman/8.0/en/spatial-relation-functions-object-shapes.html#function_st-within digunakan untuk mencari adakah lokasi (longitude & latitude) yang dibekalkan oleh pengguna ada dalam kawasan fencing (polygon).

Kami baru lancarkan feature ini di wahdah.my / wahdah.sg

Siri bercakap dengan itik

Sebagai pengaturcara, biasa akan datang satu masa kita tepu, tiada idea dan menaip seperti di awang-awangan.

Tetapi kebelakangan ini aku tepu
Hampir beku ni buku lirik kosong nak berdebu
Hilang sengat hilang seri hilang seru hilang merdu
Mata tutup kepala tertelungkup
Pintu dengar ketuk oh anak ku menjenguk
Papa jangan kerut dahi
Tukar niat baca Bismillah mesti jadi

Malique / Cuba Lagi

Seperti lirik di atas, itulah perasaan apabila semua serba tidak kena.

Cara yang paling mudah untuk saya mengatasi masalah tepu adalah berdiskusi dengan pengaturcara/orang lain. Saya biasa akan berjumpa dengan mereka, apa visi/masalah yang akan diselesaikan dan tunjukkan langkah-langkah yang sudah dibuat. Kemungkinan mereka akan bertanya soalan balas, dan kita akan jawab. Proses ini akan membuka minda dan menyebabkan kebiasaannya kita dapat fokus kepada masalah yang dihadapi.

Konsep ini tidak semestinya berada disatu tempat, bersebelahan atau duduk. Telefon, berjogging adalah beberapa kondisi yang boleh dijalankan sambil bercakap. Manusia dilahirkan untuk berinteraksi dan apabila interaksi kebiasaanya akan membuka minda yang biasanya tepu.

Steve Jobs banyak menggunakan konsep berjalan sambil berdiskusi. Beliau akan berjalan dengan rakan sekerja atau staff dan akan berkongsi masalah dan cuba mencari solusi. Boleh rujuk artikel di sini . Ibu pejabat baharu Apple juga mempunya laluan besar untuk pekerja mereka boleh bercakap dan berjalan sambil berdiskusi.

Jika tiada orang yang anda rasa boleh berkongsi masalah, cuba gunakan konsep Rubber Duck Debugging. Konsep ini adalah meletakkan itik getah di sebelah meja, dan cuba bercakap masalah yang anda buntu. Dengan meluahkan perasaan, pengaturcara akan dapat masalah dari sudut yang berbeza. Objek percakapan ini tidak semestinya itik, mungkin anda boleh guna kucing , pokok bunga dan apa yang anda rasa sesuai.

Jadi, sudahkah anda bercakap dengan itik anda ?

Bermain dengan WordPress API

Saya telah bereksperimen untuk menjadikan WordPress sebagai headless CMS. Headless CMS dalam bahasa mudah adalah menggunakan WordPress sebagai backend dan semua output diterima menggunakan REST API interface.

Selepas pemasangan beberapa perkara yang perlu di ketahui.

REST API point WordPress, jika anda install di http://example.com

  • http://example.com/wp-json/ adalah point untuk access URL REST anda dan jika anda tidak enable permalink http://example.com/?rest_route=/

API untuk senarai pos blog dan blog detail tidak perlu authentication, tetapi untuk menghantar perlu authentication.

Proses authentication build in menggunakan Cookie ada, tetapi saya menggunakan JWT plugin .

Untuk menguji anda boleh menggunakan command prompt curl atau lebih mudah menggunakan Postman.

Authentication menggunakan JWT

Request senarai blog post

Menghantar blog post baharu

Menhantar post baharu, memerlukan JWT token disertakan dalam penghantaran

Banyak lagi endpoint yang boleh dicuba, tetapi ini adalah beberapa query asas REST untuk menggunakan WordPress ‘tanpa kepala’.

Anda boleh pergi ke dokumentasi REST WordPress di https://developer.wordpress.org/rest-api/ dan terus terang editor baharu WordPress 5.1 terasa lebih ‘bersih’ dan saya merancang untuk menggunakannya untuk projek baharu saya.

Perubahan terhadap harga

Pada permulaan aplikasi Wahdah, fokus banyak diberikan kepada kawasan Johor Bahru. Proses meletakkan harga di mulakan dengan senarai semua kenderaan. Kenderaan yang ada check ikon dan edit kalendar ikon (bewarna oren)

Selepas itu akan terpapar senarai kalendar untuk bulan itu.

Di bawah kalendar adalah senarai-senarai harga yang ada perubahan untuk lokasi tersebut. Sama ada

  1. Kenaikan harga
  2. Ada hari minimum untuk tempahan
  3. Kenderaan tidak terpapar
  4. Tidak boleh ambil @ pulang kereta pada hari tersebut
  5. Kuantiti kereta yang tersedia pada hari tersebut.

Untuk perubahan kriteria di atas, memerlukan pemilihan hari dan klik butang “manage”

Selepas itu perubahan boleh dilakukan untuk kenderaan tersebut. Proses ini perlu dilakukan untuk setiap kenderaan di lokasi tersebut, dan pada permulaan semasa kami hanya di Johor Bahru, proses ini tidak melecehkan.

Apabila kami berkembang ke 10 lagi tempat di seluruh Malaysia, proses ini boleh dikatakan tidak scalable dan akan terlepas pandang, jika ada kereta yang tidak ada stock, tetapi terlupa di blok.

Setiap feature di dalam aplikasi akan tiba saat perlu ditambah baik, walau proses yang sama, sesuatu fungsi itu akan bermasalah apabila syarikat berkembang. Pembaharuan perlu dilakukan seiring dengan perkembangan syarikat.

UI/UX yang baharu difikirkan untuk membolehkan perubahan harga lebih cepat dan kurang kesilap dilakukan oleh pihak operasi.

Antaramuka baharu

Proses antaramuka baharu lebih mudah.

  1. Pilih lokasi untuk melihat semua kenderaan yang boleh disewa.
  2. Terus edit harga dan kriteria lain dalam satu proses
  3. Semua data akan disimpan secara auto

Proses ini amat mudah, secara default akan ada surge (kenaikan harga) dan blok. Jika ingin edit kriteria yang lebih, klik anak panah v akan terus expand untuk lihat lebih lagi. Berbanding dengan proses lama, proses baharu menjimatkan banyak masa pihak operasi untuk melakukan perubahan harga. Kami akan senantiasa melakukan penambahbaikan ini secara berterusan untuk feature-feature lama yang tidak scalable.

Sebagai pengaturcara kita jangan berasa marah, jika berlaku kesilapan dan soalan berulang-ulang kali untuk satu proses. Ini mungkin datang dari kesusahan antaramuka yang susah difahami.

Filter Input Escape Output. Hello ?

Ada satu terma di dalam pengaturcaraan, Filter Input, Escape Output. Pos ini bukanlah tentang programming, tetapi tentang nombor telefon.

Wahdah merupakan satu sistem yang menerima tempahan bukan sahaja dari Malaysia, tetapi negara lain. Apabila tempahan diterima, kami akan menghantar notifikasi SMS melalui no telefon yang diterima. Kadang-kadang, nombor yang dihantar bukan dalam format negara yang betul. Contoh nombor telefon Malaysia dimulakan dengan +60 dan Singapura bermula dengan +65 . Jika pelanggan menulis 90849394 kami tidak tahu adakah 90 itu kod negara atau nombor tanpa kod negara. Ini adalah masalah bagi kami.

Masalah pertama yang perlu diselesaikan adalah dengan menggunakan form yang meletakkan kod negara dihadapan input nombor telefon.

Kami menggunakan plugin International Telephone Input untuk menjadikan form ini. Dengan cara ini, pelanggan sudah diberikan panduan, bagaimana untuk memasukkan format nombor telefon. Plugin ini sangat membantu dan saya sangat sarankan pengaturcara gunakan plugin ini jika anda mempunyai sistem yang mementingkan  input format telefon dengan betul.

Setelah kami selesaikan masalah input format nombor telefon, lebih mudah untuk kami hubungi pelanggan kami. Sekarang kami fokus kepada bagaimana memudahkah untuk kami menghubungi pelanggan pula.

Di web aplikasi kami, proses menghubungi pelanggan adalah dengan copy / paste dari aplikasi web dan paste di telefon, dan proses berbeza pula untuk Whatsapp pelanggan dan ia satu proses yang rumit bagi staff kami .

Di aplikasi Wahdah Partner (iOS / Android) kami terus buat satu link untuk partner kami klik link tersebut, dan terus mendail no telefon pelanggan. Walaupun ia nampak mudah, tetapi banyak aplikasi mobil yang tidak mempunyai features seperti ini (contoh Expedia Partner Central) .

Pada web aplikasi juga kami mempunyai link tersebut

Dan satu lagi kebiasaan adalah menghantar Whatsapp, dan di aplikasi web kami menambahkan link ke Whatsapp aplikasi, tanpa memerlukan partner / customer support menyimpan nombor untuk menghantar mesej.  Apabila klik icon whatsapp, terus akan membuka aplikasi Whatsapp di desktop atau pun mobile. 

Dan untuk menambah lagi kemudahan, kami terus sediakan template untuk seperti nama pelanggan, jenis kenderaan dan juga nombor booking untuk memudahkan pengenalan dihantar kepada pelanggan.

Walaupun penambah baikan ini sedikit, tetapi menambahkan efisyen kepada proses kerja kami. Ini adalah misi UX dalam mana-mana aplikasi yang kami bangunkan. Harap pos ini dapat memberikan idea bagaimana penambah baikan yang mudah ini adalah penting dalam pembangunan aplikasi.

Siri mari belajar – Notifikasi Mobile

Jika anda mempunyai telefon bimbit Android atau Apple, anda sudah terbiasa notifikasi email, Whatsapp atau Facebook yang biasa anda tunggu-tunggu. Kebiasaan ini hanya menjadi normal pada Apple iOS pada tahun 2009 dan Android pada tahun 2010.

Mobile notifikasi sebelum secara rasmi diwujudkan oleh Android dan Apple menggunakan konsep pull (tarik)

Aplikasi mobile : Ada tak notifikasi untuk aku ? 
Server : Takde lagi
Aplikasi mobile : Ada tak notifikasi untuk aku ?
Server: Ok ada, ni dia.

Konsep pull ini banyak menggunakan bateri kerana setiap saat, semua aplikasi akan bertanya kepada server masing-masing, menyebabkan banyak proses berlaku di belakang.

Mobile push notification menggunakan konsep push (tolak) dan

Aplikasi mobile  : Hi Notification service, kalau ada mesej kejut aku
Notification Service : Ok
Server: Hey Notification Service, ada mesej untuk Applikasi mobile A, tolong hantarkan
Notification Service: Hey Aplikasi mobile A, ada mesej.

Oleh kerana hanya ada satu connection ke Notification service, dikatakan lebih menjimatkan bateri.

Untuk iOS , servis notifikasi dipanggil APNS (Apple Notification Service) dan di Android di panggil FCM (Firebase Cloud Messaging) di mana sebelum nya di panggil GCM (Google Cloud Messaging)  dan sebelumnya dipanggil C2DM (Android Cloud to Device Messaging). Untuk artikel ini saya merujuk kepada APNS (iOS) dan FCM (Android) untuk sebarang rujukan notifikasi mobile.

Jenis notifikasi mobil

Ada 2 proses besar dalam notikasi mobile

  1. Mendaftar notifikasi mobile dari aplikasi
  2. Menghantar notifikasi mobile

Proses pertama adalah mendaftar push notifikasi dari mobile. Aplikasi perlu tahu

  • Device Token – Unik Token yang dari server notifikasi APNS @ FCM (akan berubah)
  • Device ID – Unik ID dari device (bergantung kepada programming language akan generate Unik ID berdasarkan IMEI atau gabungan beberapa parameter)
  • Sistem Operasi – Android atau iOS
  • Akaun – user mana yang mendaftar dalam aplikasi tersebut

Device Token akan diperolehi dari server notifikasi APNS @ FCM , ia akan berubah dengan bergantung kepada situasi seperti instalasi baharu aplikasi.

Ada beberapa senario yang perlu diselesaikan dengan data yang diberi di atas

  • Satu mobile mendaftar satu akaun
  • Satu mobile mendaftar 2 atau lebih akaun
  • 2 atau lebih mobile mendaftar satu akaun

Jadi dalam pangkalan data, perlu menyimpan data tersebut, supaya apabila notifikasi perlu dihantar kita tahu device mana yang perlu di hantar, sama ada Android atau iOS dan berapa device yang perlu terima notifikasi tersebut.

Semua ini boleh dihantar bila-bila apabila pengguna berinteraksi dengan aplikasi kita. Dalam aplikasi partner Wahdah, kami menghantar data ini ketika pengguna login masuk ke dalam aplikasi, jika device id sama, kami update, jika baharu, satu row baharu di tambah.

Contoh table di Wahdah

Penghantaran notifikasi mobile

Kebiasaannya  ada dua senario untuk menghantar ketika berlaku event seperti tempahan masuk, kereta tamat tempoh insurance atau mesej dari pelanggan. Satu lagi ketika kami menghantar promosi jika ada kempen seperti diskaun dan juga pengumuman produk baharu.

Apabila berlaku event seperti tempahan masuk notifikasi akan periksa akaun mana yang terlibat dan senaraikan semua device yang didaftar ke akaun tersebut dan hantar notifikasi ke device terlibat. Notifikasi biasanya akan dihantar sekali dengan proses email dan SMS. Untuk mengelakkan pelanggan merasa di spam dengan notifikasi,  mungkin boleh diperiksa, jika pelanggan sudah online di mobile, hanya mobile notifikasi dan email di hantar, dan jika tiada SMS dan email dihantar.

Selain dari itu, ada banyak servis-servis luar seperti OneSignal , Amazon SNS atau menggunakan FCM (Firebase Cloud Messaging)  sahaja untuk menghantar ke Android & APNS sekaligus.

Konsep notifikasi mobile adalah mudah, tetapi anda perlu faham bahawa banyak logik perlu dijana dari aplikasi anda. Server notifikasi hanya bertugas untuk menghantar notifikasi dan tidak lebih dari itu.

 

 

 

 

 

Dimulakan dengan design

Saya adalah orang yang visual, dan walau pun dalam diri adalah programmer, tetapi apabila saya memulakan proses berfikir, saya akan bermula dengan design.

Sebagai contoh saya ada melihat website travel ada mengeluarkan popup seperti 5 people where eyeing on this property

Saya berfikir bagaimana untuk menggunakan konsep yang sama di wahdah.my

1 . Mencari external solution

Saya ada melihat www.useproof.com untuk digunakan di website. Melihat footer verified by Proof menyebabkan saya kurang gembira mengiklan website mereka dan juga membayar 29 usd / bulan

2. Mencari solusi yang paling gempak

Menggunakan websocket dan HTML5 atau javascript notification yang lain merasakan feature ini mungkin belum perlu  satu solusi yang betul ‘high  end’.Jadi langkah pertama disebabkan malas berfikir, saya menggunakan notifyjs.com untuk menghasilkan apa output yang saya fikir menarik tanpa memikirkan apakah backend yang akan digunakan.

dengan code

boleh menghasilkan alert/ notification seperti

Tak menarik bukan ? Jadi terus job ini diserahkan kepada designer untuk dihasilkan seperti yang dikehendaki


Menarik bukan ? Tetapi ini adalah hasil dari NotifyJS dan designer kemaskini dan hantar notifikasi secara manual

Dengan klik butang, notify.js di atas, notifikasi akan keluar.  Sekarang dari segi etika data ini perlu betul dan bukan notifikasi palsu tanpa ada data di belakang. Jadi sama ada notifikasi realtime atau kita mengunakan AJAX secara berkala untuk menerima update terkini kepada pelanggan.

Infrastruktur notifikasi realtime adalah kompleks dan saya belum bersedia untuk melabur masa. Jadi sama ada menggunakan infrastruktur luar seperti Pusher https://pusher.com/tutorials/realtime-notifications  atau menggunakan AJAX secara berkala.

Keputusannya ?  saya akan eksperimen dengan AJAX secara berkala kerana beban trafik untuk halaman web Wahdah tidak seberat Lazada dan menggunakan AJAX adalah lebih logik kerana hasil yang sama dengan masa yang lebih sedikit 😀 .

Jadi tunggu sedikit masa lagi, anda akan lihat notifikasi ketika pelanggan cari kereta mereka di Wahdah.  Diharapkan bagaimana proses saya design feature baharu di Wahdah membantu anda sedikit sebanyak.

WaBook – WordPress Plugin untuk WAP

Apabila kami memulakan program Wahdah Associates Partner (WAP), kami ingin memberikan sokongan dari hujung rambut hingga hujung kaki untuk pengusaha kereta dan juga pemilik kenderaan yang ingin menguruskan kereta mereka. Jadi kami bangunkan sistem pengurusan akaun dan kenderaan kereta sewa di https://partners.wahdah.my

Sistem Pengurusan Akaun & Kenderaan Kereta Sewa

Selepas itu mereka ingin website mereka boleh digabungkan dengan sistem WAP. Kami bangunkan API untuk pengaturcara boleh cantumkan halaman web mereka dengan sistem kami https://docs.wahdah.my/ .

Dokumentasi API untuk sistem WAP

Ia agak teknikal bagi pengusaha kereta sewa dan tiada hubungan dengan pengaturcara menyukarkan integrasi halaman web mereka. Jadi kami pergi balik ke papan lukisan apakah yang diperlukan untuk mereka. Kebanyakan mereka menggunakan WordPress sebagai halaman web mereka. Jadi kami merasakan plugin WordPress adalah salah satu opsyen yang mudah untuk integrasi.

Plugin WordPress untuk WAP

Kami menggunakan WordPress Plugin Boilerplate untuk menghasilkan plugin ini yang dinamakan WaBook – https://github.com/wahdah/wabook . Plugin ini masih dalam fasa beta dan boleh digunakan oleh partner-partner kami. Kepada pembangun dan penggemar WordPress, ini peluang anda untuk kerjasa dengan Wahdah dan 100++ partner kami untuk bangunkan halaman web mereka .

Jadi apa lagi ? Jom cuba plugin ini dan berikan maklum balas kepada kami untuk tambah baik.

Apa pula selepas ini ? Penambahbaikan slip keluar

Sebenarnya apabila membangunkan perisian. Tiada istilah siap, sentiasa ada yang boleh ditambah baik. Setelah kami lancarkan halaman web baru untuk Wahdah  , sedikit demi sedikit UI/UX untuk pelanggan pula perlu ditambah baik.

Biasanya invois atau dalam kes kami (checkout slip) yang diberikan kepada pelanggan untuk setiap transaksi menjadi keutamaan rendah untuk pengatucara 😅. 

Dari maklum balas pihak operasi, kami nampak banyak masalah apabila dokumen ini digunakan apabila pelanggan yang ingin mengambil kereta. Kami rasa perlu untuk menambah baik dokumen ini.

Di bawah ini disertakan cakupan skrin untuk sebelum dan selepas. Anda rasa ?

Desain Sebelum

Desain selepas

Evolusi Content Management untuk Wahdah

Halaman web Wahdah.my telah berlaku beberapa evolusi sehingga terhasilnya #newWahdah sekarang . Kami menggunakan Drupal (versi 7) untuk kandungan website muka hadapan bagi pelanggan dan subdomain untuk aplikasi tempahan (menggunakan CakePHP) .

Versi pertama halaman web Wahdah

Pada versi pertama, kami menggunakan iframe untuk mengeluarkan form tempahan kereta. Cukup mudah tetapi banyak kelemahan dari segi SEO dan responsive mobile. Ini kami warisi dari pembangun terdahulu jadi kami rasa kami boleh tambah baik lagi versi asal ini.

Versi kedua halaman web Wahdah

Pada versi kedua, kami menggunakan Drupal dan module custom kami sendiri. Kami rasa ini adalah jalan yang terbaik kerana kami boleh mengawal apa yang dipaparkan di Drupal.  Beberapa kebaikan adalah Drupal banyak module yang boleh digunakan untuk penambah fungsi-fungsi tambahan halaman web kami.

Keburukan yang kami rasa adalah kesukaran untuk membangunkan module dalam Drupal (mungkin kelemahan sendiri) dan satu lagi kami aktif membangunkan aplikasi tempahan sehingga kadang-kadang kami terlupa update form tempahan di module Drupal.

Kami perlu mengawal ‘pengalaman’ untuk pelanggan kami apabila membuat tempahan dan kami rasa dengan Drupal ia menghalang apa yang kami ingin beri kepada pelanggan.

Ada beberapa pilihan yang ada.

  • Buat module CMS di CakePHP dan kawal segalanya di CakePHP

Cara ini bagus tetapi akan menambah beban pengaturcara kami untuk membangunkan modul yang tidak ada kena mengena dengan aplikasi utama. CMS dari segi teori nampak mudah, tetapi akan menjadi semakin sukar dengan feature yang bertambah. Ini adalah satu beban yang kami tidak mahu untuk tambah kepada pengaturcara kami. Jadi kami memilih cara kedua iaitu

  • Jadikan Drupal RESTful mengguna module Services dan tarik kandungan ke aplikasi CakePHP Wahdah

Cara ini menyebabkan beban pengaturcara lebih ringan kerana fokus untuk pemaparan kandungan di aplikasi dan semua kerja berat proses format kandungan masih dijalankan oleh Drupal.

Halaman web baharu Wahdah

Jadi apa yang anda lihat di https://www.wahdah.my sekarang adalah aplikasi CakePHP semata-mata dan semua content seperti

Blog – https://www.wahdah.my/blog
Berita – https://www.wahdah.my/news
Halaman statik – https://www.wahdah.my/the-team

Ini semua ditarik dari Drupal untuk halaman web baharu kami.  Kami gembira dengan keputusan yang dibuat. Segala ‘pengalaman’ yang diberikan kepada pelanggan lebih mudah dikawal kerana kami yang bangunkan ‘kedai’ ini  dari awal. Wahdah akan sentiasa berevolusi dan kami harap perkongsian ini memberikan menafaat kepada semua 💪 .