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 FRAMEWORK REACT NATIVE Công ty thực tập Công ty TNHH Vitalify Á Châu Người phụ trách Đinh Gia[.]
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 FRAMEWORK REACT NATIVE Công ty thực tập : Công ty TNHH Vitalify Á Châu Người phụ trách : Đinh Gia Kiệt Thực tập sinh : Trần Thanh Hiền TP Hồ Chí Minh, tháng 12 năm 2022 LỜI MỞ ĐẦU Hiện nay, với phát triển không ngừng cơng nghệ, kéo theo quỹ thời gian người dùng dành cho việc sử dụng thiết bị di động ngày lớn Như hệ tất yếu, thị trường phát triển phần mềm di động mà phát triển mạnh mẽ cần nguồn nhân lực khổng lồ để đáp ứng Sau tiếp xúc với môn học liên quan đến việc phát triển ứng dụng thiết bị di động khoa Công nghệ phần mềm, em tự nhận thấy niềm đam mê lĩnh vực giới công nghệ rộng lớn, đặc biệt phát triển ứng dụng di động cách linh động framework đa tảng, tiêu biểu React Native Sau ba năm học tập trường, với kiến thức bổ ích tích luỹ nhờ giúp đỡ dạy học tận tâm thầy cô khoa Công nghệ Phần mềm Em định tìm đến mơi trường doanh nghiệp để cọ xát đem kiến thức học để phát triển sản phẩm mang lại giá trị thiết thực cho xã hội Sau thời gian tìm kiếm tảng tuyển dụng thực tập sinh, em tìm cơng ty phù hợp với thân để bắt đầu bước nghiệp – Công ty TNHH Vitalify Á Châu Qua trình thực tập đây, em tích luỹ kiến thức chuyên ngành quý báu hiểu quy trình sản phẩm cơng nghệ làm thực tế Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TNHH Vitalify Á Châu 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 anh chị trước, em tiếp thu kiến thức quan trọng để phát triển hồn thiện ứng dụng thiết bị di động Chân thành cảm ơn anh chị nhóm dự án Bee System - thuộc lab SPL 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 Đinh Gia Kiệt, Trần Hải Bảo anh Nguyễn Anh Duy 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 chị Lê Thuỳ Linh tận tình định hướng, quản lý dự án cách hiệu đảm bảo tiến độ dự án với thời gian đề với bên khách hàng 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 Trần Thanh Hiền Thành phố Hồ Chí Minh, ngày 24 tháng 12 năm 2022 Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền NHẬN XÉT CỦA KHOA Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT CỦA KHOA Chương 1: GIỚI THIỆU CÔNG TY THỰC TẬP Giới thiệu công ty TNHH Vitalify Á Châu Sản phẩm công ty Chương 2: NỘI DUNG THỰC TẬP Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc 2.2 Tìm hiểu React Native Thực project 10 Lịch làm việc 10 Chương 3: CHI TIẾT VỀ PROJECT 13 Giới thiệu project 13 Các chức 14 2.1 Đăng nhập 14 2.2 Hiện lịch ca trực tài khoản 14 2.3 Sắp xếp hiển thị tên bệnh nhân theo chữ Kanji 16 2.4 Chức thay đổi môi trường Dev Production 17 TÀI LIỆU THAM KHẢO 19 TỔNG KẾT 20 Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền Chương 1: GIỚI THIỆU CÔNG TY THỰC TẬP Giới thiệu công ty TNHH Vitalify Á Châu Kể từ thành lập vào năm 2008, Vitalify Asia tham gia phát triển phần mềm tập trung vào thiết bị di động với sứ mệnh "mang lại hạnh phúc thông qua Internet” Với mục tiêu trở thành đội ngũ kỹ sư chuyên nghiệp cạnh tranh phạm vi toàn cầu, kỹ sư/thành viên PM mở rộng vai trị phạm vi trách nhiệm mình, đồng thời cam kết cung cấp giá trị thiết thực cho người dùng Đó sách phát triển mục tiêu hướng đến công ty Giờ đây, sau 10 năm thành lập, công ty chuẩn bị bước vào giai đoạn nhằm nâng cao giá trị lực kỹ thuật Việt Nam Công ty hướng tới việc tạo nhiều sản phẩm “Made In Vietnam” bán khắp toàn giới Để đạt mục tiêu này, công ty tiếp tục nỗ lực cải thiện hàng ngày Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền Sản phẩm công ty Công ty tập trung phát triển sản phẩm công nghệ số lĩnh vực như: - Health care (Telemedicine) - Fintech - VR/AR/MR, Metaverse - Startup (from MVP) - Mobile / Hyper-casual Games Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền 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 di động với framework React Native” nhằm mục đích giúp sinh viên thực tập đào tạo toàn diện kĩ lập trình cross-plat hai hệ điều hành phổ biến IOS Android, đồ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 outsourcing chun nghiệp Tìm hiểu công ty kỹ công ty Thời gian: ngày Nội dung: - Đọc tài liệu chuẩn bị sẵn quy trình làm việc quy tắc ứng xử công ty - Nghiên cứu code rule liên quan đến dự án phát triển React Native - Cùng nhóm thực tập gặp gỡ họp riêng trực tiếp với giám đốc Công ty – ông Takayuki Sakurai để làm quen giới thiệu định hướng công ty chi tiết chương trình thực tập tới - Sinh viên phân công tới nhóm dự án phù hợp với định hướng cơng nghệ cá nhân, làm quen với lab (SPL) anh chị nhóm dự án Kết quả: Hiểu thêm Vitalify Á Châu, trình thành lập phát triển Hiểu trách nhiệm công việc tháng thực tập tới Nắm code rule dự án phát triển Javascript, hiểu quy trình báo cáo cơng việc cách thức họp nội nhóm dự án Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền 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 em tìm hiểu cơng cụ giúp ích cho cơng việc sau Một số phần mềm số như: o Visual Studio Code – cơng cụ dùng để phát triển ứng dụng o Backlog – tảng quản lý source code, tiến độ dự án giao tiếp với khách hàng o Chatwork – Ứng dụng để giao tiếp với đồng nghiệp, báo cáo tiến độ hàng ngày o Zoom – Ứng dụng dùng để họp nội nhóm dự án o OpenVPN – Ứng dụng dùng để đổi IP sang IP công ty giúp truy cập vào tài liệu nội có nhu cầu làm việc remote o Figma – Ứng dụng dùng để xem thiết kế bên designer dự án Kết quả: Nắm mức khơng thêm thời gian phải tìm hiểu lại tác vụ phần mềm liên quan q trình làm việc cơng ty 2.2 Tìm hiểu React Native Thời gian: 14 ngày Nội dung: - Training kiến thức liên quan đến React Native, case study thực tế dự án gặp phải - Typescript: coi phiên nâng cao Javascript việc bổ sung tùy chọn kiểu tĩnh lớp hướng đối tượng, điều mà khơng có Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền Javascript Dự án phát triển Typescript nhờ kiểu liệu tường minh giúp cho lập trình viên dễ dàng sửa lỗi phát sinh từ ứng dụng - Mobx: Hiện nay, có hai thư viện tiếng việc quản lý state (trạng thái) dự án liên quan đến Javascript, Redux Mobx Thay phải setup nhiều thứ code boilerplate nhiều Redux, Mobx có cách setup dễ dàng dễ sử dụng so với Redux với tác vụ tương đương - React Hooks: Một số phương thức có sẵn để quản lý state lifecycle Function Component React - Bất đồng bộ: Async/await, promise, chủ đề quan trọng để xử lý tác vụ cần thời gian chờ, ví dụ đọc hay ghi liệu vào database, hay GET, POST, PUT,… liệu từ API - Axios: thư viện HTTP Client cung cấp API cho việc xử lý XHR (XMLHttpRequests) Thực hiện: - 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 : - Nâng cao kỹ lập trình với React Native chủ đề liên quan (thư viện Mobx, Axios, ngơn ngữ Typescript,…) - Có kiến thức quan trọng cho việc lập trình ứng dụng thiết bị di động 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 Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền 10 Thực project Sau tháng training thực hành, thực tập sinh nắm số kiến thực React Native, Mobx,và ngơn ngữ lập trình Typescript Trong tháng thứ hai thứ ba, trainer hướng dẫn thực tập sinh áp dụng kiến thức học áp dụng vào dự án React Native thực tế - Ứng dụng phân công lịch trực cho nhân viên bệnh viện Chi tiết dự án nói phần sau Lịch làm việc Tuần Công việc - Người hướng dẫn Mức độ Nhận xét hoàn người thành hướng dẫn Tìm hiểu cơng ty, chị Lê Thuỳ 100% cách tổ chức công ty Linh - 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 - hiểu framework Anh Đinh Gia 100% React Native - Tìm Kiệt Tìm hiểu ngơn ngữ lập Anh Đinh Gia 100% trình Typescript Kiệt - Tìm hiểu Mobx - Tìm hiểu chủ đề tiếp Anh Đinh Gia 100% theo React (React Kiệt Hooks) Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền 11 - Tìm hiểu thêm thư viện Axios để giao tiếp với API - Tìm hiểu library Anh Đinh Gia 100% hỗ trợ scan code để xây Kiệt dựng chức login QR code - Xây dựng giao diện Anh Đinh Gia 100% chức cho tính Kiệt quên mật - Xây dựng chức đổi môi trường Production) (Dev cho ứng dụng - Xây dựng tính slide Anh Đinh Gia 100% tối ưu performance Kiệt cho giao diện ca trực cho nhân viên - Xây dựng tính xếp bệnh nhân theo chữ tiếng Nhật (Kanji) Báo cáo với người hướng 100% dẫn tồn tính làm thời gian thực tập Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền 12 Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền 13 Chương 3: CHI TIẾT VỀ PROJECT Giới thiệu project Project em làm ứng dụng phát triển hai tảng IOS Android giúp hỗ trợ phân công lịch trực cho nhân viên bệnh viện Ứng dụng hiển thị với ngôn ngữ Nhật Bản sử dụng chủ yếu người Nhật Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền 14 Các chức 2.1 Đăng nhập Các nhân viên đăng nhập theo danh sách tài khoản tạo sẵn theo tên nhân viên Ngoài cách đăng nhập thủ cơng, người dùng đăng nhập cách quét mã QR code cung cấp sẵn 2.2 Hiện lịch ca trực tài khoản Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền 15 Chức cho phép người dùng có để theo dõi lịch trực ngày năm Ngồi ra, ca trực có bảng màu cho phép nhân viên biết tình trạng bệnh nhân ca trực mà đảm nhiệm (màu xanh: bảo hiểm, màu trắng: hết bảo hiểm) Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền 16 2.3 Sắp xếp hiển thị tên bệnh nhân theo chữ Kanji - Data tên bệnh nhân trả phần từ API gồm phần: Tên theo bảng chữ Katakana tên theo bảng chữ Kanji - Tên bệnh nhân phần group theo họ xếp từ xuống theo kí tự chữ đặc biệt Nhật (chữ full-width) Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền 17 2.4 Chức thay đổi môi trường Dev Production - Về chức ẩn dành cho số người dùng đặc biệt, cho phép thay đổi môi trường Dev Production - Về chế hoạt động ứng dụng có API cho phép người dùng tương tác với liệu, chức cho phép chuyển đổi API ứng với môi trường cho trường hợp định Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền 18 - Mơi trường Dev dành cho lập trình viên để test phần mềm trình phát triển ứng dụng Cịn mơi trường Production dành cho người dùng thực Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền 19 TÀI LIỆU THAM KHẢO React Native: https://reactnative.dev/ React Library: https://reactjs.org/ Mobx State Management: https://mobx.js.org/react-integration.html Axios: https://axios-http.com/docs/intro Người hướng dẫn: Đinh Gia Kiệt Trần Thanh Hiền ... 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 di động với framework React Native” nhằm mục đích giúp sinh viên thực tập đào tạo toàn di? ??n kĩ lập trình cross-plat hai... training thực hành, thực tập sinh nắm số kiến thực React Native, Mobx,và ngơn ngữ lập trình Typescript Trong tháng thứ hai thứ ba, trainer hướng dẫn thực tập sinh áp dụng kiến thức học áp dụng vào... độ dự án giao tiếp với khách hàng o Chatwork – Ứng dụng để giao tiếp với đồng nghiệp, báo cáo tiến độ hàng ngày o Zoom – Ứng dụng dùng để họp nội nhóm dự án o OpenVPN – Ứng dụng dùng để đổi IP