Báo cáo thực tập lập trình REACT NATIVE

[Số trang]

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 REACT NATIVE

Cơng ty thực tập

: TEKMEDI JSC

Người phụ trách

: Nguyễn Thiện Tâm
Phan Vũ Ngọc

Thực tập sinh

: Lưu Hoàng Khang

Lưu Hoàng Khang


[Số trang]

TP. Hồ Chí Minh, 14 tháng 7 năm 2020

Lưu Hoàng Khang

[Số trang]

LỜI MỞ ĐẦU

Lưu Hoàng Khang


[Số trang]

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty TEKMEDI JSC đã 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 TechLead Nguyễn
Thiên Tâm , em đã tiếp thu được những kiến thức quan trọng để có thể làm được một ứng dụng
bằng framework React Native. Chân thành cảm ơn TechLead đã bỏ ra nhiều thời gian,công sức
để hướng dẫn em hoàn thành đợt thực tập này.
Đặc biệt cảm ơn anh Phan vũ Ngọc , đã training React native , hướng dẫn, giúp đỡ cho
em tận tình cả những khó khăn trong cơng việc, đến những khó khăn việc làm quen với môi
trường mới; cảm ơn anh Nguyễn Thiện Tâm đã training backend hỗ trợ em rất nhiều về các
vấn đề kỹ thuật backend RestAPI quá trình làm ứng dụng ; cảm ơn anh Lê Công Đăng CPO
công ti , đã 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.
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.
Lưu Hoàng Khang
TpHCM, ngày 14 tháng 7 năm 2020

Lưu Hoàng Khang

[Số trang]

NHẬN XÉT CỦA KHOA

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

Lưu Hoàng Khang


[Số trang]

MỤC LỤC

MỤC LỤC.......................................................................................................................... 1
Chương 1: Giới thiệu công ty thực tập..........................................................................2
1. Giới thiệu về công ty TEKMEDI JSC.....................................................................2
2. Sản phẩm của cơng ty..............................................................................................2
Chương 2: Nội dung thực tập.........................................................................................3
1.
2.
3.
4.

Tìm hiểu công ty và các kỹ năng cơ bản trong công ty...........................................3
Nghiên cứu kỹ thuật................................................................................................3
Thực hiện project....................................................................................................7
Lịch làm việc...........................................................................................................7

Chương 3: Chi tiết về project.........................................................................................9
1. Giới Thiệu về App khai báo y tế , và Ứng dụng hiện thị bênh nhân .......................9
2. Thực hiện............................................................................................................... 11
3. Kế hoạch................................................................................................................11
TÀI LIỆU THAM KHẢO..............................................................................................13
TỔNG KẾT....................................................................................................................14

Lưu Hoàng Khang


[Số trang]

Chương 1: Giới thiêu công ty thực tập

1. Giới thiệu công ty TEKMEDI
Tekmedi được thành lập năm 2018 tại Việt Name, là công ty hàng đầu Việt Nam
về cung cấp các dịch vụ quản lý bện nhân cũng nhưn thanh toán điện tử cho các
bệnh viên trong nước. Sau hai năm thành lập, đến nay Tekmedi đã khẳng định được
vị thế là một trong những công ty dẫn đầu trong lĩnh vực này, vượt xa cả FPT
Tekmedi có văn phòng đặt tại TPHCM và Hà Nội , phân phối dich vu cũng như
giải pháp cho hơn 10 bệnh viện trong nước .

2. Sản phẩm của công ty
Tekmedi cũng câp giải pháp xếp hàng thông ming cũng như hệ thống thanh tốn
bằng thẻ Tekmedi do bênh cơng ty cung cấp .

Lưu Hoàng Khang


[Số trang]

