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()
}

Mengenal SEO

SEO, SEO, SEO, apa itu SEO? Search Engine Optimization atau biasa disingkat SEO adalah sebuah proses agar sebuah website dapat dikenali oleh search engine seperti google. Tujuan utama dari SEO adalah website muncul pada halaman pertama pada suatu search engine, atau lebih baiknya lagi berada pada halaman pertama dan baris pertama. Dikarenakan SEO adalah sebuah proses, diperlukan langkah agar sebuah website dapat dikenali oleh search engine.

Apakah perlu SEO? Bagi para pengusaha yang websitenya ingin dilihat oleh orang banyak tentunya SEO sangat diperlukan. Sebagai contoh seorang pengusaha sabun memiliki webiste dengan nama sabunx. Agar sabunnya terjual melalui website tentunya website tersebut harus diketahui oleh orang lain. Bagaimana cara orang lain mengetahui website tersebut? tentunya melalui search engine. Orang yang ingin membeli sabun pertama mencari melalui search engine dengan kata kunci misalnya “jual sabun”. Search engine menampilkan list website yang berkaitan dengan kata kunci “jual sabun”. Orang yang ingin membeli sabun pertama kali tentunya akan melihat pada halaman pertama baris pertama. Apa yang terjadi apabila website sabunx yang dimiliki oleh pengusaha tersebut tidak berada pada halaman pertama baris pertama? tentunya produk yang dijual oleh pengusaha tersebut tidak akan laku. Dari contoh tersebut, SEO menjadi hal yang sangat penting bagi suatu website agar selalu muncul ketika seseorang mengetikan suatu kata kunci pada search engine.

Terdapat beberapa cara agar website dapat muncul di halaman pertama pada suatu search engine. Cara tersebut bisa dilakukan dengan cara melakukan perubahan pada halaman website agar search engine dapat mengenali website berdasarkan kata kunci yang dicari oleh pengguna. Perubahan pada halaman website tersebut berada pada bagian nama domain, title tag, meta description tag, kategori dan sub kategori halaman, url, heading, alt dari suatu image, isi halaman (body), tautan external kepada website yang sudah terkemuka.

Selain dengan cara melakukan perubahan pada halaman website, cara lainnya adalah dengan cara melakukan backlink. Backlink adalah menuliskan nama website kepada website lain. Pengusaha sabun memiliki website sabunx.com, lalu nama website tersebut dituliskan kolom komentar pada website terkenal yang berkaitan dengan sabun. Hal tersebutlah yang dinamakan backlink.

Seberapa Besar tingkat SEO Anda? Ada banyak tools yang dapat digunnakan untuk memeriksa seberapa tinggi SEO yang ada pada suatu website misalnya https://neilpatel.com/seo-analyzer/, https://sitechecker.pro/, atau https://seositecheckup.com. Tools-tools tersebut memberikan info mengenai apa yang kurang dari SEO yang sudah diterapkan pada suatu website misalnya kurangnya meta description, atau alt pada suatu gambar. Namun seberapa tinggipun skor SEO pada website pada tools-tools tersebut, tentunya tidak menjanjikan bahwa website tersebut akan ada pada halaman pertama atau baris pertama pada suatu search engine.

Teruslah update website dengan konten yang relevan, sering-sering menggunakan cara backlink agar website menjadi populer agar posisi website berada pada halaman pertama suatu search engine.

Sumber:

http://semseomanagement.com/apa-itu-seo/

https://www.shoutmeloud.com/backlink.html

Perbedaan React Native CLI dan Create React Native App

Pada postingan Membangun Mobile Apps dengan React Native, dijelaskan betapa mudahnya memulai proyek dengan React Native.

$ create-react-native-app my-app

create-react-native-app atau CRNA adalah cara termudah untuk membuat aplikasi React Native baru tanpa menginstal Xcode dan Android Studio.

Karena Anda tidak membuat kode native saat menggunakan CRNA untuk membuat proyek, tidak mungkin menyertakan modul native yang ditulis di Java dan Objetive-C.

Jika melihat struktur folder-nya, Anda tidak menemukan folder android atau ios pada proyek ini.

crna

Sehingga, untuk kebutuhan publish aplikasi ke Play Store atau App Store dan menggukan library yang tidak tersedia, Anda harus melakukan eject pada aplikasi yang dibuat dengan CRNA dengan command berikut:

$ react-native eject

Kelebihan

  • Setting yang mudah
  • Berbagi aplikasi yang masih tahap development melalui QR Code atau link
  • Dapat menggunakan library dasar bawaan Expo
  • Dapat membuat file .apk ataupun .ipa

