ANALISIS KEMAMPUAN WEBRATIO UNTUK PENGEMBANGAN APLIKASI WEB MENGGUNAKAN INTERACTION FLOW MODELING LANGUAGE (IFML)

(1)

*Penulis Korespondensi

Diterima : Agustus 2020. Disetujui : Agustus 2020. Dipublikasikan : September 2020

1

ANALISIS KEMAMPUAN WEBRATIO UNTUK

PENGEMBANGAN APLIKASI WEB MENGGUNAKAN

INTERACTION FLOW MODELING LANGUAGE (IFML)

Analysis of WebRatio Ability for Web Application Development Using

Interaction Flow Modeling Language (IFML)

Joe Lian Min*

Jurusna Teknik Komputer dan Informatika, Politeknik Negeri Bandung Email Korespondensi : joelianmin@jtk.polban.ac.id

Abstrak. Metode model-driven development (MDD) merupakan salah satu metode yang dapat mempercepat proses pengembangan aplikasi. Dengan metode ini, model yang dibuat dapat langsung ditransformasi menjadi aplikasi yang dapat dijalankan. Salah satu pendekatan MDD adalah model driven architecture (MDA). MDA mempunyai standar bahasa pemodelan yang dipakai untuk memudahkan proses transformasi. Salah satu bahasa pemodelan pada MDA adalah Interaction Flow Management Language (IFML). IFML memodelkan sebuah aplikasi berdasarkan alur interaksi serta interface dari aplikasi tersebut. Tulisan ini menjelaskan kemampuan WebRatio (sebuah tools yang menjalankan IFML) dalam pengembangan Aplikasi Web, serta efektivitasnya yang dihitung dari effort yang diperlukan untuk pengembangan. Effort dihitung dari line of code (LOC) yang dihasilkan dari model yang dibuat. Uji coba dilakukan di lab rekayasa perangkat lunak Polban, dengan mengembangkan aplikasi web shop, yang memiliki

beberapa

requirement functional

dan

non-functional

.

Hasil pengukuran menunjukkan untuk mengembangkan

web shop

, effort yang

diperlukan cukup efisien, yaitu hanya 13% dari keseluruhan aplikasi. Namun

demikian, masih perlu dilakukan studi lain karena terdapat banyak variabel yang

memengaruhi produktivitas pengembangan aplikasi.

Kata Kunci. Model-driven development, interaction flow modeling language, WebRatio, model-drivent architecture

Abstract. The model-driven development (MDD) method is a method that can accelerate the application development process. With this method, the model can be immediately transformed into an executable application. Model-driven architecture is one kind of MDD approaches. MDA has a standard modeling language that is used to facilitate the transformation process. One of the modeling languages in MDA is Interaction Flow Management Language (IFML). IFML models an application based on the interaction flow and interface of the application. This paper explains the capabilities of WebRatio in developing Web applications and their effectiveness. The effectiveness is calculated from the effort required for the development. On the other side, the effort is calculated from the line of code (LOC) generated from the model. The experiment's case study is a simple web-shop application, with some functional and non-functional requirements. The measurement results show that to develop a web-shop, the effort required is quite efficient, only 13% of the total application. However, another study still needs to be done because many variables affect the productivity of application development. Keyword: Model-driven development, interaction flow modeling language, WebRatio, model-drivent architecture

(2)

2

1. PENDAHULUAN

Perusahaan yang bergerak di bidang pengembangan perangkat lunak membutuhkan teknik pengembangan, agar perangkat lunak dapat segera dirilis tanpa mengorban-kan kualitas perangkat lunak tersebut. Salah satu konsep pada pengembangan perangkat lunak yang dapat memenuhi kebutuhan tersebut adalah model driven development

(MDD)

.

MDD adalah suatu konsep pe-ngembangan menggunakan model dengan mendeskripsikan suatu rancangan, secara detail sehingga memungkinkan untuk melakukan transformasi model ke kode implementasi secara otomatis (Stahl, Thomas ; Völter, 2006).

Object management group (OMG) mene-tapkan suatu standar pendekatan pengem-bangan MDD yaitu model driven archite-cture (MDA). Arsitektur MDA membagi pemodelan menjadi dua level: 1) platform independent model (PIM), yaitu level model yang merepresentasikan fungsi-fungsi bisnis tanpa memperhatikan platform yang akan digunakan, dan 2) platform specific model

