Báo cáo thực tập lập trình ứng dụng mobile với react native tại Công ty KMS-Technology

Với tốc độ phát triển vô cùng mạnh mẽ, các ứng dụng di động là nhân tố kích thích sự phát triển của công nghệ thông tin thế giới, cả về phần cứng và phần mềm. Nhắc đến lập trình ứng dụng là nhắc đến những developer như bản thân em, những con người ngày ngồi cạnh máy tính để viết từng dòng code, tối ưu từng tập dữ liệu, thiết kế hàng loạt các tính năng với mục đích đem lại tiện lợi cho người dùng và đẩy mạnh sự phát triển của phần mềm. Thế nhưng, quá trình để xây dựng một phần mềm thực sự là như thế nào? Từ lúc triển khai ý tưởng của một phần mềm, cho đến bước thiết kế UX, UI, cho đến lúc đặt tay vào viết dòng code đầu tiên, rồi những cuộc họp hàng ngày để giải quyết vấn đề của mỗi thành viên trong team, những lúc cãi nhau về một tính năng của ứng dụng,.... Nó thực sự là một nghệ thuật trong lĩnh vực công nghệ thông tin chứ không đơn giản như chúng ta đã từng nghĩ

Trang 1

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

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

-o0o

BÁO CÁO THỰC TẬP LẬP TRÌNH ỨNG DỤNG MOBILE VỚI

REACT-NATIVE

Phan Trần Bảo Long

TP HCM, ngày 06 tháng 06 năm 2019

Trang 2

Với tốc độ phát triển vô cùng mạnh mẽ, các ứng dụng di động là nhân tố kích thích

sự phát triển của công nghệ thông tin thế giới, cả về phần cứng và phần mềm

Nhắc đến lập trình ứng dụng là nhắc đến những developer như bản thân em, những con

người ngày ngồi cạnh máy tính để viết từng dòng code, tối ưu từng tập dữ liệu, thiết kế hàng loạt các tính năng với mục đích đem lại tiện lợi cho người dùng và đẩy mạnh sự phát triển của phần mềm Thế nhưng, quá trình để xây dựng một phần mềm thực sự là như thế nào? Từ lúc triển khai ý tưởng của một phần mềm, cho đến bước thiết kế UX, UI, cho đến lúc đặt tay vào viết dòng code đầu tiên, rồi những cuộc họp hàng ngày để giải quyết vấn đề của mỗi thành viên trong team, những lúc cãi nhau về một tính năng của ứng dụng, Nó thực sự là một nghệ thuật trong lĩnh vực công nghệ thông tin chứ không đơn giản như chúng ta đã từng nghĩ

Trong thời gian thực tập tại KMS, em đã được tiếp cận và tham gia trực tiếp vàoc ác dự án thực tế, được đóng góp vào những tính năng của dự án mà mình tham gia vể cả mặt kĩ thuật lẫn ý tưởng , đó là những trải nghiệm hết sức thú vị và mới mẻ đối với những sinh viên năm cuối như em

Trang 3

Trân trọng gửi lời cảm ơn Công ty KMS-Technology đã tạo điều kiện cho em có cơ

hội được thực tập tại công ty

Trong kỳ thực tập vừa qua nhờ sự giúp đỡ tận tình của mọi người mà em đã có cơ hội được

tiếp cận với toàn bộ quá trình xây dựng, phát triển một dự án Tìm hiểu được quy trình và vận dụng

được khả năng của mình vào một ứng dụng di dộng thực tế với React Native và NodeJS

Em xin gửi lời cảm ơn đến anh Long Cao và anh Long Phan và mọi người trong team Grove cũng như

đã giúp đỡ và hỗ trợ em trong quá trình thực tập, đưa ra nhiều lời khuyên hữu ích và hướng dẫn tận tình

trong quá trình làm việc

Ngoài ra, em xin cảm ơn ThS Phạm Thi Vương và các chị trong team HR đã hỗ trợ em

rất nhiều trong quá trình thực tập

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ài báo cáo này

Lục Trường Phong HCM, ngày 6 tháng 6 năm 2019

Trang 5

I GIỚI THIỆU VỀ CÔNG TY 1

Trang 6

I GIỚI THIỆU VỀ CÔNG TY

KMS Technology là một công ty có cung cấp phần mềm và dịch vụ cho Mỹ có các chi nhánh lớn đặt tại Việt Nam Công ty làm việc chính với các công ty phần mềm khác để đẩy nhanh quá trình phát triển và cung cấp các giải pháp phần mềm cũng như outsource cho đối tác nước ngoài một cách đơn giản và nhanh chóng

KMS là chữ viết tắt của Khai Minh Solutions với logo có hình trống đồng màu xanh da trời Công

ty được thành lập từ năm 2009 với co-founder CEO là Vu Lam và co-founder Josh Lieberman Từ đó đến nay, công ty đã cung cấp thành công hàng trăm sản phẩm lớn nhỏ khác nhau cho các doanh nghiệp

để từ đó thực hiện các quy chuẩn xây dựng phần mềm một cách chuyên nghiệp và nhanh chóng hơn Hiện công ty đang có bốn văn phòng ở VN và hai văn phòng ở US, với khoảng 1400 nhân viên

Văn phòng UpStar nơi em thực tập

Trang 7

II NỘI DUNG NGHIÊN CỨU & TÌM HIỂU

2.1 Tìm hiểu công ty và thiết lập môi trường làm việc

Thời gian: 2 ngày

• Nội dung:

- Tham gia buổi giới thiệu về công ty, cách tổ chức của công ty, quá trình thành lập và phát triển của công ty do bên HR tổ chức

- Phổ biến quy định làm việc tại công ty

- Gặp mặt giới thiệu, làm quen và đi ăn trưa với các bạn trong team Dev và các team khác

- Setup enviroment và cài đặt các phần mềm liên quan cho công việc như Android Studio , Xcode, Visual code,

- Tìm hiểu cách sử dụng JIRA , Zeplin

2.2 Nghiên cứu các công nghệ liên quan

2.2.1 Mobx

Mobx là một thư viện hổ trợ việc quản lý State của React ( giống như Context API hay Redux) đơn giản và dễ dàng mở rộng nhờ áp dụng TFRP ( functional reactive programming )

Trang 8

Việc sử dụng Mobx sẽ làm cho app React Native trở về giống mô hình MVVM , mọi logic được xử lý

ở ViewModel và View chỉ phải đảm nhận việc render

Cả React và MobX đều cung cấp một giải pháp tối ưu và duy nhất cho các vấn đề phổ biến trong phát triển ứng dụng React cung cấp các cơ chế để kết xuất tối ưu UI bằng cách sử dụng DOM ảo giúp giảm việc thay đổi DOM không cần thiết MobX cung cấp các cơ chế để đồng bộ hóa và tối ưu State của React components nhờ việc theo dõi và cập nhật liên tục State Đơn giản là trong Mobx , state là

mutable , bạn có thể thay đổi nó trực tiếp mà không cần thông qua setState()

- State của component sẽ được lưu trữ ở MobxClass ( tương tư viewmodel) dưới dạng các

observable variable, và các function logic cũng được viết ở đây

- Component khi cần sử dụng thì phải inject class vào với decorate @observer

- Nhiều component có thể sử dụng chung một

Tài liệu tham khảo : https://mobx.js.org/

2.2.2 Plugin Prettier và Eslint

Eslint

ESLint là một chương trình mã nguồn mở, theo thuật ngữ tiếng Anh là JavaScript linting utility do

Nicholas C Zakas viết ra vào tháng Sáu 2013 Code linting là một dạng phân tích tĩnh (static analysis)

thường được sử dụng để tìm những patterns hoặc code có vấn đề Việc đánh giá code có vấn đề hay không sẽ căn cứ vào những quy chuẩn về cách viết code đã thống nhất từ trước (trong nội bộ nhóm, nội

bộ công ty, hay ngành nhỏ) Hầu hết các ngôn ngữ lập trình đều có các công cụ code linters riêng, và trình biên dịch của ngôn ngữ đó thường đi kèm việc linting ngay trong quá trình biên dịch

Trong lĩnh vực lập trình máy tính, lint là một ứng dụng Unix giúp cảnh báo các vấn đề khi viết code của ngôn cữ C Nói rộng ra, lint hoặc linter là công cụ giúp phát hiện và cảnh báo các sai sót khi viết

ngôn ngữ lập trình, bao gồm cả các vấn đề liên quan đến định dạng (như dấu chấm phẩy, xuống dòng,

lùi vào đầu dòng, v.v.) Các công cụ này thường thực hiện phép phân tích tĩnh (static analysis) các

đoạn code

Lợi ích :

● Giúp ngăn ngữ một vài loại bug, bao gồm cả những loại bug đem loại rất nhiều phiền hà cho quá trình gỡ lỗi, khiến chương trình không chạy được

● Tiết kiệm thời gian của lập trình viên

● Giúp việc viết code ngon lành hơn

Trang 9

● Dễ dàng sử dụng

Việc "linkting" code JavaScript còn giúp bạn tránh được các lỗ hổng bảo mật thông dụng (như XSS),

vấn đề liên quan đến "viết code sao cho dễ đọc dễ nhìn", v.v

Prettier

Prettier là một công cụ giúp format code của bạn cho đẹp hơn Đẹp ở đây hoàn toàn mang quan điểm chủ quan

