Akhdani Tech Talk 2021 Series #5 – Test Driven Development

Test Driven Development

Oleh: Agus, Dimas, Moris

Apa itu Test Driven Development (TDD)

Praktek koding yang pertama kali dibuat adalah uji tesnya, lalu membuat koding yang bisa membuat test tersebut lolos. Menagapa harus TDD ? TDD baiknya digunakan apabila Anda ingin menjaga base code dalam waktu yang lama.  TDD itu merupakan proses tertutup yang berulang. Hal ini membuat programmer paham dengan apa yang dia buat. Sebagai contoh berikut adalah gambaran dari proses pembuatan TDD tersebut

Mengapa menggunakan TDD?

Karena TDD adalah cara paling sederhana untuk mencapai kode berkualitas baik dan cakupan pengujian yang baik.

Untuk Jawaban lebih panjang, keep scrolling!

Lima langkah dalam flow TDD

  1. Baca, pahami dan proses permintaan fitur atau fix-bug.
  2. Terjemahkan persyaratan dengan menulis tes unit. Jika memiliki pengaturan hot-reload, unit test akan berjalan dan gagal karena belum ada kode yang diimplemen.
  3. Tulis dan implementasikan kode yang memenuhi persyaratan. Jalankan semua tes dan pastikan test berhasil/lulus. Jika ada yang tidak lulus ,silakan ulangi langkah ini.
  4. Bersihkan kode dengan refactoring.
  5. Check dan ulangi hingga test sudah bisa diimpelemtasikan untuk produksi (production).

tdd

tdd-red-green-refactoring-v3

 

 

Terdapat beberapa keuntungan dan kekurangan yang didapatkan jika menggunakan metode TDD. Berikut adalah contohnya :

Keuntungan : 

  1. Bisa memberitahu pada kondisi apa kodingan tersebut bisa berjalan sempurna dan tidak jalan sempurna. Programmer bisa mengetahui jika terjadi kesalahan karena sebelumnya kodingan tersebut berjalan dengan baik.
  2. Membuat waktu yang lebih singkat untuk melakukan refactor kodingan jika diperlukan, karena programmer dapat mengetes dengan mudah.
  3. Membuat programmer lebih percaya diri. karena apabila ada penambahan fitur, dapat dites dengan mudah.

Kekurangan : 

  1. Tidak mudah untuk memulai dengan TDD. Anda harus mengetahui mengetahui banyak praktik dan teknik baru. Contoh: unit testing, dan asertions, dll.
  2. Dibutuhkan lebih banyak waktu diawal saat melakukan pengembangan, karena Programmer harus menguji kode saat membuat kodingan juga.

Secara umum, TDD dapat dibagi menjadi 4 bagian yaitu : 

  1. Unit Testing: Unit test yang paling rendah. Biasanya yang di test hanya 1 method. Hal ini membuat unit testing mudah untuk digunakan.
  2. Integration Testing: Integration testing yang menyentuh beberapa class. Selain berhubungan dengan beberapa class, ada juga yang berhubungan dengan pihak external lainnya, misalnya API lain. 
  3. Functional Testing: Functional testing adalah tipe testing yang dilakukan kepada semua fitur. Testing ini agak memakan banyakan waktu karena fitur yang dites nya lebih banyak dari integration testing.
  4. Acceptance Testing: Acceptance testing merupakan test yang paling atas. Testing ini hanya dianggap sukses apabila customer sudah mengatakan testnya selesai.

Sebagai contoh, disini kita akan membuat 1 bagian TDD yaitu unit testing. Sebagai awalan, framework yang digunakan adalah menggunakan laravel (contoh menggunakan laravel karena saat menginstal laravel sudah sekaligus otomatis terinstal contoh unit testnya). Untuk menjalankan TDD secara otomatis, ketikan “vendor\bin\phpunit” pada root folder laravel.

Script test yang dibuat biasanya disimpan pada folder test\Unit

folder

lalu pada terminal akan muncul tampilan seperti ini

success1

hal tersebut menandakan bahwa semua test lolos.

sebagai contoh lain, kita buat 1 class yang bernama Calculate yang isinya 1 methode untuk menghitung luas

public function areaOfSquare($length)
{
    return pow($length, 2);
}

lalu buat class testnya yang bernama CalculateTest pada folder “tests\Unit”

 

folder-2

 

buat 1 method pada CalculateTest yang berfungsi untuk mengetes hasil balikan dari method “areaOfSquare” pada class “Calculate”

public function test_areaOfSquare_WhenCalledWithLength2_Return4()
{
    $this->calculate = new Calculate();

    $length = 2;

    $response = $this->calculate->areaOfSquare($length);

    $this->assertTrue(is_int($response));
    $this->assertEquals(4, $response);
}

jalankan test maka akan menghasilkan tampilan seperti berikut

success1

untuk apabila ada logic yang salah pada method “areaOfSquare” pada class “Calculate”, maka akan muncul tampilan seperti berikut.

error

 

disana disebutkan bahwa pada test “test_areaOfSquare_WhenCalledWithLength6_Return36″ hasil yang diharapkan adalah 36, sedangkan hasil yang keluar dari uji test adalah 216. dari sana bisa diambil kesimpulan bahwa kodingan di method “areaOfSquare” pada class “Calculate” terdapat kesalahan. Namun tidak menutup kemungkinan juga jika output yang ditulis pada script test yang dibuat salah. padahal hasil yang dikeluarkan oleh kodingan di method tersebut betul.

Kesimpulan :

