Báo cáo thực tập lập trình FRONTEND với VUEJS

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 LẬP TRÌNH FRONTEND VỚI VUEJS 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: Trần Ngọc Hưng TP Hồ Chí Minh, tháng năm 2020 LỜI MỞ ĐẦU Ngày sống kỷ nguyên tin học nhờ vượt bậc, bùng nổ mạnh mẽ công nghệ thông tin Công nghệ thơng tin khơng dừng lại mục đích phục vụ cho khoa học kỹ thuật mà sâu vào đời sống, trị, kinh tế, xã hội, trở nên thân thiện , gần gũi, mang lại nhiều lợi ích cho người Công nghệ thông tin ngày khẳng định tính hữu dụng sức mạnh phương diện, ngành nghề sống, thời đại kinh tế thị trường Đi kèm theo đó, hệ thống website phát triển khơng ngừng với đủ lĩnh vực: văn hóa, thời sự, khoa học công nghệ, làm đẹp, nấu ăn, thể thao, … Tuy nhiên để tạo trang web có sức sống bền lâu thân phải mang lại lợi ích cho nhiều người Giao diện bắt mắt yếu tố quan trọng để giữ chân người xem lại trang web Và Vue frontend framework giúp thiết kế web cách dễ dàng chuyên nghiệp 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 web 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 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ế 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 Trần Ngọc Hưng Thành phố HCM, ngày 23 tháng năm 2020 NHẬN XÉT CỦA KHOA ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… …………………………………………… ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… …………………………… ……………………………… ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… …………………………………………………………… ……………………………………………………………………………………………………………… ………………………………………………… ……………………………………………………………………………………………………………… …………………………………………………………… ……………………………………………………………………………………………………………… ………………………………………………….…………………………… MỤC LỤC 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 https://www.1stnewzealand.com/ … CHƯƠNG 2: NỘI DUNG THỰC TẬP Đợt thực tập với chủ đề “ Lập trình Frontend với Vuejs” nhằm mục đích giúp sinh viên thực tập đào tạo lập trình front-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 chun 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 cịn 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 q 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, … 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 Tìm hiểu VueJS Thời gian : 21 ngày (3 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 … 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 … 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 : - 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 2.3 Tìm hiểu Element UI Thời gian : ngày (1 tuần) Nội dung : Làm quen với cách sử dụng UI framework – Element UI API Storefront Shopify - - Tìm hiểu framework o Cách cài đặt o Tìm hiểu cách sử dụng cách tùy chỉnh component framework theo nhu cầu sử dụng Tìm hiểu hệ thống API shopify o Tìm hiểu Storefront API 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 cần có để xây - dựng website công ty Xây dựng ứng dụng demo Todo list deloy lên firebase 10 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 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 VueJS số kiến thức cần thiết Để 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 Nhận xét 11 hướng dẫn - Tìm hiểu cơng ty, cách Anh Tuấn - tổ chức công ty Làm quen với công cụ - 2-3-4 thành người hướng dẫn làm việc cơng ty Tìm hiểu VueJS Anh Tuấn, Áp dụng kiến thức vừa học Anh Thông để xây dựng ứng dụng Todo list - Tìm hiểu Element UI Anh Tuấn - Làm quen với Shopify API - Làm quen với trello, setup Anh Tuấn môi trường để làm việc với dự án cơng ty Quy trình làm việc Tiến hành xây dựng ứng dụng Anh Tuấn, - 7-8 thực tế Anh Hải 12 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 ứng dụng, nuxt js server side render nên tốt cho việc SEO website E-commerce Một số hình ảnh project: 13 14 Một số giao diện trang admin 15 Thực hiện: Để hoàn thành phần project nhóm thực bao gồm em với bạn khác là: - Nguyễn Văn Hội Nguyễn Hữu Lai Đồng thời giúp đỡ nhiệt tình 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 apollo graphql để lấy liệu từ shopify Đổ liệu vào component xây dựng Sử dụng vuex để quản lý state Tạo function để transform liệu trả 16 Kết quả: Hoà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 trình chạy thử nghiệm Kết quả: Hoàn thành việc triển khai website lên production, cịn phát sinh nhiều lỗi khơng thể khác phục hết thời gian thực tập TÀI LIỆU THAM KHẢO Document Shopify: 17 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/ 18 ... https://www.1stnewzealand.com/ … CHƯƠNG 2: NỘI DUNG THỰC TẬP Đợt thực tập với chủ đề “ Lập trình Frontend với Vuejs? ?? nhằm mục đích giúp sinh viên thực tập đào tạo lập trình front-end, đồng thời giúp rèn luyện... code, … 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 Tìm hiểu VueJS Thời gian : 21 ngày (3 tuần) Nội dung : Làm quen với framework... 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 VueJS số kiến thức cần thiết Để chuẩn bị bước vào xây dựng ứng dụng thực tế website thương