báo cáo thực tập lập trình WEB FRONTEND với VUEJ

Ngành phát triển giao diện ứng dụng web được sinh ra là do nhu cầu sử dụng trình duyệtweb của mọi người và đặc biệt là giới trẻ bằng những thiết bị công nghệ mới nhất.. Đặc biệt cảm ơn a

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO THỰC TẬP

LẬP TRÌNH WEB FRONTEND VỚI VUEJS

Công ty thực tập :Công ty cổ phần đầu tư và phát triển công nghệ TECHUP

Người phụ trách: Nguyễn Lê Anh Đào

Thực tập sinh : 16521390 – Dương Trí Tuệ

TP Hồ Chí Minh, tháng 1 năm 2021

LỜI MỞ ĐẦU

Ngày nay,việc thiết kế giao diện cho một website là một bộ phận không thể thiếu củangành công nghiệp phần mềm Với tốc độ phát triển vô cùng mạnh mẽ, ngành phát triển giaodiện web đã và đang là nhân tố kích thích sự phát triển của công nghệ thông tin thế giới, cả vềphần cứng và phần mềm

Cùng với xu thế phát triển của thế giới, Việt Nam cũng không phải ngoại lệ Ngành côngnghiệp phát triển giao diện người dùng Việt Nam đã và đang phát triển mạnh mẽ, để hòa nhậpvới những công ty hàng đầu về giao diện người dùng trên thế giới Bên cạnh những công ty pháttriển giao diện web trẻ tuổi trong nước, những công ty phát triển web lớn trên thế giới cũng gianhập vào thị trường Việt Nam, góp phần rất lớn vào sự phát triển tích cực của ngành game Việt

Ngành phát triển giao diện ứng dụng web được sinh ra là do nhu cầu sử dụng trình duyệtweb của mọi người và đặc biệt là giới trẻ bằng những thiết bị công nghệ mới nhất Và cũngchính giới trẻ sẽ là nguồn nhân lực quan trọng cho việc phát triển của ngành phát triển ứng dụnggiao diện web sau này Vì lý do này, em quyết định chọn lập trình web frontend làm định hướngcho việc học tập của mình

Sau bốn 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 được tham gia làm giao diện ứng dụng web trong một môi trường chuyên nghiệp Vì vậy,

em quyết định chọn Công ty cổ phần đầu tư và phát triển công nghệ TECHUP - một môitrường lý tưởng, hiện đại, chuyên nghiệp - là nơi sẽ giúp em thực hiện được dự định này

Đặc biệt cảm ơn anh Phú, đã training về VueJS, hướng dẫn, giúp đỡ cho chúng em tận

tình cả những khó khăn trong công việc, đến những khó khăn việc làm quen với môi trườngmới, hỗ trợ chúng em rất nhiều về các vấn đề kỹ thuật tạo giao diện của website trong quá trìnhlàm giao diện webssite; cảm ơn and Từ Quốc Hưng, đã training HTML/CSS nâng cao; cám ơn

chị Lâm Anh đã hỗ trợ về các quy định và cách thức làm việc của công ty,; cảm ơn anh Nguyễn

Lê Anh Đào, đã chỉ dẫn em về cách làm báo cáo, lên kế hoạch, những kỹ năng không thể thiếu.

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ềukiện em làm bài báo cáo này

Dương Trí TuệTP.Hồ Chí Minh, ngày 10/1/2021

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 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 8

3 Kết quả đạt được 16

Chương 1: Giới thiệu công ty thực tập

1 Giới thiệu công ty TECHUP

Công ty cổ phần techup là đối tác giải pháp phần mềm cho các khởi nghiệp trên thiết

bị di động và hệ thống kinh doanh doanh nghiệp vượt trội

Trong gần 10 năm gia công phần mềm CNTT, chúng tôi đã có được kinh nghiệm trong nhiều loại công nghệ, ngành và loại ứng dụng

Chúng tôi cung cấp quan hệ đối tác bền vững và ổn định Chúng tôi có những khách hàng đã làm việc với chúng tôi kể từ khi công ty được thành lập

Chúng tôi nhanh nhẹn và sẵn sàng sắp xếp dựa trên tính đặc thù của dự án, vì vậy nhucầu của đối tác luôn được đáp ứng với chất lượng và nguồn lực tốt nhất Chúng tôi biết cả nghệ thuật kết hợp con người và khoa học công nghệ

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

Lĩnh vực chuyên gia của chúng tôi

