BÁO CÁO THỰC TẬP Lập trình Front – end

[Trang 1] 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 Front – end Công ty thực tập: NCC Plus Viet Nam Người phụ trách: Bùi Minh Thái Thực tập sinh: Phạm Ngọc Anh Tín TP Hồ Chí Minh, tháng năm 2022 [Trang 2] LỜI MỞ ĐẦU Ngày nay, ngành phát triển ứng dụng web, mobile 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ẽ 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 phát triển giới, Việt Nam ngoại lệ Ngành công nghiệp phát triển web phát triển mạnh mẽ, để hoà nhập với tồn cầu Các cơng ty lớn kể đến VNG, Tiki, NCC, FPT, KMS,… Ngành lập trình web, đặc biệt thời đại 4.0 trở nên phát triển Và giới trẻ chúng em nguồn nhân lực quan trọng q trình phát triển Vì lí này, em định chọn lập trình web - cụ thể mảng frontend làm định hướng cho việc học làm việc sau Sau ba 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 game mơi trường chun nghiệp, em có dự định thực tập sau tết 2022 Vì vậy, em định chọn NCC Plus Việt Nam - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định [Trang 3] LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty NCC Plus Việt Nam 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 để tham gia vào khóa training dự án để có kinh nghiệm việc phát triển vận hành chương trình phần mềm đặc biệt phía mảng front – end 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 Bùi Minh Thái, training phần front-end angular, 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; cảm ơn chị , cho em hội để tham gia vào dự án, tích lũy thêm kinh nghiệm, cảm ơn anh Nguyễn Lê Linh , dẫn chúng em cách sống, kỹ thiếu làm việc công ty; cảm ơn anh Trịnh Đức Đại, training cho chúng em kiến thức quan trọng Next.js để làm sản phẩm thời gian qua 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 < TpHCM, ngày 15 tháng năm 2022> [Trang 4] NHẬN XÉT CỦA KHOA [Trang 5] MỤC LỤC MỤC LỤC Chương 1: Giới thiệu công ty thực tập Giới thiệu công NCC Plus Viet Nam 2 Sản phẩm 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 3 Thực project Lịch làm việc Chương 3: Chi tiết project Giới thiệu Website Thực 11 Kế hoạch 11 TÀI LIỆU THAM KHẢO 13 TỔNG KẾT 14 [Trang 6] Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty NCC Plus Viet Nam NCC Plus Việt Nam mạng lưới kỹ sư phần mềm kết nối, trẻ trung đầy nhiệt huyết Cơng ty có trụ sở Hà Nội, Việt Nam thành lập kỹ sư phần mềm giàu kinh nghiệm nhiệt huyết vào năm 2014-09-01 Là đội ngũ chuyên gia lành nghề lĩnh vực phát triển phần mềm NCC Plus sử dụng niềm đam mê với nhà phát triển để cung cấp ứng dụng phần mềm tốt Với kết hợp cơng nghệ, bí giao tiếp tuyệt vời, họ tạo giải pháp hồn chỉnh cho khách hàng Mục tiêu: Trở thành công ty phần mềm hàng đầu nhà cung cấp dịch vụ gia công phần mềm Xây dựng mối quan hệ lâu dài với khách hàng cung cấp dịch vụ khách hàng đặc biệt với giải pháp sáng tạo công nghệ tiên tiến Sản phẩm công ty NCC Plus Việt Nam cung cấp dịch vụ thuê để phát triển web , thiết bị di động trò chơi Chúng chuyên gia NET Java cung cấp dịch vụ dành riêng cho nhà phát triển cho C / C ++, JAVA , NET, PHP thiết bị di động [Trang 7] Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Lập trình Front-end” 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 web, đồ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 chun 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, 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 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 NCC Plus, 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 2.2 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, 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ố Open VPN GUI- sử dụng làm việc truy cập trang web cơng ty, GIT–Lập trình Git, Visual studio code - chương trình dùng phát triển ứng dụng hữu ích phổ biến với lập trình viên 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 nhau, so với việc dung IDE Tìm hiểu ngơn ngữ Angular Thời gian : tháng (6 tuần) Nội dung : Được training kỹ thuật ngôn ngữ Angular nâng cao, kiến thức quan trọng cho việc tối ưu code clean code [Trang 8] - Components Các kiến thức Components angular Câu lệnh dùng để tạo components angular ng generate component + name Một file components angular bao gồm:  .component.ts: sử dụng typescript  .component.html  .component.css  .component.spec.ts - Directives : Là lớp bổ sung cho hành vi bổ sung cho thành phần ứng dụng angular  Components  Attribute directives  Structural directives - Modules : - Dependency Injection : 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 với ngơn ngữ Angular Có kiến thức quan trọng cho việc lập trình ứng dụng web 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 Timesheet App Nội dung: Áp dụng kiến thức Angular để làm app đơn giản - Khái quát app Timesheet app ứng dụng dùng để quản lý công việc làm thời gian phát triển dự án [Trang 9] Ở đây, trainer yêu cầu timesheet phải quản lý project có timesheet thêm, xóa, sửa yêu cầu cập nhật cần thiết Ngồi cịn quản lý task timesheet - Giai đoạn khởi đầu: Bắt đầu lên kế hoạch phân chia cơng việc để hoàn thành project Timesheet hạn Khởi đầu với kiến thức Angular sử dụng HTML SASS để tạo UI cho project Timesheet Tìm hiểu thư viện hỗ trợ cho cơng việc tạo thiết kế vừa mắt nhìn cho project, công cụ hỗ trợ làm việc Visual studio code - Chọn thư viện hỗ trợ: Sử dụng thư việc hỗ trợ cho thiết kế Angular material Thư viện chứa components có sẵn áp dụng cài đặt Project timesheet bao gồm Form Add Form, Update Form,… để quản lý Form hay validate form phải dùng đến thư viện Form Builder angular - Lifecycle Hooks in Angular Một thành phần angular khởi tạo có lifecycle lớp, components có tính phát thay đổi, Angular kiểm tra xem thuộc tính có liệu thay đổi cập nhật chúng sau cho thấy thay đổi view components Lifecycle kết thúc phá hủy chúng ngOnInit(), ngOnDestroy() thành phần lifecycle - Sharing Data between child and parent Trong angular truyền liệu từ components cha vào components ngược lại nhờ chế @Input() @Output() Parent to child: [Trang 10] Child to parent: - Directives Là lớp bổ sung cho hành vi bổ sung cho thành phần ứng dụng angular o Built–in directives thành phần dùng để xây dựng nên phần view cho Angular, bao gồm: ngClass (thêm xóa thuộc tính lớp CSS), ngStyle (tùy chỉnh trực tiếp giao diện HTML), ngModel (Two-way binding) o Attribute directives thành phần thay đổi giao diện hành vi phần tử DOM thành phần angular thuộc tính [appHighlight],… [Trang 11] o Structural directives thành phần cung cấp câu lệnh if else, vịng lặp thay đổi bố cục DOM cách thêm xóa phần tử DOM bao gồm: ngIf, ngFor, ngSwitch… - Dependency Injection Dependency services objects mà class cần để biểu thị function mà chứa Dependency Injection (DI) mẫu thiết kế có lớp yêu cầu đến dependency thay tạo thêm - Pipes Pipes hàm đơn giản để sử dụng template expressions để chấp nhận giá trị đầu vào trả giá trị chuyển đổi Thực : - Áp dụng kiến thức Angular để xử lý logic bên project Đọc thêm tài liệu mạng, học youtube để có thêm nhiều kiến thức Angular … Tìm kiếm câu hỏi câu trả lời mạng Kết : - 2.4 Sau tháng thực tập làm Timesheet app angular Timesheet có chức mà trainer yêu cầu không giống 100% hoàn thành Reactjs / nextjs Nội dung : Học thêm ngôn ngữ Reactjs next.js - Về React: React thư viện Javascript để xây dựng giao diện người dùng Nó cho phép bạn tạo UI qua components - Về Next: [Trang 12] Next.js framework React cung cấp cho người dùng build UI trang web cách nhanh chóng, dễ dàng Chúng ta sử dụng React để xây dựng giao diện người dùng sau áp dụng bước tính Next.js để giải yêu cầu ứng dụng phổ biến routing, integrations, data fetching,… để cải thiện yêu cầu mặt UI next,js lựa chọn khơng tồi kết hợp với tailwind để style cho giao diện - Lập trình số ứng dụng với React next.js Theo hướng dẫn trainer, ngôn ngữ mới, framework em tiếp xúc phải làm app nhỏ để hiểu cách sử dụng nắm thêm kiến thức Do đó, q trình thực tập tiếp xúc với thư viện javascript hay framework react em tiến hành tạo app dễ sử dụng todo – app để áp dụng kiến thức học thêm cách áp dụng để có kinh nghiệm sử dụng dự án sau Thực : - Mỗi tuần report làm cho trainer tiến độ công việc chưa hoàn thành Tạo ứng dụng để áp dụng kiến thức học Kết quả: - Đã nắm thứ ngôn ngữ thiếu kinh nghiệm khâu xử lý liên quan đến UI hay logic Thực project Sau hai tháng training thực hành, thực tập sinh nắm kiến thực Angular, React, next.js Trong tháng thứ ba, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực project web cơng ty Vì dự án cơng ty nên sơ lược số thứ em làm Chi tiết em làm báo cáo chi tiết phần sau Lịch làm việc Tuần Công việc Người hướng dẫn Mức Nhận xét người [Trang 13] - - - - - - độ hồn thành Tìm hiểu cơng Chị Nguyễn Thị 100% ty, cách tổ chức Nhung 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ữ Anh Bùi Minh Angular Thái Thực tạo số app đơn giản todo – app để áp dụng kiến thức Tìm hiểu Anh Bùi Minh Angular material Thái UI để áp dụng tạo UI cho app timesheet Bắt đầu code UI Anh Bùi Minh xử lý logic Thái Sign in Sign up Tiếp tục code Anh Bùi Minh timesheet app Thái Hoàn thành Anh Bùi Minh chức Thái Timesheet app fix số bug Học cách áp dụng clean code vào Timesheet app Tiếp tục fix lỗi Anh Bùi Minh cải thiện Thái hướng dẫn [Trang 14] - - - - 10 11 - Timesheet App Hoàn thành Timesheet app Bước sang giai đoạn mới, bắt đầu với React next.js Làm số app đơn giản để áp dụng kiến thức học Báo cáo tiến độ công việc sẵn sàng để tham gia vào dự án Tham gia vào dự án công ty Sẵn sàng với kiến thức học để áp dụng vào dự án Bắt đầu làm UI đơn giản cho dự án Tiếp tục code Frontend cho dự án cơng ty Tìm hiểu thêm nhiều cách để xử lý UI cách mượt mà Nhận Task làm phần Register dự án Hoàn thành task Register dự án Chuyển sang nhận task Test lại task làm Anh Thái Bùi Minh Anh Đại Trịnh Đức Anh Đại Trịnh Đức Anh Đại Trịnh Đức [Trang 15] Chương 3: Chi tiết project Giới thiệu project Timesheet 1.1 Kế hoạch Như nói phần giới thiệu ngôn ngữ Angular Sau training ngôn ngữ Angular theo yêu cầu trainer, em bắt đầu tham khảo giao diện app Timesheet mà trainer cung cấp Giai đoạn khởi đầu: - Hoàn thành giao diện Timesheet đăng nhập, đăng ký - Sử dụng Back-end server có sẵn trainer cung cấp gọi API Login - Hồn thành Login UI lấy accessToken - Tạo giao diện Homepage để redirect login success - Áp dụng Auth guard để xử lý login failed - Áp dụng protected router Angular không login Kết quả: - Hầu hết xử lý logic hoàn thành Giai đoạn quản lý task: - Hoàn thành giao diện quản lý task - Hoàn thành thao tác CRUD task Kết quả: - Đã hoàn thành hầu hết trainer yêu cầu Giai đoạn quản lý project: - Hoàn thành giao diện phần quản lý project - Có thể filter, search theo tên project [Trang 16] - Hoàn thành thao tác CRUD phần project - Project Timesheet app có data lấy từ server - Đã team làm việc project - Hoàn thành show làm việc thành viên - Có thể chỉnh sửa số lượng thành viên tham gia project - Có thể chuyển trạng thái project active hay inactive Kết quả: - Đã hoàn thành hầu hết yêu cầu trainer - Timesheet app số hạn chế - Timesheet dừng mức hạn chế mặt kiến thức kinh nghiệm xử lý phần 1.2 Kết thu Nhờ giúp đỡ, góp ý nhắc nhở nhóm trainer cơng ty NCC Plus Việt Nam em hồn thành Timesheet app chưa có nhiều tính dừng mức qua em tiếp thu số kiến thức Angular có nhìn khác ngơn ngữ khác em học Giới thiệu project tham gia Dự án dự án nhỏ công ty sách bảo mật cơng ty nên em xin phép khơng thể nói tên dự án Ý tưởng dự án tạo website chứa thơng tin nhiều team IT để khách hàng lên thuê team IT làm cơng việc phù hợp mà khách hàng yêu cầu 2.1 Lên kế hoạch Công ty lên kế hoạch chia dự án thành sprint team nhận sprint Team chúng em nhận sprint với task đơn giản đăng ký, đăng nhập 2.2 Chuẩn bị [Trang 17] Chúng em chuẩn bị kiến thức front-end kiến thức liên quan đến next.js + tailwind để code giao diện login, register Thực thành viên team Front-End: - Nguyễn Đình Dũng Nguyễn Trọng Phước Phạm Ngọc Anh Tín Và giúp đỡ tận tình team support NCC Plus Việt Nam Kết Hiện em hoàn thành phần training angular framework số ngôn ngữ khác Hiện em tham gia dự án học hỏi để có thêm kinh nghiệm từ dự án thực tế [Trang 18] TÀI LIỆU THAM KHẢO For Angular Framework https://angular.io/start/ For Material UI https://material.angular.io/ For Next.js https://nextjs.org/docs For Logic Business https://stackoverflow.com [Trang 19] TỔNG KẾT Như vậy, vịng ba tháng ngắn ngủi, em kịp hoàn thành app Timesheet web Timesheet app có đầy đủ tính mà trainer yêu cầu Do thời gian có hạn nên em làm mức sau em tham gia vào số task cơng ty để biết thêm nhiều kiến thức dự án thực tế Chân thành cảm ơn giúp đỡ anh chị nhóm trainer NCC Plus Việt Nam, lời góp ý, nhắc nhở anh chị kinh nghiệm quý báu đúc kết qua năm để hướng dẫn thực tập sinh chưa có kinh nghiệm bọn em ... dung thực tập Đợt thực tập với chủ đề ? ?Lập trình Front- end? ?? 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 web, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, ... web cơng ty, GIT? ?Lập trình Git, Visual studio code - chương trình dùng phát triển ứng dụng hữu ích phổ biến với lập trình viên 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... hay logic Thực project Sau hai tháng training thực hành, thực tập sinh nắm kiến thực Angular, React, next.js Trong tháng thứ ba, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực project