Foo

 foo

 foo

 Apa itu Message Broker? Message broker adalah third-party application atau modules tambahan pada sebuah sistem aplikasi. Message broker ini...

 Apa itu Message Broker?

Message broker adalah third-party application atau modules tambahan pada sebuah sistem aplikasi.
Message broker ini berperan sebagai jembatan pada services dari sistem aplikasi yang sedang berjalan.

Studi Kasus

Jika dalam suatu sistem aplikasi terdapat dua service, misalkan service A, dan B. 
Service A digunakan untuk mengirim data ke Service B. Service B digunakan untuk memproses dan mengirim data ke end-user. Otomatis masing-masing dari kedua service tersebut harus berjalan. Bagaimana misalnya salah satu service mati? Bagaimana jika Service B untuk mengirim data ke end-user mati? Service A mengirim data kemana?
Service A akan gagal mengirim data ke Service B karena Service B mati. Dan karena Service B mati, kemungkinan besar Service A juga tidak akan berjalan.

Message Broker hadir untuk mengatasi masalah seperti diatas. Dalam pengunaannya, Message Broker menjadi jembatan antara Service A dan Service B. Jadi, jika ada salah satu service yang mati (dalam studi kasus yaitu Service B), maka Service A akan memforward data ke Message Broker, dan dari Message Broker akan dikirim(pending) ke Service B (yang mana service ini mati), dan jika Service B  telah hidup kembali, maka Service B akan menerima data dari Message Broker.

Apa itu Microservices? Dalam software arsitektur, didalmanya terdapat beberapa jenis arsitektur untuk pengembangan aplikasi, diantaran...

Introduction to Microservices - Comunytek

Apa itu Microservices?

Dalam software arsitektur, didalmanya terdapat beberapa jenis arsitektur untuk pengembangan aplikasi, diantaranya monolitik arsitektur dan microservice arsitektur. 

Pada monolitik arsitektur, kode program, bahasa serta database yang digunakan semua bagian dari fitur, fungsi dan services aplikasi disatukan dalam satu projek atau dalam satu waktu yang bersamaan. Dibawah ini adalah gambaran untuk monolitik arsitektur.

✩ Monolithic Architecture



Beda halnya dengan microservice. Microservice bekerja dengan memecah beberapa bagian dari aplikasi seperti fitur, fungsi, service serta database. Aplikasi akan dipecah atau dibagi sesuai dengan fungsionalitasnya, bagian dari pecahan tersebut dirancang dan akan bekerja secara independen. Dan setiap bagian, dapat menggunakan stack teknologi yang berbeda-beda. Dan, microservice berkomunikasi menggunakan HTTP API.

Kelebihan Microservices

1) Setiap services aplikasi berdiri sendiri (development & deployment), sehingga aplikasi dapat mudah di-develop, di-maintain dan di-scale.

2) Bisa berganti ke stack teknologi yang lebih baru sesuai dengan kebutuhan atau kemampuan pengembang

Kekurangan Microservices


1) Jika terdapat pengembangan atau scaling pada suatu services, maka setiap service yang saling berhubungan untuk mengikuti

2) Dalam aplikasi berskala besar seperti Facebook, tentunya memiliki microservices yang sangat banyak, oleh karena itu akan sulit untuk memonitoring dan memaintain aplikasi sehingga diperlukannya otomatisasi untuk hal tersebut

1. Failover System Failover adalah berpindahan yang dilakukan otomatis oleh sistem untuk membackup semua sub sistem aplikasi kita me...

1. Failover System

How to create a server failover solution - Expert How-To Guides

Failover adalah berpindahan yang dilakukan otomatis oleh sistem untuk membackup semua sub sistem aplikasi kita meliputi aplikasi, server, jaringan listrik, pendingin ruangan dan perangkat-perangkat penting lainnya. Tujuan dari adanya failover ini adalah untuk mengatasi jika terjadi kegagalan suatu sub sistem, maka sub sistem backup akan menggantikan fungsi yang gagal tersebut secara otomatis.

System yang mempunyai kemampuan failover akan menjamin bahwa aplikasi akan berjalan terus-menerus dan tidak terganggu akan kegagalan salah satu sub system karena ada proses penggantian sub system yang gagal ke sub system backup secara otomatis



