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 ỨNG DỤNG WEB VỚI REACTJS Công ty thực tập Telio Người phụ trách Nguyễn Đức Bảo Thực tập sinh Nguyễn Cao Cường TP H[.]
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 ỨNG DỤNG WEB VỚI REACTJS Công ty thực tập :Telio Người phụ trách :Nguyễn Đức Bảo Thực tập sinh : Nguyễn Cao Cường TP Hồ Chí Minh, tháng … năm … 1 LỜI MỞ ĐẦU Ứng dụng web ngày có sức lan tỏa mạnh mẽ sống người Nó trở thành phần tất yếu họ Mọi người sử dụng để giải trí, mua sắm, chia sẻ ảnh, v.v Ngồi ra, cơng ty, doanh nghiệp sử dụng để quảng cáo thương hiệu, sản phẩm, dịch vụ, hỗ trợ hoạt động kinh doanh thúc đẩy bán hàng Do nhu cầu tương đối cao ứng dụng web, nhiều thư viện phát triển để hỗ trợ phát triển web nhanh dễ dàng hơn, chẳng hạn Reactjs Ngày nay, ứng dụng web đóng vai trị tất yếu sống người Mọi người sử dụng web để kết nối với người khác, mua sắm, giải trí Bên cạnh đó, doanh nghiệp dần lựa chọn môi trường web để phát triển phần mềm theo nhu cầu họ Và với nhu cầu ngày tăng cao, nhiều thư viện đời để giúp việc phát triển web nhanh chóng hiệu hơn, có thư viện phổ biến, nhu cầu việc làm cao, Reactjs Reactjs thư viện javascript giúp xây dựng UI cho website, với ưu điểm hỗ trợ xây dựng giao diện nhanh, cải thiện hiệu năng, hạn chế lỗi trình code, tái sử dụng component, Reactjs nhanh chóng trở thành cơng cụ phát triển web hot nay, nhiều công ty ưa dùng Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, cố nâng cao kiến thức mơi trường chun nghiệp, em định thực tập kì Vì vậy, em định chọn Telio - mơi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Nguyễn Cao Cường LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TNHH Telio Việt Nam 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 nhiệt tình team, em tiếp thu kiến thức quan trọng để làm việc thực tế Chân thành cảm ơn anh chị team 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 anh Nguyễn Đức Bảo, training kiến thức tảng backend bao gồm Nestjs,Graphql , 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 anh Hà Quý Anh anh Vũ Xuân Bách, training kiến thức frontend bao gồm Reactjs cơng cụ liên quan, để áp dụng vào làm sản phẩm thời gian qua 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 Cao Cường TPHCM, ngày … tháng … năm 2022 Nguyễn Cao Cường NHẬN XÉT CỦA KHOA Nguyễn Cao Cường MỤC LỤC MỤC LỤC Chương 1: Giới thiêu công ty thực tập 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 Thực project Lịch làm việc 10 Chương 3: Chi tiết project 12 Giới thiệu WMS, OMS 12 Các tính làm 12 TÀI LIỆU THAM KHẢO 17 TỔNG KẾT 18 Nguyễn Cao Cường Chương 1: Giới thiêu công ty thực tập Tổng quan: TELIO (Nền tảng thương mại điện tử B2B Việt Nam) công ty sử dụng công nghệ liệu để xây dựng tảng thương mại B2B lớn Việt Nam, Telio kết nối nhà bán lẻ truyền thống nhỏ với thương hiệu nhà bán buôn tảng tập trung Bằng cách tổng hợp nhu cầu, Telio cung cấp cho nhà bán lẻ nhỏ nhiều lựa chọn hơn, giá tốt hậu cần hiệu thông qua lợi kinh tế theo quy mô Dịch vụ Telio: cung cấp tảng di động giúp nhà bán lẻ tìm kiếm, lựa chọn đặt hàng sản phẩm từ nhiều nhà phân phối Startup xây dựng hệ thống kho bãi để đảm bảo giao hàng vòng 24 giờ, từ giúp đối tác quản lý dịng tiền tốt Thành tựu: Telio tảng thương mại điện tử B2B tiên phong Việt Nam huy động thành cơng 25 triệu la Mỹ vịng gọi vốn Series-A với tham gia nhà đầu tư lớn Tiger Global Fund tham gia quỹ đầu tư tiếng khác: Sequoia India, GGV Capital RTP Global Vị trí: Telio có văn phịng riêng địa tịa An Phong 518b, Điện Biên Phủ, Bình Thạnh, thành phố Hồ Chí Minh Đợt thực tập: Đây đợt thực tập mà công ty tổ chức với mong muốn tìm kiếm tài tạo điều kiện, môi trường phát triển cho hệ trẻ Việt Nam Nguyễn Cao Cường Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Phát triển giao diện phần mềm” 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 Frontend, đồ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 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, q trình thành lập phát triên (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 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 : Hiểu thêm công ty Telio, 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 1.1 1.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, supervisor 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ố Jira sử dụng làm việc nhóm, Bitbucket – dùng để quản lý mã nguồn, Mattermost – phần mềm để giao tiếp nội - 1Office -sử dụng để chấm công, xem bảng lương, quản lý nhân 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 Tìm hiểu Javascript, ESLint, Prettier Thời gian : ngày (1 tuần) Nguyễn Cao Cường Nội dung : Được training kỹ thuật Javascript nâng cao, công cụ giúp làm việc code chung hiệu ESLint Prettier kiến thức quan trọng tảng cho việc học framework - Asynchoronus Hiểu rõ lập trình bất đồng javascript, cách vận hành sâu bên - ESLint Prettier: Học cách setup ESLint Prettier vào dự án javascript giúp cho coding convention hiệu hơn, format dễ nhìn dễ dàng phát bug tiềm ẩn 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 : - 1.3 Nâng cao kỹ lập trình với ngơn ngữ Javascript Có kiến thức quan trọng cho việc lập trình frontend 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 Nodejs, Nestjs Graphql Nội dung: Các kiến thức Nodejs runtime framework phổ biến Nestjs Graphql –là ngôn ngữ truy vấn xử lý liệu nguồn mở cho API, giúp khách hàng dễ dàng để đặt hàng xác họ muốn để làm backend server đơn giản - Khái niệm Nestjs Nắm khái niệm Nestjs, NodeJS framework dùng để phát triển server-side applications hiệu mở rộng NestJS kết hợp OOP(Object Oriented Programming), FP(Functional Programming), FRP(Functional Reactive Programming) NestJS sử dụng TypeScript để phát triển hỗ trợ Javascript Ngồi trainer cịn cung cấp số từ khóa để thực tập sinh tìm hiểu bao gồm Dataloader, N+1 query - Khái niệm Graphql: Nguyễn Cao Cường Nắm khái niệm Graphql bao gồm Mutation, Query, cách định nghĩa Schema Types cho liệu Thấy ưu điểm nhược điểm Graphql so với Restful api - Graphql Nestjs Graphql hỗ trợ tốt Nestjs dễ dàng để setup server dùng công nghệ Thực : - Tham gia đầy đủ buổi trainning Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết : 1.4 Hiểu khái niệm lập trình backend với Nestjs Graphql Đã xây dựng backend server với api graphql đơn giản Git, Docker Nội dung: Cách sử dụng git trình làm việc team quy chuẩn để sử dụng git team cho đúng, Docker - Học lệnh git bản: Được trainer hướng dẫn dùng lệnh cho việc làm nhóm commit, pull, push, status, clone - Học lệnh git nâng cao, fix conflict: Được trainner hướng dẫn dùng lệnh nâng cao reset, rebase, force push tùy vào trường hợp cụ thể, hướng dẫn fix conflict cách - Docker: Sử dụng docker khởi động backend database container kết nối với chúng Thực : - Tham gia đầy đủ buổi training Tìm hiểu thêm tài liệu trang chủ docker git Nguyễn Cao Cường Kết quả: - Đã sử dụng git hiệu theo chuẩn team, hiểu sử dụng docker cách 1.5 Reactjs, redux, redux-saga Nội dung: Cách sử dụng Reactjs để xây dựng frontend, dùng redux để quản lý state, redux-saga để xử lý gọi api - Học Reactjs: Reactjs thư viện UI javascript giúp xây dựng website với tốc độ nhanh chóng cộng đồng hỗ trợ cao - Quản lý state với redux Được trainner hướng dẫn dùng redux để quản lý state hiệu Reactjs, tránh việc phải truyền nhiều lần tối ưu hiệu - Sử dụng redux-saga để xử lý api: Vì redux khơng thể xử lý middleware gọi api được, nên redux giới thiệu thêm thư viện redux-saga để hỗ trợ việc Thực : - Tham gia đầy đủ buổi training Tham khảo tài liệu trang chủ Reactjs, diễn đàn Kết quả: - Vì có kiến thức tảng từ trước nên việc học thành thạo nhanh Thực project Sau hai tháng training thực hành, thực tập sinh nắm kiến thực techstack công ty bao gồm Nestjs, Graphql, Reactjs, Git, Docker Kể từ tháng thứ ba, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để làm task hệ thống công ty Chi tiết đồ án nói phần sau Nguyễn Cao Cường 10 Lịch làm việc 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ữ Javascript nâng cao - ESLint - Prettier - Tìm hiểu Nodejs, Nestjs, Graphql - Tìm hiểu Git, Docker Anh Nguyễn Đức Bảo, Chị Nguyễn Thị Giàu Tuần - 3, 5, Mức độ hoàn thành Nhận xét người hướng dẫn Anh Hà Quý Anh Anh Nguyễn Đức Bảo Anh Nguyễn Đức Bảo Tìm hiểu Reactjs, Anh Vũ Xuân Redux, Redux-saga Bách, Anh Hà Quý Anh - Xây dựng lọc Anh Hà Quý Anh người dùng theo kho vai trò hệ thống quản lý vận hành công ty - Đọc codebase hệ thống - Tiếp tục đọc codebase Anh Hà Quý Anh hệ thống quản lý vận hành quản lý kho hàng công ty - Theo dõi, fix số bug nhỏ - Xây dựng trang điều Anh Hà Quý Anh chỉnh lô hàng hệ thống quản lý - 7, 9, 10 11, 12, 13, 14 15, 16 Nguyễn Cao Cường 11 17, 18 19, 20 21, 22, 23, 24 kho hàng - Tiếp tục đọc codebase hệ thống quản lý vận hành quản lý kho hàng công ty - Theo dõi, fix số bug nhỏ - Xây dựng giao diện cho hệ thống quản lý kho hàng hệ thống quản lý vận hành từ figma - Tích hợp giao diện vào trang quản lý kho hệ thống quản lý vận hàng - Theo dõi fix bug liên quan Anh Bách Vũ Xuân Anh Bách Vũ Xuân Nguyễn Cao Cường 12 Chương 3: Chi tiết project Giới thiệu WMS, OMS WMS viết tắt Warehouse Management System phần mềm ứng dụng thiết kế để hỗ trợ việc quản lý kho hàng OMS viết tắt Operation Management System phần mềm ứng dụng thiết kế để hỗ trợ việc quản lý vận hành Đây phần mềm phổ biến công ty thương mại điện tử, team em downstream nên làm việc phục vụ chủ yếu cho phần mềm Các tính làm 1.1 Xây dựng lọc người dùng theo kho vai trò OMS Thực hiện: thành viên team intern Reactjs o Nguyễn Cao Cường o Nguyễn Ngọc Phương Nam Vì task giao nên việc đọc codebase code theo tiêu chuẩn codebase tốn nhiều thời gian, thành viên làm task theo phương pháp pair programming, với trợ giúp anh Hà Quý Anh task hồn thành tốt người dùng sử dụng cách hiệu 1.2 Xây dựng trang lơ hàng WMS Nguyễn Cao Cường 13 Vì kho muốn quản lý sâu tầng lô hàng, nên team yêu cầu làm tính Sau quen thuộc với codebase học hỏi thêm việc xây dựng trang lơ hàng dễ dàng Thực hiện: Nguyễn Cao Cường Mentor: Anh Hà Quý Anh 1.3 Xây dựng giao diện cho trang quản lý kho OMS Giao diện mới: Nguyễn Cao Cường 14 Giao diện cũ: Nguyễn Cao Cường 15 - Cơng việc chính: o Tái cấu trúc giao diện trang kho hệ thống quản lí kho hàng o Thay đổi toàn giao diện trang kho Tập trung vào việctheiest kế lại logic chọn vị trí kho thân thiện phân cấp rõ rang cho người dùng o Tạo, chỉnh sửa tái cấu trúc trình xử lý lỗi nội ngoại trang kho Nguyễn Cao Cường 16 o Tạo nâng cấp core component o Cùng với số công việc sửa bug nhỏ - Thực hiện: thành viên team intern Reactjs o Nguyễn Cao Cường o Nguyễn Ngọc Phương Nam - Mentor: Anh Vũ Xuân Bách Nguyễn Cao Cường 17 TÀI LIỆU THAM KHẢO For ESLint https://eslint.org/ For Prettier https://prettier.io/ For Nestjs https:/nestjs.com/ For Graphql https://graphql.org/learn/ For Docker https://docker.com/ For Reactjs https://reactjs.org/ For Redux https://redux.js.org/ For Redux-Saga https://redux.-saga.js.org/ Nguyễn Cao Cường 18 TỔNG KẾT Như vậy, sau tháng thực tập Telio, em học hỏi techstack công ty, đặc biệt việc sử dụng Reactjs để xây dựng website Bên cạnh đó, q trình làm việc với người team giúp thân em nâng cao khả làm việc nhóm, biết cách mà team làm việc thực tế Và với đặc thù công ty thương mại điện tử nên em học hỏi cách vận hành công ty thương mại điện tử Chân thành cảm ơn giúp đỡ anh chị bạn thực tập sinh Telio, với nỗ lực để giúp em đạt kết Nguyễn Cao Cường ... ứng dụng web, nhiều thư viện phát triển để hỗ trợ phát triển web nhanh dễ dàng hơn, chẳng hạn Reactjs Ngày nay, ứng dụng web đóng vai trị tất yếu sống người Mọi người sử dụng web để kết nối với. .. Đợt thực tập: Đây đợt thực tập mà công ty tổ chức với mong muốn tìm kiếm tài tạo điều kiện, môi trường phát triển cho hệ trẻ Việt Nam Nguyễn Cao Cường Chương 2: Nội dung thực tập Đợt thực tập với. .. nội - 1Office -sử dụng để chấm công, xem bảng lương, quản lý nhân 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 Tìm hiểu Javascript,