Month: July 2018

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 text “Male“.

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. 🙂