Υποενότητα 1.2: Έλεγχος έκδοσης. Git - Github

Τι είναι το Git;

Το Git είναι ένα Σύστημα Ελέγχου Έκδοσης - Version Control System για την παρακολούθηση των αλλαγών στα αρχεία ηλεκτρονικών υπολογιστών και το συντονισμό των εργασιών σε αυτά τα αρχεία μεταξύ πολλών ανθρώπων.

Το Git δημιουργήθηκε από τον Linus Torvalds το 2005 για την ανάπτυξη του πυρήνα-kernel του Linux, με άλλους προγραμματιστές του πυρήνα να συμβάλλουν στην αρχική του ανάπτυξη

Watch an explainer video

Το Git είναι ήδη εγκατεστημένο στον υπολογιστή σας. Για να το επιβεβαιώσετε, ανοίξτε το Terminal και γράψτε git --version. Η έκδοση του Git θα εμφανιστεί στην οθόνη σας ως αποτέλεσμα αυτής της εντολής.

Άσκηση

1. Ποια έκδοση του Git έχει ο υπολογιστής σας;

Λύση:

Global Ρυθμίσεις για Git

Για να ρυθμίσετε το όνομα χρήστη - username που θέλετε να χρησιμοποιήσετε από το Git, πληκτρολογήστε τα ακόλουθα στη γραμμή του τερματικού σας:

git config --global --add user.name "Your Name"

Για να ρυθμίσετε τις παραμέτρους του ηλεκτρονικού σας ταχυδρομείου - email για χρήση από το Git, πληκτρολογήστε τα ακόλουθα στη γραμμή εντολών:

git config --global --add user.email <your email address>

Μπορείτε να ελέγξετε την προεπιλεγμένη default Git global configuration, μπορείτε να πληκτρολογήσετε τα ακόλουθα στη γραμμή εντολών:

git config --list

Δείτε περισσότερα σχετικά με την global configuration 

Συμβουλή: Χρησιμοποιήστε το βέλος-επάνω για να δείτε την προηγούμενη εντολή και να την τροποποιήσετε.

Άσκηση

1. Ποια είναι τα αποτελέσματα της τελευταίας εντολής;

Λύση:

Εάν κάτι πάει στραβά ζητήστε βοήθεια!

Basic Git Commands

Προαπαιτούμενα για αυτή τη σελίδα: Simple HTML file 

Στον φάκελο yourNameWEB2, δημιουργήστε έναν νέο υποφάκελο  yourNameWEB2GitTest.

Ανοίξτε αυτόν τον υποφάκελο yourNameWEB2GitTest  στον επεξεργαστή Visual Studio.

Προσθέστε ένα αρχείο με όνομα index.html σε αυτόν το φάκελο και επεξεργαστείτε το αρχείο για να εμφανιστεί ένας τίτλος "Choco home" και ένας τίτλος h1: "Site about chocolate". Για να το κάνετε αυτό απλά αρχίστε να πληκτρολογείτε ht και επιλέξτε html: 5

Τροποποιήστε το αρχείο

This is the code:

Κάντε δεξί κλικ σε αυτόν τον υποφάκελο και επιλέξτε Open in Terminal. 

αρχικοποιήστε το φάκελο ως αποθήκη - initialize the folder as a Git repository: 

git init

Όπως μας είπε ο Git, ο κατάλογος "yourNameWEB2GitTest" έχει τώρα ένα κενό αποθετήριο - repository στο /.git/. Το αποθετήριο είναι ένας κρυμμένος κατάλογος όπου λειτουργεί το Git.

Πληκτρολογήστε τα ακόλουθα στη γραμμή εντολών για να ελέγξετε την κατάσταση - statusτου αποθετηρίου Git: 

git status

Φαίνεται ότι το αποθετήριο Git λειτουργεί σωστά. Παρατηρήστε πώς ο Git λέει ότι το index.html είναι "unracked". Αυτό σημαίνει ότι ο Git θεωρεί ότι το index.html είναι ένα νέο αρχείο.

Για να προσθέσετε αρχεία στην περιοχή staging  του αποθετηρίου Git, πληκτρολογήστε:

git add index.html

Καλή δουλειά! Το Git παρακολουθεί - tracking τώρα το αρχείο index.html.
Ας τρέξουμε git status για να δούμε πού βρισκόμαστε:

git status

Παρατηρήστε πώς ο Git λέει ότι οι αλλαγές θα πρέπει να πραγματοποιηθούν -committed. Τα αρχεία που παρατίθενται εδώ βρίσκονται στην Περιοχή Staging και δεν βρίσκονται ακόμα στην αποθήκη - repository. Θα μπορούσαμε να προσθέσουμε ή να αφαιρέσουμε αρχεία από το stage πριν τα αποθηκεύσουμε στο αποθετήριο.

Για να αποθηκεύσουμε τις σταδιακές αλλαγές μας, τρέχουμε την εντολή commit με ένα μήνυμα που περιγράφει τι έχουμε αλλάξει. Ας το κάνουμε τώρα πληκτρολογώντας:

git commit -m "first commit for index.html"

Εξαιρετικά! Μπορείτε επίσης να χρησιμοποιήσετε wildcards αν θέλετε να προσθέσετε πολλά αρχεία του ίδιου τύπου.
Ας τρέξουμε άλλο:

git status

Όπως μπορούμε να δούμε ότι ο κατάλογος εργασίας είναι καθαρός, όλα τα αρχεία είναι committed.
Για να ελέγξετε το αρχείο καταγραφής των commits στο αποθετήριο Git, πληκτρολογήστε

git log --oneline

Περισσότερες εντολές Git

Προαπαιτούμενα για αυτή τη σελίδα:

• External style sheet
• Class selector 
• Box model 
• The div element 

Ανοίξτε τον επεξεργαστή κώδικα, ανοίξτε την καρτέλα Extensions (στα αριστερά της οθόνης), κάντε αναζήτηση-βρείτε-εγκαταστήστε την επέκταση "Git history". Κλείστε και ανοίξτε ξανά τον επεξεργαστή.

Πρέπει να:

• Προσθέστε έναν υποφάκελο με όνομα css στον φάκελο yourNameWEB2GitTest 
• Προσθέστε ένα αρχείο με όνομα mystyles.css στον φάκελο css 
• Συνδέστε το αρχείο index.html με το αρχείο mystyles.css 
• Ενημερώστε το αρχείο css με την κλάση jumpotron και τον κατάλληλο κώδικα
• Συμπεριλάβετε το στοιχείο h1 του αρχείου html σε ένα στοιχείο div με την κλάση jumpotron

Κάντε κλικ στο κουμπί για να δείτε τον κατάλληλο κώδικα

This is the code:

Το παρακάτω βίντεο θα σας βοηθήσει:

Ας δούμε την git status στο terminal και στον επεξεργαστή κώδικα και κάνουμε Stage τις αλλαγές στον επεξεργαστή κώδικα:

Για να προσθέσετε το mystyles.css στην staging area του αποθετηρίου Git, πληκτρολογήστε:

git add css/mystyles.css

Ας τρέξουμε ξανά την κατάσταση git για να δούμε πού βρισκόμαστε:

Τώρα θα κάνουμε commit στον επεξεργαστή κώδικα:

Κάντε δεξί κλικ στο αρχείο index.html, επιλέξτε "View file history". Έτσι, μπορείτε να συγκρίνετε την τελευταία έκδοση του αρχείου με την προηγούμενη έκδοση.

Online αποθετήρια Git

On Github

Δημιουργήστε λογαριασμό στο GitHub. Μην χάσετε τα στοιχεία σας!

Στη συνέχεια, δημιουργήστε ένα online αποθετήριο Git που ονομάζεταιyourNameWEB2GitTest. Σημειώστε τη διεύθυνση URL του αποθετηρίου σας Git στο διαδίκτυο.

Στον υπολογιστή, push στο Github

Ανοίξτε το Terminal και μεταβείτε στο φάκελο git.

Στη γραμμή εντολών, πληκτρολογήστε τα παρακάτω για να ρυθμίσετε τον τοπικό αποθετήριο για να συνδεθείτε με το online αποθετήριο Git:

git remote add origin <repository URL>

Στη γραμμή εντολών, πληκτρολογήστε τα παρακάτω για να push the commits στο online αποθετήριο:

git push -u origin master

Είναι πιθανό να υπάρξει σφάλμα. Το Github δεν ξέρει ποιος προσπαθεί να ανεβάσει περιεχόμενο.

Ενημερώστε με τα στοιχεία σας στο Github για να ολοκληρώσετε τη μεταφόρτωση.

Εξερευνήστε το αποθετήριο σας στο Github, τις commits, τις insights κ.λπ. Μπορείτε να δείτε ένα πλούσιο περιβάλλον με πολλές γραφικές αναπαραστάσεις!

Σε υπολογιστή, νέες αλλαγές

Στο div του jumbotron του αρχείου index.html προσθέστε τον ακόλουθο κώδικα μετά την ετικέτα <h1>:

<h3>We will see some of the world's chocolates!</h3>

Ελέγξτε την git status και ας κάνουμε commit χρησιμοποιώντας την εντολή

git commit -a -m "third commit"

Το όρισμα -a σημαίνει "όλες οι αλλαγές" και τη φάση staging  (git add και git commit). Ελέγξτε τις αλλαγές στο ιστορικό του αρχείου index.html.

Ας ενημερώσουμε το απομακρυσμένο Github για τις αλλαγές χρησιμοποιώντας την εντολή

git push <remote-name> <branch-name>. These are possibly origin and master, so a possible commant is git push origin master

Για να βρείτε τα ονόματα γράψτε git remote and git branch

On Github, new changes

Ενημερώστε το index.html στο Github με το

<p>It arrived to Europe in 16<sup>th</sup> century</p>

και προσθέστε το μήνυμα commit  Fourh commit. Adding paragraph in index.html on Github

Στον υπολογιστή, από το Github

Ας ενημερώσουμε το τοπικό αποθετήριο:

Μπορούμε να κατεβάσουμε όλες τις νέες πληροφορίες χρησιμοποιώντας

git fetch <remote-name> possibly git fetch origin

στο τερματικό.

Η ανάκτηση από ένα χώρο αποθήκευσης κατεβάζει remote-tracking branches και tags χωρίς να συγχωνεύει αυτές τις αλλαγές στα δικά σας branches.

Πρέπει να χρησιμοποιήσουμε

git pull

για να ενημερώσουμε τα τοπικό σας αρχεία!

Περαιτέρω μελέτη

Τα Git και Github έχουν πολλές λειτουργίες και δυνατότητες. Θα μάθουμε περισσότερα στις επόμενες ενότητες.

Για να μάθετε περισσότερα ακολουθήστε τους συνδέσμους:

Git

• • GitHub-git-cheat-sheet
  • A  simple guide
  • A Visual Git Reference
  • A virtual tutorial
  • Git book

Github

• • Github guides
  • Github Youtube channel