TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

-----oOo----BÁO CÁO THỰC TẬP

LẬP TRÌNH MINI APP
VỚI TINI FRAMEWORK

Cơng ty thực tập: Công ty TNHH một thành viên thương mại Tiki
Người phụ trách: Nguyễn Vũ Hưng
Thực tập sinh: Lữ Ngọc Vĩnh Thái

TPHCM, tháng 6 năm 2022


2

LỜI MỞ ĐẦU
Mini app hay mini program là những ứng dụng nhỏ được phát triển trên các Super
App, người dùng không cần tải hoặc cập nhật thường xuyên như native app (các ứng dụng
dành cho Android và iOS) hay hybrid app (ứng dụng đa nền tảng). Hiện nay mơ hình mini
app đã và đang phát triển rất mạnh và có các loại hình như: Mini app trên các siêu ứng
dụng mạng xã hội (Social), mini app trên các siêu ứng dụng TMĐT (E-Commerce), mini
app trên các siêu ứng dụng tài chính (Finance).
Đón đầu xu hướng mini app, Tiki đã và đang phát triển và xây dựng Tini App với
Tini framework đây là giải pháp mới và hiện đại giúp cho các đối tác của Tiki có thể dễ
dàng, nhanh chóng và ít tốn kém phát triển ứng dụng và dịch vụ của mình trên nền tảng
của Tiki. Nhờ đó các doanh nghiệp có thể tập trung vào dịch vụ cốt lõi và mang tới sản
phẩm tốt nhất cho khách hàng, trong khi vẫn thừa hưởng được tất cả lợi ích của việc chuyển
đổi số.
Với mục đích tìm hiểu cơng nghệ mới và cải thiện kỹ năng làm việc của bản thân

trong môi trường trẻ trung năng động. Em đã chọn Tiki làm cơng ti thực tập của mình.

Lữ Ngọc Vĩnh Thái


3

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty TNHH một thành viên thương mại Tiki đã 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 các mentor, em
đã tiếp thu được những kiến thức quan trọng để có thể làm được một miniapp với tini
framework. Chân thành cảm ơn các anh chị trong team Tiki Open Platform đã 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ũ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.

Lữ Ngọc Vĩnh Thái
Tp.HCM, ngày 15, tháng 06 năm 2022

Lữ Ngọc Vĩnh Thái


4

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

…………….…………………………….…………………………….…………………….
……….…………………………….…………………………….………………………….
….…………………………….…………………………….…………………………….…
……………………….…………………………….…………………………….………….
………………….…………………………….…………………………….……………….
…………….…………………………….…………………………….…………………….
……….…………………………….…………………………….………………………….
….…………………………….…………………………….…………………………….…
………………………….…………………………….…………………………….……….
…………………….…………………………….…………………………….…………….
……………….…………………………….…………………………….………………….
………….…………………………….…………………………….……………………….
…….…………………………….…………………………….…………………………….
…………………………….…………………………….…………………………….…….
……………………….…………………………….…………………………….………….
………………….…………………………….…………………………….……………….
…………….…………………………….…………………………….…………………….
……….…………………………….…………………………….………………………….
….…………………………….…………………………….…………………………….…
.………………………….…………………………….…………………………….………
…………………….…………………………….…………………………….………….…
……………….…………………………….……………………………….……………….
…………………………….…………………………….…………………………………..

Lữ Ngọc Vĩnh Thái


5

Mục lục

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

Giới thiệu về Tiki ................................................................................................... 6

2.

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

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

Tìm hiểu về cơng ty, team và quy trình làm việc ................................................... 7

2.

Tìm hiểu về kỹ thuật ............................................................................................... 7
a.

Tini framework .................................................................................................. 7

b.

Tini studio .......................................................................................................... 8

c.

Lập trình miniapp ............................................................................................... 8

3.


Project thực hiện ..................................................................................................... 9

4.

Kế hoạch làm việc .................................................................................................. 9

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

Giới thiệu về Tini framework ............................................................................... 11

2.

Giới thiệu về ứng dụng ......................................................................................... 11

3.

Yêu cầu chi tiết ..................................................................................................... 12

4.

Kết quả: ................................................................................................................ 25

TÀI LIỆU THAM KHẢO ................................................................................................. 26
TỔNG KẾT ....................................................................................................................... 27

Lữ Ngọc Vĩnh Thái



6

Chương 1 Giới thiệu công ty thực tập
1. Giới thiệu về Tiki
-

