Web-basierte Anwendungen 1

16. Oktober 2015

Studiengang Medieninformatik an der Fachhochschule Köln
Campus Gummersbach

Prof. Christian Noss, M.Sc. Jan Kus, Volker Schäfer

Git Basics auffrischen
Komplexere Git Workflows verstehen
Branches, Merging, Konflikte verstehen und lösen
Hands On

Aufbau dieser Session

Recap von letzter Woche

Wie sieht die Wirklichkeit aus?

Struktur von Git

Branches: git branch / git checkout / git merge

Merging von Branches: git merge

Konflikte

Pull requests

Repository inspecten: git status / git log

Recap von letzter Woche

Git Setup durchführen git config
Github Setup durchführen & Github Account erstellen
Repository auf Github erstellen
Repository lokal erstellen: git init
Repositories miteinander verbinden: git config / git clone
Gitworkflow: git status / git add / git commit
Gitworkflow: git push / git pull

>Wer hat dazu noch Fragen?

Wie sieht die Wirklichkeit aus?

Git Flow

Wie sieht die Wirklichkeit aus?

Git Flow

Wie sieht die Wirklichkeit aus?

Man sollte nicht im master-Branch arbeiten
Der master-Branch sollte idealerweise immer "clean" sein und deployfähig bleiben
Features entwickelt man im Feature-Branch z.B.: feature_x
Das zu entwicklende System testet man auf einem staging- bzw. release-Server und dadurch wird es im staging--Branch entwickelt
Im release-Branch werden ggf. kleinere Bugfixes durchgeführt
Im master-Branch werden ggf. Hotfixes durchgeführt

Struktur von Git

Working Directory - mit git add fügt man Änderungen in den
Index - mit git commit versioniert man in den
Head - mit git push läd man Änderungen in ein remote Repository

Workflow

Quelle: http://rogerdudler.github.io/git-guide/, Stand: 14.10.2015

Lokal vs. Remote

Lokaler Head - mit git push läd man Änderungen in den
Remote Head - mit git pull läd man Änderungen in den
Lokalen Head

Workflow

Quelle: http://rogerdudler.github.io/git-guide/, Stand: 14.10.2015

Was sind Branches?

Branches are used to develop features isolated from each other. The master branch is the "default" branch when you create a repository. Use other branches for development and merge them back to the master branch upon completion.

Branches

Quelle: http://rogerdudler.github.io/git-guide/, Stand: 14.10.2015

Arbeiten mit Branches?

Branch erstellen: git checkout -b feature_x
Branch wechseln: git checkout
In den Master Branch wechseln: git checkout master
Einen Branch löschen: git branch -d feature_x

So lange man einen Branch nicht zum remote Repository pusht ist dieser nur lokal verfügbar und kein anderer hat darauf Zugriff

git push origin feature_x

Zwei Branches zusammenführen

git pull feature_x
git checkout master
git merge feature_x

Git versucht alle Änderungen automatisch zusammen zu führen. Wenn dies nicht möglich ist entsteht ein so genannter Konflikt.

Dieser muss manuell gelöst werden (im Editor) und anschließend wird der Index (git add) aktualisiert und dem lokalen Head hinzugefügt (git commit).

Bevor man den Branch merged können mit git diff [source_branch] [target_branch] die zu mergenden Unterschiede eingesehen werden

Das Zusammenführen von Branches soll in der Regel nur im Feature-Branch passieren

Konflikte

This is the most common type of conflict. It happens when two branches have changed the same part of the same file, and then those branches are merged together.

            
              git status
              # # On branch branch-b
              # # You have unmerged paths.
              # #   (fix conflicts and run "git commit")
              # #
              # # Unmerged paths:
              # #   (use "git add ..." to mark resolution)
              # #
              # # both modified:      planets.md
              # #
              # no changes added to commit (use "git add" and/or "git commit -a")

Konflikte

This is the most common type of conflict. It happens when two branches have changed the same part of the same file, and then those branches are merged together.

            
              1 # planets.md

              2 the number of planets are
              <<<<<<< HEAD
              3 nine
              =======
              3 eight
              >>>>>>> branch-a

