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

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