Báo cáo thực tập lập trình ứng dụng di động ios bằng react native và expo

Trong suốt quãng thời gian thực tập, nhờ vào sự hướng dẫn tận tình của các anh chị tại công ty, em đã có cơ hội để theo dõi, học tập và trau dồi kinh nghiệm cho kiến thức chuyên ngànhcủa

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 DI ĐỘNG IOS BẰNG REACT NATIVE VÀ EXPO

Công ty thực

tập:

Công ty TNHH AIOZ

Người phụ trách: Lê Quang Phát

Tuyền

TP Hồ Chí Minh, tháng 06 năm 2023

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH 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 DI ĐỘNG IOS BẰNG REACT NATIVE VÀ EXPO

Công ty thực tập:

Công ty TNHH AIOZ

Người phụ trách: Lê Quang Phát

Tuyền

TP Hồ Chí Minh, tháng 06 năm 2023

LỜI MỞ ĐẦU

Hiện nay, với sự phát triển vượt bậc và mạnh mẽ của ngành côngnghệ trên thế giới, việc điện thoại di động thông minh (gọi tắt làsmartphone) ngày trở thành một trong những vật dụng không thể thiếutrong thời đại ngày nay

Kèm theo sự phát triển của smartphone đó chính là sự gia tăng chóng mặtcủa các ứng dụng di động để đáp ứng được nhu cầu sử dụng của ngườidùng smartphone trên toàn cầu Những ứng dụng di động ngày càng pháttriển không ngừng, hỗ trợ người dùng với đủ mọi mặt trong mọi lĩnh vựcnhư giáo dục, giải trí, thể thao, xã hội,… Những ứng dụng này được xâydựng với mục đính chính là giúp cung cấp cho con người những công cụhữu ích, giải quyết hay hỗ trợ các vấn đề trong cuộc sống

Sau những năm học tập trên ghế của nhà trường, em đã có quyết địnhmong muốn được trải nghiệm, làm giàu kinh nghiệm của bản thân và cũngnhư có cơ hội được tham gia các dự án xây dựng ứng dụng trong một môitrường chuyên nghiệp nên em đã có dự định quyết định thực tập trongthời gian này Và sự lựa chọn của em đó chính là công ty AIOZ, một môitrường chuyên nghiệp, hiện đại và thân thiện, đã cho em cơ hội để thựctập vị trí Frontend

LỜI CẢM ƠN

Em xin trân trọng gửi lời cảm ơn đến các anh chị tại công ty AIOZ đã cho em cơ hội

để thực tập tại công ty cũng như đóng góp vào quá trình thực hiện các dự án trong môi trườngthực tế đầy tính chuyên nghiệp và hiện đại

Trong suốt quãng thời gian thực tập, nhờ vào sự hướng dẫn tận tình của các anh chị tại công

ty, em đã có cơ hội để theo dõi, học tập và trau dồi kinh nghiệm cho kiến thức chuyên ngànhcủa Công nghệ phần mềm và cũng như trải nghiệm làm việc tại một công ty chuyên về côngnghệ Tuy vẫn còn những thiếu sót trong quá trình học tập, em vẫn đang và sẽ tiếp tục cốgắng nỗ lực để ngày càng trau dồi bản thân mình hơn

Ngoài ra, em cũng xin chân thành cảm ơn các thầy trong khoa Công nghệphần mềm đã nhiệt tình hỗ trợ, trang bị cho em những kiến thức quý báucho em trong suốt quá trình học tập để giúp em thực hiện báo cáo này

Em chân thành cảm ơn!

TP HCM, tháng 06 năm 2023

Phạm Hớn Tuyền

NHẬN XÉT CỦA KHOA

MỤC LỤC LỜI MỞ ĐẦU 1

LỜI CẢM ƠN 2

NHẬN XÉT CỦA KHOA 3

MỤC LỤC 4

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

1 Giới thiệu 5

2 Sản phẩm công ty 5

3 Lịch làm việc khi thực tập tại công ty 7

4 Mô tả công việc 7

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

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

2 Nghiên cứu kỹ thuật 8

2.1 Làm quen với các công cụ làm việc 8

2.2 Tìm hiểu về React Native và kiến trúc trong React Native 8

2.3 Tìm hiểu về Expo 9

2.4 Tìm hiểu về GL React & GLSL 9

