Báo Cáo Đồ Án - công nghệ phần mềm - Chuyên Ngành - Đề Tài - Xây Dựng Hệ Thống Bán Giày Online

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH ĐỀ TÀI XÂY DỰNG HỆ THỐNG BÁN GIÀY ONLINE MỞ ĐẦU Ngày nay công nghệ thông tin đã có những bước phát triển mạnh mẽ cả[.]

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

BÁO CÁO

ĐỒ ÁN CHUYÊN NGÀNH

ĐỀ TÀI: XÂY DỰNG HỆ THỐNG BÁN GIÀY ONLINE

MỞ ĐẦU

Ngày nay công nghệ thông tin đã có những bước phát triển mạnh mẽ cả về chiều sâu và chiều rộng Máy tính điện tử giờ đây không còn là thứ quý hiếm mà đang ngày càng trở thành một công cụ làm việc và giải trí của con người Trong những năm gần đây, việc cập nhật các thông tin cũng như thực hiện các giao dịch thông qua Website

và ứng dụng ngày càng trở nên phổ biến Trong đó, một loại hình kinh doanh hiện nay khá phổ biến đó là buôn bán qua mạng Hình thức kinh doanh này mang lại rất nhiều lợi ích cho người tiêu dùng cũng như nhà cung cấp

Phần lớn khách hàng có nhu cầu mua hàng thì phải đến các siêu thị, các cửa hàng hay các trung tâm thương mại để lựa chọn những mặt hàng phù hợp với nhu cầu của mình Công việc này tiêu tốn khá nhiều thời gian và chi phí đi lại cho người tiêu dùng, đôi khi khách hàng còn bị mua phải mặt hàng kém chất lượng Tất cả những bất cập

đó sẽ được loại bỏ với sự ra đời của Hệ thống bán giày trực tuyến Khi khách hàng có nhu cầu mua hàng, dù ở nhà, ở trường, ở công sở hay bất cứ nơi nào có mạng internet, khách hàng chỉ cần vào những trang bán hàng qua mạng/ứng dụng là có thể tìm kiếm được những mặt hàng mà mình muốn mua

Ngoài những lợi ích mà internet mang lại cho người tiêu dùng, nó còn giúp cho nhà cung cấp phát triển rất nhiều trong việc mở rộng thị trường, giúp thương hiệu công ty được nhiều người biết đến, từ đó giảm được rất nhiều chi phí quảng cáo cho sản phẩm và rất thuận lợi trong việc quản lý sản phẩm, chăm sóc khách hàng theo đúng phương châm đặt ra

Với mong muốn tìm hiểu và học tập thông qua bài toán ở trên, nhóm em đã chọn

đề tài: “XÂY DỰNG HỆ THỐNG BÁN GIÀY ONLINE” là đề tài cho đồ án chuyên ngành.

Trong quá trình làm đồ án, nhóm em đã có nhận được sự hướng dẫn tận tình của thầy Lê Văn Minh cùng các bạn trong lớp 17IT1 để hoàn thành tốt đồ án này

Trong quá trình thực hiện đồ án không thể tránh khỏi những sai xót, vì vậy nhóm

em rất mong nhận được sự quan tâm chỉ bảo của thầy

Nhóm xin chân thành cảm ơn!

MỤC LỤC

MỞ ĐẦU 1 NHẬN XÉT 2 Chương 1: Tổng quan đề tài 6

1.1 Giới thiệu 6

1.2 Phương pháp, kết quả 7

1.2.1 Phương pháp triển khai thực hiện đề tài: 7

1.2.2 Kết quả đạt được: 8

1.3 Cấu trúc đồ án 8

Chương 2: Nghiên cứu tổng quan 9

2.1 Đối tượng và phạm vi nghiên cứu 9

2.1.1 Đối tượng nghiên cứu 9

2.1.2 Phạm vi nghiên cứu 9

2.2 Cơ sở lí thuyết và thực tiễn 9

2.2.1 Cơ sở lý thuyết 9

2.2.2 Thực tiễn 9

Chương 3: Cơ sở lí thuyết 10

3.1 Ngôn ngữ lập trình JavaScript 10

3.2 Thư viện ReactJS và React Native 11

3.3 Một số thuật ngữ trong ReactJS và React Native 12

3.3.1 Components 12

3.3.2 Props và State 12

3.3.3 JavaScript XML (JSX) 13

3.3.4 Virtual DOM 14

Chương 4: Xây dựng ứng dụng và triển khai cài đặt 15

4.1 Xây dựng môi trường làm việc 15

4.1.1 Cài đặt Reactjs: 15

4.1.2 Cài đặt React Native: 15

4.2 Thiết kế giao diện ứng dụng 16

4.2.1 Thiết kế và thực hiện ứng dụng trên web 16

4.2.2 Thiết kế và thực hiện ứng dụng trên di động 17

Chương 5: Kết luận và định hướng phát triển 18

5.1 Kết luận: 18

5.2 Định hướng phát triển: 19

DANH MỤC TÀI LIỆU THAM KHẢO: 20

DANH MỤC HÌNH Hình 1 Ví dụ về một component 13

Hình 2 Ví dụ Props và State 14

Hình 3 Ví dụ về JSX 15

Hình 4 Ví dụ về Virtual DOM 15

DANH MỤC CỤM TỪ VIẾT TẮT

STT Cụm từ Viết tắt

Chương 1: Tổng quan đề tài 1.1 Giới thiệu

Ngày nay công nghệ thông tin đã có những bước phát triển mạnh mẽ cả về chiều sâu và chiều rộng Máy tính điện tử giờ đây không còn là thứ quý hiếm mà đang ngày càng trở thành một công cụ làm việc và giải trí của con người Trong những năm gần đây, việc cập nhật các thông tin cũng như thực hiện các giao dịch thông qua Website

và ứng dụng ngày càng trở nên phổ biến Trong đó, một loại hình kinh doanh hiện nay khá phổ biến đó là buôn bán qua mạng Hình thức kinh doanh này mang lại rất nhiều lợi ích cho người tiêu dùng cũng như nhà cung cấp

Phần lớn khách hàng có nhu cầu mua hàng thì phải đến các siêu thị, các cửa hàng hay các trung tâm thương mại để lựa chọn những mặt hàng phù hợp với nhu cầu của mình Công việc này tiêu tốn khá nhiều thời gian và chi phí đi lại cho người tiêu dùng, đôi khi khách hàng còn bị mua phải mặt hàng kém chất lượng Tất cả những bất cập

đó sẽ được loại bỏ với sự ra đời của Hệ thống bán giày trực tuyến Khi khách hàng có nhu cầu mua hàng, dù ở nhà, ở trường, ở công sở hay bất cứ nơi nào có mạng internet, khách hàng chỉ cần vào những trang bán hàng qua mạng/ứng dụng là có thể tìm kiếm được những mặt hàng mà mình muốn mua

Ngoài những lợi ích mà internet mang lại cho người tiêu dùng, nó còn giúp cho nhà cung cấp phát triển rất nhiều trong việc mở rộng thị trường, giúp thương hiệu công ty được nhiều người biết đến, từ đó giảm được rất nhiều chi phí quảng cáo cho sản phẩm và rất thuận lợi trong việc quản lý sản phẩm, chăm sóc khách hàng theo đúng phương châm đặt ra

Trong giới hạn kiến thức cũng như theo yêu cầu của đồ án chuyên ngành thì

chúng em chọn đề tài “XÂY DỰNG HỆ THỐNG BÁN GIÀY ONLINE” nhằm giải quyết

bài toán yêu cầu đồ án đặt ra

1.2 Phương pháp, kết quả

1.2.1 Phương pháp triển khai thực hiện đề tài:

Đồ án sử dụng thư viện ReactJs để thiết kế Website và thư viện React Native để thiết kế app với ngôn ngữ JavaScript:

- JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua và là ngôn ngữ lập trình đem lại sự sinh động của website Nó khác với HTML (thường chuyên cho nội dung), CSS (thường chuyên dùng cho phong cách), và khác hẳn với PHP (chạy trên server chứ không chạy dưới máy client)

- ReactJS là một thư viện JavaScript được tạo bởi Facebook nhằm giải quyết các vấn đề performance và khả năng tương thích cho các ứng dụng web Tức là ReactJS là một thư viện front – end dành cho các ứng dụng web Ra đời vào năm 2011, nó đã mang đến một triển vọng mới về rendering pages, điều sẽ tạo ra sự linh động và trải nghiệm responsive Nếu như AngularJS là một Framework cho phép nhúng code JavaScript trong code HTML thông qua các attribute như ng-model, ng-repeat… thì với react là một library cho phép nhúng code HTML trong code JavaScript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS Tích hợp giữa JavaScript và HTML vào trong JSX làm cho các components dễ hiểu hơn

- React Native là một framework mã nguồn mở được phát triển bởi Facebook, cho phép bạn sử dụng JavaScript dùng để phát triển các ứng dụng cho Mobile (cụ thể là Android và IOS), được phát hành sau ReactJS 4 năm, sau khi ReactJS

đã tràn ngập khắp giới lập trình web React Native cũng giống như React vậy, chúng sử dụng các native components thay vì các web components

1.2.2 Kết quả đạt được:

Hoàn thành được một chương trình với chức năng:

- Xây dựng thành công hệ thống bán giày online

- Có được một kho dữ liệu đầy đủ hoặc tương đối đầy đủ về hình ảnh của các loại giày của cửa hàng

- Ứng dụng sẽ hoạt động ổn định trên cả nền tảng website và mobile

- Hoàn thành các chức năng dành cho người dùng và người quản lý

- Hiểu cơ bản về ngôn ngữ Reactjs và React Native

1.3 Cấu trúc đồ án

Quá trình xây dựng và hoàn thành đồ án tiến hành qua các quy trình sau:

- Nghiên cứu tổng quan

- Phân tích thiết kế hệ thống và triển khai

- Kết luận và hướng phát triển

Chương 2: Nghiên cứu tổng quan 2.1 Đối tượng và phạm vi nghiên cứu

2.1.1 Đối tượng nghiên cứu

Đối tượng nghiên cứu gồm:

 ReactJS

 React Native

 Website/App bán giày

 Các components…

2.1.2 Phạm vi nghiên cứu

Phạm vi nghiên cứu của đề tài “XÂY DỰNG HỆ THỐNG BÁN GIÀY ONLINE”:

 Tìm hiểu về công cụ phát triển

 Tìm hiểu, nghiên cứu về thư viện ReactJS, React Native và ngôn ngữ JS

 Tìm hiểu xây dựng hệ thống trên nền tảng website và mobile

2.2 Cơ sở lí thuyết và thực tiễn

2.2.1 Cơ sở lý thuyết

Nhằm xây dựng một ứng dụng phù hợp với vấn đề đặt ra, về mặt lý thuyết đề tài

sẽ tìm hiểu và nghiên cứu các lĩnh vực sau:

- Tìm hiểu ngôn ngữ JS

- Tìm hiểu về Components

- Tìm hiểu Virtual DOM và Styling

- Nghiên cứu về thư viện ReactJS và React Native

- Tìm hiểu Props và State

2.2.2 Thực tiễn

Từ cơ sở lí thuyết đề tài sẽ xây dựng hệ thống bán giày online với các tính năng:

- Website và App có được nhiều loại mặt hàng, đa dạng về mẫu mã, phong phú

về chủng loại giá cả

- Có tính thực tiễn, đáp ứng được nhu cầu của người tiêu dùng

- Người tiêu dùng có thể dễ dàng truy cập, thực hiện mua sắm, thanh toán thông qua Website/App

- Tổ chức CSDL một cách chặt chẽ

Chương 3: Cơ sở lí thuyết

Trong chương này sẽ tập trung nghiên cứu tìm hiểu về ngôn ngữ lập trình

