Tài liệu Lập trình mobile application trên nền tảng momo platform (báo cáo thực tập)

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 MOBILE APPLICATION TRÊN NỀN TẢNG MOMO PLATFORM Công ty thực tập: M_Service (Momo) Người phụ trách: Nguyễn Trần Hoài Trung, Nguyễn Ngọc Thành Thực tập sinh: Phan Duy Đức - 18520621 TP. Hồ Chí Minh, tháng 06 năm 2022 1 LỜI MỞ ĐẦU Ngày nay, với tốc độ phát triển như vũ bão của internet, các công nghệ và dịch vụ mới liên tiếp ra đời hướng đến nâng cao trải nghiệm của người dùng. Ngành kinh tế hiện đại như tài chính-ngân hàng cũng không nằm ngoài xu thế này. Các ứng dụng của công nghệ thông tin được ví như những con sóng mới, làm thay đổi toàn bộ hệ thống mô thức cung ứng và vận hành của các dịch vụ tài chính đã có từ hàng trăm năm nay. Từ đó, các công ty, startup Fintech liên tiếp ra đời, trở thành đại diện tiêu biểu cho cuộc các mạng kỹ thuật số, được đồn đoán là có thể thay đổi hoàn toàn phương thức kinh doanh của ngành ngân hàng. Nổi bật nhất trong số đó có thể kể đến Momo, là một nền tảng ví điện tử do Công ty Cổ phần Dịch vụ Di động Trực tuyến (M_Service) phát triển cho phép người dùng thực hiện các thanh toán, giao dịch trên các thiết bị di động. Bằng việc hợp tác với hơn 90% ngân hàng tại Việt Nam cùng 10.000 thương nhân trong nước, công ty này nắm giữ hơn 80% thị phần trong lĩnh vực thanh toán kỹ thuật số.Tính đến năm 2022, ví điện tử MoMo có hơn 31 triệu người dùng sử dụng. Sự phát triển và mở rộng vượt bật của Momo kéo theo nhu cầu về nguồn nhân lực để đảm bảo cho việc phát triển và duy trì các dự án. Các cuộc tuyển mộ nhân lực, đặc biệt là nguồn nhân lực trẻ liên tiếp được đội ngũ nhân sự của M_service tổ chức để tìm kiếm các ứng cử viên phù hợp. Sau hơn 3 năm học tập và làm việc tại Đại học công nghệ thông tin (UIT), em đã quyết định đăng ký chương trình Momo Talent với mong muốn được trải nghiệm môi trường làm việc của một trong những “kỳ lân" công nghệ hàng đầu Việt Nam, đồng thời học hỏi thêm kinh nghiệm trong việc phát triển sản phẩm trong các dự án thực tế. 2 LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty M_Service đã tạo điều kiện cho em có cơ hội được thực tập tại công ty. Đặc biệt cảm ơn anh Trung, anh Thành - live manager của em trong suốt quá trình thực tập tại công ty, cũng như các thành viên của DNA team, đã hướng dẫn, training tận tình cho em các kiến thức mới về phát triển ứng dụng di động (React Native, Typescript, …) cũng như làm quen với môi trường mới. Em cũng cảm ơn chị Ngô Mỹ Quyên, đã giúp đỡ và hướng dẫn em tận tình trong giai đoạn đầu em mới vào công ty. Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điều kiện em làm bài báo cáo này. Phan Duy Đức TpHCM, 14/06/2022 3 NHẬN XÉT CỦA KHOA 4 MỤC LỤC Chương 1: Giới thiệu công ty thực tập 6 Chương 2: Nội dung thực tập 7 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 7 Nghiên cứu kỹ thuật 7 Các công cụ làm việc 7 Tìm hiểu ngôn ngữ TypeScript và React Native framework 8 Sử dụng React Native framework 8 Phát triển ứng dụng trên nền tảng Momo platform 10 Tham gia các buổi training kỹ năng mềm 10 Thực hiện project 10 Dự án Phát tâm công đức 10 Dự án Creditcard - Thẻ tín dụng 11 Dự án Fast Money - Vay nhanh 12 Dự án DNA-FS lib 12 Lịch làm việc 13 TỔNG KẾT 14 5 Chương 1: Giới thiệu công ty thực tập MoMo là một nền tảng ví điện tử do Công ty Cổ phần Dịch vụ Di động Trực tuyến (M_Service) phát triển cho phép người dùng thực hiện các thanh toán, giao dịch trên các thiết bị di động. Bằng việc hợp tác với hơn 90% ngân hàng tại Việt Nam cùng 10.000 thương nhân trong nước, công ty này nắm giữ hơn 80% thị phần trong lĩnh vực thanh toán kỹ thuật số. Tính đến năm 2022, ví điện tử MoMo có hơn 31 triệu người dùng sử dụng. MoMo cho phép người dùng thanh toán hơn 500 dịch vụ khác nhau bao gồm hóa đơn điện, nước, internet, phí chung cư, nạp tiền điện thoại, đặt vé máy bay, vé tàu, vé xe, đặt phòng khách sạn, mua đồ ăn, thức uống, thanh toán cà phê, đổ xăng, mua sắm cùng các dịch vụ tài chính như ngân hàng, bảo hiểm. Bên cạnh đó, ứng dụng còn tích hợp chức năng tích điểm thưởng, đổi điểm thưởng lấy voucher mua sắm, nuôi heo đất hoàn tiền hoặc quyên góp cho các hoạt động thiện nguyện. Cuối năm 2020, MoMo ra mắt tính năng "du lịch, đi lại". Ngoài ra, MoMo là ứng dụng thanh toán di động đầu tiên của Việt Nam tích hợp công nghệ "One Touch Payment", cho phép khách hàng thực hiện giao dịch thông qua một lần chạm màn hình. 6 Chương 2: Nội dung thực tập Tham gia vào chương trình Momo Talent với vai trò là một ITC Trainee, em đã được học rất nhiều kiến thức về công nghệ cũng như quy trình trong việc phát triển các dự án và sản phẩm thật đến tay người dùng 1. Tìm hiểu công ty và các kyỹ năng cơ bản trong công ty Thời gian : 1 ngày Nội dung : Giới thiệu về công ty, cách tổ chức của công ty Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và 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ủa công ty . Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong công việc… Kết quả : Hiểu thêm về công ty M_Service, quá trình thành lập và phát triển. Có thêm các kỹ năng về việc sử dụng email trong công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn. 2. Nghiên cứu kyỹ thuật 2.1. Các công cụ làm việc Thời gian : 1 tuần Nội dung : Tìm hiểu về các công cụ sẽ được sử dụng trong quá trình làm việc. Trong thời gian này, live manager đã hướng dẫn thực tập sinh tìm hiểu về các công cụ sẽ giúp ích cho trong công việc sau này. Các công cụ cần thiết trong việc phát triển sản phẩm bao gồm: - Visual Studio Code: Text editor được sử dụng chính trong quá trình phát triển sản phẩm - NodeJS, NVM, Yarn: Các công cụ quản lý package - Momo development, staging engine: Các engine sử dụng để dev, debug - Git, Gitlab, CI/CD: Công cụ quản lý source code, deploy, integration - Xcode, Iphone Simulator, Android Studio, Android Emulator: Các IDE và máy ảo phục vụ cho việc dev, debug sản phẩm Thực hiện : Học lý thuyết và ứng dụng các công cụ trên Kết quả : Có thể sử dụng và kết hợp các công cụ kể trên 2.2. Tìm hiểu ngôn ngữ TypeScript và React Natve framework Thời gian : 2 tuần 7 Nội dung : - Được training về cách sử dụng TypeScript trong việc viết code, cách hạn chế crash bằng việc sử dụng thư viện lodash - safeGet kết hợp với type-interface trong TS. Thực hiện : - Sử dụng Type Script trong dự án. Commit và được review code bởi live manager và các thành viên trong team Kết quả : - 2.3. Có thể sử dụng Type Script một cách cơ bản Có thể ứng dụng Type Script cũng với lodash để hạn chế crash của một ứng dụng, giúp nâng cao trải nghiệm người dùng Sử dụng React Natve framework Nội dung: Các kiến thức cơ bản về React Native để có thể phát triển một ứng dụng di động cơ bản: - React Native là gì ? React native là một công cụ giúp chúng ta lập trình đa nền tảng để tạo ra các ứng dụng trên môi trường native. Nó là một framework mã nguồn mở được phát triển bởi Facebook, cho phép bạn sử dụng Java script để phát triển phần mềm trên điện thoại di động Android và IOS. React native cũng giống như React vậy chúng sử dụng các native components thay vì các web components. Vì vậy để hiểu về cấu trúc của React native chúng ta cần phải có các kiến thức cơ bản với các khái niệm cơ bản của React như là JSX, components, props hay là state. - - Component: Components là một khái niệm cơ bản của cả React và React native. Chính việc chia nhỏ ứng dụng thành các components nhỏ tạo nên tính tái sử dụng cao và khả năng mở rộng của chúng. Props Props là viết tắt của Properties. Một điều mà bạn cần phải nhớ khi sử dụng props đó là không bao giờ nên thay đổi giá trị của nó, hay nói cách khác, đây là một dữ liệu immutable. Các component nhận props từ component cha. Bạn không được thay đổi giá trị của props trong các component này mà chỉ được phép đọc giá trị ra thôi. Trong React thì dữ liệu sẽ đi theo một chiều, có nghĩa là từ component cha => các component con. 8 - State State thì hoạt động khác với Props. State là dữ liệu nội bộ của một Component, trong khi props là dữ liệu được truyền cho Component. Chính vì vậy chúng ta hoàn toàn có thể thay đổi state, và coi nó là một kiểu dữ liệu mutable. Vì đặc điểm này nên chúng ta hay sử dụng State để thay đổi dữ liệu của view, binding data lại view khi có thay đổi. Nhưng chúng ta không dùng this.state để gán lại giá trị thay đổi cho nó, mà chúng ta sẽ dùng this.setState. Function này sẽ trigger cho class rằng hãy render lại component và các component con của nó, còn this.state thì không. - React Lifecycle Là vòng đời của các Component được sử sụng bên trong ứng dụng của bạn. Có thể group các phương thức lifecycle ra 3 nhóm, ứng với 4 giai đoạn của component: Mounting, Updating, Unmounting, Error Handling ● Mounting: 1. constructor 2. static getDerivedStateFromProps() 3. render 4. componentDidMount() ● Updating: 1. static getDerivedStateFromProps() 2.shouldComponentUpdate() 3. render() getSnapshotBeforeUpdate() 4. componentDidUpdate() ● Unmounting: componentWillUnmount() Thực hiện : - Tự học và bổ sung các kiến thức về React Native thông qua internet và dưới sự chỉ dẫn của live manager cũng như các thành viên trong team Kết quả : - Nắm vững cách sử dụng framework React Native và có thể sử dụng trong dự án 9 2.4. Phát triển ứng dụng trên nêền tảng Momo platorm Nội dung : Momoplatform cung cấp các công cụ hỗ trợ lập trình viên trong quá trình phát triển ứng dụng - Platform engine - Web admin - Momo core pakage - Kiến trúc Momo platform - mini app Thực hiện : - Nghiên cứu cách sử dụng và thực hành setup cách công cụ kể trên dưới sự hướng dẫn của live manager và các thành viên trong team Kết quả: - 2.5. Tham gia các buổi training kyỹ năng mêềm - 2.6. Có thể sử dụng các công cụ kể trên trong quá trình phát triển ứng dụng trên nền tảng Momo platform Problem solving - Critical Thinking Project management Thực hiện project 1. Dự án Phát tâm công đức ○ Các công việc đã thực hiện: ■ Cải tiến thông tin Phật tử ■ Thêm chức năng An viên tu tập ■ Cải tiến An Viên tu tập ■ Gắn Cornerstone cho HomeBanner ■ Hotfix Home Scroll ■ Chỉnh sửa, thêm tracking cho mini-app ■ Thêm chức năng Đề xuất công đức ○ Các kỹ năng đã học được: ■ Quy trình CI/CD ■ Kiến trúc Momo platform-mini app ■ JavaScript (async, callback, debounce function,...) ■ React (reducers, hooks, ... ) ■ Quy trình Agile-Scrum, flow làm việc giữa Product-BackendFrontend ■ Detox (automation testing framework) 10 2. Dự án Creditcard - Thẻ tn dụng ○ Các công việc đã thực hiện: ■ Thêm màn hình Onboarding Screen ■ Tích hợp API CheckStatus ■ Khởi tạo, thêm các màn hình Register Application Form (Step 1-23) ■ Thêm các màn hình UI của mini app (home, card list,...) ■ Tạo các entrypoint để truy cập từ các mini-app khác(ref Id) ■ Thêm performance tracing cho mini-app ■ Tích hợp API Get application step ■ Update lại UI mới theo yêu cầu của product ■ Cải thiện performance cho mini-app (sử dụng cache và kỹ thuật offline-first) ○ Các kỹ năng đã học được: ■ TypeScript ■ Eslint ■ Hiện thực pattern MVVM (Model - View - ViewModel) ■ Cleancode, structure folder ■ Optimize performance: useCallback, useMemoizCallBack, offline first cache,... ■ Quy trình khởi tạo mini app ■ Cách handle exception (sử dụng lodash, model,...) ■ Cách sử dụng mocking system để tăng năng suất 3. Dự án Fast Money - Vay nhanh ○ Các công việc đã thực hiện: ■ Refactor mini-app sang sử dụng ngôn ngữ TypeScript ■ Cải thiện performance ■ Thêm tracking cho mini-app ○ Các kỹ năng đã học được: ■ Cách refactor và maintain 1 dự án ■ React class component 4. Dự án DNA-FS lib ○ Các công việc đã thực hiện: ■ Đóng góp (commit) vào FSBaseScreen ■ Đóng góp (commit) vào Component, Utils (OnboardingSlider, StringUtils,..) 11 ■ Viết TypeScript converting process document ■ Khởi tạo Fs Library Example Mini app ○ Các kỹ năng đã học được: ■ Cách sử dụng và maintain một thư viện trên NPM 3. Lịch làm việc Tháng 1 2 3 Công việc Người hướng dẫn Mức độ hoàn thành Nhận xét của người hướng dẫn Maintain và phát triển Anh Nguyễn Trần 95% dự án Phát tâm công Hoài Trung, anh đức Nguyễn Ngọc 95% Thành Phát triển dự án 95% CreditCard từ đầu 12 4 - 5 6 Maintain dự án CreditCard - Maintain dự án DNA-FsLib - Maintain dự án Fastmoney 95% 95% 95% 13 TỔNG KẾẾT Sau 6 tháng Momo, em đã may mắn được tham gia vào các dự án thực tế (4 dự án) chứ không chỉ là các project mẫu. Quá trình học hỏi và làm việc tại công ty dù có hơi áp lực nhưng đã đem lại cho em rất nhiều kiến thức, tư duy, kinh nghiệm cả về quá trình thực hiện dự án lẫn trong cách làm việc và giao tiếp. Chân thành cảm ơn sự giúp đỡ của anh Trung, anh Thành cũng như các thành viên của DNA team, chị Quyên, và công ty M_Service đã tạo môi trường và giúp đỡ cho em trong suốt quá trình thực tập. Cảm ơn khoa CNPM đã tạo điều kiện cho em hoàn thành bài báo cáo này Phan Duy Đức 14