Lập trình web app và phần mềm chạy trên trình duyệt

Nói gọn nhất: website là để đọc, web app là để làm việc. Một website giới thiệu (brochure site, trang giới thiệu kiểu tờ rơi) trả lời câu hỏi “công ty này là ai, bán gì, liên hệ thế nào”. Khách vào, đọc, rồi rời đi. Tương tác cao nhất thường chỉ là điền một cái form liên hệ.

Web app thì ngược lại. Người dùng vào không phải để đọc, mà để hoàn thành một việc: tạo một đơn hàng, cập nhật tồn kho, duyệt một yêu cầu nghỉ phép, xuất một báo cáo doanh thu theo tháng. Mỗi lần thao tác là dữ liệu được ghi vào cơ sở dữ liệu (database, kho dữ liệu có cấu trúc), rồi lần sau mở lên vẫn còn nguyên. Đó là khác biệt cốt lõi: web app có trạng thái và dữ liệu sống, còn website thì gần như tĩnh.

Vài dấu hiệu nhận ra bạn đang cần một web app chứ không phải một website:

• Có người đăng nhập. Mỗi người thấy một phần dữ liệu riêng: nhân viên kho thấy tồn kho, kế toán thấy công nợ, sếp thấy báo cáo tổng. Phân quyền theo vai trò là chuyện web app, không phải website.
• Có thao tác ghi dữ liệu lặp đi lặp lại. Nhập đơn, sửa đơn, đổi trạng thái, duyệt, từ chối, ngày nào cũng làm hàng chục lần.
• Cần tính toán và tổng hợp. Cộng doanh thu, đếm tồn, lọc theo khoảng ngày, vẽ biểu đồ, những việc website không làm được thật sự.
• Thay cho một file Excel đang quá tải. Nhiều doanh nghiệp bắt đầu bằng một bảng tính dùng chung, đến lúc mười người cùng sửa một lúc thì loạn. Web app là bước thoát khỏi cái Excel đó.

Nếu việc của bạn chỉ là một trang giới thiệu hay một blog, bạn cần dịch vụ thiết kế website chứ chưa cần web app. Web22 sẽ nói thẳng điều đó thay vì đẩy bạn lên một dự án đắt hơn.

Ba thứ này hay bị gọi chung là “làm web” nên dễ lẫn. Bảng dưới tách rõ để bạn định vị đúng nhu cầu của mình:

Ranh giới đôi khi mờ. Một web bán hàng có quản đơn, quản kho, báo cáo thì đã mang nhiều tính chất web app rồi, mảng đó Web22 làm bằng nền tảng WooCommerce khi phù hợp. Còn khi bài toán vượt ra ngoài bán hàng, ví dụ một cổng quản lý nội bộ hay một dashboard điều hành, thì đó là địa hạt của web app dựng riêng.

Đây là phần đáng cân nhắc nhất, vì web app tốn công hơn website nhiều. Dưới đây là những tình huống Web22 gặp thật, khi một web app thật sự đáng tiền:

Phần mềm quản lý nội bộ

Quản đơn hàng, quản kho, quản công nợ, chấm công, theo dõi tiến độ dự án. Những việc này nhiều nơi vẫn chạy bằng Excel hoặc bằng phần mềm đóng gói cứng nhắc không khớp quy trình. Một web app dựng riêng bám đúng cách công ty bạn vận hành: đúng trường dữ liệu cần nhập, đúng luồng duyệt, đúng vai trò ai thấy gì.

Dashboard điều hành

Một màn hình gom số liệu từ nhiều nguồn để chủ doanh nghiệp nhìn một cái là nắm tình hình: doanh thu hôm nay, đơn chờ xử lý, tồn kho sắp hết, chỉ số marketing. Thay vì mỗi sáng mở năm cái bảng tính, mọi thứ nằm trên một trang, cập nhật theo thời gian thực.

Cổng dành cho khách hàng hoặc đối tác

Khách đăng nhập để tự xem đơn của mình, tải hoá đơn, theo dõi trạng thái bảo hành, gửi yêu cầu hỗ trợ. Đại lý đăng nhập để đặt hàng, xem chiết khấu, tra công nợ. Cổng kiểu này giảm hẳn việc nhân viên phải trả lời thủ công những câu hỏi lặp đi lặp lại.

Đặt lịch hẹn và công cụ nội bộ

Phòng khám, spa, trung tâm dạy học, dịch vụ theo giờ cần khách tự đặt lịch online, hệ thống tự chặn trùng giờ, nhắc lịch và cho nhân viên xem lịch trong ngày. Cùng nhóm này là các “công cụ nội bộ” (internal tool): một màn hình duyệt nội dung, một bảng nhập liệu có kiểm tra ràng buộc, một trang gom đơn từ nhiều kênh về một chỗ. Ít hào nhoáng nhưng tiết kiệm hàng giờ mỗi ngày cho cả đội.

Mẫu số chung của tất cả: có người đăng nhập, có dữ liệu ghi vào ghi ra, có quy trình lặp lại. Nếu bài toán của bạn rơi vào nhóm này, web app là câu trả lời đúng.

Nếu bạn đang khởi nghiệp với một ý tưởng phần mềm, thứ bạn cần đầu tiên không phải bản hoàn chỉnh, mà là một MVP, tức sản phẩm khả dụng tối thiểu (minimum viable product). MVP là phiên bản đủ nhỏ để làm nhanh, nhưng đủ thật để người dùng dùng được và bạn đo được phản ứng của thị trường.

Vì sao nên đi đường MVP thay vì xây luôn bản đầy đủ:

• Kiểm chứng trước khi đổ tiền lớn. Bạn biết người ta có thật sự cần tính năng đó không, trước khi xây thêm mười tính năng nữa quanh nó.
• Có cái thật để gọi vốn. Nhà đầu tư xem một sản phẩm chạy được, có người dùng thật, thuyết phục hơn nhiều một bộ slide.
• Ra thị trường sớm. Người dùng đầu tiên dùng và phản hồi, bạn sửa theo cái thật chứ không đoán.

Triết lý của Web22 khi làm MVP rất thẳng: làm đúng phần lõi, làm cho chắc, đừng ôm đồm. Một MVP tốt thường chỉ giải đúng một bài toán cốt lõi: đăng ký/đăng nhập, một luồng nghiệp vụ chính, một màn hình quản trị để bạn nhìn được dữ liệu. Cái bẫy phổ biến của startup là nhồi quá nhiều tính năng vào bản đầu, làm chậm ngày ra mắt và đốt sạch ngân sách trước khi kịp học được gì từ thị trường.

Một điểm Web22 nói rõ từ đầu: MVP là để lớn lên. Cho nên dù làm nhỏ, mã nguồn vẫn được viết gọn gàng, đặt nền để sau này thêm tính năng không phải đập đi xây lại. Nhanh không có nghĩa là cẩu thả.

Web22 dựng web app trên nền Next.js (một framework dựa trên React, thư viện giao diện phổ biến nhất hiện nay) ở phần giao diện và xử lý, cùng một cơ sở dữ liệu PostgreSQL (hệ quản trị dữ liệu mã nguồn mở, mạnh và đáng tin) ở phần lưu trữ. Đây cũng là bộ công nghệ mà phần lớn sản phẩm phần mềm hiện đại đang chọn vì cân bằng được tốc độ phát triển, hiệu năng và khả năng mở rộng.

Một vài lựa chọn kỹ thuật Web22 theo, kèm lý do thật:

• Đăng nhập làm cho chắc, không tự chế phần nhạy cảm. Phần xác thực (authentication, lo đăng nhập và phân quyền) là chỗ dễ để lộ lỗ hổng nhất, nên Web22 dựng theo các chuẩn an toàn đã được kiểm chứng thay vì sáng tạo lung tung ở khâu này.
• Trang dựng sẵn ở phía máy chủ. Next.js cho phép tạo trang ở phía máy chủ (server-side rendering) nên tải nhanh và thân thiện với tìm kiếm, quan trọng nếu web app của bạn có cả phần công khai cần Google đọc được.
• Dữ liệu có cấu trúc rõ ràng. PostgreSQL ràng buộc dữ liệu chặt, hạn chế cảnh số liệu sai lệch, điều một file Excel dùng chung không bao giờ bảo đảm được.

Mảng web app này khác với kiến trúc headless, nơi WordPress vẫn làm kho nội dung còn Next.js chỉ lo phần hiển thị. Web app thật sự thì không xoay quanh nội dung, mà xoay quanh nghiệp vụ và dữ liệu, nên thường dựng riêng từ đầu thay vì gắn vào WordPress.

Đây là phần Web22 muốn bạn soi kỹ, vì nói thật quan trọng hơn nói hay. Web22 đã tự tay xây một web app hoàn chỉnh và đang dùng nó mỗi ngày để vận hành công việc của chính mình: một hệ thống quản lý và báo cáo SEO cho khách, chạy tại địa chỉ riêng của Web22.

Web app này có đủ những thành phần mà một phần mềm web nghiêm túc cần có: đăng nhập và phân quyền (người quản trị Web22 và khách hàng thấy những phần dữ liệu khác nhau), dashboard theo dõi thứ hạng gom dữ liệu từ khoá của từng khách về một màn hình, nhật ký công việc minh bạch để khách mở link riêng là xem được Web22 đã làm gì cho mình, và cơ sở dữ liệu thật lưu trong PostgreSQL chứ không phải bảng tính tạm bợ.

Nó được dựng đúng bằng bộ công nghệ Web22 đề xuất cho khách: Next.js + React ở giao diện, Prisma + PostgreSQL ở dữ liệu. Nói cách khác, Web22 không bán cho bạn một thứ chỉ nghe nói qua, mà là thứ Web22 đã ăn cơm nhà mình nấu mỗi ngày.

Trung thực một điều quan trọng: tính đến nay Web22 chưa nhận làm web app theo đơn đặt cho một khách ngoài. Cho nên đây không phải là chỗ Web22 khoe “đã làm cho mười công ty”. Cái Web22 có là năng lực kỹ thuật đã được chứng minh bằng một sản phẩm thật do chính mình xây và vận hành, cộng với kinh nghiệm nhiều năm làm web bán hàng có giỏ hàng, thanh toán và quản đơn thật trên WooCommerce. Web22 nhận làm web app cho bạn trên nền tảng đó, và sẽ không bịa case khách để nghe cho oai.

Web app dễ trượt tiến độ và phình ngân sách nếu lao vào code ngay. Web22 đi theo một quy trình giữ cho dự án rõ ràng từ đầu:

1. Tư vấn và bóc tách bài toán (miễn phí 30 phút). Nghe bạn mô tả công việc đang vướng ở đâu, ai dùng, dữ liệu gì, quy trình ra sao. Bước này quyết định bạn có thật sự cần web app hay chỉ cần một website đơn giản hơn.
2. Chốt phạm vi và phác màn hình. Liệt kê các màn hình chính, vai trò người dùng, luồng nghiệp vụ. Với MVP, đây là lúc cắt gọn về đúng phần lõi đáng làm trước.
3. Báo giá theo dự án (trong 24h sau khi rõ phạm vi). Một con số cho một phạm vi cụ thể, không mập mờ.
4. Dựng và cập nhật theo từng chặng. Web22 làm theo chặng, mỗi chặng có cái chạy được để bạn xem và góp ý sớm, không để đến cuối mới lòi ra lệch nhu cầu.
5. Kiểm thử và chạy thật. Đưa lên môi trường thật, kiểm các luồng chính, sửa lỗi.
6. Bàn giao mã nguồn và hướng dẫn. Bạn nhận toàn bộ mã nguồn và quyền sở hữu (xem mục dưới), kèm hướng dẫn vận hành.

Nếu sau này web app cần thêm tính năng, Web22 nhận làm tiếp theo từng đợt, hoặc bạn tự lo nếu có đội kỹ thuật, vì mã nguồn đã nằm trong tay bạn.

Đây là cam kết Web22 đặt rõ để bạn yên tâm: kết thúc dự án, bạn nhận toàn bộ mã nguồn và làm chủ nó. Không khoá bạn vào một nền độc quyền chỉ Web22 mới sửa được, không giữ mã làm con tin để bạn phải phụ thuộc mãi.

Cụ thể bạn nhận được: toàn bộ mã nguồn web app lưu trên kho mã (repository) bạn sở hữu, cấu trúc cơ sở dữ liệu kèm hướng dẫn triển khai, và tài liệu vận hành ở mức đủ để một lập trình viên khác tiếp quản được.

Điều này quan trọng với web app hơn cả website thường: web app là tài sản vận hành của doanh nghiệp bạn, không nên để nó phụ thuộc sống còn vào một bên duy nhất. Web22 muốn bạn chọn ở lại vì làm tốt, chứ không vì bị mắc kẹt.

Web app không có một bảng giá in sẵn kiểu “gói A, gói B” như website, vì mỗi phần mềm giải một bài toán khác nhau. Một công cụ nội bộ nhỏ và một cổng khách hàng nhiều vai trò cách nhau rất xa về công sức.

Những yếu tố quyết định giá: số màn hình và luồng nghiệp vụ, mức độ phân quyền (một vai trò khác hẳn năm vai trò mỗi người thấy một phần dữ liệu), việc tích hợp bên ngoài (cổng thanh toán, đơn vị vận chuyển, phần mềm khác), và độ phức tạp của tính toán/báo cáo.

Cách Web22 làm: nghe rõ nhu cầu, chốt phạm vi rõ trong hợp đồng, rồi báo một con số cho phạm vi đó trong vòng 24 giờ, đã thống nhất thì giữ vậy không phát sinh lắt nhắt. Bạn xem dải giá tham khảo các dịch vụ ở trang bảng giá; riêng web app thì cứ trao đổi trực tiếp để Web22 ước lượng đúng, Web22 không gắn số bừa lên trang khi chưa hiểu bài toán của bạn.

Phần này Web22 viết thẳng để khỏi mất thời gian của cả hai bên. Web22 nhận làm web app quy mô vừa: phần mềm quản lý nội bộ, dashboard, cổng khách hàng, đặt lịch, công cụ nội bộ, và MVP cho startup. Đó là vùng Web22 làm tốt và đã có sản phẩm thật chứng minh.

Web22 không nhận những hệ thống vượt quá quy mô đội nhỏ: hệ thống ERP khổng lồ cho tập đoàn nhiều phòng ban (cần một đội lớn và nhiều năm triển khai), phần mềm đòi hạ tầng đặc thù nặng hoặc yêu cầu tuân thủ pháp lý khắt khe ngoài năng lực kiểm chứng của một freelance team, và dự án cần một đội vận hành túc trực 24/7 ngay từ đầu.

Nói “không” với việc ngoài tầm là cách Web22 bảo vệ chất lượng cho những việc trong tầm. Nếu nhu cầu của bạn nằm ở vùng giữa, cứ mô tả, Web22 sẽ nói rõ làm được tới đâu, thay vì gật bừa.

Nhiều người phân vân giữa làm web app và làm app cài trên điện thoại. Chọn web app khi người dùng làm việc trên máy tính là chính, cần truy cập từ bất kỳ máy nào chỉ với trình duyệt, không muốn phụ thuộc vào việc duyệt ứng dụng trên kho App Store/Google Play. Phần lớn phần mềm quản lý nội bộ và dashboard rơi vào nhóm này. Chọn app điện thoại khi người dùng chủ yếu thao tác trên di động, cần dùng sâu tính năng của máy (camera, định vị, thông báo đẩy), hoặc cần chạy cả khi không có mạng. Web22 làm cả hai nên sẽ tư vấn hướng nào hợp, không đẩy bạn vào cái Web22 muốn bán.

Nhiều dự án bắt đầu bằng một web app cho phần quản trị, rồi mới làm app di động cho người dùng cuối ở giai đoạn sau. Nếu web app của bạn còn cần thêm một lớp tự động hoá, ví dụ gửi thông báo, đồng bộ dữ liệu giữa các công cụ, xử lý lặp lại không cần người, thì xem thêm mảng tự động hoá quy trình.

Nếu bạn đang có một file Excel quá tải, một quy trình thủ công ngốn giờ mỗi ngày, hay một ý tưởng sản phẩm muốn dựng nhanh để thử thị trường, cứ mô tả nó cho Web22. Tư vấn 30 phút miễn phí, Web22 nghe bài toán rồi nói thật bạn cần một web app hay chỉ cần một thứ đơn giản hơn, kèm báo giá theo dự án trong 24h sau khi rõ phạm vi. Xem thêm các dự án Web22 đã làm hoặc liên hệ trực tiếp: [email protected] · 0981 828 781.