Tutorial Membuat Mobile App Menggunakan React Native (Part 1 – Environment Setup)

Mar 28, 2019 | Knowledge Center, Tutorial

Perangkat mobile atau smartphone pada saat sekarang ini sudah menjadi benda wajib yang selalu ada di saku atau tas masing-masing. Jumlah orang yang memiliki smartphone tentunya jauh lebih besar dibandingkan orang yang memiliki laptop atau desktop. Hal inilah yang menyebabkan aplikasi mobile laris dan terpasang pada perangkat masing-masing bagaikan pisang goreng di saat hujan di sore hari. Sebagai hukum sebab akibat yang sudah dirumuskan pepatah zaman dulu yaitu ‘ada gula ada semut’, yang bila diartikan menjadi ada ‘konsumen pisang goreng berarti ada yang jualan pisang goreng’, atau agar lebih pas bila disesuaikan dengan bahasan kita berarti ‘ada mobile user tentunya ada mobile developer’. Kondisi inilah yang menyebabkan semua kalangan mulai dari perusahaan, software house, media, dan bahkan anak magang beramai-ramai menciptakan dan mengembangkan mobile app.

Kekhawatiran muncul dari penjual es krim yang sekali lagi jika disesuaikan dengan bahasan kita berarti ‘web developer’ yang rata-rata secara natural hanya menguasai bahasa markup yaitu HTML & CSS, bahasa pemrograman seperti Javascript & PHP, dan bahasa query yaitu SQL. Padahal, pengembangan mobile apps saat ini dikuasai oleh dua bahasa pemrograman yaitu Java (untuk Android) dan Swift (untuk iOS). Masalah ini ditambah dengan keinginan agar apps dapat hadir dan berjalan di dua platform tersebut. Tentu saja ini semakin membuat kompleksitas pengembangan mobile app semakin meningkat.

Solusi untuk permasalahan ini sebenarnya sudah ada pada tahun 2011 sejak hadirnya Cordova (berganti nama menjadi PhoneGap setelah diakuisisi oleh Adobe) sebagai framework pengembangan hybrid app di mana dengan menggunakan HTML, CSS, dan Javascript kita dapat meng-compile mobile app di dua platform Android dan iOS. Sampai sekarang Cordova/PhoneGap masih dijadikan solusi tercepat untuk membangun aplikasi mobile bagi para developer web.

Tapi jangan senang dulu, Alejandro! Aplikasi hybrid yang dibuat dengan Cordova/PhoneGap ini memiliki performa yang jauh lebih rendah bila dibandingkan mobile app yang dikembangkan secara native. Hal ini membuat para developer menjadi malas-malasan untuk menggunakan Cordova/Phonegap karena resikonya besar yaitu mereka harus mengorbankan user experience. Walaupun begitu dengan berkembangnya teknologi, hadir React Native sebagai solusi dalam pengembangan aplikasi mobile.

Mirip dengan dengan Cordova/PhoneGap, React Native membuat developer dapat mengembangkan aplikasi mobile dengan menggunakan Javascript yang tentu saja telah dikuasai oleh mayoritas web developer dan bila dibandingkan secara performa, React Native jauh mengungguli Cordova/Phonegap walaupun masih berada sedikit di bawah aplikasi native dari masing-masing platform.

Kita cukupkan saja cerita panjang tentang latar belakang native mobile app, hybrid app, dan pisang goreng ini. Pada kesempatan kali ini, kami akan membagikan langkah-langkah dalam membuat native mobile app dengan menggunakan React Native. Tutorial ini akan di bagi menjadi beberapa part. Pada part 1 ini kita akan mempersiapkan environment-nya terlebih dahulu.

Tools of Trade

Dalam tutorial kali ini beberapa tools yang akan kita gunakan adalah:

NodeJs (download di sini)
Android Studio
SDK Manager
JDK
Python2

Setting Up Tools

Setelah semua tools kita dapatkan, langkah selanjutnya adalah men-setup semua peralatan tadi ke dalam perangkat yang kita gunakan. Dalam tutorial ini kita akan menggunakan Windows 10 sebagai sistem operasi dalam environment pengembangan kita.

1. Extract nodejs yang telah didownload,
semisal di D:\node-v10.15.0-win-x64 Anda harus mengingat lokasi tersebut, karena nanti akan kita tambahkan lokasi tersebut ke dalam path variable.

2. Install Android Studio beserta SDK Manager-nya.
Step ini membutuhkan koneksi internet dan membutuhkan waktu yang cukup panjang. Jangan lupa catat dimana lokasi Android Studio dan SDK Managernya. Kita akan menggunakanya di step selanjutnya karena Android Studio ketika diinstal otomatis akan menginstal versi SDK terakhir maka proses instalasi SDK otomatis telah dilakukan. Yang perlu dilakukan adalah mencatat lokasi SDK manager.

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 1

3. Menginstall JDK
Jangan lupa catat lokasi JDK terinstall biasanya default lokasi JDK bisa ditemukan di C:\Program Files\Java\jdk1.8.0_162\

4. Menginstall Python
Setelah menginstal jangan lupa catat lokasi nya karena nanti kita harus menambahkanya ke dalam system path variable.

5. Menambahkan JAVA_HOME Environment Variable
Java home adalah lokasi di mana JDK diinstall. Secara default JDK terinstal di C:\Program Files\Java\jdk1.8.0_162\

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 2

6. Menambahkan ANDROID_HOME Environment Variable

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 3

7. Menambahkan beberapa lokasi di bawah ini kedalam System Path variable
Yang perlu ditambahkan adalah lokasi folder berikut:

