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 CHAT Công ty thực tập Công ty cổ phần VNG Người phụ trách Trần Hoàng Kha Thực tập sinh Vũ Đặng Khương Duy[.]
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 CHAT Công ty thực tập : Công ty cổ phần VNG Người phụ trách : Trần Hoàng Kha Thực tập sinh : Vũ Đặng Khương Duy TP Hồ Chí Minh, tháng 12 năm 2022 LỜI MỞ ĐẦU Nhu cầu kết nối trở thành thành phần thiếu sống đại Với nhu cầu ngày cao, ngành phần mềm nói chung, hay nói cơng nghệ kết nối người nói riêng ngày phát triển Cùng với phát triển “ngành cơng nghiệp khơng khói” tồn giới, Việt Nam ngoại lệ, nước ta dần khẳng định vị Các công ty Việt Nam phát triển cách mạnh mẽ Bên cạnh công ty phát triển mạnh mẽ nước, với ưu dẫn đầu mình, VNG phát triển mạnh mẽ, trở thành startup kì lân Việt Nam Sau khoảng thời gian ba năm học tập, nghiên cứu trường, với mong muốn có thêm kinh nghiệm thực tế, kiến thức học hỏi môi trường chuyên nghiệp em định chọn Công ty cổ phần VNG – hay gọi tắt VNG làm nơi thực tập Trần Hồng Kha Vũ Đặng Khương Duy LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty cổ phần VNG tạo điều kiện cho em có hội thực tập cơng ty Chỉ khoảng thời gian tháng, nhờ dẫn nhiệt tình anh trainer, anh team, em tiếp thu kiến thức mẻ, quy trình làm việc chuyên nghiệp để làm bước đệm nghiệp Em xin chân thành cảm ơn anh/chị ban tổ chức Zalo Fresher program bỏ thời gian, công sức để hướng dẫn em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Kha, anh Tài hướng dẫn, giúp đỡ em từ bắt đầu đợt thực tập, cảm ơn anh team ZaloPC tổ chức training chủ đề technical giúp em có nhìn cơng nghệ có 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 Vũ Đặng Khương Duy Thành phố Hồ Chí Minh, ngày 20 tháng 12 năm 2022 Trần Hoàng Kha Vũ Đặng Khương Duy NHẬN XÉT CỦA KHOA Trần Hoàng Kha Vũ Đặng Khương Duy MỤC LỤC MỤC LỤC Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty cổ phần VNG Sản phẩm công ty 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 Trainning HTML/CSS/JS, ReactJs 2.3 Tìm hiểu Clean architecture 2.4 Training thiết kế UI rgiao tiếp realtime 2.5 Tìm hiểu File system làm việc với chúng Javascript 2.6 Training worker, threading Javascript 2.7 Training loại strorage môi trường web 2.8 Tối ưu hoá ứng dụng web 10 Thực project 10 Lịch làm việc 10 Chương 3: Chi tiết project 12 Giới thiệu ứng dụng 12 1.1 Mô tả ứng dụng 12 1.2 Đối tượng sử dụng 12 1.3 Các chức 12 Ảnh chụp hình 13 Thực 15 TÀI LIỆU THAM KHẢO 16 TỔNG KẾT 17 Trần Hoàng Kha Vũ Đặng Khương Duy Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty cổ phần VNG VNG công ty công nghệ hàng đầu Việt Nam, với hệ sinh thái kỹ thuật số phong phú kỹ sư người Việt phát triển Sứ mệnh Kiến tạo Công nghệ Phát triển Con người, từ Việt Nam vươn tầm giới Sau hành trình 18 năm, VNG trở thành “người dẫn đầu” lĩnh vực công nghệ quốc gia với nhiều tiên phong đổi Đến nay, hệ sinh thái VNG gồm bốn mảng kinh doanh chính: Trị chơi trực tuyến, Truyền thông đa phương tiện, Công nghệ tài chính, dịch vụ điện tốn đám mây Sản phẩm công ty Được thành lập năm 2004, VNG phát hành nhiều sản phẩm game ứng dụng, khơng sản phẩm trở nên quen thuộc với người Việt Nam, có: Zalo: Được đem đến giới thiệu với cộng đồng lần vào năm 2012, Zalo nhanh chóng trở thành ứng dụng nhắn tin phổ biến Việt Nam với 52 triệu người dùng tháng, triệu tin nhắn, 50 triệu phút gọi điện, 45 triệu ảnh gửi ngày Bên cạnh chức nhắn tin, Zalo cung cấp nhiều tính hỗ trợ người dùng khác, tiêu biểu Zalo Connect Ngồi Zalo, cơng ty cịn có số sản phẩm khác dịch vụ cung cấp âm nhạc trực tuyến ZingMp3, ứng dụng ZingTV, ZingNews, Báo mới, Laban key, Adtima, … Trần Hoàng Kha Vũ Đặng Khương Duy Chương 2: Nội dung thực tập Đợt thực tập với chủ đề Zalo Fresher Program với chuyên mơn Lập trình ứng dụng desktop giúp thực tập sinh làm quen với ứng dụng web, ứng dụng desktop, quy trình làm việc team, đồng thời rèn luyện kỹ mềm thuyết trình, làm việc nhóm, kĩ giao tiếp hiệu Tại cơng ty, sinh viên có hội tham gia vào buổi training kiến thức mới, khám và làm việc môi trường phát triển ứng dụng chuyên 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 Giới thiệu công ty, cách tổ chức cơng ty, training kĩ thuyết trình, tư phản biện, làm quen phịng ban cơng ty Được nghe người phụ trách giới thiệu công ty, 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 quả: Hiểu thêm Zalo team, 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 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, team admin hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho cơng việc, setup Git, IDE, 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 2.2 Trainning HTML/CSS/JS, ReactJs Thời gian: ngày Nội dung: - Overview/ ơn lại HTML/CSS/JS, ReactJS Trần Hồng Kha Vũ Đặng Khương Duy 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 Kết quả: - Hệ thống lại kiến thức lập trình web với React Javascript 2.3 Tìm hiểu Clean Architecture Thời gian: ngày Nội dung: - Các design pattern JavaScript: Singleton, Abtract factory, Adapter, Strategy Dependency Injection and Inversion of Control JavaScript Thiết kế ứng dụng theo nguyên lí CLEAN 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 Kết quả: 2.4 Hiểu Dependency injection inversion of control Javascript Hiều clean architecture ứng dụng vào thiết kế ứng dụng đơn giản Ôn lại design pattern Training thiết kế UI rgiao tiếp realtime Thời gian: ngày Nội dung: Các kiến thức Socket, Pooling, thiết kế phần tử React Khái niệm web Socket, Pooling - Nắm cách hoạt động Http Long pooling (server giữ response, cần trả về) short pooling (định kỳ gửi request lên server khoảng thời gian x) - Nắm cách hoạt động WebSocket (mở phiên giao tiếp trình duyệt) Khái niệm thiết kế UI - Nắm cách thiết kế thành phần giao diện cho hiệu quả, dễ sử dụng, dễ chỉnh sửa nâng cấp Thực hiện: - Tham gia đầy đủ buổi trainning Trần Hoàng Kha Vũ Đặng Khương Duy - Làm tập thực hành vẽ hình bản, load mơ hình 3D từ file, … - 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 thiết kế UI - Thiết kế ứng dụng chat realtime giao tiếp giao thức socket 2.5 Tìm hiểu File system làm việc với chúng Javascript Nội dung: - Tìm hiểu File/IO môi trường web - Phân biệt khái niệm block vs non-block io, sync vs async, concurrent vs parallerism - Nắm cách ứng dụng xử lý File/IO lên web Thực hiện: - Tham gia đầy đủ buổi training - Tìm hiểu viết báo cáo thu hoạch sau training Kết quả: - Hiều thêm cách làm việc với file, streaming file, hiểu xử lí bất đồng Javascript 2.6 Training worker, threading Javascript Thời gian: ngày Nội dung: - Tìm hiểu worker Javascript Thực hiện: - Lập trình ứng dụng sử dụng web worker Javascript Kết quả: - Biết thêm cách xử lí nhiều tác vụ đồng thời Javascript 2.7 Training loại strorage môi trường web Thời gian: ngày Nội dung: - Tìm hiểu loại storage môi trường web Thực hiện: - Lập trình ứng dụng sử dụng web worker Javascript Kết quả: - Biết thêm loại database web Trần Hoàng Kha Vũ Đặng Khương Duy 10 2.8 Tối ưu hoá ứng dụng web Thời gian: ngày Nội dung: - Nắm yếu tố ảnh hưởng đến performance webapp, reactJs app - Tìm hiểu công cụ đo lường độ tối ưu webapp Kết quả: - Biết cách browser hoạt động từ có chiến lược tối ưu hố thời gian render web - Học công cụ đo lường web (Profiling, LightHouse) Thực project Xuyên suốt trình training qua tuần, thực tập sinh có kiến thức Javascript, Electron, Design pattern Đồng thời trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực Ứng dụng chat window sử dụng ElectronJs ReactJs Chi tiết đồ án nói phần sau 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 Người hướng dẫn 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 - Training HTML/CSS/JS, ReactJs Anh Hải, anh Đức - Các design pattern JavaScript: Singleton, Abtract factory, Adapter, Anh Trí Trần Hồng Kha Nhận xét người hướng dẫn Zalo tech fresher team - Mức độ hoàn thành Vũ Đặng Khương Duy 11 Strategy - Dependency Injection and Inversion of Control JavaScript - Thiết kế ứng dụng theo nguyên lí CLEAN - Khái niệm web Socket, Pooling - Khái niệm thiết kế UI - Tìm hiểu File/IO mơi trường web - Phân biệt khái niệm block vs non-block io, sync vs async, concurrent vs parallerism - Anh Kha, anh Hải Anh Tài Nắm cách ứng dụng xử lý File/IO lên web - Tìm hiểu loại storage môi trường web - Nắm yếu tố ảnh hưởng đến performance webapp, reactJs app - Trần Hồng Kha Tìm hiểu cơng cụ đo lường độ tối ưu webapp Anh Đức Anh Đức Vũ Đặng Khương Duy 12 Chương 3: Chi tiết project Giới thiệu ứng dụng Ứng dụng lấy ý tưởng từ ứng dụng chat ZaloPc đặt tên ZChat, áp dụng công nghệ tương tự ứng dụng gốc để hiểu sản phẩm team, qua giúp thực tập sinh làm quen với workflow sản phẩm team Mục đích: Tạo ứng dụng máy tính chạy tảng window, với tính ứng dụng chat như: Gửi tin nhắn Peer-to-peer, gửi tin nhắn nhóm, gửi ảnh, lưu trữ tin nhắn, … 1.1 Mô tả ứng dụng Ứng dụng Zchat ứng dụng chat chạy tảng window Ứng dụng dùng để gửi nhận tin nhắn online, cho phép người dùng chia sẻ ảnh, file thông qua môi trường internet, song song với đó, ứng dụng thiết kế để dễ dàng nâng cấp, chỉnh sửa, thêm tính tương lai 1.2 Đối tượng sử dụng Ứng dụng thiết kế nhằm đáp ứng nhu cầu chia sẻ thông tin người, bao gồm công nhân viên, học sinh, cần có nhu cầu nhắn tin sử dụng ứng dụng 1.3 - Các chức Gửi file phương tiện (ảnh), gửi loại file thơng dụng (pdf, text, word, …) Tìm kiếm tin nhắn cũ Gửi tin nhắn cho một nhóm người Tải file chia sẻ Hỗ trợ đăng nhập, đăng kí, đăng xuất có thiết bị lạ Trần Hồng Kha Vũ Đặng Khương Duy 13 ẢNH CHỤP MÀN HÌNH Ảnh Màn hình kết bạn Trần Hồng Kha Vũ Đặng Khương Duy 14 Ảnh Màn hình chat Ảnh Màn hình thể internet Trần Hồng Kha Vũ Đặng Khương Duy 15 THỰC HIỆN Thực tập sinh: Vũ Đặng Khương Duy Và giúp đỡ tận tình team trainer ZaloPc team mentor (anh Tài, anh Kha) Trần Hoàng Kha Vũ Đặng Khương Duy 16 TÀI LIỆU THAM KHẢO Trần Hoàng Kha Vũ Đặng Khương Duy 17 TỔNG KẾT Như vậy, vòng tháng ngắn ngủi, nhóm kịp hồn thành ứng dụng chat chạy tảng Window Ứng dụng có đầy đủ tính đề ban đầu Do thời gian có hạn nên tính ứng dụng cịn đơn giản, hình ảnh chưa đẹp mong đợi Nếu sau phát triển ứng dụng bổ sung tính để hồn thiện Em xin chân thành cảm ơn giúp đỡ anh trainer, mentor team ZaloPc giúp đỡ em hoàn thành ứng dụng chat team Zalo fresher giúp đỡ em hoàn thành đợt thực tập Trần Hoàng Kha Vũ Đặng Khương Duy ... tiết project Giới thiệu ứng dụng Ứng dụng lấy ý tưởng từ ứng dụng chat ZaloPc đặt tên ZChat, áp dụng công nghệ tương tự ứng dụng gốc để hiểu sản phẩm team, qua giúp thực tập sinh làm quen với workflow... LightHouse) Thực project Xuyên suốt trình training qua tuần, thực tập sinh có kiến thức Javascript, Electron, Design pattern Đồng thời trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực Ứng dụng. .. ZingMp3, ứng dụng ZingTV, ZingNews, Báo mới, Laban key, Adtima, … Trần Hoàng Kha Vũ Đặng Khương Duy Chương 2: Nội dung thực tập Đợt thực tập với chủ đề Zalo Fresher Program với chun mơn Lập trình ứng