cours-git.html 13 KB
   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
 243
 244
 245
 246
 247
 248
 249
 250
 251
 252
 253
 254
 255
 256
 257
 258
 259
 260
 261
 262
 263
 264
 265
 266
 267
 268
 269
 270
 271
 272
 273
 274
 275
 276
 277
 278
 279
 280
 281
 282
 283
 284
 285
 286
 287
 288
 289
 290
 291
 292
 293
 294
 295
 296
 297
 298
 299
 300
 301
 302
 303
 304
 305
 306
 307
 308
 309
 310
 311
 312
 313
 314
 315
 316
 317
 318
 319
 320
 321
 322
 323
 324
 325
 326
 327
 328
 329
 330
 331
 332
 333
 334
 335
 336
 337
 338
 339
 340
 341
 342
 343
 344
 345
 346
 347
 348
 349
 350
 351
 352
 353
 354
 355
 356
 357
 358
 359
 360
 361
 362
 363
 364
 365
 366
 367
 368
 369
 370
 371
 372
 373
 374
 375
 376
 377
 378
 379
 380
 381
 382
 383
 384
 385
 386
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Programmation Web Avancée   GIT</title>
<meta name="cours-n" content="6">

<meta name="author" content="Rémi Emonet">
<meta name="venue" content="PWA M1 DSC">
<meta name="date" content="2017">
<meta name="affiliation" content="Université Jean Monnet − Laboratoire Hubert Curien">
<style type="text/css">
.slide.densish>ul {font-size: 70%;}
blockquote {padding: .3em !important;}
blockquote p {font-size: 40%}
blockquote cite {float: right; font-size: 40% !important;}
pre, .slide li strong {background: #EFE; color: #000;} /* TODO: change for export/printing */

.winner { top: 20px; width: 80px; display: block; position: absolute;}
.winner:nth-of-type(1) { left: 20px; }
.winner:nth-of-type(2) { left: 110px; }
.winner:nth-of-type(3) { left: 200px; }

</style>

<!--
<script src="deck.js/extensions/includedeck/load.js"></script>
<script src="extensions/slides-dev.js"></script>
-->
<script src="extensions/deck-packed.js"></script>
<script src="extensions/slides.js"></script>
<script>go()</script>
</head>

<body>

<div class="deck-container">

<div class="deck-loading-splash" style="background: black; color: chartreuse;"><span class="vcenter" style="font-size: 30px; font-family: Arial; ">Please wait, while our marmots are preparing the hot chocolate…</span></div>

<section class="smart">

# @chunk: chunks/title.md

# @chunk: chunks/objectives.md

## Design of Web Applications <span>{var-cours-n}</span> : Overview {#plan overview}
- Introduction to Version Control and Git {vcs}
- Git basics {git}
- Schyzophrenic Git {multigit}
- Collaborating using Git and GitLab (or github) {gitlab}
- Summing it up {concl}
# @copy:#plan



<!-- ####################################### -->
# @copy:#plan:

## About You {libyli}
- Who already knows Git?
- Who knows any of these?
- CVS, Subversion,
- Mercurial, Baz, GnuArch

## About This Presentation {libyli}
- Objectives
- get convinced by version control systems
- learn practical Git skills
- learn about GitLab for collaboration
- hands on with some “code” (latex document)
- Don't Hesitate {libyli}
- to ask questions
- to interrupt me
- to ping me after, when trying to practice

<!-- ######################################## -->
# @copy:#plan: %+class:inred: .vcs

## Why? {*no-status image-fit bottom-left darkened}
<div class="img" style="background-image: url(media/git/phd101212s.gif)" data-attribution="http://www.phdcomics.com/comics/archive/phd101212s.gif" data-attribution-content="@davclark (PhD comics)"></div>

## Version Control: What? {libyli}
- A version control system (VCS)
- records what you and your collaborators have done
- allows easy replication across machines
- allows you to easily see changes
- allows you to easily experiment new things
- Why dropbox/google drive/... is not sufficient
- safety of your data
- ownership of your data
- semantics of your changes
- Why CVS/Subversion might not be sufficient
- centralized : a host of the repository
- working in the train/plane/countryside
- speed limit
- <blockquote ><p>SVN-Git migration in progress. 8h to retrieve full SVN history, <br/>less than 1min to push full history to Git (same network)!</p></blockquote> {no densequote}

## Git {libyli}
- <blockquote><p>Git (/ɡɪt/) is a distributed revision control and source code management (SCM) system with an emphasis on speed, data integrity, and support for distributed, non-linear workflows. Git was initially designed and developed by Linus Torvalds for Linux kernel development in 2005, and has since become the most widely adopted version control system for software development.</p><cite>wikipedia</cite></blockquote>{densequote}
- History of Git
- open source
- initiated by Linus Torvalds
- first release: 7 April 2005
- version 2.1.2: 30 September 2014
- fast and efficient
- most used
- Good alternative: mercurial (hg)


<!-- ######################################## -->
# @copy:#plan: %+class:inred: .git

## Starting with Git {libyli}
- Initializing your project <br/><pre>git init</pre>
- What's up? <br/><pre>git status</pre>
- Deciding what is relevant <br/> <pre>git add file1 file2 …<br/>git commit</pre>
- first: <a href="#introduceyourself">introduce yourself</a>

## Let's try it // script "simple.txt"
<pre>cp -r base mypaper ; cd mypaper

git init

git status
git add mypaper.tex cvpr.sty
git status
git commit
git status

... and more
</pre>
<a target="_blank" href="script/simple.txt"></a>

## Recap {libyli}
* Beginning
<pre>git init<br/>git add ...<br/>git commit [-m ...]</pre>
* Working
<pre>git status<br/>git add ...<br/>git commit [-m ...]</pre>


## Recap 2 {libyli}
- Keep your project clean: ignoring files
- **.gitignore** file(s)
- **blabla.* ** , **!blabla.my_precious**, ** *~**
- What did I just modify?
<pre>git status<br/>git diff [...]</pre>
- What happened?
<pre>git log</pre>

## Nota Bene (vs CVS, Subversion) {libyli}
- You have the complete repository
- have all commits locally
- commit often, fast and everywhere (train, plane, here)
- merge with 0-stress
- warning: commit ≠ backup
- Need to “**git add**” modifications
- Repository == project
- SVN has a big tree-shaped repository
- SVN allows to "checkout" any subtree
- Git works at the repository level
- you'll have a set of repository
- commits are at the repository level

## GUI for Git
- Bundled with git: <em>git gui</em> // maybe not anymore
- Many others (gitg, qgit, GitX, tortoisegit, Netbeans, ...)
- <a href="http://git-scm.com/downloads/guis">graphical user interfaces for Git</a>
- <a href="https://git.wiki.kernel.org/index.php/InterfacesFrontendsAndTools">huge list of frontends and tools</a>

## Customizing Git {#introduceyourself libyli}
- Introducing yourself
<pre class="smaller">git config --global user.name "John Doe"<br/>git config --global user.email john@doe.com</pre>
- Fancy colors and shortcuts
<pre>git config --global color.ui true<br/><br/>git config --global alias.st status<br/>git config --global alias.ci commit</pre>
- Configuration in **~/.gitconfig**



<!-- ######################################## -->
# @copy:#plan: %+class:inred: .multigit

## About History {libyli}
- Remember **git log**?
- Each commit is written in stone
- parent(s) commit
- modifications
- sha1sum (e.g.    cb6dc3cb1f4f5eb15c1d9b2b25ae741cd73c0554)
<br/>
- can be diff'ed against <br/><pre>git diff cb6dc3...</pre>
- can be retreived <br/><pre>git checkout cb6dc3...</pre>

## Back to the Future: parallel universes
<pre>git log
gitk # or gitg

git checkout 41474a33e098689b...

emacs paper.tex
git commit
gitk
gitk --all

... and more
</pre>
<a target="_blank" href="script/branches.txt"></a>

## Recap
- Branch
- a label for a commit
- automatically follows on new commit (**git commit**)
- Always commit before merging
- commit is cheap, easy and local
- you never loose anything when merging // maybe your temper
- Use of “sha1” or branch-name (e.g. brrrr)
- Shortcuts
<pre>cb6dc3, brrrr, HEAD,<br/>HEAD^, HEAD~, HEAD~~, HEAD~2, HEAD~42,<br/>HEAD^2, cb6dc3^42, tagggg</pre>

## Recap 2
- Moving in the history
<pre>git checkout sha1-or-branch-name</pre>
- Creating a new branch at current position
<pre>git checkout -b new-branch-name</pre>
- Merging “brrrr” into “master”
<pre>git checkout master<br/>git merge brrrr</pre>

## Recap 3
- Automatic **git merge** ⇒ automatic commit
- On conflicting **git merge**
- (partial merge)
- solve conflict
- <em>git add</em>
- <em>git commit</em>
<br/>
- Exploring history
- **git log**
- **gitk [--all]**
- **log --graph --decorate --oneline --all --color**

# Best Practices {no-print}

## Best Practices {libyli}
- commit early and often
- always commit before merge (or pull)
- use meaningful commit messages
- avoid committing
- binary files that change often (NB: word/excel/... are binary)
- generated files (that can be regenerated in a reasonable time)
- temporary files
- keep your git status clean
- don't put git repositories inside git repositories
- <a target="_blank" href="http://sethrobertson.github.io/GitBestPractices/">more</a>


<!-- ######################################## -->
# @copy:#plan: %+class:inred: .gitlab

## What is GitLab (and GitHub)
- GitLab
- a company providing support and advanced features
- an open source project (Community Edition)
- a web application
- collaboration platform
- hosting git repositories
- visualizing repositories
- managing issues/tickets
- <blockquote><p>GitLab offers git repository management, code reviews, issue tracking, activity feeds, wikis.</p></blockquote> {no densequote}

## Let's Go
- Create a repository on GitLab
- Push our content
- link our repository to the remote repository (on GitLab)
- push the changes to this remote repository
- On another machine
- clone the repository
- make changes, commit and push them
- On this machine
- pull changes: fetch them and then merge

## Recap GitLab (and Git remotes) {libyli}
- GitLab project == git repository (+ more)

## More GitLab (additions to git) {libyli}
- Groups
- groups of users (e.g., PhD student and supervisors)
- automatic access to the projects of the group
- Forking
- take a repository on GitLab
- make a “personal” copy of this repository (still on GitLab)
- Merge requests (pull requests in GitHub)
- ask for another repo to integrate changes from your fork
- Issues
- bug
- questions
- feature requests
- Wikis
- set of pages
- (also accessible as a git repository)


<!-- ######################################## -->
# @copy:#plan: %+class:inred: .concl

## Key Points {#key key deck-status-fake-end}
- Version control
- keep track of what happened
- store semantic snapshots/versions of your “code”
- Git
- “distributed” version control: you have a complete repository
- efficient and widely used
- one repository per project
- GitLab : a place to share repositories (projects)
- visualization of the repositories, wiki pages, issue tracker, …
- groups of users (e.g., PhD student and supervisors)
- Links
- <a href="http://pcottle.github.io/learnGitBranching/">interactive learning of branching in Git</a>
- <a href="http://git-scm.com/">official website</a>
- <a href="http://git-scm.com/downloads/guis">graphical user interfaces for Git</a>
- for <a href="http://www.youtube.com/watch?v=4XpnKHJAok8">Git by a git</a>, ask Linus Torvald
- <a href="http://git-scm.com/book">Pro Git book</a> (available online)

## Correspondence git <-> svn {libyli}
- git commit <-> none
- git commit ; git push <-> svn commit
- git fetch <-> none
- git fetch ; git merge <-> svn update
- git pull == git fetch ; git merge
-  {no}
- NB: you can use git to collaborate with SVN users

## Going further
- git remote add
- git tag
- git rebase
- git commit --amend
- git reflog
- git ls-files
- git revert
- git bisect

<!-- key points -->

## Points Clés {key deck-status-fake-end}

</section>

<!-- deck.status snippet -->
<p class="deck-status deck-progress-10"> <span class="deck-status-current"></span> / <span class="deck-status-total"></span><span class="var-author">will be replaced by the author</span><span class="var-title">will be replaced by the title</span></p>

<a data-progress-size=": spe.top(15, 555); height: 45*designRatio; left: slide.right - 90*designRatio; width: 90*designRatio" class="ccby" href="http://en.wikipedia.org/wiki/Creative_Commons_license" title="This work is under CC-BY licence." target="_blank"></a>

<a class="ujm" data-progress-size=": spe.top(15, 525); height: 65*designRatio; left: slide.left; width: 130*designRatio" target="_blank"></a>

</div>
<!-- clicky Cla -->
<script type="text/javascript">
var clicky_site_ids = clicky_site_ids || [];
clicky_site_ids.push(100779706);
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = '//static.getclicky.com/js';
( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
})();
</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/100779706ns.gif" /></p></noscript>


<!-- Histats.com START (aync)-->
<script type="text/javascript">var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.start', '1,2767123,4,0,0,0,00010000']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
(function() {
var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
hs.src = ('http://s10.histats.com/js15_as.js');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();</script>
<noscript><a href="http://www.histats.com" target="_blank"><img src="http://sstatic1.histats.com/0.gif?2767123&101" alt="javascript hit counter" border="0"></a></noscript>
<!-- Histats.com END -->
</body>
</html>