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

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 T[.]

Trang 1

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

Trang 2

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

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

Trang 3

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 không cần tải hoặc cập nhật thường xuyên như Native app (các ứng dụngdành cho Android và iOS) hay Hybrid App (ứng dụng đa nền tảng) Hiện nay mô hìnhMini 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 chí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 TiniFramework đ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̀ í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̉aTiki 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ẩmtốt nhất cho khách hàng, trong khi vẫn thừa hưởng được tất cả lợi ích của việc chuyển đổisố

Với mục đích tìm hiểu công nghệ mới và cải thiện kỹ năng làm việc của bản thân trongmôi trường trẻ trung năng động Em đã chọn Tiki làm công ti thực tập của mình

Trang 4

Đặ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 Frameworkmới, cảm ơn anh Nguyễn Vũ Hưng đã hỗ trợ em trong quá trình tiếp cận với môi trườngvà công việc tại công ty.

Cũng xin cảm ơn thầy cô trong khoa Công nghệ Phần mềm đã nhiệt tình hỗ trợ, tạo điềukiện em hoàn thiện bài báo cáo

Trần Trí Thức

Tp Hồ Chí Minh, ngày 5 tháng 12 năm 2022

Trang 5

NHẬN XÉT CỦA KHOA

………

Trang 6

MỤC LỤC

Trang 7

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 2tại Việt Nam và top 6 tại khu vực Đông Nam Á Tiki là một hệ sinh thái thươngmại tất cả trong một, gồm các công ty thành viên như:

● Cô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̀nbộ quy trình mua bán hàng hóa, dịch vụ trên sàn thương mại điện tử

● Công ty TNHH TikiNOW Smart Logistics ("TNSL") là đơn vị cung cấpcác dịch vụ logistics đầu-cuối, dịch vụ vận chuyển, dịch vụ bưu chính choSàn thương mại điện tử www.tiki.vn

● Công ty TNHH MTV Thương mại Ti Ki ("Tiki Trading") là đơn vị bánhà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

Trang 8

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 Á 2019 (HR Asiabình chọn)

2 Sản phẩm công ty

Hiện nay Tiki có 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ừ 26ngà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 đốitác chạy trên nền Tiki super app

Trang 9

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

Đợt thực tập với nhằm mục đí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̀nluyệ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̣icô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 môi trườngcở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 ngà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̀nhlàm việc tại cô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 công ty

● Nắm được sơ đồ và trách nhiệm của các team cũng như vai trò các thànhviên

● Tạo thành công tài khoản và được cấp quyền truy cập các tài nguyên đượccho phép

2 Tìm hiểu về kỹ thuật

2.1 Tini Framework

Trang 10

- 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

● 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 ứngdụ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 cô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

Trang 11

- 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 môi trường hiện có cho developer

- Kết quả:

● Cài đặt và setup thành công tini studio

● Tạo tài khoản cho nhà phát triển và nắm được các môi trường hiện códành cho developer

2.3 Lập trình Miniapp

- Nội dung:

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

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

1 ● Nhận thiết bị ký hợp đồng Anh Huỳnh Thái Anh

Trang 12

● Tìm hiểu về cô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

2

● Trao đổi với Mentor, Buddy các thắc

mắc về thiết kế, luồn xử lí

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

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

Anh Huỳnh Thái AnhAnh Nguyễn Vũ Hưng

3 ● Báo cáo kết quả làm việc với các thành

viên trong team theo sprint

Anh Huỳnh Thái AnhAnh Nguyễn Vũ Hưng

4

● Nhận và review Project Appstore

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

● Trao đổi với PO về luồn xử lý

● Tiến hành xây dựng project

Anh Nguyễn Vũ HưngAnh Bùi Phạm Thanh TúChị Nguyễn Hải Nghi

5 ● Chia nhỏ các Feature

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

Anh Nguyễn Vũ HưngAnh Bùi Phạm Thanh Tú

Trang 13

● Trao đổi với PO về luồn xử lý

● Báo cáo tiến độ với Mentor và thành

viên trong team

Chị Nguyễn Hải Nghi

6

● Build ứng dụng trên môi trường

Developer

● Trao đổi với QC kiểm thử các Feature

● Tiếp tục xây dựng app theo Feature

viên trong team

