Báo cáo đồ án tốt nghiệp: Xây dựng ứng dụng và website bán hàng

Báo cáo đồ án tốt nghiệp Xây dựng ứng dụng và website bán hàng được hoàn thành với mục tiêu nhằm xây dựng ứng dụng trên hệ điều hành Android và website, cho phép người dùng mua hàng online. Mời các bạn cùng tham khảo!

KHOA CÔNG NGHỆ THÔNG TIN

Giảng viên hướng dẫn: Ths Nguyễn Hải Dương

1 Thông tin về sinh viên:

Họ và tên sinh viên: Lê Anh Tuấn

Điện thoại liên lạc: 0328866625 Email: tuan223463@nuce.edu.vnLớp: 63IT3 Hệ đào tạo: Đại học Năm tốt nghiệp: 2023

Đồ án tốt nghiệp được thực hiện tại: Đại học Xây Dựng Hà Nội

Thời gian làm ĐATN: Từ ngày 19/09/2022 đến 31/12/2022

2 Mục đích nội dung của ĐATN:

- Xây dựng ứng dụng trên hệ điều hành Android và website, cho phép người dùng mua hàng online

3 Các nhiệm vụ cụ thể của ĐATN:

- Tìm hiểu các yêu cầu của một ứng dụng, website bán hàng ; đưa ra các tính năng cần thiết

- Tìm hiểu Android Jetpack

- Tìm hiểu Restful API trong laravel

- Phân tích yêu cầu

- Thực hiện yêu cầu

- Cài đặt hệ thống

4 Lời cam đoan của sinh viên:

Tôi – Lê Anh Tuấn – cam kết ĐATN là công trình nghiên cứu của bản thân tôi dưới

sự hướng dẫn của Ths.Nguyễn Hải Dương.

Các kết quả nêu trong ĐATN là trung thực, không phải là sao chép của bất kỳ công trình nào khác

Hà Nội, ngày 26 tháng 12 năm 2022

Tác giả ĐATN

Lê Anh Tuấn

5 Xác nhận của giảng viên hướng dẫn về mức độ hoàn thành ĐATN và cho phép bảo vệ:

Hà Nội, ngày…tháng…năm 202…

Giảng viên hướng dẫn

Ths Nguyễn Hải Dương

TÓM TẮT NỘI DUNG ĐỒ ÁN TỐT NGHIỆP

I Nội dung đồ án:

1. Tìm hiểu bài toán xây dựng ứng dụng, website bán hàng:

- Tìm hiểu xu hướng và lợi thế của việc mua hàng online thông qua ứng dụng

và website

- Lưu trữ các thông tin mua hàng trên server theo từng tài khoản người dùng

2. Tìm hiểu về bộ thư viện Jetpack trong Android

3. Tìm hiểu về Restful Api trong Laravel

4. Phân tích và thiết kế toàn bộ hệ thống ứng dụng, website bán hàng:

- Khảo sát, phân tích và xây dựng tài liệu đặc tả yêu cầu của toàn bộ hệ thống

II Nội dung các chương trình bày trong báo cáo:

- Chương 1: Đặt vấn đề và định hướng giải pháp

- Chương 2: Tìm hiểu hệ điều hành Android và bộ thư viện Jetpack

- Chương 3: Tìm hiểu về Restful Api trong Laravel

- Chương 4: Tìm hiểu về TypeScript với React

- Chương 5: Phân tích thiết kế và cài đặt hệ thống

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

III Từ khóa tìm kiếm:

1. Android Jetpack

2. TypeScript

3. API

ABSTRACT OF THESIS

I Content of thesis:

1. Learn the problem of building a sales website and application:

- Learn the trends and advantages of buying online through apps and websites

- Store purchase information on the server according to each user account

2. Learn about Jetpack libraries in Android

3. Learn about Restful Api in Laravel

4. Analyze and design the entire application system, sales website:

- Investigate, analyze and develop requirements specification documents of the entire system

II Content of the chapters presented in the report:

- Chapter 1: Problem setting and solution orientation

- Chapter 2: Learn the Android operating system and the Jetpack library

- Chapter 3: Learn about Laravel

- Chapter 4: Learn about TypeScript with React

- Chapter 5: System analysis and design

- Chapter 6: Conclusion and development direction

III Search keywords:

1. Android Jetpack

2. TypeScript

3. API

LỜI CẢM ƠN

Để đề tài đồ án tốt nghiệp này đạt kết quả tốt đẹp, em đã nhận được sự hỗ trợ, giúp đỡ rất nhiều của các tổ chức, cá nhân Với tình cảm sâu sắc, chân thành, cho phép em xin được bày tỏ lòng biết ơn đến tất cả các cá nhân và tổ chức đã tạo điều kiện giúp đỡ trong quá trình học tập và nghiên cứu đề tài.

Trước hết, em xin gửi tới các thầy cô của khoa Công nghệ thông tin nói riêng

và các thầy cô trường Đại học Xây Dựng Hà Nội nói chung lời cảm ơn sâu sắc nhất Với sự quan tâm, dạy dỗ, chỉ bảo tận tình, chu đáo của các thầy cô trong suốt 4 năm đại học, đến nay em đã có thể hoàn thành đồ án tốt nghiệp với đề tài:

“Xây dựng ứng dụng và website bán hàng”.

Đặc biệt, em xin gửi lời cảm ơn chân thành nhất tới thầy giáo – Ths Nguyễn Hải Dương đã tận tình hướng dẫn em thực hiện và hoàn thành tốt đồ án này Trong thời gian được làm việc với thầy, em đã được học hỏi thêm nhiều kiến thức và kinh nghiệm làm việc Những kinh nghiệm này chắc chắn sẽ có ích cho bản thân em sau khi ra trường

Sau cùng là lời cảm ơn tới các bạn cùng lớp 63IT đã gắn bó và giúp đỡ em trong suốt những năm học tại trường cũng như trong quá trình làm và hoàn thiện

