Báo cáo thực tập genkin website order nhật việt

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM THỰC TẬP TỐT NGHIỆP ĐỀ TÀI: Genkin – Website Order Nhật – Việt Công ty thực tập: GENKIN COMPANY LIMITED Lớp: SE501.N21.PMCL Sinh viên thực hiện: Nguyễn Huy Hoàng – 1952153 TP Hồ Chí Minh, ngày 15 tháng năm 2023 NHẬN XÉT (Của giảng viên) MỤC LỤC CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP I Giới thiệu chung công ty II Cơ cấu tổ chức III Văn hóa cơng ty CHƯƠNG 2: NỘI DUNG THỰC TẬP 11 I Cơng nghệ, giải pháp quy trình áp dụng 11 Giới thiệu Git 11 Giới thiệu VSCode 14 Giới thiệu mô hình làm việc Agile – Scrum 16 Tìm hiểu RESTful API 20 Tìm hiểu NodeJS 22 Tìm hiểu NextJS 22 Tìm hiểu ReactJS 24 Vòng đời ReactJS 25 Tìm hiểu Redux 27 10 Shopify 29 11 Redux Saga 30 12 Tìm hiểu Ant Design 32 II Genkin – Website Order Nhật – Việt 33 Bối cảnh đời Website Genkin 33 Nhiệm vụ sinh viên giao 33 Mục tiêu xây dựng Website Genkin 33 Các chức Website Genkin version 1.0 33 CHƯƠNG 3: NHẬT KÝ THỰC TẬP 38 CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC QUA ĐỢT THỰC TẬP 39 I Kết thu 39 II Các điểm yếu thân 40 III Gợi ý cho chương trình học 40 IV Cảm nhận công ty 40 DANH MỤC TÀI LIỆU THAM KHẢO 42 LỜI NĨI ĐẦU Ngành cơng nghiệp Logistics lĩnh vực quan trọng đóng góp phát triển đáng kể cho kinh tế toàn cầu Sự phát triển công nghệ tác động sâu sắc mang lại thay đổi tích cực lĩnh vực Công ty ABC, nơi thực tập với vị trí Javascript Intern, công ty hàng đầu ngành Logistics cung cấp dịch vụ order, mua hộ từ Nhật Việt Nam Nhận thức sớm tầm quan trọng việc áp dụng công nghệ hoạt động kinh doanh Sự số hóa tự động hóa quy trình giúp nâng cao hiệu suất đồng thời tối ưu hóa chi phí Trong thời gian thực tập, tơi tham gia vào việc phát triển cải thiện ứng dụng web sử dụng Javascript, góp phần tạo giải pháp thơng minh tiện ích cho việc quản lý vận hành lĩnh vực Logistics Trên phạm vi quốc tế, ngành Logistics đóng vai trị khơng thể thiếu việc kết nối quốc gia đáp ứng nhu cầu vận chuyển hàng hóa tồn cầu Việc quản lý chuỗi cung ứng, vận chuyển lưu trữ hàng hóa trở nên phức tạp yêu cầu xác hiệu cao Tại Việt Nam, ngành Logistics phát triển với tốc độ nhanh chóng, đáp ứng nhu cầu ngày tăng thị trường nội địa quốc tế Công ty Genkin xác định tầm nhìn tham vọng trở thành đơn vị hàng đầu lĩnh vực Tôi lựa chọn thực tập cơng ty Genkin nhận thấy chun nghiệp tầm nhìn xa cơng ty lĩnh vực Logistics Công ty Genkin tạo điều kiện tốt cho để áp dụng phát triển kỹ lập trình Javascript mơi trường thực tế Sự hỗ trợ đồng hành đội ngũ nhân viên giàu kinh nghiệm giúp nắm bắt nhanh chóng quy trình cơng nghệ ngành, đồng thời tạo điều kiện để gặt hái thành tựu trình thực tập LỜI CẢM ƠN Em xin gửi lời cảm ơn chân thành đến Ban giám hiệu/trưởng khoa/đơn vị phụ trách thực tập, toàn thể giáo viên thành viên trường Đại học Công nghệ Thông tin – ĐHQG – HCM Nhờ hỗ trợ cung cấp hội thực tập, em có trải nghiệm thực tế quý báu trình học tập Em muốn bày tỏ lòng biết ơn đặc biệt đến giáo viên hướng dẫn em, người tận tâm kiên nhẫn hướng dẫn, giúp đỡ chia sẻ kiến thức quý giá suốt thời gian thực tập Sự tận tâm dạy họ giúp em hiểu rõ ngành nghề phát triển kỹ cần thiết để làm việc môi trường chuyên nghiệp Em muốn gửi lời cảm ơn sâu sắc tới công ty GENKIN COMPANY LIMITED nơi em có hội thực tập Đội ngũ nhân viên công ty nhiệt tình hỗ trợ chia sẻ kiến thức với em Em biết ơn cung cấp môi trường làm việc chuyên nghiệp hội tham gia vào dự án thực tế, từ nâng cao kỹ kiến thức lĩnh vực Logistic ứng dụng công nghệ Cuối cùng, em xin gửi lời cảm ơn đến nhà trường, người đào tạo trang bị cho em kiến thức tảng kỹ quan trọng suốt quãng thời gian học tập Sự hỗ trợ tạo điều kiện tốt từ nhà trường giúp em tự tin sẵn sàng để vươn tới thực tế công việc Một lần nữa, em xin bày tỏ lòng biết ơn sâu sắc đến Ban giám hiệu/trưởng khoa/đơn vị phụ trách thực tập, giáo viên hướng dẫn cơng ty GENKIN COMPANY LIMITED hội q báu hỗ trợ mà em nhận Em tiếp tục nỗ lực áp dụng kinh nghiệm thu để phát triển thân đóng góp vào phát triển cộng đồng ngành nghề tương lai Nguyễn Huy Hoàng TP Hồ Chí Minh, ngày 16 tháng 06 năm 2023 DANH MỤC CÁC CỤM TỪ VIẾT TẮT CD : Client Development API : Application Programming Interface CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP I - - Giới thiệu chung công ty Tên đơn vị: CÔNG TY TNHH GENKIN (GENKIN COMPANY LIMITED) Lĩnh vực hoạt động: Logistic, Công nghệ Thông tin Địa chỉ: • Trụ sở Việt Nam: 129 Nguyễn Trãi, Bến Thành, Quận 1, Tp.HCM • Trụ sở Nhật Bản: 598-4 Matsuishi, Satte-shi, Saitama-ken, Nhật Bản Trang web: www.genkin.vn Email: contact@genkin.com.vn Điện thoại: (+84) 93 415 3230 Thời gian làm việc: Thứ đến thứ 6: 09h00 - 18h30 Slogan: “Your product We care” Sứ mệnh: Sứ mệnh trở thành cơng ty vận chuyển Nhật – Việt hàng đầu Hình 1.1: Logo Công ty TNHH GENKIN - - Genkin sản phẩm ứng dụng công nghệ để hỗ trợ tốt cho người dùng Việt (đặc biệt cá nhân kinh doanh) mua & nhập hàng hoá cách dễ dàng Genkin ln giữ niềm tin sứ mệnh trở thành công ty vận chuyển Nhật – Việt hàng đầu Hướng đến tương lai hỗ trợ nhà bán lẻ người dùng thực giao dịch mua bán hàng hóa xuyên biên giới cách dễ dàng Nắm bắt nhu cầu thường xuyên cập nhật xu hướng ngành, thành viên công ty không ngừng nâng cao khả thân để mang đến giá trị tích cực cho khách hàng II Cơ cấu tổ chức GENKIN tổ chức theo mơ hình phẳng Một thành viên đóng vai trị linh hoạt nhóm tổ chức khác nhau: • Các phịng ban liên hệ mật thiết với ban giám đốc, đảm bảo kết nối bền cơng việc • Các thành viên phòng ban kết nối trao đổi trực tiếp với quản lý Trưởng phịng ban Hình 1.2:GENKIN Organization Chart III Văn hóa cơng ty Văn hóa GENKIN xây dựng theo giá trị cốt lõi: Genkin cố gắng cung cấp dịch vụ chăm sóc khách hàng tuyệt vời cách áp dụng nguyên tắc Omotenashi - nghệ thuật chăm sóc khách hàng đặc biệt từ Nhật Bản Omotenashi chắt chiu niềm tin khách hàng khách mời quý giá Với tư này, GENKIN nỗ lực vượt qua mong đợi thỏa mãn kỳ vọng khách hàng, nhằm tạo trải nghiệm đáng nhớ Mặc dù ln cố gắng hồn thiện, Genkin nhận thức đơi xảy sai sót nhỏ Một phản hồi xấu lan rộng, trăm phản hồi tích cực lại khơng thể bật với số đơng Vì vậy, Genkin ln hy vọng khách hàng thân thiết thấu hiểu trân trọng nỗ lực để cung cấp dịch vụ theo cách tốt Bằng cách áp dụng triết lý Omotenashi, Genkin cam kết tạo môi trường chân thành, tôn trọng quan tâm đến chi tiết nhỏ GENKIN lắng nghe đáp ứng nhanh chóng yêu cầu phản hồi từ khách hàng, lớn hay nhỏ Một số đặc trưng văn hóa Omotenashi: • Sự chào đón thân thiện: Văn hóa Omotenashi khuyến khích người phục vụ chào đón khách hàng cách nhiệt tình, thân thiện vui vẻ Sự chào đón chân thành niềm vui việc phục vụ coi quan trọng • Sự tận tụy tinh thần phục vụ: Người phục vụ văn hóa Omotenashi đặt khách hàng lên hàng đầu tận tụy việc đáp ứng nhu cầu họ Họ cố gắng cung cấp dịch vụ tốt làm hài lịng khách hàng cách tận tâm • Sự tinh tế ý đến chi tiết: Văn hóa Omotenashi quan tâm đến chi tiết nhỏ hồn hảo khía cạnh dịch vụ Người phục vụ ý đến điều nhỏ nhặt cách xếp bàn, trang trí, chất lượng thức ăn cách phục vụ để tạo trải nghiệm tốt cho khách hàng • Sự nhạy bén đồng cảm: Người phục vụ văn hóa Omotenashi cố gắng hiểu đồng cảm với nhu cầu mong muốn khách hàng Họ sẵn lòng lắng nghe thấu hiểu để đáp ứng vượt qua mong đợi khách hàng • Sự tơn trọng lịng biết ơn: Văn hóa Omotenashi coi trọng tơn trọng lòng biết ơn khách hàng Người phục vụ thể tôn trọng cách đối xử công bằng, lịch tử tế Họ biết ơn tin tưởng lựa chọn khách hàng • Sự linh hoạt khách hàng trọng yếu: Văn hóa Omotenashi đặt khách hàng lên hết sẵn lòng thay đổi, tùy chỉnh dịch vụ để đáp ứng nhu cầu đặc biệt khách Thời gian làm việc từ thứ đến thứ 6: 9h00 – 18h30 Thời gian nghỉ trưa từ 12:00 PM đến 1:30 PM, nhân viên ăn trưa ngủ trước bắt đầu công việc vào buổi chiều Nhân viên công ty trước ngày làm việc phải ghi rõ “task” thực thời gian thực "task" dự án, để đảm bảo dự án thực Đồ ăn nhẹ, trà, cà phê miễn phí cho tất nhân viên vào thời gian nghỉ ngơi Hình 2.13: Redux Cách sử dụng: Nếu muốn sử dụng Redux, cần nhớ thành phần Redux: Store, Views, Actions, Reducers Chi tiết thành phần mô tả sau: Store: Là nơi quản lý trạng thái (state), truy cập để lấy trạng thái (state) ra, update state có, listener để nhận biết xem có thay đổi khơng, cập nhật qua views Actions : pure object định nghĩa thuộc tính type: kiểu action, ví dụ ‘TOGGLE_STATUS’, payload: giá trị tham số mà action creator truyền lên Reducers: Khác với actions có chức mơ tả thứ xảy ra, khơng rõ state response thay đổi, mà việc reducers đảm nhiệm, nơi xác định state thay đổi nào, sau trả state View: Hiển thị liệu cung cấp Store 10 Shopify Hình 2.14: Shopify Shopify tảng thương mại điện tử dựa đám mây (cloud-based) thiết kế để giúp người dùng xây dựng quản lý cửa hàng trực tuyến cách dễ dàng Nền tảng cung cấp cho người dùng công cụ cần thiết để tạo, vận hành quảng bá cửa hàng trực tuyến họ mà không cần kiến thức kỹ thuật sâu Với Shopify, người dùng tạo cửa hàng trực tuyến với giao diện hấp dẫn, chất lượng cao hoàn toàn tùy chỉnh Nền tảng cung cấp nhiều mẫu giao diện (templates) sẵn có, cho phép người dùng tùy chỉnh theo yêu cầu họ, bao gồm tùy chỉnh màu sắc, bố cục hình ảnh Người dùng thêm sản phẩm, quản lý kho hàng, xử lý tốn vận chuyển hàng hóa thơng qua giao diện quản lý dễ sử dụng Shopify cung cấp tích hợp tính quản lý cửa hàng đơn hàng, quản lý khách hàng, báo cáo kinh doanh tiếp thị Ngồi ra, tảng cịn hỗ trợ tính mở rộng tích hợp với cổng tốn, tích hợp với cơng cụ tiếp thị quảng cáo trực tuyến, tích hợp với cơng cụ phân tích theo dõi hiệu suất Shopify cung cấp gói dịch vụ phù hợp với nhu cầu khác nhau, từ cửa hàng nhỏ đến doanh nghiệp lớn Nền tảng hỗ trợ việc mở rộng tùy chỉnh thông qua ứng dụng chủ đề bổ sung từ Shopify App Store Shopify Theme Store Tóm lại, Shopify tảng thương mại điện tử mạnh mẽ dễ sử dụng giúp người dùng xây dựng quản lý cửa hàng trực tuyến cách thuận tiện hiệu 11 Redux Saga Redux-Saga thư viện redux middleware, giúp quản lý side effect ứng dụng redux trở nên đơn giản Bằng việc sử dụng tối đa tính Generators (function*) ES6, cho phép ta viết async code nhìn giống synchronos Cách hoạt động Hình 2.15: Cách hoạt động Redux Đối với logic saga, ta cung cấp hàm cho saga, hàm hàm đứng xem xét action trước vào store, action quan tâm thực thi hàm thực thi, bạn biết khái niệm hook hàm cung cấp cho saga hàm hook Điều đặc biệt hàm hook generator function, generator function có yield yield ta trả plain object Object trả gọi Effect object effect object đơn giản object bình thường chứa thơng tin đặc biệt dùng để dẫn middleware Redux thực thi hoạt động khác ví dụ gọi hàm async khác hay put action tới store Để tạo effect object đề cập ta gọi hàm từ thư viện saga redux-saga/efects 12 Tìm hiểu Ant Design Hình 2.15: Ant Design Ant (Github) tập hợp components React xây dựng theo chuẩn thiết kế Ant UED Team Tương tự chuẩn Material Design, Ant cung cấp hầu hết component thông dụng ứng dụng web đại, Layout, Button, Icon, DatePicket, v.v…Bên cạnh Ant có component riêng thú vị, LocaleProvider cho phép bạn thay đổi ngơn ngữ tồn ứng dụng https://ant.design/docs/react/introduce II Genkin – Website Order Nhật – Việt Bối cảnh đời Website Genkin Nhiệm vụ công ty GENKIN phải cung cấp sản phẩm kỹ thuật số tạo tác động thực tích cực cho doanh nghiệp tổ chức Vì việc trì mối quan hệ, tương với khách hàng thân thiết, khách hàng tiềm thực cần thiết Team kinh doanh công ty (Sales Deparment) muốn có cơng cụ dành cho khách hàng thực yêu cầu liên quan đến dịch vụ Genkin, song song với cơng cụ giúp cho phòng ban tương tác với yêu cầu quản lý Hiện tại, thành viên công ty sử dụng nhiều công cụ khác để quản lý công việc Tuy nhiên việc làm diễn không hiệu Các thành viên công ty phải sử dụng nhiều công cụ để quản lý, việc không đem lại hiệu quả, bất tiện ngồi thành viên team khơng theo dõi tiến độ công việc thành viên cịn lại team • Phiên Genkin 1.0 (đầu tiên) website thông tin giúp khách hàng xem đơn hàng mình, xem tiến độ đơn hàng, xem báo giá từ Genkin Nhiệm vụ sinh viên giao - Nắm kiến thức công nghệ giảng dạy áp dụng để xây dựng website hoàn thiện Website Genkin version 1.0 - Sử dụng thành thạo lập trình Back-end (NodeJS), Front-end (ReactJS) cơng nghệ hỗ trợ - Hồn thiện backlog giao Mục tiêu xây dựng Website Genkin - tất chức dựa công việc thực tế cách tuyển dụng công ty: Website Genkin xem trogn bước quan trọng q trình phát triển nhanh chóng cơng ti, giảm chi phí tăng hiệu kinh doanh tối ưu trải nghiệm khách hàng → Website Genkin hỗ trợ việc quản lí khách hàng tiềm trình làm việc với yêu cầu từ khách hàng cách hiệu Các chức Website Genkin version 1.0 Website Genkin với chức sau giúp cho phase Sale hiệu quả, nhanh chóng hơn: • Hiển thị thơng tin đơn hàng khách hàng • Xây dựng chức báo giá sản phẩm, tra cứu đơn hàng tra cứu phí ship • • Xây dựng thức xác thực tài khoản Xây dựng chức tra cứu giá sản phẩm link từ website thương mại điện tử • Chức tra cứu thông tin báo giá Chức giúp người dùng tra cứu bao giá sản phẩm Hình 2.24: Chức tra cứu báo giá • Chức tra cứu đơn hàng Giúp người dùng tra cứu thông tin đơn hàng phí ship đơn hàng Hình 2.27: Chức tra cứu đơn hàng CHƯƠNG 3: NHẬT KÝ THỰC TẬP Tuần Tuần Nội dung thực tập - Tìm hiểu cơng ty, cách tổ chức công ty Chị Hồ Trang (Team lead) - Làm quen với cách làm việc theo mơ hình Agile cơng ty Anh Lân Đặng - Làm quen với công cụ làm việc công ty (kênh chat trực tuyến công ty – Jira, Zalo, email công ty) - Cài đặt môi trường để chuẩn bị cho dự án - Học cách trao đổi, làm việc qua email - Tìm hiểu NodeJS, VSCode Tuần Người hướng dẫn - Tìm hiểu Shopify, Anima - Tìm hiểu Jira - Tìm hiểu Git tool liên quan tới Git - Tìm hiểu Agile, Scrum - Tìm hiểu Shopify - Chia nhỏ dự án Website Genkin thành backlog để dễ theo dõi tiến độ công việc Tuần 3, - Liên kết với server để deploy Tuần - Thiết lập hoàn thành iteration goal (Iteration Shopify 1) - Hoàn thành chức Tra cứu báo giá tổng - Tham gia daily standup ngày: báo cáo công việc mà hôm qua thân làm hôm làm gì, stuck điểm (Tech lead) - Tham gia buổi họp kết thúc Iteration: đưa điểm mạnh điểm yếu thời gian làm việc vừa qua team - Xây dựng hoàn thành goal iteration - Tham gia daily standup ngày: báo cáo công việc Tuần mà hôm qua thân làm hơm làm gì, 5, stuck điểm Tuần - Tham gia buổi họp kết thúc Iteration: đưa (Iteration điểm mạnh điểm yếu thời gian làm việc vừa qua 2) team Tuần 7,8 - Xây dựng hoàn thành goal iteration (Iteration - Tham gia daily standup ngày : báo cáo công việc 3) mà hôm qua thân làm hôm làm gì, stuck điểm - Tham gia buổi họp kết thúc Iteration: đưa điểm mạnh điểm yếu thời gian làm việc vừa qua team Tuần (iteration 4) - Fix bugs - Chuẩn bị tài liệu để báo cáo thực tập - Củng cố kiến thức qua đợt thực tập - Người hướng dẫn đánh giá nhận xét - Bản thân rút kinh nghiệm, tự đánh giá khắc phục khuyết điểm sản phẩm tạo CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC QUA ĐỢT THỰC TẬP Kết thu I - Trải nghiệm quy trình làm việc từ đầu đến cuối dự án thực tế theo mơ hình làm việc Agile - Xây dựng thành công Web thực tế - Trau dồi nhiều kiến thức Front-end - Thao tác lập trình, tư duy, ý tưởng xử lý luồng liệu tầng tăng hiệu - Hiểu nguyên tắc xây dựng phần mềm từ ý tưởng đến việc phân tích đưa ý tưởng thành thực - Nâng cao kỹ lập trình Web Front-end sử dụng ReactJs nhiều thư viện khác - Nâng cao kỹ làm việc nhóm, "teamwork" khơng hồn thành cơng việc mà cịn phải để tâm đến đồng đội mình, nhìn nhận quan điểm chung, mục tiêu chung để hồn thành dự án cách tối ưu - Tự nhìn nhận đánh giá thân thông qua buổi kết thúc Iteration để cải thiện công việc, rút ngắn thời gian làm việc - Kỹ giao tiếp, tư phản biện, giải vấn đề nâng cao - Xây dựng tư tích cực cho sau này: • • Get thing done: Làm điều phải làm trọn vẹn làm, cách phải hồn thành, khơng bỏ chừng You can it: Không tự giới hạn khả thân, khơng nên nản lịng trước bắt tay vào cơng việc khó khăn Các điểm yếu thân II - Teamwork chưa tốt, chưa thực quan tâm tới người - Vẫn cịn thiếu chủ động liệt cơng việc - Vẫn nhút nhát III Gợi ý cho chương trình học - Rèn luyện kỹ mềm mơi trường làm việc tốt IV Cảm nhận công ty - Cơ sở vật chất tốt, phòng rộng rãi, thống mát, thoải mái, - Có nơi nghỉ ngơi, có quán - Thiết bị, máy móc hiệu làm việc cao, đường truyền internet mạnh - Đội ngũ phụ trách hướng dẫn giảng dạy thực tập đa dạng, vơ tận tâm nhiệt tình, trình độ chun mơn cao, hịa đồng, vui vẻ DANH MỤC TÀI LIỆU THAM KHẢO [1] https://stackoverflow.com/ [2] https://vi.wikipedia.org/wiki/ [3] https://nodejs.org/ [4] https://nextjs.org/ [5] https://reactjs.org/ [6] https://ant.design/ [7] https://shopify.dev/ [8] Tài liệu nội dự án Website GENKIN công ty GENKIN