JavaScript, các thuật ngữ liên quan cùng với sự hỗ trợ của thư viện ReactJS và React Native

3.1 Ngôn ngữ lập trình JavaScript

JavaScript là một ngôn ngữ lập trình website, được tích hợp và nhúng trong

HTML giúp website sống động hơn JavaScript cho phép kiểm soát các hành vi của trang web tốt hơn so với khi chỉ sử dụng mỗi HTML Vậy ứng dụng thực tiễn của JavaScript là gì? Các slideshow, pop-up quảng cáo và tính năng autocomplete của

Google là những ví dụ dễ thấy nhất cho bạn, chúng đều được viết bằng JavaScript.

JavaScript là ngôn ngữ lập trình được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome…thậm chí các trình duyệt trên thiết bị di động

JavaScript có thể được ứng dụng trong rất nhiều lĩnh vực:

 Lập trình website

 Xây dựng ứng dụng cho website máy chủ

 Ứng dụng di động, app, trò chơi

 …

Đặc điểm chung của JavaScript:

 Là ngôn ngữ lập trình bậc cao (high-level) giống như: C/C++, Java, Python, Ruby Nó rất gần với ngôn ngữ tự nhiên của con người Trong khi ngôn ngữ lập trình bậc thấp (low-level) như: Assembly sẽ gần với máy tính hơn

 Là ngôn ngữ lập trình động (dynamic programming language): như Python, Ruby, Perl Chúng được tối ưu hoá nhằm nâng cao hiệu suất cho lập trình viên Trong khi ngôn ngữ lập trình tĩnh (static programming language): như C/C++ lại được tối ưu hoá để nâng cao hiệu suất cho phần cứng máy tính

 Là ngôn ngữ lập trình kịch bản (scripting language): nghĩa là không cần biên dịch (compile) hay liên kết (linked) giống như ngôn ngữ lập trình biên dịch (C/C++, Java ) mà nó sẽ được dịch tại thời điểm chạy

 Là ngôn ngữ dựa trên đối tượng (object-based): tức nó gần giống như ngôn ngữ lập trình hướng đối tượng, ngoại trừ JavaScript không hỗ trợ tính kế thừa và đa hình

 Là ngôn ngữ dựa trên nguyên mẫu (prototype-based): là một kiểu của lập trình hướng đối tượng, trong đó các hành vi của đối tượng được sử dụng lại

3.2 Thư viện ReactJS và React Native

Thư viện ReactJS:

 ReactJS là một library javascript

 ReactJS sử dụng để xây dựng UI cho web theo đúng xu hướng Single Page Applications

 ReactJS được xây dựng bởi các kỹ sư của Facebook, đang được rất nhiều công

ty nổi tiếng sử dụng để phát triển các sản phẩm của họ như Yahoo, Airbnb và tất nhiên là trong nội tại Facebook, Instagram

 ReactJS phù hợp với các dự án lớn có tính mở rộng hơn là các dự án nhỏ

 ReactJS được viết bằng JavaScript XML, được gọi là JSX

 React dễ dàng được tích hợp với các khung JavaScript khác

Thư viện React Native:

 Là một framework mã nguồn mở được sáng tạo bởi Facebook

 Nó được sử dụng để phát triển ứng dụng di động Android, IOS, Web và UWP bằng cách cho phép các nhà phát triển sử dụng React cùng với môi trường ứng dụng gốc (native)

 Giúp tiết kiệm được thời gian và công sức nếu muốn xây dựng một ứng dụng

đa nền tảng (multi-platform)

 Tương tự như React cho Web, các ứng dụng React Native được viết bằng cách

sử dụng hỗn hợp JavaScripts và XML, gọi là JSX

3.3 Một số thuật ngữ trong ReactJS và React Native

3.3.1 Components

Components là một khái niệm cơ bản của cả React và React Native Chính việc chia nhỏ ứng dụng thành các components nhỏ tạo nên tính tái sử dụng cao và khả năng mở rộng của chúng Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác Mỗi component có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái Một react component đơn giản chỉ cần một method render Có rất nhiều method khả dụng khác, nhưng render là method chủ đạo

Hình 1 Ví dụ về một component 3.3.2 Props và State

Props

Hãy bắt đầu với Props, đó là từ viết tắt của Properties Các props giúp các components giao tiếp với nhau Props được truyền vào từ parent components Cũng

có trường hợp có thể có props default nếu như props không được truyền từ components cha Props là bất biến Nhưng thực tế trong khi code, chúng ta muốn làm thay đổi các giá trị Và vì thế, chúng ta cần State

State

Props không thể thay đổi, nhưng State thì được Thông thường các components không có State và được gọi là Stateless Nếu nó sử dụng state thì component đó được gọi là stateful

Một state được sử dụng để một component theo dõi sự thay đổi một thông tin nào đó Khi sử dụng hàm setState(), nó sẽ update là object state và sau đó re-render toàn bộ component

Hình 2 Ví dụ Props và State 3.3.3 JavaScript XML (JSX)

JSX là một loại cú pháp mở rộng dành cho ngôn ngữ JavaScript viết theo kiểu XML JSX cung cấp Syntatic Sugar để thay cho câu lệnh React.createElement() trong React

Mã lệnh viết bằng JSX sẽ được chuyển sang JavaScript để trình duyệt có thể hiểu được

Việc sử dụng nó rất hữu ích bởi:

 JSX giúp cho việc xây dựng các ứng dụng React một cách nhanh hơn, dễ tối

ưu trong việc compile code sang JavaScript

 JSX rất dễ xem các lỗi trong quá trình triển khai bởi hầu hết các lỗi sẽ được hiển thị trong quá trình compile, không như các đoạn mã HTML có thể thừa thiếu các thẻ div khiến giao diện bị hiển thị sai JSX lại hoàn toàn ngược lại, khi quên đóng div, nó lập tức sẽ hiển thị lỗi

 Cú pháp khá giống HTML nên dễ dàng cho việc viết chuyển đổi

Hình 3 Ví dụ về JSX 3.3.4 Virtual DOM

Virtual DOM không được phát minh ra bởi React, mà React sử dụng nó Virtual DOM là một bản sao chép trừu tượng của Real DOM (HTML DOM)

Hình 4 Ví dụ về Virtual DOM

Chương 4: Xây dựng ứng dụng và triển khai cài đặt

4.1 Xây dựng môi trường làm việc

4.1.1 Cài đặt Reactjs:

Đầu tiên phải cài đặt Nodejs để tạo môi trường làm việc cho React, việc cài đặt vô cùng đơn giản và nhanh chóng Việc đầu tiên cần làm là truy cập vào trang web

https://nodejs.org/en/download/, sau đó tải về phiên bản NodeJS phù hợp và tiến hành cài đặt trên máy tính Sau khi cài đặt thành công NodeJS ta sẽ tạo 1 folder để chứa project React, ta mở cmd trỏ vào folder chứa project React rồi gõ câu lệnh sau:

npm install -g create-react-app

Sau khi cài đặt môi trường ban đầu hoàn thành, tiếp đến, cần cài đặt project mới để có thể tiến hành tạo trang web bằng ReactJS bằng lệnh:

create-react-app my-app

4.1.2 Cài đặt React Native:

Đầu tiên cũng cần phải cài đặt Nodejs và cài đặt them Expo Cli để có thể tiện dụng hơn Chúng ta cài đặt Expo Cli bằng cách mở cmd lên rồi cài bằng câu lệnh:

npm install -g expo-cli

Để có thể tạo một project React Native mới, ví dụ ở đây là App shoe shop ta có thể dùng 1 trong 2 câu lệnh:

Expo init Appshoeshop

Như vậy, các bước cơ bản để cài đặt môi trường làm việc cho React Native đã hoàn thành Để có thể tiến hành chỉnh sửa ứng dụng theo ý muốn, chỉ cần mở tệp tin App.js và chỉnh sửa các dòng lệnh trong nó