✦ SMK IT · BAB 01
</>
{ }
01
Modul Pembelajaran Interaktif

Pengenalan Dunia
Software Engineering

BAB 1 — Menjelajahi dunia para pembuat perangkat lunak ✦

🎓 Kelas 10 · Semester 1 💻 Jurusan IT 🚀 Untuk Pemula Total

Selamat datang, calon developer! Di bab ini kamu akan mengenal siapa itu software engineer, jenis-jenis pekerjaan di dunia IT, dan teknologi yang mereka pakai setiap hari — semua dijelaskan dengan analogi yang mudah dipahami.

Slide 02 · Apa yang akan kamu kuasai

Tujuan Pembelajaran

Setelah menyelesaikan bab ini, kamu diharapkan mampu memahami hal-hal berikut. Tenang, tidak ada yang sulit — kita pelajari pelan-pelan! 😊

🎯 Tujuan 1

Memahami Software Engineering

Mengerti apa itu software engineering dan bedanya dengan sekadar "ngoding".

🎯 Tujuan 2

Mengenal Jenis Developer

Membedakan Frontend, Backend, Fullstack, Mobile, dan UI/UX Designer.

🎯 Tujuan 3

Mengetahui Roadmap Belajar

Memahami peta perjalanan belajar dari semester 1 sampai 4.

🎯 Tujuan 4

Paham Cara Kerja Internet

Mengenal website, domain, hosting, browser, server, dan tools developer.

Slide 03 · Konsep Inti

Apa itu Software Engineering?

🎨 Analogi Bergerak
Arsitek
membuat rancangan
🏗️
Tukang
mengerjakan
💡 Penjelasan Analogi

Bayangkan membangun rumah. Arsitek tidak hanya menumpuk batu bata — ia merancang, menghitung, dan memikirkan agar rumah kuat, nyaman, dan tahan lama. Sedangkan tukang fokus mengerjakan bagian per bagian.

📘 Penjelasan Teknis

Software Engineering (Rekayasa Perangkat Lunak) adalah ilmu merancang, membangun, menguji, dan merawat perangkat lunak secara terstruktur agar berkualitas, aman, dan mudah dikembangkan.

  • Bukan cuma menulis kode, tapi memecahkan masalah
  • Memikirkan desain & arsitektur sebelum membangun
  • Menjaga kualitas lewat pengujian (testing)
  • Merawat software agar tetap berjalan baik

✦ Jadi, Software Engineer = Arsitek dunia digital yang berpikir matang sebelum membangun.

Slide 04 · Alur Kerja

Definisi & Siklus Kerjanya

Seorang Software Engineer bekerja mengikuti tahapan yang rapi — disebut SDLC (Software Development Life Cycle). Perhatikan alur animasi berikut:

Analisiskebutuhan Desainrancangan Codingmembangun Testingmenguji Rilis!
1. Analisis

Memahami apa yang pengguna butuhkan.

2. Desain & 3. Coding

Membuat rancangan lalu menuliskannya jadi kode program.

4. Testing & Rilis

Diuji agar bebas error, lalu diluncurkan ke pengguna.

Slide 05 · Perbandingan

Programmer vs Software Engineer

Keduanya menulis kode, tapi cara berpikirnya berbeda. Lihat dua karakter ini! 👇

👨‍💻 Programmer

"Beri aku tugas, aku tuliskan kodenya."

  • Fokus menulis kode sesuai instruksi
  • Menyelesaikan tugas yang spesifik
  • Menguasai 1–2 bahasa pemrograman

🧑‍🚀 Software Engineer

"Mari kita rancang solusi terbaiknya dulu."

  • Fokus memecahkan masalah besar
  • Memikirkan desain, skala, & keamanan
  • Bekerja dalam tim & menjaga kualitas

Kesimpulan: Semua software engineer bisa ngoding, tapi tidak semua yang ngoding berpikir layaknya engineer. Kamu akan belajar menjadi keduanya!

Slide 06 · Jenis Developer

Frontend Developer

🎨 Analogi Bergerak — Desainer Interior
💡 Penjelasan Analogi

Frontend itu seperti desainer interior rumah. Ia mengatur warna cat, posisi sofa, dan pencahayaan — semua yang dilihat dan disentuh langsung oleh tamu. Begitu juga frontend mengatur tampilan website yang dilihat pengguna.

📘 Penjelasan Teknis

Frontend Developer membangun tampilan (antarmuka) yang langsung dilihat pengguna di layar: tombol, menu, warna, animasi, dan tata letak.

🛠️ Bahasa utama: HTML, CSS, JavaScript

💻 Contoh Kode
<!-- Tombol di website -->
<button class="beli">Beli Sekarang</button>
Slide 07 · Jenis Developer

Backend Developer

🎨 Analogi Bergerak — Dapur Restoran
🙋 Pelanggan
(pesan)
🍳
👨‍🍳 Dapur
(masak)