Chúng tôi đã làm việc trong các ngành công nghiệp cạnh tranh của mình với nhiều sản phẩm được lưu trữ theo yêu cầu của khách hàng

● Phương tiện & xuất bản:

Quản lý và phân phối nội dung

Các giải pháp để xây dựng ứng dụng của bạn một cách nhanh chóng và tiết kiệm chi phí

Mạng xã hội

Mạng xã hội có thể thay đổi thế giới

Các giải pháp để thay đổi doanh nghiệp của bạn đi theo hướng đổi mới

Thời gian thực & phim

Thời gian thực đang là công nghệ thịnh hành

Giải pháp để phát video trực tiếp tốt nhất trong các ứng dụng của bạn

Du lịch & sức khỏe

Giải pháp cho ngành thương mại điện tử, bán lẻ và phân phối.

Tài chính & bảo hiểm

Quản lý tài sản Chợ Thủ đô

Các giải pháp giúp các dịch vụ tài chính được quản lý nhanh chóng trên thiết bị di động

Chương 2: Nội dung thực tập

Đợt thực tập với chủ đề “Thiết kế giao diện webssite” nhằm mục đích giúp sinh viênthực tập được đào tạo toàn diện về lập trình giao diện webssite, đồng thời rèn luyệ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ọctập, khám phá và làm việc trong một môi trường phát triển game chuyên nghiệp

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

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ủacô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 tynhư thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong côngviệc…

Kết quả : Hiểu thêm về công ty TECHUP, 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 email trong công việc, làm việc có kế hoạch, có kỷ luật, có tráchnhiệm hơn

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

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

Thời gian : 4 ngày

Nội dung : Tìm hiểu về các công cụ sẽ được sử dụng trong 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 số đó như Slack

-sử dụng trong làm việc nhóm, viết báo cáo cuối ngày, Visual Studio Code – trìnhsoạn thảo 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 : 5 ngày (1 tuần)

Nội dung : Được training về các kỹ thuật lập trình frontend với Vuejs nâng cao,

những kiến thức quan trọng cho việc tối ưu code trên Visual Studio Code

- Lập trình hướng đối tượng

Các kiến thức cơ bản về lập trình hướng đối tượng như khái niêm, các đặc tínhnhư tính kế thừa, tính đóng gói, tính ảo hóa, tính đa hình Ngoài ra, thực tập sinhcòn được hướng dẫn về cách thiết kế lớp cho các đối tượng game.

- Đặt tên biến :

Đặt tên biến là môt phần rất quan trọng trong lập trình web frontend, vì cần phải

sử dụng tên biến để dễ dàng thao tác kết nối với team backend

- Tối ưu code

Thực tập sinh sẽ được hướng dẫn về cách tối ưu code, quản lý bộ nhớ sao cho tối

ưu, tránh rò rỉ bộ nhớ, một trong những phần rất quan trọng trong lập trình webfrontend

Thực hiện :

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

- Làm các bài thực hành, kiểm tra về kiến thức đã học

Kết quả :

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

- Có được những kiến thức quan trọng cho việc lập trình web frontend sau này

- Ngoài ra còn được biết thêm một số quy tắc trong việc viết code sao cho đúngchuẩn, dễ đọc, dễ hiểu

2.3 Lập trình front end

Nội dung: Các kiến thức cơ bản về web frontend để làm ra một webssite đơn giản.

- Khái niệm cơ bản về HTML

HTML là chữ viết tắt của HyperText Markup Language, có nghĩa là ngôn ngữ đánh dấu siêu văn bản Nó dùng để định dạng bố cục, các thuộc tính liên quan đếncách hiển thị của một đoạn text và được hiển thị trên một chương trình đặc biệc ta

gọi là Browser Hiện nay có khá nhiều Browser như Firefox, Chrome, Cốc Cốc,

Tất cả Browser đều có điểm chung là giúp người dùng thao tác với website và nó đều có khả năng biên dịch những đoạn mã HTML, CSS và Javascript Ngoài ra, trainer còn cung cấp cho thực tập sinh những khái niệm cơ bản trong OpenGL như

hệ tọa độ 3D, vertex, pixel, fragment…, là những khái niệm rất cơ bản và quan trọng trong lập trình game 3D

Được anh traning thêm về các thuộc tính cần thiết nhất cho việc code giao diện của webssite

- Khái niệm về CSS.

