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
Trang 1TRƯỜ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á
Trang 2TP Hồ Chí Minh, tháng 06 năm 2022
Trang 3LỜ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
Trang 4LỜ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
Trang 5NHẬN XÉT CỦA KHOA
Trang 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 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 8
2 Nghiên cứu kỹ thuật 8
3 Thực hiện project 9
4 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
Trang 7Chươ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í
Trang 8Chươ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 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ụ
2.2 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
Trang 9- 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
2.3 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
Trang 10render 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
2.4 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,
2.5 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
2.6 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
Trang 114 Lịch làm việc
Tuần Công việc Người hướng dẫn
Mức
độ hoàn thành
Nhận xét của người hướng dẫn
1
- 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
Anh Đỗ Công Bá
2
- 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
Anh Đỗ Công Bá
3 - Thực hành dự án
TISOHA bằng ReactJS
Anh Đỗ Công Bá
4
- Tìm hiểu bản thiết kế của dự án, thực hành những gì đã học
Anh Đỗ Công Bá
Trang 12Chươ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
Trang 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
Trang 14Thự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
Trang 20TÀ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