Kekurangan

  • Tidak dapat menambahkan modul native
  • Tidak dapat menambahkan library yang ditulis dalam Java dan Objetive-C

Lalu, apa ada cara lain untuk membuat aplikasi tanpa melakukan eject? Jawabannya, bisa dengan React Native CLI menggunakan command  berikut:

$ react-native init my-app

Tapi dengan ini, tentu Anda membutuhkan Android Studio dan XCode untuk menjalankan proyek.

Kelebihan

  • Dapat menambahkan modul native yang ditulis dalam Java dan Objetive-C

Kekurangan

  • Membutuhkan Android Studio dan Xcode
  • Tidak dapat mengembangkan aplikasi untuk iOS tanpa Mac

Semua tergantung kebutuhan Anda :D

 

Referensi:

Berkenalan Dengan Javascript Arrow Function

Kali ini kita akan mengenal salah satu fitur Javascript yang ditambahkan sejak EcmaScript 6, yaitu arrow function.

Arrow function adalah sintak penulisan fungsi yang bisa dibilang lebih singkat, menggunakan token baru yaitu “=>”, fungsi yang dideklarasikan menggunakan panah ini bersifat anonim. Mirip lambda arrow operator di bahasa lain. Dengan arrow function kita bisa menulis fungsi tanpa menggunakan kata kunci “function”, “return”, dan kurung kurawal. Oke mari kita langsung saja membahas sedikit.

Sintak banyak parameter:

// ES5
var multiplyES5 = function(x, y) {
  return x * y;
};

// ES6
var multiplyES6 = (x, y) => { return x * y };

console.log(multiplyES6 (2,3));  // 6

Berhubung contoh fungsi multiplyES6 di atas hanya satu ekspresi, maka bisa disingkat lagi:

var multiplyES6 = (x, y) => x * y;

console.log(multiplyES6 (2,3));  // 6

 

Sintak satu parameter:

Jika parameter hanya satu, tidak wajib menggunakan tanda kurung.

//ES5
var phraseSplitterEs5 = function phraseSplitter(phrase) {
  return phrase.split(' ');
};

//ES6

var phraseSplitterEs6 = phrase => phrase.split(" ");

console.log(phraseSplitterEs6("ES6 Awesomeness"));  // ["ES6", "Awesomeness"]

 

Sintak tanpa parameter:

//ES5
var docLogEs5 = function docLog() {
    console.log(document);
};

//ES6
var docLogEs6 = () => { console.log(document); };

docLogEs6(); // #document... <html> ….

 

Sintak returnnya object:

Jika return object, maka harus dibungkus tanda kurung agar bias membedakan antara blok fungsi dengan objek.

//ES5
var setNameIdsEs5 = function setNameIds(id, name) {
  return {
    id: id,
    name: name
  };
};

// ES6
var setNameIdsEs6 = (id, name) => ({ id: id, name: name });

console.log(setNameIdsEs6 (1, "Akhdani"));   // Object {id: 1, name: "Akhdani"}

 

Apakah ada batasan pada arrow function ini?

  1. Arrow function paling baik digunakan untuk fungsi non-method. Perhatikan contoh berikut:
'use strict';
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log(this.i, this);
  }
}

obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}

Dari contoh di atas bisa dilihat fungsi b() tidak bisa mengakses properti i, saat mengakses this, ia justru menghasilkan global object.

  1. Arrow function tidak bisa digunakan sebagai konstruktor dan akan terjadi error jika menggunakan new.
var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor
  1. Arrow function tidak memiliki objek arguments.
var f = () => arguments[0] + n;
f(2); // Uncaught ReferenceError: arguments is not defined

Arrow function ini bisa digunakan pada javascript higher order function pada postingan saya sebelumnya, silakan coba-coba. :D

Mungkin untuk sementara sekian dulu saja, jika ada tambahan, maka akan saya tambahkan di kemudian hari.

Terima kasih. :)

Mengenal Keamanan API (Application Programming Interface)

API (Application Programming Interface) merupakan sekumpulan sintak yang berisi perintah atau fungsi yang dapat digunakan untuk berinteraksi dengan sistem operasi tertentu atau dengan sistem lainnnya. Sebuah API dapat diimplementasikan dengan menulis sintaks dalam program yang menyediakan sarana untuk meminta layanan program tersebut.

Sebagai contoh, Facebook menyediakan API sehingga para pengembang website dapat mengintegrasikan komentar di websitenya langsung melalui komentar akun Facebook si pengunjung, atau yang lebih spesifik lagi API Facebook juga dapat digunakan untuk membuat fungsi auto post artikel ke Facebook saat artikel di website ditambahkan. Semua ini dapat dilakukan karena Facebook menyediakan API untuk dapat mengakses sebagian fungsi dari program Facebook.

Berikut adalah ilustrasi permintaan layanan data pelanggan ke sistem (misalnya) X menggunakan API:

contoh-api

Sistem X mengembalikan data pelanggan sesuai dengan permintaan yang diminta oleh client dengan berbagai format data yang disediakan oleh sistem, misalnya JSON, XML, dan sebagainya. Pada contoh di atas, data yang dikirimkan oleh sistem X merupakan data pelanggan dan bisa dibayangkan apabila ketika data pelanggan yang dikirimkan kepada client di tengah jalan sebelum diambil oleh seseorang atau hacker untuk kepentingan yang tidak seharusnya? Misal data yang diambilnya adalah nomor telepon, alamat, dan nomor kartu kredit. Tentunya hal tersebut tidak boleh terjadi ketika menggunakan API. Oleh karena itu, API  harus didesain sebagus mungkin agar terhindar dari hal-hal semacam itu.

Ada tiga faktor utama yang menjadi sasaran hacker terhadap penggunaan API. Ketiga faktor itu adalah parameter, identitas, man-in-the-middle. Berikut adalah penjalasan dari ketiga faktor tersebut.

  1. Parameter, sasaran ini dilakukan dengan cara mengirimkan data input secara terus menerus kepada suatu fungsi API agar hacker mendapatkan data yang diinginkan olehnya, sepertinya misalnya data pelanggan. Para hacker dapat membaca respon balikan dari API, karena biasanya API mendefinisikan dengan jelas data balikan yang dikirim. Sasaran ini memang bukan hal baru, namun sering banyak digunakan karena kebanyakan developer mengabaikan untuk memfilter inputan pada api yang digunakan.
  2. Identitas, dilakukan dengan cara mengekploitasi kelemahan dari otentikasi, otorisasi dan penggunaan session. Kelemahan pada API dicari  karena kesalahan dalam mempraktekkan penggunaan otentikasi, otorisasi, dan session pada API. Dalam penggunaan API dalam suatu sistem, biasanya API pengirim memiliki suatu identitas (key) agar dikenali oleh API penerima. API key ini tersimpan pada aplikasi pengirim yang digunakan untuk keperluan autorisasi misalnya. Meskipun API key ini disimpan secara baik oleh pengirim API, biasanya API key mudah untuk ditemukan oleh hacker. Yang perlu digaris bawahi adalah jangan pernah memperlakukan API key sebagai sesuatu yang rahasia.
  3. Man-in-the-middle, pada hal ini, hacker memposisikan dirinya berada diantara pengirim API (client) dan penerima API. Hacker melakukannya dengan cara mengambil data yang dikirimkan oleh user, lalu mengubah data tersebut, dan diteruskan kepada penerima API. Hal ini dapat terjadi karena data yang dikirimkan oleh client tidak terenkripsi. API yang tidak menggunakan SSL/TLS sangat rentan terhadap serangan ini. Namun sayangnya, kebiasaan developer membiarkan hal ini agar komunikasi antara pengirim API dan penerima API dapat dilihat dengan jelas. man-in-the-middle

 

Untuk menanggulangi ancaman dari ketiga faktor tersebut, API harus dibuat lebih aman dan tetap dapat berfungsi dengan semestinya. Berikut adalah penjelasan cara untuk menanggulangi acaman yang mungkin terjadi pada penggunaan API.

  1. Memvalidasi parameter, langkah pertama yang dilakukan adalah dengan cara memvalidasi semua data yang masuk oleh penerima API, pastikan data yang diterima valid dan tidak menyebabkan kerusakan. Cara yang paling efektif adalah dengan mendeskripsikan input apa saja yang boleh diterima oleh suatu fungsi pada penerima API. Selalu periksa inputan bertipe raw untuk menghindari SQL injection. Selain itu berhati hati dengan serangan denial of service (Dos) yang dapat menyebabkan penerima API menjadi hang atau tidak berfungsi karena menerima begitu banyak data dan ditambah lagi apabila data yang dikirimkan data bertingkat. Gunakan pendeteksi virus untuk memeriksa beberapa konten file apabila penerima API dapat mendecode base64 attachment agar file attachment tersebut benar-benar bebas dari virus.
  2. Gunakan SSL/TLS untuk semua API. Untuk jaman sekarang, SSL bukan hal yang mewah lagi, tapi merupakan kebutuhan yang mendasar sebagai API. Dengan menambahkan SSL/TLS dan menerapkannya dengan benar merupakan hal yang sangat efektif untuk melawan serangan man-in-the-middle. SSL/TLS memberikan kepercayaan integritas pertukaran data diantara pengirim dan penerima API.
  3. Identitas user dan sistem yang menggunakan API merupakan sesuatu yang harus diimplementasikan dan dimanajemen secara terpisah. Selain menggunakan identitas user dan sistem sebagai tambahan keamanan, ada faktor lain yang dapat ditambahakan seperti alamat IP pengirim API, waktu akses API, identifikasi hardware (untuk penggunaan mobile apps), geolokasi, dan lainnya.