3 Thực hiện dự án cá nhân 10

3.1 Công nghệ 10

3.2 Mô tả dự án 10

3.3 Kết quả 12

4 Lịch làm việc 12

CHƯƠNG 3: TỔNG KẾT 14

1 Điểm mạnh 14

2 Điểm yếu 14

3 Chuẩn đạt được 14

TÀI LIỆU THAM KHẢO 16

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

Hình logo của AIOZ

AIOZ là một công ty có trụ sở tại Singapore Mục tiêu của công ty làgiải quyết các vấn đề phức tạp trong đời thực bằng cách áp dụng các côngnghệ tiên tiến gần đây Blockchain và Trí tuệ nhân tạo (AI)

Về mảng AI, công ty AIOZ tiên phong trong việc phát triển các thuậttoán tối ưu hóa, mô hình học máy và các giải pháp AI đã được kiểm chứngkhoa học Ngoài ra, một trong những sản phẩm Blockchain nổi bật củacông ty, đó chính là AIOZ Network (Mạng AIOZ), là cơ sở hạ tầng Web3Media Blockchain, sử dụng tài nguyên dự phòng của tất cả các máy tínhtrên toàn thế giới để xây dựng một dCDN hiệu quả với tốc độ phân phối tối

ưu, chi phí thấp nhất và chất lượng phát trực tuyến cao nhất

AIOZ Network (aioz.network)

AIOZ Network là một chuỗi khối Lớp 1 được xây dựng trong hệ sinh tháiCosmos và có khả năng tương thích với EVM AIOZ Network mang đến khảnăng tương tác chưa từng có, phí giao dịch thấp, thông lượng nhanh chóng

và tính hữu hạn tức thì

AIOZ Network kết nối mạng toàn cầu gồm các nút do người dùng điềuhành để tạo dCDN Bằng cách khai thác khả năng tính toán không hoạtđộng trên toàn thế giới, nó trao quyền cho nền kinh tế phi tập trung mớinổi

AIOZ Network dCDN cung cấp nội dung nhanh hơn đồng thời loại bỏ ràocản giữa người sáng tạo và người ủng hộ họ Cho dù đó là văn bản, âmthanh, video hay trò chơi, nội dung được ghi lại hay phát trực tiếp, AR hay

VR AIOZ Network dCDN cung cấp năng lượng cho cơ sở hạ tầng sẽ kíchhoạt kỷ nguyên tiếp theo của phần mềm truyền thông

AIOZ Beetle ( beetle.aioz.io )

Là một đội nhóm được thành lập bởi công ty AIOZ trong thời đại COVID-19,nhằm với mục đích mang đến những robot tự hành hữu ích, thực hiệnnhiều tác vụ phức tạp Trong đó có:

 BeetleBot-H là robot có thể tự hành, giao hàng theo yêu cầu và

theo lộ trình được thiết lập Robot cũng có thể thực hiện cuộc gọivideo hỗ trợ khám chữa bệnh, giám sát từ xa, phun xịt khử khuẩn,

hỗ trợ phun thuốc khử khuẩn khu vực điều trị bệnh nhân

 BeetleBot-PV là một sản phẩm robot giúp giám sát, nhắc nhở và

cảnh báo người dân có đeo khẩu trang hay thực hiện đảm bảo giãncách an toàn, có tụ tập đông người hay không

3 Lịch làm việc khi thực tập tại công ty

 Thời gian làm việc: bắt đầu từ ngày 18/09/2022 và kết thúc vào ngày18/12/2022

 Thời gian thực tập trong tuần (làm việc part-time): thứ hai, thứ tư vàthứ sáu

 Giờ làm việc: bắt đầu từ 8h30 cho đến 17h30

 Thời gian nghỉ trưa: khoảng 1 tiếng 30 (từ 12h – 1h30)

4 Mô tả công việc

Ví trị thực tập: Kỹ sư phát triển phần mềm Frontend (Frontend Engineer)

Mô tả công việc thực tập: em thực tập với vị trí Frontend Engineer cho bộ phận AI tại

công ty AIOZ Nội dụng thực tập chính của em sẽ bao gồm 2 giai đoạn chính: nghiên cứucông nghệ và phát triển úng dụng

 Trong phần nghiên cứu, em sẽ tìm hiểu về đề tài thực tập đã đượcgiao do bởi anh Phát hướng dẫn Trong đó sẽ bao gồm: tìm hiểu cácvấn đề trong đề tài, trao đổi với anh Phát để có thể được giải đápcác thắc mắc, đề xuất một số ý kiến liên quan và đánh giá tính khảthi của chúng, nghiên cứu các công nghệ sẽ được sử dụng trong dự

án thực tập, lập kế hoạch cụ thể cho giai đoạn phát triển ứng dụng

và phác thảo bản mẫu (prototype) của ứng dụng

 Trong phát triển ứng dụng, em sẽ tiến hành thực hiện việc xây dựng

dự án dựa theo kế hoạch cụ thể đã đề xuất ra Trong giai đoạn này,

em sẽ thực hiện việc xây dựng mobile application dựa theo các yêucầu trong kế hoạch cụ thể đề cập trên, bao gồm: xây dựng phầngiao diện theo bản phác thảo đã được duyệt bởi anh Phát, phát triểncác tính năng dựa theo yêu cầu, ghi lại các báo cáo tiến độ và tối ưucác tính năng

Mô tả quy trình làm việc hằng ngày: trước khi bắt đầu công việc,

em sẽ báo cáo tiến độ hiện tại của công việc trong ngày với anh Phát, traođổi một số những vấn đề trong quá trình thực hiện dự án Trước khi kếtthúc ngày làm việc, em sẽ tổng hợp lại những gì đã làm và gửi một bảnbáo cáo để anh Phát đánh giá Vào mỗi cuối tuần, em sẽ có buổi meetingvới anh Phát để tổng hợp các việc đã làm trong tuần, đánh giá tiến độ,chia sẻ kinh nghiệm và các hướng giải quyết vấn đề

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

1 Tìm hiểu công ty và các kỹ 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, thời gian làm việc, các nội quy cần phải tuânthủ trong công ty, phúc lợi, các quyền lợi và văn hóa làm việc cầnbiết

 Được hướng dẫn về quy trình làm việc của công ty, quy trình pháttriển phần mềm, mô tả về công việc sẽ làm trong ngày (nhận côngviệc, thực hiện và báo cáo công việc)

 Được cung cấp tài khoản làm việc trong nội bộ công ty, các cổngliên lạc làm việc trong nội bộ và quyền truy cập các tài nguyêntrong công ty

Kết quả: tìm hiểu về cơ cấu làm việc, nội quy tuân thủ, quy trình phát

triển phần mềm và các công việc làm trong hằng ngày

2 Nghiên cứu kỹ thuật

2.1 Làm quen với các công cụ làm việc

Thời gian: 1 ngày

Nội dung:

Tìm hiểu các công cụ sẽ được sử dụng trong quá trình làm việc tại công

ty Sau đó sẽ thiết lập các công cụ theo tính cá nhân để thuận tiện trongkhi việc làm tại văn phòng:

 Gitlab: GitLab là hệ thống self-hosted mã nguồn mở dựa trên hệ

thống máy chủ Git dùng để quản lý mã nguồn của các nhà phát triểnứng dụng GitLab cung cấp giải pháp server một cách hoàn hảo vànhận được sự đánh giá cao từ cộng đồng

 Visual Studio Code: trình soạn thảo văn bản gồm nhiều ưu điểm nổi

bật như đơn giản, gọn nhẹ, dễ sử dụng

 Slack: ứng dụng giúp cho việc giao tiếp và trao đổi giữa các thành

viên trong nhóm

 Expo: là một công cụ mã nguồn mở và miễn phí được xây dựng xung

quanh React Native để giúp lập trình viên xây dựng các dự án iOS vàAndroid nhanh chóng bằng JavaScript và React

 Figma: ứng dụng miễn phí giúp xây dựng bản mẫu (prototype) của

ứng dụng một cách nhanh chóng, có thể chia sẻ giữa những thànhviên với nhau Figma còn cung cấp tài nguyên cho mọi khâu của quá

trình tổ chức thiết kế, từ brainstorm ý tưởng concept cho đến khởi tạocode từ mẫu thiết kế.

Kết quả: làm quen và thiết lập các phần mềm để hỗ trợ trong việc làm

2.2 Tìm hiểu về React Native và kiến trúc trong React Native Thời gian: 3 ngày

