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

Thông tin tài liệu

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 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 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 mô hình Mini App đã và 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̀ 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, 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 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 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́ hội được thực tập tại công ty Chỉ một thời gian ngắn, 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̣ team Tiki Open Platform đã bỏ 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 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̂ 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 tháng 12 nă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 Thành lập từ tháng 3/2010, Tiki.vn hiện là trang thương mại điện tử lọt top tại Việt Nam và top tại khu vực Đông Nam Á Tiki là một hệ sinh thái thương mại tất cả 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 nơi làm việc tốt nhất Việt Nam 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) Sản phẩm cơng ty Trần Trí Thức Hiện 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 10 triệu sản phẩm từ 26 ngành hàng khác • 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 Chương 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 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́ hội được học tập, khám phá và làm việc một môi trường cởi mở, nă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ề 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 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 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 Tìm hiểu kỹ thuật 2.1 Tini Framework - Thời gian: 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 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 • Tìm hiểu cách custom component có sẵn 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 bản về styling sử dụng 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: 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 Project thực Trần Trí Thức 10 Sau 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 Kế hoạch làm việc Tuần 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 Anh Huỳnh Thái Anh các team 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 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 Người hướng dẫn viên team theo sprint Anh Nguyễn Vũ Hưng • Nhận 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̉ 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 thành viên Chị Nguyễn Hải Nghi team Trần Trí Thức 11 • Build ứng dụng trên môi trường Anh Nguyễn Vũ Hưng Developer Anh Lý Gia Bảo • Trao đởi với QC kiểm thử Feature • Tiếp tục xây dựng app theo Feature • Báo cáo tiến độ với Mentor thành viên team • 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 thành viên Anh Lý Gia Bảo team • Build ứ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 thành viên team Trần Trí Thức 12 Chương CHI TIẾT VỀ ỨNG DỤNG Giới thiệu 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ể Giới thiệu ứng dụng Appstore Appstore một cửa hàng ứng dụng của Mini app app Tiki Từ Appstore có thể tìm kiếm, truy cập ứng dụng khác một cách dể dàng Ứng dụng có chức năng: • Xem banner quảng cáo • Xem danh mục ứng dụng ứ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 Yê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 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̣ app liên quan o Chọn mở một ứng dụng, lịch sử tìm kiếm 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 Yê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 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 yêu thích o Người dùng nhấn giữ ứng dụng để thay đổi vị trí hiển thị Kết • Với nỗ lực 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̉ 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 nền tảng Android IOS Ứng dụng đã có khá đầy đủ các tính năng đã đề ban đầu Hiện nay, ứng dụng được cập nhật cải thiện Em xin cảm ơn sự giúp đỡ của các anh chị team Tiki Open Platform đã giúp em hoàn thành ứng dụng Em 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: https://tiki.vn/thong-tin/gioi-thieu-ve-tiki [2] Tiki, “Tini Developer”, [Online] Avaiable: https://developers.tiki.vn/ [3] Tiki, “Tini Console”, [Online] Avaiable: https://developers.tiki.vn/apps 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ồ... 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... kỹ thuật 2.1 Tini Framework - Thời gian: 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 Tini Framework •

Ngày đăng: 01/02/2023, 21:23

Xem thêm: