Báo cáo thực tập lập trình ứng dụng di dộng với REACT NATIVE

ĐẠI HỌC QUỐC GIA THÀNH PHỐ 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 VỚI REACT NATIVE

Cơng ty thực tập : Công ty TNHH CoderSchool
Người phụ trách : Nguyễn Thanh Tài Nhân
Thực tập sinh : Nguyễn Phi Khang

TP. Hồ Chí Minh, 28 tháng 07 năm 2020


LỜI MỞ ĐẦU
Sự phát triển về CNTT ngày càng khủng khiếp. Những công nghệ mới đã và
đang làm thay đổi thế giới một cách nhanh chóng. Từ lúc mới ra đời cho đến nay
smartphone có những bước tiến mạnh mẽ vì vậy mà những cơng nghệ kèm theo cũng
địi hỏi những nhà phát triển phần mềm viết ra nhiều phần mềm hơn để có thể sử dụng
được trên smartphone chứ khơng cịn đơn thuần là những ứng dụng nhắn tin gọi điện
thơng thường.
Kèm theo đó là số lượng người dùng di động (smartphone) tăng lên chóng mặt.
Cụ thể theo những báo cáo mới đây mà các nhà khoa học đã thống kê thì thời gian
dành cho smartphone trung bình qua khảo sát hàng tỉ người thì rơi vào khoảng 3 tiếng
một ngày.
Đồng thời giá smartphone đang ngày càng rẻ qua từng năm, vì các dịng
smartphone giá rẻ đến từ các quốc gia phát triển và đông dân như Ấn Độ, Trung Quốc.
Cùng với đó cơng nghệ sản xuất càng dần hoàn thiện hơn kéo giá smartphone xuống
tới các tầng lớp phổ thơng của xã hội. Từ đó smartphone trở thành một thiết bị có thể
được sở hữu dễ dàng.
Nhiều cơng ty sản xuất phần mềm trên di động hoặc những cơng ty lớn nhìn

thấy đây là mảnh đất màu mỡ và tiềm năng phát triển của nó rất lớn. Đồng thời dựa
theo số liệu thống kê như trên thì bắt đầu người dùng đã chịu chi tiền cho smartphone
nhiều hơn, số lượng người dùng chịu bỏ tiền ra mua ứng dụng để sử dụng trên
smartphone cũng tăng lên theo từng năm. Do đó kéo theo nhu cầu về cơng việc liên
quan đến mảng smartphone nói chung và lập trình mobile nói riêng tăng lên chóng
mặt. Đưa ra những tiềm năng và thử thách dành cho những ai muốn phát triển theo
hướng lập trình ứng dụng di động. Nhu cầu dạy và học lập trình ứng dụng di động
đang dần trở thành xu hướng của xã hội hiện nay.
Với mong muốn giải quyết được vấn đề phân hoá nền tảng trên thiết bị di động
cũng với đó là rút ngắn thời gian cũng như nguồn lực để làm ra ứng dụng phù hợp với
nhu cầu của cuộc sống, React Native đã được ra đời vào năm 2015 với sự hỗ trợ từ
Facebook

2


Trong thời gian thực tập tại CoderSchool, em đã được tiếp cận và tham gia trực
tiếp vào các dự án thực tế, được đóng góp vào những tính năng của dự án mà mình
tham gia vể cả mặt kĩ thuật lẫn ý tưởng, đó là những trải nghiệm hết sức thú vị và mới
mẻ đối với em.

3


LỜI CÁM ƠN
Trân trọng gửi lời cảm ơn Công ty TNHH Coderschool đã tạo điều kiện cho em có
cơ hội được thực tập tại công ty.
Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của nhóm trainer,
nhóm thực tập chúng em đã tiếp thu được những kiến thức quan trọng để có thể làm được
một ứng dụng điện thoại. Chân thành cảm ơn các anh chị trong nhóm trainer đã bỏ ra nhiều

thời gian,cơng sức để hướng dẫn chúng em hoàn thành đợt thực tập này.
Đặc biệt em xin gửi lời cảm ơn và lòng biết ơn sâu sắc đến anh Nhân và anh Tân,
các anh đã hướng dẫn, giúp đỡ cho em tận tình cả những khó khăn trong cơng việc và
những khó khăn về việc làm quen với mơi trường nhóm. Hỗ trợ em rất nhiều về các vấn đề
cách làm việc trong quá trình làm ứng dụng điện thoại. Anh cũng chỉ dẫn em về cách làm
báo cáo, lên kế hoạch, những kỹ năng không thể thiếu, training cho em những kiến thức
quan trọng để có thể làm ra một sản phẩm trong suốt thời gian qua.
Và 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.