CSS là viết tắt của Cascading Style Sheets Đây là một ngôn style sheet được sửdụng để mô tả giao diện và định dạng của một tài liệu viết bằng ngôn ngữ đánhdấu (markup) Nó cung cấp một tính năng bổ sung cho HTML Nó thường được

sử dụng với HTML để thay đổi phong cách của trang web và giao diện người

SCSS là một chương trình tiền xử lý CSS (CSS preprocessor) Nó giúp bạn viết

CSS theo cách của một ngôn ngữ lập trình, có cấu trúc rõ ràng, rành mạch, dễ pháttriển và bảo trì code hơn Ngoài ra nó có rất nhiều các thư viện hỗ trợ kèm theogiúp bạn viết code CSS một cách dễ dàng vào đơn giản hơn Có rất nhiều loạiCSS Preprocessor trong đó bao gồm SASS, Stylus hay LESS

SCSS giúp cho quá trình viết code trở nên minh bạch, dễ quản lí và dễ bảo trì hơn.Tiện lợi hơn khi có nhiều thành viên cùng thực hiện một dự án

- Khái niệm bootstrap

Bootstrap cho phép quá trình thiết kế website diễn ra nhanh chóng và dễ dàng hơndựa trên những thành tố cơ bản sẵn có như typography, forms, buttons, tables, grids, navigation, image carousels… Cùng Mắt Bão tìm hiểu tính năng và lợi ích

mang lại cho lập trình viên của Bootstrap là gì nhé!

Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo ra một mẫu webiste hoàn chỉnh Với các thuộc tính về giao diện được quy địnhsẵn như kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc

với framework này trong quá trình thiết kế giao diện website

- Khái niệm JavaScript

JavaScript là một ngôn ngữ lập trình của HTML và WEB Nó là nhẹ và được sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành của chúng cho phép Client-Side script tương tác với người sử dụng và tạo các trang web động Nó là một ngôn ngữ chương trình thông dịch với các khả năng hướng đối tượng

JavaScript được biết đến đầu tiên với tên Mocha, và sau đó là LiveScript, nhưng công ty Netscape đã đổi tên của nó thành JavaScript, bởi vì sự phổ biến như là một hiện tượng của Java lúc bấy giờ JavaScript xuất hiện lần đầu trong Netscape 2.0 năm 1995 với tên LiveScript Core đa năng của ngôn ngữ này đã được nhúng vào Netscape, IE, và các trình duyệt khác.

- Khái niệm VueJs

Vuejs được gọi tắt là Vue (được phát âm là /vjuː/, nó giống như từ view trong tiếng Anh) Vue.js là một framework rất linh động được dùng phổ biến để xây dựng nên các giao diện người dùng Hoàn toàn khác với các framework nguyên khối thì Vue thường sở hữu thiết kế từ đầu theo những hướng cho phép cũng như khuyến khích làm việc để phát triển dễ dàng hơn các ứng dụng theo từng bước một

Một khi đã phát triển lớp giao diện (view layer) thì người dùng chỉ cần sử dụng loại thư viện lõi của Vue Ngoài ra, nếu như bạn kết hợp với các kỹ thuật thiên hướng hiện đại thì Vue cũng có thể đáp ứng được dễ dàng mọi nhu cầu xây dựng ứng dụng của một trang với độ phức tạp cao hơn

- Khái niệm NodeJs

NodeJS là một nền tảng được xây dựng trên V8 JavaScript Engine – trìnhthông dịch thực thi mã JavaScript, giúp xây dựng các ứng dụng web một cáchđơn giản và dễ dàng mở rộng

NodeJS được phát triển bởi Ryan Dahl vào năm 2009 và có thể chạy trên nhiều

hệ điều hành khác nhau: OS X, Microsoft Windows, Linux

Thực hiện :

- Tham gia đầy đủ các buổi trainning

- Làm các bài tập thực hành như tạo một giao diện bằng Vue CLI tích hợp của Vues

để tạo một trang web cơ bản

- Tìm kiếm tài liệu trên mạng để tìm hiểu thêm

Kết quả :

- Hiểu được những khái niệm cơ bản trong lập trình hướng frontend website

- Đã chạy được trang web với kiến thức cơ bản tử VueJs

2.4 Lập trình trên Visual Studio Code

Nội dung : Các kỹ thuật tạo ra một trang web coe bản trong VueJs, sử dụng VueCLI

trong VueJs trong Visual Studio Code

