Membangun Serverless Clickstream Tracker Dengan API Gateway, AWS Lambda dan AWS SQS

Ridwan Fajar
Serverless Indonesia
8 min readApr 27, 2018
Tebing Keraton at Grand Forest Ir. H. Juanda, Cimenyan, Bandung Regency, West Java, Indonesia

Pendahuluan

Apa itu clickstream tracker? sederhananya adalah sebuah sistem yang mampu merekam data klik dari berbagai click event yang dihasilkan oleh pengunjung suatu website terhadap bagian tertentu dari website tersebut.

Biasanya yang direkam adalah titik koordinat (x, y), URL dari halaman yang dikunjungi, dan elemen yang diklik. Namun itu hanya beberapa bagian umum yang dicatat oleh clickstream tracker dan kita bisa saja menambahkan informasi lain sesuai dengan tujuan yang ingin kita atau perusahaan capai.

Pada dasarnya membangun clickstream tracker tidaklah mudah, ada berbagai hal yang harus dilibatkan. Mulai dari dashboard, halaman manajemen untuk client yang ingin mengelola data kliknya, hingga bagaimana backend yang mampu menampung kedua kebutuhan utama tersebut.

Namun pada tulisan ini, kita hanya akan fokus bagaimana membuat sebuah clickstream tracker hanya dari sisi backend-nya saja tanpa harus melibatkan dashboard dan application management. Kita akan fokus juga tanpa melibatkan autentikasi dan autorisasi.

Sistem ini akan menyimpan beberapa data dasar dalam clickstream tracker seperti:

  • koordinat x
  • koordinat y
  • source URL
  • userId
  • applicationId
  • createdAt

Selain itu karena kita sedang membahas membangun suatu sistem dengan teknologi serverless maka kita akan coba menggunakan beberapa teknologi yang disediakan oleh AWS Free Tier seperti:

  • API Gateway
  • AWS Lambda
  • AWS SQS

Sedangkan untuk storage dan consumer-nya akan kita gunakan perkakas berikut ini:

  • Node.js + AWS SDK
  • Elasticsearch

Awalnya saya ingin membuat consumer untuk SQS tersebut berada di EC2, namun sepertinya tidak terlalu perlu, dan juga untuk Elasticsearch tidak perlu juga, karena kita dapat menggunakan consumer dan Elasticsearch di mesin lokal kita (localhost).

Apa saja yang dibutuhkan?

Untuk memahami tulisan ini, kalian hanya memerlukan beberapa alat berikut ini:

  • AWS Free Tier account
  • AWS SDK untuk Node.js
  • Node.js
  • Elasticsearch
  • Text Editor
  • Java 8

Mari kita mulai

1. Instalasi

Berhubung saya menggunakan Mac OSX, maka cara instalasi yang akan disebutkan tentu saja menggunakan Brew. Untuk kamu yang menggunakan sistem operasi lain, silahkan cari saja penjelasan cara instalasinya di website lain.

Berikut adalah cara instalasi nodejs di OSX:

$ brew install node

Berikut adalah cara instalasi python di OSX:

$ brew install python

Berikut adalah cara instalasi aws cli di OSX:

$ pip install awscli

Berikut adalah cara instalasi elasticsearch di OSX:

$ brew install elasticsearch

2. Membuat Index di Elasticsearch

Cara menjalankan Elasticsearch di localhost:

$ elasticsearch

Bila intalasi yang dilakukan tidak ada masala, maka pada terminal atau konsol Anda akan muncul tampilan seperti berikut:

Elasticsearch dijalankan di localhost

Sekarang Elasticsearch di localhost Anda sudah siap digunakan oleh aplikasi Anda. Bila ingin memastikan Elasticsearch sudah jalan atau tidak, silahkan akses http://localhost:9200 di web browser Anda.

Setelah Elasticsearch berhasil dijalankan, silahkan buat index yang diperlukan untuk menyimpan data clickstream dengan struktur berikut:

// PUT http://localhost:9200/mylog/{ "mappings": {
"clickstreamLog":{
"properties":{
"mouse_position_x":{
"type":"integer"
},
"mouse_position_y":{
"type":"integer"
},
"sourceUrl": {
"type":"text"
},
"userId": {
"type":"text"
},
"applicationId": {
"type":"text"
},
"createdAt":{
"type" :"date",
"format": "yyyy-MM-dd HH:mm:ss"
}
}
}
} }

