Nếu như AngularJS là một Framework cho phép nhúng code javasscript trong code html thông qua các attribute như ng-model, ng-repeat...thì với react là một library cho phép nhúng code html
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 VÀ XÂY DỰNG GIAO DIỆN WEBSITE BẰNG REACTJS
Công ty thực tập : Công ty TNHH Công nghệ Giáo Dục Thông Minh S.E.N Người phụ trách : Trần Phi Phúc
Thực tập sinh : Nguyễn Kỷ Nguyên - 17520825
TP Hồ Chí Minh, tháng 01 năm 2021
1
Trang 2LỜI MỞ ĐẦU
React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu hướng Single Page Application Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác Nếu như AngularJS là một Framework cho phép nhúng code javasscript trong code html thông qua các attribute như ng-model, ng-repeat thì với react là một library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS.Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn
React là một thư viện UI phát triển tại Facebook để 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 trong production, và 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
Sau 3 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 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 S.E.N là nơi sẽ giúp em thực hiện được dự định này
Trang 3LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty TNHH Công nghệ Giáo Dục Thông Minh S.E.N đã 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 trong 3 tháng nhưng nhóm trainer đã hướng dẫn nhiệt tình giúp em cùng các bạn thực tập sinh khác có thêm nhiều kiến thức, kinh nghiệm bổ ích mà tụi
em chưa có được trước khi tới công ty Đã giúp em hòa mình vào được với các bậc đàn anh đi trước, cùng nhau chia sẻ các nhiệm vụ mà công ty giao và hơn hết là lần đầu trải nghiệm làm một lập trình viên thứ thiệt
Đặc biệt cảm ơn anh Trần Phi Phúc và chị Trần Thị Huỳnh Ngân đã hướng dẫn, giúp đỡ
tận tình cả những khó khăn trong công việc, đến những khó khăn việc làm quen với môi trường mới, đã chỉ dẫn em về cách làm báo cáo, lên kế hoạch, những kỹ năng không thể thiếu
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 Kỷ Nguyên
Tp Hồ Chí Minh, tháng 01 năm 2021
Trang 4NHẬN XÉT CỦA KHOA
Trang 5
MỤC LỤC
LỜI MỞ ĐẦU 2
LỜI CẢM ƠN 3
NHẬN XÉT CỦA KHOA 4
CHƯƠNG 1: GIỚI THIÊU CÔNG TY THỰC TẬP 6
1 Giới thiệu Công ty TNHH Công nghệ Giáo dục Thông minh S.E.N 6
CHƯƠNG 2: NỘI DUNG THỰC TẬP 7
1 Tìm hiểu cơ chế vận hành công ty và các chuẩn mực liên quan 7
2 Nghiên cứu kỹ thuật 7
3 Lịch làm việc 12
CHƯƠNG 3: CHI TIẾT VỀ PROJECT 13
1 Giới thiệu về L.M.S 13
CHƯƠNG 4: TỔNG KẾT 14
TÀI LIỆU THAM KHẢO 15
1 ReactJS 15
2 Redux 15
Trang 6CHƯƠNG 1: GIỚI THIÊU CÔNG TY THỰC TẬP
1 Giới thiệu Công ty TNHH Công nghệ Giáo dục Thông minh S.E.N
- S.E.N là công ty phần mềm Việt Nam thành lập từ năm 2010.S.E.N là công ty có các kĩ
sư giàu kinh nghiệm, có tay nghề cao và đam mê trong các sản phẩm công nghệ và dịch
vụ nội dung số trực tuyến
- Công ty S.E.N cung cấp các dịch vụ số hoá quản lý học tập xuyên cấp trong toàn bộ các
cơ sở, các nền tảng giảng dạy trực tuyến cho các trường học ở Mỹ và Việt Nam
- Cuối cùng, công ty S.E.N cung cấp dịch vụ bảo trì các sản phẩm và cơ sở hạ tầng kỹ thuật số trực tuyến với hiệu suất cao và trung tâm dữ liệu an toàn trên quy mô toàn cầu
Trang 7CHƯƠNG 2: NỘI DUNG THỰC TẬP
Đợt thực tập với chủ đề “Lập trình, xây dựng front-end website với ReactJS” nhằm mục đích giúp sinh viên thực tập được đào tạo về lập trình ReactJS và Redux trong xây dựng giao diện web, đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, giao tiếp Tại S.E.N, 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 phần mềm chuyên nghiệp
1 Tìm hiểu cơ chế vận hành công ty và các chuẩn mực liên quan
Thời gian : 3 ngày
Nội dung : Giới thiệu về công ty, cách tổ chức của công ty
- Được chị Trần Thị Huỳnh Ngân giới thiệu về công ty, khối phát triển phần mềm, team, 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
- Đượ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, điểm danh, check in/checkout…
Kết quả : Hiểu thêm về cách tổ chức của một công ty là như thế nào Có thêm các kĩ
năng làm việc như gửi mail, cách hỏi và đặt vấn đề, giúp cho em tự tin hơn trong những thời gian làm viêc sau này
2 Nghiên cứu kỹ thuật
2.1 Giai đoạn 1: Xây dựng giao diện với ReactJS
2.1.1 Cài đặt, làm quen các công cụ làm việc
Thời gian : 7 ngày Nội dung : Được hướng dẫn cài đặt và sử dụng các công cụ mà công ty dùng
để làm việc nhóm, chia sẻ Source Code nội bộ, Đọc hiểu Design và lấy các thông số liên quan
- Kênh thông tin làm việc nhóm: Bitbucket
- Chia sẻ Source Code : TortoiseSVN
- Phần mềm code: Visual Studio Code
- Cài đặt NodeJS, thư viện của ReactJS
- Đọc thêm các tài liệu liên quan đến quy chuẩn code, quy tắc đặt tên biến của công ty
Trang 8Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.
Kết quả : Hiểu thêm về những phần mềm liên quan tới công việc của công ty.
Biết thêm những quy tắc lập trình, cách chia sẻ code của mình với team, cách đọc một bản design và ứng dụng nó như thế nào
2.1.2 Nghiên cứu bản thiết kế, chỉ thị
Thời gian : 3 ngày
Nội dung : Nghiên cứu bản thiết kế chi tiết của website S.E.N, luồng xử lý, thiết
kế các màn hình, các hiệu ứng, animation…
Kết quả : Hiểu được chi tiết trang web, cách thiết kế, xử lý các hiệu ứng trong
web…
2.1.3 Nghiên cứu tài liệu và những kỹ thuật.
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 template như 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
Trang 9- 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 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
2.1.4 Nghiên cứu bản design của S.E.N
Thời gian : 3 ngày
Nội dung : Nghiên cứu design và chức năng các page của S.E.N, 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 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.1.5 Lập trình trên Visual Studio Code
Thời gian : 30 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
Trang 102.2. Giai đoạn 2: Xây dựng tìm hiểu Redux
2.2.1 Tìm hiểu và cài đặt Redux
Thời gian : 3 ngày
Nội dung : Do khối lượng công việc giảm, thêm vào đó team sắp nhận thêm
dự án về Redux nên team leader đã phân công công việc tìm hiểu thực hành trước về Redux để có thể hỗ trợ cho dự án sau này Các công việc được giao là:
- Cài đặt NodeJS
- Học cách sử dụng và vận hành của Redux
- Thực hành demo các chức năng đơn giản của website có áp dụng Redux
2.2.2 Nghiên cứu tài liệu và các kỹ thuật
Thời gian : 7 ngày
Nội dung :
- Redux js là một thư viện Javascript giúp tạo ra thành một lớp quản lý trạng thái của ứng dụng Được dựa trên nền tảng tư tưởng của kiến trúc Flux do Facebook giới thiệu, do vậy Redux thường là bộ đôi kết hợp hoàn hảo với React (React Js và React Native)
- Với việc không sử dụng Redux, các component sẽ giao tiếp với nhau bằng props Nếu chúng ta cần lấy state của một component cách nhau 3 tầng, chúng ta phải gọi 3 lần, điều đó sẽ khiến việc code và quản lý state rất phức tạp, và to dần lên theo thời gian
- Với việc sử dụng Redux, chúng ta sẽ lưu state của các component vào 1 store chung ở bên ngoài Sau đó nếu muốn dùng ở component nào chúng ta chỉ cần gọi nó và sử dụng
Redux được xây dựng dựa trên 3 nguyên lý:
Nguồn dữ liệu tin cậy duy nhất: State của toàn bộ ứng được chứa trong một object tree nằm trong Store duy nhất
Trạng thái chỉ được phép đọc: Cách duy nhất để thay đổi State của ứng dụng là phát một Action (là 1 object mô tả những gì xảy ra)
Thay đổi chỉ bằng hàm thuần túy: Để chỉ ra cách mà State được biến đổi bởi Action chúng ta dùng các pure function gọi là Reducer
Trang 11 Về cơ bản Redux có 4 thành phần như sau:
- Action: Là nơi mang các thông tin dùng để gửi từ ứng dụng đến Store Các thông tin này là 1 object mô tả những gì đã xảy ra
- Reducer: Là nơi xác định State thay đổi như thế nào
- Store: Là nơi quản lý State, cho phép truy cập State qua getState(), update State qua dispatch(action), đăng kí listener qua subscribe(listener)
- View: Hiển thị dữ liệu được cung cấp bởi Store
Thực hiện :
- 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 với Redux
- Tạo được những ứng dụng 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
2.2.3 Thực hành xây dựng website theo yêu cầu
Thời gian : 30 ngày
Nội dung : Thực hành xây dựng giao diện một website theo yêu cầu của team
leader
Kết quả : Xây dựng được một giao diện website đáp ứng các yêu cầu đặt ra.
Trang 123 Lịch làm việc
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
Chị Trần Thị Huỳnh
Ngân
2-3
- Nghiên cứu tài liệu và các kỹ
thuật của dự án S.E.N
4 - 8 - Thực hành dự án S.E.N bằng
8-9 - Tìm hiểu bản thiết kế của dự án Chị Trần Thị
Huỳnh Ngân
Trang 13CHƯƠNG 3: CHI TIẾT VỀ PROJECT
1 Giới thiệu về L.M.S
L.M.S là một website mang tính ứng dụng giáo dục trực tuyến, cho phép giáo viên có thể dạy học, tương tác với với lớp học và từng thành viên trong lớp học Đồng thời có thể quản lý được số lượng cũng như chất lượng của từng học sinh thông qua hệ thống quản
lý và hệ thống thi đánh giá học lực, cho phép giáo viên có thể trình chiếu slide trực tiếp trên nền tảng
Vì quy định bảo mật của công ty nên các thông tin chi tiết về dự án không được cung cấp ra bên ngoài.
Trang 14CHƯƠNG 4: TỔNG KẾT
Sau hơn 3 tháng thực tập tại S.E.N, em đã học được nhiều kinh nghiệm bổ ích về lập trình 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 dịch vụ công nghệ S.E.N đã giúp đỡ tận tình cho em trong suốt 3 tháng thực tập tại công ty Đặc biệt là anh Trần Phi Phúc và chị Trần Thị Huỳnh Ngân đã 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
Website công ty: https://smartedunow.com/
Trang 15TÀI LIỆU THAM KHẢO
1 ReactJS
- HTML CSS
https://www.w3schools.com/html/html_css.asp
- Nodejs
https://nodejs.org/en/
- ReactJS
https://reactjs.org/
- Sass
https://sass-lang.com/
2 Redux
https://redux.js.org/