Im master-Branch hat jemand die Zeile 3 mit dem Wort "nine" editiert und im branch-a mit dem Wort "eight". Es entsteht ein Konflikt der mit den Markern '<<<<<<<', '=======', '>>>>>>>' ausgezeichnet ist.

Tagen von Software-Releases

Releases are based on Git tags. Tags mark a specific point in the history of your project. Releases are GitHub's way of packaging and providing software to your users. You can think of it as a replacement to using downloads to provide software.

In manchen Fällen möchte man bestimmte Releases als solche Taggen bzw. Kennzeichnen
Man benutzt das Konzept des Semantic Versioning
z.B.: 2.4.1.beta2
z.B.: [Major].[Minor].[Patch].[Additional]
git tag 1.0.0 1b2e1d63ff

Pull requests

Pull requests let you tell others about changes you've pushed to a GitHub repository. Once a pull request is sent, interested parties can review the set of changes, discuss potential modifications, and even push follow-up commits if necessary.

Einen pull request macht man aus einem Branch heraus mit dem Ziel, dass dieser vom Team gereviewed wird und in den master Branch gemerged wird
Es ist ein wichtiger Bestandteil im Entwicklungsteam um Softwarequalität hoch zu halten
Pull-Requests ermöglichen Feedback vom Team über den eigenen Softwarecode zu erhalten und somit selber zu lernen und sich stätig zu verbessern
Pull-Requests geben die Möglichkeit an anderen Open Source Projekten mit zu entwickeln und somit ein gutes Standing in der Community zu erhalten
Arbeitgeber schauen sich github-Accounts an

Repository inspecten: `git status`

git-status - zeigt den Status des Working-Trees (Git-Orders) an

Zeigt die Differenz zwischen dem Index und dem HEAD an
Zeigt die Differenz zwischen dem Working Tree und dem Index an
Zeigt die Dateien die nicht im Working Tree enthalten sind und auch nicht ignoriert wurden

Repository inspecten: `git log`

git-log - ist die einfachste Form die History anzuzeigen

git log
git log --author=bob: Ausgabe des Logs nur mit Einträgen vom User "bob"
git log --pretty=oneline: Einzeilige Ausgabe des Logs
git log --graph --oneline --decorate --all: Ausgabe aller Branches in einer Baumstruktur
git log --name-status: Ausgabe des Logs mit Dateinamen die sich in der jeweiligen Version geändert haben
git log --help: Hilfe wie man git log noch aufrufen kann

Git Log Beispiel

Pause

Web-basierte Anwendungen 1

Git-Advanced Hands on

16. Oktober 2015

Studiengang Medieninformatik an der Fachhochschule Köln
Campus Gummersbach

Prof. Christian Noss, M.Sc. Jan Kus, Volker Schäfer

Aufbau dieser Session

Recap

Branches: git branch / git checkout

Merging von Branches: git merge

Konflikte

Pull requests

Repository inspecten: git status / git log

Recap - neues Git Repository anlegen

Bitte Ordner anlegen, Git-Repository initieieren und Datei erstellen, dem Index hinzufügen und ins Repository commiten

            
              ➜  code  mkdir test-git-project
              ➜  code  cd test-git-project
              ➜  test-git-project  git init
              Initialized empty Git repository in /Volumes/code/test-git-project/.git/
              ➜  test-git-project git:(master) echo "hello world" >> lorem.ipsum
              ➜  test-git-project git:(master) ✗ git add lorem.ipsum
              ➜  test-git-project git:(master) ✗ git commit -a -m 'Added Lorem Ipsum'
              [master (root-commit) dfc6c4d] Added Lorem Ipsum
               1 file changed, 1 insertion(+)
               create mode 100644 lorem.ipsum
              ➜  test-git-project git:(master)

Einen Branch anlegen: `git branch`

Bitte einen Branch erstellen mit git branch feature_x und in diesen Branch mit git checkout feature_x wechseln.

            
            ➜  test-git-project git:(master) git branch feature_x
            ➜  test-git-project git:(master) git checkout feature_x
            Switched to branch 'feature_x'

Einen Branch anlegen - Alternative: `git checkout`

Mit git checkout -b feature_x wird ein Branch erstellt und direkt ausgecheckt

            
            ➜  test-git-project git:(testbranch) git checkout -b feature_x
            Switched to a new branch 'feature_x'

Einen Branch löschen

Mit git branch -d feature_x wird ein Branch gelöscht

            
              ➜  test-git-project git:(testb) git checkout master
              Switched to branch 'master'
              ➜  test-git-project git:(master) git branch -d feature_x
              Deleted branch feature_x (was dfc6c4d).
              ➜  test-git-project git:(master)

Einen Branch in ein Remote Repository pushen

Mit git push origin feature_x wird ein Branch in ein remote Repository gepushed

            
              ➜  testproject git:(master) git checkout -b feature_x
              Switched to a new branch 'feature_x'
              ➜  testproject git:(feature_x) git push origin feature_x
              Total 0 (delta 0), reused 0 (delta 0)
              To git@github.com:koos/testproject.git
               * [new branch]      feature_x -> feature_x
              ➜  testproject git:(feature_x)

Einen Branch mergen: `git merge`

Mit git merge feature_x wird ein Branch in einen anderen Zusammengeführt

            
              ➜  testproject git:(master) git checkout -b feature_x            
              ➜  testproject git:(feature_x) echo "ein file" >> test.ipsum
              ➜  testproject git:(feature_x) ✗ git add .
              ➜  testproject git:(feature_x) ✗ git commit -a -m 'added test.ipsum'
              [feature_x ab9402e] added test.ipsum
               1 file changed, 1 insertion(+)
               create mode 100644 test.ipsum
              ➜  testproject git:(feature_x) git checkout master
              Switched to branch 'master'
              Your branch is up-to-date with 'origin/master'.
              ➜  testproject git:(master) git merge feature_x
              Updating c6f9fe4..ab9402e
              Fast-forward
               test.ipsum | 1 +
               1 file changed, 1 insertion(+)
               create mode 100644 test.ipsum
              ➜  testproject git:(master)

Einen Konflikt erstellen und lösen

            
              ➜  testproject git:(master) git checkout -b feature_x
              Switched to a new branch 'feature_x'
              ➜  testproject git:(feature_x) echo "erste zeile" >> test.txt
              ➜  testproject git:(feature_x) ✗ cat test.txt
              erste zeile%                                                                                         ➜  testproject git:(feature_x) ✗ git add .
              ➜  testproject git:(feature_x) ✗ git commit -a -m 'added erste zeile'
              [feature_x 2a16d85] added erste zeile
               1 file changed, 1 insertion(+)
               create mode 100644 test.txt
              ➜  testproject git:(feature_x) git checkout master
              Switched to branch 'master'
              Your branch is ahead of 'origin/master' by 1 commit.
                (use "git push" to publish your local commits)
              ➜  testproject git:(master) git merge feature_x
              Updating ab9402e..2a16d85
              Fast-forward
               test.txt | 1 +
               1 file changed, 1 insertion(+)
               create mode 100644 test.txt
              ➜  testproject git:(master) git checkout -b feature_y
              Switched to a new branch 'feature_y'
              ➜  testproject git:(feature_y) subl .
              ➜  testproject git:(feature_y) git add .
              ➜  testproject git:(feature_y) ✗ git commit -a -m 'added something else to erste zeile'
              [feature_y 65b5aa3] added something else to erste zeile
               1 file changed, 1 insertion(+), 1 deletion(-)
              ➜  testproject git:(feature_y) git checkout feature_x
              Switched to branch 'feature_x'
              ➜  testproject git:(feature_x) subl .
              ➜  testproject git:(feature_x) git status
              On branch feature_x
              Changes not staged for commit:
                (use "git add ..." to update what will be committed)
                (use "git checkout -- ..." to discard changes in working directory)

                modified:   test.txt

              no changes added to commit (use "git add" and/or "git commit -a")
              ➜  testproject git:(feature_x) ✗ git add .
              ➜  testproject git:(feature_x) ✗ git commit -a -m 'adedd something else to erste zeile'
              [feature_x b68fd60] adedd something else to erste zeile
               1 file changed, 1 insertion(+), 1 deletion(-)
              ➜  testproject git:(feature_x) git checkout master
              Switched to branch 'master'
              Your branch is ahead of 'origin/master' by 2 commits.
                (use "git push" to publish your local commits)
              ➜  testproject git:(master) git merge feature_x
              Updating 2a16d85..b68fd60
              Fast-forward
               test.txt | 2 +-
               1 file changed, 1 insertion(+), 1 deletion(-)
              ➜  testproject git:(master) git merge feature_y
              Auto-merging test.txt
              CONFLICT (content): Merge conflict in test.txt
              Automatic merge failed; fix conflicts and then commit the result.
              ➜  testproject git:(master) ✗ git status
              On branch master
              Your branch is ahead of 'origin/master' by 3 commits.
                (use "git push" to publish your local commits)
              You have unmerged paths.
                (fix conflicts and run "git commit")

              Unmerged paths:
                (use "git add ..." to mark resolution)

                both modified:   test.txt

              no changes added to commit (use "git add" and/or "git commit -a")
              ➜  testproject git:(master) ✗ git diff feature_x feature_y

