-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
202 lines (179 loc) · 9.82 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#d3360b">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext">
<!-- CSS Base -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
<!-- Custom CSS -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/custom.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="static/css/svg-icons.css">
<!-- FAVICONS -->
<link rel="icon" href="static/images/logo/1x/logo.png">
<title>Introdução ao Rails</title>
</head>
<body>
<main role="main">
<article id="webslides">
<section class="inicio">
<div class="logo"></div>
</section>
<section>
<div class="wrap size-50">
<h3>Agenda de Hoje</h3>
<p>Prometo tentar cumprir ao máximo :)</p>
<hr>
<ol class="text-cols">
<li><a href="#slide=3">Como funciona a internet</a></li>
<li><a href="#slide=">(Um pouco de) Historia do Rails</a></li>
<li><a href="#slide=">Rails Way</a></li>
<li><a href="#slide=">Estrutura Básica do Rails</a></li>
<li><a href="#slide=">Padrão RESTful</a></li>
</ol>
</div>
</section>
<section class="fullscreen slide">
<div class="card-50">
<div class="flex-content">
<h2><strong>Como a internet funciona?</strong></h2>
<p>
Ela começou a funcionar no Brasil comercialmente em 1995, mas já existia desde 1969, nos EUA. A partir disso, cada vez mais estamos migrando pra ela, estão se tornando raros serviços que não são prestados virtualmente. Com isso, a internet precisa ser rápida e nós somos as pessoas que irão "operá-la". Nesse <a href="http://evolutionofweb.appspot.com/">site</a> é bem legal poder ver a evolução das tecnologias através dos anos.A internet é uma mistura de <a href="https://www.submarinecablemap.com/">cabos submarinos</a> que atravessam o mundo todo. O tráfego de informações é intenso e constante.</p>
<p>Vou mostrar o que acontece com uma simples requisição pra um site.</p>
</div>
<figure>
<img src="static/images/internet_sea.png" alt="Cabos de rede subaquaticos">
</figure>
</div>
</section>
<section class="fullscreen slide">
<div class="card-50">
<div class="flex-content">
<h2><strong>O que significa Cliente e Servidor?</strong></h2>
<p>Um cliente pode ser o browser ou um telefone celular, por exemplo, ou até mesmo dispositivos IOT o wearables. Básicamente é alguma tecnologia que está entrando em contato com algum servidor na através da internet. Esse servidor, por sua vez, é só uma computador (muitas vezes bastante potente) que está recebendo essas requisições e processando conforme necessario.</p>
</div>
<figure class="slide-image" style="background-color: #0482AC">
<img src="static/images/client-server-diagram.png" alt="Diagrama de cliente e servidor de internet">
</figure>
</div>
</section>
<section class="show-me"></section>
<section class="fullscreen slide">
<div class="card-50">
<div class="flex-content">
<h2><strong>David Heinemeier Hansson</strong></h2>
<p class="text-intro">Criador do Rails.
</p>
<ul class="description">
<li>Criado em 2005, o Rails é um framwork escrito em Ruby e já foi usado pra criar diversas ferramentas usadas por nós atuais e futuras devenvolvedoras, como o <strong>Github</strong>, <strong>Shopify</strong>, <strong>Zendesk</strong> entre outras.</li>
<li><strong class="text-label">Fun Fact:</strong><br> Ele fez um <a href="https://www.youtube.com/watch?v=Gzj723LkRJY">vídeo</a> na época explicando como era possível fazer um blog em 15 minutos usando o Rails</li>
</ul>
</div>
<figure>
<img src="static/images/dhh.jpg" alt="David Heinemeier Hansson">
</figure>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<h2 class="text-shadow"><strong>O que é o Rails?</strong></h2>
<p class="text-intro">Um framework escrito na linguagem Ruby</p>
<p>O que significa que ele possui diversas gems (ou bibliotecas) que ele organizou de forma que seja simples para a pessoa simplesmente se preocupe com a implementação da lógica do negócio. Na própria documentação diz que o Rails "assume" o que é melhor pra você, porém, é totalmente opcional, podendo alterar como quiser. Existe até a <a href="https://rubyonrails.org/doctrine/">doutrina</a> do Rails, onde se fala sobre "convenção sobre configuração", e outros. </p>
</section>
</section>
<section class="fullscreen slide">
<div class="card-50">
<div class="flex-content">
<h2 class="text-shadow">Estrutura básica de um projeto Rails</h2>
<p>Usando o comando padrão de iniciar um projeto Rails, você tem a seguinte estrutura de pastas</p>
</div>
<figure class="slide-image">
<img src="static/images/pastas.png" alt="Estrutura geral de pastas em um projeto Rails">
</figure>
</div>
</section>
<section class="fullscreen slide">
<div class="card-50">
<div class="flex-content">
<h2><strong>A pasta APP</strong></h2>
<p>Iremos trabalhar nessa pasta a nossa maior parte do tempo. É nela que definimos os nossos modelos, as nossas regras de negócio, as nossas views (páginas com conteúdo que é exibida no browser do cliente).</p>
</div>
<figure class="slide-image">
<img src="static/images/app.png" alt="Estrutura pasta App">
</figure>
</div>
</section>
<section class="fullscreen slide">
<div class="card-50">
<div class="flex-content">
<h2><strong>A pasta config</strong></h2>
<p>Tirando o arquivo de rotas, dificilmente precisaremos alterar muitas coisas nessa pasta. É nela que adicionamos os nossos arquivos de internacionalização, onde configuramos o nosso projeto (a qual esperamos que seja totalmente exporádico).</p>
</div>
<figure class="slide-image">
<img src="static/images/config.png" alt="Estrutura pasta Config">
</figure>
</div>
</section>
<section class="fullscreen slide">
<div class="card-50">
<div class="flex-content">
<h2><strong>Gemfile e outras pastas</strong></h2>
<p>O Gemfile é onde especificamos as dependências do nosso projeto (as gems que ele precisa pra funcionar). A pasta <code>public</code> é a pasta onde o Rails envia os arquivos preparados para o seu browser (ou do seu cliente) usarem, não modificamos o conteúdo dessa pasta a não ser que seja necessário. </p>
</div>
<figure class="slide-image">
<img src="static/images/resto.png" alt="Outros arquivos do projeto">
</figure>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<h2 class="text-shadow"><strong>Padrão REST e o MVC</strong></h2>
<p>REST é um padrão adotado para que as requisições sigam sempre o mesmo padrão de "verbo HTTP": GET (pra solicitar uma informação), POST (para enviar uma informação), UPDATE (atualizar), DELETE (apagar).</p>
<p>O Rails possui uma convenção de que, a partir do verbo que vêm na requisição, ele direciona para "ação" correta, daí o nome MVC > Model (Modelo), View (JSON ou uma pagina HTML), Controller (que possui Actions).</p>
</div>
<div class="column">
<pre>
def show
@aluno = Aluno.find(params[:id])
end
def create
@aluno = Aluno.new params.require(:aluno)
@aluno.save
end
</pre>
</div>
</div>
</div>
</section>
<section class="fullscreen slide">
<div class="card-50">
<div class="flex-content">
<h2 class="text-shadow"><strong>Controllers</strong></h2>
<p>Como visto anteriormente, a Controller segue a convenção do padrão REST. E também por convenção, o Rails irá "procurar" um arquivo <code>aluno.rb</code> dentro da pasta <code>models</code> e uma pasta <code>alunos</code> dentro de <code>views</code>.</p>
</div>
<figure class="slide-image" style="background-color: #282C34">
<img src="static/images/controllers.png" alt="Controllers em Rails">
</figure>
</div>
</div>
</section>
</article>
</main>
<!-- Required -->
<script src="static/js/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="static/js/svg-icons.js"></script>
</body>
</html>