Continous Integration Using Gitlab with Phaser Framework

Overview

Pada artikel ini akan dijelaskan secara detail tentang bagaimana cara melakukan CI dan apa pengertian dari hal hal yang akan dijelaskan. Bagi yang ingin langsung ke kesimpulan, dapat langsung scroll down ke bagian TL;DR :)

Baca Juga : Animasi Sederhana Pada Phaser

Docker

Docker adalah platform perangkat lunak yang memungkinkan untuk membuat, menguji, dan menerapkan aplikasi dengan cepat. Docker mengemas perangkat lunak ke dalam unit standar yang disebut kontainer yang memiliki semua yang diperlukan perangkat lunak agar dapat berfungsi termasuk library, alat sistem, code, dan waktu proses. Secara singkat docker image adalah Virtual Machine yang dapat didownload secara online.

Pada tahap ini kita memerlukan docker image yang memiliki Butler.exe di dalamnya, berikut docker file yang digunakan dalam membuat docker image.

• Docker File untuk membuat docker image

Eitss, tapi sebenarnya sudah adaloh yang membuat docker image yang kita butuhkan, jadi docker file di atas hanya untuk jaga-jaga saja jika kalian mau membuat sebuat docker image sendiri hehe.

Docker image sudah tersedia di : https://hub.docker.com/r/shru/arch-love-release/
dan siap digunakan (yeay)

Okaay, tahap pertama selesai sampai disini saja, kita next ke tahap selanjutnya yaa....

Itch.io

Itch.io secara singkat adalah sebuah platform yang memudahkan kita untuk mencari dan mendownload game yang di share oleh indie game developer, kita juga tentu dapat berkontribusi sebagai indie game developer itu sendiri.

Okay kembali ke topik kita ya, pertama tama kita harus membuat project baru dengan cara klik menu "Upload new project". kemudian akan muncul form untuk data game yang akan diupload, kamu bisa mengisi semuanya sesukamu, kecuali upload game pada bagian Uploads, tidak perlu karena nanti kita akan upload otomatis hehe

Pada project ini saya me set "Kind of project" berupa game Html karena saya menggunakan phaser 3 sebagai framework gamenya. 

Jika sudah selesai melakukan persiapan pada tab upload new project maka klik "Save"

Kemudian tugas kita selanjutnya adalah mendapatkan API Key dari web ini agar kita memiliki authority untuk mengupload game kita lewat console.

Cara mendapatkan API Key di Itch.io cukup mudah, kalian hanya perlu pergi ke menu Settings > API Keys > Generate new API Key.

Setelah API Key terbuat, kemudian copy. Kita akan membutuhkan ini pada pengaturan gitlab setelah ini :)

Bagian itch.io selesai sampai disini, kita akan lanjut ke tahap selanjutnya yeay!

Gitlab

GitLab adalah sebuah manajer repositori Git berbasis web dengan fitur wiki dan pelacakan masalah, menggunakan lisensi sumber terbuka, dikembangkan oleh GitLab Inc. Kita akan menggunakan gitlab sebagai repository karena gitlab menyediakan berbagaimacam fitur yang menarik ditambahlagi kebanyakan dari semua itu adalah gratis! Khususnya fitur yang akan kita butuhkan saat ini yaitu fitur remote komputer atau kalo di gitlabnya disebut runner.

runner ini akan berjalan ketika memasukan script bernama ".gitlab-ci.yml" kedalam root project kita. Runner akan mendeteksi script tersebut kemudian menjalankannya. ini adalah contoh repository gitlab milik saya

Jika kamu perhatikan pada repository saya telah terdapat file yml sehingga runner akan mengeksekusinya setiap kali saya melakukan push kedalam branch ini. Adapun isi file yml milik saya adalah sebagi berikut:

Isi file .yml yang dibutuhkan adalah sebagai berikut:

# .gitlab-ci.yml

image: shru/arch-love-release:latest

variables:
  ITCH_USER: <isi username itc.io>
  ITCH_GAME: <isi dengan project url tanpa "https://username.itch.io/" , cth: "https://username.itch.io/test-game" maka yang dimasukan "test-game">


