1. 1 Web Design Workshop DIG 4104c – Lecture 5c Git: Branch and Merge J. Michael Moshell University of Central Florida giantteddy.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 - 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

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

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

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 branch We add an image named panda.png, and also another source file, pandashop.html.

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

14. -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. A -- B -- C -- D | master testing DCBA DCBA

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 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 | 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 master branch. A -- B -- C -- D | master testing Now you would use FTP to copy your working tree to your host.

19. -19 - STEP 2: Push to Bitbucket

20. -20 - STEP 2: Push to Bitbucket

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

22. -22 - STEP 2: Push to Bitbucket

23. -23 - STEP 2: Push to Bitbucket

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

25. -25 - STEP 2: Push to Bitbucket A -- B -- C -- D | master testing Bitbucket: origin

26. -26 - STEP 2: Push to Bitbucket A -- B -- C -- D | master testing Bitbucket: origin

27. -27 - STEP 2: Push to Bitbucket A -- B -- C -- D | master testing Bitbucket: origin

28. -28 - STEP 2: Push to Bitbucket A -- B -- C -- D | master testing Bitbucket: origin

29. -29 - STEP 2: Push to Bitbucket 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 results at 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 results at bitbucket Now there's a new branch  and Alice wants it.

34. -34 - STEP 5: Alice does a pull via her SmartGIT Yes, we want  to merge what we 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 - 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?

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

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.

39. -39 -

40. -40 - NOW we have Bob's changes on 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 - 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. -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?

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

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 PUSH her merged work up to bitbucket.

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 PUSH her merged work up to bitbucket.

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

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.