Tìm hiểu về kiến trúc cũ và mới cho React Native, sự khác biệt và cáchvận hành của chúng

 Fabric: là hệ thống render mới của React Native thay thế bộ render

cũ Các hoạt động chính của Fabric là thống nhất nhiều logic renderhơn trong C++, cải thiện khả năng tương tác với các nền tảng

 JSI: là một phương thức thay thế cho Bridge (từ kiến trúc cũ) để tạo

sự kết nối cho JS Thread và Native Thread, cải thiện mức độ hiệunăng trong việc xử lý logic và tương thích với nhiều JavascriptEngines khác

 Turbo Modules: là một bộ phận giúp cho các thành phần Native(Bluetooth, Camera, Location, …) sẽ được lazy-load thay vì phảiđược khởi tạo ngay trước khi ap khởi động, giúp giảm dung lượng vàtăng tốc khởi động của app

 Threading Model bao gồm 3 threads: UI Thread, Javascript Thread vàBackground Thread

Kết quả: Hiểu về các khái niệm cốt lõi trong React Native và cách thức

xây dựng ứng dụng React Native

2.3 Tìm hiểu về Expo

Thời gian: 1 ngày

Nội dung:

Tìm hiểu về công cụ Expo và cách xây dựng app React Native bằngcông cụ Expo.

 Expo là một công cụ mã nguồn mở và miễn phí được dùng để xâydựng xung quanh React Native để giúp ta xây dựng các dự án iOS

và Android bằng JavaScript và React

 Với Expo, các nhà phát triển có thể tạo ra các ứng dụng ReactNative mà không gặp bất kỳ sự phiền toái nào giống như khi cài đặt

và cấu hình các phần mềm phụ trợ như Android Studio, Xcode hoặctất cả các công cụ khác cần thiết để phát triển và chạy ứng dụngReact Native Gói expo có thể được cài đặt trong mọi ứng dụngReact Native

Kết quả: Hiểu về công cụ Expo và khởi tạo dự án app React Native

thông qua Expo

2.4 Tìm hiểu về GL React & GLSL

Thời gian: 1 ngày

 OpenGL Shading Language (GLSL) là ngôn ngữ tô bóng cấp cao với

cú pháp dựa trên ngôn ngữ lập trình C Nó được tạo bởi OpenGL ARB(OpenGL Architecture Review Board) để cung cấp cho các nhà pháttriển khả năng kiểm soát trực tiếp hơn đối với đường ống đồ họa màkhông cần phải sử dụng ngôn ngữ hợp ngữ ARB hoặc ngôn ngữ dànhriêng cho phần cứng

Kết quả: Tìm hiểu và nghiên cứu về GL React và ngôn ngữ đổ bóng

GLSL

3 Thực hiện dự án cá nhân

Trong vòng 8 tuần kế tiếp, em được anh mentor Phát hướng dẫn xây dựng một ứng dụng mobile chuyên về chỉnh sửa ảnh và video trên nền tảng iOS Trong đó, ta có thể chụp lại các ảnh, hoặc dùng ảnh từ trong kho ảnh cá nhân của người dùng, để có thể tùy chỉnh sửa ảnh theo một số tiêu chí cụ thể

3.1 Công nghệ

 Figma

 React Native

Trong quá trình thực hiện project, em đã chia nhỏ ra thành nhiều giai đoạn để thực hiện:

3.2.1 Nghiên cứu

Trước khi tiến hành project, anh Phát đã có yêu cầu em nghiên cứu về các app có cùngtính năng trên thị trường để tham khảo và xem xét các luồng hoạt động của chúng Qua đó cóthể kế đến một số app chụp ảnh phổ biến như như B612, SNOW, Camera360, Ulike,ProCamera

Tiếp đến đó là em sẽ nghiên cứu và tìm hiểu việc xây dựng tính năng chỉnh sửa ảnh trực tiếp.Tính năng này có thể chia ra thành 3 phần: đọc dữ liệu ảnh, tương tác/chỉnh sửa ảnh và xuấtảnh mới

3.2.2 Thiết kế bản mẫu (Prototype)

Sau khi hoàn thành phần nghiên cứu, em sẽ chuyển sang việc thiết kế bản mẫu của appbằng công cụ Figma Bản thiết kế này sẽ cần chỉ rõ các tương tác về nút bấm, các luồngchuyển qua lại giữa các màn hình và tính năng chính của chúng

3.2.3 Xây dựng

