Web Design Workshop

Web Design Workshop DIG 4104c – Lecture 5c Git: Branch and Merge J. Michael Moshell University of Central Florida giantteddy.com.

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

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

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

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

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

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

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

checkout: copy repo into working 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 -10 -

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

Working on the testing branch • We add an image named panda.png, and also another source file, pandashop.html. -12 -

Working on the testing branch • We select the pandashop.html and panda.png • and commit them, forming version D. -13 -

Working on the testing branch • We select the pandashop.html and panda.png • and commit them. Also commit the • change to teddyshop.html, forming version D. • D • CBA • A -- B -- C -- D • | | • master testing -14 -

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

Now let's merge the testing • branch 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 • | | • mastertesting -16 -

Merge what? • Look at your choices, via this button. • A -- B -- C -- D • | | • mastertesting -17 -

Merge 'fast-forwarded' the master branch. Now you would use FTP to copy your working tree to your host. • A -- B -- C -- D • | • mastertesting -18 -

STEP 2: Push to Bitbucket -19 -

STEP 2: Push to Bitbucket OK, so how do I do that from SmartGIT? Select the Files window (not a Log), then... -21 -

STEP 2: Push to Bitbucket You created your security key and passphrase in labsheet 4 -24 -

STEP 2: Push to Bitbucket • Bitbucket: • origin • A -- B -- C -- D • | • mastertesting -25 -

STEP 2: Push to Bitbucket • Bitbucket: origin • A -- B -- C -- D • | • mastertesting -29 -

STEP 3: Log in via my PC, pretend to be another user, clone the repo. Bob clones Alice's bitbucket repo • Bitbucket: origin • A -- B -- C -- D • | • mastertesting • A -- B -- C -- D • | • mastertesting -30 -

STEP 4: Bob creates a branch 'bobranch' and modifies pandashop.html (See pandabob.doc for this part) • Bitbucket: origin • A -- B -- C -- D - E • | • mastertesting • bobranch • A -- B -- C -- D • | • mastertesting -31 -

STEP 5: Merging the results at bitbucket • A -- B -- C -- D - E • | • master testing • bobranch • A -- B -- C -- D - E • | • mastertesting • bobranch • Bitbucket: origin • A -- B -- C -- D • | • mastertesting -32 -

STEP 5: Merging the results at bitbucket Now there's a new branch  and Alice wants it. -33 -

STEP 5: Alice does a pull via her SmartGIT Yes, we want to merge what we pull And the results... -34 -

A -- B -- C -- D - E • | • mastertesting • bobranch • A -- B -- C -- D - E • | • mastertesting • bobranch • Bitbucket: origin • A -- B -- C -- D -- E • | • mastertesting bobranch -35 -

STEP 5: Alice does a pull via her SmartGIT I look around for my changes, but they're not visible in pandashop.html. Why? NOTE: Which branch is HEAD (green arrow) above? -36 -

STEP 5: Alice does a pull via her 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. -37 -

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

-39 -

NOW we have Bob's changes on Alice's system Pandashop's log. The bulleted list insertion. -40 -

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

SO we were looking at the world from 'testing' viewpoint. Change that to bobranch, that's what we want to see. Select the bobranch branch to be merged into master. -44 -

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

Final Step: Alice needs to PUSH her merged work up to bitbucket. A -- B -- C -- D - E | mastertesting bobranch • Bitbucket: origin • A -- B -- C -- D - E • | • mastertesting • bobranch • A -- B -- C -- D -- E • testing master bobranch -46 -

Final Step: Alice needs to PUSH her merged work up to bitbucket. A -- B -- C -- D - E | mastertesting bobranch • Bitbucket: origin • A -- B -- C -- D - E • | • mastertesting • bobranch • A -- B -- C -- D -- E • testing master bobranch -47 -

Final Step: Now the bitbucket repo is up to date. (Bob should Pull) • A -- B -- C -- D -- E • testing master bobranch • Bitbucket: origin • A -- B -- C -- D - E • | • mastertesting • bobranch • A -- B -- C -- D -- E • testing master bobranch -48 -

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

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

Web Design Workshop