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

Bên cạnh đó, em chọn Orange Logic làm nơi học tập và rèn luyện, bởi vì Orange Logic là một công ty có tính thử thách công việc cao - một môi trường lý tưởng, hiện đại, chuyên nghiệp - là

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

TP Hồ Chí Minh, tháng 01 năm 2021

Cortex là một công cụ DAM (quản lý tài sản kỹ thuật số), một trong những sản phẩm tốt nhất trên thị trường hiện nay Là một ứng dụng SaaS cao cấp của Orange Logic, CORTEX | DAM, được tạo ra để hỗ trợ các công ty trên toàn thế giới mở rộng quy mô hoạt động kỹ thuật

số của họ Khách hàng của Orange Logic đến từ nhiều ngành công nghiệp và bao gồm cả 100 công ty trong danh sách Fortune

Ngày nay, ngành công nghiệp web là một bộ phận không thể thiếu của ngành công nghiệp phần mềm Với tốc độ phát triển vô cùng mạnh mẽ, ngành web đã và đang là nhân tố kích thích sự phát triển của công nghệ thông tin thế giới

Em đã quyết định chọn lập trình web làm định hướng cho việc học tập của mình Bên cạnh đó, em chọn Orange Logic làm nơi học tập và rèn luyện, bởi vì Orange Logic là một công

ty có tính thử thách công việc cao - một môi trường lý tưởng, hiện đại, chuyên nghiệp - là nơi

sẽ giúp em thực hiện những dự định của bản thân

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ó

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

Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của anh mentor, nhóm thực tập chúng em đã tiếp thu được những kiến thức quan trọng để có thể làm được một ứng dụng hoàn thiện và chỉnh chu Chân thành cảm ơn anh mentor đã bỏ ra nhiều thời gian, công sức để hướng dẫn chúng em hoàn thành đợt thực tập này

Đặc biệt cảm ơn anh Nguyễn Thanh Cao, đã training, hướng dẫn, thậm chí giúp đỡ debug cho chúng em tận tình Từ cả những khó khăn trong công việc, đến những khó khăn việc làm quen với môi trường mới

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

Nguyễn Huỳnh Lợi

Hồ Chí Minh, ngày 14 tháng 1 năm 2021

NHẬN XÉT CỦA KHOA

MỤC LỤC

Chương 1: Giới thiêu công ty thực tập 6

1 Giới thiệu công ty Orange Logic Việt Nam 6

2 Sản phẩm của công ty 6

Chương 2: Nội dung thực tập 7

1 Giới thiệu về công ty và setup máy 7

2 Nghiên cứu kỹ thuật và yêu cầu dự án 7

2.1 Các công cụ làm việc 7

2.2 Tìm hiểu Reactjs cơ bản và nâng cao 8

2.3 Sản phẩm CORTEX, yêu cầu dự án Dashboard Builder 9

3 Thực hiện project 9

4 Lịch làm việc 10

Chương 3: Chi tiết về project 12

1 Giới thiệu về Ứng dụng dashboard builder 12

2 Yêu cầu 12

3 Thiết kế 13

4 Kế hoạch & kết quả 15

4.1 Kế hoạch 15

4.2 Thực hiện 15

4.3 Kết quả 16

Chương 1: Giới thiêu công ty thực tập

1 Giới thiệu công ty Orange Logic Việt Nam

Cortex là một công cụ DAM (quản lý tài sản kỹ thuật số), một trong những sản phẩm tốt nhất trên thị trường hiện nay Là một ứng dụng SaaS cao cấp của Orange Logic, CORTEX | DAM, được tạo ra để hỗ trợ các công ty trên toàn thế giới mở rộng quy mô hoạt động kỹ thuật số của họ Khách hàng của Orange Logic đến từ nhiều ngành công nghiệp và bao gồm cả 100 công ty trong danh sách Fortune

2 Sản phẩm của công ty

Sản phẩm của công ty:

 Cortex là một ứng dụng SaaS cao cấp của Orange Logic, được tạo ra để hỗ trợ các công

ty trên toàn thế giới mở rộng quy mô hoạt động kỹ thuật số của họ Khách hàng của Orange Logic đến từ nhiều ngành công nghiệp và bao gồm cả 100 công ty trong danh sách Fortune

Chương 2: Nội dung thực tập

1 Giới thiệu về công ty và setup máy

Thời gian: 2 ngày

Nội dung:

