Skip to content

Commit

Permalink
add tutorial: karayolo-phan-2
Browse files Browse the repository at this point in the history
  • Loading branch information
@vhnam
vhnam committed Aug 24, 2018
1 parent a05179d commit befaf6d
Show file tree
Hide file tree
Showing 14 changed files with 888 additions and 4 deletions.
4 changes: 4 additions & 0 deletions sitemap.xml
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://vhnam.github.io/tutorials/karayolo-phan-2/</loc>
<lastmod>2018-08-24</lastmod>
</url>
<url>
<loc>https://vhnam.github.io/tutorials/karayolo-phan-1/</loc>
<lastmod>2018-08-24</lastmod>
Expand Down
2 changes: 1 addition & 1 deletion src/content/tutorials/karayolo-phan-1/config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@
"headline": "Karayolo (Phần 1): Karayolo là gì?",
"description": "Đây là đồ án môn Thiết Kế Giao Diện. Mục đích chia sẻ phương pháp thiết kế sao cho hiệu quả.",
"time": "Ngày 24 tháng 8 năm 2018",
"dateTime": "2015-08-24"
"dateTime": "2018-08-24"
}
6 changes: 6 additions & 0 deletions src/content/tutorials/karayolo-phan-2/config.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"headline": "Karayolo (Phần 2): Phân tích",
"description": "Nội dung phần này gồm phân tích người dùng, nghiệp vụ",
"time": "Ngày 24 tháng 8 năm 2018",
"dateTime": "2018-08-24"
}
Binary file added src/content/tutorials/karayolo-phan-2/img/bphonequangtgdd.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/content/tutorials/karayolo-phan-2/img/thumbnails.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/content/tutorials/karayolo-phan-2/img/use-cases.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
326 changes: 326 additions & 0 deletions src/content/tutorials/karayolo-phan-2/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,326 @@
<p>
Phần này sẽ tập trung vào phân tích người dùng (User Analysis) và nghiệp vụ (Task Analysis) phục vụ việc thiết kế giao diện cho ứng dụng Karayolo.
</p>
<img src="img/thumbnails.jpg" alt="Thumbnails" itemprop="image">

<h3>Tầm nhìn</h3>
<p>
Ngày nay các quán karaoke mọc lên như nấm nhằm phục vụ như cầu giải trí của mọi người cũng như karaoke tại nhà. Nhưng dù là ở đâu thì thiết bị karaoke cũng không đáp ứng được nhu cầu khách hàng theo như nhóm nhận thấy.
</p>
<p>
Thường thấy nhất là sử dụng sổ tra bài hát. Nhiều nơi tiên tiến hơn thì sử dung các ứng dụng hỗ trợ trên tablet nhưng vẫn còn nhiều thiếu sót do vẫn còn trong giai đoạn phát triển.
</p>
<p>
Mục tiêu của dự án là nhắm đến việc làm ra một ứng dụng hỗ trợ các chức năng đã có và cải thiện thiếu sót khác thông qua giao diện.
</p>
<p>
Ứng dụng này hướng đến end-user là người đi hát karaoke. Tuy nhiên, vì lý do bản quyền của bài hát nên nhóm sẽ bán/tư vấn cho đơn vị cung cấp thiết bị karaoke như Sơn Ca, Arirang, California,... để có thể truy cập danh sách bài hát. Nhằm mục đích đưa những bài nhạc mới nhất, đang là xu hướng đến end-user mà không phải chờ quán karaoke cập nhật bằng tay và hạn chế vi phạm bản quyền.
</p>

<h4>Vấn đề hiện hữu</h4>
<div class="table">
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
The problem of
</div>
<div class="col-8 p-2 border">
Tra cứu bằng sách hoặc chương trình hỗ trợ tra cứu chỉ giúp tra cứu theo tên bài hát
</div>
</div>
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
affects
</div>
<div class="col-8 p-2 border">
Người dùng dịch vụ karaoke
</div>
</div>
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
the impact of which is
</div>
<div class="col-8 p-2 border">
Gây khó cho người dùng khi phải tra cứu hay tra cứu mà khi họ muốn tra cứu theo nhiều cách thức khác.
</div>
</div>
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
a successful solution would be
</div>
<div class="col-8 p-2 border">
Tra cứu theo tên bài hát (đã có), các chữ cái đầu của bài hát (đã có), tác giả/ thể loại nhạc, lời nhạc, giai điệu (nếu được) và ca sĩ.
</div>
</div>
</div>

<div class="table">
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
The problem of
</div>
<div class="col-8 p-2 border">
Không hề có quản lý các bài nhạc đã chọn
</div>
</div>
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
affects
</div>
<div class="col-8 p-2 border">
Người dùng dịch vụ karaoke
</div>
</div>
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
the impact of which is
</div>
<div class="col-8 p-2 border">
Khi một đám đông nhấn chọn bài liên tục và bạn chả thế biết được đã có bao nhiu bài đã được chọn, chèn một bài nhạc bất kỳ trong danh sách, hay xóa một hoặc nhiều bài hát khi lỡ nhấn quá nhiều và cứ phải bấm Pause/Play liên tục để Next bài.
</div>
</div>
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
a successful solution would be
</div>
<div class="col-8 p-2 border">
Một chức năng quản lý đầy đủ các bài hát đã được chọn, thêm/xóa/chèn giữa danh sách bài hoặc xóa nhanh một dãy các bài nhạc.
</div>
</div>
</div>

<div class="table">
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
The problem of
</div>
<div class="col-8 p-2 border">
Không hề có quản lý phiên hát
</div>
</div>
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
affects
</div>
<div class="col-8 p-2 border">
Người dùng dịch vụ karaoke
</div>
</div>
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
the impact of which is
</div>
<div class="col-8 p-2 border">
Người dùng chả biết đã hát bao lâu, số tiền bao nhiêu, hầu như khi đi hát là phải đem 1 số tiền kha khá và vô thả ga.
</div>
</div>
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
a successful solution would be
</div>
<div class="col-8 p-2 border">
Một chức năng quản lý phiên hát của người dùng dịch vụ karaoke, cho biết thời gian hát, số tiền cần thanh toán, hay thậm chí là hẹn thêm giờ,...
</div>
</div>
</div>

<h4>Định nghĩa sản phẩm</h4>
<div class="table">
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
For
</div>
<div class="col-8 p-2 border">
Người đi hát karaoke có nhu cầu sử dụng app
</div>
</div>
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
Who
</div>
<div class="col-8 p-2 border">
Những người có nhu cầu tra cứu bài hát, quản lý phiên trực quan và tiện dụng trên điện thoại
</div>
</div>
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
The (Karayolo)
</div>
<div class="col-8 p-2 border">
Là một ứng dụng hỗ trợ điều khiển cũng như quản lý karaoke nâng cao.
</div>
</div>
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
That
</div>
<div class="col-8 p-2 border">
Nó sẽ thay thế cách quản lý những buổi đi karaoke truyền thống thông qua cách dùng remote hoặc tập trung tại tablet
</div>
</div>
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
Unlike
</div>
<div class="col-8 p-2 border">
Nó không giống với các ứng dụng trước đây như Arirang List, Arirang Remote Control, Mã số Karaoke Việt Nam, Kara 360.
</div>
</div>
<div class="row">
<div class="col-4 p-2 border bg-primary text-white">
Our product
</div>
<div class="col-8 p-2 border">
Ứng dụng của chúng tôi thân thiện hơn và giúp hỗ trợ khách hàng, những người đi hát cảm thấy thuận tiện trong việc tra cứu, chọn bài, xem thông tin về phiên hát mà không ảnh hưởng đến những người đi chung.
</div>
</div>
</div>
<p>
Với bảng trên, ta sẽ có được một phát biểu ngắn gọn khi giới thiệu sản phẩm. Hồi học môn <strong>Quản lý Yêu cầu phần mềm</strong>, thầy Lâm Quang Vũ có nói chiêu thức này dùng để tóm gọn sản phẩm trong vòng 2 ~ 3 câu. Hồi mình đi thi <strong>Nhân Tài Đất Việt 2017</strong>, cũng viết phần giới thiệu y chang vậy cũng làm BGK ấn tượng :D
</p>
<blockquote>
<strong>Đối với</strong> người đi hát karaoke có nhu cầu sử dụng app, <strong>dành cho</strong> những người có nhu cầu tra cứu bài hát, quản lý phiên trực quan và tiện dụng trên điện thoại. <strong>Ứng dụng Karayolo</strong> là một ứng dụng hỗ trợ điều khiển cũng như quản lý karaoke nâng cao, rằng nó sẽ thay thế cách quản lý những buổi đi karaoke truyền thống thông qua cách dùng remote hoặc tập trung tại tablet. Karayolo <strong>không giống</strong> với các ứng dụng trước đây như Arirang List, Arirang Remote Control, Mã số Karaoke Việt Nam, Kara 360. <strong>Ứng dụng của chúng tôi</strong> thân thiện hơn và giúp hỗ trợ khách hàng, những người đi hát cảm thấy thuận tiện trong việc tra cứu, chọn bài, xem thông tin về phiên hát mà không ảnh hưởng đến những người đi chung.
<footer>
<strong>Tui</strong>
</footer>
</blockquote>
<img src="img/bphonequangtgdd.jpg" alt="Thật Không Thể Tin Nổi" itemprop="image">

<h3>Phân tích người dùng</h3>

<h4>Thông tin người dùng</h4>
<p>
Sau quá trình tìm hiểu người dùng, tụi mình rút ra được như sau:
</p>
<ul>
<li>
<strong>Tên/loại người dùng:</strong> Người đi hát karaoke.
</li>
<li>
<strong>Vai trò:</strong> Người sử dụng ứng dụng.
</li>
<li>
<strong>Kinh nghiệm sử dụng:</strong> Hướng tới người dùng biết sử dụng smartphone.
</li>
<li>
<strong>Tần suất sử dụng:</strong> Người sử dụng có thể sử dụng trong suốt buổi karaoke của mình.
</li>
<li>
<strong>Đối tượng:</strong> Ứng dụng hướng đến những bạn tuổi teen, năng động, sử dụng smartphone thường xuyên.
</li>
<li>
<strong>Mục tiêu:</strong> Giúp mỗi người trong nhóm khi đi hát, có thể tự thao tác không cần phải tranh giành/chờ remote/tablet.
</li>
</ul>

<h4>Nghiệp vụ</h4>
<ol>
<li>
<strong>Quản lý danh sách bài hát</strong><br>
<ul>
<li>
Tác vụ thực hiện bởi người sử dụng app, trong phòng hát karaoke.
</li>
<li>
Khi họ muốn biết các bài hát đã được chọn để thêm/xóa bài hát/sắp xếp thứ tự ưu tiên trong danh sách.
</li>
<li>
Yêu cầu phải kết nối với thiết bị quản lý trung tâm của quán karaoke.
</li>
</ul>
</li>
<li>
<strong>Quản lý phiên</strong><br>
<ul>
<li>
Tác vụ thực hiện bởi người dùng app, trong phòng karaoke.
</li>
<li>
Khi họ muốn biết đã hát được bao nhiêu bài, thời gian và số tiền sẽ phải trả.
</li>
<li>
Yêu cầu phải kết nối với thiết bị quản lý trung tâm của quán karaoke và đã kết nối vào phòng.
</li>
</ul>
</li>
<li>
<strong>Quản lý Player</strong><br>
<ul>
<li>
Tác vụ thực hiện bởi người dùng app, trong phòng karaoke.
</li>
<li>
Khi họ muốn Play/Pause/Next và chỉnh tone bài hát cho phù hợp với giọng (auto-tune).
</li>
<li>
Yêu cầu phải kết nối với thiết bị quản lý trung tâm của quán karaoke và đã kết nối vào phòng.
</li>
</ul>
</li>
<li>
<strong>Quản lý danh sách bài hát cá nhân</strong><br>
<ul>
<li>
Tác vụ thực hiện bởi người dùng app, trong phòng karaoke.
</li>
<li>
Khi họ muốn xem/ thêm mới/ xóa bài hát trong danh sách bài hát yêu thích và chọn để cho vào Playlist trong hàng đợi.
</li>
<li>
Yêu cầu phải kết nối với thiết bị quản lý trung tâm của quán karaoke và đã kết nối vào phòng.
</li>
</ul>
</li>
</ol>

<h4>So sánh với các sản phẩm hiện có trên thị trường</h4>
<h5>Arirang Remote Control</h5>
<p>Link: <a itemprop="url" href="http://arirang.com.vn/ung-dung/ung-dung-remote-arirang.html">http://arirang.com.vn/ung-dung/ung-dung-remote-arirang.html</a></p>
<ul>
<li>
Không thể lưu lại danh sách bài hát yêu thích
</li>
<li>
Phụ thuộc vào từng loại đầu mà sử dụng phiên bản tương ứng như AK-36HDD, AR- 36MB, AR-3600WTK PAD,...
</li>
<li>
Tính tương thích không cao. VD: AR-3600WTK PAD thì bắt buộc phải dùng máy tính bảng nhãn hiệu Arirang.
</li>
<li>
Cách thiết kế màu sắc chưa khó nhìn trong môi trường ánh sáng tại phòng karaoke.
</li>
</ul>
<h5>Kara 360</h5>
<p>Link: <a itemprop="url" href="http://kara360.vn/">http://kara360.vn/</a></p>
<ul>
<li>
Giao diện khi hát karaoke chưa tiện dụng khi nhìn lời bài hát
</li>
<li>
Không có hỗ trợ các tiêu chí tìm kiếm như lời bài hát, viết tắt tên bài hát (VNT – Vợ Người Ta)
</li>
<li>
Điểm mạnh là thể hiện được nhạc đang hot như thế nào thông qua lượt hát của bài đó.
</li>
</ul>
<h5>Mã số Karaoke Việt Nam</h5>
<p>Link: <a itemprop="url" href="https://play.google.com/store/apps/details?id=quang.pham.masokaraoke&hl=en">https://play.google.com/store/apps/details?id=quang.pham.masokaraoke&hl=en</a></p>
<ul>
<li>
Cho phép tìm kiếm theo loại đầu và vol.
</li>
<li>
Giao diện tìm kiếm dễ hiểu đối với người dùng phổ thông mặc dù còn một số thao tác thừa.
</li>
<li>
Không hỗ trợ quản lý phiên bản.
</li>
</ul>

<h3>Chức năng đề xuất của sản phẩm</h3>
<p>
Để tóm tất chức năng của sản phẩm. Mình xin dùng sơ đồ Use Cases để thể hiện.
</p>
<img src="img/use-cases.jpg" alt="Use Case Diagram" itemprop="image">
<p>
<strong>Lưu ý:</strong> <em>Nhớ mở hình bằng tab mới để coi cho rõ</em>
</p>
7 changes: 7 additions & 0 deletions src/indexes/tutorials.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
{
"tutorials": [
{
"name": "Karayolo (Phần 2): Phân tích",
"link" : "https://vhnam.github.io/tutorials/karayolo-phan-2/",
"datetime": "2018-08-24",
"time": "Ngày 24 tháng 8 năm 2018",
"description": "Nội dung phần này gồm phân tích người dùng, nghiệp vụ."
},
{
"name": "Karayolo (Phần 1): Karayolo là gì?",
"link" : "https://vhnam.github.io/tutorials/karayolo-phan-1/",
Expand Down
2 changes: 1 addition & 1 deletion src/scripts/tutorials.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ def main():
# for directory in directories:
# build(directory, 'tutorials')

build("karayolo-phan-1", 'tutorials')
build("karayolo-phan-2", 'tutorials')



Expand Down
4 changes: 2 additions & 2 deletions tutorials/karayolo-phan-1/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@
<h1 class="hero__title" itemprop="headline">Karayolo (Phần 1): Karayolo là gì?</h1>
<h2 class="hero__subtitle">Ngày 24 tháng 8 năm 2018</h2>
<meta itemprop="author" content="Nam Vo">
<meta itemprop="datePublished" content="2015-08-24">
<meta itemprop="dateModified" content="2015-08-24">
<meta itemprop="datePublished" content="2018-08-24">
<meta itemprop="dateModified" content="2018-08-24">
<meta itemprop="mainEntityOfPage" content="Đây là đồ án môn Thiết Kế Giao Diện. Mục đích chia sẻ phương pháp thiết kế sao cho hiệu quả.">
</div>
<div class="col"></div>
Expand Down
Binary file added tutorials/karayolo-phan-2/img/bphonequangtgdd.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tutorials/karayolo-phan-2/img/thumbnails.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tutorials/karayolo-phan-2/img/use-cases.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit befaf6d

Please sign in to comment.