Git untuk Pengembangan Web: Mengenal Alur Kerja Umum Proyek

Diterbitkan: 2022-01-11

Pengembangan web secara intrinsik terkait dengan kolaborasi. Sebagian besar waktu Anda akan bekerja dengan pengembang lain, dan bahkan jika tidak, Git dapat membantu Anda dalam banyak cara lain.

Git adalah software yang mengontrol versi aplikasi yang kita buat. Ini digunakan oleh pengembang solo, perusahaan besar, dan bahkan Linux, proyek open source terbesar di dunia.

Sebagai pengembang web, sangat penting untuk mengetahui cara menggunakan Git untuk pengembangan web dengan benar. Kami tidak hanya berbicara tentang "git add", "git commit", dan "git push". Anda harus mengetahui seluruh alur kerja pembuatan proyek web dengan Git.

Belum yakin? Ayo mulai!

Mengapa Menggunakan Git?

Ini hanyalah beberapa alasan untuk mulai menggunakan Git:

Organisasi: Alih-alih mengelola proyek Anda di folder seperti v1, v2, v3, dll, Anda memiliki satu proyek dengan database khusus yang menyimpan semua versi file
Kolaborasi: Git memungkinkan Anda dan orang lain mengerjakan proyek yang sama secara bersamaan tanpa menimbulkan konflik.
Sumber terbuka: Git adalah sumber terbuka, tetapi juga merupakan alat yang kami gunakan untuk berkolaborasi dan membuat perangkat lunak sumber terbuka yang hebat. Siapa pun dapat membuat permintaan tarik ke proyek sumber terbuka di platform seperti GitHub atau Bitbucket.
Fleksibilitas platform: Saat ini, Anda memiliki banyak layanan hosting Git yang berbeda untuk dipilih, seperti Gitlab, GitHub, Bitbucket, dan SourceForge. Anda bahkan dapat menggunakan solusi yang dihosting sendiri untuk semua proyek Anda.
Pencadangan mudah: Urungkan kesalahan dengan mudah, dan jangan pernah kehilangan basis kode proyek Anda.

Saatnya untuk belajar lebih dari sekedar 'git add', 'git commit' dan 'git push' Selami semua yang perlu Anda ketahui tentang alur kerja Git pada panduan ini Klik untuk Tweet

Kami telah menyebutkan istilah GitHub sekali atau dua kali sekarang, jadi apa perbedaan antara Git dan GitHub?

Ini mungkin membingungkan Anda jika Anda benar-benar baru di Git. Sederhananya, Git dan GitHub adalah alat yang terkait namun berbeda.

Git adalah sistem kontrol versi (VCS) yang kami gunakan untuk mengontrol perubahan file kami, sementara GitHub adalah layanan yang kami gunakan untuk menyimpan file proyek kami dan riwayat Git mereka secara online (terletak di folder .git/ proyek Anda) .

Git diinstal secara lokal, di mesin Anda, dan tanpa layanan hosting seperti GitHub atau GitLab, akan sangat sulit untuk berkolaborasi dengan pengembang lain.

GitHub meningkatkan Git dengan menambahkan fitur lain yang meningkatkan kolaborasi, seperti kloning, forking, dan penggabungan. Bersama-sama, kedua alat ini digabungkan untuk menghadirkan ekosistem yang relatif ramah bagi Anda untuk mengembangkan, mengelola, dan menunjukkan proyek Anda kepada orang lain.

Git Dasar untuk Alur Kerja Pengembangan Web

Di bagian selanjutnya, Anda akan mempelajari lebih lanjut tentang alur kerja Git untuk pengembangan web melalui praktik langsung.

Persyaratan Instalasi

Jika Anda belum menginstal Git, ini adalah waktu yang tepat. Sangat mudah untuk menginstal dan tersedia di sebagian besar sistem operasi.

Unduh dari halaman unduhan resmi, atau instal dengan pengelola paket jika Anda menggunakan Linux atau macOS:

Halaman unduhan Git, menampilkan opsi untuk macOS, Windows, dan Linux/Unix. — halaman unduhan Git.

Untuk menguji apakah semuanya berjalan baik dengan penginstalan, jalankan terminal di Linux atau macOS dengan mencari “Terminal” di menu aplikasi Anda, atau dengan membuka Git bash di Windows (yang diinstal dengan Git secara default).

Kemudian ketik:

 git --version

Git versi 2.33 ditampilkan di terminal Linux. — Versi Git.

Jika Anda mendapatkan versi Git sebagai tanggapan, Anda siap melakukannya.

Kami juga memerlukan akun GitHub, jadi pastikan untuk mendaftar atau masuk ke GitHub:

Halaman pendaftaran GitHub dengan tulisan "Buat akun Anda" di bagian atas. — halaman pendaftaran GitHub.

Setelah Anda menginstal Git dan masuk ke akun GitHub Anda, Anda dapat melanjutkan ke bagian berikutnya.

Alur Kerja Git Dasar untuk Proyek Kolaboratif

Seperti disebutkan sebelumnya, sebagian besar waktu Anda tidak akan mengembangkan proyek solo. Berkolaborasi adalah keterampilan utama, dan Git serta GitHub membantu kami menjadikannya proses yang sederhana namun efektif.

Alur kerja khas proyek Git terlihat seperti ini:

Dapatkan salinan lokal proyek dengan mengkloning repositori, atau repo. Jika Anda berkolaborasi, Anda harus membayar repo terlebih dahulu.
Buat cabang dengan nama perwakilan dari fitur yang akan Anda kerjakan.
Mengedit proyek.
Komit perubahan ke mesin lokal Anda.
Dorong perubahan ke repo jarak jauh.
Buat permintaan tarik ke repo asli.
Gabungkan dan selesaikan konflik di cabang utama repo asli.

tutorial

Sekarang saatnya mengotori tangan kita!

Dalam panduan ini, Anda akan membuat situs web HTML sederhana. Untuk tujuan praktis, Anda akan membagi proyek dasar dari repositori situs HTML ke akun GitHub Anda. Ini dapat dilakukan untuk semua repositori yang tersedia untuk umum.

Untuk melakukan fork pada situs HTML, buka repositori GitHub ini dan klik tombol Fork yang terletak di kanan atas halaman:

Halaman GitHub berfokus pada tombol "Fork". — garpu GitHub.

Sekarang Anda memiliki garpu dari repo asli yang hanya tersedia di akun GitHub Anda. Ini adalah repo yang sama persis — sampai Anda mulai melakukan perubahan.

Seperti yang Anda lihat, melakukan forking repo publik hanya membutuhkan beberapa detik. Ini bagus untuk proyek sumber terbuka, tetapi ingatlah bahwa jika organisasi Anda memiliki repo pribadi, Anda harus disertakan sebagai kontributor sebelum mencoba melakukan fork.

Saatnya membawa garpu Anda ke mesin lokal Anda. Untuk melakukan ini, Anda perlu mengkloningnya dengan perintah git clone , yang mengambil repositori Git dari server jarak jauh:

 git clone remote_url

Anda perlu mengganti remote_url dengan URL fork Anda. Untuk mendapatkan URL yang tepat dari repo GitHub, buka halamannya dan klik Code . Kemudian pilih SSH , dan salin tautan yang diberikannya kepada Anda:

URL repo SSH di bawah tombol "Kode" di GitHub. — URL SSH.

Perintah yang akan Anda jalankan untuk mengkloning repo bercabang adalah:

 git clone [email protected]:yourusername/HTML-site.git

Saat Anda mengkloning repo, Anda mendapatkan folder dengan namanya. Di dalam folder itu adalah kode sumber proyek (dalam hal ini, situs HTML) dan repo Git, yang terletak di dalam folder bernama .git .

Anda dapat melihat daftar file di dalam direktori baru dengan membuka folder baru di pengelola file grafis, atau dengan mendaftarkannya langsung dari terminal dengan ls atau dir :

 # Linux/macOS ls HTML-site/ # Windows dir HTML-site\ .git images .gitignore index.html LICENSE README.md styles.css

Situs HTML ini sangat sederhana. Ini menggunakan Bootstrap untuk tujuan praktis dan beberapa gambar dari Unsplash, tempat Anda dapat mengunduh gambar gratis untuk situs Anda.

Jika Anda membuka file index.html di browser, Anda akan melihat halaman sederhana dengan beberapa gambar:

Halaman web sederhana yang kami buat, yang menampilkan gambar perangkat teknologi, termasuk beberapa laptop dan kamera lama. — Halaman web sederhana yang kami buat.

Saatnya bermain-main dengan proyek ini. Rasanya sangat kosong, dan mungkin header dengan nama situs dapat meningkatkan pengalaman pengguna.

Untuk melakukannya, masuk ke direktori situs HTML dan buat cabang bernama header . Di cabang baru ini, kita dapat mengedit semua file dan mengimplementasikan kode sebanyak yang kita inginkan karena itu tidak akan mempengaruhi cabang utama (asli).

Jalankan perintah berikut:

 git checkout -b header

Ini akan membuat cabang bernama "header" dan mengalihkan Anda ke sana setelah ini. Ini setara dengan:

 git branch header git checkout header

Untuk mengonfirmasi semuanya berjalan dengan baik, jalankan:

 git status # On branch header # nothing to commit, working tree clean

Anda akan melihat bahwa Anda telah dipindahkan dari cabang "utama" ke cabang "tajuk", tetapi pohon kerja masih bersih karena kami belum mengedit file apa pun.

Di editor kode favorit Anda, buka file index.html di proyek bercabang Anda. File ini menyertakan beberapa tautan ke Bootstrap 5, sehingga kami dapat memanfaatkan komponen kerangka kerja yang siap digunakan.

Tambahkan kode berikut ke file index.html di dalam <body> dan di atas wadah gambar:

 <header> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1">HTML site</span> </div> </nav> </header>

Halaman web kami dengan header hitam "situs HTML" baru di atas gambar. — Halaman web kami dengan header baru.

Jauh lebih tampan! Jangan ragu untuk membuat cabang dan perubahan lain yang Anda inginkan.

Setelah Anda selesai mengedit proyek, saatnya untuk melakukan semua perubahan ke repo lokal Anda. Di dalam direktori proyek, ketik berikut ini ke terminal Anda:

 git add --all git commit -m "Added simple header in index.html file"

Ketika Anda pertama kali memulai sebuah proyek, biasanya memiliki pesan komit deskriptif, tetapi seiring waktu dan fokus yang bergeser, kualitas pesan cenderung menurun. Pastikan untuk mengikuti praktik penamaan yang baik.

Sekarang Anda telah membuat komit ke repo lokal Anda (yang masih hanya tersedia di komputer Anda), saatnya untuk mendorongnya ke repositori jarak jauh.

Jika Anda mencoba untuk mendorong komit seperti biasa, itu tidak akan berhasil karena Anda sedang mengerjakan cabang header . Anda perlu mengatur cabang upstream untuk header :

 git push --set-upstream origin header

Mulai 13 Agustus 2021, GitHub mewajibkan penggunaan autentikasi SSH, jadi pastikan Anda telah menyiapkan kunci dengan benar.

Bosan dengan dukungan hosting WordPress level 1 di bawah standar tanpa jawaban? Coba tim dukungan kelas dunia kami! Lihat rencana kami

Setelah ini, Anda akan dapat melihat cabang baru bernama header di repositori bercabang Anda (mis. https://github.com/yourusername/HTML-site/branches ):

Untuk membuat permintaan tarik ke repo asli, klik Bandingkan , di bagian Cabang aktif .

Ini akan memandu Anda ke permintaan tarik, di mana Anda harus memilih cabang mana (asli atau garpu) yang ingin Anda gabungkan. Secara default, ini menunjukkan opsi untuk bergabung dengan repositori dasar:

Membuat pull request di GitHub dengan judul "Membandingkan perubahan". — Membuat permintaan tarik di GitHub.

Setelah Anda mengklik opsi permintaan tarik, Anda harus menulis deskripsi singkat tentang perubahan yang dibuat, sama seperti komitmen sebelumnya. Sekali lagi, cobalah untuk ringkas namun deskriptif:

Halaman "Buka permintaan tarik" di GitHub menampilkan pesan tarik yang menjelaskan apa, mengapa, dan detail lain dari permintaan tarik. — Menulis pesan permintaan tarik.

Klik tombol Buat permintaan tarik dan tunggu pemilik repositori dasar menerima atau memberi Anda umpan balik tentang perubahan Anda.

Selamat — Anda baru saja menyelesaikan semua langkah alur kerja Git umum untuk pengembangan web!

Ini adalah contoh yang sangat mendasar, tetapi logikanya meluas ke seluruh proyek dari semua ukuran. Pastikan Anda juga menerapkan alur kerja ini dalam proyek kolaboratif yang lebih besar.

Cara Menggunakan Git di Kinsta

Jika Anda pengguna Kinsta, Anda sudah memiliki dua cara untuk menggunakan Git dan GitHub dari dalam portal MyKinsta Anda.

Mari kita mulai dengan opsi pertama. Anda dapat dengan mudah memasukkan SSH dan menarik repo dari layanan hosting Git seperti GitHub, Gitlab, atau Bitbucket.

Untuk melakukan ini, buka tab Situs Anda, pilih situs, dan buka bagian detail SSH Anda, dan salin perintah terminal SSH.

Halaman info situs MyKinsta menampilkan detail SSH dan bagian perintah. — bagian detail SSH.

Masuk melalui SSH ke situs Anda dengan menempelkan perintah di atas di terminal Anda, dan masuk ke folder publik situs Anda (terletak di bawah /www/yoursitename/ ). Di sinilah semua file WordPress Anda berada, sehingga Anda dapat menarik repo Git dengan tema atau plugin khusus yang telah Anda kerjakan.

Inilah cara Anda menarik repo Git dengan perintah sederhana:

 ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"

Sekarang, dengan memperkenalkan fitur penerapan GitHub baru di Kinsta, Anda dapat menerapkan situs WordPress lengkap dari repositori GitHub.

Repo GitHub Anda harus menyertakan salinan file inti WordPress, dan tentu saja, konten situs Anda di dalam folder wp-content .

Mari kita lihat sekilas opsi ini.

Buka salah satu situs perusahaan Anda dan buat lingkungan pementasan. Ini tidak akan memakan waktu lebih dari beberapa menit.

Opsi lingkungan pementasan halaman situs Kinsta. — Lingkungan pementasan.

Setelah Anda berada di situs pementasan Anda, buka tab Deployment dan klik tombol Begin setup . Anda akan melihat modal GitHub yang memungkinkan Kinsta terhubung dengan akun GitHub Anda.

Penerapan GitHub dengan panah yang menunjuk ke tombol "Mulai penyiapan". — tab penerapan GitHub.

Sekarang, pilih repo tempat Anda akan menarik situs Anda.

Hubungkan Kinsta ke modal GitHub dengan beberapa opsi termasuk tombol "Selesai". — Hubungkan Kinsta ke GitHub.

Terakhir, terapkan situs Anda dan kunjungi melalui URL situs pementasan Anda.

Fitur ini masih dalam Beta , tetapi segera setiap pengguna Kinsta akan memiliki akses ke sana.

Menggunakan Git dan Kinsta bisa menjadi kombinasi yang kuat jika Anda tahu menggunakannya dengan baik. Sementara tutorial kami di sini hanya menyajikan contoh sederhana, Anda dapat belajar lebih banyak dari artikel basis pengetahuan Git kami.

Tingkatkan pengetahuan Git Anda dengan panduan ini untuk alur kerja proyek yang khas Klik untuk Tweet

Ringkasan

Saat ini, Git adalah alat yang harus dipelajari untuk pengembangan web, karena sebagian besar waktu Anda akan berkolaborasi dengan orang lain untuk membuat proyek terbaik yang Anda bisa.

Dalam artikel ini, kami telah membahas beberapa alasan penting untuk menggunakan Git dalam proyek Anda, dan kami telah menunjukkan kepada Anda alur kerja dasar untuk berkolaborasi dalam repo Git.

Git adalah alat yang sangat kuat sehingga Anda dapat memperluas penggunaannya bahkan ke hosting WordPress, sehingga hanya dapat bermanfaat bagi Anda untuk mempelajari dan mengimplementasikannya sebagai bagian dari gudang keterampilan pengembangan web Anda.

Apakah Anda memiliki saran lain untuk meningkatkan alur kerja Git dasar ini untuk pengembangan web? Beri tahu kami di bagian komentar!