Rails入門與新人實戰經驗分享

Rails入門與新人實戰經驗分享

小蟹的Ruby on Rails學習之路

1

1

Who am I

• I’m 小蟹

• Master: Ruby & Ruby on Rails

• Company: PIXNET

• Site: http://belovely.tw/

• Blog: http://wildjcrt.pixnet.net/

2

2

Agenda

• Introduction Ruby on Rails

• Rails basic training course

• Working experience

• Example

3

3

Introduction Ruby on Rails

4

4

Ruby

• 松本行弘 まつもとゆきひろ，別名Matz

• 由於 Perl 與6月的誕生石 pearl 音同，因此 Ruby 以7月的誕生石 ruby 命名。

* http://www.ruby-lang.org/en/

* http://www.ruby-lang.org/zh_TW/ (中)

* http://ruby.tw/ (中)

5

5

Ruby on Rails (1)

• David Heinemeier Hanson (37signals)

• Yehuda Katz (Engine Yard)

* http://rubyonrails.org/

* http://www.rubyonrails.org.tw/ (中)

6

6

Ruby on Rails (2)

• A web framework for Ruby

• MVC architecture

• Agile software development 敏捷開發

- Don't Repeat Yourself. 不要重複自己

- Convention over Configuration. 慣例勝於配置

7

7

Website using Rails

• BeLovely

• Techbang

• Twitter

• Github

• Tenlong

• Basecamp

• ......more8

8

In general,

it takes a significant investment of time to learn Rails.

9

9

Regular learning roadmap

http://techiferous.com/2010/07/roadmap-for-learning-rails/

10

10

But,

we now have another way in the beginning.

11

11

Rails basic training course

12

12

2010 Ruby on Rails 書單 與 練習作業

• http://blog.xdite.net/?p=1754

- http://blog.xdite.net/?p=1807

- http://wildjcrt.pixnet.net/blog/post/26624950

*This course is designed by xdite.

Rails 2

13

13

Course purpose

• Basic knowledge

- git, editor, linux cli

• Useful services

- CRUD, authentication, pagination, attachment files, admin backstage

• Bottleneck

- rack, environment setting

14

14

Course 0: Git

• Open a project in github.

• Practice git useful commands.

- pull, push, commit, branch, add, checkout, merge, status, diff, grep

* Peepcode 的 Git 與 Pro Git

* http://wildjcrt.pixnet.net/blog/post/26458848

15

15

Course 0: Editor

• vgod 的「給程式設計師的Vim入門圖解說明」全部練習一遍

- http://blog.vgod.tw/2009/12/08/vim-cheat-sheet-for-programmers/

* http://c9s.blogspot.com/2009/08/vim-hacks-coscup.html

* Oreilly 的 精通 vi 與 vim

* Pragmatic 的 TextMate: Power Editing for the Mac

16

16

Course 0: Linux CLI

• Peepcode 的 Meet the Command Line、Advanced Command Line 全部練習一遍

17

17

Reference before course

* http://rails.pixnet.net/blog/category/list/1603567

* http://wildjcrt.pixnet.net/blog/category/list/1431631

* Ruby Programming — 向 Ruby 之父學程式設計

* Ruby for Rails - Rails 開發者必備的 Ruby 學習手冊

* The Well-Grounded Rubyist

* 碼上就會：Rails敏捷開發網站

* Agile Web Development with Rails, Third Edition

* The Rails Way

* Ruby Pocket Reference

* Rails Recipes

* Advanced Rails Recipes: 84 New Ways to Build Stunning Rails Apps

18

18

Course 1 (1)

• Create a new rails project.

• Setup configuration.

- database.yml

- .gitignore

• Push to github.

* http://rails.pixnet.net/blog/post/22953827

19

19

Course 1 (2)

• Complete a basic forum.

- Forum model CRUD (scaffold)

- Post model CRUD (scaffold)

- Setting routes in this format :http://example.org/forums/1/posts/2

* http://rails.pixnet.net/blog/post/22956704

* http://ihower.tw/training/rails-tutoral.html

20

20

Course 2

• User can login / logout / signup.

- Guest can view all posts.

- Post needs to login forum.

- User can only edit and destroy his own posts.

• Plugin: http://github.com/technoweenie/restful-authentication

DRY!

21

21

Course 3• Forum posts order and paginate.

- params, pagination

- counter_cache

- named_scope :recent

• Plugin: http://github.com/mislav/will_paginate

* http://railscasts.com/episodes/23-counter-cache-column

* http://railscasts.com/episodes/108-named-scope

22

22

Course 4

• Attachment files

- PostAttachment model

- form_for, multipart

• Plugin: http://github.com/thoughtbot/paperclip

• Plugin: http://github.com/technoweenie/attachment_fu

23

23

Course 5

• Forum can manage admin accounts.

• Build backstage.

- route : namespace

- before_filter :require_is_admin

* http://railstips.org/blog/archives/2007/04/28/namespaces-added-to-routes/

24

24

Course 6• Rake

- create seed data

- create fake data

• Plugin: http://github.com/ryanb/populator

* http://railsenvy.com/2007/6/11/ruby-on-rails-rake-tutorial

* http://ryandaigle.com/articles/2009/5/13/what-s-new-in-edge-rails-database-seeding

25

25

Course 7 (1)

• Installing Ruby on Rails environment in a pure OS (recommend Debian / Ubuntu).

- Ruby Enterprise Edition

- MySQL

- Apache / nginx

- Passenger

- Capistrano

26

26

Course 7 (2)

• Deploy the practice project.

- Setup deploy.rb.

- Create an account for deploy.

- Setup ssh.

- Setup database, run migration.

- Setup virtual host.

27

27

Course 7 (3)

* http://wildjcrt.pixnet.net/blog/post/26624950

* http://blog.xdite.net/?p=1807

* AWDR3 的 deploy 章節

* Ruby Pocket Reference 的 capistrano 章節

28

28

Another Rails Training(中)

*designed by ihower

http://ihower.tw/blog/

由淺入深學習 Ruby on Rails

Ruby on Rails 實戰手冊

http://ihower.tw/rails2/

http://ihower.tw/rails3/

29

Rails3

29

Related Link• 如何入門 Ruby on Rails?（2009）

- http://rails.pixnet.net/blog/post/27997778

• 進階學習 Ruby on Rails （2009）

- http://rails.pixnet.net/blog/post/27997784

• Rails 新手禁用條例

- http://wildjcrt.pixnet.net/blog/post/26784340

• 實際動手做 Rails 最佳實踐

- http://wildjcrt.pixnet.net/blog/post/27037216

• Rails 開發注意要點（from T客邦）

- https://gist.github.com/758319

30

30

Working experience

31

31

Usual work

• Development

- Ex: note on your photos, trying products, SSO, ...etc.

• Maintaining

- Ex: crontab, daily backup, search index, ...etc.

32

32

Development new services

• Planning features in the service.

• Photoshop layout by art.

- layout to HTML by art.

- layout to Ralis by tech.

33

33

When tech get photoshop layout,

• Divided to many functional blocks. (tickets)

• Design models and schema by blocks. (paper and pen)

• Create new branch in git.

• Create Models and migrations.

• Apply to controllers and views.

34

34

You maybe need to

• write model method and helper methods.

• write jQuery.

• add your backstage services.

35

35

When tech get HTML layout

• Ex: http://show.channel.pixnet/index.html

• Divided into Rails layout.

• Combined your functional blocks with HTML and CSS.

36

36

Finally

• Deploy branch to staging.

• Test and feedback for adjustment.

• Repeat until service online.

• Merge master and deploy to production.

37

37

Example

38

38

39

Plan - Main

39

Plan - List

40

40

Plan - Sticker

41

41

Photoshop - Main

42

42

Photoshop - List

43

43

Photoshop - Sticker

44

44

Tech - List (1)

45

45

Tech - List (2)

46

46

Tech - List (3)

47

47

Tech - Sticker (1)

48

48

Tech - Sticker (2)

49

49

Tech - Sticker (3)

50

50

Combination - Layout

51

51

Combination - List (1)

52

52

Combination - List (2)

53

53

54

http://belovely.tw/event/perfect

54

Q & A

55

55