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[.]
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ƯỜ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 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 mô hình Mini App đã và 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 Thương mại điện tử (ECommerce), 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à 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, 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 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 Trần Trí Thức LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TNHH TI KI đã tạo điều kiện cho em có cơ hội được thực tập tại công ty Chỉ 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ị team Tiki Open Platform đã bỏ 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 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 q trình tiếp cận với mơi trường cơng việc công ty Cũng xin cảm ơn thầy cô khoa Công nghệ Phần mềm đã nhiệt tình hỗ trợ, tạo điều kiện em hoàn thiện bài báo cáo Trần Trí Thức Tp Hồ Chí Minh, ngày tháng 12 năm 2022 Trần Trí Thức NHẬN XÉT CỦA KHOA ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… Trần Trí Thức MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT CỦA KHOA Chương GIỚI THIỆU CÔNG TY THỰC TẬP Giới thiệu Tiki Sản phẩm công ty Chương NỘI DUNG THỰC TẬP Tìm hiểu cơng ty quy trình làm việc Tìm hiểu kỹ thuật 2.1 Tini Framework 2.2 Tini studio 2.3 Lập trình Miniapp Project thực Kế hoạch làm việc 10 Chương CHI TIẾT VỀ ỨNG DỤNG 12 Giới thiệu Tini Framwork 12 Giới thiệu ứng dụng Appstore 12 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 Chương GIỚI THIỆU CÔNG TY THỰC TẬP Giới thiệu Tiki Thành lập từ tháng 3/2010, Tiki.vn hiện là trang thương mại điện tử lọt top tại Việt Nam và top tại khu vực Đông Nam Á Tiki là một hệ sinh thái thương mại tất cả một, gồm các công ty thành viên như: ● Công ty TNHH TI KI ("TiKi") đơn vị thiết lập, tổ chức sàn thương mại điện tử www.tiki.vn để Nhà bán hàng thể tiến hành phần tồn quy trình mua bán hàng hóa, dịch vụ sàn thương mại điện tử ● Công ty TNHH TikiNOW Smart Logistics ("TNSL") đơn vị cung cấp dịch vụ logistics đầu-cuối, dịch vụ vận chuyển, dịch vụ bưu 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") đơn vị bán hàng hóa, dịch vụ sàn thương mại điện tử ● Đơn vị bán lẻ Tiki Trading 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 tồn quốc Trần Trí Thức Tiki lọt Top nơi làm việc tốt nhất Việt Nam 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) Sản phẩm cơng ty Hiện Tiki có số sản phẩm bật như: ● 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 ● 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 Trần Trí Thức Chương 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 một môi trường cởi mở, năng động Tìm hiểu cơng ty quy trình làm việc - Thời gian: ngày - Nội dung: ● 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 ● Làm quen các thành viên team Tiki Open Platform ● Tạo tài khoản Slack, Jira, VPN và Github - Kết quả: ● Nắm được quy trình làm việc, các quy định của công ty ● 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 ● 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 Tìm hiểu kỹ thuật 2.1 Tini Framework - Thời gian: ngày Trần Trí Thức - Nội dung: ● Tìm hiểu cách xây dựng một ứng dụng với Tini Framework ● Tìm hiểu các life cycle của page, component Tini Framework ● Tìm hiểu về jsAPI và cấu trúc của ứng dụng ● Tìm hiểu về design system và các component được hỗ trợ ● Tìm hiểu các cách sử dụng Javascript library với Tini Framework ● Tìm hiểu cách custom component có sẵn Tini Framework ● Tìm hiểu các cách debug ứng dụng - Kết quả: ● Nắm được quy trình để xây dựng một ứng dụng với Tini Framework ● Nắm được các life cycle của page, component, cấu trúc thư mục của ứng dụng ● Nắm được cơ bản về styling sử dụng framework ● Nắm được cách kết hợp các javascript library với framework ● Custom thành công một số component có sẵn ● Xác định được phương phát debug cho ứng dụng 2.2 Tini studio - Thời gian: 0.5 ngày Trần Trí Thức 10 - Nội dung: ● Setup tini studio trên máy ● 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 ● Tìm hiểu các môi trường hiện có cho developer - Kết quả: ● Cài đặt và setup thành công tini studio ● 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 2.3 Lập trình Miniapp - Thời gian: ngày - Nội dung: ● Xem ứng dụng Mini app mẫu ● Xây dựng ứng dụng Todo - Kết quả: ● Xây dụng thành công ứng dụng Todo nhận xét từ mentor Project thực Sau 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 Kế hoạch làm việc Tuần Công việc ● Nhận thiết bị ký hợp đồng Người hướng dẫn Anh Huỳnh Thái Anh Trần Trí Thức 11 ● Tìm hiểu về công ty, cách thức tổ chức các team Tiki Open Platform ● Setup thiết bị, tài khoản ● Tìm hiểu về Framework và Studio ● Nhận và review project Spiderum ● Trao đổi với Mentor, Buddy thắc mắc thiết kế, luồn xử lí Anh Huỳnh Thái Anh Anh Nguyễn Vũ Hưng ● Lên kế hoạch cho Project Spiderum ● Tiến hành xây dựng Project Spiderum ● Báo cáo kết quả làm việc với các thành viên team theo sprint ● Nhận review Project Appstore ● Trao đổi với Designer UX/UI 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 luồn xử lý ● Tiến hành xây dựng project ● Chia nhỏ Feature ● Trao đổi với Designer 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 luồn xử lý ● Báo cáo tiến độ với Mentor thành viên team ● Build ứng dụng môi trường Anh Nguyễn Vũ Hưng Anh Lý Gia Bảo Developer ● Trao đổi với QC kiểm thử Feature ● Tiếp tục xây dựng app theo Feature ● Báo cáo tiến độ với Mentor thành viên team Anh Nguyễn Vũ Hưng ● Fix bug cho ứng dụng ● Trao đổi với Designer UX/UI sản phẩm 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 thành viên team ● Build ứ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 thành viên team Trần Trí Thức 13 Trần Trí Thức 14 Chương CHI TIẾT VỀ ỨNG DỤNG Giới thiệu Tini Framwork Tini framework là một framework dựa trên core ReactJs 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ể Giới thiệu ứng dụng Appstore Appstore cửa hàng ứng dụng Mini app app Tiki Từ Appstore tìm kiếm, truy cập ứng dụng khác cách dể dàng Ứng dụng có chức năng: ● Xem banner quảng cáo ● Xem danh mục ứng dụng ứng dụng thuộc danh mục ● Thêm/xố ứng dụng u thích ● Thêm ứng dụng sử dụng gần ● Ứng dụng 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 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 theo horizontal section o Banner theo carousel section o Nổi bật theo grid section o Danh sách ứng dụng theo danh mục ● Logic: o Khi ứng dụng hiển thị hình gửi tracking hệ thống o Chọn search bar: mở page search o Danh mục scroll horizontal o Chọn danh muc, page scroll xuống danh mục mà danh sách ứng dụng tương ứng phía o Chọn ứng dụng: mở Trần Trí Thức 17 ứng dụng gửi tracking hệ thống o Nhấn chỉnh sửa: mở page chỉnh sửa Yêu thích o Chọ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ở o Button Tìm kiếm o Danh sách ứng dụng ● Logic: o Nhấn button Trở về: trở trang trước o Nhấn button Tìm kiếm: mở trang tìm kiếm o Chọn ứ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ở 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 hiển thị app liên quan o Chọn mở ứng dụng, lịch sử tìm kiếm tên app 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 ... 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ồ... TY THỰC TẬP Giới thiệu Tiki Sản phẩm công ty Chương NỘI DUNG THỰC TẬP Tìm hiểu cơng ty quy trình làm việc Tìm hiểu kỹ thuật 2.1 Tini Framework 2.2 Tini studio 2.3 Lập trình Miniapp Project thực. .. 2.1 Tini Framework - Thời gian: ngày Trần Trí Thức - Nội dung: ● Tìm hiểu cách xây dựng một ứng dụng với Tini Framework ● Tìm hiểu các life cycle của page, component Tini Framework