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

Site: ΕΛ/ΛΑΚ Moodle
Course: WEB II - Προηγμένος σχεδιασμός
Book: Υποενότητα 1.2: Έλεγχος έκδοσης. Git - Github
Printed by: Guest user
Date: Thursday, 18 July 2024, 2:41 AM

Description

  • Συστήματα ελέγχου έκδοσης - Version Control Systems
  • Εντολές Git - Github 
  • Επικοινωνία ενός τοπικού και ενός απομακρυσμένου αποθετηρίου

Τι είναι το Git;

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

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

Watch an explainer video

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

Άσκηση

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

Λύση:

git version: 2.7.4

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. Ποια είναι τα αποτελέσματα της τελευταίας εντολής;

Λύση:

user.name=Your name 
user.email=your email addressΕάν κάτι πάει στραβά ζητήστε βοήθεια!

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

Basic Git Commands

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

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

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

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

Visual studio editor auto completion

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

Visual studio editor HTML5 template

This is the code:

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

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

git init

Git init

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

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

git status

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 add <file> and git status

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


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

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

git commit -m "Your message"

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

git status

git status after commiting

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

git log --oneline

git lof --oneline

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

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


Ανοίξτε τον επεξεργαστή κώδικα, ανοίξτε την καρτέλα 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 για να δούμε πού βρισκόμαστε:

Staged changes in Terminal and Code editor

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

Commit in Code editor

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

git versions of index.html file

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

On Github

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

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

URL of Github Pepo

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

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

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

git remote add origin <repository URL>

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

git push -u origin master

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

User error! Type your credentials of Github

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

Done!

Εξερευνήστε το αποθετήριο σας στο 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

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

 
185/5000
Στον υπολογιστή

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

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

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

Git

Github