Pada artikel kali ini, penulis akan membahas mengenai pengalaman penulis ketika mengikuti sidang komprehensif paket 1 teknik informatika di universitas gunadarma. Paket 1 terdiri dari mata kuliah yang bisa dibilang sedikit agak susah, mengapa demikian ? dikarenakan terdapat pemrograman web yang katanya sering disuruh ngoding di tempat tapi sebenarnya itu kembali ke pengujinya.

Penulis mendapatkan surat sidang, disana dicantumkan bahwa penulis sidang pada tanggal 1 september 2016. Penulis berangkat bersama teman - teman seperjuangan yaitu adhib dan aviv. Kami berangkat dari stasiun pondok cina sekitar jam 05:30 pagi, dan Alhamdulillah sampai di cikini jam 6:15. Sesampai disana, kami makan terlebih dahulu dan melalukan persiapan untuk menghadapi sidang.

Briefing dimulai pada jam 07:00, biasanya skripsi naik ke lantai 2 sedangkan bagi mereka yang komprehensif naik ke lantai 5. Setelah diberikan arahan, tiba waktunya pembagian sk dan kartu sidang. Penulis dipanggil dan maju ke depan untuk mengambil sk. Disana telah tertera dosen penguji dari masing - masing mata kuliah yang akan diujikan. Berikut adalah dosen penguji penulis.

Ketiga dosen tersebut teryata berada pada lantai 6, akhirnya penulis menuju ke lantai 6. Disana terdapat panitia sidang, penulis langsung lapor ke bagian panitia sidang, lalu kita tunggu hingga dipanggil oleh bagian sidang. Kira -kira sekitar 20 menit, akhirnya penulis dipanggil oleh panitia sidang dan mempersilahkan masuk ke ruangan. Di dalam ruangan tersebut ketiga dosen tersebut telah hadir dan mereka duduk berseblahan. Berikut adalah percakapan pada saat sidang pemrograman web.

• Pak Haryanto : ya rizki, apa perbedaan antara pemrograman biasa dan pemrograman web ?
• Penulis : pemrograman biasa digunakan untuk membuat aplikasi pak, bisa aplikasi desktop, web dan mobile sedangkan pemrograman web biasanya untuk membuat sebuah aplikasi web pak.
• Pak Haryanto : kenapa tampilan web di hp dan di komputer berbeda ?
• Penulis : karena mereka menggunakan responsive design pak, biasanya menggunakan css
• Pak Haryanto : css itu bukan sesuatu yang sakti, bagaimana dia bisa tahu bahwa kita menggunakan android untuk mengakses web tersebut ?
• Penulis : nah disini nih mulai susah, penulis mulai mikir - mikir, sebenarnya yang bapak nya maksud mungkin gimana sih cara nya si server tau kalau yang ngakses web itu adalah perangkat android ? atau yang akses web itu adalah perangkat laptop. Akhirnya penulis menjawab user agent pak, nantinya di user agent akan disisipkan pada bagian header http.
• Pak Haryanto : user agent itu juga bukan sesuatu yang sakti loh
• Penulis : mencoba menjawab walaupun sedikit tidak yakin, sebenarnya kita bisa menggunakan meta yang ada di tag html pak, disana kita bisa mendeklarasikan berapa lebar dari device tersebut.
• Pak Haryanto : kalau kamu bilang meta berarti kamu harus tau dong tentang struktur data meta, struktur data pada meta apa ?
• Penulis : nah disini nih udah stack banget, penulis tidak bisa menjawab, akhirnya penulis bilang “saya tidak tahu pak”
• Pak Haryanto : oke lanjut ya, perbedaan html dan php apa ?
• html biasanya digunakan untuk antarmuka web pak, sedangkan php biasanya digunakan untuk melakukan sebuah proses misalnya perhitungan, koneksi ke database dan lain - lain pak.
• Pak Haryanto : IP dari localhost apa ?
• Penulis : 127.0.0.1 pak
• Pak Haryanto : oke lanjut ke sebelah, sambil nunjuk ke pak Suryadi

Nah kali ini penulis disidang oleh pak Suryadi untuk mata kuliah teori bahasa dan automata.

• Pak Suryadi : coba sebutkan grammer pada noam chomsky ?
• Penulis : ada UG, CSG, CFG dan RG pak
• Pak Suryadi : mesin nya ada apa aja ?
• Penulis : UG -> Mesin turing, CSG -> linear bounded automata (LBA), CFG -> automata pushdown, RG -> Automata Hingga
• Pak Suryadi : coba sebutkan dan jelaskan tuple pada RG ?
• Penulis : S -> stata awal, M -> transisi, Vt -> himpunan input simbol, K -> himpunan input stata, Z -> stata penerima
• Pak Suryadi : mengapa dikatakan stata penerima ?
• Penulis : dikatakan stata penerima dikarena jika terdapat sebuah kalimat dan kalimat tersebut berakhir pada stata penerima maka kalimat tersebut diterima oleh mesin tersebut pak.
• Pak Suryadi : kenapa diterima oleh mesin tersebut ?
• Penulis : ya karena bahasa tersebut sesuai dengan grammer nya pak
• Pak Suryadi : yap, mantap, saya kira kamu bakal bingung sama jawabannya, biasanya mahasiswa banyak yang kurang mengerti dibagian ini, sambil ketawa. Apa sih perbedaan nondeterministik dan deterministik ?
• Penulis : kalau AHN (deterministik) dimana 1 input simbol hanya mempunyai 1 transisi sedangkan pada AHN (nondeterministik) dimana 1 input simbol bisa mempunyai banyak transisi.
• Pak Suryadi : apakah Automata Hingga punya output ?
• Penulis : nah ini emang gx ada di materi, akhirnya penulis jawab “tidak ada pak” dan teryata benar
• Pak Suryadi : iya benar, bagaimana kita tahu kalau terjadi sebuah transisi ?
• Penulis : terjadi sebuah transisi jika sebuah stata menerima input simbol pak, nah nantinya akan ada transisi antar stata, dimana transisi ini nantinya akan ada tabel yang mendefiniskan perpindahan antar state berdasarkan simbol pak.
• Pak Suryadi : oke cukup, silahkan pindah ke samping, sambil nunjuk ke pak maukar.

Nah kali ini penulis disidang oleh pak Maukar untuk mata kuliah rekayasa perangkat lunak.

• Pak Maukar : Apa yang kamu pelajari ?
• Penulis : saya belajar mengenai tahapan pembuatan aplikasi pak
• Pak Maukar : oke coba sebutkan model - model pada tahapan pembuatan aplikasi, saya kasih kata kunci yaitu spiral
• Penulis : spiral, waterfall, incremental, v-model, prototype pak
• Pak Maukar : coba jelasin tentang waterfall
• Penulis : nah disini penulis jelasin panjang lebar sesuai dengan teori :D
• Pak Maukar : oke, coba sebutkan macam - macam testing ?
• Penulis : unit test, integrated test, system test, validated test dan disini penulis juga menjelaskan seluruh test tersebut.
• Pak Maukar : kamu tau kan top down test dan bottom up test ? nah disini bapaknya bikin model kira - kira seperti berikut.

Nah menurut kamu, mana yang lebih optimal, top down test atau bottom up test ? jika benar, saya kasih nilai plus buat kamu

• Penulis : nah jadi tambah semangat buat nih buat sidang, hehehe. Disini penulis berfikir sebentar lalu penulis menjawab bottom up test pak
• Pak Maukar : alasannya ?
• Karena kita akan melakukan test module yang paling bawah terlebih dahulu pak, nah setelah module dibawah dilakukan test, baru module diatas nya kita lakukan test, dimana module diatasnya ini membutuhkan dependency dari module sebelumnya pak, Kemudian penulis membuat contoh seperti berikut.

Nah bisa dilihat pak, dari model diatas, kita akan melakukan test terhadap module 1, 2, 3 dan 4 terlebih dahulu pak, nah module 5 itu butuh module 1 dan 2 pak, jika kita tidak test module 1 dan 2 terlebih dahulu maka besar kemungkinan akan terjadi kesalahan pak apalagi module 5 membutuhkan module 1 dan 2 pak.

• Pak Maukar : oke siip, boleh keluar

Dari dosen penguji diatas, penulis hanya mendapatkan kendala pada pweb saja tapi Alhamdulillah mendapatkan bantuan nilai plus pada saat sidang mata kuliah rekayasa perangkat lunak. Setelah selesai sidang, maka kita akan menunggu hasil sidang dan akan diumumkan hari itu juga. Pengumuman biasanya akan diumumkan sekitar pukul 14:00 atau 15:00. Pada saat Pengumuman, penulis dipanggil ke lantai 2 sebagai gelombang pertama, nah disana nantinya akan dibagi lagi menjadi kelompok - kelompok dan penulis termasuk ke dalam kelompok 2. Di gelombang 1 terdapat 3 kelompok dan Alhamdulillah ketiga kelompok tersebut lulus semua.

