DEV Community

Nguyen Thien Ly
Nguyen Thien Ly

Posted on

Intergrate jade into typescript expressjs

#typescript #node #googleapi #darksky

Mục lục

  1. Vấn đề
  2. Jade là gì ?
  3. Cài đặt thư mục static (express) và dùng jade trong typescript và
  4. Cài đặt package coppyfiles
  5. Tạo Key api trong google và chèn map google vào html của bạn
  6. Embed map dark-sky vào html của bạn
  7. Kết bài

0. Vấn đề

Heyzo what's up

Xin chào mọi người hôm này mình sẽ demo thằng Jade một template engines dùng cho Nodejs để render html, css, js nhé

Khi bạn cài đặt được thằng Jade này rồi thì những thằng Pug, handlebars, ejs tương tự thôi nhé

Nào cùng bắt đầu thôi :v

1. Jade là gì?

Jade is a template engine for Node.js. Jade syntax is easy to learn. It uses whitespace and indentation as a part of the syntax.

Trên là định nghĩa nha (đọc thêm ở đây), nếu bạn nào dùng Pug (đọc thêm ở đây) rồi thì hai thằng này khá giống nhau đó

Dưới đây là cú pháp của thằng Jade nha

index.jade

doctype html
html
    head
        title Jade Page
    body
        h1 This page is produced by Jade engine
        p some paragraph here..

html dưới đây sau khi chuyển thành jade thì nó ra ở trên nha

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Jade Page</title>
</head>
<body>
    <h1>This page is produced by Jade engine</h1>
    <p>some paragraph here..</p>
</body>
</html>

Lúc code mình cứ code html như thường. Code xong coppy hết đống code đó dán vào đây. Như vậy là chạy ngon luôn

2. Cài đặt thư mục static (express) trong typescript

Khi bạn code một trang html thông thường bạn sẽ có file .css hay .js phải không nào, vậy thì khi sài express bạn sẽ để chúng ở đâu để các file .jade có thể sử dụng được. Câu trả lời là sử dụng express.static một middle function trong expressjs

Cách cài đặt trong typescript dưới đây nhé, giờ mình bỏ hết các file .js, .css vào thư mục public

app.ts

   this.app.use(express.static(path.join(__dirname, 'public')));

   this.app.set('views',path.join(__dirname, 'views')); // Các template engine khác tương tự nhé
   this.app.set("view engine","jade");
   // Mà nhớ là thằng expressjs nó sẽ đi tìm mặc định thư mục views nên nhớ nhét đống file .jade đúng chỗ coi chừng không chạy được đâu :V

Mọi người chú ý là dùng __dirname để lấy đường dẫn tuyệt đối nhé chứ không có khi code không chạy không biết tại sao đâu :v, xong rồi

3. Cài đặt package coppyfiles

Thông thường thì thằng tsc nó chỉ nhận diện các file .ts và chuyển vào thư mục hết đống code ..ts đó ra .js. Vì thế nếu trong thư src (Thư mục chứa code) có file định kiểu .html, .js, .jade thì chúng ta phải coppy bằng tay khá là lằng nhằng. Vì vậy mình xài một package chuyên làm việc này nhá đó là coppyfiles (Đọc thêm ở đây)

Làm tuần tự theo dưới đây nhé

Gõ vào command line

npm i -d copyfiles

Giờ vào file package.json để cấu hình như sau

"jade": "copyfiles -u 1 src/**/*.jade build/" // Cái này cấu hình cho em .jace mà mình đang sài nè

"public": "copyfiles -u 1 src/**/**/*.css src/**/**/*.js src/**/*.html build/" // Cái cuối cùng cấu hình cho nguyên cái thư mục static mình cài ở trên nè :v

Xong rồi, mà nhớ lúc chạy, sau khi cho thằng tsc đưa hết các file .ts sang js rồi, thì gõ lệnh mình đã cài ở trên

npm run jade
npm run public

4. Tạo Key api trong google và chèn map google vào html của bạn

Cái bước này thì cũng dễ thôi vì api của anh google là dễ xài nhất rồi (Các bước ở đây) nhưng có vài chú ý anh em để ý hộ mình nha.

  • Search Maps JavaScript API để check xem nó đã enable chưa nhé vì mình sài google maps mà không bật nó lên không sài được đâu

  • Vào mục Credentials của phần API và Services, chọn api_key vừa tạo => Application restrictions => HTTP referrers(web site) => Thêm địa chỉ mà mình dùng để dev nhé

http://127.0.0.1:5500 // Cái này chạy live server khi code html, css

http://127.0.0.1:9001 // Cái này chạy web app với express nè

Cuối cùng anh em đọc bài này là show lên được rồi á nha (Mà hình như chỉ dev được thôi chứ không dùng product với dạng free này)

5. Embed map dark-sky vào html của bạn

Thằng dark-sky (đọc thêm ở đây) này rất hay đó :v, ai muốn làm ứng dụng dự báo thời tiết thì cực ngon rồi, có hỗ trợ API và dùng free cho dev luôn

Mà mình lúc đầu không tích hợp được map nó vào trong website của mình (Đọc được chính sách nó không cho sài luôn :v), search hồi thấy người khác sài được nên mình mạng phép lấy cái embed này share cho anh em nha, cứ thả vào là chạy quá ngon

  <iframe style="height: 100%;" src="https://maps.darksky.net/@temperature,34.595,20.013,undefined?embed=true&amp;timeControl=true&amp;fieldControl=true&amp;defaultField=temperature&amp;defaultUnits=_f" width="100%" height="150" frameborder="0"></iframe>

6. Kết bài

Bài viết này mình viết theo xu hướng là giữ lại kiến thức cho bản thân và share cho nhưng ai đã làm được phần nào project expressjs có sài template engines rồi nha có gì khó hiểu mong mọi người bỏ qua cho cảm ơn mọi người rất nhiều

Link tham khảo:

Top comments (0)

Read next

anmolbaranwal profile image

10 Best Developer Tools to Make Backend Development Easier 👩‍💻 🚀

Anmol Baranwal -

gowtham06 profile image

How to Integrate HashiCorp Vault with Node.js: Securely Manage Sensitive Data

Gowtham S -

alisamir profile image

DRY (Don't Repeat Yourself) in Programming ⚡️

Ali Samir -

imranshaik012 profile image

Different ways to create Objects in Javascipt

Imran Shaik -