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.

  • Memecah kalimat menjadi kata
  • Penyeragaman huruf kapital menjadi huruf kecil (lowercase)
  • Menghilangkan tanda baca
  • Menghilangkan stopwords
  • Mengubah kata ke bentuk kata dasar

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 #3 – PENGGUNAAN E-PROCUREMENT BAGI PERUSAHAAN

Apakah e-Procurement itu??
e-Procurement adalah proses pengadaan barang/jasa pemerintah yang pelaksanaannya dilakukan secara elektronik dan berbasis web/internet dengan memanfaatkan fasilitas teknologi komunikasi dan informasi yang meliputi pelelangan umum secara elektronik yang diselenggarakan oleh Pusat Layanan Pengadaan Secara Elektronik (LPSE).
Dilatarbelakangi oleh tuntutan masyarakat dalam memperoleh informasi seluas-luasnya mengenai pengadaan barang/jasa pemerintah dan penyelenggaraan pemerintah yang baik dan bebas dari Korupsi, Kolusi, dan Nepotisme (KKN), maka pemerintah menerapkan e-Procurement dengan tujuan untuk menciptakan transparansi, efisiensi dan efektivitas serta akuntabilitas dalam pengadaan barang/jasa melalui media elektronik antara panitia dan penyedia jasa.

Jika kita berbicara tentang LPSE, Apakah LPSE itu? LPSE (Layanan Pengadaan Secara Elektronik) adalah layanan pengelolaan teknologi informasi untuk memfasilitasi pelaksanaan Pengadaan Barang/Jasa secara elektronik.

Dasar Hukum Pembentukan LPSE
Dasar hukum pembentukan Layanan Pengadaan Secara Elektronik adalah Pasal 73 Nomor 16 Tahun 2018 tentang pengadaan barang/jasa pemerintah yang ketentuan teknis operasionalnya diatur oleh Peraturan Lembaga LKPP Nomor 14 Tahun 2018 tentang Layanan pengadaan Secara Elektronik. Layanan Pengadaan Secara Elektronik dalam menyelenggarakan sistem pelayanan Pengadaan Barang/Jasa secara elektronik juga wajib memenuhi persyaratan sebagaimana yang ditentukan dalam Undang-undang Nomor 11 Tahun 2008 tentang Informasi dan Transaksi Elektronik.

SPSE (Sistem Pengadaan Secara Elektronik)
SPSE merupakan aplikasi e-Procurement yang dikembangkan oleh Direktorat Pengembangan Sistem Pengadaan Secara Elektronik – LKPP untuk digunakan oleh Layanan Pengadaan Secara Elektronik di seluruh K/L/PD. Aplikasi ini dikembangkan dengan semangat efisiensi nasional sehingga tidak memerlukan biaya lisensi, baik lisensi SPSE itu sendiri maupun perangkat lunak pendukungnya.
SPSE dikembangkan oleh LKPP bekerja sama dengan:
1. Badan Siber dan Sandi Negara (BSSN) untuk fungsi enkripsi dokumen;

logo_bssn
2. Badan Pengawasan Keuangan dan Pembangunan (BPKP) untuk sub sistem audit.

bpkp_logo

 

LKPP (Lembaga Kebijakan Pengadaan Barang/Jasa Pemerintah)

foto-lkpp
Lembaga Kebijakan Pengadaan Barang/Jasa Pemerintah (LKPP) merupakan Lembaga Pemerintah Non Departemen yang berada di bawah dan bertanggung jawab kepada Presiden dan dibentuk berdasarkan Perpres No 106 tahun 2007.
LKPP merupakan lembaga pemerintah satu-satunya yang mempunyai tugas melaksanakan pengembangan dan perumusan kebijakan pengadaan barang/jasa Pemerintah, dan dalam melaksanakan tugas dan fungsinya LKPP dikoordinasikan oleh Menteri Negara Perencanaan Pembangunan Nasional.

SIKaP (Sistem Informasi Kinerja Penyedia)

Aplikasi yang merupakan subsistem dari SPSE yang digunakan untuk mengelola data/informasi mengenai data kualifikasi Pelaku Usaha dan riwayat kinerja Penyedia Barang/Jasa.

Akhdani Tech Talk 2021 Series #2 – Smarthome

Masalah dan Ide

