Báo cáo thực tập xây dựng ứng dụng MOBILE đa nền tảng với FLUTTER

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

XÂY DỰNG ỨNG DỤNG MOBILE ĐA NỀN
TẢNG VỚI FLUTTER

Công ty thực tập

: Gonosen Quốc tế – Stage Group VN

Thực tập sinh

: Nguyễn Quang Khang -17520617

Lớp

: SE501.L11

1


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

2


LỜI MỞ ĐẦU

Ngày nay, ngành công nghiệp Mobile Software là một bộ phận không thể thiếu của

ngành công nghiệp phần mềm. Ngày nay điện thoại di động thông minh đã trở thành phần
không thể thiếu của nhiều người trong cuộc sống hằng ngày. Tiến bộ của công nghệ và trải
nghiệm người dùng đang thúc đẩy sự phát triển của thị trường thiết kế ứng dụng di động.
Cùng với xu thế phát triển của thế giới, Việt Nam cũng không phải ngoại lệ. Trong thời
đại 4.0 hiện nay và trong tương lai, hầu như tất cả mọi người đều sở hữu và sử dụng smartphone
thường xuyên trong công việc và hầu hết các dịch vụ trong đời sống xã hội. Do đó nhu cầu phát
triển ứng dụng di động ngày càng phát triển mạnh mẽ.
Hiện nay, sự cạnh tranh mạnh mẽ trong nền công nghiệp mobile đã tạo ra rất nhiều hệ
điều hành khiến cho việc phát triển ứng dụng di dộng cũng gặp không ít khó khăn trong việc
phải tạo ra các ứng dụng sử dụng được trên tất cả các hệ điều hành. Đó cũng chính là lý do
Cross-flatform ra đời giúp tạo ra những ứng dụng có thể chạy trên nhiều hệ điều hành khác
nhau. Trong đó Flutter là một trong những Framework mới ra đời nhưng thu hút rất nhiều
mobile developer do sự dễ sử dụng, biên dịch nhanh , và rất nhiều tính năng nổi trội để tạo ra
những ứng dụng cross-flatform chất lượ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 thực tập trong một môi trường chuyên nghiệp, nên quyết định nộp đơn
thực tập trong hè. Vì vậy, em quyết định chọn Gonosen Quốc tế - một môi trường lý tưởng,
hiện đại, chuyên nghiệp là nơi tuyệt vời cho các developer trẻ có thể thể hiện mình và học hỏi
được nhiều kĩ năng trong việc phát triển phần mềm cùng một hệ thống lớn.

3


LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty Gonosen Quốc tế đã 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 leader và team
developer đầy kinh nghiệm đã giúp đỡ tận tình để cùng tạo ra một ứng dụng hồn chỉnh cho
khách hàng. Chân thành cảm ơn các anh chị trong nhóm Flutter Developer đã 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 anh Lê Hồng Hiển và tất cả mọi người trong công ty đã tạo điều kiện và
cũng như giúp đỡ tận tình trong suốt thời gian thực tập ở 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 em làm bài báo cáo này.
Nguyễn Quang Khang
TpHCM, ngày 29 tháng 1 năm 2021

4


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

7

1.

Giới thiệu công ty Gonosen Quốc tế

7

2.

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

7
5

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

3.

2.1.

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

8

2.2.

Thiết kế UI với figma cho sẵn

8

2.3.

Fetch api với Graphql trong Flutter

8

2.4.

Tìm hiểu và sử dụng các thư viện của Flutter

9

2.5.

Kiểm thử và fix lỗi trước khi Commit cho leader

9

2.6.

Tìm hiểu Source Tree (Desktop Git) và sử dụng thành thạo

9

Thực hiện project

9

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

10

1.

Giới thiệu về app Liberlove

10

2.

Thực hiện

10

3.

Kế hoạch

10

4.

Các màn hình:

10

4.1.

Đăng nhập , đăng kí, đởi mật khẩu, qn mật khẩu:

10

4.2.

Màn hình Home:

12

4.3.

Màn hình Friend:

13

4.4.

Màn hình Chat:

13

4.5.

Màn hình Profile:

14

4.6.

Màn hình Edit Profile:

15

4.7.

Màn hình Edit Setting:

16

4.8.

Màn hình Confession Post:

17

6


Chương 1:

Giới thiêu công ty thực tập

1. Giới thiệu công ty Gonosen Quốc tế
Gonosen Quốc Tế là một công ty con của Stage Group của Nhật Bản.
Kinh doanh trên các lĩnh vực Tư vấn Web, Lập kế hoạch, tạo trang Web, Lập kế
hoạch, tạo ứng dụng Smartphone, Giải pháp SEO,…

2. Sản phẩm mobile của công ty
Gonosen Quốc Tế là một công ty Product nên đã tạo ra nhiều ứng dụng di động hầu

hết được release ở Nhật Bản:
- LiberLove – ứng dụng hẹn hò giành cho cộng đồng LGBT
- Friend – mạng xã hội tìm bạn bè chơi game
- YasuTV- Nền tảng livestream , giao lưu - mạng xã hội
- …

7


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 đa nền tảng với Flutter” tạo ra ứng dụng
theo yêu cầu khách hàng , đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, thuyết
trình, giao tiếp,và mơ hình quản lý Agile. 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 mobile chun nghiệp.

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 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…

2. Nghiên cứu kỹ thuật
1.1.

Các công cụ làm việc
Thời gian : 4 ngày
Nội dung : Tìm hiểu về các cơng cụ sẽ được sử dụng trong q trình làm việc.
Trong thời gian này, supervisor đã hướng dẫn thực tập sinh tìm hiểu về các cơng
cụ sẽ giúp ích cho trong công việc sau này. Một số phần mềm trong số đó như
Android Studio/Visual Code , Source Tree (Desktop Git) , Flutter for IDE
Thực hiện : Tải và cài đặt các phần mềm nêu trên
Kết quả : Cài đặt thành công Flutter cho IDE và chạy test thành công first project

1.2.

Thiết kế UI với figma cho sẵn
-

1.3.

Fetch api với Graphql trong Flutter
-

1.4.

Dựa trên bản thiết kế figma từ team design và code tạo các màn hình giống figma
với Flutter.
Thực hiện các luồng flow theo file figma và feed back từ khách hàng (nếu có)
Thực thi các chức năng và các Animation theo yêu cầu khách hàng.

Tìm hiểu nghiệp vụ của ứng dụng và các luồng đi của ứng dụng.
Tự nghiên cứu các phương thức của Graphql trong Flutter như Query,mutation,
subscription,…

Tìm hiểu và sử dụng các thư viện của Flutter
8


1.5.

Đọc hiểu và thực thi các thư viện vào ứng dụng theo yêu cầu khách hàng.
Sửa code thư viện Flutter có sẵn cho phù hợp với yêu cầu khách hàng.
Tích cực tìm hiểu các thư viện đã có sẵn của Flutter trên pub.dev để trách lãng phí
thời gian viết lại các chương trình tương tự từ đầu

Kiểm thử và fix lỗi trước khi Commit cho leader
-

1.6.

Thực hiện check lại tất cả trường hợp có thể xảy ra lỗi và fix
Nghiên cứu tìm năng xảy ra lỗi

Tìm hiểu Source Tree (Desktop Git) và sử dụng thành thạo
-

Pull, Push , Merge code
Commit theo đúng nội dung đã làm để tiện theo dõi và sửa chữa.
Trao đổi với các đồng nghiệp trước khi Merge code để không bị mất code của
người khác.

3. Thực hiện project
Sau 3 tháng học tập và làm việc, em cùng team đã tạo ra được ứng dụng hoàn chỉnh và

release cho khách hàng đúng thời hạn theo hợp đồng.

4. Lịch làm việc:

Tuần

Cơng việc
-

1
2

-

-

Người hướng dẫn

Tìm hiểu về cơng Anh Lê Hồng Hiển
ty, cách tổ chức của
công ty.
Làm
quen
với
SourceTree
(Desktop Git)
Cách thức liên lạc
qua email cơng ty,
skyper, github.
Tìm hiểu cách tở Anh Long

chức của Project
Xem và tham khảo
cách quản lý source
code, format code
của đờng nghiệp
Các quy tắc commit
code , merge code,
9

Mức
độ
hồn
thành

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


3

4
5
6

7

8
9
10
11

12

13

…
- Lập trình các UI cơ
bản với Flutter
- Tìm
hiểu
Animation , các
package cần dùng
- Lập trình các màn
hình chính của app
- Test và fix lỗi
- Tiếp tục hoàn thành
các chức năng và UI
- Giao sản phẩm cho
khách hàng và tiếp
tục sửa lại theo
feedback (nếu có)
Giai đoạn API:
- Tìm hiểu graphQL
- Thảo luận với các
thành viên trong
team về database,
yêu cầu của Frontend
- Mock api , tạo api
ảo và imple trong
thời

gian
đợi
Backend tạo api
- Imple api vào các
chức năng của app
- Imple api vào các
chức năng của app
- Giao cho khách
hàng và fix theo
feedback
- Test và fix bug lần
cuối , bổ sung các
chức năng thanh
tốn theo u cầu
của Sếp,…
- Release app

Anh Lê Hờng Hiển
và Anh Long

Anh Lê Hồng Hiển
và Anh Long
Anh Lê Hồng Hiển
và Anh Long
Anh Lê Hồng Hiển
và Anh Long
Anh Lê Hồng Hiển
và Anh Long

Anh Lê Hồng Hiển

và Anh Long
Anh Lê Hồng Hiển
và Anh Long
Anh Lê Hồng Hiển
và Anh Long
Anh Lê Hồng Hiển
và Anh Long
Anh Lê Hồng Hiển
và Anh Long

Anh Lê Hồng Hiển
và Anh Long

10


Chương 3:

Chi tiết về project

1. Giới thiệu về app Liberlove
LiberLove lấy ý tưởng tương tự Tinder, nhưng là mạng xã hội tìm kiếm bạn bè, hẹn hò
giành cho những người thuộc cộng đồng LGBT ở Nhật Bản.

2. Thực hiện
3 thành viên của Flutter Developer:
-

Lê Hồng Hiển (backend)
Long (front-end)

Nguyễn Quang Khang (front-end)

3. Kế hoạch
-Giai đoạn 1: Tạo UI theo figma
● 2 thành viên Front-end hoàn thành UI và các chức năng chính của app
● Test và fix bug
● Gửi cho khách hàng review và sửa UI theo feedback của khách hàng
-Giai đoạn 2: Thảo luận và tạo logic diagram, các mối quan hệ của các table , nêu các
yêu cầu trả về Front-end cần thiết để tạo API
-Giai đoạn 3: Tạo api và fetch api cho tất cả các chức năng.
-Giai đoạn 4:
● Test và fix bug , gửi cho sếp test => fix và sửa theo feed back
● Gửi sản phẩm hoàn thiện cho khách hàng => fix và sửa theo feedback

4. Các màn hình:
1.
2.
3.
4.
4.1.

Đăng nhập , đăng kí, đởi mật khẩu, quên mật khẩu:

11


12


4.2.

Màn hình Home:

13


4.3.

Màn hình Friend:

4.4.

Màn hình Chat:
14


4.5.

Màn hình Profile:

15


4.6.

Màn hình Edit Profile:

16

4.7.

Màn hình Edit Setting:

17


4.8.

Màn hình Confession Post:

18


19


TÀI LIỆU THAM KHẢO

For Flutter:
/> />For Graphql:
/>
20


TỔNG KẾT
Như vậy, chỉ trong vòng 3 tháng, nhóm đã kịp hoàn thành ứng dụng LiberLove chạy trên
cả Android và Ios. LiberLove có đầy đủ chức năng mà khách hàng đã đề ra. Hiện nay, app đã
được release sử dụng ở Nhật Bản.
Chân thành cảm ơn sự giúp đỡ của các anh nhóm Flutter Developer, sự tạo điều kiện

thuận lợi của cơng ty Gonosen Quốc Tế đã giúp em hồn thành đợt thực tập doanh nghiệp đầy
bổ ích này.

21