Chương 2: Nội dung thực tập
Xây dựng ứng dụng quản lý bệnh nhân nhận thuốc , gọi bệnh nhân , khai báo y tế tự
động cho bệnh viện chợ rẫy đồ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 phần mềm chuyên nghiệ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, 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 .
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 TEKMEDI, 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. Nghiên cứu kỹ thuật
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, supervisor đã 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. Một số phần mềm trong số đó như Skype
- sử dụng trong làm việc nhóm, Slack – Ứng dụng trao đổi thông tin giữ các nhân
viêc, Visual Studio Code - một chương trình soạn thảo văn bản rất hữu ích và phổ
biến với lập trình viên. Gitlap – quản lý source code của các project trong công ty
Thực hiện : Thực hành sử dụng các phần mềm, dịch vụ đã 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, so với việc dung các IDE.
2.2. Tìm hiểu ngơn ngữ JavaScript , Dart nâng cao
Thời gian : 5 ngày (1 tuần)
Nội dung : Được training về các kỹ thuật JS, TS nâng cao, những kiến thức quan
trọng cho việc tối ưu trên Android. IOS ,WEB
- Lập trình hướng đối tượngCác kiến thức cơ bản về lập trình hướng đối tượng như
khái niêm, các đặc tính như tính kế thừa, tính đóng gói, tính ảo hóa, tính đa hình.

Lưu Hồng Khang


[Số trang]

Ngồi ra, thực tập sinh cịn được hướng dẫn về cách thiết kế lớp cho các đối tượng
.

- Quản lý bộ nhớ
Thực tập sinh sẽ được hướng dẫn về cách cấp phát, quản lý bộ nhớ sao cho tối ưu,
tránh rò rỉ bộ nhớ, một trong những phần rất quan trọng trong lập trình ứng dụng
trên điện thoại, vì bộ nhớ trên điện thoại không thể lớn như trên máy tính được.
Thực hiện :
- Tham gia đầy đủ các buổi training của công ty.
- Làm các bài thực hành, kiểm tra về kiến thức đã học.
Kết quả :
-

2.3.

Nâng cao kỹ năng lập trình với ngơn ngữ JS ,TS.
Có được những kiến thức quan trọng cho việc lập trình 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.

Lập trình Ứng dụng di động với React Native
Nội dung: Các kiến thức cơ bản về React Native để có thể làm ra một ứng dụng đơn
giản.
-

Khái niệm cơ bản về React Native
Năm được các khái niệm cơ bản về ReactNative, là một bản bổ sung của ReactJS
(là một bộ thư viện được dùng trên nhiều nền tảng khác nhau ), để lập trình các
ứng dụng crossform cho các thiết bị di động
Ngồi ra, trainer cịn cung cấp cho thực tập sinh những khái niệm cơ bản trong
ReactNative như Hook, Redux, Redux-saga, là những khái niệm rất cơ bản và
quan trọng trong lập trình di động sử dụng React Native

-

React-redux:
Redux là một predictable state management tool cho các ứng dụng Javascript. Nó
giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường
khác nhau (client, server, and native) và dễ dàng để test. Redux ra đời lấy cảm hứng từ
tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook. Do vậy Redux thường dùng
kết hợp với React.

-

Redux-Saga

Lưu Hoàng Khang


[Số trang]
Một ứng dụng thực tế thường địi hỏi có những thao tác xử lý cần thời gian để phản hồi
( các thao tác bất đồng bộ lấy dữ liệu từ api hay các thao tác đọc ghi file hay đọc cookie
từ trình duyệt, …). Các thao tác như vậy trong lập trình hàm gọi là side effects. Nhưng
redux lại có một số ràng buộc:



Thứ nhất: Các xử lý trong Reducers phải là các hàm đồng bộ và pure, trả về state
mới
Thứ hai: Reducers sẽ ko được sử dụng các hàm async vì khơng được thay đổi
global state.

Do đó để có thể giải quyết được các side effect này ta cần thực hiện nó ở middeware.

Redux-Saga sinh ra đêt giúp việc quản lý các midleware trở nên linh hoạt hơn
Redux-Saga là một thư viện redux middleware, giúp quản lý những side effect trong ứng
dụng redux trở nên đơn giản hơn. Bằng việc sử dụng tối đa tính năng Generators
(function*) của ES6, nó cho phép ta viết async code nhìn giống như là synchronosSaga
không chỉ tồn tại trong thế giới javascript, nó cịn được coi là 1 pattern.

-

React-Hook
Trong phiên bản React 16.8 trở đi, chúng ta đã có thể sử dụng state trong stateless
(functional) component, việc mà từ trước tới nay ta bắt buộc phải khai báo Class.
Có thể thấy, các nhà phát triển React họ đang muốn hướng đến 1 tương lai
Functional Programming thay vì sử dụng những Class mà chỉ nghe cái tên thôi là
ta đã nghĩ ngay đến OOP. Cộng với việc không sử dụng Class kế thừa từ React
Component nữa nên giờ đây kích thước bundle sẽ được giảm đáng kể bởi code sử
dụng Hooks.
Để có thể thay thế được Class thì React Hooks cung cấp cho chúng ta một bộ các
built-in Hooks, giúp chúng ta sử dụng được các thành phần tạo nên React, có 2
loại built-in đó là: Basic Hooks và Additional Hooks
Axios
Axios là một HTTP client được viết dựa trên Promises được dùng để hỗ trợ cho
việc xây dựng các ứng dụng API từ đơn giản đến phức tạp và có thể được sử dụng
cả ở trình duyệt hay Node.js.
Việc tạo ra một HTTP request dùng để fetch hay lưu dữ liệu là một trong những
nhiệm vụ thường thấy mà một ứng dụng Javascript phía client cần phải làm khi
muốn giao tiếp với phía server. Các thư viện bên thứ 3, đặc biệt là jQuery từ xưa

Lưu Hoàng Khang

[Số trang]

đến nay vẫn là một trong những cách phổ biến để giúp cho các browser API tương
tác tốt hơn, rõ ràng mạch lạc hơn và xóa đi những điểm khác biệt giữa các
browser với nhau.
Thực hiện :
-

Tham gia đầy đủ các buổi trainning.
Làm các bài tập thực hành như xây dựng các app nhỏ để có thể nắm rõ các cách
hoạt động của react- redux với react-saga ,.....
Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.

Kết quả :
2.4.

Hiểu được những khái niệm cơ bản trong lập trình CrossPlaform khi sử dụng
react-native framework
Đã làm được các app di động cơ bản

Lập trình trên Android
Nội dung : Các kỹ thuật tạo ra một ứng dụng cơ bản sử dụng react-native framework
trên android
-

Định nghĩa về Android:
Android là một tập hợp phần mềm (software stack) dành cho các thiết bị di động,
bao gồm hệ điều hành, phần mềm trung gian (middleware)và các ứng dụng chủ
chốt (key applications). Google Inc. đã mua lại phát triển ban đầu của phần mềm
từ Android Inc., năm 2005. Hệ điều hành di động của Android dựa trên nền tẳng

Linux

-

Tạo ứng dụng Android:
Được các trainner hướng dẫn tạo ra một ứng dụng cơ bản, cấu hình quyền truy cập
cho android, cách sử dụng các công cụ để biên dịch, chạy android trên máy ảo
trên PC.

-

Lập trình ứng dụng bằng framework react-native + các thư viện liên quan cho ứng
dụng

Thực hiện :
-

Tham gia đầy đủ các buổi training.
Tạo ra những ứng dụng cơ bản rồi cài đặt nó trên thiết bị Android.

Lưu Hoàng Khang


[Số trang]

Kết quả:
-

Đã có thể tạo ra 1 app di động cơ bản gồm 5 màn hình trên thiết bị Android

3. Thực hiện project
Sau 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ề JavaScript, react-native framework , react-redux, redux-saga , . Trong tháng
thứ hai, trainer đã 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 app di động thực tế ở bệnh viện chợ rẫy
Chi tiết đồ án sẽ được nói ở phần sau.
4. Lịch làm việc

Tuần

Cơng việc
-

1

2

3
4

Tìm hiểu về cơng ty,
cách tổ 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.
- Học cách trao đổi,
làm việc qua email.
- Tìm hiểu ngơn ngữ
lập trình javaScript

nâng cao
- Thực hành javaScript
- Làm
bài
test
javaScript
- Tìm hiểu về Reactnative
- Thực hành một số
Bài tập cơ bản , tìm
hiểu vể redux
- Tìm hiểu về Android
- Thực hành tạo một
ứng dụng bằng reactnative framework cơ
bản.

Người hướng
dẫn

Mức
độ
hoàn
thành

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

Anh
Lê Cơng Đăng

Anh

Nguyễn Thiện
Tâm

Anh
Nguyễn Thiện
Tâm
Anh
Nguyễn
Thiện Tâm

Lưu Hồng Khang


[Số trang]

-

5

6

7

8

Chạy và test ứng
dụng trên máy ảo
android
Giai đoạn Alpha:
Anh

- Lên kế hoạch
Nguyễn Thiện
- Nhận design từ phía Tâm
bệnh viện
- Tìm kiếm các lib cho
việc xây dựng ứng dụng
Giai đoạn Alpha(tiếp) :
- Viết các component
cần thiết cho 2 app
khai báo y tế + hiện
thị số thứ tự gọi bệnh
nhân .
- Ráp Api được cung
cấp từ phía backend
Giai đoạn Beta :
- Viết các chức năng
nâng cao hơn
- Tự động nhận diện
chụp ảnh
Chuyển ứng dụng
sang interval call Api
để phù hợp với yêu
cầu của bệnh viện
- Làm nhanh phần
mềm gọi bệnh nhân
cho phòng thuốc bệnh
viện
Giai đoạn Beta và giai
đoạn kết thúc, báo cáo :
- Relase App khai báo y

tế tự động tại chợ rẫy
- Màn hình gọi số bệnh
nhân BHYT tại chợ
rẫy
- Màn hình gọi số
BHYT ở chợ rẫy
- Fix bug phát sing
- Báo cáo cuối đợt thực

Anh
Nguyễn Thiện
Tâm

Anh
Nguyễn Thiện
Tâm

Anh
Nguyễn Thiện
Tâm

Lưu Hoàng Khang


[Số trang]

tập.

Lưu Hoàng Khang

[Số trang]

Chương 3: Chi tiết về project

1. Giới thiệu về phần mêm khai báo y tế trên kiosk
1.1.

Mô tả
Trong bối cảnh dịch COVID-19 đang diễn ra vô cùng phức tạp. Khai báo y tế hiện đang là

một trong những cách nhanh và dễ dàng nhất giúp người dân chủ động bảo vệ sức khỏe
và hỗ trợ cơng tác phịng chống dịch , đặc biệt trong môi trường nhiều người tập trung
như bệnh viện Chợ Rẫy việc khai báo y tế là vơ cùng cần thiết để có thể kiểm sốt được
tình trạng của người ra vào bệnh viện, nhưng việc khai báo y tế thủ cơng thì rất mất thời
gian và cơng sức. Từ đó, Phía bệnh viện đã hợp tác với phía cơng ti TEKMEDI để phát
triển ứng dụng khai báo y tế tự động trên các Kiosk tại bênh viện chợ rẫy
Hình ảnh :

Lưu Hồng Khang


[Số trang]

1.2.

Sử dụng
Kiosk khai báo ý tế sẽ được đặt ngay cổng số 1 bệnh viện chợ rẫy, để bệnh nhân hoặc người
thăm bện khi vào bệnh viện sẽ lại trụ kiosk để khai báo ý tế , sau đó ứng dụng sẽ xác định vị trí
khn mặt của người khai báo để lưu lại hình ảnh của họ để tiện cho việc truy vết sau này

