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

Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của nhóm trainer, nhóm thực tập chúng em đã tiếp thu được những kiến thức quan trọng để có thể tự xây dựng trang được giao d

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 7 năm 2020

LỜI MỞ ĐẦU Ngày này chúng ta đang được sống trong kỷ nguyên của tin học nhờ sự vượt bậc,

sự bùng nổ mạnh mẽ của công nghệ thông tin Công nghệ thông tin không chỉ dừng lại ở mục đích phục vụ cho khoa học kỹ thuật mà đi sâu vào đời sống, chính 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 con người Công nghệ thông tin ngày càng khẳng định được tính hữu dụng và sức mạnh trong mọi phương diện, mọi ngành nghề của cuộc sống, nhất là trong thời đại kinh tế thị trường như bây giờ

Đi kèm theo đó, các hệ thống website cũng phát triển không ngừng với đủ các 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 một trang web có sức sống bền lâu thì bản thân nó phải mang lại lợi ích cho nhiều người Giao diện bắt mắt là yếu tố quan trọng để giữ chân người xem lại trang web của mình Và Vue là frontend framework giúp chúng ta thiết kế web một cách dễ dàng và chuyên nghiệp hơn

Sau ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế Cũng như muốn tham gia xây dựng những ứng dụng web một cách chuyên nghiệp Nên

em đã chọn TVN Group một công ty trẻ và chuyên nghiệp để thực hiện dự định này

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ó cơ hội được thực tập tại công ty

Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của nhóm trainer, nhóm thực tập chúng em đã tiếp thu được những kiến thức quan trọng để có thể tự xây dựng trang được giao diện cho trang web công ty bằng Vuejs Chân thành cảm ơn các anh chị trong nhóm trainer đã bỏ ra 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 này

Đặc biệt cảm ơn anh Tuấn và anh Thông đã training front-end, hướng dẫn, giúp

đỡ cho em tận tình cả những khó khăn trong công việc, và những vấn đề gặp phải khi làm thực tế

Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điều kiện em làm bài báo cáo này

Trần Ngọc Hưng Thành phố HCM, ngày 23 tháng 7 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 6

1 Giới thiệu công ty TVN group 6

2 Sản phẩm của công ty 6

CHƯƠNG 2: NỘI DUNG THỰC TẬP 8

1 Tìm hiểu công ty và các kỹ năng cơ bản 8

2 Nghiên cứu kỹ thuật 8

2.1 Công cụ làm việc 8

2.2 Tìm hiểu về VueJS 9

2.3 Tìm hiểu về Element UI 10

2.4 Nghiệp vụ công ty 11

3 Thực hiện Project 12

4 Lịch làm việc 12

CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG THỰC TẾ 13

1 Giới thiệu về Project 13

2 Thực hiện: 16

3 Kế hoạch: 16

TÀI LIỆU THAM KHẢO 18

CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP

1 Giới thiệu công ty TVN group

Công ty TNHH TVN Group được thành lập vào năm 2018 và đã có những phát triển không ngừng trong ngành thương mại điện tử Công ty được thành lập bởi anh Vũ Minh Tiến và theo quyết định số 0315022712 do sở kế hoạch và đâu tư thành phố Hồ Chí Minh cấp

TVN đang dần trở thành một công ty lớn trong lĩnh vực E-commerce Đối tượng và nhóm khách hàng chủ yếu là đến từ các nước Âu mỹ Với đội ngũ developer có kinh nghiệm lâu năm trong việc xây dựng hệ thống thì TVN đang tự tạo ra được sản phẩm E-commerce cho riêng mình và đem lại cho khách hàng những trải nghiệm tốt hơn khi sử dụng

2 Sản phẩm của công ty

Hiện tại công ty đang sử dụng nền tảng của shopify và đang trong quá trình xây dựng lại hệ thống thương mại điện tử cho riêng bản thân của công ty ở phía clients lẫn admin dựa trên nền tảng của shopify Hiện tại sản phẩm của công ty đã được release ra bản beta

