Đề tài tạo webview với reactjs và mobx

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM THỰC TẬP TỐT NGHIỆP ĐỀ TÀI: Tạo Webview với ReactJs MobX Công ty thực tập: Vitalify Asia Co., Ltd Lớp: SE501.N11 Sinh viên thực hiện: Nguyễn Yến Nhi – 19520205 TP Hồ Chí Minh, ngày 20 tháng 12 năm 2022 Nguyễn Yến Nhi Thực tập tốt nghiệp NHẬN XÉT (Của giảng viên) Nguyễn Yến Nhi Thực tập tốt nghiệp MỤC LỤC CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP I Giới thiệu chung công ty II Cơ cấu tổ chức III Tổng quan việc kinh doanh  CHƯƠNG 2: NỘI DUNG THỰC TẬP I Công nghệ, giải pháp quy trình áp dụng  Giới thiệu Git Giới thiệu VSCode Giới thiệu mô hình làm việc Agile – Scrum Tìm hiểu RESTful API Tìm hiểu ReactJS Vịng đời ReactJS Tìm hiểu SCSS, BEM naming convention Tìm hiểu Atomic Design Tìm hiểu quản lý state với MobX 10 Tìm hiểu thư viện Axios 6 7 11 11 11 14 16 20 21 22 24 25 26 26 11 Tìm hiểu Framework 26 II Dự án Webview kết nối ứng dụng với công cụ vật lý thực tế để theo dõi số thể 27 Bối cảnh đời dự án 27 Nhiệm vụ sinh viên giao 27  CHƯƠNG 3: NHẬT KÝ THỰC TẬP 28 CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC QUA ĐỢT THỰC TẬP I Kết thu II Các điểm yếu thân 30 30 31 III Gợi ý cho chương trình học 31 IV Cảm nhận cơng ty 31 DANH MỤC TÀI LIỆU THAM KHẢO 32 Nguyễn Yến Nhi Thực tập tốt nghiệp LỜI NÓI ĐẦU Ngày nay, ngành công nghiệp phát triển ứng dụng web phận thiếu ngành công nghiệp phần mềm Với tốc độ phát triển vô mạnh mẽ, ngành phát triển ứng dụng web 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 Cùng với xu phát triển giới, Việt Nam ngoại lệ Ngành công nghiệp phát triển web non trẻ Việt Nam phát triển mạnh mẽ, để hòa nhập với công ty hàng đầu xây dựng tảng web giới Bên cạnh phát triển web ngành nghề tiếp cận người dùng cách nhanh chóng ta thấy mạng xã hội hay website bán hàng trực tuyến thịnh hành giới lẫn Việt Nam Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tìm hiểu, bổ sung kiến thức mơi trường chun nghiệp, em có dự định thực tập học kì Vì vậy, em định chọn Công Ty TNHH Vitalify Asia - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Nguyễn Yến Nhi Thực tập tốt nghiệp LỜI CẢM ƠN Em xin chân thành cảm ơn ban giám hiệu quý thầy cô trường Đại học Công nghệ Thông tin cung cấp bồi dưỡng cho em kiến thức suốt năm ngồi giảng đường đại học, để từ em có tảng áp dụng vào đợt thực tập cách hiệu Em xin gửi lời cảm ơn quý Công Ty TNHH Vitalify Asia tạo điều kiện cho em thực tập công ty cung cấp, bổ sung cho em kiến thức mà em cịn thiếu sót Q cơng ty hỗ trợ em nhiều suốt thời gian thực tập vừa qua, dạy em kỹ cần thiết, truyền đạt cho em kinh nghiệm mà anh chị trải qua trình làm việc, trao đổi với khách hàng, tác phong tinh thần trách nhiệm trước công việc giao, suy nghĩ tích cực Các anh chị tạo cho em nhiều điều kiện để ứng dụng kiến thức học vào thực tế để xây dựng dự án thực tiễn từ lúc ban đầu, nâng cao trình độ, tốc độ lập trình trí thức thêm bậc Em xin chân thành cảm ơn Vì kiến thức thân hạn chế lần va chạm tiếp xúc với thực tế, áp dụng lý thuyết vào cơng việc nên thân cịn bỡ ngỡ lúng túng, khơng tránh khỏi thiếu sót, mong q Thầy (Cơ) đóng góp ý kiến để em hồn thiện Em xin chân thành cảm ơn! Nguyễn Yến Nhi TP Hồ Chí Minh, ngày 20 tháng 12 năm 2022 Nguyễn Yến Nhi Thực tập tốt nghiệp DANH MỤC CÁC CỤM TỪ VIẾT TẮT TNHH : Trách nhiệm Hữu hạn Nguyễn Yến Nhi Thực tập tốt nghiệp CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP I - Giới thiệu chung công ty Tên đơn vị: CÔNG TY TNHH VITALIFY Á CHÂU (VITALIFY ASIA CO., LTD) Lĩnh vực hoạt động: Xuất phần mềm Địa chỉ: 224A-224B Điện Biên Phủ, Phường Võ Thị Sáu, Quận 3, Thành phố Hồ Chí Minh, Việt Nam Trang web: https://www.vitalify.asia/ Email: info@vitalify.asia Điện thoại:  +84 (028) 3932 6293 Thời gian làm việc: Thứ đến thứ 6: 08h30 - 17h35 Vision: “Delivering Happiness Through the Internet” Value: Providing Value to User Hình 1.1: Logo Cơng ty TNHH Vitalify Asia - - Vitalify Asia công ty phát triển ứng dụng web di động Công ty cung cấp dịch vụ phát triển cải tiến sản phẩm nhanh chóng sở DevOps với nhóm cam kết cung cấp giá trị cho người dùng; giải thứ, từ lập kế hoạch đến triển khai dịch vụ nhanh chóng, cải tiến tăng trưởng cho doanh nghiệp doanh nghiệp Kể từ thành lập vào năm 2008, Vitalify Asia tham gia phát triển phần mềm tập trung vào thiết bị di động để đạt tầm nhìn "Mang lại hạnh phúc thơng qua Internet” Với mục tiêu trở thành nhóm chuyên nghiệp thực cạnh tranh phạm vi toàn cầu, kỹ sư/thành viên/PM mở rộng vai trò phạm vi trách nhiệm cá nhân cam kết cung cấp giá trị cho người dùng với cấu trúc chia nhóm nhỏ ưu tú Bây giờ, 10 năm sau thành lập, Vitalify Asia thử thách giai đoạn để nâng cao giá trị lực kỹ thuật họ Việt Nam Công ty tạo nhiều sản phẩm "Made In Vietnam" Nguyễn Yến Nhi Thực tập tốt nghiệp bán chúng khắp giới Để đạt mục tiêu này, Vitalify Asia tiếp tục nỗ lực cải tiến hàng ngày II Cơ cấu tổ chức Vitalify Asia phát triển ứng dụng web di động để phù hợp với nhu cầu kinh doanh bạn Nhóm đa quốc gia cơng ty Thành phố Hồ Chí Minh, Việt Nam, tham gia nhóm khách hàng từ xa cam kết mang lại giá trị cho người dùng cuối phát triển dịch vụ khách hàng để đảm bảo triển khai dịch vụ nhanh chóng cải tiến Với kinh nghiệm phát triển hệ thống cho nhiều ngành công nghiệp sử dụng công nghệ nổi, Vitalify Asia chuyên hệ thống có khả di động thời gian thực Cơng ty linh hoạt hỗ trợ giai đoạn lập kế hoạch, bàn giao hoạt động phát triển dịch vụ Vitalify Asia chia thành nhiều lab, lab bao gồm nhiều nhóm dự án nhóm dự án tổ chức theo mơ hình Agile Scrum Về số nguyên tắc công việc: - Mỗi sprint kéo dài từ 1-2 tuần tuỳ vào dự án Ngày bắt đầu sprint thứ Mỗi ngày developer gửi lại báo cáo công việc cho BPM quản lý trước 16h45 Sprint retrospective tổ chức linh hoạt sau hoàn thành xong phase Internal weekly meeting gồm có - Code review - Sprint review - Sprint retrospective - Estimate cho spr III Tổng quan việc kinh doanh Một số đặc điểm Vitalify Asia: - Sự phát triển công ty tập trung vào phát triển sản phẩm cung cấp giá trị cho người dùng khách hàng Với suy nghĩ này, đảm bảo chất lượng cải thiện hiệu suất ưu tiên - từ phân tích kinh doanh đến mắt sản phẩm thơng qua xác định triển khai yêu cầu Ngoài ra, để tiếp Nguyễn Yến Nhi Thực tập tốt nghiệp tục tăng trưởng sản phẩm sau phát hành, công ty giới thiệu loạt biện pháp để tăng hiệu đồng thời đáp ứng nhanh chóng linh hoạt nhu cầu thị trường phản hồi người dùng Vitalify Asia chuyên hiệu suất di động, thời gian thực phát triển hệ thống di động cho số ngành: - Chăm sóc sức khỏe (Telemedicine) - Fintech - VR/AR/MR, Metaverse - Startup (from MVP) - Mobile / Hyper-casual Games Trong 13 năm qua, cơng ty có 400 sản phẩm thành công Mặc dù nhiều thành tựu số bị hạn chế thỏa thuận bảo mật, sản phẩm cho phép nhắc đến khách hàng công ty: Hankyou Baizou Kun 反響倍増くん Visit site: https://www.retechraas.com/hankyobaizokun/index.php Hình 1.2 Hankyou Baizou Kun 反響倍増くん Nguyễn Yến Nhi Thực tập tốt nghiệp Silly Walkers Visit site: https://play.google.com/store/apps/details?id=asia.vitalify.sillywalkers Và số game In house khác: https://play.google.com/store/apps/developer?id=Vitalify+Asia+Co.,Ltd Hình 1.3 Silly Walkers MAL Smart HRM Hình 1.4 MAL Smart HRM - Ứng dụng check in chấm công Nguyễn Yến Nhi Thực tập tốt nghiệp Hình 2.8: Quy trình Agile ● Định nghĩa mơ hình Agile Khái niệm Agile (viết tắt Agile Software Development) có nghĩa phương thức phát triển phần mềm linh hoạt, ứng dụng quy trình phát triển phần mềm với mục tiêu đưa sản phẩm đến tay người dùng nhanh tốt Ngun tắc phát triển mơ hình phân đoạn lặp (iterative) tăng trưởng (incremental), theo nhu cầu giải pháp tiến hóa thơng qua hợp tác nhóm tự quản liên chức Rất nhiều nơi định nghĩa Agile phương pháp Thực chất, Agile giống phương pháp luận, triết lý dựa nguyên tắc phân đoạn vòng lặp (iterative) tăng trưởng (incremental).  Ngày nay, triết lí Agile vượt xa khỏi khu vực truyền thống phát triển phần mềm để đóng góp thay đổi cách thức làm việc, quản lí, sản xuất ngành khác sản xuất, dịch vụ, sales, marketing, giáo dục trở thành phương thức quản lý dự án phổ biến với nhiều đại diện gọi phương pháp “họ Agile” ● tôn Agile 18 Nguyễn Yến Nhi - - - Thực tập tốt nghiệp Cá nhân tương hỗ quan trọng quy trình cơng cụ: Trọng tâm đặt lên người, xây dựng tương tác hỗ trợ thành viên nhóm Những thành viên có lực, chịu tương trợ công việc mang đến thành công cho dự án Sản phẩm dùng tốt tài liệu đầy đủ: Tập trung thời gian để làm phần mềm hoàn chỉnh đáp ứng hoàn hảo yêu cầu khách hàng Cộng tác với khách hàng quan trọng đàm phán hợp đồng: Hiểu khách hàng cần để tư vấn điều chỉnh sản phẩm thay dựa vào điều khoản hợp đồng Phản hồi thay đổi bám sát kế hoạch: Agile khuyến khích thích nghi với thay đổi, thay đổi công nghệ, nhân sự, deadline, 12 Nguyên tắc ● - Đáp ứng toàn diện nhu cầu khách hàng thông qua việc giao hàng sớm sản phẩm có giá trị Thay đổi yêu cầu chào đón, chí muộn q trình phát triển Giao phần mềm chạy cho khách hàng cách thường xuyên Nhà kinh doanh kỹ sư phần mềm cần làm việc suốt dự án Xây dựng dự án xung quanh cá nhân có động lực Cung cấp hỗ trợ cần thiết, môi trường làm việc niềm tin để hồn thành cơng việc Trao đổi trực tiếp cách truyền đạt thông tin hiệu Thước đo tiến độ phần mềm chạy tốt Phát triển liên tục bền vững Cải tiến linh hoạt cách quan tâm đến kỹ thuật thiết kế Nghệ thuật tối đa hóa lượng cơng việc chưa xong - Sự đơn giản cần thiết Nhóm tự tổ chức Thích ứng thường xuyên với thay đổi ● Các bước làm việc theo Agile - Scrum Scrum định nghĩa quy tắc cho bốn kiện chủ chốt nhằm tạo môi trường quy cách hoạt động cộng tác cho thành viên dự án Các kiện diễn trước Sprint bắt đầu (là kiện lập kế hoạch  – Sprint Planning), Sprint diễn (sự kiện Daily Scrum) sau Sprint kết thúc (sự kiện Sprint Review Sprint Retrospective).  19 Nguyễn Yến Nhi - - - - Thực tập tốt nghiệp Sprint Planning (Họp Kế hoạch Sprint- Iteration): Nhóm phát triển gặp gỡ với Product Owner để lên kế hoạch làm việc cho Sprint (xem thêm phần Sprint bên dưới).  Công việc lập kế hoạch bao gồm việc chọn lựa yêu cầu cần phải phát triển, phân tích nhận biết công việc phải làm kèm theo ước lượng thời gian cần thiết để hoàn tất tác vụ Chia nhỏ công việc thành backlog (task) để theo dõi tiến độ dự án dễ dàng Scrum sử dụng cách thức lập kế hoạch phần tăng dần theo thời gian, theo đó, việc lập kế hoạch không diễn lần vòng đời dự án mà lặp lặp lại, có thích nghi với tình hình thực tiễn tiến trình đến sản phẩm.  Daily Scrum (Họp Scrum ngày): Scrum Master tổ chức cho Đội sản xuất họp ngày khoảng 15 phút để Nhóm Phát triển chia sẻ tiến độ cơng việc chia sẻ khó khăn gặp phải trình phát triển phần mềm suốt Sprint.   Sprint Review (Họp Sơ kết Sprint): Cuối Sprint, nhóm phát triển với Product Owner rà sốt lại cơng việc hoàn tất (DONE) Sprint vừa qua đề xuất chỉnh sửa thay đổi cần thiết cho sản phẩm.  Sprint Retrospective (Họp Cải tiến Sprint): Dưới trợ giúp Scrum Master, nhóm phát triển rà sốt lại tồn diện Sprint vừa kết thúc tìm cách cải tiến quy trình làm việc thân sản phẩm Tìm hiểu RESTful API API (Application Programming Interface) tập quy tắc chế mà theo đó, ứng dụng hay thành phần tương tác với ứng dụng hay thành phần khác API trả liệu mà bạn cần cho ứng dụng kiểu liệu phổ biến JSON hay XML REST (REpresentational State Transfer) dạng chuyển đổi cấu trúc liệu, kiểu kiến trúc để viết API Nó sử dụng phương thức HTTP đơn giản để tạo cho giao tiếp máy Vì vậy, thay sử dụng URL cho việc xử lý số thông tin người dùng, REST gửi yêu cầu HTTP GET, POST, DELETE, vv đến URL để xử lý liệu RESTful API tiêu chuẩn dùng việc thiết kế API cho ứng dụng web để quản lý resource RESTful kiểu thiết kế API sử dụng phổ biến ngày ứng dụng (web, mobile…) khác giao tiếp với 20 Nguyễn Yến Nhi Thực tập tốt nghiệp REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động nêu sử dụng phương thức HTTP riêng ● ● ● ● GET (SELECT): Trả Resource danh sách Resource POST (CREATE): Tạo Resource PUT (UPDATE): Cập nhật thơng tin cho Resource DELETE (DELETE): Xố Resource Những phương thức hay hoạt động thường gọi CRUD tương ứng với Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa Tìm hiểu ReactJS Hình 2.11: Logo ReactJS React.js thư viện Javascript lên năm gần với xu hướng Single Page Application Trong framework khác cố gắng hướng đến mơ hình MVC hồn thiện React bật với đơn giản dễ dàng phối hợp với thư viện Javascript khác Nếu AngularJS Framework cho phép nhúng code javascript code html thông qua attribute ng-model, ng-repeat với React library cho phép nhúng code html code javascript nhờ vào JSX, bạn dễ dàng lồng đoạn HTML vào JS.Tích hợp javascript HTML vào JSX làm cho component dễ hiểu https://reactjs.org/ 21 Nguyễn Yến Nhi Thực tập tốt nghiệp Vịng đời ReactJS Hình 2.12: Vịng đời ReactJS Một vịng đời có trạng thái sau: ● Initialization - Tương tự hàm khởi tạo (constructor) gọi đến thể component tạo ● Mounting Là hàm gắn kết, kết nối component với - componentWillMount() ▪ Được gọi đến trước hiển thị component ngồi trình duyệt Q trình diễn nhanh chóng, không nên làm nhiều điều hàm thực lần (từ phiên 16.3 hàm khơng khuyến khích dùng bị loại bỏ 17) - Render() ▪ Được gọi hiển thị component trình duyệt ▪ Sẽ return nội dung mà bạn viết, component null false (trong trường hợp khơng muốn render cả) 22 Nguyễn Yến Nhi - Thực tập tốt nghiệp componentDidMount() ▪ Được gọi sau hiển thị component ngồi trình duyệt, hàm thực lần ▪ Hàm gọi để thông báo component tồn DOM, từ thao tác DOM thực bình thường với component Đầu tiên component gọi hàm hàm constructor() gọi, sau đến componentWillMount(), reder() cuối hàm componentDidMount gọi render() xong ● Updation Là vấn đề update component props, state - componentWillReceiveProps(nextProps) ▪ Hàm chạy mà props component sinh có thay đổi ▪ - Phải gọi setState() muốn render lại shouldComponentUpdate(nextProps, nextState) ▪ Được thực sau state props thay đổi ▪ trả kết true or false Phương thức xác định component có update hay khơng Mặc định giá trị true Nếu bạn không muốn component render lại sau update state hay props return giá trị thành false - componentWillUpdate(nextProps, nextState) ▪ Được gọi update state component trước render lại ▪ Bạn gọi this.setState componentWillUpdate 23 Nguyễn Yến Nhi Thực tập tốt nghiệp ▪ Hàm render gọi sau hàm ▪ (từ phiên 16.3 hàm khơng khuyến khích dùng bị loại bỏ 17) - componentDidUpdate(prevProps, prevState) ▪ Được gọi component instance update, componentDidUpdate gọi sau render HTML loading xong ● Unmounting - componentWillUnmount() ▪ Được gọi trước component bị remove khỏi DOM Tìm hiểu SCSS, BEM naming convention BEM viết tắt Block-Element-Modifier, tiêu chuẩn quy ước đặt tên cho tên lớp CSS BEM giúp cho việc code Frontend dễ đọc dễ hiểu hơn, dễ làm việc dễ mở rộng bảo trì làm việc với CSS Quy ước đặt tên BEM: block {} /* Block */ block element {} block modifier {} /* Element */ /* Modifier */ Block: Là thành phần trang web hay ứng dụng đó, thành phần DOM block Block thường thành phần header, body, content, footer Element: Là thành phần block không tồn độc lập mà khơng có block đặt bên nó, chúng phụ thuộc vào parent block Trong BEM, phần tử biểu thị dấu gạch kép Modifier: Được dùng để thao tác thay đổi cách hiển thị block phần tử Ví dụ muốn tạo thêm block block elem khác muốn làm bật thêm class block elem hightlight để tạo khác biệt 24 Nguyễn Yến Nhi Thực tập tốt nghiệp Tóm tắt em hiểu block thể cho thành phần giao diện, element thành phần block (ví dụ block button chứa element text button), modifier kiểu block (ví dụ block button có kiểu primary, secondary, ) SCSS chương trình tiền xử lý CSS (CSS preprocessor) Nó giúp ta viết CSS theo cách ngơn ngữ lập trình, có cấu trúc rõ ràng, rành mạch, dễ phát triển bảo trì code SCSS sử dụng cú pháp giống với Ruby (vì đơn giản thiết kế lập trình viên Ruby) Có phần mở rộng scss , SCSS đời sau SASS có cú pháp viết tương tự cách viết CSS Cú pháp tạo nhằm thu hẹp khoảng cách SASS CSS cách mang lại thứ thân thiện với CSS Tìm hiểu Atomic Design “Atomic Design Một phương pháp thiết kế giao diện mà Designer ưu tiên thực thiết kế thành phần riêng lẻ kết hợp chúng lại với nhau, thay thiết kế trang.” Thuật ngữ giới thiệu Brad Forst năm 2013 Atomic Design cách tiếp cận kiểu thiết kế giao diện cách xây dựng nên hệ thống components thay trang Phương pháp trọng đến đối tượng nhỏ, độc lập, tái sử dụng thành phần để kết hợp chúng lại tạo thành tổng thể Điều cho phép hồn thành sản phẩm nhanh chóng, giao diện thống dễ dàng bảo trì Trong Atomic Design: giao diện chia thành phần: - - - Atoms: thành phần nhỏ nhất, block khơng thể nhỏ (ví dụ: buttons, input fields, checkboxes, links) Chúng trừ tượng colours, fonts chữ Molecules: gồm atom kết hợp vs phần tử bên đơn vị (ví dụ: input field button kết hợp thành khung tìm kiếm) Organisms: ​nhóm Molecules giống khác để tạo thành thành phần hoàn chỉnh giao diện Templates: ​là kết hợp organisms với tạo thành trang Pages: trang cụ thể Nó kiểm tra templates làm việc với nội dung thực tế nào, cho phép designers quay trở lại để chỉnh sửa molecules, organisms, templates cần thiết 25 Nguyễn Yến Nhi Thực tập tốt nghiệp Tìm hiểu quản lý state với MobX MobX thư viện quản lý state đơn giản, dễ mở rộng Mobx mutable, có nghĩa thay đổi hồn tồn trực tiếp, thay immutable Redux Code Mobx cực ngắn dễ hiểu MobX React: - - - Observable: Tất thuộc tính, array, map, sets quan sát (observable) Điều để làm cho đối tượng quan sát định annotation cho thuộc tính cách sử dụng makeObservable Observable đại diện cho giá trị component quan sát Observer: Trong Observable đại diện cho giá trị component quan sát Observer HOC hay decorator subscribes mà giúp cho component có khả quan sát Kết là, component tự động render giá trị observables liên quan thay đổi Action: Tất ứng dụng có hành động (action) Một hành động (action) đoạn mã sửa đổi trạng thái (state) Về nguyên tắc, hành động (action) xảy để đáp lại kiện (event) Ví dụ: nút nhấp, số đầu vào thay đổi, thông báo websocket đến, MobX yêu cầu khai báo hành động (action) ứng dụng Chỉ nên sử dụng hành động (action) chức có ý định sửa đổi trạng thái Các chức lấy thông tin (thực tra cứu lọc liệu) không đánh dấu hành động phép MobX theo dõi yêu cầu chúng 10 Tìm hiểu thư viện Axios Axios thư viện HTTP Client dựa Promise Cơ cung cấp API cho việc xử lý XHR (XMLHttpRequests) 11 Tìm hiểu Framework Framework7 open source framework miễn phí để phát triển UI ứng dụng di động, máy tính để bàn web; Framework7 sử dụng công cụ tạo prototyping 26 Nguyễn Yến Nhi Thực tập tốt nghiệp https://framework7.io/ II Dự án Webview kết nối ứng dụng với công cụ vật lý thực tế để theo dõi số thể Bối cảnh đời dự án Nhiệm vụ công ty Vitalify Asia phải cung cấp sản phẩm kỹ thuật số tạo tác động thực tích cực cho người dùng doanh nghiệp tổ chức Vì việc liên tục cải tiến ứng dụng để đáp ứng khách hàng tiềm thực cần thiết Đối tác muốn có cơng cụ giúp khách hàng họ sử dụng tính ứng dụng theo dõi tất thông tin cá nhân sử dụng nhiều thiết bị thông qua ứng dụng Hiện tại, khách hàng đối tác sử dụng nhiều công cụ khác để quản lý số họ muốn Tuy nhiên cách làm diễn không hiệu Các khách hàng họ phải sử dụng nhiều công cụ để quản lý, việc không đem lại hiệu quả, bất tiện ● Phiên Webview kết nối ứng dụng với công cụ vật lý thực tế để theo dõi số thể công cụ quản lý online lấy khách hàng trung tâm Công cụ tối ưu để lên kế hoạch, xem lại nhật ký theo dõi cho khách hàng Nhiệm vụ sinh viên giao - Nắm kiến thức công nghệ giảng dạy áp dụng để xây dựng webview hoàn thiện - công cụ giúp người dùng theo dõi, quản lý số - Sử dụng thành thạo lập trình Front-end (ReactJS) cơng nghệ hỗ trợ để xây dựng giao diện, gọi API - Đáp ứng quy định coding rule, checklist khách hàng để đảm bảo tiêu chuẩn đầu sản phẩm - Hoàn thiện task giao 27 Nguyễn Yến Nhi Thực tập tốt nghiệp  CHƯƠNG 3: NHẬT KÝ THỰC TẬP Tuần Tuần Nội dung thực tập - Tìm hiểu công ty, cách tổ chức công ty Người hướng dẫn Manager: anh Nguyễn Anh Duy - Làm quen với cách làm việc theo mơ hình Agile Mentor: anh Dương công ty Văn Khương - Làm quen với công cụ làm việc công ty (Senior Developer) (kênh chat trực tuyến công ty - Chatwork, email công ty) - Cài đặt môi trường để chuẩn bị cho dự án - Học cách trao đổi, làm việc qua email Tuần - Tìm hiểu ReactJS, VSCode - Tìm hiểu Web service, Web Api, RESTful API - Tìm hiểu Git tool liên quan tới Git - Tìm hiểu BitBucket - Tìm hiểu coding rule - Tìm hiểu SCSS, BEM naming convention Tuần 3, Tuần - Tìm hiểu MobX, tự research, trao đổi, tham khảo với mentor xây dựng giao diện đơn giản với MobX, Framework7 - Review code cá nhân, thành viên khác nhóm theo coding rule, BEM naming convention thông qua Bitbucket 28 Nguyễn Yến Nhi Thực tập tốt nghiệp - Được mentor review code sau dựng xong dự án cá nhân     Tuần 5, Tuần Tuần 7, Tuần - Tham gia vào dự án thức công ty - Tham gia buổi họp giới thiệu dự án, tiếp cận với công cụ quản lý dự án Backlog, Miro, - Đọc, nghiên cứu spec dự án thông qua giúp đỡ, phiên dịch chị BPM dự án - Trao đổi với team, chị BPM để hiểu sâu yêu cầu khách hàng - Bắt đầu dựng component đơn giản tương thích với design Figma - Xây dựng dự án hoàn thành mục tiêu sprint - Estimate công việc làm - Tham gia morning meeting ngày: báo cáo công việc mà hôm qua thân làm hơm làm gì, stuck điểm - Tham gia review code cho thành viên team theo coding rule checklist - Tham gia buổi họp chia sẻ coding rule, checklist khách hàng Nhật Bản - Xây dựng dự án hoàn thành mục tiêu sprint - Estimate cơng việc làm - Tham gia morning meeting ngày: báo cáo công việc mà hôm qua thân làm hôm làm gì, stuck điểm - Tham gia review code cho thành viên team theo coding rule checklist - Tham gia buổi Seminar chia sẻ technical công ty: Cách để viết test case hiệu quả, cách tạo bot chat Chatwork, Cloud computing 29 Nguyễn Yến Nhi Tuần 9, Tuần 10 - Fix bugs, fix review từ khách hàng - Tiếp tục xây dựng dự án hoàn thành mục tiêu sprint Estimate cơng việc làm - Tham gia morning meeting ngày: báo cáo công việc mà hôm qua thân làm hơm làm gì, stuck điểm - Tham gia review code cho thành viên team theo coding rule checklist Tuần 11, Tuân 12 - Fix bugs - Chuẩn bị tài liệu để báo cáo thực tập - Tham gia buổi tea-break - Củng cố kiến thức qua đợt thực tập - Người hướng dẫn đánh giá nhận xét - Bản thân rút kinh nghiệm, tự đánh giá khắc phục khuyết điểm sản phẩm tạo Thực tập tốt nghiệp CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC QUA ĐỢT THỰC TẬP I Kết thu - Trải nghiệm quy trình làm việc từ đầu đến cuối dự án thực tế theo mơ hình làm việc Agile Scrum - Xây dựng thành công Web thực tế - Trau dồi nhiều kiến thức Front-end - Thao tác lập trình, tư duy, ý tưởng xử lý luồng liệu hiệu - Nâng cao kỹ lập trình Web Front-end sử dụng ReactJs nhiều thư viện khác - Nâng cao khả research - Nhận người có cách coding riêng, cần chấp nhận nhìn nhận điều để thân phát triển hơn, tránh lãng phí chi phí làm việc - Nâng cao kỹ làm việc nhóm, review code cho thân đồng đội 30 Nguyễn Yến Nhi Thực tập tốt nghiệp - Biết cách dùng đồng đội tập trung vào mục tiêu cần giải buổi họp, lắng nghe thấu hiểu nhiều - Tự nhìn nhận đánh giá thân thơng qua buổi họp nhìn nhận rút kinh nghiệm để cải thiện công việc, rút ngắn thời gian làm việc - Kỹ giao tiếp, tư phản biện, giải vấn đề nâng cao II Các điểm yếu thân - Bản thân cần trau dồi kỹ research - Cần cải thiện kỹ giải thích vấn đề thân III Gợi ý cho chương trình học IV Rèn luyện kỹ mềm môi trường làm việc tốt Cảm nhận cơng ty - Cơ sở vật chất tốt, phịng rộng rãi, thoáng mát, thoải mái, - Phúc lợi tốt - Địa điểm công ty trung tâm, dễ tìm, tan ca dễ kẹt xe; nhiên công ty cho phép Work from home để giảm bớt chi phí ăn uống, lại thực tập sinh nhân viên - Có nơi nghỉ ngơi, - Thiết bị, máy móc hiệu làm việc cao, đường truyền internet mạnh - Mentor, đội ngũ phụ trách hướng dẫn giảng dạy thực tập đa dạng, vô tận tâm nhiệt tình, trình độ chun mơn cao, hòa đồng, vui vẻ Review code thường xuyên 31 Nguyễn Yến Nhi Thực tập tốt nghiệp DANH MỤC TÀI LIỆU THAM KHẢO [1]  https://www.vitalify.asia/ [2] https://stackoverflow.com/ [3] https://reactjs.org/ [4] https://viblo.asia/p/tim-hieu-ve-atomic-design-JlkRymxqRZW [5] https://mobx.js.org/ [6] http://framework7.io/react/ 32 ... hiểu quản lý state với MobX MobX thư viện quản lý state đơn giản, dễ mở rộng Mobx mutable, có nghĩa thay đổi hồn tồn trực tiếp, thay immutable Redux Code Mobx cực ngắn dễ hiểu MobX React: - - -... javascript nhờ vào JSX, bạn dễ dàng lồng đoạn HTML vào JS.Tích hợp javascript HTML vào JSX làm cho component dễ hiểu https:/ /reactjs. org/ 21 Nguyễn Yến Nhi Thực tập tốt nghiệp Vịng đời ReactJS Hình... Agile – Scrum Tìm hiểu RESTful API Tìm hiểu ReactJS Vịng đời ReactJS Tìm hiểu SCSS, BEM naming convention Tìm hiểu Atomic Design Tìm hiểu quản lý state với MobX 10 Tìm hiểu thư viện Axios 6 7 11 11