Xây dựng ứng dụng web với NodeJS + ExpressJS

Hãy mở ra cánh cửa thế giới lập trình NodeJS và bắt đầu xây dựng một ứng dụng web đơn giản với NodeJS và ExpressJS.

Trước khi bắt đầu viết code, chúng ta cần tìm hiểu về những công cụ và thư viện được sử dụng trong bài viết.

ExpressJS là gì?

ExpressJS là một web framework được xây dựng trên nền tảng NodeJS. Nó cung cấp các hàm HTTP và middlewares để tạo ra API đơn giản và dễ sử dụng.

ExpressJS là một framework mã nguồn mở, có cộng đồng hỗ trợ lớn và được phép sử dụng cho ứng dụng thương mại. Bạn có thể yên tâm sử dụng framework này cho dự án của mình, từ nhỏ đến lớn.

Cấu trúc thư mục dự án khi sử dụng ExpressJS được chia thành 3 phần: routes, views và public. ExpressJS xây dựng ứng dụng web theo mô hình MVC (Model-View-Controller).

Một số chức năng chính của ExpressJS:

• Hỗ trợ middlewares để xử lý các HTTP request
• Định nghĩa route dựa trên các action của HTTP (CRUD)
• Cho phép trả về các trang HTML sử dụng các template engine (jade, pug...)

Để tạo ứng dụng web với NodeJS cần những gì?

Nếu bạn đã biết Javascript nhưng chỉ sử dụng trong ứng dụng front-end, thì bài viết này sẽ giúp bạn tiếp cận NodeJS.

Trong các ngôn ngữ lập trình , Javascript là một ngôn ngữ đa năng nhất hiện nay. Bạn có thể sử dụng Javascript để xây dựng ứng dụng từ front-end đến back-end, từ mobile đến web...

Trước khi bắt đầu, bạn cần cài đặt NodeJS và NPM. Nếu chưa cài đặt, hãy làm theo hướng dẫn để cài đặt Node.js.

Hãy chắc chắn bạn cài đặt thành công Node.js và NPM bằng cách kiểm tra phiên bản của chúng bằng terminal:

node -v npm -v

Mình tin là bạn có thể làm việc tốt với bất kỳ phiên bản Node.js và NPM nào. Tuy nhiên, nếu gặp bất kỳ lỗi nào, hãy nâng cấp Node.js và NPM lên phiên bản mới nhất.

Giới thiệu ứng dụng web với NodeJS sẽ xây dựng trong bài viết

Để giúp bạn làm quen với NodeJS và ExpressJS, chúng ta sẽ xây dựng một ứng dụng web cơ bản có trang chủ và một số trang con.

Ứng dụng này sử dụng framework Express.js và render HTML bằng thư viện Pug (trước đây có tên là Jade).

Dưới đây là giao diện ứng dụng web sau khi hoàn thành bài viết.

Để khởi tạo ứng dụng, bạn có thể sử dụng lệnh của NPM hoặc tải về dự án đã được tạo sẵn.

npm init

Sau khi tải về, bạn cần cài đặt toàn bộ thư viện cần thiết bằng lệnh:

npm install

Tiếp theo, bạn cần import và khởi tạo Express.js trong file server.js:

const express = require('express'); const app = express();

Hàm express() là hàm cao nhất được exported bởi module express.

Tiếp theo, chúng ta sẽ tạo một server để chạy website. Mặc định, server sẽ chạy trên port 7000, nhưng bạn có thể đổi port sang bất kỳ port nào khác.

const server = app.listen(7000, () => {   console.log(`Express running → PORT ${server.address().port}`); });

Chúng ta thử start server để kiểm tra. Từ terminal, bạn gõ lệnh sau:

node server.js

Khi server đã khởi động thành công, bạn có thể truy cập vào địa chỉ: http://localhost:7000 để xem trang chủ. Tuy nhiên, bạn sẽ nhận được thông báo lỗi "Cannot GET /" vì chưa định nghĩa router cho trang chủ. Hãy tiến hành định nghĩa router như sau:

app.get('/', (req, res) => {   res.send('Hello World!'); });

Router trên có nghĩa là khi bạn truy cập vào trang chủ ("/") bằng phương thức GET, server sẽ trả về một message là "Hello World!".

Sau khi định nghĩa router xong, khởi động lại server để thay đổi code có hiệu lực.

Sử dụng pm2 để tự khởi động server khi thay đổi code

Mỗi lần thay đổi code, bạn phải khởi động lại server để code mới có hiệu lực. Để tiết kiệm thời gian phát triển ứng dụng, chúng ta có thể sử dụng công cụ giúp tự động khởi động lại server mỗi khi thay đổi code.

