Download - Web Design Workshop
![Page 1: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/1.jpg)
1
Web Design Workshop
DIG 4104c – Lecture 5c
Git:
Branch and MergeJ. Michael Moshell
University of Central Floridagiantteddy.com.
![Page 2: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/2.jpg)
-2 - -2 -
Steps toward grokking it
1. ONE worker. Branch and merge in local repo. Alice
2. ONE worker. Creating a remote repo; clone and push
3. TWO workers. Bob clones Alice's remote repo
4. TWO workers. Bob creates a branch and modifies it
5. TWO workers. Bob synchronizes his work with Alice
![Page 3: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/3.jpg)
-3 - -3 -
What you should understand when we're done:
meaning of master, origin, HEAD, branch
meaning of 'check out'
how to read and understand Branch Diagrams
Concepts about how SmartGIT represents branches
The issue of Merging (but not (yet) how to resolve conflicts)
![Page 4: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/4.jpg)
-4 - -4 -
What I hope you will understand,but we're not there yet:
Hands-on ability to fluently use SmartGit and bitbucket
to manage team projects where merging is concerned.
We will continue to gain experience with it,
as the semester proceeds.
![Page 5: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/5.jpg)
-5 - -5 -
STEP 1: Branch Diagrams
Helpful tutorial is at http://www.sbf5.com/~cduan/technical/git/git-4.shtml
Alice creates & commits the initial site (version A). Then makes some mods and commits (version B).
A
|
master
![Page 6: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/6.jpg)
-6 - -6 -
Branch Diagrams
Helpful tutorial is at http://www.sbf5.com/~cduan/technical/git/git-4.shtml
Alice creates & commits the initial site (version A). Then makes some mods and commits (version B).
A
|
master
A -- B
|
master
![Page 7: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/7.jpg)
-7 - -7 -
Master == deployed,testing == development
Now Alice wants to add pandas to her site. She creates
a new branch for testing.
git branch testing
A -- B
|
master testing
![Page 8: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/8.jpg)
-8 - -8 -
Master == deployed,testing == development
Now Alice wants to add pandas to her site. She creates
a new branch for testing.
git branch testing
A -- B
|
master testing
![Page 9: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/9.jpg)
-9 - -9 -
Master == deployed,testing == development
Now Alice wants to add pandas to her site. She creates
a new branch for testing.
git branch testing
A -- B
|
master testing
git checkout testing
![Page 10: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/10.jpg)
-10 - -10 -
checkout: copy repo intoworking tree
The green triangle denotes the HEAD, which is the
version of the repo that has been copied into
the working tree (directory).
A -- B
|
master testing
git checkout testing
![Page 11: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/11.jpg)
-11 - -11 -
Working on the testing branch
We now add pandas to the testing branch, creating
version C.
A -- B -- C
|
master testing
The green item in the branch
diagram is referred to as HEAD.
It's what is currently in the
working tree (directory)
In SmartGit, marked by
![Page 12: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/12.jpg)
-12 - -12 -
Working on the testing branchWe add an image named panda.png, and also another source file, pandashop.html.
![Page 13: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/13.jpg)
-13 - -13 -
Working on the testing branchWe select the pandashop.html and panda.png
and commit them, forming version D.
![Page 14: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/14.jpg)
-14 - -14 -
Working on the testing branchWe select the pandashop.html and panda.png
and commit them. Also commit the
change to teddyshop.html, forming version D.
A -- B -- C -- D
| |
master testing
D
CBA
![Page 15: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/15.jpg)
-15 - -15 -
Adding a Tag (like a "comment")Open the log for teddy.html, highlight the
master branch (later, it's gonna move) and
add a tag (by using this button.)
A -- B -- C -- D
| |
master testing
![Page 16: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/16.jpg)
-16 - -16 -
Now let's merge the testingbranch into the master branch.
First: go to Files view (so you can see
the Branches menu) then open
Branch Manager. Select master.
Click the merge icon.
A -- B -- C -- D
| |
master testing
![Page 17: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/17.jpg)
-17 - -17 -
Merge what?
Look at your choices, via this button.
A -- B -- C -- D
| |
master testing
![Page 18: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/18.jpg)
-18 - -18 -
Merge 'fast-forwarded' the masterbranch.
A -- B -- C -- D
|
master testing
Now you would use FTP to copyyour working tree to your host.
![Page 19: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/19.jpg)
-19 - -19 -
STEP 2: Push to Bitbucket
![Page 20: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/20.jpg)
-20 - -20 -
STEP 2: Push to Bitbucket
![Page 21: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/21.jpg)
-21 - -21 -
STEP 2: Push to Bitbucket
OK, so how do I do that from SmartGIT?
Select the Files window (not a Log), then...
![Page 22: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/22.jpg)
-22 - -22 -
STEP 2: Push to Bitbucket
![Page 23: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/23.jpg)
-23 - -23 -
STEP 2: Push to Bitbucket
![Page 24: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/24.jpg)
-24 - -24 -
STEP 2: Push to Bitbucket
You created your security key andpassphrase in labsheet 4
![Page 25: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/25.jpg)
-25 - -25 -
STEP 2: Push to Bitbucket
A -- B -- C -- D
|
master testing
Bitbucket:
origin
![Page 26: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/26.jpg)
-26 - -26 -
STEP 2: Push to Bitbucket
A -- B -- C -- D
|
master testing
Bitbucket:
origin
![Page 27: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/27.jpg)
-27 - -27 -
STEP 2: Push to Bitbucket
A -- B -- C -- D
|
master testing
Bitbucket:
origin
![Page 28: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/28.jpg)
-28 - -28 -
STEP 2: Push to Bitbucket
A -- B -- C -- D
|
master testing
Bitbucket:
origin
![Page 29: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/29.jpg)
-29 - -29 -
STEP 2: Push to Bitbucket
Bitbucket: origin
A -- B -- C -- D
|
master testing
![Page 30: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/30.jpg)
-30 - -30 -
STEP 3: Log in via my PC,pretend to be another user,clone the repo.
Bitbucket: origin
A -- B -- C -- D
|
master testing
A -- B -- C -- D
|
master testing
Bob clones Alice's bitbucket repo
![Page 31: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/31.jpg)
-31 - -31 -
STEP 4: Bob creates a branch'bobranch' and modifies pandashop.html (See pandabob.doc for this part)
Bitbucket: origin
A -- B -- C -- D
|
master testing
A -- B -- C -- D - E
|
master testing
bobranch
![Page 32: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/32.jpg)
-32 - -32 -
STEP 5: Merging the resultsat bitbucket
Bitbucket: origin
A -- B -- C -- D
|
master testing
A -- B -- C -- D - E
|
master testing
bobranch
A -- B -- C -- D - E
|
master testing
bobranch
![Page 33: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/33.jpg)
-33 - -33 -
STEP 5: Merging the resultsat bitbucket
Now there's anew branch and Alicewants it.
![Page 34: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/34.jpg)
-34 - -34 -
STEP 5: Alice does a pull viaher SmartGIT
Yes, we wantto merge whatwe pull
And the results...
![Page 35: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/35.jpg)
-35 - -35 -
Bitbucket: origin
A -- B -- C -- D -- E
|
master testing bobranch
A -- B -- C -- D - E
|
master testing
bobranch
A -- B -- C -- D - E
|
master testing
bobranch
![Page 36: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/36.jpg)
-36 - -36 -
STEP 5: Alice does a pull viaher SmartGIT
I look around for my changes, but they're not visible in pandashop.html.
Why? NOTE: Which branch is HEAD (green arrow) above?
![Page 37: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/37.jpg)
-37 - -37 -
STEP 5: Alice does a pull viaher SmartGIT
I look around for my changes, but they're not visible in pandashop.html.
Why? NOTE: Which branch is HEAD (green arrow) above?
We need to change to the bobranch.
![Page 38: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/38.jpg)
-38 - -38 -
The Branch Manager
I look around for my changes, but they're not visible in pandashop.html.
Why? NOTE: Which branch is HEAD (green arrow) above?
We need to change to the bobranch.
![Page 39: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/39.jpg)
-39 - -39 -
![Page 40: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/40.jpg)
-40 - -40 -
NOW we have Bob's changeson Alice's system
Pandashop's log.
The bulleted list insertion.
![Page 41: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/41.jpg)
-41 - -41 -
FINAL STEP:Merging Bob's changes into
Alice's Master.Alice switches back to Master.
Alice selects the Merge button.
AND ... bobranch is NOT visible. WTF?
![Page 42: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/42.jpg)
-42 - -42 -
FINAL STEP:Merging Bob's changes into
Alice's Master.Alice switches back to Master.
Alice selects the Merge button.
AND ... bobranch is NOT visible. WTF?
![Page 43: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/43.jpg)
-43 - -43 -
FINAL STEP:Merging Bob's changes into
Alice's Master.Alice switches back to Master.
Alice selects the Merge button.
AND ... bobranch is NOT visible. WTF?
![Page 44: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/44.jpg)
-44 - -44 -
SO we were looking at the worldfrom 'testing' viewpoint.
Change that to bobranch, that's what we want to see.Select the bobranch branch to be merged into master.
![Page 45: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/45.jpg)
-45 - -45 -
NOW did the merge work?Is master up-to-date?
Change that to bobranch, that's what we want to see.Select the bobranch branch to be merged into master.
Yep. ALmost done, Alice. Hang in there!
![Page 46: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/46.jpg)
-46 - -46 -
Bitbucket: origin
A -- B -- C -- D -- E
testing master bobranch
A -- B -- C -- D - E
|
master testing
bobranch
A -- B -- C -- D - E
|
master testing
bobranch
Final Step: Alice needs to PUSHher merged work up to
bitbucket.
![Page 47: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/47.jpg)
-47 - -47 -
Bitbucket: origin
A -- B -- C -- D -- E
testing master bobranch
A -- B -- C -- D - E
|
master testing
bobranch
A -- B -- C -- D - E
|
master testing
bobranch
Final Step: Alice needs to PUSHher merged work up to
bitbucket.
![Page 48: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/48.jpg)
A -- B -- C -- D -- E
testing master bobranch
-48 - -48 -
Bitbucket: origin A -- B -- C -- D - E
|
master testing
bobranch
Final Step: Now the bitbucket repois up to date. (Bob should Pull)
A -- B -- C -- D -- E
testing master bobranch
![Page 49: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/49.jpg)
-49 - -49 -
What you should understand when we're done:
meaning of master, origin, HEAD, branch
meaning of 'check out'
how to read and understand Branch Diagrams
Concepts about how SmartGIT represents branches
The issue of Merging (but not (yet) how to resolve conflicts)
![Page 50: Web Design Workshop](https://reader036.vdocument.in/reader036/viewer/2022081519/56813b48550346895da42ebc/html5/thumbnails/50.jpg)
-50 - -50 -
What I hope you will understand,but we're not there yet:
Hands-on ability to fluently use SmartGit and bitbucket
to manage team projects where merging is concerned.
We will continue to gain experience with it,
as the semester proceeds.