Được các anh chị HR và nhân viên giới thiệu về công ty, quá trình thành lập và phát, quy trình làm việc từ cao xuống thấp, cách thức tổ chức của công ty Làm quen, giao lưu với các anh chị nhân viên, theo từng bộ phận và theo team Các anh chị giới thiệu về các sản phẩm và những thành tựu cua công ty đã đạt được

Các anh kỹ thuật hướng dẫn và cấp thiết bị, sử dụng các nguồn tài nguyên của công ty Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công

ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email, các 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 quả đồng thời hướng dẫn cách về tác phong, các bước làm việc của team và thông tin liên hệ khi quá trình làm việc gặp vấn đề hoặc gặp sự cố bất ngờ Được cấp tài khoản tham gia vào các 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 về quá trình thành lập và phát triển Có thêm các kỹ năng về việc sử dụng email, trong công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn

2 Nghiên cứu kỹ thuật và yêu cầu dự án

Thời gian: 2 tuần

2.1 Các công cụ làm việc

Nội dung:

- Tìm hiểu về các công cụ sẽ được sử dụng trong quá trình làm việc

- Trong thời gian này, mentor đã hướng dẫn thực tập sinh tìm hiểu các công cụ sẽ giúp cho quá 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 như Google Chats,…

- Tìm hiểu các nguyên tắc cơ bản, format code trong quá trình làm viêc và summit code

- IDE dùng triển khai code và review là Visual Studio Code

2.2 Tìm hiểu Reactjs cơ bản và nâng cao

Nội dung:

Tự tìm hiểu, nghiên cứu Reactjs, đọc tài liệu, code và test thử các API của nó Hiểu được cách hoạt động và ứng dụng vào project

Các ưu điểm của NextJs

- Xây dựng ứng dụng web, ngay trên browser, không cần người dùng tải về

- Tự động update, scale

- Tương thích trên nhiều hệ điều hành khác nhau

- Là thư viện có lượng người dung lớn nhất hiện nay trên thị trường

So sánh giữa Reactjs và Jquery

Tương tác trên DOM ảo DOM thật

Độ nổi tiếng Nổi tiếng nhất hiện giờ Từng nổi tiếng

Kết quả:

- Hiểu rõ và nắm được các kiển trúc và thành phần của Reactjs

- Có cái nhìn tổng quan về các tính năng nổi bật của Reactjs

- Sử dụng, thực thi được các tính năng của Reactjs, hiểu rõ về 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 về ứng dụng CORTEX và sự liên quản của nó đến ứng dụng Dashboard Builder

- Nghiên cứu các API hiện tại CORTEX đang cung cấp, định nghĩa các API còn thiếu để xây dựng được ứ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 quả :

- Ôn lại và củng cố các khái niệm cơ bản và nâng cao của ReactJs

- Hiểu được project CORTEX hiện tại của công ty

- Định nghĩa được các API còn thiếu cần cung cấp

3 Thực hiện project

Sau 2 tuần đầu nghiên cứu, thực tập sinh đã nắm được những kiến thực cơ bản và nâng cao về ReactJs, hiểu thêm về ứng dụng nội bộ CORTEX của công ty

Nhóm thực tập sinh đã hoàn thiện project theo đúng yêu cầu để ra của công ty, được công ty dành cho những lời khen có cánh

4 Lịch làm việc

Mức

độ hoàn thành

Nhận xét của người hướng dẫn

0

- Tìm hiểu, nghiên cứu, làm rõ yêu cầu

- Nghiên cứu hướng tiếp cận tốt nhất cho project

- Xây dựng một ứng dụng POC để chứng minh cho hướng tiếp cận

- Một bài thuyết trình

về cách tiếp cận project và ứng dụng POC: ngôn ngữ được chọn, kiến trúc dự án,…

- Chia sẻ suy nghĩ cá nhân và góp ý

100%

1

- Triển khai ứng dụng

- Trao đổi với official staff tại công ty, định nghĩa và xây dựng các API còn thiếu

- Trao đổi với user về độ hài lọng của ứng dụng

- Một buổi demo cuối sprint về những gì đã được làm

- Peer review về những task đã được hoàn thành trước buổi demo

- Chia sẻ suy nghĩ cá nhân và góp ý

100%

2

- Tiếp tục triển khai, sửa chữa ứng dụng

- Xây dựng tiếp những tính

- Một buổi demo cuối sprint về những gì đã được làm

100%

năng còn thiếu

- Trao đổi với người dung

về những tính năng, khó khan gặp phải

- Peer review về những task đã được hoàn thành trước buổi demo

- Chia sẻ suy nghĩ cá nhân và góp ý

3

