báo cáo thực tập lập trình WEB FRONTEND với VUEJ

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP LẬP TRÌNH WEB FRONTEND VỚI VUEJS Công ty thực tập :Công ty cổ phần đầu tư phát triển công nghệ TECHUP Người phụ trách: Nguyễn Lê Anh Đào Thực tập sinh : 16521390 – Dương Trí Tuệ TP Hồ Chí Minh, tháng năm 2021 LỜI MỞ ĐẦU Ngày nay,việc thiết kế giao diện cho website phận thiếu ngành công nghiệp phần mềm Với tốc độ phát triển vô mạnh mẽ, ngành phát triển giao diện web nhân tố kích thích phát triển cơng nghệ thơng tin giới, phần cứng phần mềm Cùng với xu phát triển giới, Việt Nam ngoại lệ Ngành công nghiệp phát triển giao diện người dùng Việt Nam phát triển mạnh mẽ, để hịa nhập với cơng ty hàng đầu giao diện người dùng giới Bên cạnh công ty phát triển giao diện web trẻ tuổi nước, công ty phát triển web lớn giới gia nhập vào thị trường Việt Nam, góp phần lớn vào phát triển tích cực ngành game Việt Ngành phát triển giao diện ứng dụng web sinh nhu cầu sử dụng trình duyệt web người đặc biệt giới trẻ thiết bị công nghệ Và giới trẻ nguồn nhân lực quan trọng cho việc phát triển ngành phát triển ứng dụng giao diện web sau Vì lý này, em định chọn lập trình web frontend làm định hướng cho việc học tập Sau bốn năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia làm giao diện ứng dụng web mơi trường chun nghiệp Vì vậy, em định chọn Công ty cổ phần đầu tư phát triển công nghệ TECHUP - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Nguyễn Lê Anh Đào Dương Trí Tuệ2 LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty cổ phần đầu tư phát triển cơng nghệ TECHUP tạo điều kiện cho em có hội thực tập công ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình nhóm trainer, nhóm thực tập chúng em tiếp thu kiến thức quan trọng để làm giao diện website hướng người dùng Chân thành cảm ơn anh chị nhóm trainer bỏ nhiều thời gian,công sức để hướng dẫn chúng em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Phú, training VueJS, hướng dẫn, giúp đỡ cho chúng em tận tình khó khăn cơng việc, đến khó khăn việc làm quen với môi trường mới, hỗ trợ chúng em nhiều vấn đề kỹ thuật tạo giao diện website trình làm giao diện webssite; cảm ơn and Từ Quốc Hưng, training HTML/CSS nâng cao; cám ơn chị Lâm Anh hỗ trợ quy định cách thức làm việc công ty,; cảm ơn anh Nguyễn Lê Anh Đào, dẫn em cách làm báo cáo, lên kế hoạch, kỹ thiếu Cũng xin cảm ơn thầy khoa Cơng nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện em làm báo cáo Dương Trí Tuệ TP.Hồ Chí Minh, ngày 10/1/2021 NHẬN XÉT CỦA KHOA Nguyễn Lê Anh Đào Dương Trí Tuệ3 Mục lục Nguyễn Lê Anh Đào Dương Trí Tuệ4 Nguyễn Lê Anh Đào Dương Trí Tuệ5 Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty TECHUP Công ty cổ phần techup đối tác giải pháp phần mềm cho khởi nghiệp thiết bị di động hệ thống kinh doanh doanh nghiệp vượt trội Trong gần 10 năm gia công phần mềm CNTT, chúng tơi có kinh nghiệm nhiều loại công nghệ, ngành loại ứng dụng Chúng cung cấp quan hệ đối tác bền vững ổn định Chúng tơi có khách hàng làm việc với kể từ công ty thành lập Chúng nhanh nhẹn sẵn sàng xếp dựa tính đặc thù dự án, nhu cầu đối tác ln đáp ứng với chất lượng nguồn lực tốt Chúng biết nghệ thuật kết hợp người khoa học công nghệ Sản phẩm công ty Lĩnh vực chuyên gia Chúng làm việc ngành công nghiệp cạnh tranh với nhiều sản phẩm lưu trữ theo yêu cầu khách hàng ● Phương tiện & xuất bản: Quản lý phân phối nội dung Các giải pháp để xây dựng ứng dụng bạn cách nhanh chóng tiết kiệm chi phí Mạng xã hội Mạng xã hội thay đổi giới Các giải pháp để thay đổi doanh nghiệp bạn theo hướng đổi Thời gian thực & phim Thời gian thực công nghệ thịnh hành Giải pháp để phát video trực tiếp tốt ứng dụng bạn Du lịch & sức khỏe Nguyễn Lê Anh Đào Dương Trí Tuệ6 Nền tảng dịch vụ khách sạn Giải pháp cho dịch vụ du lịch y tế web, điện thoại di động / máy tính bảng máy tính để bàn Thương mại điện tử & bán lẻ Cửa hàng trực tuyến di động Giải pháp cho ngành thương mại điện tử, bán lẻ phân phối Tài & bảo hiểm Quản lý tài sản Chợ Thủ đô Các giải pháp giúp dịch vụ tài quản lý nhanh chóng thiết bị di động Nguyễn Lê Anh Đào Dương Trí Tuệ7 Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Thiết kế giao diện webssite” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình giao diện webssite, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc môi trường phát triển game chuyên nghiệp Tìm hiểu cơng ty kỹ công ty Thời gian : ngày Nội dung : Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu cơng ty, q trình thành lập phát triên (như nhắc đến trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức cơng ty Ngồi ra, thực tập sinh cịn giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc… Kết : Hiểu thêm cơng ty TECHUP, q trình thành lập phát triển Có thêm kỹ việc sử dụng email công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc Thời gian : ngày Nội dung : Tìm hiểu công cụ sử dụng trình làm việc Trong thời gian này, supervisor hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho cơng việc sau Một số phần mềm số Slack sử dụng làm việc nhóm, viết báo cáo cuối ngày, Visual Studio Code – trình soạn thảo code Thực : Thực hành sử dụng phần mềm nêu Kết : Lập trình sử dụng cơng cụ miễn phí, giúp dễ dàng kết hợp cơng cụ với 2.2 Tìm hiểu VUEJS Thời gian : ngày (1 tuần) Nội dung : Được training kỹ thuật lập trình frontend với Vuejs nâng cao, kiến thức quan trọng cho việc tối ưu code Visual Studio Code - Lập trình hướng đối tượng Nguyễn Lê Anh Đào Dương Trí Tuệ8 Các kiến thức lập trình hướng đối tượng khái niêm, đặc tính tính kế thừa, tính đóng gói, tính ảo hóa, tính đa hình Ngồi ra, thực tập sinh hướng dẫn cách thiết kế lớp cho đối tượng game - Đặt tên biến : Đặt tên biến môt phần quan trọng lập trình web frontend, cần phải sử dụng tên biến để dễ dàng thao tác kết nối với team backend - Tối ưu code Thực tập sinh hướng dẫn cách tối ưu code, quản lý nhớ cho tối ưu, tránh rò rỉ nhớ, phần quan trọng lập trình web frontend Thực : - Tham gia đầy đủ buổi training công ty - Làm thực hành, kiểm tra kiến thức học Kết : - 2.3 Nâng cao kỹ lập trình web với VueJs Có kiến thức quan trọng cho việc lập trình web frontend sau Ngồi cịn biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu Lập trình front end Nội dung: Các kiến thức web frontend để làm webssite đơn giản - Khái niệm HTML HTML chữ viết tắt HyperText Markup Language, có nghĩa ngơn ngữ đánh dấu siêu văn Nó dùng để định dạng bố cục, thuộc tính liên quan đến cách hiển thị đoạn text hiển thị chương trình đặc biệc ta gọi Browser Hiện có nhiều Browser Firefox, Chrome, Cốc Cốc, Tất Browser có điểm chung giúp người dùng thao tác với website có khả biên dịch đoạn mã HTML, CSS Javascript Ngồi ra, trainer cịn cung cấp cho thực tập sinh khái niệm OpenGL hệ tọa độ 3D, vertex, pixel, fragment…, khái niệm quan trọng lập trình game 3D Được anh traning thêm thuộc tính cần thiết cho việc code giao diện webssite Nguyễn Lê Anh Đào Dương Trí Tuệ9 10 - - - Khái niệm CSS CSS viết tắt Cascading Style Sheets Đây ngôn style sheet sử dụng để mô tả giao diện định dạng tài liệu viết ngôn ngữ đánh dấu (markup) Nó cung cấp tính bổ sung cho HTML Nó thường sử dụng với HTML để thay đổi phong cách trang web giao diện người dùng Shader Là phép biến đổi vertex, color hiệu ứng đặc biệt Việc thực pipeline, từ phiên OpenGL 2.0 trở Được anh training thêm thuộc tính cần thiết để tạo nên bố cục website Khái niệm SCSS SCSS chương trình tiền xử lý CSS (CSS preprocessor) Nó giúp bạn viết CSS theo cách ngơn ngữ lập trình, có cấu trúc rõ ràng, rành mạch, dễ phát triển bảo trì code Ngồi có nhiều thư viện hỗ trợ kèm theo giúp bạn viết code CSS cách dễ dàng vào đơn giản Có nhiều loại CSS Preprocessor bao gồm SASS, Stylus hay LESS SCSS giúp cho trình viết code trở nên minh bạch, dễ quản lí dễ bảo trì Tiện lợi có nhiều thành viên thực dự án Khái niệm bootstrap Bootstrap cho phép trình thiết kế website diễn nhanh chóng dễ dàng dựa thành tố sẵn có typography, forms, buttons, tables, grids, navigation, image carousels… Cùng Mắt Bão tìm hiểu tính lợi ích mang lại cho lập trình viên Bootstrap nhé! Bootstrap sưu tập miễn phí mã nguồn mở cơng cụ dùng để tạo mẫu webiste hồn chỉnh Với thuộc tính giao diện quy định sẵn kích thước, màu sắc, độ cao, độ rộng…, designer sáng tạo nhiều sản phẩm mẻ tiết kiệm thời gian làm việc với framework trình thiết kế giao diện website - Khái niệm JavaScript JavaScript ngôn ngữ lập trình HTML WEB Nó nhẹ sử dụng phổ biến phần trang web, mà thi hành chúng cho phép Client-Side script tương tác với người sử dụng tạo trang web Nguyễn Lê Anh Đào Dương Trí Tuệ10 11 động Nó ngơn ngữ chương trình thơng dịch với khả hướng đối tượng JavaScript biết đến với tên Mocha, sau LiveScript, cơng ty Netscape đổi tên thành JavaScript, phổ biến tượng Java lúc JavaScript xuất lần đầu Netscape 2.0 năm 1995 với tên LiveScript Core đa ngôn ngữ nhúng vào Netscape, IE, trình duyệt khác - Khái niệm VueJs Vuejs gọi tắt Vue (được phát âm /vjuː/, giống từ view tiếng Anh) Vue.js framework linh động dùng phổ biến để xây dựng nên giao diện người dùng Hoàn toàn khác với framework nguyên khối Vue thường sở hữu thiết kế từ đầu theo hướng cho phép khuyến khích làm việc để phát triển dễ dàng ứng dụng theo bước Một phát triển lớp giao diện (view layer) người dùng cần sử dụng loại thư viện lõi Vue Ngoài ra, bạn kết hợp với kỹ thuật thiên hướng đại Vue đáp ứng dễ dàng nhu cầu xây dựng ứng dụng trang với độ phức tạp cao - Khái niệm NodeJs NodeJS tảng xây dựng V8 JavaScript Engine – trình thơng dịch thực thi mã JavaScript, giúp xây dựng ứng dụng web cách đơn giản dễ dàng mở rộng NodeJS phát triển Ryan Dahl vào năm 2009 chạy nhiều hệ điều hành khác nhau: OS X, Microsoft Windows, Linux Thực : - Tham gia đầy đủ buổi trainning Nguyễn Lê Anh Đào Dương Trí Tuệ11 12 - Làm tập thực hành tạo giao diện Vue CLI tích hợp Vues để tạo trang web Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết : 2.4 Hiểu khái niệm lập trình hướng frontend website Đã chạy trang web với kiến thức tử VueJs Lập trình Visual Studio Code Nội dung : Các kỹ thuật tạo trang web coe VueJs, sử dụng VueCLI VueJs Visual Studio Code - Định nghĩa Visual Studio Code: Là trình biên tập lập trình code miễn phí dành cho Windows, Linux macOS, Visual Studio Code phát triển Microsoft Nó xem kết hợp hồn hảo IDE Code Editor Visual Studio Code hỗ trợ chức debug, kèm với Git, có syntax highlighting, tự hồn thành mã thơng minh, snippets, cải tiến mã nguồn Nhờ tính tùy chỉnh, Visual Studio Code cho phép người dùng thay đổi theme, phím tắt, tùy chọn khác - - Tạo trang web với VueCLI: Được trainner hướng dẫn tạo trang web bản, cấu hình bố cục trang web, cách sử dụng công cụ để biên dịch, chạy trang web với trình biên dịch NodeJs Lập trình web FrontEnd JavaScript Để lập trình giao diện webssite với hiệu suất cao, lập trình viên phải lập trình từ hướng phân tích giao diện từ bên ngồi nhìn vào Lập trình viên sử dụng ngơn ngữ javascript để lập trình build thư viện để chạy local máy Sử dụng trình biên dịch NodeJs để chạy Thực : - Tham gia đầy đủ buổi training Tạo ứng dụng bản, lập trình web frontend Visual Studio Code chạy lệnh NodeJs Kết quả: Nguyễn Lê Anh Đào Dương Trí Tuệ12 13 Đã tạo trang web có đầy đủ trang sau chạy local lệnh chạy NodeJs Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực VueJs, VueCLI, JavaScript Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực project thiết kế giao diện cho webssite Chi tiết đồ án nói phần sau Lịch làm việc - Tuần Công việc - - - - - - Tìm hiểu cơng ty, cách tổ chức công ty Làm quen với công cụ làm việc công ty Học cách trao đổi, làm việc qua email Tìm hiểu ngơn ngữ lập trình Javascript nâng cao Thực hành Javascript Làm test Javascript Tìm hiểu Mức độ hồn thành Nhận xét người hướng dẫn Nguyễn Lê Anh Đào Dương Trí Tuệ13 Người hướng dẫn Chị Lâm Anh Anh Nguyễn Lê Anh Đào Anh Từ Quốc 14 CSS/SCS S - Thực hành tạo trang web với bố cục scss/css - Tìm hiểu VueJs, VueCLI - Thực hành tạo trang web sử dụng VueCLI - Nhúng NodeJs vào Visual Studio code đẻ thực lệnh chạy project Giai đoạn Thiết kế: - Lên kế hoạch - Tạo componen ts cho trang web Phân chia cho thích hợp - Phân chia trang cần thiết project - Định nghĩa Hưng, anh Phú Anh Phú, anh Nguyễn Lê Anh Đào Anh Nguyễn Lê Anh Đào, anh Từ Quốc Hưng Nguyễn Lê Anh Đào Dương Trí Tuệ14 15 10 Data (Dữ liệu) đầu vào trang Giai đoạn Hiện thực: - Viết giao diện cho trang trang web - Kết nối liệu data tĩnh Giai đoạn Hiện thực (tt) - Viết giao diện cho trang trang web - Kết nối liệu data tĩnh Giai đoạn Hiện thực (tt) - Viết giao diện cho trang trang web - Kết nối liệu data tĩnh Giai đoạn báo cáo kì - Báo cáo trang viết với anh hướng dẫn - Fix/ bug lỗi liên quan Giai đoạn kết thúc, báo cáo : Anh Nguyễn Lê Anh Đào, anh Từ Quốc Hưng Anh Nguyễn Lê Anh Đào, anh Từ Quốc Hưng Anh Nguyễn Lê Anh Đào, anh Từ Quốc Hưng Anh Nguyễn Lê Anh Đào Anh Nguyễn Lê Anh Đào Nguyễn Lê Anh Đào Dương Trí Tuệ15 16 - - - Kết hợp trang phân chia cho thành viên để tạo page chung Fix bug, fix rị rì vùng nhớ Báo cáo cuối đợt thực tập Nguyễn Lê Anh Đào Dương Trí Tuệ16 17 Chương 3: Chi tiết project Giới thiệu giao diện Shopee Shoppe kênh bán hàng thương mại điện tử lớn Việt Nam nay, với đa dạng loại mặt hàng Ra mắt năm 2015, tảng thương mại Shopee xây dựng nhằm cung cấp cho người sử dùng trải nghiệm dễ dàng, an tồn nhanh chóng mua sắm trực tuyến thơng qua hệ thống hỗ trợ tốn vận hành vững mạnh 1.1 Các trang q trình thực dự án Tên trang Mục đich Mức độ hoàn thành Danh mục sản phẩm Hiển thị sản phẩm 100% ngồi giao diện Tất danh mục Trang hiển thị loại 100% danh mục Chi tiết sản phẩm Trang hiển thị chi tiết 100% danh mục san phẩm danh mục 1.2 Front-End Mô tả Thiết kế giao diện webssite trang Shopee HTML, CSS/SCSS, Bootsrap, JavaScript, kết hợp sử dụng VueCLI để xây dựng trang web Thực thành viên team FrontEnd VueJs - Dương Trí Tuệ Từ Quốc Hưng Nguyễn Cao Trí Và giúp đỡ tận tình anh Phú, anh Nguyễn Lê Anh Đào Kết đạt -Trang danh mục sản phẩm Nguyễn Lê Anh Đào Dương Trí Tuệ17 18 -Trang tất danh mục Nguyễn Lê Anh Đào Dương Trí Tuệ18 19 - Trang chi tiết sản phẩm danh mục Nguyễn Lê Anh Đào Dương Trí Tuệ19 20 TÀI LIỆU THAM KHẢO VueJs https://cli.vuejs.org/ https://vuejs.org/ Bootstrap Vue https://bootstrap-vue.org/ SCSS https://sass-lang.com/ Nguyễn Lê Anh Đào Dương Trí Tuệ20 21 TỔNG KẾT Như vậy, vịng tháng ngắn ngủi, nhóm kịp hoàn thành webssite giao diện người dùng Trang web có đầy đủ tính đề ban đầu Do thời gian có hạn nên tính trang web cịn đơn giản, hình ảnh chưa đẹp mong đợi Nhưng giao diện trang web phát triển theo VueJs có tính kế thừa nên sau có thời gian phát triển lên mức cao Chân thành cảm ơn giúp đỡ anh chị nhóm trainer VueJs, nỗ lực team FrontEnd để hoàn thành giao diện webssite Shopee Nguyễn Lê Anh Đào Dương Trí Tuệ21 ... JavaScript Để lập trình giao diện webssite với hiệu suất cao, lập trình viên phải lập trình từ hướng phân tích giao diện từ bên ngồi nhìn vào Lập trình viên sử dụng ngơn ngữ javascript để lập trình build... - 2.3 Nâng cao kỹ lập trình web với VueJs Có kiến thức quan trọng cho việc lập trình web frontend sau Ngồi biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu Lập trình front end Nội... Tạo trang web với VueCLI: Được trainner hướng dẫn tạo trang web bản, cấu hình bố cục trang web, cách sử dụng công cụ để biên dịch, chạy trang web với trình biên dịch NodeJs Lập trình web FrontEnd