Lập Trình Ứng Dụng Couple Game Với Flutter (Báo Cáo Thực Tập).Pdf

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

LẬP TRÌNH ỨNG DỤNG COUPLE GAME
VỚI FLUTTER

Cơng ty thực tập

: CUỒNG PHIM

Người phụ trách

: NGUYỄN HOÀI NAM

Thực tập sinh

: TRẦN THÀNH TRUNG

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


LỜI MỞ ĐẦU

Ngày nay, xu thế lập trình đã trở nên rất có sức hút và cực kỳ khát nguồn nhân lực.
Khơng kể đến web, app, frontend, backend, mà cịn đa dạng ngôn ngữ.
Cùng với xu thế phát triển ấy. dĩ nhiên mọi người sẽ yêu cầu những thứ áp dụng cho cuộc
sống, điển hình là các ứng dụng điện thoại – nền tảng mobile, một môi trường béo bở để lĩnh
vực IT khai thác tiềm năng, do đa số người dùng ai cũng sẽ sở hữu một hcieecs smartphone với
đầy ắp các ứng dụng của riêng mình.

Vậy nên, nhu cầu sử dụng điện thoại tăng cao, đòi hỏi nền tảng mobile (Android, IOS)
phải ln thích ứng, cập nhật, các developer sẽ liên tục cho ra sản phẩm mới đáp ứng nhu cầu
của mỗi người, có thể hướng tới thoả mãn một nhóm nhỏ, hay là đại đa số, tuỳ thuộc vào kế
hoạch và hướng đi của ứng dụng được làm ra.
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 tại môi trường chuyên nghiệp, em đã dự định là thực tập trong
hè. Và rồi em chọn Cuồng Phim, một công ty với sức trẻ năng động, sáng tạo, sẽ giúp em tiến
xa hơn trong lĩnh vực lập trình mobile.

2


LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty Cuồng Phim đã 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 và lịng nhiệt thành của
các anh chị trong công ty, em đã tiếp thu được những kiến thức quan trọng để có thể làm được
một ứng dụng có thể gọi là hồn chỉnh và đưa lên cửa hàng IOS cũng như Android. Chân thành
cảm ơn các anh chị đã bỏ ra nhiều thời gian,cơng sức để hướng dẫn em hồn thành đợt thực tập
này.
Đặc biệt cảm ơn anh Nguyễn Hoài Nam và Lê Thành Trung, đã giúp đỡ, hướng dẫn, tận
tình chỉ bảo cho em hướng đi, hướng phát triển, cũng như hỗ trợ những khó khăn việc làm quen
với mơi trường mới. Cảm ơn tất cả mọi người trong công ty đã xây dựng một bầu khơng khí vui
vẻ, nồng nhiệt như một gia đình khi em đang trong thời gian thực tập tại công ty.
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 cho em làm bài báo cáo này.
Trần Thành Trung - 19522436
TPHCM, ngày 10 tháng 9 năm 2022

3


NHẬN XÉT CỦA KHOA
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................

..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................

4


MỤC LỤC

Contents
Chương 1: GiỚI THIỆU CÔNG TY THỰC TẬP

6

1.

Giới thiệu công ty Cuồng Phim

6

2.

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

6

Chương 2: NỘI DUNG THỰC TẬP

8

1.

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

8

2.

Nghiên cứu kỹ thuật

8

2.1.

Tìm hiểu State Management Riverpod

8

2.2.

Tạo Demo Rollingdice

9

2.3.

Lập trình CoupleGame

10

3.

Thực hiện project

11

4.

Lịch làm việc

11

Chương 3: CHI TIẾT VỀ PROJECT
1.

Giới thiệu về game

14
14

1.1.

Ý tưởng

14

1.2.

Luật chơi chính

15

2.

Thực hiện

17

3.

Kế hoạch

17

Chương 4: TÀI LIỆU THAM KHẢO

19

Chương 5: TỔNG KẾT

20

5


Chương 1: GiỚI THIỆU CÔNG TY THỰC TẬP

1. Giới thiệu công ty Cuồng Phim
Cuồng Phim là một công ty mới được thành lập vào đầu tháng 1 năm 2022 này, sở

hữu fanpage Facebook đạt 1,9 triệu follower, hoạt động nhiều mảng và mới startup
bên lĩnh vực phát triển ứng dụng di động.
Cuồng Phim có đội ngũ nhân viên với tuổi đời trẻ trung, năng động, ln tích cực,
niềm nở trong mọi vấn đề. Hiện tại, chi nhánh của Cuồng Phim đang ở tại Bến Vân
Đồn, Quận 4 TPHCM.

2. Sản phẩm của công ty
Cuồng Phim hiện đang phát triển ứng dụng di động đa nền tảng, sử dụng
framework Flutter để khởi tạo, cấu hình, lập trình và đưa sản phẩm lên AppStore và
CHPlay. Cuồng Phim chắc chắn sẽ cho bạn một trải nghiệm mới với những ý tưởng,
những ứng dụng hay ho được phát hành.
Các sản phẩm của cơng ty có thể kể đến như:
● IVirtual : Lofi & Chill
o Vốn định là một app online nhằm kết nối những người bạn, những
team làm việc cùng nhau, bằng các nhân vật chibi dễ thương, cùng một
số chức năng khác, công ty quyết định chuyển đổi sang phiên bản
offline, với các tính năng cụ thể : nghe nhạc lofi, whitenoise có sẵn
trong app, hay giúp tập trung vào công việc với Promodo – tự cài thời
gian tập trung làm việc(Focus Time) và quãng nghỉ(Break Time),…
6


Chương 2: NỘI DUNG THỰC TẬP
Đợt thực tập với chủ đề “Lập trình ứng dụng Flutter” nhằm mục đích giúp sinh viên thực
tập được đào tạo toàn diện về Framework Flutter, ngôn ngữ Dart, các cách để quản lý trạng
thái(state management),… đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, thảo
luận, giao tiếp cùng nhau. Tại cơng ty, sinh viên có cơ hội được học tập, khám phá và làm việc
trong một môi trường phát triển ứng dụng di động năng nổ, trẻ trung, sáng tạo.

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

Thời gian : 2 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 người phụ trách giới thiệu về cơng ty, q 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 .
Ngồ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 Cuồng Phim, q 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.

Tìm hiểu State Management Riverpod
Thời gian : 8 ngày (1,5 tuần)
Nội dung : Được học hỏi về cách tổ chức một project kèm theo training sử dụng
Riverpod.
- Tham gia test app IVirtual
- Ôn lại kiến thức về Flutter
Ôn tập lại cách sử dụng các thành phần của Flutter như package uuid, các widget
trong Flutter,…
- Học State Management Riverpod
Tiếp cận và sử dụng thành thạo Riverpod- một phương thức quản lý state của
Flutter
- Tìm hiểu cấu trúc Project
Thực tập sinh sẽ được thêm vào các dự án trước/hiện có của cơng ty để học hỏi về
cách tổ chức một project theo state management và architecture quen thuộc như
MVVM, MVC, …

7


Thực hiện :
- Tham gia đầy đủ các buổi training của công ty.
- Áp dụng, báo cáo lại kiến thức đã học.
Kết quả :
-

2.2.

Nâng cao kỹ năng lập trình với Dart và Framework FLutter
Có được những kiến thức quan trọng trong việc xây dựng các ứng dụng Flutter
nói riêng và các ứng dụng di động, web nói chung.
Ngồi ra cịn được biết thêm một số quy tắc trong việc viết code sao cho đúng
chuẩn, dễ đọc, dễ hiểu.

Tạo Demo Rollingdice
Thời gian : 10 ngày (2 tuần)
Nội dung: Áp dụng các kiến thức đã được học để xây dựng demo Rolling Dice –
Tung xúc xắc.
- Khái niệm về Riverpod
Hiểu rõ được khái niệm về quản lý state – state management, một phương thức
quản lý trạng thái nhằm cập nhật/ thống báo thay đổi tới người dùng qua giao diện
khi có thay đổi ở các phần chúng đang quản lý. Sau đó là thấu hiểu cách hoạt
động của Riverpod.
- Tìm hiểu về Animation
Tìm hiểu chuyển động ở trong Flutter và cách sử dụng đi kém với package/widget
hỗ trợ sao cho phù hợp với yêu cầu được đưa ra
- MVVM

Cách tổ chức project và code bên trong nó theo một mơ hình cố định, nhằm minh
bạch giữa các phần data, xử lý và giao diện cho người dùng.
Áp dụng vào demo với MVVM kết hợp Riverpod, khi đó Riverpod sẽ thay lớp
ViewModel(VM) của MVVM.
Thực hiện :
-

Tham gia đầy đủ các buổi.
Thực hiện cái yêu cầu về Demo RollingDice.
Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.

Kết quả :
-

Hiểu được cách Animation hoạt động, hoàn thành các yêu cầu về RollingDice
8


2.3.

Đã phần nào giải đáp được một số thắc mắc

Lập trình CoupleGame
Nội dung : Lập trình ứng dụng CoupleGame bằng Flutter
- Định nghĩa về Flutter :
Flutter là một UI framework của ngôn ngữ Dart, một ngôn ngữ được kế thừa tinh
hoa từ các ngôn ngữ hướng đối tượng như Java, C#,… Flutter dựa trên Dart để tạo
nên ứng dụng đa nền tảng (Cross-platform) cho người dùng Android và IOS thay
vì phải xây dựng riêng biệt như các Android Native cho Android, Swift cho IOS
(Native app).

- Định hướng CoupleGame:
Một ứng dụng dành cho các cặp đơi u thích trị tung xúc xắc – Dice hoặc Sự
thật hay thử thách – Truth or Dare, nhằm kéo các mối quan hệ lại gần hơn, gắn
chặt mối liên kết, tăng sự tin tưởng, nhưng chủ yếu vẫn sẽ mang tính giải trí giữa
hai người với nhau.
- Xây dựng giao diện bằng Flutter:
Khởi tạo từng phần giao diện theo mẫu thiết kế đã được designer của công ty thực
hiện.
- Áp dụng Demo Rolling Dice vào ứng dụng CoupleGame.
Từ những kiến thức có được cộng kết hợp linh động tìm hiểu trên mạng trong quá
trình làm, áp dụng Animation, Rivepod và MVVM vào ứng dụng CoupleGame.
- Tìm hiểu Hive, QonVersion
Tìm hiểu, sử dụng Hive để lưu trữ dữ liệu local.
Tìm hiểu Qonversion để hiểu được cách In-App-Purchases hoạt động.
Thực hiện :
-

Tham gia đầy đủ các buổi thực tập.
Tạo ra ứng dụng CoupleGame phiên bản đầu.

Kết quả:
-

Thành công trong việc xây dựng ứng dụng Couplegame với các chức năng đã đề
ra.

3. Thực hiện project
Sau gần một tháng được training và thực hành, thực tập sinh đã nắm được những kiến
thức cơ bản về Flutter, Dart, Riverpod và Animation. Trong khoảng thời gian còn lại,
9

thực tập sinh áp dụng những kiến thức đã học để thực hiện một project CoupleGame App
đa nền tảng.
Chi tiết đồ án sẽ được nói ở phần sau.

4. Lịch làm việc
Tuần

Cơng việc

Người hướng dẫn

Tìm hiểu về cơng
ty, cách tổ chức của
công ty.
- Làm quen với các
công cụ làm việc
trong công ty.
- Học cách trao đổi,
làm việc qua email.
- Tham gia test app
Ivirtual
- Tìm hiểu Riverpod
- Tìm hiểu MVVM
- Tìm hiểu Animation
- Tìm hiểu Riverpod
- Xây dựng demo
Rolling Dice cơ
bản áp dụng

RiverPod,
Animation
- Hồn thiện Demo
Rolling Dice theo
u cầu
- Tìm hiểu MVVM
Giai đoạn Alpha:
- Xem bản thiết kế,
xác định thành phần
cần thiết của project
- Bắt đầu xây dựng
giao diện, chức
năng cơ bản
Giai đoạn Alpha(tiếp):
- Tiếp tục xây dụng
giao diện của app

Anh Nguyễn Hoài
Nam, anh Lê
Thanh Phong, anh
Lê Thành Trung

-

1

2

3

4

5

6

Mức
độ
hoàn
thành

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

Anh Nguyễn Hoài
Nam, anh Lê
Thành Trung
Anh Nguyễn Hoài
Nam, anh Lê
Thành Trung

Anh Nguyễn Hoài
Nam, anh Lê
Thành Trung
Anh Nguyễn Hoài
Nam, anh Lê
Thành Trung

Anh Nguyễn Hoài
Nam, anh Lê

Thành Trung
10


-

7

8

Áp dụng Animation
Đưa các chức năng
cơ bản đã làm vào
giao diện như quay
xúc xắc, đếm giờ,
animation
Giai đoạn Beta:
- Hoàn thiện các chức
năng chính áp dụng
riverpod: truthdare
ngẫu nhiên,
animation
- ÁP dụng lựa chọn
level cho Dice &
TruthDare
- Tìm hiểu
Qonversion
- Tìm hiểu Hive và
thử áp dụng cho
Demo RollingDice

Giai đoạn Beta và giai
đoạn kết thúc, báo cáo :
- Áp dụng Hive cho
Couplegame:
Setting
- Fix bug, fix lỗi hình
ảnh, cỡ chữ, bộ nhớ
- Báo cáo cuối đợt
thực tập.

Anh Nguyễn Hoài
Nam, anh Lê
Thành Trung

Anh Nguyễn Hoài
Nam, anh Lê
Thành Trung

11


Chương 3: CHI TIẾT VỀ PROJECT
1. Giới thiệu về game
Game lấy ý tưởng từ luật chơi của Cờ cá ngựa có thay đổi, chỉnh sửa luật để tạo ra
gameplay thú vị hơn phù hợp với việc chơi game trên di động (Thời gian ngắn, số người
chơi ít, thường là tự chơi).
1.1.

Ý tưởng
Mượn ý tưởng từ các trò chơi phổ biến trong giới trẻ như tung xúc xắc, Sự thật

hay Thử thách, Cuồng Phim đã xây dựng một ứng dụng di động dành cho các cặp
đơi, nơi mà hai người có thể dành thời gian cho nhau, cùng tham gia các thử
thách, yêu cầu được đưa ra nhằm tăng sự tin cậy, tình cảm của đối phương với
mình.

12


1.2.

Luật chơi chính
Mơ tả
Lúc mới vào, sẽ có lựa chọn cặp đơi (Straigth, Gay, Lesbian), tuỳ thuộc đó
mà hệ thống sẽ ghi nhận danh sách các Dice / TruthDare phù hợp với cặp đơi ấy.
Sau đó, nhập tên của cả hai vào và nhấn nút Start để bước vào màn hình
ModesGame – Chọn chế độ chơi.
Nếu các Icon Chế độ chơi có hình ổ khố, đồng nghĩa với việc để được
chơi phần ấy, thì bạn phải trả tiền mua hàng. Vậy nên khi click vào các Chế độ
chơi chưa được mở khoá, sẽ được chuyển đến giao diện mua hàng của App.
Nếu cách phần chơi đã được mở khoá, khi bấm vào sẽ được chuyển đến
màn hình Game Dice hoặc TruthDare tuỳ theo người dùng chọn.
-

Tóm tắt:
Game Dice:
Kiểu chơi: Quay xúc xắc ra hai phần ngẫu nhiên là Action và Part , và sau đó
thực hiện Action với Part đó của đối phương trong 30s. nếu không sẽ bị xử thua.

13

-

Game TruthDare:
Kiểu chơi: Chọn ngẫu nhiên một trong hai người, sau đó cho phép chọn Truth or
Dare, dựa trên trị Sự thật hay thử thách. Sau khi lựa chọn, sẽ thực hiện thử
thách/trả lời trong một khoảng thời gian nhất định.

14


2. Thực hiện
4 thành viên của công ty và 1 thực tập sinh:
-

Anh Nguyễn Hoài Nam – Web, App Manager
Anh Lê Thành Trung – Lập trình viên phần Qonversion
Anh Thái Văn Nam – Lập trình viên
Anh Nguyễn Đức Cường - Designer
Trần Thành Trung – Thực tập sinh

3. Kế hoạch
Giai đoạn Alpha:
-

Hoàn thành các giao diện : Home Input, GameDice, Game TruthDare
Fix cứng Data
15

-

Sử dụng Riverpod để làm một số chức năng cơ bản : Quay xúc xắc, nhập tên, đếm
giờ, animation
Sử dụng Animation
Chưa hỗ trợ phần cấp độ Dice/TruthDare

Kết quả :
-

Hoàn thiện các phần đã nêu.

Giai đoạn Beta:
- Chỉnh sửa một số UI
- Thêm Animation vào phần purchase
- Hiểu được flow làm việc của In-App-Purchases
- Áp dụng lựa chọn level cho cả Dice & TruthDare
- Thêm dữ liệu cho Dice & TruthDare theo từng level
- Fix một số bug phát sinh
- Áp dụng Hive cho Setting
Kết quả : Đã hoàn thành toàn bộ những tính năng trên.

16


Chương 4: TÀI LIỆU THAM KHẢO
For Riverpod
Getting started | Riverpod
For Hive
Hive Docs (hivedb.dev)

For Flutter & Animation,Package
Tutorials | Flutter
Dart packages (pub.dev)
Flutter Gems - A Curated List of Dart & Flutter packages
(51) Flutter - YouTube
For Qonversion
(51) Hướng dẫn chuyển đổi đầy đủ - Kiếm tiền từ các sản phẩm kỹ thuật số - YouTube
Qonversion | In-App Subscription and Purchase Data Platform for Your App

17


Chương 5: TỔNG KẾT
Như vậy, chỉ trong vòng một tháng ngắn ngủi, em cùng các thành viên trong công ty đã
hoàn thành được bản đầu của app CoupleGame, mặc dù vẫn cịn chưa thực hiện thêm được một
số tính năng mới hay giao diện cịn đơi chỗ chưa hợp lý. Tuy nhiên, app sẽ được publish lên
AppStore và Chplay sau khi được cải thiện nên sẽ sớm được chỉn chu và trình làng cho người
dùng.
Chân thành cảm ơn sự giúp đỡ của các anh chị thuộc công ty Cuồng Phim đã tạo điều
kiện cho em được thực tập và học hỏi, cùng làm việc và trao đổi, thư giãn cùng mọi người. Cảm
ơn anh Nguyễn Hoài Nam đã giúp em hoàn thiện bản báo cáo này.

18