-
Notifications
You must be signed in to change notification settings - Fork 15
/
appchi.html
267 lines (174 loc) · 11.1 KB
/
appchi.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setup recipe for Rails Girls - Install Ruby on Rails - Rails Girls</title>
<meta name="description" content="Women, join the Internet playground. One day crash-course to the exciting world of building web applications.">
<meta name="author" content="Rails Girls">
<link rel="shortcut icon" href="/favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="./css/style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="//use.typekit.net/nbs6fzt.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<meta property="og:image" content="https://railsgirls.com/images/railsgirls-sq.png"/>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="container_12">
<a id="logo" href="/"><img src="images/railsgirls-logo.png" alt="Rails Girls" /></a>
<nav>
<a href="./events.html">Events</a>
<a href="./materials.html">Materials</a>
<a href="./press.html">Press</a>
<a href="https://railsgirls.tumblr.com/">Blog</a>
</nav>
</div>
</header>
<!-- content -->
<div id="container" class="container_12 page clearfix">
<div class="grid_8 omega alpha">
<h1 id='rails_girls_tutorial'>Rails Girls Tutorial</h1>
<h2>0: 基本工具软件 Get to know the tools</h2>
<ul>
<li> 任意文本编辑器(例如Komodo Edit，Ultraedit甚至记事本，保存时编码请选择UTF-8而不是GBK/GB2132) ，用来编辑代码和文件</li> Texteditor (Komodo Edit) is for writing code and editing files
<li> 终端或者又称命令行、控制台甚至命令提示符（这里翻译将用“控制台”），用来启动Rails服务器和运行指令 Terminal / Command Prompt is for starting the rails server and running commands </li>
<li> 浏览器，用来预览你的app Web browser is for viewing your application</li>
</ul>
<h2 id='1_creating_the_application'>1: 创建一个app Creating the application
</h2>
<p>我们来创建一个名为railsgirls的app We are going to create app called railsgirls.</p>
<p> 打开控制台Open Terminal/Command Prompt:</p>
<ul>
<li>OS X: 打开Spotlight，键入Terminal并选择显示出来的命令行图标 OS X: Open Spotlight, type Terminal and click appearing Terminal options. </li>
<li>Windows: 点击开始菜单并搜索Command Prompt ，点击Command Prompt with Ruby on Rails.(注意！此处为直译，不太清楚中文版Windows的情况，如不可行请使用以下方法：Alt-R也就是按住Alt的同时键入R，然后键入cmd后回车) Windows: Click Start-menu and search for Command Prompt, click Command Prompt with Ruby on Rails. </em>.</li>
</ul>
<p>键入指令： Type commands:</p>
<pre><code>mkdir projects
cd projects
rails new railsgirls
cd railsgirls
rails s</code></pre>
<p>>在浏览器中打开 <a href='http://localhost:3000'>http://localhost:3000</a>. Open <a href='http://localhost:3000'>http://localhost:3000</a> in a browser</p>
<p>在控制台中键入CTRL-C 可以退出服务 CTRL-C to exit the server in Terminal/Command Prompt.
</p>
<p><strong>Coach:</strong >教练：请解释每一步指令的含义，以及我们刚刚生成了什么（哪些文件）？Rails服务是做什么用的？并介绍MVC Quick explanation about what each command does. What was generated? What does the server do. Talk about MVC.</p>
<h2 id='2_create_idea_scaffold'>创建一个名为idea的Scaffold Create Idea scaffold</h2>
<p>我们使用Rails的scaffold来创建一个模板，在此基础上我们可以对数据进行list(?)、加入、删除、修改和预览等操作，这里的数据指的是我们的ideas。We are using Rails’ scaffolds to generate a starting point that allows us to list, add, remove, edit, and view things; in our case ideas.
</p>
<pre><code>rails generate scaffold idea name:string description:text picture:string
rake db:migrate
rails s</code></pre>
<p>在浏览器中打开 <a href='http://localhost:3000/ideas'>http://localhost:3000/ideas</a> </p>
<p> Open <a href='http://localhost:3000/ideas'>http://localhost:3000/ideas</a> in browser.</p>
<p>探索一下你的网页然后CTRL-C 退出服务CTRL-C exits the server when you have clicked around for a little.</p>
<p><strong>Coach:</strong> 教练：什么是scaffold，什么是migration. What is a scaffold. What are migrations.</p>
<h2 id='3_design'>3: 设计 Design</h2>
<p>现在我们动手改进一下网页的设计。我们用Twitter的Bootstrap项目可以轻松的生成网页的stylesheet. Design doesn’t look nice. Let’s do something about it. We’ll use Twitter’s Bootstrap project give us nicer default styles really easily.</p>
<p>打开app/views/layouts/application.html.erb 找到这一行.
Open app/views/layouts/application.html.erb and add on top of</p>
<pre><code><%= stylesheet_link_tag "application" %></code></pre>
<p>并在它上面加入以下代码 </p>
<pre><code><link rel="stylesheet" href="https://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"></code></pre>
<p>然后把</p>
<pre><code><%= yield %></code></pre>
<p>换成</p>
<pre><code><div class="container">
<%= yield %>
</div></code></pre>
<p>现在我们对ideas表格添加页眉、页脚和格式
</p>
<p>找到这个文件 application.html.erb，在<code><body></code>下添加：</p>
<pre><code><div class="topbar">
<div class="fill">
<div class="container">
<a id="logo" href="/">The Idea App</a>
<ul class="nav">
<li><a href="/ideas">Ideas</a></li>
</ul>
</div>
</div>
</div></code></pre>
<p>并在<code></body></code>>之上添加：</p>
<pre><code><footer>
<div class="container">
Rails Girls 2011
</div>
</footer></code></pre>
<p>打开文件 app/assets/stylesheets/application.css 并在最底端添加</p>
<pre><code>#logo { font-size: 20px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; float: left; padding: 10px; }
body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle !important; border: none !important; }
th { border-bottom: 1px solid #DDD !important; }
td.picture { width: 140px; }
td.picture img { width: 140px; }</code></pre>
<p><strong>教练</strong>：请解释CSS和layouts</p>
<h2 id='4_adding_picture_uploads'> 添加图片上传功能 Adding picture uploads</h2>
<p>为了实现图片上传功能我们需要安装额外的库 We need to install additional library to add image processing.
</p>
<p>打开文件Gemfile并找到这一行</p>
<pre><code>gem 'carrierwave'</code></pre>
<p>在它下面添加</p>
<pre><code>gem 'sqlite3'</code></pre>
<p<strong>>教练</strong>：请解释什么是库(libraries)以及为什么需要使用它们。要不也聊聊开源？</p>
<p>现在我们来生成主管图片上传的代码，打开控制台并键入. Now we generate the needed code for picture handling. In the Terminal/Command Prompt run:</p>
<pre><code>bundle
rails generate uploader Picture</code></pre>
<p>打开 app/models/idea.rb 找到这一行</p>
<p>并在下方添加 </p>
<pre><code>mount_uploader :picture, PictureUploader</code></pre>
<pre><code>class Idea < ActiveRecord::Base</code></pre>
<p>打开 app/views/ideas/_form.html.erb</p>
<pre>把<code><%= f.text_field :picture %></code></pre>
<pre>并把<code><%= f.file_field :picture %></code></pre>
<p>改成</p>
<pre><code><%= form_for(@idea) do |f| %></code></pre>
<p>改为</p>
<pre><code><%= form_for(@idea, :html => {:multipart => true}) do |f| %></code></pre>
<p>我们的view还是不太好看，因为它只显示文件路径。我们可以这么改进：The view doesn’t look nice, it only shows a path to the file, so let’s fix it</p>
<p>打开 app/views/ideas/show.html.erb 并将</p>
<pre><code><%= @idea.picture %></code></pre>
<p>改为</p>
<pre><code><%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present? %></code></pre>
<p><strong>教练</strong>：聊聊HTML</p>
<h2 id='5_finetune_the_routes'>5: 微调）routes Finetune the routes</h2>
<p>如果你试图打开 <a href='http://localhost:3000'>http://localhost:3000</a> 看到的还是默认的页面，我们需要把它改为ideas页面 If you try to open http://localhost:3000 it still shows the default page. Let’s make it redirect to the ideas page.</p>
<p>运行控制台指令. Run in the Terminal/Command Prompt:</p>
<pre><code>rm public/index.html</code></pre>
<p>然后打开文件 config/routes.rb 并在文件中添加以下内容为第二行</p>
<pre><code>root :to => redirect("/ideas")</code></pre>
<p><strong>教练</strong>：请谈谈routes</p>
<h2 id='what_next'>What next?</h2>
<ul>
<li>Add design using HTML & CSS</li>
<li>Add commenting</li>
<li>Add ratings</li>
<li>Use CoffeeScript (or JavaScript) to add interaction</li>
<li>Add proper picture resizing to make loading the pictures faster</li>
</ul>
</body></html>
</div>
</div>
<!-- /content -->
<footer>
<p>2010-2015, Rails Girls. <a href="./press.html">Contact us</a> or follow us on <a href="https://twitter.com/railsgirls">Twitter</a> and <a href="https://www.facebook.com/railsgirls">Facebook</a></p>
<p class="slogan">Get excited and make things!</p>
</footer>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19631067-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>