Pertemuan 19

Pull Request Lanjutan & Code Review

Tujuan Pembelajaran

Mampu membuat Pull Request berkualitas dengan template yang baik
Memahami etika dan teknik code review
Mengenal konsep Draft PR dan CODEOWNERS

Materi Inti

A. Membuat Pull Request Berkualitas

Pull Request (PR) yang baik bukan hanya tentang kode yang benar, tapi juga tentang komunikasi yang jelas kepada reviewer. PR yang baik memudahkan proses review dan mempercepat merge.

Template PR yang Baik:

## Ringkasan
Menambahkan fitur keranjang belanja yang memungkinkan pengguna
menambah dan menghapus produk.

## Perubahan
- Tambah komponen CartItem
- Tambah halaman /cart
- Integrasi dengan API produk

## Screenshot
[gambar UI sebelum dan sesudah]

## Checklist
- [x] Kode sudah di-test
- [x] Tidak ada console.log yang tertinggal
- [x] README sudah diupdate
- [ ] Review dari minimal 1 orang

Closes #42

Elemen penting PR:

Elemen	Fungsi
Judul deskriptif	Menjelaskan APA yang berubah dalam 1 kalimat
Ringkasan	Menjelaskan MENGAPA perubahan ini dibuat
Daftar perubahan	Detail teknis perubahan
Screenshot	Bukti visual untuk perubahan UI
Checklist	Memastikan semua standar terpenuhi
`Closes #42`	Otomatis menutup issue terkait saat PR di-merge

B. Draft Pull Request

Draft PR digunakan saat pekerjaan belum selesai tapi kamu ingin mendapatkan feedback awal atau menunjukkan progress.

Karakteristik Draft PR:

Ditandai dengan label “Draft” di GitHub
Tidak bisa di-merge sampai diubah ke “Ready for review”
Cocok untuk work in progress (WIP)
Reviewer bisa melihat arah pengembangan tanpa harus review detail

C. Etika Code Review

Code review adalah proses penting dalam kolaborasi tim. Cara kita memberikan feedback sangat mempengaruhi kualitas kerja sama.

Lakukan:

Lakukan	Contoh
Berikan saran konstruktif	”Bagaimana jika kita gunakan `map()` di sini?”
Tunjukkan masalah spesifik	”Ada potensi bug di baris 45 karena…”
Berikan contoh kode alternatif	”Kita bisa simplifikasi dengan: `const x = ...`”
Apresiasi hal yang baik	”Struktur kodenya rapi, mudah dibaca!”

Hindari:

Hindari	Mengapa
”Kode ini jelek”	Tidak konstruktif, menyerang personal
”Kamu tidak mengerti JavaScript”	Merendahkan, bukan tentang kode
Hanya bilang “salah” tanpa solusi	Tidak membantu author memperbaiki
Hanya fokus pada kekurangan	Mengabaikan usaha dan hal baik

Tips: Gunakan pertanyaan daripada pernyataan. “Apakah ada alasan menggunakan for loop di sini?” lebih baik daripada “Jangan pakai for loop.”

D. CODEOWNERS

File CODEOWNERS mengatur siapa yang otomatis diminta review untuk file atau folder tertentu.

# File: .github/CODEOWNERS

# Semua file - default reviewer
* @team-lead

# Folder tertentu
/frontend/ @frontend-team
/backend/  @backend-team
/docs/     @docs-team

# File tertentu
*.css @designer
*.sql @dba-team

Demonstrasi Live

Membuat PR Berkualitas

# Buat branch fitur
git switch -c feature/search-bar

# Buat perubahan
echo "<input type='search' placeholder='Cari produk...'>" > search.html
echo ".search-input { padding: 8px; border-radius: 4px; }" > search.css
echo "function search(query) { return results.filter(r => r.includes(query)); }" > search.js

git add .
git commit -m "feat(search): tambah komponen search bar"

# Tambah test
echo "test('search returns results', () => { expect(search('a')).toBeTruthy(); });" > search.test.js
git add . && git commit -m "test(search): tambah unit test untuk search"

# Push ke remote
git push origin feature/search-bar

Setelah push, buka GitHub dan buat PR dengan template lengkap:

Klik “Compare & pull request”
Isi judul: “feat: Tambah search bar untuk pencarian produk”
Isi deskripsi menggunakan template di atas
Tambahkan reviewer
Tambahkan label (feature, enhancement)
Link ke issue jika ada

Setup CODEOWNERS

# Buat file CODEOWNERS
mkdir -p .github
cat > .github/CODEOWNERS << 'EOF'
# Default reviewer
* @team-lead

# Frontend files
*.html @frontend-dev
*.css  @frontend-dev
*.js   @frontend-dev
EOF

git add .github/CODEOWNERS
git commit -m "chore: tambah file CODEOWNERS"
git push origin main

Latihan Interaktif

Latihan: Buat PR & Review

Langkah 1: Buat branch dan perubahan

# Buat fitur baru
git switch -c feature/contact-page

# Buat file
echo "<!DOCTYPE html>
<html>
<head><title>Kontak</title></head>
<body>
  <h1>Hubungi Kami</h1>
  <form>
    <label>Nama:</label>
    <input type='text' name='nama'>
    <label>Email:</label>
    <input type='email' name='email'>
    <label>Pesan:</label>
    <textarea name='pesan'></textarea>
    <button type='submit'>Kirim</button>
  </form>
</body>
</html>" > contact.html

git add . && git commit -m "feat(contact): tambah halaman kontak dengan form"
git push origin feature/contact-page

Langkah 2: Buat PR di GitHub dengan template berikut:

## Ringkasan
Menambahkan halaman kontak dengan form untuk menghubungi tim support.

## Perubahan
- Tambah file contact.html dengan form kontak
- Form memiliki field: nama, email, pesan

## Checklist
- [x] HTML valid
- [x] Form memiliki label yang tepat
- [ ] Review dari minimal 1 orang

Langkah 3: Jika tersedia, review PR peserta lain dan berikan feedback konstruktif

Tugas Mandiri

Buat 2 PR di repository kamu menggunakan template yang lengkap (ringkasan, perubahan, checklist)
Buat file .github/CODEOWNERS yang mengatur reviewer berdasarkan tipe file
Praktikkan membuat Draft PR, lalu ubah ke “Ready for review”
Jika ada teman yang juga belajar, saling review PR dan berikan feedback konstruktif