1. Nodejs
2. Java/bin
3. Gradle/bin
4. SDK/platform-tools
5. SDK/tools
6. Python

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 4

React Native Installation

Setelah ke enam langkah di atas dilakukan dengan benar maka seharusnya saat ini anda telah siap untuk memasang React Native ke komputer Anda. Langkah-langkah untuk memasang React Native dapat dilakukan melalui step-step dibawah ini :

1. Buka command prompt
(bisa dilakukan dengan menekan kombinasi keyboard windows + ‘r’ dan ketikkan cmd lalu klik ‘OK’)

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 5

2. Ketikkan perintah pada command line:

npm install -g react-native-cli

Tunggu sampai selesai! Proses ini membutuhkan koneksi internet

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 6

3. Membuat project baru
Sebelum membuat project baru ada baiknya kita membuat folder khusus untuk project kita. Saya sarankan untuk membuat folder dengan nama yang singkat dan tidak terdapat spasi untuk menghindari error. Di bawah ini urutan perintah untuk memulai project baru:

mkdir labReactNative

react-native init AwesomeProject

Tunggu hingga proses selesai!

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 7

4. Membuat android virtual device (AVD)

5. Jalankan project yang telah kita buat
Untuk menjankan project yang telah kita buat dapat menggunakan perintah dibawah ini:

cd AwesomeProject

react-native run-android

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 8

Itu tadi langkah-langkah dalam menginstal dan men-setup environment dalam membuat mobile app dengan menggunakan React Native. Ikuti terus update terbaru dari Inixindo Jogja agar tidak ketinggalan Tutorial React Native part selanjutnya!

Step by step tutorial from:

Arindra Saktiawan
Instructor of Inixindo Jogja

Membuat Single Page Aplication Menggunakan React

Jun 6, 2018 | Knowledge Center, Tutorial

Belakangan ini cara pemrograman web berubah cukup signifikan. development menjadi lebih komplex dengan di baginya pengebangan menjadi dua sisi yang berbeda yaitu Front end, dan Back end. tuntutan pengembangan di sisi front end membuat keluar nya teknologi baru dalam pengembangan sebuah aplikasi web yang biasa disebut dengan Single Page Application.
Single Page Aplication merupakan sebuah terobosan baru dalam front end development. single page application mengutamakan pengambilan tampilan dari server secara dinamik, dibandingkan harus mengambil seluruh tampilan dari server.

Ada beberapa framework Front end yang berkembang saat ini diantaranya adalah React, VueJs, Angular. Tutorial kali ini kita akan menggunakan React sebagai framework front end. Alasan utama kenapa memilih react adalah pengguna react lebih besar dibandingkan framework lainya.

Membuat Single Page Aplication Menggunakan React 15

gambar diatas merupakan data statistic download dari website npm, menunjukkan bahwa jumlah download react jauh meninggalkan dua rival nya. Klik DIsini

pada tutorial kali ini kita akan mencoba membuat aplikasi spa (Single Page Application) sederhana menggunakan react yang kurang lebih hasil akhir nya nanti adalah seperti gambar di bawah ini :

Membuat Single Page Aplication Menggunakan React 16

A. Persiapan

Ada beberapa alat yang harus disiapkan sebelum kita bisa melakukan life codding.

install NPM (Node JS)

untuk menginstal Node JS bisa dilihat langsung ke websitenya nodejs

Install React App

buka command Prompt dan ketikkan perintah di bawah ini

npm install -g create-react-app

Proses instalasi react

Buat Project Baru

untuk membuat project baru, sangat disarankan utuk memilih direktori yang tidak terlalu dalam. dalam kasus ini kita akan membuat project baru di direktory D:. kita akan membuat project spa-inix. ketikkan perintah dibawah ini untuk membuat project baru.

D:

create-react-app spa-inix

cd spa-inix

Membuat Single Page Aplication Menggunakan React 17

proses instalasi otomatis akan membuat folder dengan nama project di directory kita mengetikkan perintah. dalam kasus gambar diatas kita membuat project di D: maka otomatis akan dibuatkan folder spa-inix. cek folder D:\spa-inix\ lewat windows explorer. kurang lebih seperti gambar di bawah ini:

Membuat Single Page Aplication Menggunakan React 18

Install React Router

pastikan command prompt directory telah di ubah ke directory project D:\spa-inix> dengan mengetikkan perintah cd spa-inix, sebelum menginstall react router. react router merupakan salah satu komponen yang sangat penting, karena react router yang membaca url dan mengarahkan tampilan mana yang akan di load. untuk menginstall react router ketikkan perintah:

npm i react-router-dom --save

Membuat Single Page Aplication Menggunakan React 19

sampai disini proses persiapan selesai. kita bisa melihat hasil dari instalasi dengan menjalankan perintah npm start dan kemudian buka browser dengan mengakses http://localhost:3000/maka akan tampil halaman default react.

B. Coding

karena kita akan memulai tutorial ini dari scratch alias kosongan, supaya kita bisa lebih memahami bagai mana cara kerja react js maka sebelum kita memulai terlebih dahulu hapus semua isi file dalam folder public dan src. folder public cuma berisi file index.html dan folder development kita focus ke folder src.

1. Membuat File Index.html di folder public

setelah semua file didalam folder di hapus buat file index.html di folder public yang berisi coding seperti di bawah ini

2. Membuat File Index.js di folder src

buat file baru dengan nama index.jsdi folder src. nama file harus sama persis karena file tersebut adalah file yang pertama akan di jalankan. isikan coding di bawah ini.

import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
 
ReactDOM.render(
  , 
  document.getElementById("root")
);

import React from "react";

import ReactDOM from "react-dom";

