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

Cùng với sự phổ biến của các thiết bị như điện thoại thôngminh, máy tính bảng, các vấn đề nhằm nâng cao chất lượng cuộc sống con người, nângcao hiệu suất làm việc, thúc đẩy phát triển ch

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO THỰC TẬP

REACT NATIVE DEVELOPER

LỜI MỞ ĐẦU

Ngày nay, việc phát triển ứng dụng trên thiết bị di động nói riêng và ngành pháttriển phần mềm nói chung đã và đang là một trong những ngành nghề, xu hướng cósức phát triển hết sức mạnh mẽ, chiếm tỉ trọng lớn trong nền kinh tế toàn cầu và vẫncòn tiềm năng rất lớn Cùng với sự phổ biến của các thiết bị như điện thoại thôngminh, máy tính bảng, các vấn đề nhằm nâng cao chất lượng cuộc sống con người, nângcao hiệu suất làm việc, thúc đẩy phát triển cho các ngành nghề khác, nhu cầu về pháttriển phần mềm di động hiện là cao hơn bao giờ hết

Xu hướng phát triển ứng dụng di động được sinh ra là do nhu cầu giải trí củagiới trẻ bằng những thiết bị di động mới nhất Và cũng chính giới trẻ sẽ là nguồn nhânlực quan trọng cho việc phát triển của ngành nghề này trong tương lai Chính nhờ bốicảnh đó, em đã chọn lập trình trên thiết bị di động làm định hướng học tập cũng nhưcông việc tương lai sau này của mình

Là một trong nhiều các công ty start-up với đầy tiềm năng, nhiệt huyết và sứctrẻ của mình, Công ty TNHH Tech Town đã và đang là nơi đáng tin cậy cho kháchhàng trên thị trường bằng việc cung cấp các giải pháp phần mềm về web và mobile

Sau ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế,cũng như muốn được tham gia hoạt động trong một môi trường chuyên nghiệp, đồngthời nhận thấy các giá trị, môi trường, mục tiêu mà Tech Town mang lại đáp ứng rấtđúng với nhu cầu của bản thân, em đã quyết định chọn Tech Town là nơi bắt đầu cho

sự nghiệp, là nơi đầu tiên áp dụng những kiến thức tích lũy được từ môi trường giảngđường

ơn các anh chị trong nhóm, đã bỏ ra nhiều thời gian, công sức để hướng dẫn em hoànthành tốt đợt thực tập này.

Đặc biệt cảm ơn chị Trần Thùy Dương, đã training React Native và các công cụliên quan, hướng dẫn, giúp đỡ cho chúng em tận tình cả những khó khăn trong côngviệc, trong dự án, đến những khó khăn việc làm quen với môi trường mới Cảm ơn anhPhạm Minh Cường, đã giúp em hòa đông với mọi người, giúp em trong các quy trìnhthủ tục của công ty, tạo điều kiện môi trường tốt nhất cho em học hỏi và làm việc

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 thực hiện bài báo cáo này

Mai Công Danh

TP HCM, ngày 12 tháng 10 năm 2022

NHẬN XÉT CỦA KHOA

MỤC LỤC

Mục lục

CHƯƠNG 1 GIỚI THIỆU CÔNG TY THỰC TẬP 6

1.1 Giới thiệu công ty Tech Town 6

1.2 Sản phẩm của công ty 6

CHƯƠNG 2 NỘI DUNG THỰC TẬP 9

2.1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 9

2.2 Nghiên cứu kỹ thuật 9

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 và Web3 16

2.3 Thực hiện project 20

2.4 Lịch làm việc 20

CHƯƠNG 3 CHI TIẾT VỀ PROJECT 24

3.1 Giới thiệu về project 24

3.1.1 Yêu cầu 24

3.1.2 Các chức năng chính 24

3.2 Thực hiện 24

3.3 Kế hoạch và triển khai 24

TỔNG KẾT 27

TÀI LIỆU THAM KHẢO 28

CHƯƠNG 1 GIỚI THIỆU CÔNG TY THỰC TẬP

Hình 1.1 Logo Công Ty TNHH Tech Town

Tech Town là công ty công nghệ đến từ Việt Nam, thành lập từ năm 2018 Đếnnay, công ty đã chính thức có văn phòng đại diện tại Hoa Kỳ, Canada và Hà Lan từnăm 2021 và sắp tới là Nhật Bản Tech Town chuyên cung cấp các giải pháp côngnghệ cho các công ty khởi nghiệp (startup) và doanh nghiệp với việc ứng dụng những

kỹ thuật công nghệ hiện đại như Blockchain, AI, Machine Learning

Trong hơn 4 năm hoạt động, Tech Town đã trở thành đối tác outsource IT uytín được tín nhiệm nhiều đối tác đến từ nhiều quốc gia trên thế giới như: Mỹ, Canada,