Pada zaman sekarang, dimana internet sudah menjadi hal yang lumrah bagi banyak orang, membuat teknologi ini dimanfaatkan dalam berbagai aspek untuk mempermudah pekerjaan sehari-hari. Salah satu penerapannya adalah smarthome, sekarang banyak perangkat-perangkat yang berada dirumah dan dapat di-Monitoring dan dikontrol secara lebih mudah melalui aplikasi mobile atau web dari jarak jauh dengan memanfaatkan jaringan internet. Tujuan dari smarthome ini adalah untuk mempermudah pekerjaan yang sebelumnya harus dilakukan secara manual dan berada di rumah, menjadi lebih efisien dan bisa dilakukan dari jarak jauh. Hal ini tentu saja membuat penghematan daya lebih maksimal, meningkatkan keamanan dan juga kenyamanan penghuni rumah. Smarthome sendiri merupakan sistem yang telah diprogram dan dapat bekerja dengan bantuan komputer untuk mengendalikan sebuah perangkat. Montoring dan kontrol  pada sistem smarthome membutuhkan berbagai macam komponen mulai dari hardware dan software yang terintegrasi. Pada penerapan kali ini perangkat yang digunakan adalah gabungan Lampu i-Switch dari Anjels, i-Net dari Anjels, Router, dan Server API. Anjels sendiri merupakan perusahaan yang menyediakan produk-produk IoT dan juga sebagai konsultan IoT.

Rencana Implementasi

Mengatur lampu melalui smartphone

schematic-document-page-1

Berikut ini merupakan skema pemasangan wireless control system pada lampu :

  1. Smarthome App (Smartphone)
    • Menerima status terkini dari Server API
    • Mengirimkan perintah konfigurasi lampu ke Server API
  2. Server API
    • Menerima perintah konfigurasi dari Smarthome App, kemudian Meneruskan perintah konfigurasi ke I-Net
    • Menerima status terkini lampu melalui I-Net, kemudian meneruskan status status terkini lampu ke Smarthome App
  3. I-Net
    • Menerima perintah dari Server API atau Voice Bridge dan mengirim konfigurasi ke I-Switch untuk penggunaan lampu.
  4. I-Switch
    • Menerima perintah dari I-Net, kemudian mengatur lampu sesuai perintah yang diterima
  5. Router
    • Menyediakan jaringan internet agar dapat diakses oleh publik

 

Cara Pemakaian dan Contoh

Contoh penggunaan dari sistem smarthome ini terdiri dari dua jenis, yaitu untuk monitoring, dan yang kedua untuk kontrol.

1. Hardware setup

  • Sambungkan i-Net dengan router yang tersambung koneksi internet
  • Sambungkan Server API dengan router yang satu jaringan dengan i-Net
  • Siapkan aplikasi smarthome app, bisa berupa web/mobile yang tersambung dengan koneksi internet

2. Software Setup

  • Install i-Net configurator
  • Untuk menambahkan device baru, buka i-Net configurator dan pilih menu Edit Devices (No. 10)

home-anjels

  • Kemudian pilih Add Device (B)

add-device-anjels

  • Setelah itu akan muncul device id yang tersedia, isi flied sesuai yang diinginkan dan pilih Save
  • Untuk mengakses device yang sudah didaftarkan, akses melalui

http://192.168.1.81:8181/device.cgi?dev={id_device}&cmd={command}. Id_device adalah id_device yang sudah didaftarkan sebelumnya, cmd adalah perintah yang di-request ke device.
Contoh untuk melihat status lampu :

http://192.168.1.81:8181/device.cgi?dev=2&cmd=128

Response dari comman ini adalah string angka 152 = on, 144 = off

  • Untuk contoh penerapan kali ini akan menggunakan sistem yang sedang dikembangkan untuk suatu apartemen, Server API menggunakan Java Spring Boot yang akan menerima request dengan parameter device id dan command, kemudian Server API akan mengirim url beserta parameter tersebut sesuai format berikut :
    http://192.168.1.81:8181/device.cgi?dev={id_device}&cmd={command}.
    Setelah itu response dari i-Net berupa string angka 1 = sukses, -1 = gagal.
    Pada sisi pengguna, aplikasi menggunakan Android Native. Untuk mengontrol lampu, dapat dilakukan dengan 2 metode :

    1. Mengatur lampu nyala atau mati
    2. Mengatur lampu sesuai kecerahan (jika lampu mendukung)

    whatsapp-image-2021-03-05-at-10-14-13-am

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. :)