- Định nghĩa về Visual Studio Code:

Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và macOS, Visual Studio Code được phát triển bởi Microsoft Nó được xem là một

sự kết hợp hoàn hảo giữa IDE và Code Editor

Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác

- Tạo trang web với VueCLI:

Được các trainner hướng dẫn tạo ra một trang web cơ bản, cấu hình bố cục củatrang web, cách sử dụng các công cụ để biên dịch, chạy trang web với trình biêndịch NodeJs

- Lập trình web FrontEnd bằng JavaScript

Để có thể lập trình giao diện webssite với hiệu suất cao, lập trình viên sẽ phải lậptrình từ hướng phân tích giao diện từ bên ngoài nhìn vào Lập trình viên sẽ sửdụng ngôn ngữ javascript để lập trình và build ra thư viện để chạy trên local củamáy Sử dụng trình biên dịch NodeJs để chạy

Thực hiện :

- Tham gia đầy đủ các buổi training

- Tạo ra những ứng dụng cơ bản, lập trình web frontend trên Visual Studio Code rồichạy bằng lệnh của NodeJs

Kết quả:

- Đã có thể tạo ra các trang web có đầy đủ các trang và sau đó chạy trên local bằng lệnh chạycủa NodeJs

3 Thực hiện project

Sau một tháng được training và thực hành, thực tập sinh đã nắm được những kiến thực

cơ bản về VueJs, VueCLI, JavaScript Trong tháng thứ hai, trainer đã hướng dẫn thực tậpsinh áp dụng những kiến thức đã học để thực hiện một project thiết kế giao diện chowebssite

Chi tiết đồ án sẽ được nói ở phần sau

4 Lịch làm việc

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ủacông ty

- Làm quen với cáccông cụ làm việctrong công ty

- Học cách trao đổi,làm việc qua email

Chị Lâm Anh

2

- Tìm hiểu ngôn ngữlập trình Javascriptnâng cao

- Thực hành Javascript

- Làm bài test Javascript

Anh Nguyễn LêAnh Đào

3

- Tìm hiểu vềCSS/SCSS

- Thực hành tạotrang web với các

bố cục trongscss/css

Anh Từ QuốcHưng, anh Phú

4

- Tìm hiểu về VueJs,VueCLI

- Thực hành tạo mộttrang web sử dụngVueCLI

- Nhúng NodeJs vàoVisual Studio code

đẻ thực hiện lệnh

Anh Phú, anhNguyễn Lê AnhĐào

- Lên kế hoạch

- Tạo các componentscho trang web Phânchia cho thích hợp

- Phân chia các trangcần thiết của project

- Định nghĩa Data(Dữ liệu) đầu vàocủa trang

Anh Đào, anh TừQuốc Hưng

6

Giai đoạn Hiện thực:

- Viết giao diện chotrang từng trangweb

- Kết nối dữ liệu datatĩnh

Anh Nguyễn LêAnh Đào, anh TừQuốc Hưng

7

Giai đoạn Hiện thực (tt)

- Viết giao diện chotrang từng trangweb

- Kết nối dữ liệu datatĩnh

Anh Nguyễn LêAnh Đào, anh TừQuốc Hưng

8

Giai đoạn Hiện thực (tt)

- Viết giao diện chotrang từng trangweb

- Kết nối dữ liệu datatĩnh

Anh Nguyễn LêAnh Đào, anh TừQuốc Hưng

- Fix/ bug các lỗi liênquan

Anh Nguyễn LêAnh Đào

10 Giai đoạn kết thúc, báo

cáo :

- Kết hợp các trangphân chia cho từngthành viên để tạomột page chung

- Fix bug, fix rò rìvùng nhớ

Anh Nguyễn LêAnh Đào

- Báo cáo cuối đợtthực tập.

Chương 3: Chi tiết về project

1 Giới thiệu về giao diện Shopee

Shoppe là kênh bán hàng thương mại điện tử lớn nhất Việt Nam hiện nay, với đa dạng các loại mặt hàng Ra mắt năm 2015, nền tảng thương mại Shopee được xây dựng nhằm cung cấp cho người sử dùng những trải nghiệm dễ dàng, an toàn và nhanh chóng khi mua sắm trực tuyến thông qua hệ thống hỗ trợ thanh toán và vận hành vững mạnh

1.1 Các trang chính trong quá trình thực hiện dự án

Tên trang Mục đich Mức độ hoàn thànhDanh mục sản phẩm Hiển thị các sản phẩm

ngoài giao diện chính