Anda dapat menggunakan Postman ataupun cUrl untuk membuat index Elasticsearch diatas.

3. Membuat Producer di AWS Lambda

Berikut ada kode producer yang akan menerima payload data klik dari client. Payload tersebut akan diantrikan ke AWS SQS dan tidak diproses langsung untuk disimpan ke Elasticsearch. Producer akan mengirimkan data ke AWS SQS dengan menggunakan method sendMessage().

Pertama buatlah AWS Lambda baru melalui AWS Console, buat saja dengan template basic untuk Node.js. Kemudian pilihlah API Gateway sebagai event trigger.

Nantinya Anda akan diarahkan untuk membuat API Gateway baru yang akan menunjuk ke AWS Lambda yang berperan sebagai producer ini.

Selanjutnya paste kode yang sudah diperlihatkan diatas ke bagian function code. Anda cukup mem-paste-nya saja. Anda juga dapat melakukan editing langsung pada konsol tersebut.

Anda juga dapat mengatur konfigurasi sesuai keinginan Anda mulai dari concurrency hingga network yang telah Anda bangun diatas AWS. Tentu saja yang paling wajib adalah memilih execution role. Jangan sampai kita tidak dapat menjalankan Lambda function hanya karena masalah permission dari role yang diterapkan ke function tersebut.

Bila semuanya sudah OK, kamu hanya tinggal menekan tombol Save .

4. Membuat Endpoint di API Gateway

Pertama Andahanya perlu buka halaman API Gateway dan tekan tombol Create API untuk mulai membuat API Gateway baru.

Halaman untuk membuat API Gateway baru

Selanjutnya kamu dapat menentukan method apa yang ingin dibuat. Dapat berupa GET PUT POST DELETE HEAD ANY dan lainnya. Namun untuk sekarang hanya perlu ANY saja.

Anda juga dapat menunjuk Lambda function yang akan menangani endpoint yang dipilihkan oleh API Gateway. Selain itu URL pun akan terbuat secara otomatis untuk setiap endpoint. Sehingga kamu dapat mulai menggunakannya untuk pengujian.

Halaman untuk menentukan lambda function sebagai handler endpoint

Selain itu kamu juga dapat melakukan testing pada form testing yang disediakan API Gateway. Mirip Postman namun lebih sederhana.

Form untuk pengujian endpoint di API Gateway

5. Membuat Antrian Baru di AWS SQS

Sekarang kita harus membuat bagian terpenting dari sistem ini, yaitu antrian atau queue yang dapat membantu kita menahan beban dari jumlah request yang mungkin akan tinggi suatu saat nanti. Anda hanya harus mengisi form seperti pada gambar dibawah ini.

Form untuk membuat antrian di SQS

Anda hanya perlu menentukan nama, lamanya pesan akan disimpan, ukuran maksimum suatu pesan yang akan disimpan di antrian, dan lainnya. Lalu setelah konfigurasi berhasil ditentukan, Anda hanya perlu menekan tombol Save dan akhirnya queue berhasil dibuat. Hanya saja masih ada beberapa setting yang harus kamu lakukan.

Antrian yang berhasil dibuat di AWS SQS

Sekarang kamu hanya perlu menambakan permission yang dibutuhkan oleh antrian tersebut. Untuk sistem ini antrian hanya perlu permission sendMessage receiveMessage dan deleteMessage . Baru setelah selesai memberikan permission, Anda tinggal mengambil ARN (Amazon Resource Name) yang dimiliki antrian SQS untuk digunakan di kode producer dan consumer.

Konfigurasi permission dan nama ARN dari antrian yang telah dibuat

Lalu Anda pun dapat melihat berbagai informasi yang disajikan melalui halaman monitoring dari antrian AWS SQS. Seperti NumberMessageSent NumberMessageReceived NumberMessageDeleted dan lainnya.

Monitoring antrian yang telah dibuat di SQS