Pengembangan berbasis tes (TDD) adalah teknik pengembangan di mana harus terlebih dahulu menulis tes yang gagal sebelum menulis kode fungsional baru. TDD dengan cepat diadopsi oleh pengembang perangkat lunak tangkas untuk pengembangan kode sumber aplikasi. TDD tidak menggantikan pengujian tradisional, melainkan mendefinisikan cara yang telah terbukti untuk memastikan pengujian unit yang efektif. Efek samping dari TDD adalah bahwa tes yang dihasilkan adalah contoh kerja untuk menjalankan kode, sehingga memberikan spesifikasi kerja untuk kode tersebut. Pengalaman pribadi, bahwa TDD bekerja dengan sangat baik dalam praktiknya dan ini adalah sesuatu yang harus dipertimbangkan oleh semua pengembang perangkat lunak.

 

Akhdani Tech Talk 2021 Series #4 – Deteksi Emosi pada teks Chat

Deteksi Emosi pada teks Chat

Oleh: Fildah A., Ikhsan H. Frasetiawan H.

  • Masalah dan Ide

    Bentuk komunikasi teks saat ini merupakan salah satu yang tidak bisa dipisahkan dari kehidupan kita, meskipun ada banyak aspek non verbal yang terkadang tidak mampu ditunjukkan melalui komunikasi teks. Dengan perkembangan AI hingga kini, sangat memungkinkan untuk menggali informasi non verbal dari sebuah teks seperti emosi agar tercipta suatu bentuk komunikasi teks yang lebih komprehensif. Kali ini tim techtalk akan membuat sebuah sistem prediksi emosi sederhana menggunakan machine learning dari data teks.

  • Requirements

  • Python versi 3
  • Modul sklearn
  • Modul nltk corpora
  • Flask
  • Tahap Implementasi

    1. Mencari dataset yang sesuai

    Untuk melakukan sebuah proses supervised learning, dataset yang diperlukan untuk proses training nanti adalah labeled dataset. Terdapat banyak dataset yang sudah dilabeli emosi tersedia secara gratis di internet, misalnya di https://www.kaggle.com/.
    Dataset yang dipilih untuk percobaan kali ini merupakan data tweet dalam Bahasa Inggris yang sudah dilabeli dengan berbagai macam emosi seperti senang, sedih, marah, khawatir, bosan, netral. Untuk menyederhanakan proses training dan prediksi, dipakai hanya data-data yang memiliki label senang, sedih dan netral.

image9Gambar 1. Snippet code untuk load dataset

2. Preprocessing data

Untuk mengoptimalkan proses ekstraksi fitur dan akurasi prediksi, perlu dilakukan ‘pembersihan’ dari kata-kata yang tidak menambah/memiliki makna maupun pengubahan kata menjadi kata dasar. Tahap-tahap preprocessing data meliputi beberapa hal berikut.

  • Memilih data dengan label happiness, sadness dan netral
  • tweet_id sentiment content
    1 1956967666 sadness layin n bed headache ughh waitin call
    2 1956967696 sadness funeral ceremony gloomy friday
    4 1956968416 neutral dannycastillo want trade someone houston ticke...
    6 1956968487 sadness sleep im thinking old friend want married damn...
    8 1956969035 sadness charviray charlene love miss
    ... ... ... ...
    39992 1753918881 neutral jasimmo oo showing french skill lol thing good...
    39993 1753918892 neutral haha yeah twitter many us know ppl care
    39994 1753918900 happiness succesfully following
    39995 1753918954 neutral
    39998 1753919043 happiness wassup beautiful follow peep new hit single ww...
    
    [19012 rows x 3 columns]
  • Penyeragaman huruf kapital menjadi huruf kecil (lowercase)
  •  tweet_id sentiment content
    1 1956967666 sadness layin n bed with a headache ughhhh...waitin on...
    2 1956967696 sadness funeral ceremony...gloomy friday...
    4 1956968416 neutral @dannycastillo we want to trade with someone w...
    6 1956968487 sadness i should be sleep, but im not! thinking about ...
    8 1956969035 sadness @charviray charlene my love. i miss you
    ... ... ... ...
    39992 1753918881 neutral @jasimmo ooo showing of your french skills!! l...
    39993 1753918892 neutral @sendsome2me haha, yeah. twitter has many uses...
    39994 1753918900 happiness succesfully following tayla!!
    39995 1753918954 neutral @johnlloydtaylor
    39998 1753919043 happiness @niariley wassup beautiful!!! follow me!! peep...
    
    [19012 rows x 3 columns]
  • Menghilangkan tanda baca
  •  tweet_id sentiment content
    1 1956967666 sadness layin n bed with a headache ughhhh waitin on...
    2 1956967696 sadness funeral ceremony gloomy friday
    4 1956968416 neutral dannycastillo we want to trade with someone w...
    6 1956968487 sadness i should be sleep but im not thinking about ...
    8 1956969035 sadness charviray charlene my love i miss you
    ... ... ... ...
    39992 1753918881 neutral jasimmo ooo showing of your french skills l...
    39993 1753918892 neutral sendsome2me haha yeah twitter has many uses...
    39994 1753918900 happiness succesfully following tayla
    39995 1753918954 neutral johnlloydtaylor
    39998 1753919043 happiness niariley wassup beautiful follow me peep...
    
    [19012 rows x 3 columns]
  • Menghilangkan stopwords
  •  tweet_id sentiment content
    1 1956967666 sadness layin n bed headache ughhhh waitin call
    2 1956967696 sadness funeral ceremony gloomy friday
    4 1956968416 neutral dannycastillo want trade someone houston ticke...
    6 1956968487 sadness sleep im thinking old friend want married damn...
    8 1956969035 sadness charviray charlene love miss
    ... ... ... ...
    39992 1753918881 neutral jasimmo ooo showing french skills lol things g...
    39993 1753918892 neutral sendsome2me haha yeah twitter many uses know p...
    39994 1753918900 happiness succesfully following tayla
    39995 1753918954 neutral johnlloydtaylor
    39998 1753919043 happiness niariley wassup beautiful follow peep new hit ...
    
    [19012 rows x 3 columns]
  • Mengubah kata ke bentuk kata dasar
  • tweet_id sentiment content
    1 1956967666 sadness layin n bed headache ughhhh waitin call
    2 1956967696 sadness funeral ceremony gloomy friday
    4 1956968416 neutral dannycastillo want trade someone houston ticke...
    6 1956968487 sadness sleep im thinking old friend want married damn...
    8 1956969035 sadness charviray charlene love miss
    ... ... ... ...
    39992 1753918881 neutral jasimmo ooo showing french skill lol thing goo...
    39993 1753918892 neutral sendsome2me haha yeah twitter many us know ppl...
    39994 1753918900 happiness succesfully following tayla
    39995 1753918954 neutral johnlloydtaylor
    39998 1753919043 happiness niariley wassup beautiful follow peep new hit ...
    
    [19012 rows x 3 columns]