Anh Nguyễn Vũ HưngAnh Lý Gia Bảo

7

● Fix bug cho ứng dụng

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

● Fix bug UX/UI ứng dụng

viên trong team

Anh Nguyễn Vũ HưngAnh Bùi Phạm Thanh TúAnh Lý Gia Bảo

8

● Build ứng dụng lên môi trường

Production

viên trong team

Anh Nguyễn Vũ HưngChị Nguyễn Hải Nghi

Trang 15

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̣ytrê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 tính năng nhất có thể

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

Appstore là một cửa hàng ứng dụng của Mini app trên app Tiki Từ Appstore chúng ta có thể tìm kiếm, truy cập các ứng dụng khác một cách dể dàng Ứng dụng có các chức năng:

● Xem banner quảng cáo

● Xem danh mục ứng dụng và các ứng dụng thuộc danh mục đó

● Thêm/xoá ứng dụng yêu thích

● Thêm ứng dụng sử dụng gần đây

● Ứng dụng nổi bật

● Tìm kiếm ứng dụng

● Lịch sử tìm kiếm

● Tìm kiếm nhiều

● Tracking người dùng

3 Yêu cầu chi tiết

Trang 16

Page Thiết kế Chi tiết

Trang 17

Home ● Giao diện:

o Thanh search bar

o Danh mục theo horizontalsection

o Yêu tích theo grid section

o Sử dụng gần đây theohorizontal section

o Banner theo carouselsection

o Nổi bật theo grid section

o Danh sách ứng dụng theotừng danh mục

● Logic:

o Khi các ứng dụng đượchiển thị trên màn hình sẽgửi tracking về hệ thống

o Chọn search bar: mở pagesearch

o Danh mục có thể scrollhorizontal

o Chọn một danh muc, pagesẽ scroll xuống danh mụcmà danh sách ứng dụngtương ứng ở phía dưới

o Chọn một ứng dụng: mở

Trang 18

ứng dụng và gửi tracking vềhệ thống

o Nhấn chỉnh sửa: mở pagechỉnh sửa Yêu thích

o Chọn hiện tất cả: Hiện đầyđủ danh sách Yêu thích

o Chọn banner: mở webview

o Bấm Xem thêm: mở pageDanh sách ứng dụng theodanh mục

Trang 19

o Button Trở về

o Button Tìm kiếm

o Danh sách ứng dụng

Trang 20

o Button Trở về

o Thanh search bar

o Lịch sử tìm kiếm

o Danh sách ứng dụng tìmkiếm nhiều

● Logic

o Nhập nội dung cần tìm vàosearch bar, ứng dụng sẽhiển thị các app liên quan

o Chọn mở một ứng dụng,lịch sử tìm kiếm cũng nhưtên app sẽ được lưu lại

o Nhấn close button: xoá lịch

sử tìm kiếm đó

Trang 21

o Người dùng bấm vào + sửdụng gần đây, ứng dụng sẽđược xoá khỏi danh sách sửdụng gần đây và thêm vàoyêu thích

o Người dùng nhấn giữ ứngdụng để thay đổi vị trí hiểnthị

Trang 22

TỔNG KẾT

Như vậy, chỉ trong vòng một tháng ngắn ngủi, nhóm đã kịp hoàn thành một ứng dụng chạy trên nền tảng Android và IOS Ứng dụng đã có khá đầy đủ các tính năng đã đề ra ban đầu Hiện nay, ứng dụng đang được cập nhật và 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 cô khoa Công nghệ phần mềm đã giúp em hoàn thành bài báo cáo này

Trang 23

TÀI LIỆU THAM KHẢO

[1] Tiki, “Giới thiệu Tiki”, [Online]

Tiêu đề	Lập trình Miniapp với Tini Framework (Báo cáo thực tập)
Tác giả	Trần Trí Thức
Người hướng dẫn	Nguyễn Vũ Hưng, Huỳnh Thái Anh
Trường học	Trường đại học công nghệ thông tin khoa công nghệ phần mềm
Chuyên ngành	Khoa công nghệ phần mềm
Thể loại	Báo cáo thực tập
Năm xuất bản	2022
Thành phố	TP. Hồ Chí Minh

Định dạng
Số trang	23
Dung lượng	0,94 MB