Yang harus dipersiapkan adalah materi dan kepahaman anda terhadap materi yang akan diujikan. Teori memang wajib anda kuasai tapi anda wajib paham akan materi tersebut karena terkadang mereka ingin tahu apakah anda telah paham tentang materi yang telah anda pelajari. Sekian mengenai pengalaman sidang komprehensif paket 1 teknik informatika universitas gunadarma 2016 dan terima kasih :D.

Pada artikel Belajar Vagrant, penulis sudah menulis sedikit mengenai tool - tool yang mempermudah kita dalam development sebuah aplikasi. Salah satu tool tersebut adalah vagrant, pada artikel sebelumnya penulis telah membahas mengenai berbagai masalah yang terjadi pada saat development sebuah aplikasi. Pada artikel ini, penulis akan mencoba membahas mengenai teknologi baru yang patut dicoba karena teknologi ini merupakan salah satu teknologi yang akan digunakan pada masa depan :D, teknologi itu adalah docker.

Apa Itu Docker ?

Docker adalah sebuah project open source yang ditujukan untuk developer atau sysadmin untuk membangun, mengemas dan menjalankan aplikasi dimana pun di dalam sebuah container.

Mungkin anda sedikit bingung dengan pengertian diatas dikarenakan terlalu sulit untuk membayangkan bagaimana pengembangan aplikasi yang sebenarnya. Docker berfungsi sebagai virtualisasi sebuah sistem operasi atau sebuah server atau sebuah web server atau bahkan sebuah database server, dimana dengan menggunakan virtualisasi ini, diharapkan developer dapat mengembangkan aplikasi sesuai dengan spesifikasi server atau dengan kata lain, jika kita mengembangkan sebuah aplikasi lalu kita jalankan pada komputer kita sendiri maka secara otomatis aplikasi akan berjalan dengan baik, nah bagaimana jika server yang akan menjalankan aplikasi kita memiliki banyak perbedaan dengan komputer kita seperti perbedaan sistem operasi, arsitektur processor dan sebagainya. Dengan menggunakan virtualisasi ini maka para developer lebih mudah untuk mengatur mengenai deployment atau menjalankan aplikasi di server production.

Sebelum kita membahas mengenai docker lebih lanjut, kita akan mencoba membahas sedikit mengenai docker dan vagrant. Docker dan vagrant merupakan tool yang sama atau dapat dikatakan merupakan tool developer yang mempunyai fungsi yang sama, akan tetapi meski memiliki fungsi yang sama terdapat beberapa perbedaan sehingga kita perlu menentukan tool yang terbaik untuk melakukan development sebuah aplikasi. Beberapa perbedaan dapat dilihat melalui tabel berikut.

gambar diatas dapat anda lihat disini. Dari gambar dapat dilihat bahwa terdapat banyak sekali perbedaan antara docker dan vagrant. Perbedaan yang sangat mencolok adalah docker menggunakan resource atau memory yang lebih sedikit ketimbang vagrant, ini dapat dilihat dari penggunaaan RAM, penggunaan images sistem operasi dan juga dapat dilihat perbedaannya, jika menggunakan vagrant maka kita wajib melakukan instalasi virtual machine seperti virtual box atau vmware, berbeda dengan docker menggunakan linux container sehingga kita tidak perlu melakukan instalasi virtual machine.

Arsitektur Docker

Gambar diatas merupakan arsitektur docker, dimana docker terdiri dari beberapa element yaitu docker client, docker daemon, docker container, docker images dan docker registry. Docker menggunakan teknologi client server untuk menghubungkan antara docker client dan docker daemon. Penulis akan menjelaskan sedikit mengenai istilah - istilah penting pada docker.

Docker Daemon

Docker daemon berfungsi untuk membangun, mendistribusikan dan menjalankan container docker. User tidak dapat langsung menggunakan docker daemon, akan tetapi untuk menggunakan docker daemon maka user menggunakan docker client sebagai perantara atau cli.

Docker Images

Docker images adalah sebuah template yang bersifat read only. Template ini sebenarnya adalah sebuah OS atau OS yang telah diinstall berbagai aplikasi. Docker images berfungsi untuk membuat docker container, dengan hanya 1 docker images kita dapat membuat banyak docker container.

Docker Container

Docker container bisa dikatakan sebagai sebuah folder, dimana docker container ini dibuat dengan menggunakan docker daemon. Setiap docker container disimpan maka akan terbentuk layer baru tepat diatas docker images atau base image diatasnya. Contohnya misalkan kita menggunakan image ubuntu, kemudian kita membuat sebuah container dari image ubuntu tersebut dengan nama ubuntuku, kemudian kita lakukan instalasi sebuah software misalnya nginx maka secara otomatis container ubuntuku akan berada diatas layer image atau base image ubuntu. Anda dapat membuat banyak docker container dari 1 docker images. Docker container ini nantinya dapat dibuild sehingga akan menghasilkan sebuah docker images, dan docker images yang dihasilkan dari docker container ini dapat kita gunakan kembali untuk membuat docker container yang baru.

Docker Registry

Docker registry adalah kumpulan docker image yang bersifat private maupun public yang dapat anda akses di docker hub. Dengan menggunakan docker registry, anda dapat menggunakan docker image yang telah dibuat oleh developer yang lain, sehingga mempermudahkan kita dalam pengembangan aplikasi.

Instalasi Docker

Untuk melakukan instalasi docker, silahkan update terlebih dahulu repository ubuntu anda dengan perintah.

sudo apt update

Kemudian lakukan update CA certificates dengan perintah.

sudo apt install apt-transport-https ca-certificates curl software-properties-common

Kemudian tambahkan GPG key dengan perintah.

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

Lalu silahkan lakukan verifikasi fingerprint dengan perintah

sudo apt-key fingerprint 0EBFCD88

Jika berhasil maka akan muncul output seperti berikut

pub   4096R/0EBFCD88 2017-02-22
      Key fingerprint = 9DC8 5822 9FC7 DD38 854A  E2D8 8D81 803C 0EBF CD88
uid                  Docker Release (CE deb) <docker@docker.com>
sub   4096R/F273FCD8 2017-02-22

Lalu tambahan repo docker seperti berikut

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

Kemudian silahkan lakukan update kembali dengan perintah.

sudo apt update

Kemudian silahkan hapus docker yang lama jika anda pernah melakukan instalasi docker versi lama dengan perintah.

sudo apt purge lxc-docker

Lalu silahkan jalankan perintah berikut untuk melakukan instalasi docker.

sudo apt install docker-ce

lalu lakukan pengecekan status service docker dengan perintah.

sudo systemctl status docker

jika berhasil maka akan muncul output seperti berikut.

Agar kita dapat menggunakan docker tanpa sudo maka kita harus melakukan beberapa konfigurasi. Silahkan buat docker group dengan perintah berikut.

sudo groupadd docker

kemudian tambahkan user ke docker group dengan perintah.

sudo usermod -aG docker rizki

silahkan ganti rizki dengan user linux anda. Lalu silahkan restart komputer anda. Kita akan melakukan test docker dengan perintah.

docker run hello-world

Jika berhasil maka anda akan melihat output seperti gambar berikut.

Instalasi Docker Compose

Setelah melakukan instalasi docker engine atau core docker, langkah selanjutnya kita akan melakukan instalasi docker compose, apa itu docker compose ?

Docker compose berfungsi untuk menjalankan container docker secara bersamaan.

docker compose ini sangat berguna ketika aplikasi kita terpisah - pisah pada komputer yang berbeda, contohnya adalah aplikasi yang dibuat berada pada 1 container sedangkan database yang akan digunakan oleh aplikasi tersebut berada pada container yang lain. Ketika menggunakan docker compose maka kita dapat menjalankan kedua container tersebut secara bersamaan dan bahkan kita dapat melakukan link ke container yang kita inginkan.

Untuk melakukan instalasi docker compose silahkan jalankan perintah berikut untuk melakukan akses root.

sudo -s

kemudian jalankan perintah berikut.

curl -L https://github.com/docker/compose/releases/download/1.22.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose

Setelah selesai lalu beri hak akses eksekusi dengan perintah.

chmod +x /usr/local/bin/docker-compose

Lalu agar docker compose dapat diakses tanpa root, silahkan jalankan perintah berikut.

sudo chmod -R 777 /usr/local/bin/docker-compose

Kemudian lakukan pengecekan docker compose dengan perintah

docker-compose -version

Jika berhasil maka akan muncul output seperti berikut.

docker-compose version 1.22.0, build 9e633ef

Latihan Sails JS dengan Docker

Untuk mempercepat latihan, kita akan mencoba menggunakan Sails JS, apa itu Sails JS ?

Sails JS adalah salah satu framework mvc untuk node js.

Sails JS merupakan framework yang dikembangkan dari framework express js, dengan menggunakan scaffolding dari Sails JS maka Sails JS akan secara otomatis membuat project tanpa perlu membuat project dari awal. Sails JS telah menggunakan salah satu framework orm node js yaitu waterline sehingga mempermudah kita untuk melakukan migrasi antar database. Dan salah satu keunggulan dari Sails JS adalah mudahnya membuat API dengan menggunakan arsitektur REST.

