Thiết kế web app mobile: Quy trình, Lợi ích cho doanh nghiệp

Thiết kế web app là xây dựng ứng dụng chạy trên trình duyệt để doanh nghiệp quản lý khách hàng, đơn hàng và dữ liệu ngay trên web, không cần cài đặt phần mềm. Dịch vụ thiết kế web app theo yêu cầu chuyên nghiệp của Thiết Kế Web DC giúp doanh nghiệp thay tài liệu giấy và phần mềm offline bằng một hệ thống chạy trên web.

Web app là gì?

Web app, hay ứng dụng web, là ứng dụng chạy trên trình duyệt, người dùng thao tác trực tiếp qua Internet mà không phải cài lên máy. Web app được xây bằng các ngôn ngữ web như HTML, CSS và JavaScript, có khả năng lưu trữ dữ liệu, tệp và xử lý dữ liệu, thường phục vụ một nhóm hoặc một người dùng thực hiện công việc.

Về cách hoạt động, phần xử lý và lưu trữ dữ liệu chạy ở máy chủ bằng server-side script như PHP hoặc ASP, còn phần hiển thị cho người dùng chạy ở trình duyệt bằng client-side script như JavaScript và HTML. Nhờ cách chia này, người dùng tương tác với doanh nghiệp qua hệ thống quản lý nội dung, biểu mẫu trực tuyến hoặc giỏ hàng.

Ví dụ quen thuộc là các web app của Google như Gmail, Google Trang tính, Google Tài liệu, Trang trình bày và Biểu mẫu. Tất cả đều cho chia sẻ tài liệu và làm việc trực tuyến, các thành viên có quyền truy cập cùng theo dõi tiến độ và làm việc trên một phiên bản tại cùng thời điểm.

Trong doanh nghiệp, web app thường là phần mềm quản lý dữ liệu khách hàng, đơn hàng hoặc tồn kho, ví dụ phần mềm quản lý kho chạy ngay trên trình duyệt thay cho sổ sách giấy.

Web app là ứng dụng chạy trực tiếp trên nền tảng trình duyệt web

Web app khác website như thế nào?

Ranh giới giữa website và web app khá mỏng nên nhiều người nhầm hai loại này với nhau. Nắm được web app khác website như thế nào giúp doanh nghiệp xác định mình cần thiết kế website giới thiệu hay một web app để vận hành. Bốn điểm sau là cách phân biệt rõ nhất.

Chức năng: Web app có chức năng phức tạp, xử lý nghiệp vụ như quản lý khách hàng hay đơn hàng. Website có chức năng đơn giản, chủ yếu hiển thị thông tin.
Tương tác: Web app tương tác với người dùng qua đăng ký, nhập liệu và thao tác trên giao diện. Website thông thường không có tương tác này.
Xác thực: Web app yêu cầu xác thực đăng nhập để đảm bảo an toàn cho người dùng và dữ liệu. Website không bắt buộc phải xác thực.
Thao tác dữ liệu: Người dùng web app vừa đọc nội dung vừa thao tác được trên dữ liệu như tạo, sửa, xóa. Người dùng website chỉ đọc nội dung.

Web app khác website ở chức năng phức tạp, có tương tác với người dùng, yêu cầu xác thực và cho thao tác dữ liệu

Lợi ích và hạn chế của web app

Web app thay đổi cách chủ doanh nghiệp, nhân viên và khách hàng cùng làm việc trên một hệ thống, thay vì mỗi người giữ một bản dữ liệu riêng. Bên cạnh lợi ích, web app cũng có giới hạn mà doanh nghiệp nên biết trước khi đầu tư. Hai phần dưới nêu lần lượt lợi ích và hạn chế.

Lợi ích của web app

Lợi ích thể hiện ở từng nhóm người dùng, từ chủ doanh nghiệp, nhân viên đến khách hàng, cộng với những điểm chung về thiết bị và chi phí.

Chủ doanh nghiệp: Có nền tảng để khách hàng sử dụng, mua hàng và để doanh nghiệp quản lý, kinh doanh hiệu quả, tối ưu ngân sách. Báo cáo chi tiết giúp chủ doanh nghiệp bao quát hoạt động kinh doanh.
Nhân viên: Số liệu đồng bộ trên một hệ thống nên nhân viên nắm thông tin và thực hiện công việc nhanh, trơn tru, làm được nhiều việc hơn.
Khách hàng: Khách thao tác và thực hiện công việc ngay trên website hoặc ứng dụng web, trở thành thành viên và dùng các thao tác thuộc quyền của mình.
Dùng mọi lúc mọi nơi: Web app chạy trên máy tính, điện thoại, tablet, đa trình duyệt như Chrome, Cốc Cốc, Safari và đa hệ điều hành. Người dùng không cần cài đặt, không tốn dung lượng ổ cứng, không cần cấu hình cao và không mất nhiều thời gian đăng ký như app thông thường.
Chi phí thấp, dễ sửa lỗi: Chi phí web app rẻ hơn các loại ứng dụng khác và sửa lỗi cũng dễ hơn. Người dùng luôn truy cập phiên bản mới nhất nên không phải cập nhật.
Xây theo nhu cầu riêng: Lập trình web app theo yêu cầu cho ra hệ thống bám đúng quy trình của từng doanh nghiệp, chỉ có các chức năng doanh nghiệp thật sự dùng. Doanh nghiệp xem thêm dịch vụ thiết kế website theo yêu cầu của DC.

Hạn chế của web app

Web app có ba giới hạn chính mà doanh nghiệp cần tính đến ngay từ lúc thiết kế.

Phụ thuộc Internet: Cần có kết nối Internet mới truy cập được web app, mất kết nối thì không thể tiếp tục làm việc.
Giới hạn tính năng: Web app có phạm vi hoạt động nhỏ hơn về tính năng và cần trình duyệt phù hợp để chạy, nên trong quá trình phát triển phải đảm bảo hỗ trợ nhiều trình duyệt.
Khó đo hiệu suất: Hiệu suất và dữ liệu của web app khó thu thập chính xác vì người dùng tương tác qua nhiều dạng trình duyệt web khác nhau.

Lợi ích của web app với chủ doanh nghiệp, nhân viên, khách hàng và hạn chế khi phụ thuộc Internet, giới hạn tính năng

Công nghệ và framework dùng để thiết kế web app

Một web app cần ba mảng kiến thức gồm back-end như Python, Ruby để kiểm soát cách web app hoạt động, front-end gồm HTML, CSS, JavaScript cho giao diện và DevOps như GitHub, Jenkins để triển khai. Khi thiết kế website app, đội phát triển chọn framework theo từng mảng, mười framework dưới đây là lựa chọn phổ biến.

Ruby on Rails: Framework dùng để phát triển web app, phù hợp với những ứng dụng chú trọng tốc độ phát triển. Ruby on Rails do David Heinemeier Hansson phát triển.
Laravel: Đơn giản, tiện lợi, do Taylor Otwell phát triển năm 2011. Laravel chạy bằng ngôn ngữ PHP, hoạt động theo cấu trúc MVC.
Django: Công cụ back-end đáng tin cậy, theo các nguyên tắc Convention over Configuration và DRY. Django giúp lập trình viên làm ra những trang web có tính bảo mật cao.
ASP.NET: Framework của Microsoft dành cho nhà phát triển muốn tạo giao diện web đa dạng, bắt mắt. Taco Bell, Getty Images và Stack Overflow là một vài cái tên đã ứng dụng ASP.NET.
Express: Framework back-end nguồn mở, gọn nhẹ và tương thích tốt, chạy trên nền Node.js bằng ngôn ngữ JavaScript. Express dùng cho cả website và ứng dụng di động.
Spring: Do Pivotal Software phát triển cho nền tảng Java, phù hợp để làm các ứng dụng gọn nhẹ mà vẫn đảm bảo hiệu suất tốt.
Angular: Framework front-end dùng ngôn ngữ TypeScript, nguồn mở, do Google Angular Team phát triển.
Ember: Framework nguồn mở chạy JavaScript theo cấu trúc MVVM, giúp tạo ra các ứng dụng hiển thị đơn trang có thể mở rộng tính năng bằng bộ công cụ phụ trợ.
Meteor: Tích hợp mã dùng chung cho iOS, Android và máy tính. Meteor tạo được website realtime trong thời gian ngắn và hỗ trợ làm bản thử nguyên mẫu.
Vue: Thư viện JavaScript chứa các cấu kiện phát triển giao diện người dùng, nên thế mạnh của Vue là thiết kế UI.

Công nghệ thiết kế web app gồm back-end, front-end, DevOps và các framework Ruby on Rails, Laravel, Django, Angular, Vue

Quy trình thiết kế web app

Hướng dẫn thiết kế web app dưới đây gồm 12 bước, đi từ lên ý tưởng, thiết kế, xây dựng đến triển khai. Quy trình thiết kế web app này viết chung cho mọi doanh nghiệp, mỗi bước nêu việc cần làm và câu hỏi cần trả lời trước khi sang bước sau.

Bước 1: Lên ý tưởng

Ý tưởng web app nên bắt đầu từ một vấn đề cụ thể, ví dụ khâu lưu trữ thông tin khách hàng chưa được cập nhật, phân loại và sắp xếp để tra cứu. Web app khi đó là giải pháp cho đúng vấn đề này. Doanh nghiệp cũng cần đánh giá tính khả thi bằng ba câu hỏi.

Ứng dụng mang lại những chức năng và lợi ích gì.
Thế nào là một ứng dụng tốt.
Cần bao nhiêu nguồn lực về thời gian, chi phí và con người, tài nguyên hiện tại của doanh nghiệp có đáp ứng được không.

Bước 2: Nghiên cứu thị trường

Sau khi có ý tưởng, doanh nghiệp tìm hiểu đã có web app tương tự trên thị trường chưa và có nhóm khách hàng nào dùng web app này không. Có thể dùng Google và công cụ tra cứu bằng sáng chế, nhãn hiệu để tìm sản phẩm tương tự.

Để biết tiềm năng thị trường, doanh nghiệp tìm hiểu thị trường mục tiêu và chia sẻ ý tưởng trên các diễn đàn liên quan để nhận phản hồi khách quan. Google Trends cho biết mức độ quan tâm, công cụ SEO cho biết số người tìm các từ khóa liên quan, còn các nhóm trên mạng xã hội là nơi trình bày ý tưởng với thị trường mục tiêu.

Bước 3: Xác định chức năng

Càng nhiều chức năng thì thời gian xây dựng web app càng dài, nên danh sách chức năng cần giữ ở mức cần thiết. Một CRM đơn giản có thể chỉ cần cho phép người dùng thực hiện các việc sau.

Tạo tài khoản, lấy lại mật khẩu bị mất và đổi mật khẩu.
Tạo liên hệ mới và tải lên các liên hệ.
Gán giá trị cho liên hệ và viết ghi chú dưới liên hệ.
Gắn nhãn liên hệ là khách hàng tiềm năng, khách hàng hoặc cộng tác viên, rồi lọc theo từng nhãn.
Xem tổng giá trị của khách hàng tiềm năng, khách hàng và cộng tác viên.

Bước 4: Phác thảo wireframe

Ở bước này doanh nghiệp phác thảo wireframe của giao diện người dùng, chỉ là bản phác thảo nên có thể làm tự do. Khi phác thảo cần xem xét dẫn hướng, tính thương hiệu, cấu trúc của trang, các nút bấm trên trang và các yếu tố tương tác. Nên phác thảo nhiều phiên bản giao diện để thấy các chức năng muốn đưa vào ảnh hưởng thế nào tới web app.

Bước 5: Lên kế hoạch luồng làm việc

Để có luồng làm việc tốt, doanh nghiệp đặt mình vào vị trí người dùng, dùng thử web app của đối thủ rồi ghi lại điều tốt và chưa tốt, nhất là luồng làm việc của các web app đó. Sau đó viết ra các luồng cho ứng dụng của mình, trả lời các câu hỏi sau.

