ĐẠI HỌC QUỐC GIA TP 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 IOS BẰNG REACT NATIVE VÀ EXPO Công ty thực Công ty TNHH tập: AIOZ Người phụ trách: Lê Quang Phát Thực tập sinh: Phạm Hớn Tuyền SE501.N21.PMCL – Phạm Hớn Tuyền TP Hồ Chí Minh, tháng 06 năm 2023 SE501.N21.PMCL – Phạm Hớn Tuyền ĐẠI HỌC QUỐC GIA TP 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 IOS BẰNG REACT NATIVE VÀ EXPO Công ty thực Công ty TNHH tập: AIOZ Người phụ trách: Lê Quang Phát Thực tập sinh: Phạm Hớn Tuyền SE501.N21.PMCL – Phạm Hớn Tuyền TP Hồ Chí Minh, tháng 06 năm 2023 SE501.N21.PMCL – Phạm Hớn Tuyền LỜI MỞ ĐẦU Hiện nay, với phát triển vượt bậc mạnh mẽ ngành công nghệ giới, việc điện thoại di động thông minh (gọi tắt smartphone) ngày trở thành vật dụng thiếu thời đại ngày Kèm theo phát triển smartphone gia tăng chóng mặt ứng dụng di động để đáp ứng nhu cầu sử dụng người dùng smartphone toàn cầu Những ứng dụng di động ngày phát triển không ngừng, hỗ trợ người dùng với đủ mặt lĩnh vực giáo dục, giải trí, thể thao, xã hội,… Những ứng dụng xây dựng với mục đính giúp cung cấp cho người cơng cụ hữu ích, giải hay hỗ trợ vấn đề sống Sau năm học tập ghế nhà trường, em có định mong muốn trải nghiệm, làm giàu kinh nghiệm thân có hội tham gia dự án xây dựng ứng dụng môi trường chuyên nghiệp nên em có dự định định thực tập thời gian Và lựa chọn em công ty AIOZ, môi trường chuyên nghiệp, đại thân thiện, cho em hội để thực tập vị trí Frontend SE501.N21.PMCL – Phạm Hớn Tuyền LỜI CẢM ƠN Em xin trân trọng gửi lời cảm ơn đến anh chị công ty AIOZ cho em hội để thực tập công ty đóng góp vào q trình thực dự án mơi trường thực tế đầy tính chuyên nghiệp đại Trong suốt quãng thời gian thực tập, nhờ vào hướng dẫn tận tình anh chị cơng ty, em có hội để theo dõi, học tập trau dồi kinh nghiệm cho kiến thức chuyên ngành Công nghệ phần mềm trải nghiệm làm việc cơng ty chun cơng nghệ Tuy cịn thiếu sót q trình học tập, em tiếp tục cố gắng nỗ lực để ngày trau dồi thân Ngồi ra, em xin chân thành cảm ơn thầy khoa Cơng nghệ phần mềm nhiệt tình hỗ trợ, trang bị cho em kiến thức quý báu cho em suốt trình học tập để giúp em thực báo cáo Em chân thành cảm ơn! TP HCM, tháng 06 năm 2023 Phạm Hớn Tuyền SE501.N21.PMCL – Phạm Hớn Tuyền NHẬN XÉT CỦA KHOA SE501.N21.PMCL – Phạm Hớn Tuyền MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT CỦA KHOA MỤC LỤC .4 CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP Giới thiệu Sản phẩm công ty Lịch làm việc thực tập công ty .7 Mô tả công việc CHƯƠNG 2: NỘI DUNG THỰC TẬP Tìm hiểu cơng ty kỹ công ty .8 Nghiên cứu kỹ thuật .8 2.1 Làm quen với công cụ làm việc .8 2.2 Tìm hiểu React Native kiến trúc React Native 2.3 Tìm hiểu Expo .9 2.4 Tìm hiểu GL React & GLSL .9 Thực dự án cá nhân .10 3.1 Công nghệ 10 3.2 Mô tả dự án 10 3.3 Kết 12 Lịch làm việc 12 CHƯƠNG 3: TỔNG KẾT 14 Điểm mạnh 14 Điểm yếu 14 Chuẩn đạt 14 SE501.N21.PMCL – Phạm Hớn Tuyền TÀI LIỆU THAM KHẢO 16 SE501.N21.PMCL – Phạm Hớn Tuyền CHƯƠNG 1: GIỚI THIỆU CƠNG TY THỰC TẬP Giới thiệu Hình logo AIOZ AIOZ cơng ty có trụ sở Singapore Mục tiêu công ty giải vấn đề phức tạp đời thực cách áp dụng công nghệ tiên tiến gần Blockchain Trí tuệ nhân tạo (AI) Về mảng AI, công ty AIOZ tiên phong việc phát triển thuật tốn tối ưu hóa, mơ hình học máy giải pháp AI kiểm chứng khoa học Ngoài ra, sản phẩm Blockchain bật cơng ty, AIOZ Network (Mạng AIOZ), sở hạ tầng Web3 Media Blockchain, sử dụng tài ngun dự phịng tất máy tính toàn giới để xây dựng dCDN hiệu với tốc độ phân phối tối ưu, chi phí thấp chất lượng phát trực tuyến cao Sản phẩm công ty AIOZ Network (aioz.network) SE501.N21.PMCL – Phạm Hớn Tuyền AIOZ Network chuỗi khối Lớp xây dựng hệ sinh thái Cosmos có khả tương thích với EVM AIOZ Network mang đến khả tương tác chưa có, phí giao dịch thấp, thơng lượng nhanh chóng tính hữu hạn tức AIOZ Network kết nối mạng tồn cầu gồm nút người dùng điều hành để tạo dCDN Bằng cách khai thác khả tính tốn khơng hoạt động tồn giới, trao quyền cho kinh tế phi tập trung AIOZ Network dCDN cung cấp nội dung nhanh đồng thời loại bỏ rào cản người sáng tạo người ủng hộ họ Cho dù văn bản, âm thanh, video hay trò chơi, nội dung ghi lại hay phát trực tiếp, AR hay VR AIOZ Network dCDN cung cấp lượng cho sở hạ tầng kích hoạt kỷ nguyên phần mềm truyền thông AIOZ Beetle (beetle.aioz.io) Là đội nhóm thành lập công ty AIOZ thời đại COVID-19, nhằm với mục đích mang đến robot tự hành hữu ích, thực nhiều tác vụ phức tạp Trong có:   BeetleBot-H robot tự hành, giao hàng theo yêu cầu theo lộ trình thiết lập Robot thực gọi video hỗ trợ khám chữa bệnh, giám sát từ xa, phun xịt khử khuẩn, hỗ trợ phun thuốc khử khuẩn khu vực điều trị bệnh nhân BeetleBot-PV sản phẩm robot giúp giám sát, nhắc nhở cảnh báo người dân có đeo trang hay thực đảm bảo giãn cách an tồn, có tụ tập đơng người hay không SE501.N21.PMCL – Phạm Hớn Tuyền Lịch làm việc thực tập công ty  Thời gian làm việc: ngày 18/09/2022 kết thúc vào ngày 18/12/2022  Thời gian thực tập tuần (làm việc part-time): thứ hai, thứ tư thứ sáu  Giờ làm việc: 8h30 17h30  Thời gian nghỉ trưa: khoảng tiếng 30 (từ 12h – 1h30) SE501.N21.PMCL – Phạm Hớn Tuyền Mơ tả cơng việc Ví trị thực tập: Kỹ sư phát triển phần mềm Frontend (Frontend Engineer) Mô tả cơng việc thực tập: em thực tập với vị trí Frontend Engineer cho phận AI công ty AIOZ Nội dụng thực tập em bao gồm giai đoạn chính: nghiên cứu cơng nghệ phát triển úng dụng   Trong phần nghiên cứu, em tìm hiểu đề tài thực tập giao anh Phát hướng dẫn Trong bao gồm: tìm hiểu vấn đề đề tài, trao đổi với anh Phát để giải đáp thắc mắc, đề xuất số ý kiến liên quan đánh giá tính khả thi chúng, nghiên cứu công nghệ sử dụng dự án thực tập, lập kế hoạch cụ thể cho giai đoạn phát triển ứng dụng phác thảo mẫu (prototype) ứng dụng Trong phát triển ứng dụng, em tiến hành thực việc xây dựng dự án dựa theo kế hoạch cụ thể đề xuất Trong giai đoạn này, em thực việc xây dựng mobile application dựa theo yêu cầu kế hoạch cụ thể đề cập trên, bao gồm: xây dựng phần giao diện theo phác thảo duyệt anh Phát, phát triển tính dựa theo yêu cầu, ghi lại báo cáo tiến độ tối ưu tính Mơ tả quy trình làm việc ngày: trước bắt đầu công việc, em báo cáo tiến độ công việc ngày với anh Phát, trao đổi số vấn đề trình thực dự án Trước kết thúc ngày làm việc, em tổng hợp lại làm gửi báo cáo để anh Phát đánh giá Vào cuối tuần, em có buổi meeting với anh Phát để tổng hợp việc làm tuần, đánh giá tiến độ, chia sẻ kinh nghiệm hướng giải vấn đề SE501.N21.PMCL – Phạm Hớn Tuyền CHƯƠNG 2: NỘI DUNG THỰC TẬ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, thời gian làm việc, nội quy cần phải tuân thủ công ty, phúc lợi, quyền lợi văn hóa làm việc cần biết Được hướng dẫn quy trình làm việc cơng ty, quy trình phát triển phần mềm, mơ tả cơng việc làm ngày (nhận công việc, thực báo cáo công việc) Được cung cấp tài khoản làm việc nội công ty, cổng liên lạc làm việc nội quyền truy cập tài ngun cơng ty Kết quả: tìm hiểu cấu làm việc, nội quy tuân thủ, quy trình phát triển phần mềm cơng việc làm ngày Nghiên cứu kỹ thuật 2.1 Làm quen với 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 q trình làm việc cơng ty Sau thiết lập cơng cụ theo tính cá nhân để thuận tiện việc làm văn phòng:  Gitlab: GitLab hệ thống self-hosted mã nguồn mở dựa hệ thống máy chủ Git dùng để quản lý mã nguồn nhà phát triển ứng dụng GitLab cung cấp giải pháp server cách hoàn hảo nhận đánh giá cao từ cộng đồng  Visual Studio Code: trình soạn thảo văn gồm nhiều ưu điểm bật đơn giản, gọn nhẹ, dễ sử dụng  Slack: ứng dụng giúp cho việc giao tiếp trao đổi thành viên nhóm  Expo: cơng cụ mã nguồn mở miễn phí xây dựng xung quanh React Native để giúp lập trình viên xây dựng dự án iOS Android nhanh chóng JavaScript React  Figma: ứng dụng miễn phí giúp xây dựng mẫu (prototype) ứng dụng cách nhanh chóng, chia sẻ thành viên với Figma cung cấp tài nguyên cho khâu 10 SE501.N21.PMCL – Phạm Hớn Tuyền trình tổ chức thiết kế, từ brainstorm ý tưởng concept khởi tạo code từ mẫu thiết kế Kết quả: làm quen thiết lập phần mềm để hỗ trợ việc làm 2.2 Tìm hiểu React Native kiến trúc React Native Thời gian: ngày Nội dung: Tìm hiểu thành phần khái niệm cốt lõi React Native Trong bao gồm:    Khái niệm Components React, phân tích phân tách app theo components Các khái niệm JSX, render, quản lý State Props Components React Các thành phần Core Components React Native cách React Native render components tảng khác (iOS, Android, Web) Tìm hiểu kiến trúc cũ cho React Native, khác biệt cách vận hành chúng     Fabric: hệ thống render React Native thay render cũ Các hoạt động Fabric thống nhiều logic render C++, cải thiện khả tương tác với tảng JSI: phương thức thay cho Bridge (từ kiến trúc cũ) để tạo kết nối cho JS Thread Native Thread, cải thiện mức độ hiệu việc xử lý logic tương thích với nhiều Javascript Engines khác Turbo Modules: phận giúp cho thành phần Native (Bluetooth, Camera, Location, …) lazy-load thay phải khởi tạo trước ap khởi động, giúp giảm dung lượng tăng tốc khởi động app Threading Model bao gồm threads: UI Thread, Javascript Thread Background Thread Kết quả: Hiểu khái niệm cốt lõi React Native cách thức xây dựng ứng dụng React Native 2.3 Tìm hiểu Expo Thời gian: ngày Nội dung: 11 SE501.N21.PMCL – Phạm Hớn Tuyền Tìm hiểu công cụ Expo cách xây dựng app React Native công cụ Expo   Expo cơng cụ mã nguồn mở miễn phí dùng để xây dựng xung quanh React Native để giúp ta xây dựng dự án iOS Android JavaScript React Với Expo, nhà phát triển tạo ứng dụng React Native mà không gặp phiền toái giống cài đặt cấu hình phần mềm phụ trợ Android Studio, Xcode tất công cụ khác cần thiết để phát triển chạy ứng dụng React Native Gói expo cài đặt ứng dụng React Native Kết quả: Hiểu công cụ Expo khởi tạo dự án app React Native thông qua Expo 2.4 Tìm hiểu GL React & GLSL Thời gian: ngày Nội dung: Tìm hiểu thư viện hỗ trợ GL React GLSL (OpenGL Shading Language), ngơn ngữ tơ bóng cao cấp   GL-React thư viện React để viết soạn trình đổ bóng WebGL ngơn ngữ GLSL Thực hiệu ứng phức tạp cách soạn components từ React OpenGL Shading Language (GLSL) ngơn ngữ tơ bóng cấp cao với cú pháp dựa ngôn ngữ lập trình C Nó tạo OpenGL ARB (OpenGL Architecture Review Board) để cung cấp cho nhà phát triển khả kiểm soát trực tiếp đường ống đồ họa mà không cần phải sử dụng ngôn ngữ hợp ngữ ARB ngôn ngữ dành riêng cho phần cứng Kết quả: Tìm hiểu nghiên cứu GL React ngơn ngữ đổ bóng GLSL Thực dự án cá nhân Trong vòng tuần kế tiếp, em anh mentor Phát hướng dẫn xây dựng ứng dụng mobile chuyên chỉnh sửa ảnh video tảng iOS Trong đó, ta chụp lại ảnh, dùng ảnh từ kho ảnh cá nhân người dùng, để tùy chỉnh sửa ảnh theo số tiêu chí cụ thể 3.1 Công nghệ   Figma React Native 12 SE501.N21.PMCL – Phạm Hớn Tuyền   Expo GL React 3.2 Mơ tả dự án Vì lý bảo mật sách quy định hợp động việc làm, em xin không tiết lộ thông tin chi tiết dự án, em giới thiệu sơ lược công việc em làm Trong trình thực project, em chia nhỏ thành nhiều giai đoạn để thực hiện: 3.2.1 Nghiên cứu Trước tiến hành project, anh Phát có yêu cầu em nghiên cứu app có tính thị trường để tham khảo xem xét luồng hoạt động chúng Qua số app chụp ảnh phổ biến như B612, SNOW, Camera360, Ulike, ProCamera Tiếp đến em nghiên cứu tìm hiểu việc xây dựng tính chỉnh sửa ảnh trực tiếp Tính chia thành phần: đọc liệu ảnh, tương tác/chỉnh sửa ảnh xuất ảnh 3.2.2 Thiết kế mẫu (Prototype) Sau hoàn thành phần nghiên cứu, em chuyển sang việc thiết kế mẫu app công cụ Figma Bản thiết kế cần rõ tương tác nút bấm, luồng chuyển qua lại hình tính chúng 3.2.3 Xây dựng Trong giai đoạn xây dựng này, em chia nhỏ thành cơng việc khác hồn thành chúng thời gian dự tính Chúng bao gồm:       Setup codebase Dựng UI theo mẫu Tính chụp lưu ảnh: tập hợp tính có liên quan đến việc chụp lưu lại ảnh vừa chụp Trong bao gồm như: đổi mặt camera (trước sau), bật tắt đèn Flash, chụp ảnh lưu ảnh vào nhớ Tính quay lưu video: gồm tính chuyên dùng cho việc quay lưu lại video ghi hình Chúng bao gồm: khởi động quay, đếm thời gian quay video, lưu video vào nhớ Tính xem video ảnh: người dùng chọn tính này, app mở nhớ kho lưu trữ ảnh video người dùng Các tính chuyển động hỉnh chuyển đổi qua lại hình Sau hồn thành tính ứng dụng, em tiến hành việc thử nghiệm thực cài đặt tính nâng cao việc tương tác với ảnh video, cụ thể thay đổi trực tiếp lên nguồn ảnh video để tạo cho chúng có hiệu ứng mẻ Cụ thể, em dùng thư viện GL-React để xây dựng thành components React để tạo lớp layer lên hình ảnh video, có tính lớn sử dụng components này: 13 SE501.N21.PMCL – Phạm Hớn Tuyền   Các tính chỉnh sửa ảnh: người dùng chọn xem ảnh từ kho nhớ, người dùng tương tác với ảnh thông qua lựa chọn có sẵn để thay đổi ảnh mình, bao gồm: o Các Filters màu sắc: đa dạng màu Normal, Juno, Sepia, Grayscale, Gingham, Mayfair, Valencia, Night Vision, Warm Cool (mặc định Normal) o Các Options điều chỉnh hiệu ứng ảnh: Contrast, Saturation, Brightness, Blur, Negative, Flyeye o Stickers: cho phép người dùng chèn stickers lên ảnh tùy thích Tính quay video thông qua GL-React: người dùng chọn chuyển sang Camera GL, người dùng quay video thơng qua Filters có sẵn (Normal, Juno, Sepia, Grayscale, Gingham, Mayfair, Valencia, Night Vision, Warm Cool) 3.2.4 Sửa lỗi Cải tiến Sau hoàn thành tính chính, em tiến hành cải thiện project thơng qua việc thêm số tính hỗ trợ cho người dùng: Thông báo cho hành động vừa thực (Toaster) Hoạt ảnh chuyển hình Intro khởi động app    Cuối cùng, em thực việc tối ưu project thông qua việc sửa lỗi liên quan hiệu năng, lỗi giao diện clean code 3.3 Kết Sau hoàn thành dự án, em anh chị nhóm có buổi meeting để demo cho phần sản phẩm app xây dựng, review tổng toàn q trình làm việc nhóm, đánh giá cơng việc đưa lời nhận xét cho em Trong dự án, em học tập nghiên cứu nhiều cơng nghệ thú vị hữu ích việc xây dựng ứng dụng mobile:     React Native Expo Figma Các thư viện hỗ trợ hữu ích GL-React, React Navigation Không thế, em học tập nhiều kỹ mềm quy trình làm việc cơng ty mang tính chun nghiệp:      Kỹ tìm hiểu nghiên cứu công nghệ Tầm quan trọng việc quản lý source code clean code trình bày ý tưởng Khả quản lý công việc thông qua việc lên kế hoạch trước cho dự án Cải thiện khả thuyết trình ý kiến cá nhân trước người Các kiến thức thực tiễn quy trình làm việc ngành Công nghệ phần mềm 14 SE501.N21.PMCL – Phạm Hớn Tuyền Lịch làm việc Tuầ n Công việc Người hướng dẫn  Tìm hiểu nội quy công ty, làm quen với công việc ngày  Thiết lập công cụ, ứng dụng thiết bị cơng ty  Tìm hiểu nghiên cứu React Anh Lê Quang Phát  Tìm hiểu Expo  Nghiên cứu ứng dụng thị trường  Nghiên cứu kiến thức OpenGL, GLSL Anh Lê Quang Phát  Lên kế hoạch cho dự án  Vẽ mẫu cho ứng dụng Anh Lê Quang Phát  Xây dựng UI cho ứng dụng  Dựng luồng di chuyển app Anh Lê Quang Phát Cài đặt tính ảnh:  Chụp lưu ảnh  Chỉnh sửa ảnh (Filters) Anh Lê Quang Phát  Chỉnh sửa ảnh (Options)  Chèn Filters vào ảnh Anh Lê Quang Phát Cài đặt tính video:  Quay lưu video  Quay video lớp layer GL-React Anh Lê Quang Phát     Thêm tính cải tiến Thơng báo người dùng Animations tương tác Intro app khởi động Anh Lê Quang Phát  Sửa lỗi ứng dụng  Tham gia họp để nhận Nhận xét người hướng dẫn A Lê Quang Phát A Nguyễn Thanh Hưởng 15 SE501.N21.PMCL – Phạm Hớn Tuyền review chỉnh sửa 10  Tối ưu code  Clean code 11  Báo cáo dự án Anh Lê Quang Phát A Lê Quang Phát A Đỗ Khánh Long Tường A Nguyễn Thanh Hưởng 16