Có nhiều bạn mới (hoặc cũ) trong nghề (web) sẽ luôn có những thắc mắc về quy trình làm 1 dự án web hoàn chỉnh. Và cũng có nhiều người thắc mắc là mình ra nhiều dự án web trong thời gian rất ngắn (vài ngày đến 1 tuần) nên mình dự định viết một loạt bài về “các bước” xây dựng một dự án web hoàn chỉnh cho tới khi launch mà mình luôn áp dụng cho các dự án nhỏ và nhanh của mình.

Nếu không có các bước cụ thể và theo thói quen thì việc xây dựng một website đối với các bạn sẽ rất khó khăn và mất thời gian, đặc biệt là với các bạn mới làm web. Mình đặt tên cho loạt bài của mình (7 bài) là làm “đạo diễn web” trong 7 ngày. Trong mỗi bài, mình sẽ nói về một bước cụ thể khi làm web và sau 7 ngày thì các bạn có thể theo đúng tiến độ để cho ra 1 website hoàn chỉnh và có thể launch (ít ra cũng là beta ^^).

Bản thân ngành IT khá khô khan, ngôn từ thì khan hiếm nên muốn truyền tải một loạt bài hướng dẫn về IT không phải là điều đơn giản, dễ hiểu nên mình sẽ mượn tạm một số từ ngữ của nghệ thuật kịch để làm ẩn dụ cho các bước (quy trình) cho ra lò một website trong thời gian ngắn và đáp ứng đầy đủ tiêu chuẩn của thị trường.

Trước khi bắt đầu, các bạn nên lưu ý đầy là kinh nghiệm của Tuấn trong quá trình làm các site nhỏ, cần thời gian release nhanh nên có lẽ sẽ không phù hợp với một số website cần quy trình lằng nhằng và nhiều thành viên. Loạt bài phù hợp cho những team nào có 1,2 thành viên và muốn nhanh chóng đưa sản phẩm ra thị trường (Lean Startup). 1 ngày code của mình (không tính đi làm công ty, ăn chơi, đọc sách, chém gió…) có thể khác 1 ngày code của các bạn nên mỗi bài (tương ứng mỗi ngày) có thể mất của bạn nhiều|ít hơn 1 ngày, phụ thuộc vào kinh nghiệm & kỷ năng của các bạn nữa.

Mình sẽ lấy dự án website hỏi đáp dành cho dân IT mà mình cũng đang thực hiện (để đáp lại phản hồi tích cực của các bạn). Kết thúc loạt bài này, mình sẽ release dự án này luôn. Website “tạm chính thức” của dự án hỏi đáp này là Tienboi.com (chưa release đâu, đừng vào :D).

Và bây giờ, hãy bắt đầu sự nghiệp làm “đạo diễn web” của các bạn để đưa ra một “vở kịch web” hoàn chỉnh trong 7 ngày nhé.

Ngày 1: Kịch bản

Không có vở kịch hay nào mà không cần một kịch bản xuất sắc, mang đến nhiều điều thú vị, mới lạ cho người dùng. Vở kịch web cũng không ngoại lệ. Kịch bản (ý tưởng) là một điều tiên quyết phải có trước khi bắt đầu mọi thứ.

Để bắt đầu một dự án, ý tưởng là điều bạn phải luôn nghĩ tới bởi nếu ý tưởng của bạn không hay, không hấp dẫn thì dự án làm ra sẽ không thu hút người dùng. Nói thì dễ, nhưng tìm ra các ý tưởng mới, hay và được nhiều người chấp nhận không phải là dễ. Để tìm ra ý tưởng có nhiều cách (mình đã có 1 bài nói về cách tìm ra ý tưởng).

Bạn không nhất thiết phải sáng tạo ra một kịch bản mới hoàn toàn, bạn có thể dựng lại (clone) một vở kịch đã thành công trước đó, mang thêm một số trải nghiệm và tính đặc thù của mình vào cũng có thể tạo nên một kịch bản mới, hay và có người xem (ít hay nhiều ^^!).

Stackoverflow – một cộng đồng hỏi đáp cho giới lập trình viên trên thế giới, với mong muốn đem trải nghiệm địa phương hóa (localization) nên mình đã quyết định clone mô hình stackoverflow và thêm vào yếu tố tiếng Việt để giúp các anh em lập trình trong nước có một nơi để hỏi đáp kiến thức theo một cách thân thiện, gần gũi hơn.

Mình vẫn thích chia sẻ kiến thức, hỏi đáp bằng tiếng Việt hơn là sử dụng tiếng Anh và mình nghĩ cũng có nhiều người có “sở thích” giống mình, do đó, vở kịch tienboi.com bắt đầu được viết kịch bản.

Ý tưởng kịch bản chỉ là cái đơn giản nhất. Việc tiếp theo bạn phải làm là vở kịch này sẽ diễn ra như thế nào, gồm những màn gì, cảnh gì, lời thoại ra sao…với tư cách là “đạo diễn web”, ngày đầu tiên của bạn là phải viết một kịch bản “gần như hoàn chỉnh” cho vở kịch của mình.

