Materi Inti

A. Apa itu CI/CD?

CI (Continuous Integration) adalah praktik menggabungkan kode dari banyak developer ke repository utama secara rutin dan otomatis menjalankan test setiap kali ada perubahan.

CD (Continuous Deployment/Delivery) adalah praktik otomatis men-deploy aplikasi ke server setelah kode lolos semua test.

Manfaat CI/CD:

• Menemukan bug lebih awal (setiap push langsung di-test)
• Mengurangi risiko deploy yang gagal
• Mempercepat proses development
• Memberikan kepercayaan diri saat merge kode

B. GitHub Actions

GitHub Actions adalah layanan CI/CD bawaan GitHub. Kamu bisa membuat workflow otomatis yang berjalan saat event tertentu terjadi (push, pull request, jadwal, dll).

Konsep dasar:

C. File Workflow GitHub Actions

Semua file workflow disimpan di folder .github/workflows/ dengan format YAML.

Contoh workflow CI sederhana:

name: CI Pipeline

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

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm install
      - name: Run tests
        run: npm test

Penjelasan bagian-bagian:

• name: Nama workflow yang muncul di GitHub
• on: Event yang memicu workflow
• jobs: Kumpulan job yang dijalankan
• runs-on: Sistem operasi runner
• steps: Langkah-langkah dalam job
• uses: Menggunakan action yang sudah ada
• run: Menjalankan perintah shell

D. Trigger yang Umum Digunakan

on:
  # Saat push ke branch tertentu
  push:
    branches: [main, develop]

  # Saat PR dibuat atau diupdate
  pull_request:
    branches: [main]

  # Jadwal (cron)
  schedule:
    - cron: '0 9 * * 1'  # Setiap Senin jam 9 pagi UTC

  # Manual trigger
  workflow_dispatch:

Demonstrasi Live

Membuat Workflow CI Pertama

# Buat struktur folder
mkdir -p .github/workflows

# Buat file workflow
cat > .github/workflows/ci.yml << 'EOF'
name: CI Pipeline

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

jobs:
  lint-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm install

      - name: Run linter
        run: npm run lint

      - name: Run tests
        run: npm test
EOF

# Commit dan push
git add .github/workflows/ci.yml
git commit -m "ci: tambah workflow CI pipeline"
git push origin main

Setelah push, buka tab Actions di repository GitHub untuk melihat workflow berjalan.

Workflow untuk Static Site

name: Deploy Static Site

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Validate HTML
        run: |
          echo "Checking HTML files..."
          find . -name "*.html" -exec echo "Found: {}" \;

      - name: Check file sizes
        run: |
          echo "Checking file sizes..."
          du -sh *.html 2>/dev/null || echo "No HTML files in root"

Latihan Interaktif

Latihan: Buat Workflow Pertama

# Buat project baru atau gunakan yang ada
mkdir proyek-ci && cd proyek-ci && git init

# Buat file project
echo '{ "name": "proyek-ci", "scripts": { "test": "echo test passed" } }' > package.json
echo "<h1>Hello CI</h1>" > index.html
echo "# Proyek CI" > README.md

git add . && git commit -m "init: setup project dengan CI"

# Buat workflow
mkdir -p .github/workflows
cat > .github/workflows/ci.yml << 'EOF'
name: Basic CI

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

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: List files
        run: ls -la
      - name: Check README exists
        run: test -f README.md && echo "README exists!"
      - name: Run test script
        run: npm test
EOF

git add . && git commit -m "ci: tambah basic CI workflow"

# Push ke GitHub
# git remote add origin <url>
# git push -u origin main

Setelah push, cek tab Actions di GitHub dan perhatikan:

1. Workflow berjalan otomatis
2. Setiap step ditampilkan dengan status hijau (berhasil) atau merah (gagal)
3. Kamu bisa klik setiap step untuk melihat output detail

Quiz Modul 2.4

Quiz ini menguji pemahaman tentang Pull Request, code review, dan GitHub Actions.

Passing grade: 70% (minimal 6 dari 8 benar)

Topik yang Diuji

Materi yang Perlu Dikuasai

Pull Request:

• PR yang baik memiliki judul deskriptif, ringkasan, dan checklist
• Closes #42 otomatis menutup issue saat PR di-merge
• Draft PR untuk work in progress yang belum siap di-review

Code Review:

• Berikan saran spesifik dengan contoh kode alternatif
• Hindari komentar yang menyerang personal
• Apresiasi hal yang baik, bukan hanya fokus kekurangan

GitHub Actions:

• File workflow disimpan di .github/workflows/
• CI/CD = Continuous Integration / Continuous Deployment
• Trigger pull_request berjalan saat PR dibuat atau diupdate
• Trigger push berjalan saat ada push ke branch yang ditentukan

CODEOWNERS:

• Mengatur siapa yang otomatis diminta review untuk file atau folder tertentu
• Disimpan di .github/CODEOWNERS

Tugas Mandiri

1. Buat workflow GitHub Actions sederhana di salah satu repository kamu
2. Push perubahan dan verifikasi workflow berjalan di tab Actions
3. Buat PR dan perhatikan apakah workflow juga berjalan untuk PR
4. Eksplorasi GitHub Marketplace untuk menemukan Actions yang menarik