- Fix bug, xem xét những tính năng nào cần hoàn thành, những tính năng nào có thể bỏ qua

- Kiểm thử, deploy, viết document, tạo hướng dẫn

sử dụng cho người dùng

- Bản demo cuối cùng

- Chia sẻ về những điều đã học được trong kỳ thực tập

100%

Chương 3: Chi tiết về project

1 Giới thiệu về Ứng dụng dashboard builder

Mục đích: Có một dashboard hiển thị tiến trình làm việc của team ở mỗi sprint để tạo động lực cho mọi người làm việc Dashboard này sẽ được config bởi admin, và được chiếu lên mfan hình 55 inch giữa công ty nơi mà tất cả các developer khác đều có thể nhìn thấy

Hiện tại: Công ty hiện tại đã có một ứng dụng dashboard ở mức đơn sơ sử dụng Google Sheets và HTML cơ bản, các cây query được cập nhật thủ công bởi admin, rất tốn công sức mặc

dù công việc rất lặp đi lặp lại

Mong muốn: Có một ứng dụng tự động hoá quá trình lấy query, update lên dashboard mà không cần người admin thủ công update mỗi 5 phút nữa Bên cạnh đó, làm cho ứng dụng có tính mở động, tái sử dụng cao nhất có thể, để tái sử dụng cho team bên Mỹ, Pháp

2 Yêu cầu

Chung: Hiển thị dashboard trên màn hình 55 inch, trên 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, dữ liệu được update real-time, giúp cho những lập trình viên có thể cập nhật tiến độ làm việc của họ ngay lập tức

- Tự động hiển thị dashboard phù hợp vào đúng ngày cụ thể (Ví dụ dashboard Enhancements sẽ vào thứ 2, 3, 5, Defects sẽ vào thứ 2, 4, 6) Timeslot có thể tuỳ chỉnh được theo ý admin chứ không cố định như trên ví dụ

- Có màn hình cho một số sự kiện đặc biệt chẳn hạn như Code Review, Bounty Day,…

Phía admin:

- Các câu query lấy dữ liệu được cập nhật dễ dàng, ngay cả khi admin không rành công nghệ

- Có những filter nhất định nếu cần

- Có thể config UI cho các dashboard dễ dàng

3 Thiết kế

4 Kế hoạch & kết quả

4.1 Kế hoạch

- Có một dashboard thể hiện được các thông tin cần thiết, với dữ liệu chính xác, và được lấy về một cách tự động

- Timeslots có thể được config một cách dễ dàng

- Hỗ trợ hiển thị các sự kiện đặc biệt

- Xác thực dựa trên tài khoản nội bộ hiện có của công ty

- Ít nhất phải có một UI cố định giống như design có sẵn cho người dung nếu không thể làm UI configurable được

- Sử dụng MERN Stack

4.2 Thực hiện

- Thực hiện theo kế hoạch, tuy nhiên sử dụng React + Firestore thay vì MERN stack để bắt kịp thời gian

- Tất cả các chức năng đã hoàn thành theo yêu cầu Một số chức năng thêm ngoài mong đợi của phía người dùng

- Củng cố kiến thức đã biết về ReactJs, Firestore

- Học cách giao tiếp với thành viên trong nhóm để làm rõ yêu cầu, lên kế hoạch thực hiện các tính năng

- Video final demo

TÀI LIỆU THAM KHẢO

Kiến thức cơ bản và nâng cao về ReactJs:

https://reactjs.org/docs/getting-started.html

TỔNG KẾT

Như vậy, trong thời gian 12 tuần thực tập ở công ty em đã học được nhiều kiến thức,

và kinh nghiệm trong quá trình thực hiện dự án Bổ sung kiến thức về lập trình bằng framework ReactJs Tích lũy cho bản thân được tính kỷ luật trong quy trình làm việc, cũng như thực hiện kiểm thử và rà soát lỗi sau khi hoàn thành task của mình, đồng thời sau khi được trải nghiệm

và làm việc em đã thay đổi được tư duy về cách lập trình, nắm bắt được cách xây dựng - phát triển một chức năng, từ đó có định hình được kiến trúc và xây dựng của một hệ thống phần mềm hoàn chỉnh

Em xin chân thành cảm ơn sự giúp đỡ của các anh chị đặc biệt là anh Nguyễn Thanh Cao đã giúp em học hỏi rất nhiều phát huy năng lực của bản thân trong môi trường làm việc chuyên nghiệp Đồng thời có cơ hội tiếp xúc với những kiến thức, kinh nghiệm để giúp em hoàn thành ứng dụng web này