và đang trong quá trình hoà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 được đào tạo về lập trình ở front-end, đồng thời giúp rèn luyện cho sinh viên những kỹ năng mềm như làm việc nhóm, thuyết trình, giao tiếp Tại công ty, sinh viên có cơ hội được học tập, khám phá và làm việc trong một môi trường phát triển ứng dụng e-commerce chuyên nghiệp

1 Tìm hiểu công ty và các kỹ năng cơ bản

Thời gian : 1 ngày

Nội dung : Giới thiệu về công ty, cách tổ chức của công ty

Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và 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ủa công ty

Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng slack để làm việc

Kết quả : Hiểu thêm về công ty TVN, quá trình thành lập và phát triển Có thêm các

kỹ năng về việc sử dụng các công cụ ở công ty, như dùng slack để trao đổi với mọi người

2 Nghiên cứu kỹ thuật

2.1 Công cụ làm việc

Thời gian : 3 ngày

Nội dung : Tìm hiểu và cài đặt các công cụ cần thiết cho quá 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 về các công cụ sẽ giúp ích cho trong công việc sau này Một số phần mềm trong đó có Trello – sử dụng trong việc làm nhóm và nhận task từ leader Gitlab – dùng để lưu trữ source code VSCode để có thể code, …

Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.

Kết quả : Lập trình sử dụng các công cụ miễn phí, giúp dễ dàng kết hợp các công cụ

với nhau

2.2 Tìm hiểu về VueJS

Thời gian : 21 ngày (3 tuần)

Nội dung : Làm quen với framework Vuejs.

- Vì đã có trước những kiến thức cơ bản về html, css, javascript nên khi vào thực tập đã được tìm hiểu ngày vào framework mà công ty đang sử dụng để xây dựng sản phẩm

- Tự tìm hiểu và được training cho những kiến thức cơ bản về vuejs như:

o Đối tượng trong vuejs

o Cú pháp template

o Vòng đời

o Component

o State, Props, Slot

o Event, action

o Sự giống nhau và khác nhau giữa methods và computed

o Cách dùng Vuex để quản lý state

o Cách sử dụng Vue router

o Tìm hiểu về server side render: sử dụng nuxt js

o …

- Tìm hiểu về firebase

o Tìm hiểu khái niệm và cách tạo tài khoản firebase

o Tìm hiểu các tính năng chính của firebase: Realtime database,

Authencation, Firebase cloud messaaging, …

o Tìm hiểu cách deloy ứng dụng lên firebase

o …

Thực hiện :

- Tham gia đầy đủ các buổi làm và training của công ty

- Làm các bài thực hành ở mỗi kiến thức đã học

- Hệ thống hóa lại kiến thức đã học bằng cách sử dụng xmind, vẽ sơ đồ tư duy

- Ứng dụng làm demo

Kết quả :

- Nâng cao kỹ năng lập trình web

- Giúp hiểu rõ về vuejs, framework mới ra đời và đang phát triển, được công ty lựa chọn để xây dựng sản phẩm

- Hệ thống lại được những kiến thức đã được học trước đó

- Biết thêm một số quy tắc trong việc viết code, làm thế nào để code clean hơn

- Đã tự tạo cho mình được ứng dụng demo viết bằng vuejs là Todo list

2.3 Tìm hiểu về Element UI

Thời gian : 7 ngày (1 tuần)

Nội dung : Làm quen với cách sử dụng UI framework – Element UI và API

Storefront của Shopify

- Tìm hiểu về framework

o Cách cài đặt

o Tìm hiểu cách sử dụng cũng như cách tùy chỉnh các component của

framework theo nhu cầu sử dụng

- Tìm hiểu về hệ thống API của shopify

o Tìm hiểu Storefront API trong document của shopify

Thực hiện :

- Tham gia đầy đủ các buổi làm và training của công ty

- Làm các bài thực hành ở mỗi kiến thức đã học

- Hệ thống hóa lại kiến thức đã học bằng cách sử dụng xmind, vẽ sơ đồ tư duy

- Ứng dụng làm demo

Kết quả :

- Hiểu và nắm được những kiến thức cơ bản về những thành phần cần có để xây dựng website công ty

- Xây dựng được ứng dụng demo là Todo list và đã deloy lên firebase

2.4 Nghiệp vụ công ty