đề tài đồ án tốt nghiệp này

Với điều kiện thời gian cũng như kinh nghiệm còn hạn chế của một sinh viên,

đồ án này không thể tránh khỏi những thiếu sót Em rất mong nhận được sự chỉ bảo, đóng góp ý kiến của các thầy cô để em có điều kiện bổ sung, nâng cao ý thức cũng như phát triển bản thân, phục vụ tốt cho công tác thực tế sau này.

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

Hà Nội, ngày 30 tháng 12 năm 2022

Sinh viên thực hiện đồ án

Lê Anh Tuấn

MỤC LỤC

DANH MỤC HÌNH ẢNH

CHƯƠNG 1 – ĐẶT VẤN ĐỀ VÀ ĐỊNH HƯỚNG GIẢI

PHÁP

I Giới thiệu bài toán

- Hàng ngày, ai trong mỗi chúng ta cũng có những nhu cầu thiết yếu như : ăn uống, mua sắm, giải trí, thư giãn, … và để đáp ứng những nhu cầu đó, chúng ta cần phải trực tiếp tới các trung tâm cung cấp những nhu cầu đó

- Thế giới ngày càng hiện đại cùng với đó là sự phát triển của internet ở khắp nơi trên thế giới, vậy nên việc có một chiếc điện thoại thông minh hay một chiếc laptop cá nhân là vô cùng cần thiết đối với mỗi người để phục vụ những nhu cầu cá nhân một cách đơn giản, tiện lợi và nhanh chóng

- Nắm bắt được điều đó Tech Shop ra đời để đem những sản phẩm điện thoại thông minh của các hãng nổi tiếng thế giới như iphone, samsung, nokia, dell, asus, hp, mac….tiếp cận tới người dùng

- Ngày nay, việc mua sắm online dường như đã trở thành thói quen và sở thích của mỗi người

vì sự tiện lợi của nó Vậy nên việc bán hàng qua mạng chính là xu thế tất yếu và là lựa chọn bắt buộc với cá nhân hay doanh nghiệp Đó là lí do app và website của Tech Shop ra đời Mục tiêu của việc xây dựng ứng dụng và trang web này là giúp cho khách hàng có thể dễ dàng mua sản phẩm từ xa thông qua internet Ở bất kì đâu, chỉ cần có internet là khách hàng đã có thể chọn cho mình sản phẩm ưng ý phù hợp với nhu cầu sử dụng của mình Với hệ thống tìm kiếm

dễ dàng, giao diện thân thiện với người dùng, thông tin sản phẩm đầy đủ, chính xác Khách hàng ghé qua có thể thoải mái xem sản phẩm, khi mua hàng thì cần phải có tài khoản để thực hiện việc thanh toán

II Mục tiêu đề tài

Mục tiêu đề tài nhằm xây dựng ứng dụng và website bán hàng đơn giản Đây là hệ thống cho phép trợ những người quan tâm sản phẩm công nghệ có thể tham khảo và mua sắm các thiết bị công nghệ như máy tính, điện thoại Ứng dụng chạy trên nền tảng Android với việc cài đặt hoàn toàn dễ dàng Người dùng có thể sử dụng các chức năng ngay sau khi cài đặt

mà không cần yêu cầu gì thêm Ứng dụng và website với giao diện đẹp và dễ hiểu giúp khách hàng có thể dễ dàng sử dụng

III Các vấn đề cần giải quyết

1 Nội dung đồ án

Sau khi nắm được xu hướng mua sắm online cũng như việc tìm hiểu bài toán, ứng dụng và website tôi muốn xây dựng gồm các nội dung chính sau:

- Người dùng có thể đăng ký tài khoản để được mua sắm và hưởng các ưu đãi , thông tin

sẽ được lưu vào quản lý người dùng, và đăng nhập khi cần sử dụng tải khoản

- Có thể tìm kiểm các món đồ mình quan tâm

- Xem chi tiết các sản phẩm đang quan tâm

- Thêm sản phẩm vào giỏ hàng , có thể thêm số lượng và lưu lại ở giỏ hàng sản phẩm

- Quản lý thông tin các đơn hàng của người dùng

- Ở trang quản lý sẽ quản lý sản phẩm, xử lý các đơn hàng đã được gửi về từ hệ thống

2 Công nghệ sử dụng

a. Phần mềm hỗ trợ phân tích thiết kế hệ thống:

- Microsoft Word : Viết tài liệu đặc tả hệ thống

- Visual Paradigm : Vẽ các biểu đồ Use case, Sequence, Class và Activity

b. Công cụ xây dựng hệ thống:

- Android Studio: Viết source code và chạy ứng dụng

- Php Storm : Viết source code , chạy website và chạy api

CHƯƠNG 2 – TÌM HIỂU VỀ HỆ ĐIỀU HÀNH

ANDROID VÀ BỘ THƯ VIỆN JETPACK

I Tổng quan về hệ điều hành Android

1 Hệ điều hành

Hệ điều hành là một phần mềm dùng để điều hành, quản lý các thiết bị phần cứng và các tài nguyên phần mềm Hệ điều hành đóng vai trò trung gian trong việc giao tiếp giữa người sử dụng và phần cứng của máy, cung cấp một môi trường cho phép người sử dụng phát triển và thực hiện các ứng dụng của họ một cách dễ dàng

2 Hệ điều hành Android

Hình Android là gì?

Hệ điều hành Android được khai sinh bởi Android Inc, một công ty phần mềm tại Thung lũng Silicon trước khi Google mua lại nó vào năm 2005 Các nhà phân tích và đầu tư điện tử đã đưa ra nhiều hoài nghi về ý định gia nhập vào thị trường điện thoại của Google sau thương vụ mua bán này Bất chấp những nghi vấn đó, vào năm 2007, Google công bố triển

khai thiết bị Android đầu tiên trên thị trường và ra chính thức ra mắt sản phẩm vào năm 2008.

Kể từ đó, Android đã mở đường cho các nhà phát triển phần mềm và ứng dụng sử dụng

công nghệ Android để phát triển các ứng dụng di động, được phân phối qua các cửa hàng ứng

dụng như Google Play Do được phát triển dưới trướng Google, người dùng Android có cơ hội kết nối các thiết bị di động của họ với các sản phẩm khác của Google như bộ nhớ đám mây, các nền tảng email và các dịch vụ video

Là một hệ điều hành với mã nguồn mở, Android tạo điều kiện cho các nhà phát triển ứng dụng thiết bị, mạng di động và các lập trình viên được thỏa sức điều chỉnh và phân phối Android một cách tự do, không ràng buộc Đây chính là một trong những lý do giúp hệ điều hành này chiếm lĩnh thị phần hệ điều hành điện thoại di động trên toàn thế giới

3 Kiến trúc của hệ điều hành Android

Hình Kiến trúc của hệ điều hành Android

Linux kernel: Đây là nhân nền tảng mà hệ điều hành Android dựa vào nó để phát

triển Đâu là lớp chứa tất cả các thiết bị giao tiếp ở mức thấp dùng để điều khiển các phần cứng khác trên thiết bị Android

Libraries: Chứa tất cả các mã - cái mà cung cấp cấp những tính năng chính của hệ

điều hành Android, đôi với ví dụ này thì SQLite là thư viện cung cấp việc hộ trợ làm việc với database dùng để chứa dữ liệu Hoặc Webkit là thư viện cung cấp những tính năng cho trình duyệt Web

Android runtime: Trong Android Runtime, có các thư viện lõi và DVM (Máy ảo

Dalvik) chịu trách nhiệm chạy ứng dụng Android DVM giống như JVM nhưng nó được tối

ưu hóa cho các thiết bị di động Nó tiêu thụ ít bộ nhớ hơn và cung cấp hiệu suất nhanh

Android framework: Là phần thể hiện các khả năng khác nhau của Android(kết nối,

thông báo, truy xuất dữ liệu) cho nhà phát triển ứng dụng, chúng có thể được tạo ra để sử dụng trong các ứng dụng của họ

Applications: Tầng ứng dụng là tầng bạn có thể tìm thấy các ứng dụng thiết bị

Android như Contact, trình duyệt…Và mọi ứng dụng bạn viết đều nằm trên tầng này

4 Giao diện Android

Khi người dùng khởi động thiết bị, hệ điều hành Android sẽ hiển thị một màn hình chính bao gồm các biểu tượng ứng dụng (app) và các tiện ích (Widget) Các tiện ích là các màn hình thông tin tự cập nhập nội dung như thời tiết hoặc tin tức Màn hình chính có thể khác nhau dựa trên sản xuất của mỗi thiết bị

Người dùng cũng có thể thay đổi giao diện, chủ đề mặc định trên màn hình chính thông qua các ứng dụng của bên thứ ba trên Google Play Thanh trạng thái phía trên màn hình chính hiển thị các thông tin về thiết bị và khả năng kết nối của nó, chẳng hạn như mạng Wifi, Bluetooth, đèn pin, Người dùng có thể kéo thanh trạng thái xuống bằng một cú vuốt ngón tay để xem màn hình thông báo

5 Ứng dụng Android

Do có thêm ứng dụng từ các bên thứ ba, kho ứng dụng của Android ngày càng trở nên phong phú và tiện lợi cho người dùng Với 2,9 triệu ứng dụng trên hệ điều hành này, người dùng có thể thoải mái lựa chọn các ứng dụng phù hợp với nhu cầu sử dụng của mình

Hiện nay, người dùng có thể lựa chọn giữa các ứng dụng trả phí và miễn phí Tuy nhiên, số lượng các ứng dụng trả phí trên hệ điều hành Android không nhiều

6 Ưu, nhược điểm của hệ điều hành Android

Về ưu điểm, người dùng hệ điều hành Android có khả năng tùy chỉnh và thay thế tất cả mọi thứ mà không bị giới hạn bởi Google Với các nhà phát triển ứng dụng và các lập trình viên, họ có thể dễ dàng điều chỉnh và phân phối ứng dụng trên Android Chi phí hiệu quả, giá thành phải chăng, có thể dễ dàng truy cập và thân thiện với người dùng cũng là những điểm sáng của hệ điều hành này.

Về nhược điểm, hệ điều hành với mã nguồn mở là “con dao hai lưỡi” cho người sử dụng Android, các ứng dụng giả mạo, bảo mật thấp, dễ bị lấy cắp thông tin là những nguy cơ mà người dùng phải đối mặt khi sử dụng Android Đồng thời, khả năng cập nhập hệ điều hành chậm chạp, do vậy không phải thiết bị nào của Android cũng có thể sử dụng hoặc nâng cấp hệ điều hành mới nhất Nếu

người dùng muốn trải nghiệm hệ điều hành Android mới nhất, cách duy nhất họ

có thể làm là đổi qua các thiết bị khác.

II Bộ thư viện Jetpack

Jetpack là một tập hợp các software components Android giúp bạn phát triển các ứng dụng Android tuyệt vời dễ dàng hơn Các thành phần này giúp bạn thực hiện theo các phương pháp hay nhất, giải phóng bạn khỏi viết mã soạn sẵn và đơn giản hóa các tác vụ phức tạp, vì vậy bạn có thể tập trung vào mã mà bạn quan tâm

Jetpack bao gồm các thư viện gói androidx *, Không được gộp vào các API platforms Điều này có nghĩa là nó cung cấp khả năng tương thích ngược và được cập nhật thường xuyên hơn nền tảng Android, đảm bảo bạn luôn có quyền truy cập vào các phiên bản mới nhất và tuyệt vời nhất của các thành phần Jetpack

Có thể phân loại Android Jetpack thành 4 thành phần chính:

-Foumdation components (Ví dụ: ktx, appcompat, multidex, test)

