Báo cáo thực tập lập trình ứng dụng WEB quản lý tổ chức sự kiện

1 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH 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 QUẢN LÍ TỔ CHỨC SỰ KIỆN Cơng ty thực tập : KMS Technology Người phụ trách : Dương Văn Nhất Thực tập sinh : Trương Minh Sang TP Hồ Chí Minh, tháng 11 năm 2020 Trương Minh Sang 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ư KMS Technology) 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 chuyên nghiệp, em định thực tập học kì Vì vậy, em định chọn KMS Technology - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Trương Minh Sang LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty KMS Technology 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êpj 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 Dương Văn Nhất, 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 Võ Ngọc Dũng 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 cô 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 Trương Minh Sang Tp.HCM, ngày tháng 11 năm 2020 Trương Minh Sang NHẬN XÉT CỦA KHOA Trương Minh Sang 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 KMS Technology 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 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 TÀI LIỆU THAM KHẢO 19 TỔNG KẾT 20 Trương Minh Sang Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty KMS Technology KMS Technology thành lập năm 2009, công ty chuyền cung cấp dịch vụ phát triển sản phẩm phần mềm Sau 11 năm hoạt động, KMS xây dựng đội ngũ 1000 nhân viên Mỹ Việt Nam, phát hành sản phẩm phần mềm thị trường giới KMS Technology có văn phịng đặt Mỹ Việt Nam, phân phối phần mềm giải pháp outsourcing cho nhiều công ty khác Sản phẩm công ty Ngoải giải pháp outsourcing, cơng ty cịn có sản phẩm phầm mềm phát triển: QASymphony – Giải pháp automation test dựa AI cho tảng đám mây devops, Katalon – Nền tảng automation testing, Kobiton – Nền tảng testing dựa AI sử dụng thiết bị thật Trương Minh Sang Chương 2: Nội dung thực tập Đợt thực tập với dự án “Ứng dụng Web quản lí tổ chức kiện” nhằm mục đích giúp sinh viên thực tập đào tạo lập trình ứng dụng tảng 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 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 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 KMS Technology, 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 Gitlab - 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 Trương Minh Sang 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 cịn 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 Lập trình front end ứng dụng web với ReactJs Thời gian : 10 ngày Nội dung: Các kiến thức ReactJs để tham gia xây dựng phía front end cho ứng dụng web sử dụng công ty - Khái niệm ReactJs Năm khái niệm ReactJs, thư viện Javascript dùng cho việc xây dựng thành phần giao diện tái sử dụng Trương Minh Sang Ngồi ra, mentor cịn cung cấp cho thực tập sinh khái niệm môi trường web DOM, HTML, CSS, HTTPS, - Mơ hình server-client: Cách mơ hình server-client sử dụng phổ biến lập trình ứng dụng web Trong mơ hình này, React đóng vai trị quan trọng xây dựng ứng dụng front end phía client Ngồi việc lập trình front end phải có việc giao tiếp, thảo luận với thành viên lập trình back end phía server để thực giao tiếp phía giao thức Https - API Calls Là thao tác app phía front end giao tiếp với RESTful APIs phía server thơng qua giao thức HTTPS nhằm thực hành động để lưu xuống sở liệu - State management Các nguyên lí quản lí state (trạng thái) ứng dụng front end Quản lí app state để lưu liệu liên quan đến trạng thái app người dùng sử dụng Thực thư viện Redux, Mobx, - Routing Việc quản lí đường dẫn app để đưa người dùng đến tài nguyên phù hợp đưa đến trang lỗi có xảy Sử dụng React Router - Forms Các vấn đề liên quan đến form để lấy input người dùng Là thành phần quan trọng ứng dụng web để nhận input tương tác từ người dùng Việc quản lí form với state form, validation submit Thực : - Tham gia đầy đủ buổi trainning Làm tập thực hành để làm quen với khái niệm, … Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết : - Hiểu khái niệm lập trình front end ứng dụng web HIểu cách làm việc lập trình viên front end với back end Trương Minh Sang 10 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 tháng tiếp theo, mentor hướng dẫn thực tập sinh áp dụng kiến thức học để tham gia đội ngũ phát triển dự án ứng dụng web Chi tiết dự án nói phần sau Lịch làm việc Cơng việc Tuần 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 Typescript - Thực hành Typescript - Làm quen ReactJs - Tìm hiểu ReactJs nâng cao - Thực hành ReactJs nâng cao - Ứng dụng ReactJs vào kiến trúc ứng dụng web - Phát triển khái niệm ứng dụng front end Bắt đầu Sprint: - Lên kế hoạch Sprint - Người hướng dẫn Mức độ hoàn thành Nhận xét người hướng dẫn Chị Ánh Trần Anh Nhất Dương Anh Nhất Dương anh Dũng Võ Anh Nhất Dương anh Dũng Võ Anh Dũng Võ toàn đội ngũ Trương Minh Sang 11 Planning Làm quen với source code dự án phát triển - Làm quen với APIs back end để sử dụng - Tìm hiểu sitemap ứng dụng Giai đoạn Sprint: - Viết phần trang landing page kiện công ty - Kết hợp phần viết vào trang landing page để nhân viên cơng ty đăng kí tham gia kiện Giai đoạn Sprint: - Viết field forms để in kết JSON cài đặt người dùng phía admin - Fix số bug UI Giao đoạn cuối sprint - Fix bug QC báo cáo - Sprint Review Sprint Retrospective Bắt đầu sprint tiếp theo: - Lên kế hoạch Sprint Planning - Nghiên cứu cách thực dynamic forms - Lên ý tưởng thiết kế cấu trúc dynamic forms Giai đoạn Sprint: - 10 Anh Nhất Dương Anh Nhất Dương Anh Nhất Dương đội ngũ phát triển Anh Nhất Dương toàn đội ngũ Anh Nhất Dương Trương Minh Sang 12 Viết thành phần giao diện mockup cho hình dynamic form bên phía admin - Nghiên cứu APIs cần thiết làm việc với back end Giai đoạn Sprint: - Viết chức dynamic forms - Chức tạo form động cho loại form kiện Giai đoạn cuối sprint giai đoạn kết thúc, báo cáo : - Hoàn thành chức dynamic forms - Fix bug - Sprint Review Sprint Retrospective - Báo cáo cuối đợt thực tập - 11 12 anh Dũng Võ Anh Nhất Dương Anh Nhất Dương toàn đội ngũ Trương Minh Sang 13 Chương 3: Chi tiết project Giới thiệu dự án tính thực Eventify dự án ứng dụng web xây dựng Java Typescript (ReactJs) nhằm để quản lí tốt kiện đã, tổ chức cơng ty Ứng dụng có domain client – dùng cho người dùng chung nhân viên cơng ty để đăng kí tham gia kiện – admin – nhân viên thuộc phận Admin công ty sử dụng để quản lí thơng tin kiện Các chức domain Client: Ứng dụng sử dụng phía client để hỗ trợ nhân viên công ty KMS tìm kiếm thơng tin kiện diễn cơng ty Khi đăng kí tham gia kiện Các kiện viết thành landing page riêng dynamic với đường dẫn khác Do event mang tính đặc trưng riêng Trương Minh Sang 14 Trương Minh Sang 15 Admin: Ứng dụng sử dụng phía admin để hỗ trợ phận Admin cơng ty KMS quản lí thơng tin kiện diễn cơng ty Các admin thêm, xóa, sửa event cơng ty, sửa form đăng kí lấy thơng tin đăng kí nhân viên, Các thơng tin đăng kí sử dụng cho process kiện công ty Trương Minh Sang 16 Chức thực Một phần landing page kiện Flashatch: Mô tả: Flashatch kiện KMS vào khoảng tháng 10 nhằm vận động nhân viên sử dụng sáng tạo lập trình trị chơi lập trình AI diễn web Kết thực hiện: Cài đặt banner, thông tin kiện nút đăng kí kiện Chức Dynamic Forms: Mơ tả Chức Dynamic Forms giúp admin tạo form cách flexible kiện chọn (như Google Forms) Admin thêm trường, validation trường đó, preview form thêm thông tin phụ (như Group sử dụng form), Kết thực hiện: Trương Minh Sang 17 Cài đặt hình Có control để người dùng nhập meta data form tạo Có nút preview, save discard Có thể thay đổi tên form, loại form, thông tin phụ, Trương Minh Sang 18 Thực - Trương Minh Sang Và giúp đỡ tận tình đội ngũ phát triển CoE thuộc KMS Technology Kế hoạch Giai đoạn Sprint đầu: - Hoàn thành thành phần giao diện cho Flashatch Lấy thông tin động từ server thời gian, topic, trường đăng kí Thanh nav bar Nút đăng kí Kết : - Thực tồn chức Giai đoạn Sprint tiếp theo: - Hoàn thành UI cho chức - Hoàn thành state cho input người dùng để gửi server - Validate input người dùng trước gửi server - Tên, loại thông tin thêm form - Nút preview form Kết : Đã hồn thành tồn tính Trương Minh Sang 19 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 Redux, Formik, React Router, RxJs Redux - A predictable state container for JavaScript apps | Redux Formik: Build forms in React, without the tears React Router: Declarative Routing for React.js RxJS - BLACK LIVES MATTER (rxjs-dev.firebaseapp.com) Trương Minh Sang 20 TỔNG KẾT Như vậy, vòng mộ 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 quản lí kiện 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 chị team CoE KMS Technology giúp đỡ em hồn thành chức Trương Minh Sang ... AI sử dụng thiết bị thật Trương Minh Sang Chương 2: Nội dung thực tập Đợt thực tập với dự án ? ?Ứng dụng Web quản lí tổ chức kiện? ?? nhằm mục đích giúp sinh viên thực tập đào tạo lập trình ứng dụng. .. khái niệm lập trình front end ứng dụng web HIểu cách làm việc lập trình viên front end với back end Trương Minh Sang 10 Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực ReactJs,... 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í,