Người dùng đăng ký thế nào, có nhận email xác minh không.
Người dùng đăng nhập và đổi mật khẩu thế nào.
Người dùng điều hướng trong ứng dụng và thay đổi cài đặt thế nào.
Người dùng trả tiền cho ứng dụng và hủy đăng ký thế nào.

Với web app nhiều trang, cần liệt kê tất cả các trang để hình dung các trạng thái của từng trang. Ví dụ trang chủ có hai trạng thái là đã đăng nhập và chưa đăng nhập, mỗi trạng thái hiển thị nội dung khác nhau.

Bước 6: Thiết kế wireframe và prototype

Wireframing là lập bản thiết kế cho web app, còn prototyping đi xa hơn một bước bằng cách thêm màn hình tương tác. Làm wireframe hay prototype tùy doanh nghiệp, nhưng đây là khâu giúp hình dung cách bố trí giao diện, nên thiết kế giao diện cần theo nguyên tắc UI/UX. Các công cụ thường dùng gồm Sketch, InVision Studio, Adobe XD, Figma và Balsamiq.

Bước 7: Thử nghiệm và nhận phản hồi

Khi có wireframe hoặc prototype, doanh nghiệp đưa bản thiết kế cho người dùng thử và thu thập phản hồi mang tính xây dựng, đây là bước kiểm thử đầu tiên của web app. Nên bắt đầu từ một nhóm người dùng nhỏ, tìm họ qua nhóm Facebook, diễn đàn của khách hàng mục tiêu hoặc email mời dùng thử. Doanh nghiệp giữ quan hệ tốt với những người dùng thử, vì họ là khách hàng tiềm năng nhất khi web app chính thức ra mắt.

Bước 8: Xây dựng cơ sở dữ liệu

Cơ sở dữ liệu là tập hợp dữ liệu, lưu trên đĩa hoặc bộ nhớ của máy chủ. Hệ quản trị cơ sở dữ liệu cung cấp các API nhất quán để tạo, cập nhật và xóa cơ sở dữ liệu, đọc và ghi dữ liệu, cũng như phân quyền truy cập nhiều cấp vào từng khu vực và chức năng. Dữ liệu cần lưu và việc người dùng cần làm sẽ quyết định loại cơ sở dữ liệu.

SQL: Dùng khi dữ liệu liên quan mật thiết với nhau, ví dụ một khách hàng có nhiều hóa đơn, được lưu thành bảng Khách hàng và bảng Hóa đơn liên kết với nhau. MySQL, PostgreSQL và Microsoft SQL Server là các hệ phổ biến.
Document database: Dùng khi dữ liệu ít liên quan nhau, mỗi bản ghi là một khối dữ liệu có cấu trúc lớn, thường ở định dạng JSON. MongoDB, CouchDB, Firebase và DynamoDB là các ví dụ.

Mỗi khách hàng có một tập dữ liệu riêng và chỉ một sự cố rò rỉ cũng làm giảm đáng kể lòng tin vào độ bảo mật, nên doanh nghiệp cần chiến lược tách dữ liệu khách hàng. Có hai cách.

Tách vật lý: Mỗi khách hàng có một cơ sở dữ liệu riêng, an toàn nhất và dễ mở rộng hơn, nhưng quản lý, bảo trì, nâng cấp phức tạp hơn và khó truy vấn dữ liệu của tất cả khách hàng cùng lúc.
Tách logic: Dữ liệu mọi khách hàng nằm trong một cơ sở dữ liệu lớn và mỗi truy vấn kèm bộ lọc theo khách hàng. Cách này dễ bắt đầu, dễ bảo trì, nâng cấp và truy vấn gộp, nhưng dễ mắc lỗi gây rò rỉ dữ liệu và khó mở rộng quy mô hơn.

Bước 9: Xây dựng front-end

Front-end là phần giao diện người dùng, xác định những gì người dùng nhìn thấy và tương tác, được phát triển bằng HTML, CSS và JavaScript. Thực tế front-end và back-end được xây dựng song song, doanh nghiệp chọn giữa trang máy chủ hoặc ứng dụng trang đơn, gọi tắt là SPA. Với SPA, cần thiết lập môi trường phát triển gồm các thành phần sau.