upload-job:
  script:

    # Create releases
    - zip -r <Nama Zip Bebas>.zip *
    # Push to url
    - butler push <Nama Zip Bebas sama dengan yg atas>.zip $ITCH_USER/$ITCH_GAME:HTML5
?

ITCH_USER : adalah nama username pada akun itch.io kalian!

ITCH_GAME : adalah link url yang kalian masukan pada setting tanpa "https://username.itch.io/ " , jadi hanya bagian belakannya saja seperti "multi-train" , "life-capcy" ,  dsb. 

Okay sepertinya sudah jelas tentang file .yml nya, karena yang dilakukan hanya copas dari script saya diatas saja yaa.

Selanjutnya pada gitlab perlu diatur Environtment Variable yang berisi API Key dari Itch.Io yang telah kamu simpan sebelumnya. Cara menambahkan variable cukup mudah, tinggal masuk kedalam projectmu > settings > CI / CI > Variable > add new variable.

Kemudian tambahkan variable baru dengan nama "BUTLER_API_KEY" dan value berisikan API Key dari itch.IO.

Okay segitu aja, kemudian centang bagian protect agar API key tidak terekspose kecuali pada owner project.

Tahap selanjutnya tinggal push project kamu yang baru di update, kemudian tunggu runner gitlab akan berjalan.

Cara mengecek apakah runner gitlab berjalan atau tidak adalah dengan pergi ke menu CI/CD >  Pipelines. Pada menu berikut kamu akan menemukan bahwa runner sedang berjalan , gagal, atau sukses.

Kamu juga bisa melihat detailnya jika klik pada progressnya, kemudian akan tampil console seperti dibawah ini!

Okaay, kalau sudah seperti ini artinya game kamu telah terupload ke itch.IO selamaattt!!!

Silahkan buka itch.io kamu untuk memastikan yaa!

TL;DR

Setelah membaca semua tulisan diatas mari kita ringkas semua caranya disini:

1. Buat akun gitlab.com
2. Buat akun itch.io
3. Buat masukan game baru ke itch.io ,Pilih game HTML5 dan isi seadanya
4. Dapatkan API Key dari itch.io
   Caranya adalah dengan masuk ke akun kemudian pilih Settings > API Keys > Generate new API Key , lalu copy
5. Simpan API Key kedalam variable gitlab (disarankan di protect)
   Masuk ke gitlab project > settings > CI / CI > Variable > add new variable (beri nama "BUTLER_API_KEY" dengan value "API Key" yang telah di copy)
6. Tambahkan script berikut kedalam project kamu!
   

   # .gitlab-ci.yml
   
   image: shru/arch-love-release:latest
   
   variables:
     ITCH_USER: <isi username itc.io>
     ITCH_GAME: <isi dengan project url tanpa "https://username.itch.io/" , cth: "https://username.itch.io/test-game" maka yang dimasukan "test-game">
   
   
   upload-job:
     script:
   
       # Create releases
       - zip -r <Nama Zip Bebas>.zip *
       # Push to url
       - butler push <Nama Zip Bebas sama dengan yg atas>.zip $ITCH_USER/$ITCH_GAME:HTML5
   ?

7. Pastikan index.html ada di dalam root project ya :)
8. Kemudian push project kamu kedalam repository gitlab, kemudian cek menu CI/CD > Pipeline
9. Selamat game kamu telah terupdate secara automatis di itch.io :))

Semoga dapat membantu kalian semua, cara ini bukan cuma untuk itch.io saja tapi dapat juga untuk berbagai hal seperti Build Automation Android Studio, Build Automation Unity, auto update web host, dan sebagainya.

Oh ia sebagai tambahan jika kalian penasaran dengan Build Automation kalian bisa cek project saya dibawah ini yaa!

Link untuk membuat image docker untuk build automation
https://gitlab.com/impal-group-1/projectdockerbuildautomation

Link implementasi build automation
https://gitlab.com/impal-group-1/android-studio-project

Jadi di atas saya membuat docker image tanpa menginstall docker ke komputer saya, mungkin ini cara yang dapat ditiru agar tidak membebani komputer kalian. hehe.. :))