Anda juga dapat melihat pesan yang sudah ditampung di antrian SQS. Tentu saja bila pesannya memang sudah Anda. Dengan klik kanan pada nama antrian yang dituju, Anda akan melihat tabel yang menampilkan pesan yang ditampung di antrian di SQS.

Anda dapat melihatnya setelah menekan tombol Start Polling Message .

Form untuk melihat pesan — pesan yang ditampung antrian di SQS

Akhirnya bila pesan — pesan sudah masuk, kamu dapat melihat setiap pesan yang ditampung juga dapat melihat informasi seperti panjang pesan dan waktu masuk pesan ke antrian di SQS.

Data yang masuk ke antrian di SQS

6. Membuat dan Menjalankan Consumer di Localhost

Berikut ini adalah source code untuk menangani data yang masuk ke AWS SQS. Kode berikut menggunakan AWS SDK untuk Node.js dalam menangani data yang masuk ke AWS SQS:

Selain AWS SDK saya juga menggunakan elasticsearch untuk menyimpan data klik ke Elasticsearch tepatnya pada indeks yang telah berhasil dibuat sebelumnya. Dan yang pasti, kode diatas berjalan secara rekursif agar dapat dijalankan terus menerus hingga dimatikan prosesnya oleh admin.

Berikut adalah cara menjalankan consumer di server tersendiri yang akan menjalankannya:

$ node consumer.js

Bila di AWS SQS Anda sudah menerima data dari producer maka data yang diantrikan tersebut akan ditarik satu persatu dalam jangka waktu satu detik. Dan tampilan konsol consumer pun akan seperti ini.

Output consumer.js di Konsol

Bila Anda ingin memeriksa hasilnya, dapat dilakukan dengan mengeksekusi URL ini di web browser Anda:

http://localhost:9200/mylog/clickstreamLog/_search
Data yang berhasil masuk ke Elasticsearch

7. Menguji Coba Endpoint dengan Postman

Untuk memastikan sistem ini bekerja, kita harus mengirim sebuah payload yang diperlukan oleh Producer yang dibuat diatas AWS Lambda. Producer tersebut menerima trigger dengan HTTP trigger. Oleh karena itu kita dapat mengirim payload ke sana dengan menggunakan Postman atau cUrl.

Berikut ini adalah cara mengirim payload serta payload yang dibutuhkannya melalui Postman:

Dan ketika Anda mengirimkan payload tersebut. Maka data akan diproses oleh AWS SQS dan dikonsumsi oleh Consumer yang dijalankan di server lain. Consumer tersebut akan menyimpan data clickstream ke Elasticsearch seperti pada penjelasan no 6.

Bagaimana cara kerjanya?

Pertama — tama kita dapat mengirimkan data clickstream melalui endpoint yang sudah disediakan oleh API Gateway, endpoint tersebut akan menerima sejumlah payload yang dikirimkan dari Postman dan akan diteruskan ke AWS Lambda yang menerima event dari API Gateway tersebut. Dalam hal API Gateway yang kita buat bernama clickstreamTrackerApi dan Lambda yang akan menerimanya adalah clickstreamProducer .

Setelah data diterima oleh Lambda, maka payload yang berisi data clickstream tersebut akan diteruskan ke SQS yang bernama clickstreamQueueDev . Di dalam antrian tersebutlah semua payload akan diproses oleh consumer yang akan dijalankan di server tersendiri dan mengambil setiap record-nya dari SQS.

Setiap record yang diambil dari SQS akan diambil satu per satu setiap satu detik. Dan data yang diambil akan disimpan ke Elasticsearch dengan index mylog/clickstreamLog , dan sesampainya disana, data clickstream dapat kamu gunakan untuk analisa lebih lanjut. Contoh paling sederhana adalah menganalisanya dengan menggunakan Kibana.

Kesimpulan

Cukup mudah bukan untuk sekadar mencoba?

Dengan menggunakan AWS Free Tier, kita sudah dapat membangun clickstream tracker minimalis untuk mengakomodasi penyimpanan data klik dari client.

Dari penjelasan diatas, penulis berharap bagi Anda yang membaca dapat mulai melakukan eksplorasi terhadap fitur — fitur yang terdapat di Amazon Web Service Free Tier untuk mulai membangun aplikasi Anda.

--

--