TRƯỜNG ĐẠI ĐẠI HỌC HỌC CÔNG CÔNG NGHIỆP NGHIỆP HÀ HÀ NỘI NỘI TRƯỜNG LOG O KHO A Học phần Công cụ phát triển phần mềm Đề tài: Nghiên cứu visual studio code ứng dụng phát triển website Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 1 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A Nội dung Phần : Tìm hiểu VSCode 1.Giới thiệu VSCode 2.Những đặc điểm Của VSCode 3.Ưu điểm nhược điểm VSCode 4.Ứng dụng thực tế để phát triển Website Phần : Ứng dụng phát triển Website 1.Phân tích thiết kế hệ thống Website 2.Mẫu giao diện Website Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 22 TÊN HỌC PHẦN Công cụ phát triển phần mềm Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved LOG O KHO A 33 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A PHẦN 1: TÌM HIỂU VSCODE 1.Giới thiệu VSCode • Lịch sử phát triển - VSCode Microsoft công bố ngày 29-4-2015 hội nghị Build 2015 - Một dựng xem trước phát hàng vào ngày 18-11-2015 - VSCode phát hành theo Giấy phép Expat mã nguồn đăng lên GitHub Vào ngày 14-4-2016, VSCode hoàn thành giai đoạn xem trước công khai phát hành lên web • VSCode - Là trình biên tập lập trình code miễn phí dành cho Windows,Linux macOS - Nó kết hợp hồn hảo IDE Code Editor - VSCode Code Editor độ hữu ích khơng IDE Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 44 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A 2.Độ phổ biến VSCode Dù phát hành khoảng 4-5 năm trở lại đây, VSCode trở thành Code Editor mạnh mẽ phổ biến dành cho lập trình viên Nhờ hỗ trợ nhiều ngơn ngữ lập trình phổ biến, đầy đủ tính khả mở rộng, nên VSCode trở nên thân thuộc dễ sử dụng với lập trình viên VSCode chiếm ưu hầu hết bảng xếp hạng mơi trường phát triển dành cho lập trình viên Trong Khảo sát Stack Overflow năm 2019, VSCode xếp hạng môi trường phát triển phổ biến với 50% số 90.000 người tham gia khảo sát Con số năm 2018 35% Điều cho thấy “độ phủ sóng” ngày lớn hữu ích mà VSCode mang lại cho lập trình viên Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 55 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A 3.Những ưu điểm làm cho VSCode bật o Giao diện đơn giản, gọn nhẹ, dễ sử dụng ⮚ Đặc điểm bật VSCode người dùng lần đầu đơn giản, gọn nhẹ, dễ dàng cài đặt File cài đặt VSCode nhẹ, vài chục MB cài đặt vơ nhanh chóng ⮚ Sau cài đặt, giao diện VSCode bao gồm vùng soạn thảo, statusbar, sidebar với lựa chọn Explorer, Search, Git, Debug Extension Nhìn đơn giản cơng cụ mà lập trình viên cho dù mảng cần có Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 66 TÊN HỌC PHẦN Công cụ phát triển phần mềm o Hỗ trợ hầu hết ngôn ngữ lập trình phổ biến: ✔ Python ✔ Javascript ✔ HTML ✔ CSS ✔ TypeScript ✔ C++ ✔ Java ✔ PHP Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved LOG O KHO A 77 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A o Kho extention khổng lồ ⮚ Vì mã nguồn mở xây dựng dựa Javascript nên việc hỗ trợ extension VSCode vô đầy đủ chi tiết Có thể nói VSCode phần mềm có kho tiện ích mở rộng phong phú với hàng ngàn extension với đủ loại ngôn ngữ lập trình, theme, service,… o Cộng đồng đơng đảo, cập nhật thường xuyên ⮚ Với việc cải tiến áp dụng công nghệ mới, VSCode chứng minh cho người dùng thấy hiệu Ngồi lập trình viên, Testers, Data Administrators tất quan tâm đến lập trình sử dụng VSCode ⮚ VSCode cập nhật thường xuyên , trung bình tháng có cập nhật Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 88 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A 4.Nhược điểm ⮚ Bộ nhớ mức sử dụng pin VSCode tệ ⮚ Khơng có git merge ⮚ Các phím tắt mặc định khơng có ý nghĩa người dùng phải cấu hình hết tất ⮚ VSCode để tăng tốc nhanh, cấu hình plugin chép nhanh chóng từ máy sang máy khác Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 99 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A 6.Những tính mạnh mẽ VSCode o IntelliSense Là kết hợp code auto-complete trí tuệ nhân tạo (AI) Tính cung cấp loạt đề nghị với gợi ý mô tả ngắn ta viết code Những gợi ý tính tốn dựa theo nhân tố bối cảnh ngơn ngữ lập trình, cú pháp, biến, hàm, code file o Tích hợp sẵn Git Nhu cầu làm việc nhóm lưu trữ khơng thể thiếu, tích hợp Git vào Code Editor như tính lựa chọn đắn. Git trên VSCode cung cấp cho bạn git action commit code, pull, push,… Và qua phiên việc hỗ trợ Git càng đầy đủ Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 10 10 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A o Debugger Một tính của VSCode chính khả hỗ trợ debug tuyệt vời. Theo mặc định, VSCode chỉ kèm theo trình Debug hỗ trợ NodeJS Nhưng tất nhiên, lần nữa, bạn cài thêm extension để debug cho ngơn ngữ khác o Tích hợp Terminal Terminal là chương trình giao diện cửa sổ dịng lệnh (command line interface). Cũng Git, nhu cầu sử dụng terminal của lập trình viên vơ quan trọng Trên VSCode, bạn mở nhiều tab terminal thư mục làm việc tại, điều làm tăng hiệu suất cơng việc lên nhiều Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 11 11 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A Ai đối tượng nên sử dụng Visual Studio Code? Với việc cải tiến áp dụng công nghệ mới, Visual Studio Code đã chứng minh cho lập trình viên thấy hiệu Ngồi Developers, Testers, Data Administrators tất quan tâm đến lập trình sử dụng Visual Studio 8.Kết luận Visual Studio Code trình biên tập mã phổ biến nay, ngày chứng tỏ ưu vượt trội so với phần mềm khác Tuy miễn phí khơng có nhiều tính nâng cao Visual Studio Code đáp ứng hầu hết nhu cầu lập trình viên Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 12 12 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A Phần 2: Ứng dụng phát triển Website 1.Phân tích thiết kế hệ thống Biểu đồ UC tong quát Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 13 13 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A Xây dựng thành gói UC sau: Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 14 14 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A UC đăng kí, đăng nhập Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 15 15 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A UC quản lý danh mục Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 16 16 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A UC mua hàng Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 17 17 TÊN HỌC PHẦN Công cụ phát triển phần mềm Biểu đồ hoạt động use case LOG O KHO A Act Dang ky Act Dang nhap Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 18 18 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A Act quản lý danh mục Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 19 19 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A Act mua hàng Webiste: https://haui.edu.vn © 2021 Hanoi University of Industry All rights reserved 20 20 ... cụ phát triển phần mềm LOG O KHO A Nội dung Phần : Tìm hiểu VSCode 1.Giới thiệu VSCode 2.Những đặc điểm Của VSCode 3.Ưu điểm nhược điểm VSCode 4 .Ứng dụng thực tế để phát triển Website Phần : Ứng. .. 11 TÊN HỌC PHẦN Công cụ phát triển phần mềm LOG O KHO A Ai đối tượng nên sử dụng Visual Studio Code? Với việc cải tiến áp dụng công nghệ mới,? ?Visual Studio Code? ?đã chứng minh cho lập trình viên... sử dụng Visual Studio 8.Kết luận Visual Studio Code trình biên tập mã phổ biến nay, ngày chứng tỏ ưu vượt trội so với phần mềm khác Tuy miễn phí khơng có nhiều tính nâng cao Visual Studio Code