class: center, middle, inverse, title-slide # Introducción al versionado de código y trabajo colaborativo ## Seminarios MEDIA (CURE, UdelaR) ### Guzmán López | ✉️
guzmanlop@protonmail.com
### 18 de junio de 2021 --- <style type="text/css"> .remark-slide-content { font-size: 30px; } .orange { color: #FF8A65; font-weight: bold; } .blue { color: #64B5F6; font-weight: bold; } </style> # Presentación .pull-left[ **Versionado de código y trabajo colaborativo** - ¿Qué es `git`? - ¿Cómo funciona? - Ejemplo práctico con `git` - ¿Qué es un repositorio remoto? - Red social de programadores - Ejemplo práctico con GitHub ] .pull-right[ .center[![xkcd caricature](data:image/png;base64,#https://imgs.xkcd.com/comics/git.png)] ] --- # ¿Qué es git? .pull-left[ - Herramienta para coordinar el desarrollo de código colaborativo - Software para controlar versiones de archivos - Creado por Linus Torvalds para 👉🏾 desarrollar el kernel Linux - Es Software Libre, licencia GPLv2 ] .pull-right[ .center[![git logo](data:image/png;base64,#https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Git-logo.svg/250px-Git-logo.svg.png)] .center[<img src="data:image/png;base64,#https://upload.wikimedia.org/wikipedia/commons/b/b1/LinuxCon_Europe_Linus_Torvalds_05.jpg" style="width: 50%" alt="linus torvalds"/>] ] --- # git: ¿Cómo funciona? .pull-left[ - Almacena estados o versiones de los archivos - Los estados están unidos por una relación de parentesco - Una serie de versiones es una rama o branch - Modelo de Hash trees 🔒 ] .pull-right[ .center[![git branch](data:image/png;base64,#https://wac-cdn.atlassian.com/dam/jcr:389059a7-214c-46a3-bc52-7781b4730301/hero.svg?cdnVersion=1663)] ] --- # git: ¿Cómo funciona? .pull-left[ - Cada nodo es un `commit` - La serie .orange[naranja] representa la `branch main` o rama principal - La serie .blue[azul] representa ramas para desarrollar una funcionalidad de nuestro programa ] .pull-right[ ![commit branch merge animation](data:image/png;base64,#images/commits-branch-merge.gif) ] --- # Ejemplo práctico con git **Instalar `git`** .pull-left[ ```bash # Debian-based distros $ sudo apt install git # Arch-based distros $ sudo pacman -S git # RHEL-based distros $ sudo yum install git # Open-SUSE $ sudo zypper install git ``` ] .pull-right[ - MacOS ```sh $ brew install git ``` - Microsoft Windows: - Descargar ejecutable desde sitio oficial: https://git-scm.com/download/win ] --- # Ejemplo práctico con git **Configurar git** ```bash $ git config --global user.`name` "Nina Miranda" $ git config --global user.`email` "tucorazon@donato.com" $ git config --global init.defaultBranch "main" ``` .pull-left[ **Crear carpeta para proyecto e inicializar git** ```bash $ mkdir nombre-proyecto $ cd nombre-proyecto $ `git init` ``` ] .pull-right[ .center[<image src="images/git-folder.png" alt="git folder" width="40%" image/>] ] --- # Ejemplo práctico con git .pull-left[ **Crear proyecto en RStudio** - Archivo > Nuevo Proyecto... - Directorio Existente > Crear Proyecto - Creación automática de: - *nombre-proyecto.Rproj* - *.gitignore* ] .pull-right[ .center[![rstudio new project](data:image/png;base64,#images/rstudio-new-project.png)] El archivo **_.gitignore_** sirve para definir todo lo que **no** queremos versionar ] --- # Ejemplo práctico con git .pull-left[ **Agregar README desde RStudio** - Archivo > Nuevo Archivo - Markdown File - El archivo **_README.md_** va a ser la carátula de nuestro proyecto - Contenido del archivo en formato Markdown 👇🏾 ```sh # Nombre de proyecto ``` ] .pull-right[.center[![rstudio new readme](data:image/png;base64,#images/rstudio-readme.png)]] --- # Ejemplo práctico con git **Estados de los archivos** .center[![git file status](data:image/png;base64,#https://i.stack.imgur.com/kslSd.png)] --- # Ejemplo práctico con git **git status** - Ver estado del árbol de trabajo ```bash $ `git status` On branch `main` No commits yet Untracked files: (use "git add <file>..." to include in what will be committed) .gitignore README.md nombre-proyecto.Rproj ``` --- # Ejemplo práctico con git **git add** - Agregar contenido de archivos al índice ```bash $ `git add` .gitignore README.md nombre-proyecto.Rproj $ git status On branch main No commits yet Changes to be committed: (use "git rm --cached <file>..." to unstage) new file: .gitignore new file: README.md new file: nombre-proyecto.Rproj ``` --- # Ejemplo práctico con git **git commit** - Grabar cambios al repositorio ```bash $ `git commit` -m "first commit" [main (root-commit) 42ca9c7] first commit 3 files changed, 18 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 nombre-proyecto.Rproj $ git status On branch main nothing to commit, working tree clean ``` --- # Ejemplo práctico con git **git branch** - Listar, crear, o borrar ramas - Creamos una **branch** por funcionalidad a desarrollar .pull-left[ ```bash $ `git branch` load-data $ git branch --list load-data `*` main ``` - La rama .orange[naranja] es `main` - La rama .blue[azul] es `load-data` ] .pull-right[.center[![commit branch merge animation](data:image/png;base64,#images/branch.gif)]] --- # Ejemplo práctico con git **git checkout** - Cambiar de rama .pull-left[ ```bash $ `git checkout` load-data Switched to branch 'load-data' ``` - La rama .orange[naranja] es `main` - La rama .blue[azul] es `load-data` ] .pull-right[.center[![commit branch merge animation](data:image/png;base64,#images/branch.gif)]] --- # Ejemplo práctico con git .pull-left[ **Desarrollar en rama .blue[load-data]** - Agregar un Rscript para cargar datos - Archivo > Nuevo Archivo > R Script - Crear carpeta **R/** para alojar código - Crear carpeta **data/** para alojar datos ] .pull-right[![rstudio work in branch](data:image/png;base64,#images/rstudio-work-in-branch.png)] --- # Ejemplo práctico con git **Miramos el estado del árbol de trabajo** ```bash $ git status On branch load-data Untracked files: (use "git add <file>..." to include in what will be committed) R/ data/ ``` -- .center[**¿Versionamos los datos?**] .center[🤔] --- # Ejemplo práctico con git **Uso de .gitignore** .pull-left[ - Agregamos la carpeta **data** ] .pull-right[![rstudio add data to gitignore](data:image/png;base64,#images/rstudio-data-to-gitgnore.png)] --- # Ejemplo práctico con git **Miramos el estado del árbol de trabajo** ```bash $ git status On branch load-data Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git restore <file>..." to discard changes in working directory) modified: .gitignore Untracked files: (use "git add <file>..." to include in what will be committed) R/ ``` --- # Ejemplo práctico con git **Agregar contenido + grabar cambios** ```bash $ `git add` R/ .gitignore $ git status On branch load-data Changes to be committed: (use "git restore --staged <file>..." to unstage) modified: .gitignore new file: R/load_data.R $ `git commit` -m "load data pipeline" [load-data 4ba3a2f] load data pipeline 2 files changed, 8 insertions(+) create mode 100644 R/load_data.R ``` --- # Ejemplo práctico con git **Seguimos el desarrollo en rama .blue[load-data]** .pull-left[ - Agregamos un filtro a los datos ] .pull-right[![rstudio add data to gitignore](data:image/png;base64,#images/rstudio-add-filter.png)] --- # Ejemplo práctico con git **git diff** - Ver cambios entre commits .pull-left[ ```bash $ git diff ``` ![rstudio add filter](data:image/png;base64,#images/rstudio-git-diff.png) ] --- # Ejemplo práctico con git **Repetimos proceso:** .pull-left[ ```bash $ git add R/load_data.R $ git commit -m "Filter to var1" [load-data 68607e9] Filter to var1 1 file changed, 5 insertions(+) ``` ] .pull-right[.center[![second commit animation](data:image/png;base64,#images/second-commit.gif)]] --- # ¿Qué es un repositorio remoto? .pull-left[ - Un espacio en un servidor (por lo general de otra persona) - Podemos alojar nuestro código y utilizar el control de versiones `git` - Algunas plataformas: GitHub, GitLab, Bitbucket .center[<img src="data:image/png;base64,#https://github.githubassets.com/images/modules/logos_page/Octocat.png" style="width: 40%" alt="github logo"/>] ] .pull-right[.center[![no cloud](data:image/png;base64,#https://miro.medium.com/max/325/1*el4nHcOQdfHxzzcTC99jDw.png)]] --- # Red social de programadores .pull-left[ .center[![github repositories](data:image/png;base64,#images/github-repositories.png)] ] .pull-right[ .center[![github create new repository](data:image/png;base64,#images/github-create-new-repository.png)] ] --- # Ejemplo práctico con GitHub - En la carpeta de nuestro proyecto: ```bash $ git checkout main $ git remote add origin https://github.com/ninamiranda/nombre-proyecto.git $ git branch -M main $ `git push` -u origin main ``` .center[![github new repo landing](data:image/png;base64,#images/github-new-repository-landing.png)] --- # Ejemplo práctico con GitHub **git push** - Actualiza el repositorio remoto - Volvemos al desarrollo en rama .blue[load-data] ```bash $ git checkout load-data $ `git push` fatal: The current branch load-data has no upstream branch. To push the current branch and set the remote as upstream, use git push --set-upstream origin load-data ``` --- # Ejemplo práctico con GitHub ```bash $ `git push --set-upstream origin load-data` Enumerating objects: 11, done. Counting objects: 100% (11/11), done. Delta compression using up to 8 threads Compressing objects: 100% (6/6), done. Writing objects: 100% (9/9), 967 bytes | 483.00 KiB/s, done. Total 9 (delta 1), reused 0 (delta 0), pack-reused 0 remote: Resolving deltas: 100% (1/1), done. remote: remote: Create a pull request for 'load-data' on GitHub by visiting: remote: https://github.com/guzmanlopez/test-media/pull/new/load-data remote: To github.com:guzmanlopez/test-media.git * [new branch] load-data -> load-data Branch 'load-data' set up to track remote branch 'load-data' from 'origin'. ``` --- # Ejemplo práctico con GitHub **Pull Request** .pull-left[ .center[![github compare and pull request](data:image/png;base64,#images/github-compare-and-pull-request.png)] ] .pull-right[ .center[![github pull request](data:image/png;base64,#images/github-pull-request.png)] ] --- # Ejemplo práctico con GitHub **Merge pull request** .pull-left[ .center[![github merge](data:image/png;base64,#images/github-merge.png)] ] .pull-right[ .center[![github merged](data:image/png;base64,#images/github-merged.png)] ] --- # Ciclo finalizado .orange[main] > .blue[feature/branch ]> .blue[commit 1] > .blue[...] > .blue[commit n] > .blue[merge] > .orange[main] .center[![commit branch merge animation](data:image/png;base64,#images/commits-branch-merge.gif)]