1.3 Thực hiện
Công cụ :
React-native framework + package React-native-camera
Người Thực hiện
Thực tập sinh : Lưu Hồng Khang
Và sự giúp đỡ tận tình của TechLead Nguyễn Thiện Tâm

2. Giới thiệu về màn hình LCD thuốc BHYT
2.1 Mô tả :
Hiện tại bệnh viện chợ rẫy muốn áp dụng gọi số và hiện thị bệnh nhận chờ
nhận thuốc tự động để giảm tải công việc cho các y tá , điều đó đã dẫn đến vêc

Lưu Hồng Khang


[Số trang]

Cho ra phần mềm theo yêu cầu phía bệnh viện

Hình ảnh giao diện app
2.2 Sử dụng :
Phần mềm hiện thị thông tin bệnh nhân đang nhận thuốc và danh sách bệnh nhân
chờ nhận thuốc
2.3 Thực hiện :
Công cụ :
Sử dụng react-native framework cho layout + package axios để fetch data từ
server
Người Thực hiện

Lưu Hoàng Khang


[Số trang]

Thực tập sinh : Lưu Hoàng Khang
Và sự giúp đỡ tận tình của TechLead Nguyễn Thiện Tâm

3. Giới thiệu về App gọi số bệnh nhân
3.1 Mô tả :
Do yêu cầu từ các y tá phát thuốc tại quầy thuốc bảo hiểm y tế tại bệnh viện
chợ rẫy , làm nhanh 1 ứng dụng tên thiết bị androidbox để đọc số của bệnh
nhân hiện tại và số của bệnh nhân chuẩn bị vào quầy thuốc
3.2 Sử dụng
Do app được thiết kế riêng cho việc đọc số tại quầy thuốc bảo hiểm y tế nên
chỉ cần cài đặt, găm thiết bị âm thanh và sử dụng ,
3.3 Thực hiện
Công cụ :
React-native + package React-native-sound
Người thực hiện :
Thực tập sinh : Lưu Hồng Khang
Người hướng dẫn : khơng có
4. Xây dựng layout (Bài tập training ) cho app booking bác sĩ
4.1 Mô tả :
Vì muốn tiện lợi hơn cho việc đăng kí khám bệnh nên công ti xây dụng đặt lich
khám bằng app
4.2 Sử dụng :
Bật app và chọn bác sĩ

Lưu Hoàng Khang

[Số trang]

4.3 Thực hiện :
Công cụ :
React-native framework + các package tương ứng
Người thực hiện :
Lưu Hoàng Khang
Tài liệu tham khảo : react-native doc

Lưu Hoàng Khang


[Số trang]

5. Kết nối Native Module DualiCard vào 1 app React-native
Mơ tả :
Vì cơng ti có phát triển thiết đọc thẻ NFC riêng của phía cơng ti tekmedi nên
khơng thể tìm thấy thư hiện hổ trợ cho việc kết nối thiết bị phía cơng ti vào 1 ứng dụng

Lưu Hồng Khang


[Số trang]

React-native cụ thể hơn là kết hợp 1 module JAVA vào 1 app android phát triển bằng
framework react-native , Nên việc tìm hiểu và kết nối phần native vào app là cần thiết
.Việc kết nối đơn giản là sử dụng API của facebook cung cấp để bắt những sự kiện mà
native thread tryền vào js thread

Sử dụng :
Yarn add như những react-package thơng thường sau đó import vào
react-app khai báo như 1 component rồi truyền vào các props
Thực hiện :
Công cụ :
React native framework API facebook cung cấp cho phía android Java đê tạo 1 cầu nối
cho việc truyền thông tin giữa JS thread và native thread
Người thực hiện :
Lưu Hoàng Khang

Lưu Hoàng Khang


[Số trang]

TÀI LIỆU THAM KHẢO

React-native :
/>React-redux :
/>Redux-saga :
/>Axios :
/>Fix bug :
/>
Lưu Hoàng Khang


[Số trang]

Lưu Hoàng Khang