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

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
JAVASCRIPT

Cơng ty thực tập:

Netpower Việt Nam

Người phụ trách:

Anh Bùi Hữu Hiệu

Thực tập sinh:

Hồ Quang Linh

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

Bùi Hữu Hiệu

Hồ Quang Linh


2

LỜI MỞ ĐẦU
Ngày nay, ngành công nghiệp web application là một bộ phận không thể thiếu của ngành
công nghiệp phần mềm. Với tốc độ phát triển vô cùng mạnh mẽ, web application đã 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.
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 phát triển web trong một mơi trường chun nghiệp, em có dự định là sẽ thực tập
trong đầu năm tư. Vì vậy, em quyết định chọn Công ty TNHH NetPower Việt Nam - 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.

Bùi Hữu Hiệu

Hồ Quang Linh


3

LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty TNHH NetPower Việt Nam đã 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ể làm được một ứng
dụng web application hoàn chỉnh. 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 hồn thành đợt thực tập này.
Đặc biệt cảm ơn anh Bùi Hữu Hiệu, đã training các công nghệ của công ty đang sử dụng,
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 Nguyễn Tam Phúc, đã training các quy
trình, hỗ trợ chúng em rất nhiều về các vấn đề các kỹ thuật và chỉ dẫn chúng 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ó 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.
Hồ Quang Linh
TpHCM, ngày 20 tháng 12 năm 2022

Bùi Hữu Hiệu

Hồ Quang Linh


4

NHẬN XÉT CỦA KHOA
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................

Bùi Hữu Hiệu

Hồ Quang Linh


5

Mục lục
Chương 1: Giới thiêu công ty thực tập...........................................................................................7
1. Giới thiệu công ty NetPower Việt Nam...............................................................................7
2. Sản phẩm của công ty..........................................................................................................7
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 trong công ty.......................................................8
2. Nghiên cứu cơng cụ.............................................................................................................8
3. Nghiên cứu kỹ thuật.............................................................................................................8
3.1. Tìm hiểu NodeJs, Npm package, các version...............................................................8
3.2. Tìm hiểu BootStrap, SCSS, SASS................................................................................9
3.3. Tạo ra demo (form đăng kí cho một user) có sử dụng BootStrap...............................10
Chương 4: Giới thiệu các ngôn ngữ, thư viện, framework đã tìm hiểu.......................................13
1. NodeJS, Npm Package.......................................................................................................13
1.1. Các phiên bản của NodeJS..........................................................................................13
1.2. Khái niệm Nodejs........................................................................................................14
1.3. Những ứng dụng có thể được viết bằng Nodejs..........................................................14
2. Bootstrap............................................................................................................................15
2.1. Bootstrap là gì.............................................................................................................15
2.2. Tại sao nên sử dụng Bootstrap....................................................................................15
2.3. Các cách để download bootstrap.................................................................................15
2.4. Các version của boostrap:...........................................................................................16
3. SCSS, SASS.......................................................................................................................17

3.1. CSS Preprocessor là gì?..............................................................................................17

Bùi Hữu Hiệu

Hồ Quang Linh


6

4. Restful Api.........................................................................................................................19
Chương 3: Chi tiết về project.......................................................................................................23
1. Giới thiệu về project...........................................................................................................23
2. Mục đích............................................................................................................................23
3. Phạm vi..............................................................................................................................23
4. Các chức năng chính..........................................................................................................24
5. Kết quả...............................................................................................................................25

Bùi Hữu Hiệu

Hồ Quang Linh


7

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

1. Giới thiệu công ty NetPower Việt Nam
NetPower Việt Nam là một trong những nhà cung cấp giải pháp và dịch vụ trên nền tảng
Internet tốt nhất hiện nay. Được thành lập năm 1995, hiện NetPower có hơn 125 nhân viên với
2 văn phòng ở 2 thành phố lớn nhất NaUy là Oslo và Stavanger Bergen. Một văn phịng tại

