PHẦN MỞ ĐẦU 1. Tính cấp thiết của đề tài Khi xã hội ngày càng phát triển, mức sống của người dân được nâng cao thu nhập kinh tế ngày càng được cải thiện thì mua sắm trở thành một nhu cầu không thể thiếu của mỗi người. Tuy nhiên, việc ra cửa hàng lựa chọn cho mình một sản phẩm ưng ý thì không phải là điều dễ dàng với những người bận rộn, về vị trí địa lý cũng là vấn đề đáng quan tâm, cùng với đó là khó so sánh các sản phẩm cùng loại chỉ với thời gian ít ỏi ở cửa hàng hay chỉ thông qua người tiếp thị - họ chỉ muốn bán được sản phẩm. Có vấn đề thì có cách giải quyết, thời đại Internet bùng nổ kéo theo nhiều loại hình kinh doanh mới ra đời, trong đó có thương mại điện tử, mô hình website bán hàng online đang dần thay thế hình thức bán hàng truyền thống.
Vừa giải quyết được những khó khăn của bán hàng truyền thống, vừa mang đến nhiều lợi ích khác như có thể xem rõ thông tin sản phẩm, lựa chọn những màu sắc phù hợp, so sánh các sản phẩm cùng loại với nhau từ đó đưa ra lựa chọn sáng suốt nhất. Đồng thời chỉ với một vài thao tác đơn giản thông qua chiếc smartphone hay máy vi tính là có thể nhận hàng ngay tại nhà, nhanh chống và tiện lợi. Về phía chủ cửa hàng có thể giảm nhiều chi phí: tiền mặt bằng, thuê tiếp thị, trang trí cửa hàng.Quản lý hoàn toàn qua website chính xác, nhanh chóng và dễ dàng. Bên cạnh đó, đây còn là đề tài khóa luận tốt nghiệp nên nhóm muốn nỗ lực đưa những kiến thức đã tích góp được trong những năm học đại học thành một sản phẩm thiết thực, có ý nghĩa.
Mục tiêu đề tài - Tổng hợp cơ sở lý thuyết về Angular 7 và ASP .NET Core và ứng dụng 2 nền tảng đó vào ứng dụng cụ thể thiết thực có giá trị. - Nghiên cứu thực trạng và đánh giá về thị trường website bán hàng. - Xây dựng được một ứng dụng hoàn chỉnh có thể sử dụng thực tế. - Trình bày báo cáo khoa học và hợp lý về nội dung trong đề tài khóa luận tốt nghiệp.
- Đảm bảo tiếp tục phát triển ứng dụng, hoàn thiện mọi chức năng, nâng cấp đưa ra thị trường sử dụng thực tế. - Hiểu được nhu cầu mua bán hàng của mọi người và nhu cầu trải nghiệm website. Phương pháp nghiên cứu Để thực hiện mục tiêu và nhiệm vụ nghiên cứu, nhóm đã sử dụng các phương pháp nghiên cứu sau: - Phương pháp nghiên cứu tài liệu: Đọc các tài liệu tham khảo, xem video cách sử dụng tính năng. - Phương pháp chuyên gia: Nhờ sự góp ý, giúp đỡ, tư vấn từ giáo viên hướng dẫn và các thầy cô trong khoa Công nghệ thông tin trường Đại học Sư phạm kỹ thuật TP.
Đối tượng, phạm vi nghiên cứu 4. Đối tượng nghiên cứu - Angular 7, ASP.NET Core - Cơ chế hoạt động của website bán hàng trực tuyến - Nhu cầu, khả năng sử dụng website bán hàng trong thực tế 4. Phạm vi nghiên cứu Về phạm vi nghiên cứu nhóm chủ yếu nghiên cứu về cách sử dụng Angular và Asp.net core để xây dựng được một website bán hàng cơ bản có thể sử dụng được. Tương lai có thể mở rộng quy mô, ứng dụng thêm nhiều chức năng mới phù hợp với nhu cầu người dùng.
Phân tích những website bán hàng online trên thị trường 5. Khảo sát website bán hàng online Lazada - Ưu điểm: + Có thể đăng nhập bằng facebook hoặc google+ + Phân chia danh mục sản phẩm theo menu đa cấp, dễ tìm kiếm ngành hàng + Kiểm tra đơn hàng nhanh chỉ với email và mã đơn hàng không cần đăng nhập + Cho phép lựa chọn sản phẩm trong giỏ hàng để đặt hàng (không cần đặt tất cả) + Không hiển thị toàn bộ sản phẩm (Cho phép xem thêm sản phẩm với nút “tải thêm” mỗi lần thêm 4 hàng) + Hiển thị đường dẫn đến sản phẩm (xem thêm các sản phẩm cùng ngành hàng) + Cho phép sắp xếp sản phẩm theo độ phổ biến hoặc theo giá 2 do an + Hỗ trợ lọc sản phẩm với thương hiệu, vị trí, giá cả, đánh giá (rating),. + Phân trang sản phẩm + Hỗ trợ chế độ xem lưới hoặc xem danh sách + Thêm nhiều vị trí đặt hàng, nhớ vị trí đặt hàng trước đó + Rating/đánh giá sản phẩm + Xem lại lịch sử tìm kiếm (lưu bằng cookie) + Gợi ý sản phẩm khác mà mọi người cũng xem khi xem sản phẩm này + Chat trực tiếp với người bán hàng - Nhược điểm + Danh sách tìm kiếm phổ biến thay đổi ngay sau khi tải lại trang => có thể chỉ là sản phẩm ngẫu nhiên + Chức năng tìm kiếm một cho tất cả, dẫn đến tìm kiếm không chính xác => trang adayroi.com khắc phục bằng thêm tùy chọn ngành hàng khi tìm kiếm + Không xem lại được những sản phẩm đã xem + Mỗi câu hỏi chỉ một câu trả lời, không thể tiếp tục cuộc trò chuyện. Khảo sát website bán hàng Shopee - Ưu điểm: + Phải nhập mã kích hoạt sms trước mỗi lần đăng nhập.
+ Gợi ý sản phẩm tương tự (cùng tên hoặc cùng chức năng) thay vì gợi ý sản phẩm người khác cũng tìm kiếm thêm như lazada + Chức năng lọc đánh giá thông qua sao được hiển thị rõ ràng thành nhiều nút khác nhau thay vì ẩn trong 1 nút => thuận tiện cho việc xem đánh giá nhanh. + Có thể đánh giá sản phẩm bằng hình ảnh. + Gợi ý từ khóa tìm kiếm ngay dưới thanh search + Tìm kiếm thông qua tag # nhanh và chính xác + Thêm nhanh sản phẩm vào giỏ hàng + Tải thêm danh sách sản phẩm mỗi khi trượt thanh scrollbar + Chat trực tiếp với người bán hàng - Nhược điểm: 3 do an + Chỉ xem được đơn hàng trong tài khoản của mình (không hỗ trợ tra cứu qua mã hóa đơn) + Chỉ được đánh giá sản phẩm, không được đặt câu hỏi hay bình luận + Không xem lại được sản phẩm đã xem trước đó (Tiki có chức năng này) 5. Khảo sát Thế giới di động - Ưu điểm: + Không cần tạo tài khoản để mua hàng + Kinh doanh nhiều mặt hàng về thiết bị điện tử + Đánh giá bình luận sản phẩm khi không cần tài khoản + Trên header khi cuộn xuống sâu sẽ cho mình biết mình đang ở hạng mục sản phẩm nào + Có tính năng xem 360 độ rất hay + Có danh mục hỏi đáp và thào luận + Sắp xếp sản phẩm theo giá, tính năng, trả góp 0% - Nhược điểm + Khách hàng mỗi lần đặt hàng đều phải điền thông tin, không thể sử dụng thông tin cũ + Quảng cáo khá nhiều dễ bị rối mắt + Nội dung trang khá dày đặc 6.
Kết quả dự kiến đạt được - Có thể vận dụng sử dụng được Angular và Asp. - Hoàn thành cơ bản được website bán hàng, hoạt động mượt mà, giao diện đẹp. - Hiểu sâu về quy trình làm báo cáo luận văn. - Thấy được những tính năng thiết yếu đối với một trang web bán hàng.
4 do an PHẦN NỘI DUNG CHƯƠNG 1: TÌM HIỂU VỀ ANGULAR + ASP. Giới thiệu về Angular 7 và nguồn gốc ra đời Angular là gì: Angular (thường được gọi là "Angular 2+" hoặc "Angular v2 trở lên") là một khung ứng dụng web mặt trước mã nguồn mở dựa trên TypeScript do Nhóm Angular tại Google và cộng đồng của các cá nhân và tập đoàn. Angular là một bản viết lại hoàn chỉnh từ cùng một nhóm đã xây dựng AngularJS Angular là một nền tảng giúp bạn dễ dàng xây dựng các ứng dụng với web. Angular kết hợp các mẫu khai báo, tiêm phụ thuộc, công cụ từ đầu đến cuối và tích hợp các thực tiễn tốt nhất để giải quyết các thách thức phát triển.
Đơn giản mà nói, Angular là một Javascript framework để xây dựng những ứng dụng phía client sử dụng HTML, CSS và một ngôn ngữ lập trình như Javascript Trang chủ của Angular: https://angular.io/guide/quickstart 1. Lịch sử phát triển - Khởi đầu Ban đầu, bản viết lại của AngularJS được nhóm gọi là "Angular 2", nhưng điều này dẫn đến sự nhầm lẫn giữa các nhà phát triển. Để làm rõ, nhóm đã thông báo rằng các thuật ngữ riêng biệt nên được sử dụng cho từng khung với "AngularJS" đề cập đến các phiên bản 1.X và "Angular" mà không có "JS" đề cập đến các phiên bản 2 trở lên.0 đã được công bố tại hội nghị ng-Europe 22-23. Những thay đổi mạnh mẽ trong phiên bản 2.0 đã tạo ra tranh cãi đáng kể giữa các nhà phát triển.
Vào ngày 30 tháng 4 năm 2015, các nhà phát triển Angular đã thông báo rằng Angular 2 đã chuyển từ Alpha sang Developer Preview. Angular 2 chuyển sang Beta vào tháng 12 năm 2015, và ứng cử viên phát hành đầu tiên được xuất bản vào tháng 5 năm 2016. Phiên bản cuối cùng được phát hành vào ngày 14 tháng 9 năm 2016. 5 do an - Phiên bản 4.x Vào ngày 13 tháng 12 năm 2016 Angular 4 đã được công bố, bỏ qua 3 để tránh nhầm lẫn do điều chỉnh sai phiên bản của gói bộ định tuyến đã được phân phối là v3.
Phiên bản cuối cùng được phát hành vào ngày 23 tháng 3 năm 2017. Angular 4 tương thích ngược với Angular 2. Phiên bản Angular 4.3 là một bản phát hành nhỏ, có nghĩa là nó không có thay đổi vi phạm và đó là bản thay thế thả xuống cho 4.xx Các tính năng trong phiên bản 4.3 Giới thiệu HttpClient, một thư viện nhỏ hơn, dễ sử dụng hơn và mạnh hơn để tạo Yêu cầu HTTP. Các sự kiện vòng đời bộ định tuyến mới cho Guards và Resolvers.
Bốn sự kiện mới: GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd tham gia nhóm sự kiện vòng đời hiện tại như NavigationStart. Điều kiện vô hiệu hóa hình ảnh động. - Phiên bản 5 Angular 5 được phát hành vào ngày 1 tháng 11 năm 2017. Các cải tiến chính trong Angular 5 bao gồm hỗ trợ cho các ứng dụng web tiến bộ, trình tối ưu hóa xây dựng và các cải tiến liên quan đến Thiết kế Vật liệu.
- Phiên bản 6 Angular 6 đã được phát hành vào ngày 4 tháng 5 năm 2018. Đây là một bản phát hành chính tập trung ít hơn vào khung cơ bản và nhiều hơn về chuỗi công cụ và giúp dễ dàng di chuyển nhanh hơn với Angular trong tương lai, như: ng update, ng add, Angular Elements, Angular Material + CDK Components, Angular Material Starter Components, CLI Workspaces, Library Support, Tree Shakable Providers, Animations Performance Improvements, và RxJS v6. - Phiên bản 7 Angular 7 đã được phát hành vào ngày 18 tháng 10 năm 2018.