báo cáo thực tập react native developer

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.95 MB, 19 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM </b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>LỜI MỞ ĐẦU </b>

Trong cuộc cách mạng công nghiệp 4.0, cơng nghệ thơng tin nói chung và ngành Cơng nghệ phần mềm nói riêng ln là nhân tố đóng vai trị quan trọng trong q trình phát triển của xã hội.

Trong bối cảnh cơng nghệ hóa và phát triển mạnh mẽ của các thiết bị di động như hiện nay, nhu cầu của con người trong việc sử dụng các ứng dụng trên thiết bị di động ngày càng tăng. Điều này đã tạo ra cơ hội lớn cho các lập trình viên ứng dụng di động.

Lập trình ứng dụng di động là quá trình tạo ra các ứng dụng trên các thiết bị di động như điện thoại thơng minh, máy tính bảng,... Các ứng dụng này có thể được sử dụng cho nhiều mục đích khác nhau, bao gồm giải trí, giáo dục, kinh doanh,... Chung quy lại, các ứng dụng di động đều có vai trị cốt lõi là hỗ trợ con người trong cơng việc và đời sống.

Trong bối cảnh thị trường ứng dụng di động ngày càng cạnh tranh khốc liệt, việc tạo ra một ứng dụng có đầy đủ chức năng khơng cịn đủ để thu hút người dùng nữa. Các ứng dụng cần phải có giao diện đẹp, trải nghiệm sử dụng tốt để đáp ứng nhu cầu ngày càng cao của người dùng và đòi hỏi thời gian phát triển ngắn. Với mong muốn tạo ra những sản phẩm hữu ích, góp phần nâng cao chất lượng sống của con người trong thời gian ngắn và thách thức bản thân trên con đường theo đuổi niềm đam mê với công nghệ, em đã lựa chọn React Native Developer là định hướng cho việc học cũng như nghề nghiệp trong tương lai.

Sau những năm tháng trong môi trường đại học, với mong muốn áp dụng những kiến thức đã học và có được trải nghiệm trong mơi trường thực tế, em đã quyết định tham gia vào TGL – một môi trường lý tưởng và chuyên nghiệp để thực hiện dự định của mình.

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>LỜI CẢM ƠN </b>

Em xin trân trọng gửi lời cảm ơn chân thành đến TGL Solutions đã tạo điều kiện cho em có cơ hội được thực tập tại cơng ty. Dù trong thời gian ngắn nhưng nhờ sự chỉ dẫn nhiệt tình của anh Phan Huỳnh Minh Duy, em đã tiếp thu những kiến thức quan trọng để có thể tham gia một dự án thực tế.

Chân thành cảm ơn TGL, đặc biệt là các anh chị trong Cloud Solutions Department đã bỏ ra nhiều thời gian, công sức để hướng dẫn, giúp đỡ em tận tình trong khi làm quen môi trường mới cũng như trong việc tiếp cận kiến thức cơng nghệ, kỹ năng lập trình và tư duy sản phẩm để có thể thực hiện tốt dự án cá nhân và dự án thực tế trong thời gian qua.

Em 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áo cáo này.

TP. HCM, ngày 25 tháng 12 năm 2023

Phan Thanh Tú

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP ... 7

1.1. Giới thiệu về TGL Solutions ... 7

1.1.1. Thông tin chung ... 7

1.1.2. Về TGL ... 7

1.2. Sản phẩm công ty ... 9

1.2.1. App Kensa Cloud ... 9

1.2.2. App BLE ... 10

1.3. Lịch làm việc khi thực tập tại công ty ... 11

CHƯƠNG 2: NỘI DUNG THỰC TẬP ... 12

2.1. Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty ... 12

2.2. Nghiên cứu kỹ thuật ... 12

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

Hình 2.2. Modal todo detail ... 15

Hình 2.3. Tạo mới một todo ... 15

<b>MỤC LỤC BẢNG BIỂU </b>

Bảng 3.1. Các chuẩn đạt được ... 18

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP </b>

<b>1.1. Giới thiệu về TGL Solutions </b>

<b>1.1.1. Thơng tin chung </b>

<i><small>Hình 1.1. Logo TGL Solutions </small></i>

• Tên cơng ty: TGL SOLUTIONS • Thành lập: 06/09/2019

• CEO: Tiến sĩ Lê Tiến Triển

• Lĩnh vực kinh doanh: xuất khẩu phần mềm CNTT • Website: Thơng báo: Khi một sự việc thay đổi, cần phải thông báo sự việc cho tất cả các bên liên </b>

quan đều biết.

<b>• Giải thích: Khi trình bày vấn đề đó cần phải giải thích rõ mục đích của cách làm, từ </b>

mục đích hãy suy ngược ra phương pháp để đạt được mục đích đặt ra.

<b>• Luận bàn: Hãy đưa vấn đề ra để teamwork với tất cả mọi người. Kết nối nhiều ý tưởng </b>

sẽ giúp ta giải quyết vấn đề hoàn thiện hơn và tối ưu hơn.

• Tầm nhìn: Nâng tầm giá trị con người Việt!

• Sứ mệnh: Luôn lấy con người làm trung tâm trong mọi quyết định và hành động.

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b>Slogan: SMART & SPEED SOLUTIONS </b>

• Smart: Khi giải quyết vấn đề cần chọn cách làm Smart nhất và hiệu quả nhất.

• Speed: Thay vì chần chừ, hãy quyết định nhanh, để nếu có sai lầm thì sửa chữa nhanh. • Solutions: Kết hợp “Smart” và “Speed” sẽ cho ra “Solutions” hiệu quả nhất, mang lại

<b>giá trị tối ưu cho khách hàng. </b>

<b>• Dựa vào giá trị cốt lõi Nhân Hịa, cơng ty luôn cố gắng xây dựng môi trường làm việc </b>

thoải mái nhất, tạo mọi điều kiện để nhân viên phát huy tiềm năng và thế mạnh của bản thân.

• Nhân

o Là con người. Tơn chỉ của TGL chính là xây dựng cơng ty vững mạnh lấy con người làm trung tâm.

S (Safety) >> Q (Quality) > D (Delivery) > C (Cost)

o S (Safety): Sự an toàn, là sức khỏe, là ưu tiên trên hết của tất cả mọi thành viên trong công ty. S là quan trọng nhất, và lớn hơn Q rất nhiều lần.

o Tiếp sau S là Q: Quality, là chất lượng sản phẩm. Luôn phải ưu tiên chất lượng sản phẩm hơn thời hạn giao hàng (D: Delivery) và chi phí (C: Cost).

o Tức là dù cho đến thời hạn nộp hàng nhưng chất lượng chưa tốt, thì cũng ưu tiên nâng cao chất lượng sản phẩm.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<b>1.2.1. App Kensa Cloud </b>

<i><small>Hình 1.2. App Kensa Cloud </small></i>

<b>CÔNG NGHỆ: React, React Native, Ant Design, TailwindCSS, .NET VẤN ĐỀ & BỐI CẢNH: </b>

Thông thường, chúng ta phải mất rất nhiều thời gian và cơng sức mới có thể tiến hành khảo sát cơng trình nhà ở, chụp ảnh để tổng hợp kết quả báo cáo cấp trên.

• Công tác nghiệm thu giữa Chủ đầu tư (chủ đầu tư bỏ tiền vào BĐS) và Đơn vị thi cơng cịn thiếu minh bạch, cơ chế quản lý cồng kềnh, kém hiệu quả.

• Việc triển khai thực địa thiếu so sánh trực quan nên khó đánh giá chất lượng cơng trình. • Hệ thống lưu trữ và đồng bộ dữ liệu sau khi nghiệm thu giữa các bên chưa nhất quán

và chuyên nghiệp.

• Khó theo dõi dữ liệu xây dựng và năng suất theo thời gian thực.

Từ những vấn đề đó, chúng tôi đã lên ý tưởng và tạo ra hệ thống Kensa Cloud với mục đích giải quyết tối đa những vấn đề nêu trên. Đây là một ứng dụng kiểm tra cho phép bạn dễ dàng thực hiện các cuộc khảo sát trên điện thoại thơng minh của mình và tự động tạo báo cáo.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

Khảo sát nghiệm thu cơng trình nhanh chóng và dễ dàng chỉ bằng một chiếc điện thoại (trực tuyến hoặc ngoại tuyến), tối ưu hóa năng suất của nhân viên.

Thúc đẩy tính minh bạch trong nghiệm thu, trực tiếp nâng cao chất lượng sản phẩm. Tạo môi trường làm việc tối ưu giữa nhân viên khảo sát và quản trị viên.

Tự động tạo báo cáo và gửi kết quả lên đám mây chỉ bằng một nút bấm, khả năng kế thừa và tùy chỉnh báo cáo cực kỳ mạnh mẽ.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

Với ứng dụng Bluetooth kết hợp wireless và cảm biến Chino MF100 sẽ là giải pháp tuyệt vời cho việc theo dõi và thống kê nhiệt độ trong thời gian dài.

Ứng dụng bao gồm các chức năng chính sau:

• Theo dõi và hiển thị nhiệt độ của nhiều cảm biến theo thời gian thực. • Quản lý kết nối với các cảm biến.

• Thống kê chi tiết kết quả đo theo ngày, giờ đo. • Phát âm thanh, gửi email khi có "dị thường".

• Cài đặt thông số linh hoạt các "dị thường" như nhiệt độ giới hạn, lỗi cảm biến, v.v.

• Thời gian làm việc từ thứ 2 đến thứ 6. • Core-time: 9h00’ đến 16h00’.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>CHƯƠNG 2: NỘI DUNG THỰC TẬP </b>

<b>2.1. Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty </b>

Thời gian: 1 ngày Nội dung:

• Được hướng dẫn đăng nhập các nền tảng của công ty

• Được giới thiệu, hướng dẫn về các quy tắc làm việc ở TGL thông qua các tài liệu hướng dẫn về: các quy định, văn hố cơng ty; quy trình phát triển theo chuẩn ISO 9001, hệ thống quản lý an tồn thơng tin theo chuẩn ISO 27001.

• Làm bài test về UI/UX design, Self-test & security, test phong cách làm việc. Kết quả:

• Hiểu thêm về nguyên tắc Thông báo - Giải thích - Luận bàn, Tinh thần 3T, 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.

• Hiểu được mơi trường, các quy định và văn hoá làm việc.

<b>2.2. Nghiên cứu kỹ thuật </b>

Nội dung: tìm hiểu về cơng ty, về cơng nghệ và cơng cụ sẽ sử dụng

• Sau khi cài đặt môi trường và clone source code, em được yêu cầu tìm hiểu cấu trúc của dự án.

• Chạy source và tìm hiểu sơ về các chức năng có trong app, nắm được flow xử lý ở mức cơ bản.

• Được giải thích về lịch trình làm việc trong tuần, tham gia meeting với team và được giới thiệu lịch trình cuộc họp, đối tác, vai trị của team và quy trình hoạt động từ lúc nhận được yêu cầu của khách hàng.

• Học về cách quản lý Git flow Kết quả:

• Hiểu về cấu trúc của dự án sắp làm việc

• Nắm được các chức năng có trong dự án và luồng xử lý của từng chức năng • Hiểu được về quy trình làm việc, đối tượng khách hàng, cách vận hành của team. • Được hiểu sâu thêm về các phương pháp tạo, merge branch cũng như 2 phương án

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

o Cách truyền animation styles vào components

o Sự khác biệt giữa animating styles và props và làm thế nào để handle chúng bằng cách sử dụng useAnimatedStyle và useAnimatedProps.

o Cách Customizing animations thơng qua withTiming, withSpring và withDecay • Tìm hiểu về MMKV:

o MMKV là một mobile key-value storage framework nhẹ, hiệu quả được phát triển bởi WeChat.

o react-native-mmkv là một thư viện cho phép dễ dàng sử dụng MMKV bên trong các ứng dụng React Native. Nó cung cấp các liên kết nhanh và trực tiếp với thư viện C++ gốc có thể truy cập được thông qua API JS đơn giản.

o Các chức năng cơ bản:

§ Get và set strings, booleans, numbers

§ Fully synchronous calls, khơng async/await, Promises, Bridge. § Hỗ trợ mã hóa để bảo mật dữ liệu

§ Có thể tạo nhiều phiên bản lưu trữ riêng biệt (tách biệt user-data với global data)

§ Customize storage location

§ Hiệu suất cao nhờ được viết bằng C++ (Nhanh hơn AsyncStorage khoảng 30 lần)

§ Sử dụng JSI thay cho "old" Bridge

§ Hỗ trợ đa nền tảng: iOS, Android và Web § Dễ sử dụng với React Hooks API

• Tìm hiểu về React Native Elements:

o Mục đích: cung cấp một bộ all-in-one UI kit để tạo ứng dụng bằng React Native. Các thành phần UI được phát triển bởi các nhà phát triển nguồn mở trên toàn thế giới. React Native Elements giúp bạn loại bỏ sự cồng kềnh trong việc lắp ráp các gói này bằng cách cung cấp một bộ công cụ sẵn có với API và giao diện nhất qn.

• Tìm hiểu về React Navigation • Tìm hiểu về FastImage:

o Các vấn đề khi sử dụng với element Image trong React Native: § Nhấp nháy hình ảnh.

§ Khơng tìm thấy hình ảnh trong bộ nhớ đệm. § Tải hình ảnh chậm từ bộ nhớ đệm.

§ Hiệu suất tổng thể kém.

o FastImage là một giải pháp thay thế cho thành phần Image nhằm giải quyết các vấn đề trên

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

o Các tính năng:

§ Aggressively cache images. § Add authorization headers. § Prioritize images.

§ Preload images. § GIF support. § Border radius. • Tìm hiểu về FlashList:

o FlashList là một thành phần React Native cung cấp cách hiển thị danh sách nhanh và hiệu quả. Nó là một giải pháp thay thế cho thành phần FlatList của React Native.

o FlashList hoạt động bằng cách tái sử dụng các thành phần danh sách trong bộ nhớ đệm, thay vì tạo lại các thành phần mới cho mỗi lần cuộn. Điều này giúp cải thiện hiệu suất đáng kể, đặc biệt là đối với các danh sách dài.

• Thực hiện dự án cá nhân

Kết quả: nắm được cơ bản về vai trị và cách sử dụng của các cơng nghệ trên.

Nội dung: Tham gia vào dự án của cơng ty.

• Tiến hành họp team hàng tuần để phân chia công việc và tổng kết hiệu suất làm việc của các task trước đó.

• Các ngày sau đó sẽ tiến hành thực hiện task dựa trên phân công trước đó. Kết quả: đáp ứng được yêu cầu khách hàng đúng thời hạn.

o Design cho phép tùy chọn, nhưng khơng được sơ sài

o Có sử dụng camera & pick ảnh (dùng các thư viện liên quan đến image picker)

React native, React Navigation, Redux toolkit, MMKV, React native Element, FlastList, FastImage.

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

• Tạo dự án React Native sử dụng Typescript.

• Sử dụng React Navigation để tạo một thanh bottom bar và xử lý các logic thay đổi giữa các màn hình.

• Dùng MMKV để tạo và quản lý local storage

• Xử lý các tương tác như thêm, xố, sửa todo với Redux Toolkit.

• Sử dụng FlashList để render danh sách các việc cần làm. Khi nhấn vào sẽ hiện modal detail cho phép sửa tiêu đề, mơ tả, các image và sub task.

• Các image trong detail được thêm vào bởi Image Picker và được render bằng FastImage.

• Mỗi subtask là một Swipeable, khi vuốt sang bên sẽ hiện button xố và edit subtask.

<i><small>Hình 2.1. Màn hình home Hình 2.2. Modal todo detail Hình 2.3. Tạo mới một todo </small></i>

• Hồn thành các yêu cầu được đề ra.

• Hiểu sâu hơn và biết cách sử dụng từng cơng nghệ.

• Biết cách áp dụng các công nghệ cùng nhau để tạo ra một sản phẩm hoàn chỉnh.

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

<b>Dự án: Một ứng dụng phục vụ mục đích liên lạc giữa khách hàng và nhân viên liên quan đến </b>

<b>Công nghệ: React Native, .NET Core, MySQL, Firebase Quá trình thực hiện: </b>

• Đọc source, tìm hiểu về cấu trúc project, tìm hiểu các tính năng và flow xử lý của từng

• Tham gia các buổi meeting để bàn luận về các yêu cầu của khách hàng và phân chia

• Hiện thực các yêu cầu về UI; improve performance; kiểm tra các chức năng, tìm hiểu nguyên nhân và đối ứng bug nếu có thể; tham gia vào q trình phát triển tính năng mới

• Nhận sự trợ giúp để hồn thành task khó được u cầu. Hỗ trợ thành viên khác các task

<b>Thuận lợi: được thời gian tìm hiểu về cơng nghệ sử dụng, có kiến thức nền tảng về React </b>

Native và các cơng nghệ có liên quan giúp đơn giản hố việc hiểu và tìm giải pháp cho vấn đề. Được sự giúp đỡ nhiệt tình của các anh chị trong team trong q trình hồ nhập và thực hiện dự án.

<b>Khó khăn: những task khó và có xử lý phức tạp cần nhiều thời gian và sự giúp đỡ để tìm hiểu </b>

(về config, về những cập nhật trong công nghệ).

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<b>CHƯƠNG 3: TỔNG KẾT </b>

Là một sinh viên năm cuối khoa Công nghệ Phần mềm, quãng thời gian 3 thực tập tại công ty TGL Solutions đã giúp em cải thiện bản thân rất nhiều trong quy trình làm việc thực tế, tác phong của người kỹ sư phần mềm. Đây là một trải nghiệm vô cùng quý giá, giúp em học hỏi và trưởng thành rất nhiều.

Trong quá trình thực tập, em được tham gia vào các dự án thực tế của công ty. Điều này giúp em hiểu rõ hơn về quy trình làm việc của một kỹ sư phần mềm. Từ giai đoạn lên ý tưởng, phân tích u cầu, thiết kế, lập trình, kiểm thử, triển khai, cho đến bảo trì và nâng cấp, em đều được trải nghiệm thực tế.

Em nhận ra rằng, làm việc thực tế đòi hỏi sự tỉ mỉ, cẩn thận và khả năng giải quyết vấn đề nhanh chóng. Em cũng học được cách làm việc nhóm hiệu quả và cách quản lý thời gian hợp lý. Bên cạnh kiến thức chuyên môn, em cũng được trau dồi các kỹ năng mềm cần thiết cho một kỹ sư phần mềm như sử dụng mail, quản lý ticket, làm việc nhóm, giao tiếp với cấp trên, học hỏi thêm về chuyên môn các công nghệ mới cũng như tăng độ thành thạo của các kỹ năng hiện có. Các kỹ năng này giúp em tự tin hơn trong công việc và giao tiếp hiệu quả hơn với mọi người. Có cơ hội được giao tiếp với các anh chị trong công ty về kinh nghiệm làm dự án. Tất cả đều là những trải nghiệm vô giá.

Chỉ trong thời gian hạn chế, em đã hoàn thành dự án cá nhân trong q trình training với các tính năng, yêu cầu đặt ra ban đầu. Hơn thế nữa, bằng cách áp dụng các kiến thức đã được training vào dự án cá nhân đã giúp em phần nào hiểu rõ hơn về công nghệ, tăng độ thành thạo và tăng cả trải nghiệm khi sử dụng sản phẩm bằng cách thực hiện những cải thiện dựa trên góp ý của người hướng dẫn để dự án trở nên hoàn thiện hơn. Kết quả mang lại vượt cả sự mong đợi của em khi dự án cá nhân lại được các anh chị trong team đánh giá cao về cả thiết kế và vận dụng kiến thức vào thực tế.

Trong thời gian thực tập, em cũng được thực hiện một dự án cá nhân. Đây là cơ hội để em áp dụng những kiến thức đã học vào thực tế. Dự án của em là một ứng dụng di động todo list dùng để quản lý các task. Em đã sử dụng các công nghệ React Native, Redux và TypeScript để xây dựng ứng dụng.

Ứng dụng của em được đánh giá cao bởi các anh chị trong công ty về cả thiết kế và vận dụng kiến thức vào thực tế. Điều này khiến tôi rất tự hào và có thêm động lực để học hỏi và phát triển.

Khi tham gia vào dự án thực tế, em cũng hoàn thành tốt các tác vụ đúng hạn và đạt chất lượng tốt. Việc này được chứng minh nhờ vào những đánh giá tích cực của anh mentor và các anh chị cùng bộ phận. Sau tháng thực tập đầu tiên, em được đánh giá chuyên môn rất tốt về React Native, ReactJS và TypeScript. Hiệu quả công việc cũng được đánh giá ở mức cao khi các task được giao hoàn thành tốt và đúng thời hạn được giao.

Thời gian thực tập cũng giúp bản thân em phát triển và cải thiện được nhiều mặt, cụ thể hơn là về tác phong làm việc, văn hoá làm việc ở công ty. Tuy chưa được trải qua môi trường làm việc chuyên nghiệp trước đây, nhưng nhờ vào những kiến thức có được tại trường và các thơng

</div>