BÁO CÁO THỰC TẬP LẬP TRÌNH FRONT-END 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 REACTJS Công ty thực tập : Công ty TNHH Giải pháp Phần mềm TISOHA Người phụ trách : Đỗ Công Bá Thực tập sinh : Võ Hoàng Đức Khoa Võ Hồng Đức Khoa TP Hồ Chí Minh, tháng 06 năm 2022 Võ Hoàng Đức Khoa LỜI MỞ ĐẦU Trong cách mạng công nghiệp 4.0, công nghệ thông tin nói chung ngành Cơng nghệ phần mềm nói riêng ln nhân tố đóng vai trị quan trọng q trình phát triển xã hội Cơng nghệ Web, hay công nghệ sản xuất trang web phục vụ hầu hết nhu cầu người từ bán hàng, cung cấp kiến thức đến thông tin liên lạc, Hiện có đến 1.5 tỷ trang web, nhu cầu tạo trang web chưa có dấu hiệu giảm Do đó, trang web muốn nhiều người sử dụng phải đáp ứng yếu tố hình thức nội dung Làm để sản phẩm tạo đạt chất lượng cao hai yếu tố làm đội ngũ phát triển website cần phải suy nghĩ đau đầu Để thử thách thân ngành công nghiệp web, em lựa chọn Front-end web developer định hướng cho việc học nghề nghiệp tương lai React thư viện UI phát triển Facebook, thư viện Javascript lên năm gần để hỗ trợ việc xây dựng thành phần (components) UI có tính tương tác cao, có trạng thái sử dụng lại React sử dụng Facebook Instagram viết hồn tồn React Có thể nói ReactJS cơng cụ tuyệt vời giúp doanh nghiệp vượt qua đối thủ cạnh tranh mảng thiết kế ứng dụng web • Ứng dụng tạo ReactJS với cấu trúc UI tốt giúp nâng cao tối ưu hóa UX Các doanh nghiệp dễ dàng tăng tương tác người dùng, tỉ lệ click tỉ lệ chuyển đổi (conversion) trang web • Hiệu suất kinh doanh có dùng ứng dụng ReactJS tốt so với dùng framework khác Nó hạn chế cập nhật DOM, từ tăng tốc độ truy cập ứng dụng cải tiến UX tốt • ReactJS thiết kế để giúp cải thiện số trang render tổng từ phía server Đồng thời giúp tối ưu nút để render phía client-side Khả tùy chỉnh cơng cụ tốt, chí làm giảm ngân sách bảo trì hệ thống, giúp ReactJS hiệu cao Bên cạnh thời gian học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia làm việc mơi trường chun nghiệp, em có dự định thực tập kì Vì vậy, em định chọn công ty TISOHA nơi giúp em thực dự định Võ Hoàng Đức Khoa LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TNHH Giải pháp Phần mềm TISOHA 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, em tiếp thu kiến thức kinh nghiệm quan trọng lập trình front-end Reactjs Đặc biệt cảm ơn anh Đỗ Cơng Bá hướng dẫn, giúp đỡ em tận tình hồn thành công việc giao 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 Võ Hoàng Đức Khoa TpHCM, 17/06/2022 Võ Hoàng Đức Khoa NHẬN XÉT CỦA KHOA Võ Hoàng Đức Khoa 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 ty Ranus 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 Thực project Lịch làm việc Chương 3: Các công việc làm 10 Header bar slider trang home page 10 Header layout mobile trang home page 11 Content trang home page cửa hàng 11 Các công việc khác 12 TÀI LIỆU THAM KHẢO 28 TỔNG KẾT 28 Võ Hoàng Đức Khoa Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty TNHH Giải pháp Phần mềm TISOHA Công ty TNHH Giải pháp phần mềm TISOHA start-up thành lập vào 10/2020 đến hoạt động gần năm Trong thời gian hoạt động, công ty nhận cung cấp dịch vụ cho nhiều khách hàng Mỹ, Malta, Úc Singapore nơi tập trung phát triển ứng dụng web lập trình ứng dụng cho điện thoại thông minh TISOHA đem lại cho khách hàng dịch vụ lập trình, gia cơng phần mềm uy tín chất lượng với độ an tồn cao, khả mở rộng tiết kiệm chi phí cho khách hàng Sản phẩm công ty Sản phẩm công ty chủ yếu dự án outsource giáo dục, giải trí, thương mại Cơng ty mang đến cho khách hàng dịch vụ phát triển, gia cơng phần mềm hồn hảo từ hỗ trợ, tư vấn, bảo trì đến phát triển ứng dụng, phần mềm cách toàn diện Các sản phẩm giải pháp công ty triển khai đảm bảo mức độ an tồn cao, có khả mở rộng, mang lại hài lòng chất lượng thỏa mãn tiết kiệm chi phí Võ Hồng Đức Khoa Chương 2: Nội dung thực tập Thực task giao 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, 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, 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 trình làm việc Trong thời gian này, cài đặt công cụ phục vụ cho công việc như: Visual studio code, Git, Slack, Redmine, … Thực : Thực hành sử dụng phần mềm nêu Kết : Làm quen với công cụ Tìm hiểu HTML, CSS, SCSS, JavaScript Vì muốn hiểu sâu front-end nên em công ty củng cố kiến thức đào tạo lại từ đầu Thời gian: ngày Nội dung: Được training kỹ thuật html, css, scss nâng cao, kiến thức quan trọng cho việc tạo layout responsive cho trang web - Html: cấu trúc thành phần trang web ứng dụng, phân chia đoạn văn, heading, links,… - Css: Tạo phong cách kiểu cho trang web nhu tạo bố cục layout, color, khoảng cách, reponsive,… - Scss: Là tiền xử lý css, giúp viết css theo cách ngơn ngữ lập trình, có cấu trúc rõ ràng , rành mạch, dễ phát triển bảo trì code - Tìm hiểu JS/Jquery: - Tìm hiểu JS DOM Võ Hồng Đức Khoa 2.3 - Tìm hiểu object, function, class, Async - Tìm hiểu JQuery - Tìm hiểu JS web API - Kiến thức UI/UX: Tìm hiểu khái niệm ui/ux Thực hiện: - 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 quả: - Nắm kiến thức html/css/scss - Nắm BEM name - Có thể dàn layout trang web, style theo design responsive Nghiên cứu tài liệu kỹ thuật ReactJS Thời gian: ngày Nội dung: Được giao tìm hiểu tài liệu kỹ thuật liên quan đến dự án Các tài liệu bao gồm: - JSX dạng ngôn ngữ cho phép viết mã HTML Javascript Đặc điểm: Faster: Nhanh JSX thực tối ưu hóa biên dịch sang mã Javacsript Các mã cho thời gian thực nhanh nhiều so với mã tương đương viết trực tiếp Javascript Safer: an toàn Ngược với Javascript, JSX kiểu statically-typed, nghĩa biên dịch trước chạy, giống Java, C++ Vì lỗi phát q trình biên dịch Ngồi ra, cung cấp tính gỡ lỗi biên dịch tốt Easier: Dễ dàng JSX kế thừa dựa Javascript, dễ dàng lập trình viên Javascripts sử dụng - React xây dựng xung quanh component, không dùng templatenhư framework khác Trong React, xây dựng trang web sử dụng thành phần (component) nhỏ Chúng ta tái sử dụng component nhiều nơi, với trạng thái thuộc tính khác nhau, component lại chứa thành phần khác Mỗi component React có trạng thái riêng, thay đổi, React thực cập nhật component dựa thay đổi trạng thái Mọi thứ React component Chúng giúp bảo trì mã code làm việc với dự án lớn Một react component đơn giản cần method render Có nhiều methods khả dụng khác, render method chủ đạo - Props: giúp component tương tác với nhau, component nhận input gọi props, trả thuộc tính mơ tả component render Prop bất biến - State: thể trạng thái ứng dụng, state thay đồi component đồng thời Võ Hoàng Đức Khoa 10 2.4 2.5 2.6 render lại để cập nhật UI Thực hiện: - 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 quả: - Nâng cao kỹ lập trình Front-end - Tạo giao diện demo đơn giản kỹ thuật nghiên cứu - Có kiến thức quan trọng cho việc lập trình 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 Nghiên cứu design, code structure TISOHA Thời gian: ngày Nội dung: Nghiên cứu design chức page TISOHA, tìm hiểu cách kĩ thuật áp dụng dự án, cách áp dụng quy chuẩn code, clean code vào project, cách tổ chức project… Kết quả: Hiểu trực quan xử lý project, cách tổ chức project, quy chuẩn code, Thực hành Visual Studio Code Thời gian: ngày Nội dung: Áp dụng kiến thức tìm hiểu, thực hành mơ lại website - Đọc hiểu thiết kế web - Nắm luồng xử lý - Thiết kế giao diện, hình trang chủ Tạo hiệu ứng cho website - Thiết kế xử lý logic bản, chuyển hình website Kết quả: - Mô lại website theo code thân - Nâng cao khả lập trình front-end, javascript kỹ liên quan, bổ trợ cho trình sau Thực hành xây dựng website theo yêu cầu Thời gian: tháng Nội dung: Thực hành xây dựng giao diện website theo yêu cầu người hướng dẫn Kết quả: Xây dựng giao diện website đáp ứng yêu cầu đặt Thực project Võ Hoàng Đức Khoa 11 Lịch làm việc Tuần Công việc - 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 nhóm - Nghiên cứu tài liệu kỹ thuật dự án TISOHA - Nghiên cứu ReactJS chuyên sâu - Thực hành dự án TISOHA ReactJS - Tìm hiểu thiết kế Người hướng dẫn Mức độ hoàn thành Nhận xét người hướng dẫn Anh Đỗ Công Bá Anh Đỗ Công Bá Anh Đỗ Công Bá Anh Đỗ Công Bá dự án, thực hành học Võ Hồng Đức Khoa 12 Chương 3: Các công việc làm Init source code Nội dung : Init source code implement based component Thực : - Sử dụng Ant Design component để dựng giao diện Võ Hoàng Đức Khoa 13 - Sử dụng axios để call api - Dùng redux để quản lí global state - Sử dụng react-router-dom để navigate - Sử dụng chart.js để render ảnh đồ thị - Dùng firebase để hiển thị notification - Sử dụng react-hook-form yup để validate form handle submit form Kết : - Hoàn thành task với yêu cầu Tạo components Nội dung : Tạo components theo thiết kế designer Võ Hoàng Đức Khoa 14 Thực : - Tạo custom form controls cho form - Tạo Table với pagination - Tạo modal - Tạo sidebar UI - Custom input để upload file csv câu hỏi Kết : - Hoàn thành task với yêu cầu Xây dựng giao diện (Do quy định sản phẩm thương mại công ty chi tiết dự án không cung cấp bên ngồi) Một số cơng việc khác - Xây dựng UI cho landing page công ty Võ Hoàng Đức Khoa 15 Võ Hoàng Đức Khoa 16 Võ Hoàng Đức Khoa 17 Võ Hoàng Đức Khoa 18 Võ Hoàng Đức Khoa 19 Võ Hoàng Đức Khoa 20 TÀI LIỆU THAM KHẢO - HTML, CSS https://www.w3schools.com/html/html_css.asp - Nodejs https://nodejs.org/en/ - ReactJS https://reactjs.org/ - Sass https://sass-lang.com/ https://redux.js.org/ TỔNG KẾT Sau gần tháng thực tập TISOHA, em học nhiều kinh nghiệm bổ ích lập trình giao diện web với ReactJS ReduxJS, thiết kế UI/UX hồn thành nhiệm vụ giao Nhờ đó, em hiểu quy trình phát triển dự án, đồng thời hiểu trải nghiệm làm dự án thực tế, tăng kĩ giao tiếp, xử lí tình Chân thành cám ơn q Cơng ty cổ phần Cơng nghệ TISOHA giúp đỡ tận tình cho em thời gian thực tập công ty Đặc biệt anh Đỗ Công Bá anh chị công ty giúp đỡ hướng dẫn q trình làm việc để em hồn thành nhiệm vụ giao Võ Hoàng Đức Khoa ... TISOHA 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, em tiếp thu kiến thức kinh nghiệm quan trọng lập trình front- end Reactjs Đặc biệt cảm ơn anh Đỗ Công... Khoa 10 2.4 2.5 2.6 render lại để cập nhật UI Thực hiện: - 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 quả: - Nâng cao kỹ lập trình Front- end - Tạo giao diện... theo code thân - Nâng cao khả lập trình front- end, javascript kỹ liên quan, bổ trợ cho trình sau Thực hành xây dựng website theo yêu cầu Thời gian: tháng Nội dung: Thực hành xây dựng giao diện