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ĩ
ĐẠ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ô mạnh mẽ, ứng dụng di động nhân tố kích thích phát triển công nghệ thông tin giới, phần cứng phần mềm Nhắc đến lập trình ứng dụng nhắc đến developer thân em, người ngày ngồi cạnh máy tính để viết dịng code, tối ưu tập liệu, thiết kế hàng loạt tính với mục đích đem lại tiện lợi cho người dùng đẩy mạnh phát triển phần mềm Thế nhưng, trình để xây dựng phần mềm thực nào? Từ lúc triển khai ý tưởng phần mềm, bước thiết kế UX, UI, lúc đặt tay vào viết dòng code đầu tiên, họp hàng ngày để giải vấn đề thành viên team, lúc cãi tính ứng dụng, Nó thực nghệ thuật lĩnh vực công nghệ thông tin không đơn giản nghĩ Trong thời gian thực tập KMS, em tiếp cận tham gia trực tiếp vàoc ác dự án thực tế, đóng góp vào tính dự án mà tham gia vể mặt kĩ thuật lẫn ý tưởng , trải nghiệm thú vị mẻ sinh viên năm cuối 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ó hội thực tập công ty Trong tập vừa qua nhờ giúp đỡ tận tình người mà em có hội tiếp cận với tồn trình xây dựng, phát triển dự án Tìm hiểu quy trình vận dụng khả vào ứng dụng di dộng thực tế với React Native NodeJS Em xin gửi lời cảm ơn đến anh Long Cao anh Long Phan người team Grove giúp đỡ hỗ trợ em trình thực tập, đưa nhiều lời khuyên hữu ích hướng dẫn tận tình q trình làm việc Ngồi ra, em xin cảm ơn ThS Phạm Thi Vương chị team HR hỗ trợ em nhiều q trình thực tập Cũng xin cảm ơn thầy 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 Lục Trường Phong HCM, ngày tháng 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 thiết lập mơi trường làm việc 2 2.2.1 Mobx 2.2.2 Plugin Prettier Eslint 2.2.3 Plugin FlowType III CHI TIẾT PROJECT GROVE-ONE 3.1 Giới thiệu dự án 3.2 Quá trình làm việc 3.3 Kết đạt 11 IV CHI TIẾT PROJECT SPRYNKL 11 4.1 Giới thiệu dự án 11 4.2 Quá trình làm việc 15 4.3 Kết đạt 19 V TỔNG KẾT – ĐÁNH GIÁ 19 I GIỚI THIỆU VỀ CÔNG TY KMS Technology cơng ty có cung cấp phần mềm dịch vụ cho Mỹ có chi nhánh lớn đặt Việt Nam Công ty làm việc với cơng ty phần mềm khác để đẩy nhanh trình phát triển cung cấp giải pháp phần mềm outsource cho đối tác nước ngồi cách đơn giản nhanh chóng KMS chữ viết tắt Khai Minh Solutions với logo có hình trống đồng màu xanh da trời Cơng ty thành lập từ năm 2009 với co-founder CEO Vu Lam 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 cho doanh nghiệp để từ thực quy chuẩn xây dựng phần mềm cách chun nghiệp nhanh chóng Hiện cơng ty có bốn văn phịng VN 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 II NỘI DUNG NGHIÊN CỨU & TÌM HIỂU Tìm hiểu cơng ty thiết lập môi trường làm việc 2.1 Thời gian: ngày • Nội dung: - Tham gia buổi giới thiệu công ty, cách tổ chức công ty, trình thành lập phát triển cơng ty bên HR tổ chức - Phổ biến quy định làm việc công ty - Gặp mặt giới thiệu, làm quen ăn trưa với bạn team Dev team khác - Setup enviroment cài đặt phần mềm liên quan cho công việc Android Studio , Xcode, Visual code, - Tìm hiểu cách sử dụng JIRA , Zeplin 2.2 Nghiên cứu công nghệ liên quan 2.2.1 Mobx Mobx thư viện hổ trợ việc quản lý State React ( giống Context API hay Redux) đơn giản dễ dàng mở rộng nhờ áp dụng TFRP ( functional reactive programming ) Việc sử dụng Mobx làm cho app React Native trở giống mơ hình MVVM , logic xử lý ViewModel View phải đảm nhận việc render Cả React MobX cung cấp giải pháp tối ưu cho vấn đề phổ biến phát triển ứng dụng React cung cấp chế để kết xuất tối ưu UI 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 chế để đồng hóa tối ưu State React components nhờ việc theo dõi cập nhật liên tục State Đơn giản Mobx , state mutable , bạn thay đổi trực tiếp mà khơng cần thơng qua setState() - State component lưu trữ MobxClass ( tương tư viewmodel) dạng observable variable, function logic viết - Component cần sử dụng phải inject class vào với decorate @observer - Nhiều component sử dụng chung Tài liệu tham khảo : https://mobx.js.org/ 2.2.2 Plugin Prettier Eslint Eslint ESLint chương trình mã nguồn mở, theo thuật ngữ tiếng Anh JavaScript linting utility Nicholas C Zakas viết vào tháng Sáu 2013 Code linting dạng phân tích tĩnh (static analysis) thường sử dụng để tìm patterns code có vấn đề Việc đánh giá code có vấn đề hay không vào quy chuẩn cách viết code thống từ trước (trong nội nhóm, nội cơng ty, hay ngành nhỏ) Hầu hết ngơn ngữ lập trình có cơng cụ code linters riêng, trình biên dịch ngơn ngữ thường kèm việc linting q trình biên dịch Trong lĩnh vực lập trình máy tính, lint ứng dụng Unix giúp cảnh báo vấn đề viết code ngơn cữ C Nói rộng ra, lint linter công cụ giúp phát cảnh báo sai sót viết ngơn ngữ lập trình, bao gồm 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ụ thường thực phép phân tích tĩnh (static analysis) đoạn code Lợi ích : ● Giúp ngăn ngữ vài loại bug, bao gồm loại bug đem loại nhiều phiền hà cho trình gỡ lỗi, khiến chương trình khơng chạy ● Tiết kiệm thời gian lập trình viên ● Giúp việc viết code ngon lành ● Dễ dàng sử dụng Việc "linkting" code JavaScript giúp bạn tránh lỗ hổng bảo mật thông dụng (như XSS), vấn đề liên quan đến "viết code cho dễ đọc dễ nhìn", v.v Prettier Prettier công cụ giúp format code bạn cho đẹp Đẹp hoàn toàn mang quan điểm chủ quan tác giả chương trình (thế nên gọi "an opinionated code formatter") Chương trình yêu cầu code bạn phải theo format định thống nhất, thực qua q trình "parsing" "reprinting" tồn code bạn dựa quy tắc đó, ví dụ ngắt dòng, thêm/ bớt ngoặc tròn ngoặc nhọn cần Lợi ích Xây dựng cưỡng chế việc sử dụng định dạng code chung Giúp đỡ người Giúp tập trung vào việc viết code thay thời gian vào ngồi chỉnh định dạng code Dễ dàng cộng đồng lập trình chấp nhận Format lại toàn source code Thể đẳ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 type biến xác định lúc compile (trước chạy), ngơn ngữ dynamically-typed biết type biến lúc run time Như với ngôn ngữ dạng statically-typed, lỗi báo build editor sử dụng type không Nhưng với ngơn ngữ kiểu dynamically-typed Javascript khác chút Những trường hợp quên kiểu biến dễ gặp lúc code Việc sử dụng static type check giúp phát lỗi sớm hơn, mà phát lỗi sớm tốt hơn, right? Flow thư viện Facebook, hỗ trợ tốt cho React, đứng góc độ người làm sell, nói sử dụng Flow từ Facebook ngon hơn, Typescript superset javascript, việc dùng Typescript thay đổi nhiều thứ khác project, cảm thấy tiêu tốn nhiều thời gian lúc dev, PropTypes ko quan tâm nhiều trước từ sau có Flow III CHI TIẾT PROJECT GROVE-ONE 3.1 Giới thiệu dự án Grove-One dự án mobile app thuộc nhóm dự án Grove bao gồm Grove-Enterpise ( WebApp ), Grove-Analytics Grove-One Grove tảng HCM ( Human Capital Management ) tiện ích để giúp cơng ty quản lý nhân viên mình, khơng hỗ trợ bên HR hoạt động hàng ngày mà cải thiện trải nghiệm nhân viên tăng gắn kết Mục tiêu hướng tới: - UX / UI ấn tượng, dễ sử dụng - Hiệu suất khả mở rộng cao - Tính đa dạng với khả linh hoạt thích ứng cho nhiều mơ hình HRM cơng ty - Nền tảng mở HCM (hỗ trợ tích hợp với hệ thống khác) - Bảo mật quyền riêng tư - Khả phân tích kinh doanh Nếu Grove-Enterpise dành cho phận HR bên quản lý cơng ty Grove-One ứng dụng dành cho nhân viên để hỗ trợ họ ngày với tính TimeSheet ( lịch biểu ), Leave Management ( quản lý ngày phép ) , Directory ( Danh bạ điện thoại ) , … 3.2 Quá trình làm việc 7/1/2019 – 15/2/2019: - Training React Native công nghệ liên quan - Clone Login Emoji app Facebook - Clone swipe behavior 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 Phong 20 Luc GO- [Login] Login - Step 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 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 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 68 Done Luc GO- [Directory] Cannot redirect to 145 Story Phong messenger fields 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 đạt - Nắm vững kiến thức React Native ngơn ngữ JavaScript - Có đủ kiến thức để thực mảng nâng cao React Native Animation, implement module code native (Java , Objective-C ) - Cải thiện kĩ giao tiếp xếp thời gian công việc IV CHI TIẾT PROJECT SPRYNKL 4.1 Giới thiệu dự án Sprynkl ứng dụng nằm nhóm Grove Project với mục đích xây dựng Team culture Mục tiêu chín dự án “Give your employees a voice”: ▪ Nhận phản hồi, góp ý nhanh chóng từ nhân viên ▪ Xố bỏ ngăn cách nhân viên mơi trường làm việc ▪ Tạo môi trường làm việc cởi mở độ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 dễ sử dụng để 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 đưa đến người khác Team cách nhanh chóng Tương tác liên tục người team ▪ Trung thực: Bạn gửi góp ý cho người khác team dạng Ẩn danh ( Anoynimous ), danh tính bạn bảo mật 11 Với Sprynkl, bạn tham gia nhiều team Lời mời chấp nhận bạn đăng nhập lần đầu sau bạn đăng nhập Chuyển đổi tất đội cách chọn vào hình đại diện team Employee tương tác với xây dựng Team Culture họ qua việc chia sẽ, khảo sát,gớp ý lẫn để hiểu Nhằm đáp ứng cho việc Sprynkl tạo ba mục đăng khác 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 khoảnh khắc đẹp trình làm việc riêng thân Thành viên khác nhóm thể đồng ý họ cách tương tác với đăng bạn: thơng qua Clap bình luận (nơi mở để đề xuất phản hồi) 12 - ▪ Ask: Tạo khảo sát nhanh với câu hỏi Ở hướng tới việc thực câu hỏi khảo sát nhỏ cách ngẫu nhiên việc đưa bảng khảo sát lớn (> 10 câu hỏi ) tháng.Có nhiều dạng câu hỏi khảo sát hỗ trợ sẵn 13 - ▪ Thanks: Khi giúp đỡ bạn , gửi tới họ lời cảm ơn Bỏ qua lúng túng gửi lời cảm ơn cho đồng nghiệp bạn cách để khích lệ nỗ lực 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 Bug SPM- [Input code] App does not 891 Bug SPM- [Update profile] After 1181 Bug Bug 1212 Bug Bug 1198 Bug Bug Bug Phong Luc Done Phong Luc Done 1235 12/May/19 3:03 PM Phong Luc Done 15/May/19 12:01 PM Phong Luc Done crashed/Display the red error screen after entering the valid email 17/May/19 1:50 PM avatar of team changes when tapping edit profile button SPM- [Invite member] Lack of 09/May/19 11:43 AM SPM- [Edit Team Profile] Default Phong Luc Done 1246 09/May/19 10:40 AM warning message when user use back navigation on android SPM- [Invite Teammates] App 1265 Phong Luc Done showing dropdown list while keyboard is opened is not good SPM- [Android] Display a 08/May/19 11:19 AM for Poll when switching type SPM- [Create ask] Animation of 1213 Phong Luc Closed loading avatar SPM- [Ask] Lack of empty line 06/May/19 10:27 AM updating avatar, view picture screen appears SPM- [Notification] Cannot 892 Phong Luc Done automatically switch to next cell when inputting same number with existing number 17/May/19 1:52 PM Phong Luc Done empty line when navigating back to Invite member screen 17/May/19 3:23 PM 16 Bug SPM- [Sign in/up] Incorrect UI 1118 Bug SPM- [Ask noti] App does not 1182 Bug 1173 Bug 1188 Bug 1304 Story Phong Luc Closed Phong Luc Done Phong Luc Done Phong Luc Done when using hashtag suggestion in Poll and Scale Improvement 8:49 AM Phong Luc Done Phong Luc On Hold notification when the post has more than 100 comments SPM- [Notification] Scroll to the 787 04/Jun/19 04/Jun/19 11:25 AM SPM- [Notification] Disappear 1110 04/Jun/19 8:28 AM 1095 Bug 29/May/19 5:32 PM not auto refresh after navigating from push noti SPM- [Navigation] User flow 27/May/19 2:45 PM are not rendered as the same time SPM- [Create ask] Error appears 27/May/19 11:07 AM Missing loading bar when avatar is uploading SPM- [In-app noti] Noti list does 27/May/19 9:43 AM several accounts, should update invited by and send new email SPM- [Post detail] Components 1195 Bug Phong Luc Done auto push Someone answered your Ask noti SPM- [Pixel 2][Personal Profile] 17/May/19 4:04 PM SPM- [Invite] If user is invited by Phong Luc Done 1176 Bug Phong Luc Done when confirm code (Coding) Phong Luc Testing unread comment + highlight when tapping to notification 04/Jun/19 2:10 PM 11/Jun/19 11:03 AM 17 Bug SPM- [My Profile] Avatar is not 1248 Improvement SPM- [Avatar] Able to view 1140 Bug 1328 Improvement 13/Jun/19 4:51 PM Phong Luc Done 13/Jun/19 6:12 PM when tap back from Invite screen Phong Luc Done 17/Jun/19 3:05 PM Phong Luc To Do receiver is not OK 17/Jun/19 3:54 PM Phong Luc Done Notification list is not fixed while scrolling on home/team feed SPW- [Notification] Notification 115 11:20 AM code] Display "Wrong pin" pop-up when input a correct code SPW- [View Notification] 117 Bug Phong Luc Done button] Re-order and remove features SPM- [User flow] Flow of input 1319 Bug 4:45 PM crashed after tapping Next button on keyboard SPM- [Android][Confirm your 1332 Bug 13/Jun/19 SPM- [Create team] App is frozen Phong Luc In-Process 14/Jun/19 1318 Bug 13/Jun/19 4:37 PM app when tapping on profile SPM- [See all members][More 1247 Bug Phong Luc Done profile when tapping to avatar SPM- [Confirm your code] App 12/Jun/19 9:19 AM SPM- [View Profile/See All] Kill Phong Luc Done 1326 Bug Phong Luc Done the same as UI design 14/Jun/19 9:30 AM Phong Luc Done list is not responsive on desktop 13 inch 14/Jun/19 9:54 AM 18 SPW- [Edit Team Profile] Default Phong Luc Done Bug 138 avatar of team changes when tapping edit profile button SPW- [Create a post] Don't show Bug 146 pop-up “Are you sure to discard” when user cancel creating a post SPW- [Common Behavior] The Bug 104 4.3 14/Jun/19 4:23 PM Phong Luc Done 20/Jun/19 10:32 AM Phong Luc Testing pop-up isn't closed when click "Back" button of browser 20/Jun/19 1:48 PM Kết đạt - Hiểu thêm mơ hình code khác React Native sử dụng mobx - Học thêm kiến thức Web ( ReactJS ) Back-end ( nodeJS ) - Cải thiện được khả làm việc nhóm làm mơi trường team đông người V TỔNG KẾT – ĐÁNH GIÁ Sau khoảng tháng thực tập KMS-Technology tham gia project cơng ty, em có trải nghiệm vui thú vị làm việc mơi trường chun nghiệp.Trong q trình làm 19 việc, em nhận thấy điểm mạnh thân thiếu sót kể chun mơn lẫn kĩ mềm khác, nhờ mà thay đổi để phát triển thân 20 ... hội thực tập cơng ty Trong tập vừa qua nhờ giúp đỡ tận tình người mà em có hội tiếp cận với tồn q trình xây dựng, phát triển dự án Tìm hiểu quy trình vận dụng khả vào ứng dụng di dộng thực tế với. ..LỜI MỞ ĐẦU Với tốc độ phát triển vô mạnh mẽ, ứng dụng di động nhân tố kích thích phát triển cơng nghệ thơng tin giới, phần cứng phần mềm Nhắc đến lập trình ứng dụng nhắc đến developer... môi trường làm việc cởi mở độ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 dễ sử dụng để dễ dàng tiếp cận với người dùng (employee) ▪ Nhanh