import Main from "./Main";

ReactDOM.render(

document.getElementById("root")

);

Inti dari codding disini file index.js memanggil Class Main.js yang merupakan inisialisasi awal aplikasi kita atau yang akan menjadi halaman router dari aplikasi kita. semua hasil routing yang ada akan di tampilkan atau diInjectkan ke element dengan id=’root’.

3. Membuat File Main.js

setelah file index dibuat selanjutnya kita membuat file Main.js sesuai yang telah kita deklarasikan di langkah 2. awal mula buat file Main.js dengan code seperti dibawah ini. kita akan banyak bekerja dengan file ini setelahnya.
/src/Main.js

import React, { Component } from "react";
 
class Main extends Component {
  render() {
    return (

import React, { Component } from "react";

class Main extends Component {

render() {

return (

INIX Simple SPA (Single Page Application)

- Home

- About

- Contact

); } } export default Main;

tidak ada yang istimewa dari coding diatas. jika dilihat di browser pun tampilan masih sangat sederhana tanpa styling. tapi dari kode diatas kita dapat belajar beberapa hal diantaranya adalah render() yang digunakan untuk menampikan output dari sebuah class.

Membuat Single Page Aplication Menggunakan React 20

4. Menambahkan Content

langkah selanjutnya setelah Main Class ter buat langkah selanjutnya adalah menentukan isi dari content ketika link di klik.
langkah selanjutnya buat file Home.js. untuk sementara kiti isi cotent text sederhana saja
/src/Home.js

import React, { Component } from "react";
class Home extends Component {
  render() {
    return (

import React, { Component } from "react";

class Home extends Component {

render() {

return (

Selamat Datang

Aplikasi Ini merupakan Contoh sederhana implementasi SPA (Singgle Page Aplication) menggunakan react JS. Langkah Step By Step dapat anda Lihat di website inixindojogja.co.id. inixindojogja adalah lembaga training IT profesional.

inixindojogja.co.id Didirikan sejak 1 Juli 2001 di Yogyakarta, Inixindo Jogja menjawab kebutuhan para pebisnis dan profesional IT akan lembaga pelatihan/training dan konsultan IT yang berkualitas dan kompeten. Kualitas para tutor (instructor) dengan keterampilan mengajar yang tinggi, bersertifikasi internasional, dan berpengalaman mengelola proyek IT yang luas, membuat Inixindo Jogja dipercaya oleh banyak perusahaan terkemuka dan instansi pemerintah, tidak hanya dalam hal peningkatan kemampuan individu maupun SDM TI, namun juga sebagai konsultan yang memberikan solusi lengkap dalam bidang Teknologi Informasi, mulai dari perencanaan, pembangunan, implementasi, dan evaluasi. Inixindo Jogja kini telah dipercaya sebagai konsultan Smart City di beberapa kota di Indonesia.

); } } export default Home;

langkah selanjutnya membuat About.js

import React, { Component } from "react";
 
class About extends Component {
  render() {
    return (

import React, { Component } from "react";

class About extends Component {

render() {

return (

About Us

Inixindo Jogja mempunyai beberapa layanan utama diantaranya:

1. Training IT Profesional

1. Assesment Center

1. Consultan Smart City

); } } export default About;

selanjutnya buat tampilan untuk Contact dengan membuat file Contact.js

import React, { Component } from "react";
class Contact extends Component {
  render() {
    return (

import React, { Component } from "react";

class Contact extends Component {

render() {

return (

Ada Pertanyaan?

Jika ada pertanyaan silahkan kirim email ke wawan@inixindojogja.com dengan subject tanya SPA. atau hubungi marketing inixindojogja di https://inixindojogja.co.id/

); } } export default Contact;

setelah ketiga content telah kita buat langkah selanjutnya yaitu mengkonfigurasi react routing supaya dikenali ketika di klik link Home maka akan menampilkan Home.js, ketika di klik About maka akan di jalankan About.js, dan ketika di klik contact akan di jalankan Contact.js.

5. Menggunakan React Router untuk menghandle Link

sampai dengan langkah 4 ketika di klik link dia belum mengarah sesuai dengan keinginan. untuk mencapai tujuan tersebut kita perlu menggunakan react router.
langsung saja pada Main.js tambahkan script import menjadi seperti di bawah ini

import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import Home from "./Home";
import about from "./About";
import Contact from "./Contact";

import {

Route,

NavLink,

HashRouter

} from "react-router-dom";

import Home from "./Home";

import about from "./About";

import Contact from "./Contact";

dalam script diatas kita mendeklarasikan bahwa kita akan menggunakan, fitur Route,
NavLink,
HashRouter yang mana Route digunakan untuk membaca url dan uri NavLink digunakan untuk membuat Anchor atau Link.
HashRouter digunakan untuk menentukan content yang akan di routingkan.
cara kerja dari HashRouter adalah dengan menentukan area yang akan di jadikan HashRouter. maka sekali lagi tambahkan HashRouter di Main.js
hingga Main.js Secara Keseluruhan akan menjadi:

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
class Main extends Component {
  render() {
    return (

import React, { Component } from "react";

import {

Route,

NavLink,

HashRouter

} from "react-router-dom";

import Home from "./Home";

import About from "./About";

import Contact from "./Contact";

class Main extends Component {

render() {

return (

INIX Simple SPA (Single Page Application)

- Home

- About

- Contact

    );
  }
}
export default Main;

);

}

export default Main;

sampai disini maka seharusnya spa kita telah berjalan sesuai cuma tinggal satu langkah lagi yaitu menambahkan CSS sebagai styling supaya tampilan terlihat lebih cantik.

6. Menambahkan CSS

langkah terakhir dalam coding kita adalah menambahkan file index.css di folder src. tulis kan coding di bawah ini pada file index.css kita

body {
  background-color: #82BDFB;
  padding: 20px;
  margin: 0;
}
h1, h2, p, ul, li {
  font-family: sans-serif;
}
ul.header li {
  display: inline;
  list-style-type: none;
  margin: 0;
}
ul.header {
  background-color: #111;
  padding: 0;
}
ul.header li a {
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
  padding: 20px;
  display: inline-block;
}
.content {
  background-color: #FFF;
  padding: 20px;
}
.content h2 {
  padding: 0;
  margin: 0;
}
.content li {
  margin-bottom: 10px;
}
.active {
  background-color: #0099FF;
}
/*347114000400801510*/

body {

background-color: #82BDFB;

padding: 20px;

margin: 0;

}

h1, h2, p, ul, li {

font-family: sans-serif;

}

ul.header li {

display: inline;

list-style-type: none;

margin: 0;

}

ul.header {

background-color: #111;

padding: 0;

}

ul.header li a {

color: #FFF;

font-weight: bold;

text-decoration: none;

padding: 20px;

display: inline-block;

}

.content {

background-color: #FFF;

padding: 20px;

}

.content h2 {

padding: 0;

margin: 0;

}

.content li {

margin-bottom: 10px;

}

.active {

background-color: #0099FF;

}

/*347114000400801510*/

selanjutnya setelah file di buat langkah terakhir adalah include file index.css tersebut ke Main.js
dengan cara menambahkan kode seperti di bawah ini pada bagian import.

import "./index.css";

1	import "./index.css";

Hacking Fitur Wrap di Oracle PL/SQL

Aug 10, 2017 | Featured, Knowledge Center, Tutorial

Dalam artikel sebelumnya berjudul Proteksi Kode Oracle PL/SQL dengan Fitur Wrap telah dibahas cara melakukan proteksi terhadap source code atau kode sumber PL/SQL untuk trigger, function, serta stored procedure sehingga tidak bisa terlihat oleh orang lain. Fitur yang digunakan untuk memproteksi source code PL/SQL tersebut adalah fitur wrap untuk melakukan semacam enkripsi terhadap kode sumber PL/SQL sehingga orang lain tidak bisa membaca kode sumber tersebut.

Namun semua proteksi buatan manusia tidak ada yang sempurna, pasti ada kelemahannya. Fitur wrap di Oracle PL/SQL pun juga bisa di-hack sehingga hasil enkripsi terhadap source code PL/SQL masih bisa dikembalikan lagi seperti semula sehingga kode sumber aslinya masih bisa dibaca kembali oleh orang lain. Proses ini disebut sebagai unwrap.

Ada beberapa cara untuk melakukan proses unwrap. Cara yang paling mudah untuk mengembalikan hasil wrap PL/SQL menjadi kode sumber aslinya adalah dengan bantuan tool Oracle SQL Developer dengan tambahan plug-in atau extension untuk melakukan proses unwrap. Oracle SQL Developer versi terbaru adalah versi 4.2 yang bisa diunduh secara gratis dari:

http://www.oracle.com/technetwork/developer-tools/sql-developer/downloads/index.html

Hacking Fitur Wrap di Oracle PL/SQL 21

Sebagai contoh, bila kita melihat kembali fungsi HITUNG_PAJAK di Oracle SQL Developer yang sudah di-wrap seperti yang telah dibahas di artikel sebelumnya, hasilnya adalah sebagai berikut:

Hacking Fitur Wrap di Oracle PL/SQL 22

Perhatikan bahwa source code atau kode sumber PL/SQL asli untuk fungsi HITUNG_PAJAK saat ini tidak bisa dipahami karena telah dienkripsi melalui fitur wrap di Oracle Database.

Untuk bisa memulihkan kode sumber PL/SQL yang telah di-wrap sehingga menjadi kembali seperti semula untuk bisa dipahami dan dipelajari cara kerjanya, perlu melakukan instalasi extension tambahan di Oracle SQL Developer yaitu Unwrapper. Unwrapper merupakan extension atau plug-in tambahan untuk Oracle SQL Developer yang bisa diundah secara gratis dari alamat situs web berikut:

https://www.salvis.com/blog/plsql-unwrapper-for-sql-developer/

Setelah mengunduh file extension Unwrapper tersebut bernama Unwrapper_for_SQLDev_1.0.0.zip, jangan melakukan ekstraksi terhadap file ZIP tersebut namun tetap biarkan sebagai file ZIP. Jalankan Oracle SQL Developer dan lakukan instalasi terhadap extension Unwrapper tersebut melalui menu “Help” kemudian pilih “Check for Updates” seperti berikut ini:

Hacking Fitur Wrap di Oracle PL/SQL 23

Setelah muncul wizard untuk “Check for Updates” di SQL Developer, pilih “Install From Local File” dan kemudian klik “Browse” untuk memilih file Unwrapper_for_SQLDev_1.0.0.zip yang barusan diunduh. Hasilnya menjadi seperti berikut ini:

Hacking Fitur Wrap di Oracle PL/SQL 24

Klik pada tombol “Next” terus hingga proses instalasi extension Unwrapper selesai. Supaya extension Unwrapper tersebut aktif maka harus melakukan restart terhadap aplikasi Oracle SQL Developer, yaitu menutup aplikasi dan kemudian menjalankan kembali aplikasi Oracle SQL Developer.

Setelah melakukan proses restart terhadap aplikasi Oracle SQL Developer, buka kembali fungsi HITUNG_PAJAK di editor Oracle SQL Developer. Source code yang tampil masih dalam bentuk wrap. Untuk melakukan unwrap terhadap kode sumber tersebut, lakukan klik kanan mouse di dalam editor Oracle SQL Developer untuk menampilkan menu sebagai berikut:

Hacking Fitur Wrap di Oracle PL/SQL 25

Pilih “Unwrap” pada menu tersebut atau bisa juga dengan menekan keyboard shortcut Ctrl+Shift+U untuk menjalankan proses unwrap melalui extension Unwrapper di Oracle SQL Developer. Begitu proses unwrap dijalankan, maka langsung akan terlihat kembali kode sumber aslinya sebagai berikut:

Hacking Fitur Wrap di Oracle PL/SQL 26

Perhatikan bahwa source code fungsi HITUNG_PAJAK yang sebelumnya telah di-wrap tersebut sudah bisa dipahami kembali untuk dipelajari cara kerjanya. Dengan demikian, proteksi terhadap kode sumber PL/SQL melalui fitur wrap sudah tidak efektif lagi karena bisa di-hack secara mudah dengan bantuan Oracle SQL Developer dan extension Unwrapper yang semuanya gratis.

Selamat mencoba!

Andrian The

Instruktur Senior

Back to Knowledge Center

Memulai Machine Learning di Python (Bagian 2)

Jul 19, 2017 | Featured, Knowledge Center, Tutorial

Pada artikel Memulai Machine Learning di Python (Bagian 1) , kita telah membahas mengenai langkah 1 sampai 3. Artikel ini adalah lanjutan langkah untuk memulai proyek Machine Learning.

Visualisasi Data

Dalam melakukan visualisasi data, ada dua jenis plot:

Plot Univariate

Kita mulai dengan beberapa plot univariat, yaitu plot dari masing-masing variabel individu. Mengingat bahwa variabel inputnya numerik, kita bisa membuat jenis plot box.

# box and whisker plots

dataset.plot(kind='box', subplots=True, layout=(2,2), sharex=False, sharey=False)

plt.show()

# box and whisker plots

dataset.plot(kind='box', subplots=True, layout=(2,2), sharex=False, sharey=False)

plt.show()

Memulai Machine Learning di Python (Bagian 2) 27

Selanjutnya juga bisa membuat histogram masing-masing variabel input untuk mendapatkan ide tentang distribusi.

# histograms

dataset.hist()

plt.show()

# histograms

dataset.hist()

plt.show()

Memulai Machine Learning di Python (Bagian 2) 28

2. Plot Multivariate

Selanjutnya kita bisa melihat interaksi antar variabel. Pertama, kita lihat scatterplots dari semua pasang atribut. Hal ini dapat membantu melihat hubungan terstruktur antara variabel input

# scatter plot matrix

scatter_matrix(dataset)

plt.show()

# scatter plot matrix

scatter_matrix(dataset)

plt.show()

Dari hasil output dapat dilihat pengelompokan diagonal beberapa pasang atribut. Hal ini menunjukkan korelasi yang tinggi dan hubungan yang dapat diprediksi.

Memulai Machine Learning di Python (Bagian 2) 29

Evaluasi Beberapa Algoritma

Langkah berikutnya adalah membuat beberapa model data dan memperkirakan akurasi mereka pada data yang tidak terlihat.

Beberapa hal yang dapat dilakukan di langkah ini adalah:

Pisahkan dataset validasi
Set up test harness untuk menggunakan validasi silang 10 kali lipat
Bangun 5 model yang berbeda untuk memprediksi spesies dari pengukuran bunga
Pilih model yang terbaik

Membuat validasi dataset

Validasi ini dilakukan untuk mengetahui bahwa model yang dibuat itu bagus. Kita akan menggunakan metode statistik untuk memperkirakan keakuratan model yang dibuat pada data yang tidak terlihat. Juga diinginkan perkiraan yang lebih konkret mengenai keakuratan model teraik pada data yang tidak terlihat dengan mengevaluasi data aktual yang tidak terlihat.

Artinya, kita akan menahan beberapa data yang tidak dapat dilihat oleh algoritma dan akan menggunakan data ini untuk mendapatkan informasi tentang seberapa akurat model terbaik sebenarnya.

Kita akan membagi datateset yang telah dimuat menjadi dua, 80% diantaranya akan digunakan untuk melatih model dan 20% digunakan untuk data validasi.

# Split-out validation dataset

array = dataset.values

X = array[:,0:4]

Y = array[:,4]

validation_size = 0.20

seed = 7

X_train, X_validation, Y_train, Y_validation = model_selection.train_test_split(X, Y, test_size=validation_size, random_state=seed)

# Split-out validation dataset

array = dataset.values

X = array[:,0:4]

Y = array[:,4]

validation_size = 0.20

seed = 7

X_train, X_validation, Y_train, Y_validation = model_selection.train_test_split(X, Y, test_size=validation_size, random_state=seed)

Setelah perintah di atas dieksekusi, kita sudah memiliki dua data yaitu X_train dan Y_train untuk mempersiapkan model dan rangkaian X_validation dan Y_validation yang dapat digunakan selanjutnya.

Test Harness

Kita akan menggunakan validasi silang 10 kali lipat untuk memperkirakan akurasi. Untuk itu dataset dibagi menjadi 10 bagian, 9 untuk latihan dan 1 untuk pengujian dan ulangi untuk semua kombinasi.

# Test options and evaluation metric

seed = 7

scoring = 'accuracy'

# Test options and evaluation metric

seed = 7

scoring = 'accuracy'

Perintah di atas menggunakan metrik “accuracy” untuk mengevaluasi model. Ini adalah rasio dari jumlah kejadia yang diprediksi dengan benar dibagi dengan jumlah total kasus dalam dataset dikalikan dengan 100 untuk memberikan persentase (misalnya 95% akurat). Kita akan menggunakan variabel penilaian saat menjalankan build dan mengevaluasi setiap model di langkah selanjutnya

Membangun Model

Kita tidak tahu algoritma mana yang bagus dalam masalah ini atau konfigurasi apa yang akan digunakan. Untuk itu kita evaluasi 6 algoritma yang berbeda:

Logistic Regression (LR)
Linear Discriminant Analysis (LDA)
K-Nearest Neighbors (KNN).
Classification and Regression Trees (CART).
Gaussian Naive Bayes (NB).
Support Vector Machines (SVM).

# Spot Check Algorithms

models = []

models.append(('LR', LogisticRegression()))

models.append(('LDA', LinearDiscriminantAnalysis()))

models.append(('KNN', KNeighborsClassifier()))

models.append(('CART', DecisionTreeClassifier()))

models.append(('NB', GaussianNB()))

models.append(('SVM', SVC()))







# evaluate each model in turn

results = []

names = []

for name, model in models:

kfold = model_selection.KFold(n_splits=10, random_state=seed)

cv_results = model_selection.cross_val_score(model, X_train, Y_train, cv=kfold, scoring=scoring)

results.append(cv_results)

names.append(name)

msg = "%s: %f (%f)" % (name, cv_results.mean(), cv_results.std())

print(msg)

# Spot Check Algorithms

models = []

models.append(('LR', LogisticRegression()))

models.append(('LDA', LinearDiscriminantAnalysis()))

models.append(('KNN', KNeighborsClassifier()))

models.append(('CART', DecisionTreeClassifier()))

models.append(('NB', GaussianNB()))

models.append(('SVM', SVC()))

# evaluate each model in turn

results = []

names = []

for name, model in models:

kfold = model_selection.KFold(n_splits=10, random_state=seed)

cv_results = model_selection.cross_val_score(model, X_train, Y_train, cv=kfold, scoring=scoring)

results.append(cv_results)

names.append(name)

msg = "%s: %f (%f)" % (name, cv_results.mean(), cv_results.std())

print(msg)

Memilih Model Terbaik

Kita sudah memiliki 6 model dan estimasi akurasi untuk masing-masing. Selanjutnya perlu membandingkan model satu dengan lainnya dan pilih yang paling akurat.

Dari eksekusi script di atas, kita mendapatkan hasil mentah sebagai berikut:

LR: 0.966667 (0.040825)

LDA: 0.975000 (0.038188)

KNN: 0.983333 (0.033333)

CART: 0.975000 (0.038188)

NB: 0.975000 (0.053359)

SVM: 0.991667 (0.025000)

Dari hasil output di atas, kita dapat melihat bahwa SVM memiliki nilai akurasi perkiraan terbesar.

Kita juga dapat membuat plot hasil evaluasi model dan membandingkan penyebaran dan akurasi rata-rata masing-masing model.

# Compare Algorithms

fig = plt.figure()

fig.suptitle('Algorithm Comparison')

ax = fig.add_subplot(111)

plt.boxplot(results)

ax.set_xticklabels(names)

plt.show()

# Compare Algorithms

fig = plt.figure()

fig.suptitle('Algorithm Comparison')

ax = fig.add_subplot(111)

plt.boxplot(results)

ax.set_xticklabels(names)

plt.show()

Memulai Machine Learning di Python (Bagian 2) 30

Membuat Prediksi

Setelah mengetahui model yang paling akurat yaitu SVM, selanjutnya kita dapat mencoba melakukan pengujian tentang keakuratan model SVM terhadap data yang ada.

# Make predictions on validation dataset

svm = SVC()

svm.fit(X_train, Y_train)

predictions = svm.predict(X_validation)

print(accuracy_score(Y_validation, predictions))

print(confusion_matrix(Y_validation, predictions))

print(classification_report(Y_validation, predictions))

# Make predictions on validation dataset

svm = SVC()

svm.fit(X_train, Y_train)

predictions = svm.predict(X_validation)

print(accuracy_score(Y_validation, predictions))

print(confusion_matrix(Y_validation, predictions))

print(classification_report(Y_validation, predictions))

Menghasilkan output :

Memulai Machine Learning di Python (Bagian 2) 31

Confusion matrix memberikan indikasi dari tiga kesalahan yang dibuat.

Akhirnya, laporan klasifikasi (classification report) memberikan rincian setiap kelas (class-species) dengan precision, recall, f1-score dan support yang menunjukkan hasil yang sangat baik.

Sumber: Article “Your First Machine Learning Project in Python Step-By-Step”, http://machinelearningmastery.com

Mustofa

Manager Edukasi Inixindo Jogja

Back to Knowledge Center

Memulai Machine Learning di Python (Bagian 1)

Jul 13, 2017 | Featured, Knowledge Center, Tutorial

Di artikel sebelumnya, sudah dibahas tentang apa itu Machine Learning. Kali ini, akan dibahas cara menerapkan Machine Learning dengan menggunakan bahasa Python.

Python adalah bahasa interpeter yang populer dan powerful. Tidak seperti R, Python adalah bahasa yang memiliki fitur yang lengkap dan memiliki platform yang dapat digunakan baik untuk riset maupun untuk membangun production system. Ada banyak modul dan library yang dapat digunakan untuk menerapkan Machine Learning di dalam Python.

Untuk memulai proyek Machine Learning, harus mengetahui langkah-langkah sebagai berikut:

Mendefinisikan masalah
Menyiapkan Data
Mengevaluasi Algoritma
Memperbarui Hasil
Menyajikan Hasil

Langkah-langkah menerapkan Machine Learning dengan Python

Instalasi Platform Python dan Scipy

Untuk mendapatkan software aplikasi Python dan Scipy, dapat mengunjungi situs scipy.org. Disana akan diberikan petunjuk yang lengkap untuk menginstall python dan library yang dibutuhkan, baik dalam platform Linux, Mac OS X maupun Windows. Ada 5 library utama yang perlu diinstall untuk tutorial ini: Scipy, Numpy, Matplotlib, Panda, dan Sklearn.

Memulai Python

Untuk memastikan lingkungan Python sudah berhasil diinstall, berikut langkah-langkah yang bisa dilakukan:

Buka baris perintah dan memulai python, di console command prompt

Python

Python

Ketik atau copy dan paste script berikut:

# Check the versions of libraries

# Python version

import sys

print('Python: {}'.format(sys.version))

# scipy

import scipy

print('scipy: {}'.format(scipy.__version__))

# numpy

import numpy

print('numpy: {}'.format(numpy.__version__))

# matplotlib

import matplotlib

print('matplotlib: {}'.format(matplotlib.__version__))

# pandas

import pandas

print('pandas: {}'.format(pandas.__version__))

# scikit-learn

import sklearn

print('sklearn: {}'.format(sklearn.__version__))

output yang dihasilkan, seperti contoh berikut:

Python: 3.6.1 |Anaconda 4.4.0 (64-bit)| (default, May 11 2017, 13:25:24) [MSC v.1900 64 bit (AMD64)]

scipy: 0.19.0

numpy: 1.12.1

matplotlib: 2.0.2

pandas: 0.20.1

sklearn: 0.18.1

# Check the versions of libraries

# Python version

import sys

print('Python: {}'.format(sys.version))

# scipy

import scipy

print('scipy: {}'.format(scipy.__version__))

# numpy

import numpy

print('numpy: {}'.format(numpy.__version__))

# matplotlib

import matplotlib

print('matplotlib: {}'.format(matplotlib.__version__))

# pandas

import pandas

print('pandas: {}'.format(pandas.__version__))

# scikit-learn

import sklearn

print('sklearn: {}'.format(sklearn.__version__))

output yang dihasilkan, seperti contoh berikut:

Python: 3.6.1 |Anaconda 4.4.0 (64-bit)| (default, May 11 2017, 13:25:24) [MSC v.1900 64 bit (AMD64)]

scipy: 0.19.0

numpy: 1.12.1

matplotlib: 2.0.2

pandas: 0.20.1

sklearn: 0.18.1

Data yang Digunakan

Untuk latihan proyek Machine Learning ini menggunakan dataset klasifikasi Bunga Iris. Dataset ini dikenal dengan dataset “hello world” dalam Machine Learning dan Statistik, yang dipakai oleh hampir semua orang.

Dataset ini berisi 150 pengamatan bunga Iris. Ada empat kolom pengukuran bunga dalam centimeter. Kolom kelima adalah spesies bunga yang diamati. Anda dapat mempelajari lebih lajut tentang dataset ini di Wikipedia.

Impor Library

Sebelum memuat dataset terlebih dahulu impor semua modul, fungsi dan obyek yang akan digunakan dalam tutorial ini.

# Load libraries

import pandas

from pandas.tools.plotting import scatter_matrix

import matplotlib.pyplot as plt

from sklearn import model_selection

from sklearn.metrics import classification_report

from sklearn.metrics import confusion_matrix

from sklearn.metrics import accuracy_score

from sklearn.linear_model import LogisticRegression

from sklearn.tree import DecisionTreeClassifier

from sklearn.neighbors import KNeighborsClassifier

from sklearn.discriminant_analysis import LinearDiscriminantAnalysis

from sklearn.naive_bayes import GaussianNB

from sklearn.svm import SVC

# Load libraries

import pandas

from pandas.tools.plotting import scatter_matrix

import matplotlib.pyplot as plt

from sklearn import model_selection

from sklearn.metrics import classification_report

from sklearn.metrics import confusion_matrix

from sklearn.metrics import accuracy_score

from sklearn.linear_model import LogisticRegression

from sklearn.tree import DecisionTreeClassifier

from sklearn.neighbors import KNeighborsClassifier

from sklearn.discriminant_analysis import LinearDiscriminantAnalysis

from sklearn.naive_bayes import GaussianNB

from sklearn.svm import SVC

2. Memuat Dataset

Untuk memuat dataset, dapat langsung diambil dari alamat repository UCI Machine Learning. Berikut script untuk memuat dataset:

# Load dataset

url = "http://archive.ics.uci.edu/ml/machine-learning-databases/iris/iris.data"

names = ['sepal-length', 'sepal-width', 'petal-length', 'petal-width', 'class']

dataset = pandas.read_csv(url, names=names)

# Load dataset

url = "http://archive.ics.uci.edu/ml/machine-learning-databases/iris/iris.data"

names = ['sepal-length', 'sepal-width', 'petal-length', 'petal-width', 'class']

dataset = pandas.read_csv(url, names=names)

Jika tidak ada koneksi internet, file iris.data dapat download terlebih dahulu, diletakkan di file local. Untuk memuat data-nya dapat dilakukan dengan metode yang sama, dengan mengubah URL ke file local.

3. Melakukan Summary Dataset

Pada langkah ini, kita akan melihat data dari beberapa sisi yang berbeda:

Dimensi Dataset

Hal ini dilakukan untuk mendapatkan gambaran singkat tentang berapa banyak baris dan atribut data.

# shape

print(dataset.shape)

# shape

print(dataset.shape)

Selanjutnya akan terlihat output : (150,50)

Yang berarti 150 baris dan 5 atribut data

Melihat Isi Data

Berikut perintah untuk melihat 20 baris data pertama:

# head

print(dataset.head(20))

# head

print(dataset.head(20))

Memulai Machine Learning di Python (Bagian 1) 32

Ringkasan Statistik

Berikut untuk melihat statistik data termasuk count, mean, nilai min dan max serta beberapa persentase

# descriptions

print(dataset.describe())

# descriptions

print(dataset.describe())

Memulai Machine Learning di Python (Bagian 1) 33

Distribusi Class Data

Sekarang mari kita lihat jumlah baris untk setiap class.

# class distribution

1	# class distribution

print(dataset.groupby(‘class’).size())

Akan terlihat bahwa setiap class memiliki jumlah kasus yang sama (50 atau 33% dari kumpulan data)

class

Iris-setosa 50

Iris-versicolor 50

Iris-virginica 50

class

Iris-setosa 50

Iris-versicolor 50

Iris-virginica 50

Bersambung ke Memulai Machine Learning di Python (Bagian 2)

Mustofa

Manager Edukasi Inixindo Jogja

Back to Knowledge Center

Tema dan Indikator Kota Cerdas (Smart City) di Indonesia

May 29, 2017 | Article, Featured, Knowledge Center, Tutorial

Saat ini hampir seluruh pemerintah daerah membicarakan smart city, yang dalam Bahasa Indonesia adalah kota cerdas. Dalam artikel ini saya akan menggunakan istilah kota cerdas. Kota cerdas pada awalnya identik dengan apa yang dilakukan Pak Ahok dengan E-budgeting, Clue di provinsi DKI Jakarta, lalu dengan apa yang dilakukan oleh Pak Ridwan Kamil dengan Command Center-nya di kodya Bandung dan oleh Bu Risma dengan Smart Traffic Light serta E-Pengaduan di kodya Surabaya. Kota cerdas langsung meroket popular seiring popularitas Pak Ahok, Pak Kamil dan Bu Risma. Dampak dari program di masing-masing daerah tersebut dapat dirasakan oleh masyarakat secara langsung. Daerah lain mencoba meniru dengan tagline smart city. Lalu bagaimana model kota cerdas di daerah lain? Apakah yang dilakukan oleh Pak Ahok, Pak Kamil dan Bu Risma, dapat ditiru dan diterapkan di daerah lain?

Setiap daerah memiliki permasalahan dan kebutuhan yang berbeda-beda. Namun kota cerdas akan selalu memiliki makna yang sama, jika kita memaknai kota cerdas tidak dengan teknologi-teknologi yang digunakan. Namun kota cerdas dimaknai dengan kata “cerdas”, yaitu cerdas masyarakatnya dan cerdas dalam cara menyelesaikan bidang permasalahannya.

Lalu bagaimana sebuah daerah dapat memulai sebuah program kota cerdas?

Tema dan Indikator Kota Cerdas (Smart City) di Indonesia 34

Terdapat 5 tema dasar dalam merencanakan atau menerapkan kota cerdas. Tentunya kedepan tidak hanya 5 tema, namun dapat lebih sesuai kebutuhan daerah. Kita memerlukan fondasi untuk sebuah kota cerdas, 5 tema berikut dapat dijadikan sebuah acuan untuk memulai.

Smart People
Smart Energy
Smart Economy
Smart Infrastructure
Smart Services

Tema dan Indikator Kota Cerdas (Smart City) di Indonesia 35

Setelah menentukan 5 tema dasar dalam kota cerdas, langkah selanjutnya adalah menentukan indikator cerdas dari setiap tema. Indikator ini akan menjadi target yang harus dicapai untuk mencapai istilah “cerdas” dalam sebuah tema.

Tema dan Indikator Kota Cerdas (Smart City) di Indonesia 36

Indikator smart economy antara lain :

Touchpoint, adanya titik temu antara produsen dan konsumen , baik secara digital ataupun tradisional
Ekspansi pasar, adanya perluasan pasar untuk produk produk daerah
Adanya kanal distribusi
Biaya operasi yang rendah
Rantai pasokan

Indikator tersebut menjadi sebuah target untuk dicapai dengan suatu cara cara yang cerdas. Tentunya kalau ada target , pastinya ada baseline atau kondisi aktual atau problem. Di mana selisih antara target dan baseline akan melahirkan inisiatif-inisiatif program.

Langkah awal memulai kota cerdas adalah susun Masterplan Smart City dan peningkatan kualitas SDM bidang Teknologi Informasi.

Andi Yuniantoro

Direktur Inixindo Jogja

Back to Knowledge Center

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 – Environment Setup)

Tools of Trade

Setting Up Tools

React Native Installation

Membuat Single Page Aplication Menggunakan React

A. Persiapan

B. Coding

1. Membuat File Index.html di folder public

2. Membuat File Index.js di folder src

3. Membuat File Main.js

INIX Simple SPA (Single Page Application)

4. Menambahkan Content

Selamat Datang

About Us

Ada Pertanyaan?

5. Menggunakan React Router untuk menghandle Link

INIX Simple SPA (Single Page Application)

6. Menambahkan CSS

Hacking Fitur Wrap di Oracle PL/SQL

Andrian The

Memulai Machine Learning di Python (Bagian 2)

Mustofa

Memulai Machine Learning di Python (Bagian 1)

Mustofa

Tema dan Indikator Kota Cerdas (Smart City) di Indonesia

Andi Yuniantoro

Search

News

Event

Knowledge Center