Microservices

Apa itu Microservice

     Microservice atau dikenal juga sebagai (microservice architecture) adalah architectural style yang menyusun aplikasi sebagai kumpulan dari beberapa service.

     Microservice architecture memungkinkan untuk men-deliver aplikasi yang besar dan komplek dengan lebih cepat, lebih sering dan lebih stabil.

Dilihat dari viewpoint teknologi, setiap service memiliki beberapa karakteristik, diantaranya:

• Dipisahkan berdasarkan business capabillities
• Di-develop secara independent
• Di-deploy secara independent
• Setiap service berkomunikasi menggunakan network, misalkan (HTTP) melalui API (sync) atau melalui message queues (async)

     Pemodelan microservices didasarkan pada business domain, setiap service bersifat mandiri dan mengimplementasikan single business capability (Sahiti, 2019).

     Sebagai contoh mari kita lihat aplikasi e-commerce. Secara umum aplikasi e-commerce mempunyai fitur seperti dibawah ini:

• Account management
• Product catalog
• Charting
• Chat
• Payment
• Product Review

     Pada konvensional arsitektur (atau lebih dikenal dengan nama monolithic architecture), semua fitur di atas akan digabungkan dalam satu codebase yang sama

     Dalam microservices architecture, setiap fitur tersebut akan dipisahkan dan menjadi satu service yang mengimplementasikan single business capability

Keuntungan menggunakan microservice

• Independent Development, setiap service dapat dengan mudah untuk didevelop berdasarkan pada fungsionalitas dari business domain yang akan di handle nya
• Independent Deployment, setiap service dapat di deploy dengan mudah dan independent, berdasarkan pada business domainnya
• Fault Isolation, Jika pada suatu saat terjadi kesalahan (error) pada satu service, maka service lainnya tidak akan ikut error
• Mixed Technology Stack, setiap service dapat di-develop dan di-deploy dengan menggunakan bahasa pemrograman dan technology stack yang berbeda, sesuai dengan kebutuhannya
• Granular Scalling, setiap service dapat di scale sesuai kebutuhannya, misalkan pada masa akhir - akhir Ramadhan biasanya terjadi lonjakan user yang belanja, maka service-service yang perlu di-scale adalah Product Catalog, Charting, dan Payment
• Simplicity, setiap service hanya menangani satu kebutuhan business saja, sehingga code yang ditulis menjadi lebih sedikit, dependency code menjadi lebih sedikit dan probability of bugs menjadi lebih rendah
• More freedom and fewer dependency, tim yang men-develop service dapat fokus dan bebas untuk melakukan penambahan fitur atau enchance fungsionalitas tanpa harus khawatir akan membuat service lain menjadi error, selama mengikuti kesepakatan interface yang sudah disepakati
• Data serregation dan decentralization, setiap service memiliki data tersendiri dan tidak melakukan share data secara langsung dengan service lainnya

Kerugian menggunakan microservice

• Troubleshooting complexity, microservice menyediakan semua kapabilitas dan fungsionalitas melalui komunikasi inter-microservice, yang meningkatkan potensi points of failure
• Increase latency, intraprocess communication antara microservice menjadi lebih lambat ketika dibandingkan dengan intraprocess yang terjadi pada monolithic application
• Operasional complexity, dengan puluhan, ratusan atau mungkin sampai ribuan mircoservice dalam real-world application, operation tim harus menghadapi complex infrastructure, deployment, monitoring, avaibility, backup dan management system
• Version control, karena microservices-based application ada kemungkinan untuk memiliki ribuan microservices, versioning dan management menjadi sedikit lebih komplek

Fitur menggunakan microservices

• Decoupling, setiap service diantara keseluruhan application memiliki sofat yang terpisah satu sama lain, sehingga keseluruhan aplikasi dapat dengan mudah di-develop, diubah dan di-scale
• Componentization, setiap service didesain sebagai komponen independen sehingga dapat dengan mudah diganti dan ditingkatkan
• Business Capabilities, microservices lebih simple dan dapat single business capability
• Autonomy, setiap developer dan tim microservices dapat bekerja secara independen, sehingga bisa meningkatkan kecepatan penge,bangan aplikasi secara keseluruhan
• Continous Delivery, memungkinkan lebih sering untuk merelease fitur baru atau meningkatkan fungsionalitas
• Responsibility, microservices tidak fokus pada aplikasi sebagai projek, tapi melihat aplikasi sebagai produk yang menjadi tanggung jawabnya
• Decentralized Governance, microservice fokus pada penggunaan right tool for right job. Setiap developer dan tim memiliki kebebasan untuk memilih best useful tools untuk menyelesaikan masalah yang mereka hadapi
• Agility, microservice mendukung agile development. Setiap fitur baru dapat dengan mudah dan cepat di develop, deploy dan deliver

Read More

Specialized Cloud Mechanism

Pengertian failover

kita akan merancang aplikasi kita untuk selalu online supaya aktivitas bisnis bisa berjalan secara terus-menerus. Di sini kita akan memberikan backup pada semua sub sistem aplikasi kita meliputi aplikasi, server, jaringan listrik, pendingin ruangan dan perangkat-perangkat penting lainnya. Tujuan dari adanya backup dari sub sistem – sub sistem ini adalah untuk mengatasi jika terjadi kegagalan salah satu sub system, maka sub system backup akan menggantikan fungsi yang gagal tersebut.

Saat berpindah dari sub system utama ke backup bisa dijalankan dengan campur tangan manusia dan ini disebut switchover.
Jika perpindahan ini dapat dilakukan secara otomatis oleh system maka disebut failover. 

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. Hal inilah yang disebut high availability.



Pengertian Hypervisor

Hypervisor adalah sebuah teknik virtualisasi yang memungkinkan beberapa operating system untuk berjalan bersamaan pada sebuah host. Dikatakan teknik virtualisasi karena OS yang ada bukanlah sebuah OS yang sesungguhnya, hanya sebuah virtual machine saja. Tugas dari hypervisor adalah untuk mengatur setiap operating system tersebut sesuai dengan gilirannya agar tidak mengganggu satu dengan yang lainnya. Terkadang, hypervisor juga disebut sebagai Virtual Machine Management (VMM), sesuai dengan tugasnya dalam mengatur beberapa virtual machine.

Pada setiap jenis komputer, seperti cluster computing, grid computing, PC ataupun mainframe, memiliki OS yang berbeda satu sama lain karena memiliki sistem yang juga berbeda. Setiap OS tersebut di desain sesuai dengan kebutuhan dari sistem masing masing. Untuk Hypervisor sendiri, didesain lebih mirip OS untuk mainframe dari pada Windows OS. Hal ini dikarenakan sebuah hypervisor, harus bisa mengatur beberapa sistem sekaligus, layaknya sebuah host melayani beberapa client pada mainframe.

Pada cloud computing, bukan hanya satu sistem saja yang harus diatur.Maka dari itu digunakanlah sebuah Hypervisor sebagai OS dari cloud computing. Hypervisor bertugas untuk mengatur beberapa virtual machine ini sehingga nantinya sebuah cloud computing bisa berjalan dengan baik.



Pengertian Resource cluster

Resource cluster merupakan layanan yang definisikan diatas cluster. Layanan dapat berupa aplikasi atau berupa data yang berjalan diatas cluster



Pengertian Multi-device broker

Multi-device Broker adalah entitas yang mengelola penggunaan, kinerja, dan pengiriman layanan cloud, dan menegosiasikan hubungan antara penyedia cloud dan konsumen cloud. Seiring berkembangnya komputasi awan , integrasi layanan cloud mungkin terlalu kompleks untuk dikelola sendiri oleh konsumen cloud.



Pengertian State Management Database

Database yang Terintegrasi dengan Cloud Computing
Database (basis data) merupakan kumpulan data yang saling berhubungan. Hubungan antardata dapat ditunjukan dengan adanya field/kolom kunci dari tiap file/tabel yang ada. Database dapat bekerja karena adanya aplikasi yang bertugas untuk mengatur, menyimpan, memodifikasi data. Aplikasi itu disebut dengan software database engine dan lebih resminya disebut dengan DBMS (Database Management System).