Hà Lan, Nhật Bản, Anh Quốc cùng các quốc gia phát triển khác

Các sản phẩm nổi bật của công ty có thể liệt kê dưới đây:

1.2.1 Revollet – Blockchain web app

Visit site: https://revollet.io

Hình 1.2 Revollet

1.2.2 AlohaDAO – Web3 DApp

Visit site: https://aloha-dao.com

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

CHƯƠNG 2 NỘI DUNG THỰC TẬP

Nội dung chính của thời gian thực tập là nghiên cứu framework React Native,

xu hướng Web3 và xây dựng ứng dụng liên quan Giúp thực tập sinh được đào tạotoàn diện về React Native, đồng thời rèn luyện các kỹ năng mềm như làm việc nhóm,giao tiếp Tại công ty, sinh viên có cơ hội được học tập, khám phá và làm việc trongmột môi trường năng động, trẻ trung và chuyên nghiệp

Thời gian: 1 ngày

Nội dung: Giới thiệu về công ty, cách tổ chức, giá trị cốt lõi, quy trình làm việc

và xử lý công việc Cải thiện các kỹ năng mềm

Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và pháttriể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 Cách thức

xử lý các vấn đề phát sinh trong lúc làm việc từ các vấn đề về nhân sự, pháp lý đếnmáy móc,…

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 tynhư 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ôngviệc, các kỹ năng mềm

Kết quả: Hiểu thêm về công ty Tech Town, quá trình thành lập và phát triển,

giá trị cốt lõi Có thêm các kỹ năng mềm giúp ích 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.2 Nghiên cứu kỹ thuật

2.2.1 Các công cụ làm việc

Thời gian: 4 ngày

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, người phụ trách đã hướng dẫn thực tập sinh tìm hiểu vềcác ứng dụng mà công ty sử dung, các công cụ sẽ giúp ích trong công việc sau này.Một số phần mềm trong số đó như Microsoft Teams - sử dụng trong làm việc nhóm,

GIT – phần mềm quản lý mã nguồn, Xcode - phần mềm phát triển ứng dụng nền tảngiOS.

Thực hiện: Thực hành sử dụng các phần mềm đã nêu trên.

Kết quả: Lập trình sử dụng các công cụ miễn phí, giúp dễ dàng kết hợp các

công cụ với nhau, tiếp cận với các công nghệ đang được 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 các nội dung cơ bản và training về các kiến thức chuyên

sâu của React Native

 Kiến trúc hiện tại (old architecture) và kiến trúc mới (new architecture):

* Kiến trúc hiện tại:

Kiến trúc hiện tại của React Native dựa trên một component trung gian gọi

là “Bridge" (cầu nối), để truyền dữ liệu từ Javascript layer đến native layer phíadưới Dù đem lại hiệu năng, ứng dụng tốt cho các ứng dụng, project vừa và nhỏ.Xong cơ chế cầu nối này tồn tại một số hạn chế như sau:

+ Bất đồng bộ: một layer gửi dữ liệu đến “bridge" và chờ kết quả theo cơchế bất đồng bộ, thậm chí ngay cả khi không cần thiết

+ Đơn luồng: mọi tính toán đều chỉ được thực thi trên luồng Javascript đơnnhất

+ Tốn kém: Các layer giao tiếp với nhau đều phải qua cơ chế tuần tự hoá(serialize) và giải hoá (deserialize) dữ liệu Điều này làm phát sinh thêm tốnkém khi vận hành

Hình 2.1 React Native architecture

* Kiến trúc mới:

Kiến trúc mới của React Native sẽ thay thế “Bridge” bằng một cơ chế khácgọi là “the Javascript Interface” (JSI) JSI là một lớp interface cho phép một đốitượng Javascript giữ một tham chiếu đến một đối tượng C++ và ngược lại Kiến

trúc này sẽ được xây dựng từ hai thành phần chính gồm: The New Native

Module System - Turbo Modules và The New Renderer – Fabric Ý tưởng này

sẽ đem lại một số lợi ích sau:

+ Thực thi đồng bộ: các hàm sẽ được thực thi một cách đồng bộ ngay từ đầuthay vì phải xử lý bất đồng bộ không cần thiết

+ Đa luồng: các hàm Javascript giờ đây có thể chạy trên những luồng xử lýđồng thời khác

+ Giảm tốn kém: kiến trúc mới này không đòi hỏi phải tuần tự hoá và giảituần tự hoá dữ liệu nên sẽ giảm được tốn kém hiện có

+ Code sharing: với C++, giờ đây có thể trừu tượng hoá tất cả các code bấtkhả tri (agnostic code) và chia sẻ giữa các nền tảng (platform)

Hình 2.2 React Native new architecture

 Core components and Native components:

Các kiến thức cơ bản về các component có trong React Native Ngoài ra,thực tập sinh còn được hướng dẫn về việc custom lại một native component có sẵn

* Custom native component:

1 Tạo một lớp CustomView kế thừa một lớp native UI component bất

kỳ theo nhu cầu

2 Trong lớp này, xây dựng, thay đổi các thuộc tính, phương thức thoảyêu cầu vấn đề

3 Tạo một lớp ViewManager cho CustomView bằng việc kế thừa lớp wrapper ViewManager của React Native Trong đây, override lại phương thức createView (createViewInstance/RTCViewManager tương ứng trên

Android/iOS) Cũng ở đay, tạo tham chiếu đến Javascript cho các thuộc tính

của native UI qua @ReactProp.

4 Khai báo package ViewManager vừa tạo vào danh sách các native

modules của React Native

5 Sử dụng trong code Javascript qua module

“requireNativeComponent”.

 React Hooks:

Ôn lại, tiếp cận những kiến thức cũ, mới về các hook có trong React

Định nghĩa: Hook được giới thiệu trong phiên bản React 16.8 Nó cho phép

chúng ta sử dụng state và các tính năng khác của React mà không phải dùngđến Class Do đó các hooks chỉ có thể sử dụng trong các functional component

+ useRef: useRef chủ yếu được sử dụng để lưu trữ các tham chiếu đến

các UI component; trở thành một biến không bị khởi tạo mới mỗi lẩn rerender,đồng thời cũng không trigger rerender khi thay đổi giá trị

+ useState: Hook luôn trả về một mảng có hai elements: element đầu tiên

sẽ là giá trị của state, element thứ hai sẽ là một hàm dùng để cập nhật giá trị củastate đó useState chỉ có thể thay đổi giá trị qua hàm setState và cũng triggerrerender khi giá trị state thay đổi

+ useEffect: useEffect nhận vào hai tham số gồm: callback function và

mảng dependency Với cấu trúc này, useEffect có thể thực hiện nhiều chứcnăng khác nhau dựa trên giá trị của dependencies, thay thế cho các hàmcomponentDidMount, componentWillUnmount,

+ useMemo: useMemo tránh cho việc tính toán lại một function lặp đi

lặp lại nhiều lần mỗi lần component rerender Để có thể làm như vậy, useMemonhận vào hai tham số gồm: function và mảng dependency để lưu lại mộtmemoized value

+ useCallback: giống với useMemo về cấu trúc nhưng khác với

useMemo ở điểm: hook này sẽ lưu lại một memoized callback thay vìmemoized value và sẽ chỉ tạo ra callback mới khi dependencies thay đổi

+ useLayoutEffect: cấu trúc và chức năng tương tự useEffect, tuy nhiên

hook này khác ở chỗ: useLayoutEffect sẽ được chạy trước khi UI được cập nhật

 Tối ưu hiệu suất ứng dụng:

- Sử dụng FlatList hay SectionList thay cho ScrollView khi có nhiều data:

ScrollView sẽ render tất cả data cùng một lúc, trong khi FlatList hay SectionList

có hỗ trợ lazy loading Điều này giúp tối ưu hiệu suất component cũng như cải

thiện việc tiêu thụ bộ nhớ

- Hạn chế inline function và inline styles: mỗi lần rerender, những arrowfunction hay styles inline sẽ được tạo mới instance Việc này ảnh hưởng đếnrerender không cần thiết khi instance hàm được tạo mới và còn là sự chưa tối

ưu bộ nhớ ứng dụng Thay vào đó hãy dùng StyleSheet để tạo reference cho các

style và khai báo các hàm nếu có

- Cân nhắc sử dụng useMemo, useCallback và React.memo cho tối ưu rerender:

+ useMemo: memoize giá trị của các hàm tính toán phức tạp.

+ useCallback: memoize function thay vì value như useMemo.

+ React.memo hay PureComponent: nếu component có props không thay

đổi qua mỗi lần component cha rerender, thì component được bọc trong

React.memo sẽ không bị rerender.

- Sử dụng nativeDriver khi dùng thư viện Animated: sử dụng thư viện

Animated là cách tiếp cận phổ biến nhất cho animation trong React Native useNativeDriver sẽ xử lý animation độc lập so với thread Javascript chính của

ứng dụng, giúp cho chúng ta giữ được sự mượt mà, tối ưu của khung hình,animation

- Sử dụng Hermes: Hermes là một Javascript engine được Facebook phát triển

vào năm 2019 Engine này giúp cải thiện hiệu suất ứng dụng, giảm tiêu thụ bộnhớ, giảm dung lượng app, cải thiện thời gian khởi động app Hermes có thể

được bật/tắt thông qua việc set trường enableHermes true/false trong hai file

android/app/build.gradle, Podfile tương ứng Android và iOS.

- Loại bỏ các thư viện không sử sung cũng như các tính năng dư thừa: mỗi thưviện hay mỗi tab, animation, navigation đều ảnh hưởng ít, nhiều đến ứng dụng.

Ta chỉ nên giữ lại những thứ cần thiết và quan trọng

- Luôn có các hàm dọn dẹp (clean up function) cho các useEffect hay các hàmsubscibe (eventListener) nếu có: Tránh tình trạng tràn bộ nhớ và tối ưu hiệusuất ứng dụng

 Mở rộng:

- Responsive trong React Native:

+ Luôn set minWidth và maxWidth: Điều này giúp cover tốt được cácmàn hình cỡ lớn

+ Dimension API: hoạt động tương tự như Media query trong CSS Về

cơ bản thì nó cung cấp width và height chính xác của màn hình, sau đó tínhtoán để nó luôn co giãn được theo từng kích thước màn hình Đồng thời cũng

có thể sử dụng dạng inline trong style

Hình 2.3 Ví dụ Dimension API trong React Native + Platform Module: React Native cung cấp một Platform module có sẵn,

giúp detetc được nền tảng của thiết bị đang chạy (iOS, Android, Web,…) Sẽhữu ích cần style riêng cho từng nền tảng (thay đổi nhỏ)

xoay chiều của thiết bị để thích ứng UI cho phù hợp, đặc biệt là thiết bị di động.React Native không cung cấp module có sẵn để phục vụ việc xử lý orientation,tuy nhiên ta vẫn có thể tiếp cận được thông qua các cách như: module open-source từ cộng đồng (react-native-orientation), hay qua chính Dimension APInhư sau:

Hình 2.4 Ví dụ detect thiết bị xoay chiều qua Dimension API

- Xử lý UX cơ bản và thiết yếu:

+ Detect tình trạng của kết nối internet: Xử lý trong ứng dụng khi thiết bị

của người dùng mất kết nối/ kết nối internet thông qua module netinfo từ cộng đồng.

react-native-+ Xử lý sự kiện onPress của button: Nếu button có chức năng lớn, cần thời gian để xử lý khi được nhấn, ta cần có cơ chế chặn người dùng liên tục spam nhấn nút Điều này có thể thực hiện qua việc tắt/mở (enable) trạng thái của nút, và hiển thị UI loading khi đang xử lý

+ UI loading cho các component cần thời gian để fetch data, mount UI.+ Chú ý về màn hình ở các thiết bị iOS do chúng khác với Android ở phần tai thỏ (notch)

- Build iOs và publish lên Apple TestFlight:

Sử dụng Apple Xcode trên hệ điều hành MacOS để build ứng dụngReact Native trên máy ảo iOS Và chỉ trên MacOS ta mới có thể config, setupcác thông số, cài đặt để publish lên TestFlight (ứng dụng để preview và test chocác thiết bị iOS) hay release lên AppStore

Thực hiện:

- Làm các bài thực hành, kiểm tra về kiến thức đã học

- Tìm kiếm các tài liệu trên 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ủa công ty

Kết quả:

- Nâng cao kiến thức, kỹ năng lập trình với framework React Native

- Có được những kiến thức quan trọng cho việc lập trình mobile sau này

- Ngoài ra còn được biết thêm một số quy tắc trong việc viết code sao chođúng chuẩn, dễ đọc, dễ hiểu và hiệu quả

2.2.3 Tìm hiểu blockchain và Web3

Thời gian: 5 ngày (1 tuần)

Nội dung: Các kiến thức cơ bản về blockchain và Web3.

 Blockchain:

* Khái niệm:

Blockchain là một cơ sở dữ liệu được chia sẻ, phân tán và vĩnh viễn đượcchia sẻ giữa nhiều node trên mạng máy tính Blockchain ghi lại dữ liệu theocách mà việc sửa đổi hay hack hệ thống là không thể xảy ra

Như tên gọi, blockchain lưu lại dữ liệu dưới dạng chuỗi các khối liên kếtnhau Mỗi khối chứa các nhóm giao dịch (transactions), có thể truyền các assetstrong mạng lưới hoặc cập nhật thông tin trong hệ thống

* Block (khối):

Vì có hàng triệu giao dịch nên các giao dịch được nhóm lại với nhau thànhcác khối Các khối này được liên kết với nhau theo cách có thể kiểm chứngbằng mật mã để có thể dễ dàng truy vết Trạng thái hiện tại của mạng có thểđược tính toán lại bất cứ lúc nào bằng cách bắt đầu từ khối gốc và cập nhậttrạng thái theo thông tin của khối tiếp theo cho đến bây giờ