Sumber :

https://www.tuliskode.com/mengenal-konsep-application-programming-interface-api/

https://stormpath.com/blog/secure-your-rest-api-right-way

https://www.ca.com/content/dam/ca/us/files/ebook/five-simple-strategies-for-securing-apis.pdf

https://19yw4b240vb03ws8qm25h366-wpengine.netdna-ssl.com/wp-content/uploads/securing-the-api-stronghold.pdf

https://www.upwork.com/hiring/mobile/tips-for-building-a-safe-secure-api/

https://19yw4b240vb03ws8qm25h366-wpengine.netdna-ssl.com/wp-content/uploads/securing-the-api-stronghold.pdf

Mengenal Javalite

Javalite merupakan sekumpulan framework yang digunakan untuk menyederhanakan tugas seorang developer dalam membangun aplikasi. Sekumpulan framework yang disediakan oleh javalite yaitu sebagai berikut:

captuasdre

Sekumpulan framework tersebut dapat digunakan sesuai kebutuhan, misal kita akan membuat aplikasi web menggunakan javalite, maka kita dapat menggunakan ActiveWeb untuk aplikasi webnya, dan ActiveJDBC sebagai ORM nya. Pada penerapannya framework ini juga dapat bekerja dengan framework lain, contohnya kita dapat menggunakan ActiveJDBC sebagai ORM pada framework spark, penggunaan JSpec sebagai unit testing pada framework lain, dan masih banyak lagi penggunaan lainnya.

Dengan banyaknya pilihan framework java yang tersedia saat ini, memang javalite bukan framework yang terkenal atau umum digunakan. Namun framework ini dapat menjadi pilihan jika ingin menggunakan framework lain yang lebih “ringan”. Sesuai dengan tagline dari javalite sendiri “light as a feather”, framework ini berdasarkan pengalaman penulis memang tergolong lebih ringan dan mudah digunakan dibandingkan dengan framework yang sudah ada sekarang.

Beberapa kemudahan yang penulis rasakan ketika menggunakan framework ini salah satunya adalah minimnya penggunaan anotasi pada kode. Tidak seperti framework spring atau framework lainnya, javalite tidak banyak menggunakan anotasi.

contoh

Javalite sendiri secara default menggunakan maven sebagai build manager nya, namun bagi yang tidak terbiasa menggunakan maven, framework ini juga dapat menggunakan gradle. seperti framework lain yang menggunakan metode mvc, javalite memiliki tiga komponen penting yaitu Model, View dan Controller. Model pada framework ini menggunakan ActiveJDBC yang disimpan pada direktori src/main/java/app/models,  sedangkan View pada framework ini menggunakan freemarker untuk templating nya yang tersimpan pada direktori webapp/WEB-INF/views, dan Controller yang berfungsi sebagai routing tersimpan pada direktori src/main/java/app/controllers.

berikut contoh struktur project penggunaan javalite (ActiveWeb, ActiveJDBC dan DB Migrator) untuk aplikasi web.

structure

Berdasarkan pada pengalaman penulis menggunakan framework javalite, framework ini memiliki kelebihan dan kelemahan dibandingkan framework lain.

Kelebihan :

  1. Mudah digunakan bagi pemula atau bagi yang baru memulai belajar menggunakan framework java.
  2. Mudah untuk di pelajari, karena tergolong mirip dengan framework mvc lainnya.

Kekurangan :

  1. Dokumentasi yang minim
  2. Tidak memiliki basis komunitas yang besar

Dengan kelebihan dan kekurangan yang dimiliki framework ini, penulis menganggap framework ini layak digunakan untuk membangun aplikasi kecil atau menengah, namun tidak disarankan untuk digunakan dalam membangun aplikasi besar atau komersil, mengingat komunitas pengguna framework ini yang tidak besar, dan dokumentasi nya yang minim.

