báo cáo thực tập lập trình WEBSITE tìm việc JOYWORK

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 WEBSITE TÌM VIỆC JOYWORK Cơng ty thực tập : GSOFT Người phụ trách : Phạm Tri Thức Thực tập sinh : Nguyễn Thành Danh TP Hồ Chí Minh, tháng năm 2021 Nguyễn Thành Danh LỜI MỞ ĐẦU Ngày nay, với tốc độ phát triển vô mạnh mẽ, ngành cơng nghiệp phần mềm, có tảng 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ần mềm trẻ Việt Nam phát triển mạnh mẽ, để hịa nhập với cơng ty hàng đầu phần mềm giới Trong đó, cơng ty phần mềm nước (như GSOTF) góp phần lớn vào phát triển tích cực ngành công nghiệp phần mềm Việt Ngành công nghiệp phần mềm sinh nhu cầu giải vấn đề thực tế cách sử dụng hệ thống phần mềm Và kỹ sư phần mềm, phần lớn người trẻ, đóng vai trị quan trọng cơng việc phát triển phần mềm Vì lý này, em định chọn lập trình phần mềm, cụ thể ứng dụng web, làm định hướng cho việc học tập 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 quy trình phát triển phần mềm mơi trường chun nghiệp, em định thực tập học kì Vì vậy, em định chọn GSOTF- mơi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Nguyễn Thành Danh LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty GSOTF 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 anh mentor đội ngũ phát triển, em tiếp thu kiến thức quan trọng để tham gia qui trình phát triển phần mềm chuyên nghiệp Chân thành cảm ơn anh chị đội ngũ phát triển bỏ nhiều thời gian, công sức để hướng dẫn em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Nguyễn Gia Bảo, training ReactJs, hướng dẫn, giúp đỡ cho 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 anh Phạm Tri Thức dẫn em cách tham gia vào qui trình phát triển kiến trúc phần mềm, cách làm việc team 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 Nguyễn Thành Danh Tp.HCM, ngày 15 tháng 11 năm 2020 Nguyễn Thành Danh NHẬN XÉT CỦA KHOA Nguyễn Thành Danh 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 GSOFT .6 Sản phẩm công ty Chương 2: Nội dung thực tập .7 Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật Các công cụ làm việc Tìm hiểu ngôn ngữ Typescript thư viện ReactJs Lập trình front end ứng dụng web với ReactJs Thực project 10 Lịch làm việc 10 Chương 3: Chi tiết project 13 Giới thiệu dự án tính thực .13 Các chức domain .13 Chức thực 16 Thực 18 Kế hoạch .18 Nguyễn Thành Danh Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty GSOFT GSOFT công ty phần mềm hướng cơng nghệ, sáng lập người có tâm huyết, có lực kinh nghiệm chun mơn cao với mong muốn hình thành phát triển cơng ty phần mềm hàng đầu Việt Nam vươn tầm giới GSOFT cung cấp giải pháp phần mềm quản lý cho doanh nghiệp tập đoàn, tổng công ty, ngân hàng, trường đại học, bệnh viện, giải pháp kết nối cộng đồng tảng internet, hệ thống website dịch vụ liên quan đến website, hệ thống lĩnh vực thương mại điện tử phủ điện tử GSOFT ln tập trung nghiên cứu ứng dụng tinh hoa công nghệ vào thực tiễn đời sống nhằm mục đích nâng cao chất lượng sống cộng đồng Sản phẩm công ty Ngoải giải pháp outsourcing, onsite công ty cung cấp phần mềm quản trị Nổi bật Hệ thống phần mềm quản trị đầu tư mua sắm quản lý tài sản Nguyễn Thành Danh gAMSPro Phần mềm gồm phân hệ lớn Quản lý hàng hóa, Quản lý nhà cung ứng, Quản lý kế hoạch mua sắm, Quản lý tài sản, Quản lý mua sắm, Quản lý bất động sản Nguyễn Thành Danh Chương 2: Nội dung thực tập JoyWork dự án protoype cơng ty nhằm giúp kết nói nhà tuyển dụng người tìm việc Thơng qua dự án sinh viên hiểu kiến trúc tổng quan Domain Driven Design, React, Angular Đồ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 phần mềm 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 đội ngũ HR 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 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 GSOFT, 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 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, mentor hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho cơng việc phát triển Một số phần mềm số Git AzureDevOps - sử dụng làm việc quản lí cấu hình dự án, VSCode – trình soạn thảo văn phổ biến với nhiều môi trường phát triển tiện dụng cho 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 Tìm hiểu ngơn ngữ Typescript thư viện ReactJs Thời gian : ngày Nguyễn Thành Danh Nội dung : Được training ngôn ngữ Typescript thư viện ReactJs, kiến thức quan trọng cho việc phát triển front end ứng dụng web - Lập trình hướng đối tượng 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 model sử dụng hệ thống - Các thành phần website (HTML/CSS/JS): Cách trình duyệt chạy ứng dụng web phía front-end Các khái niệm HTML/CSS/JS cách chúng hoạt động trình duyệt - Thư viện ReactJs Thực tập sinh hướng dẫn cách sử dụng thư viện ReactJs để lập trình thành phần website phía front-end Được hướng dẫn cách ReactJs thực hóa việc lập trình thành phần nêu - Typescript: Được hướng dẫn ngôn ngữ Typescript cú pháp điều khiển luồng, vịng lặp, ; tính chất Typescript interface, kiểu union, ép kiểu, ; khác biệt với Javascript để ứng dụng với qui mô đội ngũ phát triển lớn 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 : - Nâng cao kỹ lập trình với ngơn ngữ Typescript thư viện ReactJs Có kiến thức quan trọng cho việc lập trình front-end 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 Tìm hiểu NET Core ABP Framework Thời gian : ngày Nội dung : Được training NET Core framework, kiến thức quan trọng cho việc phát triển backend ứng dụng web - Lập trình hướng đối tượng 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 cịn hướng dẫn cách thiết kế lớp cho model sử dụng hệ thống - Tổng quan giao tiếp tầng backend Nguyễn Thành Danh 10 - Thực tập sinh tìm hiểu thành phần backend như: + Web API Controller: nhận request từ client tương ứng xử lí route mà request gửi tới tự động nhận yêu cầu Và làm nhiệm vụ gửi response client Controller gọi Application Service để xử lí yêu cầu đó.` Nguyễn Thành Danh 23 Nguyễn Thành Danh 24 Nguyễn Thành Danh 25 Nguyễn Thành Danh 26 Admin: Ứng dụng sử dụng phía admin để cài đặt phân quyền, duyệt tài khoản, quản lý danh mục, quản lý nghiệp vụ Chức thực Tích hợp Server-side Abp Library vào React Mô tả:  JoyWork dự án tìm kiếm việc làm, để kết nối website tới người dùng SEO yếu tố bắt buộc Trong React thư viện để tạo Single Page Application (SPA) nên việc tối ưu hóa SEO cho SPA cịn gặp nhiều hạn chế.Vì chuyển JoyWork từ React SPA sang Server Side Rendering (SSR) bắt buộc Kết thực hiện: Tích hợp Express NodeJS để Server Side Rendering React sử dụng renderToString() hydrate() để trả HTML tĩnh cho server host Express Nguyễn Thành Danh 27 Tích hợp MobX vào React để quản lý state Mơ tả:  Tích hợp MobX vào quản lý State React, thay truyền State Props component phải thông qua nhiều lớp khác State Props lưu trữ Store quản lý Global Store Kết thực hiện:  Xây dựng kiến trúc hoàn chỉnh: Các component View truy cập tới Store Nguyễn Thành Danh 28 Chức xây dựng request/response: Mô tả  Xử dụng Axios để xây dựng service gọi request nhận response từ backend với chức năng: query string động, chèn thuộc tính vào header request, chặn response lỗi trả từ backend Nguyễn Thành Danh 29 Kết thực hiện:  Có thể Authenticate/Authorize dùng JWT token chèn vào header request, chặn lỗi nghiệp vụ từ backend thông báo cho người dùng Chức xử lý Form: Mô tả Chức xử lý Form giúp lưu trữ trạng thái Form (Form State), xác thực trường liệu Form (Form validation) submit Form Kết thực hiện: Cài đặt thư viện React-FinalForm thư viện xác thực revalidate để xử lý Form như:  Xử lý form đăng nhập  Xử lý form đăng ký  Xử lý form chỉnh sửa thông tin người dùng  Xử lý form chỉnh sửa thông tin tìm việc  Xử lý form chỉnh sửa thơng tin học vấn Nguyễn Thành Danh 30 Nguyễn Thành Danh 31 Nguyễn Thành Danh 32 Nguyễn Thành Danh 33 Nguyễn Thành Danh 34 Chức xử lý Form: Mô tả Chức xử lý Form giúp lưu trữ trạng thái Form (Form State), xác thực trường liệu Form (Form validation) submit Form Kết thực hiện: Cài đặt thư viện React-FinalForm thư viện xác thực revalidate để xử lý Form như: Nguyễn Thành Danh 35 Thực - Nguyễn Thành Danh - Và giúp đỡ tận tình đội ngũ phát triển P.DA3 thuộc Gsoft Kế hoạch Giai đoạn Sprint đầu: - Hoàn thành thành phần giao diện cho JoyWork Tích hợp thư viện Abp Angular NET Zero vào React Layout với Header, Footer, thành Navbar, control phù hợp với Mobile User Chức đăng ký/đăng nhập Kết : - Thực toàn chức Giai đoạn Sprint tiếp theo: - Hoàn thành UI cho chức Xây dựng React Server Side Rendering Tích hợp thư viện Mobx, Revalidate, FinalForm Viết backend tạo API Sử dụng API để hoàn thiện form xử lý thơng tin người dùng Kết : Đã hồn thành tồn tính Nguyễn Thành Danh 36 TÀI LIỆU THAM KHẢO For ReactJs Getting Started – React (reactjs.org) For Typescript TypeScript: Typed JavaScript at Any Scale (typescriptlang.org) For npm, webpack npm | build amazing things (npmjs.com) webpack For MobX, FinalForm, React Router, RxJs, Razzle MobX React Final Form (final-form.org) React Router: Declarative Routing for React.js RxJS - BLACK LIVES MATTER (rxjs-dev.firebaseapp.com) Introduction – Razzle (razzlejs.org) Nguyễn Thành Danh 37 TỔNG KẾT Như vậy, vòng tháng training hai tháng tham gia phát triển, thực tập sinh kịp hoàn thành số chức ứng dụng web tìm việc JoyWork Các chức Mentor đội ngũ QC review Các bug fix giảm thiểu đến mức tối đa deploy thành sản phẩm công ty Chân thành cảm ơn giúp đỡ anh team P.DA3 Gsoft giúp đỡ em hồn thành chức Cảm ơn thầy Phan Trung Hiếu giúp em hoàn thành báo cáo Nguyễn Thành Danh ... hoạt động trình duyệt - Thư viện ReactJs Thực tập sinh hướng dẫn cách sử dụng thư viện ReactJs để lập trình thành phần website phía front-end Được hướng dẫn cách ReactJs thực hóa việc lập trình thành... ứng dụng web HIểu cách làm việc lập trình viên front end với back end Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực ReactJs, Typescript lập trình front end web Trong hai... 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, mentor hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho công việc phát triển