Pada artikel ini, kita hanya akan membuat sebuah REST API dengan menggunakan Sails JS, dimana kita akan menggunakan database mariadb. Antara aplikasi dan database akan dibuatkan dua container yang berbeda, berikut adalah gambar arsitektur yang akan kita gunakan.

Setelah mengetahui arsitektur yang akan kita gunakan, hal yang pertama kali kita lakukan sekarang adalah melakukan instalasi Sails JS pada pc kita terlebih dahulu, karena Sails JS merupakan framework node js maka kita membutuhkan instalasi node js, bagi anda yang belum melakukan instalasi node js, silahkan lihat artikel instalasi perlengkapan coding node js . Untuk melakukan instalasi Sails JS silahkan jalankan perintah berikut.

npm -g install sails

Setelah selesai, kita akan membuat sebuah project dengan perintah.

sails new Belajar-Docker-SailsJS

Jika sudah, maka sails akan secara otomatis membuat sebuah project dengan nama Belajar-Docker-SailsJS. Kemudian silahkan buka dengan editor anda. Berikut adalah struktur folder projectnya.

Secara default, Sails JS menggunakan database local atau embedded database, karena kita ingin menggunakan database mariadb maka kita perlu melakukan instalasi module sails-mysql dengan perintah.

npm install sails-mysql --save

Kemudian silahkan buka file connections.js yang ada di dalam folder config lalu kita akan melakukan konfigurasi untuk koneksi ke database mariadb pada bagian berikut.

// someMysqlServer: {
//   adapter: 'sails-mysql',
//   host: 'YOUR_MYSQL_SERVER_HOSTNAME_OR_IP_ADDRESS',
//   user: 'YOUR_MYSQL_USER', //optional
//   password: 'YOUR_MYSQL_PASSWORD', //optional
//   database: 'YOUR_MYSQL_DB' //optional
// }

Karena kita belum mengetahui variabel apa saja yang dapat kita gunakan untuk melakukan koneksi database ke mariadb maka kita terlebih dahulu akan melakukan testing membuat container baru untuk mengetahui variabel environment dari database mariadb. Untuk membuat sebuah container silahkan jalankan perintah berikut.

docker run -d \
    --name latihan-container-mariadb \
    -e MYSQL_ROOT_PASSWORD=root \
    -e MYSQL_DATABASE=latihan \
    -e MYSQL_USER=rizki \
    -e MYSQL_PASSWORD=mufrizal \
    mariadb:10.1.16

Perintah diatas berfungsi untuk membuat sebuah container baru dengan nama latihan-container-mariadb, dimana container ini kita buat berdasarkan image mariadb dengan versi 10.1.16 dan pada saat pembuatan container ini, kita dapat melakukan set environment seperti database, password user dan lain sebagainya. Jika anda belum memiliki image mariadb maka secara otomatis, docker akan melakukan pull images mariadb yang berasal dari docker hub.

Jika telah berhasil, silahkan lakukan pengecekan docker image dengan perintah.

docker images

Jika berhasil maka akan muncul output seperti berikut.

REPOSITORY    TAG        IMAGE ID        CREATED         SIZE
mariadb       10.1.16    9a0138c02438    38 hours ago    391.6 MB

kemudian lakukan pengecekan container dengan perintah.

docker ps

Jika berhasil maka akan muncul output seperti berikut.

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS               NAMES
01444c38b227        mariadb:10.1.16     "docker-entrypoint.sh"   4 hours ago         Up 4 hours          3306/tcp            latihan-container-mariadb

Anda juga dapat mengecek container mana saja yang sedang jalan dengan menggunakan perintah.

docker ps -a

Langkah selanjutnya kita akan membuat sebuah container untuk aplikasi, dimana nantinya aplikasi ini akan melakukan koneksi ke mariadb yang berada pada container sebelumnya. Silahkan jalankan perintah berikut untuk membuat container aplikasi.

docker run --link latihan-container-mariadb:mariadb --name latihan-container-aplikasi -it node:6.3.1 bash

Perintah diatas berfungsi untuk membuat container dengan nama latihan-container-aplikasi, dimana container ini melakukan link ke container latihan-container-mariadb, container ini menggunakan image node:6.3.1. Setelah jalan, maka anda dapat melakukan akses container melalui terminal anda, lalu silahkan lakukan pengecekan environment mariadb dengan perintah.

printenv | grep MARIADB

Jika berhasil maka akan muncul output seperti berikut.

Setelah mengetahui variabel environment nya, kita balik lagi ke aplikasinya. Silahkan ubah codingan yang ada di dalam file connections.js seperti berikut.

MariadbServer: {
  adapter: 'sails-mysql',
  host: process.env.MARIADB_PORT_3306_TCP_ADDR,
  user: process.env.MARIADB_ENV_MYSQL_USER,
  password: process.env.MARIADB_ENV_MYSQL_PASSWORD,
  database: process.env.MARIADB_ENV_MYSQL_DATABASE
},

Selanjutnya silahkan buka file models.js di dalam folder config lalu ubah codingannya menjadi seperti berikut.

module.exports.models = {
  connection: 'MariadbServer',
  migrate: 'safe'
};

Setelah selesai melakukan semua konfigurasi tersebut, langkah selanjutnya adalah kita akan mencoba membuat API, untuk membuat API dengan menggunakan sails, silahkan jalankan perintah berikut.

sails generate api barang

maka secara otomatis sails akan membuat controller dan model, silahkan buka file Barang.js di dalam folder models kemudian ubah codingannya menjadi seperti berikut.

/**
 * Barang.js
 *
 * @description :: TODO: You might write a short summary of how this model works and what it represents here.
 * @docs        :: http://sailsjs.org/documentation/concepts/models-and-orm/models
 */

module.exports = {
  attributes: {
    idBarang: {
      type: 'integer',
      required: true,
      primaryKey: true,
      autoIncrement: true,
      columnName: 'id_barang'
    },
    namaBarang: {
      type: 'string',
      required: true,
      size: 50,
      columnName: 'nama_barang'
    },
    jenisBarang: {
      type: 'string',
      enum: ['cair', 'gas', 'padat'],
      required: true,
      columnName: 'jenis_barang'
    },
    hargaBarang: {
      type: 'integer',
      required: true,
      columnName: 'harga_barang'
    },
    tanggalKadaluarsa: {
      type: 'date',
      required: true,
      columnName: 'tanggal_kadaluarsa'
    }
  }
};

Codingan diatas tidak akan penulis bahas dikarenkan nanti akan penulis jelaskan pada artikel berikutnya :). Langkah selanjutnya silahkan buat sebuah file Dockerfile di dalam root folder, kemudian isikan codingan seperti berikut.

FROM node:alpine

RUN apk update && apk add ca-certificates wget openssl && update-ca-certificates
ENV DOCKERIZE_VERSION v0.6.0
RUN wget https://github.com/jwilder/dockerize/releases/download/$DOCKERIZE_VERSION/dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz \
    && tar -C /usr/local/bin -xzvf dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz
RUN npm cache clean --force
RUN npm install -g npm
RUN npm install -g sails
RUN mkdir /belajar-sailsjs-docker
WORKDIR /belajar-sailsjs-docker
ADD . /belajar-sailsjs-docker
RUN rm -rf node_modules
RUN npm install

Untuk dockerfile terdapat beberapa perintah yaitu.

• ADD : biasanya digunakan untuk melakukan copy file atau folder ke suatu direktory
• CMD : berfungsi untuk menjalankan sebuah perintah yang spesifik
• ENV : berfungsi untuk mendeklarasikan environment variabel
• FROM : berfungsi untuk mendeklarasikan base image yang akan digunakan.
• WORKDIR : berfungsi untuk mendefinisikan folder yang akan kita gunakan.
• MAINTAINER : berfungsi untuk mendeklarasikan nama author
• RUN : berfungsi untuk menjalankan perintah - perintah bash

Nah dari perintah - perintah diatas, penulis akan mendefinisikan arti dari codingan diatas.

• baris 1 : berfungsi untuk mendeklarasikan bahwa kita menggunakan image node dengan versi 6.3.1
• baris 2 : berfungsi untuk melakukan update dan instalasi software wget
• baris 3 : berfungsi untuk mendeklarasikan environment dockerize
• baris 4 : berfungsi untuk menjalankan perintah wget
• baris 5 : berfungsi untuk melakukan instalasi sails
• baris 6 : berfungsi untuk membuat folder/direktory untuk project
• baris 7 : berfungsi untuk mendefiniskan folder yang akan kita gunakan
• baris 8 : berfungsi untuk mengcopy seluruh file ke dalam folder belajar-sailsjs-docker
• baris 9 : berfungsi untuk menghapus folder node_modules
• baris 19 : berfungsi untuk melakukan instal dependency yang diperlukan oleh project

Karena kita tidak ingin file - file node_modules, .tmp dicopy ke docker maka kita perlu membuat file dockerignore. Silahkan buat sebuah file .dockerignore lalu isikan codingan seperti berikut.

