Báo cáo thực tập ứng dụng DASHBOARD BUILDER

1 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP ỨNG DỤNG DASHBOARD BUILDER Công ty thực tập: Orange Logic Người phụ trách: Nguyễn Thanh Cao Thực tập sinh: Nguyễn Huỳnh Lợi TP Hồ Chí Minh, tháng 01 năm 2021 Nguyễn Thanh Cao Nguyễn Huỳnh Lợi LỜI MỞ ĐẦU Cortex công cụ DAM (quản lý tài sản kỹ thuật số), sản phẩm tốt thị trường Là ứng dụng SaaS cao cấp Orange Logic, CORTEX | DAM, tạo để hỗ trợ cơng ty tồn giới mở rộng quy mô hoạt động kỹ thuật số họ Khách hàng Orange Logic đến từ nhiều ngành công nghiệp bao gồm 100 công ty danh sách Fortune Ngày nay, ngành công nghiệp 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 web nhân tố kích thích phát triển công nghệ thông tin giới Em định chọn lập trình web làm định hướng cho việc học tập Bên cạnh đó, em chọn Orange Logic làm nơi học tập rèn luyện, Orange Logic cơng ty có tính thử thách công việc cao - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định thân Nguyễn Thanh Cao Nguyễn Huỳnh Lợi LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty Orange Logic Việt Nam tạo điều kiện cho em có hội thực tập công ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình anh mentor, nhóm thực tập chúng em tiếp thu kiến thức quan trọng để làm ứng dụng hoàn thiện chỉnh chu Chân thành cảm ơn anh mentor bỏ nhiều thời gian, cơng sức để hướng dẫn chúng em hồn thành đợt thực tập Đặc biệt cảm ơn anh Nguyễn Thanh Cao, training, hướng dẫn, chí giúp đỡ debug cho chúng em tận tình Từ khó khăn cơng việc, đến khó khăn việc làm quen với môi trường 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 Nguyễn Huỳnh Lợi Hồ Chí Minh, ngày 14 tháng năm 2021 Nguyễn Thanh Cao Nguyễn Huỳnh Lợi NHẬN XÉT CỦA KHOA Nguyễn Thanh Cao Nguyễn Huỳnh Lợi MỤC LỤC Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty Orange Logic Việt Nam Sản phẩm công ty Chương 2: Nội dung thực tập Giới thiệu công ty setup máy Nghiên cứu kỹ thuật yêu cầu dự án 2.1 2.2 2.3 Các công cụ làm việc Tìm hiểu Reactjs nâng cao Sản phẩm CORTEX, yêu cầu dự án Dashboard Builder Thực project Lịch làm việc 10 Chương 3: Chi tiết project 12 Giới thiệu Ứng dụng dashboard builder 12 Yêu cầu 12 Thiết kế 13 Kế hoạch & kết 15 4.1 4.2 4.3 Kế hoạch 15 Thực 15 Kết 16 Nguyễn Thanh Cao Nguyễn Huỳnh Lợi Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty Orange Logic Việt Nam Cortex công cụ DAM (quản lý tài sản kỹ thuật số), sản phẩm tốt thị trường Là ứng dụng SaaS cao cấp Orange Logic, CORTEX | DAM, tạo để hỗ trợ công ty tồn giới mở rộng quy mơ hoạt động kỹ thuật số họ Khách hàng Orange Logic đến từ nhiều ngành công nghiệp bao gồm 100 công ty danh sách Fortune Sản phẩm công ty Sản phẩm công ty:  Cortex ứng dụng SaaS cao cấp Orange Logic, tạo để hỗ trợ công ty tồn giới mở rộng quy mơ hoạt động kỹ thuật số họ Khách hàng Orange Logic đến từ nhiều ngành công nghiệp bao gồm 100 công ty danh sách Fortune Nguyễn Thanh Cao Nguyễn Huỳnh Lợi Chương 2: Nội dung thực tập Giới thiệu công ty setup máy Thời gian: ngày Nội dung: Được anh chị HR nhân viên giới thiệu cơng ty, q trình thành lập phát, quy trình làm việc từ cao xuống thấp, cách thức tổ chức công ty Làm quen, giao lưu với anh chị nhân viên, theo phận theo team Các anh chị giới thiệu sản phẩm thành tựu cua công ty đạt Các anh kỹ thuật hướng dẫn cấp thiết bị, sử dụng nguồn tài ngun cơng ty Ngồi ra, thực tập sinh cịn giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email, công cụ làm việc Các anh chị nhân viên chia sẻ kinh nghiệm làm việc hiệu đồng thời hướng dẫn cách tác phong, bước làm việc team thơng tin liên hệ q trình làm việc gặp vấn đề gặp cố bất ngờ Được cấp tài khoản tham gia vào nhóm tương tác, thảo luận công việc Kết quả: Hiểu thêm công ty OL Vietnam q trình thành lập phát triển Có thêm kỹ việc sử dụng email, cơng việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm Nghiên cứu kỹ thuật yêu cầu dự án Thời gian: tuần 2.1 Các cơng cụ làm việc Nội dung: - Tìm hiểu cơng cụ sử dụng q trình làm việc Nguyễn Thanh Cao Nguyễn Huỳnh Lợi - Trong thời gian này, mentor hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp cho q trình làm việc với team Một số tool quản lý source code như: Gitlab Một số công cụ giúp cộng tác Google Chats,… - Tìm hiểu nguyên tắc bản, format code trình làm viêc summit code 2.2 IDE dùng triển khai code review Visual Studio Code Tìm hiểu Reactjs nâng cao Nội dung: Tự tìm hiểu, nghiên cứu Reactjs, đọc tài liệu, code test thử API Hiểu cách hoạt động ứng dụng vào project Các ưu điểm NextJs - Xây dựng ứng dụng web, browser, không cần người dùng tải - Tự động update, scale - Tương thích nhiều hệ điều hành khác - Là thư viện có lượng người dung lớn thị trường So sánh Reactjs Jquery Tính Reactjs Jquery Backby Facebook Community Nguyễn Thanh Cao Nguyễn Huỳnh Lợi Tương tác DOM ảo DOM thật Độ tiếng Nổi tiếng Từng tiếng Độ khó Medium Easy SPA YES NO Làm việc Có Có thể Kết quả: - Hiểu rõ nắm kiển trúc thành phần Reactjs - Có nhìn tổng quan tính bật Reactjs - Sử dụng, thực thi tính Reactjs, hiểu rõ cách để xây dựng sản phẩm cần phát triển 2.3 Sản phẩm CORTEX, yêu cầu dự án Dashboard Builder Nội dung: - Hiểu ứng dụng CORTEX liên quản đến ứng dụng Dashboard Builder - Nghiên cứu API CORTEX cung cấp, định nghĩa API thiếu để xây dựng ứng dụng dashboard builder - Tổng quan công nghệ sử dụng: o Front-end: Typescript, ReactJs, Material-UI o Back-end: Firestore Kết : - Ôn lại củng cố khái niệm nâng cao ReactJs - Hiểu project CORTEX cơng ty - Định nghĩa API cịn thiếu cần cung cấp Thực project Sau tuần đầu nghiên cứu, thực tập sinh nắm kiến thực nâng cao ReactJs, hiểu thêm ứng dụng nội CORTEX công ty Nguyễn Thanh Cao Nguyễn Huỳnh Lợi 10 Sprint tuần thứ 3, sprint kéo dài tuần hết tập Nhóm thực tập sinh hồn thiện project theo yêu cầu để công ty, công ty dành cho lời khen có cánh Lịch làm việc Mức Sprint Cơng việc độ Đầu hồn thành Nhận xét người hướng dẫn - Tìm hiểu, nghiên cứu, - Một thuyết trình 100% làm rõ yêu cầu cách tiếp cận - Nghiên cứu hướng tiếp project ứng dụng cận tốt cho project POC: ngôn ngữ - Xây dựng ứng dụng chọn, kiến trúc dự POC để chứng minh cho án,… hướng tiếp cận - Chia sẻ suy nghĩ cá nhân góp ý - Triển khai ứng dụng - Một buổi demo cuối 100% - Trao đổi với official staff sprint cơng ty, định nghĩa làm xây dựng API thiếu Peer review task - Trao đổi với user độ hoàn thành trước buổi hài lọng ứng dụng demo - Chia sẻ suy nghĩ cá nhân góp ý - Tiếp tục triển khai, sửa - Một buổi demo cuối 100% chữa ứng dụng sprint - Xây dựng tiếp tính làm Nguyễn Thanh Cao Nguyễn Huỳnh Lợi 11 thiếu - Peer review - Trao đổi với người dung task tính năng, khó hồn thành trước buổi khan gặp phải demo - Chia sẻ suy nghĩ cá nhân góp ý - Fix bug, xem xét - Bản demo cuối tính 100% cần hồn - Chia sẻ thành, tính điều học bỏ qua tập - Kiểm thử, deploy, viết document, tạo hướng dẫn sử dụng cho người dùng Nguyễn Thanh Cao Nguyễn Huỳnh Lợi 12 Chương 3: Chi tiết project Giới thiệu Ứng dụng dashboard builder Mục đích: Có dashboard hiển thị tiến trình làm việc team sprint để tạo động lực cho người làm việc Dashboard config admin, chiếu lên mfan hình 55 inch cơng ty nơi mà tất developer khác nhìn thấy Hiện tại: Cơng ty có ứng dụng dashboard mức đơn sơ sử dụng Google Sheets HTML bản, query cập nhật thủ công admin, tốn công sức cơng việc lặp lặp lại Mong muốn: Có ứng dụng tự động hố q trình lấy query, update lên dashboard mà không cần người admin thủ công update phút Bên cạnh đó, làm cho ứng dụng có tính mở động, tái sử dụng cao có thể, để tái sử dụng cho team bên Mỹ, Pháp Yêu cầu Chung: Hiển thị dashboard hình 55 inch, hệ điều hành Windows Phía người dùng khan giả: - Dashboard cần rõ rang, dễ nhìn, thơng tin dễ nắm bắt - Thơng tin, liệu update real-time, giúp cho lập trình viên cập nhật tiến độ làm việc họ - Tự động hiển thị dashboard phù hợp vào ngày cụ thể (Ví dụ dashboard Enhancements vào thứ 2, 3, 5, Defects vào thứ 2, 4, 6) Timeslot tuỳ chỉnh theo ý admin khơng cố định ví dụ - Có hình cho số kiện đặc biệt chẳn hạn Code Review, Bounty Day,… Phía admin: - Các câu query lấy liệu cập nhật dễ dàng, admin không rành công nghệ - Có filter định cần Nguyễn Thanh Cao Nguyễn Huỳnh Lợi 13 - Có thể config UI cho dashboard dễ dàng Thiết kế Nguyễn Thanh Cao Nguyễn Huỳnh Lợi 14 Nguyễn Thanh Cao Nguyễn Huỳnh Lợi 15 Kế hoạch & kết 4.1 Kế hoạch - Có dashboard thể thơng tin cần thiết, với liệu xác, lấy cách tự động - Timeslots config cách dễ dàng - Hỗ trợ hiển thị kiện đặc biệt - Xác thực dựa tài khoản nội có cơng ty - Ít phải có UI cố định giống design có sẵn cho người dung khơng thể làm UI configurable 4.2 Sử dụng MERN Stack Thực - Thực theo kế hoạch, nhiên sử dụng React + Firestore thay MERN stack để bắt kịp thời gian Nguyễn Thanh Cao Nguyễn Huỳnh Lợi 16 4.3 Kết - Tất chức hoàn thành theo yêu cầu Một số chức thêm ngồi mong đợi phía người dùng - Củng cố kiến thức biết ReactJs, Firestore - Học cách giao tiếp với thành viên nhóm để làm rõ yêu cầu, lên kế hoạch thực tính - Video final demo Nguyễn Thanh Cao Nguyễn Huỳnh Lợi 17 TÀI LIỆU THAM KHẢO Kiến thức nâng cao ReactJs: https://reactjs.org/docs/getting-started.html Nguyễn Thanh Cao Nguyễn Huỳnh Lợi 18 TỔNG KẾT Như vậy, thời gian 12 tuần thực tập công ty em học nhiều kiến thức, kinh nghiệm trình thực dự án Bổ sung kiến thức lập trình framework ReactJs Tích lũy cho thân tính kỷ luật quy trình làm việc, thực kiểm thử rà sốt lỗi sau hồn thành task mình, đồng thời sau trải nghiệm làm việc em thay đổi tư cách lập trình, nắm bắt cách xây dựng - phát triển chức năng, từ có định hình kiến trúc xây dựng hệ thống phần mềm hoàn chỉnh Em xin chân thành cảm ơn giúp đỡ anh chị đặc biệt anh Nguyễn Thanh Cao giúp em học hỏi nhiều phát huy lực thân mơi trường làm việc chun nghiệp Đồng thời có hội tiếp xúc với kiến thức, kinh nghiệm để giúp em hoàn thành ứng dụng web Nguyễn Thanh Cao Nguyễn Huỳnh Lợi ... Sử dụng, thực thi tính Reactjs, hiểu rõ cách để xây dựng sản phẩm cần phát triển 2.3 Sản phẩm CORTEX, yêu cầu dự án Dashboard Builder Nội dung: - Hiểu ứng dụng CORTEX liên quản đến ứng dụng Dashboard. .. yêu cầu dự án Dashboard Builder Thực project Lịch làm việc 10 Chương 3: Chi tiết project 12 Giới thiệu Ứng dụng dashboard builder ... project ứng dụng cận tốt cho project POC: ngôn ngữ - Xây dựng ứng dụng chọn, kiến trúc dự POC để chứng minh cho án,… hướng tiếp cận - Chia sẻ suy nghĩ cá nhân góp ý - Triển khai ứng dụng - Một