Einen Konflikt erstellen und lösen

            
              ➜  testproject git:(master) ✗ git status
              On branch master
              Your branch is ahead of 'origin/master' by 3 commits.
                (use "git push" to publish your local commits)
              You have unmerged paths.
                (fix conflicts and run "git commit")

              Unmerged paths:
                (use "git add ..." to mark resolution)

                both modified:   test.txt

              no changes added to commit (use "git add" and/or "git commit -a")
              ➜  testproject git:(master) ✗ cat test.txt
              <<<<<<< HEAD
              erste zeile hello world wide web
              =======
              erste zeile hello world
              >>>>>>> feature_y
              ➜  testproject git:(master) ✗ git add .
              ➜  testproject git:(master) ✗ git commit -a -m 'resolved conflict'
              [master 2dc5735] resolved conflict
              ➜  testproject git:(master)

git diff [branch_1] [branch_2]

            
              ➜  testproject git:(master) ✗ git diff feature_x feature_y
              diff --git a/test.txt b/test.txt
              index 56b8a01..484e5ce 100644
              --- a/test.txt
              +++ b/test.txt
              @@ -1 +1 @@
              -erste zeile hello world wide web
              \ No newline at end of file
              +erste zeile hello world
              \ No newline at end of file
              (END)

git tag

Mit git tag [version] [hash] wird ein Release als solcher getagged

            
              ➜  testproject git:(master) git tag 1.1.2-rc2.1.1 2dc57356428f6576d037d706c10ceb5202a921f7
              ➜  testproject git:(master) git tag
              1.1.2-rc2.1.1
              ➜  testproject git:(master)

git status

Mit git status zeigt den status der Working Tree an

            
              git status
              # # On branch branch-b
              # # You have unmerged paths.
              # #   (fix conflicts and run "git commit")
              # #
              # # Unmerged paths:
              # #   (use "git add ..." to mark resolution)
              # #
              # # both modified:      planets.md
              # #
              # no changes added to commit (use "git add" and/or "git commit -a")

git log

Mit git log kann man auf einfache Weise die History aufrufen

            
              ➜  wba1-2015 git:(gh-pages) ✗ git log --oneline
              b45b548 Neuigkeiteneinträge im mi-onepager in articles überführt
              7461ee5 Merge branch 'gh-pages' of https://github.com/th-koeln/wba1-2015 into gh-pages
              c6d7644 Kommentar im JS-Code zum mi-onepager ergänzt
              374b3a2 MK behoben
              d513612 CSS weiter entwickelt.

git log

Mit git log kann man auf einfache Weise die History aufrufen

git log --author=bob: Ausgabe des Logs nur mit Einträgen vom User "bob"
git log --pretty=oneline: Einzeilige Ausgabe des Logs
git log --graph --oneline --decorate --all: Ausgabe aller Branches in einer Baumstruktur
git log --name-status: Ausgabe des Logs mit Dateinamen die sich in der jeweiligen Version geändert haben
git log --help: Hilfe wie man git log noch aufrufen kann

git log

