Xây dựng app theo dõi covid bằng NodeJS – Phần 1

Tạo Package.json và cài đặt những thứ cần thiết NodeJS

Bất kỳ ứng dụng NodeJS đều được bắt đầu bằng cách tạo tệp `package.json`. Tập tin này lưu giữ tất cả các dependencies được sử dụng trong ứng dụng của bạn và mọi thông tin về project của bạn.

Điều này rất cần thiết vì bạn không thể tải lên tất cả các mô-đun đã cài đặt với Github hoặc GitLab. Vì vậy, sử dụng tập tin này, bạn có thể cài đặt tất cả dependencies.

Bạn có thể tạo tập tin như vậy bằng cách viết lệnh sau trong terminal

npm init

Bây giờ, hãy cho phép cài đặt Express và một số gói npm hữu ích khác bằng lệnh

npm install express nodemon mongoose

mongoose là package object mô hình cho NodeJS giúp kết nối với MongoDB và tạo mô hình cho CSDL

nodemon là công cụ giúp phát triển dựa trên NodeJS bằng cách tự động khởi động lại app khi phát hiện thay đổi tệp trong thư mục.

Bạn có thể kiểm tra ‘package.json và thấy các packages cài đặt đã được lưu trữ.

Tạo server Express và viết route đầu tiên sử dụng NodeJS

Sau khi cài đặt Express, chúng ta bắt đầu viết route đầu tiên bằng express trong tệp app.js.

// Importing express vào app
const express = require(‘express’);
// Khởi tạo express app
const app = express.app();
//Tạo route
app.get(‘/’, (req,res) => {
 res.send(“Hello World. This is my first route in express!”)
});
// Start listening ở port 3000.
app.listen(3000, () => console.log(‘Server Up And Running. Listening On Port 3000’) );

Bây giờ, chúng ta có thể chạy tập lệnh này với đoạn lệnh sau

node app.js

Như đã đề cập trước đây, chúng ta sẽ sử dụng nodemon luôn cập nhật thay đổi trong source code. Và thêm lệnh sau vào package.json

“start”: “nodemon app.js”

Chỉ cần gõ lệnh npm start và nodemon sẽ chạy máy chủ khi thay đổi bất kỳ tệp nào trong dự án.

Sau đó, truy cập http: //localhost: 3000. Bạn có thể thấy máy chủ hoạt động. Và response với route index (’/’) trên NodeJS

Nhưng không chỉ muốn gửi responses một dòng trong trang web mà chúng ta muốn gửi các trang html cho người dùng. Chúng ta có thể làm như vậy bằng cách render tệp HTML bằng nhiều công cụ mẫu khác nhau như Jade, EJS, Pug, Mustache,

Render HTML sử dụng EJS

Để sử dụng EJS, đầu tiên chúng ta phải cài đặt EJS bằng npm.

npm install ejs express-ejs-layouts

Package express-ejs-layouts giúp chúng ta tạo các khối mã HTML và sử dụng chúng trong các tệp HTML khác nhau để giảm sự dư thừa code. Ví dụ. chúng ta có thể tạo một bố cục cơ bản trong đó tạo cấu trúc HTML cơ bản và sau đó không cần lặp lại các thẻ `head, title, meta, body` trong mỗi tệp.

Để sử dụng EJS và express-ejs-layout, chúng ta sẽ phải thêm các dòng sau vào tệp app.js

const expressLayouts = require(‘express-ejs-layouts’);
app.set(‘view engine’, ‘ejs’);
app.use(expressLayouts);

Chúng ta có thể render các tệp HTML vào ứng dụng và có thể sử dụng các biến trong mã HTML của mình.

Chúng ta có thể viết mã HTML trong response route của mình, nhưng chờ đã, chúng ta không nên kết hợp giao diện người dùng của chúng ta với back-end trong cùng một tệp phải không?

Bởi vì, điều đó sẽ làm cho công việc debug bị phá vỡ và code sẽ không thể đọc được.

Ngoài ra, cũng không viết route trong tệp app.js này vì lý do tương tự như trên. Vì vậy, bây giờ là thời điểm tốt để cơ cấu lại code trước khi nó trở nên khó kiểm soát

Tái cấu trúc thư mục Project COVID

Cấu trúc thư mục là rất quan trọng trong bất kỳ project. Do đó, chúng ta sẽ chọn thực tiễn tốt nhất để tạo cấu trúc dự án.

Dưới đây là thư mục dự án tái cấu trúc.

Chúng ta phải thực hiện một số thay đổi trong tệp app.js. Và đặt thư mục views để máy chủ biết nơi tìm kiếm các tệp HTMLmuốn render. Sau đó viết route trong tệp app.js. Hãy thay đổi file app.js như sau

// Importing express in our app
const express = require(‘express’);
// Khởi tạo app express
const app = express.app();
const expressLayouts = require(‘express-ejs-layouts’);
app.set(‘views’,__dirname + ‘/views’);
app.set(‘view engine’, ‘ejs’);
app.use(‘expressLayouts’);
// Tạo Route
require(‘./routes/index’)(app);
// Started listening ở port 3000.
app.listen(3000, () => console.log(‘Server Up And Running. Listening On Port 3000’) );

Phải export mô-đun đã tạo cho route index (’/’) bằng cách sử dụng module.exports.

module.exports = {
 app.get(‘/’(req,res) => {
 res.render(‘index.ejs’);
 });
}

Sử dụng Router Middle-ware để serve route có cùng tiền tố(prefix) là cách tốt nhất trong một ứng dụng Express.

Kết luận

Hãy tiếp tục theo dõi phần tiếp theo để có thể xây dựng app hoàn chỉnh sử dụng NodeJS.

Tham khảo thêm NodeJS tại đây : NodeJS là gì? ExpressJS là gì ? Từng bước tạo ứng dụng chat trên NodeJS

HocWeb VN

Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.

Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.