sumber:

  1. http://javalite.io
  2. https://github.com/javalite

Berkenalan dengan Javascript Higher Order Function untuk Array

Halo! Salam, perkenalkan saya Aria, saya adalah salah satu dari tim kontributor baru di blog Akhdani ini, saya tidak ada spesialisasi teknologi, jadi apa ilmu yang saya punya akan saya tuangkan di blog ini.

Untuk postingan pertama di sini, saya akan membahas higher-order function untuk array pada Javascript. Beberapa fungsi ada yang sepertinya sudah sering dipakai, tapi saya akan tetap sedikit membahas untuk semuanya. Fungsi-fungsi ini sebenarnya cenderung functional programming, tapi kita abaikan dulu saja. Nah, apa fungsinya? Salah satunya agar kode program kita sedikit lebih “bersih”, operasi pada array tidak perlu lagi menggunakan looping semacam for atau while.

(Mohon maaf sebelumnya jika ada penjelasan yang masih sulit dipahami, saya berusaha menjelaskan semudah mungkin. Silakan komentari artikel ini jika ada pertanyaan)

Sebelum mulai, diketahui kita memiliki array yang akan melakukan fungsi-fungsi higher-order ini.

var source = [1,2,3,4,5];
  1. forEach

Looping pada semua elemen array, dan menjalankan operasi yang kita berikan.

Contoh:

source.forEach(function(currentValue, currentIndex){
   console.log("index", currentIndex, "isinya", currentValue);
});

// index 0 isinya 1
// index 1 isinya 2
// index 2 isinya 3
// index 3 isinya 4
// index 4 isinya 5

 

  1. filter

Looping pada semua elemen array, setiap elemen yang memenuhi kondisi akan dimasukkan ke dalam array hasil fungsi filter, array sumber akan tetap utuh.

Contoh:

var filterGanjil = source.filter(function(currentValue, currentIndex){
   return currentValue % 2 === 1;
});

console.log(filterGanjil); // [1, 3, 5]

 

  1. map

Looping pada semua elemen array, dan menjalankan operasi pada masing-masing elemen array. Hasilnya adalah array dengan panjang (length) yang sama namun isinya berupa hasil dari operasi pada masing-masing elemen array yang bersesuaian.

Contoh:

var dikaliDua = source.map(function(currentValue, currentIndex){
   return currentValue * 2;
});

console.log(dikaliDua); // [2, 4, 6, 8, 10]

 

  1. reduce

Looping pada semua elemen array, dan menjalankan operasi pada elemen array. Hasil operasi pada elemen ke-i, akan dijadikan parameter untuk operasi pada elemen berikutnya (i+1), sehingga hasil operasi reduce adalah akumulasi operasi pada semua elemen, bukan array. Pendeknya, value yang tadinya banyak (array) menjadi satu saja.

Contoh:

var ditotalin = source.reduce(function(previousValue, currentValue, currentIndex){
   return previousValue + currentValue;
});

console.log(ditotalin); // 15

Untuk reduce, bisa ditambahkan parameter kedua yaitu initial value sebagai nilai permulaan sebelum reduce dieksekusi. Jadi seb

Contoh:

var ditotalin = source.reduce(function(previousValue, currentValue, currentIndex){
   return previousValue + currentValue;
}, 5);

console.log(ditotalin); // 20
  1. reduceRight

Sama seperti reduce, hanya saja dilakukan mulai dari elemen terakhir.

Contoh:

var ditotalinDariKanan = source.reduceRight(function(previousValue, currentValue, currentIndex){
   return previousValue + currentValue;
});

console.log(ditotalinDariKanan); // 15

Sama seperti reduce, reduceRight juga bisa ditambahkan parameter kedua sebagai initial value.

 

  1. some

Looping pada setiap elemen array dan menjalankan operasi pada setiap elemen array, jika ada satu saja yang hasilnya true, maka hasil fungsi some adalah true.

Contoh:

var apakahAdaAngkaTiga = source.some(function(currentValue, currentIndex){
   return currentValue === 3;
});

console.log(apakahAdaAngkaTiga); // true
  1. every

Mirip seperti some namun hasil operasi semua elemen harus bernilai true agar hasil fungsi every adalah true.

Contoh:

var apakahSemuanyaAngka = source.every(function(currentValue, currentIndex){
   return typeof currentValue === "number";
});

console.log(apakahSemuanyaAngka); //true
  1. find

Menampilkan isi elemen pertama yang memenuhi kondisi yang ditentukan, jika tidak ada maka hasilnya adalah undefined.

