-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgithub-projects.html
executable file
·242 lines (239 loc) · 17.5 KB
/
github-projects.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!DOCTYPE html>
<html lang="en">
<head>
<script data-blockingmode="auto" data-cbid="272e4128-6678-430d-aa67-2f4d13d1d783" id="Cookiebot" src="https://consent.cookiebot.com/uc.js" type="text/javascript"></script>
<meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="True" name="HandheldFriendly"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/> <meta content="" name="robots"/> <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,700;1,400&family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet"/> <link href="https://www.robin-beer.de/theme/stylesheet/style.min.css" rel="stylesheet" type="text/css"/> <link href="https://www.robin-beer.de/theme/pygments/vs.min.css" id="pygments-light-theme" rel="stylesheet" type="text/css"/>
<link href="https://www.robin-beer.de/theme/font-awesome/css/fontawesome.css" rel="stylesheet" type="text/css"/>
<link href="https://www.robin-beer.de/theme/font-awesome/css/brands.css" rel="stylesheet" type="text/css"/>
<link href="https://www.robin-beer.de/theme/font-awesome/css/solid.css" rel="stylesheet" type="text/css"/> <link href="https://www.robin-beer.de/feeds/all.atom.xml" rel="alternate" title="Robin Beer Atom" type="application/atom+xml"/> <link href="/images/favicon_squared.ico" rel="shortcut icon" type="image/x-icon"/>
<link href="/images/favicon_squared.ico" rel="icon" type="image/x-icon"/> <!-- Google Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-160647513-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics --> <meta content="Robin Beer" name="author"/>
<meta content="In this article you will learn how to setup a project in GitHub and to use boards to organize your issues using agile methods." name="description"/>
<meta content="GitHub, projects, agile, KanBan, productivity, automation, GitLab" name="keywords"/>
<meta content="Robin Beer" property="og:site_name">
<meta content="Use GitHub to manage your projects in an agile way" property="og:title"/>
<meta content="In this article you will learn how to setup a project in GitHub and to use boards to organize your issues using agile methods." property="og:description"/>
<meta content="en_US" property="og:locale"/>
<meta content="https://www.robin-beer.de/github-projects.html" property="og:url"/>
<meta content="article" property="og:type"/>
<meta content="2020-04-19 20:50:00+02:00" property="article:published_time"/>
<meta content="" property="article:modified_time"/>
<meta content="https://www.robin-beer.de/author/robin-beer.html" property="article:author"/>
<meta content="Tools" property="article:section">
<meta content="GitHub" property="article:tag"/>
<meta content="projects" property="article:tag"/>
<meta content="agile" property="article:tag"/>
<meta content="KanBan" property="article:tag"/>
<meta content="productivity" property="article:tag"/>
<meta content="automation" property="article:tag"/>
<meta content="GitLab" property="article:tag"/>
<meta content="/images/BEER_2018_2896_small.jpg" property="og:image"/>
<title>Robin Beer – Use GitHub to manage your projects in an agile way</title>
</meta></meta><link href="https://www.robin-beer.de\github-projects.html" rel="canonical"/><script type="application/ld+json">{"@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{"@type": "ListItem", "position": 1, "name": "Robin Beer", "item": "https://www.robin-beer.de"}, {"@type": "ListItem", "position": 2, "name": "Github projects", "item": "https://www.robin-beer.de\\github-projects.html"}]}</script><script type="application/ld+json">{"@context": "https://schema.org", "@type": "Article", "author": {"@type": "Person", "name": "Robin Beer"}, "publisher": {"@type": "Organization", "name": "Robin Beer"}, "headline": "Use GitHub to manage your projects in an agile way", "about": "Tools", "datePublished": "2020-04-19 20:50"}</script></head>
<body class="light-theme">
<aside>
<div>
<a href="https://www.robin-beer.de/">
<img alt="Robin Beer" src="/images/BEER_2018_2896_small.jpg" title="Robin Beer"/>
</a>
<h1>
<a href="https://www.robin-beer.de/">Robin Beer</a>
</h1>
<p>Energy Data Scientist</p> <nav>
<ul class="list">
<li>
<a href="https://www.robin-beer.de/pages/about.html#about" target="_self">
About
</a>
</li>
<li>
<a href="https://www.robin-beer.de" target="_self">Home</a>
</li>
</ul>
</nav>
<ul class="social">
<li>
<a class="sc-twitter" href="https://twitter.com/R_E_Beer" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a class="sc-linkedin" href="https://www.linkedin.com/in/robin-beer-7595b680/" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li>
<a class="sc-github" href="https://github.com/Zaubeerer" target="_blank">
<i class="fab fa-github"></i>
</a>
</li>
<li>
<a class="sc-envelope-o" href="mailto:[email protected]" target="_blank">
<i class="fab fa-envelope-o"></i>
</a>
</li>
</ul>
</div>
</aside>
<main>
<article class="single">
<header>
<h1 id="github-projects">Use GitHub to manage your projects in an agile way</h1>
<p>
Posted on Sun 19 April 2020 in <a href="https://www.robin-beer.de/category/tools.html">Tools</a>
</p>
</header>
<div>
<p>In this article you will learn how to setup a project in GitHub and to use boards to organize your issues using agile methods.</p>
<p>We all have been there, long lists of issues overwhelming our brain.</p>
<p>Wouldn't it be great to organize these issues in a way that simplifies prioritization and illustrates progress without having to copy the same issues to Trello?</p>
<p>There is! With <code>GitHub projects</code> you can set up boards and use agile methods such as KanBan or Scrum. Let's dive into it!</p>
<h2>Initialization of a GitHub project</h2>
<p>First, we create a new GitHub repository to show the process from scratch. If you already have a repository, you can jump to the next paragraph.</p>
<p>First, click on the "+" on the upper right next to your GitHub profile icon to create a new repository:</p>
<p><img alt="new repo" src="https://www.robin-beer.de/Tools/images/gh-projects/2020-04-14-22-05-07.png" style="width: 300px;"/></p>
<p>Fill in the form, for example with the title and description that I used to create this article:</p>
<p><img alt="Empty GitHub repository" src="https://www.robin-beer.de/Tools/images/gh-projects/2020-04-14-22-02-41.png"/></p>
<p>Subsequently, create some dummy issues that describe different tasks that you have to work on.</p>
<p><img alt="Issue Creation on GitHub" src="https://www.robin-beer.de/Tools/images/gh-projects/2020-04-14-22-07-58.png"/></p>
<p>Your issue list might look like the following:</p>
<p><img alt="GitHub issue list" src="https://www.robin-beer.de/Tools/images/gh-projects/2020-04-14-22-16-40.png"/></p>
<p>GitHub even suggests to try out <code>project boards</code>. But how?</p>
<h2>Creation of new projects</h2>
<p>In GitHub, one needs to first create a <code>project</code> to subsequently create a <code>project board</code>. Therefore, click on the <code>Try it now!</code> button or on <code>Projects</code> and subsequently on <code>New project</code>.</p>
<p>The following window should open:</p>
<p><img alt="GitHub New Project" src="https://www.robin-beer.de/Tools/images/gh-projects/2020-04-14-22-21-59.png"/></p>
<p>Fill in some creative names, or stay with these great suggestions.</p>
<h2>Creation of project boards</h2>
<p>Congratulations, by creating the first <code>project</code>, you automatically created a <code>project board</code>. It's empty though, so let's populate it.</p>
<p>Therefore, you first have to <code>Add a column</code>. I suggest to use the following <code>columns</code>:</p>
<ul>
<li>
<p><code>Backlog</code>: All new issues land here</p>
</li>
<li>
<p><code>To Do</code>: Issues that are planned to be worked on soon</p>
</li>
<li>
<p><code>In Progress</code>: Issues that are actively being worked on</p>
</li>
<li>
<p><code>Waiting for Feedback</code>: Issues that require feedback, to decide whether they are completed</p>
</li>
<li>
<p><code>Done</code>: completed issues</p>
</li>
</ul>
<p>These <code>columns</code> intuitively visualize the progress of the issues. You can just create them for now and ignore the automation, which we will set up later.</p>
<p>After having created the <code>columns</code>, your <code>project board</code> should look similar to the following image:</p>
<p><img alt="Empty Project Board" src="https://www.robin-beer.de/Tools/images/gh-projects/2020-04-14-22-33-18.png"/></p>
<p>But there are still no issues... :(</p>
<h2>Issue allocation to (several) projects</h2>
<p>GitHub enables many-to-many relationships between issues and projects. That means, one issue can be attributed to several projects and of course, one project can have infinite (?) issues.</p>
<p>To add issues to this <code>project</code>, you have two options:</p>
<ol>
<li>Click on <code>+ Add cards</code> and drag and drop the issues to the respective <code>columns</code>:</li>
</ol>
<p><img alt="Issue allocation to project columns from project board" src="https://www.robin-beer.de/Tools/images/gh-projects/2020-04-14-22-40-33.png"/></p>
<ol>
<li>Open the issues view, open the issues that you want to add to the project in a new tab and click on the settings icon next to <code>Projects</code> to select the project you want this issue to be added to:</li>
</ol>
<p><img alt="Issue allocation to projects from issues board" src="https://www.robin-beer.de/Tools/images/gh-projects/2020-04-14-22-38-22.png"/></p>
<p>You might have noticed, that the second step did not add the issues to a <code>column</code> yet. You still have to drag and drop it as mentioned in step 1. Or, do you?</p>
<h2>Further useful functionalities</h2>
<p>GitHub allows you to <strong>automate</strong> some of the steps described above, to <strong>create labels</strong>, and to <strong>filter the issues</strong> in the <code>project board</code>. Let's check out these additional functionalities, that are really useful in everyday project management.</p>
<h3>Manage automation of columns</h3>
<p>First let's <code>manage automation</code> of the <code>Backlog</code> column:</p>
<p><img alt="manage automation" src="https://www.robin-beer.de/Tools/images/gh-projects/2020-04-14-22-44-25.png" style="width: 300px;"/></p>
<p>Choose <code>To Do</code>, check the shown check boxes as visualized below, and <code>Update automation</code>:</p>
<p><img alt="manage automation: backlog" src="https://www.robin-beer.de/Tools/images/gh-projects/2020-04-14-22-45-46.png" style="width: 300px;"/></p>
<p>Now, if you go back to the issues view and assign the issue to the project, the issue will be automatically added to the <code>Backlog</code> column.</p>
<p>Similarly, <code>Update automation</code> for the <code>column "Done"</code>, such that merged PRs and closed issues are automatically added to the <code>column "Done"</code>. Additionally, you might want to add automation to the <code>column "In Progress"</code>, if issues or PRs are reopened.</p>
<h3>Create issue labels</h3>
<p>To visualize priority implicitly, the issues can be sorted according to their priority (high position = high priority) within their <code>columns</code>.</p>
<p>Additionally, issue labels can be created to visualize priority explicitly. Therefore, click on one of the issue titles and in the sidebar that opens to the right, click on the settings icon in <code>Labels</code> and type in <code>high priority</code>.</p>
<p>Now, you should be able to <code>Create new label "high priority"</code>. Alternatively, you can <code>Edit labels</code>.</p>
<p><img alt="create new label" src="https://www.robin-beer.de/Tools/images/gh-projects/2020-04-14-23-00-41.png" style="width: 300px;"/></p>
<p>Now, your project board might already look more colorful - and more neat. 👌🏻</p>
<p><img alt="Project view with labels" src="https://www.robin-beer.de/Tools/images/gh-projects/2020-04-14-23-05-55.png"/></p>
<h3>Filter project board view</h3>
<p>Another useful functionality, once the project board gets busy, is to filter the issues.</p>
<p>For example, you might want to see all issues assigned to you or to a specific milestone. Or all issues, that have high priority. Therefore, click on the search field <code>Filter cards</code> and type in exactly <code>label:"high priority"</code>, such that the project board should change as follows:</p>
<p><img alt="Filtered project view" src="https://www.robin-beer.de/Tools/images/gh-projects/2020-04-14-23-08-26.png"/></p>
<h2>Summary & Conclusion</h2>
<p>In this article, we have checked out how to use GitHub's <code>project boards</code> to organize your issues into <code>columns</code>.</p>
<p>Therefore, we have created <code>projects</code> and assigned the issues to several projects. Using the columns <code>Backlog</code>, <code>To Do</code>, <code>In Progress</code>, <code>Waiting for Feedback</code> and <code>Done</code>, we can now intuitively visualize the progress of the issues.</p>
<p>Additionally, we can visualize the priority of the issues implicitly using the position (highest = highest priority) as well as explicitly using labels <code>high priority</code> and <code>low priority</code>.</p>
<p>Furthermore, we have <code>managed automation</code> to automatically move issues to <code>Backlog</code> when they are added to the project and <code>Done</code> when they are closed.</p>
<p>What are you waiting for? Get back control over all the open issues and manage them using <code>GitHub projects</code>!</p>
<p>Whether you use the <code>project board</code> with <a href="https://www.scrum.org/resources/what-is-scrum">Scrum</a> or <a href="https://www.atlassian.com/agile/kanban">KanBan</a>, it will simplify prioritization and visualization of progress.</p>
<p>This can also be a game-changer in communicating workload and available resources with your colleagues, your mentors or your boss.</p>
<hr/>
<p>You like the idea of issue organization into boards, but are using GitLab?</p>
<p>Check out <a href="">this article</a>, with instructions for GitLab!</p>
<p>Cheers!</p>
<p>Robin</p>
</div>
<div class="tag-cloud">
<p>
<a href="https://www.robin-beer.de/tag/github.html">GitHub</a>
<a href="https://www.robin-beer.de/tag/projects.html">projects</a>
<a href="https://www.robin-beer.de/tag/agile.html">agile</a>
<a href="https://www.robin-beer.de/tag/kanban.html">KanBan</a>
<a href="https://www.robin-beer.de/tag/productivity.html">productivity</a>
<a href="https://www.robin-beer.de/tag/automation.html">automation</a>
<a href="https://www.robin-beer.de/tag/gitlab.html">GitLab</a>
</p>
</div>
<!-- Disqus -->
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'robin-beer';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>
Please enable JavaScript to view comments.
</noscript>
<!-- End Disqus -->
</article>
<footer>
<p>© </p>
<p>
Built with <a href="http://getpelican.com" target="_blank">Pelican</a> using <a href="http://bit.ly/flex-pelican" target="_blank">Flex</a> theme
</p> </footer>
</main>
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Blog",
"name": " Robin Beer ",
"url" : "https://www.robin-beer.de",
"image": "/images/BEER_2018_2896_small.jpg",
"description": "Pythonic Energy Data Science Blog"
}
</script> <a aria-label="View source on Github" class="github-corner" href="https://github.com/Zaubeerer">
<svg aria-hidden="true" height="80" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" viewbox="0 0 250 250" width="80">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path class="octo-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;">
</path>
<path class="octo-body" d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor">
</path>
</svg>
</a>
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style> </body>
</html>