Quy trình này bao gồm các hành động được thực hiệntheo một thứ tự nhất định để xây dựng và cung cấp một sản phẩm có thể đáp ứngđược yêu cầu về kỹ thuật và phục vụ cho việc kinh doanh.SDL
Trang 1BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC PHENIKAA
BÁO CÁO HỌC PHẦN ĐỒ ÁN CƠ SỞ
Sinh viên:Phạm Văn Tuấn – 20010994
Giảng viên : TS.Hà Minh Hoàng
HÀ NỘI, Ngày 24 tháng 10 năm 2022
Trang 2Mục Lục:
I QUY TRÌNH PHÁT TRIỂN PHẦN MỀM 1
1 Tổng quan 2
2 Các giai đoạn phát triển phầm mềm 2
II DEV ( Fontend Dev) 4
1 Các công cụ 4
i Khái quát về HTML 4
ii Khái quát về CSS 5
iii JavaScript 5
III THỰC HÀNH ỨNG DỤNG 6
1 Yêu cầu 6
2 Các bước thiết kế 6
IV KẾT LUẬN 10
I QUY TRÌNH PHÁT TRIỂN PHẦN MỀM
1
Trang 31 Tổng quan
Quy trình phát triển phần mềm còn được gọi là SDLC (Software Development Life Cycle) Quy trình này bao gồm các hành động được thực hiện theo một thứ tự nhất định để xây dựng và cung cấp một sản phẩm có thể đáp ứng được yêu cầu về kỹ thuật và phục vụ cho việc kinh doanh.
SDLC cung cấp một khuôn khổ để các nhà phát triển phần mềm và kỹ sư có thể
sử dụng trong suốt một dự án phát triển phần mềm Cụ thể, bằng việc tuân thủ đúng theo các giai đoạn được xác định rõ ràng của SDLC, tất cả thành viên trong nhóm dự án đều nắm được trách nhiệm, mục tiêu và lịch trình của dự án Việc này giúp cho nhóm làm việc hiệu quả, có thể tạo ra sản phẩm phần mềm chất lượng cao và đúng hạn như dự kiến.
2 Các giai đoạn phát triển phầm mềm
Bước 1: Analysis (Lập kế hoạch và phân tích yêu cầu)
Trước khi bắt đầu xây dựng phần mềm, chúng ta cần thu thập và xác định rõ các yêu cầu của người dùng và các bên liên quan đối với sản phẩm phần mềm sắp xây dựng Chúng ta cần nghiên cứu thị trường để xác định các chức năng mà phần mềm nên cung cấp cho người dùng
để họ cảm thấy đây là phần mềm hữu ích cho họ Việc nghiên cứu này cũng giúp ta xác định được khả năng tồn tại của phần mềm trên thị trường như thế nào?
Sau đó, các thành viên trong nhóm phát triển phần mềm sẽ làm việc cùng với khách hàng để đưa ra các thông số kỹ thuật và yêu cầu chi tiết về sản phẩm phần mềm dự định làm ra Tất cả thông tin này sẽ được tổng hợp thành một tài liệu được gọi là tài liệu đặc tả yêu cầu phần mềm (Software Requirement Specification) Tài liệu sẽ bao gồm các yêu cầu về chức năng, giao diện, hiệu suất,… Ngoài ra, còn có cả bản phác thảo về thành phần, nhiệm vụ của từng developer và các thông số thử nghiệm để tạo nên một sản phẩm chất lượng
Ở giai đoạn này, người quản lý và các nhà phát triển phần mềm sẽ thống nhất việc lựa chọn kiểu mô hình phát triển phần mền nào (Các kiểu mô hình phát triển phần mềm sẽ được cụ thể trong phần tiếp theo)
Trang 4Bước 2: Design (Thiết kế phần mềm)
Từ các yêu cầu và thông số kỹ thuật được đưa ra trong bước 1, các nhà phát triển phần mềm
sẽ vạch ra kiến trúc tổng thể cần thiết để tạo ra phần mềm Ngoài ra, các yếu tố như: ngân sách, thời gian, công nghệ áp dụng, mức độ rủi ro,… cũng được xác định rõ ràng
Kết quả cuối cùng của giai đoạn này là các đặc điểm kỹ thuật thiết kế Nó bao gồm các chỉ định về thiết kế kiến trúc, yêu cầu hệ thống cũng như đại diện Back-end, Front-end,… cho phép cả nhóm phát triển theo dõi toàn bộ quá trình phát triển nên phần mềm
Bước 3: Development (Thực hiện)
Ở bước này, các nhà phát triển phần mềm sẽ bắt đầu viết code và triển khai các thông số thiết
kế đã đưa ra ở bước 2 Cụ thể, các Front-end developer sẽ xây dựng phần giao diện của phần mềm Các Back-end developer sẽ sử dụng các loại ngôn ngữ lập trình, framework để lập trình trên máy chủ và cùng với các quản trị viên cơ sở dữ liệu xử lý dữ liệu
Sau khi hoàn tất việc coding, developers sẽ deploy (triển khai) sản phẩm trong môi trường phát triển Lập trình viên sẽ tiến hành thử nghiệm sản phẩm và có sự điều chỉnh cho phù hợp với yêu cầu đã đưa ra
Giai đoạn này thường chiếm khá nhiều thời gian và nhân lực trong toàn bộ quy trình phát triển phần mềm
Bước 4: Testing (Kiểm thử phần mềm)
Sau khi hoàn tất phần lập trình phần mềm, sản phẩm sẽ tiếp tục chuyển cho các tester (người kiểm thử phần mềm) Các tester sẽ tạo ra các tình huống kiểm thử (test case) và tiến hành kiểm thử phần mềm Mục đích của việc kiểm thử phần mềm là xác minh và đảm bảo chất lượng của sản phẩm đúng như yêu cầu để ra
Sau khi kiểm thử, tester sẽ cập nhật các lỗi vào công cụ quản lý và thông báo các bug (lỗi) cho developers Bước này, tester sẽ ngồi cùng với developers để xử lý các bug hiện có và cập nhật vào hệ thống quản lý lỗi Tùy vào mô hình phát triển phần mềm được lựa chọn ở bước 1
mà hoạt động của developer và tester có thể tiến hành lần lượt hoặc diễn ra song song
Bước 5: Deployment stage (Giai đoạn triển khai)
3
Trang 5Sau khi hoàn tất kiểm thử, phần mềm không còn lỗi, các nhà phát triển sẽ triển khai sản phẩm trên Production environment (môi trường chứa ứng dụng thật, chạy với người dùng thật, dữ liệu thật) và cung cấp sản phẩm hoàn thiện cho khách hàng
Sau khi đăng ký, thử nghiệm Beta sẽ được tiến hành để thu thập các phản hồi của người dùng thực tế để hoàn thiện chất lượng phần mềm khi triển khai ở quy mô lớn Ở bước này, developer cũng cần phải lên kế hoạch chuẩn bị cho mọi trường hợp bất trắc có thể xảy ra để chủ động hơn trong việc giải quyết các sự cố bất ngờ
Bước 6: Maintenance (Duy trì)
Sau khi phần mềm được đưa vào vận hành chính thức, khách hàng đã bắt đầu sử dụng phần mềm ở mức chất lượng cao nhất, bước tiếp theo chúng ta cần phải bảo trì sản phẩm Công ty
sẽ thành lập một nhóm chuyên về bảo trì và quản lý các vấn để người dùng gặp phải trong quá trình sử dụng sản phẩm Họ sẽ quản lý và giải quyết tất cả các vấn để của người dùng gặp phải Đồng thời, phần mềm cũng được cập nhật sau khi triển khai để loại bỏ các lỗi và cải thiện hiệu suất
II DEV ( Fontend Dev)
1 Các công cụ
i Khái quát về HTML
HTML (viết tắt của từ Hypertext Markup Language, hay là “Ngôn ngữ Đánh dấu Siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web Nó có thể được trợ giúp bởi các công nghệ như CSS và các ngôn ngữ kịch bản giống như JavaScript
Các trình duyệt web nhận tài liệu HTML từ một web server hoặc một kho lưu trữ cục
bộ và render tài liệu đó thành các trang web đa phương tiện HTML mô tả cấu trúc của một trang web về mặt ngữ nghĩa và các dấu hiệu ban đầu được bao gồm cho sự xuất hiện của tài liệu
Trang 6Các phần tử HTML là các khối xây dựng của các trang HTML Với cấu trúc HTML, hình ảnh và các đối tượng khác như biểu mẫu tương tác có thể được nhúng vào trang được hiển thị HTML cung cấp một phương tiện để tạo tài liệu có cấu trúc bằng cách biểu thị ngữ nghĩa cấu trúc cho văn bản như headings, paragraphs, lists, links, quotes và các mục khác Các phần tử HTML được phân định bằng các tags, được viết bằng dấu ngoặc nhọn Các tags như và giới thiệu trực tiếp nội dung vào trang
ii Khái quát về CSS
CSS là viết tắt của cụm từ Cascading Style Sheet Đây là mô €t ngôn ngữ lập trình được thiết kế rất đơn giản và dễ sử dụng Mục tiêu của CSS là giúp đơn giản hóa quá trình tạo ra các website
CSS có nhiệm vụ thực hiê €n viê €c xử lý giao diê €n của mô €t trang web Có thể kể đến các yếu tố như màu sắc văn bản, hay khoảng cách giữa các đoạn, font chữ, hình ảnh, bố cục, màu nền,… Với sự hỗ trợ của CSS thì bạn có thể thay đổi, chỉnh sửa những yếu tố trên theo ý muốn
Trong quá trình phát triển và thiết kế website thì CSS chính là một công cụ vô cùng cần thiết
Nó có thể giải quyết tốt những công việc mà HTML không xử lý được Qua đó mang lại cho bạn khả năng kiểm soát mạnh mẽ với website của mình
Có thể phân chia các loại CSS thành những loại như:
- CSS tùy chỉnh hình nền
- CSS tùy chỉnh cách hiển thị đoạn text
- CSS tùy chỉnh kiểu chữ và kích thước
- CSS tùy chỉnh bảng
- CSS tùy chỉnh danh sách
iii JavaScript
JavaScript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang web tương tác
Từ làm mới bảng tin trên trang mạng xã hội đến hiển thị hình ảnh động và bản đồ tương tác, các chức năng của JavaScript có thể cải thiện trải nghiệm người dùng của trang web Là ngôn ngữ kịch bản phía máy khách, JavaScript là một trong những công nghệ cốt lõi của World
5
Trang 7Wide Web Ví dụ: khi duyệt internet, bất cứ khi nào bạn thấy quảng cáo quay vòng dạng hình ảnh, menu thả xuống nhấp để hiển thị hoặc màu sắc phần tử thay đổi động trên trang web cũng chính là lúc bạn thấy các hiệu ứng của JavaScript
III THỰC HÀNH ỨNG DỤNG
1 Yêu cầu
Thiết kế một website bán hàng với cách tính năng:
Đủ luồng từ chọn hàng -> checkout:
o Danh sách mặt hàng có phân trang, với mỗi mặt hàng cần có nút (button) để xem chi tiết mặt hàng và thêm vào giỏ hàng (có thể tăng số lượng mặt hàng cần mua trong giỏ hàng)
o Trang chi tiết của từng mặt hàng
o Giỏ hàng cần hiển thị tổng số tiền cần thanh toán và có nút thanh toán Khi thanh toán thành công cần hiển thị popup thông báo thành công đồng thời lưu dữ liệu lịch sử mua hàng để theo dõi
Tìm kiếm theo tên mặt hàng (từ khóa từ kiếm có thể không đầy đủ)
Sắp xếp các mặt hàng theo giá (cao -> thấp, thấp -> cao)
Xem lịch sử mua hàng
2 Các bước thiết kế
i Giao diện chính
Trang 8ii Giao diện sản phẩm
iii Tìm kiếm sản phẩm
7
Trang 9iv Giỏ hàng và lịch sử mua hàng
Trang 10v Bảng chi tiết sản phẩm
vi Sắp xếp sản phẩm theo giá
9
Trang 11IV KẾT LUẬN
Trong quá trình học tập và làm đồ án cho nhóm dưới sự hướng dẫn của thầy Hoàng, anh Long và anh Dũng thì em đã học được:
- Thao tác với Github để quản lý project của bản thân hay cũng như nhóm khi làm project trong một nhóm
- Cải thiện và thành thạo hơn khi sử dụng HTML và CSS
- Được học và làm quen với JavaScript, thao túm DOM, Async/Await trong JavaScript, sử dụng localStorage, fetch API,…
- Thực hành HTML, CSS, JS tốt qua những bài tập được giao hàng tuần
và trên freecodecamp
- Được tiếp cận với các framework như bootstrap, jquyry,…
- Các quá trình và tạo chức năng cho một website