Hi para siswa nolep, disini pembelajaran menggunakan javascript sebagai tools belajar fundamental pemrograman awal kalian
INGAT INI BUKAN BELAJAR BIKIN WEB NAMUN BELAJAR NGODING
Jadi siap siap untuk merasakan mual, burnout dan sering garuk kepala sampai rambut rontok
terkait apa saja yang harus disiapkan adalah:
Mungkin pertama" kalian akan bingung apa itu git dan kenapa pemula langsung belajar git ?
apasih fungsi git ini sebenarnya ?
Trus kenapa materi dan resource belajar ini ada di git ? (seperti yang kalian baca readme.md skrg)
Oke jadi disini kita akan mulai step awal untuk belajar instagramnya para developer yaitu Git (version control) dan Github tools yang kita pakai.
Git itu adalah sistem kontrol versi (version control system) yang sangat populer digunakan oleh para programmer untuk mengelola dan melacak perubahan pada kode program mereka. Bayangin Git seperti "mesin waktu" untuk kode kalian, yang memungkinkan kalian untuk:
Seperti halnya Google Docs yang menyimpan riwayat editan dokumen, Git menyimpan setiap perubahan yang kalian buat pada kode. Ini memungkinkan kalian untuk kembali ke versi sebelumnya jika ada kesalahan.
Git memungkinkan beberapa programmer bekerja pada proyek yang sama tanpa mengganggu pekerjaan satu sama lain. Setiap orang bisa membuat "cabang" (branch) sendiri untuk mengerjakan fitur baru.
Kode kalian akan aman tersimpan di repositori Git (biasanya di platform seperti GitHub atau GitLab), sehingga tidak akan hilang meski komputer Kalian rusak.
Nah ada banyak tools platform git sebenarnya, tapi disini gua akan jelasin cuman dari 2 ini aja. karena 2 ini yang sangat populer :
- Platform Git paling populer yang dimiliki oleh Microsoft
- Menawarkan banyak fitur gratis dan kolaborasi
- Sangat cocok untuk proyek open source
- Memiliki fitur tambahan seperti GitHub Actions untuk otomatisasi
- Interface yang ramah pengguna dan dokumentasi lengkap
- Menawarkan solusi self-hosted (bisa diinstal di server sendiri)
- Memiliki fitur CI/CD (Continuous Integration/Continuous Deployment) bawaan
- Cocok untuk perusahaan yang membutuhkan kontrol penuh
- Tersedia versi gratis dan berbayar
Inilah contoh list command yang akan dipakai untuk mengelola git kalian.
Untuk windows, kalian bisa langsung download installer nya di link : https://git-scm.com/downloads/win
Ikutin aja step" install nya dari installer , setelah install kalian bisa cek apakah git sudah terinstall dengan command:
git --version
jangan lupa restart cmd nya dulu baru pake command diatas
kalau sudah, bisa lanjut ke tahap selanjutnya untuk Buat akun github👨🏻🌾
Untuk buat akun github kalian bisa ke website githubnya dan langsung klik sign up untuk sampe tampilan seperti ini :
Setelah itu ikutin instruksi untuk buat akunnya sampai selesai.
Jika sudah selesai, kalian akan langsung redirect ke dashboard github akun kalian seperti ini :
untuk sekarang step github sampai buat akun saja, nanti kita lanjut di part 4 untuk buat repo pertama kalian dan commit pertama di git.
Sekarang kalian perlu melakukan Fork pada repo week1 phase 0 dan melakukan pull request untuk monitoring progress tugas kalian di komunitas RPN.
Fork repository di GitHub adalah proses membuat salinan independen dari repository milik orang lain ke akun GitHub kita sendiri. Ini merupakan fitur penting dalam pengembangan software kolaboratif. Mari saya jelaskan lebih detail:
Konsep Dasar Fork:
- Fork menciptakan salinan lengkap repository asli, termasuk semua file, commit history, dan branches
- Repository hasil fork akan muncul di akun GitHub Kalian dengan referensi ke repository asli
- Kalian memiliki kontrol penuh atas repository hasil fork dan dapat melakukan perubahan tanpa mempengaruhi repository asli
Kegunaan Fork:
- Berkontribusi ke proyek open source - Fork memungkinkan Kalian mengusulkan perubahan melalui Pull Request
- Menggunakan proyek yang ada sebagai starting point untuk proyek baru Kalian
- Bereksperimen dengan kode tanpa mempengaruhi proyek asli
- Menyimpan snapshot dari proyek yang mungkin berubah di masa depan
Pertama kalian pergi ke repo : https://github.com/RPN-Phase-0/Week1-Welcome-to-Code
dan dipojok kanan atas ada button "fork", klik button forknya
setelah itu kalian akan masuk kedalam section pembuatan fork untuk repo week1 welcome to code.
langsung saja kalian bisa klik button hijau dibawah "Create Fork".
Setelah kalian klik create fork, github akan melakukan progress fork repository rpn ke akun github kalian.
Hasilnya, kalian akan punya bentuk repo Week1-Welcome-to-Code didalam akun kalian sendiri
Setelah melakukan fork, Kalian bisa:
- Clone repository hasil fork ke komputer lokal
- Membuat perubahan dan melakukan commit
- Push perubahan ke repository fork Kalian
- Membuat Pull Request ke repository (Submit tugas)
Copy link hasil fork repo kalian
setelah itu paste link fork repo kalian ke dalam channel discord rpn di #daftar-sini
Next stepnya kita akan set up Programming Editor menggunakan VSCode
Programming editor adalah software khusus yang dirancang untuk menulis dan mengedit kode program. Kalau kalian sering liat programmer" lagi kerja dan tampilan dilaptopnya ada gambar diatas itu adalah tampilan dari salah satu programming editor yaitu VSCode.
Editor ini memiliki fitur-fitur yang membantu programmer seperti:
- Syntax highlighting (pewarnaan kode)
- Auto-completion (saran kode otomatis)
- Error detection (pendeteksi kesalahan)
- Code formatting (penataan kode)
- File management (manajemen file)
Ada berbagai macam programming editor yang umum dipakai orang, contohnya Vscdoe, IntelliJ, VIM dan old editor yang sering kalian temuin diperkuliahan notepad++.
Nah disini kita pakai Vscode, VSCode salah satu programming editor yang sangat populer yang dibuat Microsoft. Beberapa keunggulan VSCode:
- Gratis dan open source
- Ringan tapi powerful
- Mendukung banyak bahasa pemrograman
- Memiliki marketplace dengan ribuan extension/plugin
- Fitur debugging yang bagus
- Terintegrasi dengan Git
- Terminal terintegrasi
- Tampilan yang bisa dikustomisasi
- Dukungan IntelliSense untuk suggestion code
- Update rutin dengan fitur-fitur baru
VSCode sangat direkomendasikan untuk pemula karena mudah digunakan namun tetap memiliki fitur lengkap untuk pengembangan profesional.
Kalian bisa langsung ke website vscodenya dan download installer VSCode di laptop kalian
https://code.visualstudio.com/download
Setelah kalian install VSCode, Kalian bisa buat folder belajar pertama kalian di folder atau dokumen kalian (bebas direktorinya dimana saja).
Disini contoh gue buat new Folder didalam direktori "programming"
trus isi nama folder belajar pertama kalian
Setelah selesai buat folder (pastikan direktorinya yang kalian tau), kalian bisa buka foldernya di Aplikasi VSCode
Buka Open Folder di VSCode
Arahkan ke folder yang sudah kalian buat
Nah sekarang kalian sudah di direktori belajar-pertama, environtment ini bakal jadi folder untuk membuat file" ngoding kalian.
Sekarang kita bisa lihat integrated terminal VSCode sudah mengarah ke direktori belajar-pertama, kita tinggal install bahasa pemrograman nodejs untuk running code pertama kalian di VSCode ini.
Kalian bisa test dengan CTRL + ~ , dan tampilan terminal sudah mengarah ke direktori belajar-pertama
Set Up VSCode selesai, terakhir kalian bisa langsung lanjut ke step instalasi nodejs dan buat Hello World pertama
Disini kalian sebenarnya akan belajar syntax javascript, tapi akan lebih baik kalau gua jelasin dulu apa perbedaanya javascript dengan node js.
JavaScript adalah bahasa pemrograman yang awalnya diciptakan untuk membuat website menjadi interaktif dan berjalan di browser. JavaScript memungkinkan developer untuk membuat fitur-fitur seperti validasi form, animasi, update konten dinamis, dan interaksi pengguna di halaman web. Bahasa ini menjadi sangat populer karena kemudahannya untuk dipelajari dan kemampuannya dalam memanipulasi HTML dan CSS.
Node.js adalah runtime environment yang memungkinkan JavaScript untuk berjalan di server (di luar browser). Dengan Node.js, JavaScript yang awalnya hanya bisa digunakan untuk frontend (sisi client) kini bisa digunakan juga untuk backend (sisi server), memungkinkan pengembangan aplikasi web full-stack dengan satu bahasa pemrograman. Node.js sangat efisien dalam menangani banyak koneksi secara bersamaan dan cocok untuk membuat aplikasi real-time seperti chat, streaming, atau API.
Jadi NodeJS ini salah satu tools runtime javascript , agar kita bisa running code javascript ini di sisi server. Karena pengenalan Syntax JS di RPN ini metodenya menggunakan scripting test dari terminal, kalian bakal sering running code" javascript langsung di integrated terminal VSCode menggunakan node js.
Untuk Instalasi Nodejs, kalian bisa langsung ke website nya node js dan download installernya seperti biasa.
Ada banyak cara untuk instalasi node js, bisa dari package manager seperti brew, fnm, docker atau prebuilt installernya dri node js.
Kita pilih prebuilt installernya node js, karena ini yang paling mudah untuk para pemula
Kalian ikutin instruksi installernya seperti biasa sampai selesai.
Setelah sudah selesai, kita bisa langsung cek apakah nodejs sudah terinstall bisa dengan command berikut
node -v
nah jalanin command ini dimana ? yes, jalanin nya di integrated terminal VSCode yang kita buka tadi sebelumnya.
Tapi di restart dlu VSCodenya (Close dan buka ulang direktori belajar-pertama) dan buka integrated terminal.
Karena nodejs baru terinstall kita harus restart VSCode terlebih dahulu.
Setelah dibuka terminalnya, bisa langsung ketik node -v untuk memastikan nodejs sudah terinstall di PC kalian.
Instalasi NodeJS selelesai. Next, saatnya buat Hello World Pertama kalian
Saat nya buat script JS pertama kalian di Environtment yang sudah kita set up dari course pertama ini.
Klik kanan dibagian area left bar VSCode dan buat file "helloworld.js"
buat file helloworld.js
.js ini extension dari javascript, otomatis VSCode bakal membaca file itu sebagai file javascript
Tulis code console.log("Hello World!") di line pertama kalian
dan jangan lupa save editor setelah kalian ketik line nya (ctrl + save)
Jalankan Hello World petama kalian dengan running code js di integrated terminal
dengan cara -> node (namafile)
jadi tulis -> node helloworld.js
setelah itu enter
Congrats!!! ini adalah experience ngoding pertama kalian. Hello World ini sangat krusial bagi para pemula, disinilah gerbang start kalian untuk belajar menjadi Software Engineer.
Pull Request (PR) adalah fitur di GitHub yang memungkinkan Kalian mengusulkan perubahan kode dari repository fork atau branch Kalian ke repository utama. Ini adalah cara utama untuk berkolaborasi dalam pengembangan software. Mari saya jelaskan secara detail:
Konsep Dasar Pull Request:
- PR memungkinkan Kalian menunjukkan perubahan yang telah Kalian buat dan meminta maintainer repository untuk mereview dan mengintegrasikan perubahan tersebut
- PR bisa berisi penambahan fitur, perbaikan bug, atau peningkatan dokumentasi
- PR memfasilitasi diskusi dan review kode sebelum perubahan digabungkan ke repository utama
Langkah membuat Pull Request:
- Buat branch baru atau fork repository
- Lakukan perubahan dan commit ke branch/fork Kalian
- Push perubahan ke GitHub
- Kunjungi repository asli di GitHub
- Klik "New Pull Request"
- Pilih branch sumber (branch Kalian) dan branch tujuan
- Isi judul dan deskripsi PR dengan jelas
- Submit Pull Request
Best Practice Pull Request:
- Buat judul yang deskriptif dan jelas
- Berikan deskripsi yang menjelaskan:
- Apa yang diubah
- Mengapa perubahan diperlukan
- Bagaimana cara menguji perubahan
- Tambahkan screenshot jika ada perubahan visual
- Pastikan kode sudah ditest dengan baik
- Respond terhadap review dan feedback dengan sopan
Proses Review Pull Request:
- Maintainer akan mereview perubahan kode
- Mereka bisa memberikan komentar atau meminta perubahan
- Kalian bisa melakukan update berdasarkan feedback
- Setelah disetujui, PR akan di-merge ke repository utama (Case di RPN PR kalian tidak perlu di merge)
Status Pull Request:
- Open: PR masih dalam proses review
- Closed: PR ditolak atau tidak dilanjutkan
- Merged: PR diterima dan digabungkan ke repository utama
Bagi yang belum cloning repository nya di local, kalian wajib melakukan clone repo terlebih dahulu. Agar kalian bisa mengerjakan tugas tugas RPN di laptop kalian sendiri.
pergi ke repo fork kalian (hasil fork diatas) : https://github.com/zexoverz/Week1-Welcome-to-Code (contoh)
Setelah itu klik bagian button hijau (code), nanti kalian bisa copy command cloning repository fork week1.
Setelah kalian copy, kalian balik lagi ke vscode . Buka terminal vs code dan tulis command git clone [paste]
contohnya seperti ini :
git clone https://github.com/zexoverz/Week1-Welcome-to-Code.git
Disini gua masih didalam folder belajar-pertama, jadi kita akan memasukan cloningan repo week1 kedalam belajar-pertama.
Kalian bebas mau cloning di folder mana aja di local kalian. Cuman gua disini mencontohkan memakai folder belajar-pertama.
Nah, setelah selesai cloning. Maka kalian punya folder git repo Week1-Welcome-to-Code
lakukan change directory ke dalam repo Week1-Welcome-to-Code , dengan command:
cd Week1-Welcome-to-Code/
nah sekarang kalian sudah didalam directory week1.
Kalo cara gua untuk mengerjakan, kalian tinggal memasuki quiz quiz yang mau kalian kerjain. Misalkan disini gua mau ngerjain quiz part 1.
kita tinggal masuk kedalem part 1
cd quiz/part1
dan buat file soal.js nya didalam folder itu
setelah itu kalian copas quiz nya kedalam file js yang sudah kalian buat.
Nah disini kalian sudah bisa mengerjakan quiz nya!.
setelah kalian melakukan perubahan pada code, dan menyelesaikan quiznya.
maka git local kalian wajib melakukan commit & push ke dalam repo fork kalian.
contohnya disini gua tambahin line : //CONTOH SOAL SELESAI
Kalau kalian sadar, VS Code kita menandakan warna hijau pada soal1.js yang baru saja dibuat. ini adalah bentuk perubahan history yang di versioning oleh git.
Sekarang waktunya commit & push perubahannya , agar fork repo kalian mempunyai versi yang sesuai dengan local kalian.
sebelum kita push kalian harus konfigurasi git profile di local :
git config --global user.name "Username github"
git config --global user.email [email protected]
setelah konfigurasi selesai kalian bisa lanjut untuk commit & push.
Ketik command :
git add . -> melakukan penambahan perubahan ke staging (finalisasi)
git commit -m "Submit tugas pertama" -> Memasukan peurbahan staging ke dalam hashcode (commit)
git push origin main -> push commit ke dalam branch main (fork repo).
Disini gua contohkan push ke main branch, best practicenya kalian membuat branch sendiri terpisah (optional).
setelah kalian push, maka hasilnya seperti ini :
sekarang buka github kalian dan pergi ke link fork repo week1.
di contoh gua : https://github.com/zexoverz/Week1-Welcome-to-Code
nah kalian bisa pergi ke tab "Pull Requests" dan klik button hijau New Pull Request
setelah itu github akan otomatis melakukan komparasi terhadap fork repo kalian dengan repo asli RPN.
selanjutnya tinggal klik create pull request
Isi title dengan username/nama kalian. setelah itu klik create pull request
Congrats, kalian sudah submit tugas pertama di RPN
selanjutnya, kalian tidak perlu lagi PR untuk submit soal kedua atau part 2 di week1. kalian tinggal ulangi saja proses commit & push nya.
dan kalian bisa lihat history pengumpulan tugas kalian di PR bagian commits
Nah disinilah para mentor akan mereview tugas kalian menggunakan sistem pull request dari github. Mentor juga bakal ngasih feedback berupa comment di PR kalian.
Kalian akan melakukan Fork & PR ulang, jika kalian sudah lanjut ke week2.
Karena RPN memisahkan 1 Repo = 1 Week.
Jadi jika Phase 0 punya 4 Week , maka kalian harus fork 4 repo dan 4 PR.
Welcome to RPN World, Let's Code ALL CHALLANGES !!!
video tutorial materi ini, biar lebih paham: Part 1