Xây Dựng ứng Dụng đầu Tiên Của Bạn - Rails Girls

Trang chủ » Cú Pháp Trong Rails » Xây Dựng ứng Dụng đầu Tiên Của Bạn - Rails Girls

Có thể bạn quan tâm

Xây dựng ứng dụng đầu tiên của bạn

Viết bởi Vesa Vänskä, @vesan

Hãy đảm bảo rằng bạn đã cài đặt Rails. Làm theo hướng dẫn cài đặt để có môi trường cần thiết.

Làm quen với các công cụ

Trình soạn thảo văn bản

  • Atom, Sublime Text, Vim và Emacs là một vài trình soạn thảo văn bản bạn có thể dùng để viết code và chỉnh sửa các file.

Terminal (thường được biết đến là Command Prompt ở Windows)

  • Là nơi bạn khởi động rails server và chạy các câu lệnh.

Trình duyệt Web

  • (Firefox, Safari, Chrome) dùng để xem ứng dụng của bạn.

Chú ý

Bạn cần chú ý chọn đúng hướng dẫn theo hệ điều hành của bạn - các câu lệnh bạn cần chạy trên máy Windows sẽ hơi khác biệt so với trên Mac hay Linux. Nếu gặp vấn đề, hãy xem công tắc đổi hệ điều hành ở phía bên dưới các câu lệnh. Nếu bạn dùng Cloud Service (ví dụ như C9.io), bạn sẽ cần phải chạy các câu lệnh dành cho Linux ngay cả khi hệ điều hành máy bạn đang dùng là Windows.

1.Bắt đầu

Chúng ta sẽ tạo một Rails app có tên là railsgirls.

Trước hết, bạn hãy khởi động terminal:

  • Mac OS X: Mở Spotlight, gõ Terminal và click vào ứng dụng Terminal
  • Windows: Click Start và tìm Command Prompt, sau đó click Command Prompt with Ruby on Rails.
  • Linux (Ubuntu/Fedora): Tìm Terminal ở trong dash và click Terminal.
  • Cloud service (ví dụ C9.io): Đăng nhập vào tài khoản của bạn, mở workspace và vào IDE (xem hướng dẫn cài đặt để biết thêm chi tiết). Terminal thường ở phía dưới trong cửa sổ trình duyệt của bạn.

Tiếp theo, hãy thực hiện những câu lệnh sau:

mkdir projects

Bạn có thể xác nhận rằng thư mục có tên projects đã được tạo bằng cách chạy câu lệnh: ls. Bạn sẽ thấy thư mục projects trong kết quả. Để đổi thư mục hiện tại sang thư mục projects hãy chạy:

cd projects

Bạn có thể xác nhận rằng mình đang ở trong một thư mục rỗng bằng cách chạy câu lệnh ls một lần nữa. Giờ bạn sẽ tạo một app mới với tên gọi railsgirls bằng cách chạy:

rails new railsgirls

Câu lệnh này sẽ tạo một app mới trong thư mục railsgirls, và một lần nữa, ta sẽ đổi đường dẫn vào trong rails app của chúng ta bằng cách chạy câu lệnh:

cd railsgirls

Nếu bạn chạy ls trong đường dẫn bạn sẽ thấy một số thư mục như app và config. Giờ bạn có thể khởi động rails server bằng câu lệnh:

rails server
mkdir projects

Bạn có thể xác nhận rằng thư mục có tên projects đã được tạo bằng cách chạy câu lệnh: dir. Bạn sẽ thấy thư mục projects trong kết quả. Để đổi thư mục hiện tại sang thư mục projects hãy chạy:

cd projects

Bạn có thể xác nhận rằng mình đang ở trong một thư mục rỗng bằng cách chạy câu lệnh dir một lần nữa. Giờ bạn sẽ tạo một app mới với tên gọi railsgirls bằng cách chạy:

rails new railsgirls

Câu lệnh này sẽ tạo một app mới trong thư mục railsgirls, và một lần nữa, ta sẽ đổi đường dẫn vào trong rails app của chúng ta bằng cách chạy câu lệnh:

cd railsgirls

Nếu bạn chạy dir trong đường dẫn bạn sẽ thấy một số thư mục như app và config. Giờ bạn có thể khởi động rails server bằng câu lệnh:

rails server

Mở http://localhost:3000 bằng trình duyệt của bạn. Nếu bạn dùng cloud service (ví dụ C9.io), thì hãy dùng chức năng preview (xem thêm phần hướng dẫn cài đặt).

Bạn sẽ thấy một trang với logo Rails và dòng “Yay! You’re on Rails!”, điều này có nghĩa là Rails app của bạn đã hoạt động.

Để ý rằng trong cửa sổ này, command prompt không còn hiện nữa bởi bạn đang ở trong Rails server, command prompt trông giống như thế này:

$
>

Khi command prompt không hiện thì bạn không thể chạy các câu lệnh mới nữa. Nếu bạn thử chạy cd hoặc một câu lệnh khác thì nó sẽ không hoạt động. Để trở lại command prompt bình thường:

Bấm Ctrl+C trong terminal để thoát server.

Coach: Giải thích tác dụng của từng câu lệnh và cho biết Server làm nhiệm vụ gì.

2.Tạo Idea scaffold

Chúng ta sẽ dùng chức năng scaffold của Rails để tạo ra một xuất phát điểm cho phép ta liệt kê, thêm, xoá, sửa và xem các thứ, ở đây là Idea.

Coach: Rails scaffolding là gì? (Giải thích về câu lệnh, tên model và liên kết cơ sở dữ liệu, quy tắc đặt tên, thuộc tính và kiểu…) Migration là gì và tại sao nó lại cần thiết?

rails generate scaffold idea name:string description:text picture:string

Scaffold sẽ tạo một vài file mới trong thư mục project của bạn, nhưng để đảm bảo ứng dụng hoạt động chính xác ta cần chạy một vài câu lệnh khác để cập nhật cơ sở dữ liệu và khởi động lại server.

rails db:migrate rails server

Mở http://localhost:3000/ideas bằng trình duyệt của bạn. Người dùng cloud service (ví dụ C9.io) cần thêm ‘/ideas’ vào sau url preview (xem thêm hướng dẫn cài đặt).

Thử click vào xung quanh và kiểm tra xem bạn thu được những gì sau khi chạy những câu lệnh vừa rồi.

3.Thiết kế

Coach: Nói về mối quan hệ giữa HTML và Rails. Phần nào của view là HTML và Embeded Ruby (ERB) là gì? MVC là gì và nó có liên quan như thế nào? (Model và controller có nhiệm vụ sinh ra HTML view.)

Hiện giờ ứng dụng của bạn trông chưa được đẹp lắm. Tuy nhiên, chúng ta sẽ dùng thư viện Bootstrap của Twitter để dễ dàng tạo nên một giao diện đẹp hơn.

Mở app/views/layouts/application.html.erb trong trình soạn thảo văn bản, ở phía trên dòng

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

bạn hãy thêm

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.css">

và thay thế

<%= yield %>

bởi

<div class="container"> <%= yield %> </div>

Ta cũng sẽ thêm thanh điều hướng và footer vào layout. Trong cùng file này, ở bên dưới phần <body> thêm

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">The Idea app</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="/ideas">Ideas</a></li> </ul> </div> </div> </nav>

và trước </body> thêm

<footer> <div class="container"> Rails Girls <%= Time.now.year %> </div> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.js"></script>

Bây giờ hãy thay đổi “style” của bảng Idea. Mở app/assets/stylesheets/application.css và thêm vào bên dưới

