Mengenal Low-code Platform Technology : Outsystems

Gema Chrisdwianto
Arunatech
Published in
6 min readOct 31, 2022
Low-code Technology Platform

Outsystems merupakan sebuah low-code platform untuk mengembangkan aplikasi mobile, web, ataupun hybrid. Low-code platform memungkinkan developer untuk mengembangkan aplikasi tanpa terlalu banyak menulis kode program. Pembuatan aplikasi di Outsystems dapat dilakukan dengan cepat menggunakan berbagai macam component yang dapat di-drag & drop pada tampilan aplikasi.

Untuk membuat aplikasi menggunakan Outsystems, kita harus membuat akun untuk mendapatkan personal environment yang berbasis cloud server sebagai tempat publish dari aplikasi yang kita buat. Setelah itu install Outsystems Service Studio yang bisa didapatkan di website resmi www.outsystems.com. Versi Outsystems pada saat ini adalah 11.53.18.61343.

Halaman utama Outsystems Service Studio

Setup New Application

Untuk membuat aplikasi baru pilih menu New Application. Kemudian pilih jenis aplikasi apa yang ingin dibuat. Pada artikel ini kita akan menggunakan Reactive Web App.

Setelah itu masukkan informasi yang dibutuhkan seperti nama dan deskripsi aplikasi. Kemudian buat modul dan pilih tipe modul berupa Reactive Web App. Kita dapat membuat lebih dari satu modul sesuai dengan kebutuhan aplikasi. Setelah membuat modul maka akan muncul antar muka aplikasi.

Untuk membuat Screen baru, klik kanan pada menu MainFlow kemudian pilih Add Screen, kemudian pilih template yang diinginkan dan tambahkan nama dari Screen tersebut. Screen yang pertama kali dibuat akan secara langsung sebagai Home Screen yang ditandai dengan icon Home.

Antar muka screen

Database

Pada saat kita membuat modul, kita sudah disediakan sebuah database yang dapat diakses pada menu Data. Database tersebut disimpan di personal environment. Outsystems juga memungkinkan kita untuk menggunakan database eksternal. Untuk membuat tabel baru, klik kanan pada Database dan pilih Create Entity, secara default akan terdapat satu variabel bernama Id sebagai primary key dari Entity tersebut. Kita juga dapat menambahkan beberapa Attribute di dalam suatu Entity.

Setelah membuat Entity, maka secara otomatis akan disediakan Server Action untuk memanipulasi data pada entity tersebut seperti create, update, dan delete.

Entity beserta attribute dan Server Action

Data Grid Beserta Pagination

Kita dapat dengan mudah membuat data grid dari suatu entity dengan cara drag entity tersebut ke screen. Secara otomatis akan dibuatkan component berupa Table beserta pagination dibawahnya. Serta ada penambahan local variable yang ditandai dengan icon berupa kotak berwarna kuning dan client action yang ditandai dengan icon berupa lingkaran putih dengan outline merah. Hasilnya akan terlihat seperti berikut :

Grid data beserta pagination

Secara otomatis juga terdapat sebuah Aggregate yang bernama GetMovies. Aggregate tersebut berfungsi untuk melakukan fetch data yang terdapat pada entity movie di database yang akan ditampilkan pada data grid.

Component

Outsystems menyediakan berbagai macam component yang lengkap. component yang dipilih cukup di-drag kemudian di-drop ke screen sesuai dengan kebutuhan.

Drag and drop pada component Text

Kita juga dapat melakukan styling untuk suatu component dengan fitur styles seperti mengatur font, margin, size, dan lainnya.

Publish Aplikasi

Kita dapat melakukan publish kapan saja dari aplikasi dengan cara klik tombol 1-Click Publish selama tidak ada error pada aplikasi tersebut.

Tombol 1-Click Publish

Proses publish dapat dilihat pada tab 1-Click Publish dan tertera URL untuk mengakses aplikasi tersebut. Cara lain untuk mengakses aplikasi adalah dengan klik tombol Open In Browser

Tab 1-Click Publish

Membuat Input Form

Membuat input Form dari suatu entity dapat dengan mudah dilakukan dengan cara drag component form ke screen, kemudian drag entity ke dalam component form.

Pada kasus ini input Form diletakkan di Screen MovieDetail.

Drag Entity ke component Form

Secara otomatis component Input sudah dibuatkan sesuai dengan attribute yang dimiliki oleh entity tersebut beserta button save yang akan kita gunakan untuk menyimpan data ke database.

Selain itu terdapat sebuah input parameter yang bernama MovieId, parameter ini dimaksudkan untuk menampung Movie Id yang dikirim dari screen lain. Sebuah aggregate juga otomatis ditambahkan dengan nama GetMoviesById, Aggregate ini bertindak layaknya variabel bertipe object yang digunakan untuk fetch data dari database sekaligus tempat menyimpan data yang di-input dan kemudian disimpan ke database.

Button save masih dalam keadaan error karena On Click pada button tersebut belum didefinisikan.

Client Action

Client action digunakan untuk menjalankan serangkaian flow logic sesuai dengan kebutuhan bisnis yang dilakukan di sisi client. Client action dapat dibuat dengan cara klik kanan pada screen dan pilih add client action. Cara lainnya adalah dengan menambahkan client action pada bagian on click dari suatu button. Setelah itu sebuah client action baru akan terbuat.

Pilih New Client Action untuk membuat sekaligus mengarahkan button ke Client Action tersebut

Isi dari client action tersebut akan terlihat seperti gambar berikut.

Isi Client Action

Secara otomatis terdapat sebuah component bertipe If yang berfungsi untuk form validation. Tambahkan Server Action CreateOrUpdateMovies dengan cara drag ke flow di Client Action, kemudian set Source dari server action tersebut dengan GetMovieById.List.Current. Terakhir, tambahkan component Destination setelah proses CreateOrUpdateMovies dan arahkan ke screen movie.

Drag Server Action ke dalam flow Client Action

Link Antar Screen

Untuk dapat mengakses Screen lain maka dibutuhkan sebuah link. Pada kasus ini kita akan membuat link dari Component Title pada data grid yang terdapat di Screen Movie untuk menuju ke Screen MovieDetail. Untuk membuat link tersebut klik kanan pada Component kemudian arahkan kursor ke link to dan pilih Screen yang sesuai.

Menambahkan link to

Karena pada Screen MovieDetail terdapat sebuah Input Parameter, maka di dalam Event On Click pada Link tersebut terdapat parameter MovieId. Kemudian isikan parameter MovieId dengan GetMovies.List.Current.Movie.Id. Parameter tersebut digunakan di Screen MovieDetail untuk menerima data sesuai dengan Id yang diberikan, kemudian data tersebut ditampilkan di Input Form dan dapat di-update.

Isi parameter MovieId

Cara lain untuk membuat link adalah menggunakan Component Button, kemudian sertakan aksi pada bagian On Click. Pada kasus ini Component Button akan menuju ke Screen MovieDetail namun mengirimkan parameter berupa NullIdentifier() karena kita ingin menambahkan data baru.

Parameter Null

Ringkasan

Pembuatan aplikasi menggunakan Outsystems bisa dilakukan dengan cepat tanpa memerlukan coding sedikitpun. Fitur dan Component yang disediakan cukup lengkap untuk memenuhi kebutuhan bisnis. Disamping kecepatan dan kemudahan, Outsystems memiliki beberapa kelemahan seperti tidak dapat membuat Stored Procedure. Secara keseluruhan, Outsystem sangat cocok untuk perusahaan yang ingin melakukan digital transformation secara cepat.

--

--