của tác giả chương trình này (thế nên nó mới được gọi là "an opinionated code formatter") Chương trình này sẽ

yêu cầu code của bạn phải theo một format nhất định và thống nhất, thực hiện qua quá trình "parsing" và printing" toàn bộ code của bạn dựa trên những quy tắc nào đó, ví dụ ngắt dòng, thêm/ bớt ngoặc tròn ngoặc nhọn khi cần

"re-Lợi ích

1 Xây dựng và cưỡng chế việc sử dụng 1 định dạng code chung

2 Giúp đỡ những người mới

3 Giúp tập trung vào việc viết code thay vì mất thời gian vào ngồi căn chỉnh định dạng code

4 Dễ dàng được cộng đồng lập trình chấp nhận

5 Format lại toàn bộ source code hiện tại

6 Thể hiện đẳng cấp theo kịp thời đại

Tài liệu tham khảo : https://eslint.org/

https://github.com/prettier/prettier-vscode

2.2.3 Plugin FlowType

Một cách ngắn gọn nhất, ngôn ngữ statically-typed thì type của biến có thể xác

định lúc compile (trước khi chạy), ngôn ngữ dynamically-typed thì chỉ biết được type của biến lúc run time

Như vậy với ngôn ngữ dạng statically-typed, lỗi sẽ được báo ngay khi build hoặc

trên editor khi chúng ta sử dụng type không đúng Nhưng với những ngôn ngữ kiểu

dynamically-typed như Javascript nó sẽ khác chút Những trường hợp quên

mất kiểu của biến như vậy rất dễ gặp trong lúc code Việc sử dụng static type check

sẽ giúp phát hiện lỗi sớm hơn, mà phát hiện lỗi sớm hơn thì sẽ tốt hơn, right?

Flow là thư viện của Facebook, hỗ trợ tốt nhất cho React, đứng trên góc độ của người làm sell, nếu nói chúng ta sử dụng Flow từ Facebook sẽ ngon hơn, Typescript

là superset của javascript, việc dùng Typescript cũng thay đổi khá nhiều thứ khác

Trang 10

trong project, mình cảm thấy nó tiêu tốn khá nhiều thời gian hơn trong lúc

dev, PropTypes đã ko còn được quan tâm nhiều như trước nữa từ sau khi có Flow

III CHI TIẾT PROJECT GROVE-ONE

3.1 Giới thiệu về dự án

Grove-One là dự án mobile app thuộc nhóm dự án Grove bao gồm Grove-Enterpise ( WebApp ), Grove-Analytics và Grove-One

Grove là nền tảng HCM ( Human Capital Management ) mới và tiện ích để giúp các công ty quản

lý nhân viên của mình, nó không chỉ hỗ trợ bên HR trong hoạt động hàng ngày mà còn cải thiện trải nghiệm của nhân viên và tăng sự gắn kết của

Mục tiêu hướng tới:

- UX / UI ấn tượng, dễ sử dụng

- Hiệu suất và khả năng mở rộng cao

- Tính năng đa dạng với khả năng linh hoạt và thích ứng cho nhiều mô hình HRM của các công

ty

Trang 11

- Nền tảng mở HCM (hỗ trợ tích hợp với các hệ thống khác)

- Bảo mật và quyền riêng tư

- Khả năng phân tích kinh doanh

Nếu Grove-Enterpise dành cho bộ phận HR cũng như bên quản lý của công ty thì Grove-One là ứng dụng dành cho nhân viên để hỗ trợ họ hằng ngày với các tính năng như TimeSheet ( lịch biểu ), Leave Management ( quản lý ngày phép ) , Directory ( Danh bạ điện thoại ) , …

Trang 13

3.2 Quá trình làm việc

Trang 14

- Training về React Native và cái công nghệ liên quan

- Clone Login và Emoji của app Facebook

- Clone swipe behavior của Tinder

Issue Type Key Summary Assignee Status Updated

Untestable

Task

32

GO-GO-20 implement UI Phong

GO-GO-21 implement UI Phong

Phong Luc

Done 22/Mar/19

11:07 AM

Trang 15

Phong Luc

Trang 16

Bug

GO-229

[Directory- Offline Message]

Message does not disappear when I manual reload list of Directory

Phong Luc

Closed 11/Apr/19

3:54 PM

3.3 Kết quả đạt được

- Nắm vững các kiến thức nền về React Native và ngôn ngữ JavaScript

- Có đủ kiến thức để thực hiện các mảng nâng cao trong React Native như Animation, implement các module bằng code native (Java , Objective-C )

- Cải thiện kĩ năng giao tiếp và sắp xếp thời gian công việc

IV CHI TIẾT PROJECT SPRYNKL

4.1 Giới thiệu về dự án

Sprynkl là ứng dụng nằm trong nhóm Grove Project với mục đích xây dựng Team culture

Mục tiêu chín của dự án là “Give your employees a voice”:

▪ Nhận phản hồi, góp ý nhanh chóng từ nhân viên

▪ Xoá bỏ ngăn cách giữa nhân viên trong môi trường làm việc

▪ Tạo ra một môi trường làm việc cởi mở và năng động Ứng dụng Sprynkl hoạt động với ba tiêu chí :

▪ Đơn giản: Xây dựng ứng dụng với giao diện đơn giản và dễ sử dụng để có thể dễ

dàng tiếp cận với người dùng (employee)

▪ Nhanh chóng: Tạo bảng khảo sát và đưa đến những người khác trong Team một cách nhanh chóng Tương tác liên tục giữa những người trong team

▪ Trung thực: Bạn có thể gửi góp ý cho một người khác trong team dưới dạng Ẩn danh ( Anoynimous ), danh tính của bạn sẽ được bảo mật

Trang 17

Với Sprynkl, bạn có thể tham gia một hoặc nhiều team Lời mời có thể được chấp nhận khi bạn đăng nhập lần đầu hoặc sau khi bạn đăng nhập Chuyển đổi giữa tất cả các đội bằng cách chọn vào hình đại diện của team đó

Employee tương tác với nhau và xây dựng Team Culture của họ qua việc chia sẽ, khảo sát,gớp ý lẫn nhau để hiểu nhau hơn Nhằm đáp ứng cho việc này Sprynkl tạo ra ba mục đăng khác nhau tuỳ theo nhu cầu sử dụng :

▪ Voice : Dùng cho việc đóng góp ý kiến để xây dựng Team , chia sẽ những khoảnh

khắc đẹp trong quá trình làm việc hoặc của riêng bản thân Thành viên khác trong nhóm cũng có thể thể hiện sự đồng ý của họ bằng cách tương tác với bài đăng của bạn: thông qua Clap hoặc bình luận (nơi mở để đề xuất và phản hồi)

Trang 18

-

▪ Ask: Tạo ra những khảo sát nhanh với 1 câu hỏi duy nhất Ở đây chúng ta hướng

tới việc thực hiện những câu hỏi khảo sát nhỏ một cách ngẫu nhiên và thỉnh thoảng hơn là việc đưa ra một bảng khảo sát lớn (> 10 câu hỏi ) mỗi tháng.Có nhiều dạng câu hỏi khảo sát được hỗ trợ sẵn

Trang 19

-

▪ Thanks: Khi ai đó giúp đỡ bạn , hãy gửi tới họ lời cảm ơn Bỏ qua sự lúng túng và gửi lời

cảm ơn cho đồng nghiệp của bạn là một cách để khích lệ những nỗ lực của họ

Trang 20

Phong Luc Done 25/Apr/19

Phong Luc Done 03/May/19

Trang 21

Bug

SPM-891

[Input code] App does not automatically switch to next cell when inputting same number with existing number

Phong Luc Closed 08/May/19

11:19 AM

SPM-892

[Notification] Cannot loading avatar

3:03 PM

SPM-1198

[Android] Display a warning message when user use back navigation on android

3:23 PM

Trang 22

11:07 AM

SPM-1173

[Pixel 2][Personal Profile]

Missing loading bar when avatar is uploading

Phong Luc Closed 27/May/19

Phong Luc Done 04/Jun/19

comments

Phong Luc On Hold

(Coding)

04/Jun/19 2:10 PM

Trang 23

Phong Luc In-Process 14/Jun/19

11:20 AM

SPM-1332

[Android][Confirm your code] Display "Wrong pin"

pop-up when input a correct code

9:54 AM

Trang 24

Bug

SPW-138

[Edit Team Profile] Default avatar of team changes when tapping edit profile button

Phong Luc Testing 20/Jun/19

1:48 PM

4.3 Kết quả đạt được

- Hiểu thêm được mô hình code khác của React Native khi sử dụng mobx

- Học thêm được kiến thức về Web ( ReactJS ) và Back-end ( nodeJS )

- Cải thiện được được khả năng làm việc nhóm hơn khi làm trong môi trường team đông người

V TỔNG KẾT – ĐÁNH GIÁ

Sau khoảng 6 tháng thực tập ở KMS-Technology và tham gia 2 project của công ty, em có những trải nghiệm khá vui và thú vị khi được làm việc trong một môi trường chuyên nghiệp.Trong quá trình làm

Trang 25

việc, em nhận thấy được những điểm mạnh của bản thân và những thiếu sót của mình kể cả về chuyên môn lẫn các kĩ năng mềm khác, nhờ đó mà có thể thay đổi để phát triển bản thân hơn

Định dạng
Số trang	25
Dung lượng	1,4 MB