Báo cáo thực tập lập trình ứng dụng WEB với VUEJS

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 ỨNG DỤNG WEB VỚI VUEJS Công ty thực tập : Công ty cổ phần Splus-Software Người phụ trách : Trần Hữu Tính Thực tập sinh : Nguyễn Thanh Tuấn MSSV : 18521604 TP Hồ Chí Minh, tháng 12 năm 2021 LỜI MỞ ĐẦU Ngày nay, tầm quan trọng Internet đời sống người điều ta phủ nhận Việc truy cập vào Internet nói chung truy cập ứng dụng Web nói riêng gần trở thành thói quen, việc làm hàng ngày người Không phải ngẫu nhiên mà ứng dụng Web lại trở nên phổ biến vậy, mà tiện lợi dễ dàng truy cập nơi đâu, cần có kết nối mạng Internet ta truy cập ứng dụng Web cách dễ dàng Điều chứng minh năm trở lại đây, đặc biệt với tình hình dịch bệnh Covid tại, ứng dụng Web lựa chọn ưu tiên hầu hết người nhiều lĩnh vực khác nhau: từ mua sắm đồ đạc, quần áo, việc mua đồ ăn, thức uống hàng ngày,… Sau thời gian tìm hiểu Lập trình nói chung Lập trình ứng dụng Web nói riêng, trải qua đồ án môn học trường, em mong muốn có thêm trải nghiệm thực tế việc làm ứng dụng Web có tính thực tiễn, đồng thời trau dồi thân mơi trường làm việc chuyên nghiệp, đầy tính kỷ luật Vì vậy, em định lựa chọn Cơng ty cổ phần Splus-Software nơi em trau dồi thêm kiến thức trải nghiệm làm việc mơi trường tập thể, đầy tính trách nhiệm BÁO CÁO THỰC TẬP LỜI CẢM ƠN Lời em xin trân trọng gửi lời cảm ơn đến Công ty cổ phần Splus-Software tạo điều kiện cho em có hội thực tập quý công ty Chỉ tháng ngắn ngủi, nhờ dẫn nhiệt tình anh chị mentor Team Amour, em tiếp thu nhiều kiến thức bổ ích việc phát triển ứng dụng Web công nghệ NuxtJs quy trình làm việc team dự án áp dụng điều vào thực tasks giao dự án Amour Chân thành cảm ơn anh chị mentor bỏ nhiều thời gian, cơng sức để hướng dẫn em hồn thành đợt thực tập Đặc biệt cảm ơn anh Tiến, training kiến thức, hướng dẫn, giúp đỡ em tận tình từ khó khăn việc tiếp cận tìm hiểu cơng nghệ NuxtJs, đến khó khăn việc làm quen với môi trường làm việc mới, bên cạnh theo sát công việc thực tập em; cảm ơn anh Tính, tạo điều kiện để em tham gia team Amour phát triển dự án hỗ trợ em hướng dẫn quy trình làm việc cho em nhiệt tình; cảm ơn anh Khoa, anh Tuấn, chị Chi, chị Ngân hỗ trợ hướng dẫn cho em lúc em gặp phải vấn đề công việc cần giúp đỡ anh chị Cuối cùng, em xin cảm ơn tất anh chị Dự án Amour hỗ trợ em để có kiến thức bổ ích Và em vui tham gia anh chị đóng góp chút sức nhỏ nhoi cho Dự án Em xin chân thành cảm ơn thầy cô khoa Cơng nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện để em hoàn thành báo cáo NGUYỄN THANH TUẤN Tp.HCM, ngày 15 tháng 12 năm 2021 BÁO CÁO THỰC TẬP NHẬN XÉT CỦA KHOA BÁO CÁO THỰC TẬP MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT CỦA KHOA MỤC LỤC Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty Splus-Software Mơ hình tổ chức Lĩnh vực hoạt động Chuyên môn công ty Chương 2: Nội dung thực tập Tìm hiểu công ty kỹ công ty Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc 2.2 Tìm hiểu Framework VueJs Thực project Lịch làm việc Chương 3: Chi tiết project 12 Giới thiệu Dự án Amour 12 Thực 12 Kết 12 3.1 Màn hình chức chỉnh sửa Manufacturer 12 3.2 Màn hình Danh sách Manufacturers 13 3.3 Màn hình Chỉnh sửa Maker 14 3.4 Tổng kết 15 TÀI LIỆU THAM KHẢO 16 TỔNG KẾT 17 BÁO CÁO THỰC TẬP Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty Splus-Software Splus-Software thành lập từ năm 2015, công ty chuyên tư vấn gia công xuất phần mềm Hiện cơng ty có trụ sở Việt Nam Nhật Bản, Splus thực nhiều dự án lớn với khách hàng uy tín quốc tế chủ yếu thị trường Nhật Bản, Đức, Mỹ Singapore Mơ hình tổ chức Lĩnh vực hoạt động Splus-Software hoạt động đa dạng lĩnh vực bao gồm: • Dịch vụ - Ứng dụng Web (Web application) • Dịch vụ - Ứng dụng di động (Mobile application) • Dịch vụ - Trí tuệ nhân tạo (AI) • Dịch vụ - Internet kết nối vạn vật (IoT) • Dịch vụ - Điện toán đám mây (Cloud) BÁO CÁO THỰC TẬP Chuyên môn công ty Những cơng nghệ mà cơng ty sử dụng: • Programming: PHP, Java, C#, Javascript, Golang, Ruby, Objective-C,… • Framework: Lavarel, Spring, VueJs, NET, Rails, Flutter, Outsystem,… • Database: MySQL, MSSQL, Oracle, DB2, SQL Lite, No SQL,… • Platform: Google Cloud Platform, Amazon Cloud, SalesForce,… • CI/CD: Jenkins, CircleCI, AWS CodeBuild, Azure DevOps,… BÁO CÁO THỰC TẬP Chương 2: Nội dung thực tậ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, huấn luyện an ninh thông tin Đượ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 việc, quy định cần phải tuân thủ, bảo mật thông tin dự án, giới thiệu công cụ làm việc công ty sử dụng,… Huấn luyện an ninh thông tin theo tiêu chuẩn ISO 27001:2013 làm kiểm tra An ninh thông tin Kết : Hiểu thêm công ty Splus-Software, trình thành lập phát triển Có thêm kỹ làm việc có kế hoạch, có kỷ luật, có trách nhiệm Đảm bảo việc bảo mật thơng tin Công ty dự án 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 q trình làm việc Trong thời gian này, phận IT hướng dẫn thực tập sinh tìm hiểu sử dụng cơng cụ giúp ích cho cơng việc sau Một số phần mềm số SVN - sử dụng để quản lý tài liệu dự án, Gitlab – sử dụng để quản lý source code dự án, Redmine – sử dụng để quản lý tasks công việc, Zoho-Mail – Email nội công ty, Slack – kênh chat mà công ty sử dụng team dự án trao đổi thông tin cho Thực : Thực hành sử dụng phần mềm nêu Kết : Nắm khái quát cách sử dụng công cụ cần thiết làm việc cơng ty 2.2 Tìm hiểu Framework VueJs Thời gian : ngày (1 tuần) Nội dung : Được anh mentor gợi ý giới thiệu nguồn tài liệu để tự tìm hiểu Framework VueJs Trong q trình tìm hiểu, có thắc mắc có anh mentor sẵn sàng giải đáp thắc mắc - Khái niệm VueJs: BÁO CÁO THỰC TẬP VueJs progressive framework dùng để xây dựng SPA (Single Page Application) Không giống monolithic frameworks, Vue thiết kế từ đầu theo hướng phát triển ứng dụng bước Thư viện cốt lõi tập trung vào View layer, dễ dàng lấy với tích hợp thư viện khác vuex để hỗ trợ quản lý state vue-router để hỗ trợ cho việc routing - Rendering: VueJs cho phép render liệu đến DOM cú phép template đơn giản, cịn lại thứ có Vue hỗ trợ cho lập trình viên VueJs sử dụng Virtual DOM để tăng trải nghiệm người dùng, thông qua event click, hover,… Virtual DOM tìm thành phần bị thay đổi thông báo cho DOM thay đổi thành phần bị thay đổi mà - Một số Directives thường sử dụng: VueJs xây dựng sẵn Directives làm đơn giản hoá thao tác cho lập trình viên, chẳng hạn như: + v-if: giúp ẩn element thoả điều kiện bên + v-else: directive kèm với v-if + v-for: directive hỗ trợ vòng lặp + v-on: directive giúp bắt event listener + v-bind: directive giúp element update lại có thay đổi Thực : - Chủ động tìm hiểu khái niệm syntax VueJs - Làm ví dụ minh hoạ để kiểm tra kiến thức tìm hiểu Kết : - Hiểu khái niệm lập trình front-end với VueJs - Hiểu rõ quy tắc hoạt động web application Thực project Sau gần tháng hướng dẫn luyện tập, thực tập sinh nắm kiến thực VueJs, HTML, CSS công nghệ kèm, thực tập sinh trainer kiểm tra kiểm tra kiến thực học tuần vừa qua Sau nhận góp ý chỉnh sửa hồn chỉnh thực tập sinh anh Tính (PM) anh Tiến (TeamLead – mentor chính) chấp nhận cho tham gia vào dự án team dự án Amour Chi tiết đồ án nói phần sau BÁO CÁO THỰC TẬP Lịch làm việc Tuần Cơng việc - Cấu hình VPN để truy cập tài nguyên server test công ty - Tham gia buổi giới thiệu cơng ty khố huấn luyện an ninh thông tin - Làm quen với công cụ làm việc công ty SVN, Redmine, - Học cách trao đổi, làm việc qua Slack truy cập vào Zoho Mail công ty cấp - Cài đặt môi trường phát triển hỗ trợ framework VueJs - Tìm hiểu VueJs Framework thơng qua trang chủ VueJs hướng dẫn tìm hiểu anh mentor - Tiến hành kiểm tra kiến thức tìm hiểu VueJs review anh mentor - Dựa review góp ý từ mentor để bổ sung thêm kiến thức cần thiết cải thiện kỹ coding - Tìm hiểu quy tắc đặt tên cho class (BEM) - Setup môi trường, clone source code cho dự án Amour - Tìm hiểu khái quát nghiệp vụ source code dự án Amour - Được hướng dẫn quy trình làm việc dự án, quy tắc đặt Q&A cho khách hàng - Study nghiệp vụ hình chỉnh sửa Manufacturer dựa tài liệu design từ phía khách hàng BÁO CÁO THỰC TẬP Người hướng dẫn Anh Nguyễn Hải Dương (bộ phận IT công ty) Mức độ Nhận xét hoàn thành người hướng dẫn 100% Hoàn thành tốt Anh Tạ Bảo Tiến 100% Hoàn thành tốt Anh Tạ Bảo Tiến 100% Hoàn thành tốt Anh Trần Hữu Tính 100% Hồn thành tốt Anh Tạ Bảo Tiến 100% Hoàn thành tốt 9 10 - Đặt Q&A cho khách hàng nghiệp vụ chưa rõ (dưới review mentor) - Tiến hành thực coding hình chỉnh sửa Manufacturer - Lưu ý lại review góp ý từ mentor để fix lại hình chỉnh sửa Manufacturer - Study nghiệp vụ Component Top Header - Tiến hành thực coding Component Top Header - Lưu ý lại review góp ý từ mentor để fix lại Component Top Header - Study nghiệp vụ hình danh sách Manufacturers đăng ký dựa tài liệu design từ phía khách hàng - Đặt Q&A cho khách hàng nghiệp vụ chưa rõ (dưới review mentor) - Tiến hành thực coding hình danh sách Manufacturers - Lưu ý lại review góp ý từ mentor để fix lại hình danh sách Manufacturer - Tham gia testing fixbug hình “Xác nhận nội dung quotation” - Tham gia testing fix bug hình “Danh sách Manufactuers” - Tham gia integration test flow hình vừa hồn thành đợt dự án môi trường server test - Log bug xảy trình test - Tham gia fix bug chung với team - Study nghiệp vụ hình BÁO CÁO THỰC TẬP Anh Tạ Bảo Tiến 100% Hoàn thành tốt Anh Tạ Bảo Tiến 100% Hoàn thành tốt Anh Tạ Bảo Tiến 100% Hoàn thành tốt Chị Tạ Thị Kim Chi 100% Hoàn thành tốt Anh Tạ Bảo 100% Hoàn thành tốt 10 11 12 Chỉnh sửa Maker dựa tài liệu design từ phía khách hàng - Đặt Q&A cho khách hàng nghiệp vụ chưa rõ (dưới review mentor) - Tiến hành thực coding hình Chỉnh sửa Maker - Lưu ý lại review góp ý từ mentor để fix lại hình Chỉnh sửa Maker - Tham gia testing fixbug hình “Estimate creation screen” - Tham gia testing fix bug hình “Chỉnh sửa Maker” - Tham gia integration test flow hình vừa hồn thành đợt dự án môi trường server test - Log bug xảy trình test - Tham gia fix bug chung với team - Tham gia test excution mơi trường production - Hồn thành khố thực tập viết báo cáo BÁO CÁO THỰC TẬP Tiến Anh Tạ Bảo Tiến 100% Hoàn thành tốt Chị Tạ Thị Kim Chi & Anh Trần Hữu Tính & Anh Tạ Bảo Tiến 100% Hoàn thành tốt 11 Chương 3: Chi tiết project Giới thiệu Dự án Amour Amour trang web hỗ trợ việc lựa chọn ước tính giá tiền sản phẩm nội địa Nhật Bản Nhóm khách hàng đề xuất sử dụng kiến trúc sư nhà thiết kế nội thất Chức Amour hỗ trợ cho khách hàng có bảng giá xác nhanh đồng thời hỗ trợ đặt hàng từ brand nội thất mà khách hàng mong muốn Một số chức bật: - Hỗ trợ tìm kiếm sản phẩm cho 20,000 sản phẩm đến từ nhiều brand nội thất khác toàn nước Nhật - Yêu cầu quotation (báo giá) xác thời điểm từ nhà cung cấp khác Thực Thực tập sinh Nguyễn Thanh Tuấn hỗ trợ, giúp đỡ tận tình từ anh chị mentor team Amour Đặc biệt anh Tiến (TeamLead) anh Tính (PM) dự án Kết 3.1 Màn hình chức chỉnh sửa Manufacturer BÁO CÁO THỰC TẬP 12 3.2 Màn hình Danh sách Manufacturers BÁO CÁO THỰC TẬP 13 3.3 Màn hình Chỉnh sửa Maker BÁO CÁO THỰC TẬP 14 3.4 Tổng kết Đã thực hình chức - Chỉnh sửa Manufacturer theo yêu cầu khách hàng - Danh sách Manufacturers theo yêu cầu khách hàng - Chỉnh sửa Maker theo yêu cầu khách hàng BÁO CÁO THỰC TẬP 15 TÀI LIỆU THAM KHẢO For VueJs, NuxtJs https://vuejs.org/ https://nuxtjs.org/ For BEM (style classname with BEM) http://getbem.com/ BÁO CÁO THỰC TẬP 16 TỔNG KẾT Như vậy, vòng tháng thực tập, thực tập sinh kịp hồn thành hình chức thông qua testing từ phận Tester Release cho khách hàng ổn thoả Tuy nhiều khó khăn q trình làm việc nhờ hướng dẫn tận tình từ anh chị team Amour nên thực tập sinh vượt qua thân học hỏi nhiều kinh nghiệm dự án thực tế Trong tương lai hy vọng thực tập sinh có nhiều hội để phát triển hoàn thiện thân Chân thành cảm ơn giúp đỡ anh chị team Dự án Amour giúp em có trải nghiệm làm việc thực tuyệt vời Cảm ơn anh Trần Hữu Tính giúp em hoàn thành báo cáo BÁO CÁO THỰC TẬP 17 ... chức chỉnh sửa Manufacturer BÁO CÁO THỰC TẬP 12 3.2 Màn hình Danh sách Manufacturers BÁO CÁO THỰC TẬP 13 3.3 Màn hình Chỉnh sửa Maker BÁO CÁO THỰC TẬP 14 3.4 Tổng kết Đã thực hình chức - Chỉnh sửa... thời gian tìm hiểu Lập trình nói chung Lập trình ứng dụng Web nói riêng, trải qua đồ án môn học trường, em mong muốn có thêm trải nghiệm thực tế việc làm ứng dụng Web có tính thực tiễn, đồng thời... server test - Log bug xảy trình test - Tham gia fix bug chung với team - Tham gia test excution mơi trường production - Hồn thành khố thực tập viết báo cáo BÁO CÁO THỰC TẬP Tiến Anh Tạ Bảo Tiến