TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP DOANH NGHIỆP LẬP TRÌNH VIÊN WEB (FULLSTACK DEVELOPER) Công ty thực tập Công ty TNHH T[.]
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH KHOA CƠNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP DOANH NGHIỆP LẬP TRÌNH VIÊN WEB (FULLSTACK DEVELOPER) Công ty thực tập: Công ty TNHH TM VUI VIET NAM - TAPTAP Người quản lý: Lê Minh Hùng (Line Manager) Người phụ trách: Lý Cẩm Hào (Lead Manager) Thực tập sinh: Lương Thiện Phước Tp Hồ Chí Minh, tháng 12 năm 2022 LỜI MỞ ĐẦU Cùng với phát triển vượt bật công nghệ, tiện lợi công nghệ ngày trọng, với chức hỗ trợ cho sống phát triển người Tốc độ phát triển cách mạng công nghệ 4.0 cách mạnh mẽ, dẫn đến phát triển ngành lập trình tăng cách nhanh chóng Việt Nam nằm top đầu nước có độ phủ sống Internet rộng nhất, với mật độ 95% Internet dần trở thành phần quan trọng thiếu sống ngày người Ngày nhiều ứng dụng công nghệ phát triển mắt Đặc biệt, lập trình web, giúp người giao tiếp với thể giới qua báo, nhạc, Từ lúc bắt đầu theo học trường, em có định hướng phát triển thân thành lập trình viên Fullstack chuyên nghiệp nhờ đam mê công nghệ (đặc việt lập trình web) Từ đó, em tìm tịi học hỏi cơng nghệ web, ngôn ngữ đăng ký môn học, chuyên ngành liên quan đến lập trình web Sau trình tự học làm đồ án từ mơn học, em cảm thấy thân sẵn sàng thực tập doanh nghiệp để nâng cao trình độ, học hỏi, tiếp thu nhiều kiến thức từ doanh nghiệp để phát triển thân ngành lập trình Do đó, em tìm hiểu đăng ký mơn thực tập doanh nghiệp tìm kiếm cơng việc Rất may mắn nhờ hỗ trợ Trường từ hoạt động Ngày hội việc làm, giúp em có thêm kinh nghiệm làm,em xin thực tập vào Công ty TNHH TM VUI VIET NAM - TAPTAP Lương Thiện Phước - 19522055 LỜI CẢM ƠN Đầu tiên, em xin gửi lời cảm ơn đến Công ty TNHH TM VUI Việt Nam tạo điều kiện hội cho em thực tập doanh nghiệp trở thành lập trình viên với hành trang kiến thức vững Trong khoàng thời gian tháng thực tập, em hướng dẫn tận tình từ anh Lê Minh Hùng (Line manager) hiểu văn hóa cơng ty, cách làm việc chun nghiệp làm, lượng kiến thức khổng lồ fullstack-developer anh Lý Cẩm Hào (Lead manager) truyền đạt, em tiếp thu kiến thức quan trọng để xây dựng phát triển ứng dụng hồn thiện Bên cạnh đó, em học hỏi từ anh chị team cách thức giao tiếp, vận hành dự án thực tế thông qua kinh nghiệp anh chị Chân thành cảm ơn anh chị giúp đỡ, hướng dẫn chia sẻ kỹ năng, kinh nghiệm suốt thời gian thực tập Cũng xin cảm ơn khoa Công nghệ phầm mềm thầy cô khoa tạo điều kiện, hỗ trợ em báo cáo thực tập, mong em nhận lời đóng góp quý thầy, để em hồn thiện thân cách tốt Tp Hồ Chí Minh, ngày 27 tháng 12 năm 2022 Lương Thiện Phước Lương Thiện Phước - 19522055 NHẬN XÉT CỦA KHOA ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… Lương Thiện Phước - 19522055 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 1.1 Giới thiệu Công ty TAPTAP 1.2 Sản phẩm công ty CHƯƠNG 2: NỘI DUNG THỰC TẬP 2.1 Tìm hiểu cơng ty kỹ tron công ty 2.2 Gặp mặt giới thiệu, làm quen thành viên nhóm 2.3 Nghiên cứu kỹ thuật 2.3.1 Các công cụ làm việc 2.3.2 Tìm hiểu quy trình làm việc công ty 10 2.3.3 Tìm hiểu lệnh Git 10 2.3.4 Tìm hiểu HTML CSS 10 2.3.5 Tìm hiểu Javascript 10 2.3.6 Tìm hiểu cơng nghệ lập trình web fullstack (MERN) 11 2.4 Thực dự án 11 2.5 Lịch làm việc 12 CHƯƠNG 3: CHI TIẾT DỰ ÁN 13 3.1 Giới thiệu Album 13 3.1.1 Giới thiệu dự án 13 3.1.2 Thực 15 3.1.3 Kết 15 3.2 Giới thiệu Registration management service 16 3.2.1 Giới thiệu dự án 16 3.2.2 Thực 16 3.2.3 Tính 17 3.2.4 Kết 17 3.3 Giới thiệu Monitoring 18 3.3.1 Giới thiệu dự án 18 3.3.2 Thực 18 3.3.3 Tính 19 3.3.4 Kết 19 CHƯƠNG 4: TỔNG KẾT 19 Lương Thiện Phước - 19522055 CHƯƠNG 1: GIỚI THIỆU CÔNG TY 1.1 Giới thiệu Công ty TAPTAP TAPTAP tảng tiếp thị toán hệ kết nối thương hiệu dẫn đầu thị trường với người tiêu dùng thơng qua chương trình khách hàng thân thiết liên minh tích hợp đầy đủ dễ sử dụng Giải pháp công ty cho phép người tiêu dùng kiếm đốt điểm khách hàng thân thiết cách thuận tiện cách tương tác giao dịch với thương hiệu mà họ lựa chọn mạng lưới đại lý toàn quốc mà ngày tiếp cận 30% người tiêu dùng Việt Nam Mục tiêu cơng ty cách mạng hóa trải nghiệm mua sắm đa kênh Việt Nam đặt tiêu chuẩn cách thương hiệu nên thu hút khách hàng cách tận dụng liệu để thúc đẩy hiểu biết người tiêu dùng, hiệu tiếp thị cá nhân hóa sản phẩm Chúng cung cấp giải pháp công nghệ để giúp doanh nghiệp lâu đời nâng cao chương trình khách hàng thân thiết có họ với khả tiếp cận danh mục thương hiệu phần thưởng đa dạng, phong phú TAPTAP thương hiệu VUI Việt Nam, công ty Liên doanh thuộc sở hữu Tập đoàn Đầu tư Việt Nam (VIG) Ngân hàng TNHH MTV United Overseas Bank (UOB) VIG công ty cổ phần tư nhân hàng đầu Việt Nam với tổng số vốn quản lý 500 triệu USD có cổ phần 35 thương hiệu thị trường UOB ngân hàng hàng đầu châu Á, Lương Thiện Phước - 19522055 có trụ sở Singapore, với mạng lưới 500 văn phịng tồn cầu bao gồm Việt Nam 1.2 Sản phẩm công ty TAPTAP đến với trái đất với khát khao đặt tiêu chuẩn cho hoạt động thu hút chăm sóc khách hàng thương hiệu Bằng sức mạnh công nghệ liệu, TAPTAP giúp tối ưu hố chương trình khách hàng thân thiết vốn có Đồng thời, mang điểm mạnh thương hiệu lại gần nhau, bổ trợ cho tảng liên minh đa dạng vững Với tiêu chí: - Trải nghiệm thú vị: TAPTAP mong muốn chinh phục trái tim bạn tươi mới, đề cao cảm xúc tương tác ngày, kiện dịch vụ hay ho dành cho khách ruột - Đơn giản: Thao tác dễ dàng, nội dung dễ hiểu, ưu đãi dễ dùng để tận hưởng niềm vui TAPTAP Ngoài đủ phức tạp rồi, đơn giản thơi - Tín nhiệm: Quyết tâm gìn giữ tính minh bạch khách quan hoạt động TAPTAP Vì hiểu rõ, tình yêu, quan trọng tin tưởng - Cá nhân hóa: TAPTAP để lắng nghe băn khoăn bạn trình mua sắm, nhằm mang lại trải nghiệm thân thuộc, tiện lợi hợp “gu” bạn Lương Thiện Phước - 19522055 CHƯƠNG 2: NỘI DUNG THỰC TẬP Trong trình thực tập, em ứng tuyển cơng ty với vị trí Fresher – Fullstack Developer Trong thời gian thực tập vừa qua, em anh chị tạo điều kiện để tiếp xúc với toàn quy trình hồn thiện ứng dụng web, với phát triển bảo trì ứng dụng web có cơng ty Đồng thời, phát triển cho thân kỹ mềm cần thiết làm việc nhóm, đặt vấn giải vấn đề, giao tiếp, phân công công việc Em có hội làm việc, học hỏi trải nghiệm, khám phá môi trường doanh nghiệp chuyên nghiệp 2.1 Tìm hiểu cơng ty kỹ tron 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 người phụ trách giới thiệu cơng ty, q trình thành lập phát triển, quy trình làm việc từ cao đến thấp, cách thức tổ chức cơng ty, phịng ban cơng ty • Ngồi ra, thực tập sinh cịn giới thiệu quy định, nội quy, cách thức làm việc công ty: thời gian làm việc, quy định cần tuân thủ, cách thử giao tiếp, sử dụng Email doanh nghiệp liên lạc công việc, trao đổi thông qua Microsoft Team team, Skype Kết quả: Hiểu thêm văn hóa Cơng ty, q trình thành lập, vận hành phát triển công ty Có thêm kỹ việc sử dụng Email, giao tiếp cơng việc, làm việc có kế hoạch, trách nhiệm, kỹ luật 2.2 Gặp mặt giới thiệu, làm quen thành viên nhóm Thời gian: ngày Nội dung: Giới thiệu thành viên team Dev, với anh Lý Cẩm Hào làm leader Giới thiệu thành viên team, sản phẩm, dự án mà team thực chuẩn bị triển Lương Thiện Phước - 19522055 khai Ngồi cịn làm quen với phịng ban khác ngồi dev (Product, People, Marketing, Merchant QC) Kết quả: Làm quen với thành viên team hiểu sản phẩm, dự án team làm Ngoài ra, làm quen phòng ban khác, giao lưu học hỏi kinh nghiệm, tương lai gần phải làm việc trực tiếp với họ hội hoàn toàn tốt 2.3 Nghiên cứu kỹ thuật 2.3.1 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, leader mentor hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích q trình thực cơng việc Một số phần mềm là: • JIRA: Sử dụng để chia task (cơng việc) quản lý tiến độ, tính hình dự án theo mơ hình Agile • Gitlab: cơng cụ quản lý source code dự án công ty, với trực quan nhiều tính • Visual Studio Code: Các IDE hữu ích phổ biến cho lập trình viên phát triển ứng dụng lập trình Web • Figma: Cơng cụ thiết kế giao diện • Swagger: Công cụ thiết kế, xây dựng sử dụng cho REST APIs • Microsoft Team: Cơng cụ chat nội bộ, giao tiếp với thành viên team teams liên quan • Mongodb: Cơ sở liệu NOSQL Thực hiện: Tìm hiểu sử dụng công cụ kể Kết quả: Hiểu quy trình làm việc cơng cụ cơng nghệ cần thiết quy trình cơng ty Lương Thiện Phước - 19522055 2.3.2 Tìm hiểu quy trình làm việc cơng ty Thời gian: ngày Nội dung: Tìm hiểu quy trình làm việc theo mơ hình Scrum – Agile Được anh chị team liên quan hướng dẫn, dạy thử tham gia vào quy trình làm việc cơng ty Thực hiện: Thực hành tham gia vào giai đoạn mơ hình Kết quả: Có thêm kiến thức thực hành nhuần nhuyễn công đoạn quy trình phát triển ứng dụng 2.3.3 Tìm hiểu lệnh Git Thời gian: ngày Nội dung: Tìm hiểu cậu lệnh Git sử dụng dự án Thực hiện: Thực hành tìm hiểu, liệt kê công dụng, nôi dung câu lệnh sử dụng thường xuyên việc quản lý source code Kết quả: Có thêm kiến thức bổ ích Git cách sử dụng trường hợp 2.3.4 Tìm hiểu HTML CSS Thời gian: ngày Nội dung: Nắm vững kiến thức chiên sâu HTML CSS trước trở thành lập trình viên web Thực hiện: • Xem khóa học chun sâu HTML CSS udemy • Các kiến thức HTML CSS Kết quả: Nắm vững kiến thức trả lời câu hỏi Mentor Bên cạnh đó, hiểu cách thức lập trình web HTML CSS 2.3.5 Tìm hiểu Javascript Thời gian: ngày 10 Lương Thiện Phước - 19522055 Nội dung: Nắm vững kiến thức chiên sâu Javascript trước trở thành lập trình viên web Thực hiện: • Xem khóa học chun sâu Javascript udemy • Hiểu chất javascipt làm gì, cách hoạt động Kết quả: Nắm vững kiến thức trả lời câu hỏi Mentor Bên cạnh đó, hiểu cách thức lập trình web Javascript 2.3.6 Tìm hiểu cơng nghệ lập trình web fullstack (MERN) Thời gian: 14 ngày Nội dung: Áp dụng cơng nghệ MERN lập trình trang web hồn chỉnh Thực hiện: • Xem khóa học chun sâu MERN udemy • Hiểu cách hoạt động Frontend Backend • Cách kết nối với sở liệu • Hiểu sâu cơng nghệ MERN Kết quả: Nắm vững kiến thức trả lời câu hỏi Mentor Xây dựng sản phẩm demo đủ backend, frontend database 2.4 Thực dự án Trong tuần thực tập đầu tiên, hướng dẫn nhiệt tính anh, chị Mentor cố gắng, không ngừng học hỏi, em trang bị kiến thức tảng để xây dựng phát triển ứng dụng mobile Trong thời gian tiếp theo, em cơng ty cho phép tham gia vào q trình xây dựng hỗ trợ cải tiến project công ty 11 Lương Thiện Phước - 19522055 2.5 Lịch làm việc Tuần Cơng việc Người hướng Mức độ hồn dẫn thành Nhận xét + Tìm hiểu cơng ty + Học hỏi trao đổi qua Microsoft Team Email + Sử dụng công cụ Jira để kiểm tra tiến Anh Hùng, An, độ công việc Khải, Hào 100% Đạt 100% Đạt 100% Đạt 100% Đạt + Học cách quản lý source code thông qua Git/ Gitlab + Học kiến thức HTML CSS + Tìm hiểu kiến thức nâng cao Javascript Anh Hùng, An, Khải, Hào + Tìm hiểu cơng nghệ socket + Tìm hiểu công nghệ MERN 3-4 + Xây dựng ứng dụng MERN hoàn Anh Hùng, An, Khải, Hào chỉnh 5-8 + Làm việc theo nhóm xây dựng Anh Hùng, An, Khải, Hào 12 Lương Thiện Phước - 19522055 ứng dụng demo hoàn chỉnh + Join dự án thức tế + Tham gia quy trình phát triển - 12 phần công ty Anh Hùng, An, Jira Khải, Hào 100% Đạt + Thực daily meeting CHƯƠNG 3: CHI TIẾT DỰ ÁN 3.1 Giới thiệu Album 3.1.1 Giới thiệu dự án 13 Lương Thiện Phước - 19522055 - Album ứng dụng quản lý album lưu hình ảnh, xử lý hình ảnh lưu dạng 2k,4k Dùng OpenseaDragon để xem ảnh 14 Lương Thiện Phước - 19522055 - Link source: o BE: https://github.com/LuongThienPhuoc/album-BE o FE: https://github.com/LuongThienPhuoc/album-FE 3.1.2 Thực Vai trị: Fullstack Developer Cơng nghệ: • Frontend: React, Redux-toolkit, OpenseaDragon, Antd • Backend: ExpressJs, TOTP, Sharp, Middleware, PM2 • Datanase: MongoDb, Mongoose, Aggarate Framework Cơng việc: • Làm việc nhóm • Tìm hiểu tài liệu, nhận giúp đỡ hỏi đáp từ anh chị Mentor team • Vẽ usecase diagram, thuyết kế UI trước bắt đầu • Lên kế hoạch chi tiết cho dự án 3.1.3 Kết - Hoàn thành dự án với tiến độ ban đầu đề - Tốc độ code nhanh clean - Áp dụng PM2 (quản lý process ứng dụng) - Học nhiều kiến thức mongodb (populate, aggrerate framework) - Tận dụng tối đa TOTP vào dự án - Lưu hình dạng JPEG (để tối ưu dung lượng) 15 Lương Thiện Phước - 19522055 3.2 Giới thiệu Registration management service 3.2.1 Giới thiệu dự án - Registration management service ứng dụng quản lý service giúp việc theo dõi, quản lý service trực quan hiệu quả, tiện lợi so với cách làm trước Mỗi service biểu diễn dạng dạng lưới (tùy mục đích người dụng) 3.2.2 Thực Vai trị: Fullstack Developer Cơng nghệ: • Frontend: React, Redux-toolkit, Antd, D3js 16 Lương Thiện Phước - 19522055 • Backend: ExpressJs, TOTP, Middleware, PM2 • Datanase: MongoDb, Mongoose, Aggarate Framework Cơng việc: • Làm việc cá nhóm • Tìm hiểu tài liệu, nhận giúp đỡ hỏi đáp từ anh chị Mentor team • Vẽ usecase diagram, thuyết kế UI trước bắt đầu • Lên kế hoạch chi tiết cho dự án 3.2.3 • Tính Thêm, xóa, sửa service o Thêm service sửa form sửa file JSON o Có thể chọn service từ hình sau thực sửa xóa o Sửa service sửa form sửa file JSON o Thêm chỉnh sửa JSON có check tính đắn chỉnh sửa dễ dàng với lựa chọn JSON Editor tab navigation • Kiểm tra dependencies vịng thêm xóa sửa(Nếu có) 3.2.4 Kết - Hoàn thành dự án với tiến độ ban đầu đề - Tốc độ code nhanh clean - Trải nghiệm dự án thực tế - Học thêm nhiều kiến thức cách quản lý service 17 Lương Thiện Phước - 19522055 3.3Giới thiệu Monitoring 3.3.1 Giới thiệu dự án Dashboard monitoring với tiêu chị giúp người theo dõi dòng tiền VUI - (realtime), dòng tiền biểu diễn dạng chart để có nhìn trực quan, dễ quan sát 3.3.2 Thực Vai trị: Fullstack Developer Cơng nghệ: • Frontend: React, Redux-toolkit, Antd, D3js • Backend: ExpressJs, TOTP, Middleware, Socket • Datanase: MongoDb, Mongoose, Aggarate Framework Cơng việc: • Làm việc cá nhân • Tìm hiểu tài liệu, nhận giúp đỡ hỏi đáp từ anh chị Mentor team • Vẽ usecase diagram, thuyết kế UI trước bắt đầu • Lên kế hoạch chi tiết cho dự án • Các phương pháp cải thiện tương lai 18 Lương Thiện Phước - 19522055 3.3.3 Tính • Authentication • Hiển thị dòng tiền dạng chart (theo options) • Tính realtime với giao dịch 3.3.4 Kết - Hoàn thành dự án với tiến độ ban đầu đề - Tốc độ code nhanh clean - Học nhiều kiến thức - Trải nghiệm dự án thực tế CHƯƠNG 4: TỔNG KẾT Như vậy, vòng vài tháng ngắn ngủi, em tham gia, học hỏi trải nghiệm nhiều kiến thức bổ ích q trình thực tập cơng ty Ngồi ra, em tiếp xúc với môi trường làm việc chuyên nghiệp, học hỏi cọ xác với dự án khác nhau, phát triển kỹ thân việc lập trình Bên cạnh đó, em hồn thành tốt, theo yêu cầu cấp giao cho có hội trở thành nhân viên thức Một lần nữa, xin chân thành cảm ơn đến anh chị Team Dev hỗ trợ, giúp đỡ em suốt q trình thực tập, bên ngồi Em xin cảm ơn khoa Công Nghệ Phần Mềm tạo hội cho em thực tập, cọ xát, nâng cao trình độ học hỏi kiến thức môi trường doanh nghiệp 19 Lương Thiện Phước - 19522055 ... sàng thực tập doanh nghiệp để nâng cao trình độ, học hỏi, tiếp thu nhiều kiến thức từ doanh nghiệp để phát triển thân ngành lập trình Do đó, em tìm hiểu đăng ký môn thực tập doanh nghiệp tìm... hiểu cách thức lập trình web Javascript 2.3.6 Tìm hiểu cơng nghệ lập trình web fullstack (MERN) Thời gian: 14 ngày Nội dung: Áp dụng công nghệ MERN lập trình trang web hồn chỉnh Thực hiện: • Xem... việt lập trình web) Từ đó, em tìm tịi học hỏi công nghệ web, ngôn ngữ đăng ký môn học, chuyên ngành liên quan đến lập trình web Sau trình tự học làm đồ án từ môn học, em cảm thấy thân sẵn sàng thực