Báo cáo thực tập lập trình ứng dụng WEB với VUEJS

Điều đó đã được chứng minh trong những năm trở lại đây, đặc biệt là với tình hình dịch bệnh Covid như hiện tại, các ứng dụng Web luôn là sự lựa chọn ưu tiên của hầu hết mọi người trong r

Trang 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

LẬP TRÌNH ỨNG DỤNG WEB VỚI

VUEJS

Công ty thực tập : Công ty cổ phần Splus-Software Người phụ trách : Trần Hữu Tính

Thực tập sinh : Nguyễn Thanh Tuấn MSSV : 18521604

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

Trang 2

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

LỜI MỞ ĐẦU

Ngày nay, tầm quan trọng của Internet đối với đời sống con người là điều ta không thể phủ nhận Việc truy cập vào Internet nói chung cũng như là truy cập các ứng dụng Web nói riêng gần như đã trở thành một thói quen, một việc làm hàng ngày của mọi người

Không phải ngẫu nhiên mà các ứng dụng Web lại trở nên phổ biến như vậy, mà là bởi vì

sự tiện lợi cũng như là dễ dàng truy cập tại bất cứ nơi đâu, chỉ cần có kết nối mạng Internet là ta đều có thể truy cập các ứng dụng Web một cách dễ dàng Điều đó đã được chứng minh trong những năm trở lại đây, đặc biệt là với tình hình dịch bệnh Covid như hiện tại, các ứng dụng Web luôn là sự lựa chọn ưu tiên của hầu hết mọi người trong rất nhiều các lĩnh vực khác nhau:

từ mua sắm đồ đạc, quần áo, cho đến việc mua đồ ăn, thức uống hàng ngày,…

Sau thời gian tìm hiểu về Lập trình nói chung cũng như là Lập trình ứng dụng Web nói riêng, cũng đã trải qua những đồ án môn học tại trường, em mong muốn có thêm những trải nghiệm thực tế về việc làm ra một ứng dụng Web có tính thực tiễn, đồng thời có thể trau dồi bản thân trong môi trường làm việc chuyên nghiệp, đầy tính kỷ luật hơn Vì vậy, em đã quyết định lựa chọn Công ty cổ phần Splus-Software sẽ là nơi em có thể trau dồi thêm kiến thức cũng như là trải nghiệm làm việc của mình trong một môi trường tập thể, đầy tính trách nhiệm

Trang 3

LỜI CẢM ƠN

Lời đầu tiên em xin trân trọng gửi lời cảm ơn đến Công ty cổ phần Splus-Software đã tạo điều kiện cho em có cơ hội được thực tập tại quý công ty

Chỉ trong 3 tháng ngắn ngủi, nhưng nhờ sự chỉ dẫn nhiệt tình của các anh chị mentor trong Team Amour, em đã tiếp thu được rất nhiều những kiến thức bổ ích trong việc phát triển một ứng dụng Web và công nghệ NuxtJs cũng như quy trình làm việc trong team dự án và áp dụng những điều đó vào thực hiện các tasks được giao trong dự án Amour Chân thành cảm ơn các anh chị mentor đã bỏ ra nhiều thời gian, công sức để hướng dẫn em hoàn thành đợt thực tập này

Đặc biệt cảm ơn anh Tiến, đã training kiến thức, hướng dẫn, giúp đỡ em tận tình từ

những khó khăn trong việc tiếp cận và tìm hiểu công nghệ mới NuxtJs, đến những khó khăn trong việc làm quen với môi trường làm việc mới, luôn bên cạnh và theo sát công việc thực tập của em; cảm ơn anh Tính, đã tạo điều kiện để em có thể tham gia cùng team Amour phát triển

dự án hỗ trợ em cũng như là hướng dẫn quy trình làm việc cho em rất nhiệt tình; cảm ơn anh Khoa, anh Tuấn, chị Chi, chị Ngân đã luôn hỗ trợ và hướng dẫn cho em những lúc em gặp phải những vấn đề trong công việc và cần sự giúp đỡ của anh chị Cuối cùng, em xin cảm ơn tất cả anh chị trong Dự án Amour đã hỗ trợ em để có được những kiến thức cực kỳ bổ ích Và em cũng rất vui khi có thể tham gia cùng anh chị và đóng góp chút sức nhỏ nhoi của mình cho Dự

án

Em cũng xin chân thành 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 hoàn thành bài báo cáo này

NGUYỄN THANH TUẤN Tp.HCM, ngày 15 tháng 12 năm 2021

Trang 4

NHẬN XÉT CỦA KHOA

Trang 5

MỤC LỤC

LỜI MỞ ĐẦU 1

LỜI CẢM ƠN 2

NHẬN XÉT CỦA KHOA 3

MỤC LỤC 4

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

1 Giới thiệu công ty Splus-Software 5

2 Mô hình tổ chức 5

3 Lĩnh vực hoạt động 5

4 Chuyên môn của công ty 6

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

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

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

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

2.2 Tìm hiểu Framework VueJs 7

3 Thực hiện project 8

4 Lịch làm việc 9

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

1 Giới thiệu về Dự án Amour 12

2 Thực hiện 12

3 Kết quả 12

3.1 Màn hình và chức năng chỉnh sửa Manufacturer 12

3.2 Màn hình Danh sách Manufacturers 13

3.3 Màn hình Chỉnh sửa Maker 14

3.4 Tổng kết 15

TÀI LIỆU THAM KHẢO 16

TỔNG KẾT 17

Trang 6

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

1 Giới thiệu công ty Splus-Software

Splus-Software được thành lập từ năm 2015, là công ty chuyên tư vấn và gia công xuất khẩu phần mềm Hiện tại công ty đã có 2 trụ sở tại Việt Nam và Nhật Bản, Splus đã và đang thực hiện nhiều dự án lớn cùng với những khách hàng uy tín quốc tế tại chủ yếu các thị trường như Nhật Bản, Đức, Mỹ và Singapore

2 Mô hình tổ chức

3 Lĩnh vực hoạt động

Splus-Software hoạt động trong đa dạng các lĩnh vực bao gồm:

• Dịch vụ - Ứng dụng Web (Web application)

• Dịch vụ - Ứng dụng di động (Mobile application)

• Dịch vụ - Trí tuệ nhân tạo (AI)

• Dịch vụ - Internet kết nối vạn vật (IoT)

• Dịch vụ - Điện toán đám mây (Cloud)

Trang 7

4 Chuyên môn của công ty

Những công nghệ mà công ty sử dụng:

• Programming: PHP, Java, C#, Javascript, Golang, Ruby, Objective-C,…

• Framework: Lavarel, Spring, VueJs, NET, Rails, Flutter, Outsystem,…

• Database: MySQL, MSSQL, Oracle, DB2, SQL Lite, No SQL,…

• Platform: Google Cloud Platform, Amazon Cloud, SalesForce,…

• CI/CD: Jenkins, CircleCI, AWS CodeBuild, Azure DevOps,…

Trang 8

Chương 2: Nội dung thực tậ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 : 2 ngày

Nội dung : Giới thiệu về công ty, cách tổ chức của công ty, và huấn luyện về an ninh

thông tin

Đượ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 làm việc, các quy định cần phải tuân thủ, bảo mật thông tin dự án, giới thiệu những công cụ làm việc công ty đang sử dụng,…

Huấn luyện về an ninh thông tin theo tiêu chuẩn ISO 27001:2013 và làm bài kiểm tra về An ninh thông tin

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

thêm các kỹ năng về làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn Đảm bảo việc bảo mật thông tin của Công ty và dự án

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

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

Thời gian : 2 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, bộ phận IT đã hướng dẫn thực tập sinh tìm hiểu và sử dụng 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ư SVN

- sử dụng để quản lý những tài liệu của dự án, Gitlab – sử dụng để quản lý source code của dự án, Redmine – sử dụng để quản lý các tasks công việc, Zoho-Mail – Email nội bộ của công ty, Slack – kênh chat mà công ty sử dụng cũng như team dự án trao đổi thông tin cho nhau

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

Kết quả : Nắm được khái quát cách sử dụng các công cụ cần thiết khi làm việc trong

công ty

2.2 Tìm hiểu Framework VueJs

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

Nội dung : Được anh mentor gợi ý và giới thiệu nguồn tài liệu để tự tìm hiểu về

Framework VueJs Trong quá trình tìm hiểu, có thắc mắc thì có anh mentor luôn sẵn sàng giải đáp thắc mắc của mình

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

Trang 9

VueJs là một progressive framework dùng để xây dựng một SPA (Single Page Application) Không giống như nhữngmonolithic frameworks, Vue được thiết kế từ đầu theo hướng phát triển ứng dụng từng bước một Thư viện cốt lõi chỉ tập trung vào View layer, và dễ dàng lấy với tích hợp những thư viện khác như vuex để hỗ trợ quản lý state hoặc là vue-router để hỗ trợ cho việc routing

- Rendering:

VueJs cho phép render dữ liệu đến DOM bằng cú phép template đơn giản, còn lại mọi thứ đã có Vue hỗ trợ cho lập trình viên VueJs sử dụng Virtual DOM

để tăng trải nghiệm của người dùng, thông qua mỗi event như click, hover,… Virtual DOM sẽ tìm những thành phần bị thay đổi rồi thông báo cho DOM chỉ thay đổi những thành phần bị thay đổi mà thôi

- Một số Directives thường sử dụng:

VueJs đã xây dựng sẵn những Directives làm đơn giản hoá các thao tác cho lập trình viên, chẳng hạn như:

+ v-if: giúp ẩn hiện element nếu thoả điều kiện bên trong + v-else: là directive đi kèm với v-if

+ v-for: là directive hỗ trợ vòng lặp + v-on: là directive giúp bắt các event listener + v-bind: là directive giúp element đó update lại mỗi khi có thay đổi

Thực hiện :

- Chủ động tìm hiểu về những khái niệm cơ bản cũng như syntax của VueJs

- Làm ví dụ minh hoạ để kiểm tra các kiến thức đã tìm hiểu được

Kết quả :

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

- Hiểu rõ hơn về quy tắc hoạt động của 1 web application

3 Thực hiện project

Sau gần một tháng được hướng dẫn và luyện tập, thực tập sinh đã nắm được những kiến thực cơ bản về VueJs, HTML, CSS cũng như các công nghệ đi kèm, thực tập sinh đã được trainer kiểm tra và kiểm tra những kiến thực đã học được trong 1 tuần vừa qua Sau khi đã nhận được những góp ý và chỉnh sửa hoàn chỉnh thì thực tập sinh đã được anh Tính (PM) và anh Tiến (TeamLead – mentor chính) chấp nhận cho tham gia vào dự án hiện tại của team là dự án Amour

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

Trang 10

4 Lịch làm việc

Tuần Công việc hướng dẫn Người Mức độ

hoàn thành

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

1

- Cấu hình VPN để truy cập tài nguyên và server test của công

ty

- Tham gia buổi giới thiệu của công ty và khoá huấn luyện

về an ninh thông tin

- Làm quen với các công cụ làm việc trong công ty như SVN, Redmine,

- Học cách trao đổi, làm việc qua Slack và truy cập được vào Zoho Mail công ty cấp

Anh Nguyễn Hải Dương (bộ phận IT của công ty)

100% Hoàn thành tốt

2

- Cài đặt môi trường phát triển

hỗ trợ framework VueJs

- Tìm hiểu về VueJs Framework thông qua trang chủ của VueJs và hướng dẫn tìm hiểu của anh mentor

Anh Tạ Bảo Tiến

3

- Tiến hành kiểm tra các kiến thức đã tìm hiểu được về VueJs dưới sự review của anh mentor

- Dựa trên những review góp ý

từ mentor để bổ sung thêm những kiến thức cần thiết và cải thiện kỹ năng coding

- Tìm hiểu về quy tắc đặt tên cho class (BEM)

4

- Setup môi trường, clone source code cho dự án Amour

- Tìm hiểu khái quát nghiệp vụ hiện tại và source code của dự

án Amour

- Được hướng dẫn về quy trình làm việc trong dự án, quy tắc đặt Q&A cho khách hàng

Anh Trần Hữu Tính

5

- Study nghiệp vụ màn hình chỉnh sửa Manufacturer dựa trên tài liệu và design từ phía khách hàng

Trang 11

- Đặt Q&A cho khách hàng về những nghiệp vụ chưa rõ (dưới

sự review của mentor)

- Tiến hành thực hiện coding màn hình chỉnh sửa

Manufacturer

6

- Lưu ý lại những review góp ý

từ mentor để fix lại màn hình chỉnh sửa Manufacturer

- Study nghiệp vụ Component Top Header

- Tiến hành thực hiện coding Component Top Header

từ mentor để fix lại Component Top Header

7

- Study nghiệp vụ màn hình danh sách Manufacturers đã đăng ký dựa trên tài liệu và design từ phía khách hàng

- Tiến hành thực hiện coding màn hình danh sách

Manufacturers

từ mentor để fix lại màn hình danh sách Manufacturer

8

- Tham gia testing và fixbug màn hình “Xác nhận nội dung quotation”

- Tham gia testing và fix bug màn hình “Danh sách

Manufactuers”

9

- Tham gia integration test flow màn hình vừa hoàn thành đợt này của dự án trên môi trường server test

- Log bug xảy ra trong quá trình test

- Tham gia fix bug chung với team

Chị Tạ Thị Kim Chi

10 - Study nghiệp vụ màn hình Anh Tạ Bảo 100% Hoàn thành tốt

Trang 12

Chỉnh sửa Maker dựa trên tài liệu và design từ phía khách hàng

- Tiến hành thực hiện coding màn hình Chỉnh sửa Maker

từ mentor để fix lại màn hình Chỉnh sửa Maker

Tiến

11

- Tham gia testing và fixbug màn hình “Estimate creation screen”

- Tham gia testing và fix bug màn hình “Chỉnh sửa Maker”

- Tham gia integration test flow màn hình vừa hoàn thành đợt này của dự án trên môi trường server test

- Log bug xảy ra trong quá trình test

- Tham gia fix bug chung với team

12

- Tham gia test excution trên môi trường production

- Hoàn thành khoá thực tập và viết báo cáo

Chị Tạ Thị Kim Chi

&

Anh Trần Hữu Tính

&

Trang 13

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

1 Giới thiệu về Dự án Amour

Amour là 1 trang web hỗ trợ việc lựa chọn và ước tính giá tiền của các sản phẩm nội địa Nhật Bản Nhóm khách hàng được đề xuất sử dụng là những kiến trúc sư và nhà thiết kế nội thất Chức năng chính của Amour là hỗ trợ cho khách hàng có thể có được bảng giá chính xác

và nhanh nhất đồng thời hỗ trợ đặt hàng từ những brand nội thất mà khách hàng mong muốn Một số chức năng nổi bật:

- Hỗ trợ tìm kiếm sản phẩm cho hơn 20,000 sản phẩm đến từ rất nhiều brand nội thất khác nhau trên toàn nước Nhật

- Yêu cầu từng quotation (báo giá) chính xác tại thời điểm hiện tại từ mỗi nhà cung cấp khác nhau

2 Thực hiện

Thực tập sinh Nguyễn Thanh Tuấn cùng sự hỗ trợ, giúp đỡ tận tình từ những anh chị mentor trong team Amour Đặc biệt là anh Tiến (TeamLead) và anh Tính (PM) của dự án

3 Kết quả

3.1 Màn hình và chức năng chỉnh sửa Manufacturer

Trang 14

3.2 Màn hình Danh sách Manufacturers

Trang 15

3.3 Màn hình Chỉnh sửa Maker

Trang 16

3.4 Tổng kết

Đã hiện thực được màn hình và chức năng

- Chỉnh sửa Manufacturer theo đúng yêu cầu của khách hàng

- Danh sách Manufacturers theo đúng yêu cầu của khách hàng

- Chỉnh sửa Maker theo đúng yêu cầu của khách hàng

Trang 17

TÀI LIỆU THAM KHẢO

For VueJs, NuxtJs

https://vuejs.org/

https://nuxtjs.org/

For BEM (style classname with BEM)

http://getbem.com/

Trang 18

TỔNG KẾT

Như vậy, trong vòng 3 tháng thực tập, thực tập sinh đã kịp hoàn thành 3 màn hình chức năng đã thông qua testing từ bộ phận Tester và Release cho khách hàng ổn thoả Tuy vẫn còn nhiều khó khăn trong quá trình làm việc nhưng nhờ sự hướng dẫn tận tình từ các anh chị trong team Amour nên thực tập sinh đã có thể vượt qua được chính bản thân mình và học hỏi được nhiều kinh nghiệm trong những dự án thực tế Trong tương lai hy vọng thực tập sinh sẽ có nhiều

cơ hội hơn nữa để phát triển hoàn thiện bản thân mình hơn

Chân thành cảm ơn sự giúp đỡ của các anh chị trong team Dự án Amour đã giúp em có những trải nghiệm làm việc thực sự tuyệt vời Cảm ơn anh Trần Hữu Tính đã giúp em hoàn thành bài báo cáo này

Định dạng
Số trang	18
Dung lượng	603,61 KB