Tài liệu Báo cáo thực tập lập trình ứng dụng mobile với react native

ĐẠ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 Công ty thực tập : KMS-Technology Người phụ trách : Cao Thanh Long Phan Trần Bảo Long Thực tập sinh : Lục Trường Phong TP. HCM, ngày 06 tháng 06 năm 2019 LỜI MỞ ĐẦU 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. . LỜI CẢM ƠN 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 NHẬN XÉT CỦA KHOA Mục lục GIỚI THIỆU VỀ CÔNG TY I. NỘI DUNG NGHIÊN CỨU & TÌM HIỂU II. 2.1. Tìm hiểu công ty và thiết lập môi trường làm việc 1 2 2 2.2.1. Mobx 2 2.2.2. Plugin Prettier và Eslint 3 2.2.3. Plugin FlowType 4 III. CHI TIẾT PROJECT GROVE-ONE 5 3.1. Giới thiệu về dự án 5 3.2. Quá trình làm việc 8 3.3. Kết quả đạt được 11 IV. CHI TIẾT PROJECT SPRYNKL 11 4.1 Giới thiệu về dự án 11 4.2 Quá trình làm việc 15 4.3 Kết quả đạt được 19 V. TỔNG KẾT – ĐÁNH GIÁ 19 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 1 II. NỘI DUNG NGHIÊN CỨU & TÌM HIỂU Tìm hiểu công ty và thiết lập môi trường làm việc 2.1. 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 ) 2 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. 3 ● 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à "reprinting" 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. 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 4 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 5 - 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 ) , … 6 7 3.2. Quá trình làm việc 7/1/2019 – 15/2/2019: 8 - 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 Untestable GO- Login components Phong Task 32 Luc Testable Sub- GO- GO-20 implement UI Phong task Luc 49 Testable Sub- GO- GO-21 implement UI Phong task 50 Luc Improvement GO- [IMP][Login] Login Step2 Phong 65 Luc GO- [Login] Login - Step 1 Phong 20 Luc GO- [Login] Login - Step 2 Phong 21 Luc Story Story Bug GO- The error message incorrect with Phong 83 Bug message definition 144 Closed 28/Feb/19 10:13 PM Closed 01/Mar/19 10:07 AM Closed 01/Mar/19 10:07 AM Done Phong employee displays incorrectly in detail employee 9 Luc 08/Mar/19 10:30 AM Done 08/Mar/19 11:37 AM Done 14/Mar/19 11:26 AM Closed 14/Mar/19 Luc GO- [Directory] The name of Updated 1:42 PM Done 22/Mar/19 11:07 AM Bug GO- [Directory] The instant 143 Bug Improvement Story Improvement Story Luc GO- [IMP][Login] Login Step 2 Phong 116 Luc GO- [Directory] View Details of Phong Story Employee Done Phong 122 Luc GO- [Directory] Call / Message / Phong Email in Directory Done contact in Android Phong Done Phong 224 Luc GO- [Directory] Add To Contacts Phong 80 Luc 10 22/Mar/19 1:59 PM Done 28/Mar/19 5:50 PM Done 28/Mar/19 5:52 PM Done 03/Apr/19 10:27 AM Closed 10/Apr/19 Luc GO- Add to contact too long in IOS 22/Mar/19 11:30 AM Luc GO- Loss information when adding 22/Mar/19 11:16 AM Luc GO- [IMP][Directory] Action Item 22/Mar/19 11:16 AM Luc 74 228 Bug Phong Phong 69 Bug slack in instant message on android GO- [IMP][Login] Login Step 1 68 Done Luc GO- [Directory] Cannot redirect to 145 Story Phong messenger fields do not work 12:01 PM Closed 11/Apr/19 3:35 PM Done 11/Apr/19 3:35 PM GO- [Directory- Offline Message] Bug 229 Phong Message does not disappear when I manual reload list of Directory Closed 11/Apr/19 Luc 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 11 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) 12 - ▪ 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. 13 - ▪ 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ọ. 14 4.2 Quá trình làm việc Issue Type Bug Key SPM- [Sign up/in] Incorrect 1116 Bug Status Phong Luc Done Updated 25/Apr/19 5:05 PM Phong Luc Done Endless loading bar when user enters an incorrect password SPM- [Profile] Cannot scroll to 1174 Assignee header color UI when navigate to another screen SPM- [iOS][Change Password] 1085 Bug Summary 03/May/19 2:54 PM Phong Luc Done top of profile when pressing on Profile icon 05/May/19 2:56 PM 15