Malas Coding dengan menggunakan Framework Laravel dan LazyCrud Package

Asal Muasal lazycrud

Terkadang kita selalu melakukan hal yang hampir sama dalam coding, gitu-gitu aja dan hanya berbeda di property atau beberapa bagian saja. Selama kita sudah implentasi design pattern yang pas buat kita, maka struktur dan lain-lain hampir sama. Bahkan kita sampai bosan melakukan itu. 

Dan berasal dari situ, maka terpikir untuk melakukan ide males coding dengan membuat sebuah package untuk laravel yaitu lazycrud. Dengan menggunakan package ini, maka proses development bisa dipangkas sampai dengan 75%. Bahkan bisa lebih jika hanya membuat CRUD table sederhana. 

Pemanfaatan fitur Continuous Integration di gitlab untuk build app android secara cloud

Apa itu gitlab

Gitlab adalah Layanan Penyimpan Git gratis dan Open Source. Alamatnya ada di gitlab.com. Silahkan register secara free.

Apa itu CI(Continuous Integration)

In software engineering, continuous integration (CI) is the practice of merging all developer working copies to a shared mainline several times a day. wiki

Pemanfaatan CI

Salah satu pemanfaatan CI dalam pengembangan android adalah, untuk melakukan proses compiling semua source yang sudah di merge menjadi satu. Langkahnya sebagai berikut:

Login to gitlab project

Audit WebAppsmu Dengan Lighthouse - Progressive Web Apps

Apa itu Lighthouse?

Lighthouse merupakan sebuah tools otomatis berbasis opensource yang berguna untuk improve qualitas webapps yang kita bangun. Untuk menjalankan Lighthouse ini, bisa menggunakan chrome extension ataupun dengan command tools based on node js. Langkahnya sangat mudah, tinggal berikan url yang akan di test, Lighthouse sendiri akan otomatis melakukan test performa dari webapps yang kita bangun.

Let's start

Persiapan yang kita lakukan adalah install tools lighthouse terlebih dahulu.

Lighthouse Chrome Extension

Yang perlu anda lakukan adalah install lighthouse extension di chrome di chrome webstore atau bisa juga melalui link ini Lighthouse. 

Cara Mudah Add To Home Screen WebApps - Progressive Web Apps

Add To Home Screen

Salah satu teknik progressive web apps atau dikenal dengan ama PWA adalah Add To Home Screen. Teknik ini memungkinan membuat logo icon di home screen android dan menjadikannya menyerupai applikasi native. So, apa yang harus di lakukan?

Siapkan Gambar

Siapkan gambar dengan ukuran 512x512 pixel. Yang nantinya akan di jadikan sebagai icon dan logo splash saat aplikasi di buka. Contohnya seperti ini:

Progressive Web Apps - Instant Loading

Apa Itu PWA?

PWA adalah kepanjangan dari Progressive Web App. Salah satu fitur yang di sematkan di beberapa browser menuju teknologi yang lebih tinggi lagi. Fitur ini bukan hanya sebatas responsive saja, melainkan lebih dari itu. Karena goal dari Progressive Web App adalah menggabungkan antara yang terbaik dari Web dan terbaik dari App untuk membuat Web App menjadi lebih seperti App dan tanpa harus install tetapi hanya butuh akses alamat pertamakali.

Instant Loading

Untuk kali ini yang akan di bawas fiturnya adalah Instant Loading. Instant loading adalah teknologin yang memanfaatkan service worker untuk melakukan proses caching dan menjadikan browser menjadi semacam proxy local. Sehingga untuk akses ke dua kali, bingkai tampilan akan di siapkan terlebih dahulu oleh service worker, sedangkan untuk content nya akan terupdate setelah browser mendapatkan data baru. Dan yang lebih menarik lagi dari PWA ini adalah konsep ini juga sudah bisa berjalan di cross platform dan beberapa browser sudah support. Salah satunya adalah browser safari. 

Cuplikan di bawah ini merupakan salah satu contoh instant loading yang sudah terpasang di web https://dyangalih.com. Browser safari pada kondisi sudah clear data dan history. Kemudian yang dilakukan adalah:

1. Buka browser safari
2. Buka Web https://dyangalih.com. First load akan terasa sangat berat karena harus download all content.
3. Buka detik.com 
4. Buka google.com
5. Matikan Network dengan cara setting flight mode gadget
6. Bersihkan all tab di safari
7. Buka google.com dan perhatikan
8. buka detik.com dan perhatikan
9. Buka https://dyangalih.com dan perhatikan. 

Dari ketiga web hanya https://dyangalih.com yang sudah ready untuk disajikan dengan sekejap. Karena web ini sudah di sematkan Fitur Instant Loading dengan memanfaatkan service workser yang ada di browser.

Untuk menggunakan fitur Instant Loading ini hanya perlu menambahkan beberapa script disitus yang ingin di pasang:

buat file javascript dengan code dibawah ini:

var dataCacheName = '[Chache_Name]-v1';
var cacheName = '[Chache_Name]-v1';
var PATH = '';
var filesToCache = [
   PATH + '/',
   PATH + '/index.html'
];
self.addEventListener( 'install', function( e ) {
   console.log( '[ServiceWorker] Install' );
   e.waitUntil( caches.open( cacheName ).then( function( cache ) {
      console.log( '[ServiceWorker] Caching app shell' );
      return cache.addAll( filesToCache );
   } ) );
} );
self.addEventListener( 'activate', function( e ) {
   console.log( '[ServiceWorker] Activate' );
   e.waitUntil( caches.keys().then( function( keyList ) {
      return Promise.all( keyList.map( function( key ) {
         if ( key !== cacheName ) {
            console.log( '[ServiceWorker] Removing old cache', key );
            return caches.delete( key );
         }
      } ) );
   } ) );
} );
self.addEventListener( 'fetch', function( e ) {
   console.log( '[ServiceWorker] Fetch', e.request.url );
   if ( e.request.url.indexOf( dataUrl ) === 0 ) {
      e.respondWith( fetch( e.request ).then( function( response ) {
         return caches.open( dataCacheName ).then( function( cache ) {
            cache.put( e.request.url, response.clone() );
            console.log( '[ServiceWorker] Fetched&Cached Data' );
            return response;
         } );
      } ) );
   } else {
      e.respondWith( caches.match( e.request ).then( function( response ) {
         return response || fetch( e.request );
      } ) );
   }
} );

Ganti parameter dataCacheName dan cacheName sesuai kebutuhan. Jika di perlukan, ganti atau tambah data di array ini filesToCache. Simpan file diatas dengan nama service-worker.js atau nama lain juga boleh. Dan letakkan di DocumentRoot web tersebut. Kemudian di main page tambahkan script ini untuk pemanggilannya.

     <script type="text/javascript">
         ( function() {
             if ( 'serviceWorker' in navigator ) {
                navigator.serviceWorker.register( './service-worker.js' ).then( function() {
                   console.log( 'Service Worker Registered' );
                } );
             }
          } )();
      </script>

And that's it. Done. Hanya kurang dari 5 menit, fitur instant loading sudah terpasang di web yang di inginkan. So, tertarik untuk mencoba? 

My Presentation - PWA

Untuk presentasi yang pernah saya share ke temen-temen di acara GDG Jogja bisa di kunjungi alamat ini:

https://slides.com/dyangalih/pwa-progressive-web-app/live#/

SOA - Service-oriented architecture

 

Apa Itu SOA?

SOA atau kepanjangan dari Service-oriented architecture adalah sebuah bentuk arsitektur berbasis service sebagai pendekatannya untuk berkomunikasi antar komponen melalui jaringan.

Apa itu WebService?

Webservice adalah sebuah layanan komunikasi antar komponen yang menggunakaan jaringan komputer dan berjalan di atas layer protokol http. Webservice ini macamnya banyak sekali, bisa SOAP, RestFull API, XML-rpc, JSON-rpc dan masih banyak lagi.

BeOn - Belajar Online (Soal Matematika Otomatis)

Apa itu BeOn?

BeOn atau kepanjangan dari Belajar Online, adalah sebuah media untuk pembelajaran online untuk masyarakat luas. BeOn saat ini menginjak ke versi 1.0 Beta.