Thành lập từ tháng 3/2010, Tiki.vn hiện đang là trang thương mại điện tử lọt top 2 tại
Việt Nam và top 6 tại khu vực Đông Nam Á.

-

Tiki là một hệ sinh thái thương mại tất cả trong một, gồm các công ty thành viên như:
o Công ty TNHH TI KI ("TiKi") là đơn vị thiết lập, tổ chức sàn thương mại
điện tử www.tiki.vn.
o Công ty TNHH TikiNOW Smart Logistics ("TNSL") là đơn vị cung cấp
các dịch vụ logistics đầu-cuối, dịch vụ vận chuyển, dịch vụ bưu chính cho
Sàn thương mại điện tử www.tiki.vn
o Công ty TNHH MTV Thương mại Ti Ki ("Tiki Trading") là đơn vị bán
hàng hóa, dịch vụ trên sàn thương mại điện tử.
-

Tiki lọt Top 1 nơi làm việc tốt nhất Việt Nam trong ngành Internet/E-commerce
2018 (Anphabe bình chọn), Top 50 nơi làm việc tốt nhất châu Á 2019 (HR Asia
bình chọn).

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

Sàn thương mại điện tử www.tiki.vn với hơn 10 triệu sản phẩm từ 26 ngành hàng
khác nhau.


-

TikiNOW cấp các dịch vụ logistics cho các nhà bán trên sàn thương mại điện tử
www.tiki.vn.

-

Tiki mini app (tini app) cung cấp giải pháp xây dựng mini app cho các đối tác chạy
trên nền Tiki super app.

Lữ Ngọc Vĩnh Thái


7

Chương 2 Nội dung thực tập
Đợt thực tập với nhằm mục đích giúp sinh viên được đào tạo tồn diện về quy trình và cách
thức xây dựng một mini app sử dụng tini framework và tini studio, đồ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, lập kế hoạch. 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 cởi mở, năng
động.
1. Tìm hiểu về cơng ty, team và quy trình làm việc
-

Thời gian: 1 ngày,

-

Nội dung:

o Nghe hướng dẫn về các quy định về thiết bị, các team hiện có và quy trình
làm việc tại công ty.
o Làm quen các thành viên trong team Tiki Open Platform.
o Tạo tài khoản slack, jira, vpn và github.

-

Kết quả:
o Nắm được quy trình làm việc, các quy định của công ty.
o Nắm được sơ đồ và trách nhiệm của các team cũng như vai trò các thành
viên.
o Tạo thành công tài khoản và được cấp quyền truy cập các tài nguyên được
cho phép.

2. Tìm hiểu về kỹ thuật
a. Tini framework
-

Thời gian: 1 ngày

-

Nội dung:
o Tìm hiểu cách xây dựng một ứng dụng với tini framework.
o Tìm hiểu các life cycle của page, component trong tini framework.
o Tìm hiểu về jsAPI và cấu trúc của ứng dụng.
o Tìm hiểu về design system và các component được hỗ trợ.
o Tìm hiểu các cách sử dụng javascript library với tini framework.

Lữ Ngọc Vĩnh Thái



8

o Tìm hiểu cách custom component có sẵn trong tini framework.
o Tìm hiểu các cách debug ứng dụng.
o Được giới thiệu các vấn đề hiện có đối với các hệ điều hành khác nhau.
-

Kết quả:
o Nắm được quy trình để xây dựng một ứng dụng với tini framework.
o Nắm được các life cycle của page, component, cấu trúc thư mục của ứng
dụng.
o Nắm được cơ bản về styling sử dụng trong framework.
o Nắm được cách kết hợp các javascript library với framework.
o Custom thành cơng một số component có sẵn.
o Xác định được phương phát debug cho ứng dụng.
b. Tini studio

-

Thời gian: 0.5 ngày

-

Nội dung:
o Setup tini studio trên máy.
o Tạo tài khoản cho nhà phát triền và tìm hiểu cách up build cho ứng dụng.
o Tìm hiểu các mơi trường hiện có cho developer.


-

Kết quả:
o Cài đặt và setup thành công tini studio.
o Tạo tài khoản cho nhà phát triển và nắm được các mơi trường hiện có dành
cho developer.
c. Lập trình miniapp

-

Thời gian: 0.5 ngày

-

Nội dụng:
o Xem ứng dụng mini app mẫu.
o Xây dựng một ứng dụng nhỏ với framework.

-

Kết quả:
o Xây dựng thành công mini app theo đúng yêu cầu.

Lữ Ngọc Vĩnh Thái


9

3. Project thực hiện
Sau 2 ngày tìm hiểu về framework và studio thực tập sinh sẽ bắt đầu thực hiện project

theo yêu cầu từ mentor. Chi tiết project sẽ được nói ở phần sau.
4. Kế hoạch làm việc
Tuần
1

Cơng việc
-

Nhận thiết bị ký hợp đồng.

-

Tìm hiểu về cơng ty, cách thức tổ

Người hướng dẫn
Anh Nguyển Hữu Gia Trí

chức các team trong Tiki Open
Platform.
-

Setup thiết bị, tài khoản.

-

Tìm hiểu về framework và studio.

-

Nhận và review project cần thực

hiện.

2

-

Trao đổi với design các thắc mắc

Anh Nguyễn Hữu Gia Trí

về thiết kế.

Anh Văn Cơng Bằng

Trao đổi với PO các flow của

Anh Nguyễn Ngọc Minh Khoa

project.

3

-

Lên kế hoạch cho project.

-

Tiến hành xây dựng project.


-

Trao đổi với team Core về các vấn Anh Hàn Quốc Hân

-

đề cần support.

Anh Nguyễn Vũ Hưng

Báo cáo kết quả làm việc với các

Anh Nguyễn Hữu Gia Trí

thành viên trong team theo sprint.
4

-

Tiếp tục xây dựng project.

Anh Văn Công Bằng
Anh Nguyễn Ngọc Minh Khoa

Lữ Ngọc Vĩnh Thái


10

-


Trao đổi với PO và design về các

Anh Nguyễn Hữu Gia Trí

cập nhật trong requirement.
-

Chuyển project sang mơi trường
Tiki development.

5

-

Build và test trên môi trường dev.

-

Cập nhật kế hoạch và chia task

Bạn Phạm Quang Huy

với thực tập sinh mới.

Anh Huỳnh Thái Anh

-

Tạo mock data cho ứng dụng.


-

Tiếp tục xây dựng project.

-

Báo cáo kết quả làm việc với các
thành viên trong team theo sprint.

6

7

-

Cập nhật bản build cho ứng dụng.

Anh Trương Công Quốc Thắng

-

Cập nhật ticket jira và liên hệ QC

Anh Nguyễn Hữu Gia Trí

để tiến hành kiểm thử ứng dụng.

Bạn Phạm Quang Huy


-

Fix bug cho ứng dụng.

Anh Trương Công Quốc Thắng

-

Báo cáo kết quả làm việc với các

Anh Lý Gia Bảo

thành viên trong team theo sprint.
8

-

Liên hệ design để review ứng

Anh Nguyễn Hữu Gia Trí

dụng.

Anh Nguyễn Vũ Hưng

-

Cập nhật build cho ứng dụng.

Anh Văn Công Bằng


-

Chuyển ứng dụng sang môi
trường production và publish ứng
dụng.

Lữ Ngọc Vĩnh Thái


11

Chương 3: Chi tiết về project
1. Giới thiệu về Tini framework
Tini framework là một framework dựa trên core React hỗ trợ xây dựng mini app chạy
trên Tiki super app. Framework được thiết kế để cho phép các nhà phát triển xây dựng
ứng dụng với trải nghiệm native app một cách dễ dàng và đa dạng tính năng nhất có thể.
2. Giới thiệu về ứng dụng
Food & Beverage template là ứng dụng mẫu sử dụng Tini framework với mục đích giới
thiệu và cung cấp cách thức xây dựng một mini app cho các đối tác F&B muốn tạo ứng
dụng trên Tiki. Ứng dụng có các chức năng:
-

Banners quảng cáo

-

Xem danh các chương trình khuyến mãi

-


Danh mục sản phẩm

-

Thơng tin chi tiết sản phẩm

-

Thêm/xố sản phẩm u thích

-

Tìm kiếm sản phẩm

-

Danh sách cửa hàng

-

Thơng tin cửa hàng

-

Tìm cửa hàng

-

Thêm/xố cửa hàng u thích


-

Đặt giao hàng

-

Đặt trước

-

Thanh tốn (mock)

-

Danh sách đơn hàng

-

Thơng tin tài khoản

Lữ Ngọc Vĩnh Thái


12

3. Yêu cầu chi tiết
Thiết kế

Chi tiết

-

Giao diện:
o Logo và tên nhà hàng
o Banner, promotion nhà hàng
o Pick-up, Delivery function
o Promotion campaign
o Bottom bar

-

Logic:
o Chọn banner: action mở webview
o Chọn

campaign:

action

mở

webview

Lữ Ngọc Vĩnh Thái


13

-


Field Thông tin giao hàng:
o Hiển thị địa chỉ giao hàng theo
format: Address, District, City.
o Trường hợp địa chỉ dài hơn
wrapper thì hiển thị ...
o Hiển thị tên, số điện thoại user

-

Field Sidebar
o Sort theo category sản phẩm
o Hiển thị list theo từng list category

-

Logic:
o Khi bấm vào Favorite, section
Favorite ngang với sidebar Favorite,
khi bấm vào Coffee ở sidebar, list
items auto scroll up cho đến khi
section Coffee ngang với sidebar
Coffee
o Khi section phía dưới hiển thị items
thì các section ở trên sẽ hiển thị cùng
dòng với sidebar tương ứng
o Icon search: navigate sang Search
product screen

Lữ Ngọc Vĩnh Thái



14

-

Entry point:
o Chọn Delivery tại home
o Chọn Delivery tại menu page

-

Logic:
o Chọn sổ đia chỉ: navigate sang screen
New address.
o Chỉnh sửa địa chỉ: navigate sang Edit
address screen.
o Các địa chỉ đã tạo sẽ lưu ở “Saved
places”.

Lữ Ngọc Vĩnh Thái


15

-

Field Thông tin store:
o Hiển thị địa chỉ store theo format:
Store name, Address, District, City.
o ví dụ: SB Han Thuyen, 13 Han

Thuyen, D.1, HCM City
o Trường hợp địa chỉ dài hơn wrapper
thì hiển thị ...
o ví dụ: SB Han Thuyen, 13 Han
Thuyen, D.1...
o Hiển thị tên, số điện thoại user

-

Field Store:
o Hiển thị thông tin địa chỉ store của
Restaurant

-

Field Sidebar
o Sort theo category sản phẩm
o Hiển thị list theo từng list category

-

Logic:
o Favorite: các món u thích của user.
Khi bấm vào Favorite, section
Favorite ngang với sidebar Favorite,
khi bấm vào Coffee ở sidebar, list
items auto scroll up cho đến khi
section Coffee ngang với sidebar
Coffee
o Khi bấm vào Burger ở sidebar, list

items auto scroll up cho đến khi
section Burger ngang với sidebar
Burger

Lữ Ngọc Vĩnh Thái


16

-

Address:
o Độ dài=< 50, nhập ít nhất 2 từ
o Sai format hiện noti: Địa chỉ không
hợp lệ (địa chỉ phải chứa ít nhất 2 từ)

-

City, district, ward:
o Filter danh sách tỉnh thành
o Kết quả trả về dưới dạng list
o User nhập ký tự không dấu vẫn trả về
kết quả phù hợp.

-

Recipient's name:
o Text =< 50 character
o Sai format hiện noti: Nội dung chứa
ký tự không hợp lệ (số, ký tự đặt

biệt...), vui lịng nhập lại

-

Recipient's phone number:
o Đơj dài 10 ký tự, format là số điện
thoại 10 chữ số VN.
o Sai format hiện noti: Vui lòng nhập số
điện thoại gồm 10 số

-

Check box Save to Tiki's address book:
o Chọn checkbox và bấm button Save
thì sẽ save vào Sổ địa chỉ TIKI và
back về screen trước.

-

Save button:
o Khi user chọn save address, địa chỉ
được save lại, back lại screen trước.

Lữ Ngọc Vĩnh Thái


17

-


Entry point:
o Chọn “Store” tại delivery screen
o Chọn Store icon trong bottom bar

-

Khung tìm kiếm
o Kết quả trả về dưới dạng list
o Nếu user nhập khơng có kết quả nào,
trả về trạng thái khơng tìm thấy kết
quả
o User nhập ký tự không dấu vẫn trả về
kết quả phù hợp

-

Favorite store:
o Hiển thị các store yêu thích của user,
sắp xếp theo thứ tự mới nhất

Lữ Ngọc Vĩnh Thái


18

-

Entry point:
o Chọn cửa hàng tại screen danh sách
cửa hàng.


-

Các fields chính:
o Hình ảnh, tên cửa hàng, khung giờ
mở-đóng cửa
o Favorite store: Khi user tap to heart
icon, store sẽ được thêm vào Favorite
store
o Store pickup: Bấm vào sẽ navigate
sang menu screen kèm theo thông tin
store
o Delivery: Bấm vào sẽ navigate sang
Delivery menu screen kèm theo thông
tin store
o Số điện thoại và địa chỉ cửa hàng

-

Logic:
o Button thích: Lưu cửa hàng vào danh
sách yêu thích của user.
o Phone number: Cho phép gọi đến số
điện thoại của cửa hàng.

Lữ Ngọc Vĩnh Thái


19


-

Entry point:
o Icon search trên header.

-

Khung tìm kiếm - filter
o Kết quả trả về dưới dạng list
o Nếu khơng có kết quả nào, trả về
trạng thái khơng tìm thấy kết quả
o Logic: user nhập ký tự không dấu vẫn
trả về kết quả phù hợp

-

Popular drinks and foods:
o Hiển thị các món được search nhiều
trong restaurant (6 món)

Lữ Ngọc Vĩnh Thái


20

-

Hình ảnh và thơng tin món
o Favorite product: Khi user tap heart
icon, món sẽ được hiển thị trong

Favorite
o Hiển thị các option cho sản phẩm.
o Field note: =< 100 ký tự
o Có thể thay đổi số lượng món khi
thêm vào giỏ hàng.
o Button Add to cart: Khi bấm vào Add
to cart, hiển thị Cart entry.

Lữ Ngọc Vĩnh Thái


21

-

Entry point:
o Button Cart trên header.

-

Shipping details:
o Địa chỉ store
o Địa chỉ giao hàng, Tên và số điện
thoại
o Validation: Tap vào sẽ navigate sang
screen Address selection screen, chọn
địa chỉ xong sẽ back về màn hình này

-


Order details:
o Khi tăng giảm số lượng món chính thì
size và topping sẽ tăng, giảm theo
(nếu có).
o Khi giảm số lượng món chính = 0 sẽ
hiển thị pop-up xác nhận xố món
(Yes: xố item, nếu số lượng item >
0: Trở về màn hình Cart, ngược lại:
Trở về màn hình trước khi vào màn
hình Cart; No: đóng pop-up).

-

Giá:
o Hiển thị giá tổng cho từng item
o Hiển thị giá của order, phí ship và giá
tổng

-

Apply coupon:
o Hiển thị bottom sheet để user nhập

-

Button Pay:
o Call Tiki payment API.

Lữ Ngọc Vĩnh Thái



22

-

Entry point:
o Button Order trên bottom bar.

-

Các field chính:
o Trạng thái order: Order received,
Ready for pickup, Order completed
o Ngày, giờ order
o Thông tin cửa hàng
o Thời gian nhận hàng
o Tên và số lượng món
o

Tổng giá tiền

Lữ Ngọc Vĩnh Thái


23

-

Entry point:


-

Chọn order trên screen danh sách order.

-

General info
o Order ID
o Order date

-

Shipping details
o Địa chỉ store
o Thời gian nhận hàng

-

Product info
o Tên món, size, topping, tổng giá,…

-

Payment info
o

Các thơng tin: Price, Shipping fee,
Promotion, Total

Lữ Ngọc Vĩnh Thái



24

-

Entry point:
o Button Profile trên bottom bar.

-

Các fields chính:
o Avatar
o User name
o Điểm thưởng
o Support button: Hỗ trợ quay số đến
dịch vụ chăm sóc khách hàng.

Lữ Ngọc Vĩnh Thái


25

4. Kết quả:
-

Với nỗ lực trong 7 tuần làm việc ứng dụng F&B template đã được kiểm duyệt và
phát hành trên nền tảng Tiki production.

-


Hiện app đã có hơn 200 lượt xem, làm nền tảng cho các mini app của đối tác thuộc
lĩnh vực F&B trong thời gian tới, tiêu biểu là ứng dụng Tini KFC đang được em tiếp
tục phát triển.

-

Qua quá trình thực tập em đã rèn luyện và tích luỹ thêm rất nhiều kinh nghiệm bổ
ích cho bản thân cả về khả năng lập trình lẫn kỹ năng mềm, nhất là khả năng làm
việc nhóm, trao đổi, thuyết trình và lập kế hoạch.

Lữ Ngọc Vĩnh Thái