Lập trình miniapp với tini framework (báo cáo thực tập)

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (641.52 KB, 20 trang )

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

LẬP TRÌNH MINIAPP
VỚI TINI FRAMEWORK
BÁO CÁO THỰC TẬP

Cơng ty thực tập:

Công ty TNHH TI KI

Người phụ trách:

Nguyễn Vũ Hưng

Thực tập sinh:

Trần Trí Thức

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

1

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

LẬP TRÌNH MINIAPP
VỚI TINI FRAMEWORK
BÁO CÁO THỰC TẬP

Cơng ty thực tập:

Công ty TNHH TI KI

Người phụ trách:

Nguyễn Vũ Hưng

Thực tập sinh:

Trần Trí Thức

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

Trần Trí Thức

2

LỜI MỞ ĐẦU
Mini App hay Mini Program là những ứng dụng nhỏ được phát triển trên các Super App,
người dùng không cần tải hoặc cập nhật thường xuyên như Native app (các ứng dụng dành
cho Android và iOS) hay Hybrid App (ứng dụng đa nền tảng). Hiện nay mô hình Mini App
đã và đang phát triển rất mạnh và có các loại hình như: Mini App trên các siêu ứng dụng
mạng xã hội (Social), Mini App trên các siêu ứng dụng Thương mại điện tử (E-Commerce),
Mini App trên các siêu ứng dụng tài chính (Finance).
Đón đầu xu hướng mini app, Tiki đã và đang phát triển và xây dựng Tini App với Tini
Framework đây là giải pháp mới và hiện đại giúp cho các đối tác của Tiki có thể dễ dàng,
nhanh chóng và ít tốn kém phát triển ứng dụng và dịch vụ của mình trên nền tảng của Tiki.
Nhờ đó các doanh nghiệp có thể tập trung vào dịch vụ cốt lõi và mang tới sản phẩm tốt

nhất cho khách hàng, trong khi vẫn thừa hưởng được tất cả lợi ích của việc chuyển đổi số.
Với mục đích tìm hiểu công nghệ mới và cải thiện kỹ năng làm việc của bản thân trong
môi trường trẻ trung năng động. Em đã chọn Tiki làm công ti thực tập của mình.

Trần Trí Thức

3

LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty TNHH TI KI đã tạo điều kiện cho em có cơ hội được
thực tập tại công ty.
Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của các mentor, em đã tiếp
thu được những kiến thức quan trọng để có thể làm được một Miniapp với Tini Framework.
Chân thành cảm ơn các anh chị trong team Tiki Open Platform đã bỏ ra nhiều thời gian,
công sức để hướng dẫn em hoàn thành đợt thực tập này.
Đặc biệt cảm ơn anh Huỳnh Thái Anh đã training, hướng dẫn em tiếp cận với Framework
mới, cảm ơn anh Nguyễn Vũ Hưng đã hỗ trợ em trong quá trình tiếp cận với môi trường
và công việc tại công ty.
Cũng xin cảm ơn thầy cô trong khoa Công nghệ Phần mềm đã nhiệt tình hỗ trợ, tạo điều
kiện em hoàn thiện bài báo cáo.
Trần Trí Thức
Tp. Hồ Chí Minh, ngày 5 tháng 12 năm 2022

Trần Trí Thức

4

NHẬN XÉT CỦA KHOA

………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………

Trần Trí Thức

5

MỤC LỤC
LỜI MỞ ĐẦU .................................................................................................................... 2
LỜI CẢM ƠN .................................................................................................................... 3
NHẬN XÉT CỦA KHOA ................................................................................................. 4
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ông ty ................................................................................................. 6

Chương 2 NỘI DUNG THỰC TẬP ................................................................................. 8
1.

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

2.

Tìm hiểu về kỹ thuật ............................................................................................ 8
2.1.

Tini Framework............................................................................................. 8

2.2.

Tini studio ...................................................................................................... 9

2.3.

Lập trình Miniapp ......................................................................................... 9

3.

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

4.

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

Chương 3 CHI TIẾT VỀ ỨNG DỤNG.......................................................................... 12
1.

Giới thiệu về Tini Framwork ............................................................................ 12

2.

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

3.

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

TỔNG KẾT ...................................................................................................................... 18
TÀI LIỆU THAM KHẢO............................................................................................... 19

Trần Trí Thức

6

Chương 1
GIỚI THIỆU CÔNG TY THỰC TẬP
1. Giới thiệu về Tiki

Thành lập từ tháng 3/2010, Tiki.vn hiện đang là trang thương mại điện tử lọt top 2
tại Việt Nam và top 6 tại khu vực Đông Nam Á. Tiki là một hệ sinh thái thương mại
tất cả trong một, gồm các công ty thành viên như:
• Công ty TNHH TI KI ("TiKi") là đơn vị thiết lập, tổ chức sàn thương mại
điện tử www.tiki.vn để các Nhà bán hàng thể tiến hành một phần hoặc toàn
bộ quy trình mua bán hàng hóa, dịch vụ trên sàn thương mại điện tử.
• Công ty TNHH TikiNOW Smart Logistics ("TNSL") là đơn vị cung cấp các
dịch vụ logistics đầu-cuối, dịch vụ vận chuyển, dịch vụ bưu chính cho Sàn
thương mại điện tử www.tiki.vn
• Công ty TNHH MTV Thương mại Ti Ki ("Tiki Trading") là đơn vị bán hàng
hóa, dịch vụ trên sàn thương mại điện tử
• Đơn vị bán lẻ Tiki Trading và Sàn Giao dịch cung cấp 10 triệu sản phẩm từ
26 ngành hàng phục vụ hàng triệu khách hàng trên toàn quốc.
Tiki lọt Top 1 nơi làm việc tốt nhất Việt Nam trong ngành Internet/E-commerce
2018 (Anphabe bình chọn), Top 50 nơi làm việc tốt nhất châu Á 2019 (HR Asia
bình chọn).

2. Sản phẩm cơng ty
Trần Trí Thức

7
Hiện nay Tiki có một sớ sản phẩm nởi bật như:
•

Sàn thương mại điện tử www.tiki.vn với hơn 10 triệu sản phẩm từ 26 ngành
hàng khác nhau.

•

TikiNOW cấp các dịch vụ logistics cho các nhà bán trên sàn thương mại
điện tử www.tiki.vn.

•

Tiki mini app (tini app) cung cấp giải pháp xây dựng mini app cho các đối
tác chạy trên nền Tiki super app.

Trần Trí Thức

8

Chương 2
NỘI DUNG THỰC TẬP
Đợt thực tập với nhằm mục đích giúp sinh viên được đào tạo toàn diện về quy trình và cách
thức xây dựng một mini app sử dụng tini framework và tini studio, đồng thời rèn luyện
những kỹ năng mềm như làm việc nhóm, thuyết trình, giao tiếp, lập kế hoạch. Tại công ty,
sinh viên có cơ hội được học tập, khám phá và làm việc trong một môi trường cởi mở, năng
động.
1. Tìm hiểu về cơng ty và quy trình làm việc

- Thời gian: 1 ngày
- Nội dung:
• Nghe hướng dẫn về các quy định về thiết bị, các team hiện có và quy trình

làm việc tại công ty.
• Làm quen các thành viên trong team Tiki Open Platform.
• Tạo tài khoản Slack, Jira, VPN và Github.

- Kết quả:
• Nắm được quy trình làm việc, các quy định của công ty.
• Nắm được sơ đồ và trách nhiệm của các team cũng như vai trò các thành viên.
• Tạo thành công tài khoản và được cấp quyền truy cập các tài nguyên được

cho phép.
2. Tìm hiểu về kỹ thuật
2.1.

Tini Framework

- Thời gian: 1 ngày
- Nội dung:
•

Tìm hiểu cách xây dựng một ứng dụng với Tini Framework.

•

Tìm hiểu các life cycle của page, component trong Tini Framework.

•

Tìm hiểu về jsAPI và cấu trúc của ứng dụng.

•

Tìm hiểu về design system và các component được hỗ trợ.

•

Tìm hiểu các cách sử dụng Javascript library với Tini Framework.

Trần Trí Thức

9
•

Tìm hiểu cách custom component có sẵn trong Tini Framework.

•

Tìm hiểu các cách debug ứng dụng.

- Kết quả:
•

Nắm được quy trình để xây dựng một ứng dụng với Tini Framework.

•

Nắm được các life cycle của page, component, cấu trúc thư mục của ứng
dụng.

•

Nắm được cơ bản về styling sử dụng trong framework.

•

Nắm được cách kết hợp các javascript library với framework.

•

Custom thành công một sớ component có sẵn.

•

Xác định được phương phát debug cho ứng dụng.

2.2.

Tini studio

