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 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 năm 2022 LỜI MỞ ĐẦU Mini app hay mini program ứng dụng nhỏ phát triển Super App, người dùng không cần tải cập nhật thường xuyên native app (các ứng dụng dành cho Android iOS) hay hybrid app (ứng dụng đa tảng) Hiện mơ hình mini app phát triển mạnh có loại hình như: Mini app siêu ứng dụng mạng xã hội (Social), mini app siêu ứng dụng TMĐT (E-Commerce), mini app siêu ứng dụng tài (Finance) Đón đầu xu hướng mini app, Tiki phát triển xây dựng Tini App với Tini framework giải pháp đại giúp cho đối tác Tiki dễ dàng, nhanh chóng tốn phát triển ứng dụng dịch vụ tảng Tiki Nhờ doanh nghiệp tập trung vào dịch vụ cốt lõi mang tới sản phẩm tốt cho khách hàng, thừa hưởng tất lợi ích việc chuyển đổi số Với mục đích tìm hiểu công nghệ cải thiện kỹ làm việc thân môi trường trẻ trung động Em chọn Tiki làm công ti thực tập Lữ Ngọc Vĩnh Thái LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TNHH thành viên thương mại Tiki tạo điều kiện cho em có hội thực tập cơng ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình mentor, em tiếp thu kiến thức quan trọng để làm miniapp với tini framework Chân thành cảm ơn anh chị team Tiki Open Platform bỏ nhiều thời gian,cơng sức để hướng dẫn em hồn thành đợt thực tập 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 làm báo cáo Lữ Ngọc Vĩnh Thái Tp.HCM, ngày 15, tháng 06 năm 2022 Lữ Ngọc Vĩnh Thái NHẬN XÉT CỦA KHOA …………………………….…………………………….…………………………….…… ……………………….…………………………….…………………………….………… ………………….…………………………….…………………………….……………… …………….…………………………….…………………………….…………………… ……….…………………………….…………………………….………………………… ….…………………………….…………………………….…………………………….… ……………………….…………………………….…………………………….………… ………………….…………………………….…………………………….……………… …………….…………………………….…………………………….…………………… ……….…………………………….…………………………….………………………… ….…………………………….…………………………….…………………………….… ………………………….…………………………….…………………………….……… …………………….…………………………….…………………………….…………… ……………….…………………………….…………………………….………………… ………….…………………………….…………………………….……………………… …….…………………………….…………………………….…………………………… …………………………….…………………………….…………………………….…… ……………………….…………………………….…………………………….………… ………………….…………………………….…………………………….……………… …………….…………………………….…………………………….…………………… ……….…………………………….…………………………….………………………… ….…………………………….…………………………….…………………………….… ………………………….…………………………….…………………………….……… …………………….…………………………….…………………………….………….… ……………….…………………………….……………………………….……………… …………………………….…………………………….………………………………… Lữ Ngọc Vĩnh Thái Mục lục 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, team quy trình làm việc Tìm hiểu kỹ thuật a Tini framework b Tini studio c Lập trình miniapp Project thực Kế hoạch làm việc Chương 3: Chi tiết project 11 Giới thiệu Tini framework 11 Giới thiệu ứng dụng 11 Yêu cầu chi tiết 12 Kết quả: 25 TÀI LIỆU THAM KHẢO 26 TỔNG KẾT 27 Lữ Ngọc Vĩnh Thái 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 trang thương mại điện tử lọt top Việt Nam top khu vực Đông Nam Á - Tiki hệ sinh thái thương mại tất một, gồm công ty thành viên như: o 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 o 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 o 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ử - Tiki lọt Top nơi làm việc tố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 châu Á 2019 (HR Asia bình chọn) Sản phẩm công ty - Sàn thương mại điện tử www.tiki.vn với 10 triệu sản phẩm từ 26 ngành hàng khác - TikiNOW cấp dịch vụ logistics cho nhà bá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 đối tác chạy Tiki super app Lữ Ngọc Vĩnh Thái 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 đào tạo tồn diện quy trình cách thức xây dựng mini app sử dụng tini framework tini studio, đồng thời rèn luyện kỹ mềm 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ó hội học tập, khám phá làm việc môi trường cởi mở, động Tìm hiểu cơng ty, team quy trình làm việc - Thời gian: ngày, - Nội dung: o Nghe hướng dẫn quy định thiết bị, team có quy trình làm việc cơng ty o Làm quen thành viên team Tiki Open Platform o Tạo tài khoản slack, jira, vpn github - Kết quả: o Nắm quy trình làm việc, quy định công ty o Nắm sơ đồ trách nhiệm team vai trò thành viên o Tạo thành công tài khoản cấp quyền truy cập tài nguyên cho phép Tìm hiểu kỹ thuật a Tini framework - Thời gian: ngày - Nội dung: o Tìm hiểu cách xây dựng ứng dụng với tini framework o Tìm hiểu life cycle page, component tini framework o Tìm hiểu jsAPI cấu trúc ứng dụng o Tìm hiểu design system component hỗ trợ o Tìm hiểu cách sử dụng javascript library với tini framework Lữ Ngọc Vĩnh Thái o Tìm hiểu cách custom component có sẵn tini framework o Tìm hiểu cách debug ứng dụng o Được giới thiệu vấn đề có hệ điều hành khác - Kết quả: o Nắm quy trình để xây dựng ứng dụng với tini framework o Nắm life cycle page, component, cấu trúc thư mục ứng dụng o Nắm styling sử dụng framework o Nắm cách kết hợp javascript library với framework o Custom thành cơng số component có sẵn o Xác định 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 máy o Tạo tài khoản cho nhà phát triền tìm hiểu cách up build cho ứng dụng o Tìm hiểu mơi trường có cho developer - Kết quả: o Cài đặt setup thành công tini studio o Tạo tài khoản cho nhà phát triển nắm môi trường 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 ứng dụng nhỏ với framework - Kết quả: o Xây dựng thành công mini app theo yêu cầu Lữ Ngọc Vĩnh Thái Project thực Sau ngày tìm hiểu framework studio thực tập sinh bắt đầu thực project theo yêu cầu từ mentor Chi tiết project 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 - Tìm hiểu cơng ty, cách thức tổ Người hướng dẫn Anh Nguyển Hữu Gia Trí chức team Tiki Open Platform - Setup thiết bị, tài khoản - Tìm hiểu framework studio - Nhận review project cần thực - Trao đổi với design thắc mắc Anh Nguyễn Hữu Gia Trí thiết kế Anh Văn Cơng Bằng Trao đổi với PO flow Anh Nguyễn Ngọc Minh Khoa project - Lên kế hoạch cho project - Tiến hành xây dựng project - Trao đổi với team Core vấn Anh Hàn Quốc Hân - đề cần support Anh Nguyễn Vũ Hưng Báo cáo kết làm việc với Anh Nguyễn Hữu Gia Trí thành viên team theo sprint - Tiếp tục xây dựng project Anh Văn Công Bằng Anh Nguyễn Ngọc Minh Khoa Lữ Ngọc Vĩnh Thái 10 - Trao đổi với PO design Anh Nguyễn Hữu Gia Trí cập nhật requirement - Chuyển project sang môi trường Tiki development - Build test môi trường dev - Cập nhật kế hoạch chia task Bạn Phạm Quang Huy với thực tập sinh Anh Huỳnh Thái Anh - Tạo mock data cho ứng dụng - Tiếp tục xây dựng project - Báo cáo kết làm việc với thành viên team theo sprint - Cập nhật build cho ứng dụng Anh Trương Công Quốc Thắng - Cập nhật ticket jira liên hệ QC Anh Nguyễn Hữu Gia Trí để tiến hành kiểm thử ứng dụng Bạn Phạm Quang Huy - Fix bug cho ứng dụng Anh Trương Công Quốc Thắng - Báo cáo kết làm việc với Anh Lý Gia Bảo thành viên team theo sprint - Liên hệ design để review ứng Anh Nguyễn Hữu Gia Trí dụng Anh Nguyễn Vũ Hưng - Cập nhật build cho ứng dụng Anh Văn Công Bằng - Chuyển ứng dụng sang môi trường production publish ứng dụng Lữ Ngọc Vĩnh Thái 13 - Field Thông tin giao hàng: o Hiển thị địa giao hàng theo format: Address, District, City o Trường hợp địa dài wrapper 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 list category - Logic: o Khi bấm vào Favorite, section Favorite ngang với sidebar Favorite, bấm vào Coffee sidebar, list items auto scroll up section Coffee ngang với sidebar Coffee o Khi section phía hiển thị items section hiển thị dòng với sidebar tương ứng o Icon search: navigate sang Search product screen Lữ Ngọc Vĩnh Thái 14 - Entry point: o Chọn Delivery home o Chọn Delivery menu page - Logic: o Chọn sổ đia chỉ: navigate sang screen New address o Chỉnh sửa địa chỉ: navigate sang Edit address screen o Các địa tạo lưu “Saved places” Lữ Ngọc Vĩnh Thái 15 - Field Thông tin store: o Hiển thị địa 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 dài wrapper 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 store Restaurant - Field Sidebar o Sort theo category sản phẩm o Hiển thị list theo list category - Logic: o Favorite: yêu thích user Khi bấm vào Favorite, section Favorite ngang với sidebar Favorite, bấm vào Coffee sidebar, list items auto scroll up section Coffee ngang với sidebar Coffee o Khi bấm vào Burger sidebar, list items auto scroll up section Burger ngang với sidebar Burger Lữ Ngọc Vĩnh Thái 16 - Address: o Độ dài=< 50, nhập từ o Sai format noti: Địa không hợp lệ (địa phải chứa từ) - City, district, ward: o Filter danh sách tỉnh thành o Kết trả dạng list o User nhập ký tự không dấu trả kết phù hợp - Recipient's name: o Text =< 50 character o Sai format 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 số điện thoại 10 chữ số VN o Sai format 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 bấm button Save save vào Sổ địa TIKI back screen trước - Save button: o Khi user chọn save address, địa save lại, back lại screen trước Lữ Ngọc Vĩnh Thái 17 - Entry point: o Chọn “Store” delivery screen o Chọn Store icon bottom bar - Khung tìm kiếm o Kết trả dạng list o Nếu user nhập khơng có kết nào, trả trạng thái khơng tìm thấy kết o User nhập ký tự không dấu trả kết phù hợp - Favorite store: o Hiển thị store yêu thích user, xếp theo thứ tự Lữ Ngọc Vĩnh Thái 18 - Entry point: o Chọn cửa hàng screen danh sách cửa hàng - Các fields chính: o Hình ảnh, tên cửa hàng, khung mở-đóng cửa o Favorite store: Khi user tap to heart icon, store thêm vào Favorite store o Store pickup: Bấm vào navigate sang menu screen kèm theo thông tin store o Delivery: Bấm vào navigate sang Delivery menu screen kèm theo thông tin store o Số điện thoại địa cửa hàng - Logic: o Button thích: Lưu cửa hàng vào danh sách yêu thích user o Phone number: Cho phép gọi đến số điện thoại cửa hàng Lữ Ngọc Vĩnh Thái 19 - Entry point: o Icon search header - Khung tìm kiếm - filter o Kết trả dạng list o Nếu kết nào, trả trạng thái khơng tìm thấy kết o Logic: user nhập ký tự không dấu trả kết phù hợp - Popular drinks and foods: o Hiển thị search nhiều restaurant (6 món) Lữ Ngọc Vĩnh Thái 20 - Hình ảnh thơng tin o Favorite product: Khi user tap heart icon, hiển thị Favorite o Hiển thị option cho sản phẩm o Field note: =< 100 ký tự o Có thể thay đổi số lượng 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 Lữ Ngọc Vĩnh Thái 21 - Entry point: o Button Cart header - Shipping details: o Địa store o Địa giao hàng, Tên số điện thoại o Validation: Tap vào navigate sang screen Address selection screen, chọn địa xong back hình - Order details: o Khi tăng giảm số lượng size topping tăng, giảm theo (nếu có) o Khi giảm số lượng = hiển thị pop-up xác nhận xố (Yes: xố item, số lượng item > 0: Trở hình Cart, ngược lại: Trở hình trước vào hình Cart; No: đóng pop-up) - Giá: o Hiển thị giá tổng cho item o Hiển thị giá order, phí ship giá tổng - Apply coupon: o Hiển thị bottom sheet để user nhập - Button Pay: o Call Tiki payment API Lữ Ngọc Vĩnh Thái 22 - Entry point: o Button Order bottom bar - Các field chính: o Trạng thái order: Order received, Ready for pickup, Order completed o Ngày, order o Thông tin cửa hàng o Thời gian nhận hàng o Tên số lượng o Tổng giá tiền Lữ Ngọc Vĩnh Thái 23 - Entry point: - Chọn order screen danh sách order - General info o Order ID o Order date - Shipping details o Địa store o Thời gian nhận hàng - Product info o Tên món, size, topping, tổng giá,… - Payment info o Các thông tin: Price, Shipping fee, Promotion, Total Lữ Ngọc Vĩnh Thái 24 - Entry point: o Button Profile bottom bar - Các fields chính: o Avatar o User name o Điểm thưởng o Support button: Hỗ trợ quay số đến dịch vụ chăm sóc khách hàng Lữ Ngọc Vĩnh Thái 25 Kết quả: - Với nỗ lực tuần làm việc ứng dụng F&B template kiểm duyệt phát hành tảng Tiki production - Hiện app có 200 lượt xem, làm tảng cho mini app đối tác thuộc lĩnh vực F&B thời gian tới, tiêu biểu ứng dụng Tini KFC em tiếp tục phát triển - Qua trình thực tập em rèn luyện tích luỹ thêm nhiều kinh nghiệm bổ ích cho thân khả lập trình lẫn kỹ mềm, khả làm việc nhóm, trao đổi, thuyết trình lập kế hoạch Lữ Ngọc Vĩnh Thái 26 TÀI LIỆU THAM KHẢO Tini framework document: https://developers.tiki.vn/docs/framework Tini design system document: https://developers.tiki.vn/docs/design Tini app showcase: https://developers.tiki.vn/showcase Lữ Ngọc Vĩnh Thái 27 TỔNG KẾT Trải qua tuần làm việc ứng dụng F&B template phát hành Với đầy đủ tính đề ban đầu Tuy nhiều điểm cần cập nhật cải thiện tương lai bước đầu đạt thành công định Em xin cảm ơn giúp đỡ anh chị team Tiki Open Platform giúp em hoàn thành ứng dụng Em xin cảm ơn quý thầy cô khoa Công nghệ phần mềm giúp em hoàn thành báo cáo Lữ Ngọc Vĩnh Thái ... Tiki super app Lữ Ngọc Vĩnh Thái 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 đào tạo tồn diện quy trình cách thức xây dựng mini app sử dụng tini framework tini studio,... thiệu Tini framework Tini framework framework dựa core React hỗ trợ xây dựng mini app chạy Tiki super app Framework thiết kế phép nhà phát triển xây dựng ứng dụng với trải nghiệm native app cách... hình mini app phát triển mạnh có loại hình như: Mini app siêu ứng dụng mạng xã hội (Social), mini app siêu ứng dụng TMĐT (E-Commerce), mini app siêu ứng dụng tài (Finance) Đón đầu xu hướng mini app,