add tutorial: karayolo-phan-1

sitemap.xml

@@ -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-1/</loc>
+        <lastmod>2018-08-24</lastmod>
+    </url>
     <url>
         <loc>https://vhnam.github.io/blog/chuyen-nhan-su/</loc>
         <lastmod>2018-08-14</lastmod>

src/content/tutorials/karayolo-phan-1/config.json

@@ -0,0 +1,6 @@
+{
+    "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"
+}

src/content/tutorials/karayolo-phan-1/index.html

@@ -0,0 +1,176 @@
+<p>
+    Sau một thời gian làm việc với các bạn trẻ trong công ty, các bạn nhận xét thiết kế giao diện trọng nhất là tính thẩm mỹ. Thường thì sản phẩm của các bạn về hình thức đều ổn. Tuy nhiên, thiết kế không giải quyết được vấn đề gì cả. Mình quyết định chia sẻ phương pháp được học từ thầy Nguyễn Văn Vũ trong môn <strong>Thiết Kế Giao Diện</strong>. Đối với mình, thầy là một trong số ít giảng viên xuất thân đúng từ ngành Software Engineering, góc nhìn thực tế và đúng tâm lý người dùng.
+</p>
+<img src="img/cover.jpg" alt="Cover" itemprop="image">
+
+<h3>Karayolo là gì?</h3>
+<p>
+    <strong>Karayolo</strong> (<em>Kara - Yolo</em>) là đồ án cuối kỳ của môn <strong>Thiết Kế Giao Diện</strong>. Môn này chia làm 5 đợt nộp bài, mỗi đợt gọi là 1 PA. Kết quả môn này của nhóm mình là 398/400. Chém gió xí thôi :D
+</p>
+<p>
+    Đề tài thì tụi mình được tự chọn, nhưng theo một số tiêu chí sau:
+</p>
+<ul>
+    <li>
+        Vấn đề cần giải quyết có tính thực tế, có người dùng thực sự đang gặp phải. Khi đã xác định được bài toán, cần đánh giá lại để xem liệu đó là vấn đề thực sự hay chỉ là biểu hiện của một vấn đề cốt lõi nào.
+    </li>
+    <li>
+        Chương trình phải thể hiện được tầm quan trọng của giao diện
+        <ul>
+            <li>
+                Tập trung vào giao diện, các thuộc tính khác không quan trọng
+            </li>
+            <li>
+                Không quan tâm nhiều đến xử lý bên trong của ứng dụng
+            </li>
+        </ul>
+    </li>
+    <li>
+        Có tính chất sáng tạo (tất nhiên phải đảm bảo được các thuộc tính của usability)
+    </li>
+    <li>
+        Ứng dụng trên Web, hoặc Mobile
+    </li>
+    <li>
+        Đối với các ứng dụng đã tồn tại: phải đề xuất những thay đổi lớn so với giao diện hiện tại.
+    </li>
+</ul>
+
+<h3>Mô tả ý tưởng</h3>
+<p>
+    Sau khi khảo sát, phỏng vấn, đóng vai,... tụi mình đã gom lại được thành 3 nhóm vấn đề chính khi đi hát karaoke như dưới đây:
+</p>
+<ul>
+    <li>
+        Tra cứu bài hát
+    </li>
+    <li>
+        Muốn quản lý danh sách bài hát đã chọn
+    </li>
+    <li>
+        Quản lý phiên
+    </li>
+</ul>
+<img src="img/brainstorm.jpg" alt="Brainstorm" itemprop="image">
+
+<h4>Tra cứu bài hát</h4>
+<p>
+    Hiện nay, các quán karaoke vừa tìm kiếm bằng cách nhìn cuốn sổ dày cộm rồi bấm remote, vừa có màn hình cảm ứng ngồi chọt chọt. Dưới đây là một số bất cập khi tìm bài hát.
+</p>
+<ul>
+    <li>
+        <strong>Không nhớ tên bài hát</strong><br>
+        Mình chơi nhạc còn nhiều khi chả biết tên bài hát nữa là. Những lúc đó, chỉ mong có cái gì đó để ngân nga giai điệu rồi nó nhận diện đúng bài.
+    </li>
+    <li>
+        <strong>Lật cuốn catalog để tìm bài hát mới</strong><br>
+        Huhu... Nhiều khi đi cả chục đứa mà có 1 cuốn để dò mã à. Đứa nào thuộc mã thì hát nhiều bái nó thích. Rồi đứa này lưa.. làm mấy đứa kia ngồi chờ thấy phát nản. Chưa kể có chỗ gắn màn hình cảm ứng... có đứa ngồi trấn là khỏi đứa nào chọn bài luôn, chưa kể bu đông địt thúi nữa :D
+    </li>
+    <li>
+        <strong>Mã số bài hát phụ thuộc vào thiết bị (5 số, 6 số,...)</strong><br>
+        Cái này bực bội khi cầm remote bấm.. Bấm chậm là nó reset phải nhập từ đầu.
+    </li>
+    <li>
+        <strong>Cần review bài hát</strong><br>
+        Cái này hổng phải là bài đó hay/dở gì đâu nghen. Mà là muốn biết lời nhạc, rồi bài phối. Cụ thể hơn, mình muốn hát bài Phượng Hồng với bản phối của Bằng Kiều, trong khi đó thì chỉ có bài của Mr.Đờm Vĩnh Biệt. Về phần lời, có nhiều bài cùng tên nhưng khác lời như bài Làng Tôi của Đỗ Trung Quân và Văn Cao.
+    </li>
+</ul>
+
+<h4>Muốn quản lý danh sách bài hát đã chọn</h4>
+<p>
+    Có lúc đi ca, muốn tua lẹ hát nửa bài để còn hát nhiều, ngồi chọt chọt trên remote lâu quá. Cứ như là bạn dùng remote để code trên màn hình console và chỉ di chuyển được bằng phím mũi tên với Enter. Thiệt nghiệt ngã quá mà.
+</p>
+<ul>
+    <li>
+        <strong>Danh sách có trùng bài nào không</strong><br>
+        Một nhu cầu chính đáng, tao với mày cùng đóng góp mà mắc công mày hát nhiều lần hơn tao. Chưa kể tốn thời gian cầm remote để Next nữa. Bà mẹ cái remote!!!
+    </li>
+    <li>
+        <strong>Muốn xoá để hát bài khác</strong><br>
+        ĐM cái remote... chưa kể phải đập đập mới chạy :p Nói chứ giống như thao tác với danh sách trên màn hình console. Huhu!!!
+    </li>
+    <li>
+        <strong>Điều khiển nhạc (tone, tempo,...)</strong><br>
+        Có nhiều bạn hát không tới, hoặc thích hát chậm chậm cần chỉnh lại bài đang hát. Nhưng mà với cái remote hoặc giao diện cảm ứng hiện tại thì mấy bạn mù nhạc lý sẽ rất khó xài.
+    </li>
+</ul>
+
+<h4>Quản lý phiên</h4>
+<p>
+    Chẳng qua là quản lý túi tiền của cả nhóm.
+</p>
+<ul>
+    <li>
+        <strong>Thời gian đã hát</strong><br>
+        Thời gian là vàng, là bạc. Để còn biết tính tiền :D
+    </li>
+    <li>
+        <strong>Số tiền phải trả là bao nhiêu?</strong><br>
+        Thời gian chưa đủ. muốn biết tổng tiền sau khi hát, tiền nước, bánh trái này nọ.
+    </li>
+</ul>
+
+<h3>Giải pháp hiện có</h3>
+<blockquote>
+    Don't Reinvent The Wheel, Unless You Plan on Learning More About Wheels
+    <footer>
+        <a itemprop="url" href="https://blog.codinghorror.com/dont-reinvent-the-wheel-unless-you-plan-on-learning-more-about-wheels/">Coding Horror</a>
+    </footer>
+</blockquote>
+<p>
+    Tại sao lại có vụ phát minh bánh xe ở đây? Đơn giản vì bạn có thể đi ra tiệm mua cho nhanh, chỉ phát minh/cải tiến khi nó không giải quyết được vấn đề của bạn. Tương tự trong trường hợp của Karayolo. Tụi mình cũng khảo sát một số ứng dụng trên thị trường như sau:
+</p>
+<ul>
+    <li>
+        <a itemprop="url" href="http://soncamedia.com/sanpham/ung-dung-chon-bai-karaoke-connect/">Karaoke Connect</a>
+    </li>
+    <li>
+        <a itemprop="url" href="http://arirang.com.vn/ung-dung/ung-dung-tra-cuu-bai-hat---arirang-list.html">Arirang List</a>
+    </li>
+</ul>
+<p>
+    Nói chung là... showbiz thiệt là.. ai cũng xạo quần xạo heo... hình như lộn tiệm. Nói chung là, 2 ứng dụng trên, chỉ thao tác độc lập với thao tác quản lý một phiên đi karaoke. Thiết nghĩ, các bác nên tạo thành một hệ sinh thái như là XXXPad chọn bài, kết nối với XXXServer để tính tiền, chọn bài, gọi món giống như ứng dụng quản lý tiệm net như NetCafe, CSM của Zing.
+</p>
+
+<h3>Giải pháp của nhóm</h3>
+<p>
+    Với các bất cập trên, nhóm mình muốn đề xuất một ứng dụng có thể kết nối với máy chủ của quán, cho phép mọi người đi hát dễ dàng thao tác. Sơ khởi thì ứng dụng này sẽ có các chức năng sau:
+</p>
+<ul>
+    <li>
+        Phân cấp danh sách bài hát theo Vol mới nhất
+    </li>
+    <li>
+        Review bài hát trước khi chọn (nhạc, lời bài hát)
+    </li>
+    <li>
+        Lưu danh sách bài hát yêu thích
+    </li>
+    <li>
+        Gợi ý những bài hát đang hot
+    </li>
+    <li>
+        Góp ý với quán
+    </li>
+    <li>
+        Quản lý danh sách bài hát trong hàng đợi
+    </li>
+    <li>
+        Hẹn giờ cho phiên
+    </li>
+</ul>
+<img src="img/infrastructure.jpg" alt="Infrastructure" itemprop="image">
+<p>
+    Sơ đồ tổng thể của hệ thống Karayolo là như vậy. Mở rộng ra, mỗi server là một chi nhánh trong hệ thống.
+</p>
+<p>
+    Ở phạm vi bài viết này, mình chỉ đề cập đến việc thiết kế giao diện cho ứng dụng trên mobile trong hệ thống trên.
+</p>
+
+<h3>Tham khảo</h3>
+<ul class="reference">
+    <li>
+        Coding Horror, <a itemprop="url" href="https://blog.codinghorror.com/dont-reinvent-the-wheel-unless-you-plan-on-learning-more-about-wheels/">Don't Reinvent The Wheel, Unless You Plan on Learning More About Wheels
+        </a>
+    </li>
+</ul>

src/indexes/tutorials.json

@@ -1,5 +1,12 @@
 {
     "tutorials": [
+        {
+            "name": "Karayolo (Phần 1): Karayolo là gì?",
+            "link" : "https://vhnam.github.io/tutorials/karayolo-phan-1/",
+            "datetime": "2018-08-24",
+            "time": "Ngày 24 tháng 8 năm 2018",
+            "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ả."
+        },
         {
             "name": "Distributed System: Các kiểu con đà điểu",
             "link" : "https://vhnam.github.io/tutorials/distributed-system-cac-kieu-con-da-dieu/",

src/scripts/tutorials.py

@@ -77,7 +77,7 @@ def main():
     # for directory in directories:
     #     build(directory, 'tutorials')
 
-    build("distributed-system-cac-kieu-con-da-dieu", 'tutorials')
+    build("karayolo-phan-1", 'tutorials')