.tmp
*.md
.editorconfig

Setelah selesai, langkah selanjutnya kita akan membuat konfigurasi docker-compose, untuk membuat konfigurasi docker-compose silahkan buat sebuah file docker-compose.yml pada root project lalu isikan dengan codingan berikut.

mariadb:
  image: mariadb:10.1.16
  environment:
    - MYSQL_ROOT_PASSWORD=root
    - MYSQL_DATABASE=microservicesailsjs
    - MYSQL_USER=rizki
    - MYSQL_PASSWORD=mufrizal

belajar-sailsjs-docker:
  image: rizki.mufrizal/belajar-docker-sailsjs
  ports:
    - "1337:1337"
  volumes:
    - .:/belajar-sailsjs-docker
  working_dir: /belajar-sailsjs-docker
  command: sh ./install.sh
  links:
    - mariadb

Bisa dilihat bahwa kita menggunakan konfigurasi docker compose versi 1, di dalam konfigurasi tersebut terdapat dua service/container yang akan dijalankan yaitu mariadb dan belajar-sailsjs-docker. Container belajar-sailsjs-docker mempunyai link terhadap container mariadb, sehingga container mariadb wajib dijalankan terlebih dahulu. Agar container mariadb dapat dijalankan terlebih dahulu maka kita dapat menggunakan dockeriza, aplikasi sails harus dijalankan dengan perintah sails lift maka di dalam command kita menggunakan perintah sails lift. Pada codingan diatas kita menggunakan perintah sh ./install.sh karena kita membutuhkan beberapa command bash, maka silahkan anda buat sebuah file install.sh di dalam root project, lalu masukkan codingan seperti berikut.

dockerize -wait tcp://db:3306
npm cache clean --force
npm install -g npm
npm install
sails lift

Setelah selesai, langkah selanjutnya kita akan melakukan build image terlebih dahulu dengan perintah.

docker build -t rizki.mufrizal/belajar-docker-sailsjs .

perintah diatas akan membuat sebuah image dengan nama rizki.mufrizal/belajar-docker-sailsjs dimana image ini dibuild berdasarkan konfigurasi dari file Dockerfile. Lalu selanjutnya kita akan menjalankan 2 container secara sekaligus dengan menggunakan docker compose, silahkan jalankan perintah berikut.

docker-compose up

Silahkan tunggu hingga aplikasi berjalan, jika berhasil maka akan muncul output seperti berikut.

NOTE : jika masih terdapat error pada saat docker compose dijalankan, silahkan matikan kedua container tersebut dengan perintah ctrl + c kemudian jalankan kembali docker tersebut, hal ini disebabkan karena konfigurasi mariadb pada saat pertama kali dijalankan memerlukan waktu yang lebih lama dibandingkan dengan start up aplikasi sails.

Menghapus Image Dan Container

Jika anda tidak memerlukan lagi docker image, anda dapat menghapusnya berdasarkan ID image, misalnya penulis menjalankan perintah.

docker images

Jika berhasil maka akan muncul output seperti berikut.

REPOSITORY    TAG        IMAGE ID        CREATED         SIZE
mariadb       10.1.16    9a0138c02438    38 hours ago    391.6 MB

untuk menghapus image tersebut, anda dapat menggunakan perintah.

docker rmi 9a0138c02438

untuk menghapus seluruh image, anda dapat menggunakan perintah.

docker rmi $(docker images -q)

Untuk container juga sama, hanya saja container menggunakan sintak yang berbeda, jika image menggunakan perintah rmi maka container menggunakan perintah rm, akan tetapi jika container masih aktif maka anda perlu mematikan container terlebih dahulu dengan perintah stop. Comtohnya jika penulis menjalankan perintah.

docker ps -a

maka akan muncul output

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS               NAMES
01444c38b227        mariadb:10.1.16     "docker-entrypoint.sh"   4 hours ago         Up 4 hours          3306/tcp            latihan-container-mariadb

anda dapat mematikannya dengan perintah.

docker stop 01444c38b227

lalu menghapus container tersebut dengan perintah

docker rm 01444c38b227

untuk mematikan seluruh container, anda dapat menggunakan perintah.

docker stop $(docker ps -a -q)

untuk menghapus seluruh container, anda dapat menggunakan perintah.

docker rm $(docker ps -a -q)

Uji Coba Aplikasi

Setelah panjang nulis artikel, akhirnya kita dapat melakukan uji coba :D. Untuk melakukan uji coba aplikasi, silahkan akses http://localhost:1337 pada browser anda, jika berhasil maka akan muncul output seperti gambar berikut.

Ini artinya, aplikasi yang telah kita buat telah berjalan dengan baik. Langkah selanjutnya kita akan melakukan uji coba REST API nya, silahkan buka postman, lalu konfigurasikan seperti berikut.

Lalu tekan tombol send, maka data akan tersimpan, untuk mengetahui apakah data telah disimpan atau tidak silahkan akses http://localhost:1337/barang pada browser anda, jika berhasil maka akan muncul output seperti gambar berikut.

Bagi anda yang ingin melihat contoh project docker yang lain, silahkan lihat di Belajar Docker. Sekian artikel mengenai belajar docker dan terima kasih :)

Beberapa hari yang lalu, penulis iseng - iseng lihat sebuah framework node js yang katanya sedang naik daun. Awalnya penulis agak bingung karena di tutorialnya dijelaskan mulai dari server dan client bisa dijadikan menjadi 1 project tanpa perlu bantuan API. Selama ini, penulis biasanya akan membuat API terlebih dahulu lalu membuat client untuk dapat melakukan akses API tersebut, biasanya client yang digunakan adalah angular js atau vue js. Berbeda dengan meteor, dimana client yang terdapat di dalam project meteor dapat langsung memanggil method yang berada pada server.

Apa Itu Meteor ?

Meteor adalah sebuah platform yang dibangun di atas Node JS untuk membuat aplikasi web real-time.

Karena meteor dibangun diatas node js maka kita dapat membuat aplikasi server dan client. Meteor js mendukung beberapa templating yang dapat kita gunakan yaitu Blaze, Angular js (1), Angular 2 dan React. Pada artikel kali ini, penulis akan mencoba membahas mengenai templating blaze, mengapa demikian ? dikarenakan jika anda menggunakan templating seperti angular js maka anda wajib mengerti terlebih dahulu cara kerja angular js :D. Mulai dari server hingga client, kita akan menggunakan bahasa pemrograman javascript, dan javascript yang akan kita gunakan adalah ES6, tapi browser kita masih menggunakan ES5 gimana dong ? tidak perlu khawatir karena meteor akan secara otomatis melakukan convert dari ES6 menjadi ES5.

Instalasi Meteor Dan Setup Project

Jika anda penggunakan keluarga GNU/Linux maka bersyukurlah karena instalasi meteor sangatlah mudah, silahkan jalankan perintah berikut untuk melakukan instalasi meteor.

curl https://install.meteor.com/ | sh

Bagi anda pengguna windows silahkan download installernya di install meteor. Jika berhasil, maka akan muncul output seperti berikut.

Oke, tahap selanjutnya kita akan mencoba membuat project sederhana dengan menggunakan meteor. Project yang akan kita buat adalah aplikasi chatting sederhan dengan menggunakan meteor, template yang akan kita gunakan adalah blaze. Silahkan jalankan perintah berikut untuk membuat project dengan menggunakan meteor.

meteor create Belajar-Meteor

Maka secara otomatis, meteor akan membuat sebuah project dengan nama Belajar-Meteor. Lalu akses folder project dengan menggunakan terminal anda. Lalu jalankan perintah berikut untuk menjalankan project yang telah kita buat.

meteor

Maka akan muncul output berikut pada terminal anda.

[[[[[ ~/Documents/Meteor-Project/Belajar-Meteor ]]]]]

=> Started proxy.                             
=> Started MongoDB.                           
=> Started your app.                          

=> App running at: http://localhost:3000/

Silahkan akses http://localhost:3000/ pada browser anda, jika berhasil maka akan muncul output seperti berikut.

Menambah Package Dan Mengatur Tampilan

Meteor telah menyediakan banyak package, package yang anda perlukan dapat anda temukan di Atmosphere. Pada artikel kali ini, kita akan mencoba menggunakan bootstrap 4 untuk memperindah tampilannya, karena bootstrap 4 masih alpha maka mereka masih banyak menggunakan scss sebagai css preprocessor mereka. Untuk dapat menggunakan package sass, silahkan akses folder project anda kembali lalu jalankan perintah berikut untuk menghapus standard minifier css.

meteor remove standard-minifier-css

Lalu jalankan tambahkan package minifier autoprefixer dengan perintah.

meteor add seba:minifiers-autoprefixer

Tahap selanjutnya, tambahkan package sass yang kita butuhkan dengan perintah.

meteor add fourseven:scss

Silahkan rename file main.css menjadi main.scss yang terdapat di dalam folder client, lalu masukkan codingan seperti berikut.

