1 / 50

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

egil
Download Presentation

Web Design Workshop

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  19. STEP 2: Push to Bitbucket -19 -

  20. STEP 2: Push to Bitbucket -20 -

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

  22. STEP 2: Push to Bitbucket -22 -

  23. STEP 2: Push to Bitbucket -23 -

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  39. -39 -

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

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

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

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

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

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

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

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

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

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

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

More Related