Tạo Bookshelf app với Lotus Framework
lotusrb
11
HTML5
25
CSS
40
White

My Mai viết ngày 24/11/2015

Hiện tại mình đang làm Bookshelf application nho nhỏ với Lotus Framework. Mình cảm thấy khá thú vị. Chính vì thế mỗi tuần mình sẽ viết lại cách làm tại đây. Chậc tại sao lại là từ A to Z ta??? Lý do chính là:

  • Mình open source code của mình ở Github (https://github.com/mymai91/bookshelf) ấy, bạn nào thích thì có thể làm chung với mình. Mình có chia thành từng sprint 1. Các bạn đọc sẽ thấy dễ hiểu đó.
  • Nghe đồn dạo này vài công ti ở Sài Gòn phỏng vấn đầu vào có thêm option cho các bạn xây dựng mini app với Lotus đó. Hy vọng chuỗi bài viết này cũng sẽ giúp các bạn vượt qua vòng thử thách 0_0. Ai vượt qua rồi thì nhớ liên hệ khao mình đi ăn ^_^

Thôi bắt đầu nào không chém gió nữa ^0^

Phần 1 Make layout HTML/CSS cho app

Hình ảnh mô phỏng:

Wifeframe https://projects.invisionapp.com/share/AE4CBIJDG#/screens để theo dõi dễ dàng hơn
home page
alt text
detail page
alt text

Khởi động nào!!!

Create một project

Tất nhiên các bước dưới đây chúng ta phải thực hiện ở terminal

Install lotusrb

gem install lotusrb

Create project có tên bookshelf

lotus new bookshelf

Sau khi hoàn thành thì tiếp tục install gem

cd bookshelf && bundle

Run server

lotus s

port default của Lotus là 2300 vì vậy open browser lên và gõ localhost:2300 là các bạn thấy được thành quả ban đầu rồi đó.

Tạo layout HTML/CSS cho app

Sau khi tạo xong 1 project với Lotus có thể theo dõi cấu trúc thư mục được tạo ra như sau:
alt text

Ở project này mình sử dụng Bootstrap Framework để make layout cho dễ dàng và thuận tiện hơn:

Install Bootstrap

Để install Bootstrap thì mình sử dụng bower install. Chính vì thế cần tạo ra 1 file có tên là .bowerrc Các bạn có thể thấy file .bower mình tạo ra ở trên hình cấu trúc thư mục.
Trong file .bowerrc ta viết các mã code này

{
  "directory": "apps/web/public/stylesheets"
}

Mã này có ý nghĩa là khi chúng ta install với câu lệnh bower install [cái gì cần install] thì nó sẽ được lưu theo cấu trúc thư mục apps/web/public/stylesheets

Install Bootstrap

bower install bootstrap

Dựng layout

Hiện tại chúng ta có 2 pages đó là home page và detail page. Trong đó:

  • Home page sẽ hiển thị tất cả các cuốn sách, hiển thị tất cả tương ứng với 1 action đó chính là GET all tương đương với action index
  • Detail page sẽ hiển thị nội dung chi tiết của mỗi quyển sách tương ứng với 1 action đó chính là GET by id, có nghĩa là lấy nội dung chi tiết dựa vào id của quyển sách đó tương đương với action show

Theo phân tích chúng ta có 2 action 1 là index và 1 là show

Để generater thì Lotus có cung cấp Lotus generater. Tìm hiểu thêm tại http://lotusrb.org/guides/command-line/generators/

lotus g action web book#index

lotus g action web book#show

Viết HTML ở đâu?

Sau khi generater thì có thể trên terminal để thấy những file mới được tạo ra. trong đó sẽ có tạo ra file template. Kiểm tra tại bookshelf/apps/web/templates/book/
ta thấy được có 2 file:

show.html.erb
index.html.erb

Chúng ta sẽ viết HTML vào 2 file này.

Viết CSS ở đâu?

Các bạn truy cập vào bookshelf/apps/web/public/stylesheets stylesheets là nơi để viết CSS cho app đấy

Kết luận

Mình nghĩ bài này khá là dài rồi, nên mình xin dừng ở đây. Qua bài tiếp theo mình sẽ viết cụ thể HTML/CSS cho app

Các bạn có thể xem code tại đây: https://github.com/mymai91/bookshelf/tree/create-template

Hy vọng qua bài này có thể chia sẽ được với các bạn rõ hơn về Lotus

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

My Mai

33 bài viết.
177 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
21 8
Lotus là gì? (Link) là một Ruby Web Framework mới với chú trọng vào cấu trúc tách rời với thiết kế đơn giản và dễ hiểu. Hiện tại thì Lotus vừa re...
My Mai viết 3 năm trước
21 8
White
19 21
Bạn muốn load 3 image khác nhau (Ý mình ở đây là dùng tag không phải background nhé) cho 3 loại màn hình khác nhau (small, medium, large). Bạn sẽ l...
My Mai viết 3 năm trước
19 21
White
19 9
Tham gia cộng đồng Thoáng đó cũng đã 2 năm từ lúc tớ tham gia cộng đồng Ruby Việt Nam. Giờ ngồi ngẫm lại được gì và mất gì :v Thật thì chẳng mất...
My Mai viết gần 2 năm trước
19 9
Bài viết liên quan
White
12 1
Lấy fake path của file trong html input Ngữ cảnh: em cần làm một cái nút tải ảnh lên có preview. GIải pháp đầu: Dùng (Link) đọc file ảnh thành ba...
Hoàng Duy viết 2 năm trước
12 1
White
17 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 2 năm trước
17 10
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
33 bài viết.
177 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!