@import "{}/node_modules/bootstrap/scss/bootstrap.scss";

Codingan diatas berfungsi untuk melakukan import bootstrap ke project meteor yang telah kita buat. Kemudian silahkan buka file main.js yang ada di folder client, dan ubah codingannya menjadi seperti berikut.

import '../imports/ui/chat';
import 'bootstrap';

Jika tadi kita telah melakukan import library bootstrap dengan extensi scss, maka untuk melakukan import bootstrap dengan extensi js cukup dengan melakukan import pada file main.js. Lalu buka file main.html dan ubah codingan htmlnya menjadi seperti berikut.

<head>
    <title>Belajar Meteor</title>
</head>

Langkah selanjutnya, silahkan buat folder imports/ui/ kemudian buatlah 2 file di dalam folder tersebut yaitu chat.js dan chat.html. Meteor tidak memiliki suatu struktur folder yang disepakati maka oleh karena itu, anda dapat membuat struktur project berdasarkan keinginan anda. Folder imports/ui adalah folder untuk semua codingan bagian client, dimana nantinya file - file yang ada disini akan kita import ke file main.js yang berada pada folder client. Buka file chat.js kemudian masukkan codingan seperti berikut.

import './chat.html';

Kemudian untuk file chat.html silahkan isikan codingan seperti berikut.

<body>
    <h1>Welcome to Meteor!</h1>

    {{> hello}}
</body>

<template name="hello">
    <div class="jumbotron">
        <h1 class="display-3">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="m-y-md">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
        </p>
    </div>
</template>

Kemudian silahkan akses browser anda, dan hasilnya akan muncul seperti berikut :D.

Membuat Collections

Secara default, meteor menggunakan database mongodb. Apakah kita diharuskan melakukan instalasi mongodb ? jawabannya adalah tidak, dikarenakan secara default meteor telah membuat database mongodb di dalam folder project anda. Jika anda buka folder .meteor yang di hidden maka anda dapat melihat bahwa database mongodb terdapat di dalam folder local/db seperti gambar berikut.

Collection disini sebenarnya adalah sesuatu yang sederhana, dimana collection ini sama seperti tabel jika kita berada pada database yang berbasis RDBMS, hanya saja collection disini berbeda dengan pada tabel biasa dimana collection ini dapat kita gunakan tanpa perlu mendefinisikan column apa saja yang akan kita gunakan. Pada tutorial ini, kita akan menggunakan 4 column yang berada pada collection chats diantaranya adalah:

• id : string
• nama : string
• pesan : string
• waktu : date

Langkah selanjutnya silahkan buat folder imports/api kemudian buat sebuah file chats.js lalu tambahkan codingan seperti berikut.

import { Mongo } from 'meteor/mongo';

export const Chats = new Mongo.Collection('chats');

Codingan diatas berfungsi untuk membuat sebuah collection chats, kemudian kita lakukan export agar dapat digunakan oleh file javascript yang lain. Lalu silahkan buka file main.js yang berada pada folder server lalu ubah codingannya menjadi seperti berikut.

import { Meteor } from 'meteor/meteor';
import { Chats } from '../imports/api/chats';

Meteor.startup(() => {
  Chats.remove({});
  if (Chats.find().count() === 0) {
    const chats = [{
      'nama': 'rizki',
      'pesan': 'hy...',
      'waktu': new Date()
    }, {
      'nama': 'mufrizal',
      'pesan': 'hy juga...',
      'waktu': new Date("October 13, 2015 11:13:00")
    }];

    chats.forEach((chat) => {
      Chats.insert(chat)
    });
  }

});

Codingan diatas berfungsi untuk melakukan insert data jika data yang terdapat di dalam collection chat tidak tersedia. Hal ini kita lakukan untuk melihat data yang akan kita tampilkan nantinya. Lalu buka kembali file chat.js dan ubah codingannya menjadi seperti berikut.

import { Template } from 'meteor/templating';
import { Chats } from '../api/chats';

import './chat.html';

Template.body.helpers({
  chats() {
    return Chats.find({}, {
      sort: {
        waktu: -1
      }
    });
  }
});

Codingan diatas berfungsi untuk mengambil data chat, dimana data chat ini akan bersifat realtime, mengapa demikian ? dikarenakan kita melalukan akses data tersebut berada di dalam method helpers milik meteor, data tersebut akan tersimpan di dalam variabel chats. Kemudian silahkan buka file chat.html lalu ubah codingannya menjadi seperti berikut.