Contoh:

var angkaYangLebihBesarDariDua = source.find(function(currentValue, currentIndex){
   return currentValue > 2;
});
console.log(angkaYangLebihBesarDariDua); // 3
  1. findIndex

Menampilkan index elemen pertama yang memenuhi kondisi yang ditentukan, jika tidak ada maka hasilnya adalah -1.

Contoh:

var indexnyaAngkaYangLebihBesarDariDua = source.findIndex(function(currentValue, currentIndex){
   return currentValue > 2;
});

console.log(indexnyaAngkaYangLebihBesarDariDua); // 2

Nah, bagaimana kalau mau digabung? Contohnya, setelah difilter, ingin dilakukan map. Caranya adalah dengan method/function chaining, caranya seperti ini:

 var filterGanjilLaluKaliDua = source
   .filter(function(currentValue, currentIndex){
      return currentValue % 2 === 1;
   })
   .map(function(currentValue, currentIndex){
      return currentValue * 2;
   });

console.log(filterGanjilLaluKaliDua); // [2, 6, 10]

Tapi ingat, chaining di atas bisa dilakukan karena hasil dari filter adalah array, jadi masih memiliki method map. Kalau awalnya, misalnya, di­-reduce, hasilnya bukanlah array sehingga tidak memiliki method map.

Sekian saja bahasan sedikit dari saya, jika ada kesempatan maka akan saya bahas lebih dalam, jika ada pertanyaan silakan tulis komentar. Semoga bermanfaat!

Salam…

Membangun Mobile Apps dengan React Native

App

Instagram, Facebook, Pinterest, Uber, SoundCloud Pulse dan Skype.

Pasti sudah tidak asing dengan beberapa aplikasi yang disebutkan diatas. Aplikasi tersebut dibangun menggunakan React Native.

Sudah pernah mendengar React Native sebelumnya?

React Native merupakan framework berbasis JavaScript yang dibuat dan dikembangkan oleh Facebook. Bermula pada tahun 2013, React Native merupakan sebuah proyek internal Facebook Hackathon. Hingga akhirnya Maret 2015, pada F8 Conference, Facebook mengumumkan React Native terbuka untuk publik dan tersedia di GitHub.

Lalu, apa kelebihan React Native dibandingkan dengan framework mobile apps lainnya?

Dengan React Native, kita memungkinkan untuk membangun aplikasi Android dan IOS sekaligus. Aplikasi yang dibangun bukan hybrid atau web, tapi benar-benar native.

Untuk UI dan UX nya sendiri menggunakan CamelCase, yaitu Javascript styling hampir mirip dengan CSS.

Bagaimana cara belajar React Native? Apa sulit? Jawabannya tidak. Bagi pemula, Create React Native App adalah cara termudah untuk membuat suatu aplikasi dengan React Native tanpa menggunakan Android Studio.

Tools penunjang yang digunakan adalah Expo. Expo dapat dipasang di smartphone yang berfungsi sebagai emulator untuk melihat proyek yang sedang dibangun dengan React Native.

 

 

Tunggu apalagi, buka command prompt Anda, ketik syntax berikut, lalu mulai project pertama menggunakan React Native.

$ npm i -g create-react-native-app
$ create-react-native-app my-project
$ cd my-project
$ npm start

Namun pastikan NodeJS dan NPM sudah terpasang di perangkat Anda.

Selamat mencoba! :)

 

Referensi:

Efek Dunning Kruger dan Teknologi Informasi

Keberadaan internet, biaya koneksi dan penetrasi perangkat mobile yang makin terjangkau (terutama Android) telah membuat kita semakin mudah dan cepat menemukan informasi. Tak hanya dari situs-situs berita, kita juga bisa mendapatkan informasi yang di-share di media sosial. Selain informasi, internet juga dapat membuat kita mendapatkan kualitas layanan yang lebih baik dan lebih cepat. Sayangnya, kecepatan menemukan informasi dan melakukan sesuatu ini dapat menjadi candu dan memiliki efek samping, salah satunya adalah tuntutan akan hasil yang instan (sering disebut dengan instant gratification).

Suka tidak suka, paradigma instan makin menyusup dalam kehidupan kita, salah satunya dalam penilaian kita terhadap kompetensi / keahlian diri kita sendiri. Lebih lanjut, hal tersebut menimbulkan ilusi terhadap superioritas. Misalnya, baru baca beberapa artikel sudah merasa jadi orang sholeh. Baru ikut beberapa seminar bisnis, tiba-tiba merasa siap jadi pengusaha dan berkoar-koar bahwa jadi karyawan itu tidak mulia. Nonton acara diskusi politik, tiba-tiba merasa jadi pakar politik.

