Membangun Serverless Clickstream Tracker Dengan API Gateway, AWS Lambda Dan AWS SQS PDF

6/24/2018 Membangun Serverless Clickstream Tracker Dengan API Gateway, AWS Lambda dan AWS SQS
Ridwan Fajar Follow

Read detective novel & comic. Curious with Backend,Big Data,Cloud
Service,Microservice,Serverless,AI,etc. Work @Sensehealth B.V. These posts here are my word
Apr 27 · 8 min read
Membangun Serverless Clickstream

Tracker Dengan API Gateway, AWS Lambda
dan AWS SQS
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
https://medium.com/serverless-indonesia/membangun-serverless-clickstream-tracker-dengan-api-gateway-aws-lambda-dan-a… 1/18
• 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().
1 var QUEUE_URL = '<url>/clickstreamQueueDev';

2 var AWS = require('aws-sdk');
3 var sqs = new AWS.SQS({region : 'ap-northeast-1'});
4
5 exports.handler = function(event, context, callback) {
6 var params = {
7 MessageBody: event.body,
8 QueueUrl: QUEUE_URL
9 };
10
11 sqs.sendMessage(params, function(err, data){
12 if(err) {
13 console.log('error:',"Fail Send Message" + err);
14 callback(null, { statusCode: 400, body: '{"message
15 }else{
16 console.log('data:',data.MessageId);
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 kon gurasi 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 kon gurasi 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.
Kon gurasi 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:
1 // Load the AWS SDK for Node.js

2 var AWS = require('aws-sdk');
3 var dateFormat = require('dateformat');
4 // Set the region
5 AWS.config.update({region: 'ap-northeast-1'});
6
7 // Create SQS service object
8 var sqs = new AWS.SQS({apiVersion: '2012-11-05'});
9 var queueURL = "<url>/clickstreamQueueDev";
10
11 var params = {
12 AttributeNames: [
13 "SentTimestamp"
14 ],
15 MaxNumberOfMessages: 1,
16 MessageAttributeNames: [
17 "All"
18 ],
19 QueueUrl: queueURL,
20 VisibilityTimeout: 0,
21 WaitTimeSeconds: 0
22 };
23
24
25 // configure the elasticsearch
26
27 var elasticsearch = require("elasticsearch");
28 var client = new elasticsearch.Client({
29 host: "localhost:9200",
30 log: "trace"
31 });
32
33 const uuidV4 = require('uuid/v4');
34
35 function runWorker()
36 {
37
38 console.log("Processing the queue!");
39
40 // receive the message
41
42 sqs.receiveMessage(params, function(err, data) {
43 if (err) {
44 console.log("Receive Error", err);
45 } else if (data Messages) {
45 } else if (data.Messages) {
46
47 console.log(data.Messages.length);
48
49 var log = JSON.parse(data.Messages[0].Body);
50 console.log(log);
51
52 client.index({
53 index: 'mylog',
54 id: uuidV4(),
55 type: "clickstreamLog",
56 body: {
57 mouse_position_x: log.mouse_position_x,
58 mouse_position_y: log.mouse_position_y,
59 sourceUrl: log.sourceUrl,
60 userId: log.userId,
61 applicationId: log.applicationId,
62 createdAt: dateFormat(new Date(), "yyyy-
63 }
64 },function(err,resp,status) {
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 tur — tur yang terdapat
di Amazon Web Service Free Tier untuk mulai membangun aplikasi
Anda.

Membangun Serverless Clickstream Tracker Dengan API Gateway, AWS Lambda Dan AWS SQS PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membangun Serverless Clickstream Tracker Dengan API Gateway, AWS Lambda Dan AWS SQS PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

6/24/2018 Membangun Serverless Clickstream Tracker Dengan API Gateway, AWS Lambda dan AWS SQS

Ridwan Fajar Follow

Membangun Serverless Clickstream

Pada dasarnya membangun clickstream tracker tidaklah mudah, ada

Sistem ini akan menyimpan beberapa data dasar dalam clickstream

Selain itu karena kita sedang membahas membangun suatu sistem

Sedangkan untuk storage dan consumer-nya akan kita gunakan

• Node.js + AWS SDK

Awalnya saya ingin membuat consumer untuk SQS tersebut berada di

Apa saja yang dibutuhkan?

• AWS Free Tier account

• AWS SDK untuk Node.js

Mari kita mulai

Berhubung saya menggunakan Mac OSX, maka cara instalasi yang

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

Elasticsearch dijalankan di localhost

Sekarang Elasticsearch di localhost Anda sudah siap digunakan oleh

Setelah Elasticsearch berhasil dijalankan, silahkan buat index yang

Anda dapat menggunakan Postman ataupun cUrl untuk membuat

3. Membuat Producer di AWS Lambda

1 var QUEUE_URL = '<url>/clickstreamQueueDev';

Nantinya Anda akan diarahkan untuk membuat API Gateway baru

Selanjutnya paste kode yang sudah diperlihatkan diatas ke bagian

4. Membuat Endpoint di API Gateway

Halaman untuk membuat API Gateway baru

Selanjutnya kamu dapat menentukan method apa yang ingin dibuat.

Anda juga dapat menunjuk Lambda function yang akan menangani

Halaman untuk menentukan lambda function sebagai handler endpoint

Form untuk pengujian endpoint di API Gateway

5. Membuat Antrian Baru di AWS SQS

Form untuk membuat antrian di SQS

Anda hanya perlu menentukan nama, lamanya pesan akan disimpan,

Antrian yang berhasil dibuat di AWS SQS

Sekarang kamu hanya perlu menambakan permission yang dibutuhkan

Monitoring antrian yang telah dibuat di SQS

Anda dapat melihatnya setelah menekan tombol Start Polling

Form untuk melihat pesan — pesan yang ditampung antrian di SQS

Data yang masuk ke antrian di SQS

6. Membuat dan Menjalankan Consumer di Localhost

1 // Load the AWS SDK for Node.js

Selain AWS SDK saya juga menggunakan elasticsearch untuk

Berikut adalah cara menjalankan consumer di server tersendiri yang

Output consumer.js di Konsol

Bila Anda ingin memeriksa hasilnya, dapat dilakukan dengan

Data yang berhasil masuk ke Elasticsearch

7. Menguji Coba Endpoint dengan Postman

Berikut ini adalah cara mengirim payload serta payload yang

Dan ketika Anda mengirimkan payload tersebut. Maka data akan

Bagaimana cara kerjanya?

Dengan menggunakan AWS Free Tier, kita sudah dapat membangun

Dari penjelasan diatas, penulis berharap bagi Anda yang membaca

Anda mungkin juga menyukai