Data mengalir di "pipa" backend:

💡 Penjelasan Analogi

Backend itu ibarat dapur restoran. Pelanggan tidak melihat dapur, tapi di sanalah makanan benar-benar dimasak. Backend bekerja di "belakang layar" memproses data dan menyiapkan apa yang diminta pengguna.

📘 Penjelasan Teknis

Backend Developer mengurus logika, database, dan server — bagian yang tidak terlihat tapi membuat aplikasi benar-benar berfungsi: menyimpan akun, memproses pembayaran, dll.

🛠️ Contoh bahasa: PHP, Python, JavaScript (Node)

💻 Contoh Kode
# Backend menyimpan data pesanan
function simpanPesanan(menu){
  database.simpan("pesanan", menu);
}
Slide 08 · Jenis Developer

Fullstack Developer

Gabungan dari keduanya! Bisa mengurus tampilan (frontend) dan dapur (backend) sekaligus. 🦸

FE
Frontend
Tampilan
BE
Backend
Logika
🟰
FS
Fullstack
Keduanya!
💡 Analoginya

Seperti pemilik restoran yang bisa melayani tamu di depan sekaligus memasak di dapur. Serba bisa!

📘 Teknisnya

Menguasai frontend & backend. Cocok untuk proyek kecil atau startup karena satu orang bisa membangun aplikasi utuh.

Slide 09 · Jenis Developer

Mobile Developer

💡 Penjelasan Analogi

Pernah pakai aplikasi seperti WhatsApp, TikTok, atau Gojek di HP-mu? Itulah hasil karya Mobile Developer! Mereka membangun aplikasi yang "tinggal di dalam genggamanmu".

📘 Penjelasan Teknis

Mobile Developer membuat aplikasi untuk smartphone (Android & iOS).

  • Android → bahasa Kotlin / Java
  • iOS → bahasa Swift
  • Keduanya sekaligus → Flutter / React Native

✦ Hasil kerjanya bisa dipasang langsung dari Play Store atau App Store.

Slide 10 · Jenis Developer

UI/UX Designer

🎨 Analogi Bergerak — Peta Kota
Wireframe (sketsa)
➡️
Desain Jadi ✨
💡 Penjelasan Analogi

UI/UX Designer seperti pembuat peta kota. Ia memastikan orang bisa sampai ke tujuan dengan mudah, tidak tersesat, dan perjalanannya menyenangkan.

📘 Penjelasan Teknis

UI (User Interface) = bagaimana tampilan terlihat (warna, tombol, font).

UX (User Experience) = bagaimana rasanya menggunakan aplikasi (mudah? nyaman? cepat?).

🛠️ Tool favorit: Figma

✦ Mereka mendesain dulu sebelum developer mulai membangun — supaya hasilnya cantik dan mudah dipakai.

Slide 11 · Peta Belajar

Roadmap Semester 1

Inilah perjalanan belajarmu di semester pertama. Mulai dari nol! 🌱

Bulan 1 — Pengenalan Dunia IT

Mengenal software engineering & jenis developer (bab ini!).

Bulan 2 — Dasar HTML

Membuat struktur halaman web pertamamu.

Bulan 3 — Dasar CSS

Memberi warna dan gaya pada halaman web.

Bulan 4 — Proyek Mini Website

Membuat website profil sederhana.

Slide 12 · Peta Belajar

Roadmap Semester 2

Naik level! Membuat website jadi hidup dan interaktif. ⚡

JavaScript Dasar

Membuat website bisa bereaksi terhadap klik & input.

Logika Pemrograman

Belajar kondisi (if), perulangan (loop), dan fungsi.

Responsive Design

Website rapi di HP, tablet, maupun laptop.

Proyek Web Interaktif

Misal: kalkulator atau galeri foto.

Slide 13 · Peta Belajar

Roadmap Semester 3

Masuk ke dunia backend & database. Aplikasi mulai "berpikir". 🧠

Backend Dasar

Membuat server sederhana yang melayani data.

Database

Menyimpan data pengguna dengan SQL.

Membuat API

Menghubungkan frontend dengan backend.

Proyek Web Dinamis

Misal: aplikasi to-do list dengan login.

Slide 14 · Peta Belajar

Roadmap Semester 4

Tahap akhir — siap jadi developer profesional & punya portofolio! 🏆

Framework Modern

Belajar tools profesional untuk membangun lebih cepat.

Kolaborasi Tim (Git)

Bekerja bersama tim menggunakan GitHub.

Deploy & Hosting

Menerbitkan aplikasi agar bisa diakses dunia.

Proyek Akhir & Portofolio

Karya nyata untuk modal melamar kerja / magang.

Slide 15 · Pengenalan Internet

Internet & Website

🎨 Analogi Bergerak — Jalan Raya
🏠 Rumahmu🌐 Website

📦 Paket data melaju di "jalan raya" internet

💡 Penjelasan Analogi

