Báo Cáo Thực Tập Lập Trình Web Front-End.pdf

1 19521421 Lâm Nguyễn Bửu Duy 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 FRONT END Công ty thực tập Vitalify Asia Co , Ltd Người phụ trách Dương Văn Khươ[.]

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

TP Hồ Chí Minh, tháng 9 năm 2022

LỜI MỞ ĐẦU

Lập trình web là một trong những lựa chọn nghề nghiệp xu hướng, phổ biến với các bạn học khoa học máy tính hoặc kỹ thuật phần mềm, công nghệ thông tin nói chung Lập trình viên web được coi là một vị trí việc làm nhiều triển vọng do nhu cầu tuyển dụng được dự đoán sẽ tiếp tục tăng lên trong tương lai

Ngày nay, chỉ tính riêng hướng nghề nghiệp trở thành lập trình viên thì bạn cũng đã có rất nhiều lựa chọn, chẳng hạn như phân theo định hướng sản phẩm thì có lập trình viên web, lập trình viên game, lập trình viên phần mềm, ứng dụng; hoặc theo ngôn ngữ lập trình thì có lập trình Java, PHP Lập trình web là một mảng khá rộng và nhiều triển vọng nhưng song song với

đó cũng sẽ có những áp lực nhất định, đòi hỏi nhiều ở sự sáng tạo

Lập trình phần mềm là xu hướng nên có thể có nhiều cơ hội tuyển dụng và thăng tiến hơn Lập trình web cần có khả năng thiết kế và tùy chỉnh các trang web, yêu cầu bạn phải hiểu những điều cơ bản về trải nghiệm người dùng Vì lý do này, em quyết định chọn lập trình web làm định hướng cho việc học tập của mình

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 được tham gia làm website trong một môi trường chuyên nghiệp, em có dự định là sẽ thực tập trong hè Vì vậy, em quyết định chọn Vitalify Asia Co., Ltd - một môi trườ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 Dương Văn Khương đã training Front-End Web, 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ường mới; cảm ơn anh Cường, anh Tiến, đã support anh Khương, hỗ trợ giải đáp nhiều câu hỏi của chúng em khi anh Khương đang rất bận để có thể làm ra một sản phẩm trong thời gian qua

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âm Nguyễn Bửu Duy

TpHCM, 26/12/2022

NHẬN XÉT CỦA KHOA

DANH MỤC HÌNH ẢNH

Hình 1 Vitalify Asia Co Ltd logo 7

Hình 2 OMRON Asthma Diary 8

Hình 3 Hankyou Baizou Kun 9

Hình 4 MAL Smart HRM 9

Hình 5 In House Games 10

Hình 6 Benefit (1) screen 22

Hình 7 Benefit (2) screen 23

Hình 8 Term of use screen 24

Hình 9 Before Using (1) screen 25

Hình 10 Before Using (2) screen 26

Hình 11 Planning screen 27

Hình 12 Preview screen 28

Hình 13 Hearing question screen 29

MỤC LỤC

LỜI CẢM ƠN 3

NHẬN XÉT CỦA KHOA 4

DANH MỤC HÌNH ẢNH 5

MỤC LỤC 6

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

1 Giới thiệu công ty Vitalify Asia Co., Ltd 7

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

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

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

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

2.1 Các công cụ làm việc và structure dự án của công ty 11

2.2 Tìm hiểu ngôn ngữ html, scss, javascript 12

2.3 Javascript nâng cao 13

2.4 ReactJS 14

2.5 Tìm hiểu về Framework7, Storybook và Atomic 15

2.6 PHP Laravel 16

3 Thực hiện project 17

4 Lịch làm việc 17

CHƯƠNG 3: CHI TIẾT VỀ PROJECT 21

1 Giới thiệu về trang web 21

2 Tổng quan giao diện và chức năng 21

3 Thực hiện 29

4 Kế hoạch 29

TÀI LIỆU THAM KHẢO 31

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

Hình 1 Vitalify Asia Co Ltd logo

1 Giới thiệu công ty Vitalify Asia Co., Ltd

Kể từ khi thành lập vào năm 2008, Vitalify Asia đã tham gia phát triển phần mềm tập trung vào thiết bị di động để đạt được tầm nhìn “mang lại hạnh phúc thông qua Internet” Với mục tiêu trở thành một nhóm chuyên nghiệp thực sự có thể cạnh tranh trên phạm vi toàn cầu Bây giờ, hơn 10 năm sau khi thành lập, công ty tiến đến một giai đoạn mới để nâng cao hơn nữa giá trị năng lực, kỹ thuật tại Việt Nam nhằm tạo ra nhiều sản phẩm “Made in Vietnam” và bán chúng trên khắp thế giới

Là thành viên chính thức trực thuộc bộ phận IT của Hiệp hội doanh nghiệp Nhật Bản tại

Hồ Chí Minh, Vitalify đem đến cho khách hàng những dịch vụ công nghệ thông tin như:

100.000 người dùng đến năm 2025 Mục tiêu của công ty là trở thành No.1 MUSIC trong đó M

là Mobile, U là Unique, S là Software, I là Internet và C là Company

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

Vitalify Asia phát triển ứng dụng di động trên nhiều mảng như các ứng dụng healthcare, giải trí, database service, game, các ứng dụng outsource … Một số ứng dụng của công ty như YourGolf Online, OMRON Asthma Diary, Joggle – Fitness at Home, Dungeon Dash…

Ngoài việc cung cấp dịch vụ phát triển outsource, công ty cũng liên tục phát hành các sản phẩm nội bộ của riêng mình Các ứng dụng "Made in Vietnam" sử dụng các công nghệ mới nhất như AI và 3D

Hình 2 OMRON Asthma Diary

Hình 3 Hankyou Baizou Kun

Hình 4 MAL Smart HRM

Hình 5 In House Games

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

Đợt thực tập với chủ đề “Lập trình Front-End trên web” nhằm mục đích giúp sinh viên thực tập được đào tạo toàn diện lập trình front-end, đồ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ọc tập, khám phá và làm việc trong một môi trường phát triển phần mềm 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ủ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…

Được giới thiệu bản thân trước nhiều phòng ban khác nhau trong công ty

Kết quả: Hiểu thêm về công ty Vitalify Asia Co., Ltd, 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 Nghiên cứu kỹ thuật

2.1 Các công cụ làm việc và structure dự án của công ty

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, mentor đã 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ư Chatwork - sử dụng để giao tiếp và đặt câu hỏi khi cần thiết

Được mentor giới thiệu tới quy trình và cách sắp xếp structure của dự án ở công ty, mentor giải thích rõ ràng từng thành phần và cách hoạt dộng của chúng

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

đưa ra với structure được mentor giới thiệu

Kết quả: Lập trình sử dụng các công cụ miễn phí, làm quen và áp dụng structure của

công ty

2.2 Tìm hiểu ngôn ngữ html, scss, javascript

Thời gian: 3 ngày

Nội dung: Được training về ngôn ngữ html scss từ cơ bản đến nâng cao, Javascripts cơ

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

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

Kết quả:

- Nắm được kiến thức cốt lõi của html, scss và javascripts

- Biết được cách tổ chức code và chuẩn hóa code

2.3 Javascript nâng cao

Thời gian: 2 ngày

Nội dung: Các kiến thức nâng cao của javascript

- Closure: Là một hàm bên trong có thể truy vấn đc biến bên ngoài gồm 3 scope

(bên trong nó, outer scope và global scope)

- Từ khóa This trong javascript

Nắm rõ cách hoạt động của từ khóa this trong các ngữ cảnh khác nhau (function, event, object, class, arrow function)

Thực hiện:

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

- Làm các bài tập thực hành tạo một page đặt lịch sử dụng javascript, scss, html

- 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 nâng cao trong javascript

2.4 ReactJS

Thời gian: 2 ngày

Nội dung: Giới thiệu về cách áp dụng và cách hoạt động của framework ReactJS và các

thư viện hỗ trợ

- Định nghĩa về ReactJS:

ReactJS là một thư viện chứa nhiều JavaScript mã nguồn mở được Facebook xây dựng

và phát triển Thư viện này được sử dụng để tạo ra các ứng dụng trang web hấp dẫn với hiệu quả cao, tốc độ load nhanh và mã tối thiểu Mỗi website sử dụng ReactJS phải chạy nhanh, mượt và có khả năng mở rộng cao, thao tác thực hiện đơn giản

- Hook trong reactjs

Mentor giới thiệu về các loại hook cốt lõi được sử dụng nhiều nhất, cách áp dụng cũng như cách hoạt động của từng hook

- Life cycle component:

Gồm 3 phần chính: Mounting, updation, unmounting

Trainer giới thiệu về life cycle trong components, cách ứng dụng vào thực tế Điểm khác nhau của Lifr cycle khi sử dụng class component và functional components

- Virtual DOM

DOM là tên gọi tắt của Document Object Model (Mô hình Đối tượng Tài liệu), là một chuẩn được định nghĩa bởi W3C dùng để truy xuất và thao tác trên code HTML hay XML bằng các ngôn ngữ lập trình thông dịch (scripting language) như Javascript

DOM giúp thao tác với dữ liệu theo mô hình hướng đối tượng do các phần tử trong DOM có cấu trúc được định nghĩa thành các đối tượng, phương thức, thuộc tính để có thể truy xuất dễ dàng

Thực hiện:

- Tham gia các buổi training

- Viết vài components đơn giản bằng react cho dự án thực tập mà mentor giao

Kết quả:

Hiểu được những vấn đề cơ bản của ReactJS

2.5 Tìm hiểu về Framework7, Storybook và Atomic

Thời gian: 3 ngày

Nội dung: Tìm hiểu về Framework7, Victory Chart, storybook và cách chia component

theo Atomic

- Framework7:

Framework7 – là một khung HTML di động mã nguồn mở miễn phí để phát triển các ứng dụng di động hoặc ứng dụng web kết hợp với giao diện gốc iOS và Android Nó cũng là một công cụ ứng dụng tạo mẫu không thể thiếu để hiển thị nguyên mẫu ứng dụng đang hoạt động càng sớm càng tốt trong trường hợp cần thiết

- Victory Chart:

Victory là một tập hợp các thành phần biểu đồ mô-đun cho React và React Native Chiến thắng giúp bạn dễ dàng bắt đầu mà không phải hy sinh tính linh hoạt Tạo trực quan hóa dữ liệu

có một không hai với các kiểu và hành vi có thể tùy chỉnh hoàn toàn Victory sử dụng cùng một API cho các ứng dụng web và React Native để dễ dàng lập biểu đồ đa nền tảng

- Storybook:

Storybook là một công cụ thiết kế và phát triển những UI Components cho ứng dụng của bạn trên một môi trường hoàn toàn biệt lập Storybook mang lại trải nghiện mới khi thiết kế những UI components tưởng chừng chỉ dừng lại ở khâu design trước khi chuyển sang giai đoạn code Frontend

- Học cách custom Victory chart theo design figma của khách hàng

- Biết và nắm được cách triển khai cách component lên storybook

- Hiểu và thực hành chia component structure theo dạng Atomic

2.6 PHP Laravel

Thời gian: 1 ngày

Nội dung: Giới thiệu về PHP Laravel và cách đọc tài liệu API từ team Backend

- Định nghĩa về GraphQL:

Laravel là một trong những PHP Web Framework phổ biến nhất theo mẫu MVC View- Controller) Được tạo bởi Taylor Otwell, Laravel framework là nguồn mở và miễn phí giúp bạn đưa ra các sản phẩm chất lượng cao Các code sẽ được giảm thiểu đi, nhưng vẫn đạt tiêu chuẩn ngành, giúp bạn tiết kiệm được hàng trăm giờ đồng hồ dành cho việc phát triển

(Model Giới thiệu về cách call API và đọc tài liệu API từ team Backend

Được mentor hướng dẫn và giới thiệu kỹ càng về flow với các function call API Hiểu được cách dung document từ team Backend để truyền đúng tham số và lấy đúng dữ liệu mình cần từ Backend

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

4 Lịch làm việc

Tuần Công việc Người hướng

dẫn

Mức

độ hoàn thành

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

- Học html cơ bản

Anh Dương Văn Khương, Nguyễn Anh Duy

2

- Tìm hiểu scss, javascript cơ bản, nâng cao, phần đầu ReactJS

- Thực hành làm bài tập thiết kế website

Anh Dương Văn Khương

3

- Học và tìm hiểu ReactJS, PHP laravel, cách đọc tài liệu API từ team back end

- Tìm hiểu library mà

dự án đang ứng dụng

- Thực hành call API, cài đặt, hiện thực các library vào dự án

Anh Dương Văn Khương

React

4

- Ứng dụng những kiến thức xây dựng một số component đơn giản theo file figma project

- Học coding convention của dự án

và học cách sử dụng git

Anh Dương Văn Khương, anh Tiến

5

- Ứng dụng những kiến thức xây dựng một số components theo file figma project

- Học cách sử dụng công cụ Backlog để lưu trữ source code

Anh Dương Văn Khương, anh Tiến

6 - 11

- Thực hành ứng dụng kiến thức, xây dựng, ghép các component vào screen hoàn chỉnh

- Reasearch một số kiến thức cần thiết như SQLQuerry, Victory Chart để áp dụng vào

dự án

- Học cách review code qua git

Anh Dương Văn Khương, anh Tiến

- Call API từ Backend

và ráp luồng hoạt động cho project

CHƯƠNG 3: CHI TIẾT VỀ PROJECT

1 Giới thiệu về trang web

Webview OSK prenium được phát triển và mở rộng từ một dự án React Native trước đó

Dự án này thuộc phần prenium của dự án trước đó Webview dùng để thống kê, báo cáo về đường huyết của người dùng thông qua máy đo đường huyết Người dùng có thể theo dõi sức khỏe đường huyết thông qua các biểu đồ và dự đoán về tình hình sức khỏe sắp tới

2 Tổng quan giao diện và chức năng

Chức năng chính của trang web là báo cáo và thống kê nên đã phần mọi tác vụ trong web site là hiển thị dư liệu dưới dạng các biểu đồ cho người dung

❖ Trang Benefit: Hiển thị những lợi ích khi sử dụng OSK prenium

Hình 6 Benefit (1) screen

Hình 7 Benefit (2) screen

❖ Trang Term of use Hiển thị những điều kiện sử dụng OSK prenium

Hình 8 Term of use screen Trang Before use Question: Trang thu thập thông tin cần thiết của người dùng trước khi

sử dụng

Hình 9 Before Using (1) screen

Hình 10 Before Using (2) screen

❖ Trang Plan: Người dùng sẽ nhập các thông tin về đường huyết vào trang này

Hình 11 Planning screen

❖ Trang Preview: Người dùng sẽ theo dõi đươc tình trạng hiện tại của bản thân sau

khi nhập dữ liệu đầu vào

Hình 12 Preview screen

❖ Trang Hearing question: Người dùng sẽ nhập các thông tin về thói quen và lối

sống… Những nội dung này sẽ là nguyên liệu đầu vào cho dự liệu

Hình 13 Hearing question screen

- Sử dụng storybook để hiển thị các components

- Sử dụng Victorychart và Framework7 tạo component và custom theo file figma của khách hàng

- Ứng dụng coding convention của dự án

Giai đoạn 2:

- Thực hiện các screen (initial flow) của dự án

- Tái sự dụng các component và ráp luồng hoạt động của dự án

- Đọc hiểu các tài liệu từ phía dự án

- Báo cáo task cho PM hằng ngàyQ

TÀI LIỆU THAM KHẢO

1 Vitalify Asia Co, link: https://www.vitalify.asia/ (truy cập lần cuối 25/12/2022)

2 ReactJS library, link: https://reactjs.org/ (truy cập lần cuối 25/12/2022)

3 Victory Chart, link: https://formidable.com/open-source/victory/ (truy cập lần cuối 25/12/2022)

4 Storybook library, link: https://storybook.js.org/ (truy cập lần cuối 25/12/2022)

5 PHP laravel, link: nhanh-chong/ (truy cập lần cuối 25/12/2022)