Thời gian : 1 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 khi hoàn thành task, techlead sẽ bắt đầu review về mặt kỹ thuật (chuẩn code, logic,…) Lập trình viên phải tự test mới được review

- Feedback: nếu có lỗi về mặt kỹ thuật, techlead sẽ đưa task vào trang thái feedback

và 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 khi được chấp thuận, code của bạn sẽ được apply vào môi trường development Lúc này, bạn cũng như các tester sẽ tiến hành test Nếu xảy

ra lỗi thì 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 ai được phép chỉnh sửa gì trên môi trường này Bình thường các code trên development sẽ replicate từ staging về theo đợt

- Production: môi trường người dùng

Kết quả :

- Hiểu rõ quy trình làm việc công ty

- Nắm được cách quản lý và deloy code với gitlab

3 Thực hiện Project

Sau hơn 4 tuần được training và thực hành thì thực tập sinh đã nắm được kiên thức

cơ bản về VueJS và một 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ế là website thương mại điện tử của công ty

Chi tiết sẽ được trình bày ở phần sau

4 Lịch làm việc

Tuầ

Người hướng dẫn

Mức độ hoàn thành

Nhận xét của người hướng dẫn

1

- Tìm hiểu về công ty, cách

tổ chức của công ty

- Làm quen với các công cụ

làm việc trong công ty

Anh Tuấn

2-3-4

- Tìm hiểu về VueJS

- Áp dụng kiến thức vừa học

để xây dựng ứng dụng Todo list

Anh Tuấn, Anh Thông

5 - Tìm hiểu Element UI

- Làm quen với Shopify API

Anh Tuấn

6 - Làm quen với trello, setup Anh Tuấn

môi trường để làm việc với

dự án của công ty

- Quy trình làm việc

7-8 Tiến hành xây dựng ứng dụng

thực tế

Anh Tuấn, Anh Hải

CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG THỰC TẾ

1 Giới thiệu về Project

Vì công ty đang thuê sử dụng nền tảng của shopify, cho nên nhu cầu của công ty hiện tại là tạo ra một sản phẩm do chính công ty xây dựng và không cần phải đi thuê từ nền 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 trong 2 tuần cuối cùng nhóm thực tập chỉ đủ dể xây dựng giao diện cho ứng dụng của công ty Về phía UI thì chỉ cần xây dựng lại dựa trên layout đã có sẵn ở shopify và tối ưu hóa sao cho website chạy nhanh nhất có thể, tăng trải nghiệm người dùng Còn về phía server thì do không đủ thời gian cũng như chưa

có kinh nghiệm nhiều nên chỉ dừng lại ở mức tìm hiểu và sử dụng lại những api đã

có sẵn từ shopify

Anh Tuấn leader quyết định chọn nuxt js để xây dựng ứng dụng, vì nuxt js là server side render nên sẽ tốt cho việc SEO những website E-commerce như thế này

Một số hình ảnh của project:

Một số giao diện trang admin

2 Thực hiện:

Để hoàn thành một phần project này thì nhóm thực hiện bao gồm em cùng với 2 bạn khác là:

- Nguyễn Văn Hội

- Nguyễn Hữu Lai

Đồng thời là sự giúp đỡ nhiệt tình của anh Tuấn và anh Hải

3 Kế hoạch:

Giai đoạn 1:

- Xây dựng UI cho tất cả các page

- Tạo các component dùng chung

Kết quả: Cơ bản hoàn thành giao diện cho website

Giai đoạn 2:

- Sử dụng apollo graphql để lấy dữ liệu từ shopify về

- Đổ dữ liệu vào các component đã xây dựng

- Sử dụng vuex để quản lý các state

- Tạo các function để transform dữ liệu trả về

Kết quả: Hoàn thành những tính năng trên và page hiển thị đúng dữ liệu từ shopify trả về

Giai đoạn 3:

- Deloy ứng dụng lên host, sử dụng CI/CD của gitlab

- Fix lỗi phát sinh trong quá trình chạy thử nghiệm

Kết quả: Hoàn thành việc triển khai website lên production, nhưng còn phát sinh nhiều lỗi và không thể khác phục được hết trong thời gian thực tập

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/