BÁO cáo THỰC tập lập TRÌNH WEBSITE với REACTJS

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 WEBSITE VỚI REACTJS Công ty thực tập: TEGO GLOBAL Người phụ trách: Trần Phương Nam Thực tập sinh: Lê Trung Hiếu TP Hồ Chí Minh, 24 tháng 12 năm 2021 Trần Phương Nam Lê Trung Hiếu LỜI MỞ ĐẦU Ngày nay, với phát triển lĩnh vực Công nghệ Thông tin với nhu cầu tiện dụng người sản phẩm lĩnh vực phát triển Website giải pháp vô hiệu để giải nhu cầu Cùng với xu hướng phát triển phương tiện truyền thơng Báo, Radio… việc sử dụng Internet ngày phổ biến Truy cập Internet, có kho thơng tin khổng lồ phục vụ nhu cầu, mục đích nhấp chuột Nhận thức nhu cầu tìm hiểu thơng tin, giải trí xã hội, đời hàng loạt website cho mục đích thương mại, giải trí, tin tức… Để đáp ứng với việc cập nhật thơng tin hàng ngày, tình hình xã hội, trị, thời sự, sức khỏe… website tin tức đời nhu cầu tất yếu Sau bốn năm đào tạo trường, em muốn tìm hiểu quy trình làm việc thực tế thử sức với dự án thực tế nên em định chọn Công ty Cổ phần Giải pháp Công nghệ TEGO GLOBAL để tiếp xúc làm việc với đội ngũ quy trình chuyên nghiệp Trần Phương Nam Lê Trung Hiếu LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TEGO tạo điều kiện cho em có hội thực tập cơng ty Chỉ thời gian ngắn, nhờ dẫn giảng giải anh trainer, leader cơng ty, em làm quen hồn thành vài dự án công ty Đặc biệt cảm ơn anh ???????, training kiến thức Javascript framework,, hướng dẫn, giúp đỡ cho chúng em 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; cảm ơn chị ???????, training VueJS ReactJS, giúp em làm quen thục thư viện Redux, VueX,… quy trình phát triển phần mềm Agile, Scrum … để hồn thành dự án công ty Em xin chân thành cảm ơn tồn thể cơng ty tạo cho em môi trường làm việc chuyên nghiệp giúp em phát triển thân 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 Lê Trung Hiếu Hồ Chí Minh, ngày 24 tháng 12 năm 2021 Trần Phương Nam Lê Trung Hiếu NHẬN XÉT CỦA KHOA Trần Phương Nam Lê Trung Hiếu MỤC LỤC LỜI MỞ ĐẦU .2 LỜI CẢM ƠN .3 NHẬN XÉT CỦA KHOA MỤC LỤC CHƯƠNG 2: NỘI DUNG THỰC TẬP TÀI LIỆU THAM KHẢO 17 TỔNG KẾT 18 Trần Phương Nam Lê Trung Hiếu CHƯƠNG 1: GIỚI THIỆU CƠNG TY THỰC TẬP Giới thiệu cơng ty TEGO Tego Global công ty công nghệ Outsource có trụ sở Thành phố Hồ Chí Minh, Việt Nam Kể từ năm 2015, công ty giúp cơng ty tồn cầu thương hiệu lâu đời phát triển hoạt động kinh doanh họ cách xây dựng giải pháp hiệu hỗ trợ công nghệ Sứ mệnh công ty ứng dụng công nghệ kỹ thuật số cho khách hàng cách tập hợp tài kỹ thuật hàng đầu, chuyên môn sâu ngành cống hiến cá nhân để đáp ứng nhu cầu kinh doanh riêng khách hàng Sản phẩm công ty Công ty nhận dịch vụ phát triển web di động nơi Chúng cung cấp dịch vụ quản lý dự án kỹ lưỡng quy trình phát triển sản phẩm chuyên nghiệp với đội ngũ phát triển nhiều kinh nghiệm QA để đảm bảo chất lượng sản phẩm tốt Một số đối tác công ty: CoverGo, BCMS Tech, ADORA, Golden Gate, … Trần Phương Nam Lê Trung Hiếu CHƯƠNG 2: NỘI DUNG THỰC TẬP Đợt thực tập với chủ đề “Lập trình Website giao hàng quốc tế” nhằm mục đích giúp sinh viên học tập thêm công nghệ ReactJS, Redux, VueJS, VueX, quy trình phát triển phần mềm Agile/Scrum, giao tiếp với khách hàng nước ngồi 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 người phụ trách giới thiệu cơng ty, q trình thành lập, phát triển cơng ty, quy trình làm việc, mentor, leader, làm quen với người công ty Thực tập sinh hướng dẫn sử dụng email, dịch vụ công ty để phục vụ công việc Kết : Hiểu thêm công ty TEGO, q 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, 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ố công cụ để phát triển phần mềm Visual Studio Code, Git, Figma, npm, yarn, … Ứng viên mentor hướng dẫn sử dụng cơng cụ quản lý quy trình phổ biến Jira, Trello, Open Project… 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 Tìm hiểu hàm, kỹ thuật Javascript Thời gian : 10 ngày (2 tuần) Nội dung : Được training kỹ thuật JAVASCRIPT nâng cao, kiến thức quan trọng cho việc tối ưu ReactJS - Lập trình hướng đối tượng Các kiến thức lập trình hướng đối tượng khái niêm, đặc tính tính kế thừa, tính đóng gói, tính ảo hóa, tính đa hình 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 Trần Phương Nam Lê Trung Hiếu - Sử dụng kiến thức VueJS để chuyển design từ FIGMA sang HTML/CSS kết hợp với Javascript Kết : - 2.3 Nâng cao kỹ lập trình với ngơn ngữ Javascript, thư ReactJS Có kiến thức quan trọng cho việc lập trình website 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 Lập trình website với ReactJS Redux Nội dung: Các kiến thức ReactJS - Khái niệm ReactJS: React Js thư viện viết javascript, dùng để xây dựng giao diện người dùng (UI) React sử dụng rộng rãi có hệ sinh thái đa dạng phong phú UI tất nhiên quan trọng, tất - Phần ReactJS gì? o Redux: Đây gọi phần quan trọng ReactJS không sử dụng mà đến redux Trong reactJS không bao gồm module chuyên dụng để xử lý liệu ReactJS thiết lập cách độc lập việc chia nhỏ view thành component nhỏ để chúng liên kết chặt chẽ với o Sự liên kết mối quan hệ component ReactJS cần quan tâm đặc biệt luồng liệu chiều từ cha xuống luồng liệu reactJS việc sử dụng luồng liệu chiều có chút khó khăn cho người tìm hiểu sử dụng ứng dụng vô dự án nhiên bên cạnh mặt hạn chế có mặt trội ReactJS phát huy hết tất chức vai trị sử dụng chế chiều làm cho chức view trở nên phức tạp o Virtual Dom: phần mà Framework sử dụng Virtual dom sử dụng ReactJS mà virtual dom thay đổi, điều đặc biệt không cần thao tác trực tiếp dom mà thấy view thấy thay đổi Trần Phương Nam Lê Trung Hiếu Thực : - Thực công việc chuyển design từ mockup sang HTML/CSS – JS Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết : - 2.4 Hiểu khái niệm lập trình website với ReactJS Redux để quản lý store, state Lập trình ReactJS Nội dung : Các kỹ thuật tạo website bản, sử dụng ReactJS - Định nghĩa Website: o Website tập hợp trang web (web pages) bao gồm văn bản, hình ảnh, video, flash v.v thường nằm tên miền (domain name) tên miền phụ (subdomain) World Wide Web Internet Trang web lưu trữ (web hosting) máy chủ web (web server) truy cập thơng qua Internet o Một trang web tập tin HTML XHTML truy nhập dùng giao thức HTTP HTTPS Website xây dựng từ tệp tin HTML (website tĩnh) vận hành CMS chạy máy chủ (website động) Website xây dựng nhiều ngơn ngữ lập trình khác (PHP,.NET, Java, Ruby on Rails ) - Tạo project ReactJS: Được mentor hướng dẫn tạo project bản, cấu hình redux cho project Thực : - Tìm hiểu tự config project sử dụng thư viện ReactJs Redux Kết quả: - Đã tạo project sử dụng thư viện ReactJs Redux, kết hợp với số thư viện design Ant design, SCSS/SASS, Tailwind CSS Thực project Trần Phương Nam Lê Trung Hiếu 10 Sau tuần training thực hành, thực tập sinh nắm kiến thực Javascript, ReactJS Redux Chi tiết đồ án nói phần sau Lịch làm việc Tuần Công việc - 3-4 5-8 9-12 13-14 15-16 - 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 Javascript Tìm hiểu ReactJS, Redux, Rest API, Easy-peasy Convert mockup to Html/css – JS Integrate API Test during implementing, fix bugs UAT version Test during implementing, fix bugs Fix UAT issues Release project Người hướng dẫn Mức độ hoàn thành Chị Nguyễn Thị Mỹ Duyên Anh Nguyễn Duy Tuấn Quang 100% Anh Trần Phương Nam 100% Anh Trần Phương Nam 100% Anh Trần Phương Nam 100% Anh Trần Phương Nam 100% Anh Trần Phương Nam Anh Nguyễn Duy Tuấn Quang 100% Nhận xét người hướng dẫn CHƯƠNG 3: CHI TIẾT DỰ ÁN – TEGO FINANCE Trần Phương Nam Lê Trung Hiếu 11 Giới thiệu dự án Tego Finance - Tego Finance dự án quản lý tiền lương, ứng lương nhân viên, giúp nhân viên gửi yêu cầu ứng lương đến cơng ty chủ quản, từ đó, cơng ty xác nhận/từ chối yêu cầu đó, giúp nhân viên giải vấn đề tài cần thiết Từ số lương ứng, trích phần hoa hồng cho công ty chủ quản - Dự án phát triển theo hướng quản lý toàn chi tiêu cho người sử dụng, người sử dụng dùng tiền lương để tốn hóa đơn, trả khoản nợ đặt lịch trước, nạp thẻ điện thoại … Kế hoạch 2.1 Vai trò dự án: Front-end engineer, nhận yêu cầu từ anh Mentor (Trần Phương Nam), design, endpoint api để tiến hành tích hợp theo yêu cầu 2.2 Giai đoạn phát triển dự án: 2.2.1 Giai đoạn 1: Chuyển design từ Figma sang HTML/CSS: - Hoàn thành toàn UI cho dự án (UI mục 3.) - Kết quả: Hoàn thành toàn UI cho dự án (Mức hoàn thiện: 99%, dựa theo design/mockup figma) 2.2.2 Giai đoạn 2: API Integration: - Tìm hiểu phương thức, config axios - Tích hợp API cung cấp backend, tích hợp Easy-peasy để quản lý state cho dự án - Kết quả: Tích hợp tồn API cho dự án, đồng thời kiểm thử dự án q trình tích hợp 2.2.3 Giai đoạn 3: UAT - Deploy web demo để tiến hành giai đoạn UAT - Kết quả: Tiến hành sửa chữa bugs có trình kiểm thử, cuối release phiên hồn thiện Giao diện chính: Trần Phương Nam Lê Trung Hiếu 12 3.1 Màn hình đăng nhập: 3.1.1 Nhập mã nhân viên 3.1.2 Nhập mã pin: Trần Phương Nam Lê Trung Hiếu 13 3.2 Màn hình quên mật khẩu: 3.3 Màn hình chính: Trần Phương Nam Lê Trung Hiếu 14 3.4 Màn hình thơng tin nhân viên: 3.4.1 Thơng tin bản: 3.4.2 Thông tin tài khoản ngân hàng: Trần Phương Nam Lê Trung Hiếu 15 3.5 Màn hình nhập số lương muốn ứng: 3.6 Màn hình xác nhận thông tin: Trần Phương Nam Lê Trung Hiếu 16 3.7 Màn hình báo thành cơng (ứng lương): Trần Phương Nam Lê Trung Hiếu 17 TÀI LIỆU THAM KHẢO For Main concepts of ReactJS, Redux: - ReactJS - Redux - Easy-peasy For API Integration: - Axios For design pattern: - Ant design - Chakra-UI For css libraries: - Tailwind css Trần Phương Nam Lê Trung Hiếu 18 TỔNG KẾT Như vậy, sau thời gian thực tập vai trò Front-end intern công ty Tego, em học hỏi quy trình phát triển sản phẩm cách hồn thiện với giúp đỡ anh Trần Phương Nam anh Nguyễn Duy Tuấn Quang giúp đỡ team để hồn thành dự án Qua q trình thực tập trên, em tiếp xúc với môi trường làm việc thực tế, tiếp xúc với dự án thực tế, từ giúp nâng cao khả giao tiếp với khách hàng, nâng cao khả ngoại ngữ, khả quản lý cơng việc kỹ thuật lập trình Em xin cảm ơn thầy/cô khoa Công nghệ Phần mềm giúp em hoàn thành báo cáo Em xin chân thành cảm ơn Trần Phương Nam Lê Trung Hiếu ... CHƯƠNG 2: NỘI DUNG THỰC TẬP Đợt thực tập với chủ đề ? ?Lập trình Website giao hàng quốc tế” nhằm mục đích giúp sinh viên học tập thêm công nghệ ReactJS, Redux, VueJS, VueX, quy trình phát triển phần... ngữ Javascript, thư ReactJS Có kiến thức quan trọng cho việc lập trình website 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 Lập trình website với ReactJS Redux Nội... với ReactJS Redux để quản lý store, state Lập trình ReactJS Nội dung : Các kỹ thuật tạo website bản, sử dụng ReactJS - Định nghĩa Website: o Website tập hợp trang web (web pages) bao gồm văn