Skip to content

GitLab

Commit ad82e868 authored by Elise Maigne's avatar Elise Maigne
Browse files

change yml to automatic knit

parent 7c52c56b
Hide whitespace changes
Inline Side-by-side
.gitlab-ci.yml
View file @ ad82e868
image: rocker/verse:4.0.0
before_script:
- R -e "install.packages('xaringanthemer')"
pages:
stage: deploy
script:
- Rscript -e "rmarkdown::render('presentation.Rmd', output_file = 'index.html')"
- mkdir public
- cp presentation.html public/index.html
- cp xaringan-themer.css mycss.css public/
- cp -r images/ libs/ public/
- cp index.html xaringan-themer.css public/
- cp -r index_files/ images/ public/
artifacts:
paths:
- public
only:
- main
- master
interruptible: true
presentation.html deleted 100644 → 0
View file @ 7c52c56b
<!DOCTYPE html>
<html lang="" xml:lang="">
<head>
<title>L’écosystème Git</title>
<meta charset="utf-8" />
<meta name="author" content="Elise Maigné" />
<meta name="date" content="2021-11-22" />
<script src="libs/header-attrs/header-attrs.js"></script>
<script src="libs/htmlwidgets/htmlwidgets.js"></script>
<script src="libs/viz/viz.js"></script>
<link href="libs/DiagrammeR-styles/styles.css" rel="stylesheet" />
<script src="libs/grViz-binding/grViz.js"></script>
<script src="libs/pymjs/pym.v1.min.js"></script>
<link rel="stylesheet" href="xaringan-themer.css" type="text/css" />
<link rel="stylesheet" href="mycss.css" type="text/css" />
</head>
<body>
<textarea id="source">
class: center, middle, inverse, title-slide
# L’écosystème Git
## Git : fonctionnement, outils, possibilités
### Elise Maigné
### 2021-11-22
---
class: center, middle
# git c'est quoi ?
&lt;img src="images/logo_git.png", width="300" height="300"&gt;
---
# Git
Un système de gestion de version (voir [Différence avec SVN](#bonus)).
--
Qui permet :
- De sauvegarder ses codes (si serveur distant)
- De conserver l'historique des fichiers (qui a fait quoi ?)
- Visualiser les changements au cours du temps
- Travailler à plusieurs sur le même code
- Revenir en arrière, changer d'avis, tester une solution dans une branche séparée
--
.center[![ok](images/index.png)]
.center[![reprod](images/reproductibilite_transparent.png)]
---
# Pourquoi je m'y suis pas mise avant ?
- 1ers mails sur git remontent à 2013 dans mon équipe et 2014 groupe RR.
- J'avais vraiment du mal à comprendre comment ça marchait et ce que je pouvais faire.
- J'étais perdue au milieu de tous les termes "git/push/github/tortoise".
- Différence de langages entre info/stat
--
&lt;/br&gt;&lt;/br&gt;
.center[
*"Elise j'ai mis en place un SVN, c'est facile tu synchronyse avec tortoise et tu push tes modifs"*
![ok](images/cry.png)]
---
class: center, middle
# Git et son écosystème
&lt;img src="images/logo_git.png", width="300" height="300"&gt;
---
# Etape 1
#### un projet (de code) que l'on veut versionner
&lt;center&gt;
&lt;img src="images/vocab1.png", width="90%"&gt;
&lt;/center&gt;
---
# Etape 2 (facultatif sur linux et mac)
#### un logiciel plus sympa que la ligne de commande
&lt;center&gt;
&lt;img src="images/vocab2.png", width="90%"&gt;
&lt;/center&gt;
---
# Etape 3 (facultative)
#### choisir un endroit pour déposer son code
&lt;center&gt;
&lt;img src="images/vocab3.png", width="90%"&gt;
&lt;/center&gt;
---
class: center, middle
# Git fonctionnement
## Quelques commandes de base
---
# Initialisation
### Sur sa machine
1. Depuis un projet (dossier) :
```bash
git init
```
--
### Sur un serveur distant (gitlab par exemple)
1. Création d'un projet sur une forge
2. Clone de ce projet sur sa machine en local avec `git clone`
```bash
git clone git@forgemia.inra.fr:elise.maigne/2021_git.git
```
--
&lt;center&gt;
<div id="htmlwidget-e90ffe28e8b51a154c0d" style="width:504px;height:108px;" class="grViz html-widget"></div>
<script>HTMLWidgets.pymChild = new pym.Child();HTMLWidgets.addPostRenderHandler(function(){
setTimeout(function(){HTMLWidgets.pymChild.sendHeight();},100);
});</script>
<script type="application/json" data-for="htmlwidget-e90ffe28e8b51a154c0d">{"x":{"diagram":"\n digraph {\n rankdir = LR;\n bgcolor = \"#EAEAEA\";\n edge [minlen = 3]\n node [fontsize=40 shape=cylinder style=filled color=\"#822744\" fillcolor=\"#c98399\" fontcolor=\"#822744\" width=2 height=1.5]\n local [label=local penwidth=4]\n remote [label=remote penwidth=4]\n node [fontcolor=\"#b0b0b0\" color=\"#b0b0b0\" fillcolor = \"#ededed\"]\n stage [label=stage]\n head [label=HEAD]\n local -> stage -> head -> remote\n }\n","config":{"engine":"dot","options":null}},"evals":[],"jsHooks":[]}</script>
&lt;/center&gt;
---
# Un commit = un changement
#### 1. On indique à git qu'il doit suivre ces fichiers et on intègre les modifications au prochain commit `git add`
.pull-left[
```bash
git add *
```
]
.pull-right[
```bash
git add nomFichier.R
```
]
--
#### 2. On fait un commit avec `git commit`
```r
git commit -m "Ma belle modification"
```
--
&lt;center&gt;
<div id="htmlwidget-644c432baf33e19b867a" style="width:504px;height:108px;" class="grViz html-widget"></div>
<script>HTMLWidgets.pymChild = new pym.Child();HTMLWidgets.addPostRenderHandler(function(){
setTimeout(function(){HTMLWidgets.pymChild.sendHeight();},100);
});</script>
<script type="application/json" data-for="htmlwidget-644c432baf33e19b867a">{"x":{"diagram":"\n digraph {\n rankdir = TB;\n bgcolor = \"#EAEAEA\";\n edge [minlen = 3]\n node [fontsize=40 shape=cylinder style=filled color=\"#822744\" fillcolor=\"#c98399\" fontcolor=\"#822744\" width=2 height=1.5]\n local [label=local penwidth=4]\n stage [label=stage]\n head [label=HEAD]\n node [fontcolor=\"#b0b0b0\" color=\"#b0b0b0\" fillcolor = \"#ededed\"]\n remote [label=remote penwidth=4]\n local -> stage [label = add fontsize=30 penwidth=4]\n stage -> head [label=commit fontsize=30 penwidth=4]\n head -> remote\n {rank = same; local; stage; head; remote;}; \n }","config":{"engine":"dot","options":null}},"evals":[],"jsHooks":[]}</script>
&lt;/center&gt;
--
En pratique (chez moi - sur RStudio) :
```bash
git add *
git commit -m "Ce que j'ai fait comme modif"
```
---
# Envoi des modifications au remote
#### Envoi des commits en attente sur le HEAD
```bash
git push
```
&lt;center&gt;
<div id="htmlwidget-b09f7c264842b595133e" style="width:504px;height:108px;" class="grViz html-widget"></div>
<script>HTMLWidgets.pymChild = new pym.Child();HTMLWidgets.addPostRenderHandler(function(){
setTimeout(function(){HTMLWidgets.pymChild.sendHeight();},100);
});</script>
<script type="application/json" data-for="htmlwidget-b09f7c264842b595133e">{"x":{"diagram":"\n digraph {\n rankdir = TB;\n bgcolor = \"#EAEAEA\";\n edge [minlen = 3]\n node [fontsize=40 shape=cylinder style=filled color=\"#822744\" fillcolor=\"#c98399\" fontcolor=\"#822744\" width=2 height=1.5]\n head [label=HEAD]\n remote [label=remote penwidth=4]\n node [fontcolor=\"#b0b0b0\" color=\"#b0b0b0\" fillcolor = \"#ededed\"]\n local [label=local penwidth=4]\n stage [label=stage]\n local -> stage -> head\n head -> remote [label = push fontsize=30 penwidth=4]\n {rank = same; local; stage; head; remote;}; \n }","config":{"engine":"dot","options":null}},"evals":[],"jsHooks":[]}</script>
&lt;/center&gt;
#### Récupération de l'état du remote
```bash
git pull
```
&lt;center&gt;
<div id="htmlwidget-f8325999d4dcb613a7d4" style="width:504px;height:108px;" class="grViz html-widget"></div>
<script>HTMLWidgets.pymChild = new pym.Child();HTMLWidgets.addPostRenderHandler(function(){
setTimeout(function(){HTMLWidgets.pymChild.sendHeight();},100);
});</script>
<script type="application/json" data-for="htmlwidget-f8325999d4dcb613a7d4">{"x":{"diagram":"\n digraph {\n rankdir = TB;\n bgcolor = \"#EAEAEA\";\n edge [minlen = 3]\n node [fontsize=40 shape=cylinder style=filled color=\"#822744\" fillcolor=\"#c98399\" fontcolor=\"#822744\" width=2 height=1.5]\n local [label=local penwidth=4]\n remote [label=remote penwidth=4]\n node [fontcolor=\"#b0b0b0\" color=\"#b0b0b0\" fillcolor = \"#ededed\"]\n head [label=HEAD]\n stage [label=stage]\n local -> stage -> head -> remote\n remote -> local [label = pull fontsize=30 constraint=false penwidth=4]\n {rank = same; local; stage; head; remote;}; \n }","config":{"engine":"dot","options":null}},"evals":[],"jsHooks":[]}</script>
&lt;/center&gt;
---
# Processus "classique" de travail avec git
#### 1. Un projet versionné sur un serveur distant
#### 2. Je travaille comme d'habitude sur mes fichiers
#### 3. De temps en temps = une modification en particulier :
```bash
git add *
git commit -m "Ce que j'ai fait"
git push
```
#### 4. Si on travaille à plusieurs : on récupère les modifications des autres (avant de me remettre à travailler)
```bash
git pull
```
---
# Visualiser l'historique = les commits
[Exemple :](https://forgemia.inra.fr/elise.maigne/2021_package_renv/-/commits/master/)
![excommits](images/commits_renv.png)
---
# Regarder les différences entre le local et un autre état
```bash
git diff
git diff --staged
git diff HEAD
```
![gitdiff](images/gitdiff.png)
---
# Les fichiers git
![fichiers](images/fichiersgit.png)
- Un dossier `.git` : contient tous les fichiers de gestion de version (on ne va jamais dedans).
--
- Un fichier `.gitignore` : permet d'exclure certains fichiers ou dossiers des commits.
--
Exemple de contenu d'un `.gitignore`:
```bash
.Rproj.user
.Rhistory
.RData
.Ruserdata
/data
```
En particulier on ne commite pas les données.
---
# Les branches
La branche par défaut est **main** (feu **master**).
Il est possible de créer de nouvelles branches, pour tester une autre direction, ajouter une fonctionalité.
--
.pull-left[
Projet d'application à plusieurs, 1 branche = 1 fonctionalité, plusieurs fonctionalités en même temps.
<div id="htmlwidget-5f853ca1817e5cd22643" style="width:504px;height:288px;" class="grViz html-widget"></div>
<script>HTMLWidgets.pymChild = new pym.Child();HTMLWidgets.addPostRenderHandler(function(){
setTimeout(function(){HTMLWidgets.pymChild.sendHeight();},100);
});</script>
<script type="application/json" data-for="htmlwidget-5f853ca1817e5cd22643">{"x":{"diagram":"\ndigraph {\n\trankdir=\"LR\";\n\tbgcolor=\"transparent\";\n\tnode[width=0.15, height=0.15, shape=point, color=\"#822744\"];\n\tedge[weight=2, arrowhead=none, color=\"#822744\"];\n\tnode[group=master];\n\t1 -> 2 -> 3 -> 4 -> 5;\n\tnode[group=branch];\n\t2 -> 6 -> 7 -> 4;\n\tnode[group=branch];\n\t2 -> 8 -> 9 -> 10;\n\tnode[group=branch];\n\t2 -> 11 -> 12 -> 13 -> 14 -> 15;\n}","config":{"engine":"dot","options":null}},"evals":[],"jsHooks":[]}</script>
]
--
.pull-right[
Développement d'un package R : une branche correspond à une modification majeure du code. La branche main est toujours supposée tourner.
<div id="htmlwidget-f73e94314218f55a901c" style="width:504px;height:288px;" class="grViz html-widget"></div>
<script>HTMLWidgets.pymChild = new pym.Child();HTMLWidgets.addPostRenderHandler(function(){
setTimeout(function(){HTMLWidgets.pymChild.sendHeight();},100);
});</script>
<script type="application/json" data-for="htmlwidget-f73e94314218f55a901c">{"x":{"diagram":"\ndigraph {\n\trankdir=\"LR\";\n\tbgcolor=\"transparent\";\n\tnode[width=0.15, height=0.15, shape=point, color=\"#822744\"];\n\tedge[weight=2, arrowhead=none, color=\"#822744\"];\n\tnode[group=master];\n\t1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7 -> 8;\n\tnode[group=branch];\n\t2 -> 9 -> 10 -> 11 -> 3;\n\tnode[group=branch];\n\t5 -> 12 -> 13 -> 14 -> 6;\n}","config":{"engine":"dot","options":null}},"evals":[],"jsHooks":[]}</script>
]
---
# Les branches
#### Création d'une branche
```bash
git branch mabranche
```
#### Changer de branche
```bash
git checkout mabranche
git checkout monautrebranche
```
On ne peut changer de branche uniquement si toutes les modifications (des fichiers suivis) sont commitées.
---
# Les branches
#### Fusionner des branches
```bash
git checkout mabranche
git merge main
```
#### Les conflits
Si un fichier est modifié 2 fois au même endroit.
```bash
&lt;&lt;&lt;&lt;&lt;&lt;&lt; HEAD:fichier.R
J'avais mis ça avant dans ma (vieille) branche
======
Et maintenant j'ai ça, je ne suis qu'un logiciel je ne sais pas quoi faire
&gt;&gt;&gt;&gt;&gt;&gt;&gt; iss53:fichier.R
```
Il faut choisir entre les 2 versions pour pouvoir finaliser le merge
---
# Possibilités (pour des statisticiens)
#### Publication/partage du code
--
#### gitlab pages
Faire des sites webs très facilement ! avec juste un fichier yml à la racine du dépôt
Exemple : j'ai un projet qui crée un fichier html à l'aide de Rmarkdown. --&gt; Si j'active gitlab pages je peux en faire un site web.
(exemple : https://elise.maigne.pages.mia.inra.fr/2021_git/index.html)
--
#### CI/CD (integration continue)
Par exemple compiler ses Rmd automatiquement.
Faire des tests automatiques.
--
#### Enseignement
Un projet "principal" forké (`git fork`) par les étudiants qui partent de la même copie et faire leurs propres modifications, indépendemment les un des autres.
---
# Vocabulaire
.pull-left[
#### Au démarrage
- `git clone`
- `git fork`
#### Faire des modifications
- `git add` + `git commit -m "Message'`
- `git push`
- `git pull`
#### Visualiser
- `git diff`
- `git blame`
]
.pull-right[
#### Branches
- `git branch`
- `git checkout`
- `git merge`
- `git rebase`
#### Revenir en arrière
- `git revert`
#### Savoir où on en est
- `git status`
...
]
---
# des questions ?
Lien vers le dépôt de cette présentation :
https://forgemia.inra.fr/elise.maigne/2021_git/
#### Références
Merci aux sites suivants :
- https://perso.liris.cnrs.fr/pierre-antoine.champin/enseignement/intro-git/
- http://rogerdudler.github.io/git-guide/index.fr.html
- Doc de la forgemia : https://forgemia.inra.fr/adminforgemia/doc-public/-/wikis/GIT-sous-Windows
- branches git en graphviz : https://correl.phoenixinquis.net/2015/07/12/git-graphs.html
---
name: bonus
# Bonus - Différence SVN/Git ()
#### SVN
SVN est un système de contrôle de version **centralisé**. Vous avez un serveur qui contient votre référentiel de code. Vous pouvez en extraire du code sur votre ordinateur local, y apporter des modifications locales, puis les renvoyer dans le référentiel central.
Votre copie du code correspond généralement à ce que vous avez extrait et à la dernière version. De nombreuses opérations nécessiteront une connexion réseau au référentiel central.
#### Git
Git est un système de contrôle de version **décentralisé**. Chaque participant a un clone de l’ensemble du référentiel. Il est utilisé pour suivre les changements dans le code source.
La plupart des opérations ne nécessitent pas de connexion réseau, car elles ne travaillent que sur votre clone du référentiel.
*Source : https://waytolearnx.com/2019/03/difference-entre-git-et-svn.html*
</textarea>
<style data-target="print-only">@media screen {.remark-slide-container{display:block;}.remark-slide-scaler{box-shadow:none;}}</style>
<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
<script>var slideshow = remark.create({
"ratio": "16:9",
"highlightStyle": "github",
"highlightLines": true,
"countIncrementalSlides": false
});
if (window.HTMLWidgets) slideshow.on('afterShowSlide', function (slide) {
window.dispatchEvent(new Event('resize'));
});
(function(d) {
var s = d.createElement("style"), r = d.querySelector(".remark-slide-scaler");
if (!r) return;
s.type = "text/css"; s.innerHTML = "@page {size: " + r.style.width + " " + r.style.height +"; }";
d.head.appendChild(s);
})(document);
(function(d) {
var el = d.getElementsByClassName("remark-slides-area");
if (!el) return;
var slide, slides = slideshow.getSlides(), els = el[0].children;
for (var i = 1; i < slides.length; i++) {
slide = slides[i];
if (slide.properties.continued === "true" || slide.properties.count === "false") {
els[i - 1].className += ' has-continuation';
}
}
var s = d.createElement("style");
s.type = "text/css"; s.innerHTML = "@media print { .has-continuation { display: none; } }";
d.head.appendChild(s);
})(document);
// delete the temporary CSS (for displaying all slides initially) when the user
// starts to view slides
(function() {
var deleted = false;
slideshow.on('beforeShowSlide', function(slide) {
if (deleted) return;
var sheets = document.styleSheets, node;
for (var i = 0; i < sheets.length; i++) {
node = sheets[i].ownerNode;
if (node.dataset["target"] !== "print-only") continue;
node.parentNode.removeChild(node);
}
deleted = true;
});
})();
(function() {
"use strict"
// Replace <script> tags in slides area to make them executable
var scripts = document.querySelectorAll(
'.remark-slides-area .remark-slide-container script'
);
if (!scripts.length) return;
for (var i = 0; i < scripts.length; i++) {
var s = document.createElement('script');
var code = document.createTextNode(scripts[i].textContent);
s.appendChild(code);
var scriptAttrs = scripts[i].attributes;
for (var j = 0; j < scriptAttrs.length; j++) {
s.setAttribute(scriptAttrs[j].name, scriptAttrs[j].value);
}
scripts[i].parentElement.replaceChild(s, scripts[i]);
}
})();
(function() {
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
links[i].target = '_blank';
}
}
})();
// adds .remark-code-has-line-highlighted class to <pre> parent elements
// of code chunks containing highlighted lines with class .remark-code-line-highlighted
(function(d) {
const hlines = d.querySelectorAll('.remark-code-line-highlighted');
const preParents = [];
const findPreParent = function(line, p = 0) {
if (p > 1) return null; // traverse up no further than grandparent
const el = line.parentElement;
return el.tagName === "PRE" ? el : findPreParent(el, ++p);
};
for (let line of hlines) {
let pre = findPreParent(line);
if (pre && !preParents.includes(pre)) preParents.push(pre);
}
preParents.forEach(p => p.classList.add("remark-code-has-line-highlighted"));
})(document);</script>
<script>
slideshow._releaseMath = function(el) {
var i, text, code, codes = el.getElementsByTagName('code');
for (i = 0; i < codes.length;) {
code = codes[i];
if (code.parentNode.tagName !== 'PRE' && code.childElementCount === 0) {
text = code.textContent;
if (/^\\\((.|\s)+\\\)$/.test(text) || /^\\\[(.|\s)+\\\]$/.test(text) ||
/^\$\$(.|\s)+\$\$$/.test(text) ||
/^\\begin\{([^}]+)\}(.|\s)+\\end\{[^}]+\}$/.test(text)) {
code.outerHTML = code.innerHTML; // remove <code></code>
continue;
}
}
i++;
}
};
slideshow._releaseMath(document);
</script>
<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
(function () {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML';
if (location.protocol !== 'file:' && /^https?:/.test(script.src))
script.src = script.src.replace(/^https?:/, '');
document.getElementsByTagName('head')[0].appendChild(script);
})();
</script>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment