VSCode Terminal ile Github Üzerinden Çalışmak

Herkese merhaba,

Git versiyon kontrol sistemini ve burada kullanılan komutları öğrenmeye başladığımız yazı dizimizin üçüncüsüne hoş geldiniz. Bu yazımda sizlerle Github üzerindeki bir repo dosyasını Git komutları kullanarak bilgisayarımıza çekip üzerinde geliştirmeler yapacağız. Düzenlemeler sonrası çalışma dosyasının güncel halini Github üzerine göndererek çalışmamızı tamamlayacağız.

Bir önceki yazımızda Visual Studio Code kullanarak çalışma dosyamızı Github üzerindeki repoya göndermeyi gerçekleştirdik. Eğer bu işlemlerin nasıl yapıldığını hatırlamak isterseniz şuradan yazımıza ulaşabilirsiniz.

Hatırlayalım

Yukarıdaki görselde working directory alanından remote repository alanına kadar yönü bir önceki yazımızda gerçekleştirmiştik. Bunun için de Add, Commit, Push gibi komutlar kullanmıştık. Şimdi Github üzerinde var olan bir çalışmayı bilgisayarımıza çekerek başlayalım.

git clone

Clone komutu ile dosyanın kaynağını çalışma alanınıza indirerek üzerinde devam etmenize olanak sağlayan bir komuttur. Bu komutu git clone <link> olarak kullanabilirsiniz.

git clone https://github.com/ikizoglu/git-formulas

Yeni bir çalışma için Visual Studio Code uygulamasını açıp yeni bir terminal ekranıyla başladık. git clone komutunu kullandık ve dosyalarımız uzak sunucudan bilgisayarımıza geldi. Fakat istediğimiz pencerede ya da konumda dosyaları bulamıyoruz.

Burada clone komutu kullanırken bildiğiniz bir konuma indirme işlemini gerçekleştirin. Dosyalarımı masaüstüne inmesini beklerken bu şekilde C:/Users/Kemal konumunda bir klasöre indirme işlemi gerçekleşti.

Ben çalışma dosyalarının masaüstü ekranıma indirmesini istiyorum.Terminal ekranında cd komutu ile desktop klasörüne geliyorum. Daha sonra git clone komutuyla indirme işlemini gerçekleştiriyorum. İndirme işlemi sonrası VS Code ile klasörümü açıyorum.

git branch <branchname>

Bir önceki Temel Git Yapısı Kullanımı yazımda size hangi branchta çalıştığınızı branch komutuyla öğrendiğinizi paylaşmıştım. Şimdi bu komutu kullanarak yeni bir branch oluşturacağız.

git branch html

Bu komutla html adında yeni bir branch oluşturduk. Artık sistemimizde iki adet branch bulunmaktadır: main ve html. Çektiğim dosya üzerinde düzenlemelerimin bir kısmını html branchı üzerinden gerçekleştireceğiz. Şimdi branch değişikliği yapalım.

git checkout <branchname>

Mevcut branch konumumuz main üzerindeydi. Yeni bir branch oluşturduktan sonra onun üzerinde çalışamaya başlayabilmek için geçiş yapmamız gerekmektedir. Bunun için şu komutu kullanarak geçiş yapalım:

git checkout html

Yeni brancha geçiş yaptık ve bunu git status komutuyla da kontrol ediyoruz. Şu an geçiş tamamlandı. Yapacağımız her bir düzenleme ana branchtan ayrı bir şekilde yeni brancha eklenecek.

Çalışma klasörü içerisindeki dosyalarımı git add ile işleme aldım. index.html dosyası içerisinde düzenlemeler yapıp ilk commitimi başarıyla attım. Bunu da git log komutuyla kontrol ettim.

Şimdi yaptığım bu düzenlemeleri push etme vakti! git branch ile branchımı belirtip html branchı üzerine push etmesini istiyorum. Tabi Github üzerinde html adında bir branch yok. Yeni oluşturup oraya aktarıyor olacak.

Kodun gönderim işlemi tamamlandı. Şimdi Github üzerindeki güncellemelere bir bakalım.

Github çalışma dosyamızın üzerinde bir bildirim görünüyor:

“html had recent pushes 3 seconds ago” > Compare & pull request.

Burada dikkat etmenizi istediğim bir nokta var. Branch kavramını çok güzel özetliyor. Benim main adında ana çalışma dalım (branchım) vardı. Bu ana dal üzerinde dosyalarımı düzenleyip commit atıp uzak sunucu olan Github’a push etmiştim. Dikkat ettiyseniz görseldeki dosyalarımın commit mesajlarında bir değişiklik yok. Oysaki ben commit attım. İşte ana dosya üzerinde değişiklik yapmadan aynı dosyalarla farklı bir dalda çalışma mantığı bu şekilde ilerlemektedir.

Push ettiğimiz yeni branchımız için gelen isteği onaylıyoruz. Dilerseniz taslağa da çekebilirsiniz. Ben isteği onaylıyorum ve sürecimi tamamlıyorum.

Github üzerindeki ana çalışma klasörüme döndüğümde yeni branchımızın eklendiğini görüyoruz. Main branch’tan html brancına geçiş yapıyorum. Hemen “add html branch html codes” açıklaması dikkatinizi çekmiştir. VSCode üzerinde çalıştığımız branchın commitini görüntülüyoruz.

Yeni branch üzerinde eklemeler devam ederken commit ve css dosyalarında düzenlemeleri commit ediyoruz. Güncellenen commitler başarıyla Github’a ulaşıyor. Her şey yolunda!

git merge <branchname>

Çalışmalarımızı tamamladık ve artık branchlarımızı birleştirme vakti geldi. Bunun için önce devam edeceğimiz branchımıza geçiş yapıyoruz. Daha sonrasında ise birleştirme komutunu kullanıyoruz.

git checkout main
git merge html

Html branchı üzerinde yaptığım tüm düzenlemeler main branchım üzerinde güncellendi. Aynı zamanda Github üzerinde de birleştirme gerçekleştirildi.

Github’a ekstra olarak push etmeme gerek kalmadı. Ama siz yine de kontrolü gerçekleştirebilirsiniz.

git branch -d <branchname>

Birleştirdiğimiz branchlar sonrasında ana branch dışındaki branchları temizlemek isterseniz kullanacağımız komut şu şekildedir:

git branch -d test

Test branchı benim daha önceden açtığım bir branchtı. Bu şekilde bu branchı sildim. Peki hangi branchı sildim kaç tane kaldı?

git branch

Bu soruya yanıt bulabilmek için sadece git branch komutunu kullanıyoruz.

git branch

Bu kodu kullanarak mevcuttaki listeyi görüntüleyebilirsiniz. Yeşil renkte yıldız ile işaretli olan branch o anda üzerinde bağlı olduğumuzu temsil ediyor.

git reset

Add komutu ile takibe aldığımız dosyalarımızı commit etme aşamasına geçmeden yapılan düzenlemeleri temizlemek için reset komutu kullanılır.

git reset

Bu şekilde yapılan değişiklikleri commit etmeden önceki safhalar için sıfırlayabilirsiniz. Bu komut ile çalışma dosyasını takibe aldığınız tüm dosyalar için aynı anda komutu uygular.

git reset <filename>

Bu komutu kullanarak takibe aldığınız dosyalar içerisinde sadece ismini belirttiğiniz dosyaya sıfırlama komutu uygulanır.

git reset style.css

Bu şekilde sadece style.css dosyası için reset komutunu uygulamış olduk.

Neler Yaptık?

Bu aşamaya kadar temel, orta ve ileri seviye git komutlarını kullanarak çalışmamızı tamamladık. Tabi, git komutlarının hepsi bu kadar değil!

Atlassian’da paylaşılan Git Komutları şemasını buradan inceleyebilirsiniz. Öğrenmeyi ve kullanmayı arttırmak adına farklı kişilerin de hazırladığı git komut şemaları bulunmaktadır. git command sheets aramasıyla yeni şemalar keşfedebilirsiniz.

Git ve Github ile yazılım dünyasındaki ilerlemeyi uygulayarak görebilmek ve anlaşılırlığını kolay hale getirmek için hazırladığım VSCode Terminal ile Github Üzerinden Çalışmak yazımın ikinci kısmını burada tamamlıyoruz. Bu noktaya kadar neler deneyimlediğimize baktığımızda şunları söyleyebiliriz:

• Github üzerindeki bir repoyu clone komutuyla bilgisayara indirmeyi,
• Çalışmamızdaki mevcut branchları listelemeyi,
• Yeni branch oluşturmayı,
• Branchlar arası geçiş yapabilmeyi,
• Branchlar arası ayrı çalışmalar yapabilmeyi,
• Farklı branchlardan commit yapabilmeyi,
• Branchları Github hesabımıza push edebilmeyi,
• Branchları birleştirebilmeyi,
• Branch silmeyi,
• Farklı pozisyonlar için resetleme komunutu kullanmayı öğrendik.

Bu yazıyı ilk defa görüyor ve nereden başlayabilirim diyorsanız git kurulumu ile başladığımız yazıma şuradan, VSCode ile temel git yapısını kullandığımız yazıma şuradan ulaşabilirsiniz.

Sorularınız olduğunda yorum kısmına yazarak çözüme kavuşturabiliriz. Bir sonraki yazımda görüşmek dileğiyle..

Kolay gelsin.

Kaynaklar:

• https://www.marcelofossrj.com/reference%20card/2017/07/26/git-reference.html
• https://atlassian.com/git/tutorials/atlassian-git-cheatsheet