Tp.Hồ Chí Minh, Việt Nam.
2. Sản phẩm của công ty
Công ty đã thành công khi thuyết phục được sự tin tưởng tuyệt đối của khách hàng trong việc
cung cấp các giải pháp về web, dịch vụ trên Internet, truyền dữ liệu và bảo mật dữ liệu.
NetPower có nguồn tài chính dồi dào với khách hàng là các cơng ty và tập đồn lớn trên toàn
thế giới như Dolly Dimple, Expert, Apotek1, Nikita, Norsk Scania, Helse Sør-Øst, Ullevål
University Hospital, NVE, Oslo kommune, Seadrill, Aker Kvaerner, the Norwegian Petroleum
Directorate, …

Bùi Hữu Hiệu

Hồ Quang Linh


8

Chương 2: Nội dung thực tập
Đợt thực tập với chủ đề “Lập trình ứng dụng web với JavaScript” nhằm mục đích giúp
sinh viên thực tập được đào tạo tồn diện về lập trình cơng nghệ web hiện đại, sử dụng các kiến
trúc và framework mới để tạo ra các ứng dụng đáp ứng nhu cầu nghiệp vụ của khách hàng, đồ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 website
chun 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, 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.
Ngồ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 Microsoft Team, email để trao đổi công việc

Kết quả: Hiểu thêm về công ty TNHH Netpower Việt Nam. Hiểu thệm các quy định khi bắt đầu làm
việc ở môi trường doanh nghiệp, cách trao đổi công việc với các thành viên trong nhóm.

2. Nghiên cứu cơng cụ





Thời gian: 2 ngày
Nội dung: Tìm hiểu các cơng cụ sẽ được sử dụng trong quá trình làm việc (Visual Studio, Visual
Studio Code, Sql Server, Postman, Git, Github), Microsoft Team). Trong thời gian này,
supervisor đã hướng dẫn thực tập sinh tìm hiểu các cơng cụ giúp ích cho cơng việc sau này.
Thực hiện: Tiến hành cài đặt và chạy thử các công cụ trên
Kết quả: Đã hồn tất cài đặt và tìm hiểu các cơng cụ nêu trên.

3. Nghiên cứu kỹ thuật
3.1.

Tìm hiểu NodeJs, Npm package, các version




Thời gian: 2 Ngày
Nội dung: Tìm hiểu những kiến thức cơ bản như khái niệm NodeJs, các khởi tạo một server
trên một port, các import, export một module, tìm hiểu qua một vài package trong npm như
moment, express, nodemon, env, path,..
Thực hiện: Xem document từ trang chủ, và từ các tài liệu tham khảo mà anh leader đã cung
cấp, tiến hành code minh hoạ ra các ví dụ.

Bùi Hữu Hiệu

Hồ Quang Linh


9


3.2.

Kết quả: Đã thực hiện tìm hiểu cơng nghệ từ nhiều nguồn, triển ra code minh hoạ, có thể
hiểu thêm những kiến thức về NodeJs và npm package.

Tìm hiểu BootStrap, SCSS, SASS





Thời gian: 2 Ngày
Nội dung:
+ Tìm hiểu về grid layout, forms, buttons, tables, media queries, cách import thư viện vào
dự án, các cách responsive ở Bootstrap.
+ Tìm hiểu những khái niệm cơ bản về SASS, SCSS như CSS Preprocessing, Variables,
Nesting, Partials, Modules, Mixins, Extend.
Thực hiện: Đọc các tài liệu các trang chủ và từ anh leader cung cấp, tiến hành code minh hoạ
cho từng phần. Sau đây là một vài hình ảnh code minh hoạ

Bùi Hữu Hiệu

Hồ Quang Linh


10



3.3.

Kết quả: Đã thực hiện tìm hiểu cơng nghệ từ nhiều nguồn, triển ra code minh hoạ, có thể
hiểu thêm những kiến thức về Bootstrap, SASS và SCSS.

Tạo ra demo (form đăng kí cho một user) có sử dụng BootStrap




Thời gian: 1 ngày
Nội dung: Sử dụng Bootstrap, SCSS,SAS để tạo ra form đăng kí bao gồm các thơng tin (ID
Card, Fullname, Email, Address, Gender, Phone) và có hai button là Register và Cancel
Thực hiện: Triển khai code, sau đây là một vài hình ảnh code minh hoạ

Bùi Hữu Hiệu

Hồ Quang Linh


11

Bùi Hữu Hiệu

Hồ Quang Linh


12



Kết quả: Sau khi áp dụng ở những công nghệ (Html, Bootstrap, Sass) chạy ra trình duyệt ta
thu được kết quả

Bùi Hữu Hiệu

Hồ Quang Linh


13

Chương 4: Giới thiệu các ngôn ngữ, thư viện, framework đã tìm hiểu
1. NodeJS, Npm Package
1.1.

Các phiên bản của NodeJS

Có hai phiên bản NodeJs mới nhất hiện tại là 16.15.1 LTS và 18.4.0 Current
Khi cài đặt môi trường Node.js để lập trình thì chúng ta vào liên kết  tiến hành
tải xuống. Tuy nhiên ở đây chúng ta thấy có 2 phiên bản là LTS và Current do đó lựa chọn phiên bản
nào cho bạn cũng là cả một vấn đề. Vậy chúng ta tìm hiểu 2 phiên bản khác nhau này của Node.js theo
bảng so sánh sau:

Ý nghĩa phiên bản

Bùi Hữu Hiệu

LTS( Long-Tern Support)

Current( Latest)

Trong quản lý vòng đời sản
phẩm việc phát hành ổn định
phần mềm máy tính được duy trì
trong một khoảng thời gian dài

Là phiên bản hiện tại mới nhất
được sử dụng để phát triển. Đây
cũng được coi là một phiên bản
tiêu chuẩn của Node.js

Hồ Quang Linh


14
hơn phiên bản tiêu chuẩn. Thuật
ngữ này thường được dành riêng
cho phần mềm nguồn mở, trong
đó nó mơ tả một phiên bản phần
mềm được hỗ trợ trong nhiều
tháng hoặc nhiều năm hơn phiên
bản tiêu chuẩn của phần mềm.

Cách thức sử dụng

1.2.

Thông thường phiên bản này
dùng để chạy các sản phẩm phần
mềm (sau khi phát triển) vì phiên
bản này đã ổn định và ít lỗi nhất

Thơng thường phiên bản này
dùng để chạy các sản phẩm phần
mềm (sau khi phát triển) vì phiên
bản này đã ổn định và ít lỗi nhất

Khái niệm Nodejs

Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên Javascript Runtime của
Chrome mà chúng ta có thể xây dựng được các ứng dụng mạng một cách nhanh chóng và dễ dàng mở
rộng.
Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa
Kỳ.
Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao.
Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực.
Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ,
hoặc tạo ra các dự án Startup nhanh nhất có thể.

1.3.

Những ứng dụng có thể được viết bằng Nodejs

Websocket server: Các máy chủ web socket như là Online Chat, Game Server…
Fast File Upload Client: là các chương trình upload file tốc độ cao.
Ad Server: Các máy chủ quảng cáo.
Cloud Services: Các dịch vụ đám mây.
RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng khác thông qua API.

Bùi Hữu Hiệu

Hồ Quang Linh


15
Any Real-time Data Application: bất kỳ một ứng dụng nào có yêu cầu về tốc độ thời gian thực. Micro
Services: Ý tưởng của micro services là chia nhỏ một ứng dụng lớn thành các dịch vụ nhỏ và kết nối
chúng lại với nhau. Nodejs có thể làm tốt điều này.

2. Bootstrap
2.1.

Bootstrap là gì



2.2.

Bootstrap là 1 framework HTML, CSS, và JavaScript cho phép người dùng dễ dàng
thiết kế website theo 1 chuẩn nhất định, tạo các website thân thiện với các thiết bị
cầm tay như mobile, ipad, tablet,…
Bootstrap bao gồm những cái cơ bản có sẵn như: typography, forms, buttons, tables,
navigation, modals, image carousels và nhiều thứ khác. Trong bootstrap có thêm

nhiều Component, Javascript hỗ trợ cho việc thiết kế reponsive của bạn dễ dàng,
thuận tiện và nhanh chóng hơn.

Tại sao nên sử dụng Bootstrap






2.3.

Bootstrap là một trong những framework được sử dụng nhiều nhất trên thế giới để xây
dựng nên một website. Bootstrap đã xây dựng nên 1 chuẩn riêng và rất được người
dùng ưa chuộng. Chính vì thế, chúng ta hay nghe tới một cụm từ rất thông dụng
"Thiết kế theo chuẩn Bootstrap".
Rất dễ để sử dụng: Nó đơn giản vì nó được base trên HTML, CSS và Javascript chỉ
cẩn có kiến thức cơ bản về 3 cái đó là có thể sử dụng bootstrap tốt.
Responsive: Bootstrap xây dựng sẵn reponsive css trên các thiết bị Iphones, tablets, và
desktops. Tính năng này khiến cho người dùng tiết kiệm được rất nhiều thời gian
trong việc tạo ra một website thân thiện với các thiết bị điện tử, thiết bị cầm tay.
Tương thích với trình duyệt: Nó tương thích với tất cả các trình duyệt (Chrome,
Firefox, Internet Explorer, Safari, and Opera). Tuy nhiên, với IE browser, Bootstrap
chỉ hỗ trợ từ IE9 trở lên. Điều này vơ cùng dễ hiểu vì IE8 khơng support HTML5 và
CSS3.

Các cách để download bootstrap
Có 2 cách để bạn có thể sử dụng Bootstrap trên web của bạn.
 Download Bootstrap packet từ getbootstrap.com
 Thêm Bootstrap từ CDN

Bùi Hữu Hiệu

Hồ Quang Linh


16

2.4.

Các version của boostrap:

Hiện tại Bootstrap đang có version mới nhất là 5.0. Bootstrap 5.0 ở thời điểm hiện tại vẫn
cịn ở trong thời kì alpha. Nhìn chung Bootstrap 5.0 đã có sự cải tiến hồn chỉnh hơn rất
nhiều so với version 4. Một vài điểm mới ở bootstrap 5 như
 Giao diện trang Docs đã được thay đổi toàn diện hơn. Người dùng có cơ hội trải
nghiệm giao diện thân thiện.
 Thay đổi jQuery và JavaScript: Version 5 không cịn dùng jQuery nữa. Từ đó, tốc
độ load trang sẽ nhanh hơn. Code được nâng cao chất lượng bỏi Javasript
 Những thuộc tính tuỳ chỉnh của CSS
 Cập nhật Form

Bùi Hữu Hiệu

Hồ Quang Linh


17

3. SCSS, SASS

3.1.

CSS Preprocessor là gì?


CSS Preprocessors là ngơn ngữ tiền xử lý CSS. Nó có cơng dụng sẽ giúp bạn viết
một cú pháp CSS gần nhau với một ngôn ngữ lập trình rồi compile nó ra CSS thuần.
 Có rất nhiều CSS Preprocessor như SASS, LESS, Stylus,..
SASS là gì

3.2.

SASS (Syntactically Awesome StyleSheets) là một CSS Preprocessor giúp bạn viết CSS
nhanh hơn và có cấu trúc rõ ràng hơn. Với SASS, bạn có thể viết CSS theo thứ tự rõ ràng,
quản lý các biến đã được định nghĩa sẵn, các class dùng chung hay có thể tự động nén tập tin
CSS lại để bạn tiết kiệm dung lượng.



3.3.
SCSS là gì
SCSS được thiết kế và viết bởi các lập trình viên Ruby. Bởi vậy, Scss stylesheets sử dụng cú
pháp giống như Ruby với việc khơng có các dấu ngoặc nhọn {}, dấu chấm phẩy.
Sass giống như vậy cho đến khi phiên bản 3.0 được phát hành vào tháng 5/2010, nó giới thiệu
một cú pháp mới được gọi là SCSS (Sassy CSS). Cú pháp này nhằm thu hẹp khoảng cách giữa
Sass và CSS bằng cách mang tới một cú pháp thân thiện với CSS. Hiểu 1 cách đơn giản, SCSS
là một bản nâng cấp của SASS giúp chúng ta viết CSS một cách dễ dàng và dễ hiểu hơn.
3.4.
Nested Rule
Đây là một tính năng được sử dụng rất thường xuyên. Cho một đoạn code mẫu như sau

Nếu sử dụng Nested route của SCSS chúng ta có thể viết như sau

Bùi Hữu Hiệu

Hồ Quang Linh


18

Và khi biên dịch ra CSS ta sẽ thu được



Biến – variable

Sử dụng biến với SCSS vô cùng cơ bản, bạn chỉ cần đặt tên cho biến – bắt đầu bằng $. Biến chứa đựng
các giá trị mà chúng ta dùng nhiều lần ví dụ như mã màu, font hay kiểu chữ.


Quy tắc Mixin

Mixin giúp bạn tạo các hàm được sử dụng trong SCSS, bạn hồn tồn có thể truyền các tham số vào bên
trong nó để sử dụng.

Bùi Hữu Hiệu

Hồ Quang Linh

19
Mixin là một cơ chế khá phổ biến trong SASS. Cơng dụng của nó là mang nhiều thuộc tính mà bạn đã
quy ước trong một mix nào đó rồi @include vào một thành phần bất kỳ mà không cần phải viết lại các
thuộc tính đó (Ví dụ ở trên là color vs font-style)


Kế thừa – Extends

Khi nghe đến extends hay còn gọi là kế thừa. Cách làm sẽ là bạn định nghĩa ra 1 class, rồi những tag
nào cần thì @extend nó vào là xong.

4. Restful Api
RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng web (thiết kế Web
services) để tiện cho việc quản lý các resource. Nó chú trọng vào tài nguyên hệ thống (tệp văn bản, ảnh,
âm thanh, video, hoặc dữ liệu động…), bao gồm các trạng thái tài nguyên được định dạng và được
truyền tải qua HTTP.

API (Application Programming Interface) là một tập các quy tắc và cơ chế mà theo đó, một ứng dụng
hay một thành phần sẽ tương tác với một ứng dụng hay thành phần khác. API có thể trả về dữ liệu mà
bạn cần cho ứng dụng của mình ở những kiểu dữ liệu phổ biến như JSON hay XML.
REST (REpresentational State Transfer) là một dạng chuyển đổi cấu trúc dữ liệu, một kiểu kiến trúc để
viết API. Nó sử dụng phương thức HTTP đơn giản để tạo cho giao tiếp giữa các máy. Vì vậy, thay vì sử
dụng một URL cho việc xử lý một số thông tin người dùng, REST gửi một yêu cầu HTTP như GET,
POST, DELETE, vv đến một URL để xử lý dữ liệu.
RESTful API là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng dụng web để quản lý các
resource. RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến ngày nay để cho các
ứng dụng (web, mobile…) khác nhau giao tiếp với nhau.

Bùi Hữu Hiệu

Hồ Quang Linh


20
Chức năng quan trọng nhất của REST là quy định cách sử dụng các HTTP method (như GET, POST,
PUT, DELETE…) và cách định dạng các URL cho ứng dụng web để quản các resource. RESTful
không quy định logic code ứng dụng và khơng giới hạn bởi ngơn ngữ lập trình ứng dụng, bất kỳ ngơn
ngữ hoặc framework nào cũng có thể sử dụng để thiết kế một RESTful API.
RESTful hoạt động như thế nào?

REST hoạt động chủ yếu dựa vào giao thức HTTP. Các hoạt động cơ bản nêu trên sẽ sử dụng những
phương thức HTTP riêng.
GET (SELECT): Trả về một Resource hoặc một danh sách Resource.
POST (CREATE): Tạo mới một Resource.
PUT (UPDATE): Ghi đè thông tin cho Resource.
PATCH(UPDATE): Update một phần thơng tin cho Resource
DELETE (DELETE): Xố một Resource.
Các Status code
Khi chúng ta request một API nào đó thường thì sẽ có vài status code để nhận biết sau:







200 OK – Trả về thành công cho những phương thức GET, PUT, PATCH hoặc DELETE.
201 Created – Trả về khi một Resouce vừa được tạo thành công.
204 No Content – Trả về khi Resource xố thành cơng.
304 Not Modified – Client có thể sử dụng dữ liệu cache.

400 Bad Request – Request khơng hợp lệ
401 Unauthorized – Request cần có auth.

Bùi Hữu Hiệu

Hồ Quang Linh