Pertemuan Pertemuan 31

Proyek Akhir Bagian 1: Setup, Development, PR

Pertemuan 31 / 32
Capstone Modul capstone 60 menit
Pertemuan 31

Proyek Akhir Bagian 1: Setup, Development, PR

Tujuan Pembelajaran

  • Mampu setup repository dengan best practices
  • Mengimplementasikan GitHub Flow untuk feature development
  • Mampu setup Git hooks untuk code quality
  • Mampu membuat CI/CD pipeline dengan GitHub Actions
  • Mampu membuat Pull Request yang profesional

Deskripsi Proyek

Proyek akhir ini adalah simulasi workflow open source contribution secara end-to-end. Kamu akan membuat project website portfolio dari awal, menerapkan semua teknik Git dan GitHub yang sudah dipelajari dari pertemuan 1 hingga 30.

Yang akan dikerjakan di Pertemuan 31:

  1. Setup repository dengan struktur profesional
  2. Feature development menggunakan GitHub Flow
  3. Code quality hooks (pre-commit)
  4. CI/CD pipeline
  5. Push ke GitHub dan buat Pull Request

Yang akan dikerjakan di Pertemuan 32: 6. Simulasi hotfix 7. Release dan tagging 8. Ujian Akhir

Tahap 1: Setup Repository (10 menit)

Buat project portfolio website dengan struktur yang rapi dan profesional.

# Buat folder project
mkdir proyek-akhir-git && cd proyek-akhir-git && git init

# Buat README.md yang lengkap
cat > README.md << 'EOF'
# Proyek Akhir: [Nama Kamu]

## Deskripsi
Website portfolio sederhana sebagai proyek akhir course Git & GitHub.

## Teknologi
- HTML, CSS, JavaScript

## Cara Menjalankan
1. Clone repository ini
2. Buka `index.html` di browser

## Struktur Project

proyek-akhir-git/ ├── index.html # Halaman utama ├── about.html # Halaman about ├── projects.html # Halaman projects ├── style.css # Stylesheet ├── .gitignore # File yang diabaikan Git ├── .github/ │ └── workflows/ │ └── ci.yml # CI/CD pipeline └── README.md # Dokumentasi


## Lisensi
MIT
EOF

# Buat halaman utama
cat > index.html << 'EOF'
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Portfolio Saya</h1>
        <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="projects.html">Projects</a>
        </nav>
    </header>
    <main>
        <p>Selamat datang di portfolio saya.</p>
    </main>
</body>
</html>
EOF

# Buat stylesheet
cat > style.css << 'EOF'
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}
header { margin-bottom: 20px; }
nav a {
    margin-right: 15px;
    color: #0066cc;
    text-decoration: none;
}
nav a:hover { text-decoration: underline; }
main { max-width: 800px; }
EOF

# Buat .gitignore
cat > .gitignore << 'EOF'
.env
.env.local
node_modules/
.DS_Store
Thumbs.db
*.log
EOF

# Initial commit
git add .
git commit -m "feat: inisialisasi project portfolio"

Tahap 2: Feature Development (15 menit)

Gunakan GitHub Flow: buat feature branch, kerjakan, merge ke main.

Fitur 1: Halaman About

git switch -c feature/about-page

cat > about.html << 'EOF'
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About - Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Tentang Saya</h1>
        <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="projects.html">Projects</a>
        </nav>
    </header>
    <main>
        <h2>Profil</h2>
        <p>Saya sedang belajar Git & GitHub secara mendalam.</p>
        <h2>Skills</h2>
        <ul>
            <li>Git & GitHub</li>
            <li>HTML & CSS</li>
            <li>JavaScript</li>
        </ul>
    </main>
</body>
</html>
EOF

git add . && git commit -m "feat: tambah halaman about"

# Tambah styling untuk list
echo "ul { list-style-type: square; }" >> style.css
git add . && git commit -m "style: tambah styling untuk list"

# Merge ke main
git switch main
git merge feature/about-page
git branch -d feature/about-page

Fitur 2: Halaman Projects

git switch -c feature/projects-page

cat > projects.html << 'EOF'
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projects - Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Project Saya</h1>
        <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="projects.html">Projects</a>
        </nav>
    </header>
    <main>
        <h2>Daftar Project</h2>
        <ul>
            <li>
                <strong>Website Portfolio</strong>
                <p>Website ini! Dibuat dengan HTML, CSS, dan Git.</p>
            </li>
            <li>
                <strong>Aplikasi Todo</strong>
                <p>Aplikasi manajemen tugas sederhana.</p>
            </li>
        </ul>
    </main>
</body>
</html>
EOF

git add . && git commit -m "feat: tambah halaman projects"