-Architecture components (Ví dụ: Data Binding, Lifecycles, ViewModel, Livedata, Room, Paging, Navigation, WorkManager)

-Behavior components (Ví dụ: Download manager, Media, Notifications, Permissions,

Sharing, Slices)

-UI components (Ví dụ: Animations, Auto, Emoji, Fragment, Layout, Palette, TV, Wear OS )

1 Một số components trong Jetpack

1.1 Data Binding

Data Binding là một thư viện được tích hợp trong gói Android Jetpack

Nó cho phép liên kết giữa dữ liệu logic với các UI Element ( ví dụ như : TextView, EditText, ImageView…)

Khác với việc sử dụng findByViewId:

Data binding tạo ra đối tượng ràng buộc tại thời điểm compile cho tất cả các view trong layout

findViewByld thì sẽ duyệt qua các view trong thời điểm runtime khi chúng được gọi

Các view được truy cập thông qua đối tượng Binding sẽ hiệu quả hơn so với việc sử dụng findViewByld

Với các layout có cấu trúc phức tạp, việc sử dụng Databinding có thể tăng hiệu suất một cách đáng kể.

Hình 3 Ứng dụng của DataBinding

1.2 ViewModel

ViewModel là một class có trách nhiệm chuẩn bị và quản lý dữ liệu cho một UI component (có thể là Activity hoặc Fragment) Nó cũng cung cấp cách để dễ dàng giao tiếp giữa activity và fragment hoặc giữa các fragment với nhau

ViewModel luôn được tạo trong cùng một phạm vi (một fragment hoặc một activity) và sẽ được giữ lại cho đến khi phạm vi đó còn "sống" Hay nói cách khác là ViewModel sẽ không bị destroyed khi activity hoặc fragment của nó bị destroyed bởi một configuration change (ví dụ như việc xoay màn hình) Instance mới của các owner này sẽ chỉ kết nối lại với ViewModel hiện có của nó

Hình 4 Mối liên hệ giữa View và ViewModel

Mục đích chính của ViewModel đó là lấy và giữ thông tin cần thiết cho activity và fragment Bên cạnh đó, activity và fragment có thể quan sát được sự thay đổi trong ViewModel thông qua việc sử dụng LiveData hoặc DataBinding

ViewModel chỉ có trách nhiệm quản lý data cho UI cho nên nó không bao giờ truy cập vào view hierarchy hoặc giữ tham chiếu đến activity hoặc fragment

Chúng ta sẽ bắt đầu với việc tìm hiểu về lợi ích của việc sử dụng ViewModel

*Lợi ích

1. ViewModel tồn tại khi quay màn hình hoặc các configuration change khác

2. ViewModel vẫn running trong khi activity đang trong back stack

3. ViewModel là lifecycle-aware

4. ViewModel với sự hỗ trợ của LiveData có thể phản ứng lại sự thay đổi của UI Mỗi khi data thay đổi, UI sẽ được cập nhật dựa trên sự quan sát LiveData với data hiện tại trong ViewModel

5. ViewModel dễ dàng hiểu và dễ testing.

1.3 LiveData

LiveData là một lớp lưu giữ dữ liệu có thể quan sát Không như một lớp có thể quan sát thông thường, LiveData có tính năng nhận biết được vòng đời, nghĩa là tính năng này tuân theo vòng đời của các thành phần khác trong ứng dụng, chẳng hạn như các hoạt động, mảnh hoặc dịch

vụ Khả năng nhận biết này đảm bảo rằng LiveData chỉ cập nhật những trình quan sát thành phần của ứng dụng ở trạng thái vòng đời đang hoạt động

Hình 5 Ứng dụng của LiveData trong mô hình MVVM

LiveData có thể được sửa đổi bởi ViewModels (hoặc bất cứ điều gì bạn muốn sử dụng để sửa đổi liveData)

Sau khi cập nhật, nó sẽ thông báo cho tất cả những người quan sát nó (activities, fragment, service v.v.) Tuy nhiên, không giống như bất kỳ cách tiếp cận nào khác (ví dụ: Rxjava), nó không thông báo mù quáng cho tất cả bọn chúng, thay vào đó nó kiểm tra 'trạng thái sống' của bọn chúng trước

Nếu người quan sát đang hoạt động, thì nó có thể được thông báo về sự thay đổi dữ liệu trong LiveData Tuy nhiên, nếu Người quan sát bị Tạm dừng hoặc Bị hủy, thì nó sẽ không được thông báo

Điều này thật tuyệt, vì chúng ta không còn phải lo lắng về việc hủy đăng ký nó trên onPause hoặc onDestroy

Ngoài ra, một khi Observer được nối lại, nó sẽ được thông báo ngay lập tức về dữ liệu mới nhất

từ LiveData

1.4 Paging

Thư viện Paging giúp bạn tải và hiển thị các trang dữ liệu của một tập dữ liệu lớn hơn từ bộ nhớ cục bộ hoặc qua mạng Phương pháp này cho phép ứng dụng sử dụng cả băng thông mạng

và tài nguyên hệ thống một cách hiệu quả hơn Các thành phần của thư viện Paging được thiết

kế để phù hợp với cấu trúc ứng dụng Android được đề xuất, tích hợp mượt mà với các thành phần khác của Jetpack, và cung cấp khả năng hỗ trợ Kotlin hàng đầu

*Lợi ích của việc sử dụng thư viện Paging

Thư viện Paging bao gồm các tính năng sau:

Chức năng lưu dữ liệu được phân trang vào bộ nhớ đệm trong bộ nhớ Chức năng này đảm bảo rằng ứng dụng sử dụng tài nguyên hệ thống một cách hiệu quả trong khi làm việc với dữ liệu được phân trang

Chức năng loại bỏ yêu cầu trùng lặp tích hợp sẵn, đảm bảo rằng ứng dụng sử dụng băng thông mạng và tài nguyên hệ thống một cách hiệu quả