4


NHẬN XÉT CỦA GIẢNG VIÊN
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................

.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................

5


Mục Lục
LỜI MỞ ĐẦU......................................................................................................................................2
LỜI CÁM ƠN......................................................................................................................................4

CHƯƠNG 1 : GIỚI THIỆU CƠNG TY THỰC TẬP..................................................................7
CHƯƠNG 2 : NỘI DUNG THỰC TẬP......................................................................................8
2.1

Tìm hiểu cơng ty và chương trình thực tập.............................................................................8

2.2

Nghiên cứu kĩ thuật.................................................................................................................8

2.2.1
2.2.2
2.2.3

Git / Git workflow.................................................................................................................................. 8
React Native.......................................................................................................................................... 9
Redux.................................................................................................................................................. 11

2.3

Thực hiện Project..................................................................................................................13

2.4

Lịch làm việc..........................................................................................................................13

CHƯƠNG 3 : CHI TIẾT ỨNG DỤNG....................................................................................14
3.1

Giới thiệu về ứng dụng và công việc thực hiện.....................................................................14

3.2

Một số giao diện của ứng dụng..............................................................................................14

TÀI LIỆU THAM KHẢO :......................................................................................................18
TỔNG KẾT :...........................................................................................................................18

6


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

Cơng ty TNHH Coderschool được thành lập vào năm 2015 bởi Mr. Charles Lee CEO & Founder of CoderSchool, là công ty đào tạo và phát triển phần mềm. Sau 5 năm
thành lập, đến nay Coderschool đã khẳng định được vị thế trong lĩnh vực này.
Hiện tại cơng ty có một cơ sở tại Thành phố Hồ Chí Minh, nhắm đến những khóa
trainning đào tạo Full stack web development, Machine Learning, Data Science…

7


CHƯƠNG 2 : NỘI DUNG THỰC TẬP
Đợt thực tập với chủ đề “Lập trình ứng dụng đa nền tảng với React Native” chương
trình do Developer Circles từ Facebook hợp tác cùng CoderSchool nhằm mục đích giúp
sinh viên thực tập được đào tạo tồn diện về lập trình ứng dụng trên React Native, đồng
thời rèn luyện những kỹ năng mềm như làm việc nhóm, thuyết trình, 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 trong một môi trường phát triển
ứng dụng chuyên nghiệp.

2.1 Tìm hiểu cơng ty và chương trình thực tập
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, q 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 và chương trình Developer Circles Vietnam Innovation Challenge.
Ngồ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, q 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.2 Nghiên cứu kĩ thuật
2.2.1 Git / Git workflow
Nội dung :
- Được giới thiệu chi tiết về Git
- Repository: nơi để lưu trữ, là thư mục chứa tất cả mã nguồn, phiên
bản.
- Head: một con trỏ chỉ vô mã nguồn mới nhất bạn đang làm việc.
- Add: giúp Git biết được tập tin này cần được theo dõi.
- Commit: yêu cầu Git lưu lại trạng thái của repo hiện tại.
- Remote: nơi chứa repositories nhưng khơng khơng nằm trên máy của
mình mà nằm ở đâu đó khác (như Github, Gitlab …).
- Pull: giúp lấy mã nguồn từ remote về.
- Push: tải mã nguồn lên remote.
- Merge: kết hợp 2 phiên bản khác nhau của mã nguồn lại thành một.
- Status: hiển thị thông tin về tình trạng hiện tại của repo.

8


Ngoài những cơ bản mà người dùng Git nào cũng biết, em cịn được
biết thêm trong q trình thực tập ở công ty các lệnh khác như:
- Git rebase: quá trình gắn một nhánh vào nhánh gốc.
- Gitlog: ghi lại những thao tác xảy ra vởi repo.
- Git branch: phân nhánh để làm việc với Git.
Và để phối hợp nhịp nhàng giữa các thành viên với nhau, công ty sử
dụng git workflow.
Kết quả :

- Nắm được cơ bản về Git
- Biết được cách sử dụng và áp dụng vào công việc

