Báo cáo thực tập lập trình front end với reactjs

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 VỚI REACTJS Công ty thực tập : TISOHA – Software Solutions Người phụ trách : Đỗ Công Bá Thực tập sinh : Dương Hồi Nam TP Hồ Chí Minh, tháng 12 năm 2022 Đỗ Cơng Bá Dương Hồi Nam LỜI MỞ ĐẦU Ngày nay, phát triển website phận thiếu ngành công nghiệp phần mềm đa số lĩnh vực Với tốc độ phát triển vô mạnh mẽ, ngành 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 web non trẻ Việt Nam phát triển mạnh mẽ, để hòa nhập với công ty hàng đầu web giới Bên cạnh công ty lớn nước, công ty outsource thành lập gia nhập vào thị trường Việt Nam, góp phần lớn vào phát triển tích cực ngành web Việt Ngành web sinh nhu cầu mua bán, quản lý, giới thiệu, giải trí giới trẻ thiết bị công nghệ tảng khác ngày tăng Và giới trẻ nguồn nhân lực quan trọng cho việc phát triển ngành web sau Vì lý này, em định chọn lập trình 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 làm web mơi trường chun nghiệp, em có dự định thực tập hè thời gian học tập tới trường Vì vậy, em định chọn TISOHA - môi trường lý tưởng, đại, chuyên nghiệp, tạo điều kiện cho sinh viên - nơi giúp em thực dự định Đỗ Công Bá Dương Hoài Nam LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TISOHA tạo điều kiện cho em có hội thực tập công ty Trong khoảng thời thực tập, 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 để làm giao diện website từ trang quản lý lớn nhỏ tới trang theo thiết kế khách hàng, tiếp xúc với source code lớn, làm việc môi trường chuyên nghiệp 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 Đỗ Công Bá tạo dựng văn hóa cơng ty lành mạnh, chun nghiệp, động thúc đẩy chúng em trình thực tập, 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, suốt thời gian qua; Cảm ơn bạn Võ Hoàng Đức Khoa training React, Angular, hỗ trợ nhiều vấn đề kỹ thuật, framework trình làm web; Cảm ơn bạn Lê Hoàng Phú Đinh Huỳnh Thái Bình giúp đỡ nhiều vấn đề kỹ thuật liên quan đến framework trình làm web; cảm ơn tập thể anh chị bạn công ty TISOHA giúp đỡ tận tình gặp khó khăn kĩ thuật, trao đổi với team backend, team mobile, hướng dẫn sử dụng học hỏi cơng nghệ mới, tạo nên môi trường làm việc vui vẻ phát triển làm việc hiệu Cảm ơn người 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 Dương Hoài Nam Tp.HCM, ngày 20 tháng 12 năm 2022 Đỗ Cơng Bá Dương Hồi Nam NHẬN XÉT CỦA KHOA Đỗ Cơng Bá Dương Hồi Nam 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 TISOHA 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 2.1 Các công cụ làm việc ôn lại 2.2 Tìm hiểu ngôn ngữ TypeScript 10 2.3 Lập trình landing page với ReactJs NextJs vào dự án thực tế 11 2.4 Các task khác hoạt động khác công ty 12 Thực project 14 Lịch làm việc 14 4.1 Dự án Mark web 14 4.2 Dự án Mark admin 15 4.3 Dự án Hiven 20 4.4 Dự án Selex 22 4.5 Dự án Vict 23 Chương 3: Chi tiết project 25 Mark web 25 Mark admin 26 Hiven 28 Selex 30 Vict 32 TÀI LIỆU THAM KHẢO 34 TỔNG KẾT 35 Đỗ Công Bá Dương Hồi Nam Chương 1: Giới thiêu cơng ty thực tập Giới thiệu công ty TISOHA Công ty TNHH giải pháp phần mềm TISOHA thành lập ngày cuối năm 2020 đến hoạt động khoảng năm, công ty outsource chuyên Đỗ Công Bá Dương Hoài Nam tư vấn giải pháp phần mềm, cung cấp dịch vụ thiết kế, xây dựng phát triển phần mềm tảng khác như: Web, ios, android Tuy thành lập cách khơng lâu cơng ty có sản phẩm, đối tác lâu dài thành tựu đáng kể năm vừa qua Văn phòng làm việc chung cư 4S Riverside Linh Đông với khoảng 17 nhân viên Sản phẩm công ty: Hana, Mark(web, admin, app, member), Hiven, Sichan, Quay số trúng thưởng, Selex, Foster, … Đối tác công ty: Mark, ISB, team thiết kế Hà Nội, Huế cho dự án landingpage số khách hàng khác, … Sản phẩm công ty TISOHA tư vấn, thiết kế nhiều phần mềm cho mục đích lĩnh vực khác chủ yếu web điện thoại di động Công ty mang lại cho khách hàng dịch vụ tư vấn, phát triển, bảo trì cách nhanh chóng, tồn diện đảm bảo hài lòng khách hàng chất lượng lẫn chi phí Nhờ thể tốt việc tương tác với khách hàng thành sản phẩm mang lại mà cơng ty có mối quan hệ hợp tác lâu dài dự án để phát triển ổn định kể đến dự án Mark với app liên quan, ISB, team thiết kế Huế Hà Nội chuyên cho dự án landing page giới thiệu sản phẩm hay quản bá, Đỗ Cơng Bá Dương Hồi Nam Đỗ Cơng Bá Dương Hồi Nam Chương 2: Nội dung thực tập Có leader giàu kinh nghiệm kinh làm qua dự án lớn công ty dẫn dắt bạn thực tập sinh làm quen góp xây dựng dự án thực tế cho công ty sau góp phần giúp bạn nâng cao lực thân, tiếp xúc thực tế công việc, nắm vị trí, vai trị, việc cần làm thân, cấu trúc phần mềm vấn đề quản lý, kĩ thuật vấn đề khác dự án Đợt thực tập với chủ đề “Lập trình front end với reactjs” nhằm mục đích giúp sinh viên thực tập đào tạo toàn diện lập trình giao diện web với reactjs framework, đồ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 web chuyên nghiệp tiếp xúc với dự án, khách hàng thực tế task dự án Do diễn song song với thời gian học trường nên bạn thực tập vị trí partime ngày/tuần Cơng ty tạo điều kiện để bạn đăng kí làm việc linh hoạt không ảnh hưởng tới việc học trường 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, làm việc công ty Đượ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, quy định cần phải tuân thủ, cách sử dụng email, logwork, nhận task công việc… Kết quả: Hiểu thêm cơng ty TISOHA, q trình thành lập phát triển Có thêm kỹ việc sử dụng phần mềm quản lý công việc jira, readmine 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 Các công cụ làm việc ôn lại 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ố hoạt động như: - Slack – phần mềm chat, report công việc hàng ngày công ty - Jira – Ứng dụng quản lý tiến độ công việc, tạo, phân chia task - Redmine – Công cụ quản lý, theo dõi vấn đề dự án, thời gian làm việc nhân viên Đỗ Công Bá Dương Hoài Nam 10 Sử dụng extention giúp gia tăng tốc độ hỗ trợ cho việc lập trình front end tiện lợi vscode - Học sử dụng sass compile sass sang css sử dụng framework giúp cho việc viết css có cấu trúc rõ ràng, lành mạch, dễ bảo trì phát triển ngắn gọn css thông thường - Học regex ứng dụng validation - Nvm phiên node để tránh lỗi phiên phát triển ứng dụng - Responsive viewer, cách chia break point, chia file để phát triển giao diện thiết bị có độ phân giải khác tối ưu - Các công cụ kiểm tra api postman, swagger để dễ dàng kiểm tra api từ backend trước tích hợp vào frontend - Thực isb test html, css vanilla javascript, làm demo theo yêu cầu supervisor để nắm căng - Ông tập kiến thức liên quan tới front end cách tạo component cho việc tái dụng hiệu quả, hạn chế tối đa lặp code nhằm giảm độ dài mã nguồn, giảm tải file ảnh, video imagesmaller định dạng webp để tăng tốc độ tải trang Thực hiện: Thực hành sử dụng phần mềm nêu hoàn thành demo theo yêu cầu supervisor thực test Kết quả: 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, nắm lập trình web Tìm hiểu ngơn ngữ TypeScript Thời gian: 14 ngày Nội dung: Được training kỹ thuật Javascript nâng cao, cú pháp điểm khác biệt typescript, kiến thức quan trọng cho việc tối ưu lập trình front end source code lớn - Javascript ngôn ngữ kịch giúp tạo trang web tương tác Chạy trình duyệt web người dùng mà khơng cần tài nguyên tạo thành máy chủ web - Đọc tài liệu typescript – nâng cao javascript Typescript có yêu cầu cao trật tự rõ ràng, bổ sung điểm yếu javascript lớp hướng đối tượng static structural typing (bổ sung khái niệm kiểu interface để mô tả liệu, phù hợp cho dự án lớn) - Sử dụng typescript react angular mentor cung cấp làm test đánh giá lại kiến thức - 2.2 Đỗ Cơng Bá Dương Hồi Nam 21 - - - - 14-17/08 - Đỗ Công Bá Ui admin for about us and contact us Fix doulicate CompanyInfoeEdit data fields Fix submit Responsive admin page: home, contact, about Call api contact us not contain sendmail Fix contact us field Api for about us banner Api for business area Fix about us format Update responsive Yup require contact us Fix feedback Load data to business area, company-info, contact-us-info, add query params hivenSlice Upload multi files Api for companyinfo Btn scroll to top Fix navigate Fix footer, font Võ Hoàng Đức Fix about us Khoa responsive Fix feedback not change 03 image Replace icon logo Fix responsive: Home, about us, Dương Hoài Nam 22 22/08 4.4 footer, about us title, mobile ui Apply strapi Clean code Fix customer update Võ Hoàng Đức requirement, Khoa merger code, fix all feedback Dự án Selex Đường dẫn sản phẩm: title | Selex Motors - Hệ sinh thái Xe máy điện thông minh (tisoha.com) Đường dẫn gitlab: Võ Hoàng Đức Khoa / selex-nextjs · GitLab Thời gian Công việc - 13/11 16/11 21/11 23-24/11 Đỗ Công Bá - Người hướng dẫn Mức độ hoàn thành Nhận xét người hướng dẫn Change pin service Võ Hoàng Đức page desktop ui Khoa, Nguyễn Khánh Toàn Change pin service Võ Hoàng Đức page full responsive Khoa, Nguyễn Khánh Toàn About us page Võ Hoàng Đức desktop ui Khoa, Nguyễn Khánh Toàn About us page full Võ Hoàng Đức responsive Khoa, Nguyễn Update carousel and Khánh Toàn font feedback Dương Hoài Nam 23 4.5 Dự án Vict Đường dẫn sản phẩm: Unlocking Potential in South-East Asia (hiven.com.sg) Đường dẫn gitlab: TISOHA / Hiven Landing Page · GitLab Thời gian Công việc - 10-11/10 - 17-18/10 20/10 24-25/10 27/10 - - - 31/10 01/11 Đỗ Công Bá Người hướng dẫn Read requirement Try running database Feedback to customer Create table on vueXY template Read feedback Create mockdata with mockaro Create table Try to connect api Feature: sort, search, filter, pagination Login Use mark api Resolve unauthorize problem Login Test api User management User management Profile setting Container management mockdata - Container management Mức độ hoàn thành Nhận xét người hướng dẫn Võ Hoàng Đức Khoa, Lê Hoàng Phú Võ Hoàng Đức Khoa, Lê Hoàng Phú Võ Hoàng Đức Khoa, Lê Hoàng Phú Võ Hoàng Đức Khoa, Lê Hoàng Phú Võ Hoàng Đức Khoa, Lê Hoàng Phú Võ Hoàng Đức with Khoa, Lê Hoàng Phú Võ Hoàng Đức Khoa, Lê Hoàng Phú Dương Hoài Nam 24 07/11 Đỗ Cơng Bá Fix some user Võ Hồng Đức management issue Khoa, Lê Hoàng Phú Dương Hoài Nam 25 Chương 3: Chi tiết project Mark web 1.1 Giới thiệu 1.1.1 Sơ lược dự án Thuộc chuỗi dự án Mark, The Mark Platform tảng đánh giá khám phá dành cho nhà thiết kế nội thất Singapore Mark web trang giới thiệu, cho phép người dùng đăng kí bussiness, tạo tài khoản, truy cập app liên quan khác mark admin, mark member, mark app 1.1.2 Danh sách hình 1.1.3 Cơng việc đảm nhận Cùng Đinh Huỳnh Thái Bình hồn thành giao diện Mark-web, kết nối api thực hồn chỉnh tính u cầu requirement khách hàng 1.2 Thực Đỗ Cơng Bá Dương Hồi Nam 26 Các thành viên dự án Mark web: o Võ Hoàng Đức Khoa – leader o Đinh Huỳnh Thái Bình o Dương Hồi Nam 1.3 Kế hoạch Hoàn thành giao diện tháng đầu tiên, sau cập nhật theo feedback khách hàng, bổ sung thêm thôn báo, fix vài bug nhỏ tiến hành thực dự án mark admin 1.4 Kết Hoàn thành đầy đủ, thiết kế tiến độ figma, cập nhật feedback khách hàng, làm quen với dự án thực tế Mark admin 2.1 Giới thiệu 2.1.1 Sơ lược dự án Thuộc chuỗi dự án Mark, The Mark Platform tảng đánh giá khám phá dành cho nhà thiết kế nội thất Singapore Mark admin cho phép tài khoản người dùng thuộc dự án Mark(Admin, admin director, accesss director) truy cập, quản lý bussiness 2.1.2 Danh sách hình Khơng có thiết kế ban đầu, cơng ty tư vấn, phát triển trang admin phù hợp cho mark admin với đầy đủ tính theo u cầu Đỗ Cơng Bá Dương Hồi Nam 27 2.1.3 Cơng việc đảm nhận Thực xây dựng ui ban đầu cho promotion management, hoàn thiện chức năng: Project management Youtube management 2.2 Thực Các thành viên dự án Mark web: o Võ Hoàng Đức Khoa – leader o Đinh Huỳnh Thái Bình o Dương Hồi Nam 2.3 Kế hoạch Là dự án lớn lâu dài công ty, sprint cách 2-3 tuần: - Hoàn thành ui promotion management sprint - Hoàn thành project management sprint - Hoàn thành youtube management sprint Đỗ Cơng Bá Dương Hồi Nam 28 2.4 Kết Hoàn thành đầy đủ chức giao giải nhiều vấn đề phát sinh học nhiều kiến thức mới, khả làm việc với source phức tạp Hiven 3.1 Giới thiệu 3.1.1 Sơ lược dự án Là landing page giới thiệu cơng ty thiết kế chun nghiệp, Hiven có animation vô ấn tượng tham khảo từ cuberto.com, design cẩn thận, chỉnh chu, chi tiết giao cho công ty phát triển nhằm quản bá cho công ty thiết kế Trong thời gian thực có số thay đổi nên dự án trao đổi cập nhật liên tục, dự án landing page cơng ty nên cịn số vấn đề chưa có kinh nghiệm từ trước dẫn tới tiêu tốn nhiều thời gian nhân lực cơng ty Bên cạnh khách hàng u cầu thiết kế thêm trang admin để thay đổi nội dung landing page trình phát triển 3.1.2 Danh sách hình Đỗ Cơng Bá Dương Hồi Nam 29 3.1.3 Công việc đảm nhận - Xây dựng footer Đỗ Cơng Bá Dương Hồi Nam 30 - About us page - News page - Responsive fix bug trang - Cập nhật theo yêu cầu feedback khách hàng - Xây dựng admin page Khoa - Cập nhật lại thiết kế sau phát triển thêm admin 3.2 Thực Các thành viên dự án Mark web: o Võ Hoàng Đức Khoa – leader o Khang Lê o Dương Hoài Nam 3.3 Kế hoạch Hoàn thiện bàn giao web cho khách hàng tuần 3.4 Kết Hoàn thành tốt yêu cầu khách hàng trình phát triển số component bị đánh giá sai độ phức tạp, khách hàng âm thầm chỉnh sửa lại thiết kế, thay đổi yêu cầu nên tốn thêm nhiều thời gian nhân lực Selex 4.1 Giới thiệu 4.1.1 Sơ lược dự án Là landing page giới thiệu dòng xe điện mang thương hiệu selex team thiết kế chuyên nghiệp đầu tư phát triển theo web mẫu zoox.com có animation bắt mắt, sau cơng ty triển khai thực hiện, ban đầu hiểu lầm khách hàng nên web phát triển html, scss javascript sau điều chỉnh sử dụng NextJs để tăng tốc độ phát triển 4.1.2 Danh sách hình Đỗ Cơng Bá Dương Hồi Nam 31 4.1.3 Cơng việc đảm nhận - Màn hình dịch vụ đổi pin - Màn hình 4.2 Thực Các thành viên dự án Mark web: o Võ Hoàng Đức Khoa – leader o Nguyễn Khánh Toàn o Dương Hoài Nam 4.3 Kế hoạch Thực nhanh chóng hỗ trợ bạn hình ngày để kịp tiến độ yêu cầu khách hàng, chuyển từ code sang nextjs 4.4 Kết Thực đầy đủ bao gồm responsive cho hình giao, thời gian gặp vấn đề sức khỏe nên nhận nhiều task dự án Đỗ Cơng Bá Dương Hồi Nam 32 Vict 5.1 Giới thiệu 5.1.1 Sơ lược dự án Vict dự án quản lý container cảng biển, dự án cung cấp website mobile app tương tác với database có sẵn đối tác Các ứng dụng cho phép kĩ sư, cơng nhân cảng quản lý, theo dõi, kiểm tra, cập nhật tình trạng container cách trực quan, tiện lợi Thay hệ thống máy điều khiển cầm tay với nút bấm phức tạp, khó thao tác, lỗi thời 5.1.2 Danh sách hình Giao diện cơng ty thiết kế thực với phần là: quản lý container quản lý người dùng, ngồi cịn có hình đăng nhập, quên mật khẩu, đổi mật khẩu, trang cá nhân 5.1.3 Cơng việc đảm nhận Các hình: Login, forget password, change password, user setting, user management, container management Đỗ Cơng Bá Dương Hồi Nam 33 5.2 Thực Các thành viên dự án Mark web: o Võ Hoàng Đức Khoa – leader o Lê Hoàng Phú o Dương Hoài Nam 5.3 Kế hoạch Xây dựng đầy đủ tính theo yêu cầu khách hàng gồm quản lý user, quản lý container chức liên quan tới tài khoản 5.4 Kết Hoàng thành trang: - Login Forget password Change password User setting User management Vì lí sức khỏe nên phần quản lý container deploy sau bạn Phú tiếp tục thực Đỗ Cơng Bá Dương Hồi Nam 34 TÀI LIỆU THAM KHẢO Typescript: typescript-cheatsheets/react: Cheatsheets for experienced React developers getting started with TypeScript (github.com) Angular: 100-days-of-angular/README.md at master · angular-vietnam/100-days-ofangular (github.com) NextJs: Introduction | Learn Next.js (nextjs.org) Material UI: MUI: The React component library you always wanted NextUI: Getting started | NextUI - Beautiful, fast and modern React UI Library React Hook Form: Get Started | React Hook Form - Simple React forms validation (reacthook-form.com) Saleor template: saleor/saleor-dashboard: A GraphQL-powered, single-page dashboard application for Saleor (github.com) VueXY template: Welcome | Vuexy React Admin Template (pixinvent.com) Đỗ Công Bá Dương Hoài Nam 35 TỔNG KẾT Như vậy, thời gian từ tháng đến tháng 11 làm việc parttime (3 ngày/tuần), em tiếp xúc làm qua dự án thực tế Thực theo yêu cầu khách hàng quy trình cơng ty cho sản phẩm có kết mong đợi Do thời gian đầu chưa quen với dự án source code tương đối lớn khó để làm quen tiếp xúc nên thời gian thực dài Nhưng thời gian sau quen việc thực task giao diện dần nhanh chóng tự tin estimate time xác hơn, làm quen với việc sử dụng template admin cho phép việc phát triển nhanh chóng, tiện lợi đẹp mắt hơn, có khả làm việc với source front end phức tạp Chân thành cảm ơn giúp đỡ anh chị nhóm trainer TISOHA, nỗ lực nhóm front end để dự án thời gian qua Cảm ơn thầy cô khoa công nghệ phần mềm giúp em hoàn thành báo cáo Đỗ Cơng Bá Dương Hồi Nam ... thân, tiếp xúc thực tế công việc, nắm vị trí, vai trị, việc cần làm thân, cấu trúc phần mềm vấn đề quản lý, kĩ thuật vấn đề khác dự án Đợt thực tập với chủ đề ? ?Lập trình front end với reactjs? ?? nhằm... hệ tốt với bạn lĩnh vực, giúp mở rộng hội việc làm Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực ReactJs NextJs Trong tháng thứ hai trở đi, trainer hướng dẫn thực tập sinh... trang Thực hiện: Thực hành sử dụng phần mềm nêu hoàn thành demo theo yêu cầu supervisor thực test Kết quả: 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, nắm lập trình