2. Hypervisor

Apa Itu Hypervisor ? | IT-Jurnal.com

Hypervisor (disebut juga Virtual Machine Monitor) adalah platform atau aplikasi untuk menjalankan teknik virtualisasi, yang dapat menjalankan beberapa guest OS di dalam host OS. Secara sederhana, proses virtualisasi dilakukan oleh firmware ini mulai dari berbagi resource yang dimiliki oleh si host, hingga mengelola akses antara hardware dengan sistem operasi yang berjalan diatasnya.

Type Hypervisor :
a). Hypervisor tipe 1
            Hypervisor tipe 1 disebut juga sebagai baremetal atau native hypervisor. Hypervisor berjalan pada perangkat keras. Tipe ini diinstall seperti aplikasi yang bundling dengan OS menjadi satu dalam sebuah CPU, sehingga tidak seperti tipe 2 yang harus diinstall OS dulu sebelum menjalankan hypervisor tipe 2.

 b). Hypervisor tipe 2
            Hypervisor tipe 2 disebut juga sebagai hosted hypervisor. Hypervisor berperan sebagai software yang akan menjalankan dan mengelola virtual machine. Akses sumber daya hardware nya harus melewati sebuah sistem operasi terlebih dahulu.

Virtualisasi: Solusi Mudah Mencicipi Sistem Operasi Halaman 1 ...


3. Resource Cluster

Cloud Computing Patterns | Mechanisms | Resource Cluster ...


Resource Cluster adalah pengelompokan untuk meningkatkan alokasi performa penggunaan sistem. Resource Cluster digunakan untuk mengelompokkan beberapa resource yang terpisah menjadi satu. Hal tersebut meningkatkan kapasitas sumberdaya(resource) sistem yang dikelompokkan.



4. Multi Device Broker


Multi Device Broker adalah mekanisme yang digunakan untuk cloud service dapat diakses secara luas untuk program user dan perangkat user.



5. State Management Database

State Management Database adalah perangkat penyimpanan sementara yang digunakan untuk mempertahankan data untuk sistem. State management database juga berfungsi sebagai caching data dalam memori.

1. Basic Component <! DOCTYPE   html > < html   lang = "en" >    < head >      < meta   charset ...




1. Basic Component

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Basic Component</title>
  </head>
  <body>
    <div id="app">
      <!-- Pemanggilan component yang telah dibuat -->
      <hello-there></hello-there>
    </div>
  </body>

  <script src="lib/vue.js"></script>
  <script type="text/javascript">
    // proses pembuatan component bernama hello-there
    Vue.component("hello-there", {
      data() {
        return {
          message: "Hello there!"
        };
      },
      // templating untuk HTML agar menampilkan pesan Hello There dengan element Heading 1
      template: "<h1>{{message}}</h1>"
    });

    //Deklarasi Objek Vue dengan target elemen dengan id app
    let vm = new Vue({
      el: "#app"
    });
  </script>
</html>


Output


2. Global Component

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Global Component</title>
  </head>
  <body>
    <!-- Komponen global ini bisa dipanggil diberbagai target element VueJS. -->
    <div id="app1">
      <!-- target pertama dengan memanggil komponen global component-a -->
      <h1>Objek 1</h1>
      <component-a></component-a>
      <component-b></component-b>
    </div>
    <div id="app2">
      <!-- target kedua dengan memanggil komponen global yang sama yaitu component-a -->
      <h1>Objek 2</h1>
      <component-a></component-a>
      <component-c></component-c>
    </div>
  </body>

  <script src="lib/vue.js"></script>
  <script type="text/javascript">
    // Vue.component berfungsi untuk menggenerate component baru secara global(bisa di akses dimana saja)
    Vue.component("component-a", {
      template: `<p>Component a</p>`
    });
    Vue.component("component-b", {
      template: `<p>Component b</p>`
    });
    Vue.component("component-c", {
      template: `<p>Component c</p>`
    });

    // membuat 2 target untuk pengetesan komponen global.
    new Vue({ el: "#app1" });
    new Vue({ el: "#app2" });
  </script>
</html>


Output


3. Local Component

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Local Component</title>
  </head>
  <body>
    <div id="app">
      <h1>Objek Local</h1>
      <component-a></component-a>
      <component-b></component-b>
      <component-c></component-c>
    </div>
  </body>

  <script src="lib/vue.js"></script>
  <script type="text/javascript">
    // pembuatan component local berbeda dengan component global, untuk local perlu adanya variabel untuk menampung component tersebut.
    let ComponentA = {
      template: `<p>Component A</p>`
    };
    let ComponentB = {
      template: `<p>Component B</p>`
    };
    let ComponentC = {
      template: `<p>Component C</p>`
    };

    new Vue({
      el: "#app",
      components: {
        "component-a": ComponentA,
        "component-b": ComponentB,
        "component-c": ComponentC
      }
    });
  </script>
</html>


Output




4. Passing data to Component


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Passing Data</title>
    <style>
      .card {
        background: #efefef;
        border: 1px solid #ddd;
        margin-right: 5px;
        padding: 5px;
        width: 200px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- Menggunakan component local dengan nama book -->
      <!-- dalam component tersebut, terdapat 3 props dan diisi secara manual -->
      <book title="Belajar menulis" desc="apa aja" image="1.jpg"></book>
    </div>

    <script src="lib/vue.js"></script>
    <script>
      // membuat component local dengan nama BookComponent
      let BookComponent = {
        data() {
          return {
            cssCard: "card"
          };
        },
        // props berfungsi sebagai media parsing data dari element ke variabel VueJS.
        // terdapat 3 props yaitu title, desc dan image.
        props: ["title", "desc", "image"],
        // isi dari template ini adalah untuk menampilkan data yang telah terkirim/tersimpan pada props.
        template: `
              <div :class="cssCard">
                  <h3>{{title}}</h3>
                  <img :src="'images/'+image" style="width:100%">
                  <p v-html="desc"></p>
              </div>
          `
      };

      new Vue({
        el: "#app",
        components: {
          book: BookComponent
        }
      });
    </script>
  </body>
</html>


Output






5. Directive pada Component

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Passing Data</title>
    <style>
      .card {
        background: #efefef;
        border: 1px solid #ddd;
        margin-right: 5px;
        padding: 5px;
        width: 200px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <book v-for="book in books" :key="book.id" :book="book"></book>
    </div>

    <script src="lib/vue.js"></script>
    <script>
      let BookComponent = {
        data() {
          return {
            cssCard: "card"
          };
        },
        props: ["book"],
        template: `
              <div :class="cssCard">
                  <h3>{{book.title}}</h3>
                  <img :src="'images/'+book.image" style="width:100%">
                  <p v-html="book.desc"></p>
              </div>
          `
      };

      new Vue({
        el: "#app",
        components: {
          book: BookComponent
        },
        data: {
          books: [
            {
              id: 1,
              title: "Books 1",
              desc: "Description of books 1",
              image: "1.jpg",
              authors: "Johny Depp",
              publish: 2020,
              price: 150000
            },
            {
              id: 2,
              title: "Books 2",
              desc: "Description of books 2",
              image: "2.jpg",
              authors: "Taylor",
              publish: 2021,
              price: 250000
            },
            {
              id: 3,
              title: "Books 3",
              desc: "Description of books 3",
              image: "3.jpg",
              authors: "Swift",
              publish: 2018,
              price: 150000
            }
          ]
        }
      });
    </script>
  </body>
</html>


Output
Sama seperti sebelumnya, tetapi pada kali ini Component local diisi dengan v-for untuk pemanggilan data dari vuejs.







6. Update Data Parent From Component

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Passing Data</title>
    <style>
      .card {
        background: #efefef;
        border: 1px solid #ddd;
        margin-right: 5px;
        padding: 5px;
        width: 200px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>Selected : {{selectedBook}}</h1>
      <!-- Selected berfungsi untuk menyimpan event yang sedang terjadi kedalam variabel selectedBook dalam vueJs. -->
      <book
        v-for="book in books"
        :key="book.id"
        :book="book"
        @selected="selectedBook = $event"
      ></book>
    </div>

    <script src="lib/vue.js"></script>
    <script>
      let BookComponent = {
        data() {
          return {
            cssCard: "card"
          };
        },
        props: ["book"],
        // pada akhir template ini, terdapat button yang berfungsi untuk memanggil judul buku ketika button diklik.
        template: `
              <div :class="cssCard">
                  <h3>{{book.title}}</h3>
                  <img :src="'images/'+book.image" style="width:100%;height:150px;">
                  <p v-html="book.desc"></p>
                  <button @click="$emit('selected', book.title)">Select</button>
              </div>
          `
      };

      new Vue({
        el: "#app",
        components: {
          book: BookComponent
        },
        data: {
          books: [
            {
              id: 1,
              title: "Books 1",
              desc: "Description of books 1",
              image: "1.jpg",
              authors: "Johny Depp",
              publish: 2020,
              price: 150000
            },
            {
              id: 2,
              title: "Books 2",
              desc: "Description of books 2",
              image: "2.jpg",
              authors: "Taylor",
              publish: 2021,
              price: 250000
            },
            {
              id: 3,
              title: "Books 3",
              desc: "Description of books 3",
              image: "3.jpg",
              authors: "Swift",
              publish: 2018,
              price: 150000
            }
          ],
          selectedBook: ""
        }
      });
    </script>
  </body>
</html>


Output




7. Update Data Parent From Component

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Passing Data</title>
    <style>
      .card {
        background: #efefef;
        border: 1px solid #ddd;
        margin-right: 5px;
        padding: 5px;
        width: 200px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <alert>
        <p>Kenapa memilih mundur jika ada pilihan untuk bersyukur?</p>
      </alert>
      <br />
      <h1>Selected : {{selectedBook}}</h1>
      <book
        v-for="book in books"
        :key="book.id"
        :book="book"
        @selected="selectedBook = $event"
      ></book>
    </div>

    <script src="lib/vue.js"></script>
    <script>
      // slot berfungsi untuk mengirimkan elemen html ataupun template kedalam html.
      Vue.component("alert", {
        template: `
                <div class="card">
                    <strong>Alert</strong>
                    <hr>
                    <slot></slot>
                </div>
            `
      });
      let BookComponent = {
        data() {
          return {
            cssCard: "card"
          };
        },
        props: ["book"],
        template: `
              <div :class="cssCard">
                  <h3>{{book.title}}</h3>
                  <img :src="'images/'+book.image" style="width:100%;height:150px;">
                  <p v-html="book.desc"></p>
                  <button @click="$emit('selected', book.title)">Select</button>
              </div>
          `
      };

      new Vue({
        el: "#app",
        components: {
          book: BookComponent
        },
        data: {
          books: [
            {
              id: 1,
              title: "Books 1",
              desc: "Description of books 1",
              image: "1.jpg",
              authors: "Johny Depp",
              publish: 2020,
              price: 150000
            },
            {
              id: 2,
              title: "Books 2",
              desc: "Description of books 2",
              image: "2.jpg",
              authors: "Taylor",
              publish: 2021,
              price: 250000
            },
            {
              id: 3,
              title: "Books 3",
              desc: "Description of books 3",
              image: "3.jpg",
              authors: "Swift",
              publish: 2018,
              price: 150000
            }
          ],
          selectedBook: ""
        }
      });
    </script>
  </body>
</html>








8. Single File Component

1. Pada bagian single file component, disarankan menggunakan local server untuk menjalankannya.
2. Buat file baru dengan nama BookComponent.js
BookComponent.js

// fungsi export berguna untuk mengeksport component/variabel dalam javascript.
export const BookComponent = {
  data() {
    return {
      cssCard: "card"
    };
  },
  props: ["book"],
  template: `
    <div :class="cssCard">
        <h3>{{book.title}}</h3>
        <img :src="'images/'+book.image" style="width:100%;height:150px;">
        <p v-html="book.desc"></p>
        <button @click="$emit('selected', book.title)">Select</button>
    </div>
          `
};


index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Passing Data</title>
    <style>
      .card {
        background: #efefef;
        border: 1px solid #ddd;
        margin-right: 5px;
        padding: 5px;
        width: 200px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <alert>
        <p>Kenapa memilih mundur jika ada pilihan untuk bersyukur?</p>
      </alert>
      <br />
      <h1>Selected : {{selectedBook}}</h1>
      <book
        v-for="book in books"
        :key="book.id"
        :book="book"
        @selected="selectedBook = $event"
      ></book>
    </div>

    <script src="lib/vue.js"></script>
    <script type="module">
      // component global harus ada paling atas(?)
      Vue.component("alert", {
        template: `
                <div class="card">
                    <strong>Alert</strong>
                    <hr>
                    <slot></slot>
                </div>
            `
      });

      //Syarat untuk mengimport sebuah component external yaitu type script dengan module.
      import { BookComponent } from "./lib/BookComponent.js"; //mengimport BookComponent(nama komponen) dan menentukan path component tersebut.
      let vm = new Vue({
        el: "#app",
        components: {
          book: BookComponent
        },
        data: {
          books: [
            {
              id: 1,
              title: "Books 1",
              desc: "Description of books 1",
              image: "1.jpg",
              authors: "Johny Depp",
              publish: 2020,
              price: 150000
            },
            {
              id: 2,
              title: "Books 2",
              desc: "Description of books 2",
              image: "2.jpg",
              authors: "Taylor",
              publish: 2021,
              price: 250000
            },
            {
              id: 3,
              title: "Books 3",
              desc: "Description of books 3",
              image: "3.jpg",
              authors: "Swift",
              publish: 2018,
              price: 150000
            }
          ],
          selectedBook: ""
        }
      });
    </script>
  </body>
</html>




Output




9. Dynamic Components dan Transition Efect

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Passing Data</title>
        <style>
            .card {
                background: #efefef;
                border: 1px solid #ddd;
                margin-right: 5px;
                padding: 5px;
                width: 200px;
                float: left;
            }
            .fade-enter-active,
            .fade-leave-active {
                transition: opacity 0.5s;
            }
            .fade-enter,
            .fade-leave-to {
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- Saat button ditekan, button memanggil variabel currentComponent dengan isi list/detail sesuai dengan pilihan user. -->
            <button @click="currentComponent = 'list'">List</button>
            <button @click="currentComponent = 'detail'">Detail</button>
            <hr />
            <transition name="fade" mode="out-in">
                <component :is="currentComponent"></component>
            </transition>
        </div>

        <script src="lib/vue.js"></script>
        <script type="text/javascript">
            let list = {
                template: `
                    <div class="card">
                        <strong>Bahasa Pemrograman</strong>
                            <ul>
                                <li>PHP</li>
                                <li>Javascript</li>
                                <li>Java</li>
                            </ul>
                    </div>
                `
            };

            let detail = {
                template: `
                    <div class="card">
                        <strong>PHP</strong>
                            <p>PHP adalah singkatan dari Hypertext Preprocessor.</p>
                    </div>
                `
            };

            let vm = new Vue({
                el: "#app",
                data: {
                    currentComponent: "list"
                },
                components: {
                    list: list,
                    detail: detail
                }
            });
        </script>
    </body>
</html>






10. Mixins

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Mixins</title>
        <script src="lib/vue.js"></script>
    </head>
    <body>
        <div id="app"></div>
        <script>
            // membuat mixin pada kondisi created dan memanggil method hello
            let MixinHello = {
                created: function() {
                    this.hello();
                },
                methods: {
                    hello: function() {
                        console.log("Hello from mixin!");
                    }
                }
            };

            let vm = new Vue({
                el: "#app",
                // mengisi mixins dengan MixinHello yang telah dibuat diatas.
                mixins: [MixinHello]
            });
        </script>
    </body>
</html>












Perbedaan Local Component dengan Global Component

Perbedaannya terletak pada penggunaan component dan cara penulisan kode component, local component memerlukan variabel untuk menampung sebuah component. Untuk global component tidak memerlukan variabel terlebih dahulu, dan bisa di akses di target elemen vue mana saja.

Mixins

Mixins pada vue adalah sebuah fitur yang reusable untuk component vue. Mixin adalah perpaduan antara fitur-fitur yang ada dalam vuejs.
Subscribe to: Posts (Atom)