Kenalan dulu sama alat-alatnya

Hai! Selamat datang. 👋

Kalau kamu sampai di sini, kemungkinan besar kamu penasaran: “Sebenarnya ngoding itu ngapain, sih? Kok bisa orang ngetik-ngetik terus jadi aplikasi?”

Tenang, pertanyaan itu bakal kita jawab pelan-pelan. Tapi sebelum mulai, kita perlu kenalan dulu sama alat-alatnya. Sama kayak mau masak: sebelum bikin nasi goreng, kamu harus tahu mana wajan, mana spatula, mana kompor.

Bab ini nggak ada kodenya sama sekali. Santai aja.

File: “kertas” di dalam komputer

Semua yang ada di komputer atau HP-mu disimpan dalam bentuk fileFileSatu "lembar" data yang disimpan di komputer atau HP — bisa berisi tulisan, gambar, suara, atau kode.Penjelasan lengkap →. Foto selfie? File. Lagu? File. Tugas makalah? File juga.

Dan nanti, kode yang kamu tulis juga disimpan sebagai file. Jadi aplikasi itu, pada dasarnya, adalah kumpulan file berisi tulisan.

Folder: map tempat menyimpan file

Kalau file adalah kertas, folderFolderMap untuk menyimpan file supaya rapi. Folder bisa berisi file dan folder lain.Penjelasan lengkap → adalah map untuk menyimpan kertas-kertas itu biar rapi. Folder bisa berisi file, dan bisa juga berisi folder lain di dalamnya.

Misalnya, folder Tugas Sekolah berisi folder Matematika dan Bahasa Indonesia, dan di dalamnya ada file-file tugasmu. Programmer juga begitu: satu aplikasi biasanya disimpan dalam satu folder khusus.

Ekstensi: “KTP”-nya file

Coba perhatikan nama file di komputermu. Sering kali ada titik dan beberapa huruf di belakangnya:

• foto-liburan.jpg
• tugas-sejarah.docx
• catatan.txt
• index.html

Huruf di belakang titik itu namanya ekstensiEkstensiHuruf di belakang titik pada nama file (misalnya .html atau .jpg) yang menunjukkan jenis file itu.Penjelasan lengkap →. Ekstensi memberi tahu komputer file ini jenis apa, dan harus dibuka pakai aplikasi apa.

Kenapa ngoding nggak bisa pakai Word?

Ini pertanyaan yang sering banget muncul. Word kan juga buat ngetik, kenapa nggak dipakai buat nulis kode?

Masalahnya, Word itu terlalu pintar. Waktu kamu ngetik di Word, yang disimpan bukan cuma tulisanmu, tapi juga banyak “bumbu” tersembunyi: jenis huruf, ukuran, warna, tebal-miring, margin halaman, dan lain-lain.

Komputer yang membaca kode nggak butuh bumbu-bumbu itu. Malah jadi bingung. Yang dibutuhkan adalah teks polosTeks polosTulisan apa adanya tanpa format apa pun (tanpa jenis huruf, warna, atau tebal-miring).Penjelasan lengkap →: tulisan apa adanya, tanpa format apa pun.

Satu jebakan lagi: Word suka mengubah tanda kutip biasa " jadi tanda kutip “miring” “ ” secara otomatis. Buat manusia kelihatan sama, tapi buat komputer itu karakter yang beda, dan kodenya bisa langsung error. Keyboard HP juga kadang melakukan hal yang sama, jadi hati-hati ya.

Notepad vs VS Code: kertas biasa vs kertas pintar

Jadi pakai apa buat nulis kode? Ada dua pilihan:

1. Notepad (atau aplikasi teks polos lainnya). Ini kertas HVS biasa. Bisa dipakai buat nulis kode, nggak ada yang salah. Tapi ya polos banget, nggak ada bantuan apa-apa.

2. Code editorCode editorAplikasi khusus untuk menulis kode — seperti Notepad, tapi pintar (ada warna, nomor baris, dan saran otomatis).Penjelasan lengkap → seperti VS Code. Ini juga menyimpan teks polos, tapi dia kertas yang pintar:

• Kodenya diberi warna-warni sesuai jenisnya, jadi lebih gampang dibaca.
• Ada nomor baris, jadi kalau ada error di “baris 12”, kamu tahu harus lihat ke mana.
• Dia bisa menebak apa yang mau kamu ketik dan menawarkan sisanya.
• Kalau kamu buka kurung (, dia otomatis menutupnya ).

Mungkin nanti kamu juga dengar istilah IDEIDESingkatan dari Integrated Development Environment — code editor versi lengkap, biasanya untuk aplikasi besar.Penjelasan lengkap →. Itu “saudara tua” code editor: lebih lengkap lagi, biasanya dipakai untuk aplikasi yang besar. Untuk sekarang, anggap saja code editor dan IDE itu sama-sama “kertas pintar untuk menulis kode”.

Browser: si pembaca halaman web

Terakhir, kenalan sama browserBrowserAplikasi untuk membuka halaman web, seperti Chrome, Firefox, Safari, atau Edge.Penjelasan lengkap →: Chrome, Firefox, Safari, Edge, dan teman-temannya. Kamu pasti tiap hari pakai buat buka YouTube atau Instagram versi web.

Yang jarang orang sadari: browser itu sebenarnya “pembaca” file. Waktu kamu membuka sebuah situs, browser mengambil file-file berisi tulisan (kode), membacanya baris demi baris, lalu mengubahnya jadi tampilan yang kamu lihat: judul, gambar, tombol, warna.

Nah, ini petunjuk penting untuk bab-bab berikutnya:

Kode = tulisan di dalam file. Browser = yang membaca tulisan itu dan mengubahnya jadi tampilan.

Di Bab 2 kamu akan melihat sendiri bagaimana tulisan <h1>Halo</h1> diubah browser jadi judul besar. Rasanya kayak sulap, padahal bukan.