Saturday, April 14, 2018

Guide Line Database

Pada blog kali ini, bakal sharing session soal hal fundamental, yaitu database. Dari pengalaman, urusan database kebanyakan akan dihandle oleh back end, dari membuat tabel, membuat data initial, manipulasi data, dll. Padahal persoalan database kadang butuh handling sendiri, back end dan database duo yang saling melengkapi. Sendok dan garpu, piring dan gelas, back end dan database

Kebanyakan kita memberikan semua proses logika di bagian back end, sedangkan database hanya sebagai tempat penyimpanan. Untuk proses yang sederhana mungkin tidak akan jadi masalah, namun untuk yang sangat kompleks back end memiliki keterbatasan dalam waktu pemrosesan. Dari sisi lain, database juga memiliki keterbatasan lain, yaitu tidak dapat dilakukan unit testing untuk SQL dan maintain antar environment yang cukup merepotkan

Jadi kapan proses logika dibebankan di database ?
Berikut sedikit kasus nya

Report
Report di sini adalah kesimpulan dari sekumpulan data yang membentuk suatu pola. Karena biasanya membutuhkan banyak relasi tabel, report lebih baik dimaintain di database dalam bentuk view, atau jika perlu lebih cepat lagi juga dapat membuat function yang memberikan return bentuk tabel walaupun membuat function akan lebih sulit dibuat

Sinkronisasi Data
Dalam beberapa kasus, data yang kita butuhkan berasal dari sistem yang sudah ada, kalau kasus seperti ini ada beberapa pilihan sesuai kebutuhan
Apakah data ini masih di database yang sama ? Jika tidak, maka harus dihandle oleh back end
Apakah data ini sering dipakai ? Jika tidak, maka gunakan view saja. Jika sering, buat tabel bayangan nya dengan kolom seminimal mungkin dan buat prosedur sinkronisasi nya

Manipulasi Data Masif
Manipulasi data adalah perubahan data seperti insert, update, delete. Untuk jumlah data di bawah 20 bisa mengandalkan back end. Untuk jumlah data di atas 50 gunakan procedure atau function dari database. Perbedaan waktu antara proses back end dan proses database bisa berbeda ratusan kali lipat

Data Kompleks atau Loading Lama
Ada kalanya data yang ditampilkan berhubungan dengan banyak tabel, dan membuat kode di back end menjadi rumit dan panjang, yang tentunya juga membuat loading data menjadi lama. Jika proses return berjalan lebih dari 15 detik, maka itu pertanda back end tidak bisa menghandle proses ini. Dibutuhkan proses di database seperti pada report, yaitu dengan view, atau jika perlu lebih cepat dengan function. Penambahan index juga akan sangat membantu.

SQL bagi sebagian orang memang cukup sulit, dan jarang didalami. Butuh data yang banyak sekaligus variatif dan juga kasus-kasus baru untuk membuat query rumit sesuai proses bisnis. Jika ditemukan, jadikan lah sebagai kesempatan belajar. Tanya lah kepada yang berpengalaman jika mengalami kesulitan


Monday, March 19, 2018

Hal yang perlu kamu siapkan sebelum menjadi React Developer

Teknologi sangat berkembang begitu cepat. Khususnya di teknologi website. Banyak sekali framework atau library yang dibuat untuk mempermudah developer dalam mengembangkan sebuah aplikasi website sepeti Angular, VueJs, ReactJs, PReact dan masih banyak lagi. Nah pada bahasan kali ini saya ingin mengupas hal-hal yang kamu perlu ketahui jika ingin belajar membuat Aplikasi website menggunakan React. Hal ini saya tulis berdasarkan pengalaman dari projek yang sedang saya kerjakan. Ya, ReactJS hanya sebuah library view untuk membuat aplikasi Website. Mudahnya React hanya sebuah 'V' (View) dari Arsitektur MVC (Model View Controller). React awalnya dibuat oleh Engineer Facebook untuk membuat aplikasi web dengan data yang berubah setiap saat (real-time). Dengan React yang mengusung jargon "Learn Once, Write Anywhere", dengan mempelajari React kita dapat mengembangkan berbagai aplikasi di macam-macam platform ReactJs di Web, React Native di Mobile Apps, ReacTV pada Smart TV, bahkan kita dapat membuat aplikasi IoT dengan menggunakan React. Atas dasar itu menurut penulis pribadi, sebagai web developer sangat penting untuk belajar React.

React sesungguhnya sangatlah mudah dipelajari jika kita memiliki dasar-dasar pemrogaman web yang baik seperti HTML, CSS dan Javascript. 

Jika sudah mengetahui dasar pemrograman tersebut, kita harus tau cara membuat Component berdasarkan konsep Atomic Web Design. Sebuah aplikasi React dibuat berdasarkan Component-Component kecil yang saling berkomunikasi secara fungsinya masing-masing. Membuat sebuah Component React merupakan sebuah tantangan tersendiri, karena harus membuat tampilan dengan business logic yang di design.

Dari beberapa hal tersebut adalah opini pribadi penulis berdasarkan pengalaman pada projek yang saya kerjakan menggunakan React. Sejauh ini masih painful menggunakan React dan masih dalam tahap adaptasi. Namun jika tidak mencoba, kita tidak tahu bukan? :D

So, ayo belajar React! :D

Mengenal Ant Design : UI Component for React App

Pada kesempatan kali ini saya ingin mengenalkan sebuah UI Component untuk Aplikasi React. Ya, Ant Design. Untuk Developer React, pasti sudah tidak asing dengan UI Component tersebut. Ant Design merupakan UI Component yang dikembangkan dengan pattern Material Design. Ant design menyediakan Component yang menarik dari sisi user interface dan user experience. Ant Design menyediakan Component seperti alert, button, modal, notification, table, pagination, form handler, dan masih banyak lagi untuk dapat di explore.

Berikut kelebihan Ant Design:

- User Interface dan User Experience yang menarik.
- Mudah di implementasikan (dokumentasi disini : https://ant.design/).
- Support dengan mobile web responsive.
- Komponen sudah HOC (Higher Order Component). Memungkinkan me-reusable Component.

Cara install Ant Design:

Cukup tulis command dibawah ini pada terminal anda:

npm install antd --save

untuk mengimport Component Ant Design pada React Component yang kita buat bisa seperti dibawah ini:








Memanggil component Ant pada method render():










Dengan menggunakan Ant Design, sebagai developer react, dengan menggunakan Ant Design tentu dapat mempersingkat waktu development pengerjaan aplikasi. Sekian sedikit penjelasan mengenai Ant Design dari saya. Salam Semangat and Keep Coding guys! :D

Sunday, March 18, 2018

Pembuatan Producer dan Consumer Service pada Oracle Service Bus Console 12c

Setelah menjelaskan tentang tata cara pembuatan JMS Topic pada weblogic 12c, saya ingin menjelaskan pembuatan Producer Consumer (berdasarkan Queue) atau Publisher Subscriber Service (Berdasarkan Topic) pada OSB Console 12c, pembuatannya cukup mudah dikarenakan kita hanya memerlukan untuk membuat sebuah Proxy Service ataupun Business Service.

Pembuatan Producer (Queue) atau Publisher (Topic), tahap-tahapnya sebagai berikut:
  1. Masuk dalam OSB Console lalu klik tombol Create

                 
  2. Klik Kanan All Projects, Pilih Create, Lalu Klik Project (Langsung ke langkah 4 bila menggunakan projek existing)
                     
  3. Tentukan Nama Projek sebagai contoh "JMSTest"

                    
  4. Klik kanan Projek yang baru saja dibuat lalu pilih Create, lalu klik Resource

                               
  5. Pilih Business Service, lalu pilih Technology, pilih JMS, klik OK

                    

                    

                    
  6. Tentukan nama Resource, tekan Type

                   
  7. Ganti tipe pesan menjadi Messaging Service, ubah tipe request menjadi Text, dan tipe response menjadi None, lalu klik Transport

                   
                 
  8. Ganti Endpoint URI dengan: jms://host:port/{JNDI Connection Factory}/{JNDI Queue atau Topic yang akan di produce}

                  
  9. Masuklah ke service yang baru saja dibuat, lalu masuk ke transport detail, pilihlah jenis Tujuannya apakah Queue (sebagai Producer) atau Topic (Sebagai Publisher)

                 

                 
Pembuatan Producer/Publisher selesai.

Pembuatan Consumer (Queue) atau Subscriber (Topic), cukup mirip dengan pembuatan Producer/Publisher, tahap-tahapnya sebagai berikut:
  1. Masuk dalam OSB Console lalu klik tombol Create

                 
  2. Klik Kanan All Projects, Pilih Create, Lalu Klik Project (Langsung ke langkah 4 bila menggunakan projek existing)

                     
  3. Tentukan Nama Projek sebagai contoh "JMSTest"

                    
  4. Klik kanan Projek yang baru saja dibuat lalu pilih Create, lalu klik Resource

                               
  5. Pilih Proxy Service, lalu pilih Technology, pilih JMS, klik OK

                    

                    

                    
  6. Tentukan nama Resource, hilangkan centang pembuatan pipeline terkecuali bila ingin memroses pesan yang diterima/consume, tekan Type

                   
  7. Ganti tipe pesan menjadi Messaging Service, lalu klik Transport

                   
  8. Ganti Endpoint URI dengan: jms://host:port/{JNDI Connection Factory}/{JNDI Queue atau Topic yang akan di consume}

                  
  9. Masuklah ke service yang baru saja dibuat, lalu masuk ke transport detail, pilihlah jenis Tujuannya apakah Queue (sebagai Consumer) atau Topic (Sebagai Subscriber)

                 

                 

     Bila memilih Topic maka bukalah Advanced Option lalu isilah Client ID dari durable subscriber yang didaftarkan pada weblogic atau untuk membuat durable subscriber baru tanpa membuka weblogic dengan mencentang Durable Subscription yang berada dibawah isian Client ID.

               

    Pembuatan Consumer/Subscriber selesai.

    Sekian penjelasan dari saya, semoga bermanfaat :)

