BÀI TẬP LỚN NHÓM FAM

1. Tóm tắt:

• Tên phần mềm: Truyện Song Ngữ Anh - Việt

• Mô tả: Nhằm mục đích đem đến cho người dùng những câu chuyện giải trí kết hợp với việc rèn luyện khả năng đọc hiểu tiếng

• Nhóm FAM: gồm 4 thành viên

                 Ngô Hải Yến

                 Bùi Thị Diệu Linh

                 Vũ Hoàng Long

                 Đinh Khắc Quý

• Trang chủ sản phẩm đã triển khai: http://truyensongngu.herokuapp.com
• Liên kết đến kho sản phẩm đã triển khai: https://github.com/lymusnosm/truyen2.git
• Cách thức làm việc trong nhóm: Trao đổi qua Facebook.

2.Yêu cầu bài toán:

2.1. Yêu cầu chức năng:

2.1.1. Sơ đồ ca sử dụng:

Có hai tác nhân tham gia sử dụng hệ thống: User và Admin.

User có các trường hợp sử dụng sau:

• Đăng nhập

• Đăng ký tài khoản

• Đăng xuất

• Đọc truyện

• Chia sẻ truyện

• Đánh giá truyện

• Bình luận

Admin cũng có các trường hợp sử dụng giống user nhưng có thêm các trường hợp sử dụng sau:

• Thêm truyện

• Sửa truyện

• Xóa truyện

• Xóa bình luận

• Xóa tài khoản

2.1.2. Features:

  Feature: dangnhap
  In order to do sign in
  As an user
  I want to sign in

  Scenario: Dang Nhap
    Given I am on the login page
    When I fill in "EMAIL" with "[email protected]"
    When I fill in "PASSWORD" with "123456"
    When I click "ĐĂNG NHẬP"
    Then I should be on my own session

Feature: Bar
  In order to use the website easily
  As an user
  I want to select the view

  Scenario: Change to "Trang chủ" page
    Given I am on home page
    Then I can see "Trang Chủ"
    When I click "Trang chủ"
    Then I should be on home page

  Scenario: Change to "Truyện Mới Cập Nhật" page
    Given I am on home page
    Then I can see "Truyện Mới Cập Nhật"
    When I click "Truyện mới cập nhật"
    Then I should be on "Truyện mới cập nhật" page


  Scenario: Change to "Tất cả các truyện" page
    Given I am on home page
    Then I can see "Tất cả các truyện"
    When I click "Tất cả các truyện"
    Then I should be on "Tất cả các truyện" page

  Scenario: Change to "Truyện ngắn" page
    Given I am on home page
    Then I can see "Thể loại"
    When I click "Thể loại"
    Then I should see "Truyện Ngắn" option
    When I click "Truyện Ngắn"
    Then I should be on "Truyện Ngắn" page

  Scenario: Change to "Truyện ngụ ngôn" page
    Given I am on home page
    Then I can see "Thể loại"
    When I click "Thể loại"
    Then I should see "Truyện Ngụ Ngôn" option
    When I click "Truyện Ngụ Ngôn"
    Then I should be on "Truyện Ngụ Ngôn" page

  Scenario: Change to "Truyện cổ tích" page
    Given I am on home page
    Then I can see "Thể loại"
    When I click "Thể loại"
    Then I should see "Truyện Cổ Tích" option
    When I click "Truyện Cổ Tích"
    Then I should be on "Truyện Cổ Tích" page

  Scenario: Change to login page
    Given I am on home page
    Then I can see "Đăng Nhập"
    When I click "Đăng Nhập"
    Then I should be on "Đăng Nhập" page

Feature: Home
  In order to read a story
  As an user
  I want to select a story

  Scenario: Select "Truyện Ngắn"
    Given I am on home page
    When I click on the "1. Truyện Ngắn"
    Then I should be on "Truyện Ngắn" page

  Scenario: Select "Truyện Ngụ Ngôn"
    Given I am on home page
    When I click on the "2. Truyện Ngụ Ngôn"
    Then I should be on "Truyện Ngụ Ngôn" page

  Scenario: Select "Truyện Cổ Tích"
    Given I am on home page
    When I click on the "3. Truyện Cổ Tích"
    Then I should be on "Truyện Cổ Tích" page

Feature: Truyen Co Tich
  In order to read a story
  As an user
  I want to select a story in the list stories

  Background:
    Given I am on "Truyện Cổ Tích" page

  Scenario: Click on a name story
    Given I on "Không bao giờ bỏ cuộc" story
    When I click on the "Không bao giờ bỏ cuộc"
    Then I should on "Không bao giờ bỏ cuộc" story's content page

  Scenario: Click on a picture of a story
    Given I on picture of "Không bao giờ bỏ cuộc" story
    When I click on picture of "Không bao giờ bỏ cuộc" story
    Then I should on "Không bao giờ bỏ cuộc" story's content page

2.2. Yêu cầu chất lượng:

An toàn và dễ sử dụng

3. Thiết kế hệ thống:

3.1. Thiết kế kiến trúc:

• Front-end: HTML, CSS, Bootstrap
• Back-end: Ruby on Rails
• Cơ sở dữ liệu: MySQL, phpMyAdmin.co
• Server: Heroku (có đường dẫn tới Repository của GitHub)
• Sử dụng thêm Google Analytics và Facebook Comments

3.2. Thiết kế cơ sở dữ liệu:

Bảng sau đây mô tả thiết kế cơ sở dữ liệu tổng quan của ứng dụng:

Hình 3.2: Cơ sở dữ liệu

3.3. Thiết kế các thành phần trong ứng dụng:

3.3.1. Thiết kế phần đọc truyện:

a. Thanh chuyển chức năng:

• Ở vị trí đầu tiên, trên nền đen đậm.

• Có 5 thanh chức năng để chuyển tới gồm: Trang Chủ, Truyện Mới Cập Nhập, Tất Cả Các Truyện, Thể Loại, Đăng Nhập.

• Trong thanh Trang Chủ: có hình ngôi nhà và chữ.

• Trong thanh Đăng Nhập: có hình ngôi sao và chữ.

• Trong thanh Thể Loại: khi kích chuột vào sẽ ra một danh sách gồm: Truyện Ngắn, Truyện Ngụ Ngôn, Truyện Cổ Tích, được ghim ở dưới để có thể chọn trực tiếp.

• Còn lại đều chỉ có chữ.

• Các thanh này đều có thể kích đơn chuột vào để chuyển tới trang mới tương ứng.

Hình 3.3.1.a: Thanh chuyển chức năng

b. Thanh tìm kiếm truyện:

• Ở vị trí đầu tiên, bên phải, trên nền đen đậm và cách với thanh chuyển chức năng.

• Có một khung với chữ gợi ý Tìm Kiếm để gõ tên truyện cần tìm và nút có biểu tượng search bên cạnh để bắt đầu tìm hoặc ấn phím enter để tìm truyện sau khi gõ.

• Truyện được tìm sẽ chứa chữ cái ấy.

Hình 3.3.1.b: Thanh tìm kiếm truyện

c. Tiêu đề ứng dụng:

• Phía dưới thanh chức năng.

• Truyện Song Ngữ Anh-Việt với một quyển sách là biểu tượng ở bên cạnh.

Hình 3.3.1.c: Tiêu đề ứng dụng

d. Chi tiết truyện đang đọc:

• Tên truyện, Thể Loại, Tên Tiếng Việt, Tên Tiếng Anh, Thời gian cập nhập, Thanh đánh giá, Thống kê đánh giá.

• Nội dung truyện được lấy từ cơ sở dữ liệu.

Hình 3.3.1.d: Chi tiết truyện đang đọc

e. Bình luận:

• Kết thúc nội dung truyện.

• Gồm có: Thống kê số lượng bình luận, lọc theo hai tiêu chí: mới nhất và cũ nhất, viết bình luận và đăng lên, hiển thị nội dung và tên người bình luận (khi không đăng nhập thì sẽ để bí danh).

• Người dùng cũng có thể sử dụng tính năng bình luận của Facebook.

• Bình luận sẽ được lưu trữ tại cơ sở dữ liệu, sau đó lấy ra để hiển thị.

Hình 3.3.1.e: Bình luận

3.3.2. Thiết kế trang chủ:

• Có lời giới thiệu về trang.

• Có các truyện mới cập nhật nổi bật với hiệu ứng tự động trượt sang đẹp mắt, người dùng có thể chọn để đọc.

