Nhóm TTMD báo cáo bài tập lớn

1. Tóm tắt

Tên phần mềm: Ambient Noise
Các thành viên trong nhóm

Nguyễn Việt Tú

Đại Văn Dự

Phạm Doãn Mỹ

Phạm Văn Thịnh

Repo của nhóm: https://github.com/yosenju238/INT2208-1-2017/tree/my_feature_branch/Nhom-TTMD/Ambient Noise
Trang chủ sản phẩm: https://ambnoise.herokuapp.com/

Lưu ý: Heroku không thể cập nhập tính năng chạy trên youtube của nhóm

2. Yêu cầu

1. Yêu cầu chức năng

1.1. Yêu cầu ca sử dụng

1.2. Các features, senarios

 Feature: Testing UI, theme,path and button click in homepage
          As a user name Ran

 Background:

 Given   : Ran is being in home page in beta version

 When    : Ran see 3 button to change router

 And     : Ran see 6 button audio and 1 button clear audio

 And     : Ran click on Rain button

 Then    : Rain sound is activated

 When    : Each button have right source

 And     : Ran see 2 line use h1 html text

 And     : Ran see a footer

 And     : Ran see background image

 And     : Ran see big bar name Ambient Noise



 Fearture: Testing UI, theme, count down and button in Timer outer
         As a user name Ran

 Background:

 Given   : Ran is being in timer page in beta version

 When    : Ran see 3 button to change router

 And     : Ran see 8 button timer include 7 button time was set and 1 button custom time

 And     : 1 button dialog choose noise

 And     : Ran click on 1 minutes

 Then    : Time count down from 60 seconds

 When    : Time count down is over, a messenger "Time out!" ppear

 And     : Audio is stoped




 Fearture: Testing UI, theme, count down and button in Group router
          As a user name Ran

 Background:

 Given   : Ran is being in group page in beta version

 When    : Ran see 3 button to change router

 And     : Ran see 7 button timer include 6 button have group was set, 1 button use to create group and 1 button to clear all noise

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

2.1. Yêu cầu tốc độ

Không thực sự nhanh do web viết bằng nodejs

2.2. Yêu cầu về độ an toàn

Được viết bằng frameworks Reactjs do Facebook phát triển nên độ an toàn do Facebook đảm bảo

2.3. Dễ sử dụng

Phần mềm cự kì đơn giả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), JavaScript(Reactjs)
Back-end: JavaScript(Reactjs)
Thành phần kết nối: JavaScript (Reactjs) vì nó được dùng làm cả front-end lẫn back-end

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

4.1 Cài đặt

Heroku chưa cập nhập được bản mới nhất của app do không đọc được module react-youtube

Trang chủ:

Tab Timer:

Tab Group:

More button:

Youtube:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Home from './Home';
import Timer from './Timer';
import Group from './Group';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom'


ReactDOM.render(
  <Router>
    <div>
        <Route exact path="/" component={Home} />
        <Route path="/home" component={Home} />
        <Route path="/timer" component={Timer} />
        <Route path="/group" component={Group} />
    </div>
  </Router>,
  document.getElementById('root')
);

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>


    <!--
      Notice the use of %PUBLIC_URL% in the tag above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Ambient Noise</title>
  </head>
  <body>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start`.
      To create a production bundle, use `npm run build`.
    -->

  </body>
</html>

4.2. Kiểm thử

Chương trình kiểm thử vẫn còn hạn hết cần thời gian hoàn thiện

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

5.1. Khởi tạo dữ liệu ban đầu

Từ nhiều nguồn sưu tập âm thanh mà từ youtube là chính.

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

Chương trình còn ở dạng sơ khai, thiếu 1 số tính năng quan trọng.

Ở Timer nên có tính năng xóa thời gian đặt trước.

6. Tổng kết

6.1. Tự đánh giá về việc triển khai nhóm và tự nhận xét kết quả đạt được

Triển khai nhóm chậm chạp, xung đột ý tưởng trong nhóm, thành viên thiếu trách nhiệm, trưởng nhóm không có năng lực lãnh đạo.

Kết quả đạt được còn khá kém so với kì vọng, nhưng cơ bản cũng đáp ứng đủ những điều kiện cần cho 1 app nhỏ như đề xuất.

Chưa sử dụng CSDL cho app

6.2. Bài học kinh nghiệm rút ra từ dự án nhóm

Biết chỉ là khởi đầu của làm được
Đối diện trực tiếp với xung đột nhóm thay vì né tránh nó
Ý thức trách nhiệm phải được đặt lên đầu
Kêu ca thì biết bao giờ mới bắt đầu được, bắt tay vào làm đi

7. Phụ lục

7.1. Thống kê đóng góp trên github

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

Nguyễn Việt Tú

Thiết kế giao diện và chức năng cho app
Viết front-end và back-end cho Home, Timer và Group
Viết kịch bản test Gherkin
Viết test tự động bằng react scripts test và enzyme
Triển khai ứng dụng lên web
Viết báo cáo

Đại Văn Dự

Viết làm button dropdown More và viết tính năng dùng youtube cho app

Nhóm TTMD