Pengenalan Progressive Web Apps

Selamat malam,
Disini saya akan memperkenalkan suatu Teknologi yang diperkenalkan oleh google yaitu Progressive Web Apps (PWA).  Jadi apa itu PWA ? PWA adalah suatu teknik bagaimana Anda dapat mengakses dengan cepat pengalaman website dan aplikasi menjadi satu tanpa harus menginstall / memasang aplikasi tersebut. Sederhananya, PWA memungkinkan kita untuk bisa mengakses dengan cepat suatu aplikasi dengan tampilan mobile web pada perangkat smartphone. Aplikasi Web Progressif diharapkan mampu untuk mengatasi masalah tersebut. PWA adalah aplikasi web yang berjalan layaknya aplikasi native, notifikasi dan UX seperti aplikasi native.

           Berbeda dengan aplikasi 
hybrid, aplikasi hybrid lebih menggabungkan antara aplikasi native dan web. PWA ini sepenuhnya web namun pengguna bisa merasakan experience seperti menggunakan aplikasi native. Seperti bisa dijalankan offline atau koneksi buruk sekalipun, bisa mengirim notifikasi, bahkan menggunakan animasi yang smooth seperti aplikasi native. Aplikasinya pun tidak perlu diinstall, namun icon-nya bisa di pasang di home screen untuk memudahkan membuka aplikasi. PWA sepenuhnya mengandalkan browser. Saat ini hanya browser Chrome minimal versi 47 keatas yang mendukung.
Berbeda dengan aplikasi hybrid, aplikasi hybrid lebih banyak antara aplikasi native dan web. PWA ini bisa jadi web yang bisa merasakan pengalaman seperti menggunakan aplikasi native. Seperti bisa dijalankan offline atau koneksi buruk, bisa mengirim notifikasi, bahkan menggunakan animasi yang mulus seperti aplikasi native. Aplikasinya pun tidak perlu diinstall, namun icon-nya bisa di pasang di home screen untuk memudahkan membuka aplikasi. Browser PWA Lengkap. Saat ini hanya browser Chrome minimal versi 47 keatas yang mendukung.
Dengan konsep offline dulu dan web baru, aplikasi yang berjalan pada browser tidak akan memunculkan pesan kesalahan jaringan atau layar putih seperti yang selama ini terjadi kita alami ketika berada pada jaringan yang sangat buruk. Pada PWA, saat kita tahan browser, dan kembali lagi buka aplikasi itu pada jaringan buruk atau tanpa jaringan kita tidak akan kehilangan UI dan data-data terakhir.
Service Workers adalah teknologi dibalik PWA yang memberikan fungsionalitas offline, notifikasi, update konten, pergantian konektifitas dan lainnya. Memang belum banyak yang membahas tentang pekerja dan bagaimana sebenarnya petugas layanan itu diterapkan, bisa dikatakan service workers adalah semacam proxy yang berada ditengah antara aplikasi web, browser, dan jaringan, atau lebih sederhana lagi bisa dianalogikan aplikasi kita akan diatur oleh serviceworkers agar bisa berlajan offline terlebih dahulu, mengembalikan data dari cache jika request ke jaringan gagal.
File service workers sendiri kode javascript yang bisa dikembangkan oleh pengembang untuk menghandle event dan permintaan sesuai dengan kebutuhan. Oh ya, untuk serviceworker ini hanya bisa dijalankan di localhost dan HTTPS saja dan untuk post ServiceWorker, Anda perlu mengawali prosesnya dengan alamatnya di halaman Anda. Ini akan memberi tahu browser di mana file JavaScript service worker Anda berada.
Tapi sebelum itu kita harus mensetup terlebih dahulu untuk PWA dan ServiceWorkernya nya di direktori projectnya, seperti ini:
set PWA :
ng new nama_project atau menggunakan project yang sudah ada dengan clone dari Git.
npm install
Build project (ng build –prod)
Jalankan web browser (dari extension chrome)
Jalankan lighthouse

seset ServiceWorker:

1. ng set apps.0.serviceWorker=true

2. npm install --save @angular/service-worker @angular/platform-server ng-pwa-tools

3. Build project (ng build –prod)

4. Restart web server

5. Jalankan lighthouse

untuk melihat apakah ServicerWorker sudah tersetup atau belum, buka file .angular-cli.json dan cari "  "serviceWorker": true , " jika sudah true maka ServiceWorker sudah tersetup. kemudian buat JavaScript untuk meregistrasi SreviceWorker .

Ini contoh file JavaScript untuk mendaftarkan ServiceWorker bisa juga diletakkan di index.html setelah body untuk melakukan Registrasi ini atau dibuat terpisah dan letakkan filenya di dalam foder dist:
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
Kode ini memeriksa untuk mengetahui apakah API service worker tersedia, dan jika tersedia, berarti service worker di /sw.js telah terdaftar setelah laman dimuat.
Anda bisa memanggil register() setiap kali laman dimuat tanpa masalah, browser akan mengetahui apakah service worker sudah terdaftar atau belum kemudian menangani dengan semestinya.
            Setelah di lakukan registrasi baru anda memasang File ServiceWorkernya dan letakkan didalam dist bersama dengan file registrasi ServiceWorkernya. Folder dist berisikan file yang akan di diambil oleh ServiceWorker untuk melakukan pereload an ketika localhost offline.
Setelah laman terkontrol memulai proses pendaftaran, mari kita beralih ke sudut pandangskrip service worker, yang menangani kejadian install.
Untuk contoh paling dasar, Anda perlu mendefinisikan callback untuk kejadian install dan memutuskan file mana yang ingin Anda cache.
self.addEventListener('install', function(event) {
  // Perform install steps
});
Di dalam callback install, kita perlu mengambil langkah-langkah berikut:

·         buka cache

·         cache file kita

·         Konfirmasikan apakah semua aset yang diperlukan telah dimasukkan ke cache atau tidak.

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});
Di sini Anda bisa melihat kita memanggil caches.open() dengan nama cache yang diinginkan, setelah itu kita memanggil cache.addAll() dan meneruskannya dalam larik file kita. Ini adalah rantai promise (caches.open() dan cache.addAll()). Metode event.waitUntil() mengambil promise dan menggunakannya untuk mengetahui berapa lama waktu yang diperlukan pemasangan, dan apakah berhasil.
Jika semua file berhasil di-cache, maka service worker akan dipasang. Jika ada file yang gagal diunduh, maka langkah pemasangan akan gagal. Ini memungkinkan Anda untuk mengandalkan aset yang telah didefinisikan, namun ini berarti Anda perlu berhati-hati dengan daftar file yang Anda putuskan untuk di-cache dalam langkah pemasangan. Mendefinisikan daftar file yang panjang akan meningkatkan kemungkinan adanya satu file yang mungkin gagal di-cache, sehingga menyebabkan service worker Anda tidak dipasang.
yaaap ... ServiceWorker sudah dibuat dan sekarang saatnya untuk melakukan uji coba untuk PWA dilocalhost .
Jika sebelum menggunakan PWA dengan dengan melakukan run ng -serve 
maka hasilnya akan seperti ini dengan cara klik kanan , inspek elemetn dan pilih audit dan kemudian perfome audit maka hasilnya akan seperti ini , dimana Progressive Web  masih terlihat rendah 




dan jika di lakukan offline untuk network maka gambar dinasaurus akan muncul dilayar browser anda

dan ini hasil setelah menggunakan PWA dengan melakukan run http-server pada project, hasilnya akan seperti ini





bisa kita lihat untuk Progressive Web nya meningkat untuk persentasinya dan jika network nya kita offline kan masih bisa untuk tetap digunakan tanpa keluar gambar dinasaurus di halaman browser kita, ini menandakan bahwa serviceworker kita bekerja, lihat untuk size nya yaitu from serviceworker , tentunya serviceworker akan bekerja jika kita pernah membuka atau mengunjungi halaman berikutnya dst , karena serviceworker berkerja mengambil cache yang disimpan . Ohiya minna, disini saya gunakan adalah AngularJS.

Mungkin demikianlah sedikit pengenalan mengenai Progressive Web Apps yang bisa saya bagikan, semoga bermanfaat.
Terimakasih.