3.3.3. Thiết kế trang truyện mới cập nhập:

• Hiển thị danh sách tất cả các truyện mới được cập nhật vào trong ứng dụng.

• Mỗi truyện được hiển thị bao gồm tên Tiếng Việt, tên Tiếng Anh, một phần nội dung truyện, thời gian cập nhật truyện, các lượt đánh giá của truyện.

3.3.4. Thiết kế trang Tất cả các truyện:

• Hiển thị danh sách tất cả các truyện.

Hình 3.3.4: Tất cả các truyện

3.3.5. Thiết kế trang kết quả tìm kiếm truyện:

• Hiển thị các truyện có tên Tiếng Việt hoặc Tiếng Anh chứa từ khóa tìm kiếm.

Hình 3.3.5: Kết quả tìm kiếm truyện

3.3.6. Giao diện đăng nhập, đăng kí:

Mục đích chung: Nhằm giúp người dùng có thể bình luận , đánh giá truyện.

a. Giao diện đăng nhập:

• Sau khi chọn đăng nhập, giao diện đăng nhập sẽ hiển thị gồm hai ô TextBox để nhập vào EMAIL và MẬT KHẨU, ngoài ra còn có hai tùy chọn ĐĂNG NHẬP (nếu người dùng đã có tài khoản) hoặc ĐĂNG KÝ (nếu người dùng chưa có tài khoản).

• Sau khi đăng nhập xong, thì tên người dùng sẽ được hiển thị trên thanh chức năng, thế vào vị trí của tùy chọn tìm kiếm.

Hình 3.3.6.a: Giao diện đăng nhập

b. Giao diện đăng xuất:

Sau khi hết phiên làm việc, người dùng có thể đăng xuất khỏi ứng dụng.

c. Giao diện đăng ký:

• Giao diện đăng ký yêu cầu người dùng phải nhập đầy đủ họ TÊN, HỌ, EMAIL, MẬT KHẨU
• Sau khi đăng ký xong thì tài khoản người dùng đó sẽ được đăng nhập luôn vào trong ứng dụng.

Hình 3.3.6.c: Giao điện đăng ký

4. Cài đặt và kiểm thử hệ thống:

4.1. Chụp ảnh một số màn hình của ứng dụng và các đoạn mã nguồn chính kèm theo giải thích bằng lời

• Giao diện trang chủ

Hình 4.1.a: Một phần giao diện trang chủ

Một phần đoạn mã giao diện Trang chủ

<h1 class="text-white">Truyện song ngữ</h1>
<p class="lead text-white">Đọc sách ^^!<br><br>Đọc sách mang lại cho ta rất nhiều tri thức mới, đưa ta đến với văn hóa từ các nơi trên thế giới, nhưng kiến thức uyên sâu mà ông cha ta đã để lại, nhưng vẻ đẹp kì vĩ của thiên nhiên, ...<br><br>Không chỉ mang đến lợi ích
  từ việc đọc sách, việc đọc sách song ngữ có thể giúp trau dồi thêm khả năng về ngôn ngữ của nước ngoài, lại mở rộng hơn về văn hóa và lỗi sống của họ.&nbsp;<br><br>Với mục đích đó, những mẩu truyện được sưu tầm giúp chúng ta có thể vừa tiếp
  thu thêm kiến thức, vừa trau dồi vốn từ vựng và ngữ pháp, lại vừa có thể thư giãn sau một ngày làm việc căng thẳng&nbsp;<br><br>Nào chúng ta cùng đọc sách nào!&nbsp; &nbsp;&nbsp;</p>
</div>
<div class="col-md-6"><img src="https://usatcollege.files.wordpress.com/2014/09/139786707.jpg" class="img-fluid"><br><br>
  <ol>
    <% @theloais.each do |t| %>
    <li><a href="<%= theloai_path(t) %>" class="text-white"><%= t.title%></a></li>
    <%end%>
  </ol>
</div>

• Giao diện truyện mới cập nhập

Hình 4.1.b: Giao diện truyện mới cập nhập

Một phần đoạn mã giao diện Truyện mới cập nhập

<div class="col-md-2">
  <p align="center">
    <p>Cập Nhật</p>
    <p>about 21 hours ago</p>
  </p>
    <!-- CODE LAY DU LIEU RATE TUNG TRUYEN ( CODE NAY DI KEM CODE TRONG CONTROLLER)-->

    <div class="row">
    <br>

       <!--HIEN THI SAO TUONG UNG VOI DIEM -->

      <img src="https://raw.githubusercontent.com/wazery/ratyrate/master/lib/generators/ratyrate/templates/star-on.png"/>
      <img src="https://raw.githubusercontent.com/wazery/ratyrate/master/lib/generators/ratyrate/templates/star-on.png"/>
      <img src="https://raw.githubusercontent.com/wazery/ratyrate/master/lib/generators/ratyrate/templates/star-half.png"/>
       (2.5 / 5)
    </div>
  </p>
  </div>
</div>

• Giao diện đọc truyện với phần bình luận

Hình 4.1.b: Giao diện đọc truyện với phần bình luận

Một phần đoạn mã giao diện Đọc truyện

 <!--BINH LUAN-->
<div class="py-5">
  <div class="container bg-faded">
<div class="row">
  <div class="col-md-12">
<strong class=""><%="#{@binhluan_num} bình luận"%></strong>
<% if current_user %>
<%= form_for (@binhluan) do |f| %>
<%= f.text_area :content ,class: "form-control"%>
<%= f.hidden_field :truyen_id, :value => @truyen.id %>
<%= f.hidden_field :user_id, :value => "#{current_user.try(:first_name)} #{current_user.try(:last_name)}"%>
<br>
<%= f.submit "Gửi bình luận",class: "btn btn-outline-danger" %>
<%end%>
<%else%>
<textarea class= "form-control"></textarea>
<br>
<a href="<%=login_path%>" class="btn btn-outline-danger">Đăng nhập để bình luận</a>


<%end%>
  </div>
</div>
<br>
<% @binhluans.each do |t|%>
<div class="row bg-faded">
  <div class="col-md-1"><img src="https://pingendo.com/assets/photos/user_placeholder.png" class="center-block rounded-circle img-fluid my-3"></div>
  <div class="col-md-11 my-4" style="word-wrap: break-word;">
<strong><%=t.user_id%></strong>
<p class="lead"><%=" đã bình luận | #{time_ago_in_words(t.created_at.in_time_zone(7))} ago :"%></p>
<p><%= simple_format(t.content)%></p>
  </div>
</div>
<%end%>
  </div>
</div>

2. Kiểm thử đơn vị, kiểm thử chấp thuận tự động được xây dựng như thế nào, thống kê số lượng ca kiểm thử, kết quả chạy thử bao phủ được bao nhiêu phần trăm tổng số dòng mã nguồn:

Kiểm thử đơn vị:

Kiểm tra thanh bar:

Given /^I am on home page$/ do
  visit root_path
end
Given(/^I am on the login page$/) do
  visit login_path
end
Then(/^I should see "([^"]*)"$/) do |arg1|
  page.should have_content(arg1)
end

When(/^I click "([^"]*)"$/) do |arg1|
  click_on(arg1, match: :first)
end

When(/^I fill in "([^"]*)" with "([^"]*)"$/) do |arg1, arg2|
  fill_in(arg1.gsub(' ', '_'), :with => arg2)
end
Then /^I should be on home page$/ do
  current_path.should == home_path
end

Then(/^I should be on my own session$/) do
  current_path.should == login_path
end

Then(/^I can see "([^"]*)"$/) do |arg1|
  page.should have_content(arg1)
end

And(/^I should see "([^"]*)" page$/) do |arg|
  page.should have_content(arg)
end


Then(/^I should see "([^"]*)" option$/) do |arg|
  page.should have_content(arg)
end

Kiểm tra phần thể loại:

Given(/^I am on "([^"]*)" page$/) do |arg|
  if arg == "Truyện Ngắn"
    visit theloai_path(1)
  elsif arg == "Truyện Ngụ Ngôn"
    visit theloai_path(2)
  elsif arg == "Truyện Cổ Tích"
    visit theloai_path(3)
  end
end

Then(/^I should see content of "([^"]*)"$/) do |arg|
  page.should have_content(arg)
end

Then(/^I should on "([^"]*)" story's content page$/) do |arg|
  page.should have_content(arg)
end