<body>
  <h1 style="text-align: center">Aplikasi Chat Sederhana</h1>
    <div class="container">
        {{#each chats}}
            {{> tabelchat}}
        {{/each}}
    </div>
</body>

<template name="tabelchat">
    <div class="card card-block">
        <h4 class="card-title">{{nama}} | {{waktu}}</h4>
        <p class="card-text">{{pesan}}</p>
    </div>
</template>

Jika berhasil, maka outputnya akan seperti berikut.

Membuat Forms Dan Events

Untuk membuat form sama seperti membuat form biasa, kita dapat melakukan submit, click dan sebagainya. Pada tutorial kali ini, penulis ingin menggunakan fungsi submit pada form untuk mengirim pesan. Untuk mendeteksi adanya event submit dari user maka kita harus menggunakan attribut id atau class yang ada pada html, penulis akan menggunakan attribut id untuk membuat event submit. Silakan buka file chat.html yang berada di dalam folder imports/ui kemudian ubah codingannya menjadi seperti berikut.

<body>
    <h1 style="text-align: center">Aplikasi Chat Sederhana</h1>
    <div class="container">
        {{#each chats}}
            {{> tabelchat}}
        {{/each}}

        <form id="form-kirim-pesan" class="form-inline">
            <div class="form-group">
                <input type="text" class="form-control" name="nama" placeholder="Masukkan Nama Anda">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" name="pesan" placeholder="Masukkan Pesan Anda">
            </div>
            <button type="submit" class="btn btn-primary">Kirim</button>
        </form>
    </div>
</body>

<template name="tabelchat">
    <div class="card card-block">
        <h4 class="card-title">{{nama}} | {{waktu}}</h4>
        <p class="card-text">{{pesan}}</p>
    </div>
</template>

Bisa kita lihat bahwa codingan diatas terdapat id form-kirim-pesan yang nantinya akan kita gunakan untuk mendeteksi event submit sebuah form, dan deklarasikan nama setiap text input agar kita dapat mengambil data dari inputan tersebut. Langkah selanjutnya silahkan buka file chat.js yang berada di dalam folder imports/ui lalu ubah codingannya menjadi seperti berikut.

import { Template } from 'meteor/templating';
import { Chats } from '../api/chats';

import './chat.html';

Template.body.helpers({
  chats() {
    return Chats.find({}, {
      sort: {
        waktu: -1
      }
    });
  }
});

Template.body.events({
  'submit #form-kirim-pesan'(event) {
    event.preventDefault();

    Chats.insert({
      'nama': event.target.nama.value,
      'pesan': event.target.pesan.value,
      'waktu': new Date()
    });

    event.target.nama.value = '';
    event.target.pesan.value = '';
  }
});

Nah disini kita mendeklarasikan event submit untuk id form-kirim-pesan, kemudian untuk mengambil inputan dari user, kita dapat menggunakan variabel event.target, setelah mendapatkan valuenya, value tersebut kita simpan ke dalam collection yang telah kita buat. Silahkan anda jalankan kembali project yang telah anda buat, jika berhasil silahkan jalankan di 2 browser, misalnya disini penulis menjalankan di 2 browser yang berbeda yaitu di chromium dan firefox developer berikut adalah hasilnya.

Deploy Aplikasi Meteor Ke OpenShift

Melakukan deploy aplikasi meteor merupakan sesuatu yang lumayan susah, mengapa demikian ? dikarenakan beberapa hosting tidak menyediakan support untuk meteor. Penulis beberapa kali mencari referensi, termasuk ke heroku akan tetapi repository yang dapat kita gunakan rata - rata masih belum mendukung meteor 1.3, ada yang mendukung tapi kita diwajibkan untuk melakukan verifikasi kartu kredit. Akhirnya, setelah lama mencari referensi, OpenShift merupakan pilihan yang tepat karena didukung oleh repository dan ketersediaan database mongodb :D. Bagi anda yang belum melakukan konfigurasi OpenShift bisa dilihat di artikel belajar membuat cloud storage dengan owncloud.

Untuk melakukan deploy project meteor ke OpenShift, kita akan menggunakan repository meteor-openshift milik om jeeeyul. Tahap pertama adalah, kita akan membuat cartridge baru pada OpenShift dengan perintah.

rhc app create belajarmeteor \
  nodejs-0.10 \
  https://raw.githubusercontent.com/icflorescu/openshift-cartridge-mongodb/master/metadata/manifest.yml

Jika berhasil maka akan muncul output seperti berikut.

The cartridge
'https://raw.githubusercontent.com/icflorescu/openshift-cartridge-mongodb/master/metadata/manifest.yml'
will be downloaded and installed

Application Options
-------------------
Domain:     mufrizal
Cartridges: nodejs-0.10, https://raw.githubusercontent.com/icflorescu/openshift-cartridge-mongodb/master/metadata/manifest.yml
Gear Size:  default
Scaling:    no

Creating application 'belajarmeteor' ... Starting MongoDB...
done

  MongoDB 3.2.7 installed - use $MONGODB_URL environment variable to connect your application.
MongoDB started.

Waiting for your DNS name to be available ... done

Cloning into 'belajarmeteor'...
The authenticity of host 'belajarmeteor-mufrizal.rhcloud.com (54.175.169.24)' can't be established.
RSA key fingerprint is SHA256:FeJCkIUL7D41FMGNtM5NYM4XoboxZGYEqH0WcAmOX+I.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'belajarmeteor-mufrizal.rhcloud.com,54.175.169.24' (RSA) to the list of known hosts.

Your application 'belajarmeteor' is now available.

  URL:        http://belajarmeteor-mufrizal.rhcloud.com/
  SSH to:     5783f2817628e1c1be0000b7@belajarmeteor-mufrizal.rhcloud.com
  Git remote: ssh://5783f2817628e1c1be0000b7@belajarmeteor-mufrizal.rhcloud.com/~/git/belajarmeteor.git/
  Cloned to:  /home/rizki/belajarmeteor

Run 'rhc show-app belajarmeteor' for more details about your app.

Lalu silahkan akses folder belajarmeteor lalu jalankan perintah berikut untuk menghapus konfigurasi openshift.

git rm -rf * .openshift

Kemudian jalankan perintah berikut untuk fetch meteor bundle.

git remote add meteor-openshift -m master git@github.com:jeeeyul/meteor-openshift.git
git pull -s recursive -X theirs meteor-openshift master

Jika terjadi warning seperti ini.

warning: no common commits
remote: Counting objects: 72, done.
remote: Total 72 (delta 0), reused 0 (delta 0), pack-reused 72
Unpacking objects: 100% (72/72), done.
From github.com:jeeeyul/meteor-openshift
 * branch            master     -> FETCH_HEAD
 * [new branch]      master     -> meteor-openshift/master
fatal: refusing to merge unrelated histories

Maka jalankan perintah pull seperti berikut.

git pull -s recursive -X theirs meteor-openshift master --allow-unrelated-histories

Jika sudah, silahkan akses kembali directori folder project meteor anda, lalu jalankan perintah

meteor build path/to/your/openshift-appname --directory --server-only

Berikut adalah contoh jika penulis menggunakan perintah diatas.

meteor build /home/rizki/belajarmeteor --directory --server-only

Langkah selanjutnya silahkan akses lagi folder repository openshift anda, lalu jalankan perintah berikut untuk melakukan deploy ke openshift.

git add --all && git commit -m "deploy meteor ke openshift" && git push

Jika sukses maka akan muncul output seperti berikut di terminal anda.

remote: Starting NodeJS cartridge
remote: Mon Jul 11 2016 15:40:13 GMT-0400 (EDT): Starting application 'belajarmeteor' ...
remote: Waiting for application port (8080) become available ...
remote: Found 127.9.223.1:8080 listening port
remote: 
remote: [meteor-openshift] Node.js version: 0.10.43
remote: [meteor-openshift] http://belajarmeteor-mufrizal.rhcloud.com/ is ready!
remote: -------------------------
remote: Git Post-Receive Result: success
remote: Activation status: success
remote: Deployment completed with status: success
To ssh://5783f2817628e1c1be0000b7@belajarmeteor-mufrizal.rhcloud.com/~/git/belajarmeteor.git/
   77dc3eb..ae4f2d6  master -> master

Berikut adalah output dari aplikasinya.

Aplikasi chat sederhana dapat anda akses di https://belajarmeteor-mufrizal.rhcloud.com/. Untuk source code nya silahkan lihat di belajar meteor. Sekian artikel mengenai belajar meteor dan terima kasih :)

Apa Itu Vue JS ?

Vue js adalah salah satu framework javascript. Vue Js merupakan framework untuk kebutuhan front end dari sebuah project.

Vue js merupakan salah satu framework yang banyak digunakan. Jika anda telah terbiasa dengan menggunakan angular js, maka untuk melakukan migrasi ke vue js tidak lah terlalu susah karena mereka mempunyai kemiripan di bagian sintak, hanya saja angular js memiliki development stack yang lebih rumit dibandingkan dengan vue js :). Bagi anda yang penasaran dengan angular js, silahkan lihat di artikel belajar angular js. Vue js juga menggunakan fitur data binding sama seperti angular js. Jika di angular js kita menggunakan fungsi controller, maka di vue js kita akan menggunakan pendekatan dom yaitu kita akan menggunakan id, name atau class dari suatu component html. Vue js juga memiliki component routing yaitu vue-router, akan tetapi bagian router akan dibahas pada artikel selanjutnya :). Pada artikel ini, penulis hanya akan memberikan contoh sederhana vue js dengan menggunakan ecmascript 5 (ES5).

Membuat Hello Word Dengan Vue JS

Seperti biasa, sebelum menggunakan sebuah framework, kita akan melakukan test hello word terlebih dahulu untuk mempermudah pemahaman tentang alur kerja dari sebuah framework yang akan kita gunakan :D. Untuk mendownload dependency, kita akan menggunakan bower. Bagi anda yang masing bingung dengan bower, silahkan baca di artikel Instalasi Perlengkapan Coding Node JS. Silahkan buat sebuah folder dengan nama Belajar-VueJS kemudian akses folder tersebut dengan menggunakan terminal lalu jalankan perintah berikut.

bower init

Kemudian silahkan isi konfigurasinya seperti berikut.

Lalu silahkan jalankan perintah berikut untuk mendownload dependency yang kita butuhkan seperti vue js dan bootstrap.

bower install bootstrap vue --save

Setelah selesai, silahkan buat sebuah file index.html di dalam folder Belajar-VueJS kemudian isikan codingan seperti berikut.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Belajar Vue JS</title>

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css" type="text/css">
    </head>
    <body>

        <div class="container" id="belajar">
            <div class="row">
                <div class="col-lg-3">
                    <div class="form-group">
                        <label>Nama</label>
                        <input type="text" class="form-control" placeholder="Masukkan Nama Anda" v-model="nama"/>
                    </div>

                    <h2>Hello {{ nama }}</h2>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./bower_components/vue/dist/vue.min.js"></script>
        <script type="text/javascript" src="./app.js"></script>
    </body>
</html>

Dari codingan diatas dapat kita lihat, kita melakukan inisialisasi project vue dengan menggunakan id pada html. Disini penulis menggunakan id belajar sebagai root dari project. Jika pada angular kita mengenal dengan ng-model maka pada vue js kita mengenal dengan yang namanya v-model, fungsinya sama yaitu sebagai model. Pada v-model, terdapat variabel nama, dimana variabel nama ini dapat kita tampilkan dengan menggunakan sintak double kurung kurawal {{ }} .

Setelah selesai, silahkan buat sebuah file app.js kemudian isikan codingan seperti berikut.

'use strict';

new Vue({
  el: '#belajar'
});

Nah cukup sederhana, kita bisa melihat bahwa codingan diatas melakukan inisialisasi element dengan menggunakan variabel id belajar, sehingga view yang tadi akan dikenali sebagai project vue js. Setelah selesai, seperti biasa kita akan menggunakan bantuan http-server untuk menjalankan file index.html. Bagi anda yang belum melakukan instalasi http-server, silahkan jalankan perintah berikut.

 npm install -g http-server

Setelah selesai, jalankan perintah berikut pada root project untuk menjalankan http-server.

http-server

Jika berhasil, maka di terminal akan muncul output seperti berikut.

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

Kemudian silahkan akses http://127.0.0.1:8080 pada browser anda.

Membuat CRUD Sederhana Dengan Vue JS

Untuk membuat crud, kita akan menggunakan data array pada javascript sehingga data ini hanya bersifat sementara. Untuk mempersingkat artikel, silahkan ubah codingan yang berada pada file index.html seperti berikut.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Belajar Vue JS</title>

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
        <link rel="stylesheet" href="./dist/css/bootstrap.min.css" type="text/css">
    </head>
    <body id="belajar">

        <div class="container">
            <div class="row">
                <div class="col-lg-2">
                    <div class="form-group">
                        <label>Nama</label>
                        <input type="text" class="form-control" placeholder="Masukkan Nama Anda" v-model="nama"/>
                    </div>

                    <h2>Hello {{ nama }}</h2>
                </div>
                <div class="col-lg-10">

                    <p></p>

                    <button @click="tambahBarang" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
                        Tambah Barang
                    </button>

                    <p></p>

                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th class="text-center">ID Barang</th>
                                <th class="text-center">Nama Barang</th>
                                <th class="text-center">Jenis Barang</th>
                                <th class="text-center">Tanggal Kadaluarsa</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="b in dataBarang">
                                <td>{{ b.idBarang }}</td>
                                <td>{{ b.namaBarang }}</td>
                                <td>{{ b.jenisBarang }}</td>
                                <td>{{ b.tanggalKadaluarsa }}</td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal" @click="editBarang(b)">
                                        <i class="glyphicon glyphicon-pencil"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger" @click="hapusBarang(b)">
                                        <i class="glyphicon glyphicon-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 v-if="enable" class="modal-title">Tambah Barang</h4>
                        <h4 v-else="enable" class="modal-title">Edit Barang</h4>
                    </div>
                    <div class="modal-body">
                        <form v-if="enable">
                            <div class="form-group">
                                <label>Nama Barang</label>
                                <input type="text" class="form-control" placeholder="Masukkan Nama Barang" v-model="inputDataBarang.namaBarang"/>
                            </div>
                            <div class="form-group">
                                <label>Jenis Barang</label>
                                <select class="form-control" v-model="inputDataBarang.jenisBarang">
                                    <option value="" disabled>Pilih Jenis Barang</option>
                                    <option value="gas">Gas</option>
                                    <option value="padat">Padat</option>
                                    <option value="cair">Cair</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Tanggal Kadaluarsa</label>
                                <input type="date" class="form-control" placeholder="Masukkan Tanggal Kadaluarsa" v-model="inputDataBarang.tanggalKadaluarsa"/>
                            </div>
                        </form>
                        <form v-else="enable">
                            <div class="form-group">
                                <label>ID Barang</label>
                                <input type="text" class="form-control" v-model="inputDataBarang.idBarang" disabled/>
                            </div>
                            <div class="form-group">
                                <label>Nama Barang</label>
                                <input type="text" class="form-control" placeholder="Masukkan Nama Barang" v-model="inputDataBarang.namaBarang"/>
                            </div>
                            <div class="form-group">
                                <label>Jenis Barang</label>
                                <select class="form-control" placeholder="Pilih Jenis Barang" v-model="inputDataBarang.jenisBarang">
                                    <option value="" disabled>Pilih Jenis Barang</option>
                                    <option value="gas">Gas</option>
                                    <option value="padat">Padat</option>
                                    <option value="cair">Cair</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Tanggal Kadaluarsa</label>
                                <input type="date" class="form-control" placeholder="Masukkan Tanggal Kadaluarsa" v-model="inputDataBarang.tanggalKadaluarsa"/>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-warning" data-dismiss="modal">Batal</button>
                        <button v-if="enable" type="button" class="btn btn-primary" data-dismiss="modal" @click="simpanBarang(inputDataBarang)">Simpan</button>
                        <button v-else="enable" type="button" class="btn btn-success" data-dismiss="modal" @click="updateBarang(inputDataBarang)">Update</button>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="./dist/js/jquery.min.js"></script>
        <script type="text/javascript" src="./dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./dist/js/vue.min.js"></script>
        <script type="text/javascript" src="./app.js"></script>
    </body>
</html>

Dari codingan diatas bisa kita lihat, terdapat sedikit perbedaan diantaranya adalah jika pada angular biasanya kita menggunakan perintah ng-click sedangkan pada vue js kita menggunakan perintah @click. Jika pada angular, untuk menampilkan data yang berbentuk array kita akan menggunakan perintah ng-repeat sedangkan jika pada vue js kita akan menggunakan perintah v-for. Sedangkan pada perintah - perintah yang lain adalah sama.

Selanjutnya silahkan buka file app.js kemudian ubah codingannya menjadi seperti berikut.

'use strict';

new Vue({
  el: '#belajar',
  data: function() {
    return {
      dataBarang: [],
      inputDataBarang: {},
      enable: false
    }
  },
  methods: {
    generateUUID: function() {
      var d = new Date().getTime();
      if (window.performance && typeof window.performance.now === "function") {
        d += performance.now();
      }
      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
      });
      return uuid;
    },
    tambahBarang: function() {
      this.enable = true;
      this.inputDataBarang = {};
    },
    simpanBarang: function(barang) {
      this.dataBarang.push({
        'idBarang': this.generateUUID(),
        'namaBarang': barang.namaBarang,
        'jenisBarang': barang.jenisBarang,
        'tanggalKadaluarsa': barang.tanggalKadaluarsa
      });
    },
    editBarang: function(barang) {
      this.enable = false;
      this.index = this.dataBarang.indexOf(barang);
      this.inputDataBarang.idBarang = barang.idBarang;
      this.inputDataBarang.namaBarang = barang.namaBarang;
      this.inputDataBarang.jenisBarang = barang.jenisBarang;
      this.inputDataBarang.tanggalKadaluarsa = barang.tanggalKadaluarsa;
    },
    updateBarang: function(barang) {
      this.dataBarang[this.index].idBarang = barang.idBarang;
      this.dataBarang[this.index].namaBarang = barang.namaBarang;
      this.dataBarang[this.index].jenisBarang = barang.jenisBarang;
      this.dataBarang[this.index].tanggalKadaluarsa = barang.tanggalKadaluarsa;
      this.inputDataBarang = {};
    },
    hapusBarang: function(barang) {
      var result = confirm('Anda ingin menghapus data barang ?');
      if (result) {
        this.index = this.dataBarang.indexOf(barang);
        this.dataBarang.splice(this.index, 1);
      }
    }
  }
});

