Báo cáo thực tập react native developer

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 REACT NATIVE DEVELOPER Công ty thực tập : Tech Town Vietnam Người phụ trách : Trần Thùy Dương Thực tập sinh : Mai Công Danh TP Hồ Chí Minh, tháng 10 năm 2022 LỜI MỞ ĐẦU Ngày nay, việc phát triển ứng dụng thiết bị di động nói riêng ngành phát triển phần mềm nói chung ngành nghề, xu hướng có sức phát triển mạnh mẽ, chiếm tỉ trọng lớn kinh tế tồn cầu cịn tiềm lớn Cùng với phổ biến thiết bị điện thoại thơng minh, máy tính bảng, vấn đề nhằm nâng cao chất lượng sống người, nâng cao hiệu suất làm việc, thúc đẩy phát triển cho ngành nghề khác, nhu cầu phát triển phần mềm di động cao hết Xu hướng phát triển ứng dụng di động sinh nhu cầu giải trí giới trẻ thiết bị di động Và giới trẻ nguồn nhân lực quan trọng cho việc phát triển ngành nghề tương lai Chính nhờ bối cảnh đó, em chọn lập trình thiết bị di động làm định hướng học tập công việc tương lai sau Là nhiều cơng ty start-up với đầy tiềm năng, nhiệt huyết sức trẻ mình, Cơng ty TNHH Tech Town nơi đáng tin cậy cho khách hàng thị trường việc cung cấp giải pháp phần mềm web mobile Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia hoạt động môi trường chuyên nghiệp, đồng thời nhận thấy giá trị, môi trường, mục tiêu mà Tech Town mang lại đáp ứng với nhu cầu thân, em định chọn Tech Town nơi bắt đầu cho nghiệp, nơi áp dụng kiến thức tích lũy từ mơi trường giảng đường Báo cáo thực tập Mai Công Danh LỜI CẢM ƠN Em xin chân thành gửi lời cảm ơn tới Công Ty TNHH Tech Town tạo điều kiện cho em có hội thực tập cơng ty Tuy thời gian thực tập kéo dài không lâu, nhờ nhiệt tình hỗ trợ trainer, thân em tiếp thu kiến thức thực tiễn quý báu, tham gia vào dự án thực tế, làm việc môi trường động, nhờ em hiểu thêm cơng nghệ React Native xu hướng Web3 Em xin chân thành cảm ơn anh chị nhóm, bỏ nhiều thời gian, cơng sức để hướng dẫn em hồn thành tốt đợt thực tập Đặc biệt cảm ơn chị Trần Thùy Dương, training React Native công cụ liên quan, hướng dẫn, giúp đỡ cho chúng em tận tình khó khăn cơng việc, dự án, đến khó khăn việc làm quen với môi trường Cảm ơn anh Phạm Minh Cường, giúp em hịa đơng với người, giúp em quy trình thủ tục cơng ty, tạo điều kiện môi trường tốt cho em học hỏi làm việ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 thực báo cáo Mai Công Danh TP HCM, ngày 12 tháng 10 năm 2022 Báo cáo thực tập Mai Công Danh NHẬN XÉT CỦA KHOA MỤC LỤC Báo cáo thực tập Mai Công Danh Mục lục CHƯƠNG GIỚI THIỆU CÔNG TY THỰC TẬP 1.1 Giới thiệu công ty Tech Town 1.2 Sản phẩm công ty CHƯƠNG NỘI DUNG THỰC TẬP .9 2.1 Tìm hiểu cơng ty kỹ công ty .9 2.2 Nghiên cứu kỹ thuật 2.2.1 Các công cụ làm việc .9 2.2.2 Tìm hiểu framework React Native nâng cao .10 2.2.3 Tìm hiểu blockchain Web3 16 2.3 Thực project 20 2.4 Lịch làm việc 20 CHƯƠNG CHI TIẾT VỀ PROJECT 24 3.1 Giới thiệu project 24 3.1.1 Yêu cầu 24 3.1.2 Các chức 24 3.2 Thực 24 3.3 Kế hoạch triển khai 24 TỔNG KẾT 27 TÀI LIỆU THAM KHẢO 28 Báo cáo thực tập Mai Công Danh CHƯƠNG GIỚI THIỆU CƠNG TY THỰC TẬP Hình 1.1 Logo Công Ty TNHH Tech Town 1.1 Giới thiệu công ty Tech Town Tech Town công ty công nghệ đến từ Việt Nam, thành lập từ năm 2018 Đến nay, cơng ty thức có văn phịng đại diện Hoa Kỳ, Canada Hà Lan từ năm 2021 tới Nhật Bản Tech Town chuyên cung cấp giải pháp công nghệ cho công ty khởi nghiệp (startup) doanh nghiệp với việc ứng dụng kỹ thuật công nghệ đại Blockchain, AI, Machine Learning Trong năm hoạt động, Tech Town trở thành đối tác outsource IT uy tín tín nhiệm nhiều đối tác đến từ nhiều quốc gia giới như: Mỹ, Canada, Hà Lan, Nhật Bản, Anh Quốc quốc gia phát triển khác 1.2 Sản phẩm công ty Tech Town chuyên xây dựng, phát triển bảo trì ứng dụng, giải pháp phần mềm lĩnh vực sau: - Web, mobile applications - AR/VR, Metaverse - Blockchain, Web3 Các sản phẩm bật cơng ty liệt kê đây: 1.2.1 Revollet – Blockchain web app Visit site: https://revollet.io Báo cáo thực tập Mai Công Danh Hình 1.2 Revollet 1.2.2 AlohaDAO – Web3 DApp Visit site: https://aloha-dao.com Báo cáo thực tập Mai Cơng Danh Hình 1.3 AlohaDAO 1.2.3 Zuck Zuck Land – Web3 DApp Visit site: https://zuckzuck.land Hình 1.4 Zuck Zuck Land Báo cáo thực tập Mai Công Danh CHƯƠNG NỘI DUNG THỰC TẬP Nội dung thời gian thực tập nghiên cứu framework React Native, xu hướng Web3 xây dựng ứng dụng liên quan Giúp thực tập sinh đào tạo toàn diện React Native, đồng thời rèn luyện kỹ mềm làm việc nhóm, 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 động, trẻ trung chuyên nghiệp 2.1 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, giá trị cốt lõi, quy trình làm việc xử lý cơng việc Cải thiện kỹ mềm Đượ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, quy trình làm việc từ cao xuống thấp, cách thức tổ chức công ty Cách thức xử lý vấn đề phát sinh lúc làm việc từ vấn đề nhân sự, pháp lý đến máy móc,… Ngồi ra, thực tập sinh cịn 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ỹ mềm Kết quả: Hiểu thêm công ty Tech Town, trình thành lập phát triển, giá trị cốt lõi Có thêm kỹ mềm giúp ích cơng việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm 2.2 Nghiên cứu kỹ thuật 2.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, người phụ trách hướng dẫn thực tập sinh tìm hiểu ứng dụng mà cơng ty sử dung, cơng cụ giúp ích cơng việc sau Một số phần mềm số Microsoft Teams - sử dụng làm việc nhóm, Báo cáo thực tập Mai Công Danh 10 GIT – phần mềm quản lý mã nguồn, Xcode - phần mềm phát triển ứng dụng tảng iOS 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, tiếp cận với công nghệ sử dụng thực tế cơng ty 2.2.2 Tìm hiểu framework React Native nâng cao Thời gian: 10 ngày (2 tuần) Nội dung: Được ôn lại nội dung training kiến thức chuyên sâu React Native  Kiến trúc (old architecture) kiến trúc (new architecture): * Kiến trúc tại: Kiến trúc React Native dựa component trung gian gọi “Bridge" (cầu nối), để truyền liệu từ Javascript layer đến native layer phía Dù đem lại hiệu năng, ứng dụng tốt cho ứng dụng, project vừa nhỏ Xong chế cầu nối tồn số hạn chế sau: + Bất đồng bộ: layer gửi liệu đến “bridge" chờ kết theo chế bất đồng bộ, chí không cần thiết + Đơn luồng: tính tốn thực thi luồng Javascript đơn + Tốn kém: Các layer giao tiếp với phải qua chế hoá (serialize) giải hoá (deserialize) liệu Điều làm phát sinh thêm tốn vận hành Báo cáo thực tập Mai Công Danh 14  Tối ưu hiệu suất ứng dụng: - Sử dụng FlatList hay SectionList thay cho ScrollView có nhiều data: ScrollView render tất data lúc, FlatList hay SectionList có hỗ trợ lazy loading Điều giúp tối ưu hiệu suất component cải thiện việc tiêu thụ nhớ - Hạn chế inline function inline styles: lần rerender, arrow function hay styles inline tạo instance Việc ảnh hưởng đến rerender không cần thiết instance hàm tạo chưa tối ưu nhớ ứng dụng Thay vào dùng StyleSheet để tạo reference cho style khai báo hàm có - Cân nhắc sử dụng useMemo, useCallback React.memo cho tối ưu rerender: + useMemo: memoize giá trị hàm tính tốn phức tạp + useCallback: memoize function thay value useMemo + React.memo hay PureComponent: component có props khơng thay đổi qua lần component cha rerender, component bọc React.memo không bị rerender - Sử dụng nativeDriver dùng thư viện Animated: sử dụng thư viện Animated cách tiếp cận phổ biến cho animation React Native useNativeDriver xử lý animation độc lập so với thread Javascript ứng dụng, giúp cho giữ mượt mà, tối ưu khung hình, animation - Sử dụng Hermes: Hermes Javascript engine Facebook phát triển vào năm 2019 Engine giúp cải thiện hiệu suất ứng dụng, giảm tiêu thụ nhớ, giảm dung lượng app, cải thiện thời gian khởi động app Hermes bật/tắt thông qua việc set trường enableHermes true/false hai file android/app/build.gradle, Podfile tương ứng Android iOS Báo cáo thực tập Mai Công Danh 15 - Loại bỏ thư viện khơng sử sung tính dư thừa: thư viện hay tab, animation, navigation ảnh hưởng ít, nhiều đến ứng dụng Ta nên giữ lại thứ cần thiết quan trọng - Ln có hàm dọn dẹp (clean up function) cho useEffect hay hàm subscibe (eventListener) có: Tránh tình trạng tràn nhớ tối ưu hiệu suất ứng dụng  Mở rộng: - Responsive React Native: + Luôn set minWidth maxWidth: Điều giúp cover tốt hình cỡ lớn + Dimension API: hoạt động tương tự Media query CSS Về cung cấp width height xác hình, sau tính tốn để ln co giãn theo kích thước hình Đồng thời sử dụng dạng inline style Hình 2.3 Ví dụ Dimension API React Native + Platform Module: React Native cung cấp Platform module có sẵn, giúp detetc tảng thiết bị chạy (iOS, Android, Web,…) Sẽ hữu ích cần style riêng cho tảng (thay đổi nhỏ) + Handle orientation (xoay chiều thiết bị): Nếu khơng khóa chiều screen từ ban đầu phải xử lý tình người dùng Báo cáo thực tập Mai Công Danh 16 xoay chiều thiết bị để thích ứng UI cho phù hợp, đặc biệt thiết bị di động React Native không cung cấp module có sẵn để phục vụ việc xử lý orientation, nhiên ta tiếp cận thơng qua cách như: module opensource từ cộng đồng (react-native-orientation), hay qua Dimension API sau: Hình 2.4 Ví dụ detect thiết bị xoay chiều qua Dimension API - Xử lý UX thiết yếu: + Detect tình trạng kết nối internet: Xử lý ứng dụng thiết bị người dùng kết nối/ kết nối internet thông qua module react-nativenetinfo từ cộng đồng + Xử lý kiện onPress button: Nếu button có chức lớn, cần thời gian để xử lý nhấn, ta cần có chế chặn người dùng liên tục spam nhấn nút Điều thực qua việc tắt/mở (enable) trạng thái nút, hiển thị UI loading xử lý + UI loading cho component cần thời gian để fetch data, mount UI + Chú ý hình thiết bị iOS chúng khác với Android phần tai thỏ (notch) - Build iOs publish lên Apple TestFlight: Sử dụng Apple Xcode hệ điều hành MacOS để build ứng dụng React Native máy ảo iOS Và MacOS ta config, setup thông số, cài đặt để publish lên TestFlight (ứng dụng để preview test cho thiết bị iOS) hay release lên AppStore Báo cáo thực tập Mai Công Danh 17 Thực hiện: - Làm thực hành, kiểm tra kiến thức học - Tìm kiếm tài liệu mạng để tìm hiểu thêm - Ứng dụng kiến thức học vào project luyện tập, project công ty Kết quả: - Nâng cao kiến thức, kỹ lập trình với framework React Native - Có kiến thức quan trọng cho việc lập trình mobile 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 hiệu 2.2.3 Tìm hiểu blockchain Web3 Thời gian: ngày (1 tuần) Nội dung: Các kiến thức blockchain Web3  Blockchain: * Khái niệm: Blockchain sở liệu chia sẻ, phân tán vĩnh viễn chia sẻ nhiều node mạng máy tính Blockchain ghi lại liệu theo cách mà việc sửa đổi hay hack hệ thống xảy Như tên gọi, blockchain lưu lại liệu dạng chuỗi khối liên kết Mỗi khối chứa nhóm giao dịch (transactions), truyền assets mạng lưới cập nhật thông tin hệ thống * Block (khối): Vì có hàng triệu giao dịch nên giao dịch nhóm lại với thành khối Các khối liên kết với theo cách kiểm chứng mật mã để dễ dàng truy vết Trạng thái mạng tính tốn lại lúc cách khối gốc cập nhật trạng thái theo thông tin khối Báo cáo thực tập Mai Công Danh 18 * Nodes (nút): Mạng blockchain quản lý tự động thông qua mạng phân tán ngang hàng (peer-to-peer) node máy tính Có thể nghĩ đơn giản node mạng giữ sổ giao dịch chung Do đó, node xác minh kiểm tra riêng giao dịch xảy mạng đảm bảo khơng có hành vi bất hợp pháp Một loại node khác, gọi node khai thác (mining node), chịu trách nhiệm nhóm giao dịch thực mạng thành khối, xác minh chúng đề xuất khối đưa vào sổ chung Khai thác cơng việc khó mặt tính tốn quan trọng để thực cách an toàn, người khai thác có khối chấp nhận nhận phần thưởng token cho công việc khó khăn họ * Decentralization (phi tập trung): Bằng cách lưu trữ liệu mạng ngang hàng node, blockchain mạng phi tập trung Điều có lợi ích đáng kể so với phương pháp lưu trữ liệu tập trung truyền thống Lợi ích phi tập trung: + Vi phạm liệu hệ thống tập trung làm lộ nhiều liệu + Hệ thống tập trung kiểm duyệt hạn chế nội dung + Phụ thuộc vào máy chủ hệ thống có nghĩa cố xảy tầng hệ thống ảnh hưởng đến phận phía Hạn chế: + Khơng kiểm duyệt + Khả chống công cao khiến việc kiểm soát phá hủy liệu trở nên bất khả thi * Ứng dụng: Báo cáo thực tập Mai Công Danh 19 - Tiền điện tử - Hợp đồng thơng minh (smart contract) - Tài phân tán - Bảo mật thông tin …  Web3: * Khái niệm: Web3, tương lai internet mà hướng tới, mạng phi tập trung Trong Web3, internet chia sẻ trực tuyến quản lý tập thể “người dùng” (we), thay thuộc sở hữu thực thể tập trung cấp cao Thế giới Web3 giới có giao thức mã nguồn mở làm tảng Web3 nói việc cấu trúc lại dịch vụ sản phẩm internet để chúng mang lại lợi ích cho người thực thể Web3 cải thiện web mà biết ngày cách làm cho trở nên phi tập trung, phân tán, mở, khơng tín nhiệm không cần cấp quyền *Ethereum: Ethereum chuỗi khối phi tập trung hỗ trợ hợp đồng thông minh Không giống Bitcoin, hỗ trợ transfer Bitcoin token hệ thống, Ethereum có mục đích chung lớn Các nhà phát triển xây dựng dApp hay ứng dụng phi tập trung, thực thi mạng Ethereum Máy ảo Ethereum (EVM) Do đó, trạng thái tồn cầu Ethereum khơng bao gồm số dư tài khoản mà bao gồm trạng thái dApp dApps xây dựng Ethereum ngơn ngữ lập trình nó, Solidity Bạn viết hợp đồng thơng minh Solidity triển khai hợp đồng thông minh cho Mạng Ethereum Báo cáo thực tập Mai Công Danh 20 Ethereum có loại tiền tệ riêng gọi "Ether" "ETH" Token u cầu tốn phí giao dịch cho giao dịch thực mạng Ethereum *Provider, Signer: Provider kết nối node Ethereum cho phép đọc liệu từ trạng thái Sử dụng Provider để thực việc gọi chức đọc (read-only) hợp đồng thơng minh, tìm nạp số dư tài khoản, tìm nạp chi tiết giao dịch, v.v Signer kết nối node Ethereum cho phép ghi liệu vào blockchain Sử dụng Signer để thực việc gọi chức ghi (write) hợp đồng thông minh, chuyển ETH tài khoản, v.v Để làm vậy, Signer cần có quyền truy cập vào private key để thực giao dịch thay mặt tài khoản Ngoài ra, Signer làm thứ mà Provider làm Thực hiện: - Tham gia đầy đủ buổi trainning - 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 blockchain web3 - Nắm khái niệm, chức thành phần cốt lõi làm việc với web3 2.3 Thực project Sau gần tháng training thực hành, thực tập sinh nắm kiến thức nâng cao Javascript ES6, React Native blockchain Trong tháng lại, người phụ trách hướng dẫn thực tập sinh áp dụng kiến thức học để thực project React Native với chủ đề blockchain Báo cáo thực tập Mai Công Danh ... Zuck Land Báo cáo thực tập Mai Công Danh CHƯƠNG NỘI DUNG THỰC TẬP Nội dung thời gian thực tập nghiên cứu framework React Native, xu hướng Web3 xây dựng ứng dụng liên quan Giúp thực tập sinh đào... (platform) Báo cáo thực tập Mai Công Danh 12 Hình 2.2 React Native new architecture  Core components and Native components: Các kiến thức component có React Native Ngồi ra, thực tập sinh hướng... @ReactProp Khai báo package ViewManager vừa tạo vào danh sách native modules React Native Sử dụng code Javascript qua module “requireNativeComponent” Báo cáo thực tập Mai Công Danh 13  React Hooks: