Báo cáo thực tập lập trình và xây dựng giao diện WEBSITE bằng REACTJS

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