Báo cáo thực tập project management portal

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP Project Management Portal Công ty thực tập Amanotes Người phụ trách Vũ Quốc Tấn Thực[.]

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO THỰC TẬP Project Management Portal

Thực tập sinh : Nguyễn Quốc Dũng

TP Hồ Chí Minh, tháng 12 năm 2022

LỜI MỞ ĐẦU

Ngày nay, Internet được coi là một trong những kênh truyền thông tối ưu và tiết kiệm chi phí nhất của doanh nghiệp Nó giúp doanh nghiệp dễ dàng tiếp cận và cung cấp thông tin cho các khách hàng mục tiêu, đồng thời tiến hành các giao dịch một cách thuận tiện, an toàn

Các ứng dụng web chính là giải pháp hoàn hảo để đáp ứng nhu cầu của doanh nghiệp Webp app sử dụng đồng thời các server-side scripts (ASP và PHP) nhằm lưu trữ và truy xuất dữ liệu, kết hợp với client-side scripts (HTML và JavaScript) để hiển thị dữ liệu tới người dùng

Sau ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũng như muốn được tham gia làm việc trong một môi trường chuyên nghiệp, em có dự định là sẽ thực tập Vì vậy, em quyết định chọn Amanotes - 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 được dự định này

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty Amanotes đã 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 team Architecture -Fullstack, em đã tiếp thu được những kiến thức quan trọng để có thể làm được một ứng dụng web Chân thành cảm ơn các anh chị trong đã bỏ ra nhiều thời gian,công sức để hướng dẫn em hoàn thành đợt thực tập này

Đặc biệt cảm ơn các anh Phan Thành Sang (Leader) tạo cơ hội để em được tham gia vào team, hướng dẫn, định hướng công việc tạo động lực để em cố gắng mỗi ngày

Cảm ơn anh Vũ Quốc Tấn (Senior full stack developer) đã training, hỗ trợ nhiệt tình , giúp em hoàn thành công việc được giao một cách trọn vẹn nhất

Cảm ơn anh Nguyễn Nhật Trường (Senior frontend developer ), Trần Đặng Đăng Khoa (Senior full stack developer) và chị Phạm Thanh Tú (Product owner), Dương Thị Ngọc Dung (Quality Control) đã training, hướng dẫn, giúp đỡ cho em tận tình 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

Tên sinh viên thực hiện Nguyễn Quốc Dũng TpHCM, ngày 29 tháng 12 năm 2022

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 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 7

2.2 Tìm hiểu mô hình web Server - Client 8 2.3 Tìm hiểu và sử dụng Refine 10

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

Hình 1: Logo Amanotes

1 Giới thiệu công ty

Amanotes là nhà xuất bản game hoạt động từ năm 2015 Sản phẩm chính là tựa game Magic Tiles 3, đứng bảng xếp hạng chợ ứng dụng trực tuyến và đạt hơn 700 triệu lượt tải tính từ năm 2016 CEO của nền tảng startup nảy là hai anh Nguyễn Tuấn Cường – sinh viên tốt nghiệp đại học Ngoại thương Hà Nội và có bằng thạc sĩ ngành Sáng tạo và khởi nghiệp (ĐH Amsterdam, Hà Lan) và anh Võ Tuấn Bình - sinh viên tốt nghiệp trường đại học bách khoa Hà Nội

“Amanotes” là sự kết hợp của chữ “amateur” (nghiệp dư) và “notes” (nốt nhạc) Amanotes và đội ngũ đồng hành mong muốn, với Amanotes, bất cứ ai cũng có thể chơi nhạc và tận hưởng những trải nghiệm thú vị cùng âm nhạc

SỨ MỆNH: Nhiệm vụ của Amanotes là làm hài lòng mọi người bằng những trải nghiệm âm nhạc kỳ diệu

MỤC TIÊU DÀI HẠN: Xây dựng một hệ sinh thái âm nhạc hoàn chỉnh, tạo ra những ứng dụng tuyệt vời cho cộng đồng yêu nhạc cũng như hỗ trợ các nhà lập trình độc lập đưa sản phẩm đến đông đảo người dùng

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

Magic Tiles 3 là ứng dụng giả lập việc đánh đàn piano nhưng đơn giản hơn khi người chơi chỉ xử lý 4 nốt nhạc Sau khi chọn nhạc, thuộc nhiều chủ đề khác nhau, trò chơi bắt đầu và từ phía trên màn hình, các nốt nhạc màu đen sẽ trôi xuống phía cuối cùng với nhạc nền Nhiệm vụ của người chơi là chạm vào các nốt nhạc màu đen, trò chơi kết thúc ngay khi một nốt nhạc bị lỡ Điểm hấp dẫn nhất của trò chơi là bản nhạc chỉ nghe du dương khi người chạm vào đúng thời điểm, nếu không sẽ tạo ra các nhịp bị ngắt quãng hoặc nhấn vội Dĩ nhiên, điểm cao hơn cũng thuộc về các bài nhạc được chạm đúng nhịp

30 triệu lượt tải về sau 4 tháng không phải là cao, nhưng cũng không phải là cột mốc có thể dễ dàng đạt được, nhất là khi dạng trò chơi như vậy đã có dấu chân của người khổng lồ

đi trước là Piano Tiles 2 của Cheetah Mobile (Trung Quốc) Ứng dụng này đã có 100 triệu lượt tải chỉ tính riêng trên nền tảng Android

Trước đó, một sản phẩm khác của Amanotes cũng thành công nhờ đi sau là Tap Tap Reborn 2 Cách chơi đơn giản hơn khi chỉ người chơi chỉ xử lý 3 nốt nhạc, các bài hát cũng từ các nhóm nhạc “thị trường” hơn Chainsmokers, Twenty One Pilots… Tính đến nay, Tap Tap Reborn 2 có hơn 5 triệu lượt tải về với DAU khoảng 200.000 người và là sản phẩm đem về nguồn doanh thu đứng thứ 2 sau Magic Tiles 3 Một điều khá thú vị,

Amanotes tốn rất ít chi phí cho việc quảng cáo các ứng dụng của mình

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

Với vai trò là một thực tập sinh front end tại team Full Stack của Amanotes, dưới đây là những nội dung trong kì thực tập của em

1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty

Thời gian : 1 ngày

Nội dung : Giới thiệu về công ty, cách tổ chức của công ty

Được nghe bạn Hoàng (Nhân sự) giới thiệu về công ty, quá trình thành lập và phát triển (như đã nhắc đến ở trên), 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

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 trong công việc…

Kết quả : Hiểu thêm về công ty Amanotes, 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

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

Thời gian: 1 tuần

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, thực tập sinh được giới thiệu và hướng dẫn sử dụng một số công cụ sẽ hỗ trợ trong quá trình là việc: Visual Studio Code - một code editor, Jira – Quản lý tiến độ và phần chia công việc, Bitbucket – lưu trữ source code dự án của team,

Figma – thiết kế giao diện phần mềm, Slack – mạng xã hội giao tiếp giữa các thành viên,

…

Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.

Kết quả : Có kỹ năng sử dụng các phần mềm trên, có khả năng phối hợp giữa các

phần mềm

2.2 Tìm hiểu mô hình web Server - Client

Thời gian : 2 ngày

Nội dung : Được training về cách thức hoạt động của mô hình web Server - Client

Mô hình web Server – Client: Mô hình client - server là mô hình giúp các máy tính giao tiếp truyền tải dữ liệu cho nhau

Client và server về bản chất thì nó là 2 máy tính giao tiếp và truyền tải dữ liệu cho nhau

Máy tính đóng vai trò là máy khách – Client: Với vai trò là máy khách, chúng sẽ không cung cấp tài nguyên đến các máy tính khác mà chỉ sử dụng tài nguyên được cung cấp từ máy chủ Một client trong mô hình này có thể là một server cho mô hình khác, tùy thuộc vào nhu cầu sử dụng của người dùng

Máy tính đóng vai trò là máy chủ – Server: Là máy tính có khả năng cung cấp tài nguyên và các dịch vụ đến các máy khách khác trong hệ thống mạng Server đóng vai trò

hỗ trợ cho các hoạt động trên máy khách client diễn ra hiệu quả hơn

Và mô hình client-server này được rộng rãi nhất nên trong bài viết này sẽ đi tìm hiểu về mô hình client-server

Hình 2 Mô hình web client - server

REST API (còn được biết với tên gọi RESTful API) là một giao diện lập trình ứng dụng (API) tuân thủ các ràng buộc và quy ước kiến trúc REST được sử dụng trong việc giao tiếp giữa client và server. REST là viết tắt của Representational State Transfer, nó được tạo ra bởi nhà khoa học máy tính Roy Fielding

Hai thành phần trong REST API :

REST (REpresentational State Transfer) là một đại diện cho sự chuyển đổi dữ liệu Trong kiến trúc này client và server hoàn toàn độc lập, chúng không biết gì về nhau Mỗi một request REST API đều không mang theo trạng thái trước đó (stateless) Như vậy

để đôi bên trao đổi state, chúng sẽ phải thông qua các resources Các resource này chính là phần đại diện cho sự thay đổi dữ liệu

API (Application Programming Interface) là giao diện lập trình ứng dụng Giao diện này không dành cho người dùng cuối mà dành cho các nhà phát triển (developer) Nó

là cái “bề mặt”, chỉ thấy được phần khai báo (tên, tham số, kiểu trả về), bộ đồ lòng body thì không biết “Biết mặt không biết lòng” chính là API

- Thực hiện: Tham gia đầy đủ các buổi training của công ty

- Kết quả: Hiểu được mô hình hoạt động của mô hình web, có được những kiến thức quan trọng cho việc phát triển web này

2.3 Tìm hiểu và sử dụng Refine

Refine là một front end framework dựa trên reactjs, kết hợp với nhiều thư viện hiện đại Giúp cho quá trình phát triển một ứng dụng web nhanh chóng và và chất lượng, đặc biệt cho những ứng dụng quản lý

Hình 3 Refine

Sử dụng kết hợp refine với các Framework ui như Material UI, Ant design,

Authentication trong dự án refine

Gọi request đến Server kết hợp với React query

Thực hiện : Khởi tạo một dự án refine, authentication, có thể thêm xóa sửa dữ liệu trên database qua API,

Kết quả : Tạo được một dự án quản lý dữ liệu cơ bản, có kiến thức để chuẩn bị cho

dự án Project management Port

2.4 Git-Flow trong dự án

Dự án gồm có 2 nhánh chính: Master và develop

Hình 4 Git Flow

Nhánh master là nhánh đươc merge từ develop sau khi đã hoàn thành xong một version

Nhánh develop là nhánh được các thành viện dùng để phát triển phần mềm trên đó

Git-Flow như sau:

- Dự án được khởi tạo với 2 branch là develop và master

- Để phát triển một tính năng, dev sẽ check out từ develop ra một branch mới mà làm việc trên đó

- Sau khi đã hoàn thành sẽ pull request lên nhanh develop và cần được các thành viên khác review

- Sau khi tính năng đã được merge vào develop, thì sẽ tiến hành deploy lên môi trường QC Lúc này QC sẽ tiến hành test tính năng, cùng với toàn bộ phần mềm

- Sau khi nhiều tính năng hoàn thành đủ cho phát hành một phiên bản mới, thì sẽ nhánh develop sẽ được merge vào nhánh master và deploy lên môi trường production

- Nếu trong quá trình sử dụng trên production có phát sinh lỗi, team dev sẽ lập tức tao một branch mới hotfix trên branch master để fix nhanh chóng

3 Thực hiện project

Sau khi đã trải qua 2 tuần training thì em chính thức được được hiện dự án cùng team Fullstack

Team Fullstack làm môt subteam của team Architecture trong công ty Amanotes, trong team gồm có: 

●  Anh Phan Thành Sang (Leader),

●  Anh Vũ Quốc Tấn (Senior) người trực tiếp hướng dẫn em

●  Chị Rosie Phạm (Product owner)

●  Anh Nguyễn Nhật Trường (Senior)

● Anh Trần Đặng Đăng Khoa(Senior)

● Chị Dương Thị Ngọc Dung(Quality control)

● Nguyễn Quốc Dũng( intern)

Bắt đầu đọc PMP (Project Management Portal)  Document, tìm hiểu hệ thống, đọc source code, sẵn sàng nhận phân công công việc

Team hoạt động theo mô hình Scrum, các công việc sẽ được lên kế hoạch và thực hiện theo từng giai đoạn gọi là sprint (một sprint = 2 tuần)

Mỗi buổi sáng vào lúc 9h30 cả nhóm sẽ có buổi Daily, buổi nhằm giúp cho các thành viên có thể biết được tiến độ của dự án, và biết những thành viết khác đã, đang, và

sẽ làm gì Mối thành viên sẽ nói về những việc hôm qua đã làm, có vấn đề gì cần hỗ trợ không hoặc có bị block bởi một task khác của ai đó không Sau đó nói về kế hoạch của mình trong ngày hôm nay

Hàng tuần, mỗi 2h – 4h chiều thứ 4 hàng tuần cả team sẽ có một buổi sharing section, trong buổi sharing này, mỗi tuần sẽ có một thành viên chia sẻ kiến thức về một chủ đề, và cùng nhau thảo luận đóng góp ý kiến để đúng hơn, đầy đủ hơn

Vào thứ 6 trước khi bước vào một sprint mới vào buổi chiều, cả team sẽ demo những tính năng được đưa ra trong sprint hiện tại với PO, sáu đó sẽ tiến hành lên kế hoạch cho sprint tiếp theo

4 Lịch làm việc

Tập trung chủ yếu về phần thiết kế giao diện, tính năng và kết nối API cho hầu hết dự án

dẫn Mức độ hoàn thành Nhận xét của người hướng

dẫn

1 Tìm hiểu quy trình làm

việc, các công cụ hỗ trợ:

Atlassian - Jira - Bitbucket

Vũ Quốc Tấn 9/10

2 Tìm hiểu framework

Strapi và Refine, tạo một

dự án cơ bản dựa trên 2

framework trên

Vũ Quốc Tấn 9/10

3 Đọc document dự án

PMP, bắt đầu dựng layout

cơ bản cho trang

homepage (header - footer

- navigation - main

component) Hoàn thiện

tính năng Global Search

Vũ Quốc Tấn 9/10

4 Hoàn thiện giao diện, chức

năng và phần kết nối API

cho trang Integration

management

Vũ Quốc Tấn 8/10

5 Tiếp tục công việc tuần 4 Vũ Quốc Tấn 8/10

6 Hoàn thiện giao diện &

tính năng Integration Vũ Quốc Tấn 9/10

Details - Revenue Cat

Bao gồm phần lấy dữ liệu,

tìm kiếm và lọc dữ liệu

trên bảng

7 Tiếp tục công việc tuần 6 Vũ Quốc Tấn 9/10

8 Hoàn thiện giao diện &

tính năng cho modal

popup trong trang

Integration Details -

Revenue Cat

Vũ Quốc Tấn 9/10

9 Hỗ trợ QC trong việc tìm

kiếm và fix bug để chuẩn

bị release UAT

Vũ Quốc Tấn 10/10

10 Cải thiện giao diện và

logic trong trang

Integration details -

Revenue Cat

Vũ Quốc Tấn 8/10

11 Hỗ trợ QC và thêm đầu

mục trong menu

navigation

Vũ Quốc Tấn 9/10

12 Bắt đầu feature mới, làm

giao diện và tính năng cho

trang metabase

Vũ Quốc Tấn 9/10

13 Làm thêm diện và tính

năng bookmark cho

metabase dashboard

Vũ Quốc Tấn 10/10

14 Fix bug và refactor code

metabase Vũ Quốc Tấn 10/10

15 Phân quyền user trong các

trang product, studio Vũ Quốc Tấn 8/10

16 Fix bug và check lại các

chức năng tương ứng với

từng role

Vũ Quốc Tấn 8/10

17 Tham gia planning và đọc

document cho dự án mới, Vũ Quốc Tấn 8/10

18 Tham gia init frontend cho

dự án mới Vũ Quốc Tấn 8/10

19 Làm giao diện, chức năng

show list các application,

các campaign, creative của

app

Vũ Quốc Tấn 9/10

20 Làm giao diện, chức năng

cho list các filter, filter

application, filter date

time, filter campaign, filter

creative, filter operator,

Vũ Quốc Tấn 9/10

21 Fix các lỗi nhỏ về giao

diện, tính năng cho toàn

bộ CCS

Vũ Quốc Tấn 9/10

22 Làm giao diện các step

form upload creative,

validation các input

Vũ Quốc Tấn 9/10

23 Làm giao diện modal

show trạng thái loading

sau khi upload creative

thành công, bao gồm

maximize modal và

miximize modal

Vũ Quốc Tấn 9/10

24 Làm thêm tính năng

drag(kéo, di chuyển)

miximize modal

Vũ Quốc Tấn 9/10

25 Fix bug, xem lại code,

refactor những feature đã

làm

Vũ Quốc Tấn 9/10

26 Học, tìm hiểu docker, cách

chạy docker trong dự án Vũ Quốc Tấn 9/10

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

1 Giới thiệu về project

PMP ( Project Management Portal) là một hệ thống\giúp quản lý các ứng dụng điện thoại được phát hành trên thị trường ( chủ yếu là Apple Store, và Google Play ) dành cho nhà phát hành Để quản lý một ứng dụng trên thị trường, giúp ứng dụng phát triển hơn, khai thác doanh thu hiệu quả hơn, thì nhà phát hành cần phải sử dụng thêm những dịch vụ hỗ trợ như là:

● Appsflyer: một nền tảng ứng dụng tiếp thị cho phép các nhà xuất bản để theo dõi và sau

đó tối ưu hóa việc mua lại người dùng của họ Nền tảng này có khả năng phân tích thời gian thực và cho phép các nhà phát triển có thể xem các thông số như: số lần nhấp chuột,

số lượt hiển thị, cài đặt, lượng user vào trong ứng dụng mua hàng Qua đó cho nhà phát triển một cái nhìn bao quát nhất và dễ dàng phân tích, điều chỉnh chiến lược trong giai đoạn tiếp theo sao cho phù hợp và đạt được mục tiêu sau cùng

Hình 5 Appsflyer

● RevenueCat: Là một dịch vụ trung gian giúp quản lý các các gói đăng kí trong ứng dụng một cách mình mình, nhanh chóng