-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
477 lines (424 loc) · 22 KB
/
index.html
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
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
<!DOCTYPE html>
<html lang="en">
<head>
<title>Versionando códigos com Git e Github</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="styles/styles.css">
<style>
.shower {
--slide-ratio: calc(16 / 9);
--color-key: #411e2f;
}
</style>
</head>
<body class="shower list">
<header class="caption">
<h1>Versionando códigos com Git e GitHub</h1>
</header>
<section class="slide">
<h2 class="shout">
Versionando códigos com<br>
Git e Github
</h2>
</section>
<section class="slide">
<h2 class="title-description"><b>Quem somos</b></h2>
</section>
<section class="slide">
<div class="about-image">
<img src="img/ana.jpg" alt="Imagem de perfil do Lucas Marques" width="200">
</div>
<div class="about-description">
<h3>Ana Carolina</h3>
<ul>
<li>Estudante de Análise e Desenvolvimento de Sistemas</li>
<li>Software Developer na Love Mondays</li>
<li>Experiência em Python, Web Scraping e crawling</li>
<li><a href="https://about.me/anacls">Mais informações em about.me</a></li>
</ul>
</div>
</section>
<section class="slide">
<div class="about-image">
<img src="img/lucas.jpg" alt="Imagem de perfil do Lucas Marques" width="200">
</div>
<div class="about-description">
<h3>Lucas Marques</h3>
<ul>
<li>Formado em Análise e Desenvolvimento de Sistemas</li>
<li>Software Developer no Grupo Viceri</li>
<li>Experiência em tecnologias Microsoft</li>
<li><a href="https://about.me/lucasmarques">Mais informações em about.me</a></li>
</ul>
</div>
</section>
<section class="slide">
<h2><b>Versionamento de código</b></h2>
<div class="columns two">
<p><b>Versionamento de código?</b><br>Sistema que registra mudanças feitas em um arquivo (ou num conjunto de arquivos), permitindo recuperar versões específicas.</p>
<p><b>Por que é necessário?</b><br>Mantém todas as versões em um único local, permitindo controlar tudo que está sendo desenvolvido no projeto.</p>
</div>
</section>
<section class="slide">
<div class="example-image">
<img src="img/example.png" alt="Exemplo de imagem do porque devemos utilizar git" width="250">
</div>
</section>
<section class="slide">
<h2><b>Git e GitHub</b></h2>
<div class="columns two">
<p><i class="fas fa-code-branch"></i><b>Git</b><br>Sistema de controle de versão de arquivos. Permite desenvolver projetos, nos quais várias pessoas podem contribuir, sem riscos de alterações serem sobrescritas por engano.</p>
<p><i class="fab fa-github"></i><b>GitHub</b><br>Serviço web que oferece diversas funcionalidades aplicadas ao git. Pode ser usado para hospedar projetos de maneira gratuita.</p>
</div>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul> <b> Pré requisitos: </b>
<li>Ter o git instalado no computador <a href="https://git-scm.com/downloads">(link para download)</a>;</li>
<li>Ter uma conta no GitHub <a href="https://github.com/">(link para criar conta)</a>.</li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul><b>Criando o repositório remoto</b>
<li>Crie um novo repositório no GitHub.</li>
</ul>
<img src="img/new_repository.png" alt="Botão 'Novo repositório'" width="250">
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<img src="img/creating_new_repository.png" alt="Criando repositório" width="500">
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul> <b>Criando o repositório local</b>
<li>Crie uma pasta na área de trabalho;</li>
<li>Abra a pasta, clique com o botão direito e selecione 'Git Bash Here';</li>
<li>Digite <code>git init</code> (esse comando vai inicializar o git dentro dessa pasta);</li>
<li>Adicione as configurações globais do git usando os comandos: <br> <code>git config --global user.name "seu_username"<br> git config --global user.email "seu_email"</code></li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul><b>Vinculando o repositório remoto ao repositório local</b>
<li>Você pode vincular seus repositórios usando <b>HTTPS</b> ou <b>SSH</b>;</li>
<li>Usar <b>HTTPS</b> é uma forma mais simples;</li>
<li>Usar <b>SSH</b> é uma forma mais segura;</li>
<li>Aqui vamos usar <b>HTTPS</b>, mas se você quiser usar <b>SSH</b> pode fazer o setup seguindo <a href="https://help.github.com/articles/connecting-to-github-with-ssh/">essas orientações</a> do GitHub.</li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul><b>Vinculando o repositório remoto ao repositório local</b>
<li>Copie o link do seu repositório na página inicial dele;</li>
<li>Não se esqueça de selecionar de acordo com o protocolo a ser usado (HTTPS ou SSH).</li>
<div class="example-image">
<img src="img/repository-initial-page.png" alt="Git status" width="650">
</div>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul><b>Ligando o repositório remoto ao repositório local</b>
<li>Para ligar o repositório remoto ao repositório local, use o comando<br>
<code>git remote add origin link_do_repositorio</code>
</li>
<li>Fazendo essa ligação, é possível sincronizar manualmente, através de comandos git, suas alterações entre os repositórios.</li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Dentro da sua pasta local crie um arquivo <code>git-workshop.txt</code> e salve;</li>
<li>No terminal git digite <code>git status</code> ;</li>
<li>Esse comando vai mostrar todos os arquivos alterados.</li>
</ul>
<div class="example-image">
<img src="img/git-status.png" alt="Git status" width="500">
</div>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Para adicionar as alterações, use <code>git add nome_do_arquivo</code> ;</li>
<li>Se tiver mais de um arquivo e quiser adicionar todos, use <code>git add .</code> </li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Faça um <code>git status</code> e verá que agora está tudo pronto para o próximo passo, fazer um <b>commit</b>.</li>
<br>
<div class="example-image">
<img src="img/git-status-after-add.png" alt="Git status depois de adicionar o arquivo" width="500">
</div>
</ul>
</section>
<section class="slide">
<h2><b>O que é um commit?</b></h2>
<ul>
<li>Commit é um pacote fechado com todas as alterações que você fez para o seu projeto.</li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Você pode fazer um <b>commit</b> mais detalhado, contendo título e descrição usando <code>git commit</code> ;</li>
<li>Ou de uma maneira mais simples, só adicionando o título <br><code>git commit -m "Sua mensagem aqui"</code> ;</li>
<li>Errou a mensagem do commit? <br><code>git commit -m "Sua mensagem corrigida aqui" --amend</code> ;</li>
<li>O comando <code>git commit --amend</code> sobrescreve o último commit.</li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Faça um <code>git log</code> para conferir seus commits.</li>
<li>Se estiver tudo certo, o próximo passo é fazer um <b>push</b> para o branch remoto.</li>
<br>
<div class="example-image">
<img src="img/git-log.png" alt="Git log" width="500">
</div>
</ul>
</section>
<section class="slide">
<h2><b>O que é um branch?</b></h2>
<ul>
<li>Branch é uma ramificação de um projeto;</li>
<li>Temos o branch principal <b>master</b>;</li>
<li>Criamos "cópias" do branch principal para fazer alterações sem correr o risco de alterar o principal;</li>
<li>Por enquanto, estamos usando o branch <b>master</b> para inicializar os dois repositórios.</li>
</ul>
</section>
<section class="slide">
<div class="example-branch-image">
<img src="img/branch-example.png" alt="Imagem de exemplo de uma branch" width="500">
</div>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>O próximo passo é enviar suas alterações locais para o repositório remoto, para isso, use <code>git push</code> ;</li>
<li>Se você digitar <code>git push</code> , vai perceber que o git te pede para fazer o push usando <code>git push --set-upstream origin nome_da_branch</code> ;</li>
<li>Isso acontece porque como é a primeira vez que um <b>push</b> está sendo feito nesse branch, é necessário referenciar a origem para que o branch seja criado remotamente.</li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Para resumir, use <br> <code>git push -u origin nome_do_seu_branch</code> ;</li>
<li>Como o branch usado é o master: <code>git push -u origin master</code> ;</li>
<li>Para próximos <b>push</b> no mesmo branch você pode usar só <code>git push</code> .</li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Agora, se você olhar seu repositório no GitHub, vai ver que ele contém o seu arquivo.</li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Vamos colocar conteúdo no arquivo <code>git-workshop.txt</code> ;</li>
<li>Primeiro, crie um novo branch usando <br> <code>git checkout -b editando-arquivo</code> ;</li>
<li>Agora, edite o arquivo <code>git-workshop.txt</code> escrevendo alguma coisa dentro dele.</li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Verifique se o arquivo foi realmente alterado usando <code>git status</code> ;</li>
<li>Veja exatamente o que foi alterado usando <code>git diff</code> .</li>
<br>
<div class="example-image">
<img src="img/git-diff.png" alt="Git diff" width="500">
</div>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Adicione ao pacote de alterações usando <code>git add git-workshop.txt</code> ;</li>
<li>Faça um novo commit <code>git commit -m "Sua mensagem aqui"</code> ;</li>
<li>Faça um push para o novo branch <br> <code>git push -u origin editando-arquivo</code> ;</li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Verifique o repositório no GitHub;</li>
<li>Agora o repositório contém 2 branches;</li>
<li>O arquivo está diferente em cada um dos branches;</li>
<li>Para unificar os dois branches é necessário fazer um <b>merge</b>.</li>
</ul>
</section>
<section class="slide">
<h2><b>O que é um merge?</b></h2>
<ul>
<li>
O merge é responsável por juntar os commits dos branches que você criou incluindo na linha do tempo do branch desejado.
Na maioria dos casos isso é feito no branch master.
</li>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Antes de realizar um merge, é necessário selecionar o branch que receberá as atualizações, no nosso caso <code>git checkout master</code> ;</li>
<li>Agora o merge já pode ser realizado: <code>git merge editando-arquivo</code> ;</li>
<li>Feito isso, é só executar o comando <code>git push origin master</code> que ele irá atualizar o seu branch <i>master</i> remoto;</li>
<li>Agora você verá suas alterações no branch master.</li>
</ul>
</section>
<section class="slide">
<h2 class="shout">
Colaborando em <br>
projetos
</h2>
</section>
<section class="slide">
<h2><b>Colaborando em projetos</b></h2>
<ul>
<li>Quando você deseja colaborar com o projeto de alguém, o primeiro passo é fazer um <b>'Fork'</b> no repositório da pessoa;</li>
<li>Isso vai criar um repositório igual ao dela, no seu GitHub;</li>
<li>A partir daí, você pode realizar um <code>git clone</code> no seu repositório, fazer alterações e fazer pull requests.</li>
</ul>
</section>
<section class="slide">
<h2><b>Pull Request</b></h2>
<ul>
<li>Para que suas alterações sejam vinculadas ao branch principal de um projeto que não é seu, você precisa abrir um Pull Request.</li>
<li>O Pull Request significa que você está enviando uma sugestão de melhoria para o repositório.</li>
</ul>
</section>
<section class="slide">
<h2><b>Colaborando em projetos</b></h2>
<ul>
<li>Vamos colaborar no projeto <a href="https://github.com/marqueslu/participants-git-workshop">'participants-git-workshop'</a>, criado para esse workshop;</li>
<li>Nesse projeto você adicionará algumas informações: seu nome, uma breve descrição sobre você e seu perfil do GitHub.</li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Faça um fork nesse <a href="https://github.com/marqueslu/participants-git-workshop">repositório</a>;</li>
<li>Você será direcionado para a sua cópia do repositório;</li>
<li>Copie o link para clonar seu repositório.</li>
<div class="example-image">
<img src="img/git-clone.png" alt="Git clone" width="500">
</div>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Vá até a pasta onde você deseja adicionar o novo repositório, clique com o botão direito e depois em 'Git Bash Here';</li>
<li>Faça um <code>git clone link_do_repositorio</code> ;</li>
<li>Abra a pasta criada usando <code>cd participants-git-workshop</code> ;</li>
<li>Crie uma nova branch <br><code>git checkout -b adicionando-seu_nome-profile</code> ;</li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Abra e edite o arquivo <code>index.html</code> ;</li>
<li>Adicione informações sobre você, seguindo o padrão: <br>
<pre>
<code><article></code>
<code> <strong>seu_nome</strong></code>
<code> <p>Uma breve descrição sobre você</p></code>
<code> <a href="url_do_seu_github">Github</a></code>
<code></article></code>
</pre>
</li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Faça <code>git status</code> ;</li>
<li>Confira se adicionou certo usando <code>git diff</code> ;</li>
<li>Adicione a alteração <code>git add index.html</code> ;</li>
<li>Faça um commit <br> <code>git commit -m "Adicionando informações de seu_nome"</code> ;</li>
<li>Envie o commit para o seu branch <br> <code>git push -u origin nome_do_seu_branch</code> .</li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Nosso próximo passo é abrir um Pull Request;</li>
<li>No seu repositório do GitHub você vai ver um novo branch;</li>
<li>Clique em <b>branches</b> para ver todos os branches do seu projeto;</li>
<li>Para abrir um Pull Request, basta clicar em 'New pull request' ao lado do seu branch.</li>
<div class="example-image">
<img src="img/branches.png" alt="Abrindo PR" width="750">
</div>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Na página de Pull Request você conseguirá identificar algumas informações importantes;</li>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li><b>base fork</b>: repositório para o qual você está mandando as alterações;</li>
<li><b>base</b>: branch onde deseja inserir as alterações;</li>
<li><b>head fork</b>: seu repositório (cópia do repositório original da outra pessoa);</li>
<li><b>compare</b>: branch que contém as alterações que você deseja enviar;</li>
<div class="example-image">
<img src="img/pull-request.png" alt="Abrindo PR" width="600">
</div>
</ul>
</section>
<section class="slide">
<h2><b>Hands-on</b></h2>
<ul>
<li>Se desejar, adicione uma mensagem de descrição para o pull request;</li>
<li>Crie o pull request;</li>
<li>Acompanhe, o moderador do repositório pode comentar, aprovar ou solicitar mudanças.</li>
</ul>
</section>
<section class="slide">
<h2><b>Outro comando importante</b></h2>
<code>git pull</code>
<ul>
<li>Esse comando atualiza seu branch local de acordo com o branch remoto.</li>
</ul>
</section>
<section class="slide">
<h2><b>Hacktoberfest</b></h2>
<ul>
<li>Hacktoberfest é um evento promovido pela DigitalOcean em parceria com o Github</li>
<ol>
<li>Cadastre seu usuario github no site oficial do <a href="https://hacktoberfest.digitalocean.com/">Hacktoberfest</a>;</li>
<li>Procure no GitHub issues com a label 'hacktoberfest';</li>
<li>Abra 5 pull requests até o dia 31 de outubro;</li>
<li>Acompanhe o seu progresso utilizando o <a href="https://hacktoberfestchecker.herokuapp.com">Hacktoberfest Checker</a>;</li>
<li>Receba uma camiseta do evento!!!</li>
</ol>
</ul>
</section>
<section class="slide">
<h2><b>Referências</b></h2>
<ul>
<li><a href="https://git-scm.com/book/pt-br/v1/Primeiros-passos">Site Oficial do Git</a></li>
<li><a href="https://www.udemy.com/git-e-github-para-iniciantes/">Git e GitHub para iniciantes</a></li>
<li><a href="https://www.udemy.com/git-e-github-ninja/">Curso Git e Github ninja</a></li>
<li><a href="http://rogerdudler.github.io/git-guide/index.pt_BR.html">Git - guia prático</a></li>
</ul>
</section>
<section class="slide">
<h2 class="shout">Dúvidas?</h2>
</section>
<section class="slide">
<h2 class="shout">Obrigado!</h2>
</section>
<div class="progress"></div>
<script src="js/shower.min.js"></script>
<!-- Copyright © 2018 Yours Truly, Famous Inc. -->
</body>
</html>