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 (888.63 KB, 23 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̉ được phát triển trên các Super App,
người dùng không cần tải hoặc cập nhật thường xuyên như 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 như: 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 mại điện tử (ECommerce), Mini App trên các siêu ứng dụng tài chính (Finance).
Đón đầu xu hướ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 hưởng đượ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 trườ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 ơn Công ty TNHH TI KI đã tạo điều kiện cho em có cơ hội được
thực tập tại công ty.
Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của các mentor, em đã tiếp
thu được những kiến thức quan trọng để có thể làm được một Miniapp với Tini
Framework. Chân thành cảm ơn các anh chị trong team Tiki Open Platform đã bỏ ra
nhiều thời gian, công sức để hướng dẫn em hoàn thành đợt thực tập này.
Đặc biệt cảm ơn anh Huỳnh Thái Anh đã training, hướng dẫn em tiếp cận với Framework
mới, cảm ơn anh Nguyễn Vũ Hưng đã hỗ trợ em trong quá trình tiếp cận với môi trường
và công việc tại công ty.
Cũng xin cảm ơ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 hồn thiện bài báo cáo.
Trần Trí Thức
Tp. Hồ Chí Minh, ngày 5 tháng 12 nă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 thươ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 thương
mại tất cả trong một, gồm các công ty thành viên như:
● 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 để các Nhà bán hàng thể tiến hành một phần hoặc tồn

bộ quy trình mua bán hàng hóa, dịch vụ trên sàn thương mại điện tử.
● 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
● 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ử
● Đơn vị bán lẻ Tiki Trading và Sàn Giao dịch cung cấp 10 triệu sản phẩm từ
26 ngành hàng phục vụ hàng triệu khách hàng trên toàn quốc.

Trần Trí Thức

7
Tiki lọt Top 1 nơ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 nơ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
Hiện nay Tiki có một số sản phẩm nổi bật như:
● Sàn thương mại điện tử www.tiki.vn với hơ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 thươ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 đượ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 như 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́ cơ hội được học tập, khám phá và làm việc trong một môi trườ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 hướ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 quả:
● Nắm được quy trình làm việc, các quy định của công ty.
● Nắm được sơ đồ và trách nhiệm của các team cũng như vai trò các thành
viên.
● Tạo thành công tài khoản và được cấp quyền truy cập các tài nguyên được
cho phép.
2. Tìm hiểu về kỹ thuật
2.1.

Tini Framework

- Thời gian: 1 ngày

Trần Trí Thức

9
- 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 được hỗ trợ.
● Tìm hiểu các cách sử dụng Javascript library với Tini Framework.
● 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 quả:
● Nắm được quy trình để xây dựng một ứng dụng với Tini Framework.
● Nắm được các life cycle của page, component, cấu trúc thư mục của ứng
dụng.
● Nắm được cơ bản về styling sử dụng trong framework.
● Nắm đượ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 được phương phát debug cho ứng dụng.
2.2.

Tini studio

- Thời gian: 0.5 ngày

Trần Trí Thức

10
- 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 trườ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 được các môi trường hiện có
dành cho developer.
2.3.

Lập trình Miniapp

- Thời gian: 1 ngày
- Nội dung:
● Xem ứng dụng Mini app mẫu
● Xây dựng ứng dụng Todo
- Kết quả:
● Xây dụng thành công ứng dụng Todo và được nhận xét từ mentor
3. Project thực hiện
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̃ được nói ở phần sau.
4. Kế hoạch làm việc
Tuần
1

Công việc
● Nhận thiết bị ký hợp đồng.

Người hướng dẫn

Anh Huỳnh Thái Anh

Trần Trí Thức

11

● Tìm hiểu về công ty, cách thức tổ chức
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
2

mắc về thiết kế, luồn xử lí.

Anh Huỳnh Thái Anh
Anh Nguyễn Vũ Hưng

● Lên kế hoạch cho Project Spiderum.
● Tiến hành xây dựng Project Spiderum.

3

● Báo cáo kết quả làm việc với các thành
viên trong team theo sprint.
● Nhận và review Project Appstore
● Trao đổi với Designer về UX/UI

4

Anh Huỳnh Thái Anh
Anh Nguyễn Vũ Hưng
Anh Nguyễn Vũ Hưng
Anh Bùi Phạm Thanh Tú
Chị Nguyễn Hải Nghi

● Trao đổi với PO về luồn xử lý
● Tiến hành xây dựng project
5

● Chia nhỏ các Feature
● Trao đổi với Designer về UX/UI

Anh Nguyễn Vũ Hưng
Anh Bùi Phạm Thanh Tú

Trần Trí Thức

12
Chị Nguyễn Hải Nghi

● Trao đổi với PO về luồn xử lý
● Báo cáo tiến độ với Mentor và thành
viên trong team
● Build ứng dụng trên môi trường

Anh Nguyễn Vũ Hưng

Anh Lý Gia Bảo

Developer
● Trao đổi với QC kiểm thử các Feature
6
● Tiếp tục xây dựng app theo Feature
● Báo cáo tiến độ với Mentor và thành
viên trong team

Anh Nguyễn Vũ Hưng

● Fix bug cho ứng dụng
● Trao đổi với Designer UX/UI sản phẩm
7

Anh Bùi Phạm Thanh Tú
Anh Lý Gia Bảo

● Fix bug UX/UI ứng dụng
● Báo cáo tiến độ với Mentor và thành
viên trong team
● Build

8

ứng

dụng

lên

môi

trường

Production

Anh Nguyễn Vũ Hưng
Chị Nguyễn Hải Nghi

● Báo cáo tiến độ với Mentor và thành
viên trong team

Trần Trí Thức

13

Trần Trí Thức

14

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 đượ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 dụng của Mini app trên app Tiki. Từ Appstore chúng ta có
thể tìm kiếm, truy cập các ứng dụng khác một cách dể dàng. Ứng dụng có các chức năng:
● Xem banner quảng cáo
● Xem danh mục ứng dụng và các ứng dụng thuộc danh mục đó
● Thêm/xố ứng dụng yêu thích
● Thêm ứng dụng sử dụng gần đây
● Ứng dụng nổi bật
● Tìm kiếm ứng dụng
● Lịch sử tìm kiếm
● Tìm kiếm nhiều
● Tracking người dùng
3. Yêu cầu chi tiết

Trần Trí Thức

15

Page

Thiết kế

Chi tiết

Trần Trí Thức

16
Home

● Giao diện:
o Thanh search bar
o Danh mục theo horizontal
section
o Yêu tích theo grid section
o Sử dụng gần đây theo
horizontal section
o Banner

theo

carousel

section
o Nổi bật theo grid section
o Danh sách ứng dụng theo
từng danh mục
● Logic:
o Khi các ứng dụng được
hiển thị trên màn hình sẽ
gửi tracking về hệ thống
o Chọn search bar: mở page
search
o Danh mục có thể scroll
horizontal
o Chọn một danh muc, page
sẽ scroll xuống danh mục
mà danh sách ứng dụng
tương ứng ở phía dưới

o Chọn một ứng dụng: mở

Trần Trí Thức

17
ứng dụng và gửi tracking về
hệ thống
o Nhấn chỉnh sửa: mở page
chỉnh sửa Yêu thích
o Chọn hiện tất cả: Hiện đầy
đủ danh sách Yêu thích
o Chọn banner: mở webview
o Bấm Xem thêm: mở page
Danh sách ứng dụng theo
danh mục

Chi tiết
danh

● Giao diện:

Trần Trí Thức

18
o Button Trở về
o Button Tìm kiếm
o Danh sách ứng dụng
● Logic:

o Nhấn button Trở về: trở về
trang trước đó
o Nhấn button Tìm kiếm: mở
trang tìm kiếm
o Chọn một ứng dụng: mở
ứng dụng

mục

Tìm
kiếm

● Giao diện

Trần Trí Thức

19
o Button Trở về
o Thanh search bar
o Lịch sử tìm kiếm
o Danh sách ứng dụng tìm
kiếm nhiều
● Logic
o Nhập nội dung cần tìm vào
search bar, ứng dụng sẽ
hiển thị các app liên quan
o Chọn mở một ứng dụng,
lịch sử tìm kiếm cũng như
tên app sẽ được lưu lại.

o Nhấn close button: xố lịch
sử tìm kiếm đó

Chỉnh
sửa u

● Giao diện:

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ề