Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

prep for lecture #11

Merged
merged 1 commit into from
Mar 7, 2024
+304 −257
Merged

prep for lecture #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
253 changes: 138 additions & 115 deletions Collaborative-Git-GitHub-slides.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -355,12 +355,12 @@ <h2>Introductions</h2>
<h2>Goals of the workshop</h2>
<div class="fragment">
<ul>
<li>Understand the concept of branching and merging for collaborative and diverging work.</li>
<li>Understand the concept of branching and merging for collaborative work.</li>
</ul>
</div>
<div class="fragment">
<ul>
<li>Create your own branch for independent work from a collaborative repository, and use a pull request on GitHub to receive feedback before merging.</li>
<li>Create your own branch for independent work from a collaborative repository, and use a “pull request” on GitHub to receive feedback before merging.</li>
</ul>
</div>
<div class="fragment">
Expand All @@ -369,6 +369,11 @@ <h2>Goals of the workshop</h2>
</ul>
</div>
</section>
<section id="review-git-data-model" class="slide level2">
<h2>Review: Git data model</h2>
<p>You can save the state of your repository by making a <strong>commit</strong>: Git will save the repository’s <strong>directory tree</strong>, a link to the previous commit, and metadata.</p>

<img data-src="https://git-scm.com/book/en/v2/images/snapshots.png" class="r-stretch"></section>
<section id="branching-and-merging" class="slide level2">
<h2>Branching and Merging</h2>
<div class="fragment">
Expand All @@ -391,25 +396,17 @@ <h2>Branching and Merging</h2>
</div>
<div class="fragment">
<p><strong>Branching</strong>: when branching commit paths are created.</p>
<p><strong>Merging</strong>: when two branches are integrated together.</p>
<p><strong>Merging</strong>: when two branches are integrated together. This sometimes require careful communication, and this is done in GitHub via a <strong>“pull request”.</strong></p>
</div>
</section>
<section id="state-of-a-git-repository" class="slide level2">
<h2>State of a Git repository</h2>

<img data-src="images/git_workflow1.svg" class="r-stretch"></section>
<section id="state-of-a-git-repository-with-remote" class="slide level2">
<h2>State of a Git repository, with remote</h2>

<img data-src="images/git_workflow2.svg" class="r-stretch"></section>
<section id="set-up" class="slide level2">
<h2>Set up</h2>
<ol type="1">
<li>Login to your GitHub account: https://github.com/login</li>
</ol>
<div class="fragment">
<ol start="2" type="1">
<li>Create a Replit account and “fork” this project: https://replit.com/<span class="citation" data-cites="clo22/CollaborativeGitGitHubDaSl">@clo22/CollaborativeGitGitHubDaSl</span></li>
<li>Create a Replit account and “fork” this project: <a href="https://replit.com/@clo22/CollaborativeGitGitHubDaSl">https://replit.com/@clo22/CollaborativeGitGitHubDaSl</a></li>
</ol>
</div>
<div class="fragment">
Expand All @@ -426,115 +423,18 @@ <h2>Set up</h2>
<p>You will be given a code, and you will provide that code to GitHub via <a href="https://github.com/login/device" class="uri">https://github.com/login/device</a>.</p>
</div>
</section>
<section id="getting-started-with-branches" class="slide level2">
<h2>Getting started with branches</h2>
<p>Let’s create a local repository to practice branching:</p>
<div class="fragment">
<pre><code>% mkdir sandbox
% cd sandbox
% git init
% touch README
% git add README
% git commit -m "Added README"</code></pre>
</div>
<div class="fragment">
<p>Let’s look at the branches in this repository:</p>
<pre><code>% git branch
* main</code></pre>
<p>The star <code>*</code> shows which branch we are looking at.</p>
<p>We are on the <code>main</code> branch in this repository, as expected.</p>
</div>
</section>
<section id="ways-to-look-at-a-branch" class="slide level2">
<h2>Ways to look at a branch</h2>
<p>Let’s create a new branch:</p>
<div class="fragment">
<pre><code>% git branch development
% git branch
development
* main</code></pre>
</div>
<div class="fragment">
<p>Another way to look at which branch we are on is via <code>git log</code>:</p>
<pre><code>% git log
commit 657fcbea5a023041d359a8f1fcfc9fbf7e64f68e (HEAD -&gt; main, development)
Merge: 875d774 413b490
Author: Your Name &lt;you@example.com&gt;
Date: Wed Dec 6 23:47:39 2023 +0000

Initial commit</code></pre>
<p>The <code>HEAD</code> <strong>pointer</strong> tells us “What am I looking at?” in our local file system.</p>
</div>
</section>
<section id="committing-to-the-development-branch" class="slide level2">
<h2>Committing to the development branch</h2>
<div class="fragment">
<pre><code>% git checkout development
Switched to branch 'development'
% echo "Additional README info" &gt;&gt; README.md
% git add README.md
% git commit -m "updated README"</code></pre>
</div>
<div class="fragment">
<p>Let’s look at our <code>git log</code>:</p>
<pre><code>% git log
commit 260c8099f0ea82199805325a6fbe26bfc3cbd1aa (HEAD -&gt; development)
Author: Your Name &lt;you@example.com&gt;
Date: Thu Dec 7 00:14:02 2023 +0000

