KamusNgoding
Pemula Github-actions 5 menit baca

Tutorial GitHub Actions untuk Pemula: Menjalankan Workflow Pertama Anda

#github-actions #tutorial #workflow #pemula

Tutorial GitHub Actions untuk Pemula: Menjalankan Workflow Pertama Anda

Pendahuluan

Bayangkan kamu punya asisten yang selalu siap bekerja setiap kali kamu mengirim kode baru ke GitHub — tanpa harus diminta, tanpa kenal lelah, dan tidak pernah lupa. Itulah yang bisa dilakukan GitHub Actions untukmu.

Jika kamu pernah bermimpin punya tim seperti di perusahaan teknologi besar — di mana setiap perubahan kode langsung dicek, diuji, dan di-deploy secara otomatis — GitHub Actions adalah alat yang memungkinkan kamu merasakannya sendiri, bahkan sebagai developer solo.

Di artikel ini, kita akan langsung praktek: membuat workflow pertamamu dari nol, memahami strukturnya, dan melihat hasilnya berjalan di GitHub. Kita tidak akan membahas apa itu GitHub Actions secara mendalam (sudah ada di artikel terpisah), melainkan fokus pada cara melakukannya.

Prasyarat Sebelum Memulai

Sebelum mulai, pastikan kamu sudah punya:

  • Akun GitHub (gratis)
  • Repository di GitHub — bisa repository baru atau yang sudah ada
  • Pemahaman dasar tentang Git (commit, push)
  • Familiar dengan struktur file/folder

Tidak perlu install apa pun di komputermu. GitHub Actions berjalan sepenuhnya di server GitHub. Ini salah satu keunggulannya!

Memahami Konsep Dasar GitHub Actions

Sebelum nulis kode, kita perlu paham tiga istilah kunci:

1. Workflow File YAML yang mendefinisikan apa yang harus dilakukan dan kapan melakukannya. Satu repository bisa punya banyak workflow.

2. Job Kumpulan langkah-langkah (steps) yang berjalan di dalam satu “mesin virtual” (runner). Beberapa job bisa berjalan paralel.

3. Step Satu instruksi di dalam job. Bisa berupa perintah shell atau action yang sudah dibuat orang lain.

Analoginya begini: Workflow = resep masakan. Job = satu dapur. Step = setiap langkah di resep (cuci bahan, potong, goreng).

Workflow
└── Job: build
    ├── Step 1: Checkout kode
    ├── Step 2: Install dependencies
    └── Step 3: Jalankan test

Struktur Direktori dan File Workflow

GitHub Actions mencari file workflow di lokasi yang spesifik. Kamu wajib menyimpannya di sini:

repository-kamu/
└── .github/
    └── workflows/
        ├── ci.yml          ← workflow untuk CI
        ├── deploy.yml      ← workflow untuk deployment
        └── lint.yml        ← workflow untuk linting

Folder .github/workflows/ harus berada di root repositorymu. Nama file bebas, asal berekstensi .yml atau .yaml.

Panduan Langkah-demi-Langkah: Workflow Pertama Anda

Mari kita buat workflow paling sederhana: mencetak “Hello, World!” setiap kali ada push ke branch main.

Langkah 1: Buat Folder dan File Workflow

Di repository lokalmu, buat folder dan file berikut:

mkdir -p .github/workflows
touch .github/workflows/hello.yml

Langkah 2: Tulis Konfigurasi Workflow

Buka file hello.yml dan tulis konfigurasi berikut:

# .github/workflows/hello.yml

name: Hello World Workflow   # Nama workflow (tampil di tab Actions)

on:                          # Kapan workflow dijalankan
  push:
    branches:
      - main                 # Hanya ketika push ke branch main

jobs:
  say-hello:                 # Nama job (bebas, tanpa spasi)
    runs-on: ubuntu-latest   # Jenis runner (mesin virtual)

    steps:
      - name: Cetak pesan helloworld
        run: echo "Halo dunia! Workflow pertamaku berhasil!"

      - name: Tampilkan tanggal sekarang
        run: date

Langkah 3: Push ke GitHub

git add .github/workflows/hello.yml
git commit -m "chore: tambah workflow hello world"
git push origin main

Langkah 4: Lihat Hasilnya

  1. Buka repositorymu di GitHub
  2. Klik tab Actions
  3. Kamu akan melihat workflow Hello World Workflow sedang berjalan
  4. Klik untuk melihat log lengkapnya

Selamat! Workflow pertamamu sudah berjalan. Sekarang kita tingkatkan ke level berikutnya.

Contoh Kasus Nyata: Menjalankan Linter Kode Secara Otomatis

Linter adalah alat yang mengecek kode kamu apakah sudah mengikuti standar penulisan. Bayangkan kamu membangun aplikasi web — seperti sistem pemesanan yang mirip konsep Tokopedia — bersama tim. Setiap developer punya gaya nulis kode yang berbeda. Linter memastikan semua kode konsisten.

Kita akan membuat workflow yang menjalankan ESLint untuk proyek JavaScript/Node.js secara otomatis setiap ada push atau pull request.

Jika kamu belum familiar dengan JavaScript, artikel Belajar JavaScript dari Nol: Panduan Pemula untuk Web Developer bisa jadi referensi yang bagus sebelum melanjutkan.

Struktur Proyek

Pastikan proyekmu sudah punya file-file ini:

proyek-ku/
├── .github/
│   └── workflows/
│       └── lint.yml
├── src/
│   └── index.js
├── package.json
└── .eslintrc.json

File package.json (minimal)

{
  "name": "proyek-ku",
  "version": "1.0.0",
  "scripts": {
    "lint": "eslint src/"
  },
  "devDependencies": {
    "eslint": "^8.0.0"
  }
}