git switch main
git merge feature/projects-page
git branch -d feature/projects-page

# Tag release pertama
git tag -a v1.0.0 -m "Release v1.0.0: Portfolio dengan about dan projects"

Tahap 3: Code Quality Hooks (10 menit)

Setup pre-commit hook untuk menjaga kualitas kode.

# Buat pre-commit hook
mkdir -p .git/hooks
cat > .git/hooks/pre-commit << 'HOOK'
#!/bin/sh
echo "=== Pre-commit Check ==="
PASS=true

# Cek 1: File .env tidak boleh di-commit
if git diff --cached --name-only | grep -q ".env"; then
    echo "GAGAL: File .env tidak boleh di-commit!"
    PASS=false
fi

# Cek 2: Cek console.log di file JS
JS_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep '\.js$')
if [ -n "$JS_FILES" ]; then
    for f in $JS_FILES; do
        if grep -q "console.log" "$f"; then
            echo "GAGAL: console.log ditemukan di $f"
            PASS=false
        fi
    done
fi

# Cek 3: Semua file HTML harus punya DOCTYPE
HTML_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep '\.html$')
if [ -n "$HTML_FILES" ]; then
    for f in $HTML_FILES; do
        if ! grep -q "<!DOCTYPE html>" "$f"; then
            echo "WARNING: $f tidak memiliki DOCTYPE"
        fi
    done
fi

if [ "$PASS" = true ]; then
    echo "LULUS: Semua pengecekan OK!"
    exit 0
else
    echo "Commit dibatalkan. Perbaiki error di atas."
    exit 1
fi
HOOK
chmod +x .git/hooks/pre-commit

# Test hook: coba commit file .env (harus gagal)
echo "SECRET=test123" > .env
git add .env
git commit -m "test: ini harus gagal"
# Output: GAGAL: File .env tidak boleh di-commit!

# Bersihkan
git reset HEAD .env
rm .env

Tahap 4: CI/CD Pipeline (10 menit)

Buat GitHub Actions workflow untuk validasi otomatis.

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

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

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

      - name: Validasi HTML
        run: |
          echo "=== Validasi HTML ==="
          for f in *.html; do
            if [ -f "$f" ]; then
              if grep -q "<html" "$f"; then
                echo "OK: $f valid"
              else
                echo "GAGAL: $f tidak valid"
                exit 1
              fi
            fi
          done

      - name: Cek tidak ada secrets
        run: |
          echo "=== Cek Secrets ==="
          if find . -name ".env" -not -path "./.git/*" | grep -q .; then
            echo "GAGAL: File .env ditemukan!"
            exit 1
          fi
          echo "OK: Tidak ada file sensitif"

      - name: Cek struktur project
        run: |
          echo "=== Cek Struktur ==="
          [ -f "index.html" ] && echo "OK: index.html ada" || echo "GAGAL: index.html tidak ada"
          [ -f "README.md" ] && echo "OK: README.md ada" || echo "GAGAL: README.md tidak ada"
          [ -f ".gitignore" ] && echo "OK: .gitignore ada" || echo "GAGAL: .gitignore tidak ada"
EOF

git add .
git commit -m "ci: tambah CI pipeline dan pre-commit hook"

Tahap 5: Push ke GitHub dan Buat PR (10 menit)

# 1. Buat repository baru di GitHub (via browser atau gh CLI)
# gh repo create proyek-akhir-git --public

# 2. Hubungkan dan push
git remote add origin git@github.com:USERNAME/proyek-akhir-git.git
git push -u origin main
git push origin --tags

# 3. Verifikasi di GitHub:
#    - Cek semua file terupload
#    - Cek tab Actions: CI pipeline berjalan
#    - Cek tab Releases: tag v1.0.0 muncul

# 4. Buat feature branch baru untuk latihan PR
git switch -c feature/footer
cat >> style.css << 'EOF'

footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
    color: #666;
    font-size: 0.9em;
}
EOF

# Tambah footer ke index.html (sebelum </body>)
# Edit index.html: tambahkan <footer>Copyright 2024</footer>

git add .
git commit -m "feat: tambah styling footer"
git push origin feature/footer

# 5. Buat Pull Request di GitHub:
#    - Title: "feat: tambah footer ke website"
#    - Description: jelaskan perubahan yang dilakukan
#    - Assign reviewer (jika ada teman yang bisa review)

Tugas Mandiri

  1. Pastikan semua tahap 1-5 sudah selesai
  2. Repository sudah di-push ke GitHub dengan CI pipeline berjalan
  3. Minimal 1 Pull Request sudah dibuat
  4. Persiapkan untuk pertemuan 32: review materi hotfix dan release