Trong giai đoạn xây dựng này, em chia nhỏ thành các công việc khác nhau và hoàn thànhchúng trong thời gian đã dự tính Chúng bao gồm:

 Setup codebase

 Dựng UI cơ bản theo bản mẫu

 Tính năng chụp và lưu ảnh: đây là tập hợp các tính năng có liên quan đến việc chụp và lưulại ảnh vừa chụp Trong đó sẽ bao gồm như: đổi mặt camera (trước và sau), bật tắt đènFlash, chụp ảnh và lưu ảnh vào bộ nhớ

 Tính năng quay và lưu video: gồm các tính năng chuyên dùng cho việc quay và lưu lạivideo đã ghi hình Chúng bao gồm: khởi động quay, đếm thời gian quay video, lưu videovào bộ nhớ

 Tính năng xem các video và ảnh: khi người dùng chọn tính năng này, app sẽ mở ra bộ nhớkho lưu trữ ảnh video của người dùng

 Các tính năng chuyển động màn hỉnh khi chuyển đổi qua lại giữa các màn hình

Sau khi đã hoàn thành các tính năng cơ bản của ứng dụng, em tiến hành việc thử nghiệm

và thực hiện cài đặt các tính năng nâng cao về việc tương tác với ảnh và video, cụ thể là thayđổi trực tiếp lên các nguồn ảnh và video để tạo cho chúng có những hiệu ứng mới mẻ Cụ thể,

em đã dùng thư viện GL-React để xây dựng thành các components React để tạo một lớp layerlên trên nền các hình ảnh và video, có 2 tính năng lớn sử dụng các components này:

 Các tính năng chỉnh sửa ảnh: khi người dùng chọn xem ảnh từ kho bộ nhớ, người dùng cóthể tương tác với bức ảnh thông qua các lựa chọn có sẵn để thay đổi tấm ảnh của mình,bao gồm:

o Các Filters về màu sắc: đa dạng các màu Normal, Juno, Sepia, Grayscale, Gingham,Mayfair, Valencia, Night Vision, Warm và Cool (mặc định là Normal)

o Các Options về điều chỉnh hiệu ứng của ảnh: Contrast, Saturation, Brightness, Blur,Negative, Flyeye

o Stickers: cho phép người dùng có thể chèn các stickers lên ảnh tùy thích

 Tính năng quay video thông qua màn GL-React: khi người dùng chọn chuyển sangCamera GL, người dùng có thể quay video thông qua các Filters có sẵn (Normal, Juno,Sepia, Grayscale, Gingham, Mayfair, Valencia, Night Vision, Warm và Cool)

3.2.4 Sửa lỗi và Cải tiến

Sau khi đã hoàn thành các tính năng chính, em sẽ tiến hành cải thiện project thông quaviệc thêm một số tính năng hỗ trợ cho người dùng:

 Thông báo cho hành động vừa thực hiện (Toaster)

 Hoạt ảnh khi chuyển màn hình

 Intro khi khởi động app

Cuối cùng, em thực hiện việc tối ưu project thông qua việc sửa các lỗi liên quan về hiệu năng,lỗi giao diện và clean code

3.3 Kết quả

Sau khi hoàn thành dự án, em đã được cùng các anh chị trong nhóm cùng có một buổimeeting để demo cho phần sản phẩm app được xây dựng, review tổng toàn bộ quá trình làmviệc của nhóm, đánh giá công việc và đưa ra những lời nhận xét cho em Trong dự án, em đãđược học tập và nghiên cứu nhiều công nghệ mới thú vị và hữu ích trong việc xây dựng ứngdụng mobile:

 React Native

 Expo

 Figma

 Các thư viện hỗ trợ hữu ích GL-React, React Navigation

Không chỉ thế, em đã học tập rất nhiều kỹ năng mềm trong quy trình làm việc trong mộtcông ty mang tính chuyên nghiệp:

 Kỹ năng tìm hiểu và nghiên cứu về công nghệ

 Tầm quan trọng của việc quản lý source code và clean code khi trình bày ý tưởng

 Khả năng quản lý công việc thông qua việc lên kế hoạch trước cho cả dự án

 Cải thiện khả năng thuyết trình ý kiến cá nhân trước mọi người

 Các kiến thức thực tiễn về quy trình làm việc trong ngành Công nghệ phần mềm