Báo cáo thực tập lập trình WEB với VUE JS

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 WEB VỚI VUE.JS Công ty thực tập : Công Ty Cổ Phần Công Nghệ MHEALTH Người phụ trách : Ngô Đông Hồ

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 WEB VỚI VUE.JS

Công ty thực tập : Công Ty Cổ Phần Công Nghệ MHEALTH Người phụ trách : Ngô Đông Hồng

Thực tập sinh : Lê Việt Hoàng

TP Hồ Chí Minh, tháng 7 năm 2020

LỜI MỞ ĐẦU

Ngày nay, khi tốc độ phát triển của công nghệ càng tăng Các loại hình phát triển dịch vụ ngày càng đa dạng Bên cạch đó thì chất lượng cuộc sống và nhu cầu chăm sóc ngày càng tăng cao

Để đáp ứng kịp thời các thắc mắc cũng như nhằm giảm các lo sợ vì thiếu hiểu biết về y tế hoặc các kiến thức liên quan Dịch vụ Telemedicine đã xuất hiện dưới nhiều hình thức khác nhau như : Đặt khám online, tư vấn cùng bác sĩ,…

Thông qua tìm hiểu thì em đã biết Công Ty Cổ Phần Công Nghệ Mhealth là một trong những công đang phát triển về lĩnh vực này Cùng với tinh thần học hỏi và muốn được trải nghiệm ở một công ty product Nên em quyết định đây là nơi em sẽ thực tập

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công Ty Cổ Phần Công Nghệ Mhealth đã 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 anh chị ở công ty, em

đã tiếp thu được những kiến thức quan trọng để phát triển bản thân Chân thành cảm ơn các anh chị công ty đã bỏ ra nhiều thời gian,công sức để giúp đỡ em hoàn thành đợt thực tập này

Đặc biệt cảm ơn anh Ngô Đông Hồng, đã training Vue.js và các kiến thức xung quanh, hướng dẫn, giúp đỡ 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ường mới

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

<Lê Việt Hoàng>

<Tp.HCM, ngày 28 tháng 7 năm 2020>

NHẬN XÉT CỦA KHOA

MỤC LỤC

Contents

MỤC LỤC 5

Chương 1: Giới Thiệu Công Ty Thực Tập 6

1 Giới Thiệu Công Ty Cổ Phần Công Nghệ Mhealth 6

2 Sản Phẩm Của Công Ty 6

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

2.1 Tìm hiểu công ty và lối sống trong công ty 7

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

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

2.2.2 Tìm hiểu ngôn ngữ Vue.js 7

2.2.3 Tìm hiểu về Vuetify.js 8

2.2.4 Tìm hiểu về Nuxt 8

2.3 Thực hiện project 8

2.4 Lịch làm việc 9

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

3.1 Xây dựng trang thông tin cá nhân 10

3.1.1 Cho cá nhân 10

3.2 Xây dựng trang web theo mockup 10

3.2.1 Trang Product 10

3.2.2 Trang Order 11

TÀI LIỆU THAM KHẢO 12

Chương 1: Giới Thiệu Công Ty Thực Tập

1 Giới Thiệu Công Ty Cổ Phần Công Nghệ Mhealth

Công Ty Cổ Phần Công Nghệ Mhealth được thành lập vào năm 2015 Là một trong những công

ty đang phát triển về lĩnh vực Telemedicine ở Việt Nam hiện nay

Văn phòng của công ty được đặt tại LA02.08, Tòa Nhà Lexington, 67 Mai Chí Thọ, Phường An Phú, Quận 2, TP Hồ Chí Minh

2 Sản Phẩm Của Công Ty

Công ty cung cấp dịch vụ tư vấn, khám sức khỏe từ xa cho cá nhân và doanh nghiệp Với sứ mệnh : “Chúng tôi giúp bạn duy trì một lối sống lành mạnh, và khi bạn cần tham vấn y tế, chúng tôi kết nối bạn với những bác sĩ chuyên khoa hàng đầu qua gọi thoại và gọi video 24/7”

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

Đợt thực tập với nội dung : “ Tìm hiểu về Vue.js” để có thể tham gia vào dự án công ty khi hết hạn thực tập Đồng thời rèn luyện các kỹ năng mềm : làm việc nhóm, thuyết trình, giao tiếp Tìm hiểu về công ty và định hướng môi trường phát triển

2.1 Tìm hiểu công ty và lối sống trong công ty

Thời gian : 5 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, 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 email trong công việc,

và các trang web của công ty…

Kết quả : Hiểu thêm về công ty, 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ách nhiệm hơn

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

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

Thời gian : 3 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 sinh viên tìm hiểu về các công cụ được dùng trong làm việc.Trello – theo dõi, báo cáo tiến độ công việc Slack – Thông tin

và thảo luận trong làm việc

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

Kết quả : Sử dụng thành thạo các công cụ trên

2.2.2 Tìm hiểu ngôn ngữ Vue.js

Thời gian : 5 ngày

Nội dung : Được training về các kiến thức cơ bản Vue.js, các extension cần thiết Thực hiện :

 Sử dụng Vue.js để xây dựng một trang quản lý thông tin cá nhân khách hàng

với quyền xem và cập nhật

Kết quả :

 Thành thạo sử dụng căn bản ngôn ngữ

 Kinh nghiệm về logic và các chuẩn viết code

2.2.3 Tìm hiểu về Vuetify.js

Thời gian : 5 ngày

Nội dung: Các kiến thức về Vuetify

 Style & animations : Cấu hình và sử dụng các thuộc tính css ở Vuetify

 Components : Cách sử dụng các component của Vuetify và tùy biến theo yêu cầu sử dụng

Thực hiện :

 Đọc docs tại : https://vuetifyjs.com/en/getting-started/quick-start/ dưới sự hướng dẫn của supervisor

Kết quả :

 Sự dụng Vuetify vào trong dự án

2.2.4 Tìm hiểu về Nuxt

Nội dung : Tìm hiểu về Nuxt

 Cấu trúc file trong project của công ty

 Hiểu cách thức hoạt động của Nutx

Thực hiện :

 Tạo và sắp xếp các file theo đúng cấu trúc

Kết quả:

 Thành thạo và thao tác chính xác

2.3 Thực hiện project

Sau khi hoàn thành công việc tìm hiểu để làm quen công việc Thực hiện các task được đưa ra

2.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ủa công ty

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

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

Anh Ngô Đông Hồng

100%

2

- Tìm hiểu về Vue.js

- Sử dụng Vuetify

- Tìm hiểu nuxt

Anh Ngô Đông Hồng

100%

3,4

- Tạo trang xem và update thông tin cá nhân cho bệnh nhân

Anh Ngô Đông Hồng

100%

4,5 - Tạo trang xem và update

thông tin cá nhân cho bác sĩ

Anh Ngô Đông Hồng

100%

6,7,8 - Thực hiện xây dựng trang

web theo mockup

Anh Ngô Đông Hồng

100%

9,10,11 - Xây dựng các Components

để tái xử dụng theo yêu cầu

Anh Ngô Đông Hồng

100%

12 - Báo cáo kết quả hoàn thành

và kết thúc thực tập

Anh Ngô Đông Hồng

100%

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

3.1 Xây dựng trang thông tin cá nhân

3.1.1 Cho cá nhân

3.2 Xây dựng trang web theo mockup

3.2.1 Trang Product

3.2.2 Trang Order

 Xây dựng với mục đích giúp admin quản lý dữ liệu, nên tập trung vào xây dựng khuôn dữ liệu và các component tái sử dụng

 Các chức năng tìm kiếm và hiện thị các thuộc tính

TÀI LIỆU THAM KHẢO

For Models

http://www.md2.sitters-electronics.nl

For Particle

http://www.particlesystems.org/

http://www.3d4a.vn/forum/showthread.php?t=23907

http://en.wikipedia.org/wiki/Particle_system

For OpenAL

http://connect.creativelabs.com/openal/default.aspx

For Font

https://sites.google.com/site/sbskit/gamefornewbie

http://sourcemaking.com/design_patterns/state

http://nehe.gamedev.net/tutorial/2d_texture_font/18002/

http://plib.sourceforge.net/fnt/index.html

For graphics

http://opengl.org

http://songho.ca

http://nehe.gamedev.net

TỔNG KẾT

Như vậy, chỉ trong vòng một tháng ngắn ngủi, nhóm đã kịp hoàn thành một game 3D chạy trên nền tảng PC và Android Game đã có khá đầy đủ các tính năng đã đề ra ban đầu Do thời gian có hạn nên tính năng game còn đơn giản, hình ảnh chưa được đẹp như mong đợi Nhưng do game phát triển theo framework có tính kế thừa nên sau này khi có thời gian sẽ có thể phát triển lên mức cao hơn

Chân thành cảm ơn sự giúp đỡ của các anh chị nhóm trainer Gameloft, sự nỗ lực của nhóm Beast Knight để có thể hoàn thành game này Cảm ơn thầy Nguyễn Hữu Thương đã giúp

em hoàn thành bài báo cáo này