- Thời gian: 0.5 ngày
- Nội dung:
•

Setup tini studio trên máy.

•

Tạo tài khoản cho nhà phát triền và tìm hiểu cách up build cho ứng dụng.

•

Tìm hiểu các môi trường hiện có cho developer.

- Kết quả:
•

Cài đặt và setup thành công tini studio.

•

Tạo tài khoản cho nhà phát triển và nắm được các môi trường hiện có dành
cho developer.
Lập trình Miniapp

2.3.

- Thời gian: 1 ngày
- Nội dung:
•

Xem ứng dụng Mini app mẫu

•

Xây dựng ứng dụng Todo

- Kết quả:
• Xây dụng thành cơng ứng dụng Todo và được nhận xét từ mentor
3. Project thực hiện

Trần Trí Thức

10
Sau 2 ngày tìm hiểu về Framework và Studio thực tập sinh sẽ bắt đầu thực hiện project
theo yêu cầu từ mentor. Chi tiết project sẽ được nói ở phần sau.
4. Kế hoạch làm việc
Tuần

1

2

Cơng việc
•

Nhận thiết bị ký hợp đồng.

•

Tìm hiểu về công ty, cách thức tở chức

5

Anh Huỳnh Thái Anh

các team trong Tiki Open Platform.
•

Setup thiết bị, tài khoản.

•

Tìm hiểu về Framework và Studio.

•

Nhận và review project Spiderum.

•

Trao đổi với Mentor, Buddy các thắc Anh Huỳnh Thái Anh
mắc về thiết kế, luồn xử lí.

Anh Nguyễn Vũ Hưng

•

Lên kế hoạch cho Project Spiderum.

•

Tiến hành xây dựng Project Spiderum.

•

Báo cáo kết quả làm việc với các thành Anh Huỳnh Thái Anh

3

4

Người hướng dẫn

viên trong team theo sprint.

Anh Nguyễn Vũ Hưng

•

Nhận và review Project Appstore

Anh Nguyễn Vũ Hưng

•

Trao đởi với Designer về UX/UI

Anh Bùi Phạm Thanh Tú

•

Trao đởi với PO về luồn xử lý

•

Tiến hành xây dựng project

Chị Nguyễn Hải Nghi

• Chia nhỏ các Feature

Anh Nguyễn Vũ Hưng

• Trao đởi với Designer về UX/UI

Anh Bùi Phạm Thanh Tú

• Trao đởi với PO về luồn xử lý
• Báo cáo tiến độ với Mentor và thành viên

Chị Nguyễn Hải Nghi

trong team

Trần Trí Thức

11
• Build ứng dụng trên môi trường Anh Nguyễn Vũ Hưng
Developer
6

Anh Lý Gia Bảo

• Trao đởi với QC kiểm thử các Feature

• Tiếp tục xây dựng app theo Feature
• Báo cáo tiến độ với Mentor và thành viên
trong team

7

• Fix bug cho ứng dụng

Anh Nguyễn Vũ Hưng

• Trao đởi với Designer UX/UI sản phẩm

Anh Bùi Phạm Thanh Tú

• Fix bug UX/UI ứng dụng
• Báo cáo tiến độ với Mentor và thành viên

Anh Lý Gia Bảo

trong team
• Build
8

ứng

dụng

lên

môi

trường Anh Nguyễn Vũ Hưng

Production

Chị Nguyễn Hải Nghi

• Báo cáo tiến độ với Mentor và thành viên
trong team

Trần Trí Thức

12

Chương 3
CHI TIẾT VỀ ỨNG DỤNG
1. Giới thiệu về Tini Framwork
Tini framework là một framework dựa trên core ReactJs hỗ trợ xây dựng mini app chạy
trên Tiki super app. Framework được thiết kế để cho phép các nhà phát triển xây dựng ứng
dụng với trải nghiệm native app một cách dễ dàng và đa dạng tính năng nhất có thể.
2. Giới thiệu về ứng dụng Appstore

Appstore là một cửa hàng ứng dụng của Mini app trên app Tiki. Từ Appstore chúng ta có
thể tìm kiếm, truy cập các ứng dụng khác một cách dể dàng. Ứng dụng có các chức năng:
• Xem banner quảng cáo
• Xem danh mục ứng dụng và các ứng dụng thuộc danh mục đó
• Thêm/xố ứng dụng u thích
• Thêm ứng dụng sử dụng gần đây
• Ứng dụng nởi bật

• Tìm kiếm ứng dụng
• Lịch sử tìm kiếm
• Tìm kiếm nhiều
• Tracking người dùng
3. u cầu chi tiết

Trần Trí Thức

13
Page

Thiết kế

Chi tiết
• Giao diện:
o Thanh search bar
o Danh mục theo horizontal
section
o Yêu tích theo grid section
o Sử dụng gần đây theo
horizontal section
o Banner theo carousel section
o Nổi bật theo grid section
o Danh sách ứng dụng theo
từng danh mục
• Logic:

Home

o Khi các ứng dụng được hiển
thị trên màn hình sẽ gửi
tracking về hệ thống
o Chọn search bar: mở page
search
o Danh mục có thể scroll
horizontal
o Chọn một danh muc, page sẽ
scroll xuống danh mục mà
danh sách ứng dụng tương
ứng ở phía dưới
o Chọn một ứng dụng: mở ứng
dụng và gửi tracking về hệ
thớng

Trần Trí Thức

14
o Nhấn chỉnh sửa: mở page
chỉnh sửa Yêu thích
o Chọn hiện tất cả: Hiện đầy
đủ danh sách Yêu thích
o Chọn banner: mở webview
o Bấm Xem thêm: mở page
Danh sách ứng dụng theo
danh mục

Trần Trí Thức

15
• Giao diện:
o Button Trở về
o Button Tìm kiếm
o Danh sách ứng dụng
• Logic:
o Nhấn button Trở về: trở về
trang trước đó
o Nhấn button Tìm kiếm: mở
trang tìm kiếm
o Chọn một ứng dụng: mở ứng
dụng

Chi tiết
danh
mục

Trần Trí Thức

16
• Giao diện
o Button Trở về
o Thanh search bar
o Lịch sử tìm kiếm
o Danh sách ứng dụng tìm
kiếm nhiều
• Logic
o Nhập nội dung cần tìm vào

search bar, ứng dụng sẽ hiển
thị các app liên quan
o Chọn mở một ứng dụng, lịch
sử tìm kiếm cũng như tên
app sẽ được lưu lại.
Tìm
kiếm

o Nhấn close button: xố lịch
sử tìm kiếm đó

Trần Trí Thức

17
• Giao diện:
o Danh sách ứng dụng trong
u thích
o Danh sách ứng dụng Sử
dụng gần đây
• Logic:
o Người dùng bấm vào dấu X
ở danh sách yêu thích, sẽ
loại bỏ khỏi danh sách yêu
Chỉnh

thích và thêm vào sử dụng

sửa yêu

gần đây
o Người dùng bấm vào + sử

thích

dụng gần đây, ứng dụng sẽ
được xoá khỏi danh sách sử
dụng gần đây và thêm vào
u thích
o Người dùng nhấn giữ ứng
dụng để thay đởi vị trí hiển
thị

4. Kết quả
•

Với nỗ lực trong 7 tuần làm việc ứng dụng Appstore đã được kiểm duyệt và phát
hành trên nền tảng Tiki production.

•

Qua quá trình thực tập em đã rèn luyện và tích luỹ thêm rất nhiều kinh nghiệm
bổ ích cho bản thân cả về khả năng lập trình lẫn kỹ năng mềm, nhất là khả năng
làm việc nhóm, trao đổi, thuyết trình và lập kế hoạch.

Trần Trí Thức

18

TỔNG KẾT
Như vậy, chỉ trong vòng một tháng ngắn ngủi, nhóm đã kịp hoàn thành một ứng dụng
chạy trên nền tảng Android và IOS. Ứng dụng đã có khá đầy đủ các tính năng đã đề ra
ban đầu. Hiện nay, ứng dụng đang được cập nhật và cải thiện hơn.
Em xin cảm ơn sự giúp đỡ của các anh chị trong team Tiki Open Platform đã giúp em
hoàn thành ứng dụng. Em cũng xin cảm ơn quý thầy cô khoa Công nghệ phần mềm đã
giúp em hoàn thành bài báo cáo này.

Trần Trí Thức

19

TÀI LIỆU THAM KHẢO
[1] Tiki, “Giới thiệu Tiki”, [Online]
Avaiable: />[2] Tiki, “Tini Developer”, [Online]
Avaiable: />[3] Tiki, “Tini Console”, [Online]
Avaiable: />
Trần Trí Thức

Lập trình miniapp với tini framework (báo cáo thực tập)

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về