Các bộ chuyển đổi RecyclerView có thể định cấu hình sẽ tự động yêu cầu dữ liệu khi người dùng cuộn đến cuối dữ liệu đã tải

Khả năng hỗ trợ hàng đầu cho các coroutine và Flow Kotlin, cũng như LiveData và RxJava

Tính năng hỗ trợ được tích hợp sẵn để xử lý lỗi, bao gồm khả năng làm mới và thử lại

2 Ưu điểm của Android Jetpack

2.1 Tính “mở”

Để hiểu kỹ hơn và trả lời câu hỏi Android Jetpack là gì? thì hãy xem xét: Các Android Jetpack components được cung cấp dưới dạng các thư viện “mở”, không phải là một phần của nền tảng Android cơ bản Điều này có nghĩa là bạn có thể dễ dàng áp dụng từng component

Mỗi khi Android Jetpack có thêm một tính năng mới, bạn có thể dễ dàng thêm nó vào trong ứng dụng của mình, triển khai ứng dụng trên Play Store và cung cấp cho người dùng tất

cả các tính năng mới chỉ trong một ngày Các thư viện mở sẽ được chuyển vào androidx.* namespace mới

2.2 Tính tương thích ngược

Ngoài ra, ứng dụng của bạn có thể chạy mượt mà trên nhiều phiên bản của Android mà không lo lắng về tính tương thích Tại sao ư?

Vì đơn giản là Android Jetpack được xây dựng dựa trên Support Library

Mà các thư viện này được các nhà phát triển Android tạo ra để cung cấp các chức năng độc lập với các phiên Android, và có tính tương thích ngược rất tốt.

Ví dụ như: Ứng dụng của bạn sử dụng Fragment mà lại muốn hỗ trợ

Android 3.0 trở xuống? Chính là lúc bạn nghĩ tới Support Library đấy.

2.3 Dễ dàng testing

Hơn nữa, Android Jetpack còn có thiết kế rất tốt cho việc testing Nó tách biệt giữa phần chức năng và phần test Điều này giúp bạn dễ dàng kiểm tra, nâng cao chất lượng ứng dụng

2.4 Các component độc lập với nhau

Mặc dù các components của Android Jetpack được xây dựng để hoạt động cùng nhau

Ví dụ: lifecycle awareness và live data

Tuy nhiên, bạn không phải bắt buộc phải sử dụng tất cả chúng Bạn có thể tích hợp từng phần của Android Jetpack để giải quyết một vấn đề của bạn Điều này giúp cho ứng dụng trở nên nhẹ nhàng

CHƯƠNG 3-TÌM HIỂU VỀ RESTFUL API TRONG

LARAVEL

Restful API là một chuẩn phổ biến ngày nay dùng để thiết kế giao tiếp cho ứng dụng web nhằm trao đổi và quản lý các resource từ xa

RESTful hoạt động dựa trên http với hoạt động request từ xa đến server để thực hiện lấy, thêm,xóa , sửa dữ liệu.

Với Restful, dạng dữ liệu trao đổi giữa client/server là JSON hoặc XML, nhưng JSON thường được dùng hơn

Hình 6 Sơ đồ mô tả hoạt động của Rest Api

I Các method trong http

Giao thức http hỗ trợ tạo request đến server với nhiều method khác nhau: GET, POST, PUT, PATCH, DELETE… Restful dùng các method này để diễn tả các hành động xem, thêm, sửa, xóa dữ liệu (tài nguyên) trên server Cụ thể như saiL

Method GET: được dùng để diễn tả hành động muốn xem chi tiết 1 tài nguyên hoặc lấy danh sách tài nguyên trên server

Method POST: được dùng để diễn tả hành động muốn thêm 1 tài nguyên mới trên server.Method PUT: được dùng để diễn tả hành động muốn cập nhật 1 tài nguyên đang có trên server.Method DELETE: được dùng để diễn tả hành động muốn xóa 1 tài nguyên đang có trên server

Hình 7.Sơ đồ mô tả gửi Request và nhận Response qua http method

II URL Trong Restful API

Restful API quản lý tài nguyên thông qua các URL (địa chỉ web) Bạn xem ví dụ sau để rõ hơn:

Lấy resource từ server, URL sử dụng như sau:

GET http://n19hieu.com/api/products => trả về danh sách các product

GET http://n19hieu.com/products/1 => trả về product có id là 1

Khi cần tạo mới một resource trên server, sử dụng URL như sau:

Ở trên, products là tài nguyên cần quản lý còn 1 là id của tài nguyên

III Các status code http cần biết

Khi request đến một API server, Bạn sẽ nhận được status code trả về, giá trị của status cho biết kết quả của request Sau đây là một số giá trị status thường gặp:

200 OK – thành công, dùng cho các phương thức GET, PUT, PATCH, DELETE

201 Created – Trả về khi resouce được tạo thành công

204 No Content – Trả về khi resource xoá thành công

304 Not Modified – Client có thể sử dụng dữ liệu cache

400 Bad Request – Request không hợp lệ

401 Unauthorized – Request cần phải có auth.

403 Forbidden – bị từ chối không cho phép

404 Not Found – Không tìm thấy resource từ URI

405 Method Not Allowed – Phương thức bị cấm với user hiện tại

429 Too Many Requests – Request bị từ chối do bị giới hạn

CHƯƠNG 4-TÌM HIỂU VỀ TYPESCRIPT TRONG

REACT

I Tổng quan về TypeScript

TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi là một phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu tĩnh và lớp hướng đối tượng mà điều này không có ở Javascript TypeScript có thể sử dụng để phát triển các ứng dụng chạy ở client-side (Angular2) và server-side (NodeJS)

TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules Không dừng lại ở đó nếu như ECMAScript 2017 ra đời thì mình tin chắc rằng

