Tài liệu Lập trình frontend với reactjs (báo cáo thực tập)

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 FRONTEND VỚI REACTJS Công ty thực tập: TGL Solutions Người phụ trách: Phan Ngọc Thịnh Thực tập sinh: Nguyễn Đức khang TP. Hồ Chí Minh,15 tháng 06 năm 2022 Nguyễn Đức Khang LỜI MỞ ĐẦU Ngày nay, với sự phát triển nhanh chóng của internet, các ứng dụng web cũng ngày càng nhiều nên việc phát triển các ứng dụng web cũng đã trở nên rất phổ biến trong ngành công nghệ thông tin. Các ứng dụng web được sinh ra là do nhu cầu sử dụng internet hiện nay rất cao. Các ứng dụng web cũng đem lại nhiều thuận tiện cho người dùng khi chỉ cần thiết bị hỗ trợ kết nối mạng là đã sử dụng được. Vì lý do này, em quyết định chọn lập trình web làm định hướng cho việc học tập của mình. Sau hơn ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũng như muốn được tham gia làm ứng dụng web trong một môi trường chuyên nghiệp, em có dự định là sẽ thực tập trong học kỳ này. Vì vậy, em quyết định chọn TGL Solutions - một môi trường lý tưởng, hiện đại, chuyên nghiệp, trẻ trung năng động - là nơi sẽ giúp em thực hiện được dự định này. Nguyễn Đức Khang LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TGL Solutions đã tạo điều kiện cho em có cơ hội được thực tập tại công ty. Chỉ trong một thời gian ngắn, nhưng nhờ sự giúp đỡ nhiệt tình của mọi người trong công ty, sự hỗ trợ nhiệt tình của các anh trong team TNF, em đã tiếp thu được những kiến thức quan trọng để có thể cùng các thành viên trong team tạo ra một ứng dụng web . Chân thành cảm ơn các anh trong team TNF đã bỏ ra nhiều thời gian, công sức để hướng dẫn em hoàn thành đợt thực tập này. Đặc biệt cảm ơn chị Lê Bê Ly, đã hướng dẫn, giúp đỡ cho em tận tình khi em gặp những khó khăn trong việc làm quen với môi trường mới. Cảm ơn anh Phan Ngọc Thịnh – team leader đã quan tâm, giúp đỡ em trong khoảng thời gian thực tập. Và gửi lời cảm ơn đến tất cả các thành viên trong team. Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điều kiện em làm bài báo cáo này. Nguyễn Đức Khang TpHCM, ngày 16 tháng 06 năm 2022 Nguyễn Đức Khang NHẬN XÉT CỦA KHOA .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. .............................................................................................................................................. Nguyễn Đức Khang Chương 1: Giới thiệu công ty thực tập ............................................................................ 7 1. Giới thiệu công ty TGL Solutions ....................................................................... 7 2. Sản phẩm của công ty .......................................................................................... 8 2.1. MIRAI EC System ............................................................................................. 8 2.2. APP QUAY SỐ ĐA CHỨC NĂNG (QUAY SỐ ONLINE/ TRỰC TIẾP/ QR CODE) .................................................................................................................... 10 2.3. APP QUẢN LÝ SERIAL CODE .................................................................... 11 Chương 2: Nội dung thực tập ........................................................................................ 12 1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty .................................... 12 2. Tìm hiểu về dự án .............................................................................................. 12 3. Nghiên cứu kỹ thuật .......................................................................................... 12 3.1. Các công cụ làm việc...................................................................................... 12 3.2. Tìm hiểu về Material, React hook form, Tailwind, redux, custom hook, graphql, rest API, sử dụng TypeScript. .................................................................. 13 3.3. Lập trình Wed Frontend với ReactJS và các thư viện hỗ trợ ......................... 14 4. Thực hiện project ............................................................................................... 14 5. Lịch làm việc ..................................................................................................... 14 Chương 3: Chi tiết về project......................................................................................... 16 1. Giới thiệu về dự án ............................................................................................ 16 2. Các màn hình chính ........................................................................................... 16 2.1 Màn hình quản lý các công nhân đi khảo sát .................................................... 16 Nguyễn Đức Khang 2.2 Màn hình thu hoạch, theo dõi tiến độ và nội dung khảo sát, xuất các file báo cáo ........................................................................................................................... 17 2.3 Màn hình tạo ra các form phức tạp đáp ứng rộng rãi các vấn đề về mẫu khảo sát. ........................................................................................................................... 17 2.4 Màn hình quản lý các công ty .......................................................................... 18 2.5 Màn hình hỗ trợ nhân viên quản lý Job của mình. ........................................... 19 Chương 4: Giải thưởng .................................................................................................. 20 Nguyễn Đức Khang Chương 1: Giới thiệu công ty thực tập 1. Giới thiệu công ty TGL Solutions Công ty Cổ phần TGL Solutions (gọi tắt TGL, tiếng Việt: ) là một công ty Việt Nam trong lĩnh vực IT hướng đến việc cung cấp các giải pháp (solutions) một cách thông minh và nhanh nhất, qua đó tối ưu hoá lợi nhuận cho khách hàng. Công ty cổ phần TGL Solutions được thành lập vào tháng 07/2019 với hai thành viên. Từ khi thành lập cho đến nay, công ty luôn phát triển không ngừng và đặt mục tiêu phát triển liên tục vững mạnh hơn nữa trong thời gian tới. Hiện có hơn 50 kỹ sư tài năng đang làm việc, cùng nhau xây dựng hình ảnh TGL năng động và chuyên nghiệp trên bản đồ công nghệ thông tin. Phương châm: Smart & Speed Solutions Giá trị cốt lõi: Xây dựng công ty với 2 giá trị cốt lõi là: NHÂN HOÀ - NHÂN: là con người. Tôn chỉ của TGL Solutions chính là xây dựng công ty lấy con người làm trung tâm. Lợi nhuận thu được từ việc kinh doanh sẽ được dùng để đầu tư về trang thiết bị để tạo môi trường làm việc tốt hơn, đầu tư các khóa đào tạo để nâng cao kỹ năng cho mọi người. Bên cạnh đó, sẽ có các kì bonus theo dự án (không định kỳ), các kỳ đánh giá tăng lương 2 lần/năm. - HÒA: là sự hoà hợp, là sự đồng thuận, đồng lòng.Khi bàn luận về một vấn đề, chúng ta có thể thoải mái tranh luận, thoải mái góp ý.Sẽ có một lãnh đạo đưa ra quyết định cuối cùng và chịu trách nhiệm về quyết định của mình. Định hướng công ty: Nguyễn Đức Khang Tăng số lượng nhân viên lên 40+ vào tháng 12/2021, 100 nhân viên vào tháng 12/2022 Tiếp tục đi theo hướng chính là outsourcing trong vòng 3 năm tới. - Một là, theo xu hướng chung của thế giới là cloud services. Công ty sẽ mở rộng service từ AWS ra GCP và Azure. Chinh phục SaaS (Salesforce) - Hai là, xông pha vào một lĩnh vực hẹp, ở đó IT chưa phát triển lắm và còn ít đối thủ cạnh tranh. Hiện tại công ty đang hợp tác với 1 kiến trúc sư rất giỏi người Nhật để phát triển các projects liên quan đến xây dựng nhà ở, kiến trúc 2. Sản phẩm của công ty Những sản phẩm phần mềm của TGL Solutions được phát triển nhắm tới tệp khách hàng rất đa dạng, từ trong nước cho tới ngoài nước, từ chính phủ cho tới các doanh nghiệp, tập đoàn lớn. Là một công ty chuyên cung cấp các giải pháp, các sản phẩm trải rộng trên nhiều lĩnh vực. TGL Solutions chuyên cung cấp các sản phẩm phần mềm phục vụ nhiều loại hình dịch vụ khác nhau, đem lại trải nghiệm tốt nhất cho người dùng. Một số dự án nổi bật: 2.1. MIRAI EC System TÍNH NĂNG: - Tính năng đặt hàng, mua bán sản phẩm, tích lũy và đổi point - Góc VR Showroom, góc video giới thiệu sản phẩm của các nhà sản xuất - Tính năng livestream: Các streamer có thể thực hiện tổ chức livestream, lên lịch livestream.Người dùng có thể xem livestream của các streamer và mua hàng trực tiếp - Tính năng đấu giá sản phẩm: Các streamer có thể tổ chức đấu giá sản phẩm. Người dùng có thể tham gia đấu giá sản phẩm, người đấu giá thành công có thể thực hiện order với giá thắng. Nguyễn Đức Khang - Trang admin: Trang admin: Quản lý sản phẩm, quản lí đặt hàng, số points, doanh thu... ; Xuất excel theo đơn đặt hàng, theo sản phẩm, theo người dùng ...; Có thể tạo các link quickLogin đăng nhập vào trang Top, Admin; Có hệ thống gửi mail thông báo các trạng thái của đơn đặt hàng, trạng thái thay đổi points đến người dùng và người chịu trách nhiệm đơn hàng. CÔNG NGHỆ: Nextjs, Ant Design, Agora, Socket, GraqhQL, webRTC, NestJS, Base Web Nguyễn Đức Khang 2.2. APP QUAY SỐ ĐA CHỨC NĂNG (QUAY SỐ ONLINE/ TRỰC TIẾP/ QR CODE) TÍNH NĂNG: - Quay số online hoặc trực tiếp tại cửa hàng - Quản lý thông tin người quay số, kết quả xổ số, thiết lập tỉ lệ xổ số mong muốn - Tùy chỉnh thiết kế thích hợp với user dựa trên mô hình SaaS CÔNG NGHỆ: ReactJS (Nextjs), Oracle, GraphQL, NestJS Nguyễn Đức Khang 2.3. APP QUẢN LÝ SERIAL CODE TÍNH NĂNG: - Tạo các Serial Code để quay số trúng thưởng - Quản lý các Serial code đã tạo - Tự động xuất các QR Code tương ứng với Serial Code CÔNG NGHỆ: ReactJS (Nextjs), Oracle, GraphQL, NestJS Nguyễn Đức Khang Chương 2: Nội dung thực tập Đợi thực tập nhằm giúp các em lắm rõ các kiến thức về lập trình web nói chung và công nghệ ReactJS, và các thư viện UI, xử lý nghiêp vụ nói riêng.Đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, giao tiếp, trao đổi với các thành viên khác trong công ty. Tại công ty, sinh viên có cơ hội được học tập, khám phá và làm việc trong một môi trường phát triển ứng dụng web chuyên nghiệp. 1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty Thời gian : 1 ngày Nội dung : Giới thiệu về công ty, cách tổ chức của công ty Được nghe giám đốc công ty giới thiệu về công ty, quá trình thành lập và 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ủa công ty. Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong công việc… Kết quả : Hiểu thêm về công ty TGL Solutions, quá trình thành lập và phát triển. Có thêm hiểu biết về cách thức làm việc trong một công ty công nghệ thống tin đồng thời thực tập sinh có ý thức hơn trong việc làm việc có kế hoạch, trao đổi, giải thích với những thành viên khác trong công ty. 2. Tìm hiểu về dự án Thời gian : 5 ngày Nội dung: Giới thiệu, đưa tài liệu để tìm hiểu về dự án Thực tập sinh được người hướng dẫn giới thiệu tổng quan về dự án Ngoài ra, thực tập sinh được đưa các tài liệu liên quan về dự án để tìm hiểu Kết quả : Hiểu thêm về dự án sẽ làm, về cách làm việc với vai trò lập trình viên trong công ty. 3. Nghiên cứu kỹ thuật 3.1. Các công cụ làm việc Thời gian: 2 ngày Nội dung: Tìm hiểu về các công cụ sẽ được sử dụng trong quá trình làm việc. Nguyễn Đức Khang Trong thời gian này, người phụ trách đã hướng dẫn thực tập sinh tìm hiểu về các công cụ sẽ giúp ích cho trong công việc sau này. Một số phần mềm trong số đó như Microsoft Teams - sử dụng trong quá trình làm việc nhóm, Visual Studio Code - một công cụ hỗ trợ lập trình, SourceTree – Git GUI clients, gitlab. Thực hiện : Làm quen với cách sử dụng các phần mềm đã nêu trên. Kết quả : Lập trình sử dụng các công cụ miễn phí. 3.2. Tìm hiểu về Material, React hook form, Tailwind, redux, custom hook, graphql, rest API, sử dụng TypeScript. Thời gian: 10 ngày Nội dung: Được hướng dẫn thêm về các kỹ thuật lập trình web nâng cao, những kiến thức quan trọng cho việc tối ưu lập trình, quản lý state, validate form. Sử dụng các thư viện UI như Material, Tailwindcss. - Nắm dõ các kiến thức cơ bản về validate form, register, watch, get/setValue và các vấn đề liên quan đến React hook form. - Quản lý router, phân quyền qua react router dom. - Thực hiện css một cách hiệu quả và nhanh chóng với Tailwindcss. - Sử dụng ổn định các component của Material UI. - Quản lý sử dụng state hiệu quả với các Hook và redux. - Làm quen và sử dụng thành thạo custom hook. - Sử dụng graphql, rest API để call API. - Học TypeScript. Thực hiện: - Tham gia meeting hàng ngày của team - Hoàn thành các công việc được giao - Đọc source và tham gia chỉnh sửa các tính năng nhỏ theo yêu cầu của leader. Kết quả: - Nâng cao kỹ năng của bản thân. - Được tiếp xúc với nhiều công nghệ mới như graphql, tailwind. - Sử dụng thành thạo các hook và có khả năng custom hook một cách hiệu quả. - Tối ưu hoá việc rerender, tăng hiệu xuất ứng dụng. Nguyễn Đức Khang - Biết thêm về nhiều cách thiết kế UI cho phù hợp với UI/UX. - Sử dụng TypeScript để code tường minh, rõ dàng, dễ bảo trì. 3.3. Lập trình Wed Frontend với ReactJS và các thư viện hỗ trợ Nội dung: Do đã hiểu rõ và ôn lại các kiến thức ở trên. Việc lập trình web trở lên dễ dàng hơn. Biết nhiều hướng giải quyết giúp cho lựa chọn và triển khai dự án một cách tốt nhất Thực hiện : - Tham gia các buổi meeting hàng ngày. - Làm các công việc được giao. - Tham gia chỉnh sửa, phát triển thêm tính năng cho dự án Kết quả : - Nắm rõ về cách lập trình web nói riêng và với thư viện ReactJS/React TypeScrip nói chung. - Thực hiện cải thiện UI/UX của dự án. - Tối ưu cách quản lý và tổ chức source code hiệu quả. 4. Thực hiện project Sau thời gian được hỗ trợ và củng cố kệ thức thực tập sinh được giới thiệu, hướng dẫn và thực hành, thực tập sinh đã nắm được những kiến thức cơ bản về frontend, sao đó được tham gia dự án thực tế của team. 5. Lịch làm việc Tuần 1 - Công việc Tìm hiểu về công ty, cách tổ chức của công ty. Làm quen với các công cụ làm việc trong công ty. Học cách trao đổi, làm việc qua email. Tìm hiểu về thông tin dự án 2 3 - Tìm hiểu về React hook form. - Material UI. Người hướng dẫn Anh Lê Tiến Triển Chị Lê Bê Ly Anh Phan Ngọc Thịnh Anh Lý Hồng Bảo Anh Phan Ngọc Thịnh Anh Trần Hoàng Sơn Anh Trần Thanh Vũ Anh Phan Ngọc Thịnh Anh Trần Hoàng Sơn Nguyễn Đức Khang - Tailwind. - Sử dụng graphql để call data. 4 5 6 7,8 Anh Trần Thanh Vũ TypeScript. Anh Trần Thanh Vũ Custom hook. Cải thiện UI/UX. Học và sử dụng TypeScript Thực hiện các task chỉnh sửa đơn giản liên Anh Phan Ngọc Thịnh quan đến hệ thống. Anh Trần Hoàng Sơn Anh Trần Thanh Vũ - Tham gia bổ sung các tính năng, fix các bug Anh Phan Ngọc Thịnh tồn đọng. Thêm yêu cầu theo nghiệp vụ khách Anh Trần Hoàng Sơn hàng. Anh Trần Thanh Vũ - Thực hiện việc cải thiện và tiếp tục phát triển Anh Phan Ngọc Thịnh dự án. Anh Trần Hoàng Sơn Anh Trần Thanh Vũ - Nguyễn Đức Khang Chương 3: Chi tiết về project 1. Giới thiệu về dự án Dự án cho phép tạo các phiếu khảo sát đa phần về nhà cửa, quản lý nhân viên và cho nhân viên đi thực hiện rà soát, phát hiện, bảo trì nâng cấp nhà cửa, xuất các file báo cáo. Dự án được đem đi triển lãm bên nhật có các khách hàng lớn như HAT. Gần đây dự án đang được chỉnh sửa và áp dụng với khách hàng Thái Lan. Dự án có mặt trên các thiết bị di động hỗ trợ nhân viên khảo sát. Thông tin chi tiết: https://kensa-cloud.com/ 2. Các màn hình chính 2.1 Màn hình quản lý các công nhân đi khảo sát Ở đây cho phép người quản lý có thể quản lý được các nhân viên của mình, cũng như thêm xoá sửa nhân viên. Hỗ trợ tạo tài khảon cho nhân viên và xác nhận gửi qua mail đăng ký. Nguyễn Đức Khang 2.2 Màn hình thu hoạch, theo dõi tiến độ và nội dung khảo sát, xuất các file báo cáo Cho phép thu hoạch theo dõi, điền các form phức tạp, xuất các file báo cáo như excel, pdf. Xem được tiến độ, trạng thái của các nhân viên đi khảo sát. 2.3 Màn hình tạo ra các form phức tạp đáp ứng rộng rãi các vấn đề về mẫu khảo sát. Cho phép tạo ra các mẫu phức tạp, ở trong mỗi lựa chọn sẽ có thêm nhiều lựa chọn khác. Việc tạo form khảo sát một cách linh động nhanh chóng và hiệu quả cao, tiết kiệm thời gian và chi phí người quản lý. Tạo form dễ dàng với các tình huống khác nhau trong thực tế. Nguyễn Đức Khang 2.4 Màn hình quản lý các công ty Hỗ trợ quản lý thông tin công ty hỗ trợ các doanh nghiệp khác khi sử dung. Nơi nhận phải hồi cải tiến hỗ trợ các công ty sử dụng. Nguyễn Đức Khang 2.5 Màn hình hỗ trợ nhân viên quản lý Job của mình. Cho phép nhân viên theo dõi tiến độ, quá trình thực hiện các job của mình. Nhân viên có thể coi các thông tin cá nhân, đổi mật khẩu. Nhận thêm job Nguyễn Đức Khang Chương 4: Giải thưởng Dự án đã được thông qua và trở thành một trong 3 dự án xuất sắc nhất của 2 quý đầu năm với các tiêu chí: hiệu quả, sáng tạo, ứng dụng công nghệ mới, tiên phong đi đầu. Cá nhân em vinh dự trở thành một trong số những thành viên tiêu biểu. Nguyễn Đức Khang