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 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ó hội thực tập cơng ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình TechLead Nguyễn Thiên Tâm , em tiếp thu kiến thức quan trọng để làm ứng dụng framework React Native Chân thành cảm ơn TechLead bỏ nhiều thời gian,cơng sức để hướng dẫn em hồn thành đợt thực tập Đặ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 khó khăn cơng việc, đến 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 nhiều vấn đề kỹ thuật backend RestAPI trình làm ứng dụng ; cảm ơn anh Lê Công Đăng CPO công ti , dẫn em cách làm báo cáo, lên kế hoạch, kỹ thiếu Cũng xin cảm ơn thầy cô khoa Công nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện em làm báo cáo Lưu Hoàng Khang TpHCM, ngày 14 tháng 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 Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty TEKMEDI JSC 2 Sản phẩm công ty Chương 2: Nội dung thực tập .3 Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật Thực project Lịch làm việc Chương 3: Chi tiết project .9 Giới Thiệu App khai báo y tế , Ứng dụng thị bênh nhân .9 Thực 11 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 Giới thiệu công ty TEKMEDI Tekmedi thành lập năm 2018 Việt Name, công ty hàng đầu Việt Nam cung cấp dịch vụ quản lý bện nhân nhưn toán điện tử cho bệnh viên nước Sau hai năm thành lập, đến Tekmedi khẳng định vị công ty dẫn đầu lĩnh vực này, vượt xa FPT Tekmedi có văn phịng đặt TPHCM Hà Nội , phân phối dich vu giải pháp cho 10 bệnh viện nước Sản phẩm công ty Tekmedi câp giải pháp xếp hàng thông ming hệ thống tốn thẻ Tekmedi 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 kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc môi trường phát triển phần mềm chun nghiệp Tìm hiểu cơng ty kỹ công ty Thời gian : ngày Nội dung : Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu cơng ty, q trình thành lập 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ơng ty Ngồi ra, thực tập sinh cịn giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc… Kết : Hiểu thêm công ty TEKMEDI, trình thành lập phát triển Có thêm kỹ việc sử dụng email công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc Thời gian : ngày Nội dung : Tìm hiểu cơng cụ sử dụng 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 cơng cụ giúp ích cho cơng việc sau Một số phần mềm số Skype - sử dụng làm việc nhóm, Slack – Ứng dụng trao đổi thông tin giữ nhân viêc, Visual Studio Code - chương trình soạn thảo văn hữu ích phổ biến với lập trình viên Gitlap – quản lý source code project công ty Thực : Thực hành sử dụng phần mềm, dịch vụ nêu Kết : Lập trình sử dụng cơng cụ miễn phí, giúp dễ dàng kết hợp công cụ với nhau, so với việc dung IDE 2.2 Tìm hiểu ngơn ngữ JavaScript , Dart nâng cao Thời gian : ngày (1 tuần) Nội dung : Được training kỹ thuật JS, TS nâng cao, kiến thức quan trọng cho việc tối ưu Android IOS ,WEB - Lập trình hướng đối tượngCác kiến thức lập trình hướng đối tượng khái niêm, đặc tí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 hướng dẫn cách thiết kế lớp cho đối tượng - Quản lý nhớ Thực tập sinh hướng dẫn cách cấp phát, quản lý nhớ cho tối ưu, tránh rò rỉ nhớ, phần quan trọng lập trình ứng dụng điện thoại, nhớ điện thoại khơng thể lớn máy tính Thực : - Tham gia đầy đủ buổi training công ty - Làm thực hành, kiểm tra kiến thức học Kết : - 2.3 Nâng cao kỹ lập trình với ngơn ngữ JS ,TS Có kiến thức quan trọng cho việc lập trình Mobile sau Ngồi cịn biết thêm số quy tắc việc viết code cho 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 React Native để làm ứng dụng đơn giản - Khái niệm React Native Năm khái niệm ReactNative, bổ sung ReactJS (là thư viện dùng nhiều tảng khác ), để lập trình ứng dụng crossform cho thiết bị di động Ngồi ra, trainer cịn cung cấp cho thực tập sinh khái niệm ReactNative Hook, Redux, Redux-saga, khái niệm quan trọng lập trình di động sử dụng React Native - React-redux: Redux predictable state management tool cho ứng dụng Javascript Nó giúp bạn viết ứng dụng hoạt động cách quán, chạy môi trường khác (client, server, and native) dễ dàng để test Redux đời lấy cảm hứng từ tư tưởng ngôn ngữ Elm kiến trúc Flux Facebook Do 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ó thao tác xử lý cần thời gian để phản hồi ( thao tác bất đồng lấy liệu từ api hay thao tác đọc ghi file hay đọc cookie từ trình duyệt, …) Các thao tác lập trình hàm gọi side effects Nhưng redux lại có số ràng buộc:   Thứ nhất: Các xử lý Reducers phải hàm đồng pure, trả state Thứ hai: Reducers ko sử dụng hàm async khơng thay đổi global state Do để giải side effect ta cần thực middeware Redux-Saga sinh đêt giúp việc quản lý midleware trở nên linh hoạt Redux-Saga thư viện redux middleware, giúp quản lý side effect ứng dụng redux trở nên đơn giản Bằng việc sử dụng tối đa tính Generators (function*) ES6, cho phép ta viết async code nhìn giống synchronosSaga khơng tồn giới javascript, cịn coi pattern - React-Hook Trong phiên React 16.8 trở đi, sử dụng state stateless (functional) component, việc mà từ trước tới ta bắt buộc phải khai báo Class Có thể thấy, nhà phát triển React họ muốn hướng đến tương lai Functional Programming thay sử dụng Class mà nghe tên ta nghĩ đến OOP Cộng với việc không sử dụng Class kế thừa từ React Component nên kích thước bundle giảm đáng kể code sử dụng Hooks Để thay Class React Hooks cung cấp cho built-in Hooks, giúp sử dụng thành phần tạo nên React, có loại built-in là: Basic Hooks Additional Hooks Axios Axios HTTP client viết dựa Promises dùng để hỗ trợ cho việc xây dựng ứng dụng API từ đơn giản đến phức tạp sử dụng trình duyệt hay Node.js Việc tạo HTTP request dùng để fetch hay lưu liệu nhiệm vụ thường thấy mà ứng dụng Javascript phía client cần phải làm muốn giao tiếp với phía server Các thư viện bên thứ 3, đặc biệt jQuery từ xưa Lưu Hoàng Khang [Số trang] đến cách phổ biến để giúp cho browser API tương tác tốt hơn, rõ ràng mạch lạc xóa điểm khác biệt browser với Thực : - Tham gia đầy đủ buổi trainning Làm tập thực hành xây dựng app nhỏ để nắm rõ cách hoạt động react- redux với react-saga , Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết : 2.4 Hiểu khái niệm lập trình CrossPlaform sử dụng react-native framework Đã làm app di động Lập trình Android Nội dung : Các kỹ thuật tạo ứng dụng sử dụng react-native framework android - Định nghĩa Android: Android tập hợp phần mềm (software stack) dành cho thiết bị di động, bao gồm hệ điều hành, phần mềm trung gian (middleware)và ứng dụng chủ chốt (key applications) Google Inc mua lại phát triển ban đầu phần mềm từ Android Inc., năm 2005 Hệ điều hành di động Android dựa tẳng Linux - Tạo ứng dụng Android: Được trainner hướng dẫn tạo ứng dụng bản, cấu hình quyền truy cập cho android, cách sử dụng công cụ để biên dịch, chạy android máy ảo PC - Lập trình ứng dụng framework react-native + thư viện liên quan cho ứng dụng Thực : - Tham gia đầy đủ buổi training Tạo ứng dụng cài đặt thiết bị Android Lưu Hoàng Khang [Số trang] Kết quả: - Đã tạo app di động gồm hình thiết bị Android Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực 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 kiến thức học để thực project app di động thực tế bệnh viện chợ rẫy Chi tiết đồ án nói phần sau Lịch làm việc Tuần Công việc - Tìm hiểu cơng ty, cách tổ chức công ty - Làm quen với công cụ làm việc 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 test javaScript - Tìm hiểu Reactnative - Thực hành số Bài tập , tìm hiểu vể redux - Tìm hiểu Android - Thực hành tạo ứng dụng reactnative framework Người hướng dẫn Mức độ hoàn thành Nhận xét 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 Hoàng Khang [Số trang] - Chạy test ứng dụng 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 lib cho việc xây dựng ứng dụng Giai đoạn Alpha(tiếp) : - Viết component cần thiết cho app khai báo y tế + thị số thứ tự gọi bệnh nhân - Ráp Api cung cấp từ phía backend Giai đoạn Beta : - Viết chức nâng cao - 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 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 giai đoạn kết thúc, báo cáo : - Relase App khai báo y tế tự động chợ rẫy - Màn hình gọi số bệnh nhân BHYT 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 project Giới thiệu phần mêm khai báo y tế kiosk 1.1 Mô tả Trong bối cảnh dịch COVID-19 diễn vô phức tạp Khai báo y tế cách nhanh dễ dàng giúp người dân chủ động bảo vệ sức khỏe hỗ trợ cơng tác phịng chống dịch , đặc biệt môi trường nhiều người tập trung bệnh viện Chợ Rẫy việc khai báo y tế vô cần thiết để kiểm sốt tình trạng người vào bệnh viện, việc khai báo y tế thủ cơng thời gian 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 Kiosk 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ế đặt cổng số bệnh viện chợ rẫy, để bệnh nhân người thăm bện vào bệnh viện lại trụ kiosk để khai báo ý tế , sau ứng dụng xác định vị trí khn mặt người khai báo để lưu lại hình ảnh họ để tiện cho việc truy vết sau 1.3 Thực Công cụ : React-native framework + package React-native-camera Người Thực Thực tập sinh : Lưu Hồng Khang Và giúp đỡ tận tình TechLead Nguyễn Thiện Tâm Giới thiệu hình LCD thuốc BHYT 2.1 Mô tả : Hiện bệnh viện chợ rẫy muốn áp dụng gọi số thị bệnh nhận chờ nhận thuốc tự động để giảm tải cơng việc cho y tá , điều dẫn đến vêc Lưu Hoàng Khang [Số trang] Cho phần mềm theo 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 thị thông tin bệnh nhân nhận thuốc danh sách bệnh nhân chờ nhận thuốc 2.3 Thực : Công cụ : Sử dụng react-native framework cho layout + package axios để fetch data từ server Người Thực Lưu Hoàng Khang [Số trang] Thực tập sinh : Lưu Hồng Khang Và giúp đỡ tận tình TechLead Nguyễn Thiện Tâm Giới thiệu App gọi số bệnh nhân 3.1 Mô tả : Do yêu cầu từ y tá phát thuốc quầy thuốc bảo hiểm y tế bệnh viện chợ rẫy , làm nhanh ứng dụng tên thiết bị androidbox để đọc số bệnh nhân số bệnh nhân chuẩn bị vào quầy thuốc 3.2 Sử dụng Do app thiết kế riêng cho việc đọc số quầy thuốc bảo hiểm y tế nên cần cài đặt, găm thiết bị âm sử dụng , 3.3 Thực Công cụ : React-native + package React-native-sound Người thực : Thực tập sinh : Lưu Hoàng Khang Người hướng dẫn : khơng có 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 cho việc đăng kí khám bệnh nên cơng ti xây dụng đặt lich khám app 4.2 Sử dụng : Bật app chọn bác sĩ Lưu Hoàng Khang [Số trang] 4.3 Thực : Công cụ : React-native framework + package tương ứng Người thực : Lưu Hoàng Khang Tài liệu tham khảo : react-native doc Lưu Hoàng Khang [Số trang] Kết nối Native Module DualiCard vào app React-native Mơ tả : Vì cơng ti có phát triển thiết đọc thẻ NFC riêng phía cơng ti tekmedi nên khơng thể tìm thấy thư hổ trợ cho việc kết nối thiết bị phía cơng ti vào ứng dụng Lưu Hoàng Khang [Số trang] React-native cụ thể kết hợp module JAVA vào app android phát triển framework react-native , Nên việc tìm hiểu kết nối phần native vào app cần thiết Việc kết nối đơn giản sử dụng API facebook cung cấp để bắt kiện mà native thread tryền vào js thread Sử dụng : Yarn add react-package thông thường sau import vào react-app khai báo component truyền vào props Thực : Công cụ : React native framework API facebook cung cấp cho phía android Java đê tạo cầu nối cho việc truyền thông tin JS thread native thread Người thực : Lưu Hoàng Khang Lưu Hoàng Khang [Số trang] TÀI LIỆU THAM KHẢO React-native : https://reactnative.dev/ React-redux : https://react-redux.js.org/ Redux-saga : https://redux-saga.js.org/ Axios : https://github.com/axios/axios Fix bug : https://stackoverflow.com/ Lưu Hoàng Khang [Số trang] Lưu Hoàng Khang ... đọ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 React Native để làm ứng dụng đơn giản - Khái niệm React Native Năm khái niệm ReactNative, bổ sung ReactJS (là thư... Android Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực JavaScript, react- native framework , react- redux, redux-saga , Trong tháng thứ hai, trainer hướng dẫn thực tập sinh... lập trình javaScript nâng cao - Thực hành javaScript - Làm test javaScript - Tìm hiểu Reactnative - Thực hành số Bài tập , tìm hiểu vể redux - Tìm hiểu Android - Thực hành tạo ứng dụng reactnative