TypeScript cũng sẽ nâng cấp phiên bản của mình lên để sử dụng mọi kỹ thuật mới nhất từ ECMAScript Thực ra TypeScript không phải ra đời đầu tiên mà trước đây cũng có một số thư viện như CoffeScript và Dart được phát triển bởi Google, tuy nhiên điểm yếu là hai thư viện này sư dụng cú pháp mới hoàn toàn, điều này khác hoàn toàn với TypeScript, vì vậy tuy ra đời sau nhưng TypeScript vẫn đang nhận được sự đón nhận từ các lập trình viên

II Ưu nhược điểm của TypeScript

1 Ưu điểm:

Là mã nguồn mở: TypeScript là dự án mã nguồn mở nên bạn có thể sử dụng hoàn miễn phí, ngoài ra còn được cộng đồng hỗ trợ

Dễ dàng phát triển dự án lớn: TypeScript được thiết kế để phát triển các dự án lớn

Hỗ trợ các tính năng mới nhất của JavaScript: Bản chất của TypeScript là biên dịch tạo

ra các đoạn mã JavaScript, nên nó đảm bảo sử dụng đầy đủ các kỹ thuật, tính năng mới nhất của JavaScript

Hỗ trợ OOP mạnh: Về cơ bản JavaScript có hỗ trợ hướng đối tượng, nhưng khi áp dụng thì rất khó khăn do cách triển khai code không hề đơn giản như các ngôn ngữ bậc cao

Cách tổ chức code rõ ràng: Code TypeScript trông gọn gàng và dễ nhìn hơn do được

hỗ trợ các kỹ thuật mới nhất và lập trình hướng đối tượng

Nhiều Framework lựa chọn: Nhiều JavaScript Framework đã dần khuyến khích sử dụng TypeScript để phát triển, ví dụ như AngularJS 2.0 và Ionic 2.0

Thêm bước bổ sung – biên dịch: TypeScript không thể chạy trực tiếp trong chương trình, mà phải được biên dịch qua JavaScript

Không phải ngôn ngữ gõ tĩnh thực sự: Mặc dù phải xác định kiểu cho tất cả dữ liệu khi khai báo, nhưng TypeScript không phải ngôn ngữ gõ tĩnh thực sự bởi nó không chạy trực tiếp trong chương trình, khi được biên dịch sang JavaScript sẽ luôn có nguy cơ chuyển đổi thành một kiểu lạ

III Cài đặt

TypeScript không thể chạy trực tiếp ngay trong trình duyệt mà chúng được biên dịch qua JavaScript bởi trình biên dịch thông qua npm Vì vậy để làm việc với TypeScript, bạn phải cài đặt node.js và npm

Chạy lệnh sau để cài đặt:

npm install -g typescript

Để tạo file js từ file ts:

tsc fileName.ts

CHƯƠNG 5- PHÂN TÍCH THIẾT KẾ VÀ CÀI ĐẶT HỆ

THỐNG

I Phân tích chức năng hệ thống

1 Biểu đồ Use Case tổng quát

Hình 8 Biểu đồ Use case tổng quát

2 Biểu đồ Use Case chi tiết

2.1 Xem danh sách sản phẩm nổi bật

2.1.1 Biểu đồ

Hình 9 Biểu đồ Use case cho chức năng Xem sản phẩm nổi bật

2.1.2 Đặc tả

Use Case ID UC-1.1

Use Case Name Xem danh sách sản phẩm nổi bật

Description Người dùng muốn xem sản phẩm nổi bật

Trigger Người dùng click chức năng xem sản phẩm bán chạy

Pre-Condition Thiết bị người dùng được kết nối Internet

Post-Condition Người dùng có thể chọn sản phẩm nổi bật theo giá tiền hoặc

bán chạyBasic Flow 1.Người dùng truy cập vào website

2.Chọn phương thức xem sản phẩm nổi bật3.Người dùng chọn sản phẩm đang sale hoặc sản phẩm bán chạy

4.Hệ thống sẽ hiển thị các sản phẩm người dùng đang quan tâm

Use Case ID UC-1.2

Use Case Name Tìm kiếm sản phẩm

Description Người dùng muốn tìm kiếm sản phẩm

Trigger Người dùng click chức năng tìm kiếm sản phẩm

Pre-Condition Thiết bị người dùng được kết nối Internet

Post-Condition Hệ thống cho phép người dùng tìm kiếm sản phẩm theo yêu

cầuBasic Flow 1.Người dùng truy cập vào website

2.Chọn phương thức tìm kiếm sản phẩm3.Chọn phương thức tìm kiếm theo yêu cầu 4.Hệ thống xuất hiện sản phẩm cần tìm kiếmAlternative Flow

Exception Flow Sản phẩm không tồn tại

Kiểm tra lại kết nối Internet

2.3 Xem chi tiết sản phẩm

2.3.1 Biểu đồ

Hình 11 Biểu đồ Use case cho chức năng Xem chi tiết sản phẩm

2.3.2 Đặc tả

Use Case ID UC-1.3

Use Case Name Xem chi tiết sản phẩm

Description Người dùng muốn xem chi tiết sản phẩm

Trigger Người dùng click vào sản phẩm

Pre-Condition Thiết bị người dùng được kết nối Internet

Post-Condition Hệ thống hiện ra chi tiết sản phẩm người dùng đang xem

Basic Flow 1.Người dùng truy cập vào website

2.Chọn sản phẩm quan tâm3.Hệ thống hiện ra chi tiết sản phẩm Alternative Flow

Exception Flow Kiểm tra kết nối Internet

2.4 Đăng ký

2.4.1 Biểu đồ

Hình 12 Biểu đồ Use case cho chức năng Đăng ký

2.4.2 Đặc tả

Use Case ID UC-1.4

Use Case Name Đăng Ký

Description Người dùng muốn tạo tài khoản mới

Pre-Condition Thiết bị người dùng được kết nối Internet

Tên tài khoản chưa tồn tạiNhập đầy đủ thông tinPost-Condition Người dùng đăng ký tài khoản thành công

