LẬP TRÌNH GIAO DIỆN WEBSITE VỚI 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 GIAO DIỆN WEBSITE VỚI REACTJS Công ty thực tập : Công ty cổ phần Công nghệ Saha Người phụ trách : Nguyễn Đức Hiếu Thực tập sinh : Nguyễn Nam Hùng - 17520544 TP Hồ Chí Minh, tháng 06 năm 2022 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ố ln 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 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 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 SAHA 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 cổ phần Công nghệ Saha tạo điều kiện cho em có hội thực tập cơng ty Chỉ thời gian ngắn gần tháng 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 Nguyễn Đức Hiếu 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 Nam Hùng TP Hồ Chí Minh, tháng 06 năm 2022 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 cổ phần Công nghệ Saha CHƯƠNG 2: NỘI DUNG THỰC TẬP 10 Tìm hiểu chế vận hành cơng ty chuẩn mực liên quan 10 Nghiên cứu kỹ thuật 10 Lịch làm việc 15 CHƯƠNG 3: CHI TIẾT VỀ PROJECT 16 Áp dụng kiến thức học, kiểm tra thực hành thiết kế trang thương mại điện tử 16 CHƯƠNG 4: TỔNG KẾT 18 TÀI LIỆU THAM KHẢO 18 – CHƯƠNG 1: GIỚI THIÊU CƠNG TY THỰC TẬP Giới thiệu Cơng ty cổ phần Công nghệ Saha Công ty cổ phần Công nghệ Saha ( SAHA TECHNOLOGY JSC ) thuộc hệ sinh thái SAHA Công ty phần mền chuyển thiết kế , cung cấp dịch vụ WEBSITE APP – POS quản lí bán hàng đa kênh cho doanh nghiệp hướng đến giải pháp kinh doanh O2O ( Online to Ofline ) cho chủ doanh nghiệp Đây đợc xem mơ hình tương lai mang đến mục tiêu tận dụng ưu điểm kênh bán hàng truyền thống trực tuyến Lịch sử doanh nghiệp - - Từ đầu 2020 đại dịch Covid 19 xảy nhận thấy thời chuyển đổi số Việt Nam, Saha với đội ngũ cựu du học sinh kỹ sư phần mềm Nhật Bản bắt đầu xây dựng cho mắt tảng quản lý bán hàng đa kênh phù hợp với tất nhà bán hàng Sau thời gian đưa tảng đồng App – Web – Pos với tiêu chí cụ thể DỄ DÀNG – NHANH CHĨNG - TIẾT KIỆM đến tay người bán hàng Với giải pháp bán hàng giúp đối tác SAHA dễ dàng tiếp cận tới khách hàng họ tăng doanh thu nâng tầm doanh nghiệp Hiện có 500 doanh nghiệp sử dụng giải pháp Saha - Quy mô hoạt động: Với tiêu chí đưa doanh nghiệp tới gần với người khách hàng SAHA đưa thị trường công nghệ sản phẩm thương mại điện tử theo lĩnh vực sau : - IKI POS: Phần mền quản lí bán hàng offline dễ dàng sử dụng giúp quản lí bán hàng, doanh thu , lãi lỗ ,tính tiền , in hóa đơn , chấm cơng quản lí nhân viên cho khách hàng nhanh chóng - IKI WEB: Thiết kế Website quản lí bán hàng offline chuẩn SEO, chuyên nghiệp - IKI TECH: Phần mềm quản lí bán hàng tích hợp Online Offline, giúp người bán hàng nề tảng đa kênh : Lazada , Shopee, quản lí nhiều kênh bán hàng , Saha cịn có chương trình Affiliate giúp cho doanh nghiệp tiếp cận tới nhiều đối tượng kinh doanh Đặc biệt đối tác SAHAcó thể mở thêm APP bán hàng riêng cho khách hàng họ - - WEBSITE IKI TECH: website bán hàng Online Offline, giúp người bán hàng nề tảng đa kênh : Lazada , Shopee, quản lí nhiều kênh bán hàng , Saha cịn có chương trình Affiliate giúp cho doanh nghiệp tiếp cận tới nhiều đối tượng kinh doanh IKI STORE: Ngồi ra, SAHA cịn mở rộng thiết kế app bán hàng dành riêng cho khách hàng doanh nghiệp Giúp cho doanh nghiệp tăng mức độ nhận diện thương hiệu với khách hàng họ Ngồi sản phẩm cơng nghệ cho doanh nghiệp bán hàng, Saha – IKI Tech cung cấp cho doanh nghiệp dịch vụ Digital Marketing chuyên nghiệp, hướng đến giải pháp chuyển đổi số hoàn thiện – 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 SAHA, 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 chuyên 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 nghe người phụ trách 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.1 Cài đặt, làm quen 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, mentor hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho công việc sau Một số phần mềm số Trello, VSCode– IDE để lập trình giao diện, Terminal để sử dụng git, SourceTree để sử dụng git với GUI Thực : Thực hành sử dụng phần mềm nêu Kết : Lập trình sử dụng cơng cụ miễn phí, giúp dễ dàng kết hợp công cụ với nhau, so với việc dung IDE 2.1.3 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 : 14 ngày 10 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 - 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 : - 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 : - Nắm kiến thức html/css/scss - Nắm BEM name - Có thể dàn layout trang web, style theo design responsive 2.1.4 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: 2.1.4.1JSX 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 – 11 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 2.1.4.2 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 2.1.4.3 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: 2.1.4.3Tham gia đầy đủ buổi training công ty 2.1.4.4Làm thực hành, kiểm tra kiến thức học Kết quả: 2.1.4.5Nâng cao kỹ lập trình Front-end 2.1.4.6Tạo giao diện demo đơn giản kỹ thuật nghiên cứu 2.1.4.7Có kiến thức quan trọng cho việc lập trình sau 2.1.4.8Ngồi biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu 2.1.5 Nghiên cứu design SAHA Thời gian: ngày Nội dung: Nghiên cứu design chức page SAHA, 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… 12 Kết quả: Hiểu trực quan xử lý project, cách tổ chức project, quy chuẩn code, … 2.1.6 Thực hành Visual Studio Code Thời gian: 14 ngày Nội dung: Áp dụng kiến thức tìm hiểu, thực hành mơ lại website 2.1.6.1Đọc hiểu thiết kế web 2.1.6.2Nắm luồng xử lý 2.1.6.3Thiết kế giao diện, hình trang chủ Tạo hiệu ứng cho website 2.1.6.4Thiết kế xử lý logic bản, chuyển hình website Kết quả: 2.1.6.5Mơ lại website theo code thân 2.1.6.6Nâng cao khả lập trình front-end, javascript kỹ liên quan, bổ trợ cho trình sau Giai đoạn 2: Xây dựng tìm hiểu Redux 2.1.7 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à: 2.1.7.1Cài đặt NodeJS 2.1.7.2Học cách sử dụng vận hành Redux 2.1.7.3Thực hành demo chức đơn giản website có áp dụng Redux 2.1.8 Nghiên cứu tài liệu kỹ thuật Thời gian: ngày Nội dung: 2.1.8.1Redux 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) 2.1.8.2 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, 13 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 2.1.8.3 Với việc sử dụng Redux, lưu state component vào store chung bên Sau muốn dùng component cần gọi sử dụng Redux xây dựng dựa nguyên lý: 2.1.8.3.1 Nguồn liệu tin cậy nhất: State toàn ứng chứa object tree nằm Store 2.1.8.3.2 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) 2.1.8.3.3 Thay đổi hàm túy: Để cách mà State biến đổi Action dùng pure function gọi Reducer Về Redux có thành phần sau: 2.1.8.4Action: 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 2.1.8.5Reducer: Là nơi xác định State thay đổi 2.1.8.6Store: 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) 2.1.8.7View: 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.1.9 Thực hành xây dựng website theo yêu cầu Thời gian: 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 – 14 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 SAHA Nghiên cứu ReactJS chuyên sâu 2-3 - 4-8 - Thực hành dự án SAHA ReactJS 8-9 - Tìm hiểu thiết kế dự án, thực hành học Người hướng dẫn Mức độ hoàn thành Nhận xét người hướng dẫn Chị Hiên Anh Hiếu Anh Hiếu Chị Hiên – 15 CHƯƠNG 3: CHI TIẾT VỀ PROJECT Áp dụng kiến thức học, kiểm tra thực hành thiết kế trang thương mại điện tử 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 - Sau nắm kiến thức front-end, em bạn thực tập phân công dựng giao diện website qua giao diện tham khảo - Trang web giao diện thương mại điện tử Kết quả: Trang web tối ưu tốt, giao diện thân thiện Đạt yêu cầu đề 16 Tham gia đội ngũ cải thiện, bảo trì số giao diện IKI WEB (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 ngoài) 17 CHƯƠNG 4: TỔNG KẾT Sau gần tháng thực tập SAHA, 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 quý Công ty cổ phần Cơng nghệ SAHA giúp đỡ tận tình cho em thời gian thực tập công ty Đặc biệt anh Nguyễn Đức Hiếu anh chị công ty giúp đỡ hướng dẫn trình làm việc để em hồn thành nhiệm vụ giao 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/ 18 ... 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ực hành xây dựng giao diện website theo yêu cầu người hướng dẫn - Sau nắm kiến thức front-end, em bạn thực tập phân công dựng giao diện website qua giao diện tham khảo - Trang web giao diện. .. TỔNG KẾT Sau gần tháng thực tập SAHA, 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ự