Đồ án cơ sở quy trình phát triển phần mềm dev ( fontend dev)

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