Read More

VueJS 5

A. Development Tools (Vue.js)
1. Untuk mengembangkan aplikasi berbasis Vue sebenarnya hanya dibutuhkan code editor untuk menulis kode programnya, serta web browser untuk menampilkan hasilnya.
2. Tidak ada pilihan spesifik, silahkan gunakan code editor yang diinginkan, seperti : Sublime, Visual Studio Code, Netbeans, Notepad++, Intelij Idea, dsb.
3. Untuk web browser pun juga bebas, bisa menggunakan Google Chrome, Mozilla Firefox, Safari, bahkan Microsoft IE (versi 9 atau later).

Component 1

Component 2

Component 3

Component 4

Component 5

Component 6

Component 7

Component 8

Component 9

Component 10

Read More

Containerization

Apa sebenarnya Container itu?

     Container adalah virtualisasi tingkat sistem operasi. Bisa juga disebut sebagai vitualisasi yang ringan. Karena hanya menyediakan kebutuhan minimum yang dibutuhkan sebuah aplikasi supaya bisa berjalan. Container merupakan virtual machine minimalis yang tidak berjalan pada hypervisor. Lalu apa saja yang ada di dalam container? Berikut ini yang ada dalam container :

1. Application

2. Binaries

3. Configuration File

4. Dependencies

5. Libraries

     Bagaimana caranya bisa berjalan di environment yang berbeda? Containerization memungkinkan container untuk berjalan di environment yang berbeda dengan cara mengabstraksi sistem operasi dan infrastruktur fisik. Sebuah aplikasi yang dijadikan container berbagi kernel host operating system dengan container yang lain. Bagian sistem operasi yang dibagi itu bersifat “Read-only”. Biasanya, dalam satu container hanya terdapat satu buah service atau microservice.

Tentang kernel dan sitem operasi

     Laptop, komputer, telepon, dll dibangun dengan menggunakan berbagai perangkat keras. Contohnya, CPU, kartu jaringan, memori, penyimpanan (SSD,HDD), dll. Semua orang tau hal itu, tapi bagaimana mereka berinteraksi satu sama lain. Interaksi itu dibantu dengan perangkat lunak yang disebut dengan kernel! Sebuah jembatan antara perangkat keras dan sistem operasi adalah kernel. Kernel inilah yang menjadwalkan untuk menjalankan sebuah proses, mengelola perangkat keras, menangani error, dll.

     Selain itu, sistem operasi berguna untuk membantu proses booting dan mengelola ruang pengguna. Proses pengguna dijalankan pada ruang ini dan terus-menerus berinteraksi dengan kernel.

Sesuatu tentang Linux Container

     Linux Container mengagumkan. Mereka digunakan secara luas karena mereka efektif. Linux cgroups membuat Linux Containers. Ia juga dikenal sebagai LXC. Implementasi utama pertama kontainer adalah LXC. Cara kerjanya dengan mengambil keuntungan dari isolasi cgroups dan namespace untuk menciptakan lingkungan virtual yang memiliki proses dan ruang jaringan yang terpisah.Sehingga mengarah pada ruang pengguna yang independen dan terisolasi. Singkatnya, konsep wadah saat ini berasal dari LXC. Versi Docker sebelumnya dibuat langsung di atas LXC.

Kedatangan Docker

     Docker sedang tren dan sukses besar. Ini adalah salah satu teknologi container yang paling banyak digunakan. Bahkan, ketika orang merujuk ke kontainer, mereka kebanyakan memahami yang dimaksud itu Docker. Selain Docker, ada beberapa teknologi container open source seperti rkt oleh CoreOS. Juga, perusahaan besar telah membangun mesin container mereka sendiri. Misalnya, lmctfy oleh Google.

     Jadi Docker sekarang menjadi standar industri dalam hal kontainerisasi. Bagaimana ini dibangun? Pada cgroups dan namespacing yang disediakan oleh kernel Linux dan Windows.

Lapisan Docker:

    Docker container terdiri dari berbagai lapisan. Ini termasuk images dan binari yang dikemas ke dalam satu paket. Base image memiliki sistem operasi container. OS image dan OS host dapat berbeda atau sama. Bagaimana OS containernya? Itu dalam bentuk image. Jika Anda membandingkan OS image dengan OS host, ada perbedaan! OS host adalah sistem operasi penuh, sedangkan OS image tidak penuh. Image hanyalah sistem file dan binari untuk OS. Sementara, OS lengkap termasuk sistem file, binari, dan Kernel.

     Ada beberapa image di atas base image. Mereka bersama-sama membuat sebagian dari container. Pengaturannya agak dinamis. Misalnya, di atas base image, ada image yang berisi dependensi apt-get. Di atas itu, mungkin ada image yang berisi aplikasi biner. Tetapi bagian yang paling menarik adalah, jika ada dua container dengan lapisan image 1,2,3 dan 1,2,4 maka anda hanya perlu menyimpan satu salinan dari setiap image! Secara lokal maupun di repositori. Ini adalah cara sistem file Docker beroperasi.

Docker dimuat dengan banyak fitur keren seperti:

(1) Copy on write.

(2) Volumes.

(3) Docker daemon.

(4) Version controlled repositories and more.

Apa yang diperlukan untuk container?

     Proses isolasi hanyalah salah satu sifat contaianer. Namun terlepas dari itu, ada banyak properti bermanfaat lainnya.

(1) Container berfungsi sebagai unit mandiri. Ini berarti dapat berjalan di mana saja. Pada setiap instances, containernya persis sama. OS host tidak masalah. Itu bisa CentOS, Ubuntu, MacOS atau non UNIX seperti Windows. Singkatnya, container yang dibangun di sistem anda juga dapat bekerja di server perusahaan!

(2) Orang dapat menganggap container sebagai unit standar atau komputer. Secara umum, dikatakan bahwa setiap kontainer menjalankan server web tunggal, satu basis data dari database, dll. Jadi untuk menskalakan aplikasi, seseorang dapat dengan mudah skala jumlah kontainer.

(3) Container adalah alat terbaik untuk menerapkan arsitektur layanan mikro. Masing-masing microservice adalah seperangkat container yang bekerja sama. Sebagai contoh, dimungkinkan untuk mengimplementasikan layanan mikro Redis dengan container master tunggal dan beberapa container slave. Arsitektur microservice memiliki banyak keunggulan dibandingkan dengan pendekatan monolitik atau tradisional.

Kelebihan dan kekukangan container

Kelebihan:

(1) Menjalankan container tidak menggunakan banyak sumber daya. Jadi seseorang dapat menambahkan lebih banyak beban kerja komputasi pada server yang sama.

(2) Dibandingkan dengan mesin virtual, ukuran rata-rata suatu container berada dalam kisaran puluhan atau ratusan MB, sedangkan mesin virtual mengkonsumsi beberapa gigabytes. Server dapat menampung lebih banyak kontainer.

(3) Kontainer cepat! Membuat container hanya membutuhkan beberapa detik. Waktu respons cepat ketika menyangkut aktivitas pengguna. Kontainer membantu mengurangi waktu yang dibutuhkan untuk pengembangan, pengujian, dan penyebaran.

(4) Menemukan kesalahan dan menyelesaikannya mudah dengan container. Mengapa? Karena tidak ada perbedaan antara menjalankan aplikasi secara lokal atau pada server uji.

Kekurangan:

(1) Keamanan adalah masalah dengan virtualisasi berbasis container dibandingkan dengan mesin virtual tradisional. Dalam container, Kernel dan komponen lain dari sistem operasi host dibagikan. Mereka memiliki akses root! Jadi container kurang terisolasi satu sama lain. Secara keseluruhan, itu tergantung pada jenis aplikasi dan modifikasi.

(2) Ada kurang fleksibilitas dalam sistem operasi. Jika Anda ingin menjalankan kontainer dengan sistem operasi yang berbeda, Anda harus memulai server baru.

IMPLEMENTASI DOCKER UNTUK PENGELOLAAN BANYAK APLIKASI WEB

