How to Build Simple Realtime Ticket queue with Action-cable

Action cable merupakan web scoket yang terintegrasi dengan rails. dengan action cable kita bisa menambahkan realtime features pada aplikasi kita. action-cable menggunakan pendekatan pub-sub pattern, mengacu pada pengirim pesan informasi (publisher), mengirim data ke penerima (without subscribers) tanpa menentukan secara spesifik siapa penerimanya. sebagai contoh kita akan membuat antrian tiket sederhana seperti yang bisa kita temukan di klinik rumah sakit atau pelayanan lainya

contoha plikasi antrian sederhana

pada aplikasi kita ada halaman utama

  1. halaman client (pada halaman ini user dapat membuat tiket)
  2. halaman public (pada halaman ini menampilkan urutan nomer antrian yang sedang di proses)
  3. halaman admin (pada halaman ini admin memproses tiket yang telah dibuat)

PREPERATION

  1. pertama tama buat rails project , karena menggunakan bootstrap tambahkan gem bootstrap ,lalu bundle. untuk integrasi bootstrap dapat baca disini https://github.com/twbs/bootstrap-rubygem
  2. Buat Tabel Ticket dengan scheme seperti dibawah ini
ActiveRecord::Schema.define(version: 2018_11_28_000449) do
create_table "tickets", force: :cascade do |t|
t.string "ticket_type"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
t.string "status"
t.string "text"
t.integer "ticket_order"
end
end

3. Kemudian Buat model dan controller

#command line
rails g model Ticket
rails g controller tickets

BACK-END

pertama kita siapkan 2 channel PrintTicketsChannel untuk listener ketika ada aksi cetak tiket dan ProcessTicketsChannel listener untuk memproses tiket

front-end pada halaman admin akan selalu listen jika ada broadcast massage dari “print_ticket” kita juga akan buat channel untuk “process ticket”

lalu untuk controller

saya menambahkan skip_before_action :verify_authenticity_token karena post berasal dari ajax sehingga mengabaikan csrf token. untuk penjelasan masing masing fungsi diatas

  1. Index : Menampilkan data ticket yang statusnya “ISSUED” diurutkan berdasarkan waktu dibuat
  2. Action : mengganti status dari “ISSUED” ke “PROCESS” pada fungsi ini juga melakukan broadcast ke channel ProcessTicketsChannel
  3. Create : untuk membuat tiket dan juga juga melakukan broadcast ke channel PrintTicketsChannel
  4. DisplayOnPublic : untuk menampilkan bahwa admin sekarang sedang melayani antrian nomor berapa
  5. DisplayOnClient : untuk menampilkan Tiket antrian yang mau diambil

lalu siapkan routing nya

FRONT-END

pertama-tama pada app/views/layouts/application.html.erb tambahkan script dibawah untuk meload action-cable

<script>
this.App = {};
App.cable = ActionCable.createConsumer("/cable");
</script>

buat view menampilkan halaman untuk membuat antrian tiket

Pada view ini kita mendefinisikan post request untuk membuat tiket, lalu selanjut nya view untuk halaman admin

view ini akan melisten broadcast dari “PrintTicketsChannel” dan menambahkan data dari broadcast tersebut ke tabel. dan juga ada fungsi untuk melakukan request memproses tiket. lalu selanjutnya view untuk menampilkan antrian yang sedang di proses

view ini akan melisten “ProcessTicketsChannel” dan mengganti nilai text h1 sesuai dengan data yang dibawa dari brodacast tersebut. and voila…..


dengan adanya action-cable mendevelop aplikasi realtime akan painless di ruby and rails. dan menghemat waktu kita. if you curious about the code. visit here https://github.com/rangga-rizky/antrian-action-cable-rails