(PSM) yaitu pemodelan yang merepresen-tasikan fungsi bisnis yang diimplementasi pada platform atau teknolo-gi tertentu. Model PSM dapat ditrans-formasi ke suatu kode pada platform terkait secara otomatis sehingga dapat mereduksi waktu pengerjaan suatu aplikasi, serta menjamin fleksibilitas

platform atau teknologi yang dipakai(OMG) (Chansuwath & Senivongse, 2016; Noureen, Amjad, & Azam, 2016)

Model yang mendeskripsikan suatu aplikasi memiliki standar bahasa, elemen, serta aturan tertentu yang disepakati oleh para pengembang perangkat lunak. Interaction flow modeling language (IFML) adalah salah satu bahasa pemodelan yang terdapat pada standar MDA. IFML mendeskripsikan

aplikasi khususnya pada bagian front-end

atau user interface pada sistem IFML. Dengan IFML, developer dapat memodel-kan alur interaksi serta interface pada suatu sistem dengan mudah dan dapat dipahami tanpa harus mempelajari struktur teknologi yang digunakan pada sistem tersebut. Salah satu jenis aplikasi yang dapat dimodelkan oleh IFML adalah aplikasi web, yang berkembang sangat pesat dalam beberapa dekade terakhir. Aplikasi web saat ini dapat menyediakan beragam informasi serta berkembang menjadi berbagai fungsi, misalnya pada sebuah ecommerce, portal berita, reservasi, dan lain-lain (Schmid & Rossi, 2004). Mengiringi fenomena tersebut, saat ini telah banyak studi yang membahas proses perancangan suatu web aplikasi menggunakan berbagai pendekatan (Mubin, et al., 2016).

WebRatio merupakan

tools

yang

dikem-bangkan untuk MDD (Brambilla & Butti,

2014). WebRatio mengadopsi IFML

sebagai

bahasa

pemodelan

dalam

perancangan aplikasi dan dapat melaku-

kan transformasi secara otomatis dari

model IFML menjadi

source code

yang

dapat dieksekusi. Proses transformasi

secara otomatis menyebabkan fase

pembuatan kode atau fase implementasi

dapat dihilangkan. Gambar 1 adalah Alur

metode MDA menggunakan WebRatio.

Dalam melakukan estimasi biaya serta pengelolaan kualitas perangkat lunak, effort

yang dilakukan oleh pengembang merupa-kan salah satu parameter yang dibutuhmerupa-kan (V. Nguyen, S. Deeds-Rubin, 2007). Pada metode MDD, Bettin (Bettin, 2003) mengajukan suatu pengukuran dengan mengukur satuan pemodelan yang dibuat oleh pengembang. Model-model yang dibuat dapat diukur dengan satuan pemodelan

(3)

3

Atomic Model Element (AME). Effort pada pengembangan MDD dapat diukur dengan metode yang diajukan oleh Bettin. Dengan melakukan pengembangan menggunakan

MDD, effort yang diperlukan seharusnya dapat berkurang karena adanya proses automasi pada tahap implementasi.

Gambar 1. Alur metode MDA menggunakan WebRatio

Telah banyak studi yang dilakukan pada WebRatio atau MDD secara umum, serta bahasa pemodelan seperti IFML. Brambilla (Brambilla & Fraternali, 2014) memaparkan

lesson learned penggunaan WebRatio setelah menggunakannya dalam kasus nyata, yaitu berupa pengembangan aplikasi web dalam scala besar. Brambilla juga menguraikan berbagai story success serta evaluasi secara kuantitatif terhadap kemampan Webratio. Roubi (Roubi, Erramdani, & Mbarki, 2016) dalam penelitiannya mengusulkan pendekatan untuk pembuatan model rich internet application (RIA) menggunakan IFML. RIA memanfaatkan IFML yang diadopsi oleh object management group (OMG) dengan terlebih dahulu memperluas bagian grafis dari model meta data agar sesuai dengan kebutuhan RIA. Di sisi lain

Rasheed (Rasheed, Azam, Anwar, & Tufail, 2019) menelaah penerapan model-driven architecture (MDA) untuk pembuatan aplikasi storyboard metamodel, secara khusus dalam kajian user interface pada aplikasi berbasis web. Penerapan metamodel tersebut menghasilkan storyboard sederhana dan storyboard kompleks yang dapat diubah menjadi prototipe evolusioner dari sisi tertentu.