Ý tưởng, tính năng cốt lõi

Dù dựng lại hay sáng tạo thì bạn cũng phải phân tích, hình dung được các phân đoạn (chức năng) sẽ có trong vở kịch và đâu là những màn ghi điểm (core feature). Có thể quan sát các dự án thành công hoặc tương tự để tìm ra các tính năng của mình. Bạn sẽ phải mất nửa ngày để làm công việc phân tích, tìm hiểu, dò la, nghiên cứu…các tính năng của dự án mình.

Dự án hỏi đáp của mình do dựa trên stackoverflow nên mình luôn voọc trang stackoverflow để quan sát các tính năng core và nhiệm vụ của mình là đưa ra các tính năng mà website cần phải có để triển khai. Một số chức năng mà mình phân tích là:

- Gởi câu hỏi
- Trả lời
- Vote UP/DOWN cho câu hỏi và trả lời
- Quản lý tài khoản
- Hệ thống điểm (Reputation)
- Hệ thống Badge
- Tag
- ...

Quá trình tìm kiếm tính năng không nhất thiết phải ngồi máy tính, bạn có thể chỉ cần một tờ giấy và bút là có thể phác thảo được các tính năng cốt lõi và cần thiết trước khi triển khai. Thường quá trình phân tích tính năng, ý tưởng mình làm trên giấy và bút chì để viết vì mình tin rằng cầm bút chì viết lại sẽ giúp bạn để cho ý tưởng dễ tuôn trào và đồng thời, bút chì có thể được xóa để chỉnh sửa ngay thời điểm viết ra giúp duy trì được mạch phát triển ý tưởng của các bạn.

Tiêu đề vở kịch

Sau khi bạn đã có được tính năng cốt lõi cho dự án của mình, việc tiếp theo là tìm kiếm một cái tên cho vở kịch của bạn. Tìm một cái tên không hề là đơn giản, nó phải đảm bảo một số yếu tố như phù hợp với tính năng của dự án, dễ nhớ, ngắn gọn, độc đáo…

Đối với một dự án web, tìm ra một domain (tên miền website) là một điều khá vất vả trong thời buổi loạn lạc domain hiện giờ. Domain hay và ngắn, dễ nhớ thì gần như đã hết (hoặc bị đầu cơ mua) nên nghĩ ra cái tên mình thích chưa chắc còn domain hay. Trước khi đưa ra danh sách domain, mình phải đưa ra 1 danh sách các keyword của website mà domain tương lai sẽ ám chỉ được ý nghĩa của các keyword liên quan đến tính năng của website.

Ở đây, website hỏi đáp mình thấy dính dáng đến một số keyword như là: guru, chia sẻ, hỏi đáp, lập trình, miễn phí, Việt Nam, kinh nghiệm, người mới, miễn phí…Sau đó, mình sẽ chọn một số domain thông dụng, dễ nhớ…vào 1 danh sách và bắt đầu kiểm tra xem domain đó đã có ai đăng ký chưa.

Mình thường dùng http://who.is để check domain, website này có phần tìm tên gần giống (chỉ hỗ trợ tiếng Anh) nên nếu bạn đặt domain tiếng Anh thì dễ tìm ra domain tương tự hơn. Sau quá trình kiểm tra trong danh sách mình nghĩ ra, mình sẽ có 1 danh sách domain có thể dùng được (available).

Việc tiếp theo là chọn domain nào sẽ là domain chính thức cho dự án. Để tìm được domain cuối cùng, mình thường tìm kiếm từ khóa trong domain (không chứa phần .com, .net, .vn…) để xem mức độ cạnh tranh của domain đó thể nào, có khả năng marketing nó dễ hay khó…đồng thời, hỏi ý kiến của 1 số bạn bè, đồng nghiệp về 1 số domain mà mình lựa chọn để thăm dò ý kiến. Nếu không có ấn tượng xấu trong cuộc thăm dò thì mình sẽ tự tin hơn với domain đã chọn, và website hỏi đáp của mình quyết định tới thời điểm này lấy tên là tienboi.com, mang ý nghĩa một chút kiếm hiệp, không nặng hình thức, người kiến thức trong ngành có thể chia sẻ…

Môi trường

Một vở kịch trước khi dàn dựng cần phải được diễn trong một môi trường biểu diễn cụ thể. Cũng như vậy, vở kịch web của bạn cũng phải được bạn ra quyết định là sẽ sử dụng ngôn ngữ (programming language) nào, nền tảng chạy là gì, cơ sở dữ liệu ra sao…Điều này rất quan trọng và cần được bạn quyết định trước khi đi vào các bước tiếp theo.

Đối với mình, việc phát triển web xưa nay mình dùng PHP nên lần này mình cũng sẽ sử dụng PHP làm ngôn ngữ chính, Apache làm web server, database dùng MySQL và hệ điều hành CentOS.

Phác họa nhân vật

Sau khi đã có được nội dung chính của vở kịch, việc phác họa chân dung các nhân vật trong vở kịch là một điều cực kỳ quan trọng, bởi nếu thiếu 1 nhân vật nào đó có thể làm cho vở kịch của bạn bớt hay đi và kém chất lượng hơn.

Ở bước này, các bạn bắt đầu mổ xẻ, phân tích chi tiết các tính năng và thiết kế … table (bảng) cho cơ sở dữ liệu. Bạn sẽ phải mất nửa ngày còn lại cho công việc “nặng nhọc” và “gõ bàn phím” này. Quá trình thiết kế bảng của mình thường thông qua 4 bước. Bước đầu tiên là phác họa các tên bảng sẽ tạo. Ở bước này, mình bắt đầu ánh xạ các tính năng của website thành các bảng để lưu trữ thông tin. Bước này bạn mới chỉ ra danh sách các tên bảng mà thôi, chưa đi sâu vào chi tiết của từng bảng. Ở bước phân tích bảng cơ bản này, mình không đụng đến các table mà mình thường xuyên sử dụng cho tất cả các dự án khác (vd: user, session, log…), chỉ tập trung vào bảng hỗ trợ các tính năng đặc thù của dự án hiện tại.

Đây là bước phác thảo nhanh, bạn không cần lo lắng là sẽ thiếu bảng (bởi chắc chắn là sẽ thiếu ^^), chỉ là định hình tổng thể các table sẽ được tạo ra trong cơ sở dữ liệu.

Bước thứ 2 trong quá trình tạo bảng là bắt đầu vẽ biểu đồ ERD cho các bảng mà bạn đã phân tích. Tới bước này, bạn đã bắt đầu đi sâu vào chi tiết của từng chức năng và thiết kế các cột cần thiết cho các bảng của mình. Ngoài các cột cần thiết (các cột tiêu đề, nội dung, người hỏi…của bảng lit_question), bạn cũng phải nghĩ tới các cột mà không nằm trong chức năng hoặc hỗ trợ cho performance (như cột IP, Platform, … của bảng lit_question).

Ở bước này, nếu bạn dùng các text editor để ghi lại thì bạn sẽ mất thời gian khi tạo lại table trong mysql database. Tốt nhất là dùng một phần mềm cho phép vẽ các table và có thể import trực tiếp vào mysql database của mình mà không cần tạo lại từng bảng bằng tay.

Mình thường dùng MySQL Workbench (Freeware của MySQL, hỗ trợ hầu hết các Hệ Điều Hành thông dụng Windows, MacOS..) để tạo bảng, cột, kiểu dữ liệu cho các bảng đã phác thảo ở bước 1.
.

Khi tạo bảng bằng MySQL Workbench, bạn có thể tạo được các quan hệ khóa chính, khóa ngoại, ràng buộc và ứng dụng sẽ vẽ các line kết nối các cột khóa chính và khóa ngoại rất đẹp. Đồng thời, khi xuất trực tiếp ra SQL dump để đẩy vào MySQL database thì cũng có các lệnh tạo khóa ngoại, ràng buộc… theo luôn. Tùy theo sở thích (hoặc việc học của các bạn) mà các bạn có muốn xuất thêm các khóa và ràng buộc trong SQL query. Mình không thích duy trì business logic trong MySQL database, đặc biệt là các ràng buộc bảng và mình luôn muốn tự duy trì quan hệ và ràng buộc bảng trong code nên khi xuất ra SQL query từ MySQL Workbench, mình thường chọn không xuất các khóa ngoại và ràng buộc. Còn ai chưa biết ràng buộc, khóa ngoại, khóa chính là gì thì có thể tìm sách đọc cho biết.

Một tip nhỏ của mình khi tạo cột trong MySQL workbench là mình không bao giờ tạo Index trong đây (mặc dù khi export ra) thì table cũng sẽ index đã tạo. Một lý do đơn giản là…làm trong workbench rất chậm và không có UX tẹo nào. Mình thường tạo Index trong PhpMyAdmin, sau khi các bảng này đã được import vào Database, bởi vì trong PhpMyAdmin tạo index 1 cột chỉ bằng 1 click chuột mà thôi.

Sau khi hoàn tất công đoạn với MySQL Workbench, bạn tiến hành export sang mysql database và chuyển sang phpmyadmin để hoàn tất các table thường xuất hiện trong các project cho các tính năng cơ bản mà bạn thường có ở các dự án khác của mình (như user, session,…) và tiến hành index các cột cần thiết để hoàn tất công đoạn thiết kế database.

Cấu trúc bảng hiện tại chỉ là phiên bản phân tích trước khi bắt tay vào code và hầu như lần nào khi bắt đầu code cũng phát sinh vấn đề về lưu trữ, tốc độ nên bước cuối cùng khi làm việc với database là luôn có sự cập nhật thêm bảng, cột trong database. Do đó, các bảng trong database luôn có sự cập nhật trong suốt quá trình làm dự án chứ không phải cố định như cấu trúc hiện tại.

—–

Hôm nay thế là đã đủ, giờ đây, bạn đã có được bản mô tả chức năng đầy đủ kèm theo database của website để chuẩn bị cho ngày tiếp theo.

Đón đọc bài tiếp theo: “Ngày 2: Nghệ sỹ”…