When(/^I click on the "([^"]*)"$/) do |arg|
  if arg == "1. Truyện Ngắn"
    arg = "Truyện Ngắn"
  elsif arg == "2. Truyện Ngụ Ngôn"
    arg = "Truyện Ngụ Ngôn"
  elsif arg == "3. Truyện Cổ Tích"
    arg = "Truyện Cổ Tích"
  end
  click_on(arg, match: :first)
end

Kiểm tra phần truyện:

Then(/^I should see "([^"]*)" story's information$/) do |arg|
  visit truyen_path(7)
end

And(/^I should see "([^"]*)" story's content in VietNamese$/) do |arg|
  visit truyen_path(7)
end

And(/^I should see "([^"]*)" story's content in English$/) do |arg|
  visit truyen_path(7)
end

Kiểm tra trang chủ:

Then(/^I should be on "([^"]*)" page$/) do |arg|
  if arg == "Truyện ngắn"
    current_path == theloai_path(1)
  elsif arg == "Truyện ngụ ngôn"
    current_path == theloai_path(2)
    else current_path == theloai_path(3)
  end
end

3. Kiểm thử bằng tay, kịch bản, báo cáo kiểm thử:

5. Triển khai và đánh giá sản phẩm:

1. Khởi tạo dữ liệu ban đầu như thế nào:

• Dữ liệu về truyện trong ứng dụng: Nhóm khởi tạo dữ liệu dựa trên dữ liệu từ ứng dụng đọc truyện mobile Truyện song ngữ
• Dữ liệu người dùng: không có dữ liệu khởi tạo ban đầu, toàn bộ dữ liệu người dùng đều được tạo ra trong quá trình kiểm thử sản phẩm bằng tay hoặc do người dùng thật sử dụng

2. Đánh giá của người dùng:

• Truyện trong ứng dụng có nội dung hay
• Giao diện trang web hướng người dùng, dễ sử dụng và đẹp

6. Tổng kết:

1. Tự đánh giá việc triển khai bài tập nhóm, tự nhận xét kết quả đạt được:

• Nhóm đã hoàn thành được các chức năng chính đề ra từ đầu, ngoài ra cũng đã thêm được các chức năng mới như Facebook Comments; đánh giá truyện của người dùng; quyền quản lý, thao tác với cơ sở dữ liệu của Admin, ...
• Việc triển khai bài tập nhóm vẫn còn thiếu sót , nhưng cả nhóm vẫn đoàn kết và thống nhất cùng nhau hoàn thiện sản phẩm

2. Nêu bài học kinh nghiệm rút ra từ bài tập dự án của nhóm:

• Cần phải nghiêm túc và có trách nhiệm hơn với dự án của cả nhóm
• Cần có phương án triển khai phù hợp với yêu cầu bài toán và khả năng của cả nhóm cũng như của từng người trong nhóm

7. Phụ lục:

1. Thống kê đóng góp (Github -> Graphs -> Contributors) của cả nhóm:

2. Báo cáo đóng góp của từng người:

Đóng góp chung của cả nhóm: Chọn, phân loại và thiết kế giao diện

a. Ngô Hải Yến:

• Liên kết nhóm và phân chia công việc cho các thành viên trong nhóm

• Chỉnh sửa các giao diện, đổi font chữ, thêm background

• Chỉnh sửa code

• Viết và chỉnh sửa test

• Cập nhật cơ sở dữ liệu, viết Documents

• Thêm chức năng Facebook Comments

b. Bùi Thị Diệu Linh:

• Tìm và chọn ứng dụng

• Thao tác với giao diện

• Viết test chính

c. Vũ Hoàng Long:

• Thêm và chỉnh sửa cơ sở dữ liệu
• Thao tác với giao diện
• Viết code chính và viết test
• Thêm chức năng đánh giá truyện
• Gắn Google Analytics và đẩy trang web lên Heroku

d. Đinh Khắc Quý:

• Lấy và chuyển đổi cơ sở dữ liệu

• Thiết kế cơ sở dữ liệu

• Thao tác với thanh bar

• Viết test và Documents

3. Các phụ lục khác nếu có để giúp cho việc đánh giá dự án nhóm được chính xác hơn:

Nhóm làm việc và thao tác trên nhiều Repository của GitHub cùng với trao đổi qua Facebook nhiều nên việc đánh giá đóng góp của từng người chỉ mang tính tương đối