image7Gambar 2. Snippet code untuk preprocessing data

3. Ekstraksi fitur

Mesin melakukan pembelajaran melalui suatu proses kalkulasi tertentu yang memetakan antara nilai input dan output dalam bentuk numerik. Dalam percobaan ini data yang akan dibaca tersedia dalam bentuk teks, sehingga perlu dilakukan pengubahan untuk data input (konten teks) maupun outputnya (label) dari teks menjadi nilai numerik.

3.1. Untuk label, proses transformasi dilakukan dengan cara mengubah label menjadi nilai 0…n sesuai banyaknya jenis label berbeda.

image8Gambar 3. Snippet code untuk encoding label

3.2. Untuk data konten teks, dilakukan 2 metode berbeda untuk mengekstraksi fitur-fitur yang dimiliki teks menjadi bentuk numerik yaitu CountVectorizer dan TF-IDF

image5Gambar 4. Snippet code untuk ekstraksi fitur

*CountVectorizer adalah sebuah metode mengubah data teks dengan menghitung banyaknya kemunculan sebuah kata dalam dokumen teks dan kemudian dari nilai hasil kemunculan tiap kata tersebut diubah menjadi bentuk vektor

*TF-IDF adalah sebuah metode mengubah data teks dengan memberikan bobot/nilai terhadap kata berdasarkan seberapa penting kata tersebut dianggap memberikan makna pada kalimat.

4.Melakukan training dan test

Sebelum melakukan training data dan test, dipisahkan terlebih dahulu antara data training dan tes dari dataset yang tersedia dengan rasio 9:1. Ada beberapa model yang dilakukan untuk percobaan, yaitu multinomial naive bayes dan linear svm.

image6Gambar 5. Snippet code untuk split dataset dan fit model

*Multinomial Naive Bayes adalah suatu model klasifikasi berdasarkan teorema bayes dengan mengasumsikan bahwa setiap aspek/fitur dianggap setara.
*Linear SVM adalah model klasifikasi dengan ide untuk mencari sebuah garis pemisah antara kelompok-kelompok vektor

image1Gambar 6. Hasil akurasi model

Model dengan akurasi tertinggi dipilih dan disimpan ke dalam bentuk objek untuk kemudian dipakai melakukan prediksi. Proses menyimpan model menggunakan joblib dari python.

image4Gambar 7. Snippet code dump model menggunakan joblib

5. Membuat web app dengan Flask

Flask merupakan microframework web app untuk python. Model terlebih dahulu di load, lalu dilakukan proses prediksi menggunakan model dan vocab hasil training.

image3Gambar 8. Snippet code app.py

image2Gambar 9. Menjalankan web app

6. Melakukan prediksi menggunakan input random

Setelah web app berhasil dijalankan, selanjutnya kita coba melakukan prediksi dengan input yang kita buat sendiri dengan cara mengetikkan pesan ke dalam textbox yang tersedia.

image11Gambar 10. Tampilan input teks untuk prediksi emosi

image10Gambar 11. Tampilan hasil prediksi

  • Saran pengembangan selanjutnya

  1. Sistem prediksi dengan Bahasa Indonesia
    Pengembangan sistem prediksi dalam Bahasa Indonesia membutuhkan dataset berlabel dan serangkaian langkah preprocessing untuk Bahasa Indonesia. Pada proses pencarian dataset sebelumnya, kami sempat menemukan dataset dengan Bahasa Indonesia. Namun, kami belum sempat eksplorasi lebih jauh mengenai library/modul preprocessing dari python apakah sudah tersedia untuk Bahasa Indonesia.
  2. Disambungkan dengan sosial media
    Sistem prediksi emosi berkaitan erat dengan kegiatan komunikasi teks. Dalam kegiatan sehari-hari kita tentu paling sering melakukan komunikasi teks melalui sosial media. Sistem prediksi emosi mungkin bisa dimanfaatkan untuk meningkatkan kualitas respon chatbot atau sejenisnya. Tentu saja harus dengan pengembangan model ML lebih lanjut agar prediksi bisa lebih akurat.

Sumber :
https://medium.com/the-research-nest/applied-machine-learning-part-3-3fd405842a18
https://towardsdatascience.com/develop-a-nlp-model-in-python-deploy-it-with-flask-step-by-step-744f3bdd7776
https://towardsdatascience.com/naive-bayes-classifier-81d512f50a7c
https://towardsdatascience.com/https-medium-com-pupalerushikesh-svm-f4b42800e989

Akhdani Tech Talk 2021 Series #1 – Otomatisasi Pekerjaan Menggunakan Bot WhatsApp

Otomatisasi Pekerjaan Menggunakan Bot WhatsApp

Oleh: Gita Marshelina, Wiby Putra Adyan Ramdhani, Aria Enggar Pamungkas

Masalah dan Ide

WhatsApp hingga saat ini masih dipakai oleh semua anggota tim di lingkungan PT Akhdani Reka Solusi (ARS) sebagai media komunikasi. Bagaimana jika kita bisa memanfaatkan WhatsApp untuk lebih jauh lagi? Dalam lingkungan ARS pada pekerjaan HokBen Rework, bot WhatsApp mulai digunakan untuk otomatisasi pengecekan sumber daya server dan rekapitulasi pembayaran hanya dengan mengirim pesan tertentu pada jalur grup. Berdasarkan hal tersebut, kita bisa memanfaatkan bot ini sebagai portal untuk memudahkan pekerjaan kita yang berulang-ulang, seperti melihat rekap laporan harian (daily report), detail info proyek, hingga integrasi dengan tools lain seperti Trello atau Airtable untuk melihat status atau detil tugas yang diberikan.

Rencana Implementasi

1. Menggunakan Bot WhatsApp

Bot WhatsApp yang digunakan bukan dari API resmi WhatsApp, melainkan proyek open source dari

https://github.com/open-wa/wa-automate-nodejs

Instalasi library ini membutuhkan syarat berikut:

  • Kebutuhan Perangkat Keras
    1. Satu buah server, bisa sebuah PC/laptop ataupun VPS.
    2. Smartphone yang terkoneksi internet
  • Kebutuhan Perangkat Lunak
    1. NodeJS
    2. PHP
    3. Database
  • Tahapan Instalasi

Untuk instalasi sistem yang perlu dilakukan adalah:

  1. Instalasi dan konfigurasi library dan software yang diperlukan
  2. Membuat script sesuai kebutuhan
  3. Scan QR code
    2. Cara kerja sistem Bot WhatsApp

Pada dasarnya library NodeJS tersebut akan menggunakan headless Chromium yang dikendalikan oleh library ini. Dari mulai membuka WhatsApp web dan menampilkan QR code yang kemudian akan dipindai menggunakan smartphone yang sudah dipasang aplikasi WhatsApp.

1

Gambar 1. Cara Kerja Sistem Bot WhatsApp

Setelah login menggunakan QR berhasil, library ini akan otomatis membaca DOM teks pesan yang masuk, baik melalui grup maupun pribadi untuk kemudian dibaca konten pesan tersebut. Jika konten pesan ada yang cocok dengan kata kunci yang sudah didefinisikan, maka library ini akan meneruskan eksekusi kode sesuai yang telah dibuat sebelumnya. Berikut contoh kode eksekusi yang telah dibuat:

2

Gambar 2. Contoh Kode

3. Skrip BOT Dinamis

Skrip bot yang dinamis akan membuat bot WhatsApp bisa menerima masukan dan mengerjakan tugas yang lebih beragam dan bisa ditambah sewaktu-waktu, untuk skrip ini direncanakan akan dibuat dalam bahasa pemrograman PHP. Untuk pengelolaan skripnya akan dibuatkan aplikasi web sebagai admin panel.

3

Gambar 3. Contoh Tampilan Halaman Index Admin Panel

4

Gambar 4. Contoh Tampilan Halaman Tambah Script 

4. Contoh Integrasi dengan Tools Lain
  • Trello dan Airtable

Trello dan Airtable keduanya menyediakan API untuk bisa diakses via HTTP Request.  Untuk info lebih lanjut perihal Trello dan Airtable bisa dibaca pada tautan berikut:

https://developer.atlassian.com/cloud/trello/guides/rest-api/api-introduction/
https://airtable.com/api
  • Mengambil data dari Google Sheet

Google menyediakan API untuk mengambil data dari dalam google sheet melalui script misalnya menggunakan PHP. Integrasi ini bisa dimanfaatkan misal untuk meminta data pelamar, data pegawai yang belum mengisi daily report, dan lain-lain. Untuk mengambil data dari Google Sheet bisa menggunakan cara pada tautan berikut: 

https://www.srijan.net/blog/integrating-google-sheets-with-php-is-this-easy-know-how
  • Jobstreet

Untuk mengambil lowongan perusahaan bisa menggunakan curl ke

http://157.230.35.21/jobstreet_api.php

yang sudah dikonfigurasi khusus untuk mengambil lowongan di PT Akhdani Reka Solusi.

  • Build aplikasi di Jenkins

Jenkins menyediakan API untuk melakukan job pada Jenkins misalnya build aplikasi yang telah dikonfigurasi sebelumnya menggunakan REST API. Untuk informasi lebih lengkap bisa dibaca pada tautan berikut:

https://www.jenkins.io/doc/book/using/remote-access-api/

Scheduled Meeting dari Google Calendar dan Zoom

Google menyediakan API untuk membuat event meeting menggunakan Google Calendar dan generate link Google Meet secara otomatis. Seperti halnya Zoom juga menyediakan API untuk membuat meeting. Langkahnya bisa dilakukan dengan cara yang terlampir pada tautan berikut:

https://developers.google.com/calendar/create-events
https://marketplace.zoom.us/docs/api-reference/zoom-api/meetings/meetingcreate

Dalam rencana implementasi, untuk membuat event meeting menggunakan curl dengan metode seperti berikut:

https://usefulangle.com/post/29/google-calendar-api-create-event-php

 Cara Pemakaian dan Contoh

Penggunaan bot ini dilakukan melalui dua cara, yaitu jalur grup atau jalur pribadi. Dari sisi server akan ditentukan juga mana perintah yang bisa direspon hanya melalui jalur pribadi atau bisa direspon di jalur grup. Gambar di bawah ini adalah contoh implementasi bot WhatsApp untuk info lowongan pekerjaan di ARS melalui jalur pribadi dan contoh mengubah gambar menjadi stiker melalui jalur grup:

5

Gambar 5. Contoh Respon Chat Bot Melalui Pesan Pribadi

6

Gambar 6. Contoh Respon Chat Bot Melalui Pesan Grup


Masalah yang Pernah Muncul

Pada penggunaan bot ini pernah mengalami masalah, di antaranya adalah:

  • Smartphone tidak terhubung ke internet.

Disarankan handphone harus dalam keadaan selalu terhubung ke jaringan internet. Jika sewaktu-waktu jaringan internet bermasalah dan pesan tidak diterima bot, bot akan tetap membalas pesan ketika internet kembali terhubung.

  • Session web WhatsApp berakhir.

Maka harus dilakukan scan QR code ulang.

  • Error pada script/modul.

Harus ada pengecekan atau testing berkala, memastikan script selalu uptodate.

Mengenal Javascript Map dan Set

Kali ini saya akan membahas sedikit mengenai objek yang sepertinya jarang diketahui dan dipakai oleh orang-orang pada Javascript, namanya Map dan Set.

Map mirip seperti Object biasa, berfungsi untuk menyimpan collection dengan key, bedanya, key pada map ini bisa berupa tipe data yang lebih beragam, seperti primitif (angka, string, boolean), object, atau bahkan NaN.

let map = new Map();

map.set("1", "str1");
map.set(1, "num1");
map.set(true, "bool1");

let obj = {name: "Akhdani"};

map.set(obj, "obj1");
map.set(NaN, "nan1");

console.log( map.get(1)   ); // 'num1'
console.log( map.get('1') ); // 'str1'
console.log( map.get(true)); // 'bool1'
console.log( map.get(obj) ); // 'obj1'
console.log( map.get(NaN) ); // 'nan1'


console.log( map.size ); // 5

console.log( map ); // Map(5) {"1" => "str1", 1 => "num1", true => "bool1", {…} => "obj1", NaN => "nan1"}

Bisa kita lihat, Map bisa menerima apa saja sebagai keynya. Cukup ajaib menurut saya. :D

Fitur tambahannya adalah:

  • Urutan dipertahankan sesuai urutan melakukan entry.
  • Tipe data tidak diubah, sehingga key berupa string “1” dan key integer 1 tetap ada keduanya.

Bagaimana jika ingin iterasi entry Map? Ada tiga cara:

  • map.keys() untuk iterasi key
  • map.values() untuk iterasi value
  • map.entries() untuk iterasi entry, berupa key dan valuenya
for (let k of map.keys()) {
  console.log(k);
}

for (let v of map.values()) {
  console.log(v);
}

for (let entry of map) {
  console.log(entry); 
}

 

Set bisa dibilang mirip array, hanya saja tidak bisa duplikat elemen.

let set = new Set();

let akhdani = { name: "Akhdani" };
let reka = { name: "Reka" };
let solusi = { name: "Solusi" };

set.add(akhdani);
set.add(reka);
set.add(solusi);
set.add(reka);
set.add(solusi);

console.log( set.size ); // 3

for (let user of set) {
  console.log(user.name);
}

Bisa kita lihat di atas meskipun “reka” dan “solusi” di-add dua kali, set tetap hanya berisi 3 elemen. Urutan tentu saja dipertahankan karena lebih mirip seperti array.

Javalite RESTful Controller

Sama seperti framework lain yang berbasis mvc, controller merupakan sebuah class yang berperan penting untuk menerima dan mengembalikan request yang dilakukan oleh user. Pada javalite, controller terdapat pada framework activeweb, dan berperan juga sebagai route aplikasi yang akan kita buat.

Untuk membuat sebuah class sebagai controller pada javalite, caranya hanya dengan meng-extends class org.javalite.activeweb.AppController dan menyimpan class tersebut pada directory app.controllers seperti berikut :

package app.controllers;
import org.javalite.activeweb.AppController;

public class HomeController extends AppController {
   @GET
   public void index(){
      render().noLayout();
      respond("Hello world, selamat datang di home controller");
   }
}

Karena controller pada javalite berfungsi sebagai routing aplikasi, semua controller javalite dapat diakses dengan pola url

http://HOST:PORT/CONTEXT/CONTROLLER_NAME/{ACTION}/{ID}

Dengan pola tersebut, maka HomeController diatas dapat diakses sebagai url seperti berikut:

http://localhost:8080/home/index

HOST = localhost
PORT = 8080
CONTEXT = / (misal class HomeController berada di folder ‘master’, maka context = ‘/master’)
CONTROLLER_NAME = home
ACTION = index (action dengan nama ‘index’ bisa tidak dituliskan)

Pada controller diatas terdapat sebuah anotasi yang disimpan diatas sebuah aksi, anotasi tersebut menandakan HTTP Method yang digunakan pada aksi tersebut. Pada contoh diatas aksi index dapat diakses dengan method GET. Selain @GET method lain dapat di tulis dengan anotasi @POST, @DELETE, @PUT, @HEAD.

Lalu, bagaimana dengan RESTful controller?

Untuk membuat sebuah class menjadi RESTful controller pada javalite, caranya sama dengan membuat controller biasa seperti diatas, namun dengan tambahan sebuah anotasi @RESTful. Dengan menambah anotasi tersebut maka controller tersebut akan dikenal sebagai sebuah RESTful controller oleh javalite, dan dengan menambahkan anotasi tersebut juga, maka class tersebut harus harus memiliki satu set methods yang sudah ditentukan. Berikut contoh class RESTful controller:

package app.controllers;

import org.javalite.activeweb.AppController;
import org.javalite.activeweb.annotations.RESTful;

