báo cáo thực tập xây dựng ECOMMERCE FRONT END

1 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP XÂY DỰNG ECOMMERCE FRONT-END Công ty thực tập : TVN GROUP Người phụ trách : Nguyễn Quốc Tuấn Thực tập sinh : Nguyễn Văn Hội LỜI MỞ ĐẦU Ngày với phát triển không ngừng ngành công nghệ thông tin mạng internet tạo bước tiến lớn ngành bán hàng trực tuyến Có thể nói, việc bán hàng trực tuyến dần thay cho hình thức kinh doanh cũ đặc biệt chiếm ưu Vì việc thiết kế xây dựng website E-commerce khơng cịn nhu cầu doanh nghiệp mà tất người Ứng dụng E-comerce phát triển Việt Nam địi hỏi nguồn nhân lực lớn để xây dựng nên chúng Vì lý em định chọn lập trình web định hướng sau Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế Cũng muốn tham gia xây dựng ứng dụng E-comerce cách chuyên nghiệp Nên em chọn TVN Group công ty trẻ chuyên nghiệp để thực dự định 3 LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TVN Group 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 nhóm trainer, nhóm thực tập chúng em tiếp thu kiến thức quan trọng để tự xây dựng trang giao diện cho trang web công ty vuejs Chân thành cảm ơn anh chị nhóm trainer bỏ nhiều thời gian,công sức để hướng dẫn chúng em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Tuấn anh Thông training front-end, hướng dẫn, giúp đỡ cho em tận tình khó khăn cơng việc, vấn đề gặp phải làm thực tế đồng thời cảm ơn anh Hải training backend cho em, giúp em tự xây server demo đơn giản 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 Nguyễn Văn Hội Thành phố HCM, ngày 20 tháng năm 2020 NHẬN XÉT CỦA KHOA ……………………………………………………………………………………………………………… ………………………………………………….…………………………………………………………… …………………………………………………………………………………………………….………… ……………………………………………………………………………………………………………… ………………………………….…………………………………………………………………………… …………………………………………………………………………………….………………………… ……………………………………………………………………………………………………………… ……………………….……………………………………………………………………………………… ………………………………………………………………………….…………………………………… ……………………………………………………………………………………………………………… …………….………………………………………………………………………………………………… ……………………………………………………………….……………………………………………… ……………………………………………………………………………………………………………… ….…………………………………………………………………………………………………………… …………………………………………………….………………………………………………………… ……………………………………………………………………………………………………….……… ……………………………………………………………………………………………………………… ………………………………………….…………………………………………………………………… …………………………………………………………………………………………….………………… ……………………………………………………………………………………………………………… ……………………………….……………………………………………………………………………… ………………………………………………………………………………….…………………………… ……………………………………………………………………………………………………………… ……………………………….……………………………………………………………………………… ………………………………………………………………………………….…………………………… ……………………………………………………………………………………………………………… ……………………………….……………………………………………………………………………… ………………………………………………………………………………….…………………………… ……………………………………………………………………………………………………………… ……………………………….……………………………………………………………………………… ………………………………………………………………………………….…………………………… Nội dung LỜI MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT CỦA KHOA CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP Giới thiệu công ty TVN group Sản phẩm công ty CHƯƠNG 2: NỘI DUNG THỰC TẬP Tìm hiểu cơng ty kỹ Nghiên cứu kỹ thuật 2.1 Công cụ làm việc 2.2 Front - end 2.3 Back-end 10 2.4 Nghiệp vụ công ty 12 Thực Project 13 Lịch làm việc 13 CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG THỰC TẾ 15 Giới thiệu Project: 15 Thực hiện: 17 Kế hoạch: 17 TÀI LIỆU THAM KHẢO 19 CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP Giới thiệu công ty TVN group Công ty TNHH TVN Group thành lập vào năm 2018 có phát triển không ngừng ngành thương mại điện tử Công ty thành lập anh Vũ Minh Tiến theo định số 0315022712 sở kế hoạch đâu tư thành phố Hồ Chí Minh cấp TVN dần trở thành công ty lớn lĩnh vực E-commerce Đối tượng nhóm khách hàng chủ yếu đến từ nước Âu mỹ Với đội ngũ developer có kinh nghiệm lâu năm việc xây dựng hệ thống TVN tự tạo sản phẩm Ecommerce cho riêng đem lại cho khách hàng trải nghiệm tốt sử dụng Sản phẩm công ty Hiện công ty sử dụng tảng shopify trình xây dựng lại hệ thống thương mại điện tử cho riêng thân cơng ty phía clients lẫn admin dựa tảng shopify Hiện sản phẩm công ty release beta q trình hồn thiện Một số link tham khảo sản phẩm: - https://www.1sttheworld.com - https://www alohawaiians.com - https://www polynesianprint.com - https://www 1stscotland.com - … CHƯƠNG 2: NỘI DUNG THỰC TẬP Đợt thực tập với chủ đề “ Lập trình Fullstack Javascript Nodejs – Vuejs” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình front-end lẫn back-end, đồng thời giúp rèn luyện cho sinh viên kỹ mềm làm việc nhóm, thuyết trình, giao tiếp 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 phát triển ứng dụng e-commerce chuyên nghiệp Tìm hiểu công ty kỹ Thời gian : ngày Nội dung : Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu cơng ty, q trình thành lập phát triên (như nhắc đến trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức cơng ty Ngồi ra, thực tập sinh giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng slack để làm việc Kết : Hiểu thêm công ty TVN, q trình thành lập phát triển Có thêm kỹ việc sử dụng công cụ công ty, dùng slack để trao đổi với người Nghiên cứu kỹ thuật 2.1 Công cụ làm việc Thời gian : ngày Nội dung : Tìm hiểu cài đặt cơng cụ cần thiết cho trình làm việc Trong thời gian này, supervisor hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho cơng việc sau Một số phần mềm có Trello – sử dụng việc làm nhóm nhận task từ leader Gitlab – dùng để lưu trữ source code Vscode để code số cơng cụ nâng cao Docker, … Thực : Thực hành sử dụng phần mềm nêu Kết : Lập trình sử dụng cơng cụ miễn phí, giúp dễ dàng kết hợp cơng cụ với 2.2 Front - end Thời gian : 14 ngày (2 tuần) Nội dung : Làm quen với framework Vuejs - Vì có trước kiến thức html, css, javascript nên vào thực tập tìm hiểu ngày vào framework mà cơng ty sử dụng để xây dựng sản phẩm - Tự tìm hiểu training cho kiến thức vuejs như: o Đối tượng vuejs o Cú pháp template o Vòng đời o Component o State, Props, Slot o Event, action o Sự giống khác methods computed o Cách dùng Vuex để quản lý state o Cách sử dụng Vue router o Tìm hiểu server side render: sử dụng nuxt js o … Thực : - Tham gia đầy đủ buổi làm training công ty - Làm thực hành kiến thức học - Hệ thống hóa lại kiến thức học cách sử dụng xmind, vẽ sơ đồ tư - Ứng dụng làm demo 10 Kết : - Nâng cao kỹ lập trình web - Giúp hiểu rõ vuejs, framework đời phát triển, công ty lựa chọn để xây dựng sản phẩm - Hệ thống lại kiến thức học trước - Biết thêm số quy tắc việc viết code, làm để code clean - Đã tự tạo cho ứng dụng demo viết vuejs Todo list Wallet Manager 2.3 Back-end Thời gian : 21 ngày (3 tuần) Nội dung : Làm quen với Nodejs với Koa, Graphql, PostgreSQL hệ thống api shopify - Tìm hiểu nodejs o Kiến trúc nodejs o Tìm hiểu moudle o Tìm hiểu npm o Cách sử dụng callback, event loop, eventEmmiter o Khái niệm Buffer, Stream o Cách đọc ghi file o … - Tìm hiểu framework Koa o Cách cài đặt o Tìm hiểu tính bật Koa so sánh Koa với framework khác express, Hapi, Meteor, o Tìm hiểu Context để handle phần lõi application o Tìm hiểu cách xử lý request trả respone cho client 11 o Tìm hiểu thư viện middleware Koa như: Validatation request, session manager, log development, … đặc biệt tìm hiểu passport để ứng dụng giải vấn đề auth, login, hay service bên thứ google, facebook, … o … - Tìm hiểu PostgreSQL o Cách cài đặt kết nối o Tìm hiểu syntax o Tìm hiểu cách viết câu lệnh query như: Select, Insert, Update, Delete, Join, … o … - Tìm hiểu Graphql o Tìm hiểu khái niệm, syntax thành phần bản, tính trội Graphql o So sánh giống khác Rest Api graphql o Ưu nhược điểm sử dụng graphql o Tìm hiểu cấu trúc graphql: schema, queries, resolvers - Tìm hiểu firebase o Tìm hiểu khái niệm cách tạo tài khoản firebase o Tìm hiểu tính firebase: Realtime database, Authencation, Firebase cloud messaaging, … o Tìm hiểu cách deloy ứng dụng lên firebase o … - Tìm hiểu heroku o Tìm hiểu khái niệm cách hoạt động heroku o Tìm hiểu tính heroku o Tìm hiểu cách deloy đơn giản server nodejs - Tìm hiểu hệ thống API shopify o Tìm hiểu Rest Api có document shopify 12 o Tìm hiểu Graphql có document shopify Thực : - Tham gia đầy đủ buổi làm training công ty - Làm thực hành kiến thức học - Hệ thống hóa lại kiến thức học cách sử dụng xmind, vẽ sơ đồ tư - Ứng dụng làm demo Kết : - Hiểu nắm kiến thức thành phần phía back-end u cầu cần có để xây dựng website công ty - Xây dựng ứng dụng demo Todo list deloy lên server miễn phí heroku từ kiến thức tìm hiểu 2.4 Nghiệp vụ cơng ty Thời gian : ngày Nội dung : Tìm hiểu quản lý dự án với trello, thao tác với git, development process Review -> Feedback -> Development -> Staging -> Production - Review: sau hoàn thành task, techlead bắt đầu review mặt kỹ thuật (chuẩn code, logic,…) Lập trình viên phải tự test review - Feedback: có lỗi mặt kỹ thuật, techlead đưa task vào trang thái feedback lập trình viên phải sửa feedback sau đưa lại cột review chờ feedback lại từ tech lead - Development: sau chấp thuận, code bạn apply vào môi trường development Lúc này, bạn tester tiến hành test Nếu xảy lỗi bạn phải fix lỗi sau đưa task lại trạng thái review - Staging: Là môi trường trung lập, không phép chỉnh sửa mơi trường Bình thường code development replicate từ staging theo đợt 13 - Production: môi trường người dùng Kết : - Hiểu rõ quy trình làm việc cơng ty - Nắm cách quản lý deloy code với gitlab Thực Project Sau tuần training thực hành thực tập sinh nắm kiên thức phía front-end lẫn back-end Để chuẩn bị bước vào xây dựng ứng dụng thực tế website thương mại điện tử công ty Chi tiết trình bày phần sau Lịch làm việc Tuần Cơng việc - Người Mức độ hồn hướng dẫn thành Tìm hiểu cơng Anh Tuấn ty, cách tổ chức công ty - Làm quen với công cụ làm việc công ty 2-3 4-5-6 Lập trình Front-end Tuấn, Anh Thơng Lập trình Back-end - Anh Làm quen Anh Hải với Anh Tuấn trello, setup môi trường để làm việc Nhận xét người hướng dẫn 14 với dự án công ty 7-8 Quy trình làm việc Tiến hành xây dựng Anh ứng dụng thực tế Tuấn, Anh Hải 15 CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG THỰC TẾ Giới thiệu Project: Vì cơng ty th sử dụng tảng shopify, nhu cầu công ty tạo sản phẩm cơng ty xây dựng không cần phải thuê từ tảng khác giúp tiết kiệm chi phí cho cơng ty Vì thời gian thực tập có hạn nên tuần cuối nhóm thực tập đủ dể xây dựng giao diện cho ứng dụng công ty Về phía UI cần xây dựng lại dựa layout có sẵn shopify tối ưu hóa cho website chạy nhanh có thể, tăng trải nghiệm người dùng Cịn phía server khơng đủ thời gian chưa có kinh nghiệm nhiều nên dừng lại mức tìm hiểu sử dụng lại api có sẵn từ shopify Anh Tuấn leader định chọn nuxt js để xây dựng UI, nuxt js server side render nên tốt cho việc SEO website E-commerce Đồng thời công cụ dùng chung kể đến Graphql, Google Tag, Facebook pixel, … Một số hình ảnh project: 16 17 Thực hiện: Để hồn thành phần project nhóm thực bao gồm em với bạn khác là: - Trần Ngọc Hưng - Nguyễn Hữu Lai Đồng thời giúp đỡ nhiệt tình leader anh Tuấn anh Hải Kế hoạch: Giai đoạn 1: - Xây dựng UI cho tất page - Tạo component dùng chung Kết quả: Cơ hoàn thành giao diện cho website Giai đoạn 2: - Sử dụng apllo graphql để lấy liệu từ shopify - Đổ liệu vào component xây dựng 18 - Sử dụng vuex để quản lý state - Tạo function để transform liệu trả Kết quả: Hồn thành tính page hiển thị liệu từ shopify trả Giai đoạn 3: - Deloy ứng dụng lên host, sử dụng CI, CD gitlab - Fix lỗi phát sinh q trình chạy thử nghiệm Kết quả: Hồn thành việc triển khai website lên production, phát sinh nhiều lỗi khác phục hết thời gian thực tập 19 TÀI LIỆU THAM KHẢO Document Shopify: https://shopify.dev/docs Document Vuejs: https://vuejs.org/v2/guide/ Document Nuxtjs: https://nuxtjs.org/guide/installation Document vue apollo graphql: https://apollo.vuejs.org/guide/ Document Graphql: https://graphql.org/ Document Koa: https://koajs.com/ ... quản lý deloy code với gitlab Thực Project Sau tuần training thực hành thực tập sinh nắm kiên thức phía front- end lẫn back -end Để chuẩn bị bước vào xây dựng ứng dụng thực tế website thương mại điện... 2: NỘI DUNG THỰC TẬP Đợt thực tập với chủ đề “ Lập trình Fullstack Javascript Nodejs – Vuejs” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình front- end lẫn back -end, đồng thời... hành xây dựng Anh ứng dụng thực tế Tuấn, Anh Hải 15 CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG THỰC TẾ Giới thiệu Project: Vì cơng ty thuê sử dụng tảng shopify, nhu cầu công ty tạo sản phẩm cơng ty xây dựng