File .eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "off"
  }
}

Workflow Linter (.github/workflows/lint.yml)

name: Lint Kode JavaScript

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  eslint:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4    # Action resmi untuk download kode

      - name: Setup Node.js
        uses: actions/setup-node@v4  # Action untuk install Node.js
        with:
          node-version: '20'
          cache: 'npm'               # Cache dependencies supaya lebih cepat

      - name: Install dependencies
        run: npm ci                  # Lebih deterministik dari npm install

      - name: Jalankan ESLint
        run: npm run lint

Penjelasan Baris Penting

BarisPenjelasan
uses: actions/checkout@v4Download isi repositorymu ke runner
uses: actions/setup-node@v4Install Node.js di runner
cache: 'npm'Simpan node_modules agar tidak didownload ulang
npm ciInstall dependencies persis sesuai package-lock.json

Setelah di-push, setiap kali ada kode baru yang masuk, GitHub Actions akan otomatis mengecek apakah kode sesuai standar ESLint. Jika ada pelanggaran, workflow akan gagal dan kamu mendapat notifikasi email.

Konsep otomasi seperti ini juga sangat berguna saat kamu sudah mulai mengelola proyek Python yang lebih kompleks — misalnya seperti yang dibahas di Menguasai Logika Python untuk Aplikasi CLI Expense Tracker, di mana konsistensi kode menjadi sangat penting.

Troubleshooting: Error yang Sering Muncul

Workflow Tidak Muncul di Tab Actions

Penyebab: File workflow tidak berada di path yang tepat, atau ada kesalahan indentasi di file YAML.

Solusi:

# Pastikan path sudah benar
ls .github/workflows/

# Validasi YAML secara lokal menggunakan tool online atau:
# Pergi ke: https://www.yamllint.com/ dan paste isi file YAML kamu

# Pastikan indentasi menggunakan SPASI, bukan TAB
cat -A .github/workflows/hello.yml | head -20
# Jika ada ^I itu artinya TAB — harus diganti spasi

Error: npm ci Gagal — package-lock.json Tidak Ditemukan

Penyebab: File package-lock.json tidak ikut di-commit ke repository, padahal npm ci memerlukannya.

Solusi:

# Jalankan di lokal untuk generate package-lock.json
npm install

# Tambahkan ke git dan push
git add package-lock.json
git commit -m "chore: tambah package-lock.json"
git push origin main

# Atau ganti npm ci dengan npm install di workflow (tidak direkomendasikan untuk CI)
# run: npm install

Permission Denied: Workflow Tidak Bisa Menulis ke Repository

Penyebab: Secara default, token GitHub Actions punya permission terbatas. Operasi seperti push atau create release perlu permission tambahan.

Solusi:

jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: write      # Izin menulis ke repository
      pull-requests: write # Izin membuat/mengubah PR

    steps:
      - name: Checkout
        uses: actions/checkout@v4
      # ... langkah selanjutnya

Pertanyaan yang Sering Diajukan

Apakah GitHub Actions gratis?

GitHub Actions gratis untuk repository publik tanpa batas. Untuk repository privat, gratis hingga 2.000 menit per bulan (paket Free). Setelah itu dikenakan biaya. Untuk project personal atau open source, kamu hampir tidak akan kehabisan kuota gratis.

Apa perbedaan run dan uses dalam sebuah step?

run digunakan untuk menjalankan perintah shell langsung, misalnya run: npm test. Sementara uses digunakan untuk memanggil action yang sudah dibuat (baik oleh GitHub maupun komunitas), misalnya uses: actions/checkout@v4. Action adalah seperti “fungsi siap pakai” yang bisa kamu reuse.

Bagaimana cara menyimpan API key atau password dengan aman di workflow?

Jangan pernah hardcode credential di file YAML! Gunakan GitHub Secrets:

  1. Pergi ke Settings → Secrets and variables → Actions
  2. Klik “New repository secret”
  3. Di workflow, akses dengan ${{ secrets.NAMA_SECRET_KAMU }}

Apakah workflow bisa dijalankan secara manual?

Ya! Tambahkan trigger workflow_dispatch di bagian on::

on:
  workflow_dispatch:   # Tambahkan ini
  push:
    branches: [main]

Setelah itu, kamu bisa klik tombol “Run workflow” di tab Actions kapan saja.

Berapa lama satu workflow bisa berjalan?

Satu job maksimal berjalan selama 6 jam. Jika melebihi itu, akan otomatis dihentikan. Untuk kebanyakan tugas CI/CD, ini lebih dari cukup.

Kesimpulan

Kamu sudah berhasil membuat dan memahami workflow GitHub Actions pertamamu! Kita sudah belajar cara mendefinisikan workflow dengan YAML, memahami perbedaan job dan step, menggunakan action dari marketplace, serta menerapkan linting otomatis sebagai contoh nyata.

Otomasi CI/CD memang terlihat rumit di awal, tapi begitu kamu terbiasa dengan strukturnya, kamu akan menyadari betapa banyak waktu yang bisa dihemat. Mulai dari yang sederhana, lalu tambah fitur satu per satu — itulah cara terbaik belajar GitHub Actions.

Selamat belajar dan terus bereksperimen! Jika ada pertanyaan atau kamu ingin eksplorasi topik DevOps lebih lanjut, jangan ragu untuk menjelajahi artikel-artikel lainnya di KamusNgoding.

Artikel Terkait

go Tutorial Go (Golang) untuk Pemula: Dari Instalasi hingga 'Hello, World!' react Mulai Cepat dengan React: Panduan Lengkap Membuat Aplikasi Pertamamu github-actions Apa itu GitHub Actions? Penjelasan Lengkap untuk Pemula