Trong bài viết này, mình sẽ sử dụng pm2, một công cụ hiệu quả để làm việc này.

Trước tiên, chúng ta cần cài đặt pm2:

npm install -g pm2

Sau đó, thêm script vào file package.json:

"scripts": {   "start": "pm2 start server.js -watch" }

Cuối cùng, chạy lại server bằng lệnh:

npm start

Từ bây giờ trở đi, bạn có thể thoải mái thay đổi code mà không cần khởi động lại server. Thật tiện lợi, phải không?

Rendering HTML sử dụng Pug

Thường thì khi người dùng truy cập vào một URL của website, server sẽ trả về một trang HTML. Thay vì chỉ trả về một file HTML cố định, chúng ta có thể sử dụng template engine để render các file HTML.

Template engine cho phép chúng ta tạo một template HTML và thay thế các biến trong template bằng giá trị thực tế khi trả về cho người dùng. Điều này giúp chúng ta tái sử dụng template hiệu quả hơn.

Trong bài viết này, chúng ta sẽ sử dụng Pug (trước đây có tên là Jade), một template engine phổ biến. Tuy nhiên, bạn cũng có thể sử dụng template engine khác như EJS, Mustache...

Để sử dụng Pug, chúng ta cần cài đặt thư viện pug:

npm install pug

Sau đó, cấu hình Pug trong server.js:

app.set('view engine', 'pug');

Trong ExpressJS, các template HTML được đặt trong thư mục views. Trong ví dụ này, chúng ta sẽ tạo một file template có tên là index.pug:

html   head     title #{title}   body     main       h1 #{title}

Để render template này khi người dùng truy cập vào trang chủ, chúng ta sửa router như sau:

app.get('/', (req, res) => {   res.render('index', { title: 'Homepage' }); });

Kết quả thu được là trang chủ hiển thị "Homepage".

Xây dựng giao diện và logic của ứng dụng web

Đến đây, bạn đã có kiến thức cơ bản về ExpressJS và template engine. Bây giờ, chúng ta sẽ xây dựng giao diện và logic của ứng dụng web như đã trình bày ở đầu bài viết.

Đầu tiên, chúng ta sẽ tạo giao diện trang chủ bằng template default.pug:

doctype html html   head     title #{title}     link(rel='stylesheet', href='/css/style.css')     meta(name="viewport", content="width=device-width, initial-scale=1")   body     main       block header     block content

Tiếp theo, tạo template index.pug:

extends default  block header  block content   div.container     each person in people       div.person         div.person-image(style=`background: url('/images/${person.imgSrc}') top center no-repeat; background-size: cover;`)         h2.person-name | #{person.firstname} #{person.lastname}         a(href=`/profile?id=${person.id}`) | View Profile

Sau đó, sửa lại router cho trang chủ:

app.get('/', (req, res) => {   res.render('index', { title: 'Homepage', people: people.profiles }); });

Cuối cùng, chúng ta cần làm việc với static content để sử dụng CSS và hình ảnh trong ứng dụng. Thêm đoạn code sau vào server.js:

app.use(express.static(__dirname + '/public'));

Kết quả là giao diện trang chủ hiển thị danh sách những người có trong file people.json:

Để chi tiết thấy thông tin của mỗi người, bạn cần tạo router cho trang profile và template profile.pug:

app.get('/profile', (req, res) => {   const person = people.profiles.find(p => p.id === req.query.id);   res.render('profile', { title: `About ${person.firstname} ${person.lastname}`, person }); });

extends default  block content   div.profile     div.profile-image(style=`background: url('/images/${person.imgSrc}') top center no-repeat; background-size: cover;`)     div.profile-details       h1.profile-name | #{person.firstname} #{person.lastname}       h2.profile-tagline | #{person.tagline}       p.profile-bio | #{person.bio}       a.button.button-twitter(href=`${person.twitter}`) | Follow me on Twitter

Với các thay đổi trên, bạn có thể refesh lại trình duyệt và xem kết quả bằng cách click vào từng profile.

Tạm kết

Như vậy, qua bài viết này, mình đã hướng dẫn bạn xây dựng một ứng dụng web đơn giản với NodeJS và ExpressJS.

Ban đầu có thể bạn sẽ thấy khá mới mẻ khi tiếp cận với NodeJS, nhưng khi đã quen, bạn sẽ thấy rằng nó thực sự tuyệt vời.

Mình hi vọng rằng bài viết đã hữu ích cho bạn. Nếu bạn muốn đọc thêm, hãy xem thêm bài viết "Tạo RESTful APIs với NodeJS".

Đừng quên chia sẻ bài viết để mọi người cùng học tập và trải nghiệm!