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

để 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

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

[Số trang]

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

LỜI MỞ ĐẦU

để 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ôitrườ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ềukiệ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

NHẬN XÉT CỦA KHOA

[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 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 3

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

3 Thực hiện project 7

4 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

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ácbệ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 toánbằng thẻ Tekmedi do bênh công ty cung cấp

[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ệctrong 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ủacông ty

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…

Kết quả : Hiểu thêm về công ty TEKMEDI, quá 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ânviê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.Ngoà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ụngtrê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ả :

- 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

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

2.3 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

Ngoài ra, trainer còn cung cấp cho thực tập sinh những khái niệm cơ bản trongReactNative 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

[Số trang]

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

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

Để có thể thay thế được Class thì React Hooks cung cấp cho chúng ta một bộ cácbuilt-in Hooks, giúp chúng ta sử dụng được các thành phần tạo nên React, có 2loạ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ợ choviệ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ữngnhiệm vụ thường thấy mà một ứng dụng Javascript phía client cần phải làm khimuố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đến nay vẫn là một trong những cách phổ biến để giúp cho các browser API tươngtá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ácbrowser 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áchhoạ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

từ Android Inc., năm 2005 Hệ điều hành di động của Android dựa trên nền tẳngLinux

- Tạo ứng dụng Android:

[Số trang]Đượ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ậpcho android, cách sử dụng các công cụ để biên dịch, chạy android trên máy ảotrên PC.

- Lập trình ứng dụng bằng framework react-native + các thư viện liên quan cho ứngdụ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

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ángthứ 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ệnmộ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 Người hướng

dẫn

Mức độ hoàn thành

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

1

- Tìm hiểu về công ty,cách tổ chức của côngty

- Làm quen với cáccông cụ làm việctrong công ty

- Học cách trao đổi,làm việc qua email

Anh

Lê Công Đăng

2 - Tìm hiểu ngôn ngữ

lập trình javaScriptnâng cao

Anh Nguyễn Thiện Tâm

- Tìm hiểu về native

React Thực hành một số Bài tập cơ bản , tìmhiểu vể redux

AnhNguyễn Thiện Tâm

4

- Tìm hiểu về Android

- Thực hành tạo mộtứng dụng bằng react-native framework cơbản

- Chạy và test ứngdụng trên máy ảoandroid

Anh NguyễnThiện Tâm

5

Giai đoạn Alpha:

- Lên kế hoạch

- Nhận design từ phíabệnh viện

- Tìm kiếm các lib choviệc xây dựng ứng dụng

AnhNguyễn Thiện Tâm

6

Giai đoạn Alpha(tiếp) :

- Viết các componentcần thiết cho 2 appkhai báo y tế + hiệnthị số thứ tự gọi bệnhnhân

- Ráp Api được cungcấp từ phía backend

Anh Nguyễn Thiện Tâm

7

Giai đoạn Beta :

- Viết các chức năngnâng cao hơn

- Tự động nhận diệnchụp ảnh

Chuyển ứng dụngsang interval call Api

để phù hợp với yêucầu của bệnh viện

- Làm nhanh phầnmềm gọi bệnh nhâncho phòng thuốc bệnhviện

Anh Nguyễn Thiện Tâm

- Màn hình gọi số bệnhnhâ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ựctập

AnhNguyễn Thiện Tâm

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

Hình ảnh :

[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ườithă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íkhuôn 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 Hoà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 Cho ra phần mềm theo yêu cầu phía bệnh viện

Hình ảnh giao diện app

[Số trang]

Sử dụng react-native framework cho layout + package axios để fetch data từ server

Người Thực hiện

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

Thực tập sinh : Lưu Hoà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

Lưu Hoàng Khang

Tài liệu tham khảo : react-native doc

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