Trình soạn code như VS Code hoặc Sublime Text.
Công cụ đóng gói như Webpack, Gulp hoặc Grunt.
Framework front-end như React hoặc Svelte, nên dùng nếu chưa có nhiều kinh nghiệm phát triển.

Công cụ đóng gói cần cấu hình để nói chuyện với phần back-end, thường chạy ở một cổng khác trên localhost, có thể làm bằng proxy HTTP của Node.

Bước 10: Xây dựng back-end

Back-end quản lý dữ liệu, gồm cơ sở dữ liệu, máy chủ và mọi thứ người dùng không nhìn thấy trong web app. Doanh nghiệp chọn giữa trang máy chủ và ứng dụng trang đơn, rồi giao cho back-end các việc chính sau.

Cung cấp endpoint HTTP cho front-end để tạo, đọc, cập nhật và xóa bản ghi.
Xác thực đăng nhập và phân quyền, tức xác định người dùng đã đăng nhập có được phép thực hiện hành động đang yêu cầu hay không.
Phục vụ front-end, bằng cách tạo giao diện nếu dùng trang máy chủ hoặc chỉ phân phát các tệp tĩnh nếu dùng ứng dụng trang đơn.
Quản lý người dùng, gồm cách đăng nhập bằng tên người dùng và mật khẩu hoặc bằng tài khoản Google, Facebook, và các cấp người dùng trong hệ thống.

Web app thường cần nhiều môi trường, gồm môi trường thử nghiệm cho tính năng mới nhất, môi trường beta cho khách hàng dùng sớm và môi trường thực tế chạy hệ thống chính thức.

Bước 11: Chọn hosting

Hosting là chạy web app trên một máy chủ cụ thể. Doanh nghiệp mua tên miền, mua hoặc thiết lập chứng chỉ SSL rồi chọn nhà cung cấp đám mây như Amazon, Microsoft Azure hoặc nền tảng đám mây của Google. Nếu cần máy chủ riêng với chi phí vừa phải, doanh nghiệp có thể thuê server giá rẻ.

Bước 12: Triển khai

Triển khai là bước cuối, đưa web app đã thiết kế, phát triển và chọn xong hosting lên môi trường thực tế. Doanh nghiệp dùng các công cụ tích hợp liên tục để việc triển khai diễn ra tự động và nhất quán sau mỗi lần cập nhật.

Quy trình thiết kế web app 12 bước từ lên ý tưởng, phác thảo wireframe, xây dựng cơ sở dữ liệu đến hosting và triển khai

Web app dạng PWA và chế độ hiển thị

Khi web app cần dùng trên điện thoại như ứng dụng cài sẵn, doanh nghiệp chọn Ứng dụng web tiến bộ, viết tắt là PWA. PWA hiển thị bên ngoài thẻ trình duyệt và có biểu tượng trên màn hình chính. Nếu cần ứng dụng di động riêng, doanh nghiệp thiết kế app di động tách biệt với web app.

Chế độ toàn màn hình

Chế độ toàn màn hình phù hợp với trải nghiệm sống động như trò chơi, thực tế ảo hoặc thực tế tăng cường. Chế độ này hiện chỉ có trên thiết bị Android, ẩn thanh trạng thái và thanh điều hướng để PWA dùng 100% màn hình cho nội dung.

Chế độ độc lập

Chế độ độc lập là lựa chọn phổ biến nhất cho PWA. PWA hiển thị trong một cửa sổ theo chuẩn hệ điều hành, không có giao diện điều hướng của trình duyệt, nhưng cửa sổ có thể kèm một trình đơn do trình duyệt kiểm soát, ví dụ để sao chép URL hiện tại.

Giao diện người dùng tối giản

Chế độ giao diện người dùng tối giản có trên Android và hệ điều hành máy tính. Trình duyệt hiển thị PWA cùng một giao diện tối giản giúp người dùng di chuyển trong ứng dụng, trên Android là thanh tiêu đề hiển thị tiêu đề trang và nguồn gốc của trang.

Media query theo chế độ hiển thị

Thuộc tính display-mode trong media query nhận bốn giá trị là browser, standalone, minimal-ui và fullscreen, mỗi giá trị áp dụng kiểu hiển thị riêng cho từng chế độ. Ví dụ doanh nghiệp chỉ hiển thị lời mời cài đặt khi web app đang chạy ở chế độ trình duyệt.

Chi phí thiết kế web app

Chi phí web app phụ thuộc vào số quy trình nghiệp vụ, số vai trò người dùng và mức tích hợp, từ khoảng 25 triệu đến 200 triệu, thời gian làm từ 2 đến 12 tuần tùy gói. Phần dưới nêu các yếu tố làm giá thay đổi, bảng giá theo gói và các khoản chi cần dự trù.

Số quy trình nghiệp vụ: Càng nhiều quy trình cần xây thì giá và thời gian làm càng tăng.
Vai trò và phân quyền: Số nhóm người dùng và quyền riêng của từng nhóm.
Số màn hình và báo cáo: Mỗi màn hình nghiệp vụ và báo cáo đều cần thiết kế, lập trình và kiểm thử.
Tích hợp bên thứ ba: Kết nối API với phần mềm đang dùng như KiotViet, MISA, Zalo.
Dữ liệu ban đầu: Nhập và chuyển đổi dữ liệu từ file Excel hoặc phần mềm cũ.
Số chi nhánh, kho: Web app dùng cho nhiều điểm phải xử lý dữ liệu theo từng chi nhánh, kho.

Bảng dưới chia web app thành ba gói theo số quy trình nghiệp vụ.

Gói	Nội dung chính	Giá & thời gian
Gói cơ bản: web app cho vài quy trình	Tối đa 2 quy trình nghiệp vụ, 1 chi nhánh hoặc kho	từ khoảng 25 đến 40 triệu · 2–4 tuần
Gói nâng cao: web app nhiều quy trình, nhiều chi nhánh	Tối đa 5 quy trình, 1 đến 3 chi nhánh hoặc kho, kết nối KiotViet, MISA, Zalo	từ khoảng 40 đến 100 triệu · 4–8 tuần
Gói chuyên sâu: web app có tích hợp và tự động hóa	Tối đa 8 quy trình, đến 5 chi nhánh, kết nối kèm tự động hóa	từ khoảng 100 đến 200 triệu · 8–12 tuần

Ngoài giá theo gói, doanh nghiệp dự trù thêm các khoản sau.

Tên miền: Từ 350.000 đồng năm đầu (.com.vn), từ năm thứ 2 là 360.000 đồng mỗi năm.
Hosting: Từ 2.388.000 đồng mỗi năm (gói Phổ Thông 2GB).
Chứng chỉ SSL và dịch vụ bên thứ ba: Tính riêng theo mức dùng.

Chứng chỉ SSL.
API, SMS và các dịch vụ bên thứ ba khác.

Yêu cầu thay đổi khi đang làm: Mỗi yêu cầu mới cần được đánh giá lại chi phí, dữ liệu và tiến độ trước khi thực hiện, nên doanh nghiệp chốt phạm vi từ đầu.

Hằng năm doanh nghiệp trả thêm tên miền, hosting, SSL và phí bảo trì từ năm thứ 2, mức tại DC xem tại bảng giá thiết kế website trọn gói.

Thiết kế web app đi từ việc hiểu web app là gì, chọn công nghệ phù hợp đến thực hiện đủ 12 bước, từ ý tưởng, thiết kế, xây dựng đến hosting và triển khai, kèm các khoản chi phí cần dự trù. Doanh nghiệp cần hệ thống quản lý chạy trên web theo yêu cầu riêng có thể xem các website DC đã làm tại trang dự án. Cần tư vấn, gửi yêu cầu quản lý và quy trình hiện tại cho Thiết Kế Web DC qua hotline 0886 799 977 – 0563 035 555 hoặc Zalo, hoặc qua trang liên hệ.