Tài liệu 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õ Hoàng Đức Khoa 2 TP. Hồ Chí Minh, tháng 06 năm 2022 Võ Hoàng Đức Khoa 3 LỜI MỞ ĐẦU Trong cuộc cách mạng công nghiệp 4.0, công nghệ thông tin nói chung và ngành Công nghệ phần mềm nói riêng luôn là nhân tố đóng vai trò quan trọng trong quá trình phát triển của xã hội. Công nghệ Web, hay công nghệ sản xuất các trang web đã phục vụ hầu hết các nhu cầu của con người từ bán hàng, cung cấp kiến thức đến thông tin liên lạc, ... Hiện nay đã có đến hơn 1.5 tỷ trang web, nhưng nhu cầu tạo ra những trang web mới vẫn chưa có dấu hiệu giảm. Do đó, một trang web muốn được nhiều người sử dụng phải đáp ứng được yếu tố hình thức và nội dung. Làm thế nào để sản phẩm tạo ra đạt chất lượng cao ở hai yếu tố trên luôn làm bất kì một đội ngũ phát triển website nào cũng cần phải suy nghĩ đau đầu. Để thử thách bản thân trong ngành công nghiệp web, em đã lựa chọn Front-end web developer là định hướng cho việc học cũng như nghề nghiệp trong tương lai. React là một thư viện UI phát triển tại Facebook, một thư viện Javascript đang nổi lên trong những năm gần đây để hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được. React được sử dụng tại Facebook cũng như trên Instagram được viết hoàn toàn trên React. Có thể nói ReactJS là một công cụ tuyệt vời giúp doanh nghiệp vượt qua đối thủ khi cạnh tranh về mảng thiết kế các ứng dụng web. • Ứng dụng được tạo ra bởi ReactJS với cấu trúc UI tốt hơn giúp nâng cao và tối ưu hóa UX. Các doanh nghiệp có thể dễ dàng tăng tương tác của người dùng, tỉ lệ click và tỉ lệ chuyển đổi (conversion) trên trang web của mình. • Hiệu suất kinh doanh khi có dùng ứng dụng của ReactJS cũng tốt hơn so với khi dùng các framework khác. Nó sẽ hạn chế cập nhật của DOM, từ đó tăng tốc độ truy cập ứng dụng và cải tiến UX tốt hơn. • ReactJS cũng được thiết kế để giúp cải thiện số trang render tổng từ phía server. Đồng thời sẽ giúp tối ưu các nút để render phía client-side. Khả năng tùy chỉnh công cụ tốt, thậm chí làm giảm ngân sách bảo trì hệ thống, giúp ReactJS hiệu quả cao hơn. Bên cạnh thời gian 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 việc trong một môi trường chuyên nghiệp, em có dự định là sẽ thực tập trong kì này. Vì vậy, em quyết định chọn công ty TISOHA là nơi sẽ giúp em thực hiện được dự định này. Võ Hoàng Đức Khoa 4 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ó 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ự chỉ dẫn nhiệt tình, em đã tiếp thu được những kiến thức và kinh nghiệm quan trọng trong 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 hoàn thành các công việc được giao. 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. Võ Hoàng Đức Khoa TpHCM, 17/06/2022 Võ Hoàng Đức Khoa 5 NHẬN XÉT CỦA KHOA .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... Võ Hoàng Đức Khoa 6 MỤC LỤC MỤC LỤC ........................................................................................................................... 6 Chương 1: Giới thiệu công ty thực tập ........................................................................... 7 1. Giới thiệu về công ty Ranus. .................................................................................... 7 2. Sản phẩm của công ty ............................................................................................... 7 Chương 2: Nội dung thực tập .......................................................................................... 8 1. 2. 3. 4. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty ............................................ 8 Nghiên cứu kỹ thuật .................................................................................................. 8 Thực hiện project ...................................................................................................... 9 Lịch làm việc ............................................................................................................ 9 Chương 3: Các công việc đã làm ................................................................................... 10 1. Header bar và slider trang home page.....................................................................10 2. Header layout mobile trang home page...................................................................11 3. Content trang home page cửa hàng..........................................................................11 4. 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 7 Chương 1: Giới thiêu công ty thực tập 1. 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 là một start-up được thành lập vào 10/2020 đến nay đã hoạt động được gần 2 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 tại Mỹ, Malta, Úc và Singapore...nơi tập trung phát triển ứng dụng trên nền web và lập trình ứng dụng cho điện thoại thông minh. TISOHA đem lại cho khách hàng nhữ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 toàn cao, khả năng mở rộng và tiết kiệm chi phí cho khách hàng. 2. Sản phẩm của công ty Sản phẩm của công ty chủ yếu là các dự án outsource về giáo dục, giải trí, thương mại. Công ty luôn mang đến cho khách hàng dịch vụ phát triển, gia công phần mềm hoàn hảo từ hỗ trợ, tư vấn, bảo trì đến phát triển các ứng dụng, phần mềm một cách toàn diện. Các sản phẩm và giải pháp do công ty triển khai được đảm bảo mức độ an toàn cao, có khả năng mở rộng, mang lại sự hài lòng về chất lượng và thỏa mãn về tiết kiệm chi phí. Võ Hoàng Đức Khoa 8 Chương 2: Nội dung thực tập Thực hiện các task được giao 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 người phụ trách 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, quá trình thành lập và phát triển. Có thêm các kỹ năng về việc sử dụng email trong công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn. 2. Nghiên cứu kỹ thuật 2.1. 2.2. Các công cụ làm việc Thời gian : 1 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. Trong thời gian này, cài đặt các công cụ phục vụ cho công việc như: Visual studio code, Git, Slack, Redmine, … Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên. Kết quả : Làm quen được với các công cụ Tìm hiểu HTML, CSS, SCSS, JavaScript Vì muốn được hiểu sâu về front-end nên em được công ty củng cố kiến thức và đào tạo lại từ đầu. Thời gian: 7 ngày Nội dung: Được training về các kỹ thuật html, css, scss cơ bản và nâng cao, những kiến thức quan trọng cho việc tạo các layout responsive cho trang web. - Html: cấu trúc và các thành phần trong trang web và ứng dụng, phân chia các đoạn văn, heading, links,… - Css: Tạo phong cách và kiểu cho trang web nhu tạo bố cục các layout, color, khoảng cách, reponsive,… - Scss: Là tiền xử lý css, giúp viết css theo cách một ngôn ngữ lập trình, có cấu trúc rõ ràng , rành mạch, dễ phát triển và bảo trì code hơn. - Tìm hiểu về JS/Jquery: - Tìm hiểu JS DOM Võ Hoàng Đức Khoa 9 2.3. - Tìm hiểu về object, function, class, Async - Tìm hiểu JQuery. - Tìm hiểu JS web API. - Kiến thức cơ bản về UI/UX: Tìm hiểu khái niệm ui/ux. Thực hiện: - Tham gia đầy đủ các buổi training của công ty. - Làm các bài thực hành, kiểm tra về kiến thức đã học. Kết quả: - Nắm được kiến thức html/css/scss cơ bản - Nắm được BEM name. - Có thể dàn được layout trang web, style theo design và responsive. Nghiên cứu tài liệu và những kỹ thuật về ReactJS Thời gian: 7 ngày Nội dung: Được giao và tìm hiểu về những tài liệu và kỹ thuật liên quan đến dự án. Các tài liệu bao gồm: - JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc điểm: Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript. Safer: an toàn hơn. Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++. Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch. Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ dàng hơn. JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng. - React được xây dựng xung quanh các component, chứ không dùng templatenhư các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác. Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái. Mọi thứ React đều là component. Chúng giúp bảo trì mã code khi làm việc với các dự án lớn. Một react component đơn giản chỉ cần một method render. Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo. - Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render. Prop là bất biến. - State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì 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 đủ các buổi training của công ty. - Làm các bài thực hành, kiểm tra về kiến thức đã học. Kết quả: - Nâng cao kỹ năng lập trình Front-end - Tạo được những giao diện demo đơn giản về kỹ thuật đã nghiên cứu. - Có được những kiến thức quan trọng cho việc lập trình sau này. - Ngoài ra còn được biết thêm một số quy tắc trong việc viết code sao cho đúng chuẩn, dễ đọc, dễ hiểu. Nghiên cứu bản design, code structure của TISOHA Thời gian: 3 ngày Nội dung: Nghiên cứu design và chức năng các page của TISOHA, tìm hiểu cách các kĩ thuật được áp dụng trong dự án, cách áp dụng các quy chuẩn code, clean code vào project, cách tổ chức project… Kết quả: Hiểu trực quan các xử lý trong project, cách tổ chức project, các quy chuẩn code, Thực hành trên Visual Studio Code Thời gian: 7 ngày Nội dung: Áp dụng các kiến thức đã tìm hiểu, thực hành mô phỏng lại website . - Đọc hiểu thiết kế web - Nắm luồng xử lý - Thiết kế các giao diện, màn hình của trang chủ. Tạo các hiệu ứng cho website. - Thiết kế các xử lý logic cơ bản, chuyển màn hình trong website. Kết quả: - Mô phỏng lại được website theo code của bản thân - Nâng cao khả năng lập trình front-end, javascript và các kỹ năng liên quan, bổ trợ cho quá trình sau này. Thực hành xây dựng website theo yêu cầu Thời gian: 1 tháng Nội dung: Thực hành xây dựng giao diện một website theo yêu cầu của người hướng dẫn Kết quả: Xây dựng được một giao diện website đáp ứng các yêu cầu đặt ra. 3. Thực hiện project Võ Hoàng Đức Khoa 11 4. Lịch làm việc Tuần 1 2 3 4 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 nhóm. - Nghiên cứu tài liệu và các kỹ thuật của dự án TISOHA - Nghiên cứu về ReactJS cơ bản và chuyên sâu - Thực hành dự án TISOHA bằng ReactJS - Tìm hiểu bản thiết kế Người hướng dẫn Mức độ hoàn thành Nhận xét của người hướng dẫn Anh Đỗ Công Bá Anh Đỗ Công Bá Anh Đỗ Công Bá Anh Đỗ Công Bá của dự án, thực hành những gì đã học Võ Hoàng Đức Khoa 12 Chương 3: Các công việc đã làm 1. Init source code Nội dung : Init source code và implement based component Thực hiện : - 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 và yup để validate form và handle submit form Kết quả : - Hoàn thành task đúng với yêu cầu. 2. Tạo components Nội dung : Tạo components theo thiết kế của designer. Võ Hoàng Đức Khoa 14 Thực hiện : - 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 bộ câu hỏi Kết quả : - Hoàn thành task đúng với yêu cầu. 3. Xây dựng giao diện (Do quy định sản phẩm đang được thương mại của công ty chi tiết về dự án không được cung cấp ra bên ngoài) 4. Một số công việc khác - Xây dựng UI cho landing page của 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 3 tháng thực tập tại TISOHA, em đã học được nhiều kinh nghiệm bổ ích về lập trình giao diện web với ReactJS cũng như ReduxJS, về thiết kế UI/UX hoàn thành các nhiệm vụ được giao. Nhờ đó, em đã hiểu được quy trình phát triển của một dự án, đồng thời hiểu được trải nghiệm làm dự án thực tế, tăng kĩ năng giao tiếp, xử lí tình huống. Chân thành cám ơn quý Công ty cổ phần Công nghệ TISOHA đã giúp đỡ tận tình cho em trong thời gian thực tập tại công ty. Đặc biệt là anh Đỗ Công Bá cùng các anh chị trong công ty đã giúp đỡ và hướng dẫn trong quá trình làm việc để em có thể hoàn thành nhiệm vụ được giao Võ Hoàng Đức Khoa