road-to-success

Ditambah mentalitas intimidatif, judgement plus hobi mem-bully, ilusi superioritas membuat media sosial (atau di era pra-medsos dulu berupa mailing list) menjadi makin “berisik”. Kalau orang lain tidak sepaham / sepemikiran, maka dianggap pasti salah, karena kita merasa “paling” (paling benar, paling tahu, paling pintar). Kalau kehabisan argumen, kita tiarap dulu. Buka Google, cari informasi, kalau hasil googling ternyata kurang mendukung argumen kita, cari terus sampai halaman kesekian, yang penting mendukung argumen kita hehe :)

Namun, fenomena mengganggu dan menyebalkan di atas ternyata lumrah jika dilihat dari sudut pandang psikologi, ilusi superioritas ini disebut dengan efek Dunning-Kruger. Efek Dunning-Kruger adalah bias kognitif yang terjadi pada orang yang tidak kompeten plus memiliki pengetahuan dangkal pada tugas/area tertentu, dimana mereka cenderung menakar kemampuan diri di atas kenyataan yang ada dan menganggap mereka jauh lebih kompeten dibandingkan orang lain serta mengabaikan ketidaktahuan mereka sendiri.

dunning-kruger-chart

Penelitian David Dunning dan Justin Kruger (keduanya dari Cornell University) diinspirasi oleh perampok bank bernama McArthur Wheeler yang sangat over-confidence. Wheeler menggunakan sari lemon pada wajahnya sebelum merampok dua bank di Pittsburgh pada tahun 1995. Wheeler sangat percaya bahwa sari lemon merupakan invisible ink yang dapat membuat wajahnya tidak terekam kamera keamanan. Malam harinya pada hari yang sama, Wheeler ditangkap dan ketika diperiksa oleh polisi, reaksi Wheeler adalah terkejut dan masih tidak percaya bahwa rencana briliannya bisa gagal.

Menurut Dunning, bias kognitif tersebut terjadi karena :

“If you’re incompetent, you can’t know you’re incompetent. The skills you need to produce a right answer are exactly the skills you need to recognize what a right answer is.”

Para pemuda yang masih sangat bersemangat relatif lebih rentan mengalami efek Dunning-Kruger. Sewaktu kuliah, mata kuliah pemrograman di Informatika ITB tidak menekankan pada penguasaan bahasa pemrograman, namun lebih kepada pemahaman algoritma, bukan kepada tools. Beberapa kawan yang pernah ngoprek bahasa pemrograman dari SMP/SMA ada yang merasa tidak nyaman, karena hal yang pernah dipelajari sebelumnya dibabat habis, mereka harus legowo dan learn to unlearn secara bersamaan dengan proses learning yang baru. Uniknya di akhir semester, nilai mata kuliah beberapa kawan yang tidak pernah belajar pemrograman (bahkan ada yang baru belajar menghidupkan komputer ketika kuliah) ternyata bisa lebih tinggi ketimbang yang sebelumnya pernah memprogram.

Bagi beberapa kawan, perkuliahan juga terkesan membosankan dan ketinggalan dibanding kawan-kawan dari kampus lain. Kawan di kampus lain sudah membuat program GUI, HTML hingga mengakses SQL, sementara kami masih console/text based, sorting dan struktur data. Namun beberapa tahun kemudian ketika kami melakukan rekrutmen programmer, ternyata terbukti pengajaran dasar yang benar akan menghasilkan programmer dengan kemampuan problem solving yang lebih terstruktur.

Selepas kuliah, di awal pendirian perusahaan, kami sempat meragukan beberapa saran dari mentor. Saran-saran tersebut bagi kami terasa sangat pragmatis, tidak keren dan tidak kekinian (pada waktu itu), apalagi jika dibandingkan dengan perusahaan baru lainnya (jaman itu belum booming istilah startup / perusahaan rintisan). Jujur, sempat muncul arogansi bahwa kami merasa lebih tahu mengenai jaman dan masa depan :P . Beruntung, kami menuruti saran mentor tersebut. Dua – tiga tahun kemudian barulah terlihat ternyata saran yang disampaikan benar adanya.

Perlu kita pahami bahwa semua bias kognitif adalah natural dan manusiawi. Oleh karena itu, efek Dunning-Kruger bisa dialami pada berbagai lapisan usia maupun jenis profesi. Faktor kultur organisasi / industri juga bisa memiliki pengaruh. Fenomena argumentasi tanpa tanggung jawab atau debat kusir akan relatif lebih sedikit kita temui di bidang kedokteran dan militer jika dibandingkan dengan bidang lain seperti Teknologi Informasi.

Terkait dengan efek Dunning-Kruger di bidang Teknologi Informasi, berikut ini beberapa contoh yang pernah kami temukan :

  • klien yang memiliki kompetensi ilmu hukum bisa merasa jauh lebih kompeten dalam membuat software ketimbang konsultan IT yang mereka hire sendiri dan menganggap konsultan IT mereka tidak melakukan apa-apa (Anda bisa mengganti ilmu hukum dengan bidang-bidang lainnya, tidak ada maksud merendahkan ilmu hukum)
  • para script kiddies yang baru belajar hacking lebih banyak berkoar-koar ketimbang hacker profesional
  • programmer software bisa merasa lebih jago mengenai HRD daripada praktisi HRD yang minta dibuatkan software-nya
  • klien merasa lebih jago dan update tentang web design ketimbang web designer
    classics : http://theoatmeal.com/comics/design_hell
  • non-programming programmer yang beberapa kali kami temukan dalam tes rekrutmen Akhdani. Yang kami amati, beberapa individu yang merasa sudah menjadi programmer berpengalaman tersebut tidak memahami konsep fungsi/prosedur, kondisional dan variabel dengan baik. Jadi mereka lebih banyak menggunakan copy-paste + trial error ketimbang analisis masalah dan memahami kode
  • hasil ngobrol dengan beberapa kawan, laju kenaikan expected salary programmer pemula semakin tinggi, di atas inflasi dan tidak sebanding dengan hukum permintaan-penawaran / kelangkaan. Kehadiran Google dan Stackoverflow sepertinya membuat banyak orang merasa lebih kompeten ;)

Beruntung kami tidak terlalu lama terjebak efek Dunning-Kruger di awal-awal perusahaan. Adalah wajar dan manusiawi jika kita mengalami efek Dunning-Kruger, yang lebih penting adalah bagaimana meminimalisir dampak negatifnya, misalnya :

  • Menerapkan prinsip adab sebelum ilmu
    Prinsip klasik yang sering diajarkan di pesantren ini bisa membuat kita berpikir dan lebih hati-hati dalam bersikap, berpendapat dan mengambil tindakan. Efek Dunning-Kruger cenderung akan berakibat negatif apabila dikonkritkan dalam bentuk tindakan spontan dan minim pikir, seperti kasus perampokan bank oleh McWheeler dan kebisingan perdebatan di media sosial
  • Terus belajar dan berusaha menambah pemahaman
    Sebagaimana bisa kita lihat pada grafik di atas, makin bertambahnya pemahaman akan menurunkan level kepercayaan diri karena kita merasa ternyata banyak yang belum kita ketahui, dan fase awal ini akan memicu pembelajaran yang lebih dalam hingga pada titik tertentu kepercayaan diri kita berbalik naik kembali.

Sejalan dan koheren dengan kutipan yang dipopulerkan Steve Jobs

“stay hungry, stay foolish”

Seorang ulama Islam, Imam Al-Ghazali pernah menyampaikan ada 4 jenis manusia, yaitu :

  1. Seseorang yang tahu (berilmu), dan dia tahu kalau dirinya tahu
  2. Seseorang yang tahu (berilmu), tapi dia tidak tahu kalau dirinya tahu
  3. Seseorang yang tidak tahu (tidak atau belum berilmu), tapi dia tahu alias sadar diri kalau dia tidak tahu
  4. Seseorang yang tidak tahu (tidak berilmu), dan dia tidak tahu kalau dirinya tidak tahu

Di era overload informasi seperti sekarang, sangat mungkin jika kita mengalami promosi-degradasi posisi antara nomor 1 hingga 4. Yang penting adalah cepat menyadari apabila kita sedang berada pada posisi nomor 4.

Disclaimer : penulis bukan praktisi psikologi dan tidak pernah masuk pesantren, oleh karena itu sangat mungkin ada efek Dunning-Kruger dalam tulisan ini sendiri, harap dimaklumi, cheers ;)

Bacaan lainnya :

https://en.wikipedia.org/wiki/Dunning–Kruger_effect

https://en.wikipedia.org/wiki/Invisible_ink

http://arstechnica.com/science/2012/05/revisiting-why-incompetents-think-theyre-awesome/

https://mindhacks.com/2010/02/11/the-burglar-with-the-lemon-juice-disguise/

https://blog.codinghorror.com/the-nonprogramming-programmer/