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

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.

Cara Pembuatan JMS Topic pada Weblogic Server 12c

Pada kesempatan ini saya ingin menjelaskan cara pembuatan JMS Topic Module pada Weblogic Server 12c, pada Weblogic kita dapat membuat berbagai macam JMS module contohnya seperti JMS Queue dan JMS Topic Module, dapat diketahui pembuatan jms module pada 12c tidak jauh berbeda dengan pembuatan jms module pada 11g.

Pada blog-blog sebelumnya pernah dijelaskan pembuatan JMS Queue Module oleh Bang Hito (LINK) dan juga Bang Andre (LINK), seperti yang dijelaskan Bang Hito, perbedaan antara JMS Queue dan JMS Topic dapat dilihat pada domain pesan, dimana domain pesan pada JMS Topic berupa publish subscribe.

Secara garis besar pembuatan JMS Topic tidak jauh berbeda dengan pembuatan JMS Queue, berikut langkah-langkahnya:

1. Buka Admin Console weblogic server.
2. Buatlah sebuah JMS Server (Bila ingin menggunakan existing JMS Server langsung ke langkah 3), langkah ini cukup mirip dengan blog Bang Andre namun ada sedikit perbedaan yang tidak begitu signifikan.
   
   Untuk membuat JMS Server, pada Domain Structure, pilihlah Services > Messaging > JMS Servers.
   
                             
   
   Pada tampilan JMS Server pilihlah tombol New untuk membuat JMS Server baru.
   
                   
   
   Tentukan nama dari JMS Server, lalu klik tombol Next.
   
                   
   
   Pilihlah Filestore yang akan digunakan untuk menyimpan data JMS (Optional). Filestore juga dapat dibuat dengan menekan tombol "Create New Filestore" lalu memilih jenis Filestore, dimana pilihan JDBC store untuk menyimpan data JMS pada database, dan pilihan File store menyimpan pada suatu file.
   
                  
   
   Pilih target server/cluster dimana JMS Server akan ditempatkan, lalu klik tombol Finish.
   
                  
    
3. Buatlah sebuah JMS Module (Bila ingin menggunakan existing JMS Module langsung ke langkah 4) langkah ini cukup mirip dengan blog Bang Hito dan Bang Andre namun ada sedikit perbedaan yang tidak begitu signifikan.
   
   Untuk membuat JMS Module, pada Domain Structure, pilihlah Services > Messaging > JMS Modules.
   
                          
   
   Pada tampilan JMS Module pilihlah New untuk membuat JMS Module baru.
   
                 
   
   Tentukan nama dari JMS Module, tentukan nama descriptor, tentukan lokasi pada domain (optional), lalu klik tombol Next.
   
                 
   
   Centang lokasi server/cluster yang diinginkan, lalu klik Next
   
              
   
   Centang Would you like to add resources to this JMS system module?, lalu klik Finish.
   
              
4. Membuat Subdeployment (Bila menggunakan JMS Module existing yang sudah memiliki subdeployment dapat langsung ke langkah 5), Subdeployment merupakan mekanisme dimana resource JMS Module (seperti topic, queue, connection factory) dikelompokkan dan ditargetkan ke resource server (seperti JMS server, instance server, SAF agent, atau cluster).
   
   Contoh penggunaan subdeployment yang paling mudah adalah bila JMS System Module mengarah ke suatu server/cluster yang memiliki banyak JMS Server (misal ada 2), subdeployment ini yang akan menentukan JMS Server mana yang akan diakses.
   
   Pilihalah JMS Server yang baru saja kita buat
   
                 
   
   Pilihlah Tab Subdeployments
   
                  
   
   Klik tombol New
   
                  
   
   Tentukan nama Subdeployment lalu klik tombol Next
   
                 
   
   Tentukan Server/Cluster/JMS Server yang dituju oleh Subdeployment
   
                         
5. Membuat Connection Factory (Bila mengggunakan existing JMS Module yang sudah memiliki Connection Factory langsung ke langkah 6), Connection Factory digunakan untuk membuat JMS Connection oleh JMS Client.
   
   Pada halaman JMS System Module yang telah dibuat (pada tab Configutation) pilih New
   
                  
   
   Pilihlah Connection Factory, lalu klik Next
   
                  
   
   Tentukan nama connection factory, JNDI, lalu klik Next. untuk menggunakan connection factory default dari weblogic gunakan nama JNDI sebagai berikut (pilih salah satu):
   
   >   weblogic.jms.ConnectionFactory
   >   weblogic.jms.XAConnectionFactory
   
                  
   
   Tentukan target dari Connection Factory untuk menentukan JMS Server tertentu klik tombol Advanced Targeting lalu pilih Subdeployment yang merujuk ke JMS Server tersebut, klik Finish
6. Membuat JMS Topic, seperti pada pembuatan Connection Factory, Pada halaman JMS System Module yang telah dibuat (pada tab Configutation) pilih New, lalu pilih Topic lalu klik Next
   
                  
   
   Tentukan nama dari Topic, dan JNDInya
   
                   
   
   Pilihlah Subdeployment yang diinginkan, lalu klik Finish
   
                  
7. Membuat Durable Subscriber pada JMS Topic, Durable Subscriber dapat dibuat pada aplikasi (contoh: OSB) ataupun pada weblogic.
   
   Pilihlah JMS Topic yang sudah dibuat sebelumnya pada halaman JMS Module
   
                  
   
   Masuk ke Tab Monitoring
   
                  
   
   Pilih Tab Durable Subscribers, lalu klik tombol New
   
                 
   
                 
   
   Isilah Nama Subscription dan Client ID Subscriber
   
                 
   
   Pembuatan JMS Topic selesai, sekian penjelasan dari saya :)