2.2.2 React Native
Nội dung :
React Native là gì?
React Native được phát triển bởi Facebook với mục đính ban đầu là áp dụng
vào mạng xã hội lớn nhất hành tinh: Facebook. Do đặc tính cơng nghệ của mạng xã
hội, Facebook cần phải tạo ra nền tảng phát triển ứng dụng di động đa nền tảng có
hiệu năng khơng thua kém so với ứng dụng được phát triển độc lập cho từng nền
tảng. React Native hiện tại chỉ hỗ trợ phát triển ứng dụng di động hệ điều hành
Android và iOS, ít hơn so với Ionic (Android, iOS, Windows Phone). React Native
chính thức trở thành mã nguồn mở vào tháng 3 năm 2015. Cho đến nay, React
Native được áp dụng trong nhiều ứng dụng của ta và cả nước ngồi.
React Native có gì hay?
React Native là một framework do cơng ty cơng nghệ nổi tiếng Facebook
phát triển nhằm mục đích giải quyết bài tốn hiệu năng của Hybrid và bài tốn chi
phí khi mà phải viết nhiều loại ngôn ngữ native cho từng nền tảng di động. Chúng ta
sẽ build được ứng dụng Native, và chúng ta cũng có thể build ứng dụng đó một cách
đa nền tảng (multi-platform) chứ khơng phải là một “mobile web app”, không phải
là “HTML5 app”, và cũng không phải là một “hybrid app” hay cũng không chỉ
build trên iOS hay Android mà chúng ta build và chạy được cả hai hệ sinh thái. Một
điểm hay ho nữa mà mình có đề cập là giảm chi phí recompile của Native bằng cách
sử dụng Hot-Loading tức là bạn không cần phải build lại ứng dụng từ đầu nên việc
chỉnh sửa diễn ra rất nhanh chóng. Giúp cho lập trình viên có thể thấy được những

9


chỉnh sửa của họ một cách nhanh chóng trực quan, khơng cịn phải bỏ q nhiều

thời gian trong việc build và run ứng dụng nữa.
React Native tạo ra ứng dụng native chứ không phải hybrid app như ionic,...
Với 100% Native UI, React Native tạo nên sự “mượt mà” trong việc render UI và
xóa nhịa khoảng cách về hiệu năng giữa ứng dụng đa nền tảng so với ứng dụng độc
lập nền tảng.
Với phương châm “Học một lần sử dụng mọi nơi”, React Native và React JS
sẽ là bộ đôi lý tưởng cho lập trình viên fullstack. Đừng chần chờ gì nữa, Javascript
sẽ là mảnh đất màu mỡ chờ bạn khai phá với những cơng nghệ thời thượng, đó là
một thực tế đã và đang đúng!

Ưu điểm:
•

Hiệu quả về mặt thời gian khi mà bạn muốn phát triển một ứng dụng nhanh
chóng.

•

Hiệu năng tương đối ổn định.

•

Cộng đồng phát triển mạnh.

•

Tiết kiệm tiền.

•

Team phát triển nhỏ.

•

Ứng dụng tin cậy và ổn định.

•

Xây dựng cho nhiều hệ điều hành khác nhau với ít native code nhất.

•

Trải nghiệm người dùng tốt hơn là hybrid app.

Nhược điểm:
•

Vẫn địi hỏi native code.

•

Hiệu năng sẽ thấp hơn với app thuần native code.

•

Bảo mật khơng cao do dựa trên JS.

•

Quản lý bộ nhớ.

10


•

Khả năng tùy biến cũng không thực sự tốt đối với một vài module

