Đề tài tạo webview với reactjs và mobx

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM THỰC TẬP TỐT NGHIỆP ĐỀ TÀI: Tạo Webview với ReactJs MobX Công ty thực tập: Vitalify Asia Co., Ltd Lớp: SE501.N11 Sinh viên thực hiện: Nguyễn Yến Nhi – 19520205 TP Hồ Chí Minh, ngày 20 tháng 12 năm 2022 Nguyễn Yến Nhi Thực tập tốt nghiệp NHẬN XÉT (Của giảng viên) Nguyễn Yến Nhi Thực tập tốt nghiệp MỤC LỤC CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP I Giới thiệu chung công ty II Cơ cấu tổ chức III Tổng quan việc kinh doanh  CHƯƠNG 2: NỘI DUNG THỰC TẬP I Công nghệ, giải pháp quy trình áp dụng  Giới thiệu Git Giới thiệu VSCode Giới thiệu mô hình làm việc Agile – Scrum Tìm hiểu RESTful API Tìm hiểu ReactJS Vịng đời ReactJS Tìm hiểu SCSS, BEM naming convention Tìm hiểu Atomic Design Tìm hiểu quản lý state với MobX 10 Tìm hiểu thư viện Axios 6 7 11 11 11 14 16 20 21 22 24 25 26 26 11 Tìm hiểu Framework 26 II Dự án Webview kết nối ứng dụng với công cụ vật lý thực tế để theo dõi số thể 27 Bối cảnh đời dự án 27 Nhiệm vụ sinh viên giao 27  CHƯƠNG 3: NHẬT KÝ THỰC TẬP 28 CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC QUA ĐỢT THỰC TẬP I Kết thu II Các điểm yếu thân 30 30 31 III Gợi ý cho chương trình học 31 IV Cảm nhận cơng ty 31 DANH MỤC TÀI LIỆU THAM KHẢO 32 Nguyễn Yến Nhi Thực tập tốt nghiệp LỜI NÓI ĐẦU Ngày nay, ngành công nghiệp phát triển ứng dụng web phận thiếu ngành công nghiệp phần mềm Với tốc độ phát triển vô mạnh mẽ, ngành phát triển ứng dụng web nhân tố kích thích phát triển công nghệ thông tin giới, phần cứng phần mềm Cùng với xu phát triển giới, Việt Nam ngoại lệ Ngành công nghiệp phát triển web non trẻ Việt Nam phát triển mạnh mẽ, để hòa nhập với công ty hàng đầu xây dựng tảng web giới Bên cạnh phát triển web ngành nghề tiếp cận người dùng cách nhanh chóng ta thấy mạng xã hội hay website bán hàng trực tuyến thịnh hành giới lẫn Việt Nam Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tìm hiểu, bổ sung kiến thức mơi trường chun nghiệp, em có dự định thực tập học kì Vì vậy, em định chọn Công Ty TNHH Vitalify Asia - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Nguyễn Yến Nhi Thực tập tốt nghiệp LỜI CẢM ƠN Em xin chân thành cảm ơn ban giám hiệu quý thầy cô trường Đại học Công nghệ Thông tin cung cấp bồi dưỡng cho em kiến thức suốt năm ngồi giảng đường đại học, để từ em có tảng áp dụng vào đợt thực tập cách hiệu Em xin gửi lời cảm ơn quý Công Ty TNHH Vitalify Asia tạo điều kiện cho em thực tập công ty cung cấp, bổ sung cho em kiến thức mà em cịn thiếu sót Q cơng ty hỗ trợ em nhiều suốt thời gian thực tập vừa qua, dạy em kỹ cần thiết, truyền đạt cho em kinh nghiệm mà anh chị trải qua trình làm việc, trao đổi với khách hàng, tác phong tinh thần trách nhiệm trước công việc giao, suy nghĩ tích cực Các anh chị tạo cho em nhiều điều kiện để ứng dụng kiến thức học vào thực tế để xây dựng dự án thực tiễn từ lúc ban đầu, nâng cao trình độ, tốc độ lập trình trí thức thêm bậc Em xin chân thành cảm ơn Vì kiến thức thân hạn chế lần va chạm tiếp xúc với thực tế, áp dụng lý thuyết vào cơng việc nên thân cịn bỡ ngỡ lúng túng, khơng tránh khỏi thiếu sót, mong q Thầy (Cơ) đóng góp ý kiến để em hồn thiện Em xin chân thành cảm ơn! Nguyễn Yến Nhi TP Hồ Chí Minh, ngày 20 tháng 12 năm 2022 Nguyễn Yến Nhi Thực tập tốt nghiệp DANH MỤC CÁC CỤM TỪ VIẾT TẮT TNHH : Trách nhiệm Hữu hạn Nguyễn Yến Nhi Thực tập tốt nghiệp CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP I - Giới thiệu chung công ty Tên đơn vị: CÔNG TY TNHH VITALIFY Á CHÂU (VITALIFY ASIA CO., LTD) Lĩnh vực hoạt động: Xuất phần mềm Địa chỉ: 224A-224B Điện Biên Phủ, Phường Võ Thị Sáu, Quận 3, Thành phố Hồ Chí Minh, Việt Nam Trang web: https://www.vitalify.asia/ Email: info@vitalify.asia Điện thoại:  +84 (028) 3932 6293 Thời gian làm việc: Thứ đến thứ 6: 08h30 - 17h35 Vision: “Delivering Happiness Through the Internet” Value: Providing Value to User Hình 1.1: Logo Cơng ty TNHH Vitalify Asia - - Vitalify Asia công ty phát triển ứng dụng web di động Công ty cung cấp dịch vụ phát triển cải tiến sản phẩm nhanh chóng sở DevOps với nhóm cam kết cung cấp giá trị cho người dùng; giải thứ, từ lập kế hoạch đến triển khai dịch vụ nhanh chóng, cải tiến tăng trưởng cho doanh nghiệp doanh nghiệp Kể từ thành lập vào năm 2008, Vitalify Asia tham gia phát triển phần mềm tập trung vào thiết bị di động để đạt tầm nhìn "Mang lại hạnh phúc thơng qua Internet” Với mục tiêu trở thành nhóm chuyên nghiệp thực cạnh tranh phạm vi toàn cầu, kỹ sư/thành viên/PM mở rộng vai trò phạm vi trách nhiệm cá nhân cam kết cung cấp giá trị cho người dùng với cấu trúc chia nhóm nhỏ ưu tú Bây giờ, 10 năm sau thành lập, Vitalify Asia thử thách giai đoạn để nâng cao giá trị lực kỹ Nguyễn Yến Nhi Thực tập tốt nghiệp thuật họ Việt Nam Công ty tạo nhiều sản phẩm "Made In Vietnam" bán chúng khắp giới Để đạt mục tiêu này, Vitalify Asia tiếp tục nỗ lực cải tiến hàng ngày II Cơ cấu tổ chức Vitalify Asia phát triển ứng dụng web di động để phù hợp với nhu cầu kinh doanh bạn Nhóm đa quốc gia cơng ty Thành phố Hồ Chí Minh, Việt Nam, tham gia nhóm khách hàng từ xa cam kết mang lại giá trị cho người dùng cuối phát triển dịch vụ khách hàng để đảm bảo triển khai dịch vụ nhanh chóng cải tiến Với kinh nghiệm phát triển hệ thống cho nhiều ngành công nghiệp sử dụng công nghệ nổi, Vitalify Asia chuyên hệ thống có khả di động thời gian thực Cơng ty linh hoạt hỗ trợ giai đoạn lập kế hoạch, bàn giao hoạt động phát triển dịch vụ Vitalify Asia chia thành nhiều lab, lab bao gồm nhiều nhóm dự án nhóm dự án tổ chức theo mơ hình Agile Scrum Về số nguyên tắc công việc: - Mỗi sprint kéo dài từ 1-2 tuần tuỳ vào dự án Ngày bắt đầu sprint thứ Mỗi ngày developer gửi lại báo cáo công việc cho BPM quản lý trước 16h45 Sprint retrospective tổ chức linh hoạt sau hoàn thành xong phase Internal weekly meeting gồm có - Code review - Sprint review - Sprint retrospective - Estimate cho spr III Tổng quan việc kinh doanh Một số đặc điểm Vitalify Asia: - Sự phát triển công ty tập trung vào phát triển sản phẩm cung cấp giá trị cho người dùng khách hàng Với suy nghĩ này, đảm bảo chất lượng cải thiện hiệu suất ưu tiên - từ phân tích kinh doanh đến Nguyễn Yến Nhi Thực tập tốt nghiệp mắt sản phẩm thông qua xác định triển khai yêu cầu Ngoài ra, để tiếp tục tăng trưởng sản phẩm sau phát hành, công ty giới thiệu loạt biện pháp để tăng hiệu đồng thời đáp ứng nhanh chóng linh hoạt nhu cầu thị trường phản hồi người dùng Vitalify Asia chuyên hiệu suất di động, thời gian thực phát triển hệ thống di động cho số ngành: - Chăm sóc sức khỏe (Telemedicine) - Fintech - VR/AR/MR, Metaverse - Startup (from MVP) - Mobile / Hyper-casual Games Trong 13 năm qua, cơng ty có 400 sản phẩm thành công Mặc dù nhiều thành tựu số bị hạn chế thỏa thuận bảo mật, sản phẩm cho phép nhắc đến khách hàng công ty: Hankyou Baizou Kun 反響倍増くん Visit site: https://www.retechraas.com/hankyobaizokun/index.php Nguyễn Yến Nhi Thực tập tốt nghiệp Hình 1.2 Hankyou Baizou Kun 反響倍増くん Silly Walkers Visit site: https://play.google.com/store/apps/details?id=asia.vitalify.sillywalkers Và số game In house khác: https://play.google.com/store/apps/developer?id=Vitalify+Asia+Co.,Ltd Nguyễn Yến Nhi Thực tập tốt nghiệp Hình 2.8: Quy trình Agile ● Định nghĩa mơ hình Agile Khái niệm Agile (viết tắt Agile Software Development) có nghĩa phương thức phát triển phần mềm linh hoạt, ứng dụng quy trình phát triển phần mềm với mục tiêu đưa sản phẩm đến tay người dùng nhanh tốt Ngun tắc phát triển mơ hình phân đoạn lặp (iterative) tăng trưởng (incremental), theo nhu cầu giải pháp tiến hóa thơng qua hợp tác nhóm tự quản liên chức Rất nhiều nơi định nghĩa Agile phương pháp Thực chất, Agile giống phương pháp luận, triết lý dựa nguyên tắc phân đoạn vòng lặp (iterative) tăng trưởng (incremental).  Ngày nay, triết lí Agile vượt xa khỏi khu vực truyền thống phát triển phần mềm để đóng góp thay đổi cách thức làm việc, quản lí, sản xuất ngành khác sản xuất, dịch vụ, sales, marketing, giáo dục trở thành phương thức quản lý dự án phổ biến với nhiều đại diện gọi phương pháp “họ Agile” 19 ... Agile – Scrum Tìm hiểu RESTful API Tìm hiểu ReactJS Vịng đời ReactJS Tìm hiểu SCSS, BEM naming convention Tìm hiểu Atomic Design Tìm hiểu quản lý state với MobX 10 Tìm hiểu thư viện Axios 6 7 11 11... làm việc, trao đổi với khách hàng, tác phong tinh thần trách nhiệm trước công việc giao, suy nghĩ tích cực Các anh chị tạo cho em nhiều điều kiện để ứng dụng kiến thức học vào thực tế để xây... khác Git đơn giản giúp bạn lưu lại phiên lần thay đổi vào mã nguồn dễ dàng khơi phục lại dễ dàng mà không cần copy lại mã nguồn cất vào Và người khác xem thay đổi bạn phiên bản,  họ đối chiếu