Roubi menggunakan framework dan teknologi yang dikenal dalam rekayasa berbasis model (model-based), seperti Eclips Modeling Framewrok (EMF) untuk meta model, query view transformation (QVT) untuk transformasi model, dan Acceleo untuk meng-generate source code. Pendekatan ini memungkinkan RIA bekerja dengan cepat

(4)

4 dan efisien pada aplikasi grafis. Sementara

itu, Mubin et. al. (Mubin, et al., 2016) merangkum 5 poin yang mewakili jenis perancangan pada sebuah aplikasi web yaitu

user requirement, conceptual design, complex process design, navigational design,

serta presentation design.

Tulisan ini merupakan studi untuk melihat kemampuan Webratio dalam mengimple-mentasikan sebuah aplikasi Web, melalui model yang dirancang menggunakan MDD dengan pendekatan IFLM. Selanjutnya, dilakukan analisis untuk melihat rasio effort

yang dilakukan oleh pengembang. Secara formal research question pada studi yang dilakukan adalah:

1. Bagaimana proses pengembangan sebuah aplikasi web menggunakan WebRatio dengan pendekatan MDA dan bahasa pemodelan Interaction Flow (IFML). 2. Berapa rasio perbandingan effort

pengembangan menggunakan MDD pada aplikasi web yang dikembangkan dengan WebRatio dengan tanpa WebRatio.

2. METODE

Terdapat

beberapa

aktivitas

yang

dilakukkan untuk menjawab

research

question

.

Analisis MDA di WebRatio

Proses pengembangan MDA, dibagi ke

dalam beberapa aktivitas yaitu

(Stahl, Thomas ; Völter, 2006)

:

1. Application analysis

Tahap application analysis merupakan tahap untuk menganalisis requirement

baik requirement fungsional dan non-fungsional, data yang dibutuhkan, serta proses-proses pada aplikasi yang akan dibangun. Untuk mendeskripsikan

requirement tersebut, aplikasi dimodel-kan menggunadimodel-kan suatu bahasa pemodel-an. Metode pengembangan tradisional

biasanya menggunakan UML Use Case

untuk menjelaskan requirement aplikasi. Pada UML, Activity Diagram menjelas-kan proses, Domain Model menjelaskan data. Dalam studi ini analisis studi kasus dideskripsikan oleh model-model tersebut, namun dalam perancangan aplikasi menggunakan IFML sebagai model utama.

2. Domain Architecture Development

Pada WebRatio, Modelling Language

yang dipakai adalah IFML yang telah diextend untuk platform aplikasi web, serta untuk pemodelan data menggu-nakan UML Domain Model. Tahap pengembangan domain architecture

sebenarnya dapat dilewati karena

Webratio telah menyediakan standar

template serta mapping untuk aplikasi

web. Akan tetapi jika developer ingin menggunakan template sendiri, atau terdapat fungsi yang ingin ditambahkan, maka WebRatio mengatur dan membagi proses tersebut menjadi dua bagian, yaitu component dan style. Pada studi ini dilakukan dengan membuat template sendiri.

3. Modeling

Tahap modeling merupakan tahap perancangan aplikasi dengan membuat model yang dapat ditransformasi ke kode (source code). Rancangan aplikasi serta model dibuat berdasarkan requirement

yang telah didefinisikan pada tahap

Application Analysis. Pada tahap ini dapat terjadi iterasi kembali ke tahap Domain Architecture Development, jika belum terdapat model yang mendeskrip-sikan fungsi atau komponen tertentu dari aplikasi. Pada pengembangan aplikasi web menggunakan WebRatio, model ini dibagi menjadi dua kelompok utama yaitu domain model dan IFML.

Aplikasi untuk Studi Kasus

Aplikasi untuk studi kasus yaitu berupa aplikasi web shop yang menyediakan penjualan barang berupa furniture.

(5)

5 Perancangan dilakukan pada hal-hal berikut:

1. User Requirement Design

Lingkup serta fungsi pada studi kasus menggunakan 5 jenis perancangan aplikasi web yang diajukan Mubin et. al. (Mubin, et al., 2016). Informasi untuk

requirement dari aplikasi dimodelkan pada perancangan ini. Lingkup user requirement yaitu:

• Pemodelan role user serta pembagian serta pembatasan proses yang dapat dilakukan oleh role tertentu

• Pemodelan fungsi-fungsi bisnis aplikasi web shop

2. Conceptual Design

Lingkup proses-proses yang dilakukan pada pengembangan aplikasi yaitu:

• Perancangan data meliputi tipe data, atribut pada suatu kelompok data, serta relasi antar data. Contoh pada web shop untuk studi kasus ini yaitu data produk dan relasinya, serta data toko.

• Proses create, read, update, delete

(CRUD) suatu kelompok data. Proses CRUD meliputi proses CRUD yang melibatkan satu entity pada database, CRUD yang melibatkan relasi data satu ke banyak (one to many relationship), serta CRUD yang melibatkan relasi banyak ke banyak (many to many relationship).

• Proses validasi input suatu data. Validasi dapat berupa validasi field

yang harus diisi, validasi input data dengan tipe data tertentu (contoh validasi dengan tipe data tanggal).

• Proses pencarian data dengan kata atau

parameter tertentu. 3. Complex Process Design

Jenis perancangan ini menjelaskan perancangan untuk fungsi dan proses kompleks yang terdapat pada aplikasi web shop. Fungsi serta proses yang dilakukan yaitu:

• Pembagian fungsi serta proses yang dapat diakses untuk role user tertentu.

• Proses asynchronous pada aplikasi web, yatu pembaruan (update) suatu halaman web tanpa harus memuat ulang halaman tersebut

• Proses bisnis pembelian suatu barang. User harus terdaftar dan melakukan proses autentifikasi terlebih dahulu. Kemudian user

memilih barang yang ingin dibeli dan didaftarkan ke sebuah keranjang belanja (add to cart), dan melakukan proses pembelian untuk barang-barang yang terdaftar pada keranjang belanja tersebut ( check-out). Barang-barang serta transaksi kemudian disimpan pada database

aplikasi.

4. Navigational Design

Jenis perancangan pada fase ini mendeskripsikan perancangan navigasi serta alur proses yang dideskripsikan dari fase conceptual design dan

complex process design. Fase ini juga mendeskripsikan link menuju halaman yang dapat diakses oleh user, serta bagaimana pengaksesan link tersebut. 5. User Interface Design

Lingkup perancangan interface yang dilakukan meliputi:

• penyajian suatu kumpulan data dengan satu tipe data (entity) yang sama, serta penyajian data untuk lebih dari satu entity.

• Interface untuk melakukan input

data dengan tipe data tertentu (contoh tipe data gambar, tipe data tanggal).

• Penyajian data untuk tipe data tertentu (contoh tipe data gambar, tipe data tanggal).

Perhitungan Efisiensi

Proses pengukuran atau penghitungan efisiensi dalam pengembangan MDA dilakukan menggunakan pengukuran proses implementasi perangkat lunak yang telah disepakati IT managers dan pengembang

(6)

6 aplikasi. Persamaan 1 adalah perhitungan

efisiensi dalam pengembangan MDA (Bettin,

2003; Huang, Chu, Lin, & Matuschek, 2009).

𝐸𝑓𝑓𝑖𝑐𝑖𝑒𝑛𝑐𝑦 =𝑀𝑜𝑑𝑒𝑙𝑙𝑖𝑛𝑔 𝐸𝑓𝑓𝑜𝑟𝑡+𝑀𝑎𝑛𝑢𝑎𝑙 𝐶𝑜𝑑𝑖𝑛𝑔 𝐸𝑓𝑓𝑜𝑟𝑡_{𝑇𝑜𝑡𝑎𝑙 𝐶𝑜𝑑𝑒} × 100% (1)

Penghitungan efisiensi pengembangan dengan WebRatio diukur dengan menghitung

effort yang dilakukan pada proses pemodelan aplikasi, serta effort yang dilakukan dalam melakukan implementasi secara manual, dibagi dengan total jumlah kode/effort proses implementasi yang terdapat pada aplikasi. Pada pengembangan web shop digunakan

Line of Code (LOC) sebagai alat ukur dalam menghitung effort implementasi dan kode yang dihasilkan, sementara untuk penghitungan effort dalam pembuatan model menggunakan konsep Atomic Model Elements (AME) yang diajukan oleh Bettin (Bettin, 2003). Penggunakan LOC dan AME karena metode ini mempunyai nilai yang jelas serta merupakan satuan yang dipakai untuk mengukur volume atau size dari suatu perangkat lunak (size-oriented software metric) (Huang et al., 2009).