Giới thiệu về JSX:
JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript.
Đặc điểm: Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã
Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã
tương đương viết trực tiếp bằng Javascript. Safer: an toàn hơn. Ngược với
Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy,
giống như Java, C++. Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên
dịch. Ngồi ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ
dàng hơn. JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình
viên Javascripts có thể sử dụng (tham khảo tại />
Giới thiệu về Components
React được xây dựng xung quanh các component, chứ không dùng template
như các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những
thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều
nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có
thể chứa thành phần khác. Mỗi component trong React có một trạng thái riêng, có
thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của
trạng thái. Mọi thứ React đều là component. Chúng giúp bảo trì mã code khi làm
việc với các dự án lớn. Một react component đơn giản chỉ cần một method render.
Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo.

Props và State:
Props: giúp các component tương tác với nhau, component nhận input gọi là

props, và trả thuộc tính mơ tả những gì component con sẽ render. Prop là bất biến.
State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời
render lại để cập nhật UI.
Kết quả :
 Nâng cao kỹ năng lập trình với React-Native

11


 Có được những kiến thức quan trọng cho việc lập trình app mobile
sau này.
 Ngồ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.
2.2.3 Redux
Nội dung :
Redux js là một thư viện Javascript giúp tạo ra thành một lớp quản lý trạng
thái của ứng dụng.
Redux được xây dựng dựa trên nền tảng tư tưởng của ngôn ngữ Elm và kiến
trúc Flux do Facebook giới thiệu. Do vậy Redux thường là bộ đơi kết hợp hồn hảo
với React Kiến trúc của Redux

ACTION: Là một đối tượng thuần thúy được tạo ra để lưu trữ thông tin liên
quan tới sự kiện của người dùng (Nhấn chuột trên giao diện,..), nó bao gồm các
thông tin như: Kiểu hành động, xẩy ra lúc nào, ở đâu, tọa độ, mục đính để thay đổi
state nào
12


STORE: Quản lý trạng thái của ứng dụng, và có hàm dispatch(action).
MIDDLEWARE: (Phần mềm trung gian) Cung cấp một cách để tương tác với

các đối tượng Action được gửi đến STORE trước khi chúng được gửi tiếp đến
REDUCER. Tại Middleware bạn có thể thực hiện các nhiệm vụ như ghi lại nhật ký,
báo cáo lỗi, tạo các "yêu cầu không đồng bộ" (asynchronous requests), hoặc phân
phát (dispatch) các action mới,...
REDUCER: (Bộ biến đổi) Là một hàm thuần thúy để trả về một trạng thái mới
từ trạng thái ban đầu. Chú ý: REDUCUER không thay đổi trạng thái của ứng dụng,
thay vào đó nó sẽ tạo ra một bản sao chép của trang thái ban đầu, và sửa đổi nó để có
một trạng thái mới.

Kết quả :
- Nắm được và áp dụng Redux vào project

2.3 Thực hiện Project
Sau hơn một tháng được training và thực hành, thực tập sinh đã nắm được
những kiến thực cơ bản và nâng cao về React native. Mentor đã hướng dẫn thực tập
sinh áp dụng những kiến thức đã học để thực hiện một project ứng dụng đa nền tảng
với React Native.
Chi tiết đồ án sẽ được nói ở phần sau.

2.4 Lịch làm việc
Tuần

1

Cơng việc

•

Người
hướng

dẫn

Tìm hiểu về cơng ty, cách tổ Anh Nhân

chức của cơng ty.
•

Làm quen với các cơng cụ làm

việc trong cơng ty.
•

Tìm hiểu về Html & Javascript

13

Mức
độ
hoàn
thành
100%

Nhận xét của
người hướng dẫn


2→6

 Tìm hiểu về ReactNative
 Tìm hiểu về Redux

Anh Tân

100%

Anh Tân

95%

Kết quả tìm hiểu:
/>tNative_CoderSchool

7 → 10

• Thực hiện Final Project
/>do_Recommender_CS

CHƯƠNG 3 : CHI TIẾT ỨNG DỤNG
3.1 Giới thiệu về ứng dụng và công việc thực hiện
 Giới thiệu
Đây là một ứng dụng thương mại điện tử lấy ý tưởng từ ứng dụng SENDO
với các chức năng cơ bản mà một ứng dụng bán hàng cần có.
 Giao diện design của Product Manager

14


 Công việc thực hiện
o Xây dựng giao diện theo design của Product Manager
o Tạo ra các components cho màn hình một cách hợp lý, dễ cho việc tái sử

dụng ở những chỗ khác.
o Gọi api webservice để đổ dữ liệu vào giao diện và quản lý dữ liệu lưu trữ
trên app.
o Xử lý sự kiện cơ bản.
o Quản lý điều hướng chuyển trang.
 Kết quả đạt được
-

Hiểu được ưu nhược điểm của các công nghệ
15


-

Cách project thực tế được implement.

3.2 Một số giao diện của ứng dụng

16


\

17


18


TÀI LIỆU THAM KHẢO :

 For React-Native:
/> />
TỔNG KẾT :
Như vậy, chỉ trong vòng hơn hai tháng ngắn ngủi dù chưa hoàn thiện được hết ứng
dụng di dộng. Ứng dụng đã có khá đầy đủ các tính năng đã đề ra ban đầu. Do thời gian có
hạn nên tính năng úng dụng còn đơn giản. Nhưng do ứng dụng phát triển theo framework
có tính kế thừa nên sau này khi có thời gian sẽ có thể phát triển lên mức cao hơn.
Xin chân thành cảm ơn đến các anh chị trong nhóm dự án, cũng như các anh chị
trong đơn vị đào tạo thực nghiệm đã giúp đỡ, hỗ trợ để em có thể hồn thành các nhiệm vụ
được giao trong thời gian thực tập ở công ty.

19