Dari codingan diatas, terdapat perbedaan antara angular js dan vue js. Dimana pada vue js, antara data dan method akan dibagi berdasarkan section, sehingga kita akan melakukan deklarasi data dan method di section yang berbeda. Setiap variabel yang terdapat di dalam section data dapat kita panggil dengan menggunakan perintah this.nama variabel. Semua function yang terdapat di dalam section method juga dapat kita panggil melalui function lain yang berada di dalam section method tersebut, contohnya adalah function generateUUID.

Setelah selesai, silahkan akses kembali http://127.0.0.1:8080 berikut adalah output ketika anda melakukan insert.

berikut adalah output ketika anda melakukan select data.

berikut adalah output ketika anda melakukan update data.

berikut adalah output ketika anda melakukan delete data.

Sekian tutorial belajar vue js dan Terima kasih :)

Pada bulan april yang lalu, akhirnya ubuntu merilis sistem operasi baru dengan codename xenial xerus 16.04 LTS. Tidak hanya ubuntu, teryata ubuntu varian yang lain seperti kubuntu, xubuntu, lubuntu dan ubuntu mate juga release :D. Karena ubuntu telah release versi 16.04 LTS maka penulis juga ikut upgrade ke versi 16.04 LTS. Setelah dicoba - coba teryata ubuntu 16.04 LTS ini lumayan rakus sama RAM :(, berbeda jauh dengan saudaranya yang dulu yaitu ubuntu 14.04 trusty. Dikarenakan terlalu memakan resource, akhirnya penulis mulai migrasi, awalnya migrasi ke ubuntu mate, Eh teryata lumayan ringan akan tetapi setelah cari beberapa referensi teryata kubuntu melakukan upgrade kde 4 menjadi kde 5 plasma dan dikabarkan kubuntu lebih stabil dan ringan dari pada ubuntu. Akhirnya penulis migrasi ke kubuntu, jika dilihat dari segi tampilan, kubuntu merupakan salah satu distro yang cukup sempurna :D dibandingkan dengan ubuntu mate yang telah penulis coba. Hari berganti dengan hari, dan teryata penulis mendapat kendala lagi yaitu laptop lebih cepet panas dengan menggunakan kubuntu :(. Karena ubuntu dan kubuntu tidak sesuai dengan keinginan penulis, akhirnya penulis balik ke ubuntu mate. Dan apa yang terjadi ? teryata ubuntu mate lebih terasa dingin dan hemat memory RAM :D. Begitulah jika anda adalah seorang linux user, anda akan selalu penasaran dengan distro - distro yang belum anda coba, setiap distro memiliki keunggulan dan kekurangan masing - masing. Jika anda adalah seorang developer terlebih jika anda suka bermain - main dengan yang namanya netbeans, android studio dan keluarga jetbrains, penulis sarankan untuk menggunakan ubuntu mate :D.

Apa Itu Apt-Fast ?

Pada artikel sebelumnya penulis telah membahas mengenai package management pada ubuntu yaitu bisa menggunakan apt-get dan juga dpkg. Pada ubuntu 16.04 lebih disarankan untuk menggunakan perintah apt saja tanpa perlu menggunakan perintah apt-get. Terus apa hubungannya dengan apt-fast ?

apt-fast adalah shell script yang berfungsi sebagai pembungkus apt-get dan aptitude atau dapat dikatakan bahwa apt-fast merupakan perintah yang dikembangkan dari dasar apt-get yang dapat melakukan download package secara paralel dengan multiple koneksi per package.

Mungkin sedikit sulit untuk memahami pengertian diatas. Sebenarnya apt-fast dengan apt-get adalah sama, hanya saja apt-fast dikembangkan dengan cara mengabungkan apt-get dan aptitude. Perintah yang digunakan pada apt-fast sama seperti yang ada pada apt-get. Lalu apa yang membedakannya ? yang membedakannya adalah pada saat proses mendownload package. Jika anda menggunakan apt-get, kita melakukan download package secara sequential atau secara satu per satu. Jika kita menggunakan apt-fast, apt-fast akan melakukan download package secara paralel, dan setiap package yang kita download akan menggunakan multiple connection sehingga proses download package lebih cepat dibandingkan dengan apt-get :D.

Instalasi Apt-Fast

Untuk melakukan instalasi apt-fast, tambahkan PPA berikut.

sudo add-apt-repository ppa:saiarcot895/myppa

Kemudian lakukan update dengan perintah berikut.

sudo apt update

Lalu lanjutnya dengan instalasi apt-fast dengan perintah.

sudo apt install apt-fast

Apa Itu ZSH ?

ZSH (Z shell) adalah salah satu alternatif dari bash shell dan sangat banyak digunakan dikalangan developer.

Secara default, keluarga unix menggunakan bash shell di dalam terminal, contohnya sperti GNU/linux, mac os x dan keluarga unix yang lainnya. ZSH merupakan salah satu shell yang cukup populer dan salah satu fungsi utama dari ZSH adalah autocomplete yang diberikan lebih sempurna dibandingkan dengan bash shell. Pada artikel ini, kita akan mencoba melakukan instalasi zsh pada ubuntu mate dan mengganti bash shell menjadi ZSH.

Instalasi Dan Konfigurasi ZSH

Untuk melakukan instalasi ZSH silahkan jalankan perintah berikut.

sudo apt install zsh

Untuk konfigurasi ZSH, penulis menggunakan tool Oh My Zsh. Untuk melakukan instalasinya, silahkan jalankan perintah berikut.

sh -c "$(wget https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"

Setelah selesai, jalankan perintah berikut agar ZSH menjadi default shell yang akan anda gunakan

chsh -s $(which zsh)

Nah setelah selesai, silahkan tutup terminal anda lalu buka kembali, jika berhasil maka akan muncul output seperti berikut.

Langkah selanjutnya, penulis ingin mengganti thema zsh menjadi agnoster, akan tetapi untuk instalasi thema agnoster memerlukan sedikit konfigurasi untuk font. Silahkan jalankan perintah berikut untuk melakukan clone repository powerline/font

git clone https://github.com/powerline/fonts.git

Setelah selesai, silahkan akses folder fonts lalu jalankan perintah berikut untuk melakukan instalasi font.

./install.sh

Setelah selesai, kita akan lakukan konfigurasi font tersebut, silahkan jalankan perintah berikut untuk mendownload font yang dibutuhkan

wget https://github.com/powerline/powerline/raw/develop/font/PowerlineSymbols.otf
wget https://github.com/powerline/powerline/raw/develop/font/10-powerline-symbols.conf

Setelah selesai, jalankan perintah berikut untuk membuat folder untuk font tersebut.

mkdir ~/.fonts/
mkdir -p ~/.config/fontconfig/conf.d/

Langkah selanjutnya silahkan jalankan perintah berikut untuk konfigurasi font tersebut.

mv PowerlineSymbols.otf ~/.fonts/
fc-cache -vf ~/.fonts/
mv 10-powerline-symbols.conf ~/.config/fontconfig/conf.d

Nah setelah selesai, silahkan tutup terminal lalu buka lagi, silahkan jalankan perintah berikut.

echo "\ue0b0 \u00b1 \ue0a0 \u27a6 \u2718 \u26a1 \u2699"

Jika berhasil maka akan muncul output seperti berikut.

Jika output seperti diatas maka anda telah berhasil melakukan konfigurasi font nya :D. Langkah selanjutnya, silahkan buka file .zshrc dengan perintah berikut.

nano .zshrc

Kemudian cari kata ZSH_THEME kemudian ganti menjadi seperti berikut.

ZSH_THEME="agnoster"

Nah silahkan disimpan, lalu restart terminal anda, maka akan muncul output seperti berikut.

Pada artikel ini, penulis merubah konfigurasi thema tersebut agar sesuai dengan keinginan penulis, jika anda merasa sudah cukup puas dengan thema tersebut maka langkah selanjutnya tidak perlu anda ikuti :). Silahkan buka file agnoster.zsh-theme di dalam folder .oh-my-zsh/themes/ dengan perintah berikut.

nano ~/.oh-my-zsh/themes/agnoster.zsh-theme

Kemudian replace semua codingan tersebut dengan codingan berikut.

# Original theme https://github.com/agnoster zsh theme
# modified by lborg019

ZSH_THEME_GIT_PROMPT_DIRTY='±'

function _git_prompt_info() {
  ref=$(git symbolic-ref HEAD 2> /dev/null) || ref="➦ $(git show-ref --head -s --abbrev |head -n1 2> /dev/null)"
  echo "${ref/refs\/heads\// }$(parse_git_dirty)"
}

function _git_info() {
  if $(git rev-parse --is-inside-work-tree >/dev/null 2>&1); then
    local BG_COLOR=green
    if [[ -n $(parse_git_dirty) ]]; then
      BG_COLOR=yellow
      FG_COLOR=black
    fi

    if [[ ! -z $(git ls-files --other --exclude-standard 2> /dev/null) ]]; then
        BG_COLOR=red
        FG_COLOR=white
    fi
    echo "%{%K{$BG_COLOR}%}%{%F{$FG_COLOR}%} $(_git_prompt_info) %{%F{$BG_COLOR}%K{blue}%}"
  else
    echo "%{%K{blue}%}"
  fi
}

function virtualenv_info {
    [ $VIRTUAL_ENV ] && echo '('`basename $VIRTUAL_ENV`') '
}

PROMPT_HOST='%{%b%F{gray}%K{black}%} %(?.%{%F{green}%}✔.%{%F{red}%}✘)%{%F{yellow}%} %n %{%F{black}%}'
PROMPT_DIR='%{%F{white}%} %~%  '
PROMPT_SU='%(!.%{%k%F{blue}%K{black}%}%{%F{yellow}%} ⚡ %{%k%F{black}%}.%{%k%F{blue}%})%{%f%k%b%}'

PROMPT='%{%f%b%k%}$PROMPT_HOST$(_git_info)$PROMPT_DIR$PROMPT_SU
$(virtualenv_info)❯ '
RPROMPT='%{$fg[green]%}[%*]%{$reset_color%}'

Silahkan restart kembali terminal anda, dan berikut adalah hasilnya

Waw… hasilnya lebih bagus :D. Langkah terakhir, karena secara default thema agnoster menggunakan warna solarized, maka kita akan melakukan konfigurasi warna solarized pada terminal mate. Secara default, terminal mate tidak memiliki warna solarized meskipun sudah ubuntu mate versi 16.04 :(, untuk itu kita perlu sedikit melakukan konfigurasi. Silahkan jalankan perintah berikut untuk melakukan clone mate-terminal-colors-solarized.

git clone https://github.com/NeuralSandwich/mate-terminal-colors-solarized.git

Setelah selesai, silahkan akses folder solarized-mate-terminal, kemudian jalankan perintah berikut.

./install.sh

Kemudian silahkan jawab pertayaan yang diajukan, berikut adalah output untuk jawaban penulis.

This script will ask you if you want a light or dark color scheme, and
which Mate Terminal profile to overwrite.

Please note that there is no uninstall option yet. If you do not wish
to overwrite any of your profiles, you should create a new profile
before you run this script. However, you can reset your colors to the
Mate default, by running:

dconf reset -f /org/mate/terminal/profiles:/

By default, it runs in the interactive mode, but it also can be run
non-interactively, just feed it with the necessary options, see
'install.sh --help' for details.

Please select a color scheme:
1) dark
2) light
#? 1

Please select a Mate Terminal profile:
1) 'Rizki Mufrizal'
#? 1

You have selected:

  Scheme:  dark
  Profile: 'Rizki Mufrizal' (default)

Are you sure you want to overwrite the selected profile?
(YES to continue) YES
Confirmation received -- applying settings

Kemudian restart terminal anda kembali, kemudian silahkan pilih menu edit pada terminal, lalu pilih profile preferences, pilih tab color kemudian uncheck list pada use colors from system theme. Maka hasil terminalnya akan seperti berikut :D.

Konfigurasi Apt-Fast Pada ZSH

Agar fitur autocomplete apt-fast pada ZSH berjalan, kita harus melakukan beberapa konfigurasi. Silahkan jalankan perintah berikut untuk melakukan clone repository apt-fast.

git clone https://github.com/ilikenwf/apt-fast.git

Setelah selesai, jalankan perintah berikut untuk menjalankan konfigurasi apt-fast pada ZSH.

sudo cp completions/zsh/_apt-fast /usr/share/zsh/functions/Completion/Debian/
sudo chown root:root /usr/share/zsh/functions/Completion/Debian/_apt-fast
source /usr/share/zsh/functions/Completion/Debian/_apt-fast

Sekian tutorial instalasi apt-fast dan zsh pada ubuntu mate dan Terima kasih :).