(Studi Kasus : Jurusan Teknik Informatika UNESA) 

     Sistem web hosting modern, di dalam setiap servernya, mengelola banyak aplikasi web. Teknologi virtual machine dimanfaatkan untuk menyelesaikan masalah heterogenitas (perbedaan versi library atau tool dari beberapa aplikasi web). Peningkatan jumlah aplikasi web yang harus dihosting harus diikuti dengan peningkatan kualitas ataupun kuantitas sumber daya, terlebih saat hadirnya kebutuhan high availability dari layanan web tersebut. Teknik kontainerisasi (virtualisasi berbasis container) hadir sebagai solusi dan menjadi trend saat ini. Docker adalah salah satu software yang mengadopsi teknik kontainerisasi dan semakin banyak diterapkan di dalam lingkungan web hosting. Tulisan ini mencoba untuk melakukan kajian literatur terhadap teknologi virtualisasi di atas, baik virtual machine maupun container dan kemudian merangkum perbandingannya. Arsitektur container di dalam Docker merupakan fokus dari tulisan ini, termasuk perkembangan dan keunggulan dari Docker yang sudah diteliti dan diimplementasikan dalam dua tahun terakhir. Docker memudahkan proses deployment (penyebaran) aplikasi web beserta software pendukung seperti web server, database server, dependensi dan environment lain ke server. Dapat kemudahan dengan proses deployment (penyebaran) aplikasi web beserta software pendukung seperti web server, database server, dependensi dan environment lain ke server. Memberikan solusi pada banyak Aplikasi web yang membutuhkan Docker untuk bereksperimen atau mendukung mahasiswa yang ingin melakukan tugas akhir dengan berbagai topik

Read More

VueJS 4

A. Development Tools (Vue.js)
1. Untuk mengembangkan aplikasi berbasis Vue sebenarnya hanya dibutuhkan code editor untuk menulis kode programnya, serta web browser untuk menampilkan hasilnya.
2. Tidak ada pilihan spesifik, silahkan gunakan code editor yang diinginkan, seperti : Sublime, Visual Studio Code, Netbeans, Notepad++, Intelij Idea, dsb.
3. Untuk web browser pun juga bebas, bisa menggunakan Google Chrome, Mozilla Firefox, Safari, bahkan Microsoft IE (versi 9 atau later).

1. Buatlah form input data penjualan onlinshop yang menggunakan semua tipe inputan, kemudian pada form tersebut, tampilkan setiap data yang diketik atau dipilih, dan lakukan simulasi pengiriman data ke server.

2. Hasil

3. Buatlah sebuah list dalam bentuk table yang menampilkan data produk onlineshop, lengkap dengan gambar dan desain template yang bagus, kemudian tambahkan filtering yang bisa memfilter data yang di tampilkan.

4. Hasil

Read More

Mengenal Apa Itu Hybrid Cloud Dan Studi Kasus Dari Hybrid Cloud

Apa Itu Hybrid Cloud

     Jika Private Cloud merupakan layanan cloud yang aman dimana hanya bisa diakses oleh satu organisasi dan melalui jaringan private. Sementara Public Cloud merupakan layanan cloud yang dapat diakses oleh banyak pengguna melalui jaringan publik. Sedangkan Hybrid Cloud merupakan layanan cloud yang mengintegrasikan baik Private Cloud dan juga Public Cloud untuk menghadirkan fungsi yang beragam pada organisasi yang sama.

     Semua layanan cloud computing seharusnya menawarkan efisiensi, tetapi Public Cloud yang paling efisien dalam hal biaya dan juga lebih terukur dibandingkan dengan Private Cloud. Organisasi atau perusahaan dapat memaksimalkan efisiensi mereka dengan menggunakan layanan Public Cloud untuk semua operasi yang tidak bersifat sensitif. Dan hanya mengandalkan Private Cloud dimana mereka membutuhkannya ketika menjalankan operasi yang bersifat sensitif, dan memastikan semua platform mereka diintergrasikan dengan mulus. Itulah Hybrid Cloud.

Model Hybrid Cloud dapat diimplementasikan dalam beberapa cara:

• Memisahkan penyedia Cloud untuk menyediakan kedua layanan Private dan Public Cloud sebagai layanan terintegrasi.
• Penyedia cloud individu menawarkan paket hybrid yang lengkap.
• Organisasi yang mengelola Private Cloud mereka sendiri, dan juga berlangganan layanan Public Cloud , kemudian mereka mengintegrasikannya ke dalam infrastruktur mereka.

Contoh Studi Kasus

     Sekolah / Kampus yang ingin agar nilai para mahasiswa nya dapat di akses dimana saja (melalui internet), Tetapi para Murid / Mahasiswa hanya dapat mengakses dari sisi nilai saja, sedangkan hal lain - lain nya hanya Sekolah / Kampus tersebut yang dapat mengakses nya.

     Menurut saya pemodelan deployment cloud computing yang dapat diterapkan dalam perusahaan swasta tersebut adalah model Hybrid cloud yang merupakan penggabungan dari private cloud dan public cloud. Ini dapat memudahkan pengelolaan keamanan dan data. Data seperti NIK, NISN, Dll yang penting disimpan pada private cloud sehingga hanya Sekolah / Kampus tersebut saja yang dapat mengakses menggunakan jaringan private karena data data tersebut penting, sedangkan data seperti Nilai, Nama dll disimpan di public cloud sehingga para Murid / Mahasiswa dapat mengakses dan dapat melihat data / nilai mereka kapan dan dimana saja melalui internet.

Read More

VueJS 3

A. Development Tools (Vue.js)
1. Untuk mengembangkan aplikasi berbasis Vue sebenarnya hanya dibutuhkan code editor untuk menulis kode programnya, serta web browser untuk menampilkan hasilnya.
2. Tidak ada pilihan spesifik, silahkan gunakan code editor yang diinginkan, seperti : Sublime, Visual Studio Code, Netbeans, Notepad++, Intelij Idea, dsb.
3. Untuk web browser pun juga bebas, bisa menggunakan Google Chrome, Mozilla Firefox, Safari, bahkan Microsoft IE (versi 9 atau later).

1. Buatlah penerapan berbagai macam directive

2. Hasil

3. Buatlah sebuah list dalam bentuk collection yang menampilkan data produk onlineshop

4. Hasil

Read More

VueJS 2

A. Development Tools (Vue.js)
1. Untuk mengembangkan aplikasi berbasis Vue sebenarnya hanya dibutuhkan code editor untuk menulis kode programnya, serta web browser untuk menampilkan hasilnya.
2. Tidak ada pilihan spesifik, silahkan gunakan code editor yang diinginkan, seperti : Sublime, Visual Studio Code, Netbeans, Notepad++, Intelij Idea, dsb.
3. Untuk web browser pun juga bebas, bisa menggunakan Google Chrome, Mozilla Firefox, Safari, bahkan Microsoft IE (versi 9 atau later).


1. Buatlah penerapan siklus object vue dengan studi kasus lain yang berbeda dari contoh.

2. Hasil

3.  Buatlah template vue sederhana yang menggabungkan property template, data raw dan data attribute.

4. Hasil

5. Buatlah kalkulator sederhana yang memiliki inputan nilai 1 dan nilai 2, dengan 4 tombol perhitungan (tambah, kurang, kali, bagi). Ketika nilai telah diinput dan tombol di klik, tampilkan hasilnya.

6. Hasil

Read More

VueJS

A. Development Tools (Vue.js)
1. Untuk mengembangkan aplikasi berbasis Vue sebenarnya hanya dibutuhkan code editor untuk menulis kode programnya, serta web browser untuk menampilkan hasilnya.
2. Tidak ada pilihan spesifik, silahkan gunakan code editor yang diinginkan, seperti : Sublime, Visual Studio Code, Netbeans, Notepad++, Intelij Idea, dsb.
3. Untuk web browser pun juga bebas, bisa menggunakan Google Chrome, Mozilla Firefox, Safari, bahkan Microsoft IE (versi 9 atau later).


B. Instalasi & Konfigurasi (Vue.js)
1. Sebagai sebuah library Javascript, maka kita perlu menambahkannya ke dalam halaman HTML sebelum menggunakaannya. Untuk melihat versi terbaru dan sebelumnya, silahkan cek pada tautan berikut https://github.com/vuejs/vue/releases.

2. Library Vue terbagi menjadi dua, yaitu mode development (filenya tidak dikompres) dan mode production (file dikompres). Sangat disarankan menggunakan mode development saat mengembangkan aplikasi menggunakan Vue karena semua informasi umum (warning) jika terjadi kesalahan kode akan dimunculkan.

3. File Vue yang akan ditambahkan ke dalam halaman HTML bisa diunduh ke lokal (sehingga tidak membutuhkan koneksi internet) atau ditautkan langsung dengan server library Vue (CDN). Kita bisa mengunduh pustaka Vue versi development pada tautan berikut https://vuejs.org/js/vue.js , Adapun versi production bisa kita lihat pada tautan berikut ini https://vuejs.org/js/vue.min.js.

4. Buatlah struktur folder seperti berikut.

5. Copy code dari link berikut https://vuejs.org/js/vue.js, kemudian paste pada file lib/vue.js

6. Sebagaimana umumnya library javascript, untuk menambahkan ke halaman HTML maka cukup dengan kode berikut :

<script src="lib/vue.js"></script>

7. Kemudian coba dengan code berikut.

8. Kemudian jalankan kode tersebut pada browser. Kode di atas akan menghasilkan tampilan seperti ini.

C. Penjelasan Kode

1. Pada contoh di atas memang tidak ada kelebihannya, bahkan tidak disarankan untuk menggunakan kode ini jika hanya untuk menampilkan teks statis pada browser. Namun dari kode sederhana ini, kita akan belajar tentang bagaimana Vue tersebut bekerja.

2. Pertama, kita butuh HTML untuk menjalankan kode-kode Vue, karena Vue hanyalah sebuah library Javascript yang tugasnya memanipulasi tampilan HTML.

3. Kedua, Kita perlu menambahkan (include) library Vue ke HTML sebagaimana yang telah dijelaskan pada bagian Instalasi karena Vue merupakan library Javascript.

4. Ketiga, Kita perlu membuat kontainer (mount point) berupa elemen HTML, untuk menandai bahwa di dalam elemen tersebut nantinya hasil kompilasi Vue akan ditampilkan atau dimuat. Sebagai penanda, kita perlu tambahkan

atribut id pada tag tersebut yang nantinya akan didefinisikan pada saat inisiasi objek Vue.

5. Keempat, Kita perlu menggunakan double kurung kurawal untuk menandai bahwa teks tersebut merupakan variabel yang akan dimanipulasi oleh Vue, model seperti ini telah umum digunakan diberbagai template engine.

6. Kelima, Kita perlu membuat instance/objek baru untuk class Vue, yang tentunya ditulis dengan menggunakan Javascript.

Objek Vue yang dibuat ini disimpan ke dalam variabel bernama vm (nama bebas) untuk memudahkan kita nantinya dalam mengakses objek ini. Objek Vue pada kode di atas menggunakan dua properti yaitu el dan data. Properti el menunjukkan id dari elemen HTML yang akan dijadikan sebagai target atau tempat ditampilkannya hasil manipulasi data dan template.

7. Properti berikutnya adalah data yang berbentuk objek, dimana di dalamnya terdapat key message dengan nilai ‘Hello world!’ yang merupakan representasi dari variabel. Key atau variabel dalam properti data inilah yang akan mengubah kode template {{ message }} menjadi teks “Hello world!”. Dengan kata lain, jika kita mengubah nilai dari variabel message ini menjadi misalnya “Hello Vuejs!” maka tentu tampilan yang kita lihat pada browser juga akan berubah sesuai teks tersebut.

D.Kesimpulan
Kesimpulannya bahwa vue.js menjadi framework java script yang tergolong mudah digunakan dan dijadikan pilihan bagi para pengembang pemula javascript

Read More