Introducció a Git

Eines Preparatius Hola Mapa! Gestió avançada Practica
Introducció a Git
Producció i disseny cartogràﬁc. Eines web.
Dr. Benito Zaragozí
Segon quadrimestre
2020 – 2021
Introducció a Git Dr. Benito Zaragozí

Què és Git?
Git és un sistema de control de versions distribuïdes de codi obert i
gratuït dissenyat per gestionar des de petits fins a grans projectes
amb rapidesa i eficiència. Git és relativament fàcil d’aprendre i té
una petita petjada amb un rendiment ràpid. Supera les eines SCM
com Subversion, CVS, Perforce i ClearCase amb funcions com
ramificació local barata, àrees d’intervenció convenients i múltiples
fluxos de treball.
Figura 1. Logo del projecte Git creat per Linus Torvalds.

Tipus de fitxers
El sistema de versionat i de cheap copy de Git està sobretot pensat
per a fitxers de text. Encara que es poden enmagatzemar tot tipus
de fitxers, Git és ideal per a:
• Codi font de tots els llenguatges de programació (Java, C,
C++, C#, Python, etc).
• Fitxers web (HTML, JS i CSS).
• Llibres i documents estructurats ({latex}, Markdown,
Asciidoc, etc).
• Formats de dades estructurades (CSV, JSON, XML)
• I també per a un gran nombre de fitxers GIS en format text
(GeoJSON, GML, KML, KMZ, GPX, OSM XML, ESRI Grid,
etc).

Què és GitHub?
GitHub és un servei de hosting de repositoris Git – similar a
Bitbucket o Gitlab – el qual ofereix tota la funcionalitat de Git però
també afegeix les seves característiques pròpies com, per exemple:
• Una interfície gràﬁca web, una aplicació d’escriptori així i
integració del mòbil.
• Control d’accés i seguretat.
• Diverses característiques de colůlaboració com bug tracking,
administració de tasques, i wikis per cada projecte.
• Capacitat de publicar pàgines web estàtiques.
Figura 2. En 2018, Microsoft va adquirir GitHub per 7.500 milions de
dòlars.

Software geoespacial en GitHub
En GitHub es desenvolupen una gran quantitat de importants
projectes per a la gestió de la informació geogràfica:
• Estàndards i especificacions de l’Open Geospatial Consortium
• QGIS
• GRASS GIS
• Cesium
• Geoserver
• GEOS
• PostGIS
• Leaflet
• GDAL/OGR
• Instamaps
• i molts més. . .

Què és Git-Cola?
Git està dissenyat com una eina per commandaments i es fa servir
en un terminal POSIX. Els usuaris que no estan familiritzats amb
aquest tipus de programes o no volen dedicar temps a aprendre
poden utilitzar interficies gràfiques per a facilitar el treball amb
Git. Hem triat Git Cola per ser software lliure i
multi-plataforma però, hi ha moltes alternatives possibles com:
• GitKraken
• SmartGit
• QGit (Linux)
• GitUp (Mac)
• I fins i tot una eina propia de GitHub (Windows).

Instalůlar Git i Git-Cola
Git és un software multiplataforma que funciona en Windows, Mac
o Linux. Per instalůlar Git en Linux només cal executar el següent
comandament:
1 sudo apt i n s t a l l git −a l l git −cola
Per instalůlar Git en Windows o Mac només cal descarregar els
executables i seguir els passos. El mateix per a Git Cola.

Crear un compte a GitHub
Figura 3. Fiqueu un nickname pensant a llarg termini però una
contrassenya curta (de moment).

Pagina web d’exemple
Figura 4. Web d’exemple per a fer la primera pràctica (hola-mapa.html)

Crear un repositori en GitHub
Figura 5. Una vegada enregistrats (sign in) anem a crear un nou
repositori de codi. Hi han moltes més opcions que no podrem veure
durant el curs però ho podeu investigar.

Crear un repositori en GitHub

Clonar un repositori de GitHub
Figura 7. Localitzeu i copieu l’enllaç HTTP/SSH? del repositori.

Clonar un repositori amb Git Cola (git clone)

Estructura d’un repositori Git
Figura 9. Aneu a la carpeta del repositori i busqueu la carpeta . git
Mireu però NO TOQUEU!!!!

Obrir un repositori amb Git Cola

Afegir un fitxer al directory de treball
Figura 11. La finestra de Git Cola està molt trista fins que feu algun
canvi o afegiu un fitxer. Afegiu el fitxer hola−mapa.html a la carpeta
/git/ftg-mapa. L’estat de l’archiu apareix en Git Cola.

Afegir un ﬁtxer per a fer el commit (stage)
Figura 12. Fixeu-vos que el ﬁtxer encara no està en seguiment.

Afegir un ﬁtxer per a fer el commit (stage)
Figura 13. Fent Commit/stage o botó dred/stage l’estat del ﬁtxer
canvía.

Preparar el commit (git commit)
Figura 14. Escrivim un missatge per a fer el commit i l’afegim fent clic.

Resultat del commit (git commit)
Figura 15. Després de fer el commit veurem que la branca local/main
está un commit ahead.

Publicar els canvis a GitHub (git push)
Figura 16. Fem clic amb el botó dret sobre la branca local/main i després
podrem publicar el commit que teniem preparat al repositori de GitHub.

Veure el resultat del git push en GitHub
Figura 17. Comprovem a GitHub que el commit s’ha afegit al repositori
remot.

Veure el resultat del git push en GitHub
Figura 18. La anatomia d’un commit ens permet veure el que hem
canviat al repositori.

Conﬁgurar les gh-pages del repositori
Figura 19. Anem a la conﬁguració del repository i baixem on diu GitHub
Pages.

Conﬁgurar les gh-pages del repositori
Figura 20. En dos passos, primer triem la branca main (on està la
pàgina web) i després tornem per triar HTTPS. Veurem a dalt que la
nostra pàgina ja està publicada.

Fer un canvi remot des de GitHub
Figura 21. La web no funciona!!! Tranquils, per a que funcione, hem de
reanomenar el ﬁtxer hola-mapa.html a index.html

Què és Jekyll i per què no l’útilitzarem
Figura 22. Un altre canvi que farem serà afegir un ﬁtxer anomenat
.nojekyll al repositori. GitHub incorpora un servidor de pàgines web
estàtiques annomenat Jekyll que permet fer pàgines web directament en
format Markdown. En aquest curs no serà necessari. . .

Veure la teva web publicada
Figura 23. Aneu de nou a la vostra web i ara sí que deuria estar
publicada.

Descarregar els canvis del repositori remot (git pull)
Figura 24. En el repositori local encara no estan els canvis. Feu git pull
per a importar-los.

Descarregar els canvis del repositori remot (git pull)
Figura 25. A la carpeta de treball deuria veures el ﬁtxer renombrat i el
ﬁtxer .nojekyll

Explorar Git Cola DAG
Figura 26. És una aplicació molt útil que ens mostra el versionat del
repository d’una manera gràﬁca, el llistat de commits i les diferències
introduïdes en cada commit.

Fiqueu un canvi (innecesari) al repositori
Figura 27. Per exemple, ﬁqueu la paraula password al README i feu el
commit. El missatge del commit pot ser Bad commit o similar.

Desfer el canvi (git reset)
Figura 28. Feu click sobre l’anterior commit i amb el botó dret del ratolí:
reset/reset-branch-head. Açò elimina el commit i deixa el ﬁtxer modiﬁcat
com si mai no hagués entrat en Git. Descarteu els canvis.
Hi han moltes maneres de desfer canvis en Git. Els comandaments
checkout, reset o revert son altres possibilitats.

Fer canvis de manera segura (git branch)
Figura 29. Crearem una nova branca local per a fer una sèrie de millores
en el README. Feu Rama/crear i doneu-li el nom metadata. La estrella
indica que actualment estem en eixa branca de treball.

Fer canvis de manera segura (git branch)
Figura 30. Per fer algún canvi fàcil de veure. Rebatejeu el ﬁtxer
README a NEW-README.

Treballar entre branques (git checkout)
Amb la ﬁnestra del projecte a la vista, proveu a fer checkout sobre
les dos branques i vegeu clar com funciona Git.
Figura 31. Branca metadata. Figura 32. Branca main, després
de fer el checkout.

Publicar una branca local (nova) en GitHub
Figura 33. La branca no existeix en GitHub de manera que, o la creem
desde GitHub o haurem de fer git push –upstream amb Git Cola, com
indica la imatge.

Veure la branca en remot
Figura 34. Com a resultat, ara tenim la branca metadata també en
GitHub. De manera que es pot treballar amb més gent o des de diferents
llocs de treball.

Importar els canvis de la branca styles a la principal
(git merge)
Figura 35. Feu un parell més de commits en la branca metadata, quan
hageu acabat feu git merge per a portar eixos canvis a la branca principal.

Publica al repositori remot
Figura 36. Decidiu si heu de fer pull d’una branca, de l’altra o si podeu
eliminar la branca metadata

Practicar fent. . .
Fins aquí la introducció a Git.
Dominar totes aquestes eines serà fruit de la pràctica i de la
vostra pròpia recerca. Comenceu per repetir el que hem fet aquí
ﬁns que ho entengueu tot.
A continuació vos faig algunes propostes per a treballar:
• Creeu una branca per modiﬁcar els estils de la web, feu una
serie de canvis i publiqueu a main.
• Creeu una altra branca per editar els continguts. Quan ho
tingueu clar, publiqueu a main.
• El mateix però per a substituir el mapa per un mapa
d’instamaps vostre.

Un últim comentari
Git i totes les demés eines són d’ús professional. Aques-
tes eines s’útilitzen per a gestionar ﬂuxos de treball on
participen decenes o centenars de desenvolupadors. Evi-
dentment, en el vostre projecte de moment només estareu
vosaltres de manera que no ho heu de dominar tot. No
obstant, sí que heu de coneixer algunes de les eines que
s’utilitzen avui en dia en el desenvolupament de pàgines
web.

Introducció a Git

Recommended

Recommended

More Related Content

More from Benito Zaragozí

More from Benito Zaragozí (18)

Introducció a Git