Hệ thống ghi nhận tạo tài khoản mới thành côngBasic Flow 1.Người dùng truy cập vào website

2.Chọn phương thức đăng ký3.Người dùng nhập tên tài khoản, mật khẩu và thông tin cá nhân

4.Nhấn nút đăng ký5.Hệ thống xác thực thông tin tài khoản 6.Hệ thống ghi nhận đăng ký thành côngAlternative Flow

Exception Flow 5a Hệ thống xác thực thông tin tài khoản không hợp lệ và

hiển thị thông báo5a1 Người dùng chọn lệnh quay lại Use Case dừng lại5a2 Người dùng nhập lại thông tin Quay lại bước 5a

2.5 Đăng nhập, Đăng xuất

2.5.1 Biểu đồ

Hình 13 Biểu đồ Use case cho chức năng Đăng nhập

2.5.2 Đặc tả

Đăng nhập

Use Case ID UC-1.5

Use Case Name Đăng Nhập

Description Người dùng muốn đăng nhập vào hệ thống

Pre-Condition Thiết bị người dùng được kết nối Internet

Tài khoản đã được tạoPost-Condition Người dùng đăng nhập thành công

Hệ thống ghi nhận đăng nhập thành công thành côngBasic Flow 1.Người dùng truy cập vào website

2.Chọn phương thức đăng nhập3.Người dùng nhập tên tài khoản, mật khẩu 4.Nhấn nút đăng nhập

5.Hệ thống xác thực thông tin tài khoản 6.Hệ thống ghi nhận đăng nhập thành côngAlternative Flow

Exception Flow 5a Hệ thống xác thực thông tin tài khoản không hợp lệ và

hiển thị thông báo5a1 Người dùng chọn lệnh quay lại Use Case dừng lại5a2 Người dùng nhập lại thông tin Quay lại bước 5a

5a3 Người dùng chọn quên mật khẩu Tiếp tục UC-1.3

Đăng xuất

Hình 14 Biểu đồ Use case cho chức năng Đăng xuất

Đặc tả

Use Case ID UC-1.6

Use Case Name Quên mật khẩu

Description Người dùng quên mật khẩu muốn tạo mật khẩu mới

Pre-Condition Thiết bị người dùng được kết nối Internet

Tài khoản đã được tạo

Có gmail dùng để tạo tài khoảnPost-Condition Hiển thị trang tạo lại mật khẩu

Hệ thống xác nhận tạo lại mật khẩu thành côngBasic Flow 1.Người dùng truy cập vào website

2.Chọn phương thức đăng nhập3.Chọn chức năng quên mật khẩu4.Nhập tên tài khoản

5.Hệ thống xác thực thông tin tài khoản 6.Hệ thống gửi mail chứa đường dẫn tạo lại mật khẩu tới gmail đã được sử dụng để đăng ký tài khoản

7.Click vào đường dẫn trong mail8.Nhập lại mật khẩu muốn tạo mới

9 Hệ thống xác nhận việc tạo mới mật khẩu thành côngAlternative Flow

Exception Flow 5a Hệ thống xác thực thông tin tài khoản không tồn tại

5a1 Chọn Hủy Use Case dừng lại

2.6 Quản lý hồ sơ cá nhân

2.6.1 Biểu đồ

Hình 15 Biểu đồ Use case cho chức năng Quản lý hồ sơ cá nhân

2.6.2 Đặc tả

Use Case ID UC-1.7

Use Case Name Quản lý hồ sơ cá nhân

Description Người dùng muốn xem hoặc chỉnh sửa thông tin cá nhân

Pre-Condition Thiết bị người dùng được kết nối Internet

Tài khoản của người dùng đã được tạo sẵn Post-Condition Người dùng xem được thông tin cá nhân

Hệ thống ghi nhận hồ sơ cá nhân được chỉnh sửa thành công

Basic Flow 1.Người dùng truy cập vào website

2.Người dùng đăng nhập vào hệ thống3.Người dùng click vào hồ sơ cá nhân4.Hệ thống sẽ hiện thị lên thông tin cá nhân của người dùng5.Người dùng click vào chỉnh sửa thông tin các nhân6.Nhập lại thông tin cần chỉnh sửa và bấm Lưu7.Hệ thống lưu lại thông tin các nhân mới của người dùngAlternative Flow

Exception Flow Mất kết nối Internet

2.7 Quản lý giỏ hàng

2.7.1 Biểu đồ

Hình 16 Biểu đồ Use case cho chức năng Quản lý giỏ hàng

2.7.2 Đặc tả

Use Case ID UC-1.8

Use Case Name Quản lý giỏ hàng

Description Quản lý giỏ hàng của người dùng

Trigger Người dùng click vào giỏ hàng

Pre-Condition Thiết bị người dùng được kết nối Internet

Người dùng đã có tài khoản trên hệ thốngPost-Condition Hệ thống hiển thị giỏ hàng của người dùng

Basic Flow 1.Người dùng truy cập vào website

2.Đăng nhập vào hệ thống3.Người dùng click vào giỏ hàng4.Hệ thống trả về giỏ hàng với những sản phẩm của người dùng đã chọn

Alternative Flow

Exception Flow Kiểm tra kết nối Internet

2.8 Quản lý đơn hàng

2.8.1 Biểu đồ

Hình 17 Biểu đồ Use case cho chức năng Quản lý đơn hàng

2.8.2 Đặc tả

Use Case ID UC-1.9

Use Case Name Quản lý đơn hàng

Description Quản lý đơn hàng của người dùng

Trigger Người dùng click vào đơn hàng

Pre-Condition Thiết bị người dùng được kết nối Internet

Người dùng đã có tài khoản trên hệ thốngPost-Condition Hệ thống hiển thị thông tin đơn hàng và khách hàng có thể

đánh giá đơn hàng khi nhận hàngBasic Flow 1.Người dùng truy cập vào website

