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

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 Ti

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

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Ờ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 hoà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

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

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

- 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

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 toà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

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

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

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

- 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

Anh Nguyển Hữu Gia Trí

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

về thiết kế

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

- Lên kế hoạch cho project

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

Anh Nguyễn Hữu Gia Trí Anh Văn Công Bằng Anh Nguyễn Ngọc Minh Khoa

3 - Trao đổi với team Core về các vấn

4 - Tiếp tục xây dựng project Anh Văn Công Bằng

Anh Nguyễn Ngọc Minh Khoa

- Trao đổi với PO và design về các cập nhật trong requirement

- Chuyển project sang môi trường Tiki development

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

Anh Nguyễn Hữu Gia Trí

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

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

- 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

Bạn Phạm Quang Huy Anh Huỳnh Thái Anh

7 - Fix bug cho ứng dụng

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

Anh Trương Công Quốc Thắng Anh Lý Gia Bảo

8 - Liên hệ design để review ứng

dụng

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

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

Anh Nguyễn Hữu Gia Trí Anh Nguyễn Vũ Hưng Anh Văn Công Bằng

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

3 Yêu cầu chi tiết

- 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

- Entry point:

o Chọn Delivery tại home

o Chọn Delivery tại menu page

- 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 yê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

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

- 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

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

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

- 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

- 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 xoá món (Yes: xoá 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

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

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

TÀI LIỆU THAM KHẢO

Tini framework document:

TỔNG KẾT

Trải qua 7 tuần làm việc ứng dụng F&B template đã được phát hành Với đầy đủ

các tính năng đã đề ra ban đầu Tuy vẫn còn nhiều điểm cần cập nhật và cải thiện trong

tương lai nhưng bước đầu đã đạt được các thành công nhất định

Em xin cảm ơn sự giúp đỡ của các anh chị trong team Tiki Open Platform đã giúp

em hoàn thành ứng dụng Em cũng xin cảm ơn quý thầy cô khoa Công nghệ phần mềm đã

giúp em hoàn thành bài báo cáo này