public-courses / 2017-pwa-public

Download as
Browse Code »

Commit ec2b535539f28c3dbcc7eefce31a42b028451fe8

Authored by Rémi Emonet
1 parent 769f8125ba
Exists in master

git + secu

Showing 3 changed files with 389 additions and 0 deletions

cours-git.html View file @ ec2b535
  1 +<!DOCTYPE html>
  2 +<html>
  3 + <head>
  4 + <meta charset="utf-8">
  5 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6 +
  7 + <title>Programmation Web Avancée   GIT</title>
  8 + <meta name="cours-n" content="6">
  9 +
  10 + <meta name="author" content="Rémi Emonet">
  11 + <meta name="venue" content="PWA M1 DSC">
  12 + <meta name="date" content="2017">
  13 + <meta name="affiliation" content="Université Jean Monnet − Laboratoire Hubert Curien">
  14 +
  15 + <style type="text/css">
  16 +.slide.densish>ul {font-size: 70%;}
  17 +blockquote {padding: .3em !important;}
  18 +blockquote p {font-size: 40%}
  19 +blockquote cite {float: right; font-size: 40% !important;}
  20 +pre, .slide li strong {background: #EFE; color: #000;} /* TODO: change for export/printing */
  21 +
  22 +.winner { top: 20px; width: 80px; display: block; position: absolute;}
  23 +.winner:nth-of-type(1) { left: 20px; }
  24 +.winner:nth-of-type(2) { left: 110px; }
  25 +.winner:nth-of-type(3) { left: 200px; }
  26 +
  27 + </style>
  28 +
  29 + <!--
  30 + <script src="deck.js/extensions/includedeck/load.js"></script>
  31 + <script src="extensions/slides-dev.js"></script>
  32 + -->
  33 + <script src="extensions/deck-packed.js"></script>
  34 + <script src="extensions/slides.js"></script>
  35 + <script>go()</script>
  36 + </head>
  37 +
  38 +<body>
  39 +
  40 +<div class="deck-container">
  41 +
  42 + <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>
  43 +
  44 +<section class="smart">
  45 +
  46 +# @chunk: chunks/title.md
  47 +
  48 +# @chunk: chunks/objectives.md
  49 +
  50 +## Design of Web Applications <span>{var-cours-n}</span> : Overview {#plan overview}
  51 +- Introduction to Version Control and Git {vcs}
  52 +- Git basics {git}
  53 +- Schyzophrenic Git {multigit}
  54 +- Collaborating using Git and GitLab (or github) {gitlab}
  55 +- Summing it up {concl}
  56 +# @copy:#plan
  57 +
  58 +
  59 +
  60 +<!-- ####################################### -->
  61 +# @copy:#plan:
  62 +
  63 +## About You {libyli}
  64 +- Who already knows Git?
  65 +- Who knows any of these?
  66 + - CVS, Subversion,
  67 + - Mercurial, Baz, GnuArch
  68 +
  69 +## About This Presentation {libyli}
  70 +- Objectives
  71 + - get convinced by version control systems
  72 + - learn practical Git skills
  73 + - learn about GitLab for collaboration
  74 + - hands on with some “code” (latex document)
  75 +- Don't Hesitate {libyli}
  76 + - to ask questions
  77 + - to interrupt me
  78 + - to ping me after, when trying to practice
  79 +
  80 +<!-- ######################################## -->
  81 +# @copy:#plan: %+class:inred: .vcs
  82 +
  83 +## Why? {*no-status image-fit bottom-left darkened}
  84 +<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>
  85 +
  86 +## Version Control: What? {libyli}
  87 +- A version control system (VCS)
  88 + - records what you and your collaborators have done
  89 + - allows easy replication across machines
  90 + - allows you to easily see changes
  91 + - allows you to easily experiment new things
  92 +- Why dropbox/google drive/... is not sufficient
  93 + - safety of your data
  94 + - ownership of your data
  95 + - semantics of your changes
  96 +- Why CVS/Subversion might not be sufficient
  97 + - centralized : a host of the repository
  98 + - working in the train/plane/countryside
  99 + - speed limit
  100 +- <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}
  101 +
  102 +## Git {libyli}
  103 +- <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}
  104 +- History of Git
  105 + - open source
  106 + - initiated by Linus Torvalds
  107 + - first release: 7 April 2005
  108 + - version 2.1.2: 30 September 2014
  109 + - fast and efficient
  110 + - most used
  111 +- Good alternative: mercurial (hg)
  112 +
  113 +
  114 +<!-- ######################################## -->
  115 +# @copy:#plan: %+class:inred: .git
  116 +
  117 +## Starting with Git {libyli}
  118 +- Initializing your project <br/><pre>git init</pre>
  119 +- What's up? <br/><pre>git status</pre>
  120 +- Deciding what is relevant <br/> <pre>git add file1 file2 …<br/>git commit</pre>
  121 +- first: <a href="#introduceyourself">introduce yourself</a>
  122 +
  123 +## Let's try it // script "simple.txt"
  124 +<pre>cp -r base mypaper ; cd mypaper
  125 +
  126 +git init
  127 +
  128 +git status
  129 +git add mypaper.tex cvpr.sty
  130 +git status
  131 +git commit
  132 +git status
  133 +
  134 +... and more
  135 +</pre>
  136 +<a target="_blank" href="script/simple.txt">…</a>
  137 +
  138 +## Recap {libyli}
  139 +* Beginning
  140 + <pre>git init<br/>git add ...<br/>git commit [-m ...]</pre>
  141 +* Working
  142 + <pre>git status<br/>git add ...<br/>git commit [-m ...]</pre>
  143 +
  144 +
  145 +## Recap 2 {libyli}
  146 +- Keep your project clean: ignoring files
  147 + - **.gitignore** file(s)
  148 + - **blabla.* ** , **!blabla.my_precious**, ** *~**
  149 +- What did I just modify?
  150 + <pre>git status<br/>git diff [...]</pre>
  151 +- What happened?
  152 + <pre>git log</pre>
  153 +
  154 +## Nota Bene (vs CVS, Subversion) {libyli}
  155 +- You have the complete repository
  156 + - have all commits locally
  157 + - commit often, fast and everywhere (train, plane, here)
  158 + - merge with 0-stress
  159 + - warning: commit ≠ backup
  160 +- Need to “**git add**” modifications
  161 +- Repository == project
  162 + - SVN has a big tree-shaped repository
  163 + - SVN allows to "checkout" any subtree
  164 + - Git works at the repository level
  165 + - you'll have a set of repository
  166 + - commits are at the repository level
  167 +
  168 +## GUI for Git
  169 +- Bundled with git: <em>git gui</em> // maybe not anymore
  170 +- Many others (gitg, qgit, GitX, tortoisegit, Netbeans, ...)
  171 +- <a href="http://git-scm.com/downloads/guis">graphical user interfaces for Git</a>
  172 +- <a href="https://git.wiki.kernel.org/index.php/InterfacesFrontendsAndTools">huge list of frontends and tools</a>
  173 +
  174 +## Customizing Git {#introduceyourself libyli}
  175 +- Introducing yourself
  176 + <pre class="smaller">git config --global user.name "John Doe"<br/>git config --global user.email john@doe.com</pre>
  177 +- Fancy colors and shortcuts
  178 + <pre>git config --global color.ui true<br/><br/>git config --global alias.st status<br/>git config --global alias.ci commit</pre>
  179 +- Configuration in **~/.gitconfig**
  180 +
  181 +
  182 +
  183 +<!-- ######################################## -->
  184 +# @copy:#plan: %+class:inred: .multigit
  185 +
  186 +## About History {libyli}
  187 +- Remember **git log**?
  188 +- Each commit is written in stone
  189 + - parent(s) commit
  190 + - modifications
  191 + - sha1sum (e.g.    cb6dc3cb1f4f5eb15c1d9b2b25ae741cd73c0554)
  192 +<br/>
  193 +- can be diff'ed against <br/><pre>git diff cb6dc3...</pre>
  194 +- can be retreived <br/><pre>git checkout cb6dc3...</pre>
  195 +
  196 +## Back to the Future: parallel universes
  197 +<pre>git log
  198 +gitk # or gitg
  199 +
  200 +git checkout 41474a33e098689b...
  201 +
  202 +emacs paper.tex
  203 +git commit
  204 +gitk
  205 +gitk --all
  206 +
  207 +... and more
  208 +</pre>
  209 +<a target="_blank" href="script/branches.txt">…</a>
  210 +
  211 +## Recap
  212 +- Branch
  213 + - a label for a commit
  214 + - automatically follows on new commit (**git commit**)
  215 +- Always commit before merging
  216 + - commit is cheap, easy and local
  217 + - you never loose anything when merging // maybe your temper
  218 +- Use of “sha1” or branch-name (e.g. brrrr)
  219 +- Shortcuts
  220 +<pre>cb6dc3, brrrr, HEAD,<br/>HEAD^, HEAD~, HEAD~~, HEAD~2, HEAD~42,<br/>HEAD^2, cb6dc3^42, tagggg</pre>
  221 +
  222 +## Recap 2
  223 +- Moving in the history
  224 +<pre>git checkout sha1-or-branch-name</pre>
  225 +- Creating a new branch at current position
  226 +<pre>git checkout -b new-branch-name</pre>
  227 +- Merging “brrrr” into “master”
  228 +<pre>git checkout master<br/>git merge brrrr</pre>
  229 +
  230 +## Recap 3
  231 +- Automatic **git merge** ⇒ automatic commit
  232 +- On conflicting **git merge**
  233 + - (partial merge)
  234 + - solve conflict
  235 + - <em>git add</em>
  236 + - <em>git commit</em>
  237 +<br/>
  238 +- Exploring history
  239 + - **git log**
  240 + - **gitk [--all]**
  241 + - **log --graph --decorate --oneline --all --color**
  242 +
  243 +# Best Practices {no-print}
  244 +
  245 +## Best Practices {libyli}
  246 +- commit early and often
  247 +- always commit before merge (or pull)
  248 +- use meaningful commit messages
  249 +- avoid committing
  250 + - binary files that change often (NB: word/excel/... are binary)
  251 + - generated files (that can be regenerated in a reasonable time)
  252 + - temporary files
  253 +- keep your git status clean
  254 +- don't put git repositories inside git repositories
  255 +- <a target="_blank" href="http://sethrobertson.github.io/GitBestPractices/">more</a>
  256 +
  257 +
  258 +<!-- ######################################## -->
  259 +# @copy:#plan: %+class:inred: .gitlab
  260 +
  261 +## What is GitLab (and GitHub)
  262 +- GitLab
  263 + - a company providing support and advanced features
  264 + - an open source project (Community Edition)
  265 + - a web application
  266 + - collaboration platform
  267 + - hosting git repositories
  268 + - visualizing repositories
  269 + - managing issues/tickets
  270 +- <blockquote><p>GitLab offers git repository management, code reviews, issue tracking, activity feeds, wikis.</p></blockquote> {no densequote}
  271 +
  272 +## Let's Go
  273 +- Create a repository on GitLab
  274 +- Push our content
  275 + - link our repository to the remote repository (on GitLab)
  276 + - push the changes to this remote repository
  277 +- On another machine
  278 + - clone the repository
  279 + - make changes, commit and push them
  280 +- On this machine
  281 + - pull changes: fetch them and then merge
  282 +
  283 +## Recap GitLab (and Git remotes) {libyli}
  284 +- GitLab project == git repository (+ more)
  285 +
  286 +## More GitLab (additions to git) {libyli}
  287 +- Groups
  288 + - groups of users (e.g., PhD student and supervisors)
  289 + - automatic access to the projects of the group
  290 +- Forking
  291 + - take a repository on GitLab
  292 + - make a “personal” copy of this repository (still on GitLab)
  293 +- Merge requests (pull requests in GitHub)
  294 + - ask for another repo to integrate changes from your fork
  295 +- Issues
  296 + - bug
  297 + - questions
  298 + - feature requests
  299 +- Wikis
  300 + - set of pages
  301 + - (also accessible as a git repository)
  302 +
  303 +
  304 +<!-- ######################################## -->
  305 +# @copy:#plan: %+class:inred: .concl
  306 +
  307 +## Key Points {#key key deck-status-fake-end}
  308 +- Version control
  309 + - keep track of what happened
  310 + - store semantic snapshots/versions of your “code”
  311 +- Git
  312 + - “distributed” version control: you have a complete repository
  313 + - efficient and widely used
  314 + - one repository per project
  315 +- GitLab : a place to share repositories (projects)
  316 + - visualization of the repositories, wiki pages, issue tracker, …
  317 + - groups of users (e.g., PhD student and supervisors)
  318 +- Links
  319 + - <a href="http://pcottle.github.io/learnGitBranching/">interactive learning of branching in Git</a>
  320 + - <a href="http://git-scm.com/">official website</a>
  321 + - <a href="http://git-scm.com/downloads/guis">graphical user interfaces for Git</a>
  322 + - for <a href="http://www.youtube.com/watch?v=4XpnKHJAok8">Git by a git</a>, ask Linus Torvald
  323 + - <a href="http://git-scm.com/book">Pro Git book</a> (available online)
  324 +
  325 +## Correspondence git <-> svn {libyli}
  326 +- git commit <-> none
  327 +- git commit ; git push <-> svn commit
  328 +- git fetch <-> none
  329 +- git fetch ; git merge <-> svn update
  330 +- git pull == git fetch ; git merge
  331 +-  {no}
  332 +- NB: you can use git to collaborate with SVN users
  333 +
  334 +## Going further
  335 +- git remote add
  336 +- git tag
  337 +- git rebase
  338 +- git commit --amend
  339 +- git reflog
  340 +- git ls-files
  341 +- git revert
  342 +- git bisect
  343 +
  344 +<!-- key points -->
  345 +
  346 +## Points Clés {key deck-status-fake-end}
  347 +
  348 +</section>
  349 +
  350 + <!-- deck.status snippet -->
  351 + <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>
  352 +
  353 + <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>
  354 +
  355 + <a class="ujm" data-progress-size=": spe.top(15, 525); height: 65*designRatio; left: slide.left; width: 130*designRatio" target="_blank"></a>
  356 +
  357 +</div>
  358 +<!-- clicky Cla -->
  359 +<script type="text/javascript">
  360 +var clicky_site_ids = clicky_site_ids || [];
  361 +clicky_site_ids.push(100779706);
  362 +(function() {
  363 + var s = document.createElement('script');
  364 + s.type = 'text/javascript';
  365 + s.async = true;
  366 + s.src = '//static.getclicky.com/js';
  367 + ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
  368 +})();
  369 +</script>
  370 +<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/100779706ns.gif" /></p></noscript>
  371 +
  372 +
  373 +<!-- Histats.com START (aync)-->
  374 +<script type="text/javascript">var _Hasync= _Hasync|| [];
  375 +_Hasync.push(['Histats.start', '1,2767123,4,0,0,0,00010000']);
  376 +_Hasync.push(['Histats.fasi', '1']);
  377 +_Hasync.push(['Histats.track_hits', '']);
  378 +(function() {
  379 +var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
  380 +hs.src = ('http://s10.histats.com/js15_as.js');
  381 +(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
  382 +})();</script>
  383 +<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>
  384 +<!-- Histats.com END -->
  385 +</body>
  386 +</html>
index.html View file @ ec2b535
... ... @@ -48,6 +48,9 @@
48 48 <a class="tile" href="cours-03.html" style="font-size:80%;">Slides 3 <br/> MVC, Spring+Thymeleaf</a>
49 49 <a class="tile" href="cours-04.html">Slides 4 <br/> Projet, TP1</a>
50 50 <a class="tile" href="cours-05.html">Slides 5 <br/> Thymeleaf, DI</a>
  51 + <a class="tile" href="cours-05.html">Slides 5 <br/> Thymeleaf, DI</a>
  52 + <a class="tile" href="cours-git.html">Slides GIT <br/> (not so standalone)</a>
  53 + <a class="tile" href="raw/https-secu-utilisateurs.zip">Code <br/> (https, secu, users)</a>
51 54 </div>
52 55  
53 56 <h2>Code des séances</h2>
raw/https-secu-utilisateurs.zip View file @ ec2b535

No preview for this file type