Mit git log kann man auf einfache Weise die History aufrufen

            
              ➜  wba1-2015 git:(gh-pages) ✗ git log --graph --oneline --decorate --all
              * 42974af (HEAD -> gh-pages, origin/gh-pages, origin/HEAD) Git Advanced Finished
              *   a2c8b1f Merge branch 'gh-pages' of github.com:th-koeln/wba1-2015 into gh-pages
              |\
              | * 4bc40d3 Replaced old logo with new one in presentations
              | * e000ba4 Added new box as image
              | * 8672d10 Moved Helpers from .css to .scss
              | * c50f1a8 Aded fancy template, still WIP
              | *   55240dd Merge branch 'gh-pages' of github.com:fh-koeln/wba1-2015 into gh-pages
              | |\
              | | * 8c879ba Fragment identifier und mailto-Link im mi-onepager korrigiert
              | * | 824bb94 SVG Grafik hinzugefügt
              | * | c48a27c Folie Übersicht HTML CSS JS hinzugefügt
              | * | c8119f3 Link repariert
              | |/
              | * 2803984 Korrekturen an Slides für HTML Basics
              | *   2ad1774 Merge branch 'gh-pages' of github.com:fh-koeln/wba1-2015 into gh-pages
              | |\
              | | *   190301a Merge branch 'gh-pages' of https://github.com/th-koeln/wba1-2015 into gh-pages
              | | |\
              | | * | 47f359b Formular-Validierung im mi-onepager nun per JS
              | | * | 80d85a3 Formular-Buttons als solche gekennzeichnet (hover)
              | * | | 9b19e2c Folien für HTML-Workshop ergänzt.
              | | |/
              | |/|
              | * | 7795026 Workshop HTML-Basics hinzugefügt

Web-basierte Anwendungen 1

Git-Advanced

Ziele dieses Abschnitts

Aufbau dieser Session

Recap von letzter Woche

>Wer hat dazu noch Fragen?

Wie sieht die Wirklichkeit aus?

Wie sieht die Wirklichkeit aus?

Wie sieht die Wirklichkeit aus?

Struktur von Git

Lokal vs. Remote

Was sind Branches?

Arbeiten mit Branches?

Zwei Branches zusammenführen

Konflikte

Konflikte

Tagen von Software-Releases

Pull requests

Repository inspecten: `git status`

Repository inspecten: `git log`

Web-basierte Anwendungen 1

Git-Advanced Hands on

Aufbau dieser Session

Recap - neues Git Repository anlegen

Einen Branch anlegen: `git branch`

Einen Branch anlegen - Alternative: `git checkout`

Einen Branch löschen

Einen Branch in ein Remote Repository pushen

Einen Branch mergen: `git merge`

Einen Konflikt erstellen und lösen

Einen Konflikt erstellen und lösen

git diff [branch_1] [branch_2]

git tag

git status

git log

git log

git log

Literatur

Web-basierte Anwendungen 1

Git-Advanced

Ziele dieses Abschnitts

Aufbau dieser Session

Recap von letzter Woche

>Wer hat dazu noch Fragen?

Wie sieht die Wirklichkeit aus?

Wie sieht die Wirklichkeit aus?

Wie sieht die Wirklichkeit aus?

Struktur von Git

Lokal vs. Remote

Was sind Branches?

Arbeiten mit Branches?

Zwei Branches zusammenführen

Konflikte

Konflikte

Tagen von Software-Releases

Pull requests

Repository inspecten: git status

Repository inspecten: git log

Web-basierte Anwendungen 1

Git-Advanced Hands on

Aufbau dieser Session

Recap - neues Git Repository anlegen

Einen Branch anlegen: git branch

Einen Branch anlegen - Alternative: git checkout

Einen Branch löschen

Einen Branch in ein Remote Repository pushen

Einen Branch mergen: git merge

Einen Konflikt erstellen und lösen

Einen Konflikt erstellen und lösen

git diff [branch_1] [branch_2]

git tag

git status

git log

git log

git log

Literatur

Repository inspecten: `git status`

Repository inspecten: `git log`

Einen Branch anlegen: `git branch`

Einen Branch anlegen - Alternative: `git checkout`

Einen Branch mergen: `git merge`