CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1. Giới thiệu đề tài Ngày nay, với sự phát triển của ngành Công nghệ thông tin, các sản phẩm và ứng dụng truyền thống đã được chuyển sang các nền tảng trực tuyến. Việc đăng tin trên các nền tảng này sẽ giúp cửa hàng tiếp cận được nhiều khách hàng hơn, đồng thời có thể quản lý việc bán hàng, lưu kho, vận chuyển và thanh toán một cách chính xác và minh bạch. Khách hàng mục tiêu của nhóm chúng em là dịch vụ cửa hàng nội thất và cây cảnh.
Trên thị trường, có rất nhiều mô hình ứng dụng thương mại điện tử nhưng chưa có dự án nào tập trung phát triển cho những cửa hàng nội thất như thế này. Đồng thời, các dự án chưa đáp ứng được về mặt hiệu suất, giao diện cũng như tính dễ sử dụng. Hiểu được nhu cầu về một hệ thống giải quyết vấn đề cho các cửa hàng nội thất vừa và nhỏ, nhóm cho ra đời sản phẩm Konsept với mục tiêu nhanh - dễ sử dụng - giao diện thân thiện. Khảo sát người dùng Trong quá trình nghiên cứu các tính năng và phân tích các ứng dụng có sẵn trên thị trường, em đã thực hiện một số khảo sát tìm hiểu về nhu cầu người dùng về nội thất.
Sau đây là một số thống kê rút ra từ báo cáo: 1 Đối với các câu hỏi về mức độ quan tâm về đồ nội thất thì ta có thể thấy đa số người khảo sát đều khá quan tâm và họ cũng thường xuyên ghé các website bán hàng nội thất. Và với các tiêu chí khi mua đồ nội thất thì thường tiêu chí màu sắc và chất liệu đạt được nhiều sự quan tâm nhất của những người khảo sát 2 Tuy vậy các website bán đồ nội thất lại không cung cấp đầy đủ các thông tin và hàng nội thất cho khách hàng. Vì vậy để làm hoàn thiện và phong phú hơn về các chức năng cũng như giao diện cho website thì nhóm chúng em đã thực hiện thêm các cuộc khảo sát về màu sắc, phân chia loại sản phẩm, vị trí điều hướng, độ đầy đủ thông tin và độ dễ hiểu. 3 4 Qua đó chúng em nhận được kết quà là đa phần người dùng thường quan tâm đến màu sắc, phân chia rõ ràng cũng như là vị trí điều hướng đến các chức năng khác và độ dễ hiểu khi vào một website bán đồ nội thất.
Cuối cùng chúng em lấy thêm các ý kiến về các chức năng cần cải thiện mà khách hàng mong muốn website cần cải thiện Kết quả là xây dựng UI thân thiện, đa dạng về mặt hàng và giá rẻ là những tiêu chí cải thiện mà những người khảo sát mong muốn nhất. Qua kết quả của cuộc khảo sát, nhóm chúng em rút ra kết luận như sau: Đa phần người dùng quan tâm đến đồ nội thất và hay ghé qua website nội thất, và khi mua nội thất thì họ thường chọn màu sắc và chất liệu. Tuy vậy các website lại không cung cấp đầy đủ thông tin về hàng cho họ, và các tiêu chí về màu sắc, sự phân chia rõ ràng các loại hàng và độ dễ hiểu cũng được nhận rất nhiều sự quan tâm cho một website bán đồ nội thất. Và cuối cùng, để cải thiện một website bán hàng thì đa phần người khảo sát chọn nên xây dựng UI thân thiện hơn, đa dạng về mặt sản phẩm và giá thành rẻ.
Giải pháp Furniturer - đơn vị tiên phong trong hệ thống thương mại điện tử nội thất Việt Nam. Ý tưởng này dựa trên hệ thống cửa hàng bán đồ nội thất. Nhóm chúng em chuyển tất cả các quy trình giao dịch sang một nền tảng trực tuyến để giúp cửa hàng giải quyết các vấn đề khác nhau. Khách hàng mục tiêu của nhóm chúng em là các cửa hàng quy mô vừa hoặc nhỏ không thể tiếp cận một số hệ thống thương mại điện tử lớn hiện nay như Shopee, Lazada … do chi phí cao, rủi ro … Nhiệm vụ chính của Furniturer là mọi cửa hàng nội thất đều có thể chuyển sang đám mây và điều chỉnh hoạt động kinh doanh của họ trực tuyến.
Nhóm chúng em cũng cung cấp một giao diện người dùng thực sự tuyệt đẹp còn được gọi là UX/UI thân thiện mà mọi người đều có thể sử dụng và yêu thích nó. Các chức năng chính Trang Cilent STT Chức năng 1 Đăng nhập / Đăng ký 2 Tìm sản phẩm 3 Chi tiết sản phẩm 4 Thêm vào giỏ hàng 5 Checkout 6 Thanh toán bằng Paypal 7 Kiểm tra tình trạng đơn hàng 8 Thay đổi thông tin khách hàng 9 Lưu thông tin giao hàng Trang Admin (Dashboard) STT Chức năng 1 Đăng nhập / Đăng ký 2 Tìm sản phẩm 3 Chi tiết sản phẩm 4 Chỉnh sửa sản phẩm 5 Xóa sản phẩm 6 Quản lý kho hàng 7 Quản lý đơn hàng 6 8 Phân tích thống kê 9 Quản lý tài khoản khách hàng 1. Các yêu cầu phi chức năng 1. Tính khả dụng - Hiệu quả sử dụng: Thực thi nhanh, ít xảy ra lỗi cho người dùng - Tính trực quan: giao diện thân thiên, dễ điều hướngcác nút, tiêu đề và thông báo lỗi dễ hiểu - Giao diện dễ sử dụng 1.
Độ tin cậy - Ứng dụng phân quyền và xác thực vai trò người dùng - Thiết lập giới hạn các chức năng theo từng vai trò của người dùng 1. Hiệu năng - Thời gian tải dưới 3 giây để truy cập vào ứng dụng - 90% tổng thời gian phản hồi ít hơn 3-7 giây 1. Các công nghệ Phía Front-end • ReactJS • TailwindCSS • SCSS • Redux • Ant Design • Axios • Paypal payment Phía Back-end • NodeJS • ExpressJS • MongoDB • BCrypt 1. Các công cụ phát triển • Visual Studio Code • Chrome Devtools 7 • MongoDB Compass • Postman 1.
Quản lý Projects Nhóm chúng em chọn Trello làm công cụ quản lý công việc cũng như chia tasks cho nhau.0 – Trello làm việc của nhóm 8 CHƯƠNG 2: CÔNG NGHỆ 2. Công nghệ chính 2. MongoDB Dựa trên thời gian, lộ trình và các thành viên trong nhóm, chúng em quyết định chọn cơ sở dữ liệu NoSQL cung cấp cho nhóm chúng em thời gian phát triển ngắn hơn và hiệu suất cũng tốt hơn. Trong các nghiên cứu gần đây, cơ sở dữ liệu NoSQL cho thấy một kết quả vượt trội so với cơ sở dữ liệu SQL truyền thống.
Với một vài lần thử và nghiên cứu, nhóm của nhóm chúng em đưa ra quyết định rằng MongoDB sẽ là cơ sở dữ liệu của nhóm chúng em. MongoDB là cơ sở dữ liệu NoSQL hướng tài liệu được sử dụng để lưu trữ dữ liệu khối lượng lớn. Thay vì sử dụng các bảng và hàng như trong cơ sở dữ liệu quan hệ truyền thống, MongoDB sử dụng các bộ sưu tập và tài liệu. Tài liệu bao gồm các cặp key-value là đơn vị dữ liệu cơ bản trong MongoDB.
Bộ sưu tập chứa các tập hợp tài liệu và chức năng tương đương với các bảng cơ sở dữ liệu quan hệ. Javascript JavaScript là 1 trong 3 ngôn ngữ chính của lập trình web, và nó được dùng phổ biến trong suốt 20 năm qua. Từ thuở sơ khai, nó còn có tên là Mocha (năm 1995), sau đó được đổi thành Mona, Livescript, và cuối cùng là JavaScript như hiện nay. Tính đến năm 2016, có đến 92% trang web hiện nay đang sử dụng JavaScript, và rất có thể bạn đã dùng qua rất nhiều trang web có sử dụng ngôn ngữ lập trình này.
ReactJS ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website. Một 10 trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa. Lý do nên sử dụng ReactJS: o Phù hợp với đa dạng thể loại web o Tái sử dụng các component o Thân thiện với SEO o Debug dễ dàng o Là công cụ phát triển web được nhiều người ưa dùng 2.js là một hệ thống phần mềm được thiết kế để viết các ứng dụng internet có khả năng mở rộng, đặc biệt là máy chủ web. Chương trình được viết bằng JavaScript, sử dụng kỹ thuật điều khiển theo sự kiện, nhập/xuất không đồng bộ để tối thiểu tổng chi phí và tối đa khả năng mở rộng.js bao gồm có V8 JavaScript engine của Google, libUV, và vài thư viện khác.
ExpressJS 11 Expressjs là một framework được xây dựng trên nền tảng của Nodejs. Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile. Expressjs hỗ trợ các method HTTP và midleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng. Tổng hợp một số chức năng chính của Expressjs như sau: - Thiết lập các lớp trung gian để trả về các HTTP request.
- Define router cho phép sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL. - Cho phép trả về các trang HTML dựa vào các tham số. Lý do nên sử dụng ExpressJS: - ExpressJS có thể giảm một nửa thời gian viết mã mà vẫn giúp nhà phát triển xây dựng các ứng dụng web hiệu quả. - ExpressJS còn cung cấp các tính năng khác nhau giúp tiết kiệm công sức rất nhiều.
- ExpressJS được sử dụng tương đối dễ dàng vì có hỗ trợ JavaScript. - ExpressJS được phát triển dựa trên nền tảng Node. Đây là một kiến trúc hướng sự kiện và có khả năng xử lý hàng nghìn yêu cầu của khách hàng cùng một lúc - ExpressJS lại là một ứng dụng web miễn phí và mã nguồn mở 2. Ant Design Ant Design là tập hợp các components của React được xây dựng theo chuẩn thiết kế của Ant UED Team.
Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các component thông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon, DatePicket, v.v…Bên cạnh đó Ant cũng có những component riêng thú vị, như LocaleProvider cho phép bạn thay đổi ngôn ngữ trên toàn ứng dụng. Ant Design đáp ứng được hầu hết các yêu cầu của project của bạn mà ban không phải cài thêm bất cứ thư viện nào nữa. Dưới đây là danh sách các components mà nó cung cấp: • General: Button, Icon • Layout: Grid, Layout • Navigation: Affix, Breadcrumb, Dropdown, Menu, Pagination, Steps 12 • Data Entry: AutoComplete, Checkbox, Cascader, DatePicker, Form, InputNumber, Input, Mention, Rate, Radio, Switch, Slider, Select, TreeSelect, Transfer, TimePicker, Upload • Data Display: Avatar, Badge, Collapse, Carousel, Card, Calendar, List, Popover, Tree, Tooltip, Timeline, Tag, Tabs, Table • Feedback: Alert, Drawer, Modal, Message, Notification, Progress, Popconfirm, Spin, Skeleton • Other: Anchor, BackTop, Divider, LocaleProvider 2. Cấu trúc của ứng dụng Web Furniturer được phát triển với MERN Stack bao gồm: MongoDB, Express, ReactJS, NodeJS.