web design workshop

1

Web Design Workshop

DIG 4104c – Lecture 5c

Git:

Branch and MergeJ. Michael Moshell

University of Central Floridagiantteddy.com.

-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

-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)

-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.

-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

-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

-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

-8 - -8 -




git branch testing

A -- B

|

master testing

-9 - -9 -




git branch testing

A -- B

|

master testing

git checkout testing

-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

-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

-12 - -12 -

Working on the testing branchWe add an image named panda.png, and also another source file, pandashop.html.

-13 - -13 -

Working on the testing branchWe select the pandashop.html and panda.png

and commit them, forming version D.

-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

-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

-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

-17 - -17 -

Merge what?

Look at your choices, via this button.

A -- B -- C -- D

| |

master testing

-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.

-19 - -19 -

STEP 2: Push to Bitbucket

-20 - -20 -


-21 - -21 -


OK, so how do I do that from SmartGIT?

Select the Files window (not a Log), then...

-22 - -22 -


-23 - -23 -


-24 - -24 -


You created your security key andpassphrase in labsheet 4

-25 - -25 -


A -- B -- C -- D

|

master testing

Bitbucket:

origin

-26 - -26 -


A -- B -- C -- D

|

master testing

Bitbucket:

origin

-27 - -27 -


A -- B -- C -- D

|

master testing

Bitbucket:

origin

-28 - -28 -


A -- B -- C -- D

|

master testing

Bitbucket:

origin

-29 - -29 -


Bitbucket: origin

A -- B -- C -- D

|

master testing

-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

-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

-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

-33 - -33 -

STEP 5: Merging the resultsat bitbucket

Now there's anew branch and Alicewants it.

-34 - -34 -

STEP 5: Alice does a pull viaher SmartGIT

Yes, we wantto merge whatwe pull

And the results...

-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

-36 - -36 -


I look around for my changes, but they're not visible in pandashop.html.

Why? NOTE: Which branch is HEAD (green arrow) above?

-37 - -37 -




We need to change to the bobranch.

-38 - -38 -

The Branch Manager



We need to change to the bobranch.

-39 - -39 -

-40 - -40 -

NOW we have Bob's changeson Alice's system

Pandashop's log.

The bulleted list insertion.

-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?

-42 - -42 -





-43 - -43 -





-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.

-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!

-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.

-47 - -47 -

Bitbucket: origin

A -- B -- C -- D -- E


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.

A -- B -- C -- D -- E


-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


-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)

-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.

web design workshop

Documents

branch testinga

testing branchwe

branch diagramsconcepts

themaster branch

d master testingdc b

createsa new branch

c master testingthe

version d