updated README

commit 657fcbea5a023041d359a8f1fcfc9fbf7e64f68e (main)
Merge: 875d774 413b490
Author: Your Name &lt;you@example.com&gt;
Date: Wed Dec 6 23:47:39 2023 +0000

Initial commit</code></pre>
<p>Now, our branch <code>development</code> is ahead of the <code>main</code> branch by one commit. We can toggle between two branches via <code>git checkout</code> as before.</p>
</div>
</section>
<section id="merging" class="slide level2">
<h2>Merging</h2>
<div class="fragment">
<p>All you have to do is checkout the branch you wish to merge into and then run <code>git merge [branchName]</code> on the branch of interest:</p>
<pre><code>% git checkout main
% git merge development
Merge branch 'main' of https://github.com/fhdsl/Collaborative_Git_GitHub_Student_Practice
Updating 657fcbe..260c809
Fast-forward
% git log
commit 260c8099f0ea82199805325a6fbe26bfc3cbd1aa (HEAD -&gt; main, development)
Author: Your Name &lt;you@example.com&gt;
Date: Thu Dec 7 00:14:02 2023 +0000

updated README

commit 657fcbea5a023041d359a8f1fcfc9fbf7e64f68e
Merge: 875d774 413b490
Author: Your Name &lt;you@example.com&gt;
Date: Wed Dec 6 23:47:39 2023 +0000

Initial commit</code></pre>
</div>
</section>
<section id="accessing-our-shared-repository" class="slide level2">
<h2>Accessing our shared repository</h2>
<ol type="1">
<li>In Replit shell,</li>
</ol>
<pre><code>%cd ~
%git clone https://github.com/fhdsl/Collaborative_Git_GitHub_Student_Practice.git</code></pre>
<pre><code>git clone https://github.com/fhdsl/Collaborative_Git_GitHub_Student_Practice.git

cd Collaborative_Git_GitHub_Student_Practice/</code></pre>
<ol start="2" type="1">
<li>Open up https://github.com/fhdsl/Collaborative_Git_GitHub_Student_Practice in browser.</li>
</ol>
</section>
<section id="pull-request-model" class="slide level2">
<h2>Pull request model</h2>
<p>A <strong>pull request</strong> is a way to propose changes from a branch before it is merged back into the main repository. It is just like <code>git merge</code>, but it requires more documentation and confirmation.</p>
<div class="fragment">
<p><img data-src="images/git_PR_illustration.png"></p>
</div>
</section>
<section id="creating-a-branch-on-the-remote" class="slide level2">
<h2>Creating a branch on the remote</h2>

Expand All @@ -552,21 +452,39 @@ <h2>Making changes to this new branch locally</h2>
Branch 'clo2_development' set up to track remote branch 'clo2_development' from 'origin'.
Switched to a new branch 'clo2_development'</code></pre>
</div>
<div class="fragment">
<p>We can use <code>git checkout main</code> to look switch back to our main branch. We can also use <code>git branch</code> to see the branches on a repository.</p>
</div>
</section>
<section id="review-state-of-a-git-repository-with-remote" class="slide level2">
<h2>Review: State of a Git repository, with remote</h2>

<img data-src="images/git_workflow3.png" class="r-stretch"></section>
<section id="making-changes-to-new-branch" class="slide level2">
<h2>Making changes to new branch</h2>
<div class="fragment">
<p>Create a file that is unique to you.</p>
<pre><code>% touch clo2.txt
% echo "hello" &gt; clo2.txt
% git add README.md
% git commit -m "edited README.md"
% git add clo2.txt
% git commit -m "Created clo2.txt"
% git push</code></pre>
</div>
<div class="fragment">
<p>When you have pushed changes to the branch, you will see an option to <em>“Compare &amp; pull request”</em>. Click on it.</p>
<p><img data-src="images/git_PR1.png"></p>
</div>
</section>
<section id="pull-request-model" class="slide level2">
<h2>Pull request model</h2>
<p>A <strong>pull request</strong> is a way to propose changes from a branch before it is merged back into the main repository.</p>
<div class="fragment">
<p>This is commonly used in collaborative work in which a branch needs to be approved by other members on the team before it is integrated into the main project.</p>
</div>
<div class="fragment">
<p><img data-src="images/git_PR_illustration.png"></p>
</div>
</section>
<section id="creating-a-pull-request" class="slide level2">
<h2>Creating a pull request</h2>
<p>You will see that you are trying to merge <code>clo2_development</code> into <code>main</code> on the remote. It also requires you to write a description of what you did on your branch.</p>
Expand All @@ -577,7 +495,12 @@ <h2>Creating a pull request</h2>
<section id="creating-a-pull-request-1" class="slide level2">
<h2>Creating a pull request</h2>

<img data-src="images/git_PR3.png" class="r-stretch"><p>Add your partner’s GitHub username as your reviewer, and talk about it!</p>
<img data-src="images/git_PR3.png" class="r-stretch"><div class="fragment">
<p>Add your partner’s GitHub username as your reviewer, and have them make comments/create a code review about it!!</p>
</div>
<div class="fragment">
<p>Make additional commits based on their comments.</p>
</div>
</section>
<section id="guidelines-on-pull-request-discussions" class="slide level2">
<h2>Guidelines on pull request discussions</h2>
Expand All @@ -598,6 +521,15 @@ <h2>Guidelines on pull request discussions</h2>
<p>Click <em>“Merge pull request”</em> to finish!</p>
</div>
</section>
<section id="a-pull-request-with-conflicts" class="slide level2">
<h2>A Pull Request with conflicts</h2>
<ul>
<li><p>Everyone create a new branch</p></li>
<li><p>I’ll modify <code>README.md</code> on the main branch</p></li>
<li><p>You make changes to <code>README.md</code> on your branch, and make a Pull Request</p></li>
<li><p>What to do with a conflict?</p></li>
</ul>
</section>
<section id="github-issues" class="slide level2">
<h2>GitHub issues</h2>
<p>GitHub issues are a way for people to give feedback on your repository:</p>
Expand All @@ -621,6 +553,97 @@ <h2>GitHub issues</h2>
<h2>Try creating a GitHub issue</h2>

<img data-src="images/git_issue.png" class="r-stretch"></section>
<section id="getting-started-with-branches" class="slide level2">
<h2>Getting started with branches</h2>
<p>Let’s create a local repository to practice branching:</p>
<div class="fragment">
<pre><code>% mkdir sandbox
% cd sandbox
% git init
% touch README
% git add README
% git commit -m "Added README"</code></pre>
</div>
<div class="fragment">
<p>Let’s look at the branches in this repository:</p>
<pre><code>% git branch
* main</code></pre>
<p>The star <code>*</code> shows which branch we are looking at.</p>
<p>We are on the <code>main</code> branch in this repository, as expected.</p>
</div>
</section>
<section id="ways-to-look-at-a-branch" class="slide level2">
<h2>Ways to look at a branch</h2>
<p>Let’s create a new branch:</p>
<div class="fragment">
<pre><code>% git branch development
% git branch
development
* main</code></pre>
</div>
<div class="fragment">
<p>Another way to look at which branch we are on is via <code>git log</code>:</p>
<pre><code>% git log
commit 657fcbea5a023041d359a8f1fcfc9fbf7e64f68e (HEAD -&gt; main, development)
Merge: 875d774 413b490
Author: Your Name &lt;you@example.com&gt;
Date: Wed Dec 6 23:47:39 2023 +0000

Initial commit</code></pre>
<p>The <code>HEAD</code> <strong>pointer</strong> tells us “What am I looking at?” in our local file system.</p>
</div>
</section>
<section id="committing-to-the-development-branch" class="slide level2">
<h2>Committing to the development branch</h2>
<div class="fragment">
<pre><code>% git checkout development
Switched to branch 'development'
% echo "Additional README info" &gt;&gt; README.md
% git add README.md
% git commit -m "updated README"</code></pre>
</div>
<div class="fragment">
<p>Let’s look at our <code>git log</code>:</p>
<pre><code>% git log
commit 260c8099f0ea82199805325a6fbe26bfc3cbd1aa (HEAD -&gt; development)
Author: Your Name &lt;you@example.com&gt;
Date: Thu Dec 7 00:14:02 2023 +0000

updated README

commit 657fcbea5a023041d359a8f1fcfc9fbf7e64f68e (main)
Merge: 875d774 413b490
Author: Your Name &lt;you@example.com&gt;
Date: Wed Dec 6 23:47:39 2023 +0000

Initial commit</code></pre>
<p>Now, our branch <code>development</code> is ahead of the <code>main</code> branch by one commit. We can toggle between two branches via <code>git checkout</code> as before.</p>
</div>
</section>
<section id="merging" class="slide level2">
<h2>Merging</h2>
<div class="fragment">
<p>All you have to do is checkout the branch you wish to merge into and then run <code>git merge [branchName]</code> on the branch of interest:</p>
<pre><code>% git checkout main
% git merge development
Merge branch 'main' of https://github.com/fhdsl/Collaborative_Git_GitHub_Student_Practice
Updating 657fcbe..260c809
Fast-forward
% git log
commit 260c8099f0ea82199805325a6fbe26bfc3cbd1aa (HEAD -&gt; main, development)
Author: Your Name &lt;you@example.com&gt;
Date: Thu Dec 7 00:14:02 2023 +0000

updated README

commit 657fcbea5a023041d359a8f1fcfc9fbf7e64f68e
Merge: 875d774 413b490
Author: Your Name &lt;you@example.com&gt;
Date: Wed Dec 6 23:47:39 2023 +0000

Initial commit</code></pre>
</div>
</section>
<section id="appendix-references" class="slide level2">
<h2>Appendix: References</h2>
<ul>
Expand Down
Loading
Loading