2.Đăng nhập vào hệ thống3.Người dùng click vào đơn hàng4.Hệ thống trả về những đơn hàng đã được thanh toán và chi tiết đơn hàng

Alternative Flow

Exception Flow Kiểm tra kết nối Internet

2.9 Quản lý đơn hàng (Bên quản lý)

2.9.1 Biểu đồ

Hình 18 Biểu đồ Use case cho chức năng Quản lý đơn hàng (admin)

2.9.2 Đặc tả

Use Case ID UC-1.10

Use Case Name Quản lý đơn đặt hàng (Quản lý)

Description Người dùng muốn xác nhận hoặc hủy đơn hàng

Pre-Condition Thiết bị người dùng được kết nối Internet

Tài khoản của người dùng đã được tạo sẵn Tải khoản của người dùng phải là tải quản quản lýPost-Condition Đơn hàng của khách hàng được xác nhận hoặc hủy

Basic Flow 1.Người dùng truy cập vào website

2.Người dùng đăng nhập vào hệ thống3.Người dùng click vào quản lý đơn hàng4.Hệ thống sẽ hiện thị lên thông tin đơn hàng5.Người dùng click vào xác nhận hoặc hủy đơn đặt hàng của khách

6.Hệ thống xác nhận đơn hàng được đặt thành công hoặc bị hủy

Alternative Flow

Exception Flow 1a.Mất kết nối Internet

2a.Tài khoản của người dùng không phải là tài khoản quản lý

2.10 Quản lý sản phẩm

2.10.1 Biểu đồ

Hình 19 Biểu đồ Use case cho chức năng Quản lý sản phẩm

2.10.2 Đặc tả

Use Case ID UC-1.11

Use Case Name Quản lý sản phẩm

Description Người dùng muốn xem, thêm, sửa ,xóa sản phẩm

Pre-Condition Thiết bị người dùng được kết nối Internet

Tài khoản của người dùng đã được tạo sẵn Tải khoản của người dùng phải là tải quản quản lýPost-Condition Thông tin sản phẩm được thêm mới hoặc được chỉnh sửa

hoặc bị xóaBasic Flow 1.Người dùng truy cập vào website

2.Người dùng đăng nhập vào hệ thống3.Người dùng click vào quản lý sản phẩm4.Hệ thống sẽ hiện thị lên thông tin sản phẩm

5.Người dùng click vào thêm (hoặc sửa hoặc xóa) sản phẩm6.Người dùng nhập các thông tin của sản phẩm

7.Hệ thông xác nhận thêm (hoặc sửa hoặc xóa) thành côngAlternative Flow

Exception Flow 1a.Mất kết nối Internet

2a.Tài khoản của người dùng không phải là tài khoản quản lý

2.11 Quản lý tài khoản

2.11.1 Biểu đồ

Hình 20 Biểu đồ Use case cho chức năng Quản lý tài khoản

2.11.2 Đặc tả

Use Case ID UC-1.12

Use Case Name Quản lý tài khoản

Description Người dùng muốn xem, thêm, sửa ,xóa tài khoản

Pre-Condition Thiết bị người dùng được kết nối Internet

Tài khoản của người dùng đã được tạo sẵn Tải khoản của người dùng phải là tải quản quản lýPost-Condition Hiển thị thông tin tài khoản

Basic Flow 1.Người dùng truy cập vào website

2.Người dùng đăng nhập vào hệ thống

3.Người dùng click vào quản lý tài khoản4.Hệ thống sẽ hiện thị lên thông tin tài khoản 5.Người dùng click vào thêm (hoặc sửa hoặc xóa) tài khoản6.Người dùng nhập (hoặc chỉnh sửa) thông tin tài khoản7.Hệ thông xác nhận thêm (hoặc sửa hoặc xóa) thành côngAlternative Flow

Exception Flow 1a.Mất kết nối Internet

2a.Tài khoản của người dùng không phải là tài khoản quản lý

2.12 Quản lý thống kê

2.12.1 Biểu đồ

Hình 21 Biểu đồ Use case cho chức năng Thống kê

2.12.2 Đặc tả

Use Case ID UC-1.13

Use Case Name Quản lý thống kê

Description Người dùng muốn xem thống kê đơn hàng, doanh thu

Pre-Condition Thiết bị người dùng được kết nối Internet

Tài khoản của người dùng đã được tạo sẵn Tải khoản của người dùng phải là tải quản quản lýPost-Condition Hiển thị thống kê đơn hàng, thống kê doanh thu của công ty

Basic Flow 1.Người dùng truy cập vào website

2.Người dùng đăng nhập vào hệ thống3.Người dùng click vào quản lý thống kê4.Hệ thống sẽ hiện thị lên thông tin thông kê đơn hàng, thống kê doanh thu

Alternative Flow

Exception Flow 1a.Mất kết nối Internet

2a.Tài khoản của người dùng không phải là tài khoản quản

3 Sequence Diagram

3.1 Quản lý sản phẩm

Hình 22 Biểu đồ Sequence cho chức năng Quản lý sản phẩm

3.2 Thêm tài khoản

Hình 23 Biểu đồ Sequence cho chức năng Đăng ký

3.3 Giỏ hàng

Hình 24 Biểu đồ Sequence cho chức năng Quản lý giỏ hàng

3.4 Sủa thông tin cá nhân

Hình 25 Biểu đồ Sequence cho chức năng Sửa thông tin cá nhân

3.5 Thêm giỏ hàng

Hình 26 Biểu đồ Sequence cho chức năng Thêm giỏ hàng

3.6 Xem danh sách sản phẩm nổi bật

Hình 27 Biểu đồ Sequence cho chức năng Xem danh sách sản phẩm nổi bật

3.7 Tìm kiếm sản phẩm

Hình 28 Biểu đồ Sequence cho chức năng Tìm kiếm sản phẩm

3.8 Xem chi tiết sản phẩm

Hình 29 Biểu đồ Sequence cho chức năng Xem chi tiết sản phẩm