body { padding-top: 100px; } footer { margin-top: 100px; } table, td, th { vertical-align: middle; border: none; } th { border-bottom: 1px solid #DDD; }

Chắc chắn bạn đã lưu các file trên và refresh lại trình duyệt để xem điều gì đã thay đổi. Bạn cũng có thể tiếp tục chỉnh sửa HTML và CSS sau.

Coach: Giải thích một chút về CSS và layout.

4.Thêm phần upload ảnh

Ta cần cài một phần mềm để giúp ta upload file trong Rails

Mở Gemfile trong thư mục project bằng trình soạn thảo văn bản của bạn, bên dưới dòng

gem 'sqlite3'

thêm

gem 'carrierwave'

Coach: Giải thích thư viện là gì và chúng hữu ích như thế nào. Mô tả về phần mềm mã nguồn mở.

Bấm Ctrl+C trong terminal để thoát server.

Trong terminal chạy:

bundle

Giờ ta có thể sinh ra đoạn code để xử lý việc upload. Trong terminal chạy:

rails generate uploader Picture

Giờ hãy chạy lại server.

Chú ý: Một số người có thể dùng một terminal thứ hai để chạy rails server một cách liên tục. Nếu vậy, giờ bạn cần khởi động lại tiến trình Rails server. Thực hiện điều này để app load các thư viện mới được thêm vào.

Nếu có một thông báo lỗi không tìm thấy uploader thì cần thêm dòng dưới đây

gem 'net-ssh'

Nếu bạn thêm gem ở trên, trong terminal hãy chạy lại:

bundle

Mở app/models/idea.rb bên dưới dòng

class Idea < ApplicationRecord

thêm

mount_uploader :picture, PictureUploader

Mở app/views/ideas/_form.html.erb và thay đổi

<%= form.text_field :picture, id: :idea_picture %>

thành

<%= form.file_field :picture, id: :idea_picture %>

Trong trình duyệt của bạn, thêm Idea cùng với một bức ảnh. Khi bạn upload ảnh, nó trông không được dễ nhìn cho lắm bởi nó chỉ hiện mỗi đường dẫn tới file, hãy sửa nó nào.

Mở app/views/ideas/show.html.erb và sửa

<%= @idea.picture %>

thành

<%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %>

Bây giờ, hãy refresh trình duyệt của bạn và xem điều gì vừa thay đổi.

Coach: Nói một chút về HTML.

5.Tinh chỉnh route

Mở http://localhost:3000 (hoặc preview url, nếu bạn đang dùng cloud service). Nó vẫn hiện trang với dòng chữ “Yay! You’re on Rails!”. Bây giờ chúng ta hãy làm nó chuyển tới trang Idea.

Mở config/routes.rb và sau dòng đầu tiên thêm

root 'ideas#index'

Kiểm tra thay đổi vừa rồi bằng cách mở root path (chính là http://localhost:3000 hay preview url) trong trình duyệt.

Coach: Nói về route, bao gồm cả chi tiết về thứ tự của route, mối liên hệ của chúng với các file tĩnh.

6.Thêm trang tĩnh

Hãy cùng thêm trang tĩnh vào app của bạn, nơi chứa thông tin về tác giả — chính là bạn đấy!

rails generate controller pages info

Câu lệnh này sẽ tạo cho bạn một thư mục mới bên trong app/views với tên là /pages và trong đó có một file gọi là info.html.erb. Đây sẽ là trang hiển thị thông tin về bạn.

Một đường dẫn đơn giản cũng được thêm vào trong file routes.rb.

get 'pages/info'

Giờ bạn có thể mở file app/views/pages/info.html.erb và thêm thông tin của mình bằng HTML. Để xem trang thông tin này, hãy truy cập url http://localhost:3000/pages/info hoặc nếu bạn dùng cloud service hãy thêm /pages/info vào sau preview url.

7.Thêm nút bấm vào thanh điều hướng

Bây giờ chúng ta hãy thêm một nút bấm trên thanh điều hướng để mọi người có thể dễ dàng chuyển đến trang tĩnh mà bạn vừa tạo ra.

Sử dụng trình soạn thảo để mở file app/views/layouts/application.html.erb, bên dưới dòng

<li><a href="/ideas">Ideas</a></li>

bạn bổ sung

<li><a href="/pages/info">Info</a></li>

Hãy refresh trang web và click vào liên kết mới được bổ sung để xác nhận rằng nó hoạt động đúng như dự định.

8+.Tiếp theo sẽ là gì?

  • Thêm design sử dụng HTML và CSS
  • Thêm rating
  • Sử dụng CoffeeScript (hoặc JavaScript) để thêm tương tác
  • Thêm chức năng resize ảnh để tải dữ liệu ảnh nhanh hơn

Các hướng dẫn khác

  • Handy cheatsheet for Ruby, Rails, console etc.
  • Guide 1: Guide to install Rails (You probably already did this one!)
  • Guide 2: Build Your First App (This current page!)
  • Guide 3: Push Your App to GitHub
  • Guide 4: Put your app online with…
    • Heroku / OpenShift / anynines / Engine Yard / prepare for deployment with Phusion Passenger
  • Guide 5: Allow Comments on Your App
  • Guide 6: Add design using HTML & CSS
  • Guide 7: Create thumbnails with Carrierwave
  • Guide 8: Add Authentication (user accounts) with Devise
  • Guide 9: Add Profile Pics with Gravatar
  • Guide 10: Improve your design with HTML and CSS
  • Guide 11: Continuous Deployment
    • Test your app with RSpec / Ease up development with Phusion Passenger / Simplifying your tests with Shoulda Matchers / CD with Travis-CI / CD with Codeship
  • Guide 12: Build a voting app in Sinatra
  • Guide 13: Build a diary app in Ruby on Rails
  • Guide 14: Add a back-end to your app (admin pages)
  • Guide 15: Go through additional explanations for the App

Từ khóa » Cú Pháp Trong Rails