1 Thiều Quang Lâm 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 VỚI REACTJS Công ty thực tập Công ty TNHH DV TM Good Goods Người phụ trách Thiều Hạnh[.]
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 VỚI REACTJS Công ty thực tập : Công ty TNHH DV TM Good Goods Người phụ trách : Thiều Hạnh Dung Thực tập sinh : Thiều Quang Lâm TP Hồ Chí Minh, tháng 12 năm 2022 Thiều Quang Lâm LỜI MỞ ĐẦU Ngày nay, với phát triển công nghệ, tảng thương mại điện tử (Ecommerce) trở thành phần thiếu sống nhiều người Hơn nữa, sau đại dịch Covid-19, phận không nhỏ người dùng Internet cần trang web, ứng dụng di động phục vụ cho việc mua sắm qua mạng, qua làm gia tăng tầm quan trọng E-commerce Ngồi ra, ảnh hưởng Cách mạng Công nghiệp 4.0, ngày nhiều doanh nghiệp định mở rộng thị trường lên mạng Internet, qua mang thêm nhiều hội việc làm cho lập trình viên website Vì lý này, em định chọn lập trình website làm định hướng cho việc học tập Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia phát triển thân môi trường chuyên nghiệp, em có dự định thực tập Vì vậy, em định chọn Cơng ty TNHH Dịch vụ Thương mại Good Goods môi trường lý tưởng, chuyên nghiệp - nơi giúp em thực dự định Thiều Quang Lâm LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TNHH Dịch vụ Thương mại Good Goods tạo điều kiện cho em có hội thực tập công ty Chỉ khoảng thời gian ngắn ngủi, nhờ có dẫn nhiệt tình anh chị công ty, em tiếp thu kiến thức quan trọng để xây dựng giao diện website bán hàng Chân thành cảm ơn anh chị bỏ nhiều thời gian,cơng sức để hướng dẫn em hồn thành đợt thực tập Đặc biệt cảm ơn chị Thiều Hạnh Dung hướng dẫn, giúp đỡ cho em tận tình vấn đề thắc bước đầu làm quen với môi trường làm việc mới, vấn đề kỹ thuật trình xây dựng giao diện website, cách làm báo cáo, lên kế hoạch, kỹ thiếu môi trường làm việc, việc training cho em kiến thức quan trọng lập trình front-end Reactjs, Redux, Material Design UI để làm sản phẩm thời gian qua Cũng xin cảm ơn thầy 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 Thiều Quang Lâm Tp HCM, ngày 26 tháng 12 năm 2022 Thiều Quang Lâm NHẬN XÉT CỦA KHOA Thiều Quang Lâm MỤC LỤC Chương 1: Giới thiêu Công ty TNHH Dịch vụ Thương mại Good Goods Chương 2: Nội dung thực tập Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc 2.2 Tìm hiểu ngơn ngữ lập trình web (HTML, CSS, JavaScript) 2.3 Tìm hiểu thư viện liên quan Thực project 11 Lịch làm việc 11 Chương 3: Chi tiết project 14 Giới thiệu trang web bán quần áo online 14 Kế hoạch 16 TÀI LIỆU THAM KHẢO 18 Thiều Quang Lâm Chương 1: Giới thiêu Công ty TNHH Dịch vụ Thương mại Good Goods Công ty TNHH Dịch vụ Thương mại Good Goods thành lập năm 2015, công ty chuyên bán lẻ sản phẩm như: • Bán lẻ đồ điện gia dụng, giường, tủ, bàn, ghế đồ nội thất tương tự, đèn đèn điện, đồ dùng gia đình • Bán lẻ đồ uống cửa hàng chuyên doanh • Bán lẻ vải, len, sợi, khâu hàng dệt khác • Bán lẻ đồ ngũ kim, sơn, kính thiết bị lắp đặt • Bán lẻ thảm, đệm, chăn, màn, rèm, vật liệu phủ tường sàn • Bán lẻ sách, báo, tạp chí văn phịng phẩm • Bán lẻ băng đĩa âm thanh, hình ảnh (kể băng, đĩa trắng) • Bán lẻ thiết bị, dụng cụ thể dục, thể thao • Bán lẻ trị chơi, đồ chơi cửa hàng chuyên doanh • Bán lẻ hàng may mặc, giày dép, hàng da giả da Thiều Quang Lâm Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Lập trình Front-end với Reactjs” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình ứng dụng website, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, 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 cơng ty kỹ công ty 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 (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ơng ty Ngồi ra, thực tập sinh cịn 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… Kết quả: Hiểu thêm công ty TNHH Dịch vụ Thương mại Good Goods, trình thành lập phát triển Có thêm kỹ việc sử dụng email cơng việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm Nghiên cứu kỹ thuật 2.1 2.2 Các 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, người phụ trách 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ố Basecamp - sử dụng làm việc nhóm theo dõi tiến độ làm việc, Visual Studio Code – chương trình soạn thảo source code, extension kèm với Visual Studio Code để phục vụ cho việc lập trình Thực hiện: Thực hành sử dụng phần mềm nêu Kết quả: 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 Tìm hiểu ngơn ngữ lập trình web (HTML, CSS, JavaScript) Thời gian: ngày Nội dung: Được training kiến thức quan trọng cho việc lập trình ứng dụng web bao gồm: - HTML, CSS Thiều Quang Lâm - Các kiến thức HTML CSS thẻ định dạng, cách sử dụng CSS cho đoạn mã HTML, … JavaScript Giới thiệu cú pháp JavaScript, cách nhúng mã JavaScript vào mã HTML, cách tạo trang web đơn giản JavaScript - Các quy tắc lập trình Thực tập sinh hướng dẫn nguyên tắc lập trình nói chung, Single Responsibility, KISS (Keep It Simple, Stupid), 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 Thiều Quang Lâm Kết quả: - 2.3 Nâng cao kỹ lập trình web Có kiến thức quan trọng cho việc lập trình web sau Ngồi biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu Tìm hiểu thư viện liên quan Thời gian: ngày Nội dung: Các kiến thức thư viện JavaScript NPM, Reactjs - NPM NPM (Node Package Manager) trình quản lý gói mã nguồn JavaScript cài đặt kèm theo sẵn với Nodejs Các gói gọi NPM Package Các NPM package phát triển developer, họ publish package họ tải lên server NPM Thực tập sinh hướng dẫn tìm hiểu thông tin NPM cách cài đặt package vào mơi trường lập trình sử dụng NPM - Reactjs Thiều Quang Lâm 10 Reactjs thư viện JavaScript dùng để xây dựng giao diện người dùng, 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 được; Reactjs không hoạt động phía client, mà cịn render server kết nối với Thực tập sinh hướng dẫn cách cài đặt Reactjs tạo React App đơn giản - Redux Redux thư viện JavaScript để quản lý trạng thái ứng dụng, thường sử dụng với React Redux giúp ứng dụng hoạt động cách quán hoạt động nhiều môi trường khác client, server, native, … Ngoài ra, sử dụng thư viện Redux để lưu trữ giúp trình test/kiểm thử phần mềm dễ 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 - Material UI Thiều Quang Lâm 11 Material UI (thường viết tắt MUI) thư viện JavaScript cung cấp công cụ thiết kế giao diện có sẵn Button, Checkbox, Slider, Menu, Dialog, Table, … giúp cho việc lập trình Front-end trở nên nhanh chóng dễ dàng Thực hiện: - Tham gia đầy đủ buổi training Làm tập thực hành cài đặt thư viện, xây dựng app React … Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết quả: - Hiểu khái niệm lập trình Front-end với Reactjs Hiểu thêm cách quản lý thư viện, dependencies ứng dụng JavaScript Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực lập trình Front-end Reactjs, Redux Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để xây dựng giao diện website thương mại điện tử sản phẩm thời trang Chi tiết đồ án nói phần sau Lịch làm việc Thiều Quang Lâm 12 Tuần Cơng việc 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 việc công ty - Học cách trao đổi, làm việc qua email - Tìm hiểu ngơn ngữ lập trình web HTML, CSS, Javascript - Tìm hiểu NPM Reactjs - Tìm hiểu quản lý trạng thái với Redux - Tìm hiểu lập trình giao diện với Material Design UI - Tìm hiểu cách thức vận hành trang web thương mại điện tử - Lên kế hoạch xây dựng trang web Xây dựng giao diện trang chủ, giỏ hàng, trang toán - Hiện thực giao diện, quản lý trạng thái trang - Hiện thực chức thêm vào giỏ hàng, toán Xây dựng giao diện chức đăng ký, đăng nhập tài khoản Chị Thiều Hạnh Dung - Mức độ hoàn thành Nhận xét người hướng dẫn Chị Thiều Hạnh Dung Chị Thiều Hạnh Dung Chị Thiều Hạnh Dung Chị Thiều Hạnh Dung Chị Thiều Hạnh Dung Chị Thiều Hạnh Dung Thiều Quang Lâm 13 - Hiện thực chức Chị Thiều Hạnh đăng ký đăng Dung nhập Báo cáo cuối đợt thực tập Thiều Quang Lâm 14 Chương 3: Chi tiết project Giới thiệu trang web bán quần áo online Trang web bán quần áo (tạm thời chưa có tên gọi) dự định tảng thương mại điện tử cung cấp sản phẩm thời trang, may mặc cho người dùng Nền tảng có chức trang E-commerce xem danh sách hàng có sẵn, chi tiết sản phẩm, đặt hàng, tốn (u cầu thơng tin bổ sung số điện thoại, địa giao hàng, …); khách hàng có nhu cầu tạo tài khoản để nhận ưu đãi đăng ký đăng nhập tài khoản (yêu cầu xác thực email) Một số giao diện trang web: Thiều Quang Lâm 15 Thiều Quang Lâm 16 Kế hoạch Giai đoạn (thực tuần): - Hoàn thành giao diện trang chủ, giỏ hàng, toán sản phẩm, chức liên quan Hoàn thành thành phần trang web Header, Navigation Bar Kết quả: Thiều Quang Lâm 17 Hầu hết tính thực hiện, giao diện sơ sài, chưa đẹp mắt Giai đoạn (thực tuần): - - Thiết lập quy trình đăng ký, đăng nhập vào trang web, chức liên quan Quên mật khẩu, Thiết lập lại mật - Bổ sung thêm Side Bar, giao diện trang Hồ sơ người dùng Kết quả: Hồn thành tính trên, dù chưa có cải thiện nhiều giao diện Thiều Quang Lâm 18 TÀI LIỆU THAM KHẢO Visual Studio Code: https://code.visualstudio.com/ https://code.visualstudio.com/docs HTML, CSS: https://www.w3schools.com/html/html_css.asp JavaScript: https://www.javascript.com/ https://www.w3schools.com/js/ NPM: https://www.npmjs.com/ https://docs.npmjs.com/ https://www.npmjs.com/package/package Reactjs: https://reactjs.org/ https://reactjs.org/tutorial/tutorial.html Redux: https://redux.js.org/ Material UI: https://mui.com/ Các quy trình xây dựng trang web thương mại điện tử: https://www.forbes.com/advisor/business/software/how-build-ecommerce-website/ Thiều Quang Lâm 19 TỔNG KẾT Như vậy, vịng tháng ngắn ngủi, nhóm kịp hoàn thành trang web thương mại điện tử với tính Do thời gian có hạn nên trang web cịn đơn giản, đồ hoạ chưa thực trau chuốt chưa có nhiều tính mong đợi Tuy nhiên, trang web mở rộng thêm nhiều chức hữu ích nên sau có thời gian phát triển lên mức cao Chân thành cảm ơn giúp đỡ anh chị công ty Đặc biệt cảm ơn chị trainer Thiều Hạnh Dung giúp em hoàn thành báo cáo Thiều Quang Lâm ... Thiều Quang Lâm Chương 2: Nội dung thực tập Đợt thực tập với chủ đề ? ?Lập trình Front-end với Reactjs” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình ứng dụng website, đồng thời... khái niệm lập trình Front-end với Reactjs Hiểu thêm cách quản lý thư viện, dependencies ứng dụng JavaScript Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực lập trình Front-end. .. quy tắc lập trình Thực tập sinh hướng dẫn nguyên tắc lập trình nói chung, Single Responsibility, KISS (Keep It Simple, Stupid), Thực hiện: - Tham gia đầy đủ buổi training công ty - Làm thực hành,