Perhitungan Line Of Code (LoC)

Untuk menghitung efisiensi, terlebih dahulu mengelompokkan line of code (LoC) yang akan dihitung menjadi beberapa kategori:

• Generated Line of Code (GLOC): LOC untuk kode yang digenerate secara otomatis oleh WebRatio dari model yang telah dibuat

• Manually-created Line of Code (MLOC): LOC untuk kode yang dibuat secara manual oleh developer baik yang dibuat pada bagian domain architecture,

maupun yang dimodifikasi setelah kode digenerate.

• Total Line of Code (TLOC): Jumlah total LOC dari aplikasi yang dikembangkan dan siap dieksekusi.

Dengan pembagian kategori di atas, dapat

diketahui persentase kode yang digenerate

oleh WebRatio secara otomatis serta persentase kode yang dibuat secara manual. LOC dapat digunakan untuk menghitung satu baris kode secara fisik maupun secara logic. Untuk style kode yang berbeda, LOC dapat diterapkan secara berbeda pula. Maka dari itu ditetapkan standar perhitungan satu LOC pada masing-masing bahasa. Dalam pengembangan aplikasi ini terdapat beberapa bahasa yang digunakan, yaitu Java, Javascript, dan HTML. Standar perhitungan tersebut adalah (Bettin, 2003; Huang et al., 2009) :

1. HTML & JSP

Perhitungan LOC pada HTML adalah satu set tag dari kode HTML dihitung sebagai satu LOC. Contoh satu set tag HTML adalah: <form> </form> atau <input />.

2. Javascript dan Java

Perhitungan LOC pada Java dan Javascript yaitu tiap baris kode logic dihitung sebagai satu LOC. Struktur satu baris kode logic ini dapat berupa:

a. Selection statements (if, else if, else, “?” operator, try, catch, switch) b. Iteration statements (for, while, do

while)

c. Expression statements: pemanggilan fungsi, assignment.

d. Block delimiters dan braces: contohnya yaitu sepasang braces “{

}” pada pendefinisian suatu fungsi.

Braces pada iteration dan selection statements tidak dihitung.

e. Data declaration.

Perhitungan Atomic Model Element

Atomic model element (AME) adalah satuan pengukuran yang ekuivalen dengan LOC yang diajukan oleh Bettin (Bettin, 2003). AME digunakan untuk mengukur size dalam

(7)

7 pembuatan sebuah pemodelan. AME adalah

satuan unit elemen terkecil pada pemodelan yang dapat dihitung sebagai satu LOC. Pada pengembangan web shop, AME digunakan untuk bahasa pemodelan IFML pada tools

WebRatio. Aturan penghitungan satu AME yang ekuivalen dengan satu LOC pada bahasa pemodelan IFML sebagai berikut:

• Setiap konsep IFML yang digunakan, baik itu view component, view

controller, view component part, dan lain-lain dihitung sebagai satu AME.

• Satu tag XML yang dihasilkan dari suatu konsep pemodelan IFML dapat dihitung sebagai satu AME (Error! Reference source not found.). Pada gambar tersebut, view component tersebut mempunyai 4 tag XML, sehingga dapat dihitung sebagai 4 AME.

Gambar 2. Contoh model view component serta tag XML yang dihasilkan

3. HASIL DAN PEMBAHASAN

Metode MDA berbeda dengan metode tradisional yang mengacu pada pendekatan pengembangan dan pemodelan aplikasi menurut Bettin (Bettin, 2003) serta Stahl et.al. (Stahl & Volter, 2006). Metode tradisional yang dimaksud, yaitu memakai model untuk mendokumentasikan serta mengabstraksikan aplikasi. Untuk implementasi aplikasi tersebut masih dilakukan secara manual, dan dimungkinkan adanya konsep round-trip engineering yang menyesuaikan implementasi dan model dari aplikasi tersebut.hanya

Pada MDD, model tidak hanya berperan sebagai dokumentasi yang mengabstraksikan kerangka aplikasi, tapi benar-benar mengabstraksikan arsitektur aplikasi secara mendetail. Hal ini memungkinkan imple-menttasi atau kode dari suatu aplikasi dapat digenerate secara otomatis dari sebuah model. Dengan mengadaptasi metode MDA, WebRatio melakukan transformasi dari

elemen-elemen model menjadi kode. Hal ini menyebabkan tahap implementasi, yaitu proses pembuatan kode dapat dihilangkan. Namun proses transformasi model menjadi sebuah kode membutuhkan pembuatan model secara spesifik yang benar-benar menjelaskan fungsi aplikasi secara teknis. WebRatio memperluas bahasa pemodelan IFML, sehingga elemen-elemen yang digu-nakan pada pemodelan dapat menjelaskan hal-hal teknis pada pengembangan aplikasi tersebut.

Alur Porses Pengembangan

Alur pengembangan perangkat lunak menggunakan WebRatio dapat mengguna-kan fase proses component based development yang diajukan oleh Qureshi-Hussain dan Alrubaee dkk(Alrubaee, Cetinkaya, Liebchen, & Dogan, 2020; Qureshi & Hussain, 2008). Dalam studinya dijelaskan bahwa perangkat lunak dikembangkan dengan menyusun komponen-komponen yang telah dibuat sebelumnya. Komponen ini berupa elemen-elemen model IFML yang telah diperluas dan disediakan oleh WebRatio. Elemen-elemen model

(8)

8 tersebut mempunyai fungsi dan tujuan

tertentu, terdokumentasi dengan baik, serta dapat digunakan kembali dan mempunyai pengaturan konfigurasi tertentu yang memenuhi kebutuhan aplikasi web pada umumnya. Hal ini dipandang cocok dan memenuhi motivasi dan kriteria proses pengembangan yang diajukan oleh Qureshi dan Hussain, yaitu menciptakan komponen-komponen yang tersimpan pada repository

tertentu sehingga dapat digunakan kembali pada aplikasi-aplikasi yang akan dibangun.

Gambar 1. Alur fase proses yang

diajukan

Qureshi

dan

Hussain

(Qureshi

&

Hussain, 2008).

Terdapat 5 fase yang diajukan oleh

Qureshi dan Hussain (

Gambar 1). Fase proses yang diajukan

tersebut kemudian disesuaikan dengan

pengembangan menggunakan WebRatio.

Fase-fase proses dilakukan pada:

1. Communication

Pada fase ini dilakukan pengumpulan

requirement dengan melakukan komunikasi kepada klien. Dari

requirement

tersebut kemudian dibentuk

usecase awal yang mendefinisikan fungsi-fungsi bisnis yang terdapat pada aplikasi, serta perancangan data yang digunakan. 2. Analysis

Pada tahap ini dilakukan analisis untuk menentukan alur detil dari proses bisnis serta yang telah dirancang pada fase satu. Hasilnya berupa usecase description yang

berisi detil alur masing-masing proses bisnis. Selain itu dilakukan perancangan data serta hubungan antar-data (relationship) yang dimodelkan dengan

Entity Relationship Diagram (ERD). Perancangan ERD dapat dilakukan menggunakan tools WebRatio. ERD ini juga dapat disinkronisasi dengan skema pada Database Management System yang sedang atau akan digunakan sehingga menghemat waktu.

3. Application Design

Setelah alur proses serta perancangan data dideskripsikan secara detil, kemudian dilakukan perancangan masing-masing aplikasi dengan melakukan pemilihan komponen-komponen berupa elemen-elemen yang disediakan oleh WebRatio 4. Domain Architecture Design

Pada tahap ini dilakukan pengembangan domain architecture yaitu pengembangan component serta style dari WebRatio yang akan digunakan. Pengembangan domain architecture dilakukan jika pengembang ingin menambahkan compo-nent di luar yang telah disediakan oleh WebRatio sendiri.

5. Evaluation and Testing

Pada tahap ini dilakukan evaluasi kode yang berhasil ditransformasi oleh WebRatio dengan melakukan pengujian terhadap kode yang berhasil ditrans-formasi tersebut.

Domain Model

Gambar 3 merupakan domain model yang dimodelkan dengan Entity Relationship Diagram (ERD) dan dirancang mengguna-kan WebRatio. Beberapa entity di dalamnya adalah user, group, module, transaction, transaction_item, combination, product, images, category, dan store.

Perancangan User Interface

Gambar 4 mendeskripsikan alur serta perancangan interface pada sebuah usecase.

Area bernama “Manage Category” dibuat untuk mengelompokkan alur serta proses

(9)

9 pada usecase Manage Category. Pada [Area]

tersebut terdapat dua buah elemen [Page] yang mewakili halaman web. [Page] Categories merupakan halaman yang menampilkan data category, sedangkan [Page] Input Category merupakan halaman yang menyajikan form untuk melakukan pengisian data category. Gambar 4 merupakan contoh rancangan UI. Sistem

menampilkan data category serta memberi pilihan add/update/delete category kepada

user, dalam hal ini administrator. Agar fungsi dan halaman pada [Area] ini dapat langsung diakses oleh administrator melalui menu navigasi, property Landmark dari Area

diisi dengan nilai “true” yang ditandakan dengan symbol “L” dan terletak di samping nama Area tersebut.

Gambar 3. Domain Model menggunakan WebRatio

Gambar 4. Model Use Case Manage Category

Penghitungan Efisiensi

Penghitungan efisiensi dilakukan

dengan menghitung

pembuatan model dengan

satuan AME dibandingkan

dengan keseluruhan kode

(dalam LOC) yang

ditransformasi (Bettin,

2003; Huang, Chu, Lin, &

Matuschek, 2009).

Penghitungan pembuatan

model dilakukan dengan

meng-hitung model yang

dibuat pada tampilan

pemodelan WebRatio.

(10)

10

Terdapat dua buah Site

View dan satu Operation

Modules yang dihitung.

Table 1 menunjukkan jumlah keseluruhan model yang dibuat. WebRatio melakukan transformasi pemodelan menjadi sebuah aplikasi web yang dibangun dari bahasa Java dengan framework Struts dan Hibernate pada bagian backend. Pada bagian frontend,

aplikasi dibangun menggunakan JSP serta

HTML dan Javascript. File yang dihasilkan dari proses transformasi oleh WebRatio pada bagian backend hanya file class serta konfigurasi framework Hibernate.

Table 1. Jumlah elemen (AME) yang dihitung pada tiap tampilan pemodelan Nama View Elemen Model Layout Model Total

Administrator Site View 278 362 640

Shop Site View 228 222 450

Operation Modules 352 119 471

Total AME 1561

Table 2. Perhitungan line of code untuk file class dan konfigurasi Hibernate yang dihasilkan

Filename Blank Comment Code

User.java 43 1 161 CartItem.java 37 1 152 Combination.java 37 1 143 Category.hbm.xml 1 1 21 Cart_TotalPriceBean.java 8 1 21 Images.hbm.xml 1 1 18 Total 1920

Untuk bagian

logic,

WebRatio

melakukan transformasi

dengan bentuk

Table 2

menampilkan beberapa contoh hasil

penghitugnan

LOC

untuk

file class

serta

konfigurasi

framework

Hibernate pada

masing-masing Class. Pada bagian

front

-end

menunjukkan beberapa contoh hasil

penghitungan

LOC

pada

file

JSP hasil

transformasi oleh WebRatio.

Penghi-tungan dibagi menjadi dua penghiPenghi-tungan

bahasa, yaitu JSP & HTML serta

Javascript.

Table 4. Penghitungan LOC untuk kode aplikasi bagian front-end

Filename JSP & HTML Javascript

page1.jsp 214 92

page2.jsp 304 89

age4.jsp 197 88

page17.jsp 296 100

Total 7176 2857

Dari tabel 4, total LOC yang dihasilkan dihitung untuk kemudian dibandingkan dengan total model yang dibuat. Table 3 menunjukkan hasil rasio perbandingan antara model yang dibuat dengan total kode yang dihasilkan. Dari data tersebut, dapat disimpulkan bahwa dengan menggunakan pemodelan ini effort yang diperlukan hanya 13% dari keseluruhan aplikasi. Namun demikian, hasil ini belum dapat menjadi tolak ukur produktivitas pengembangan aplikasi menggunakan MDD, karena terdapat banyak variable lain yang mempengaruhi produktivi-tas pengembangan

(11)

11 aplikasi.

Table 3. Hasil penghitungan rasio effort

Jumlah AME 1561

Total LOC 11953

Rasio perbandingan 13%

4. Simpulan dan Saran

Berdasarkan studi kasus yang dikembangkan menggunakan MDA, dapat disimpulkan beberapa hal penting yaitu:

1. Metode pengembangan MDA dengan tools

WebRatio memungkinkan untuk penge

m-bangan prototype aplikasi karena model yang dapat langsung ditransformasi menjadi aplikasi yang dijalankan

2. IFML pada tools WebRatio ini dapat digunakan sebagai model untuk peran-cangan proses bisnis, peranperan-cangan navigasi, serta perancangan user interface dari sebuah aplikasi web

3. Elemen-elemen yang disediakan oleh WebRatio cukup untuk membangun aplikasi dengan beberapa proses yang kompleks.

4. WebRatio menyediakan fitur untuk menambahkan elemen baru jika elemen-elemen yang tersedia dirasa belum dapat mendeskripsikan dan menghasilkan suatu tampilan atau fungsi tertentu pada aplikasi. 5. Berdasarkan nilai rasio yang diperoleh,

effort yang dilakukan untuk implementasi terhadap ukuran aplikasi cukup kecil. Penggunaan MDD dengan WebRatio dapat menghemat tenaga yang dikeluarkan untuk fase implementasi aplikasi.

Dari uraian tersebut dapat dilihat bahwa

Webratio sebagai tools untuk

mengimple-mentasi IFML dapat meningkatkan

efisiensi dalam pengembangan aplikasi

web, khususnya dalam fase implementai.

Saran

Untuk penelitian selanjutnya dapat dilakukan

hal-hal berikut:

1. Pengujian MDD menggunakan WebRatio

terhadap produktivitas pengembangan aplikasi.

2. Perbandingan MDD dengan metode lain untuk mengukur efisiensi serta produktivi-tas pengembagan.

3. Menambahkan cakupan studi kasus yang tidak menggunakan component-component yang disediakan oleh WebRatio, sehingga

effort dalam pembuatan component baru

dapat diukur

Daftar Pustaka

Alrubaee, A. U., Cetinkaya, D., Liebchen, G., & Dogan, H. (2020). A process model for component-based model-driven software development.

Information (Switzerland), 11(6), 1–25. https://doi.org/10.3390/info11060302 Bettin, J. (2003). Model-Driven Architecture

Implementation & Metrics. SoftMetaWare, Ltd.

Brambilla, M., & Fraternali, P. (2014). Large-scale Model-Driven Engineering of web user interaction: The WebML and WebRatio experience. Science of Computer Programming, 89(PART B), 71–87.

https://doi.org/10.1016/j.scico.2013.03. 010

Chansuwath, W., & Senivongse, T. (2016). A model-driven development of web applications using AngularJS framework. 2016 IEEE/ACIS 15th International Conference on Computer and Information Science, ICIS 2016 - Proceedings.

https://doi.org/10.1109/ICIS.2016.7550 838

Huang, Y. C., Chu, C. P., Lin, Z. A., & Matuschek, M. (2009). Transformation from web PSM to code. Proceedings: DMS 2009 - 15th International

Conference on Distributed Multimedia Systems, (January), 16–19.

Noureen, A., Amjad, A., & Azam, F. (2016). Model Driven Architecture - Issues, Challenges and Future Directions.

(12)

12

https://doi.org/10.17706/jsw.11.9.924-933

Qureshi, M. R. J., & Hussain, S. A. (2008). A reusable software component-based development process model. Advances in Engineering Software, 39(2), 88–94. https://doi.org/10.1016/j.advengsoft.20 07.01.021

Rasheed, Y., Azam, F., Anwar, M. W., & Tufail, H. (2019). A model-driven approach for creating storyboards of web based user interfaces. ACM International Conference Proceeding Series, 169–173.

https://doi.org/10.1145/3348445.33484 65

Roubi, S., Erramdani, M., & Mbarki, S. (2016). Extending graphical part of the interaction Flow Modeling Language to generate Rich Internet graphical user interfaces. MODELSWARD 2016 - Proceedings of the 4th International Conference on Model-Driven Engineering and Software

Development, (Modelsward), 161–167. https://doi.org/10.5220/0005650601610 167

Stahl, Thomas ; Völter, M. (2006). Model-Driven Software Development:

technology, engineering, management. J. Wiley & Sons.

V. Nguyen, S. Deeds-Rubin, T. T. dan B. B. (2007). A SLOC Counting Standard. California: Center for Systems and Software Engineering.