@RESTful
public class BookController extends AppController {
   public void index() { }
   public void newForm() { }
   public void create() { }
   public void show() { }
   public void editForm() { }
   public void update() { }
   public void destroy() { }
}

Pada RESTful controller, kita tidak perlu menuliskan Http method apa yang digunakan pada aksi yang ada dicontroller tersebut. Lalu, untuk mengakses RESTful controller diatas sebagai url dapat dijelaskan pada tabel berikut

HTTP Method Path Action
GET /book Index
GET /book/new_form
/book/new-form
newForm
POST /book create
GET /book/id show
GET /book/id/edit-form
/book/id/edit_form
editForm
PUT /book/id update
DELETE /book/id destroy

Diatas merupakan penjelasan singkat bagaimana membuat sebuah RESTful controller dan bagaimana mengakses RESTful controller di javalite. Selamat mencoba.

Javalite Http Client

Javalite HTTP merupakan sebuah library dari javalite untuk membuat sebuah request http ke client. Sebenarnya untuk http client sendiri kita dapat menggunakan HttpClient milik apache yang lebih sering digunakan, tetapi library Http dari javalite ini dapat menjadi pilihan lain untuk melakukan request http ke client. Mari kita lihat apa saja yang dapat kita lakukan dengan library ini.

Untuk memulai menggunakan javalite http, kita dapat menambahkan dependency javalite-common kedalam build tools yang kita gunakan

Maven

<dependency>
   <groupId>org.javalite</groupId>
   <artifactId>javalite-common</artifactId>
   <version>2.0</version>
</dependency>

Gradle

compile group: 'org.javalite', name: 'javalite-common', version: '2.0'

GET

Untuk membuat request get ke client menggunakan library Http, kita dapat membuatnya seperti berikut:

Get get = Http.get(“http://example.com”);
System.out.println(get.text());
System.out.println(get.headers());
System.out.println(get.responseCode());

Penjelasan untuk baris kode diatas yaitu kita melakukan request menggunakan method GET ke client http://example.com dan menampilkan pada console berupa response body, response headers, dan response code. Class Get diatas merupakan sebuah class yang menampung response dari client dengan request method get. Sedangkan untuk mengolah response dari client kita dapat menggunakan fungsi – fungsi berikut

  1. Method.text() : untuk mendapatkan responseBody
  2. Method.headers() : untuk mendapatkan responseHeaders
  3. Method.responseCode() : untuk mendapatkan responseCode

POST

Untuk melakukan request POST ke client, dapat menggunakan banyak cara, misalkan kita akan melakukan request POST ke client dengan data berupa JSON, maka kita dapat membuatnya seperti berikut :

Post post = Http.post(“http://example.com/post-json”, json)
                .header(“Accept”, “application/json”)
                .header(“Content-Type”, “application/json”);

Atau, jika kita bekerja dengan form, maka kita tidak perlu repot untuk mengubah data dari form input ke JSON, kita dapat mengirimkan langsung input dari form menggunakan param.

Post post = Http.post(“http://example.com/post”)
                .param(“firstname”, “john”)
                .param(“lastname”, “doe”);

Sama seperti request GET, pada request POST kita menampung response dari client pada class Post, dan untuk mengolah response dari client kita dapat memanggil fungsi post.text(), post.header() atau post.responseCode()

MULTIPART REQUEST

Pada kasus tertentu, kita ingin mengirimkan sebuah file ke client, maka kita dapat menggunakan multipart request menggunakan javalite http, berikut contoh penggunaan multipart request:

Multipart mp = Http.multipart(“http://example.com/post-multipart”)
                   .field(“filename”, “doc1”)
                   .file(“file”, “/home/example/doc1.txt”);

Diatas merupakan beberapa contoh simple dalam melakukan request menggunakan library Http milik javalite, tentunya penggunaan library ini dapat diexplore lebih jauh lagi sesuai kebutuhan. Selamat mencoba.

Mengenal Build Tools Gradle

Bagi para pengembang aplikasi, mungkin pernah mendengar istilah ant, gradle, maven, nodejs, npm, composer atau bower ketika sedang mencari sesuatu. Namun apakah yang dimaksud dengan istilah-istilah tersebut ?

Istilah-istilah tersebut merupakan beberapa contoh build tools yang digunakan oleh java, php, atau javascript. Build tools itu sendiri adalah program yang mengotomatiskan proses eksekusi aplikasi dari suatu soure code. Pada dasarnya proses otomatisasi dilakukan oleh pengembang aplikasi untuk melakukan hal hal seperti:

1. Mendownload dependencies.

2. Mengcompile dan mempackaging source code kedalam binary.

3. Melakukan deployment ke production sistem.

Setiap build tools yang digunakan memiliki konfigurasi yang berbeda beda agar dapat berjalan. Contohnya untuk build tools gradle, langkah pertama agar gradle dapat berjalan adalah dengan cara mendownload gradle terlebih dahulu lalu ekstrak hasil file download tersebut. Selanjutnya tambahkan variabel GRADLE_HOME pada environtment variabel (klik kanan my computer -> properties -> advance system settings ->environtment variable ), dan tambahkan juga GRADLE_HOME\bin pada variable path. Agar mengetahui apakah gradle sudah terpasang atau belum, cukup ketikkan gradle -v pada console cmd.

Konfigurasi gradle ada pada file build.gradle. Berikut adalah contoh isi dari file build.gradle

buildscript {
   ext {
      springBootVersion = '2.0.3.RELEASE'
   }
   repositories {
      mavenCentral()
   }
   dependencies {
      classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
   }
}

apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'

group = 'id.co.akhdani'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8

repositories {
   mavenCentral()
}


dependencies {
   // Apache commons
   compile group: 'org.apache.commons', name: 'commons-lang3', version: '3.7'
   compile group: 'commons-codec', name: 'commons-codec', version: '1.9'
   // DB Connection Pool
   compile group: 'com.zaxxer', name: 'HikariCP', version: '3.2.0'

   // thymeleaf
   compile('org.springframework.boot:spring-boot-starter-thymeleaf')
   compile group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect', version: '2.3.0'
   compile('org.thymeleaf.extras:thymeleaf-extras-springsecurity4')

   runtime('org.postgresql:postgresql')

   runtime('org.springframework.boot:spring-boot-devtools')
   testCompile('org.springframework.boot:spring-boot-starter-test')
   compile('org.springframework.boot:spring-boot-starter-web')

   compile group: 'com.fasterxml.jackson.core', name: 'jackson-databind', version: '2.9.6'
   compile group: 'com.fasterxml.jackson.core', name: 'jackson-core', version: '2.9.6'

}

Untuk menambahkan suatu library gradle  kedalam project yang sedang dikerjakan, dapat dilakukan dengan cara menambahkan nya pada file build.gradle, dependencies. Sebagai contoh, kita ingin menambahkan library hikaricp kedalam project, langkah pertama yang dilakukan adalah dengan cara mencari nya pada google, biasanya akan diarahkan pada situs mvnrepository.com. setelah selesai memilih versi berapa yang akan dipakai, klik pada tab gradle, lalu copy tulisan yang ada pada tab tesebut (misal)

   compile group: 'com.zaxxer', name: 'HikariCP', version: '3.2.0'

kedalam dependencies, sehingga dependencies nya akan menjadi seperti ini

dependencies {
   // DB Connection Pool
   compile group: 'com.zaxxer', name: 'HikariCP', version: '3.2.0'
}

 

Setelah project selesai dibuat, langkah selanjutnya adalah melakukan build project. caranya dengan mengetikkan

gradle build

pada console atau terminal. gradle build berfungsi untuk mengkompile code kedalam suatu jar file yang dapat dieksekusi. Apabile build berhasil makan akan muncul tulisan

BUILD SUCCESSFUL

 

Sumber

https://www.techopedia.com/definition/16359/build-tool

https://www.okedroid.com/2016/10/belajar-mengenal-gradle-di-android-studio.html

http://ansorpunya.blogspot.com/2014/12/memulai-spring-dengan-gradle.html

https://spring.io/guides/gs/gradle/#initial

Menggunakan Component NativeBase untuk React Native

NativeBase adalah komponen user interface untuk React Native  yang dapat digunakan pada platform Android maupun iOS.

Komponen-komponen yang tersedia adalah:

Bagaimana cara menggunakannya?

npm install native-base --save
react-native link
npm start

Lalu, import component sesuai yang dibutuhkan. Misalnya component Container, Header dan Title.

import { Container, Header, Title } from 'native-base';

Pada component tersebut, terdapat konfigurasi yang dapat diatur sesuai kebutuhan.

Misal, pada component Radio terdapat konfigurasi seperti berikut:

Property Default Option Description
selected false boolean (true/false) nilai dari pilihan

 

Contoh dari pemakaiannya seperti berikut:

<Content>
     <ListItem>
         <Left>
             <Text>Female</Text>
          </Left>
          <Right>
              <Radio selected={false} />
          </Right>
     </ListItem>

     <ListItem>
         <Left>
             <Text>Male</Text>
          </Left>
          <Right>
              <Radio selected={true} />
          </Right>
     </ListItem>
</Content>

Dari code diatas, menghasilkan list dengan radio button yang memilih textMale“.

Selamat mencoba!

 

Referensi:

NativeBase

Template Literal pada Javascript

Kali ini saya ada bahasan sedikit mengenai template literal, masih dari fitur Javascript yang ditambahkan sejak EcmaScript 6.

Salah satu yang sering kita lakukan saat membuat aplikasi adalah menggabungkan string dengan hasil ekspresi, misalnya untuk menampilkan pesan error atau informasi. Misalnya menulis halaman “Selamat datang, Akdani”, di mana kata “Akhdani” diambil dari data pengguna yang login ke aplikasi. Pada javascript ES5, kita menulisnya seperti ini:

var nama = “Akhdani”;

var pesan = “Selamat datang, " + nama + “!”;

console.log(pesan); // “Selamat datang, Akhdani!”

Nah, sekarang kita bisa menggunakan template literal ini sehingga kita bisa mengurangi penggunaan simbol operator tambah. Kita bisa menulis kalimat yang sama tanpa menggunakan simbol operator tambah, hanya saja kita harus menggunakan backtick (`), lokasi tombolnya pada keyboard ada di sebelah kiri angka 1. Contohnya:

var nama = “Akhdani”;

var pesan = `Selamat datang, ${nama}!`;

console.log(pesan); // “Selamat datang, Akhdani!”

Untuk string dengan banyak baris, kita bisa langsung menuliskan string pada kode dalam bentuk banyak baris tanpa menggunakan ‘\n’, tapi tetap menggunakan backtick. Contoh:

console.log(`Nama saya Akhdani

saya bekerja di Akhdani Reka Solusi`);

// “Nama saya Akhdani

// saya bekerja di Akhdani Reka Solusi”

Untuk bentuk yang lebih lanjut, ada tagged template. Dengan tag ini bisa mengolah template literal menggunakan fungsi. Contoh:

function myTag(strings, nama, umur){
    var str1 = strings[0];

    var str2 = strings[1];

    var str3 = strings[2];

    return `${str1}${nama}${str2}${umur}${str3}`;
};

var nama = “Akhdani”;

var umur = 28;

var hasil = myTag`Halo, nama saya ${nama}, umur saya ${umur} tahun.`;

console.log(hasil); // “Halo, nama saya Akhdani, umur saya 28 tahun.”;

Untuk tag di atas, kalau masih bingung bagaimana pemetaan dari string yang diberi tag ke dalam argumen fungsi tagnya, begini caranya:

  1. String selain hasil interpolasi akan masuk sebagai argumen pertama dalam bentuk array, untuk contoh di atas, terdiri dari 3, yaitu:
    • “Halo, nama saya “;
    • “, umur saya “;
    • ” tahun.”
  2. Ekspresi interpolasi (${nama} dan ${umur}) akan masuk sebagai argumen sisanya yang terpisah, tidak dalam satu array;

Oh ya ketinggalan, kalau ingin ada backtick di dalam template ini, bisa di-escape dengan backslash..

`\`` === '`' // --> true

Sepertinya fitur ini akan sangat berguna apabila aplikasi kita banyak menuliskan string yang terdapat bagian yang merupakan hasil ekspresi kode program. Setidaknya yang akan sering dipakai adalah sintak dasar.

Sekian saja postingan pendek kali ini. semoga bermanfaat. :)

Menggunakan ActiveJDBC Sebagai ORM

ActiveJDBC merupakan salah satu framework dari javalite yang digunakan sebagai ORM (Object-relational mapping). Sebagai sebuah ORM, ActiveJDBC dapat mensupport banyak database yaitu SQLServer, MySQL, Oracle, PostgreSQL, H2, SQLite3, DB2.

Seperti yang sudah dijelaskan pada postingan sebelumnya tentang Mengenal Javalite, bahwa framework yang terdapat pada javalite dapat digunakan atau di integrasikan dengan framework lain, lalu bagaimana menggunakan ActiveJDBC?

Setting library

Untuk menggunakan ActiveJDBC yang pertama kali harus dilakukan yaitu menambahkan library kedalam build tools yang digunakan pada project kita

Maven

<plugin>
  <groupId>org.javalite</groupId>
  <artifactId>activejdbc-instrumentation</artifactId>
  <version1.4.13</version>
  <executions>
    <execution>
      <phase>process-classes</phase>
      <goals>
      	<goal>instrument</goal>
      </goals>
    </execution>
  </executions>
</plugin>

<dependencies>
  <dependency>
    <groupId>org.javalite</groupId>
    <artifactId>activejdbc</artifactId>
    <version>1.4.13</version>
  </dependency>
  <dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.34</version>
  </dependency>
</dependencies>

Gradle

buildscript {
  repositories {
  	mavenCentral()
  }
  dependencies {
  	classpath group: 'org.javalite', name: 'activejdbc-gradle-plugin', version: '2.0'
  }
}
apply plugin: 'org.javalite.activejdbc'

dependencies {
  // ActiveJDBC
  compile group: 'org.javalite', name: 'activejdbc-gradle-plugin', version: '2.0'
}

Membuat Model

Untuk membuat sebuah model dapat dilakukan dengan mudah, yaitu dengan membuat sebuah class yang mengextends class Model yang disediakan ActiveJDBC. Dengan mengextends class Model dari ActiveJDBC, class yang kita buat akan secara langsung termapping dengan table yang sudah didefinisikan pada anotasi @Table

@Table(“mst_pegawai”)
Public class Pegawai extends Model {}

Koneksi Database

Untuk koneksi database menggunakan ActiveJDBC cukup dengan memanggil fungsi Base.open dengan parameter driver, url, username dan password database. Seperti contoh berikut

Base.open("com.mysql.jdbc.Driver", "jdbc:mysql://localhost/simple", "user","password");

Operasi CRUD

Contoh simple penggunaan ActiveJDBC untuk seleksi data adalah sebagai berikut

List<Pegawai> daftarPegawai = Pegawai.where(“first_name = ?”, “John”);
Pegawai pegawai = daftarPegawai.get(0);

Method where() diatas akan digenerate menjadi sebuah query select * from mst_pegawai where first_name = ‘John’. Untuk menambah record baru atau insert dapat menggunakan cara seperti berikut

Pegawai p = new Pegawai();
p.set(“first_name”, “John”);
p.set(“last_name”, “Doe”);
p.saveIt();

Dengan kode diatas maka akan ditambahkan pegawai baru dengan first_name = John dan last_name = Doe. Untuk melakukan update data, dapat dengan melakukan seleksi pada data yang akan diupdate, lalu update data seperti contoh berikut

Pegawai pegawai = Pegawai.findById(1);
Pegawai.set(“last_name”, “Doe2”);
Pegawai.saveIt();

Sedangkan untuk fungsi delete, dapat dilakukan seperti fungsi update yaitu melakukan seleksi data yang akan didelete lalu panggil fungsi delete()

Pegawai pegawai = Pegawai.findById(1);
pegawai.delete();

Transaction

Fungsi terakhir yang akan penulis jelaskan yaitu transaction. Untuk melakukan transaction dapat memulai dengan memanggil fungsi Base.openTransaction(), untuk melakukan commit dapat memanggil fungsi Base.commitTransaction(), sedangkan untuk melakukan rollback dapat memanggil fungsi Base.rollbackTransaction(). Berikut contoh penggunaan transaction pada ActiveJDBC

try{
    Base.open("com.mysql.jdbc.Driver", "jdbc:mysql://localhost/simple", "user","password");
    Base.openTransaction();
    
    Pegawai p = new Pegawai();
    p.set(“first_name”, “John”);
    p.set(“last_name”, “Doe”);
    p.saveIt();
    
    Base.commitTransaction();
}catch(Exception e){
    Base.rollbackTransaction()
}finally{
    Base.close()
}