Internet itu seperti jaringan jalan raya raksasa yang menghubungkan seluruh dunia. Data dikirim dalam bentuk "paket" yang melaju di jalan ini, dari satu komputer ke komputer lain.

📘 Penjelasan Teknis

Internet = jaringan global yang menghubungkan jutaan komputer di seluruh dunia.

Website = kumpulan halaman yang bisa kamu buka lewat internet, seperti YouTube, Google, atau toko online.

✦ Saat kamu mengetik alamat website, browser-mu "mengirim surat" lewat jalan raya internet untuk meminta halaman itu.

Slide 16 · Pengenalan Internet

Domain & Hosting

🎨 Analogi Bergerak — Nama Rumah vs Tanah
🏷️
Domain
nama/alamat rumah
🏞️
Hosting
tanah tempat berdiri
⚙️ Demo Visual — DNS Lookup
tokoku.com
📖 DNS
🖥️ 172.0.1.5

DNS menerjemahkan nama domain menjadi alamat server (IP).

📘 Penjelasan Teknis

Domain = nama unik website yang kamu ketik di browser, contoh google.com. Mudah diingat manusia.

Hosting = tempat menyimpan semua file website agar bisa diakses 24 jam. Ibarat tanah & gedung tempat tokomu berdiri.

✦ Tanpa hosting, website tak punya "tempat tinggal". Tanpa domain, orang sulit menemukan alamatnya.

Slide 17 · Pengenalan Internet

Browser & Server

Analogi pelayan restoran: kamu (browser) memesan, dapur (server) menyiapkan. 🍽️

🧑‍💻
Browser
Pelanggan
① Request (minta halaman) ➜
⬅ ② Response (kirim halaman) ②
🖥️
Server
Dapur
📘 Browser

Aplikasi untuk membuka website (Chrome, Firefox). Tugasnya meminta & menampilkan halaman.

📘 Server

Komputer kuat yang menyala 24 jam, menyimpan & mengirim website saat diminta browser.

Slide 18 · Software Developer

VS Code — Tempat Menulis Kode

VS Code itu seperti buku tulis pintar bagi programmer. Coba klik tombol di bawah untuk melihat kode "diketik" otomatis! ⌨️

halo.html — Visual Studio Code
1
2
3
Lihat bagaimana kode muncul huruf demi huruf.
📘 Penjelasan Teknis

VS Code (Visual Studio Code) adalah code editor gratis buatan Microsoft. Fiturnya: pewarnaan kode, auto-complete, dan deteksi kesalahan — membuat menulis kode jadi nyaman dan cepat.

Slide 19 · Software Developer

Chrome · GitHub · Figma

Tiga teman setia developer selain VS Code. Masing-masing punya tugas berbeda! 🧰

Chrome

Browser untuk membuka & menguji website yang kita buat.

🐙

GitHub

Tempat menyimpan kode online & berkolaborasi dengan tim.

Figma

Tool untuk mendesain tampilan aplikasi (dipakai UI/UX Designer).

Rangkuman tools: VS Code untuk menulis kode → Chrome untuk menguji → GitHub untuk menyimpan & berbagi → Figma untuk mendesain. Inilah peralatan harian seorang developer!

Slide 20 · Latihan 1

Latihan: Identifikasi Peran

Seseorang bertugas membuat tampilan tombol, warna, dan menu yang dilihat pengguna di layar. Termasuk developer apakah dia? Klik jawabanmu! 👇

A. Frontend Developer
B. Backend Developer
C. Mobile Developer
D. Database Administrator
Slide 21 · Latihan 2

Latihan: Pasangkan Analogi

Klik satu konsep di kiri, lalu klik analogi yang cocok di kanan. Pasangan benar akan berubah hijau! 🟢

KONSEP
Backend
Domain
Hosting
Frontend
ANALOGI
🏞️ Tanah tempat rumah berdiri
🎨 Desainer interior rumah
👨‍🍳 Dapur restoran
🏷️ Nama / alamat rumah
Slide 22 · Tugas Akhir

Tugas Akhir BAB 1 🏁

Saatnya menerapkan ilmumu! Pilih 1 website favoritmu (misal: YouTube, Tokopedia, atau sekolahmu), lalu jawab pertanyaan berikut di buku tulis / dokumen.

📝 Soal 1

Apa domainnya?

Tuliskan alamat website-nya. Contoh: youtube.com

📝 Soal 2

Hostingnya di mana?

Perkirakan: server lokal Indonesia atau luar negeri? Mengapa?

📝 Soal 3

Siapa pembuatnya?

Menurutmu dibuat tim frontend, backend, atau fullstack? Beri alasan.

✦ Selamat! Kamu telah menyelesaikan BAB 1

Kumpulkan tugasmu pada pertemuan berikutnya. Sampai jumpa di petualangan koding selanjutnya! 🚀

← → untuk navigasi · F untuk layar penuh
01 / 22